Placeholder accounts table (#675)

amplify/backend/function/stockerlambda/package.json

@@ -69,7 +69,7 @@
     "@types/cors": "^2.8.17",
     "@types/express": "^4.17.21",
     "@types/jest": "^29.5.6",
-    "@types/node": "^20.11.19",
+    "@types/node": "^20.11.20",
     "eslint": "^8.56.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "jest": "^27.4.6",

package.json

@@ -23,8 +23,8 @@
     "@dinero.js/currencies": "^2.0.0-alpha.14",
     "@fontsource/inter": "^5.0.16",
     "@hookform/resolvers": "^3.3.4",
-    "@tanstack/react-query": "^5.20.5",
-    "@tanstack/react-query-devtools": "^5.20.5",
+    "@tanstack/react-query": "^5.24.1",
+    "@tanstack/react-query-devtools": "^5.21.0",
     "@tanstack/react-table": "^8.12.0",
     "@testing-library/jest-dom": "^6.4.2",
     "aws-amplify": "^5.3.12",
@@ -42,19 +42,19 @@
     "debounce-promise": "^3.1.2",
     "dinero.js": "^2.0.0-alpha.14",
     "luxon": "^3.4.4",
-    "next": "^14.0.4",
+    "next": "^14.1.0",
     "pako": "^2.1.0",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.50.1",
     "react-hotkeys-hook": "^4.5.0",
     "react-icons": "^5.0.1",
-    "react-joyride": "^2.7.2",
+    "react-joyride": "^2.7.4",
     "react-modal": "^3.16.1",
     "react-select": "^5.8.0",
     "react-tailwindcss-datepicker": "^1.6.6",
-    "react-tooltip": "^5.26.2",
+    "react-tooltip": "^5.26.3",
     "reflect-metadata": "^0.2.1",
     "sharp": "^0.33.2",
     "sql.js": "^1.10.2",
@@ -105,18 +105,6 @@
       "amplify/**/*"
     ]
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
   "devDependencies": {
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
@@ -128,9 +116,9 @@
     "@types/google.accounts": "^0.0.14",
     "@types/jest": "^29.5.5",
     "@types/luxon": "^3.4.2",
-    "@types/node": "^20.11.19",
+    "@types/node": "^20.11.20",
     "@types/pako": "^2.0.3",
-    "@types/react": "18.2.55",
+    "@types/react": "18.2.58",
     "@types/react-dom": "^18.2.19",
     "@types/react-modal": "^3.16.3",
     "@types/react-router-dom": "^5.3.3",
@@ -140,7 +128,7 @@
     "autoprefixer": "^10.4.17",
     "babel-preset-react-app": "^10.0.1",
     "copy-webpack-plugin": "^12.0.2",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-config-next": "^14.1.0",

src/__tests__/components/equities/__snapshots__/StatisticsWidget.test.tsx.snap → src/__tests__/components/__snapshots__/StatisticsWidget.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`StatisticsWidget renders as expected 1`] = `
       Title
     </p>
     <p
-      class="mdi text-success text-2xl font-semibold my-3"
+      class="text-2xl font-semibold my-3 mdi text-success"
     >
       1234$
     </p>
@@ -31,7 +31,7 @@ exports[`StatisticsWidget renders as expected without optional params 1`] = `
       Title
     </p>
     <p
-      class=" text-2xl font-semibold my-3"
+      class="text-2xl font-semibold my-3 "
     >
       1234$
     </p>

src/__tests__/components/pages/account/AssetInfo.test.tsx

@@ -24,6 +24,10 @@ jest.mock('@/components/StatisticsWidget', () => jest.fn(
   () => <div data-testid="StatisticsWidget" />,
 ));
 
