235 lines
8.5 KiB
TypeScript
235 lines
8.5 KiB
TypeScript
|
// ================================================================
|
||
|
|
// frontend/src/components/procurement/ProcurementPlanCard.tsx
|
||
|
|
// ================================================================
|
||
|
|
/**
|
||
|
|
* Procurement Plan Card Component
|
||
|
|
* Displays a procurement plan with key information and actions
|
||
|
|
*/
|
||
|
|
|
||
|
|
import React from 'react';
|
||
|
|
import { Card } from '@/components/ui/Card';
|
||
|
|
import { Button } from '@/components/ui/Button';
|
||
|
|
import type { ProcurementPlan } from '@/api/types/procurement';
|
||
|
|
import { PlanStatus, Priority } from '@/api/types/procurement';
|
||
|
|
|
||
|
|
export interface ProcurementPlanCardProps {
|
||
|
|
plan: ProcurementPlan;
|
||
|
|
onViewDetails?: (planId: string) => void;
|
||
|
|
onUpdateStatus?: (planId: string, status: string) => void;
|
||
|
|
showActions?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const ProcurementPlanCard: React.FC<ProcurementPlanCardProps> = ({
|
||
|
|
plan,
|
||
|
|
onViewDetails,
|
||
|
|
onUpdateStatus,
|
||
|
|
showActions = false,
|
||
|
|
}) => {
|
||
|
|
const getStatusColor = (status: string) => {
|
||
|
|
const colors = {
|
||
|
|
[PlanStatus.DRAFT]: 'bg-gray-100 text-gray-800',
|
||
|
|
[PlanStatus.PENDING_APPROVAL]: 'bg-yellow-100 text-yellow-800',
|
||
|
|
[PlanStatus.APPROVED]: 'bg-blue-100 text-blue-800',
|
||
|
|
[PlanStatus.IN_EXECUTION]: 'bg-green-100 text-green-800',
|
||
|
|
[PlanStatus.COMPLETED]: 'bg-green-100 text-green-800',
|
||
|
|
[PlanStatus.CANCELLED]: 'bg-red-100 text-red-800',
|
||
|
|
};
|
||
|
|
return colors[status as keyof typeof colors] || 'bg-gray-100 text-gray-800';
|
||
|
|
};
|
||
|
|
|
||
|
|
const getPriorityColor = (priority: string) => {
|
||
|
|
const colors = {
|
||
|
|
[Priority.CRITICAL]: 'text-red-600',
|
||
|
|
[Priority.HIGH]: 'text-orange-600',
|
||
|
|
[Priority.NORMAL]: 'text-blue-600',
|
||
|
|
[Priority.LOW]: 'text-gray-600',
|
||
|
|
};
|
||
|
|
return colors[priority as keyof typeof colors] || 'text-gray-600';
|
||
|
|
};
|
||
|
|
|
||
|
|
const getRiskColor = (risk: string) => {
|
||
|
|
const colors = {
|
||
|
|
'critical': 'text-red-600',
|
||
|
|
'high': 'text-orange-600',
|
||
|
|
'medium': 'text-yellow-600',
|
||
|
|
'low': 'text-green-600',
|
||
|
|
};
|
||
|
|
return colors[risk as keyof typeof colors] || 'text-gray-600';
|
||
|
|
};
|
||
|
|
|
||
|
|
const formatCurrency = (amount: number) => {
|
||
|
|
return new Intl.NumberFormat('es-ES', {
|
||
|
|
style: 'currency',
|
||
|
|
currency: 'EUR'
|
||
|
|
}).format(amount);
|
||
|
|
};
|
||
|
|
|
||
|
|
const formatDate = (dateString: string) => {
|
||
|
|
return new Date(dateString).toLocaleDateString('es-ES', {
|
||
|
|
day: 'numeric',
|
||
|
|
month: 'short',
|
||
|
|
year: 'numeric'
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const nextStatusOptions = () => {
|
||
|
|
const options = {
|
||
|
|
[PlanStatus.DRAFT]: [PlanStatus.PENDING_APPROVAL, PlanStatus.CANCELLED],
|
||
|
|
[PlanStatus.PENDING_APPROVAL]: [PlanStatus.APPROVED, PlanStatus.CANCELLED],
|
||
|
|
[PlanStatus.APPROVED]: [PlanStatus.IN_EXECUTION, PlanStatus.CANCELLED],
|
||
|
|
[PlanStatus.IN_EXECUTION]: [PlanStatus.COMPLETED, PlanStatus.CANCELLED],
|
||
|
|
[PlanStatus.COMPLETED]: [],
|
||
|
|
[PlanStatus.CANCELLED]: [],
|
||
|
|
};
|
||
|
|
return options[plan.status as keyof typeof options] || [];
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Card className="border border-gray-200">
|
||
|
|
<div className="p-6">
|
||
|
|
{/* Header */}
|
||
|
|
<div className="flex items-start justify-between mb-4">
|
||
|
|
<div>
|
||
|
|
<div className="flex items-center space-x-3">
|
||
|
|
<h3 className="text-lg font-semibold text-gray-900">
|
||
|
|
{plan.plan_number}
|
||
|
|
</h3>
|
||
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(plan.status)}`}>
|
||
|
|
{plan.status.replace('_', ' ').toUpperCase()}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<p className="text-sm text-gray-600 mt-1">
|
||
|
|
Plan Date: {formatDate(plan.plan_date)} |
|
||
|
|
Period: {formatDate(plan.plan_period_start)} - {formatDate(plan.plan_period_end)}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="text-right">
|
||
|
|
<div className={`text-sm font-medium ${getPriorityColor(plan.priority)}`}>
|
||
|
|
{plan.priority.toUpperCase()} Priority
|
||
|
|
</div>
|
||
|
|
<div className={`text-xs ${getRiskColor(plan.supply_risk_level)}`}>
|
||
|
|
{plan.supply_risk_level.toUpperCase()} Risk
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Key Metrics */}
|
||
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="text-2xl font-bold text-blue-600">
|
||
|
|
{plan.total_requirements}
|
||
|
|
</div>
|
||
|
|
<div className="text-xs text-gray-500">Requirements</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="text-2xl font-bold text-green-600">
|
||
|
|
{formatCurrency(plan.total_estimated_cost)}
|
||
|
|
</div>
|
||
|
|
<div className="text-xs text-gray-500">Est. Cost</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="text-2xl font-bold text-purple-600">
|
||
|
|
{plan.primary_suppliers_count}
|
||
|
|
</div>
|
||
|
|
<div className="text-xs text-gray-500">Suppliers</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="text-2xl font-bold text-orange-600">
|
||
|
|
{plan.safety_stock_buffer}%
|
||
|
|
</div>
|
||
|
|
<div className="text-xs text-gray-500">Safety Buffer</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Requirements Summary */}
|
||
|
|
{plan.requirements && plan.requirements.length > 0 && (
|
||
|
|
<div className="mb-4">
|
||
|
|
<h4 className="text-sm font-medium text-gray-700 mb-2">
|
||
|
|
Top Requirements ({plan.requirements.length} total)
|
||
|
|
</h4>
|
||
|
|
<div className="space-y-1">
|
||
|
|
{plan.requirements.slice(0, 3).map((req) => (
|
||
|
|
<div key={req.id} className="flex justify-between items-center text-sm">
|
||
|
|
<span className="truncate">{req.product_name}</span>
|
||
|
|
<div className="flex items-center space-x-2">
|
||
|
|
<span className="text-gray-500">
|
||
|
|
{req.net_requirement} {req.unit_of_measure}
|
||
|
|
</span>
|
||
|
|
<span className={`px-1 py-0.5 rounded text-xs ${
|
||
|
|
req.priority === Priority.CRITICAL ? 'bg-red-100 text-red-700' :
|
||
|
|
req.priority === Priority.HIGH ? 'bg-orange-100 text-orange-700' :
|
||
|
|
'bg-gray-100 text-gray-700'
|
||
|
|
}`}>
|
||
|
|
{req.priority}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
{plan.requirements.length > 3 && (
|
||
|
|
<div className="text-xs text-gray-500 text-center">
|
||
|
|
+{plan.requirements.length - 3} more requirements
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Performance Metrics */}
|
||
|
|
{(plan.fulfillment_rate || plan.on_time_delivery_rate) && (
|
||
|
|
<div className="flex items-center space-x-4 text-sm text-gray-600 mb-4">
|
||
|
|
{plan.fulfillment_rate && (
|
||
|
|
<span>Fulfillment: {plan.fulfillment_rate}%</span>
|
||
|
|
)}
|
||
|
|
{plan.on_time_delivery_rate && (
|
||
|
|
<span>On-time: {plan.on_time_delivery_rate}%</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Actions */}
|
||
|
|
{showActions && (
|
||
|
|
<div className="flex items-center justify-between pt-4 border-t border-gray-100">
|
||
|
|
<div className="flex space-x-2">
|
||
|
|
{nextStatusOptions().map((status) => (
|
||
|
|
<Button
|
||
|
|
key={status}
|
||
|
|
size="sm"
|
||
|
|
variant="outline"
|
||
|
|
onClick={() => onUpdateStatus?.(plan.id, status)}
|
||
|
|
>
|
||
|
|
{status === PlanStatus.PENDING_APPROVAL && 'Submit for Approval'}
|
||
|
|
{status === PlanStatus.APPROVED && 'Approve'}
|
||
|
|
{status === PlanStatus.IN_EXECUTION && 'Start Execution'}
|
||
|
|
{status === PlanStatus.COMPLETED && 'Mark Complete'}
|
||
|
|
{status === PlanStatus.CANCELLED && 'Cancel'}
|
||
|
|
</Button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Button
|
||
|
|
size="sm"
|
||
|
|
variant="ghost"
|
||
|
|
onClick={() => onViewDetails?.(plan.id)}
|
||
|
|
>
|
||
|
|
View Details →
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Special Requirements */}
|
||
|
|
{plan.special_requirements && (
|
||
|
|
<div className="mt-4 p-3 bg-blue-50 rounded-lg">
|
||
|
|
<h5 className="text-sm font-medium text-blue-800 mb-1">
|
||
|
|
Special Requirements
|
||
|
|
</h5>
|
||
|
|
<p className="text-sm text-blue-700">{plan.special_requirements}</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
};
|