final before merge

apps/www/src/app/(dashboard)/dashboard/layout.tsx

@@ -27,7 +27,7 @@ export default async function DashboardLayout({
     ...dashboardConfig.sidebarNav,
     ...userBankAccounts.map((account) => ({
       title: account.name,
-      href: `/dashboard/accounts/${account.id}`, // Use ID to create the URL
+      href: `/dashboard/banking/${account.id}`, // Use ID to create the URL
     })),
   ];
 

apps/www/src/app/(dashboard)/dashboard/page.tsx

@@ -14,6 +14,8 @@ import { AddAssetFlow } from "@/components/modals/add-asset-flow";
 import { EmptyPlaceholder } from "@/components/shared/empty-placeholder";
 import TransactionsToReview from "@/components/tables/TransactionsToReview";
 
+import { AssetVsDebt } from "../../../components/charts/AssetVsDebt";
+
 export const metadata = {
   title: "Dashboard",
   description:
@@ -32,30 +34,28 @@ export default async function DashboardPage() {
   return (
     <DashboardShell>
       <DashboardHeader heading="Dashboard" text="Your analytics dashboard">
-        <AddAccountSheet currentPath={undefined} />
+        <AddAccountSheet currentPath="/dashboard" />
       </DashboardHeader>
       <div>
         {transactions.length === 0 ? (
           // Render EmptyPlaceholder if there are no transactions
           <EmptyPlaceholder>
             <EmptyPlaceholder.Icon name="post" />
             <EmptyPlaceholder.Title>
-              You have no transactions
+              You have no accounts
             </EmptyPlaceholder.Title>
             <EmptyPlaceholder.Description>
-              Let's start with importing some transactions
+              Let's start with adding some accounts
             </EmptyPlaceholder.Description>
-            <AddButton triggerLabel="Add Asset">
-              <AddAssetFlow />
-            </AddButton>
+            <AddAccountSheet currentPath="/dashboard" />
           </EmptyPlaceholder>
         ) : (
           // Render TransactionsTable if there are transactions
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <BudgetVsCostChart />
+          <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
             <BudgetVsCostChart />
-            <div className="col-span-1 md:col-span-2">
-              <TransactionsToReview transactions={reviewTransactions} />
+            <AssetVsDebt />
+
+            <div className="col-span-1 lg:col-span-2">
               <TransactionsToReview transactions={reviewTransactions} />
             </div>
           </div>

apps/www/src/components/buttons/AddAccountSheeet.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useRouter } from "next/navigation";
 import { createNewAccount } from "@/actions/create-new-account";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
@@ -51,6 +52,7 @@ const createAccountSchema = z.object({
 type CreateAccount = z.infer<typeof createAccountSchema>;
 
 export function AddAccountSheet({ currentPath }) {
+  const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
 
@@ -75,6 +77,7 @@ export function AddAccountSheet({ currentPath }) {
       toast.success(`Account "${data.name}" is added.`);
       form.reset();
       setIsOpen(false); // Close the sheet on success
+      router.push(`/dashboard/banking/${result.account?.id}`);
     } catch (error) {
       toast.error(error.message);
       console.error(error);

apps/www/src/components/charts/AssetVsDebt.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import Link from "next/link";
+import { ArrowUpRight, TrendingUp } from "lucide-react";
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts";
+
+import { Button } from "@dingify/ui/components/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@dingify/ui/components/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@dingify/ui/components/chart";
+
+const chartData = [
+  { month: "January", asset: 186, debt: 80 },
+  { month: "February", asset: 305, debt: 200 },
+  { month: "March", asset: 237, debt: 120 },
+  { month: "April", asset: 73, debt: 190 },
+  { month: "May", asset: 209, debt: 130 },
+  { month: "June", asset: 214, debt: 140 },
+];
+
+const chartConfig = {
+  asset: {
+    label: "Asset",
+    color: "hsl(var(--chart-1))",
+  },
+  debt: {
+    label: "Debt",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig;
+
+export function AssetVsDebt() {
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center">
+        <div className="grid gap-2">
+          <CardTitle>Asset vs Debt</CardTitle>
+          <CardDescription>Do you have more Asset vs debt?</CardDescription>
+        </div>
+        <Button
+          asChild
+          variant="ghost"
+          size="sm"
+          className="ml-auto gap-1 text-sm text-muted-foreground"
+        >
+          <Link href="/dashboard/banking">
+            <span className="flex items-center">
+              Banking
+              <ArrowUpRight className="ml-1 h-4 w-4" />
+            </span>
+          </Link>
+        </Button>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <Line
+              dataKey="asset"
+              type="monotone"
+              stroke="var(--color-asset)"
+              strokeWidth={2}
+              dot={false}
+            />
+            <Line
+              dataKey="debt"
+              type="monotone"
+              stroke="var(--color-debt)"
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+            </div>
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+              Your getting more assets vs debt
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  );
+}

apps/www/src/config/dashboard.ts

@@ -27,26 +27,31 @@ export const dashboardConfig: DashboardConfig = {
       href: "/dashboard/categories",
       title: "Categories",
       icon: "piechart",
+      disabled: true,
     },
     {
       href: "/investment",
       title: "Investments",
       icon: "BarChart",
+      disabled: true,
     },
     {
       href: "/assets",
       title: "Assets",
       icon: "Building",
+      disabled: true,
     },
     {
       href: "/savings",
       title: "Savings",
       icon: "Sprout",
+      disabled: true,
     },
     {
       href: "/liabilities",
       title: "Liabilities",
       icon: "CreditCard",
+      disabled: true,
     },
   ],
 };