Merge pull request 'Define UI to perform CRUD operations on expenses' (#143) from expenses-crud into main

Reviewed-on: #143

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

@@ -1,15 +1,44 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
-import { lusitana } from '@/app/ui/fonts';
+'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';
-export default  function Page () {
+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() }, []);
+
   return (
     <div className="w-full">
-      <div className="w-full items-center justify-between">
+      <div className="flex flex-col w-full items-center justify-between">
-        <h1 className={`${lusitana.className} text-2xl`}>Expenses</h1>
+        <button onClick={() => setExpenseBeingEdited({})} className={classNames('primary')}>Add new</button>
-        <h2 className={`${lusitana.className} text-xl`}>Summary</h2>
+        <ExpenseFormDialog
-        <ExpensesTable />
+          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 { AbstractApi,  } from '@/app/api/abstract-api';
-import { loadGuests } from '@/app/api/guests';
+import { Guest, GuestSerializer } from '@/app/lib/guest';
-import { Group, Guest } from '@/app/lib/definitions';
 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) => {
+    new AbstractApi<Guest>().getAll(new GuestSerializer(), (objects: Guest[]) => {
-      setGuests(guests);
+      setGuests(objects);
       setGuestsLoaded(true);
     });
   }
 
   function refreshGroups() {
-    loadGroups((groups) => {
+    new AbstractApi<Group>().getAll(new GroupSerializer(), (objects: Group[]) => {
-      setGroups(groups);
+      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.
+import { Guest } from "./guest";
-// 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 const guestStatuses = ['considered', 'invited', 'confirmed', 'declined', 'tentative'] as const;
+export interface Entity {
-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;
@@ -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,40 @@
+/* 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;
+
+  constructor(id?: string, name?: string, group_name?: string, groupId?: string, color?: string, status?: GuestStatus) {
+    this.id = id;
+    this.name = name;
+    this.group_name = group_name;
+    this.groupId = groupId;
+    this.color = color;
+    this.status = status;
+  }
+}
+
+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);
+  }
+
+  toJson(guest: Guest): string {
+    return JSON.stringify({ guest: { name: guest.name, status: guest.status, group_id: guest.groupId } });
+  }
+
+  apiPath(): string {
+    return 'guests';
+  }
+}
+

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 { AbstractApi } from '@/app/api/abstract-api';
-import { Group, Guest, GuestStatus, guestStatuses } from '@/app/lib/definitions';
+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);
@@ -37,14 +41,15 @@ export default function GuestFormDialog({ groups, onCreate, onHide, guest, visib
 
     if (guest?.id !== undefined) {
       guest.name = name;
-      guest.groupId = group;
+      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/expenses/table.tsx

@@ -2,41 +2,43 @@
 
 'use client'
 
-import { loadExpenses, updateExpense } from '@/app/api/expenses';
+import { AbstractApi } from '@/app/api/abstract-api';
-import { Expense } from '@/app/lib/definitions';
+import { Expense, ExpenseSerializer } from '@/app/lib/expense';
-import { useState } from "react";
+import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
-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);
 
-  function refreshExpenses() {
+export default function ExpensesTable({ expenses, onUpdate, onEdit }: {
-    loadExpenses((expenses) => {
+  expenses: Expense[],
-      setExpenses(expenses);
+  onUpdate: () => void,
-      setExpensesLoaded(true);
+  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,10 @@
 
 '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 { AbstractApi } from '@/app/api/abstract-api';
 
 export default function GroupsTable({ groups, onUpdate, onEdit }: {
   groups: Group[],
@@ -13,6 +13,9 @@ export default function GroupsTable({ groups, onUpdate, onEdit }: {
   onEdit: (group: Group) => void,
 }) {
 
+  const api = new AbstractApi<Group>();
+  const serializer = new GroupSerializer();
+
   return (
     <TableOfContents
       headers={['Name', 'Color', 'Confirmed', 'Tentative', 'Pending', 'Declined', 'Considered', 'Total', 'Actions']}
@@ -46,7 +49,7 @@ export default function GroupsTable({ groups, onUpdate, onEdit }: {
           </td>
           <td>
             <div className="flex flex-row items-center">
-              <TrashIcon className='size-6 cursor-pointer' onClick={() => { destroyGroup(group, () => onUpdate()) }} />
+              <TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, group, onUpdate) }} />
               <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(group)} />
             </div>
           </td>

app/ui/guests/table.tsx

@@ -2,9 +2,8 @@
 
 'use client';
 
-import { destroyGuest, updateGuest } from '@/app/api/guests';
+import { AbstractApi } from '@/app/api/abstract-api';
-import { Guest, GuestStatus } from '@/app/lib/definitions';
+import { Guest , GuestSerializer} from '@/app/lib/guest';
-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';
@@ -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>