app/dashboard/expenses/page.tsx

@@ -1,7 +1,7 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
 import { lusitana } from '@/app/ui/fonts';
-import ExpenseSummary from '@/app/ui/expenses/summary';
+import ExpensesTable from '@/app/ui/expenses/table';
  
 export default  function Page () {
   return (
@@ -9,7 +9,7 @@ export default  function Page () {
       <div className="w-full items-center justify-between">
         <h1 className={`${lusitana.className} text-2xl`}>Expenses</h1>
         <h2 className={`${lusitana.className} text-xl`}>Summary</h2>
-        <ExpenseSummary />
+        <ExpensesTable />
       </div>
     </div>
   );

app/dashboard/page.tsx

@@ -1,5 +1,9 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
+import GlobalSummary from '@/app/ui/dashboard/global-summary';
+
 export default function Page() {
-  return <p>Dashboard Page</p>;
+  return(
+    <GlobalSummary />
+  );
 }

app/lib/definitions.ts

@@ -26,6 +26,13 @@ export type Guest = {
   status?: 'Considered' | 'Invited' | 'Confirmed' | 'Declined' | 'Tentative';
 }
 
+export type Expense = {
+  id: string;
+  name: string;
+  amount: number;
+  pricingType: 'fixed' | 'per person';
+};
+
 export type TableArrangement = {
   id: string;
   number: number;

app/ui/dashboard/global-summary.tsx

@@ -2,7 +2,7 @@
 
 import { MainCard, SecondaryCard } from '../components/dashboard-cards';
 
-export default async function ExpenseSummary() {
+export default async function GlobalSummary() {
     return (
         <div className="my-4">
 

app/ui/expenses/table.tsx

@@ -0,0 +1,51 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+'use client'
+
+import React, { useState } from "react"
+import { Expense } from '@/app/lib/definitions';
+import TableOfContents from "../components/table-of-contents";
+
+export default function ExpensesTable() {
+    const [expenses, setExpenses] = useState<Array<Expense>>([]);
+
+    function loadExpenses() {
+        fetch("/api/expenses")
+            .then((response) => response.json())
+            .then((data) => {
+                setExpenses(data.map((record: any) => {
+                    return ({
+                        id: record.id,
+                        name: record.name,
+                        amount: record.amount,
+                        pricingType: record.pricing_type
+                    });
+                }));
+            }, (error) => {
+                return [];
+            });
+    }
+
+    expenses.length === 0 && loadExpenses();
+
+    return (
+        <TableOfContents
+            headers={['Name', 'Amount', 'Pricing Type']}
+            caption='Expenses'
+            elements={expenses}
+            rowRender={(expense) => (
+                <tr key={expense.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
+                    <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                        {expense.name}
+                    </th>
+                    <td className="px-6 py-4">
+                        {expense.amount}€
+                    </td>
+                    <td>
+                        {expense.pricingType}
+                    </td>
+                </tr>
+            )}
+        />
+    );
+}