Update dependency @types/react-dom to v18.3.4

Reviewed-on: #147

app/[slug]/dashboard/expenses/page.tsx

@@ -1,15 +1,44 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
-import { lusitana } from '@/app/ui/fonts';
-import ExpensesTable from '@/app/ui/expenses/table';
+'use client'
+
+import { AbstractApi } from '@/app/api/abstract-api';
+import { Expense, ExpenseSerializer } from '@/app/lib/expense';
+import { classNames } from '@/app/ui/components/button';
+import ExpenseFormDialog from '@/app/ui/components/expense-form-dialog';
+import ExpensesTable from '@/app/ui/expenses/table';
+import SkeletonTable from '@/app/ui/guests/skeleton-row';
+import { Suspense, useEffect, useState } from 'react';
+
+export default function Page() {
+  const refreshExpenses = () => {
+    new AbstractApi<Expense>().getAll(new ExpenseSerializer(), (expenses: Expense[]) => {
+      setExpenses(expenses);
+    });
+  }
+
+  const [expenses, setExpenses] = useState<Expense[]>([]);
+  const [expenseBeingEdited, setExpenseBeingEdited] = useState<Expense | undefined>(undefined);
+  useEffect(() => { refreshExpenses() }, []);
 
-export default  function Page () {
   return (
     <div className="w-full">
-      <div className="w-full items-center justify-between">
-        <h1 className={`${lusitana.className} text-2xl`}>Expenses</h1>
-        <h2 className={`${lusitana.className} text-xl`}>Summary</h2>
-        <ExpensesTable />
+      <div className="flex flex-col w-full items-center justify-between">
+        <button onClick={() => setExpenseBeingEdited({})} className={classNames('primary')}>Add new</button>
+        <ExpenseFormDialog
+          key={expenseBeingEdited?.id}
+          onCreate={() => { refreshExpenses(); setExpenseBeingEdited(undefined) }}
+          expense={expenseBeingEdited}
+          visible={expenseBeingEdited !== undefined}
+          onHide={() => { setExpenseBeingEdited(undefined) }}
+        />
+        <Suspense fallback={<SkeletonTable />}>
+          <ExpensesTable
+            expenses={expenses}
+            onUpdate={refreshExpenses}
+            onEdit={(expense) => setExpenseBeingEdited(expense)}
+          />
+        </Suspense>
       </div>
     </div>
   );

app/[slug]/dashboard/guests/page.tsx

@@ -2,30 +2,30 @@
 
 'use client';
 
-import { loadGroups } from '@/app/api/groups';
-import { loadGuests } from '@/app/api/guests';
-import { Group, Guest } from '@/app/lib/definitions';
+import { AbstractApi,  } from '@/app/api/abstract-api';
+import { Guest, GuestSerializer } from '@/app/lib/guest';
 import { classNames } from '@/app/ui/components/button';
-import GuestFormDialog from '@/app/ui/components/guest-form-dialog';
 import GroupFormDialog from '@/app/ui/components/group-form-dialog';
+import GuestFormDialog from '@/app/ui/components/guest-form-dialog';
 import GroupsTable from '@/app/ui/groups/table';
 import SkeletonTable from '@/app/ui/guests/skeleton-row';
 import GuestsTable from '@/app/ui/guests/table';
 import { TabPanel, TabView } from 'primereact/tabview';
 import { Suspense, useState } from 'react';
+import { Group, GroupSerializer } from '@/app/lib/group';
 
 
 export default function Page() {
   function refreshGuests() {
-    loadGuests((guests) => {
-      setGuests(guests);
+    new AbstractApi<Guest>().getAll(new GuestSerializer(), (objects: Guest[]) => {
+      setGuests(objects);
       setGuestsLoaded(true);
     });
   }
 
   function refreshGroups() {
-    loadGroups((groups) => {
-      setGroups(groups);
+    new AbstractApi<Group>().getAll(new GroupSerializer(), (objects: Group[]) => {
+      setGroups(objects);
       setGroupsLoaded(true);
     });
   }

app/api/abstract-api.tsx

@@ -0,0 +1,65 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import { Entity } from '@/app/lib/definitions';
+import { getCsrfToken, getSlug } from '@/app/lib/utils';
+
+export interface Api<T extends Entity> {
+  getAll(serializable: Serializable<T> ,callback: (objets: T[]) => void): void;
+  create(serializable: Serializable<T>, object: T, callback: () => void): void;
+  update(serializable: Serializable<T>, object: T, callback: () => void): void;
+  destroy(serializable: Serializable<T>, object: T, callback: () => void): void;
+}
+
+export interface Serializable<T> {
+  fromJson(json: any): T;
+  toJson(object: T): string;
+  apiPath(): string;
+}
+
+export class AbstractApi<T extends Entity> implements Api<T> {
+  getAll(serializable: Serializable<T>, callback: (objets: T[]) => void): void {
+    fetch(`/api/${getSlug()}/${serializable.apiPath()}`)
+      .then((response) => response.json())
+      .then((data) => {
+        callback(data.map((record: any) => {
+          return serializable.fromJson(record);
+        }));
+      }, (error) => {
+        return [];
+      });
+  }
+
+  update(serializable: Serializable<T>, object: T, callback: () => void): void {
+    fetch(`/api/${getSlug()}/${serializable.apiPath()}/${object.id}`, {
+      method: 'PUT',
+      body: serializable.toJson(object),
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-TOKEN': getCsrfToken(),
+      }
+    }).then(callback)
+      .catch((error) => console.error(error));
+  }
+
+  create(serializable: Serializable<T>, object: T, callback: () => void): void {
+    fetch(`/api/${getSlug()}/${serializable.apiPath()}`, {
+      method: 'POST',
+      body: serializable.toJson(object),
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-TOKEN': getCsrfToken(),
+      }
+    }).then(callback)
+      .catch((error) => console.error(error));
+  }
+
+  destroy(serializable: Serializable<T>, object: T, callback: () => void): void {
+    fetch(`/api/${getSlug()}/${serializable.apiPath()}/${object.id}`, {
+      method: 'DELETE',
+      headers: {
+        'X-CSRF-TOKEN': getCsrfToken(),
+      }
+    }).then(callback)
+      .catch((error) => console.error(error));
+  }
+}

app/api/expenses.tsx

@@ -1,40 +0,0 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
-
-import { Expense } from '@/app/lib/definitions';
-import { getCsrfToken, getSlug } from '@/app/lib/utils';
-
-export function loadExpenses(onLoad?: (expenses: Expense[]) => void) {
-  fetch(`/api/${getSlug()}/expenses`)
-    .then((response) => response.json())
-    .then((data) => {
-      onLoad && onLoad(data.map((record: any) => {
-        return ({
-          id: record.id,
-          name: record.name,
-          amount: record.amount,
-          pricingType: record.pricing_type
-        });
-      }));
-    }, (error) => {
-      return [];
-    });
-}
-
-export function updateExpense(expense: Expense) {
-  fetch(`/api/${getSlug()}/expenses/${expense.id}`,
-    {
-      method: 'PUT',
-      body: JSON.stringify({
-        expense: {
-          name: expense.name,
-          amount: expense.amount,
-          pricing_type: expense.pricingType,
-        }
-      }),
-      headers: {
-        'Content-Type': 'application/json',
-        'X-CSRF-TOKEN': getCsrfToken(),
-      }
-    })
-    .catch((error) => console.error(error));
-}

app/api/groups.tsx

@@ -1,81 +0,0 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
-
-import { Group } from '@/app/lib/definitions';
-import { getCsrfToken, getSlug } from '../lib/utils';
-
-export function loadGroups(onLoad?: (groups: Group[]) => void) {
-  fetch(`/api/${getSlug()}/groups`)
-    .then((response) => response.json())
-    .then((data) => {
-      onLoad && onLoad(data.map((record: any) => {
-        return ({
-          id: record.id,
-          name: record.name,
-          color: record.color,
-          attendance: {
-            considered: record.considered,
-            invited: record.invited,
-            confirmed: record.confirmed,
-            tentative: record.tentative,
-            declined: record.declined,
-            total: record.total,
-          }
-        });
-      }));
-    }, (error) => {
-      return [];
-    });
-}
-
-export function updateGroup(group: Group) {
-  return fetch(`/api/${getSlug()}/groups/${group.id}`,
-    {
-      method: 'PUT',
-      body: JSON.stringify({ group: { 
-        name: group.name, 
-        color: group.color, 
-        icon: group.icon,
-        parent_id: group.parentId
-       } }),
-      headers: {
-        'Content-Type': 'application/json',
-        'X-CSRF-TOKEN': getCsrfToken(),
-      }
-    })
-    .catch((error) => console.error(error));
-}
-
-export function createGroup(group: Group, onCreate?: () => void) {
-  fetch(`/api/${getSlug()}/groups`, {
-    method: 'POST',
-    body: JSON.stringify({ 
-      name: group.name, 
-      color: group.color, 
-      icon: group.icon,
-      parent_id: group.parentId
-     }),
-    headers: {
-      'Content-Type': 'application/json',
-      'X-CSRF-TOKEN': getCsrfToken(),
-    }
-  })
-    .then((response) => response.json())
-    .then((data) => {
-      onCreate && onCreate();
-    })
-    .catch((error) => console.error(error));
-}
-
-export function destroyGroup(group: Group, onDestroy?: () => void) {
-  fetch(`/api/${getSlug()}/groups/${group.id}`, {
-    method: 'DELETE',
-    headers: {
-      'X-CSRF-TOKEN': getCsrfToken(),
-    }
-  })
-    .then((response) => response.json())
-    .then((data) => {
-      onDestroy && onDestroy();
-    })
-    .catch((error) => console.error(error));
-}

app/api/guests.tsx

@@ -1,65 +0,0 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
-
-import { Guest } from '@/app/lib/definitions';
-import { getCsrfToken, getSlug } from '@/app/lib/utils';
-
-export function loadGuests(onLoad?: (guests: Guest[]) => void) {
-  fetch(`/api/${getSlug()}/guests`)
-    .then((response) => response.json())
-    .then((data) => {
-      onLoad && onLoad(data.map((record: any) => {
-        return ({
-          id: record.id,
-          name: record.name,
-          status: record.status,
-          group_name: record.group.name,
-          groupId: record.group.id,
-        });
-      }));
-    }, (error) => {
-      return [];
-    });
-};
-
-export function updateGuest(guest: Guest) {
-  return fetch(`/api/${getSlug()}/guests/${guest.id}`,
-    {
-      method: 'PUT',
-      body: JSON.stringify({ guest: { name: guest.name, status: guest.status, group_id: guest.groupId } }),
-      headers: {
-        'Content-Type': 'application/json',
-        'X-CSRF-TOKEN': getCsrfToken(),
-      }
-    })
-    .catch((error) => console.error(error));
-}
-
-export function createGuest(guest: Guest, onCreate?: () => void) {
-  fetch(`/api/${getSlug()}/guests`, {
-    method: 'POST',
-    body: JSON.stringify({ name: guest.name, group_id: guest.groupId, status: guest.status }),
-    headers: {
-      'Content-Type': 'application/json',
-      'X-CSRF-TOKEN': getCsrfToken(),
-    }
-  })
-    .then((response) => response.json())
-    .then((data) => {
-      onCreate && onCreate();
-    })
-    .catch((error) => console.error(error));
-}
-
-export function destroyGuest(guest: Guest, onDestroy?: () => void) {
-  fetch(`/api/${getSlug()}/guests/${guest.id}`, {
-    method: 'DELETE',
-    headers: {
-      'X-CSRF-TOKEN': getCsrfToken(),
-    }
-  })
-    .then((response) => response.json())
-    .then((data) => {
-      onDestroy && onDestroy();
-    })
-    .catch((error) => console.error(error));
-}

app/lib/definitions.ts

@@ -1,28 +1,11 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
-// This file contains type definitions for your data.
-// It describes the shape of the data, and what data type each property should accept.
-// For simplicity of teaching, we're manually defining these types.
-// However, these types are generated automatically if you're using an ORM such as Prisma.
+import { Guest } from "./guest";
 
-export const guestStatuses = ['considered', 'invited', 'confirmed', 'declined', 'tentative'] as const;
-export type GuestStatus = typeof guestStatuses[number];
-export type Guest = {
+export interface Entity {
   id?: string;
-  name?: string;
-  group_name?: string;
-  groupId?: string;
-  color?: string;
-  status?: GuestStatus
 }
 
-export type Expense = {
-  id: string;
-  name: string;
-  amount: number;
-  pricingType: 'fixed' | 'per person';
-};
-
 export type TableArrangement = {
   id: string;
   number: number;
@@ -31,26 +14,6 @@ export type TableArrangement = {
   discomfort?: number
 }
 
-export type Group = {
-  id?: string;
-  name?: string;
-  guest_count?: number;
-  icon?: string;
-  children?: Group[];
-  parentId?: string;
-  color?: string;
-  attendance?: AttendanceSummary
-};
-
-export type AttendanceSummary = {
-  considered: number;
-  invited: number;
-  confirmed: number;
-  declined: number;
-  tentative: number;
-  total: number;
-}
-
 export type guestsTable = {
   id: string;
   customer_id: string;
@@ -73,5 +36,5 @@ export type Captcha = {
 }
 
 export type StructuredErrors = {
-  [key: string]: string[]|string;
+  [key: string]: string[] | string;
 };

app/lib/expense.tsx

@@ -0,0 +1,41 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import { Serializable } from "../api/abstract-api";
+import { Entity } from "./definitions";
+
+export const pricingTypes = ['fixed', 'per_person'] as const;
+export type PricingType = typeof pricingTypes[number];
+
+export class Expense implements Entity {
+  id?: string;
+  name?: string;
+  amount?: number;
+  pricingType?: PricingType;
+
+  constructor(id?: string, name?: string, amount?: number, pricingType?: PricingType) {
+    this.id = id;
+    this.name = name || '';
+    this.amount = amount || 0;
+    this.pricingType = pricingType || 'fixed';
+  }
+}
+
+export class ExpenseSerializer implements Serializable<Expense>{
+  fromJson(data: any): Expense {
+    return new Expense(data.id, data.name, data.amount, data.pricing_type);
+  }
+
+  toJson(expense: Expense): string {
+    return JSON.stringify({
+      expense: {
+        name: expense.name,
+        amount: expense.amount,
+        pricing_type: expense.pricingType
+      }
+    });
+  }
+
+  apiPath(): string {
+    return 'expenses';
+  }
+}

app/lib/group.tsx

@@ -0,0 +1,64 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import { Entity } from "./definitions";
+
+export type AttendanceSummary = {
+  considered: number;
+  invited: number;
+  confirmed: number;
+  declined: number;
+  tentative: number;
+  total: number;
+}
+
+export class Group implements Entity {
+  id?: string;
+  name?: string;
+  guest_count?: number;
+  icon?: string;
+  children?: Group[];
+  parentId?: string;
+  color?: string;
+  attendance?: AttendanceSummary
+
+  constructor(id?: string, name?: string, guest_count?: number, icon?: string, children?: Group[], parentId?: string, color?: string, attendance?: AttendanceSummary) {
+    this.id = id;
+    this.name = name;
+    this.guest_count = guest_count;
+    this.icon = icon;
+    this.children = children;
+    this.parentId = parentId;
+    this.color = color;
+    this.attendance = attendance;
+  }
+}
+
+export class GroupSerializer {
+  fromJson(data: any): Group {
+    return new Group(
+      data.id,
+      data.name,
+      data.guest_count,
+      data.icon,
+      data.children,
+      data.parent_id,
+      data.color,
+      data.attendance
+    );
+  }
+
+  toJson(group: Group): string {
+    return JSON.stringify({
+      group: {
+        name: group.name,
+        color: group.color,
+        icon: group.icon,
+        parent_id: group.parentId
+      }
+    });
+  }
+
+  apiPath(): string {
+    return 'groups';
+  }
+}

app/lib/guest.tsx

@@ -0,0 +1,42 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import { Serializable } from "../api/abstract-api";
+import { Entity } from "./definitions";
+
+export const guestStatuses = ['considered', 'invited', 'confirmed', 'declined', 'tentative'] as const;
+export type GuestStatus = typeof guestStatuses[number];
+
+export class Guest implements Entity {
+  id?: string;
+  name?: string;
+  group_name?: string;
+  groupId?: string;
+  color?: string;
+  status?: GuestStatus;
+  children?: Guest[];
+
+  constructor(id?: string, name?: string, group_name?: string, groupId?: string, color?: string, status?: GuestStatus, children?: Guest[]) {
+    this.id = id;
+    this.name = name;
+    this.group_name = group_name;
+    this.groupId = groupId;
+    this.color = color;
+    this.status = status;
+    this.children = children;
+  }
+}
+
+export class GuestSerializer implements Serializable<Guest> {
+  fromJson(data: any): Guest {
+    return new Guest(data.id, data.name, data.group?.name, data.group?.id, data.color, data.status, data.children);
+  }
+
+  toJson(guest: Guest): string {
+    return JSON.stringify({ guest: { name: guest.name, status: guest.status, group_id: guest.groupId } });
+  }
+
+  apiPath(): string {
+    return 'guests';
+  }
+}
+

app/ui/arrangements/arrangement.tsx

@@ -3,7 +3,7 @@
 'use client';
 
 import React, { useState } from 'react';
-import { TableArrangement, Guest } from '@/app/lib/definitions';
+import { TableArrangement } from '@/app/lib/definitions';
 import { lusitana } from '@/app/ui/fonts';
 import { Table } from '@/app/ui/components/table';
 import { getSlug } from '@/app/lib/utils';

app/ui/components/expense-form-dialog.tsx

@@ -0,0 +1,83 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+'use client';
+
+import { AbstractApi } from '@/app/api/abstract-api';
+import { Expense, ExpenseSerializer, PricingType, pricingTypes } from '@/app/lib/expense';
+import { capitalize } from '@/app/lib/utils';
+import { classNames } from '@/app/ui/components/button';
+import { Dialog } from 'primereact/dialog';
+import { Dropdown } from 'primereact/dropdown';
+import { FloatLabel } from 'primereact/floatlabel';
+import { InputText } from 'primereact/inputtext';
+import { useState } from 'react';
+
+export default function ExpenseFormDialog({ onCreate, onHide, expense, visible }: {
+  onCreate?: () => void,
+  onHide: () => void,
+  expense?: Expense,
+  visible: boolean,
+}) {
+
+  const [name, setName] = useState<string>(expense?.name || '');
+  const [amount, setAmount] = useState<number>(expense?.amount || 0);
+  const [pricingType, setPricingType] = useState<PricingType>(expense?.pricingType || 'fixed');
+
+  const api = new AbstractApi<Expense>();
+  const serializer = new ExpenseSerializer();
+
+  function resetForm() {
+    setName('');
+    setAmount(0);
+    setPricingType('fixed');
+  }
+
+  function submitGroup() {
+    if (expense?.id !== undefined) {
+      expense.name = name;
+      expense.amount = amount;
+      expense.pricingType = pricingType;
+
+      api.update(serializer, expense, () => {
+        resetForm();
+        onCreate && onCreate();
+      });
+    } else {
+
+      api.create(serializer, new Expense(undefined, name, amount, pricingType), () => {
+        resetForm();
+        onCreate && onCreate();
+      });
+    }
+  }
+
+  return (
+    <>
+
+      <Dialog header="Add/edit expense" visible={visible} style={{ width: '60vw' }} onHide={onHide}>
+        <div className="card flex justify-evenly py-5">
+          <FloatLabel>
+            <InputText id="name" className='rounded-sm' value={name} onChange={(e) => setName(e.target.value)} />
+            <label htmlFor="name">Name</label>
+          </FloatLabel>
+          <FloatLabel>
+            <InputText id="amount" className='rounded-sm' value={amount.toString()} onChange={(e) => setAmount(parseFloat(e.target.value))} />
+            <label htmlFor="amount">Amount</label>
+          </FloatLabel>
+          <FloatLabel>
+            <Dropdown id="pricingType" className='rounded-sm min-w-32' value={pricingType} onChange={(e) => setPricingType(e.target.value)} options={
+              pricingTypes.map((type) => {
+                return { label: capitalize(type), value: type };
+              })
+            } />
+            <label htmlFor="pricingType">Pricing type</label>
+          </FloatLabel>
+
+          <button className={classNames('primary')} onClick={submitGroup} disabled={!(name.length > 0)}>
+            {expense?.id !== undefined ? 'Update' : 'Create'}
+          </button>
+        </div>
+      </Dialog>
+    </>
+  );
+}

app/ui/components/group-form-dialog.tsx

@@ -2,8 +2,6 @@
 
 'use client';
 
-import { createGroup, updateGroup } from '@/app/api/groups';
-import { Group } from '@/app/lib/definitions';
 import { classNames } from '@/app/ui/components/button';
 import { Dialog } from 'primereact/dialog';
 import { ColorPicker } from 'primereact/colorpicker';
@@ -11,6 +9,9 @@ import { Dropdown } from 'primereact/dropdown';
 import { FloatLabel } from 'primereact/floatlabel';
 import { InputText } from 'primereact/inputtext';
 import { useState } from 'react';
+import { Group, GroupSerializer } from '@/app/lib/group';
+import { ApiError } from 'next/dist/server/api-utils';
+import { AbstractApi } from '@/app/api/abstract-api';
 
 export default function GroupFormDialog({groups, onCreate, onHide, group, visible }: {
   groups: Group[],
@@ -25,6 +26,9 @@ export default function GroupFormDialog({groups, onCreate, onHide, group, visibl
   const [color, setColor] = useState<string>(group?.color || '');
   const [parentId, setParentId] = useState(group?.parentId || '');
 
+  const api = new AbstractApi<Group>();
+  const serializer = new GroupSerializer();
+
   function resetForm() {
     setName('');
     setIcon('');
@@ -43,12 +47,13 @@ export default function GroupFormDialog({groups, onCreate, onHide, group, visibl
       group.color = color;
       group.parentId = parentId;
 
-      updateGroup(group).then(() => {
+      api.update(serializer, group, () => {
         resetForm();
         onCreate && onCreate();
       });
     } else {
-      group && createGroup({name, icon, color, parentId}, () => {
+
+      api.create(serializer, new Group(undefined, name, undefined, icon, undefined, parentId, color), () => {
         resetForm();
         onCreate && onCreate();
       });

app/ui/components/guest-form-dialog.tsx

@@ -2,8 +2,9 @@
 
 'use client';
 
-import { createGuest, updateGuest } from '@/app/api/guests';
-import { Group, Guest, GuestStatus, guestStatuses } from '@/app/lib/definitions';
+import { AbstractApi } from '@/app/api/abstract-api';
+import { Group } from '@/app/lib/group';
+import { Guest, GuestSerializer, GuestStatus, guestStatuses } from '@/app/lib/guest';
 import { capitalize } from '@/app/lib/utils';
 import { classNames } from '@/app/ui/components/button';
 import { Dialog } from 'primereact/dialog';
@@ -24,6 +25,9 @@ export default function GuestFormDialog({ groups, onCreate, onHide, guest, visib
   const [group, setGroup] = useState(guest?.groupId || null);
   const [status, setStatus] = useState<GuestStatus | null>(guest?.status || null);
 
+  const api = new AbstractApi<Guest>();
+  const serializer = new GuestSerializer();
+
   function resetForm() {
     setName('');
     setGroup(null);
@@ -39,12 +43,13 @@ export default function GuestFormDialog({ groups, onCreate, onHide, guest, visib
       guest.name = name;
       guest.groupId = group;  
       guest.status = status;
-      updateGuest(guest).then(() => {
+     
+      api.update(serializer, guest, () => {
         resetForm();
         onCreate && onCreate();
       });
     } else {
-      guest && createGuest({name: name, groupId: group, status: status}, () => {
+      api.create(serializer, new Guest(undefined, name, undefined, group, undefined, status), ()=> {
         resetForm();
         onCreate && onCreate();
       });

app/ui/components/table.tsx

@@ -1,6 +1,7 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
-import { Guest } from "@/app/lib/definitions";
+import { Guest } from "@/app/lib/guest";
+
 
 function Dish({ guest, rotation }: { guest: Guest, rotation?: number }) {
     rotation = rotation || 0

app/ui/expenses/table.tsx

@@ -2,41 +2,43 @@
 
 'use client'
 
-import { loadExpenses, updateExpense } from '@/app/api/expenses';
-import { Expense } from '@/app/lib/definitions';
-import { useState } from "react";
-import InlineTextField from "../components/form/inlineTextField";
+import { AbstractApi } from '@/app/api/abstract-api';
+import { Expense, ExpenseSerializer } from '@/app/lib/expense';
+import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
 import TableOfContents from "../components/table-of-contents";
 
-export default function ExpensesTable() {
-  const [expenses, setExpenses] = useState<Array<Expense>>([]);
-  const [expensesLoaded, setExpensesLoaded] = useState(false);
 
-  function refreshExpenses() {
-    loadExpenses((expenses) => {
-      setExpenses(expenses);
-      setExpensesLoaded(true);
-    });
-  }
+export default function ExpensesTable({ expenses, onUpdate, onEdit }: {
+  expenses: Expense[],
+  onUpdate: () => void,
+  onEdit: (expense: Expense) => void,
+}) {
 
-  !expensesLoaded && refreshExpenses();
+  const api = new AbstractApi<Expense>();
+  const serializer = new ExpenseSerializer();
 
   return (
     <TableOfContents
-      headers={['Name', 'Amount (€)', 'Pricing Type']}
+      headers={['Name', 'Amount (€)', 'Pricing Type', 'Actions']}
       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">
-            <InlineTextField initialValue={expense.name} onChange={(value) => { expense.name = value; updateExpense(expense) }} />
+            {expense.name}
           </th>
           <td className="px-6 py-4">
-            <InlineTextField initialValue={expense.amount.toString()} onChange={(value) => { expense.amount = parseFloat(value); updateExpense(expense) }} />
+            {expense.amount}
           </td>
           <td>
             {expense.pricingType}
           </td>
+          <td>
+            <div className="flex flex-row items-center">
+              <TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, expense, onUpdate) }} />
+              <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(expense)} />
+            </div>
+          </td>
         </tr>
       )}
     />

app/ui/groups/table.tsx

@@ -2,10 +2,13 @@
 
 'use client';
 
-import { Group } from '@/app/lib/definitions';
+import { Group, GroupSerializer } from '@/app/lib/group';
 import TableOfContents from '../components/table-of-contents';
-import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
-import { destroyGroup } from '@/app/api/groups';
+import { MapPinIcon, PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { AbstractApi } from '@/app/api/abstract-api';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { TreeNode } from 'primereact/treenode';
 
 export default function GroupsTable({ groups, onUpdate, onEdit }: {
   groups: Group[],
@@ -13,45 +16,88 @@ export default function GroupsTable({ groups, onUpdate, onEdit }: {
   onEdit: (group: Group) => void,
 }) {
 
+  const api = new AbstractApi<Group>();
+  const serializer = new GroupSerializer();
+
+  const actions = (group: Group) => (
+    <div className="flex flex-row items-center">
+      <TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, group, onUpdate) }} />
+      <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(group)} />
+    </div>
+  );
+
+  const index = groups.reduce((acc, group) => {
+    if (group.id) {
+      acc.set(group.id, group)
+    }
+
+    return acc;
+  }, new Map());
+
+  groups.forEach(group => {
+    if (group.parentId) {
+      const parent = index.get(group.parentId);
+      if (parent) {
+        if (!parent.children) {
+          parent.children = [];
+        }
+        parent.children.push(group);
+      }
+    }
+  });
+
+  const renderTree = (group: Group): TreeNode => {
+    const childrenAttendance = (group.children || []).reduce((acc, child) => {
+      acc.confirmed += child.attendance?.confirmed || 0;
+      acc.tentative += child.attendance?.tentative || 0;
+      acc.invited += child.attendance?.invited || 0;
+      acc.declined += child.attendance?.declined || 0;
+      acc.considered += child.attendance?.considered || 0;
+      acc.total += child.attendance?.total || 0;
+      return acc;
+    }, { confirmed: 0, tentative: 0, invited: 0, declined: 0, considered: 0, total: 0 });
+
+    return {
+      id: group.id,
+      key: group.id,
+      label: group.name,
+      data: {
+        name: group.name,
+        color: <div className="w-8 h-8 rounded-full" style={{ backgroundColor: group.color }} />,
+        confirmed: childrenAttendance.confirmed + (group.attendance?.confirmed || 0),
+        tentative: childrenAttendance.tentative + (group.attendance?.tentative || 0),
+        pending: childrenAttendance.invited + (group.attendance?.invited || 0),
+        declined: childrenAttendance.declined + (group.attendance?.declined || 0),
+        considered: childrenAttendance.considered + (group.attendance?.considered || 0),
+        total: childrenAttendance.total + (group.attendance?.total || 0),
+        actions: actions(group),
+      },
+      children: group.children?.map(renderTree),
+    }
+  }
+
+  const nodes: TreeNode[] = groups
+    .filter(group => !group.parentId)
+    .map(renderTree)
+
+  const headers = ['Name', 'Color', 'Confirmed', 'Tentative', 'Pending', 'Declined', 'Considered', 'Total', 'Actions'];
+  const rowClassName = () => {
+    return { 'border-b odd:bg-white even:bg-gray-50 hover:bg-gray-100': true };
+  }
+
   return (
-    <TableOfContents
-      headers={['Name', 'Color', 'Confirmed', 'Tentative', 'Pending', 'Declined', 'Considered', 'Total', 'Actions']}
-      caption='Groups'
-      elements={groups}
-      rowRender={(group) => (
-        <tr key={group.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
-          <td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-            {group.name}
-          </td>
-          <td className="px-6">
-            <div className="w-8 h-8 rounded-full" style={{ backgroundColor: group.color }}></div>
-          </td>
-          <td className="px-6 text-lg">
-            {group.attendance?.confirmed}
-          </td>
-          <td className="px-6 text-sm">
-            {group.attendance?.tentative}
-          </td>
-          <td className="px-6 text-sm">
-            {group.attendance?.invited}
-          </td>
-          <td className="px-6 text-sm">
-            {group.attendance?.declined}
-          </td>
-          <td className="px-6 text-sm">
-            {group.attendance?.considered}
-          </td>
-          <td className="px-6 text-sm">
-            {group.attendance?.total}
-          </td>
-          <td>
-            <div className="flex flex-row items-center">
-              <TrashIcon className='size-6 cursor-pointer' onClick={() => { destroyGroup(group, () => onUpdate()) }} />
-              <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(group)} />
-            </div>
-          </td>
-        </tr>
-      )}
-    />
+    <>
+      <TreeTable value={nodes} rowClassName={rowClassName} className='py-4'>
+        <Column expander field="name" header="Name" className='w-2/5' />
+        <Column field="color" header="Color" bodyClassName="text-sm" />
+        <Column field="confirmed" header="Confirmed" bodyClassName="text-sm" />
+        <Column field="tentative" header="Tentative" bodyClassName="text-sm" />
+        <Column field="pending" header="Pending" bodyClassName="text-sm" />
+        <Column field="declined" header="Declined" bodyClassName="text-sm" />
+        <Column field="considered" header="Considered" bodyClassName="text-sm" />
+        <Column field="total" header="Total" bodyClassName="text-sm" />
+        <Column field="actions" header="Actions" />
+      </TreeTable>
+    </>
   )
 }

app/ui/guests/table.tsx

@@ -2,9 +2,8 @@
 
 'use client';
 
-import { destroyGuest, updateGuest } from '@/app/api/guests';
-import { Guest, GuestStatus } from '@/app/lib/definitions';
-import { classNames } from '@/app/ui/components/button';
+import { AbstractApi } from '@/app/api/abstract-api';
+import { Guest , GuestSerializer} from '@/app/lib/guest';
 import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import TableOfContents from '../components/table-of-contents';
@@ -14,6 +13,10 @@ export default function guestsTable({ guests, onUpdate, onEdit }: {
   onUpdate: () => void,
   onEdit: (guest: Guest) => void
 }) {
+
+  const api = new AbstractApi<Guest>();
+  const serializer = new GuestSerializer();
+
   return (
     <TableOfContents
       headers={['Name', 'Group', 'Status', 'Actions']}
@@ -45,7 +48,7 @@ export default function guestsTable({ guests, onUpdate, onEdit }: {
           </td>
           <td>
             <div className="flex flex-row items-center">
-              <TrashIcon className='size-6 cursor-pointer' onClick={() => { destroyGuest(guest, () => onUpdate()) }} />
+              <TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, guest, onUpdate)}} />
               <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(guest)} />
             </div>
           </td>

package.json

@@ -28,7 +28,7 @@
     "@types/bcrypt": "^5.0.2",
     "@types/node": "22.10.1",
     "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1"
+    "@types/react-dom": "18.3.4"
   },
   "engines": {
     "node": ">=23.0.0"

pnpm-lock.yaml

@@ -70,8 +70,8 @@ importers:
         specifier: 18.3.12
         version: 18.3.12
       '@types/react-dom':
-        specifier: 18.3.1
-        version: 18.3.1
+        specifier: 18.3.4
+        version: 18.3.4(@types/react@18.3.12)
 
 packages:
 
@@ -334,8 +334,10 @@ packages:
   '@types/prop-types@15.7.12':
     resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==}
 
-  '@types/react-dom@18.3.1':
-    resolution: {integrity: sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==}
+  '@types/react-dom@18.3.4':
+    resolution: {integrity: sha512-HMqjZ3RJxmfoOn3sVc0T0fO6qSrLDnUQYB+azHKdBBz1eOt0Sq4wUu2Sf1/Dt18gqhECg0fZ33tkh/6YdwrSCw==}
+    peerDependencies:
+      '@types/react': ^18.0.0
 
   '@types/react-transition-group@4.4.11':
     resolution: {integrity: sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==}
@@ -1364,7 +1366,7 @@ snapshots:
 
   '@types/prop-types@15.7.12': {}
 
-  '@types/react-dom@18.3.1':
+  '@types/react-dom@18.3.4(@types/react@18.3.12)':
     dependencies:
       '@types/react': 18.3.12