Convert Transaction Form into Swipeable Drawer (#11)

mildronize · Apr 28, 2024 · 5e9d5fc · 5e9d5fc
2 parents bf7d905 + cf2eaa2
commit 5e9d5fc
Show file tree

Hide file tree

Showing 22 changed files with 584 additions and 214 deletions.
diff --git a/budget-app/.env b/budget-app/.env
@@ -0,0 +1,10 @@
+GSHEET_PRIVATE_KEY=
+GSHEET_CLIENT_EMAIL=
+GSHEET_SPREADSHEET_ID=
+GSHEET_SHEET_TRANSACTION_SHEET_ID=23423423
+
+ENABLE_MICROSOFT_ENTRA_IDENTITY=true
+ALLOW_WHITELIST_PRINCIPAL_NAMES=*
+
+AZURE_STORAGE_CONNECTION_STRING=UseDevelopmentStorage=true
+# AZURE_STORAGE_QUEUE_NAME=devqueue
diff --git a/budget-app/package-lock.json b/budget-app/package-lock.json
diff --git a/budget-app/package.json b/budget-app/package.json
@@ -40,7 +40,8 @@
     "uuid": "^9.0.1",
     "vaul": "^0.9.0",
     "zod": "^3.22.4",
-    "zod-validation-error": "^3.1.0"
+    "zod-validation-error": "^3.1.0",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@types/core-js": "^2.5.8",

diff --git a/budget-app/src/app/api/transaction/[id]/route.ts b/budget-app/src/app/api/transaction/[id]/route.ts
@@ -1,7 +1,6 @@
 import { transactionCacheTable } from "@/bootstrap";
 import { TransactionCacheEntity } from "@/entites/transaction.entity";
 import { globalHandler } from "@/global/globalHandler";
-import dayjs from "dayjs";
 import { NextResponse } from "next/server";
 import { ODataExpression } from "ts-odata-client";
 

diff --git a/budget-app/src/app/components/AlertActiveQueue.tsx b/budget-app/src/app/components/AlertActiveQueue.tsx
@@ -30,20 +30,9 @@ export function AlertActiveQueue() {
   if (transactionQueue.isLoading) {
     return <Skeleton variant="text" sx={{ fontSize: "2rem" }} />;
   }
-
-  // if (transactionQueue.data?.data?.numberOfMessages === 0) {
-  //   return <></>;
-  // }
-
+
   return (
     <>
-      {transactionQueue.data?.data?.numberOfMessages &&
-      transactionQueue.data?.data?.numberOfMessages > 0 ? (
-        <Alert severity="warning">
-          Number of messages in queue:{" "}
-          {String(transactionQueue.data?.data.numberOfMessages)}
-        </Alert>
-      ) : null}
       {transactionQueue.data?.data?.poisonQueue?.numberOfMessages &&
       transactionQueue.data?.data?.poisonQueue?.numberOfMessages > 0 ? (
         <Alert severity="error">

diff --git a/budget-app/src/app/components/TransactionList.tsx b/budget-app/src/app/components/TransactionList.tsx
@@ -1,16 +1,13 @@
-'use client';
+"use client";
 import * as React from "react";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import Divider from "@mui/material/Divider";
 import ListItemText from "@mui/material/ListItemText";
-import ListItemAvatar from "@mui/material/ListItemAvatar";
-import Avatar from "@mui/material/Avatar";
-import Typography from "@mui/material/Typography";
 import dayjs from "dayjs";
 import { ListItemButton } from "@mui/material";
-import numbro from 'numbro';
-import { useRouter } from 'next/navigation'
+import numbro from "numbro";
+import { useRouter } from "next/navigation";
 
 /**
  * Hotfix for uuid gen
@@ -38,61 +35,85 @@ export interface TransactionListProps {
     account?: string;
     memo?: string;
   }[];
+  /**
+   * Optional onClickAction, default to redirect to /transaction/edit/:id
+   * @param id 
+   * @returns 
+   */
+  onClickAction?: (id?: string) => void;
 }
 
 export function TransactionList(props: TransactionListProps) {
-  const router = useRouter()
-  const handleListClick = (item: TransactionListProps['data'][number]) => {
+  const router = useRouter();
+  const handleListClick = (item: TransactionListProps["data"][number]) => {
+    if (props.onClickAction) {
+      props.onClickAction(item.id);
+      return;
+    }
     console.log(`Redirecting to /transaction/edit/${item.id}`);
     router.push(`/transaction/edit/${item.id}`);
   };
 
   return (
     <List sx={{ width: "100%", bgcolor: "background.paper" }}>
       {props.data.map((item) => (
-        <ListItem
-          key={item.id ?? generateRandomString(8)}
-          alignItems="flex-start"
-        >
-          <ListItemButton
-            role={undefined}
-            onClick={() => handleListClick(item)}
-            // dense
+        <React.Fragment key={item.id ?? generateRandomString(8)}>
+          <ListItem
+            dense={true}
+            alignItems="flex-start"
+            sx={{
+              padding: "0px",
+              // paddingTop: "0px",
+              // paddingBottom: "0px",
+            }}
           >
-            <ListItemAvatar>
+            <ListItemButton
+              role={undefined}
+              onClick={() => handleListClick(item)}
+              sx={{
+                paddingLeft: "40px",
+                paddingTop: "5px",
+                paddingBottom: "5px",
+              }}
+            >
+              {/* <ListItemAvatar>
               <Avatar>
                 {item.category
                   ? item.category?.slice(0, 2)
                   : item.payee?.slice(0, 2)}
               </Avatar>
-            </ListItemAvatar>
+            </ListItemAvatar> */}
 
-            <ListItemText
-              primary={
-                item.category || item.category !== ""
-                  ? item.category
-                  : "No Category"
-              }
-              secondary={
-                <React.Fragment>
-                  <Typography
-                    sx={{ display: "inline" }}
-                    component="span"
-                    variant="body2"
-                    color="text.primary"
-                  >
+              <ListItemText
+                primary={
+                  item.category || item.category !== ""
+                    ? item.category
+                    : "No Category"
+                }
+                secondary={
+                  <React.Fragment>
+                    {/* <Typography
+                      sx={{ display: "inline" }}
+                      component="span"
+                      variant="body2"
+                      color="text.primary"
+                    > */}
                     {item.payee}
-                  </Typography>
-                  {` — ${numbro(item.amount).format('0,0')} on ${dayjs(item.date).format("MMM DD")}`}
-                  {dayjs().year().toString() !==
-                  dayjs(item.date).year().toString()
-                    ? `, ${dayjs(item.date).year()}`
-                    : ""}
-                </React.Fragment>
-              }
-            />
-          </ListItemButton>
-        </ListItem>
+                    {/* </Typography> */}
+                    {` — ${numbro(item.amount).format("0,0")} on ${dayjs(
+                      item.date
+                    ).format("MMM DD")}`}
+                    {dayjs().year().toString() !==
+                    dayjs(item.date).year().toString()
+                      ? `, ${dayjs(item.date).year()}`
+                      : ""}
+                  </React.Fragment>
+                }
+              />
+            </ListItemButton>
+          </ListItem>
+          <Divider />
+        </React.Fragment>
       ))}
     </List>
   );

diff --git a/budget-app/src/app/globals.css b/budget-app/src/app/globals.css
@@ -1,9 +1,10 @@
 body {
-  padding-top: 40px;
+  /* padding-top: 40px; */
+  /* background-color: #f2f9ff; */
 }
 
 .form-input {
-  margin-bottom: 40px;
+  margin-bottom: 30px;
 }
 
 .container {

diff --git a/budget-app/src/app/layout.tsx b/budget-app/src/app/layout.tsx
@@ -6,7 +6,7 @@ const APP_TITLE_TEMPLATE = "%s - My Budget";
 const APP_DESCRIPTION = "My Budget on Mobile";
 
 export const viewport: Viewport = {
-  themeColor: "#FFFFFF",
+  themeColor: "#ffffff",
 };
 
 export const metadata: Metadata = {

diff --git a/budget-app/src/app/page.tsx b/budget-app/src/app/page.tsx
@@ -1,13 +1,26 @@
 import type * as React from "react";
-import { BottomNavigation } from "./tabs/components/BottomNavigation";
+import { MobileLayoutNavigation } from "./tabs/components/MobileLayoutNavigation";
 import { RecentTransactionTab } from "./tabs/RecentTransactionTab";
+import { CountQueueChip } from "./components/CountQueueChip";
+import { Typography } from "@mui/material";
+
+function RecentTransactionTitle() {
+  return (
+    <Typography variant="h6" sx={{ fontSize: "0.9rem", fontWeight: "600" }}>
+      Recent Transactions <CountQueueChip />
+    </Typography>
+  );
+}
 
 export default function Home() {
   return (
     <div>
-      <BottomNavigation currentRouterKey={0} >
+      <MobileLayoutNavigation
+        currentRouterKey={0}
+        title={<RecentTransactionTitle />}
+      >
         <RecentTransactionTab />
-      </BottomNavigation>
+      </MobileLayoutNavigation>
     </div>
   );
 }
diff --git a/budget-app/src/app/settings/page.tsx b/budget-app/src/app/settings/page.tsx
@@ -1,13 +1,13 @@
 import * as React from "react";
-import { BottomNavigation } from "../tabs/components/BottomNavigation";
+import { MobileLayoutNavigation } from "../tabs/components/MobileLayoutNavigation";
 import { SettingTab } from "../tabs/SettingTab";
 
 export default function Home() {
   return (
     <div>
-      <BottomNavigation currentRouterKey={2} >
+      <MobileLayoutNavigation currentRouterKey={2} >
         <SettingTab />
-      </BottomNavigation>
+      </MobileLayoutNavigation>
     </div>
   );
 }