91 lines
2.5 KiB
TypeScript
91 lines
2.5 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useMutation } from '@tanstack/react-query';
|
||
|
|
import { ArrowRight, Loader2 } from 'lucide-react';
|
||
|
|
|
||
|
|
import {
|
||
|
|
Dialog,
|
||
|
|
DialogContent,
|
||
|
|
DialogDescription,
|
||
|
|
DialogFooter,
|
||
|
|
DialogHeader,
|
||
|
|
DialogTitle,
|
||
|
|
} from '@/components/ui/dialog';
|
||
|
|
import { Button } from '@/components/ui/button';
|
||
|
|
import { Badge } from '@/components/ui/badge';
|
||
|
|
import { apiFetch } from '@/lib/api/client';
|
||
|
|
|
||
|
|
interface BerthStatusSuggestionDialogProps {
|
||
|
|
open: boolean;
|
||
|
|
onOpenChange: (open: boolean) => void;
|
||
|
|
berthId: string;
|
||
|
|
currentStatus: string;
|
||
|
|
suggestedStatus: string;
|
||
|
|
reason: string;
|
||
|
|
onApplied: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function BerthStatusSuggestionDialog({
|
||
|
|
open,
|
||
|
|
onOpenChange,
|
||
|
|
berthId,
|
||
|
|
currentStatus,
|
||
|
|
suggestedStatus,
|
||
|
|
reason,
|
||
|
|
onApplied,
|
||
|
|
}: BerthStatusSuggestionDialogProps) {
|
||
|
|
const applyMutation = useMutation({
|
||
|
|
mutationFn: () =>
|
||
|
|
apiFetch(`/api/v1/berths/${berthId}/status`, {
|
||
|
|
method: 'PATCH',
|
||
|
|
body: JSON.stringify({ status: suggestedStatus, reason }),
|
||
|
|
}),
|
||
|
|
onSuccess: () => {
|
||
|
|
onApplied();
|
||
|
|
onOpenChange(false);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||
|
|
<DialogContent className="sm:max-w-md">
|
||
|
|
<DialogHeader>
|
||
|
|
<DialogTitle>Suggested Status Change</DialogTitle>
|
||
|
|
<DialogDescription>
|
||
|
|
Based on recent activity, a berth status update is recommended.
|
||
|
|
</DialogDescription>
|
||
|
|
</DialogHeader>
|
||
|
|
|
||
|
|
<div className="flex items-center justify-center gap-4 py-4">
|
||
|
|
<Badge variant="outline" className="text-base px-4 py-1.5">
|
||
|
|
{currentStatus.replace(/_/g, ' ')}
|
||
|
|
</Badge>
|
||
|
|
<ArrowRight className="h-5 w-5 text-muted-foreground" />
|
||
|
|
<Badge variant="default" className="text-base px-4 py-1.5">
|
||
|
|
{suggestedStatus.replace(/_/g, ' ')}
|
||
|
|
</Badge>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{reason && (
|
||
|
|
<p className="text-sm text-muted-foreground text-center px-4">{reason}</p>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<DialogFooter className="gap-2">
|
||
|
|
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||
|
|
Dismiss
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
onClick={() => applyMutation.mutate()}
|
||
|
|
disabled={applyMutation.isPending}
|
||
|
|
>
|
||
|
|
{applyMutation.isPending && (
|
||
|
|
<Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
|
||
|
|
)}
|
||
|
|
Apply Change
|
||
|
|
</Button>
|
||
|
|
</DialogFooter>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
);
|
||
|
|
}
|