diff --git a/apps/backoffice/src/app/features/certificate-requirements/components/DocumentRequirementEditorDrawer.tsx b/apps/backoffice/src/app/features/certificate-requirements/components/DocumentRequirementEditorDrawer.tsx index 9569913bc..387e1e5ba 100644 --- a/apps/backoffice/src/app/features/certificate-requirements/components/DocumentRequirementEditorDrawer.tsx +++ b/apps/backoffice/src/app/features/certificate-requirements/components/DocumentRequirementEditorDrawer.tsx @@ -1,5 +1,6 @@ import { useEffect, useState } from 'react'; import { + Alert, Button, Checkbox, Divider, @@ -12,6 +13,7 @@ import { Text, TextInput, } from '@mantine/core'; +import { IconInfoCircle } from '@tabler/icons-react'; import { useTranslation } from 'react-i18next'; import { BilingualInput, ModalFooter } from '@ema-platform/ui'; import { @@ -225,6 +227,20 @@ export function DocumentRequirementEditorDrawer({ title={{isNew ? t('certReq.doc.add', 'Add document requirement') : t('certReq.doc.edit', 'Edit document requirement')}} > + {personal && ( + } + title={t('certReq.doc.keyMatchTitle', 'Keys are what link this to a licence')} + > + {t( + 'certReq.doc.keyMatchBody', + 'An applicant who holds this document has it copied onto any licence application asking for a requirement with the same key. A key that matches nothing is still collected — it simply never fills a form by itself.', + )} + + )} + (list: T[], index: number, direction: -1 | 1): T[] { const target = index + direction; @@ -284,6 +285,8 @@ export function FormSchemaTab({ licenseType }: { licenseType: LicenseType }) { )} + + setSectionDrawer(null)} diff --git a/apps/backoffice/src/app/features/certificate-requirements/components/StaffRolesCard.tsx b/apps/backoffice/src/app/features/certificate-requirements/components/StaffRolesCard.tsx new file mode 100644 index 000000000..3ae229549 --- /dev/null +++ b/apps/backoffice/src/app/features/certificate-requirements/components/StaffRolesCard.tsx @@ -0,0 +1,443 @@ +import { useEffect, useMemo, useState } from 'react'; +import { + ActionIcon, + Badge, + Button, + Card, + Checkbox, + Divider, + Drawer, + Group, + Modal, + NumberInput, + Stack, + Text, + TextInput, + Title, +} from '@mantine/core'; +import { IconEdit, IconPlus, IconTrash } from '@tabler/icons-react'; +import { useTranslation } from 'react-i18next'; +import { BilingualInput, ModalFooter, PageLoader } from '@ema-platform/ui'; +import { + useCreateStaffRoleRequirementMutation, + useDeleteStaffRoleRequirementMutation, + useGetStaffRoleRequirementsQuery, + useLocalized, + useUpdateStaffRoleRequirementMutation, + type LicenseType, + type StaffEvidenceRequirement, + type StaffRoleRequirement, +} from '@ema-platform/api'; +import { useRequirementActions } from '../hooks/useRequirementActions'; + +const ROLE_KEY_PATTERN = /^[A-Za-z][A-Za-z0-9_]*$/; + +type Draft = Omit; + +function emptyDraft(sortOrder: number): Draft { + return { + roleKey: '', + name: { en: '', am: '' }, + minCount: 1, + maxCount: null, + requiresExperience: false, + minYearsExperience: null, + requiredEvidence: [], + sortOrder, + }; +} + +/** + * The staff a licence type demands, and the evidence each of them must + * supply — the wizard's Staff step, which lives in its own table rather than + * in `formSchema` and so had no editor at all: an administrator could see FF + * asking for two ERB-certified transit employees but could not change it + * without a re-seed. + * + * Rows save on confirm, like the document requirements tab — deliberately not + * folded into the schema draft above, whose "Save schema" button replaces one + * jsonb column in a single PUT. + */ +export function StaffRolesCard({ licenseType }: { licenseType: LicenseType }) { + const { t } = useTranslation(); + const localized = useLocalized(); + const run = useRequirementActions(); + + const { data, isLoading } = useGetStaffRoleRequirementsQuery(); + const [createRole, { isLoading: creating }] = useCreateStaffRoleRequirementMutation(); + const [updateRole, { isLoading: updating }] = useUpdateStaffRoleRequirementMutation(); + const [deleteRole] = useDeleteStaffRoleRequirementMutation(); + + const [editing, setEditing] = useState<{ role: StaffRoleRequirement | null } | null>(null); + const [deleteTarget, setDeleteTarget] = useState(null); + + const roles = useMemo( + () => + (data?.items ?? []) + .filter((r) => r.licenseTypeId === licenseType.id) + .slice() + .sort((a, b) => a.sortOrder - b.sortOrder), + [data, licenseType.id], + ); + + async function handleSave(draft: Draft) { + const target = editing?.role; + const ok = await run( + () => + target + ? updateRole({ id: target.id, ...draft }).unwrap() + : createRole({ ...draft, licenseTypeId: licenseType.id }).unwrap(), + target + ? t('certReq.staff.updated', 'Staff role updated') + : t('certReq.staff.created', 'Staff role added'), + ); + if (ok) setEditing(null); + } + + async function confirmDelete() { + if (!deleteTarget) return; + const ok = await run( + () => deleteRole(deleteTarget.id).unwrap(), + t('certReq.staff.deleted', 'Staff role removed'), + ); + if (ok) setDeleteTarget(null); + } + + return ( + + +
+ {t('certReq.staff.title', 'Staff roles')} + + {t( + 'certReq.staff.subtitle', + 'The Staff step of this licence type: who the applicant must register and the evidence each of them uploads. Saved on confirm, separately from the sections above.', + )} + +
+ + + + {isLoading ? ( + + ) : roles.length === 0 ? ( + + {t('certReq.staff.empty', 'No staff roles — this licence type has no Staff step.')} + + ) : ( + + {roles.map((role) => ( + + +
+ + {localized(role.name) || role.roleKey} + + {role.maxCount != null && role.maxCount === role.minCount + ? t('certReq.staff.exactly', 'exactly {{n}}', { n: role.minCount }) + : t('certReq.staff.range', 'min {{min}}{{max}}', { + min: role.minCount, + max: role.maxCount != null ? ` · max ${role.maxCount}` : '', + })} + + {role.requiresExperience && ( + + {t('certReq.staff.experience', 'experience')} + {role.minYearsExperience ? ` · ${role.minYearsExperience}y` : ''} + + )} + + + key: {role.roleKey} + {role.requiredEvidence.length > 0 && + ` · ${role.requiredEvidence + .map((e) => `${e.docKey}${e.mandatory ? '*' : ''}`) + .join(', ')}`} + +
+ + setEditing({ role })}> + + + setDeleteTarget(role)}> + + + + + + ))} + + )} + + setEditing(null)} + role={editing?.role ?? null} + nextSortOrder={roles.length + 1} + onSave={handleSave} + saving={creating || updating} + /> + + setDeleteTarget(null)} + title={t('certReq.staff.delete', 'Delete staff role')} + size="sm" + > + + + {t('certReq.staff.deleteConfirm', 'Remove "{{name}}" from this licence type\'s Staff step?', { + name: deleteTarget ? localized(deleteTarget.name) || deleteTarget.roleKey : '', + })} + + + + + + + + + ); +} + +function StaffRoleEditorDrawer({ + opened, + onClose, + role, + nextSortOrder, + onSave, + saving, +}: { + opened: boolean; + onClose: () => void; + /** Null = adding a new role. */ + role: StaffRoleRequirement | null; + nextSortOrder: number; + onSave: (draft: Draft) => void; + saving: boolean; +}) { + const { t } = useTranslation(); + const [draft, setDraft] = useState(emptyDraft(nextSortOrder)); + const [keyError, setKeyError] = useState(null); + const isNew = !role; + + useEffect(() => { + if (!opened) return; + setDraft( + role + ? { + roleKey: role.roleKey, + name: { ...role.name }, + minCount: role.minCount, + maxCount: role.maxCount, + requiresExperience: role.requiresExperience, + minYearsExperience: role.minYearsExperience, + requiredEvidence: role.requiredEvidence.map((e) => ({ ...e, label: { ...e.label } })), + sortOrder: role.sortOrder, + } + : emptyDraft(nextSortOrder), + ); + setKeyError(null); + }, [opened, role, nextSortOrder]); + + function patchEvidence(index: number, patch: Partial) { + setDraft((d) => ({ + ...d, + requiredEvidence: d.requiredEvidence.map((e, i) => (i === index ? { ...e, ...patch } : e)), + })); + } + + function save() { + const roleKey = draft.roleKey.trim(); + if (!ROLE_KEY_PATTERN.test(roleKey)) { + setKeyError( + t( + 'certReq.staff.keyInvalid', + 'Key must start with a letter and contain only letters, numbers, underscores', + ), + ); + return; + } + if (!draft.name.en?.trim()) return; + // An evidence row with no docKey renders an upload slot nothing can be + // attached to, so it is dropped rather than saved half-filled. + onSave({ + ...draft, + roleKey, + requiredEvidence: draft.requiredEvidence.filter((e) => e.docKey.trim()), + }); + } + + return ( + + {isNew ? t('certReq.staff.add', 'Add staff role') : t('certReq.staff.edit', 'Edit staff role')} + + } + > + + { + const { value } = e.currentTarget; + setDraft((d) => ({ ...d, roleKey: value })); + }} + /> + + setDraft((d) => ({ ...d, name: v }))} + /> + + + setDraft((d) => ({ ...d, minCount: typeof v === 'number' ? v : 0 }))} + description={t('certReq.staff.minCountHelp', '0 makes the role optional')} + /> + setDraft((d) => ({ ...d, maxCount: typeof v === 'number' ? v : null }))} + description={t('certReq.staff.maxCountHelp', 'Leave empty for no limit')} + /> + + + { + const { checked } = e.currentTarget; + setDraft((d) => ({ + ...d, + requiresExperience: checked, + minYearsExperience: checked ? d.minYearsExperience : null, + })); + }} + /> + + {draft.requiresExperience && ( + + setDraft((d) => ({ ...d, minYearsExperience: typeof v === 'number' ? v : null })) + } + /> + )} + + setDraft((d) => ({ ...d, sortOrder: typeof v === 'number' ? v : 0 }))} + /> + + + + {t( + 'certReq.staff.evidenceHelp', + 'One upload slot per document, asked of every person registered in this role.', + )} + + + {draft.requiredEvidence.map((evidence, i) => ( + + + + patchEvidence(i, { docKey: e.currentTarget.value })} + style={{ flex: 1 }} + /> + patchEvidence(i, { label: v })} + style={{ flex: 2 }} + /> + + + patchEvidence(i, { mandatory: e.currentTarget.checked })} + /> + + + ))} + + + + + + + + + + ); +} diff --git a/apps/backoffice/src/app/features/license-review/components/DocumentsTab.tsx b/apps/backoffice/src/app/features/license-review/components/DocumentsTab.tsx index 7d55d4bce..89cf9681f 100644 --- a/apps/backoffice/src/app/features/license-review/components/DocumentsTab.tsx +++ b/apps/backoffice/src/app/features/license-review/components/DocumentsTab.tsx @@ -174,6 +174,7 @@ export function DocumentsTab({ {attachments.map((attachment) => { const file = attachment.files?.[0]; + const fromVault = Boolean(attachment.copiedFromAttachmentId); const flagged = attachment.documentKey in flags; const verdict = verdictFor(attachment.documentKey); const pendingReject = attachment.documentKey in rejecting; @@ -199,6 +200,14 @@ export function DocumentsTab({ requirementByKey.get(attachment.documentKey)?.name, ) || attachment.documentKey} + {/* Filed from the applicant's own document vault rather + than uploaded against this application — worth knowing + when the same file turns up on several files. */} + {fromVault && ( + + {t("review.documents.fromVault", "From My Documents")} + + )} {verdict && ( (null); const [error, setError] = useState(null); - const [preview, setPreview] = useState<{ url: string; title: string } | null>( + const [preview, setPreview] = useState<{ + url: string; + title: string; + mimeType?: string | null; + } | null>( null, ); const resetRefs = useRef void>>({}); @@ -111,7 +115,8 @@ export function DocumentSlots({ {required.map((requirement) => { const existing = attachments.find((a) => a.documentKey === requirement.key); const uploaded = Boolean(existing?.files?.length); - const fileUrl = existing?.files?.[0]?.url; + const files = existing?.files ?? []; + const fromVault = Boolean(existing?.copiedFromAttachmentId); const flagRemark = flagged[requirement.key]; const locked = readOnly || @@ -154,18 +159,25 @@ export function DocumentSlots({ {t('licensing.documents.uploaded')} )} + {/* Filled from the applicant's own vault rather than + uploaded here — without saying so, a file they never + attached to this application looks like a mistake. */} + {fromVault && !flagRemark && ( + + {t('licensing.documents.fromVault')} + + )} {requirement.description && ( {localized(requirement.description)} )} - {existing?.files?.[0] && ( - - {existing.files[0].originalName} ·{' '} - {(existing.files[0].sizeBytes / 1024).toFixed(0)} KB + {files.map((file) => ( + + {file.originalName} · {(Number(file.sizeBytes) / 1024).toFixed(0)} KB - )} + ))} {flagRemark && ( {t('licensing.documents.officerRemark', { name: flagRemark })} @@ -174,20 +186,26 @@ export function DocumentSlots({ - {fileUrl && ( - - )} + {files + .filter((file) => file.url) + .map((file, index) => ( + + ))} {!locked && ( { @@ -222,11 +240,12 @@ export function DocumentSlots({ ); })} - setPreview(null)} url={preview?.url ?? ''} title={preview?.title} + mimeType={preview?.mimeType} /> ); diff --git a/apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx b/apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx index 2a75eeae5..16e46e7cb 100644 --- a/apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx +++ b/apps/portal/src/app/features/licensing/pages/LicenseApplicationPage.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useState } from "react"; +import { useEffect, useMemo, useRef, useState } from "react"; import { useNavigate, useParams } from "react-router-dom"; import { ActionIcon, @@ -44,6 +44,7 @@ import { useAddStaffMutation, useCreateApplicationMutation, useGetApplicationQuery, + useFillApplicationDocumentsFromVaultMutation, useGetAttachmentsQuery, useGetLicenseTypeRequirementsQuery, useGetMyVesselsQuery, @@ -430,6 +431,46 @@ export function LicenseApplicationPage() { if (active > steps.length - 1) setActive(Math.max(0, steps.length - 1)); }, [active, steps.length]); + /** + * Fills the document slots from the applicant's own vault the first time + * they reach that step. + * + * Someone who already keeps their passport under My Documents should find it + * here rather than being asked to go and fetch the same file again. The + * server only fills empty slots, so this cannot overwrite anything they + * uploaded, and calling it twice costs one query. + */ + const [fillFromVault] = useFillApplicationDocumentsFromVaultMutation(); + const filledForApplication = useRef(null); + useEffect(() => { + const status = application?.status; + const editable = + status === "DRAFT" || + status === "RESUBMIT_REQUIRED" || + (status === "SUBMITTED" && !application?.assignedOfficerId); + if (steps[active]?.kind !== "documents" || !appId || !editable) return; + if (filledForApplication.current === appId) return; + filledForApplication.current = appId; + + fillFromVault(appId) + .unwrap() + .then((result) => { + // Nothing was copied: no need to disturb the queries. + if (result.filled.length) refetchAttachments(); + }) + // A vault that cannot be read is not a reason to block the form — the + // applicant can still upload by hand. + .catch(() => undefined); + }, [ + steps, + active, + appId, + application?.status, + application?.assignedOfficerId, + fillFromVault, + refetchAttachments, + ]); + if (loadingConfig || !config || !appId || !application) { return ; } @@ -578,6 +619,7 @@ export function LicenseApplicationPage() { const currentStep = steps[active]; + /** * Checks one step before moving past it. * diff --git a/apps/portal/src/app/features/seafarer-registration/components/RegistrationDocuments.tsx b/apps/portal/src/app/features/seafarer-registration/components/RegistrationDocuments.tsx index e1fb715e3..cc3c19b21 100644 --- a/apps/portal/src/app/features/seafarer-registration/components/RegistrationDocuments.tsx +++ b/apps/portal/src/app/features/seafarer-registration/components/RegistrationDocuments.tsx @@ -2,38 +2,69 @@ import { useRef, useState } from 'react'; import { Alert, Badge, Button, Card, FileButton, Group, Loader, Stack, Text } from '@mantine/core'; import { IconAlertTriangle, IconCheck, IconFileUpload } from '@tabler/icons-react'; import { - SEAFARER_REGISTRATION_DOCUMENTS, - isEthiopianNationality, + conditionHolds, uploadDocument, + useLocalized, type Attachment, + type DocumentRequirement, } from '@ema-platform/api'; const MAX_FILE_SIZE_BYTES = 5 * 1024 * 1024; -/** The document slots a registration asks for. */ -export function documentSlots(passportDeclared: boolean, nationality?: string | null) { - const ethiopian = isEthiopianNationality(nationality); - return SEAFARER_REGISTRATION_DOCUMENTS.map((d) => ({ - ...d, - isRequired: d.required === 'passport' ? passportDeclared : d.required === 'ethiopian' ? ethiopian : d.required, - })).filter((d) => (d.required !== 'passport' || passportDeclared) && (d.required !== 'ethiopian' || ethiopian)); +/** A configured requirement, with whether this applicant must supply it. */ +export type RegistrationSlot = DocumentRequirement & { isRequired: boolean }; + +/** + * The document slots a registration asks for. + * + * Configuration, not a constant: these are `document_requirements` rows + * against the SEAFARER_REGISTRATION licence type, the same ones the backoffice + * edits and the server validates against. A conditional requirement — the + * passport copy, wanted once a passport number is declared — is evaluated + * against the answers under `identity`, exactly as the server does it, so the + * wizard and the submit check can never disagree about what is being asked + * for. + */ +export function documentSlots( + requirements: DocumentRequirement[], + answers: Record, +): RegistrationSlot[] { + const context = { identity: answers, personal: answers } as Record< + string, + Record + >; + return requirements + .filter( + (requirement) => + requirement.mode !== 'CONDITIONAL' || + conditionHolds(requirement.conditionExpression, context), + ) + .map((requirement) => ({ + ...requirement, + isRequired: + requirement.mode === 'ALWAYS' || + (requirement.mode === 'CONDITIONAL' && + conditionHolds(requirement.conditionExpression, context)), + })); } export function RegistrationDocuments({ registrationId, - passportDeclared, - nationality, + requirements, + answers, attachments, readOnly, onUploaded, }: { registrationId: string; - passportDeclared: boolean; - nationality?: string | null; + requirements: DocumentRequirement[]; + /** The registration's answers, for evaluating conditional requirements. */ + answers: Record; attachments: Attachment[]; readOnly?: boolean; onUploaded: () => void; }) { + const localized = useLocalized(); const [busy, setBusy] = useState(null); const [error, setError] = useState(null); const resetRefs = useRef void>>({}); @@ -66,9 +97,10 @@ export function RegistrationDocuments({ {error} )} - {documentSlots(passportDeclared, nationality).map((slot) => { + {documentSlots(requirements, answers).map((slot) => { const existing = attachments.find((a) => a.documentKey === slot.key); const uploaded = Boolean(existing?.files?.length); + const fromVault = Boolean(existing?.copiedFromAttachmentId); return ( - {slot.name} + {localized(slot.name)} {!slot.isRequired && ( @@ -95,10 +127,16 @@ export function RegistrationDocuments({ uploaded )} + {/* Copied from My Documents rather than uploaded here. */} + {fromVault && ( + + from My Documents + + )} {slot.description && ( - {slot.description} + {localized(slot.description)} )} {existing?.files?.[0] && ( @@ -119,7 +157,7 @@ export function RegistrationDocuments({ if (r) resetRefs.current[slot.key] = r; }} onChange={(file) => handle(slot.key, file)} - accept={slot.accept} + accept={slot.allowedMimeTypes?.join(',')} > {(props) => (