+jest.mock('@/components/pages/accounts/AccountsTable', () => jest.fn(
+  () => <div data-testid="AccountsTable" />,
+));
+
 describe('AssetInfo', () => {
   let account: Account;
   beforeEach(() => {
@@ -82,15 +86,41 @@ describe('AssetInfo', () => {
       <AssetInfo account={account} />,
     );
 
-    expect(StatisticsWidget).toHaveBeenNthCalledWith(
-      1,
+    expect(StatisticsWidget).toBeCalledTimes(1);
+    expect(StatisticsWidget).toBeCalledWith(
       {
         className: 'mr-2',
         title: 'Total',
+        // Don't know how to check for JSX element here
         description: expect.anything(),
         stats: '€100.00',
       },
       {},
     );
   });
+
+  it('shows account table when placeholder', () => {
+    jest.spyOn(apiHook, 'useAccountsTotals').mockReturnValue({
+      data: { guid: new Money(100, 'EUR') } as AccountsTotals,
+    } as UseQueryResult<AccountsTotals>);
+
+    account.placeholder = true;
+    render(
+      <AssetInfo account={account} />,
+    );
+
+    expect(StatisticsWidget).toBeCalledTimes(2);
+    expect(StatisticsWidget).toHaveBeenNthCalledWith(
+      2,
+      {
+        className: 'mr-2',
+        title: 'Subaccounts',
+        description: '',
+        statsTextClass: 'font-normal',
+        // Don't know how to check for AccountsTable here
+        stats: expect.anything(),
+      },
+      {},
+    );
+  });
 });

src/__tests__/components/pages/account/Header.test.tsx

@@ -156,4 +156,25 @@ describe('Header', () => {
     );
     expect(container).toMatchSnapshot();
   });
+
+  it('shows parent link', async () => {
+    const account = {
+      guid: 'guid',
+      path: 'Assets:account',
+      name: 'account',
+      type: 'TYPE',
+      parentId: 'parent',
+      commodity: {
+        mnemonic: 'EUR',
+      },
+    } as Account;
+
+    jest.spyOn(apiHook, 'useAccount').mockReturnValueOnce({
+      data: { guid: 'parent' } as Account,
+    } as UseQueryResult<Account>);
+    jest.spyOn(apiHook, 'useSplits').mockReturnValueOnce({ data: undefined } as UseQueryResult<Split[]>);
+
+    const { container } = render(<Header account={account} />);
+    expect(container).toMatchSnapshot();
+  });
 });

src/__tests__/components/pages/account/__snapshots__/AssetInfo.test.tsx.snap

@@ -22,17 +22,24 @@ exports[`AssetInfo renders as expected when no splits 1`] = `
           class="col-span-8"
         />
         <div
-          class="card col-span-12"
-        >
-          <div
-            data-testid="NetWorthHistogram"
-          />
-        </div>
+          class="col-span-4"
+        />
       </div>
     </div>
     <div
-      class="card col-span-6"
-    />
+      class="grid grid-cols-12 col-span-6"
+    >
+      <div
+        class="card col-span-12"
+      >
+        <div
+          data-testid="NetWorthHistogram"
+        />
+      </div>
+      <div
+        class="col-span-12"
+      />
+    </div>
   </div>
 </div>
 `;

src/__tests__/components/pages/account/__snapshots__/Header.test.tsx.snap

@@ -50,3 +50,63 @@ exports[`Header renders as expected with account 1`] = `
   </div>
 </div>
 `;
