categories done

Codehagen · Jan 18, 2024 · b804d31 · b804d31
1 parent bd7b1cb
commit b804d31
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 38 deletions.
diff --git a/components/accounts/components/accounts-dashboard.tsx b/components/accounts/components/accounts-dashboard.tsx
@@ -131,7 +131,7 @@ export function AccountsDashboard({
                 label: "",
                 icon: Tag,
                 variant: "ghost",
-                link: "/dashboard/",
+                link: "/dashboard/categories",
               },
               {
                 title: "Recurring",

diff --git a/components/categories/components/categories-display.tsx b/components/categories/components/categories-display.tsx
@@ -251,10 +251,10 @@ export function CategoriesDisplay({ mail }: MailDisplayProps) {
             {/* Left section with avatar and text */}
             <div className="flex items-center gap-4">
               <Avatar>
-                <AvatarImage
+                {/* <AvatarImage
                   src="/path-to-your-avatar-image.png"
                   alt={mail.name}
-                />
+                /> */}
                 <AvatarFallback delayMs={600}>
                   {mail.name
                     .split(" ")
@@ -275,20 +275,21 @@ export function CategoriesDisplay({ mail }: MailDisplayProps) {
             {/* Right section with badge */}
             {mail.date && (
               <div className="flex flex-col items-end">
-                <Badge
+                {/* <Badge
                   variant={mail.change >= 0 ? "default" : "destructive"}
                   className="self-end"
                 >
                   {mail.change >= 0
                     ? `▲ ${mail.change.toFixed(2)}%`
                     : `▼ ${Math.abs(mail.change).toFixed(2)}%`}
-                </Badge>
+                </Badge> */}
+                <div className="text-m -mb-2 font-semibold">Spent so far</div>
                 <div className="mt-2 flex items-baseline">
                   <span className="text-m font-semibold">
                     {formatCurrency(mail.income as number)}
                   </span>
                 </div>
-                Updated at 23:03
+                <div className="mt-1 text-sm text-gray-500">$1,240.00 over</div>
               </div>
             )}
           </div>

diff --git a/components/categories/components/key-metrics-table.tsx b/components/categories/components/key-metrics-table.tsx
@@ -1,8 +1,6 @@
 "use client";
 
 import * as React from "react";
-import Image from "next/image";
-import { BoltIcon } from "@heroicons/react/20/solid";
 import {
   ColumnDef,
   ColumnFiltersState,

diff --git a/components/categories/components/total-balance-card.tsx b/components/categories/components/total-balance-card.tsx
@@ -18,36 +18,51 @@ export function SpentSoFarCard() {
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
           <CardTitle className="text-base font-normal">Spent so far</CardTitle>
+          <CardTitle className="text-base font-normal">
+            Total budget
+          </CardTitle>{" "}
         </CardHeader>
-        <CardContent>
-          <div className="text-2xl font-bold">$10,241 </div>
-          <p className="text-xs text-muted-foreground">
-            You have left $1.248 to spend
-          </p>
-          <div className="h-[200px]">
-            <ResponsiveContainer width="100%" height="100%">
-              <PieChart>
-                <Pie
-                  data={data}
-                  cx="50%"
-                  cy="50%"
-                  innerRadius={60}
-                  outerRadius={80}
-                  fill="#8884d8"
-                  dataKey="value"
-                  paddingAngle={5}
-                >
-                  {data.map((entry, index) => (
-                    <Cell
-                      key={`cell-${index}`}
-                      fill={COLORS[index % COLORS.length]}
-                    />
-                  ))}
-                </Pie>
-              </PieChart>
-            </ResponsiveContainer>
+        <CardContent className="flex justify-between">
+          {/* Left side details */}
+          <div>
+            <div className="text-2xl font-bold">$10,241</div>
+            <p className="text-xs text-muted-foreground">
+              You have left $1,248 to spend
+            </p>
+          </div>
+
+          {/* Right side details */}
+          <div>
+            <div className="text-right text-2xl font-bold">$15,000</div>{" "}
+            {/* Assuming this is the total budget */}
+            <p className="text-right text-xs text-muted-foreground">
+              Your total budget
+            </p>
           </div>
         </CardContent>
+        <div className="h-[200px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <PieChart>
+              <Pie
+                data={data}
+                cx="50%"
+                cy="50%"
+                innerRadius={60}
+                outerRadius={80}
+                fill="#8884d8"
+                dataKey="value"
+                paddingAngle={5}
+              >
+                {data.map((entry, index) => (
+                  <Cell
+                    key={`cell-${index}`}
+                    fill={COLORS[index % COLORS.length]}
+                  />
+                ))}
+              </Pie>
+            </PieChart>
+          </ResponsiveContainer>
+        </div>
       </Card>
     </div>
   );

diff --git a/components/investments/components/investment-dashboard.tsx b/components/investments/components/investment-dashboard.tsx
@@ -137,7 +137,7 @@ export function InvestmentsDashboard({
                 label: "",
                 icon: Tag,
                 variant: "ghost",
-                link: "/dashboard/",
+                link: "/dashboard/categories",
               },
               {
                 title: "Recurring",

diff --git a/components/new-dashboard/components/dashboard-1.tsx b/components/new-dashboard/components/dashboard-1.tsx
@@ -136,7 +136,7 @@ export function Dashboard({
                 label: "",
                 icon: Tag,
                 variant: "ghost",
-                link: "/dashboard/",
+                link: "/dashboard/categories",
               },
               {
                 title: "Recurring",

diff --git a/components/transactions/components/transactions-dashboard.tsx b/components/transactions/components/transactions-dashboard.tsx
@@ -131,7 +131,7 @@ export function TransactionsDashboard({
                 label: "",
                 icon: Tag,
                 variant: "ghost",
-                link: "/dashboard/",
+                link: "/dashboard/categories",
               },
               {
                 title: "Recurring",