88 lines
3.0 KiB
TypeScript
88 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
// File: components/distribution/DistributionStatus.tsx
|
|
// แสดงสถานะ Distribution ของ RFA หลังอนุมัติ (T060)
|
|
import React from 'react';
|
|
import { CheckCircle2, Clock, SendHorizonal, Users } from 'lucide-react';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
|
|
type DistributionStatusValue = 'PENDING' | 'PROCESSING' | 'COMPLETED' | 'FAILED';
|
|
|
|
interface DistributionRecord {
|
|
publicId: string;
|
|
status: DistributionStatusValue;
|
|
transmittalCount: number;
|
|
recipientCount: number;
|
|
processedAt?: string;
|
|
error?: string;
|
|
}
|
|
|
|
interface DistributionStatusProps {
|
|
rfaPublicId: string;
|
|
distribution?: DistributionRecord;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
const STATUS_CONFIG: Record<
|
|
DistributionStatusValue,
|
|
{ label: string; variant: 'default' | 'secondary' | 'destructive' | 'outline'; icon: React.ElementType }
|
|
> = {
|
|
PENDING: { label: 'Queued', variant: 'outline', icon: Clock },
|
|
PROCESSING: { label: 'Processing', variant: 'secondary', icon: Clock },
|
|
COMPLETED: { label: 'Distributed', variant: 'default', icon: CheckCircle2 },
|
|
FAILED: { label: 'Failed', variant: 'destructive', icon: Clock },
|
|
};
|
|
|
|
export function DistributionStatus({ rfaPublicId: _rfaPublicId, distribution, isLoading }: DistributionStatusProps) {
|
|
if (isLoading) {
|
|
return <div className="text-sm text-muted-foreground">Checking distribution status...</div>;
|
|
}
|
|
|
|
if (!distribution) {
|
|
return (
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
<Clock className="h-4 w-4" />
|
|
<span>Awaiting approval for distribution</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const config = STATUS_CONFIG[distribution.status];
|
|
const Icon = config.icon;
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="text-sm font-medium">Distribution Status</CardTitle>
|
|
<Badge variant={config.variant} className="gap-1">
|
|
<Icon className="h-3 w-3" />
|
|
{config.label}
|
|
</Badge>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<div className="flex items-center gap-4 text-sm">
|
|
<div className="flex items-center gap-1 text-muted-foreground">
|
|
<SendHorizonal className="h-3.5 w-3.5" />
|
|
<span>{distribution.transmittalCount} Transmittal(s)</span>
|
|
</div>
|
|
<div className="flex items-center gap-1 text-muted-foreground">
|
|
<Users className="h-3.5 w-3.5" />
|
|
<span>{distribution.recipientCount} Recipient(s)</span>
|
|
</div>
|
|
{distribution.processedAt && (
|
|
<span className="text-xs text-muted-foreground">
|
|
{new Date(distribution.processedAt).toLocaleDateString('th-TH')}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{distribution.error && (
|
|
<p className="mt-1 text-xs text-destructive">{distribution.error}</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|