feat: Add total income and expenses cards in secure page

xDeFc0nx · Jan 25, 2025 · 8654faa · 8654faa
1 parent 19eab39
commit 8654faa
Showing 1 changed file with 28 additions and 2 deletions.
diff --git a/client/src/pages/(secure)/index.tsx b/client/src/pages/(secure)/index.tsx
@@ -45,8 +45,34 @@ export default function Index() {
               </p>
             </div>
           </div>
-          <div className="aspect-video rounded-xl bg-muted/50" />
-          <div className="aspect-video rounded-xl bg-muted/50" />
+          <div className="rounded-xl border bg-card text-card-foreground shadow">
+            <div className="p-6 flex flex-row items-center justify-between space-y-0 pb-2">
+              <h3 className="tracking-tight text-sm font-medium">Total Income</h3>
+            </div>
+            <div className="p-6 pt-0">
+              <div className="text-2xl font-bold">
+                {' '}
+                {activeAccount?.Income}
+              </div>
+              <p className="text-xs text-muted-foreground">
+                +20.1% from last month
+              </p>
+            </div>
+          </div>
+         <div className="rounded-xl border bg-card text-card-foreground shadow">
+            <div className="p-6 flex flex-row items-center justify-between space-y-0 pb-2">
+              <h3 className="tracking-tight text-sm font-medium">Total Expenses</h3>
+            </div>
+            <div className="p-6 pt-0">
+              <div className="text-2xl font-bold">
+                {' '}
+                {activeAccount?.Expense}
+              </div>
+              <p className="text-xs text-muted-foreground">
+                +20.1% from last month
+              </p>
+            </div>
+          </div>
           <div className="aspect-video rounded-xl bg-muted/50" />
         </div>
         <div className="grid auto-rows-min gap-4 md:grid-cols-2">