Merge pull request #385 from zhang-accounting/fix/stack-display-for-m…

…ultiple-commodity-in-account-page fix: fix the sidebar and scroll the content only
zhang-accounting · Oct 19, 2024 · ff22a87 · ff22a87
2 parents e1ffd3b + c5e7609
commit ff22a87
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 37 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -77,11 +77,11 @@ export default function App() {
   }, [mutate]);
 
   return (
-    <div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[220px_1fr]">
+    <div className="grid h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[220px_1fr]">
       <Sidebar />
-      <div className="flex flex-col sm:gap-4 sm:py-4">
+      <div className="flex flex-col sm:gap-4 sm:py-4 overflow-hidden">
         <Nav />
-        <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
+        <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 overflow-scroll">
           <Router />
         </main>
       </div>

diff --git a/frontend/src/components/AccountBalanceHistoryGraph.tsx b/frontend/src/components/AccountBalanceHistoryGraph.tsx
@@ -81,12 +81,10 @@ export function AccountBalanceHistoryGraph(props: Props) {
       >
         <CartesianGrid vertical={false} />
         <XAxis dataKey="date" tickLine={false} axisLine={false} tickMargin={8} />
-        <YAxis hide type="number" domain={[minAmount, maxAmount]} yAxisId="default" scale="log"
-               padding={{ top: 20, bottom: 20 }} />
+        <YAxis hide type="number" domain={[minAmount, maxAmount]} yAxisId="default" scale="log" padding={{ top: 20, bottom: 20 }} />
         <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
         {series.map((it) => (
-          <Line dataKey={it.name} type="monotone" stroke={it.color} strokeWidth={2} dot={false} activeDot
-                yAxisId="default" />
+          <Line dataKey={it.name} type="monotone" stroke={it.color} strokeWidth={2} dot={false} activeDot yAxisId="default" />
         ))}
       </LineChart>
     </ChartContainer>

diff --git a/frontend/src/components/AccountLine.tsx b/frontend/src/components/AccountLine.tsx
@@ -93,8 +93,7 @@ export default function AccountLine({ data, spacing }: Props) {
       {isShow &&
         Object.keys(data.children)
           .sort()
-          .map((child) => <AccountLine key={data.children[child].path} data={data.children[child]}
-                                       spacing={spacing + 1} />)}
+          .map((child) => <AccountLine key={data.children[child].path} data={data.children[child]} spacing={spacing + 1} />)}
     </>
   );
 }