+
+exports[`Header shows parent link 1`] = `
+<div>
+  <div
+    class="header"
+  >
+    <span
+      class="title"
+    >
+      <span
+        class="text-xl font-medium badge"
+      >
+        <span>
+          <a
+            class="text-white text-opacity-50 hover:text-current"
+            href="/dashboard/accounts/parent"
+          >
+            Assets
+          </a>
+          :
+          account
+        </span>
+      </span>
+    </span>
+    <div
+      class="ml-auto"
+    >
+      <div
+        class="flex gap-1"
+      >
+        <div
+          class=""
+        >
+          <div
+            data-testid="FormButton"
+          >
+            <div
+              data-testid="TransactionForm"
+            />
+          </div>
+        </div>
+        <div
+          data-testid="FormButton"
+        >
+          <div
+            data-testid="AccountForm"
+          />
+        </div>
+        <div
+          data-testid="FormButton"
+        >
+          <div
+            data-testid="AccountForm"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/StatisticsWidget.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 export type StatisticsWidgetProps = {
   title: string,
-  stats: string,
+  stats: JSX.Element | string,
   description: JSX.Element | string,
   className?: string,
   statsTextClass?: string,
@@ -20,7 +20,7 @@ export default function StatisticsWidget({
       <p>
         {title}
       </p>
-      <p className={`${statsTextClass} text-2xl font-semibold my-3`}>{stats}</p>
+      <p className={`text-2xl font-semibold my-3 ${statsTextClass}`}>{stats}</p>
 
       <span className="text-sm">
         {description}

src/components/pages/account/AssetInfo.tsx

@@ -7,6 +7,7 @@ import type { Account } from '@/book/entities';
 import Money from '@/book/Money';
 import { useAccountsTotals } from '@/hooks/api';
 import { NetWorthHistogram } from '@/components/charts';
+import { AccountsTable } from '@/components/pages/accounts';
 
 export type AssetInfoProps = {
   account: Account,
@@ -49,20 +50,38 @@ export default function AssetInfo({
             />
           </div>
           <div className="col-span-8" />
-          <div className="card col-span-12">
-            <NetWorthHistogram
-              height={300}
-              assetsGuid={account.guid}
-              assetsLabel={account.name}
-              hideAssets
-              liabilitiesGuid=""
-              hideLiabilities
-              showLegend={false}
-            />
+          <div className="col-span-4">
+            {
+              account.placeholder
+              && (
+                <div className="col-span-6">
+                  <StatisticsWidget
+                    className="mr-2"
+                    statsTextClass="font-normal"
+                    title="Subaccounts"
+                    stats={<AccountsTable guids={account.childrenIds} />}
+                    description=""
+                  />
+                </div>
+              )
+            }
           </div>
         </div>
       </div>
-      <div className="card col-span-6" />
+      <div className="grid grid-cols-12 col-span-6">
+        <div className="card col-span-12">
+          <NetWorthHistogram
+            height={300}
+            assetsGuid={account.guid}
+            assetsLabel={account.name}
+            hideAssets
+            liabilitiesGuid=""
+            hideLiabilities
+            showLegend={false}
+          />
+        </div>
+        <div className="col-span-12" />
+      </div>
     </div>
   );
 }

src/components/pages/account/Header.tsx

@@ -15,6 +15,7 @@ import {
 } from '@/book/helpers/accountType';
 import { Account, Split } from '@/book/entities';
 import { useAccount, useSplitsPagination } from '@/hooks/api';
+import Link from 'next/link';
 
 export type HeaderProps = {
   account: Account,
@@ -30,6 +31,23 @@ export default function Header({
   const latestDate = splits?.[0]?.transaction?.date;
   const deletable = splits?.length === 0;
 
+  let title: string | JSX.Element = account.path;
+  if (account.path.lastIndexOf(':') > 0) {
+    const parentPath = account.path.slice(0, account.path.lastIndexOf(':'));
+    title = (
+      <span>
+        <Link
+          href={`/dashboard/accounts/${account.parentId}`}
+          className={classNames('text-white text-opacity-50 hover:text-current')}
+        >
+          {parentPath}
+        </Link>
+        :
+        {account.name}
+      </span>
+    );
+  }
+
   return (
     <div className="header">
       <span className="title">
@@ -42,7 +60,7 @@ export default function Header({
             misc: isInvestment(account),
           })}
         >
-          {account.path}
+          {title}
         </span>
       </span>
       <div className="ml-auto">