mirror of
https://github.com/frappe/erpnext.git
synced 2026-08-20 17:59:57 +00:00
feat: new banking module (#54720)
* feat: initial SPA setup for banking * wip: bring over new banking module * feat: added Espresso design tokens * feat: button styles * fix: add all ink colors * wip: espresso design system changes * feat: button and badge espresso components * fix: button styling for reconcile * feat: Espresso progress bar * feat: Espresso toggle switch * feat: Espresso tabs design * fix: vertical tab support * fix: button sizing across modals * feat: Espresso style table layout * feat: Espresso tooltip * feat: Espresso elevations and checkbox * feat: Dialog with Espresso styles * feat: Espresso textarea * fix: input styles * fix: colors on bank picker * fix: breadcrumb styling * fix: bank picker styling * feat: create doctypes and fields for bank reconciliation * feat: APIs for banking * fix: use date format parser * fix: font styling to match Espresso * wip: settings modal * feat: settings dialog component * fix: icons and invalid requests * feat: preferences tab * fix: adjust icon stroke width to 1.5 * feat: rule configuration in settings * fix: remove sheet component * feat: alert and error banner component * feat: dropdown in Espresso * feat: popover and select in Espresso * fix: cleanup more styles * fix: match size of link fields * feat: command styling * fix: remove unused style tokens * fix: styles for global date picker dropdown * fix: styles for match and reconcile * feat: table Espresso component * feat: remove all other design tokens * fix: remove unused tokens * fix: form elements * fix: remove unused styles and fix filters in bank transaction list * feat: fetch bank rec doctypes for filtering * fix: record payment modal * feat: support for dark mode switching * fix: move bank logos to public folder * feat: add support for RTL * feat: support for RTL * chore: send layout direction in dev boot * fix: make checkbox work in RTL * feat: dark mode support * fix: dark mode style * feat: bank logos in dark mode * feat: dark mode bank logos * chore: use dark mode bank logos everywhere * chore: move rule evaluation to controller * chore: add tests for bank transaction rules * fix: move deps to fix actions errors * fix: move tw-animate-css to deps * fix: remove shadcn * fix: do not open modal if no transactions selected * fix: add translation strings * feat: add banner on existing bank reconciliation tool * feat: bank statement import * fix: translations and layout directions * fix: validation for transaction matching rule * fix: styles * fix: show conflicting transactions in alert * fix: show help text for new banking module forms * feat: show total debits and credits * fix: dark mode colors in automatic config * feat: add keyboard shortcuts help * feat: added keyboard shortcut for settings * fix: decrease size of progress bar * chore: bump packages * feat: add tests for statement import * fix: settings dialog * fix: show banner on small screens * fix: show banner when no bank account set
This commit is contained in:
Nikhil Kothari
115
banking/src/components/features/Settings/KeyboardShortcuts.tsx
Normal file
115
banking/src/components/features/Settings/KeyboardShortcuts.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Kbd, KbdGroup } from '@/components/ui/kbd'
|
||||
import { KeyboardMetaKeyIcon } from '@/components/ui/keyboard-keys'
|
||||
import { SettingsPanelDescription, SettingsPanelTitle, SettingsPanelHeader, SettingsPanelContent } from '@/components/ui/settings-dialog'
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
|
||||
import _ from '@/lib/translate'
|
||||
import { ArrowRightLeftIcon, HistoryIcon, LandmarkIcon, ReceiptIcon, SaveIcon, SettingsIcon, ZapIcon } from 'lucide-react'
|
||||
|
||||
const Shortcuts = [
|
||||
{
|
||||
shortcut: <KbdGroup><Kbd><KeyboardMetaKeyIcon /></Kbd><Kbd>B</Kbd></KbdGroup>,
|
||||
action: {
|
||||
icon: <LandmarkIcon />,
|
||||
label: _("Bank Entry"),
|
||||
description: _("Record a bank journal entry for expenses, income or split transactions")
|
||||
}
|
||||
},
|
||||
{
|
||||
shortcut: <KbdGroup><Kbd><KeyboardMetaKeyIcon /></Kbd><Kbd>P</Kbd></KbdGroup>,
|
||||
action: {
|
||||
icon: <ReceiptIcon />,
|
||||
label: _("Record Payment"),
|
||||
description: _("Record a payment against a customer or supplier")
|
||||
}
|
||||
},
|
||||
{
|
||||
shortcut: <KbdGroup><Kbd><KeyboardMetaKeyIcon /></Kbd><Kbd>I</Kbd></KbdGroup>,
|
||||
action: {
|
||||
icon: <ArrowRightLeftIcon />,
|
||||
label: _("Transfer"),
|
||||
description: _("Record a transfer between two bank accounts")
|
||||
}
|
||||
},
|
||||
{
|
||||
shortcut: <KbdGroup><Kbd><KeyboardMetaKeyIcon /></Kbd><Kbd>R</Kbd></KbdGroup>,
|
||||
action: {
|
||||
icon: <ZapIcon />,
|
||||
label: _("Accept Matching Rule"),
|
||||
description: _("Accept the rule for the selected transaction")
|
||||
}
|
||||
},
|
||||
{
|
||||
shortcut: <KbdGroup><Kbd><KeyboardMetaKeyIcon /></Kbd><Kbd>S</Kbd></KbdGroup>,
|
||||
action: {
|
||||
icon: <SaveIcon />,
|
||||
label: _("Save"),
|
||||
description: _("Save the currently opened form")
|
||||
}
|
||||
},
|
||||
{
|
||||
shortcut: <KbdGroup><Kbd><KeyboardMetaKeyIcon /></Kbd><Kbd>Z</Kbd></KbdGroup>,
|
||||
action: {
|
||||
icon: <HistoryIcon />,
|
||||
label: _("Reconciliation History"),
|
||||
description: _("View all reconciliation actions taken in this session")
|
||||
}
|
||||
},
|
||||
{
|
||||
shortcut: <KbdGroup><Kbd><KeyboardMetaKeyIcon /></Kbd><Kbd>⇧</Kbd><Kbd>G</Kbd></KbdGroup>,
|
||||
action: {
|
||||
icon: <SettingsIcon />,
|
||||
label: _("Settings"),
|
||||
description: _("Open the settings dialog")
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const KeyboardShortcuts = () => {
|
||||
return (
|
||||
<>
|
||||
<SettingsPanelHeader>
|
||||
<SettingsPanelTitle>{_("Keyboard Shortcuts")}</SettingsPanelTitle>
|
||||
<SettingsPanelDescription>{_("Get around the system quickly with keyboard shortcuts")}</SettingsPanelDescription>
|
||||
</SettingsPanelHeader>
|
||||
<SettingsPanelContent>
|
||||
<div className='flex flex-col gap-3'>
|
||||
<p className='text-p-sm text-ink-gray-6'>
|
||||
{_("Transaction actions work when one or more unreconciled transactions are selected.")}
|
||||
<br />
|
||||
{_("To select more than one transaction at a time, press and hold the shift key.")}
|
||||
</p>
|
||||
<Table containerClassName='dark:border-outline-gray-2'>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>{_("Shortcut")}</TableHead>
|
||||
<TableHead>{_("Action")}</TableHead>
|
||||
<TableHead>{_("Description")}</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{Shortcuts.map((shortcut) => (
|
||||
<TableRow className='hover:bg-surface-gray-2'>
|
||||
<TableCell>
|
||||
{shortcut.shortcut}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge size='lg' variant='outline'>
|
||||
{shortcut.action.icon}
|
||||
{shortcut.action.label}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<p className='text-p-sm text-ink-gray-6 text-wrap'>{shortcut.action.description}</p>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</SettingsPanelContent>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default KeyboardShortcuts
|
||||
46
banking/src/components/features/Settings/MatchingRules.tsx
Normal file
46
banking/src/components/features/Settings/MatchingRules.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { SettingsPanelTitle, SettingsPanelHeader, SettingsPanelDescription, SettingsPanelContent } from '@/components/ui/settings-dialog'
|
||||
import _ from '@/lib/translate'
|
||||
import { PlusIcon } from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
import RuleList, { RunRulesButton } from './Rules/RuleList'
|
||||
import CreateNewRule from '../BankReconciliation/Rules/CreateNewRule'
|
||||
import EditRule from '../BankReconciliation/Rules/EditRule'
|
||||
|
||||
const MatchingRules = () => {
|
||||
|
||||
const [selectedRule, setSelectedRule] = useState<string | null>(null)
|
||||
const [isNewRule, setIsNewRule] = useState(false)
|
||||
|
||||
|
||||
if (isNewRule) {
|
||||
return <CreateNewRule onCreate={() => setIsNewRule(false)} />
|
||||
}
|
||||
|
||||
if (selectedRule) {
|
||||
return <EditRule onClose={() => setSelectedRule(null)} ruleID={selectedRule} />
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsPanelHeader
|
||||
actions={
|
||||
<div className='flex gap-2 items-center'>
|
||||
<RunRulesButton />
|
||||
<Button type='button' onClick={() => setIsNewRule(true)}><PlusIcon /> {_("Add Rule")}</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<SettingsPanelTitle>{_("Transaction Matching Rules")}</SettingsPanelTitle>
|
||||
|
||||
<SettingsPanelDescription>
|
||||
{_("Set up rules to automatically classify transactions. Drag and drop rules to reorder their priority.")}
|
||||
</SettingsPanelDescription>
|
||||
</SettingsPanelHeader>
|
||||
<SettingsPanelContent>
|
||||
<RuleList setSelectedRule={setSelectedRule} />
|
||||
</SettingsPanelContent>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default MatchingRules
|
||||
261
banking/src/components/features/Settings/Preferences.tsx
Normal file
261
banking/src/components/features/Settings/Preferences.tsx
Normal file
@@ -0,0 +1,261 @@
|
||||
import ErrorBanner from "@/components/ui/error-banner"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { SettingsPanelDescription, SettingsPanelHeader, SettingsPanelTitle, SettingsPanelContent } from "@/components/ui/settings-dialog"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { useTheme } from "@/components/ui/theme-provider"
|
||||
import _ from "@/lib/translate"
|
||||
import { AccountsSettings } from "@/types/Accounts/AccountsSettings"
|
||||
import { useFrappeGetDoc, useFrappeUpdateDoc } from "frappe-react-sdk"
|
||||
import { toast } from "sonner"
|
||||
|
||||
|
||||
export const Preferences = () => {
|
||||
|
||||
|
||||
const { data: accountsSettings, mutate, error: fetchError, isLoading } = useFrappeGetDoc<AccountsSettings>("Accounts Settings", "Accounts Settings", undefined, {
|
||||
revalidateOnFocus: false
|
||||
})
|
||||
|
||||
const { updateDoc, error } = useFrappeUpdateDoc<AccountsSettings>()
|
||||
|
||||
const onUpdate = (field: keyof AccountsSettings, value: any) => {
|
||||
mutate(updateDoc("Accounts Settings", "Accounts Settings", {
|
||||
[field]: value
|
||||
}), {
|
||||
optimisticData: {
|
||||
...accountsSettings as AccountsSettings,
|
||||
[field]: value
|
||||
},
|
||||
revalidate: false,
|
||||
}).then(() => {
|
||||
toast.success(_("Preferences updated"), {
|
||||
dismissible: true,
|
||||
duration: 500,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
return <>
|
||||
|
||||
<SettingsPanelHeader>
|
||||
<SettingsPanelTitle>{_("Preferences")}</SettingsPanelTitle>
|
||||
<SettingsPanelDescription>{_("Configure settings for the banking module")}</SettingsPanelDescription>
|
||||
</SettingsPanelHeader>
|
||||
<SettingsPanelContent>
|
||||
|
||||
<div className='flex flex-col gap-4 w-full'>
|
||||
{fetchError && <ErrorBanner error={fetchError} />}
|
||||
{error && <ErrorBanner error={error} />}
|
||||
|
||||
<div className="flex flex-col flex-1">
|
||||
|
||||
<ThemeSwitcher />
|
||||
|
||||
<div className="flex justify-between items-center gap-8 py-3">
|
||||
<div className="flex flex-col">
|
||||
<Label htmlFor="transfer_match_days" className="text-p-base text-ink-gray-6">{_("Number of days to match transfers")}</Label>
|
||||
<p className="text-p-sm text-ink-gray-5">
|
||||
{_("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.")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="min-w-40 flex justify-end">
|
||||
<Select disabled={isLoading} onValueChange={(value) => onUpdate("transfer_match_days", Number(value))} value={accountsSettings?.transfer_match_days?.toString()}>
|
||||
<SelectTrigger id="transfer_match_days" className="min-w-32">
|
||||
<SelectValue placeholder={_("Select number of days")} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="0">{_("Same day")}</SelectItem>
|
||||
<SelectItem value="1">{_("Within 1 day")}</SelectItem>
|
||||
<SelectItem value="2">{_("Within 2 days")}</SelectItem>
|
||||
<SelectItem value="3">{_("Within 3 days")}</SelectItem>
|
||||
<SelectItem value="4">{_("Within 4 days")}</SelectItem>
|
||||
<SelectItem value="5">{_("Within 5 days")}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="flex justify-between items-center gap-8 py-3">
|
||||
<div className="flex flex-col">
|
||||
<Label htmlFor="automatically_run_rules_on_unreconciled_transactions" className="text-p-base text-ink-gray-6">{_("Automatically run rules on unreconciled transactions")}</Label>
|
||||
<p className="text-p-sm text-ink-gray-5">
|
||||
{_("This will automatically run transaction matching rules on unreconciled transactions every hour.")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<Switch
|
||||
id="automatically_run_rules_on_unreconciled_transactions"
|
||||
className="dark:disabled:bg-surface-gray-2"
|
||||
disabled={isLoading}
|
||||
checked={accountsSettings?.automatically_run_rules_on_unreconciled_transactions === 1}
|
||||
onCheckedChange={(checked) => onUpdate("automatically_run_rules_on_unreconciled_transactions", checked ? 1 : 0)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="flex justify-between items-center gap-8 py-3">
|
||||
<div className="flex flex-col">
|
||||
<Label htmlFor="enable_party_matching" className="text-p-base text-ink-gray-6">{_("Enable automatic party matching")}</Label>
|
||||
<p className="text-p-sm text-ink-gray-5">
|
||||
{_("The system will attempt to automatically match a party to a bank transaction based on account number or IBAN.")}
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<Switch
|
||||
id="enable_party_matching"
|
||||
className="dark:disabled:bg-surface-gray-2"
|
||||
disabled={isLoading}
|
||||
checked={accountsSettings?.enable_party_matching === 1}
|
||||
onCheckedChange={(checked) => onUpdate("enable_party_matching", checked ? 1 : 0)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="flex justify-between items-center gap-8 py-3">
|
||||
<div className="flex flex-col">
|
||||
<Label htmlFor="enable_fuzzy_matching" className="text-p-base text-ink-gray-6">{_("Enable party name/description fuzzy matching")}</Label>
|
||||
<p className="text-p-sm text-ink-gray-5">
|
||||
{_("If a party cannot be matched by account number or IBAN, the system will try fuzzy matching using the party name and transaction description.")}
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<Switch
|
||||
id="enable_fuzzy_matching"
|
||||
className="dark:disabled:bg-surface-gray-2"
|
||||
disabled={accountsSettings?.enable_party_matching !== 1 || isLoading}
|
||||
checked={accountsSettings?.enable_fuzzy_matching === 1}
|
||||
onCheckedChange={(checked) => onUpdate("enable_fuzzy_matching", checked ? 1 : 0)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{/* <DataField
|
||||
name='transfer_match_days'
|
||||
label={_("Number of days to match transfers")}
|
||||
isRequired
|
||||
inputProps={{
|
||||
type: 'number',
|
||||
inputMode: 'numeric',
|
||||
}}
|
||||
formDescription={_("For example, if set to 4, the system will try to find matching 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.")}
|
||||
/> */}
|
||||
|
||||
</div>
|
||||
</SettingsPanelContent>
|
||||
</>
|
||||
}
|
||||
|
||||
|
||||
const ThemeSwitcher = () => {
|
||||
|
||||
const { theme, setTheme } = useTheme()
|
||||
|
||||
const themeCards: Array<{ value: "Light" | "Dark" | "Automatic", label: string }> = [
|
||||
{
|
||||
value: "Light",
|
||||
label: _("Light"),
|
||||
},
|
||||
{
|
||||
value: "Dark",
|
||||
label: _("Dark"),
|
||||
},
|
||||
{
|
||||
value: "Automatic",
|
||||
label: _("System"),
|
||||
},
|
||||
]
|
||||
|
||||
return <div className="flex flex-col gap-3 pb-3">
|
||||
<div className="flex flex-col">
|
||||
<Label className="text-p-base text-ink-gray-6">{_("Theme")}</Label>
|
||||
<p className="text-p-sm text-ink-gray-5">
|
||||
{_("Switch between light, dark, or system theme")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
{themeCards.map((option) => {
|
||||
const selected = theme === option.value
|
||||
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
onClick={() => setTheme(option.value)}
|
||||
aria-pressed={selected}
|
||||
className={`flex-1 basis-0 min-w-0 overflow-hidden rounded-lg border cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-outline-blue-4 ${selected ? "border-outline-gray-5" : "border-outline-gray-modals hover:border-outline-gray-4"}`}
|
||||
>
|
||||
{option.value === "Automatic" ? (
|
||||
<div className="flex w-full min-w-0">
|
||||
<ThemePreviewWindow theme="light" roundedClass="rounded-tl-[10.5px]" />
|
||||
<ThemePreviewWindow theme="dark" roundedClass="rounded-tr-[10.5px]" />
|
||||
</div>
|
||||
) : (
|
||||
<ThemePreviewWindow theme={option.value === "Light" ? "light" : "dark"} roundedClass="rounded-t-[10.5px]" />
|
||||
)}
|
||||
<div className="flex items-center justify-between px-3 py-2 border-t border-outline-gray-modals">
|
||||
<div className="text-base text-ink-gray-7">{option.label}</div>
|
||||
<span className={`rounded-full size-3.5 ${selected ? "border-4 border-outline-gray-5" : "border border-outline-gray-4"}`} />
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
}
|
||||
|
||||
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 <div className={`flex flex-1 min-w-0 pl-5 pt-3.5 ${isLight ? "bg-surface-gray-2" : "bg-surface-gray-3"} ${roundedClass}`}>
|
||||
<div className={`w-full rounded-tl-sm border ${frameClass}`}>
|
||||
<div className={`flex gap-[3px] py-[3px] px-1 border-b ${dividerClass}`}>
|
||||
<div className="size-1.5 bg-[#FF5F57] rounded-full" />
|
||||
<div className="size-1.5 bg-[#FEBC2D] rounded-full" />
|
||||
<div className="size-1.5 bg-[#28C840] rounded-full" />
|
||||
</div>
|
||||
<div className="p-1.5">
|
||||
<div className={`flex items-center gap-1.5 p-1 rounded-sm border ${subtleSurfaceClass} ${dividerClass}`}>
|
||||
<div className={`h-2 w-8 rounded-full ${mutedLineStrongClass}`} />
|
||||
<div className={`h-2 w-6 rounded-full ${mutedLineClass}`} />
|
||||
<div className={`h-2 w-7 rounded-full ml-auto ${mutedLineClass}`} />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-1 mt-1.5">
|
||||
<div className={`rounded-sm border p-1 ${cardClass}`}>
|
||||
<div className={`h-1.5 w-full rounded-full ${mutedLineStrongClass}`} />
|
||||
<div className={`h-1.5 w-4/5 rounded-full mt-1 ${mutedLineClass}`} />
|
||||
<div className={`h-1.5 w-3/5 rounded-full mt-1 ${mutedLineClass}`} />
|
||||
</div>
|
||||
<div className={`rounded-sm border p-1 ${cardClass}`}>
|
||||
<div className="flex items-center justify-between gap-1">
|
||||
<div className={`h-1.5 w-2/5 rounded-full ${mutedLineStrongClass}`} />
|
||||
{/* <div className={`h-2.5 w-5 rounded-sm border ${chipClass}`} /> */}
|
||||
</div>
|
||||
<div className={`h-1.5 w-full rounded-full mt-1 ${mutedLineClass}`} />
|
||||
<div className={`h-1.5 w-3/4 rounded-full mt-1 ${mutedLineClass}`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
314
banking/src/components/features/Settings/Rules/RuleList.tsx
Normal file
314
banking/src/components/features/Settings/Rules/RuleList.tsx
Normal file
@@ -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<BankTransactionRule>("Bank Transaction Rule", {
|
||||
fields: ["name", "rule_name", "rule_description", "transaction_type", "priority"],
|
||||
orderBy: {
|
||||
field: 'priority',
|
||||
order: 'asc'
|
||||
},
|
||||
limit: 100
|
||||
})
|
||||
}
|
||||
|
||||
export const RunRulesButton = () => {
|
||||
|
||||
const { data } = useGetRuleList()
|
||||
|
||||
const { call: runRuleEvaluation, loading: isRunningRules } = useFrappePostCall('erpnext.accounts.doctype.bank_transaction_rule.bank_transaction_rule.run_rule_evaluation')
|
||||
|
||||
const handleRunRules = async (forceEvaluate: boolean = false) => {
|
||||
try {
|
||||
await runRuleEvaluation({
|
||||
force_evaluate: forceEvaluate
|
||||
})
|
||||
toast.success(forceEvaluate ? _("Rules evaluation started") : _("Rules evaluation completed"))
|
||||
} catch (error) {
|
||||
toast.error(_("Failed to run rules evaluation"))
|
||||
console.error("Error running rules evaluation:", error)
|
||||
}
|
||||
}
|
||||
|
||||
if (!data || data.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
return <DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="sm" disabled={isRunningRules}>
|
||||
{isRunningRules ? (
|
||||
<RefreshCw className="animate-spin" />
|
||||
) : (
|
||||
<Play />
|
||||
)}
|
||||
{isRunningRules ? _("Running...") : _("Run Rules")}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start">
|
||||
<DropdownMenuItem onClick={() => handleRunRules(false)} disabled={isRunningRules} title={_("Run rules on unreconciled transactions that haven't been evaluated yet")}>
|
||||
<Play />
|
||||
{_("Run on new transactions")}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleRunRules(true)} disabled={isRunningRules} title={_("Force re-evaluate all unreconciled transactions, even if they were previously evaluated")}>
|
||||
<RefreshCw />
|
||||
{_("Force evaluate all")}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<AutoRunRuleItem />
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
}
|
||||
|
||||
const AutoRunRuleItem = () => {
|
||||
|
||||
const { db } = useContext(FrappeContext) as FrappeConfig
|
||||
|
||||
const { data: accountsSetting, mutate: setAutomaticallyRunRulesOnUnreconciledTransactions } = useFrappeGetCall("frappe.client.get_single_value", {
|
||||
"doctype": "Accounts Settings",
|
||||
"field": "automatically_run_rules_on_unreconciled_transactions"
|
||||
})
|
||||
|
||||
const automaticallyRunRulesOnUnreconciledTransactions = accountsSetting?.message ? true : false
|
||||
|
||||
const onAutoClassifyTransactions = (checked: boolean) => {
|
||||
toast.promise(db.setValue("Accounts Settings", "Accounts Settings", "automatically_run_rules_on_unreconciled_transactions", checked ? 1 : 0).then(() => {
|
||||
setAutomaticallyRunRulesOnUnreconciledTransactions({
|
||||
message: {
|
||||
automatically_run_rules_on_unreconciled_transactions: checked ? 1 : 0,
|
||||
}
|
||||
}, {
|
||||
revalidate: false
|
||||
})
|
||||
}), {
|
||||
loading: _("Updating..."),
|
||||
success: checked ? _("Scheduled job enabled. Transactions will be auto classified.") : _("Scheduled job disabled. Transactions will not be auto classified."),
|
||||
error: _("Failed to update auto classify transactions settings")
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
return <DropdownMenuCheckboxItem
|
||||
checked={automaticallyRunRulesOnUnreconciledTransactions}
|
||||
onCheckedChange={onAutoClassifyTransactions}>
|
||||
<CalendarSyncIcon />
|
||||
{_("Run rules automatically")}
|
||||
</DropdownMenuCheckboxItem>
|
||||
}
|
||||
|
||||
|
||||
|
||||
const RuleList = ({ setSelectedRule }: { setSelectedRule: (rule: string) => void }) => {
|
||||
|
||||
const { data, error, isLoading, mutate } = useGetRuleList()
|
||||
|
||||
const { db } = useContext(FrappeContext) as FrappeConfig
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor),
|
||||
useSensor(KeyboardSensor, {
|
||||
coordinateGetter: sortableKeyboardCoordinates,
|
||||
})
|
||||
)
|
||||
|
||||
const onDeleteRule = (ruleID: string) => {
|
||||
toast.promise(db.deleteDoc("Bank Transaction Rule", ruleID).then(() => {
|
||||
mutate()
|
||||
}), {
|
||||
loading: _("Deleting rule..."),
|
||||
success: _("Rule deleted."),
|
||||
error: _("Failed to delete rule.")
|
||||
})
|
||||
}
|
||||
|
||||
const handleDragEnd = async (event: DragEndEvent) => {
|
||||
const { active, over } = event
|
||||
|
||||
if (active.id !== over?.id && data) {
|
||||
const oldIndex = data.findIndex((rule) => rule.name === active.id)
|
||||
const newIndex = data.findIndex((rule) => rule.name === over?.id)
|
||||
|
||||
const newData = arrayMove(data, oldIndex, newIndex)
|
||||
|
||||
// Update priorities based on new order
|
||||
const updatePromises = newData.map((rule, index) => {
|
||||
const newPriority = index + 1
|
||||
if (rule.priority !== newPriority) {
|
||||
return db.setValue("Bank Transaction Rule", rule.name, "priority", newPriority)
|
||||
}
|
||||
return Promise.resolve()
|
||||
})
|
||||
|
||||
try {
|
||||
await Promise.all(updatePromises)
|
||||
toast.success(_("Rule priorities updated"))
|
||||
mutate() // Refresh the data
|
||||
} catch (error) {
|
||||
toast.error(_("Failed to update rule priorities"))
|
||||
console.error("Error updating priorities:", error)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="overflow-y-auto">
|
||||
{isLoading && <div className="flex flex-col gap-2">
|
||||
<Skeleton className="w-full h-10" />
|
||||
<Skeleton className="w-full h-10" />
|
||||
<Skeleton className="w-full h-10" />
|
||||
<Skeleton className="w-full h-10" />
|
||||
<Skeleton className="w-full h-10" />
|
||||
</div>}
|
||||
|
||||
{error && <ErrorBanner error={error} />}
|
||||
|
||||
{data && data.length === 0 && <Empty className="h-96">
|
||||
<EmptyMedia>
|
||||
<ZapIcon />
|
||||
</EmptyMedia>
|
||||
<EmptyHeader>
|
||||
<EmptyTitle>{_("No rules setup yet")}</EmptyTitle>
|
||||
<EmptyDescription>{_("Configure rules to save time when reconciling transactions.")}</EmptyDescription>
|
||||
</EmptyHeader>
|
||||
|
||||
</Empty>}
|
||||
|
||||
{data && data.length > 0 && (
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<SortableContext
|
||||
items={data.map(rule => rule.name)}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
<ul className="space-2 divide-y divide-outline-gray-modals">
|
||||
{data?.map((rule) => (
|
||||
<SortableRuleItem
|
||||
key={rule.name}
|
||||
rule={rule}
|
||||
setSelectedRule={setSelectedRule}
|
||||
onDeleteRule={onDeleteRule}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
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 (
|
||||
<li ref={setNodeRef} style={style}>
|
||||
<div className={cn("flex justify-between items-center py-2 my-0.5 h-full hover:bg-surface-gray-1 pe-2 rounded", isDropdownOpen && "bg-surface-gray-1")}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
className="cursor-grab active:cursor-grabbing p-1 rounded"
|
||||
title={_("Drag to reorder")}
|
||||
>
|
||||
<GripVertical className="w-4 h-4 text-ink-gray-5" />
|
||||
</div>
|
||||
<Badge theme="gray" className="font-numeric tabular-nums">
|
||||
{rule.priority}
|
||||
</Badge>
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant='link'
|
||||
size='sm'
|
||||
className="p-0 h-fit text-start cursor-pointer no-underline hover:underline"
|
||||
onClick={() => setSelectedRule(rule.name)}>
|
||||
{rule.rule_name}
|
||||
</Button>
|
||||
<div title={rule.transaction_type === "Any" ? _("Applies to withdrawals and deposits") : rule.transaction_type === "Withdrawal" ? _("Applies to withdrawals") : _("Applies to deposits")}>
|
||||
{rule.transaction_type === "Any" ? <ArrowDownUp className="text-ink-gray-5 w-4 h-4" /> : rule.transaction_type === "Withdrawal" ? <ArrowUpRight className="text-ink-red-3 w-5 h-5" /> : <ArrowDownRight className="text-ink-green-3 w-5 h-5" />}
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-sm text-ink-gray-5">
|
||||
{rule.rule_description}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 h-full justify-center">
|
||||
<DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant='ghost' isIconButton className="hover:bg-transparent">
|
||||
<MoreVertical />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => onDeleteRule(rule.name)}>
|
||||
<Trash2 />
|
||||
{_("Delete")}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
export default RuleList
|
||||
95
banking/src/components/features/Settings/Settings.tsx
Normal file
95
banking/src/components/features/Settings/Settings.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Dialog, DialogTrigger } from '@/components/ui/dialog'
|
||||
import {
|
||||
SettingsDialog,
|
||||
SettingsPanel,
|
||||
SettingsPanels,
|
||||
SettingsTabGroup,
|
||||
SettingsTabItem,
|
||||
SettingsTabs,
|
||||
} from '@/components/ui/settings-dialog'
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
import _ from '@/lib/translate'
|
||||
import { KeyboardIcon, SettingsIcon, SlidersVerticalIcon, ZapIcon } from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
import { Preferences } from './Preferences'
|
||||
import MatchingRules from './MatchingRules'
|
||||
import KeyboardShortcuts from './KeyboardShortcuts'
|
||||
import { useHotkeys } from 'react-hotkeys-hook'
|
||||
|
||||
const Settings = () => {
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
|
||||
useHotkeys('shift+meta+g', () => {
|
||||
setIsOpen(x => !x)
|
||||
}, {
|
||||
enabled: true,
|
||||
preventDefault: true,
|
||||
enableOnFormTags: false
|
||||
})
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant={'outline'} isIconButton size='md'>
|
||||
<SettingsIcon />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
{_("Settings")}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<SettingsDialog defaultValue="preferences" onClose={() => setIsOpen(false)}>
|
||||
<SettingsTabs>
|
||||
<SettingsTabGroup header={_("Settings")}>
|
||||
<SettingsTabItem
|
||||
icon={<SlidersVerticalIcon />}
|
||||
label={_("Preferences")}
|
||||
value="preferences"
|
||||
/>
|
||||
<SettingsTabItem
|
||||
icon={<ZapIcon />}
|
||||
label={_("Matching Rules")}
|
||||
value="rules"
|
||||
/>
|
||||
{/* <SettingsTabItem
|
||||
icon={<LandmarkIcon />}
|
||||
label={_("Bank Accounts")}
|
||||
value="bank-accounts"
|
||||
/>
|
||||
<SettingsTabItem
|
||||
icon={<ListIcon />}
|
||||
label={_("Masters")}
|
||||
value="masters"
|
||||
/> */}
|
||||
<SettingsTabItem
|
||||
icon={<KeyboardIcon />}
|
||||
label={_("Keyboard Shortcuts")}
|
||||
value="keyboard-shortcuts"
|
||||
/>
|
||||
</SettingsTabGroup>
|
||||
</SettingsTabs>
|
||||
|
||||
<SettingsPanels>
|
||||
<SettingsPanel value="preferences">
|
||||
<Preferences />
|
||||
</SettingsPanel>
|
||||
<SettingsPanel value="rules">
|
||||
<MatchingRules />
|
||||
</SettingsPanel>
|
||||
<SettingsPanel value="bank-accounts" />
|
||||
<SettingsPanel value="masters" />
|
||||
<SettingsPanel value="keyboard-shortcuts">
|
||||
<KeyboardShortcuts />
|
||||
</SettingsPanel>
|
||||
</SettingsPanels>
|
||||
</SettingsDialog>
|
||||
</Dialog >
|
||||
)
|
||||
}
|
||||
|
||||
export default Settings
|
||||
Reference in New Issue
Block a user