feat(banking): PDF statement importer and overriding column mapping (backport #55559) (#55993)

banking/src/components/features/BankStatementImporter/CSV/CSVImport.tsx

@@ -2,9 +2,7 @@ import CSVRawDataPreview from './CSVRawDataPreview'
 import StatementDetails from './StatementDetails'
 import { GetStatementDetailsResponse } from '../import_utils'
 
-const CSVImport = ({ data }: { data: { message: GetStatementDetailsResponse } }) => {
-
-
+const CSVImport = ({ data, mutate }: { data: { message: GetStatementDetailsResponse }, mutate: () => void }) => {
 
     return (
         <div className="w-full flex">
@@ -12,7 +10,7 @@ const CSVImport = ({ data }: { data: { message: GetStatementDetailsResponse } })
                 <StatementDetails data={data.message} />
             </div>
             <div className="w-[50%] border-s border-t pe-1 ps-0 border-outline-gray-2 h-[calc(100vh-72px)] overflow-scroll">
-                <CSVRawDataPreview data={data.message} />
+                <CSVRawDataPreview data={data.message} mutate={mutate} />
             </div>
         </div>
     )

banking/src/components/features/BankStatementImporter/CSV/CSVRawDataPreview.tsx

@@ -1,151 +1,104 @@
-import { Table, TableBody, TableCell, TableHead, TableRow } from "@/components/ui/table"
-import { cn } from "@/lib/utils"
-import { ArrowDownRightIcon, ArrowUpDownIcon, ArrowUpRightIcon, BanknoteIcon, CalendarIcon, DollarSignIcon, FileTextIcon, ListIcon, ReceiptIcon } from "lucide-react"
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { useEffect, useRef, useState } from "react"
+import { toast } from "sonner"
 import _ from "@/lib/translate"
-import { GetStatementDetailsResponse } from "../import_utils"
-import { useMemo } from "react"
+import RawTableGrid from "../RawTableGrid"
+import {
+    applyColumnMappingChange,
+    ColumnMapsTo,
+    GetStatementDetailsResponse,
+    useSetHeaderIndex,
+    useUpdateColumnMapping,
+} from "../import_utils"
 import { BankStatementImportLogColumnMap } from "@/types/Accounts/BankStatementImportLogColumnMap"
 
+type Mapping = Pick<BankStatementImportLogColumnMap, "index" | "maps_to" | "header_text" | "variable">
 
-const CSVRawDataPreview = ({ data }: { data: GetStatementDetailsResponse }) => {
+const toMapping = (columns?: BankStatementImportLogColumnMap[]): Mapping[] =>
+    (columns ?? []).map((c) => ({
+        index: c.index,
+        maps_to: c.maps_to,
+        header_text: c.header_text,
+        variable: c.variable,
+    }))
 
-    const column_mapping: Record<StandardColumnTypes, number> = useMemo(() => {
+const headerToState = (index?: number) => (index != null && index >= 0 ? index : null)
 
-        const col_map: Record<string, number> = {}
+const CSVRawDataPreview = ({
+    data,
+    mutate,
+}: {
+    data: GetStatementDetailsResponse
+    mutate: () => void
+}) => {
+    const isCompleted = data.doc.status === "Completed"
 
-        data.doc.column_mapping?.forEach(col => {
-            if (col.maps_to && col.maps_to !== "Do not import") {
-                col_map[col.maps_to] = col.index;
-            }
-        })
+    const [mapping, setMapping] = useState<Mapping[]>(() => toMapping(data.doc.column_mapping))
+    const [headerIndex, setHeaderIndex] = useState<number | null>(() =>
+        headerToState(data.doc.detected_header_index),
+    )
 
-        return col_map
+    const { call: updateMapping, loading: savingMapping } = useUpdateColumnMapping()
+    const { call: setHeader, loading: savingHeader } = useSetHeaderIndex()
 
-    }, [data])
+    const mappingRef = useRef(mapping)
+    const saveTimer = useRef<ReturnType<typeof setTimeout>>(undefined)
 
-    const validColumns = Object.values(column_mapping)
+    useEffect(() => () => clearTimeout(saveTimer.current), [])
 
-    // Reverse the column mapping to get a map of column index to variable name
-    const columnIndexMap: Record<number, StandardColumnTypes> = Object.fromEntries(Object.entries(column_mapping).map(([variable, columnIndex]) => [columnIndex, variable as StandardColumnTypes]))
+    const columnMappingRecord: Record<number, ColumnMapsTo> = {}
+    mapping.forEach((c) => {
+        if (c.maps_to) columnMappingRecord[c.index] = c.maps_to as ColumnMapsTo
+    })
+
+    const commitMapping = (next: Mapping[]) => {
+        mappingRef.current = next
+        setMapping(next)
+    }
+
+    // Persist mapping edits (debounced) so the transaction preview updates in realtime.
+    const scheduleSaveMapping = () => {
+        if (isCompleted) return
+        clearTimeout(saveTimer.current)
+        saveTimer.current = setTimeout(() => {
+            updateMapping({ statement_import_id: data.doc.name, column_mapping: mappingRef.current })
+                .then(() => mutate())
+                .catch(() => toast.error(_("Could not save the column mapping.")))
+        }, 500)
+    }
+
+    const onChangeMapping = (columnIndex: number, mapsTo: ColumnMapsTo) => {
+        if (isCompleted) return
+        commitMapping(applyColumnMappingChange(mappingRef.current, columnIndex, mapsTo))
+        scheduleSaveMapping()
+    }
+
+    const onSetHeader = (rowIndex: number | null) => {
+        if (isCompleted) return
+        setHeaderIndex(rowIndex)
+        setHeader({ statement_import_id: data.doc.name, header_index: rowIndex ?? -1 })
+            .then((res) => {
+                // The backend re-derives the mapping for the new header; sync local state.
+                const doc = res?.message?.doc
+                if (doc) {
+                    commitMapping(toMapping(doc.column_mapping))
+                    setHeaderIndex(headerToState(doc.detected_header_index))
+                }
+                mutate()
+            })
+            .catch(() => toast.error(_("Could not update the header row.")))
+    }
 
-    // Loop over the contents of the CSV file and show a preview - highlight the header row and the transaction rows
     return (
-        <Table containerClassName="rounded-none">
-            <TableBody>
-                {data.raw_data.map((row, index) => {
-
-                    const isHeaderRow = index === data.doc.detected_header_index;
-                    const isTransactionRow = index >= (data.doc.detected_transaction_starting_index ?? 0) && index <= (data.doc.detected_transaction_ending_index ?? 0);
-
-                    return <TableRow key={index}
-                        title={isHeaderRow ? "Header Row" : ""}
-                        className={cn({
-                            // "bg-yellow-100": isHeaderRow,
-                            // "hover:bg-yellow-100": isHeaderRow,
-                            "bg-green-50 hover:bg-green-50 dark:bg-green-700 dark:hover:bg-green-700": isTransactionRow,
-                            "text-ink-gray-5/70": !isTransactionRow && !isHeaderRow,
-                        })}>
-                        {isHeaderRow ? <TableHead className="bg-yellow-100 hover:bg-yellow-100 dark:bg-yellow-400 text-center font-semibold text-ink-gray-8">
-                            {index + 1}
-                        </TableHead> :
-                            <TableCell className="text-center px-1 py-0.5">
-                                {index + 1}
-                            </TableCell>
-                        }
-                        {row.map((cell, cellIndex) => {
-
-                            const isValidColumn = validColumns.includes(cellIndex);
-                            const columnType = columnIndexMap[cellIndex];
-                            const isAmountColumn = ["Amount", "Withdrawal", "Deposit", "Balance"].includes(columnType);
-
-                            if (isHeaderRow) {
-                                return <TableHead key={cellIndex} className={cn("max-w-[250px] w-fit overflow-hidden text-ellipsis py-0.5",
-                                    isValidColumn ? "bg-yellow-100 hover:bg-yellow-100 dark:bg-yellow-400" : "bg-surface-gray-2",
-                                )}>
-                                    <div className={cn("flex items-center text-xs gap-1 px-1 text-ink-gray-8 font-medium", {
-                                        "justify-end": isAmountColumn && isValidColumn
-                                    })}>
-                                        {columnType && <Tooltip>
-                                            <TooltipTrigger>
-                                                <ColumnHeaderIcon columnType={columnType} />
-                                            </TooltipTrigger>
-                                            <TooltipContent>
-                                                {_(columnType)}
-                                            </TooltipContent>
-                                        </Tooltip>
-                                        }
-                                        {cell}
-                                    </div>
-                                </TableHead>
-                            } else {
-                                return <TableCell key={cellIndex} className={cn("max-w-[200px] w-fit overflow-hidden text-ellipsis py-0.5",
-                                    {
-                                        "bg-green-100 dark:bg-green-400 hover:bg-green-100 dark:hover:bg-green-400": isValidColumn && isTransactionRow,
-                                        "text-ink-gray-5": !isValidColumn && isTransactionRow,
-                                    }
-                                )} >
-                                    <div className={cn("min-h-5 flex items-center text-xs px-1", {
-                                        "justify-end": isAmountColumn && isValidColumn && isTransactionRow
-                                    })} title={cell}>
-                                        {cell}
-                                    </div>
-                                </TableCell>
-                            }
-                        }
-
-                        )}
-                    </TableRow>
-                })}
-            </TableBody>
-        </Table >
+        <RawTableGrid
+            rows={data.raw_data}
+            columnMapping={columnMappingRecord}
+            headerIndex={headerIndex}
+            editable={!isCompleted}
+            disabled={isCompleted || savingMapping || savingHeader}
+            onChangeMapping={onChangeMapping}
+            onSetHeader={onSetHeader}
+        />
     )
 }
 
-type StandardColumnTypes = BankStatementImportLogColumnMap['maps_to'];
-
-const ColumnHeaderIcon = ({ columnType }: { columnType?: StandardColumnTypes }) => {
-    if (!columnType) {
-        return null
-    }
-
-    if (columnType === 'Amount') {
-        return <DollarSignIcon className="w-4 h-4" />
-    }
-
-    if (columnType === 'Withdrawal') {
-        return <ArrowUpRightIcon className="w-4 h-4 text-ink-red-3" />
-    }
-
-    if (columnType === 'Deposit') {
-        return <ArrowDownRightIcon className="w-4 h-4 text-ink-green-3" />
-    }
-
-    if (columnType === 'Balance') {
-        return <BanknoteIcon className="w-4 h-4" />
-    }
-
-    if (columnType === 'Date') {
-        return <CalendarIcon className="w-4 h-4" />
-    }
-
-    if (columnType === 'Description') {
-        return <FileTextIcon className="w-4 h-4" />
-    }
-
-    if (columnType === 'Reference') {
-        return <ReceiptIcon className="w-4 h-4" />
-    }
-
-    if (columnType === 'Transaction Type') {
-        return <ListIcon className="w-4 h-4" />
-    }
-
-    if (columnType === 'Debit/Credit') {
-        return <ArrowUpDownIcon className="w-4 h-4" />
-    }
-
-    return null
-}
-
-export default CSVRawDataPreview
+export default CSVRawDataPreview

banking/src/components/features/BankStatementImporter/CSV/StatementDetails.tsx

@@ -142,11 +142,16 @@ const StatementDetails = ({ data }: Props) => {
                             <TableCell>
                                 <div className='flex items-center gap-2'>
                                     <BankLogo bank={bank} />
-                                    <span className="tracking-tight text-sm font-medium">{bank?.account_name}</span>
-                                    <span title="GL Account" className="text-sm">{bank?.account}</span>
+                                    <span className="text-sm">{bank?.account_name}</span>
                                 </div>
                             </TableCell>
                         </TableRow>
+                        <TableRow>
+                            <TableHead>{_("Account")}</TableHead>
+                            <TableCell>
+                                <span title="GL Account" className="text-sm">{bank?.account}</span>
+                            </TableCell>
+                        </TableRow>
                         <TableRow>
                             <TableHead>{_("Statement File")}</TableHead>
                             <TableCell>
@@ -158,7 +163,11 @@ const StatementDetails = ({ data }: Props) => {
                         </TableRow>
                         <TableRow>
                             <TableHead>{_("Transaction Dates")}</TableHead>
-                            <TableCell>{_("{0} to {1}", [formatDate(data.doc.start_date, "Do MMMM YYYY"), formatDate(data.doc.end_date, "Do MMMM YYYY")])}</TableCell>
+                            {data.doc.start_date && data.doc.end_date ? (
+                                <TableCell>{_("{0} to {1}", [formatDate(data.doc.start_date, "Do MMMM YYYY"), formatDate(data.doc.end_date, "Do MMMM YYYY")])}</TableCell>
+                            ) : (
+                                <TableCell>-</TableCell>
+                            )}
                         </TableRow>
                         <TableRow>
                             <TableHead>{_("Number of Transactions")}</TableHead>