490 lines
18 KiB
TypeScript
490 lines
18 KiB
TypeScript
import { useMemo, useState } from "react";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import { format } from "date-fns";
|
|
import { useSelector } from "react-redux";
|
|
import { Calendar, MapPin, Users, DollarSign, Edit3, X, Copy, Clock, FileText, UserPlus } from "lucide-react";
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/common/components/ui/card";
|
|
import { Button } from "@/common/components/ui/button";
|
|
import { Badge } from "@/common/components/ui/badge";
|
|
import DashboardLayout from "@/features/layouts/DashboardLayout";
|
|
import { useGetOrderById, useUpdateOrder, useListShiftRolesByBusinessAndOrder } from "@/dataconnect-generated/react";
|
|
import { OrderStatus } from "@/dataconnect-generated";
|
|
import { dataConnect } from "@/features/auth/firebase";
|
|
import { useToast } from "@/common/components/ui/use-toast";
|
|
import AssignStaffModal from "./components/AssignStaffModal";
|
|
import type { RootState } from "@/store/store";
|
|
|
|
const safeFormatDate = (value?: string | null): string => {
|
|
if (!value) return "—";
|
|
try {
|
|
const d = new Date(value);
|
|
if (Number.isNaN(d.getTime())) return "—";
|
|
return format(d, "MMM d, yyyy");
|
|
} catch {
|
|
return "—";
|
|
}
|
|
};
|
|
|
|
const safeFormatDateTime = (value?: string | null): string => {
|
|
if (!value) return "—";
|
|
try {
|
|
const d = new Date(value);
|
|
if (Number.isNaN(d.getTime())) return "—";
|
|
return format(d, "MMM d, yyyy • h:mm a");
|
|
} catch {
|
|
return "—";
|
|
}
|
|
};
|
|
|
|
const getStatusBadge = (status: OrderStatus) => {
|
|
switch (status) {
|
|
case OrderStatus.FULLY_STAFFED:
|
|
case OrderStatus.FILLED:
|
|
return (
|
|
<Badge className="bg-emerald-500 hover:bg-emerald-600 text-white border-none font-bold uppercase text-[10px]">
|
|
Fully Staffed
|
|
</Badge>
|
|
);
|
|
case OrderStatus.PARTIAL_STAFFED:
|
|
return (
|
|
<Badge className="bg-orange-500 hover:bg-orange-600 text-white border-none font-bold uppercase text-[10px]">
|
|
Partial Staffed
|
|
</Badge>
|
|
);
|
|
case OrderStatus.PENDING:
|
|
case OrderStatus.POSTED:
|
|
return (
|
|
<Badge className="bg-blue-500 hover:bg-blue-600 text-white border-none font-bold uppercase text-[10px]">
|
|
{status}
|
|
</Badge>
|
|
);
|
|
case OrderStatus.CANCELLED:
|
|
return (
|
|
<Badge className="bg-red-500 hover:bg-red-600 text-white border-none font-bold uppercase text-[10px]">
|
|
Cancelled
|
|
</Badge>
|
|
);
|
|
case OrderStatus.COMPLETED:
|
|
return (
|
|
<Badge className="bg-slate-700 hover:bg-slate-800 text-white border-none font-bold uppercase text-[10px]">
|
|
Completed
|
|
</Badge>
|
|
);
|
|
case OrderStatus.DRAFT:
|
|
default:
|
|
return (
|
|
<Badge variant="outline" className="font-bold uppercase text-[10px]">
|
|
{status}
|
|
</Badge>
|
|
);
|
|
}
|
|
};
|
|
|
|
export default function OrderDetail() {
|
|
const navigate = useNavigate();
|
|
const { id } = useParams<{ id: string }>();
|
|
const { toast } = useToast();
|
|
const { user } = useSelector((state: RootState) => state.auth);
|
|
const [selectedShift, setSelectedShift] = useState<any>(null);
|
|
const [isAssignModalOpen, setIsAssignModalOpen] = useState(false);
|
|
|
|
const {
|
|
data,
|
|
isLoading,
|
|
} = useGetOrderById(
|
|
dataConnect,
|
|
{ id: id || "" },
|
|
{
|
|
enabled: !!id,
|
|
},
|
|
);
|
|
|
|
const order = data?.order;
|
|
|
|
// Fetch real shift roles to get IDs and accurate counts
|
|
const {
|
|
data: shiftRolesData,
|
|
isLoading: isLoadingShifts,
|
|
refetch: refetchShifts
|
|
} = useListShiftRolesByBusinessAndOrder(
|
|
dataConnect,
|
|
{
|
|
orderId: id || "",
|
|
businessId: order?.businessId || ""
|
|
},
|
|
{
|
|
enabled: !!id && !!order?.businessId,
|
|
}
|
|
);
|
|
|
|
const cancelMutation = useUpdateOrder(dataConnect, {
|
|
onSuccess: () => {
|
|
toast({
|
|
title: "Order cancelled",
|
|
description: "The order status has been updated to Cancelled.",
|
|
});
|
|
},
|
|
onError: () => {
|
|
toast({
|
|
title: "Failed to cancel order",
|
|
description: "Please try again or contact support.",
|
|
variant: "destructive",
|
|
});
|
|
},
|
|
});
|
|
|
|
const canModify = useMemo(() => {
|
|
if (!order) return false;
|
|
const status = order.status as OrderStatus;
|
|
return status !== OrderStatus.CANCELLED && status !== OrderStatus.COMPLETED;
|
|
}, [order]);
|
|
|
|
const handleCancel = () => {
|
|
if (!order || !id || !canModify) return;
|
|
cancelMutation.mutate({
|
|
id,
|
|
status: OrderStatus.CANCELLED,
|
|
});
|
|
};
|
|
|
|
const handleEdit = () => {
|
|
if (!order || !id) return;
|
|
navigate(`/orders/${id}/edit`);
|
|
};
|
|
|
|
const handleDuplicate = () => {
|
|
if (!order || !id) return;
|
|
// Placeholder: route can later pre-fill a new order from this one
|
|
navigate(`/orders/create?duplicate=${id}`);
|
|
};
|
|
|
|
const shifts: any[] = useMemo(() => {
|
|
if (shiftRolesData?.shiftRoles && shiftRolesData.shiftRoles.length > 0) {
|
|
return shiftRolesData.shiftRoles;
|
|
}
|
|
return Array.isArray(order?.shifts) ? (order!.shifts as any[]) : [];
|
|
}, [shiftRolesData, order?.shifts]);
|
|
|
|
const totalRequested = order?.requested ?? 0;
|
|
const totalAssigned = Array.isArray(order?.assignedStaff) ? order!.assignedStaff.length : 0;
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<DashboardLayout title="Order Detail" subtitle="Loading order details">
|
|
<div className="flex items-center justify-center min-h-[40vh]">
|
|
<div className="w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin" />
|
|
</div>
|
|
</DashboardLayout>
|
|
);
|
|
}
|
|
|
|
if (!order) {
|
|
return (
|
|
<DashboardLayout title="Order Not Found" subtitle="The requested order could not be located">
|
|
<div className="flex flex-col items-center justify-center min-h-[40vh] space-y-4">
|
|
<p className="text-muted-foreground">This order may have been deleted or the link is invalid.</p>
|
|
<Button variant="outline" onClick={() => navigate("/orders")}>
|
|
Back to Orders
|
|
</Button>
|
|
</div>
|
|
</DashboardLayout>
|
|
);
|
|
}
|
|
|
|
const isClient = user?.userRole === "client";
|
|
|
|
const clientName = order.business?.businessName || "Unknown client";
|
|
const eventDateLabel = safeFormatDate(order.date as string | null);
|
|
const locationLabel = order.business?.businessName || "—";
|
|
|
|
const timelineItems = [
|
|
{
|
|
label: "Order created",
|
|
value: safeFormatDateTime(order.createdAt as string | null),
|
|
},
|
|
{
|
|
label: "Event date",
|
|
value: eventDateLabel,
|
|
},
|
|
{
|
|
label: "Current status",
|
|
value: (order.status as string) || "—",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<DashboardLayout
|
|
title={order.eventName || "Order Detail"}
|
|
subtitle="Detailed view of this order and its shifts"
|
|
actions={
|
|
<div className="flex items-center gap-3">
|
|
{getStatusBadge(order.status as OrderStatus)}
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={handleEdit}
|
|
disabled={!canModify || !isClient}
|
|
className="rounded-xl"
|
|
>
|
|
<Edit3 className="w-4 h-4 mr-2" />
|
|
Edit
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={handleDuplicate}
|
|
className="rounded-xl"
|
|
>
|
|
<Copy className="w-4 h-4 mr-2" />
|
|
Duplicate
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
size="sm"
|
|
onClick={handleCancel}
|
|
disabled={!canModify || cancelMutation.isPending}
|
|
className="rounded-xl"
|
|
>
|
|
<X className="w-4 h-4 mr-2" />
|
|
{cancelMutation.isPending ? "Cancelling..." : "Cancel Order"}
|
|
</Button>
|
|
</div>
|
|
}
|
|
>
|
|
<div className="space-y-6">
|
|
{/* Header / Key Info */}
|
|
<Card className="bg-card border-border/50 shadow-sm">
|
|
<CardHeader className="border-b border-border/40">
|
|
<CardTitle className="text-lg font-bold text-primary-text">Order Overview</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="p-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center border border-primary/20">
|
|
<FileText className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-secondary-text font-medium uppercase tracking-wider">
|
|
Client Name
|
|
</p>
|
|
<p className="font-bold text-primary-text">{clientName}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center border border-blue-500/20">
|
|
<Calendar className="w-6 h-6 text-blue-600" />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-secondary-text font-medium uppercase tracking-wider">
|
|
Event Date
|
|
</p>
|
|
<p className="font-bold text-primary-text">{eventDateLabel}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 bg-purple-500/10 rounded-xl flex items-center justify-center border border-purple-500/20">
|
|
<MapPin className="w-6 h-6 text-purple-600" />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-secondary-text font-medium uppercase tracking-wider">
|
|
Location
|
|
</p>
|
|
<p className="font-bold text-primary-text">{locationLabel}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 bg-emerald-500/10 rounded-xl flex items-center justify-center border border-emerald-500/20">
|
|
<Users className="w-6 h-6 text-emerald-600" />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-secondary-text font-medium uppercase tracking-wider">
|
|
Staffed / Requested
|
|
</p>
|
|
<p className="font-bold text-primary-text">
|
|
{totalAssigned} / {totalRequested}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Shifts Section */}
|
|
<Card className="bg-card border-border/50 shadow-sm">
|
|
<CardHeader className="border-b border-border/40">
|
|
<CardTitle className="text-lg font-bold text-primary-text">Shifts</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="p-6 space-y-4">
|
|
{shifts.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-10 text-center text-muted-foreground">
|
|
<Users className="w-10 h-10 mb-3 text-muted-foreground/40" />
|
|
<p className="font-medium">No shifts defined for this order.</p>
|
|
<p className="text-sm">
|
|
Add shifts when creating or editing the order to see them here.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{shifts.map((shift: any, index: number) => {
|
|
const start = safeFormatDateTime(shift.startTime || shift.start || shift.date);
|
|
const end = safeFormatDateTime(shift.endTime || shift.end);
|
|
const title = shift.title || shift.positionName || shift.roleName || `Shift #${index + 1}`;
|
|
const workersNeeded = shift.workersNeeded ?? shift.requested ?? 0;
|
|
const filled =
|
|
typeof shift.filled === "number"
|
|
? shift.filled
|
|
: Array.isArray(shift.assignedStaff)
|
|
? shift.assignedStaff.length
|
|
: 0;
|
|
const vacancies = Math.max(workersNeeded - filled, 0);
|
|
|
|
return (
|
|
<div
|
|
key={index}
|
|
className="flex flex-col md:flex-row md:items-center justify-between gap-3 border border-border/60 rounded-xl px-4 py-3 bg-background/40"
|
|
>
|
|
<div className="space-y-1">
|
|
<p className="font-semibold text-primary-text">{title}</p>
|
|
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
|
<Clock className="w-3.5 h-3.5" />
|
|
<span>
|
|
{start} {end !== "—" && `→ ${end}`}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4 text-sm">
|
|
<div className="flex flex-col items-start">
|
|
<span className="text-xs text-muted-foreground uppercase tracking-wide">
|
|
Required
|
|
</span>
|
|
<span className="font-semibold">{workersNeeded || "—"}</span>
|
|
</div>
|
|
<div className="flex flex-col items-start">
|
|
<span className="text-xs text-muted-foreground uppercase tracking-wide">
|
|
Assigned
|
|
</span>
|
|
<span className="font-semibold">{filled}</span>
|
|
</div>
|
|
<div className="flex flex-col items-start">
|
|
<span className="text-xs text-muted-foreground uppercase tracking-wide">
|
|
Vacancies
|
|
</span>
|
|
<span className="font-semibold">{vacancies}</span>
|
|
</div>
|
|
|
|
{!isClient && canModify && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="ml-2 text-primary hover:text-primary hover:bg-primary/10 rounded-lg h-8 px-2"
|
|
onClick={() => {
|
|
setSelectedShift(shift);
|
|
setIsAssignModalOpen(true);
|
|
}}
|
|
>
|
|
<UserPlus className="w-4 h-4 mr-1.5" />
|
|
Assign
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Timeline Section */}
|
|
<Card className="bg-card border-border/50 shadow-sm">
|
|
<CardHeader className="border-b border-border/40">
|
|
<CardTitle className="text-lg font-bold text-primary-text">
|
|
Order Status Timeline
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="p-6">
|
|
<div className="relative pl-4 border-l border-border/70 space-y-5">
|
|
{timelineItems.map((item, idx) => (
|
|
<div key={idx} className="relative flex flex-col gap-1">
|
|
<div className="absolute -left-[9px] top-1 w-4 h-4 rounded-full border-2 border-primary bg-background" />
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
|
{item.label}
|
|
</p>
|
|
<p className="text-sm font-medium text-primary-text">{item.value}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Financial Summary (optional helper, derived from existing fields) */}
|
|
<Card className="bg-card border-border/50 shadow-sm">
|
|
<CardHeader className="border-b border-border/40">
|
|
<CardTitle className="text-lg font-bold text-primary-text">Summary</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 bg-amber-500/10 rounded-xl flex items-center justify-center border border-amber-500/20">
|
|
<DollarSign className="w-6 h-6 text-amber-600" />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-secondary-text font-medium uppercase tracking-wider">
|
|
Estimated Total
|
|
</p>
|
|
<p className="font-bold text-primary-text">
|
|
{typeof order.total === "number" ? `$${order.total.toLocaleString()}` : "—"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 bg-slate-500/10 rounded-xl flex items-center justify-center border border-slate-500/20">
|
|
<Users className="w-6 h-6 text-slate-700" />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-secondary-text font-medium uppercase tracking-wider">
|
|
Total Positions
|
|
</p>
|
|
<p className="font-bold text-primary-text">{totalRequested}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center border border-primary/20">
|
|
<Clock className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-secondary-text font-medium uppercase tracking-wider">
|
|
Order Type
|
|
</p>
|
|
<p className="font-bold text-primary-text">
|
|
{(order.orderType as string)?.replace("_", " ") || "—"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{selectedShift && (
|
|
<AssignStaffModal
|
|
isOpen={isAssignModalOpen}
|
|
onClose={() => {
|
|
setIsAssignModalOpen(false);
|
|
setSelectedShift(null);
|
|
}}
|
|
shift={selectedShift}
|
|
onSuccess={() => {
|
|
refetchShifts();
|
|
}}
|
|
/>
|
|
)}
|
|
</DashboardLayout>
|
|
);
|
|
}
|