Feature: transaction modal implementation (Codehagen#209)

* refactor(www): make the add modal button more reusable * refactor(www): make the modal's footer reusable by moving it to modals folder & not make it specific to add-asset-flow modal * feat(www): transaction handling modal implementation * fix(www): use AddButton instead of AddAssetButton * fix(www): recover TransactionModal component in transactions-dashboard page * fix(www): fix imports * fix(www): updates imports in dashboard-1 component * perform format script on files * fix: add missing import to fix the lint pipeline * fix: pass mailId prop as string
digitalapplied · Mar 13, 2024 · 4d37ec8 · 4d37ec8
1 parent 6550a1c
commit 4d37ec8
Show file tree

Hide file tree

Showing 13 changed files with 1,021 additions and 30 deletions.
diff --git a/apps/www/app/(dashboard)/(workspaceId)/banking/layout.tsx b/apps/www/app/(dashboard)/(workspaceId)/banking/layout.tsx
@@ -1,6 +1,6 @@
-import { AddAssetButton } from "@/components/buttons/AddAssetButton";
+import { AddButton } from "@/components/buttons/AddButton";
 import { AddAssetFlow } from "@/components/modals/add-asset-flow";
-import { NavItem } from "@/app/config";
+import type { NavItem } from "@/app/config";
 
 import { DashboardShell } from "../../_components/dashboard-shell";
 
@@ -23,9 +23,9 @@ export default function WorkspaceLayout(props: {
         title="Banking"
         description="Projects for this workspace will show up here"
         headerAction={
-          <AddAssetButton triggerLabel="Add Asset">
+          <AddButton triggerLabel="Add Asset">
             <AddAssetFlow />
-          </AddAssetButton>
+          </AddButton>
         }
       >
         {props.children}

diff --git a/...app/(dashboard)/(workspaceId)/banking/transactions/_components/transactions-dashboard.tsx b/...app/(dashboard)/(workspaceId)/banking/transactions/_components/transactions-dashboard.tsx
@@ -12,6 +12,8 @@ import {
 import { Separator } from "@/components/ui/separator";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import { AddButton } from "@/components/buttons/AddButton";
+import AddTransactionModal from "@/components/modals/add-transaction";
 
 import { Mail } from "../data";
 import { useMail } from "../use-mail";
@@ -55,20 +57,25 @@ export function TransactionsDashboard({
                   <Input placeholder="Search" className="pl-8" />
                 </div>
               </form>
-              <TabsList>
-                <TabsTrigger
-                  value="all"
-                  className="text-zinc-600 dark:text-zinc-200"
-                >
-                  All transactions
-                </TabsTrigger>
-                <TabsTrigger
-                  value="unread"
-                  className="text-zinc-600 dark:text-zinc-200"
-                >
-                  Unread
-                </TabsTrigger>
-              </TabsList>
+              <div className="ms-4 flex flex-grow items-center justify-between">
+                <TabsList>
+                  <TabsTrigger
+                    value="all"
+                    className="text-zinc-600 dark:text-zinc-200"
+                  >
+                    All transactions
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="unread"
+                    className="text-zinc-600 dark:text-zinc-200"
+                  >
+                    Unread
+                  </TabsTrigger>
+                </TabsList>
+                <AddButton triggerLabel="Add Transaction">
+                  <AddTransactionModal />
+                </AddButton>
+              </div>
             </div>
             <Separator />
             <TabsContent value="all" className="m-0">

diff --git a/apps/www/app/(dashboard)/(workspaceId)/dashboard/_components/dashboard-1.tsx b/apps/www/app/(dashboard)/(workspaceId)/dashboard/_components/dashboard-1.tsx
@@ -12,7 +12,7 @@ import {
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import { AddAssetButton } from "@/components/buttons/AddAssetButton";
+import { AddButton } from "@/components/buttons/AddButton";
 import { AddAssetFlow } from "@/components/modals/add-asset-flow";
 import { WorkspaceSwitcher } from "@/app/(dashboard)/_components/workspace-switcher";
 import { SidebarNav } from "@/app/(dashboard)/(workspaceId)/_components/sidebar-nav";

diff --git a/apps/www/app/(dashboard)/(workspaceId)/dashboard/layout.tsx b/apps/www/app/(dashboard)/(workspaceId)/dashboard/layout.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { AddAssetButton } from "@/components/buttons/AddAssetButton";
+import { AddButton } from "@/components/buttons/AddButton";
 import { AddAssetFlow } from "@/components/modals/add-asset-flow";
 
 import { DashboardShell } from "../../_components/dashboard-shell";
@@ -15,9 +15,9 @@ export default function WorkspaceLayout(props: {
         title="Dashboard"
         description="Projects for this workspace will show up here"
         headerAction={
-          <AddAssetButton triggerLabel="Add Asset">
+          <AddButton triggerLabel="Add Asset">
             <AddAssetFlow />
-          </AddAssetButton>
+          </AddButton>
         }
       >
         {props.children}

diff --git a/...www/components/buttons/AddAssetButton.tsx → apps/www/components/buttons/AddButton.tsx b/...www/components/buttons/AddAssetButton.tsx → apps/www/components/buttons/AddButton.tsx
@@ -8,18 +8,23 @@ import { Dialog, DialogContent, DialogTrigger } from "../ui/dialog";
 interface FlowModalProps {
   triggerLabel: string;
   children: ReactNode;
+  showCloseButton?: boolean;
 }
 
-export const AddAssetButton: FC<FlowModalProps> = ({
+export const AddButton: FC<FlowModalProps> = ({
   triggerLabel,
   children,
+  showCloseButton = true,
 }) => {
   return (
     <Dialog>
       <DialogTrigger asChild>
         <Button variant="outline">{triggerLabel}</Button>
       </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]" showCloseButton={false}>
+      <DialogContent
+        className="sm:max-w-[425px]"
+        showCloseButton={showCloseButton}
+      >
         {children}
       </DialogContent>
     </Dialog>