mirror of
https://github.com/frappe/erpnext.git
synced 2026-08-30 23:18:02 +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
(cherry picked from commit 6de5367f12)
# Conflicts:
# erpnext/accounts/doctype/bank_reconciliation_tool/bank_reconciliation_tool.py
* chore: resolve conflicts
* fix: add type hints to whitelisted methods
---------
Co-authored-by: Nikhil Kothari <nik.kothari22@live.com>
This commit is contained in:
mergify[bot]
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>
|
||||
}
|
||||
Reference in New Issue
Block a user