Add extras and options CRUD, add sidebar, add kanban board, udpate packages

2026-01-29 16:18:57 +01:00
parent f9c14ed9fb
commit 507e1b9ee4
28 changed files with 2455 additions and 42 deletions
--- a/src/components/commissions/extras/ExtraListClient.tsx
+++ b/src/components/commissions/extras/ExtraListClient.tsx
@ -0,0 +1,101 @@
+"use client";
+
+import { deleteCommissionExtra } from "@/actions/commissions/types/extras";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Pencil, Plus, Trash2 } from "lucide-react";
+import * as React from "react";
+import { toast } from "sonner";
+import { ExtraDialog } from "./ExtraDialog";
+
+type Item = {
+  id: string;
+  name: string;
+  description: string | null;
+};
+
+export function ExtraListClient({ extras }: { extras: Item[] }) {
+  const [busyId, setBusyId] = React.useState<string | null>(null);
+
+  async function onDelete(id: string) {
+    try {
+      setBusyId(id);
+      await deleteCommissionExtra(id);
+      toast.success("Extra deleted.");
+    } catch (e) {
+      console.error(e);
+      toast.error("Failed to delete extra.");
+    } finally {
+      setBusyId(null);
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between gap-4">
+        <h1 className="text-2xl font-bold">Extras</h1>
+
+        <ExtraDialog
+          mode="create"
+          trigger={
+            <Button className="gap-2">
+              <Plus className="h-4 w-4" />
+              New extra
+            </Button>
+          }
+        />
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">All extras</CardTitle>
+        </CardHeader>
+
+        <CardContent className="p-0">
+          {extras.length === 0 ? (
+            <div className="p-6 text-sm text-muted-foreground italic">No extras yet.</div>
+          ) : (
+            <ul className="divide-y">
+              {extras.map((o) => (
+                <li key={o.id} className="flex items-center justify-between gap-4 px-6 py-4">
+                  <div className="min-w-0">
+                    <div className="flex items-center gap-2">
+                      <div className="font-medium truncate">{o.name}</div>
+                    </div>
+                    {o.description ? (
+                      <div className="text-sm text-muted-foreground truncate">{o.description}</div>
+                    ) : null}
+                  </div>
+
+                  <div className="flex items-center gap-2">
+                    <ExtraDialog
+                      mode="edit"
+                      initial={o}
+                      trigger={
+                        <Button variant="secondary" size="sm" className="gap-2">
+                          <Pencil className="h-4 w-4" />
+                          Edit
+                        </Button>
+                      }
+                    />
+
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      className="gap-2"
+                      disabled={busyId === o.id}
+                      onClick={() => onDelete(o.id)}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                      Delete
+                    </Button>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}