diff --git a/frontend/src/components/Amount.tsx b/frontend/src/components/Amount.tsx
@@ -36,12 +36,8 @@ export default function Amount({ amount, currency, negative, mask, className }:
   return (
     <span className={`inline-flex gap-0.5 ${className}`}>
       {isNegative && <span className="font-feature-settings-tnum">-</span>}
-      <span className="font-feature-settings-tnum">
-        {commodity?.prefix}
-        </span>
-      <span className="font-feature-settings-tnum">
-        {maskedValue}
-      </span>
+      <span className="font-feature-settings-tnum">{commodity?.prefix}</span>
+      <span className="font-feature-settings-tnum">{maskedValue}</span>
       {commodity?.suffix && <span className="font-feature-settings-tnum">{commodity?.suffix}</span>}
       {shouldDisplayCurrencyName && <span className="font-feature-settings-tnum">{currency}</span>}
     </span>

diff --git a/frontend/src/components/ReportGraph.tsx b/frontend/src/components/ReportGraph.tsx
@@ -59,17 +59,15 @@ export default function ReportGraph(props: Props) {
         <ComposedChart accessibilityLayer data={data}>
           <XAxis dataKey="date" tickLine={false} tickMargin={10} axisLine={false} />
 
-          <YAxis hide type="number" domain={total_domain} yAxisId="left" scale="log"
-                 padding={{ top: 20, bottom: 20 }} />
+          <YAxis hide type="number" domain={total_domain} yAxisId="left" scale="log" padding={{ top: 20, bottom: 20 }} />
           <YAxis hide type="number" domain={[0, max_income]} yAxisId="right" padding={{ top: 20, bottom: 0 }} />
 
           <ChartTooltip content={<ChartTooltipContent />} />
           <CartesianGrid vertical={false} />
 
           <Bar dataKey="income" stackId="a" fill="#3b82f6" yAxisId="right" />
           <Bar dataKey="expense" stackId="a" fill="#ef4444" yAxisId="right" />
-          <Line type="monotone" dataKey="total" stroke="var(--color-total)" strokeWidth={2} dot={false} activeDot
-                yAxisId="left" />
+          <Line type="monotone" dataKey="total" stroke="var(--color-total)" strokeWidth={2} dot={false} activeDot yAxisId="left" />
         </ComposedChart>
       </ChartContainer>
     </>

diff --git a/frontend/src/components/journalLines/tableView/TableViewTransactionLine.tsx b/frontend/src/components/journalLines/tableView/TableViewTransactionLine.tsx
@@ -51,8 +51,7 @@ export default function TableViewTransactionLine({ data }: Props) {
   const summary = calculate(data);
   const hasDocuments = data.metas.some((meta) => meta.key === 'document');
   return (
-    <TableRow
-      className={cn('p-1', !data.is_balanced && 'border-l-[3px] border-l-red-500', data.flag === '!' && 'border-l-[3px] border-l-orange-500')}>
+    <TableRow className={cn('p-1', !data.is_balanced && 'border-l-[3px] border-l-red-500', data.flag === '!' && 'border-l-[3px] border-l-orange-500')}>
       <TableCell>{time}</TableCell>
       <TableCell>
         <Badge color="gray" variant="outline">
@@ -64,15 +63,13 @@ export default function TableViewTransactionLine({ data }: Props) {
           <PayeeNarration payee={data.payee} narration={data.narration} onClick={openPreviewModal} />
           {data.links &&
             data.links.map((it) => (
-              <Badge key={it} className="cursor-pointer" color="blue" variant="secondary"
-                     onClick={() => handleLinkClick(it)()}>
+              <Badge key={it} className="cursor-pointer" color="blue" variant="secondary" onClick={() => handleLinkClick(it)()}>
                 ^{it}
               </Badge>
             ))}
           {data.tags &&
             data.tags.map((tag) => (
-              <Badge key={tag} className="cursor-pointer" color="blue" variant="secondary"
-                     onClick={() => handleTagClick(tag)()}>
+              <Badge key={tag} className="cursor-pointer" color="blue" variant="secondary" onClick={() => handleTagClick(tag)()}>
                 #{tag}
               </Badge>
             ))}

diff --git a/frontend/src/pages/SingleAccount.tsx b/frontend/src/pages/SingleAccount.tsx
@@ -30,10 +30,7 @@ function SingleAccount() {
   const [lightboxSrc, setLightboxSrc] = useState<string | undefined>(undefined);
 
   const { data: account, error } = useSWR<AccountInfo>(`/api/accounts/${accountName}`, fetcher);
-  const {
-    data: account_balance_data,
-    error: account_balance_error,
-  } = useSWR<AccountBalanceHistory>(`/api/accounts/${accountName}/balances`, fetcher);
+  const { data: account_balance_data, error: account_balance_error } = useSWR<AccountBalanceHistory>(`/api/accounts/${accountName}/balances`, fetcher);
 
   const ledgerTitle = useAtomValue(titleAtom);
   useDocumentTitle(`${accountName} | Accounts - ${ledgerTitle}`);
@@ -56,8 +53,7 @@ function SingleAccount() {
       <div className="flex items-center gap-4 pb-6">
         <div>
           <div className="flex items-center gap-2">
-            <h1
-              className="flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0">{account.alias ?? account.name}</h1>
+            <h1 className="flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0">{account.alias ?? account.name}</h1>
             <Badge variant="outline" className="ml-auto sm:ml-0">
               {account.status}
             </Badge>
@@ -158,12 +154,10 @@ function SingleAccount() {
                 render={(data: Document[]) => (
                   <>
                     <ImageLightBox src={lightboxSrc} onChange={setLightboxSrc} />
-                    <div
-                      className="grid grid-cols-1 xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 sm:gap-3 md:gap-4">
+                    <div className="grid grid-cols-1 xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 sm:gap-3 md:gap-4">
                       <AccountDocumentUpload url={`/api/accounts/${accountName}/documents`} />
                       {data.map((document, idx) => (
-                        <DocumentPreview onClick={(path) => setLightboxSrc(path)} key={idx} uri={document.path}
-                                         filename={document.path} />
+                        <DocumentPreview onClick={(path) => setLightboxSrc(path)} key={idx} uri={document.path} filename={document.path} />
                       ))}
                     </div>
                   </>
@@ -190,8 +184,7 @@ function SingleAccount() {
                 </TableHeader>
                 <TableBody>
                   {Object.entries(account?.amount.detail ?? {}).map(([commodity, amount]) => (
-                    <AccountBalanceCheckLine key={commodity} currentAmount={amount} commodity={commodity}
-                                             accountName={account.name} />
+                    <AccountBalanceCheckLine key={commodity} currentAmount={amount} commodity={commodity} accountName={account.name} />
                   ))}
                 </TableBody>
               </Table>