Allow inline editing of guest name

Reviewed-on: #92

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>
+            )}
+        />
+    );
+}

package.json

@@ -13,7 +13,7 @@
     "clsx": "^2.1.1",
     "next": "15.0.3",
     "next-auth": "5.0.0-beta.25",
-    "postcss": "8.4.47",
+    "postcss": "8.4.48",
     "primeicons": "^7.0.0",
     "primereact": "^10.8.2",
     "react": "19.0.0-rc-f38c22b244-20240704",

pnpm-lock.yaml

@@ -16,7 +16,7 @@ importers:
         version: 0.5.9(tailwindcss@3.4.14)
       autoprefixer:
         specifier: 10.4.20
-        version: 10.4.20(postcss@8.4.47)
+        version: 10.4.20(postcss@8.4.48)
       bcrypt:
         specifier: ^5.1.1
         version: 5.1.1
@@ -30,8 +30,8 @@ importers:
         specifier: 5.0.0-beta.25
         version: 5.0.0-beta.25(next@15.0.3(@playwright/test@1.48.2)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
       postcss:
-        specifier: 8.4.47
+        specifier: 8.4.48
-        version: 8.4.47
+        version: 8.4.48
       primeicons:
         specifier: ^7.0.0
         version: 7.0.0
@@ -827,6 +827,9 @@ packages:
   picocolors@1.1.0:
     resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==}
 
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
   picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
@@ -890,8 +893,8 @@ packages:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
 
-  postcss@8.4.47:
+  postcss@8.4.48:
-    resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==}
+    resolution: {integrity: sha512-GCRK8F6+Dl7xYniR5a4FYbpBzU8XnZVeowqsQFYdcXuSbChgiks7qybSkbvnaeqv0G0B+dd9/jJgH8kkLDQeEA==}
     engines: {node: ^10 || ^12 || >=14}
 
   preact-render-to-string@5.2.3:
@@ -1415,14 +1418,14 @@ snapshots:
 
   arg@5.0.2: {}
 
-  autoprefixer@10.4.20(postcss@8.4.47):
+  autoprefixer@10.4.20(postcss@8.4.48):
     dependencies:
       browserslist: 4.23.3
       caniuse-lite: 1.0.30001651
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.0.1
-      postcss: 8.4.47
+      postcss: 8.4.48
       postcss-value-parser: 4.2.0
 
   balanced-match@1.0.2: {}
@@ -1815,6 +1818,8 @@ snapshots:
 
   picocolors@1.1.0: {}
 
+  picocolors@1.1.1: {}
+
   picomatch@2.3.1: {}
 
   pify@2.3.0: {}
@@ -1829,28 +1834,28 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.2
 
-  postcss-import@15.1.0(postcss@8.4.47):
+  postcss-import@15.1.0(postcss@8.4.48):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.48
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.8
 
-  postcss-js@4.0.1(postcss@8.4.47):
+  postcss-js@4.0.1(postcss@8.4.48):
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.4.47
+      postcss: 8.4.48
 
-  postcss-load-config@4.0.2(postcss@8.4.47):
+  postcss-load-config@4.0.2(postcss@8.4.48):
     dependencies:
       lilconfig: 3.1.1
       yaml: 2.4.3
     optionalDependencies:
-      postcss: 8.4.47
+      postcss: 8.4.48
 
-  postcss-nested@6.0.1(postcss@8.4.47):
+  postcss-nested@6.0.1(postcss@8.4.48):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.48
       postcss-selector-parser: 6.1.0
 
   postcss-selector-parser@6.1.0:
@@ -1866,10 +1871,10 @@ snapshots:
       picocolors: 1.1.0
       source-map-js: 1.2.1
 
-  postcss@8.4.47:
+  postcss@8.4.48:
     dependencies:
       nanoid: 3.3.7
-      picocolors: 1.1.0
+      picocolors: 1.1.1
       source-map-js: 1.2.1
 
   preact-render-to-string@5.2.3(preact@10.11.3):
@@ -2066,11 +2071,11 @@ snapshots:
       normalize-path: 3.0.0
       object-hash: 3.0.0
       picocolors: 1.1.0
-      postcss: 8.4.47
+      postcss: 8.4.48
-      postcss-import: 15.1.0(postcss@8.4.47)
+      postcss-import: 15.1.0(postcss@8.4.48)
-      postcss-js: 4.0.1(postcss@8.4.47)
+      postcss-js: 4.0.1(postcss@8.4.48)
-      postcss-load-config: 4.0.2(postcss@8.4.47)
+      postcss-load-config: 4.0.2(postcss@8.4.48)
-      postcss-nested: 6.0.1(postcss@8.4.47)
+      postcss-nested: 6.0.1(postcss@8.4.48)
       postcss-selector-parser: 6.1.0
       resolve: 1.22.8
       sucrase: 3.35.0
@@ -2112,7 +2117,7 @@ snapshots:
     dependencies:
       browserslist: 4.23.3
       escalade: 3.1.2
-      picocolors: 1.0.1
+      picocolors: 1.1.0
 
   use-debounce@10.0.4(react@19.0.0-rc-f38c22b244-20240704):
     dependencies: