updateEE

src/app/(router)/expense/page.tsx

@@ -1,14 +1,17 @@
 import ExpenseCard from "@/app/_components/expense/expense-card";
 import Header from "@/components/header";
+import { Icons } from "@/components/icons";
 import Section from "@/components/section";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import { api } from "@/trpc/server";
+import { currentUser } from "@clerk/nextjs/server";
 import Link from "next/link";
 import React from "react";
 
 export default async function Page() {
   const splits = await api.expense.getAll();
-
+  const sessionUser = await currentUser();
   return (
     <>
       <Header text="Expenses">
@@ -17,14 +20,42 @@ export default async function Page() {
         </Button>
       </Header>
       <Section>
-        <div className="p-4 rounded-md flex items-center justify-center text-muted-foreground bg-card/25">
-          Expense Stats
+        {/* STATS */}
+        {/* <div className=" rounded-md flex items-center h-20  bg-card/25">
+          <div className="p-4 space-y-1 text-center w-full">
+            <h4 className="text-muted-foreground text-sm">Expenses</h4>
+            <span className="text-xl font-bold">{splits.length}</span>
+          </div>
+          <Separator orientation="vertical" />
+          <div className="p-4 space-y-1 text-center w-full">
+            <h4 className="text-muted-foreground text-sm">Expenses</h4>
+            <span className="text-xl font-bold">{splits.length}</span>
+          </div>
+          <Separator orientation="vertical" />
+          <div className="p-4 space-y-1 text-center w-full">
+            <h4 className="text-muted-foreground text-sm ">Balance</h4>
+            <span className="text-xl font-bold text-success">
+              {getAmount(812.47)}
+            </span>
+          </div>
+        </div> */}
+
+        {/* FILTER BAR */}
+        <div className="py-4 flex items-center gap-2">
+          <Button
+            size={"icon"}
+            variant={"outline"}
+            className="text-muted-foreground bg-card/25"
+          >
+            <Icons.filter className="size-6 " />
+          </Button>
+          <Input placeholder="Search..." />
         </div>
 
         <ul className="space-y-4">
           {splits.map((expense) => (
             <li key={expense.id}>
-              <ExpenseCard expense={expense} />
+              <ExpenseCard expense={expense} sessionUserId={sessionUser?.id!} />
             </li>
           ))}
         </ul>