{bank?.logo ? 
: <>
+
+ )
+}
+
+export default BankLogo
\ No newline at end of file
diff --git a/banking/src/components/common/FileUploadBanner.tsx b/banking/src/components/common/FileUploadBanner.tsx
new file mode 100644
index 00000000000..dfa0ec7f8f3
--- /dev/null
+++ b/banking/src/components/common/FileUploadBanner.tsx
@@ -0,0 +1,17 @@
+import { CheckCircle } from 'lucide-react'
+import { Progress } from '../ui/progress'
+import _ from '@/lib/translate'
+
+const FileUploadBanner = ({
+ uploadProgress,
+}: { uploadProgress: number }) => {
+ return : <>
+ {bank?.bank ?? ''}
+ + }
+
+}
+
+export default FileUploadBanner
\ No newline at end of file
diff --git a/banking/src/components/common/LinkFieldCombobox.tsx b/banking/src/components/common/LinkFieldCombobox.tsx
new file mode 100644
index 00000000000..a41105b05d7
--- /dev/null
+++ b/banking/src/components/common/LinkFieldCombobox.tsx
@@ -0,0 +1,301 @@
+import { useDocType } from "@/hooks/useDocType";
+import { getSystemDefault, slug } from "@/lib/frappe";
+import { Filter, useFrappeGetCall } from "frappe-react-sdk"
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { canCreateDocument } from "@/lib/permissions";
+import { useDebounceValue } from "usehooks-ts";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { FormControl } from "../ui/form";
+import { ChevronDownIcon, ExternalLink } from "lucide-react";
+import { Button } from "../ui/button";
+import { cn } from "@/lib/utils";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../ui/command";
+import _ from "@/lib/translate";
+import ErrorBanner from "../ui/error-banner";
+import MarkdownRenderer from "../ui/markdown";
+
+export interface ResultItem {
+ value: string,
+ description: string,
+ label?: string
+}
+
+export interface LinkFieldComboboxProps {
+ /** DocType to be fetched */
+ doctype: string;
+ /** Filters to be applied. Default: none */
+ filters?: Filter[]
+ /** Number of records to paginate with. Default: Comes from System Settings or 10 */
+ limit?: number;
+ /**
+ * API to call to fetch records.
+ *
+ * Default: `frappe.desk.search.search_link`
+ *
+ * If you want to use a custom API, you can pass the path to the API here.
+ *
+ * The API should return a list of documents in the following format:
+ * [{value: string, description: string, label?: string}] - where the value is the ID of the document.
+ *
+ * If the API sends a label, it will be used as the label in the dropdown.
+ */
+ searchAPIPath?: string;
+ /**
+ * Field you want to search against in the doctype.
+ *
+ * Default: `name`
+ *
+ * If you want to search against a different field, you can pass the fieldname here.
+ *
+ * If you want to search against multiple fields, you can try using the `searchAPIPath` prop to call a custom API,
+ * or use a custom query in the `customQuery` prop.
+ */
+ searchfield?: string;
+ /**
+ * Custom query to be used to fetch records.
+ *
+ * If you want to use a custom query, you can pass the query here.
+ *
+ * The query should be in the following format:
+ * {
+ * query: string,
+ * filters: {
+ * fieldname: string,
+ * operator: string,
+ * value: string
+ * }
+ * }
+ */
+ customQuery?: {
+ /** Path to function for the query.
+ *
+ * Refer: Item/Supplier query
+ */
+ query: string,
+ /** Filters are usually an object instead of an array in a custom query */
+ filters?: Record
+
+
+ {actionLog.map((action) => (
+
+
+
+
+ {_("No reconciliation actions found")}
+ {_("You have not performed any reconciliations in this session yet.")}
+
+ }
+
+}
+
+
+
+const ActionGroupHeader = ({ action }: { action: ActionLogType }) => {
+
+ const label = useMemo(() => {
+ switch (action.type) {
+ case 'match':
+ return _("Matched")
+ case 'payment':
+ if (action.isBulk) {
+ return _("Bulk Payment")
+ }
+ return _("Payment")
+
+ case 'transfer':
+ if (action.isBulk) {
+ return _("Bulk Transfer")
+ }
+ return _("Transfer")
+
+ case 'bank_entry':
+ if (action.isBulk) {
+ return _("Bulk Bank Entry")
+ }
+ return _("Bank Entry")
+
+ default:
+ return _("Action")
+ }
+ }, [action])
+
+ return
+
+ ))}
+
+ {actionLog.length === 0 &&
+
+
+
+
+ {action.items.map((item, index) => (
+ |
+ ))}
+
+
+ {action.type === 'match' &&
+}
+
+const Row = ({ item, index, isLast, action }: { item: ActionLogItem, index: number, isLast: boolean, action: ActionLogType }) => {
+
+ const isWithdrawal = item.bankTransaction.withdrawal && item.bankTransaction.withdrawal > 0
+
+ const { banks } = useGetBankAccounts()
+
+ const bank = useMemo(() => {
+ if (item.bankTransaction.bank_account) {
+ return banks?.find((bank) => bank.name === item.bankTransaction.bank_account)
+ }
+ return null
+ }, [item.bankTransaction.bank_account, banks])
+
+ const amount = item.bankTransaction.withdrawal ? item.bankTransaction.withdrawal : item.bankTransaction.deposit
+
+ const currency = item.bankTransaction.currency || getCompanyCurrency(item.bankTransaction.company ?? '')
+
+ return
+
+}
+
+const JournalEntryDetails = ({ item, bank }: { item: ActionLogItem, bank?: SelectedBank | null }) => {
+
+ return
+
+
+
+
+
+ {item.bankTransaction.description}
+
+
+
+
+
+
+
+
+
+ {isWithdrawal ?
+
+
+
+
+ {["Payment Entry", "Journal Entry"].includes(item.voucher.reference_doctype) ? "" : _("{} :", [item.voucher.reference_doctype])} {item.voucher.reference_name}
+
+ {item.voucher.reference_doctype === "Payment Entry" && item.voucher.doc &&
+
+
+
+
+}
+
+const JournalEntryAccountsTable = ({ item, bank }: { item: ActionLogItem, bank?: SelectedBank | null }) => {
+
+ const accounts = useMemo(() => {
+
+ const allAccounts = (item.voucher.doc as JournalEntry).accounts
+
+ return allAccounts.filter((acc) => bank ? acc.account !== bank.account : true)
+
+ }, [item, bank])
+
+ return <>
+ {accounts.length === 1 ? {accounts[0].account} :
+
+
+
+
+
+
+
+
+
+}
+
+const TransferDetails = ({ item, className }: { item: ActionLogItem, className?: string }) => {
+
+ const { banks } = useGetBankAccounts()
+
+ const bank = useMemo(() => {
+
+ const isWithdrawal = item.bankTransaction.withdrawal && item.bankTransaction.withdrawal > 0
+
+ let transferAccount = ""
+
+ if (isWithdrawal) {
+ transferAccount = (item.voucher.doc as PaymentEntry).paid_to
+ } else {
+ transferAccount = (item.voucher.doc as PaymentEntry).paid_from
+ }
+
+ const transferBankAccount = banks?.find((bank) => bank.account === transferAccount)
+
+ return transferBankAccount
+
+ }, [banks, item])
+
+ return
+
+
+
+
+ {invoices.map((invoice) => (
+
+
+ ))}
+
+
+
+}
+
+const ACTION_TYPE_MAP = {
+ 'bank_entry': _("Bank Entry"),
+ 'payment': _("Payment"),
+ 'transfer': _("Transfer"),
+ 'match': _("Match"),
+}
+
+const CancelActionLogItem = ({ item, type, timestamp, bank }: { item: ActionLogItem, type: ActionLogType['type'], timestamp: number, bank?: SelectedBank | null }) => {
+
+ const [isOpen, setIsOpen] = useState(false)
+
+ const { call, loading, error } = useFrappePostCall('erpnext.accounts.doctype.bank_transaction.bank_transaction.unreconcile_transaction_entry')
+ const { mutate } = useSWRConfig()
+ const actionLog = useSetAtom(bankRecActionLog)
+ const dates = useAtomValue(bankRecDateAtom)
+ const matchFilters = useAtomValue(bankRecMatchFilters)
+ const selectedBank = useAtomValue(selectedBankAccountAtom)
+
+ const onUndo = () => {
+ call({
+ bank_transaction_id: item.bankTransaction.name,
+ voucher_type: item.voucher.reference_doctype,
+ voucher_id: item.voucher.reference_name,
+ }).then(() => {
+ toast.success(type === 'match' ? _("Unmatched") : _("Cancelled"))
+
+ if (selectedBank?.name === item.bankTransaction.bank_account) {
+ mutate(`bank-reconciliation-unreconciled-transactions-${selectedBank?.name}-${dates.fromDate}-${dates.toDate}`)
+ mutate(`bank-reconciliation-account-closing-balance-${selectedBank?.name}-${dates.toDate}`)
+ // Update the matching vouchers for the selected transaction
+ mutate(`bank-reconciliation-vouchers-${item.bankTransaction.name}-${dates.fromDate}-${dates.toDate}-${matchFilters.join(',')}`)
+ }
+
+ setTimeout(() => {
+ actionLog((prev) => {
+ // Find the action and then remove the item from the action. If the action is empty, remove the action from the array
+ const action = prev.find((action) => action.timestamp === timestamp)
+
+ if (action) {
+ action.items = action.items.filter((i) => i.bankTransaction.name !== item.bankTransaction.name)
+ }
+ // If the action is empty, remove the action from the array
+ if (action && action.items.length === 0) {
+ return prev.filter((a) => a.timestamp !== timestamp)
+ } else {
+ return prev.map((a) => a.timestamp === timestamp ? { ...a, items: action?.items ?? [] } : a)
+ }
+ })
+ }, 100)
+
+ setIsOpen(false)
+
+ }).catch((error) => {
+ toast.error(_("There was an error while performing the action."), {
+ duration: 5000,
+ description: getErrorMessage(error),
+ })
+ })
+ }
+
+ return
+
+
+
+
+
+ )
+}
+
+const OpeningBalance = () => {
+ const bankAccount = useAtomValue(selectedBankAccountAtom)
+ const { data, isLoading } = useGetAccountOpeningBalance()
+
+ return
+
+
+
+
+ {_("Closing Balance as per system")}
+
+
+
+
+
+
+ {_("This is what the system expects the closing balance to be in your bank statement.")}
+
+ {_("It takes into account all the transactions that have been posted and subtracts the transactions that have not cleared yet.")} +
+ {_("If your bank statement shows a different closing balance, it is because all transactions have not reconciled yet.")} +
+ For more information, click on the Bank Reconciliation Statement tab below. +
+
+
+
+
+ {isLoading ? {_("Closing balance as per system")}
++ {_("It takes into account all the transactions that have been posted and subtracts the transactions that have not cleared yet.")} +
+ {_("If your bank statement shows a different closing balance, it is because all transactions have not reconciled yet.")} +
+ For more information, click on the Bank Reconciliation Statement tab below. +
+
+}
+
+const ClosingBalanceAsPerStatement = () => {
+
+ const bankAccount = useAtomValue(selectedBankAccountAtom)
+ const dates = useAtomValue(bankRecDateAtom)
+ const setValue = useSetAtom(bankRecClosingBalanceAtom(bankAccount?.name ?? ''))
+
+ const { data, isLoading } = useGetAccountClosingBalanceAsPerStatement({
+ onSuccess: (data) => {
+ if (data?.message && data?.message?.balance) {
+ setValue({
+ value: data?.message?.balance,
+ stringValue: data?.message?.balance.toString()
+ })
+ }
+ }
+ })
+
+ const isDateSame = data?.message?.date === dates.toDate
+
+ const [isOpen, setIsOpen] = useState(false)
+
+
+ return
+
+
+
+
+ {!isDateSame && data?.message.date && {_("As of {0}", [formatDate(data?.message?.date ?? '', 'Do MMM YYYY')])}}
+
+
+
+
+
+
+}
+
+export default BankBalance
\ No newline at end of file
diff --git a/banking/src/components/features/BankReconciliation/BankClearanceSummary.tsx b/banking/src/components/features/BankReconciliation/BankClearanceSummary.tsx
new file mode 100644
index 00000000000..077ee41ccd2
--- /dev/null
+++ b/banking/src/components/features/BankReconciliation/BankClearanceSummary.tsx
@@ -0,0 +1,355 @@
+import { useAtomValue } from "jotai"
+import { MissingFiltersBanner } from "./MissingFiltersBanner"
+import { bankRecDateAtom, SelectedBank, selectedBankAccountAtom } from "./bankRecAtoms"
+import { useCurrentCompany } from "@/hooks/useCurrentCompany"
+import { Paragraph } from "@/components/ui/typography"
+import type { ColumnDef } from "@tanstack/react-table"
+import { useCallback, useMemo, useState } from "react"
+import { useFrappeGetCall, useFrappePostCall, useSWRConfig } from "frappe-react-sdk"
+import { QueryReportReturnType } from "@/types/custom/Reports"
+import { formatDate } from "@/lib/date"
+import { ListView, type ListViewColumnMeta } from "@/components/ui/list-view"
+import { Table, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { formatCurrency } from "@/lib/numbers"
+import { getCompanyCurrency } from "@/lib/company"
+import { slug } from "@/lib/frappe"
+import { CheckCircle2, ReceiptTextIcon, XCircle } from "lucide-react"
+import ErrorBanner from "@/components/ui/error-banner"
+import { Badge } from "@/components/ui/badge"
+import _ from "@/lib/translate"
+import { useCopyToClipboard } from "usehooks-ts"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { toast } from "sonner"
+import { Button } from "@/components/ui/button"
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+import { Form } from "@/components/ui/form"
+import { useForm } from "react-hook-form"
+import { DateField } from "@/components/ui/form-elements"
+import { Empty, EmptyMedia, EmptyHeader, EmptyTitle, EmptyDescription } from "@/components/ui/empty"
+
+const BankClearanceSummary = () => {
+ const bankAccount = useAtomValue(selectedBankAccountAtom)
+ const dates = useAtomValue(bankRecDateAtom)
+
+ if (!bankAccount) {
+ return {_("Balances as per bank statement before {0}", [formatDate(date, 'Do MMM YYYY')])}
+
+
+
+
+ )
+ },
+ },
+ ],
+ [_, accountCurrency, bankAccount, companyID, mutate, onCopy],
+ )
+
+ return
+
+ `${row.payment_entry}-${row.posting_date}`}
+ maxHeight="calc(100vh - 200px)"
+ scrollAreaClassName="min-h-[calc(100vh-200px)]"
+ emptyState={_("No rows to display.")}
+ />
+ ) : null}
+
+ {data && data.message.result.length == 0 &&
+
+
+
+
+ {_("No entries found")}
+ {_("There are no accounting entries in the system for the selected account and dates.")}
+
+
+ }
+
+
+
+}
+
+const SetClearanceDateButton = ({ voucher, bankAccount, companyID, mutate }: { voucher: BankClearanceSummaryEntry, bankAccount: SelectedBank | null, companyID: string, mutate: VoidFunction }) => {
+
+ const [open, setOpen] = useState(false)
+
+ const onClose = () => {
+ setOpen(false)
+ mutate()
+ }
+
+ return
+}
+
+const ForceClearVoucherForm = ({ voucher, bankAccount, companyID, onClose }: { voucher: BankClearanceSummaryEntry, bankAccount: SelectedBank, companyID: string, onClose: () => void }) => {
+
+ const { mutate } = useSWRConfig()
+
+ const dates = useAtomValue(bankRecDateAtom)
+ const form = useForm<{ clearance_date: string }>({
+ defaultValues: {
+ clearance_date: voucher.posting_date,
+ }
+ })
+
+ const { call, loading, error } = useFrappePostCall('erpnext.accounts.doctype.bank_reconciliation_tool.bank_reconciliation_tool.update_clearance_date')
+
+ const onSubmit = (data: { clearance_date: string }) => {
+ call({
+ payment_document: voucher.payment_document_type,
+ payment_entry: voucher.payment_entry,
+ account: bankAccount.account,
+ clearance_date: data.clearance_date,
+ })
+ .then(() => {
+ toast.success(_("Clearance date updated"))
+ onClose()
+ mutate(`bank-reconciliation-account-closing-balance-${bankAccount?.name}-${dates.toDate}`)
+ })
+ }
+
+ return
+
+}
+
+export default BankClearanceSummary
diff --git a/banking/src/components/features/BankReconciliation/BankEntryModal.tsx b/banking/src/components/features/BankReconciliation/BankEntryModal.tsx
new file mode 100644
index 00000000000..e6514e5d19c
--- /dev/null
+++ b/banking/src/components/features/BankReconciliation/BankEntryModal.tsx
@@ -0,0 +1,831 @@
+import { useAtom, useAtomValue, useSetAtom } from "jotai"
+import { bankRecRecordJournalEntryModalAtom, bankRecSelectedTransactionAtom, bankRecUnreconcileModalAtom, selectedBankAccountAtom } from "./bankRecAtoms"
+import { Dialog, DialogContent, DialogTitle, DialogDescription, DialogHeader, DialogFooter, DialogClose } from "@/components/ui/dialog"
+import _ from "@/lib/translate"
+import { UnreconciledTransaction, useGetRuleForTransaction, useRefreshUnreconciledTransactions, useUpdateActionLog } from "./utils"
+import { useFieldArray, useForm, useFormContext, useWatch } from "react-hook-form"
+import { JournalEntry } from "@/types/Accounts/JournalEntry"
+import { getCompanyCostCenter, getCompanyCurrency } from "@/lib/company"
+import { FrappeConfig, FrappeContext, useFrappePostCall } from "frappe-react-sdk"
+import { toast } from "sonner"
+import ErrorBanner from "@/components/ui/error-banner"
+import { Button } from "@/components/ui/button"
+import SelectedTransactionDetails from "./SelectedTransactionDetails"
+import { AccountFormField, CurrencyFormField, DataField, DateField, LinkFormField, PartyTypeFormField, SmallTextField } from "@/components/ui/form-elements"
+import { Form } from "@/components/ui/form"
+import { useCallback, useContext, useMemo, useRef, useState } from "react"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Checkbox } from "@/components/ui/checkbox"
+import { ArrowDownRight, ArrowUpRight, Plus, Trash2 } from "lucide-react"
+import { flt, formatCurrency } from "@/lib/numbers"
+import { cn } from "@/lib/utils"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import SelectedTransactionsTable from "./SelectedTransactionsTable"
+import { JournalEntryAccount } from "@/types/Accounts/JournalEntryAccount"
+import { BankTransaction } from "@/types/Accounts/BankTransaction"
+import FileUploadBanner from "@/components/common/FileUploadBanner"
+import { Label } from "@/components/ui/label"
+import { FileDropzone } from "@/components/ui/file-dropzone"
+import { useGetAccounts } from "@/components/common/AccountsDropdown"
+import { useHotkeys } from "react-hotkeys-hook"
+
+const BankEntryModal = () => {
+
+ const [isOpen, setIsOpen] = useAtom(bankRecRecordJournalEntryModalAtom)
+
+ return (
+
+ )
+}
+
+const RecordBankEntryModalContent = () => {
+
+ const selectedBankAccount = useAtomValue(selectedBankAccountAtom)
+
+ const selectedTransaction = useAtomValue(bankRecSelectedTransactionAtom(selectedBankAccount?.name ?? ''))
+
+ if (!selectedTransaction || !selectedBankAccount || selectedTransaction.length === 0) {
+ return
+
+ ${bankAccount?.account}`, `${formattedFromDate}`, `${formattedToDate}`])
+ }} />
+
+
+
+ {error &&
+ {_("No transaction selected")}
+
+ }
+
+ if (selectedTransaction.length === 1) {
+ return
+
+
+
+
+}
+
+const PartyField = ({ index, onChange, readOnly }: { index: number, onChange: (value: string, index: number) => void, readOnly: boolean }) => {
+
+ const { control } = useFormContext
+
+
+
+
+
+
+ {selectedRows.length > 0 &&
+
+
}
+
+
+
+}
+
+
+export default BankEntryModal
diff --git a/banking/src/components/features/BankReconciliation/BankPicker.tsx b/banking/src/components/features/BankReconciliation/BankPicker.tsx
new file mode 100644
index 00000000000..9150103fd32
--- /dev/null
+++ b/banking/src/components/features/BankReconciliation/BankPicker.tsx
@@ -0,0 +1,124 @@
+import { useAtom, useSetAtom } from "jotai"
+import { SelectedBank, selectedBankAccountAtom } from "./bankRecAtoms"
+import { useCallback } from "react"
+import { useGetBankAccounts, useGetUnreconciledTransactions } from "./utils"
+import { cn } from "@/lib/utils"
+import { getTimeago } from "@/lib/date"
+import ErrorBanner from "@/components/ui/error-banner"
+import _ from "@/lib/translate"
+import { Badge } from "@/components/ui/badge"
+import { useTheme } from "@/components/ui/theme-provider"
+import BankLogo from "@/components/common/BankLogo"
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"
+import { LandmarkIcon } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useCurrentCompany } from "@/hooks/useCurrentCompany"
+
+const BankPicker = ({ className }: { className?: string }) => {
+
+ const setSelectedBank = useSetAtom(selectedBankAccountAtom)
+
+ const onLoadingSuccess = useCallback((data?: SelectedBank[]) => {
+ if (!data) return
+ if (data.length === 1) {
+ setSelectedBank(data[0])
+ } else if (data.length > 1) {
+ const defaultBank = data.find((bank: SelectedBank) => bank.is_default)
+ if (defaultBank) {
+ setSelectedBank(defaultBank)
+ }
+ }
+ }, [setSelectedBank])
+
+ const selectedCompany = useCurrentCompany()
+
+ const { banks, isLoading, error } = useGetBankAccounts(onLoadingSuccess)
+
+ const { themeValue } = useTheme()
+
+ if (isLoading) {
+ return null
+ }
+
+ if (error) {
+ return
+ {_("Total Debit")}
+ {formatCurrency(totalDebits, currency)}
+
+
+ {_("Total Credit")}
+ {formatCurrency(totalCredits, currency)}
+
+ {total !== 0 &&
+ {_("Difference")}
+
+
+
+
+
+ {_("Add a row with the difference amount")}
+
+
+
}
+
+ 4 ? 'pb-2' : '', className,
+ )}
+ style={{
+ scrollbarWidth: 'thin',
+ scrollbarColor: themeValue === 'Dark' ? 'var(--surface-gray-2) var(--surface-gray-1)' : 'rgb(209 213 219) rgb(243 244 246)',
+ }}
+ >
+ {
+ banks?.map((bank) => (
+
+ )
+}
+
+const BankPickerItem = ({ bank }: { bank: SelectedBank }) => {
+
+ const [selectedBank, setSelectedBank] = useAtom(selectedBankAccountAtom)
+
+ const isSelected = selectedBank?.name === bank.name
+
+ const { mutate } = useGetUnreconciledTransactions()
+
+ const onSelect = () => {
+ setSelectedBank(bank)
+ mutate()
+ }
+
+ return
+
+
+
+}
+
+export default BankPicker
\ No newline at end of file
diff --git a/banking/src/components/features/BankReconciliation/BankRecDateFilter.tsx b/banking/src/components/features/BankReconciliation/BankRecDateFilter.tsx
new file mode 100644
index 00000000000..84bd5278ccc
--- /dev/null
+++ b/banking/src/components/features/BankReconciliation/BankRecDateFilter.tsx
@@ -0,0 +1,275 @@
+import { useAtom } from 'jotai'
+import { bankRecDateAtom } from './bankRecAtoms'
+import { useMemo, useState } from 'react'
+import { AVAILABLE_TIME_PERIODS, formatDate, getDatesForTimePeriod, TimePeriod } from '@/lib/date'
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRight } from 'lucide-react'
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
+import { parse } from "chrono-node"
+import { Calendar } from '@/components/ui/calendar'
+import useFiscalYear from '@/hooks/useFiscalYear'
+import dayjs from 'dayjs'
+import _ from '@/lib/translate'
+import { useDirection } from '@/components/ui/direction'
+
+const BankRecDateFilter = () => {
+
+ const [bankRecDate, setBankRecDate] = useAtom(bankRecDateAtom)
+
+ const { data: fiscalYear } = useFiscalYear()
+
+ const timePeriodOptions = useMemo(() => {
+ const standardOptions = AVAILABLE_TIME_PERIODS.map((period) => {
+ const dates = getDatesForTimePeriod(period)
+ return {
+ label: period,
+ fromDate: dates.fromDate,
+ toDate: dates.toDate,
+ format: dates.format,
+ translatedLabel: dates.translatedLabel
+ }
+ })
+
+ if (fiscalYear?.message) {
+ // For a fiscal year, we need to replace "Last Year", "This Year", and add options for quarters
+ const fiscalYearStart = fiscalYear.message.year_start_date
+ const fiscalYearEnd = fiscalYear.message.year_end_date
+
+ const q1 = {
+ label: `Q1: ${fiscalYear.message.name}`,
+ translatedLabel: `${_("Q1")}: ${fiscalYear.message.name}`,
+ fromDate: fiscalYearStart,
+ toDate: dayjs(fiscalYearStart).add(3, 'month').format('YYYY-MM-DD'),
+ format: 'MMM YYYY'
+ }
+
+ const q2 = {
+ label: `Q2: ${fiscalYear.message.name}`,
+ translatedLabel: `${_("Q2")}: ${fiscalYear.message.name}`,
+ fromDate: dayjs(fiscalYearStart).add(3, 'month').format('YYYY-MM-DD'),
+ toDate: dayjs(fiscalYearStart).add(6, 'month').format('YYYY-MM-DD'),
+ format: 'MMM YYYY'
+ }
+
+ const q3 = {
+ label: `Q3: ${fiscalYear.message.name}`,
+ translatedLabel: `${_("Q3")}: ${fiscalYear.message.name}`,
+ fromDate: dayjs(fiscalYearStart).add(6, 'month').format('YYYY-MM-DD'),
+ toDate: dayjs(fiscalYearStart).add(9, 'month').format('YYYY-MM-DD'),
+ format: 'MMM YYYY'
+ }
+
+ const q4 = {
+ label: `Q4: ${fiscalYear.message.name}`,
+ translatedLabel: `${_("Q4")}: ${fiscalYear.message.name}`,
+ fromDate: dayjs(fiscalYearStart).add(9, 'month').format('YYYY-MM-DD'),
+ toDate: fiscalYearEnd,
+ format: 'MMM YYYY'
+ }
+
+ const thisYear = {
+ label: `This Fiscal Year`,
+ translatedLabel: `${_("This Fiscal Year")}`,
+ fromDate: fiscalYearStart,
+ toDate: fiscalYearEnd,
+ format: 'MMM YYYY'
+ }
+
+ const lastYear = {
+ label: `Last Fiscal Year`,
+ translatedLabel: `${_("Last Fiscal Year")}`,
+ fromDate: dayjs(fiscalYearStart).subtract(1, 'year').format('YYYY-MM-DD'),
+ toDate: dayjs(fiscalYearEnd).subtract(1, 'year').format('YYYY-MM-DD'),
+ format: 'MMM YYYY'
+ }
+ // Sort the options so that we get "This Month", "Last Month", quarters, fiscal year, then the rest of the standard options
+
+ const topRankedItems = standardOptions.filter((option) => {
+ return option.label === "This Month" || option.label === "Last Month"
+ })
+
+ const bottomRankedItems = standardOptions.filter((option) => {
+ return option.label !== "This Month" && option.label !== "Last Month"
+ })
+
+ return [...topRankedItems, q1, q2, q3, q4, thisYear, lastYear, ...bottomRankedItems]
+ }
+
+ return standardOptions
+ }, [fiscalYear])
+
+ const [open, setOpen] = useState(false)
+ const [value, setValue] = useState("")
+
+ const timePeriod: TimePeriod | string = useMemo(() => {
+ if (bankRecDate.fromDate && bankRecDate.toDate) {
+ // Check if the from and to dates match any predefined time period
+ for (const period of timePeriodOptions) {
+ if (period.fromDate === bankRecDate.fromDate && period.toDate === bankRecDate.toDate) {
+ return period.label;
+ }
+ }
+ return "Date Range";
+ } else {
+ return "Date Range";
+ }
+ }, [bankRecDate.fromDate, bankRecDate.toDate, timePeriodOptions]);
+
+ const handleTimePeriodChange = (fromDate: string, toDate: string) => {
+ setBankRecDate({ fromDate, toDate })
+ setOpen(false)
+ }
+
+ const dateObj = useMemo(() => {
+ return {
+ from: new Date(bankRecDate.fromDate),
+ to: new Date(bankRecDate.toDate)
+ }
+ }, [bankRecDate.fromDate, bankRecDate.toDate])
+
+ const direction = useDirection()
+
+
+
+ return
+
+
+
+ {bank.account_name}
+ {bank.account_type &&
+ {bank.account_type?.slice(0, 24)}
+ }
+
+
+ {bank.account}
+ {bank.last_integration_date && {_("Last Synced Transaction")}: {getTimeago(bank.last_integration_date)}}
+
+
+
+
+
+
+
+
+
+
+
+
+ {timePeriodOptions.map((period) => (
+ handleTimePeriodChange(period.fromDate, period.toDate)}>
+
+ {period.translatedLabel ?? _(period.label)}
+
+
+ {formatDate(period.fromDate, period.format)} {direction === 'ltr' ?
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ {
+ if (date) {
+ setBankRecDate({ fromDate: formatDate(date.from, 'YYYY-MM-DD'), toDate: formatDate(date.to, 'YYYY-MM-DD') })
+ }
+ }}
+ />
+
+
+
+}
+
+const referentialKeywords = ["last", "this", "next", "previous"]
+const EmptyState = ({ onSelect, value }: { onSelect: (fromDate: string, toDate: string) => void, value: string }) => {
+
+ const dates = useMemo(() => {
+ if (value) {
+ // Try parsing the value
+ const parsedDate = parse(value, undefined, { forwardDate: false })
+
+ if (parsedDate && parsedDate.length > 0) {
+ const startDate = parsedDate[0].start.date()
+ const endDate = parsedDate[0].end?.date()
+
+ if (!endDate) {
+ const today = new Date()
+ // If today is greater than the start date, use today as the end date
+ if (startDate.getTime() > today.getTime()) {
+ return { fromDate: today, toDate: startDate }
+ } else {
+ // Check if the user only wants a specific month like "May 2025"
+ // If the "known values" just has month and year, then we need to get the first day of the month and the last day of the month
+ // @ts-expect-error - "Known Values" is available in the start "ParsingComponents"
+ if (parsedDate[0].start.knownValues?.month && !parsedDate[0].start.knownValues?.day) {
+ return {
+ fromDate: startDate,
+ toDate: dayjs(startDate).endOf('month').toDate()
+ }
+ // @ts-expect-error - "Known Values" is available in the start "ParsingComponents"
+ } else if (parsedDate[0].start.knownValues?.month && parsedDate[0].start.knownValues?.day && !referentialKeywords.some(keyword => value.toLowerCase().includes(keyword))) {
+ // If month and day is known, then we should not assume that the user wants to get everything until today
+ return {
+ fromDate: startDate,
+ toDate: startDate,
+ }
+ }
+
+ return {
+ fromDate: startDate,
+ toDate: today
+ }
+ }
+ } else {
+ return { fromDate: startDate, toDate: endDate }
+ }
+ }
+
+ }
+ }, [value])
+
+ const onClick = (fromDate: Date, toDate: Date) => {
+ onSelect(formatDate(fromDate, 'YYYY-MM-DD'), formatDate(toDate, 'YYYY-MM-DD'))
+ }
+
+ const isEqual = dates?.fromDate && dates?.toDate && dayjs(dates.fromDate).isSame(dates.toDate, 'date')
+
+ return
+ {dates ?
+
+}
+
+export default BankRecDateFilter
\ No newline at end of file
diff --git a/banking/src/components/features/BankReconciliation/BankReconciliationStatement.tsx b/banking/src/components/features/BankReconciliation/BankReconciliationStatement.tsx
new file mode 100644
index 00000000000..acfed95aa15
--- /dev/null
+++ b/banking/src/components/features/BankReconciliation/BankReconciliationStatement.tsx
@@ -0,0 +1,315 @@
+import { useAtomValue } from "jotai"
+import { MissingFiltersBanner } from "./MissingFiltersBanner"
+import { bankRecDateAtom, selectedBankAccountAtom } from "./bankRecAtoms"
+import { useCurrentCompany } from "@/hooks/useCurrentCompany"
+import { Paragraph } from "@/components/ui/typography"
+import { useCallback, useMemo } from "react"
+import type { ColumnDef } from "@tanstack/react-table"
+import { useFrappeGetCall } from "frappe-react-sdk"
+import { QueryReportReturnType } from "@/types/custom/Reports"
+import { formatDate } from "@/lib/date"
+import { ListView, type ListViewColumnMeta } from "@/components/ui/list-view"
+import { formatCurrency } from "@/lib/numbers"
+import { getCompanyCurrency } from "@/lib/company"
+import { slug } from "@/lib/frappe"
+import { ScrollTextIcon } from "lucide-react"
+import ErrorBanner from "@/components/ui/error-banner"
+import { StatContainer, StatLabel, StatValue } from "@/components/ui/stats"
+import _ from "@/lib/translate"
+import { toast } from "sonner"
+import { useCopyToClipboard } from "usehooks-ts"
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"
+
+const BankReconciliationStatement = () => {
+ const bankAccount = useAtomValue(selectedBankAccountAtom)
+ const dates = useAtomValue(bankRecDateAtom)
+
+ if (!bankAccount) {
+ return onClick(dates.fromDate, dates.toDate)}>
+
+ {value}
+
+ {isEqual ?
+ {formatDate(dates.fromDate, 'Do MMM YYYY')}
+ :
+
+ {formatDate(dates.fromDate, 'Do MMM YY')}
:
+
+ No results found
+
+ }
+
+
+
+
+
+
+ {_("No entries found")}
+ {_("There are no accounting entries in the system for the selected account and dates.")}
+
+
+ }
+
+
+
+}
+
+const SummarySection = ({ data }: { data: { message: QueryReportReturnType } }) => {
+
+ const company = useCurrentCompany()
+ const bankAccount = useAtomValue(selectedBankAccountAtom)
+
+ const { bankStatementBalanceAsPerGL, outstandingChecksDebit, outstandingChecksCredit, incorrectlyClearedEntriesDebit, incorrectlyClearedEntriesCredit, calculatedBankStatementBalance } = useMemo(() => {
+
+ // Loop over the results and find the corresponding rows
+
+ let bankStatementBalanceAsPerGL = 0
+
+ let outstandingChecksDebit = 0
+ let outstandingChecksCredit = 0
+
+ let incorrectlyClearedEntriesDebit = 0
+ let incorrectlyClearedEntriesCredit = 0
+
+ let calculatedBankStatementBalance = 0
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ data?.message.result.forEach((r: any) => {
+ if (r.payment_entry === 'Bank Statement balance as per General Ledger') {
+ bankStatementBalanceAsPerGL = r.debit - r.credit
+ }
+
+ if (r.payment_entry === 'Outstanding Checks and Deposits to clear') {
+ outstandingChecksDebit = r.debit
+ outstandingChecksCredit = r.credit
+ }
+
+ if (r.payment_entry === 'Checks and Deposits incorrectly cleared') {
+ incorrectlyClearedEntriesDebit = r.debit
+ incorrectlyClearedEntriesCredit = r.credit
+ }
+
+ if (r.payment_entry === 'Calculated Bank Statement balance') {
+ calculatedBankStatementBalance = r.debit - r.credit
+ }
+ })
+
+ return {
+ bankStatementBalanceAsPerGL,
+ outstandingChecksDebit,
+ outstandingChecksCredit,
+ incorrectlyClearedEntriesDebit,
+ incorrectlyClearedEntriesCredit,
+ calculatedBankStatementBalance
+ }
+
+ }, [data])
+
+ const currency = bankAccount?.account_currency ?? getCompanyCurrency(company)
+
+ return
+
+ ${bankAccount?.account}`, `${formatDate(dates.toDate)}`])
+ }} />
+
+
+
+ {error &&
+ row.payment_entry}
+ maxHeight="min(70vh, 640px)"
+ emptyState={_("No entries with a payment document in this list.")}
+ />
+
+ )}
+
+ {data && data.message.result.length === 0 &&
+ {_("Bank Reconciliation Statement")}
+
+
+ {_("Bank Statement Balance as per General Ledger")}
+ {formatCurrency(bankStatementBalanceAsPerGL, currency)}
+
+
+
+ {_("Outstanding Checks and Deposits to clear")}
+ {formatCurrency(outstandingChecksDebit - outstandingChecksCredit, currency)}
+
+
+ {(incorrectlyClearedEntriesDebit > 0 || incorrectlyClearedEntriesCredit > 0) &&
+ {_("Checks and Deposits incorrectly cleared")}
+ {formatCurrency(incorrectlyClearedEntriesDebit - incorrectlyClearedEntriesCredit)}
+ {/* }>
+ {incorrectlyClearedEntriesDebit !== 0 && Debit: {formatCurrency(incorrectlyClearedEntriesDebit)} }
+ {incorrectlyClearedEntriesCredit !== 0 && Credit: {formatCurrency(incorrectlyClearedEntriesCredit)} }
+
*/}
+ }
+
+
+ {row.original.allocated_amount && row.original.allocated_amount > 0 ? (
+
+ ) : null}
+
+ ),
+ },
+ ],
+ [_, accountCurrency, onUndo],
+ )
+
+ const [search, setSearch] = useDebounceValue('', 250)
+ const [amountFilter, setAmountFilter] = useState<{ value: number, stringValue?: string | number }>({ value: 0, stringValue: '0.00' })
+ const [typeFilter, setTypeFilter] = useState('All')
+ const [status, setStatus] = useState<'Reconciled' | 'Unreconciled' | 'All' | 'Partially Reconciled'>('All')
+
+ const onSearchChange = (e: React.ChangeEvent
+
+ row.name}
+ maxHeight="calc(100vh - 200px)"
+ scrollAreaClassName="min-h-[calc(100vh-200px)]"
+ emptyState={
+
+
+
+ {_("No bank transactions found")}
+ {_("There are no transactions in the system for the selected bank account and dates that match the filters.")}
+
+ }
+ />
+ ) : null}
+
+
+
+}
+
+interface FilterProps {
+ onSearchChange: (e: React.ChangeEvent
+
+ ${bankAccount?.account_name}`, `${formattedFromDate}`, `${formattedToDate}`])
+ }} />
+
+
+
+
+
+ {error &&
+
+
+
+
+
+
+ {results?.length} {_(results?.length === 1 ? "result" : "results")}
+
+
+
+
+}
+
+export default BankTransactions
diff --git a/banking/src/components/features/BankReconciliation/BankTransactionUnreconcileModal.tsx b/banking/src/components/features/BankReconciliation/BankTransactionUnreconcileModal.tsx
new file mode 100644
index 00000000000..a9996a2ddef
--- /dev/null
+++ b/banking/src/components/features/BankReconciliation/BankTransactionUnreconcileModal.tsx
@@ -0,0 +1,125 @@
+import { AlertDialog, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from "@/components/ui/alert-dialog"
+import { useAtom, useAtomValue } from "jotai"
+import { bankRecDateAtom, bankRecUnreconcileModalAtom, selectedBankAccountAtom } from "./bankRecAtoms"
+import { useMemo } from "react"
+import { useFrappeGetDoc, useFrappePostCall, useSWRConfig } from "frappe-react-sdk"
+import { BankTransaction } from "@/types/Accounts/BankTransaction"
+import { toast } from "sonner"
+import ErrorBanner from "@/components/ui/error-banner"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { formatCurrency } from "@/lib/numbers"
+import { Badge } from "@/components/ui/badge"
+import { slug } from "@/lib/frappe"
+import SelectedTransactionDetails from "./SelectedTransactionDetails"
+import _ from "@/lib/translate"
+
+const BankTransactionUnreconcileModal = () => {
+
+ const [unreconcileModal, setBankRecUnreconcileModal] = useAtom(bankRecUnreconcileModalAtom)
+
+ const onOpenChange = (v: boolean) => {
+ if (!v) {
+ setBankRecUnreconcileModal('')
+ }
+ }
+
+ return
+
+ {
+ // If the input ends with a decimal or a decimal with trailing zeroes, store the string since we need the user to be able to type the decimals.
+ // When the user eventually types the decimals or blurs out, the value is formatted anyway.
+ // Otherwise store the float value
+ // Check if the value ends with a decimal or a decimal with trailing zeroes
+ const isDecimal = v?.endsWith(decimalSeparator) || v?.endsWith(decimalSeparator + '0')
+ const newValue = isDecimal ? v : values?.float ?? ''
+ setAmountFilter({
+ value: Number(newValue),
+ stringValue: newValue
+ })
+ }}
+ // @ts-expect-error - CurrencyInputProps doesn't have a variant prop but Input does
+ variant={"outline"}
+ customInput={Input}
+ />
+
+
+
+
+
+
+
+ onTypeFilterChange('All')}>
+ onTypeFilterChange('Debits')}>
+ onTypeFilterChange('Credits')}>
+
+
+
+
+
+
+
+
+
+ setStatus('All')}>{
+ setStatus('Reconciled')}>{
+ setStatus('Unreconciled')}>{
+ setStatus('Partially Reconciled')}>{
+
+
+
+
+
+ {_("Cancel")}
+
+ {_("Unreconcile")}
+
+
+
+}
+
+export default BankTransactionUnreconcileModal
\ No newline at end of file
diff --git a/banking/src/components/features/BankReconciliation/CompanySelector.tsx b/banking/src/components/features/BankReconciliation/CompanySelector.tsx
new file mode 100644
index 00000000000..5496ec9f851
--- /dev/null
+++ b/banking/src/components/features/BankReconciliation/CompanySelector.tsx
@@ -0,0 +1,92 @@
+import { Button } from "@/components/ui/button"
+import { selectedCompanyAtom, useCurrentCompany } from "@/hooks/useCurrentCompany"
+import { useSetAtom } from "jotai"
+import { Building2, Check, ChevronDown } from "lucide-react"
+import { useState } from "react"
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+} from "@/components/ui/command"
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover"
+import { cn } from "@/lib/utils"
+import _ from "@/lib/translate"
+import { selectedBankAccountAtom } from "./bankRecAtoms"
+
+const CompanySelector = ({ onChange }: { onChange?: (company: string) => void }) => {
+ const [open, setOpen] = useState(false)
+ const [searchQuery, setSearchQuery] = useState("")
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const options = window.frappe?.boot?.docs?.filter((doc: Record
+ {error &&
+
+
+
+ {vouchersWhichWillBeCancelled && vouchersWhichWillBeCancelled?.length > 0 && The following documents will be cancelled:}
+ {vouchersWhichWillBeCancelled && vouchersWhichWillBeCancelled?.length > 0 &&
+ -
+ {vouchersWhichWillBeCancelled?.map((voucher) => {
+ return
- {_(voucher.payment_document)}: {voucher.payment_entry} + })} +
+
+
+
+
+
+ {_("It's all good!")}
+ {_("There are no entries in the system where the clearance date is before the posting date.")}
+
+
+ }
+
+
+
+}
+
+export default IncorrectlyClearedEntries
diff --git a/banking/src/components/features/BankReconciliation/MatchAndReconcile.tsx b/banking/src/components/features/BankReconciliation/MatchAndReconcile.tsx
new file mode 100644
index 00000000000..006668ac50d
--- /dev/null
+++ b/banking/src/components/features/BankReconciliation/MatchAndReconcile.tsx
@@ -0,0 +1,949 @@
+import { useAtom, useAtomValue, useSetAtom } from "jotai"
+import { bankRecAmountFilter, bankRecDateAtom, bankRecRecordJournalEntryModalAtom, bankRecRecordPaymentModalAtom, bankRecSelectedTransactionAtom, bankRecTransactionTypeFilter, bankRecTransferModalAtom, selectedBankAccountAtom } from "./bankRecAtoms"
+import { H4 } from "@/components/ui/typography"
+import { useMemo, useRef } from "react"
+import { getCompanyCurrency } from "@/lib/company"
+import ErrorBanner from "@/components/ui/error-banner"
+import { Separator } from "@/components/ui/separator"
+import Fuse from 'fuse.js'
+import { getSearchResults, LinkedPayment, UnreconciledTransaction, useGetRuleForTransaction, useGetUnreconciledTransactions, useGetVouchersForTransaction, useIsTransactionWithdrawal, useReconcileTransaction, useTransactionSearch } from "./utils"
+import { Input } from "@/components/ui/input"
+import { AlertCircleIcon, ArrowDownRight, ArrowRightIcon, ArrowRightLeft, ArrowUpRight, BadgeCheck, ChevronDown, DollarSign, Landmark, LandmarkIcon, ListIcon, Loader2, Receipt, ReceiptIcon, Search, User, XCircle, ZapIcon } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/components/ui/dropdown-menu"
+import { Button } from "@/components/ui/button"
+import CurrencyInput from 'react-currency-input-field'
+import { getCurrencySymbol } from "@/lib/currency"
+import { Virtuoso } from 'react-virtuoso'
+import { formatDate } from "@/lib/date"
+import { Badge } from "@/components/ui/badge"
+import { formatCurrency, getCurrencyFormatInfo } from "@/lib/numbers"
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@/components/ui/tooltip"
+import { Skeleton } from "@/components/ui/skeleton"
+import { slug } from "@/lib/frappe"
+import _ from "@/lib/translate"
+import TransferModal from "./TransferModal"
+import BankEntryModal from "./BankEntryModal"
+import RecordPaymentModal from "./RecordPaymentModal"
+import { Card, CardAction, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import SelectedTransactionsTable from "./SelectedTransactionsTable"
+import MatchFilters from "./MatchFilters"
+import { useHotkeys } from "react-hotkeys-hook"
+import { KeyboardMetaKeyIcon } from "@/components/ui/keyboard-keys"
+import { Kbd, KbdGroup } from "@/components/ui/kbd"
+import { useFrappeGetCall } from "frappe-react-sdk"
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"
+import { Link } from "react-router"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { InputGroup, InputGroupAddon, InputGroupText } from "@/components/ui/input-group"
+
+const MatchAndReconcile = ({ contentHeight }: { contentHeight: number }) => {
+ const selectedBank = useAtomValue(selectedBankAccountAtom)
+
+ if (!selectedBank) {
+ return
+
+ clearance date is before the posting date which is incorrect.")
+ }} />
+
+ {data && data.message.result.length > 0 && + ${formattedToDate}`, `${formattedToDate}`]) + }} /> +
+ {_("You can reset the clearing dates of these entries here.")} + } +
+
+
+ {error && + {data && data.message.result.length > 0 && + ${formattedToDate}`, `${formattedToDate}`]) + }} /> +
+ {_("You can reset the clearing dates of these entries here.")} + } +
+ `${row.payment_entry}-${row.posting_date}`}
+ maxHeight="min(70vh, 640px)"
+ emptyState={_("No rows to display.")}
+ />
+
+ )}
+
+ {data && data.message.result.length === 0 &&
+ {_("Incorrectly cleared entries as per the report.")}
+
+
+
+
+ {_("Unreconciled Transactions")}
+
+
+ {_("Match or Create")}
+
+ (
+
+}
+
+const NoTransactionsFoundBanner = ({ text, description, onClearFilters }: { text: string, description?: string, onClearFilters?: () => void }) => {
+
+ return
+
+
+
+
+
+
+
+ {results?.length} {_(results?.length === 1 ? "result" : "results")}
+
+
+
+
+ {error &&
+
+ {
+ // If the input ends with a decimal or a decimal with trailing zeroes, store the string since we need the user to be able to type the decimals.
+ // When the user eventually types the decimals or blurs out, the value is formatted anyway.
+ // Otherwise store the float value
+ // Check if the value ends with a decimal or a decimal with trailing zeroes
+ const isDecimal = v?.endsWith(decimalSeparator) || v?.endsWith(decimalSeparator + '0')
+ const newValue = isDecimal ? v : values?.float ?? ''
+ const nextAmountFilter = {
+ value: Number(newValue),
+ stringValue: newValue
+ }
+ const hasAmountFilterChanged = amountFilter.value !== nextAmountFilter.value || amountFilter.stringValue !== nextAmountFilter.stringValue
+
+ setAmountFilter(nextAmountFilter)
+
+ // `onValueChange` also fires on blur; avoid clearing selected transaction unless filter value actually changed.
+ if (hasAmountFilterChanged) {
+ onFilterChange()
+ }
+ }}
+ // @ts-expect-error - CurrencyInputProps doesn't have a variant prop but Input does
+ variant={"outline"}
+ customInput={Input}
+ />
+
+
+
+
+
+
+
+ onTypeFilterChange('All')}>
+ onTypeFilterChange('Debits')}>
+ onTypeFilterChange('Credits')}>
+
+
+
+
+
+}
+
+const UnreconciledTransactionItem = ({ transaction }: { transaction: UnreconciledTransaction }) => {
+
+ const selectedBank = useAtomValue(selectedBankAccountAtom)
+
+ const [selectedTransaction, setSelectedTransaction] = useAtom(bankRecSelectedTransactionAtom(selectedBank?.name || ''))
+
+ const { amount, isWithdrawal } = useIsTransactionWithdrawal(transaction)
+
+ const isSelected = selectedTransaction?.some((t) => t.name === transaction.name)
+
+ const currency = transaction.currency ?? selectedBank?.account_currency ?? getCompanyCurrency(selectedBank?.company ?? '')
+
+ const handleSelectTransaction = (event: React.MouseEvent
+
+ {Array.from({ length: 6 }).map((_, index) => (
+
+
+}
+
+
+const VouchersSection = ({ contentHeight }: { contentHeight: number }) => {
+
+ const selectedBank = useAtomValue(selectedBankAccountAtom)
+ const selectedTransactions = useAtomValue(bankRecSelectedTransactionAtom(selectedBank?.name || ''))
+
+
+ if (selectedTransactions.length === 0) {
+ return
+
+
+
+
+
+
+ {formatDate(transaction.date)}
+ {transaction.transaction_type &&
+ {transaction.transaction_type} }
+ {transaction.reference_number &&
+ {_("Ref")}: {transaction.reference_number} }
+
+ {transaction.matched_transaction_rule &&
+ }
+
+ {transaction.description}
+
+ {isWithdrawal ?
+
+
+}
+
+const useKeyboardShortcuts = () => {
+ const setTransferModalOpen = useSetAtom(bankRecTransferModalAtom)
+ const setRecordPaymentModalOpen = useSetAtom(bankRecRecordPaymentModalAtom)
+ const setRecordJournalEntryModalOpen = useSetAtom(bankRecRecordJournalEntryModalAtom)
+
+ useHotkeys('meta+p', () => {
+ //
+ setRecordPaymentModalOpen(true)
+ }, {
+ enabled: true,
+ enableOnFormTags: false,
+ preventDefault: true
+ })
+
+ useHotkeys('meta+b', () => {
+ //
+ setRecordJournalEntryModalOpen(true)
+ }, {
+ enabled: true,
+ enableOnFormTags: false,
+ preventDefault: true
+ })
+
+ useHotkeys('meta+i', () => {
+ //
+ setTransferModalOpen(true)
+ }, {
+ enabled: true,
+ enableOnFormTags: false,
+ preventDefault: true
+ })
+
+ return {
+ setTransferModalOpen,
+ setRecordPaymentModalOpen,
+ setRecordJournalEntryModalOpen
+ }
+}
+
+const OptionsForMultipleTransactions = ({ transactions }: { transactions: UnreconciledTransaction[] }) => {
+
+ const { setTransferModalOpen, setRecordPaymentModalOpen, setRecordJournalEntryModalOpen } = useKeyboardShortcuts()
+
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+}
+
+
+const OptionsForSingleTransaction = ({ transaction, contentHeight }: { transaction: UnreconciledTransaction, contentHeight: number }) => {
+
+ const { setTransferModalOpen, setRecordPaymentModalOpen, setRecordJournalEntryModalOpen } = useKeyboardShortcuts()
+
+ return
+ {transactions.length} {_(transactions.length === 1 ? _("transaction selected") : _("transactions selected"))}
+
+ {formatCurrency(transactions.reduce((acc, transaction) => acc + (transaction.unallocated_amount ?? 0), 0), transactions[0].currency ?? '')}
+
+
+
+
+
+
+
+
+
+
+
+
+ {_("Record a journal entry for expenses, income or split transactions")}
+
+
+
+
+
+
+
+
+
+ {_("Record a payment entry against a customer or supplier")}
+
+
+
+
+
+
+
+
+
+
+ {_("Record an internal transfer to another bank/credit card/cash account")}
+
+
+
+
+
+
+
+
+
+ {transaction.matched_transaction_rule &&
+}
+
+const RuleAction = ({ transaction }: { transaction: UnreconciledTransaction }) => {
+
+ const { data: rule } = useGetRuleForTransaction(transaction)
+ const setTransferModalOpen = useSetAtom(bankRecTransferModalAtom)
+ const setRecordPaymentModalOpen = useSetAtom(bankRecRecordPaymentModalAtom)
+ const setRecordJournalEntryModalOpen = useSetAtom(bankRecRecordJournalEntryModalAtom)
+
+ if (!rule) {
+ return null
+ }
+
+ const getActionIcon = () => {
+ switch (rule.classify_as) {
+ case "Bank Entry":
+ return
+
+
+
+
+
+
+
+ {_("Record a payment entry against a customer or supplier")}
+
+
+
+
+
+
+
+
+
+ {_("Record a journal entry for expenses, income or split transactions")}
+
+
+
+
+
+
+
+
+
+ {_("Record an internal transfer to another bank/credit card/cash account")}
+
+
+
+
+
+
+
+
+ {getActionIcon()}
+
+
+ {rule.rule_name}
+
+ {rule.rule_description || _("Rule matched based on transaction description and other criteria.")}
+
+
+
+
+ {rule.classify_as}
+
+
+
+
+ {_("Priority")} {rule.priority}
+
+
+
+
+
+
+
+ {rule.account && (
+
+
+
+ {_("Account")}:
+ {rule.account}
+
+ )}
+
+ {rule.party_type && rule.party && (
+
+ {_("Party")}:
+ {rule.party} ({_(rule.party_type)})
+
+ )}
+
+
+
+ + {getActionDescription()} +
+
+
+ }
+
+ return
+
+
+
+
+
+
+
+ {_("No vouchers found for this transaction")}
+
+ }
+ (
+
+}
+
+const VoucherItem = ({ voucher, index }: { voucher: LinkedPayment, index: number }) => {
+
+ const selectedBank = useAtomValue(selectedBankAccountAtom)
+ const selectedTransaction = useAtomValue(bankRecSelectedTransactionAtom(selectedBank?.name || ''))
+
+ const { amountMatches, postingDateMatches, referenceDateMatches, referenceMatchesFull, referenceMatchesPartial, isSuggested } = useMemo(() => {
+
+ const transaction = selectedTransaction?.[0]
+
+ // We need to check if the following details match:
+ // Amount
+ // Date
+ // Reference/Description: Full or partial
+ // Whether this is suggested or not - depends on the above scores
+
+ const amountMatches = voucher.paid_amount === transaction?.unallocated_amount
+ const postingDateMatches = voucher.posting_date === transaction?.date
+ const referenceDateMatches = voucher.reference_date === transaction?.date
+ const referenceMatchesFull = voucher.reference_no === transaction?.reference_number || voucher.reference_no === transaction?.description
+
+ const referenceMatchesPartial = transaction?.reference_number?.includes(voucher.reference_no) || transaction?.description?.includes(voucher.reference_no)
+
+
+ const isSuggested = amountMatches && (postingDateMatches || referenceDateMatches || referenceMatchesPartial) && index === 0
+
+ return { isSelected: false, amountMatches, postingDateMatches, referenceDateMatches, referenceMatchesFull, referenceMatchesPartial, isSuggested: isSuggested }
+
+ }, [voucher, selectedTransaction, index])
+
+ const { reconcileTransaction, loading } = useReconcileTransaction()
+
+ const onClick = () => {
+ if (!selectedTransaction) {
+ return
+ }
+ reconcileTransaction(selectedTransaction[0], voucher)
+ }
+
+ return
+
+ {vouchers?.message.length === 0 &&
+
+}
+
+
+const MatchBadge = ({ matchType, label }: { matchType: 'full' | 'partial' | 'none', label: string }) => {
+ return
+
+
+
+
+
+ {isSuggested &&
+
+
+
+
+ {_(voucher.doctype)}
+ {voucher.name}
+
+ {voucher.party && voucher.party_type && }
+
+
+ {voucher.reference_no &&
+
+
+ {_("Amount")}
+ {formatCurrency(voucher.paid_amount, voucher.currency)} {amountMatches ?
+
+
+
+ {voucher.reference_date && {_("Posted On")}
+ {formatDate(voucher.posting_date)} {postingDateMatches ?
+
+
}
+
+ {_("Reference Date")}
+ {formatDate(voucher.reference_date)} {referenceDateMatches ?
+
+
+ {voucher.reference_no}
+
+
+
+
+ {referenceMatchesFull ? `${_("Complete Match")}` : referenceMatchesPartial ? `${_("Partial Match")}` : `${_("No Match")}`}
+
+
+ {referenceMatchesFull ? `${_("Reference matches the selected transaction")}` : referenceMatchesPartial ? `${_("Reference matches the selected transaction partially")}` : `${_("Reference does not match the selected transaction")}`}
+
+
+
+
}
+
+
+
+
+ {_("Suggested")}
+
}
+
+
+
+
+ {data.message.count > 1 ? (
+ {_("There are {0} unreconciled transactions before {1}.", [data.message.count.toString(), formatDate(dates.fromDate)])}
+ ) : (
+ {_("There is one unreconciled transaction before {0}.", [formatDate(dates.fromDate)])}
+ )}
+
+ {_("The opening balance might not match your bank statement. Would you like to reconcile them?")}
+
+
+
+
+
+
+
+
+ {doctypes.map((doctype) => (
+
+ )
+}
+
+const ToggleSwitch = ({ label, id }: { label: string, id: string }) => {
+
+ const [matchFilters, setMatchFilters] = useAtom(bankRecMatchFilters)
+
+ return
+ {
+ if (checked) {
+ setMatchFilters([...matchFilters, id])
+ } else {
+ setMatchFilters(matchFilters.filter(filter => filter !== id))
+ }
+ }} />
+
+
+}
+
+export default MatchFilters
\ No newline at end of file
diff --git a/banking/src/components/features/BankReconciliation/MissingFiltersBanner.tsx b/banking/src/components/features/BankReconciliation/MissingFiltersBanner.tsx
new file mode 100644
index 00000000000..0510b3412f3
--- /dev/null
+++ b/banking/src/components/features/BankReconciliation/MissingFiltersBanner.tsx
@@ -0,0 +1,10 @@
+import { Paragraph } from "@/components/ui/typography"
+import { cn } from "@/lib/utils"
+import { ReactNode } from "react"
+
+
+export const MissingFiltersBanner = ({ text, className }: { text: ReactNode, className?: string }) => {
+ return
+ {text}
+
+}
\ No newline at end of file
diff --git a/banking/src/components/features/BankReconciliation/RecordPaymentModal.tsx b/banking/src/components/features/BankReconciliation/RecordPaymentModal.tsx
new file mode 100644
index 00000000000..cebb82cd640
--- /dev/null
+++ b/banking/src/components/features/BankReconciliation/RecordPaymentModal.tsx
@@ -0,0 +1,1301 @@
+import { atom, useAtom, useAtomValue, useSetAtom } from "jotai"
+import { bankRecRecordPaymentModalAtom, bankRecSelectedTransactionAtom, bankRecUnreconcileModalAtom, SelectedBank, selectedBankAccountAtom } from "./bankRecAtoms"
+import { Dialog, DialogContent, DialogTitle, DialogDescription, DialogHeader, DialogFooter, DialogClose, DialogTrigger } from "@/components/ui/dialog"
+import _ from "@/lib/translate"
+import { UnreconciledTransaction, useGetRuleForTransaction, useRefreshUnreconciledTransactions, useUpdateActionLog } from "./utils"
+import { useFieldArray, useForm, useFormContext, useWatch } from "react-hook-form"
+import { getCompanyCostCenter, getCompanyCurrency } from "@/lib/company"
+import { FrappeConfig, FrappeContext, useFrappeGetCall, useFrappePostCall } from "frappe-react-sdk"
+import { toast } from "sonner"
+import ErrorBanner from "@/components/ui/error-banner"
+import { Button } from "@/components/ui/button"
+import SelectedTransactionDetails from "./SelectedTransactionDetails"
+import { AccountFormField, CurrencyFormField, DataField, DateField, LinkFormField, PartyTypeFormField, SmallTextField } from "@/components/ui/form-elements"
+import { Form } from "@/components/ui/form"
+import { ChangeEvent, useCallback, useContext, useEffect, useMemo, useState } from "react"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Checkbox } from "@/components/ui/checkbox"
+import { AlertCircleIcon, Plus, Trash2 } from "lucide-react"
+import { flt, formatCurrency } from "@/lib/numbers"
+import { cn } from "@/lib/utils"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { PaymentEntry } from "@/types/Accounts/PaymentEntry"
+import { H4 } from "@/components/ui/typography"
+import { usePaymentEntryCalculations } from "@/hooks/usePaymentEntryCalculations"
+import { MissingFiltersBanner } from "./MissingFiltersBanner"
+import { formatDate, today } from "@/lib/date"
+import { slug } from "@/lib/frappe"
+import MarkdownRenderer from "@/components/ui/markdown"
+import { Separator } from "@/components/ui/separator"
+import { PaymentEntryDeduction } from "@/types/Accounts/PaymentEntryDeduction"
+import { TableLoader } from "@/components/ui/loaders"
+import SelectedTransactionsTable from "./SelectedTransactionsTable"
+import { useCurrentCompany } from "@/hooks/useCurrentCompany"
+import { Label } from "@/components/ui/label"
+import { FileDropzone } from "@/components/ui/file-dropzone"
+import { BankTransaction } from "@/types/Accounts/BankTransaction"
+import FileUploadBanner from "@/components/common/FileUploadBanner"
+import { useHotkeys } from "react-hotkeys-hook"
+
+const RecordPaymentModal = () => {
+
+ const [isOpen, setIsOpen] = useAtom(bankRecRecordPaymentModalAtom)
+
+ return (
+
+ )
+}
+
+
+const RecordPaymentModalContent = () => {
+
+ const selectedBankAccount = useAtomValue(selectedBankAccountAtom)
+
+ const selectedTransaction = useAtomValue(bankRecSelectedTransactionAtom(selectedBankAccount?.name ?? ''))
+
+ if (!selectedTransaction || !selectedBankAccount || selectedTransaction.length === 0) {
+ return
+ {_("No transaction selected")}
+
+ }
+
+ if (selectedTransaction.length === 1) {
+ return
+
+
+
+
+}
+
+const DifferenceButton = ({ index, currency }: { index: number, currency: string }) => {
+
+ const { setTotalAllocatedAmount } = usePaymentEntryCalculations()
+
+ const { control, setValue } = useFormContext
+
+ {_("Invoices")}
+
+
+
+ {selectedRows.length > 0 &&
+
+
+
}
+ + {_("Click to pay in full.")} +
+
+}
+const GetUnpaidInvoicesButton = () => {
+
+ const [isOpen, setIsOpen] = useAtom(isUnpaidInvoicesButtonOpen)
+
+ const { control } = useFormContext
+ {_("Total Amount")}
+ {formatCurrency(amount, currency)}
+
+
+ {_("Allocated")}
+ {formatCurrency(allocatedAmount, currency)}
+
+
+ {(unallocatedAmount && unallocatedAmount !== 0) ?
+ {_("Unallocated")}
+
+
+
+
+
+ {_("Add a charge to the payment entry with the unallocated amount")}
+
+
+
+
+
: null}
+
+ {(differenceAmount && differenceAmount !== 0) ?
+ {_("Difference")}
+
+
+
+
+
+ {_("Add a charge to the payment entry with the difference amount")}
+
+
+
+
+
: null}
+
+
+ {isLoading ?
+
: null}
+
+}
+
+
+
+const OtherChargesSection = ({ currency }: { currency: string }) => {
+
+ const { setTotalAllocatedAmount } = usePaymentEntryCalculations()
+ const { getValues, control } = useFormContext
+
+
+
+
+
+
+
+
+
+ Invoices: {selectedInvoices.length} /
+ Total: {formatCurrency(selectedInvoices.reduce((acc, invoice) => acc + invoice.outstanding_amount, 0))}
+
+
+
+
+
+}
+
+const TotalDeductions = ({ currency }: { currency: string }) => {
+
+ const { control } = useFormContext
+
+ Other Charges / Deductions
+
+
+
+
+
+
+
+ {selectedRows.length > 0 &&
+
+
}
+
+
}
+
+ {error &&
+
}
+ {rule &&
+
+}
+
+const CompanySelector = () => {
+
+ const { setValue } = useFormContext
+
+
+
+ {_("Rules to match against the transaction description")} *
+ {fields.map((field, index) => (
+
+ )
+}
+
+const RuleAction = () => {
+
+ const { control } = useFormContext
+
+ ))}
+
+
+
+ {_("Contains")}
+ {_("Starts with")}
+ {_("Ends with")}
+ {_("Regex")}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {classify_as === "Bank Entry" && (
+ {_("Single Account")}
+ {_("Multiple Accounts (Journal Template)")}
+ )}
+
+
+ {classify_as === "Payment Entry" && (
+
+ )
+}
+
+const PartyField = () => {
+
+ const { control, setValue } = useFormContext{_("If rule matches, then:")}
+ +
+
+ )}
+
+ {(((bank_entry_type === "Single Account" || !bank_entry_type) && classify_as === "Bank Entry") || classify_as !== "Bank Entry") && (
+
+
+
+
+
+
+
+ setIsConfigureAccountsModalOpen(false)} />
+
+}
+
+const AmountFormulaRenderer = ({ value }: { value?: string }) => {
+
+ // If it's a string and cannot be a number, then show it as a formula
+
+ if (isNaN(Number(value))) {
+
+ let calculatedValue = "";
+
+ try {
+ calculatedValue = window.eval(`const transaction_amount = 200; ${value}`);
+ } catch (error: unknown) {
+ console.error(error);
+ calculatedValue = "Error";
+ }
+
+ const isComputationValid = !isNaN(Number(calculatedValue)) && calculatedValue !== undefined && calculatedValue !== null;
+
+ return
+
+
+
+
+
+
+ {isComputationValid ? _("This is a formula based value.") : _("This is not a valid formula. Check the variable used in the formula.")}
+
+ {_("Example: If the transaction amount is 200, then this will be calculated as {} = {}", [value ?? "", calculatedValue])}
+
+
+
+
+
+}
+
+
+const PartyRowField = ({ index, onChange }: { index: number, onChange: (value: string, index: number) => void }) => {
+
+ const { control } = useFormContext
+
+
+
+
+
+
+ {selectedRows.length > 0 &&
+
+
}
+
+
+
+
+ {(_("You can set up the rule to split the transaction across multiple accounts."))}
+
{_("You can also add credit or debit values to pre-fill - these support both static values (like 200) or formulas (like transaction_amount * 0.25).")} +
+
+ {_("Example")}: +
+ + transaction_amount * 0.25 + +
+ + {_("In this case, the amount will be calculated as 25% of the transaction amount. If the transaction amount is 200, then this will be calculated as 200 * 0.25 = 50.")} + +
+
+
+
+ {_("Help")}
+ +{_("You can also add credit or debit values to pre-fill - these support both static values (like 200) or formulas (like transaction_amount * 0.25).")} +
+
+ {_("Example")}: +
+ + transaction_amount * 0.25 + +
+ + {_("In this case, the amount will be calculated as 25% of the transaction amount. If the transaction amount is 200, then this will be calculated as 200 * 0.25 = 50.")} + +
+
+
+
+
+
+
+
+
+
+
+
+
+ {isWithdrawal ?
+ {formatCurrency(amount, currency)}
+ {transaction.unallocated_amount && transaction.unallocated_amount !== amount ? {_("Unallocated")}: {formatCurrency(transaction.unallocated_amount)} : null}
+
+ {transaction.description}
+ {transaction.reference_number ? {_("Ref")}: {transaction.reference_number} : null}
+ {showAccount && account ? {_("GL Account")}: {account} : null}
+
+
+
+ {_("No transaction selected")}
+
+ }
+
+ if (selectedTransaction.length === 1) {
+ return
+ {banks.map((bank) => (
+
+
+}
+
+const CashPicker = ({ company, selectedAccount, setSelectedAccount }: { company: string, selectedAccount: string, setSelectedAccount: (account: string) => void }) => {
+
+ const { data } = useFrappeGetCall('frappe.client.get_value', {
+ doctype: 'Company',
+ filters: company,
+ fieldname: 'default_cash_account'
+ }, undefined, {
+ revalidateOnFocus: false,
+ revalidateIfStale: false,
+ })
+
+ const account = data?.message?.default_cash_account
+
+ if (account) {
+ return onAccountChange(bank.account ?? '')}
+ >
+
+ ))}
+
+ {bank.account_name} {bank.bank_account_no && ({bank.bank_account_no})}
+ {bank.account}
+
+ setSelectedAccount(account ?? '')}
+ >
+
+ }
+
+ return null
+}
+
+
+const RecommendedTransferAccount = ({ transaction, onAccountChange }: { transaction: UnreconciledTransaction, onAccountChange: (account: string, is_mirror: boolean) => void }) => {
+
+ const { setValue, watch } = useFormContext
+
+
+ Cash
+ {data?.message?.default_cash_account}
+
+
+
+ )
+ }
+
+ return null
+}
+
+export default TransferModal
\ No newline at end of file
diff --git a/banking/src/components/features/BankReconciliation/bankRecAtoms.ts b/banking/src/components/features/BankReconciliation/bankRecAtoms.ts
new file mode 100644
index 00000000000..4f6e51e51b1
--- /dev/null
+++ b/banking/src/components/features/BankReconciliation/bankRecAtoms.ts
@@ -0,0 +1,83 @@
+import { BankAccount } from "@/types/Accounts/BankAccount";
+import { getDatesForTimePeriod } from "@/lib/date";
+import { atom } from "jotai";
+import { atomWithStorage, createJSONStorage } from "jotai/utils";
+import { atomFamily } from 'jotai-family'
+import { UnreconciledTransaction } from "./utils";
+import { BankTransaction } from "@/types/Accounts/BankTransaction";
+import { PaymentEntry } from "@/types/Accounts/PaymentEntry";
+import { JournalEntry } from "@/types/Accounts/JournalEntry";
+
+export interface SelectedBank extends Pick
+
+
+
+
+
+
+
+
+ {_("The system found a mirror transaction ({0}) in another account with the same amount and date.", [data.message.name])}
+ {_("Accepting the suggestion will reconcile both transactions.")}
+
+
+
+
+
+
+ {data.message.description}
+
+
+
+
+
+
+ {formatCurrency(amount, currency)}
+
+ {isWithdrawal ?
+
+
+
+
+
+ )
+}
+
+export default CSVImport
\ No newline at end of file
diff --git a/banking/src/components/features/BankStatementImporter/CSV/CSVRawDataPreview.tsx b/banking/src/components/features/BankStatementImporter/CSV/CSVRawDataPreview.tsx
new file mode 100644
index 00000000000..31a00a90694
--- /dev/null
+++ b/banking/src/components/features/BankStatementImporter/CSV/CSVRawDataPreview.tsx
@@ -0,0 +1,151 @@
+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 _ from "@/lib/translate"
+import { GetStatementDetailsResponse } from "../import_utils"
+import { useMemo } from "react"
+import { BankStatementImportLogColumnMap } from "@/types/Accounts/BankStatementImportLogColumnMap"
+
+
+const CSVRawDataPreview = ({ data }: { data: GetStatementDetailsResponse }) => {
+
+ const column_mapping: Record
+
+
+
+
+
+
+ )
+}
+
+const ConflictingTransactions = ({ transactions }: { transactions: GetStatementDetailsResponse["conflicting_transactions"] }) => {
+
+ if (transactions.length === 0) {
+ return null
+ }
+
+ return <>
+
+
+
+
+
+ {data.doc.status === "Not Started" ? <>
+
+
+
+ {data.doc.status === 'Completed' ? {_("Completed")} :
+
+ }
+
+
+
+
+ {progress > 0 &&
+
+ {_("We've auto-detected the details of the statement file.")}
+
+ + {_("Please review the details below and click the 'Import' button to proceed.")} + +
+
+ {_("Statement Details")}
++ + {_("Please review the details below and click the 'Import' button to proceed.")} + +
+ {_("Importing {0} transactions", [progress.toString()])}
+
+
}
+
+ {error &&
+
+ : null}
+
+ {_("We've found 1 transaction in the statement file that will be imported into the system. Please review the details below and click the 'Import' button to proceed.")}
+ ) : (
+ {_("{0} transactions will be imported into the system. Please review the details below and click the 'Import' button to proceed.", [data.final_transactions?.length?.toString() || "0"])}
+ )}
+
+ {_("Preview Transactions")}
+ {data.final_transactions?.length === 1 ? ( +
+
+
+
+
+
+
+
+
+
+
+
+ {_("Transaction actions work when one or more unreconciled transactions are selected.")}
+
+ {_("To select more than one transaction at a time, press and hold the shift key.")}
+
+ {fetchError &&
+
+
+
+
+
+
+ {/*
+
+
+
+
+
+ + {_("For example, if set to 4, the system will try to find matching transfer transactions in other banks 4 days before and after the transaction date. This is because transactions can clear on different days on different bank accounts.")} +
+
+
+
+
+
+
+
+
+
+ + {_("This will automatically run transaction matching rules on unreconciled transactions every hour.")} +
+
+ onUpdate("automatically_run_rules_on_unreconciled_transactions", checked ? 1 : 0)}
+ />
+
+
+
+
+
+
+
+ + {_("The system will attempt to automatically match a party to a bank transaction based on account number or IBAN.")} + +
+
+ onUpdate("enable_party_matching", checked ? 1 : 0)}
+ />
+
+
+
+
+
+
+
+ + {_("If a party cannot be matched by account number or IBAN, the system will try fuzzy matching using the party name and transaction description.")} + +
+
+ onUpdate("enable_fuzzy_matching", checked ? 1 : 0)}
+ />
+
+
+
+
+}
+
+const ThemePreviewWindow = ({ theme, roundedClass }: { theme: "light" | "dark", roundedClass: string }) => {
+ const isLight = theme === "light"
+ const frameClass = isLight ? "bg-white border-gray-100" : "bg-gray-900 border-gray-800"
+ const subtleSurfaceClass = isLight ? "bg-gray-50" : "bg-gray-800"
+ const mutedLineClass = isLight ? "bg-gray-200" : "bg-gray-700"
+ const mutedLineStrongClass = isLight ? "bg-gray-300" : "bg-gray-600"
+ const dividerClass = isLight ? "border-gray-100" : "border-gray-800"
+ const cardClass = isLight ? "bg-white border-gray-200" : "bg-gray-900 border-gray-700"
+
+ return
+
+
+ + {_("Switch between light, dark, or system theme")} +
+
+ {themeCards.map((option) => {
+ const selected = theme === option.value
+
+ return (
+
+ )
+ })}
+
+
+
+}
\ No newline at end of file
diff --git a/banking/src/components/features/Settings/Rules/RuleList.tsx b/banking/src/components/features/Settings/Rules/RuleList.tsx
new file mode 100644
index 00000000000..a05b8735235
--- /dev/null
+++ b/banking/src/components/features/Settings/Rules/RuleList.tsx
@@ -0,0 +1,314 @@
+import { Button } from "@/components/ui/button"
+import ErrorBanner from "@/components/ui/error-banner"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Badge } from "@/components/ui/badge"
+import _ from "@/lib/translate"
+import { BankTransactionRule } from "@/types/Accounts/BankTransactionRule"
+import { FrappeConfig, FrappeContext, useFrappeGetCall, useFrappeGetDocList, useFrappePostCall } from "frappe-react-sdk"
+import { ArrowDownRight, ArrowDownUp, ArrowUpRight, MoreVertical, Trash2, GripVertical, Play, RefreshCw, ZapIcon, CalendarSyncIcon } from "lucide-react"
+import { useContext, useState } from "react"
+import { toast } from "sonner"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator, DropdownMenuCheckboxItem } from "@/components/ui/dropdown-menu"
+import {
+ DndContext,
+ closestCenter,
+ KeyboardSensor,
+ PointerSensor,
+ useSensor,
+ useSensors,
+ DragEndEvent,
+} from '@dnd-kit/core'
+import {
+ arrayMove,
+ SortableContext,
+ sortableKeyboardCoordinates,
+ verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import {
+ useSortable,
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"
+import { cn } from "@/lib/utils"
+
+const useGetRuleList = () => {
+ return useFrappeGetDocList
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* */}
+
+
+
+
+ {isLoading &&
+
+
+
+ {_("No rules setup yet")}
+ {_("Configure rules to save time when reconciling transactions.")}
+
+
+ }
+
+ {data && data.length > 0 && (
+
+ rule.name)}
+ strategy={verticalListSortingStrategy}
+ >
+
+
+ )}
+
+
+ )
+}
+const SortableRuleItem = ({
+ rule,
+ setSelectedRule,
+ onDeleteRule
+}: {
+ rule: BankTransactionRule
+ setSelectedRule: (rule: string) => void
+ onDeleteRule: (ruleID: string) => void
+}) => {
+ const {
+ attributes,
+ listeners,
+ setNodeRef,
+ transform,
+ transition,
+ isDragging,
+ } = useSortable({ id: rule.name })
+
+ const style = {
+ transform: CSS.Transform.toString(transform),
+ transition,
+ opacity: isDragging ? 0.5 : 1,
+ }
+
+ const [isDropdownOpen, setIsDropdownOpen] = useState(false)
+
+ return (
+
+
}
+
+ {error && -
+ {data?.map((rule) => (
+
+
+
+
+ {rule.priority}
+
+
+
+
+
+
+
+
+
+
+
+ {rule.rule_description}
+
+
+ {rule.transaction_type === "Any" ?
+
+
+
+
+
+
+ onDeleteRule(rule.name)}>
+
+
+
+
+
+ {children}
+
+