mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-27 14:20:58 +00:00
481 lines
14 KiB
TypeScript
481 lines
14 KiB
TypeScript
import { useEffect, useMemo, useState } from "react";
|
|
import { Loader2, Calendar, ShieldCheck } from "lucide-react";
|
|
import {
|
|
Alert,
|
|
Badge,
|
|
Button,
|
|
Group,
|
|
Modal,
|
|
NumberInput,
|
|
Select,
|
|
MultiSelect,
|
|
SimpleGrid,
|
|
Stack,
|
|
Text,
|
|
Textarea,
|
|
TextInput,
|
|
ActionIcon,
|
|
} from "@mantine/core";
|
|
|
|
import {
|
|
FLEET_SELECT_NONE,
|
|
type FleetFormFieldDef,
|
|
} from "@/pages/fleet/config/resources";
|
|
import type { FleetRecord } from "@/services/fleet/fleet.service";
|
|
import {
|
|
verifaydaService,
|
|
type FaydaCallbackMessage,
|
|
} from "@/services/verifayda.service";
|
|
|
|
export interface FleetFormDialogProps {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
title: string;
|
|
fields: FleetFormFieldDef[];
|
|
initialRecord?: FleetRecord | null;
|
|
emptyValues: Record<string, unknown>;
|
|
isSubmitting: boolean;
|
|
selectOptionsLoading?: boolean;
|
|
onSubmit: (values: Record<string, unknown>) => void;
|
|
/**
|
|
* Show a "Verify with Fayda" step: opens the eSignet popup and prefills
|
|
* firstName/lastName/email/phoneNumber/dateOfBirth from the verified
|
|
* identity, stamping faydaVerified + faydaSub on the payload.
|
|
*/
|
|
verifyWithFayda?: boolean;
|
|
}
|
|
|
|
const buildInitialValues = (
|
|
fields: FleetFormFieldDef[],
|
|
emptyValues: Record<string, unknown>,
|
|
record?: FleetRecord | null,
|
|
): Record<string, unknown> => {
|
|
const values: Record<string, unknown> = { ...emptyValues };
|
|
if (!record) return values;
|
|
|
|
fields.forEach((field) => {
|
|
const raw = (record as unknown as Record<string, unknown>)[field.name];
|
|
if (raw === null || raw === undefined) {
|
|
values[field.name] = field.noneOption ? FLEET_SELECT_NONE : "";
|
|
return;
|
|
}
|
|
// For selects, snap the record value onto a real option even if its casing
|
|
// drifted (e.g. an API/seed value of "Available" vs the "AVAILABLE" option).
|
|
// Otherwise the Select renders blank and a required field fails on submit.
|
|
if (field.type === "select" && field.options?.length) {
|
|
const match = field.options.find(
|
|
(o) => String(o.value).toLowerCase() === String(raw).toLowerCase(),
|
|
);
|
|
values[field.name] = match ? match.value : raw;
|
|
return;
|
|
}
|
|
values[field.name] = raw;
|
|
});
|
|
return values;
|
|
};
|
|
|
|
const FleetFormDialog = ({
|
|
open,
|
|
onOpenChange,
|
|
title,
|
|
fields,
|
|
initialRecord,
|
|
emptyValues,
|
|
isSubmitting,
|
|
selectOptionsLoading,
|
|
onSubmit,
|
|
verifyWithFayda,
|
|
}: FleetFormDialogProps) => {
|
|
const [values, setValues] = useState<Record<string, unknown>>({});
|
|
const [errors, setErrors] = useState<Record<string, string>>({});
|
|
const [faydaLoading, setFaydaLoading] = useState(false);
|
|
const [faydaError, setFaydaError] = useState<string | null>(null);
|
|
|
|
// Seed the form ONLY when the dialog opens or the edited record changes — NOT
|
|
// when `fields`/`emptyValues` get new object refs (they're rebuilt whenever the
|
|
// dynamic select options finish loading). Re-seeding on those would wipe the
|
|
// user's in-progress edits (e.g. a changed Current Yard / status) the moment
|
|
// the yard or wagon-type options resolve.
|
|
const recordId =
|
|
initialRecord && "id" in initialRecord ? String(initialRecord.id) : null;
|
|
useEffect(() => {
|
|
if (open) {
|
|
setValues(buildInitialValues(fields, emptyValues, initialRecord));
|
|
setErrors({});
|
|
setFaydaError(null);
|
|
setFaydaLoading(false);
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [open, recordId]);
|
|
|
|
// Receive the ?code&state relayed by the /callback popup, exchange it for
|
|
// the verified identity, and prefill the matching form fields.
|
|
useEffect(() => {
|
|
if (!open || !verifyWithFayda) return;
|
|
const onMessage = async (event: MessageEvent<FaydaCallbackMessage>) => {
|
|
if (event.origin !== window.location.origin) return;
|
|
if (event.data?.type !== "fayda-callback") return;
|
|
|
|
if (event.data.error) {
|
|
setFaydaLoading(false);
|
|
setFaydaError(event.data.errorDescription ?? event.data.error);
|
|
return;
|
|
}
|
|
if (!event.data.code || !event.data.state) return;
|
|
|
|
try {
|
|
const result = await verifaydaService.complete(event.data.code, event.data.state);
|
|
if (!result.verified) {
|
|
setFaydaError("Identity could not be verified");
|
|
return;
|
|
}
|
|
const nameParts = (result.fullName ?? "").trim().split(/\s+/).filter(Boolean);
|
|
const [firstName, ...rest] = nameParts;
|
|
setValues((current) => ({
|
|
...current,
|
|
...(firstName ? { firstName } : {}),
|
|
...(rest.length ? { lastName: rest.join(" ") } : {}),
|
|
...(result.email ? { email: result.email } : {}),
|
|
...(result.phoneNumber ? { phoneNumber: result.phoneNumber } : {}),
|
|
...(result.birthdate ? { dateOfBirth: result.birthdate } : {}),
|
|
faydaVerified: true,
|
|
...(result.iamUserId ? { faydaSub: result.iamUserId } : {}),
|
|
}));
|
|
setFaydaError(null);
|
|
} catch (err) {
|
|
const message =
|
|
(err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
|
|
(err instanceof Error ? err.message : "Verification failed");
|
|
setFaydaError(message);
|
|
} finally {
|
|
setFaydaLoading(false);
|
|
}
|
|
};
|
|
window.addEventListener("message", onMessage);
|
|
return () => window.removeEventListener("message", onMessage);
|
|
}, [open, verifyWithFayda]);
|
|
|
|
const handleFaydaVerify = async () => {
|
|
setFaydaError(null);
|
|
setFaydaLoading(true);
|
|
try {
|
|
const { authorizationUrl } = await verifaydaService.start();
|
|
const popup = window.open(
|
|
authorizationUrl,
|
|
"fayda-verify",
|
|
"width=480,height=760,noopener=no",
|
|
);
|
|
if (!popup) {
|
|
setFaydaLoading(false);
|
|
setFaydaError("Pop-up blocked — allow pop-ups for this site and retry.");
|
|
}
|
|
// Loading stays on until the popup posts back; reopening the dialog resets it.
|
|
} catch (err) {
|
|
setFaydaLoading(false);
|
|
const message =
|
|
(err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
|
|
(err instanceof Error ? err.message : "Could not start verification");
|
|
setFaydaError(message);
|
|
}
|
|
};
|
|
|
|
const faydaVerified = values.faydaVerified === true;
|
|
|
|
const shortFields = useMemo(
|
|
() => fields.filter((f) => f.type !== "textarea"),
|
|
[fields],
|
|
);
|
|
const longFields = useMemo(
|
|
() => fields.filter((f) => f.type === "textarea"),
|
|
[fields],
|
|
);
|
|
|
|
const validate = () => {
|
|
const next: Record<string, string> = {};
|
|
fields.forEach((field) => {
|
|
const value = values[field.name];
|
|
const stringValue =
|
|
typeof value === "string" ? value.trim() : String(value ?? "");
|
|
|
|
if (
|
|
field.required &&
|
|
(stringValue === "" || stringValue === FLEET_SELECT_NONE)
|
|
) {
|
|
next[field.name] = `${field.label} is required`;
|
|
}
|
|
|
|
// Validate date format (YYYY-MM-DD) - DatePicker ensures this
|
|
if (
|
|
field.type === "date" &&
|
|
stringValue &&
|
|
stringValue !== FLEET_SELECT_NONE
|
|
) {
|
|
const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
|
|
if (!dateRegex.test(stringValue)) {
|
|
next[field.name] = `${field.label} must be a valid date`;
|
|
} else {
|
|
const date = new Date(stringValue + "T00:00:00Z");
|
|
if (isNaN(date.getTime())) {
|
|
next[field.name] = `${field.label} is not a valid date`;
|
|
} else if (date > new Date()) {
|
|
next[field.name] = `${field.label} cannot be in the future`;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
setErrors(next);
|
|
return Object.keys(next).length === 0;
|
|
};
|
|
|
|
// Field types keyed by name, so the submit payload can coerce each value to the
|
|
// type the API expects (number columns come back from the API as strings like
|
|
// "24.00", which the DTO's @IsNumber rejects on an otherwise-unchanged save).
|
|
const fieldTypeByName = useMemo(() => {
|
|
const map: Record<string, FleetFormFieldDef["type"]> = {};
|
|
fields.forEach((f) => (map[f.name] = f.type));
|
|
return map;
|
|
}, [fields]);
|
|
|
|
const handleSubmit = () => {
|
|
if (!validate()) return;
|
|
const payload = Object.fromEntries(
|
|
Object.entries(values)
|
|
.map(([key, value]) => {
|
|
if (value === FLEET_SELECT_NONE || value === "")
|
|
return [key, undefined];
|
|
if (fieldTypeByName[key] === "number") {
|
|
const num = Number(value);
|
|
return [key, Number.isNaN(num) ? undefined : num];
|
|
}
|
|
return [key, value];
|
|
})
|
|
.filter(([, value]) => value !== undefined),
|
|
);
|
|
onSubmit(payload);
|
|
};
|
|
|
|
const renderField = (field: FleetFormFieldDef) => {
|
|
const value = values[field.name];
|
|
const error = errors[field.name];
|
|
|
|
if (field.type === "select") {
|
|
return (
|
|
<Select
|
|
key={field.name}
|
|
label={field.label}
|
|
data={field.options ?? []}
|
|
value={
|
|
value == null || value === ""
|
|
? field.noneOption
|
|
? FLEET_SELECT_NONE
|
|
: null
|
|
: String(value)
|
|
}
|
|
onChange={(next) =>
|
|
setValues((current) => ({ ...current, [field.name]: next ?? "" }))
|
|
}
|
|
error={error}
|
|
searchable
|
|
disabled={selectOptionsLoading}
|
|
rightSection={
|
|
selectOptionsLoading ? (
|
|
<Loader2 size={14} className="animate-spin" />
|
|
) : undefined
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (field.type === "multiselect") {
|
|
const arrayValue = Array.isArray(value)
|
|
? value
|
|
: typeof value === "string" && value
|
|
? [value]
|
|
: [];
|
|
|
|
return (
|
|
<MultiSelect
|
|
key={field.name}
|
|
label={field.label}
|
|
placeholder={field.placeholder || "Select options"}
|
|
data={field.options ?? []}
|
|
value={arrayValue.map(String)}
|
|
onChange={(next) =>
|
|
setValues((current) => ({ ...current, [field.name]: next }))
|
|
}
|
|
error={error}
|
|
searchable
|
|
clearable
|
|
disabled={selectOptionsLoading}
|
|
rightSection={
|
|
selectOptionsLoading ? (
|
|
<Loader2 size={14} className="animate-spin" />
|
|
) : undefined
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (field.type === "number") {
|
|
return (
|
|
<NumberInput
|
|
key={field.name}
|
|
label={field.label}
|
|
placeholder={field.placeholder}
|
|
value={value === "" || value == null ? "" : Number(value)}
|
|
onChange={(next) =>
|
|
setValues((current) => ({
|
|
...current,
|
|
[field.name]: next === "" ? "" : next,
|
|
}))
|
|
}
|
|
error={error}
|
|
disabled={field.disabled}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (field.type === "textarea") {
|
|
return (
|
|
<Textarea
|
|
key={field.name}
|
|
label={field.label}
|
|
placeholder={field.placeholder}
|
|
value={String(value ?? "")}
|
|
onChange={(e) =>
|
|
setValues((current) => ({
|
|
...current,
|
|
[field.name]: e.currentTarget?.value,
|
|
}))
|
|
}
|
|
error={error}
|
|
minRows={3}
|
|
disabled={field.disabled}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (field.type === "date") {
|
|
return (
|
|
<TextInput
|
|
key={field.name}
|
|
type="date"
|
|
label={field.label}
|
|
placeholder={field.placeholder || "YYYY-MM-DD"}
|
|
value={typeof value === "string" ? value.slice(0, 10) : ""}
|
|
onChange={(e) =>
|
|
setValues((current) => ({
|
|
...current,
|
|
[field.name]: e.currentTarget?.value ?? "",
|
|
}))
|
|
}
|
|
error={error}
|
|
disabled={field.disabled}
|
|
description={field.description || "Select a date"}
|
|
rightSection={
|
|
<ActionIcon size="sm" variant="subtle" color="green">
|
|
<Calendar size={16} />
|
|
</ActionIcon>
|
|
}
|
|
size="sm"
|
|
radius="md"
|
|
styles={{
|
|
input: {
|
|
borderColor: "var(--mantine-color-gray-3)",
|
|
backgroundColor: "var(--mantine-color-gray-0)",
|
|
transition: "all 200ms ease",
|
|
"&:focus": {
|
|
borderColor: "var(--mantine-color-green-5)",
|
|
backgroundColor: "var(--mantine-color-gray-1)",
|
|
},
|
|
},
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<TextInput
|
|
key={field.name}
|
|
label={field.label}
|
|
placeholder={field.placeholder}
|
|
description={field.description}
|
|
value={String(value ?? "")}
|
|
onChange={(e) =>
|
|
setValues((current) => ({
|
|
...current,
|
|
[field.name]: e.currentTarget?.value,
|
|
}))
|
|
}
|
|
error={error}
|
|
disabled={field.disabled}
|
|
/>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
opened={open}
|
|
onClose={() => onOpenChange(false)}
|
|
title={<Text fw={600}>{title}</Text>}
|
|
size="lg"
|
|
radius="lg"
|
|
centered
|
|
>
|
|
<Stack gap="md">
|
|
{verifyWithFayda && (
|
|
<Group justify="space-between" wrap="nowrap">
|
|
{faydaVerified ? (
|
|
<Badge
|
|
color="green"
|
|
variant="light"
|
|
size="lg"
|
|
leftSection={<ShieldCheck size={14} />}
|
|
>
|
|
Identity verified with Fayda
|
|
</Badge>
|
|
) : (
|
|
<Text size="sm" c="dimmed">
|
|
Verify the driver's identity with Fayda to prefill their details.
|
|
</Text>
|
|
)}
|
|
<Button
|
|
variant={faydaVerified ? "default" : "light"}
|
|
color="edr-green"
|
|
size="xs"
|
|
leftSection={<ShieldCheck size={14} />}
|
|
loading={faydaLoading}
|
|
onClick={handleFaydaVerify}
|
|
>
|
|
{faydaVerified ? "Re-verify" : "Verify with Fayda"}
|
|
</Button>
|
|
</Group>
|
|
)}
|
|
{verifyWithFayda && faydaError && (
|
|
<Alert color="red" variant="light">
|
|
{faydaError}
|
|
</Alert>
|
|
)}
|
|
<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
|
|
{shortFields.map(renderField)}
|
|
</SimpleGrid>
|
|
{longFields.map(renderField)}
|
|
<Group justify="flex-end" gap="sm" mt="sm">
|
|
<Button variant="default" onClick={() => onOpenChange(false)}>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
color="edr-green"
|
|
loading={isSubmitting}
|
|
onClick={handleSubmit}
|
|
>
|
|
Save
|
|
</Button>
|
|
</Group>
|
|
</Stack>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default FleetFormDialog;
|