#364 Add An Application Status Transition Graph With Next-Step Quick Actions

app/(main)/(auth)/applications/[id]/page.tsx

@@ -7,7 +7,7 @@ import { getCurrentUser } from '@/lib/auth/server';
 import { getRenamedTo } from '@/lib/utils';
 
 import { ApplicationAnswersList } from '@/components/features/application-answers-list';
-import { ApplicationStatusControl } from '@/components/features/application-status-control';
+import { ApplicationStatusActions } from '@/components/features/application-status-actions';
 import { ApplicationStatusBadge } from '@/components/features/status-badge';
 import { PageHeader } from '@/components/layouts/page-header';
 import {
@@ -111,9 +111,10 @@ export default async function ApplicationDetailPage({
             </CardHeader>
             <CardContent className="flex flex-col gap-3 p-3 pt-0">
               <ApplicationStatusBadge status={application.status} />
-              <ApplicationStatusControl
+              <ApplicationStatusActions
                 applicationId={application.id}
                 currentStatus={application.status}
+                applicantName={applicantName}
               />
             </CardContent>
           </Card>

components/features/application-status-actions.tsx

@@ -0,0 +1,266 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+
+import { Loader2, MoreHorizontal } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { updateApplicationStatus } from '@/prisma/actions/applications';
+import type { $Enums } from '@/prisma/client';
+
+import {
+  APPLICATION_STATUS_ACTION_LABELS,
+  APPLICATION_STATUS_LABELS,
+  APPLICATION_STATUS_TRANSITIONS,
+  NON_REVIEWABLE_APPLICATION_STATUS_NOTES,
+  REJECTABLE_APPLICATION_STATUSES,
+  TERMINAL_DECISION_STATUS_NOTES,
+  isNonReviewableApplicationStatus,
+} from '@/lib/constants';
+
+import { Button } from '@/components/ui/button';
+import { ConfirmDialog } from '@/components/ui/confirm-dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+interface ApplicationStatusActionsProps {
+  applicationId: string;
+  currentStatus: $Enums.ApplicationStatus;
+  applicantName?: string;
+  compact?: boolean;
+}
+
+const CONFIRM_COPY = {
+  accepted: {
+    title: (name: string) => `Accept ${name}?`,
+    description:
+      "They'll see Accepted on their application and can no longer withdraw it. You can move this back later.",
+    confirmLabel: 'Accept',
+    pendingLabel: 'Accepting…',
+  },
+  rejected: {
+    title: (name: string) => `Reject ${name}?`,
+    description:
+      "They'll see Rejected on their application and can no longer withdraw it. You can move this back later.",
+    confirmLabel: 'Reject',
+    pendingLabel: 'Rejecting…',
+  },
+} as const;
+
+export function ApplicationStatusActions({
+  applicationId,
+  currentStatus,
+  applicantName,
+  compact,
+}: ApplicationStatusActionsProps) {
+  const [isPending, startTransition] = useTransition();
+  const [pendingTarget, setPendingTarget] =
+    useState<$Enums.ApplicationStatus | null>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [confirmTarget, setConfirmTarget] = useState<'accepted' | 'rejected'>(
+    'accepted',
+  );
+  const [confirmOpen, setConfirmOpen] = useState(false);
+
+  const displayName = applicantName ?? 'this application';
+
+  function performMove(
+    target: $Enums.ApplicationStatus,
+    onSettled?: () => void,
+  ) {
+    setPendingTarget(target);
+    startTransition(async () => {
+      try {
+        const result = await updateApplicationStatus({
+          applicationId,
+          status: target,
+        });
+        if (result && 'error' in result) {
+          toast.error(result.error);
+          return;
+        }
+        toast.success(`Moved to ${APPLICATION_STATUS_LABELS[target]}`);
+      } catch {
+        toast.error('Something went wrong. Please try again.');
+      } finally {
+        setPendingTarget(null);
+        onSettled?.();
+      }
+    });
+  }
+
+  function openConfirm(target: 'accepted' | 'rejected') {
+    setConfirmTarget(target);
+    setConfirmOpen(true);
+  }
+
+  function handleForwardSelect(target: $Enums.ApplicationStatus) {
+    if (target === 'accepted') openConfirm('accepted');
+    else performMove(target);
+  }
+
+  if (isNonReviewableApplicationStatus(currentStatus)) {
+    if (compact) return null;
+    return (
+      <p className="text-muted-foreground text-xs">
+        {NON_REVIEWABLE_APPLICATION_STATUS_NOTES[currentStatus]}
+      </p>
+    );
+  }
+
+  const isTerminalDecision =
+    currentStatus === 'accepted' || currentStatus === 'rejected';
+  const { forward, back } = APPLICATION_STATUS_TRANSITIONS[currentStatus];
+  const isRejectable = (
+    REJECTABLE_APPLICATION_STATUSES as readonly $Enums.ApplicationStatus[]
+  ).includes(currentStatus);
+
+  const confirmCopy = CONFIRM_COPY[confirmTarget];
+
+  const confirmDialog = (
+    <ConfirmDialog
+      open={confirmOpen}
+      onOpenChange={setConfirmOpen}
+      title={confirmCopy.title(displayName)}
+      description={confirmCopy.description}
+      confirmLabel={confirmCopy.confirmLabel}
+      pendingLabel={confirmCopy.pendingLabel}
+      destructive={confirmTarget === 'rejected'}
+      isPending={isPending && pendingTarget === confirmTarget}
+      onConfirm={() => performMove(confirmTarget, () => setConfirmOpen(false))}
+    />
+  );
+
+  if (compact) {
+    return (
+      <>
+        <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              aria-label={`Change status for ${displayName}`}
+            >
+              <MoreHorizontal aria-hidden />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {forward.map((target) => (
+              <DropdownMenuItem
+                key={target}
+                onSelect={(e) => {
+                  e.preventDefault();
+                  setMenuOpen(false);
+                  handleForwardSelect(target);
+                }}
+              >
+                {APPLICATION_STATUS_ACTION_LABELS[target]}
+              </DropdownMenuItem>
+            ))}
+            {isRejectable && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  variant="destructive"
+                  onSelect={(e) => {
+                    e.preventDefault();
+                    setMenuOpen(false);
+                    openConfirm('rejected');
+                  }}
+                >
+                  {APPLICATION_STATUS_ACTION_LABELS.rejected}
+                </DropdownMenuItem>
+              </>
+            )}
+            {back.length > 0 && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuLabel>Move back</DropdownMenuLabel>
+                {back.map((target) => (
+                  <DropdownMenuItem
+                    key={target}
+                    onSelect={(e) => {
+                      e.preventDefault();
+                      setMenuOpen(false);
+                      performMove(target);
+                    }}
+                  >
+                    Move back to {APPLICATION_STATUS_LABELS[target]}
+                  </DropdownMenuItem>
+                ))}
+              </>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+        {confirmDialog}
+      </>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      {isTerminalDecision && (
+        <p className="text-muted-foreground text-xs">
+          {TERMINAL_DECISION_STATUS_NOTES[currentStatus]}
+        </p>
+      )}
+      {!isTerminalDecision && (
+        <div className="flex flex-col gap-2">
+          {forward.map((target, i) => (
+            <Button
+              key={target}
+              variant={i === 0 ? 'default' : 'outline'}
+              className="w-full"
+              disabled={isPending}
+              onClick={() => handleForwardSelect(target)}
+            >
+              {isPending && pendingTarget === target && (
+                <Loader2 className="animate-spin" aria-hidden />
+              )}
+              {APPLICATION_STATUS_ACTION_LABELS[target]}
+            </Button>
+          ))}
+          {isRejectable && (
+            <Button
+              variant="outline"
+              className="text-destructive hover:text-destructive w-full"
+              disabled={isPending}
+              onClick={() => openConfirm('rejected')}
+            >
+              {isPending && pendingTarget === 'rejected' && (
+                <Loader2 className="animate-spin" aria-hidden />
+              )}
+              {APPLICATION_STATUS_ACTION_LABELS.rejected}
+            </Button>
+          )}
+        </div>
+      )}
+      {back.length > 0 && (
+        <div className="flex flex-col gap-1 border-t pt-3">
+          {back.map((target) => (
+            <Button
+              key={target}
+              variant="ghost"
+              size="sm"
+              className="text-muted-foreground w-full justify-start"
+              disabled={isPending}
+              onClick={() => performMove(target)}
+            >
+              {isPending && pendingTarget === target && (
+                <Loader2 className="animate-spin" aria-hidden />
+              )}
+              Move back to {APPLICATION_STATUS_LABELS[target]}
+            </Button>
+          ))}
+        </div>
+      )}
+      {confirmDialog}
+    </div>
+  );
+}