feat(bookings): implement booking editing functionality with metadata support

Author: PramithaMJ

apps/management-ui/app/bookings/page.tsx

@@ -30,10 +30,14 @@ import { PageSpinner } from "@/components/ui/spinner";
 import { useToast } from "@/components/ui/toast";
 import { tenantsApi } from "@/lib/api/tenants";
 import {
-  bookingsApi, type Booking, type BookingStatus, type CreateBookingBody,
+  bookingsApi,
+  type Booking,
+  type BookingStatus,
+  type CreateBookingBody,
+  type EditBookingBody,
 } from "@/lib/api/bookings";
 import { formatDate } from "@/lib/utils";
-import { CalendarDays, Plus, Trash2, RefreshCw } from "lucide-react";
+import { CalendarDays, Plus, Trash2, RefreshCw, Pencil } from "lucide-react";
 
 const NEXT_STATUSES: Record<BookingStatus, BookingStatus[]> = {
   pending:   ["confirmed", "cancelled"],
@@ -43,13 +47,14 @@ const NEXT_STATUSES: Record<BookingStatus, BookingStatus[]> = {
   no_show:   [],
 };
 
-const createSchema = z.object({
+const bookingFormSchema = z.object({
   customerRef: z.string().min(1, "Required"),
   serviceRef:  z.string().min(1, "Required"),
   slotStart:   z.string().min(1, "Required"),
   slotEnd:     z.string().min(1, "Required"),
+  metadata:    z.string().optional(),
 });
-type CreateForm = z.infer<typeof createSchema>;
+type BookingForm = z.infer<typeof bookingFormSchema>;
 
 const statusFilterOptions = [
   { value: "", label: "All statuses" },
@@ -69,8 +74,10 @@ export default function BookingsPage() {
   useEffect(() => {
     if (activeTenant?.id) { setSelectedTenantId(activeTenant.id); setPage(0); }
   }, [activeTenant?.id]);
+
   const [statusFilter, setStatusFilter] = useState("");
   const [createOpen, setCreateOpen] = useState(false);
+  const [editTarget, setEditTarget] = useState<Booking | null>(null);
   const [cancelTarget, setCancelTarget] = useState<Booking | null>(null);
   const [updateTarget, setUpdateTarget] = useState<Booking | null>(null);
   const [page, setPage] = useState(0);
@@ -101,14 +108,32 @@ export default function BookingsPage() {
     enabled: !!selectedTenantId,
   });
 
+  // ── Forms ──────────────────────────────────────────────────────────────────
+  const createForm = useForm<BookingForm>({ resolver: zodResolver(bookingFormSchema) });
+  const { register, handleSubmit, formState: { errors } } = createForm;
+
+  const editForm = useForm<BookingForm>({ resolver: zodResolver(bookingFormSchema) });
+
+  // ── Mutations ──────────────────────────────────────────────────────────────
   const createMutation = useMutation({
     mutationFn: (body: CreateBookingBody) =>
       bookingsApi.create(body, selectedTenantId),
     onSuccess: () => {
       toast("Booking created", "success");
       qc.invalidateQueries({ queryKey: ["bookings", selectedTenantId] });
       setCreateOpen(false);
-      reset();
+      createForm.reset();
+    },
+    onError: (e: Error) => toast(e.message, "error"),
+  });
+
+  const editMutation = useMutation({
+    mutationFn: ({ bid, body }: { bid: string; body: EditBookingBody }) =>
+      bookingsApi.edit(bid, body, selectedTenantId),
+    onSuccess: () => {
+      toast("Booking updated", "success");
+      qc.invalidateQueries({ queryKey: ["bookings", selectedTenantId] });
+      setEditTarget(null);
     },
     onError: (e: Error) => toast(e.message, "error"),
   });
@@ -134,12 +159,43 @@ export default function BookingsPage() {
     onError: (e: Error) => toast(e.message, "error"),
   });
 
-  const {
-    register,
-    handleSubmit,
-    reset,
-    formState: { errors },
-  } = useForm<CreateForm>({ resolver: zodResolver(createSchema) });
+  // ── Edit helpers ───────────────────────────────────────────────────────────
+  const openEdit = (b: Booking) => {
+    const toLocal = (iso: string) => {
+      const d = new Date(iso);
+      const pad = (n: number) => String(n).padStart(2, "0");
+      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+    };
+    editForm.reset({
+      customerRef: b.customerRef,
+      serviceRef:  b.serviceRef,
+      slotStart:   toLocal(b.slotStart),
+      slotEnd:     toLocal(b.slotEnd),
+      metadata:    Object.keys(b.metadata ?? {}).length > 0
+        ? JSON.stringify(b.metadata, null, 2)
+        : "",
+    });
+    setEditTarget(b);
+  };
+
+  const submitEdit = editForm.handleSubmit((v) => {
+    if (!editTarget) return;
+    let parsedMeta: Record<string, unknown> = {};
+    if (v.metadata?.trim()) {
+      try { parsedMeta = JSON.parse(v.metadata); }
+      catch { editForm.setError("metadata", { message: "Invalid JSON" }); return; }
+    }
+    editMutation.mutate({
+      bid: editTarget.id,
+      body: {
+        customerRef: v.customerRef,
+        serviceRef:  v.serviceRef,
+        slotStart:   new Date(v.slotStart).toISOString(),
+        slotEnd:     new Date(v.slotEnd).toISOString(),
+        metadata:    parsedMeta,
+      },
+    });
+  });
 
   const bookings = bookingsQuery.data?.data ?? [];
   const total = bookingsQuery.data?.total ?? 0;
@@ -211,7 +267,7 @@ export default function BookingsPage() {
                     <TableHead>Slot End</TableHead>
                     <TableHead>Status</TableHead>
                     <TableHead>Created</TableHead>
-                    <TableHead className="w-24" />
+                    <TableHead className="w-28" />
                   </TableRow>
                 </TableHeader>
                 <TableBody>
@@ -229,6 +285,17 @@ export default function BookingsPage() {
                         </TableCell>
                         <TableCell>
                           <div className="flex items-center gap-1">
+                            {(b.status === "pending" || b.status === "confirmed") && (
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                className="text-slate-500 hover:bg-slate-100"
+                                title="Edit booking"
+                                onClick={() => openEdit(b)}
+                              >
+                                <Pencil className="h-3.5 w-3.5" />
+                              </Button>
+                            )}
                             {nextStatuses.length > 0 && (
                               <Button
                                 variant="ghost"
@@ -280,21 +347,28 @@ export default function BookingsPage() {
         </Card>
       </div>
 
-      {/* Create booking dialog */}
+      {/* ── Create booking dialog ────────────────────────────────────────────── */}
       <Dialog
         open={createOpen}
-        onClose={() => { setCreateOpen(false); reset(); }}
+        onClose={() => { setCreateOpen(false); createForm.reset(); }}
         title="New Booking"
         description="Create a booking for this tenant."
       >
         <form
-          onSubmit={handleSubmit((v) =>
+          onSubmit={handleSubmit((v) => {
+            let meta: Record<string, unknown> = {};
+            if (v.metadata?.trim()) {
+              try { meta = JSON.parse(v.metadata); }
+              catch { createForm.setError("metadata", { message: "Invalid JSON" }); return; }
+            }
             createMutation.mutate({
-              ...v,
-              slotStart: new Date(v.slotStart).toISOString(),
-              slotEnd:   new Date(v.slotEnd).toISOString(),
-            })
-          )}
+              customerRef: v.customerRef,
+              serviceRef:  v.serviceRef,
+              slotStart:   new Date(v.slotStart).toISOString(),
+              slotEnd:     new Date(v.slotEnd).toISOString(),
+              metadata:    meta,
+            });
+          })}
           className="space-y-4"
         >
           <Input
@@ -321,8 +395,22 @@ export default function BookingsPage() {
             error={errors.slotEnd?.message}
             {...register("slotEnd")}
           />
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">
+              Metadata <span className="text-slate-400 font-normal">(optional JSON)</span>
+            </label>
+            <textarea
+              rows={3}
+              placeholder={'{"notes": "first visit"}'}
+              className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-brand-500 resize-none"
+              {...register("metadata")}
+            />
+            {errors.metadata && (
+              <p className="mt-1 text-xs text-red-500">{errors.metadata.message}</p>
+            )}
+          </div>
           <div className="flex justify-end gap-2 pt-1">
-            <Button type="button" variant="outline" onClick={() => { setCreateOpen(false); reset(); }}>
+            <Button type="button" variant="outline" onClick={() => { setCreateOpen(false); createForm.reset(); }}>
               Cancel
             </Button>
             <Button type="submit" loading={createMutation.isPending}>
@@ -332,7 +420,69 @@ export default function BookingsPage() {
         </form>
       </Dialog>
 
-      {/* Status update dialog */}
+      {/* ── Edit booking dialog ──────────────────────────────────────────────── */}
+      {editTarget && (
+        <Dialog
+          open
+          onClose={() => setEditTarget(null)}
+          title="Edit Booking"
+          description={`Editing booking for "${editTarget.customerRef}"`}
+        >
+          <form onSubmit={submitEdit} className="space-y-4">
+            <Input
+              label="Customer Reference"
+              placeholder="cust_12345"
+              error={editForm.formState.errors.customerRef?.message}
+              {...editForm.register("customerRef")}
+            />
+            <Input
+              label="Service Reference"
+              placeholder="svc_abc"
+              error={editForm.formState.errors.serviceRef?.message}
+              {...editForm.register("serviceRef")}
+            />
+            <Input
+              label="Slot Start"
+              type="datetime-local"
+              error={editForm.formState.errors.slotStart?.message}
+              {...editForm.register("slotStart")}
+            />
+            <Input
+              label="Slot End"
+              type="datetime-local"
+              error={editForm.formState.errors.slotEnd?.message}
+              {...editForm.register("slotEnd")}
+            />
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">
+                Metadata <span className="text-slate-400 font-normal">(optional JSON)</span>
+              </label>
+              <textarea
+                rows={3}
+                placeholder={'{"notes": ""}'}
+                className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-brand-500 resize-none"
+                {...editForm.register("metadata")}
+              />
+              {editForm.formState.errors.metadata && (
+                <p className="mt-1 text-xs text-red-500">{editForm.formState.errors.metadata.message}</p>
+              )}
+            </div>
+            <div className="rounded-lg bg-amber-50 border border-amber-200 px-3 py-2 text-xs text-amber-700">
+              Status <strong>{editTarget.status}</strong> is unchanged. Use the status button to change it.
+            </div>
+            <div className="flex justify-end gap-2 pt-1">
+              <Button type="button" variant="outline" onClick={() => setEditTarget(null)}>
+                Cancel
+              </Button>
+              <Button type="submit" loading={editMutation.isPending}>
+                Save Changes
+              </Button>
+            </div>
+          </form>
+        </Dialog>
+      )}
+
+      {/* ── Status update dialog ─────────────────────────────────────────────── */}
       {updateTarget && (
         <Dialog
           open
@@ -359,7 +509,7 @@ export default function BookingsPage() {
         </Dialog>
       )}
 
-      {/* Cancel confirm */}
+      {/* ── Cancel confirm ───────────────────────────────────────────────────── */}
       <ConfirmDialog
         open={!!cancelTarget}
         onClose={() => setCancelTarget(null)}

apps/management-ui/app/docs/page.tsx

@@ -26,7 +26,7 @@ import {
   X,
 } from "lucide-react";
 
-// ─── helpers ─────────────────────────────────────────────────────────────────
+// ─── helpers ───────────────
 
 function useClipboard(timeout = 1800) {
   const [copied, setCopied] = useState<string | null>(null);
@@ -39,7 +39,7 @@ function useClipboard(timeout = 1800) {
   return { copied, copy };
 }
 
-// ─── components ──────────────────────────────────────────────────────────────
+// ─── components ────────────
 
 function CodeBlock({
   id,
@@ -195,7 +195,7 @@ function Note({ children, type = "info" }: { children: React.ReactNode; type?: "
   );
 }
 
-// ─── nav config ──────────────────────────────────────────────────────────────
+// ─── nav config ────────────
 
 const NAV = [
   { id: "overview",        label: "Overview",              icon: BookOpen },
@@ -212,7 +212,7 @@ const NAV = [
   { id: "docker",          label: "Self-hosting",          icon: Terminal },
 ];
 
-// ─── page ─────────────────────────────────────────────────────────────────────
+// ─── page ───────────────────
 
 export default function DocsPage() {
   const { copied, copy } = useClipboard();