mirror of
https://github.com/frappe/erpnext.git
synced 2026-08-22 10:49:59 +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:
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
|
||||
Reference in New Issue
Block a user