Update dependency @types/react to v18.3.14

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

@@ -1,44 +1,15 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
-'use client'
+import { lusitana } from '@/app/ui/fonts';
-
-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="flex flex-col w-full items-center justify-between">
+      <div className="w-full items-center justify-between">
-        <button onClick={() => setExpenseBeingEdited({})} className={classNames('primary')}>Add new</button>
+        <h1 className={`${lusitana.className} text-2xl`}>Expenses</h1>
-        <ExpenseFormDialog
+        <h2 className={`${lusitana.className} text-xl`}>Summary</h2>
-          key={expenseBeingEdited?.id}
+        <ExpensesTable />
-          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 { AbstractApi,  } from '@/app/api/abstract-api';
+import { loadGroups } from '@/app/api/groups';
-import { Guest, GuestSerializer } from '@/app/lib/guest';
+import { loadGuests } from '@/app/api/guests';
+import { Group, Guest } from '@/app/lib/definitions';
 import { classNames } from '@/app/ui/components/button';
-import GroupFormDialog from '@/app/ui/components/group-form-dialog';
 import GuestFormDialog from '@/app/ui/components/guest-form-dialog';
+import GroupFormDialog from '@/app/ui/components/group-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() {
-    new AbstractApi<Guest>().getAll(new GuestSerializer(), (objects: Guest[]) => {
+    loadGuests((guests) => {
-      setGuests(objects);
+      setGuests(guests);
       setGuestsLoaded(true);
     });
   }
 
   function refreshGroups() {
-    new AbstractApi<Group>().getAll(new GroupSerializer(), (objects: Group[]) => {
+    loadGroups((groups) => {
-      setGroups(objects);
+      setGroups(groups);
       setGroupsLoaded(true);
     });
   }

app/api/abstract-api.tsx

@@ -1,65 +0,0 @@
-/* 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

@@ -0,0 +1,40 @@
+/* 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

@@ -0,0 +1,81 @@
+/* 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

@@ -0,0 +1,65 @@
+/* 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,11 +1,28 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
-import { Guest } from "./guest";
+// 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.
 
-export interface Entity {
+export const guestStatuses = ['considered', 'invited', 'confirmed', 'declined', 'tentative'] as const;
+export type GuestStatus = typeof guestStatuses[number];
+export type Guest = {
   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;
@@ -14,6 +31,26 @@ 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;
@@ -36,5 +73,5 @@ export type Captcha = {
 }
 
 export type StructuredErrors = {
-  [key: string]: string[] | string;
+  [key: string]: string[]|string;
 };

app/lib/expense.tsx

@@ -1,41 +0,0 @@
-/* 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

@@ -1,64 +0,0 @@
-/* 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

@@ -1,42 +0,0 @@
-/* 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 } from '@/app/lib/definitions';
+import { TableArrangement, Guest } 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

@@ -1,83 +0,0 @@
-/* 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,6 +2,8 @@
 
 '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';
@@ -9,9 +11,6 @@ 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[],
@@ -26,9 +25,6 @@ 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('');
@@ -47,13 +43,12 @@ export default function GroupFormDialog({groups, onCreate, onHide, group, visibl
       group.color = color;
       group.parentId = parentId;
 
-      api.update(serializer, group, () => {
+      updateGroup(group).then(() => {
         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,9 +2,8 @@
 
 'use client';
 
-import { AbstractApi } from '@/app/api/abstract-api';
+import { createGuest, updateGuest } from '@/app/api/guests';
-import { Group } from '@/app/lib/group';
+import { Group, Guest, GuestStatus, guestStatuses } from '@/app/lib/definitions';
-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';
@@ -25,9 +24,6 @@ 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);
@@ -43,13 +39,12 @@ 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 {
-      api.create(serializer, new Guest(undefined, name, undefined, group, undefined, status), ()=> {
+      guest && createGuest({name: name, groupId: group, status: status}, () => {
         resetForm();
         onCreate && onCreate();
       });

app/ui/components/table.tsx

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

app/ui/expenses/table.tsx

@@ -2,43 +2,41 @@
 
 'use client'
 
-import { AbstractApi } from '@/app/api/abstract-api';
+import { loadExpenses, updateExpense } from '@/app/api/expenses';
-import { Expense, ExpenseSerializer } from '@/app/lib/expense';
+import { Expense } from '@/app/lib/definitions';
-import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { useState } from "react";
+import InlineTextField from "../components/form/inlineTextField";
 import TableOfContents from "../components/table-of-contents";
 
+export default function ExpensesTable() {
+  const [expenses, setExpenses] = useState<Array<Expense>>([]);
+  const [expensesLoaded, setExpensesLoaded] = useState(false);
 
-export default function ExpensesTable({ expenses, onUpdate, onEdit }: {
+  function refreshExpenses() {
-  expenses: Expense[],
+    loadExpenses((expenses) => {
-  onUpdate: () => void,
+      setExpenses(expenses);
-  onEdit: (expense: Expense) => void,
+      setExpensesLoaded(true);
-}) {
+    });
+  }
 
-  const api = new AbstractApi<Expense>();
+  !expensesLoaded && refreshExpenses();
-  const serializer = new ExpenseSerializer();
 
   return (
     <TableOfContents
-      headers={['Name', 'Amount (€)', 'Pricing Type', 'Actions']}
+      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}
+            <InlineTextField initialValue={expense.name} onChange={(value) => { expense.name = value; updateExpense(expense) }} />
           </th>
           <td className="px-6 py-4">
-            {expense.amount}
+            <InlineTextField initialValue={expense.amount.toString()} onChange={(value) => { expense.amount = parseFloat(value); updateExpense(expense) }} />
           </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,13 +2,10 @@
 
 'use client';
 
-import { Group, GroupSerializer } from '@/app/lib/group';
+import { Group } from '@/app/lib/definitions';
 import TableOfContents from '../components/table-of-contents';
-import { MapPinIcon, PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
-import { AbstractApi } from '@/app/api/abstract-api';
+import { destroyGroup } from '@/app/api/groups';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from 'primereact/column';
-import { TreeNode } from 'primereact/treenode';
 
 export default function GroupsTable({ groups, onUpdate, onEdit }: {
   groups: Group[],
@@ -16,88 +13,45 @@ 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
-      <TreeTable value={nodes} rowClassName={rowClassName} className='py-4'>
+      headers={['Name', 'Color', 'Confirmed', 'Tentative', 'Pending', 'Declined', 'Considered', 'Total', 'Actions']}
-        <Column expander field="name" header="Name" className='w-2/5' />
+      caption='Groups'
-        <Column field="color" header="Color" bodyClassName="text-sm" />
+      elements={groups}
-        <Column field="confirmed" header="Confirmed" bodyClassName="text-sm" />
+      rowRender={(group) => (
-        <Column field="tentative" header="Tentative" bodyClassName="text-sm" />
+        <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">
-        <Column field="pending" header="Pending" bodyClassName="text-sm" />
+          <td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-        <Column field="declined" header="Declined" bodyClassName="text-sm" />
+            {group.name}
-        <Column field="considered" header="Considered" bodyClassName="text-sm" />
+          </td>
-        <Column field="total" header="Total" bodyClassName="text-sm" />
+          <td className="px-6">
-        <Column field="actions" header="Actions" />
+            <div className="w-8 h-8 rounded-full" style={{ backgroundColor: group.color }}></div>
-      </TreeTable>
+          </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>
+      )}
+    />
   )
 }

app/ui/guests/table.tsx

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

package.json

@@ -27,7 +27,7 @@
     "@playwright/test": "^1.46.0",
     "@types/bcrypt": "^5.0.2",
     "@types/node": "22.10.1",
-    "@types/react": "18.3.15",
+    "@types/react": "18.3.14",
     "@types/react-dom": "18.3.1"
   },
   "engines": {

pnpm-lock.yaml

@@ -37,7 +37,7 @@ importers:
         version: 7.0.0
       primereact:
         specifier: ^10.8.2
-        version: 10.8.5(@types/react@18.3.15)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
+        version: 10.8.5(@types/react@18.3.14)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
       react:
         specifier: 19.0.0-rc-f38c22b244-20240704
         version: 19.0.0-rc-f38c22b244-20240704
@@ -67,8 +67,8 @@ importers:
         specifier: 22.10.1
         version: 22.10.1
       '@types/react':
-        specifier: 18.3.15
+        specifier: 18.3.14
-        version: 18.3.15
+        version: 18.3.14
       '@types/react-dom':
         specifier: 18.3.1
         version: 18.3.1
@@ -340,8 +340,8 @@ packages:
   '@types/react-transition-group@4.4.11':
     resolution: {integrity: sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==}
 
-  '@types/react@18.3.15':
+  '@types/react@18.3.14':
-    resolution: {integrity: sha512-XQzbwkCwrsabawgWsvDDwsDTRuH1sf6Uj1fnFYoG03ZXfT54/aBvlylKR9ix70pXAtTn8dFzj358zVcZN4m83w==}
+    resolution: {integrity: sha512-NzahNKvjNhVjuPBQ+2G7WlxstQ+47kXZNHlUvFakDViuIEfGY926GqhMueQFZ7woG+sPiQKlF36XfrIUVSUfFg==}
 
   abbrev@1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
@@ -1366,13 +1366,13 @@ snapshots:
 
   '@types/react-dom@18.3.1':
     dependencies:
-      '@types/react': 18.3.15
+      '@types/react': 18.3.14
 
   '@types/react-transition-group@4.4.11':
     dependencies:
-      '@types/react': 18.3.15
+      '@types/react': 18.3.14
 
-  '@types/react@18.3.15':
+  '@types/react@18.3.14':
     dependencies:
       '@types/prop-types': 15.7.12
       csstype: 3.1.3
@@ -1877,14 +1877,14 @@ snapshots:
 
   primeicons@7.0.0: {}
 
-  primereact@10.8.5(@types/react@18.3.15)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
+  primereact@10.8.5(@types/react@18.3.14)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
     dependencies:
       '@types/react-transition-group': 4.4.11
       react: 19.0.0-rc-f38c22b244-20240704
       react-dom: 19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704)
       react-transition-group: 4.4.5(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
     optionalDependencies:
-      '@types/react': 18.3.15
+      '@types/react': 18.3.14
 
   prop-types@15.8.1:
     dependencies: