"use client"; import { mutationCsrfHeaders } from "@/lib/mutation-csrf.client"; import { toastApiError } from "@/lib/toast-api-error"; import { Check, ChevronLeft, ChevronRight, FileText, Loader2 } from "lucide-react"; import { useRouter } from "next/navigation"; import * as React from "react"; import { toast } from "sonner"; import { DatePicker, TimePicker } from "@/components/date-range-picker"; import { formDatePickerClass } from "@/components/form/common/form-layout"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Textarea } from "@/components/ui/textarea"; import { countSectionFill, getColumnsBySection, mergeSelectOptions, ORDER_BLOTTER_SECTION_ORDER, ORDER_BLOTTER_SECTION_TITLES, blotterDateFromInputValue, blotterDateToInputValue, blotterTimeFromInputValue, blotterTimeToInputValue, formatDecimalForDisplay, registryInputVariantForKey, registrySelectOptionsForKey, type OrderBlotterColumnDef, type OrderBlotterSectionId, } from "@/lib/order-blotter/column-registry"; import { cn } from "@/lib/utils"; import type { OrderBlotterDetail, OrderBlotterFieldData } from "./detail-types"; import { OrderBlotterDocumentsPanel, type OcrApiResponse, } from "./order-blotter-documents-panel"; type OrderBlotterStepFormProps = { detail: OrderBlotterDetail; isCreate?: boolean; savePath?: string; ocrPath?: string; redirectBase?: string; prefilledFromTransaction?: boolean; transactionId?: number; }; type WizardView = "documents" | "form"; /** Shorter labels for the left step rail (full titles stay on the form panel). */ function sectionNavLabels(advisorName: string): Record { const advisor = advisorName.trim() || "Advisor"; return { generic_details: "Generic details", trade_details: "Trade details", order_details_sent_to_client: "Order details to client", client_confirmation: "Client confirmation", trade_notified_custodian_bank: "Custodian notification", custodian_confirmation_to_ucap: `Custodian confirmation to ${advisor}`, ucap_trade_confirmation_to_client: `${advisor} confirmation to client`, suitability_assessment: "Suitability assessment", revenue_recognition: "Revenue recognition", internal_sign_off: "Internal sign-off", escalation: "Escalations", compliance_review: "Compliance review", }; } function sectionPanelTitle( sectionId: OrderBlotterSectionId, advisorName: string, sectionTitles?: Partial>, ): string { const fromApi = sectionTitles?.[sectionId]?.trim(); if (fromApi) return fromApi; const advisor = (advisorName.trim() || "Advisor").toUpperCase(); if (sectionId === "custodian_confirmation_to_ucap") { return `CUSTODIAN TRADE CONFIRMATION TO ${advisor}`; } if (sectionId === "ucap_trade_confirmation_to_client") { return `${advisor} TRADE CONFIRMATION TO CLIENT`; } return ORDER_BLOTTER_SECTION_TITLES[sectionId]; } export function OrderBlotterStepForm({ detail, isCreate = false, savePath = "/dashboard/order-blotter/save", ocrPath = "/dashboard/order-blotter/ocr", redirectBase = "/dashboard/order-blotter", prefilledFromTransaction = false, transactionId, }: OrderBlotterStepFormProps) { const router = useRouter(); const columnsBySection = React.useMemo(() => getColumnsBySection(), []); const selectOptions = React.useMemo( () => mergeSelectOptions(detail.selectOptions), [detail.selectOptions], ); const advisorLabel = detail.advisorLabel?.trim() || detail.portfolioLabel?.trim() || "Advisor"; const navLabels = React.useMemo(() => sectionNavLabels(advisorLabel), [advisorLabel]); const [fields, setFields] = React.useState(() => normalizeSelectFieldValues(detail.fields, selectOptions), ); const [activeStep, setActiveStep] = React.useState(0); const [activeView, setActiveView] = React.useState("form"); const [saving, setSaving] = React.useState(false); const [docFiles, setDocFiles] = React.useState([]); const [ocrResult, setOcrResult] = React.useState(null); const resolvedTransactionId = transactionId ?? (detail.transactionId != null && detail.transactionId > 0 ? detail.transactionId : null); const sectionSteps = ORDER_BLOTTER_SECTION_ORDER.map((sectionId) => { const columns = columnsBySection[sectionId] ?? []; const fill = countSectionFill(columns, fields); return { id: sectionId, ...fill, complete: fill.total > 0 && fill.filled === fill.total, }; }); const totalFields = sectionSteps.reduce((sum, step) => sum + step.total, 0); const filledFields = sectionSteps.reduce((sum, step) => sum + step.filled, 0); const overallPercent = totalFields > 0 ? Math.round((filledFields / totalFields) * 100) : 0; const activeSectionId = sectionSteps[activeStep]?.id ?? ORDER_BLOTTER_SECTION_ORDER[0]; const activeColumns = columnsBySection[activeSectionId] ?? []; const onFieldChange = (key: string, value: string) => { setFields((prev) => ({ ...prev, [key]: value })); }; const goToStep = (index: number) => { setActiveView("form"); setActiveStep(Math.max(0, Math.min(index, sectionSteps.length - 1))); }; const jumpToSection = (sectionId: OrderBlotterSectionId) => { const index = ORDER_BLOTTER_SECTION_ORDER.indexOf(sectionId); if (index >= 0) { goToStep(index); } else { setActiveView("form"); } }; const applyOcrFields = (incoming: Record, overwrite: boolean): number => { let applied = 0; const nextFields: OrderBlotterFieldData = { ...fields }; for (const [key, value] of Object.entries(incoming)) { const trimmed = String(value ?? "").trim(); if (!trimmed) continue; const existing = String(nextFields[key] ?? "").trim(); if (!overwrite && existing) continue; nextFields[key] = trimmed; applied += 1; } setFields(normalizeSelectFieldValues(nextFields, selectOptions)); return applied; }; const handleSave = async () => { setSaving(true); try { const response = await fetch(savePath, { method: "POST", credentials: "same-origin", headers: { "Content-Type": "application/json", Accept: "application/json", ...mutationCsrfHeaders(savePath), }, body: JSON.stringify({ id: isCreate ? null : detail.id, ref: detail.ref ?? null, OrderBlotterData: fields, OrderBlotter: { transaction_id: resolvedTransactionId, transaction_corporate_db: detail.portfolio ?? null, }, }), }); const payload = (await response.json().catch(() => null)) as { status?: string; message?: string; id?: number; ref?: string; } | null; if (!response.ok || payload?.status === "error") { throw new Error(payload?.message || "Save failed"); } toast.success(isCreate ? "Order blotter created" : "Order blotter saved"); const nextId = payload?.id ?? detail.id; const refQs = payload?.ref ? `&ref=${encodeURIComponent(payload.ref)}` : ""; router.push(`${redirectBase}/${nextId}?action=update${refQs}`); router.refresh(); } catch (error) { toastApiError(error, "Save failed"); } finally { setSaving(false); } }; return (
Portfolio · {detail.portfolioLabel ?? "Current corporate DB"} {resolvedTransactionId ? ( <> | Txn · {resolvedTransactionId} {prefilledFromTransaction ? ( prefilled ) : null} ) : null}
setActiveView("documents")} > Documents setActiveView("form")}> Form steps
{activeView === "documents" ? ( ) : ( )}
{activeView === "form" ? (
Step {activeStep + 1} of {sectionSteps.length}
) : null}
); } function TabButton({ active, onClick, children, className, }: { active: boolean; onClick: () => void; children: React.ReactNode; className?: string; }) { return ( ); } function SectionFields({ sectionId, columns, fields, onFieldChange, selectOptions, advisorLabel, sectionTitles, }: { sectionId: OrderBlotterSectionId; columns: OrderBlotterColumnDef[]; fields: OrderBlotterFieldData; onFieldChange: (key: string, value: string) => void; selectOptions: Record>; advisorLabel: string; sectionTitles?: Partial>; }) { return (

{sectionPanelTitle(sectionId, advisorLabel, sectionTitles)}

{columns.map((column) => ( onFieldChange(column.key, value)} selectOptions={selectOptions} /> ))}
); } function FieldControl({ column, value, onChange, selectOptions, }: { column: OrderBlotterColumnDef; value: string; onChange: (value: string) => void; selectOptions: Record>; }) { const selectOptionsForKey = selectOptions[column.key] ?? registrySelectOptionsForKey(column.key); const fullWidth = column.type === "textarea" || column.fullWidth; const variant = registryInputVariantForKey(column.key); const isLongText = column.key === "action_taken_rationale" || column.key === "suitability_assessment_field"; return (
{selectOptionsForKey ? ( ) : column.type === "textarea" ? (