fix(banking): miscellaneous bug fixes (backport #55492) (#55979)

banking/src/components/features/Settings/KeyboardShortcuts.tsx

@@ -4,7 +4,7 @@ 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'
+import { ArrowRightLeftIcon, HistoryIcon, LandmarkIcon, OptionIcon, ReceiptIcon, SaveIcon, SettingsIcon, ZapIcon } from 'lucide-react'
 
 const Shortcuts = [
     {
@@ -32,7 +32,7 @@ const Shortcuts = [
         }
     },
     {
-        shortcut: <KbdGroup><Kbd><KeyboardMetaKeyIcon /></Kbd><Kbd>R</Kbd></KbdGroup>,
+        shortcut: <KbdGroup><Kbd><OptionIcon /></Kbd><Kbd>R</Kbd></KbdGroup>,
         action: {
             icon: <ZapIcon />,
             label: _("Accept Matching Rule"),

banking/src/components/features/Settings/Preferences.tsx

@@ -20,7 +20,7 @@ export const Preferences = () => {
 
     const { updateDoc, error } = useFrappeUpdateDoc<AccountsSettings>()
 
-    const onUpdate = (field: keyof AccountsSettings, value: any) => {
+    const onUpdate = <K extends keyof AccountsSettings>(field: K, value: AccountsSettings[K]) => {
         mutate(updateDoc("Accounts Settings", "Accounts Settings", {
             [field]: value
         }), {

banking/src/components/features/Settings/Settings.tsx

@@ -1,95 +1,42 @@
 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 { SettingsIcon } 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'
+import SettingsDialogContent from './SettingsDialogContent'
 
 const Settings = () => {
+	const [isOpen, setIsOpen] = useState(false)
 
-    const [isOpen, setIsOpen] = useState(false)
+	useHotkeys('shift+meta+g', () => {
+		setIsOpen(x => !x)
+	}, {
+		enabled: true,
+		preventDefault: true,
+		enableOnFormTags: 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 >
-    )
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<DialogTrigger asChild>
+						<Button variant={'outline'} isIconButton size='md' aria-label={_("Settings")}>
+							<SettingsIcon />
+						</Button>
+					</DialogTrigger>
+				</TooltipTrigger>
+				<TooltipContent>
+					{_("Settings")}
+				</TooltipContent>
+			</Tooltip>
+			{isOpen && (
+				<SettingsDialogContent onClose={() => setIsOpen(false)} />
+			)}
+		</Dialog>
+	)
 }
 
 export default Settings

banking/src/components/features/Settings/SettingsDialogContent.tsx

@@ -0,0 +1,52 @@
+import {
+	SettingsDialog,
+	SettingsPanels,
+	SettingsTabGroup,
+	SettingsTabItem,
+	SettingsTabs,
+} from '@/components/ui/settings-dialog'
+import _ from '@/lib/translate'
+import { KeyboardIcon, Loader2Icon, SlidersVerticalIcon, ZapIcon } from 'lucide-react'
+import { lazy, Suspense } from 'react'
+
+const SettingsPanelsContent = lazy(() => import('./SettingsPanelsContent'))
+
+const SettingsPanelsFallback = () => (
+	<div className="flex flex-1 items-center justify-center min-h-full">
+		<Loader2Icon className="size-6 animate-spin text-muted-foreground" />
+	</div>
+)
+
+const SettingsDialogContent = ({ onClose }: { onClose: () => void }) => {
+	return (
+		<SettingsDialog defaultValue="preferences" onClose={onClose}>
+			<SettingsTabs>
+				<SettingsTabGroup header={_("Settings")}>
+					<SettingsTabItem
+						icon={<SlidersVerticalIcon />}
+						label={_("Preferences")}
+						value="preferences"
+					/>
+					<SettingsTabItem
+						icon={<ZapIcon />}
+						label={_("Matching Rules")}
+						value="rules"
+					/>
+					<SettingsTabItem
+						icon={<KeyboardIcon />}
+						label={_("Keyboard Shortcuts")}
+						value="keyboard-shortcuts"
+					/>
+				</SettingsTabGroup>
+			</SettingsTabs>
+
+			<SettingsPanels>
+				<Suspense fallback={<SettingsPanelsFallback />}>
+					<SettingsPanelsContent />
+				</Suspense>
+			</SettingsPanels>
+		</SettingsDialog>
+	)
+}
+
+export default SettingsDialogContent

banking/src/components/features/Settings/SettingsPanelsContent.tsx

@@ -0,0 +1,24 @@
+import { SettingsPanel } from '@/components/ui/settings-dialog'
+import { Preferences } from './Preferences'
+import MatchingRules from './MatchingRules'
+import KeyboardShortcuts from './KeyboardShortcuts'
+
+const SettingsPanelsContent = () => {
+	return (
+		<>
+			<SettingsPanel value="preferences">
+				<Preferences />
+			</SettingsPanel>
+			<SettingsPanel value="rules">
+				<MatchingRules />
+			</SettingsPanel>
+			<SettingsPanel value="bank-accounts" />
+			<SettingsPanel value="masters" />
+			<SettingsPanel value="keyboard-shortcuts">
+				<KeyboardShortcuts />
+			</SettingsPanel>
+		</>
+	)
+}
+
+export default SettingsPanelsContent