awesome ui changes and expense split restructured

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

@@ -1,9 +1,12 @@
 import Header from "@/components/header";
+import Section from "@/components/section";
 import { Button } from "@/components/ui/button";
+import { api } from "@/trpc/server";
 import Link from "next/link";
 import React from "react";
 
-export default function Page() {
+export default async function Page() {
+  const splits = await api.expense.getAll();
   return (
     <>
       <Header text="Expenses">
@@ -11,6 +14,14 @@ export default function Page() {
           <Link href="/add">Add Expense</Link>
         </Button>
       </Header>
+      <Section>
+        {splits.map(({ expense }) => (
+          <div key={expense.id}>
+            <h2>{expense.description}</h2>
+            <p>{expense.amount}</p>
+          </div>
+        ))}
+      </Section>
     </>
   );
 }