minor front-end fixes

dan-nadler · Jun 30, 2024 · 64101c9 · 64101c9
1 parent 30c84aa
commit 64101c9
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 68 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "@tauri-apps/plugin-dialog": "^2.0.0-beta",
     "@tauri-apps/plugin-fs": "^2.0.0-beta",
     "@tauri-apps/plugin-shell": "^2.0.0-beta",
-    "@tremor/react": "^3.13.3",
+    "@tremor/react": "^3.17.2",
     "@types/react-tagsinput": "^3.20.5",
     "dayjs": "^1.11.10",
     "openai": "^4.27.1",

diff --git a/src/Nav.tsx b/src/Nav.tsx
@@ -10,13 +10,15 @@ import {
   PresentationChartLineIcon,
 } from "@heroicons/react/24/outline";
 import { useAccountSelectionStore } from "./pages/main/home/Store";
+import { useAccountStore } from "./store/Account";
 // import { open } from "@tauri-apps/plugin-dialog";
 // import { importAccount } from "./api/import";
 
 const Nav: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const navigate = useNavigate();
   const [auxButtons, setAuxButtons] = useState<React.ReactNode>(null);
   const { selectedAccounts } = useAccountSelectionStore();
+  const { name } = useAccountStore();
   const l = useLocation();
 
   return (
@@ -26,6 +28,7 @@ const Nav: React.FC<{ children: React.ReactNode }> = ({ children }) => {
           <div className="bg-tremor -mr-2 h-full w-[75px] py-4">
             <div className="flex h-full flex-col justify-between">
               <div className="flex flex-col justify-start gap-8">
+                {/* TODO: The navigation here is buggy. Need to get the active account ID properly. */}
                 <Button
                   variant="light"
                   icon={
@@ -39,12 +42,8 @@ const Nav: React.FC<{ children: React.ReactNode }> = ({ children }) => {
                   disabled={!l.pathname.startsWith("/account")}
                   onClick={() => {
                     l.pathname.startsWith("/account/budget")
-                      ? navigate(
-                          l.pathname.replace("/account/budget", "/account"),
-                        )
-                      : navigate(
-                          l.pathname.replace("/account", "/account/budget"),
-                        );
+                      ? navigate(`/account/${name}`)
+                      : navigate(`/account/budget/${name}`);
                   }}
                 />
                 <Button

diff --git a/src/pages/main/account/Main.tsx b/src/pages/main/account/Main.tsx
@@ -39,6 +39,25 @@ const frequencyToShortString = (frequency: string): string => {
   }
 };
 
+const frequencyFraction = (frequency: string): number => {
+  switch (frequency) {
+    case "Once":
+      return 1.0;
+    case "BusinesDay":
+      return 1 / 252.0;
+    case "MonthStart":
+      return 1 / 12.0;
+    case "MonthEnd":
+      return 1 / 12.0;
+    case "SemiMonthly":
+      return 1 / 24.0;
+    case "Annually":
+      return 1.0;
+    default:
+      return 1.0;
+  }
+};
+
 const AccountForm: React.FC = () => {
   const {
     name,
@@ -97,11 +116,12 @@ const CashFlowCard: React.FC<{
   scenarioName: string;
   item: CashFlow;
   i: number;
-}> = ({ scenarioName, item, i }) => {
+  hidden: boolean;
+}> = ({ scenarioName, item, i, hidden }) => {
   const navigate = useNavigate();
   return (
     <Card
-      className={`flex flex-col flex-wrap py-4 hover:cursor-pointer 
+      className={`flex flex-col flex-wrap py-4 hover:cursor-pointer ${hidden ? "hidden" : ""}
       hover:bg-tremor-background-muted active:bg-tremor-background-subtle
       dark:hover:bg-dark-tremor-background-muted dark:active:bg-dark-tremor-background-subtle`}
       color="neutral"
@@ -137,7 +157,12 @@ const CashFlowCard: React.FC<{
             }
             tooltip={item.tax_rate ? `${item.tax_rate * 100}% tax` : "No tax"}
           >
-            {formatNumber(item.amount)}
+            <span style={{ marginRight: 0, paddingRight: 0 }}>
+              {formatNumber(item.amount * frequencyFraction(item.frequency))}{" "}
+            </span>
+            <span style={{ fontSize: "0.6em", marginLeft: 0, paddingLeft: 0 }}>
+              /period
+            </span>
           </BadgeDelta>
         </Flex>
       </Flex>
@@ -167,17 +192,31 @@ const CashFlowCards: React.FC = () => {
       />
       <Grid numItemsSm={2} numItemsLg={3} className="gap-2">
         {cash_flows
-          .filter((item) =>
-            filter
-              .split(" ")
-              .every(
-                (f) =>
-                  item.name?.toLowerCase().includes(f.toLocaleLowerCase()) ||
-                  item.tags?.some((t) => ("#" + t).toLowerCase().includes(f.toLocaleLowerCase())),
-              ),
-          )
-          .map((item, i) => (
-            <CashFlowCard key={i} scenarioName={name} item={item} i={i} />
+          .map((item) => {
+            if (
+              filter
+                .split(" ")
+                .every(
+                  (f) =>
+                    item.name?.toLowerCase().includes(f.toLocaleLowerCase()) ||
+                    item.tags?.some((t) =>
+                      ("#" + t).toLowerCase().includes(f.toLocaleLowerCase()),
+                    ),
+                )
+            ) {
+              return { item, hidden: false };
+            } else {
+              return { item, hidden: true };
+            }
+          })
+          .map(({ item, hidden }, i) => (
+            <CashFlowCard
+              key={i}
+              scenarioName={name}
+              item={item}
+              i={i}
+              hidden={hidden}
+            />
           ))}
         <Card
           className={`flex cursor-pointer flex-col flex-wrap py-4