feat(ContractItemListItem, ContractProgressBar): add contract item display with progress bar and badge

Author: Barata-Ribeiro

resources/js/components/helpers/contract-item-list-item.tsx

@@ -0,0 +1,54 @@
+import { formatCurrency, normalizeString } from '@/lib/utils';
+import { Contract } from '@/types/application/contract';
+import { ContractType } from '@/types/application/enums';
+import { format } from 'date-fns';
+import { Badge } from '../ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
+import ContractProgressBar from './contract-progress-bar';
+
+const getContractTypeBadgeVariant = (type: ContractType) => {
+    switch (type) {
+        case ContractType.FullTime:
+            return 'default';
+        case ContractType.PartTime:
+            return 'secondary';
+        case ContractType.Contractor:
+        case ContractType.Intern:
+            return 'outline';
+        default:
+            return 'secondary';
+    }
+};
+
+export default function ContractItemListItem({ contract }: Readonly<{ contract: Contract }>) {
+    return (
+        <Card role="listitem">
+            <CardHeader>
+                <div className="items-center justify-between gap-2">
+                    <div className="flex flex-wrap items-center gap-3">
+                        <CardTitle className="text-lg">Contract #{contract.id}</CardTitle>
+                        <Badge variant={getContractTypeBadgeVariant(contract.contract_type)} className="select-none">
+                            {normalizeString(contract.contract_type)}
+                        </Badge>
+                    </div>
+
+                    <div className="text-right">
+                        <p className="text-sm font-medium text-muted-foreground">Rate</p>
+                        <p className="text-lg font-bold">
+                            {formatCurrency(contract.rate)}{' '}
+                            <span className="text-sm text-muted-foreground">/{contract.rate_type}</span>
+                        </p>
+                    </div>
+                </div>
+            </CardHeader>
+
+            <CardContent className="space-y-4">
+                <div className="mb-2 flex justify-between text-sm text-muted-foreground">
+                    <span>{format(contract.start_date, 'PPP')}</span>
+                    <span>{format(contract.end_date, 'PPP')}</span>
+                </div>
+                <ContractProgressBar startDate={String(contract.start_date)} endDate={String(contract.end_date)} />
+            </CardContent>
+        </Card>
+    );
+}

resources/js/components/helpers/contract-progress-bar.tsx

@@ -0,0 +1,59 @@
+import { Progress } from '@/components/ui/progress';
+import { formatDistanceToNowStrict } from 'date-fns';
+
+interface ContractProgressBarProps {
+    startDate: string;
+    endDate: string;
+}
+
+export default function ContractProgressBar({ startDate, endDate }: Readonly<ContractProgressBarProps>) {
+    const startMs = Date.parse(startDate);
+    const endMs = Date.parse(endDate);
+    const now = Date.now();
+
+    // Guard: if dates are invalid or duration is zero/negative, show empty progress
+    if (Number.isNaN(startMs) || Number.isNaN(endMs) || endMs <= startMs) {
+        return (
+            <div className="space-y-2">
+                <Progress value={0} className="transition-all" />
+                <div className="flex justify-between text-xs text-muted-foreground">
+                    <span>Not Available</span>
+                    <span>Invalid contract dates</span>
+                </div>
+            </div>
+        );
+    }
+
+    const total = endMs - startMs;
+    const elapsed = Math.max(0, Math.min(now - startMs, total));
+    const percent = Math.round((elapsed / total) * 100);
+
+    const isCompleted = now > endMs;
+    const isActive = now >= startMs && now <= endMs;
+
+    let displayValue: number;
+    if (isCompleted) displayValue = 100;
+    else if (isActive) displayValue = percent;
+    else displayValue = 0;
+
+    let statusText: string;
+    if (isCompleted) statusText = 'Completed';
+    else if (isActive) statusText = `${percent}% Complete`;
+    else statusText = 'Not Started';
+
+    let detailText: string;
+    if (isCompleted) detailText = `Ended ${formatDistanceToNowStrict(endMs, { addSuffix: true })}`;
+    else if (isActive)
+        detailText = `${percent}% Complete - ${formatDistanceToNowStrict(endMs, { addSuffix: true })} left`;
+    else detailText = `Not Started - Starts in ${formatDistanceToNowStrict(startMs, { addSuffix: true })}`;
+
+    return (
+        <div className="space-y-2">
+            <Progress value={displayValue} className="transition-all" />
+            <div className="flex justify-between text-xs text-muted-foreground">
+                <span>{statusText}</span>
+                <span>{detailText}</span>
+            </div>
+        </div>
+    );
+}