feat(ticket): add shared extension request history for workers and managers

src/app/(modules)/ticket/[ticketId]/components/TicketStatusActions.tsx

@@ -43,19 +43,32 @@ function getTicketAction(
   ticketId: string,
   assignment?: TicketAssignmentSummary,
 ) {
-  if (assignment && !assignment.is_complete) {
+  if (assignment) {
     return (
       <PermissionGuard
         permissions={PERMISSIONS.TICKET.ASSIGN}
         fallback={
           <PermissionGuard
             permissions={PERMISSIONS.TICKET.WORK}
-            fallback={<NoTicketAction />}
+            fallback={
+              <PermissionGuard
+                permissions={PERMISSIONS.TICKET.READ}
+                fallback={<NoTicketAction />}
+              >
+                <RequestExtensionAction
+                  ticketId={ticketId}
+                  assignmentId={assignment.id}
+                  dueAt={assignment.due_at}
+                  canRequest={false}
+                />
+              </PermissionGuard>
+            }
           >
             <RequestExtensionAction
               ticketId={ticketId}
               assignmentId={assignment.id}
               dueAt={assignment.due_at}
+              canRequest={!assignment.is_complete}
             />
           </PermissionGuard>
         }
@@ -63,6 +76,7 @@ function getTicketAction(
         <ReviewExtensionRequestAction
           ticketId={ticketId}
           assignmentId={assignment.id}
+          canReview={!assignment.is_complete}
         />
       </PermissionGuard>
     );

src/app/(modules)/ticket/[ticketId]/components/actions/ExtensionRequestHistoryDialog.tsx

@@ -0,0 +1,162 @@
+'use client';
+
+import { ArrowRight, History } from 'lucide-react';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { cn } from '@/lib/utils';
+import type {
+  TicketExtensionRequest,
+  TicketExtensionRequestStatus,
+} from '@/types';
+import { formatDate } from '@/utils/date';
+
+const statusConfig: Record<
+  TicketExtensionRequestStatus,
+  { label: string; className: string }
+> = {
+  pending: {
+    label: 'Pending',
+    className:
+      'border-amber-200 bg-amber-100 text-amber-800 dark:border-amber-900 dark:bg-amber-950/50 dark:text-amber-300',
+  },
+  approved: {
+    label: 'Approved',
+    className:
+      'border-emerald-200 bg-emerald-100 text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/50 dark:text-emerald-300',
+  },
+  rejected: {
+    label: 'Rejected',
+    className:
+      'border-red-200 bg-red-100 text-red-800 dark:border-red-900 dark:bg-red-950/50 dark:text-red-300',
+  },
+  cancelled: {
+    label: 'Cancelled',
+    className: 'border-border bg-muted text-muted-foreground',
+  },
+};
+
+function HistoryItem({ request }: { request: TicketExtensionRequest }) {
+  const status = statusConfig[request.status];
+
+  return (
+    <article className="space-y-3 rounded-lg border p-4">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <Badge variant="outline" className={cn('border', status.className)}>
+          {status.label}
+        </Badge>
+        <span className="text-xs text-muted-foreground">
+          Requested {formatDate(request.requested_at)}
+        </span>
+      </div>
+
+      <div>
+        <p className="text-xs text-muted-foreground">Requested By</p>
+        <p className="mt-0.5 text-sm font-medium">
+          {request.requested_by?.name ?? 'Assigned worker'}
+        </p>
+      </div>
+
+      <div className="grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-start gap-3 rounded-lg bg-muted/40 p-3">
+        <div>
+          <p className="text-xs text-muted-foreground">Previous Due Date</p>
+          <p className="mt-1 text-sm font-medium">
+            {formatDate(request.current_due_at)}
+          </p>
+        </div>
+        <ArrowRight className="mt-5 size-4 text-muted-foreground" />
+        <div>
+          <p className="text-xs text-muted-foreground">Requested Due Date</p>
+          <p className="mt-1 text-sm font-medium">
+            {formatDate(request.requested_due_at)}
+          </p>
+        </div>
+      </div>
+
+      <div>
+        <p className="text-xs text-muted-foreground">Reason</p>
+        <p className="mt-1 text-sm leading-relaxed">{request.reason}</p>
+      </div>
+
+      {request.resolved_at || request.resolved_by || request.decision_note ? (
+        <div className="space-y-2 border-t pt-3">
+          <p className="text-xs font-semibold">Manager Response</p>
+          <div className="grid gap-2 text-sm sm:grid-cols-2">
+            {request.resolved_by ? (
+              <div>
+                <p className="text-xs text-muted-foreground">Resolved By</p>
+                <p className="mt-0.5 font-medium">
+                  {request.resolved_by.name} · {request.resolved_by.role.name}
+                </p>
+              </div>
+            ) : null}
+            {request.resolved_at ? (
+              <div>
+                <p className="text-xs text-muted-foreground">Resolved On</p>
+                <p className="mt-0.5 font-medium">
+                  {formatDate(request.resolved_at)}
+                </p>
+              </div>
+            ) : null}
+          </div>
+          {request.decision_note ? (
+            <div>
+              <p className="text-xs text-muted-foreground">Manager Comments</p>
+              <p className="mt-1 text-sm leading-relaxed">
+                {request.decision_note}
+              </p>
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </article>
+  );
+}
+
+export function ExtensionRequestHistoryDialog({
+  requests,
+}: {
+  requests: TicketExtensionRequest[];
+}) {
+  const sortedRequests = [...requests].sort(
+    (left, right) =>
+      new Date(right.requested_at).getTime() -
+      new Date(left.requested_at).getTime(),
+  );
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button type="button" variant="outline" className="w-full">
+          <History />
+          View Request History ({requests.length})
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Extension Request History</DialogTitle>
+          <DialogDescription>
+            Review every deadline extension request and manager decision for
+            this ticket lot.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogBody className="space-y-3">
+          {sortedRequests.map((request) => (
+            <HistoryItem key={request.id} request={request} />
+          ))}
+        </DialogBody>
+        <DialogFooter showCloseButton />
+      </DialogContent>
+    </Dialog>
+  );
+}

src/app/(modules)/ticket/[ticketId]/components/actions/RequestExtensionAction.tsx

@@ -7,21 +7,24 @@ export function RequestExtensionAction({
   ticketId,
   assignmentId,
   dueAt,
+  canRequest,
 }: {
   ticketId: string;
   assignmentId: number;
   dueAt: string | null;
+  canRequest: boolean;
 }) {
   return (
     <TicketActionCard
       icon={Clock3}
-      title="Request Extension"
+      title={canRequest ? 'Request Extension' : 'Extension Request History'}
       contextLabel={`Lot ${assignmentId}`}
     >
       <TicketExtensionRequestPanel
         ticketId={ticketId}
         assignmentId={assignmentId}
         dueAt={dueAt}
+        canRequest={canRequest}
       />
     </TicketActionCard>
   );

src/app/(modules)/ticket/[ticketId]/components/actions/ReviewExtensionRequestAction.tsx

@@ -33,6 +33,11 @@ import {
   useExtensionRequestDecision,
 } from '../../../../extension-requests/hooks/useExtensionRequestDecision';
 import { useTicketExtensionRequestQuery } from '../../../hooks/useTicketQueries';
+import { ExtensionRequestHistoryDialog } from './ExtensionRequestHistoryDialog';
+import {
+  ExtensionRequestDetails,
+  getLatestRequest,
+} from './TicketExtensionRequestPanel';
 import { TicketActionCard } from './TicketActionCard';
 
 function getPendingRequest(response: TicketExtensionRequestsResponse) {
@@ -86,10 +91,12 @@ function ExtensionReviewForm({
   ticketId,
   assignmentId,
   request,
+  requests,
 }: {
   ticketId: string;
   assignmentId: number;
   request: TicketExtensionRequest;
+  requests: TicketExtensionRequest[];
 }) {
   const {
     note,
@@ -210,6 +217,8 @@ function ExtensionReviewForm({
           </Button>
         </div>
 
+        <ExtensionRequestHistoryDialog requests={requests} />
+
         <AlertDialog
           open={isRejectConfirmationOpen}
           onOpenChange={setIsRejectConfirmationOpen}
@@ -242,9 +251,11 @@ function ExtensionReviewForm({
 export function ReviewExtensionRequestAction({
   ticketId,
   assignmentId,
+  canReview,
 }: {
   ticketId: string;
   assignmentId: number;
+  canReview: boolean;
 }) {
   const extensionRequestQuery = useTicketExtensionRequestQuery(
     ticketId,
@@ -274,13 +285,32 @@ export function ReviewExtensionRequestAction({
     ? getPendingRequest(extensionRequestQuery.data)
     : null;
 
-  if (!pendingRequest) return null;
+  const requests = extensionRequestQuery.data?.items ?? [];
+
+  if (!pendingRequest || !canReview) {
+    const latestRequest = extensionRequestQuery.data
+      ? getLatestRequest(extensionRequestQuery.data)
+      : null;
+
+    if (!latestRequest) return null;
+
+    return (
+      <TicketActionCard
+        icon={CalendarClock}
+        title="Extension Request"
+        contextLabel={`Lot ${assignmentId}`}
+      >
+        <ExtensionRequestDetails request={latestRequest} requests={requests} />
+      </TicketActionCard>
+    );
+  }
 
   return (
     <ExtensionReviewForm
       ticketId={ticketId}
       assignmentId={assignmentId}
       request={pendingRequest}
+      requests={requests}
     />
   );
 }

src/app/(modules)/ticket/[ticketId]/components/actions/TicketExtensionRequestPanel.tsx

@@ -1,12 +1,13 @@
 'use client';
 
+import { useState } from 'react';
 import {
   AlertCircle,
   CalendarDays,
   CheckCircle2,
   Clock3,
-  History,
   Loader2,
+  Plus,
   RotateCcw,
   XCircle,
 } from 'lucide-react';
@@ -20,6 +21,7 @@ import type {
 import { formatDate } from '@/utils/date';
 
 import { useTicketExtensionRequestQuery } from '../../../hooks/useTicketQueries';
+import { ExtensionRequestHistoryDialog } from './ExtensionRequestHistoryDialog';
 import { RequestExtensionForm } from './RequestExtensionForm';
 
 interface DetailRowProps {
@@ -44,21 +46,21 @@ function DetailRow({ label, value, children, className }: DetailRowProps) {
 const statusConfig = {
   pending: {
     title: 'Request Pending',
-    description: 'Your extension request is waiting for manager approval.',
+    description: 'This extension request is waiting for manager approval.',
     icon: Clock3,
     className:
       'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900/60 dark:bg-amber-950/30 dark:text-amber-300',
   },
   approved: {
     title: 'Request Approved',
-    description: 'Your extension request has been approved by the manager.',
+    description: 'This extension request was approved by the manager.',
     icon: CheckCircle2,
     className:
       'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900/60 dark:bg-emerald-950/30 dark:text-emerald-300',
   },
   rejected: {
     title: 'Request Rejected',
-    description: 'Your extension request has been rejected by the manager.',
+    description: 'This extension request was rejected by the manager.',
     icon: AlertCircle,
     className:
       'border-red-200 bg-red-50 text-red-700 dark:border-red-900/60 dark:bg-red-950/30 dark:text-red-300',
@@ -79,7 +81,7 @@ const statusConfig = {
   }
 >;
 
-function getLatestRequest(response: TicketExtensionRequestsResponse) {
+export function getLatestRequest(response: TicketExtensionRequestsResponse) {
   return response.items.reduce<TicketExtensionRequest | null>(
     (latest, item) => {
       if (!latest) return item;
@@ -98,10 +100,14 @@ function getExtensionDays(request: TicketExtensionRequest) {
   return Math.max(0, Math.ceil(difference / (24 * 60 * 60 * 1000)));
 }
 
-function ExtensionRequestDetails({
+export function ExtensionRequestDetails({
   request,
+  requests,
+  onRequestAnother,
 }: {
   request: TicketExtensionRequest;
+  requests: TicketExtensionRequest[];
+  onRequestAnother?: () => void;
 }) {
   const config = statusConfig[request.status];
   const StatusIcon = config.icon;
@@ -124,6 +130,10 @@ function ExtensionRequestDetails({
             label="Requested On"
             value={formatDate(request.requested_at)}
           />
+          <DetailRow
+            label="Requested By"
+            value={request.requested_by?.name ?? 'Assigned worker'}
+          />
           <DetailRow
             label="Requested Due Date"
             value={formatDate(request.requested_due_at)}
@@ -160,6 +170,12 @@ function ExtensionRequestDetails({
                 value={formatDate(request.requested_due_at)}
               />
             ) : null}
+            {request.decision_note ? (
+              <DetailRow
+                label="Manager Comments"
+                value={request.decision_note}
+              />
+            ) : null}
           </div>
         </section>
       ) : null}
@@ -176,10 +192,15 @@ function ExtensionRequestDetails({
         </div>
       </section>
 
-      <Button type="button" variant="outline" className="w-full">
+      <div className="space-y-2">
-        <History />
+        <ExtensionRequestHistoryDialog requests={requests} />
-        View Approval History
+        {request.status !== 'pending' && onRequestAnother ? (
-      </Button>
+          <Button type="button" className="w-full" onClick={onRequestAnother}>
+            <Plus />
+            Request Another Extension
+          </Button>
+        ) : null}
+      </div>
     </div>
   );
 }
@@ -188,11 +209,14 @@ export function TicketExtensionRequestPanel({
   ticketId,
   assignmentId,
   dueAt,
+  canRequest,
 }: {
   ticketId: string;
   assignmentId: number;
   dueAt: string | null;
+  canRequest: boolean;
 }) {
+  const [isRequestFormOpen, setIsRequestFormOpen] = useState(false);
   const extensionRequestQuery = useTicketExtensionRequestQuery(
     ticketId,
     assignmentId,
@@ -231,6 +255,14 @@ export function TicketExtensionRequestPanel({
     : null;
 
   if (!latestRequest) {
+    if (!canRequest) {
+      return (
+        <p className="text-sm text-muted-foreground">
+          No extension request history is available for this ticket lot.
+        </p>
+      );
+    }
+
     return (
       <RequestExtensionForm
         ticketId={ticketId}
@@ -240,5 +272,33 @@ export function TicketExtensionRequestPanel({
     );
   }
 
-  return <ExtensionRequestDetails request={latestRequest} />;
+  if (isRequestFormOpen && latestRequest.status !== 'pending') {
+    return (
+      <div className="space-y-4">
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={() => setIsRequestFormOpen(false)}
+        >
+          Back to latest request
+        </Button>
+        <RequestExtensionForm
+          ticketId={ticketId}
+          assignmentId={assignmentId}
+          currentDueAt={dueAt}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <ExtensionRequestDetails
+      request={latestRequest}
+      requests={extensionRequestQuery.data?.items ?? []}
+      onRequestAnother={
+        canRequest ? () => setIsRequestFormOpen(true) : undefined
+      }
+    />
+  );
 }