diff --git a/apps/backoffice/src/app/features/license-review/components/AssignDialog.tsx b/apps/backoffice/src/app/features/license-review/components/AssignDialog.tsx new file mode 100644 index 000000000..9afca696c --- /dev/null +++ b/apps/backoffice/src/app/features/license-review/components/AssignDialog.tsx @@ -0,0 +1,113 @@ +import { useEffect, useState } from 'react'; +import { Modal, Select, Stack, Text, Textarea } from '@mantine/core'; +import { useTranslation } from 'react-i18next'; +import { useGetAssignableOfficersQuery } from '@ema-platform/api'; +import { ModalFooter } from '@ema-platform/ui'; +import { Button } from '@mantine/core'; + +export type AssignKind = 'review' | 'inspection'; + +interface AssignDialogProps { + opened: boolean; + onClose: () => void; + /** Which stage is being handed out — changes the wording, not the mechanics. */ + kind: AssignKind; + /** Reference of the application being dispatched, shown for confirmation. */ + applicationNumber?: string; + loading?: boolean; + onConfirm: (officerId: string, remark?: string) => void; +} + +/** + * The team leader handing work to an employee. + * + * One dialog for both stages because the decision is identical — pick a person, + * optionally say why — and two near-identical modals would drift apart. The + * `kind` only selects wording. + * + * Confirm stays disabled until someone is picked: an assignment with no + * assignee is the one mistake this dialog exists to prevent. + */ +export function AssignDialog({ + opened, + onClose, + kind, + applicationNumber, + loading, + onConfirm, +}: AssignDialogProps) { + const { t } = useTranslation(); + const { data: officers = [], isLoading } = useGetAssignableOfficersQuery(); + const [officerId, setOfficerId] = useState(null); + const [remark, setRemark] = useState(''); + + // Reopening for a different application must not offer the previous + // dialog's answers as if they had been chosen for this one. + useEffect(() => { + if (opened) { + setOfficerId(null); + setRemark(''); + } + }, [opened]); + + const title = + kind === 'review' + ? t('queue.assignReview', 'Assign document review') + : t('queue.assignInspection', 'Assign inspection'); + + return ( + + + {applicationNumber && ( + + {applicationNumber} + + )} + +