UI Updates

Updated some pages pages to be more consistent.

src/features/staff/components/appointment-status-actions.tsx

@@ -54,10 +54,13 @@ export function AppointmentStatusActions({
   appointmentId,
   status,
   actions = DEFAULT_ACTIONS,
+  layout = "wrap",
 }: {
   appointmentId: string;
   status: RawStatus;
   actions?: AppointmentActionSet;
+  /** "stack" renders one full-width button per row (Current Appointment); "wrap" (default, used by Appointment Details) keeps the original inline small buttons. */
+  layout?: "wrap" | "stack";
 }) {
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
@@ -121,10 +124,11 @@ export function AppointmentStatusActions({
           {error}
         </p>
       )}
-      <div className="flex flex-wrap gap-2">
+      <div className={layout === "stack" ? "flex flex-col gap-2" : "flex flex-wrap gap-2"}>
         {status === "PENDING" && (
           <Button
-            size="sm"
+            size={layout === "stack" ? undefined : "sm"}
+            className={layout === "stack" ? "w-full" : undefined}
             isLoading={isPending}
             onClick={() => runQuiet(() => actions.confirm(appointmentId))}
           >
@@ -133,7 +137,8 @@ export function AppointmentStatusActions({
         )}
         {status === "CONFIRMED" && (
           <Button
-            size="sm"
+            size={layout === "stack" ? undefined : "sm"}
+            className={layout === "stack" ? "w-full" : undefined}
             isLoading={isPending}
             onClick={() => runQuiet(() => actions.checkIn(appointmentId))}
           >
@@ -142,7 +147,8 @@ export function AppointmentStatusActions({
         )}
         {status === "CHECKED_IN" && (
           <Button
-            size="sm"
+            size={layout === "stack" ? undefined : "sm"}
+            className={layout === "stack" ? "w-full" : undefined}
             isLoading={isPending}
             onClick={() => runQuiet(() => actions.start(appointmentId))}
           >
@@ -150,17 +156,31 @@ export function AppointmentStatusActions({
           </Button>
         )}
         {status === "IN_PROGRESS" && (
-          <Button size="sm" onClick={() => setConfirmKind("complete")}>
+          <Button
+            size={layout === "stack" ? undefined : "sm"}
+            className={layout === "stack" ? "w-full" : undefined}
+            onClick={() => setConfirmKind("complete")}
+          >
             Complete Appointment
           </Button>
         )}
         {status === "CONFIRMED" && (
-          <Button size="sm" variant="secondary" onClick={() => setConfirmKind("no_show")}>
+          <Button
+            size={layout === "stack" ? undefined : "sm"}
+            className={layout === "stack" ? "w-full" : undefined}
+            variant="secondary"
+            onClick={() => setConfirmKind("no_show")}
+          >
             Mark No-Show
           </Button>
         )}
         {(status === "PENDING" || status === "CONFIRMED" || status === "CHECKED_IN") && (
-          <Button size="sm" variant="destructive" onClick={() => setConfirmKind("cancel")}>
+          <Button
+            size={layout === "stack" ? undefined : "sm"}
+            className={layout === "stack" ? "w-full" : undefined}
+            variant="destructive"
+            onClick={() => setConfirmKind("cancel")}
+          >
             Cancel
           </Button>
         )}