Display a button to create new simulations

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

@@ -2,15 +2,28 @@
 
 'use client';
 
+import { AbstractApi } from '@/app/api/abstract-api';
+import { TableSimulation, TableSimulationSerializer } from '@/app/lib/tableSimulation';
 import Arrangement from '@/app/ui/arrangements/arrangement';
-import React, { useState } from 'react';
 import ArrangementsTable from '@/app/ui/arrangements/arrangements-table';
+import { classNames } from '@/app/ui/components/button';
+import { useState } from 'react';
 
 export default function Page() {
   const [currentArrangement, setCurrentArrangement] = useState<string | null>(null);
 
+  function createSimulation() {
+    const api = new AbstractApi<TableSimulation>();
+    const serializer = new TableSimulationSerializer();
+    api.create(serializer, new TableSimulation(), () => {});  
+  }
+  
   return (
     <>
+      <div className="flex flex-col w-full items-center justify-between">
+        <button onClick={createSimulation} className={classNames('primary')}>Add new</button>
+      </div>
+
       <ArrangementsTable onArrangementSelected={setCurrentArrangement} />
       {currentArrangement && <Arrangement key={currentArrangement} id={currentArrangement} />}
     </>

app/lib/tableSimulation.tsx

@@ -19,12 +19,12 @@ export type Table = {
 }
 
 export class TableSimulation implements Entity {
-  id: string;
+  id?: string;
   tables: Table[];
 
-  constructor(id: string, tables: Table[]) {
+  constructor(id?: string, tables?: Table[]) {
     this.id = id;
-    this.tables = tables;
+    this.tables = tables || [];
   }
 }