421 lines
15 KiB
TypeScript
421 lines
15 KiB
TypeScript
|
// ================================================================
|
||
|
|
// frontend/src/components/dashboard/ExecutionProgressTracker.tsx
|
||
|
|
// ================================================================
|
||
|
|
/**
|
||
|
|
* Execution Progress Tracker - Plan vs Actual
|
||
|
|
*
|
||
|
|
* Shows how today's execution is progressing vs the plan.
|
||
|
|
* Helps identify bottlenecks early (e.g., deliveries running late).
|
||
|
|
*
|
||
|
|
* Features:
|
||
|
|
* - Production progress (plan vs actual batches)
|
||
|
|
* - Delivery status (received, pending, overdue)
|
||
|
|
* - Approval tracking
|
||
|
|
* - "What's next" preview
|
||
|
|
* - Status indicators (on_track, at_risk, completed)
|
||
|
|
*/
|
||
|
|
|
||
|
|
import React from 'react';
|
||
|
|
import {
|
||
|
|
Package,
|
||
|
|
Truck,
|
||
|
|
CheckCircle,
|
||
|
|
Clock,
|
||
|
|
AlertCircle,
|
||
|
|
TrendingUp,
|
||
|
|
Calendar,
|
||
|
|
} from 'lucide-react';
|
||
|
|
import { useTranslation } from 'react-i18next';
|
||
|
|
import { formatTime as formatTimeUtil } from '../../utils/date';
|
||
|
|
|
||
|
|
// ============================================================
|
||
|
|
// Types
|
||
|
|
// ============================================================
|
||
|
|
|
||
|
|
export interface ProductionProgress {
|
||
|
|
status: 'no_plan' | 'completed' | 'on_track' | 'at_risk';
|
||
|
|
total: number;
|
||
|
|
completed: number;
|
||
|
|
inProgress: number;
|
||
|
|
pending: number;
|
||
|
|
inProgressBatches?: Array<{
|
||
|
|
id: string;
|
||
|
|
batchNumber: string;
|
||
|
|
productName: string;
|
||
|
|
quantity: number;
|
||
|
|
actualStartTime: string;
|
||
|
|
estimatedCompletion: string;
|
||
|
|
}>;
|
||
|
|
nextBatch?: {
|
||
|
|
productName: string;
|
||
|
|
plannedStart: string; // ISO datetime
|
||
|
|
batchNumber: string;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
export interface DeliveryProgress {
|
||
|
|
status: 'no_deliveries' | 'completed' | 'on_track' | 'at_risk';
|
||
|
|
total: number;
|
||
|
|
received: number;
|
||
|
|
pending: number;
|
||
|
|
overdue: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
export interface ApprovalProgress {
|
||
|
|
status: 'completed' | 'on_track' | 'at_risk';
|
||
|
|
pending: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
export interface ExecutionProgress {
|
||
|
|
production: ProductionProgress;
|
||
|
|
deliveries: DeliveryProgress;
|
||
|
|
approvals: ApprovalProgress;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface ExecutionProgressTrackerProps {
|
||
|
|
progress: ExecutionProgress | null | undefined;
|
||
|
|
loading?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
// ============================================================
|
||
|
|
// Helper Functions
|
||
|
|
// ============================================================
|
||
|
|
|
||
|
|
function getStatusColor(status: string): {
|
||
|
|
bg: string;
|
||
|
|
border: string;
|
||
|
|
text: string;
|
||
|
|
icon: string;
|
||
|
|
} {
|
||
|
|
switch (status) {
|
||
|
|
case 'completed':
|
||
|
|
return {
|
||
|
|
bg: 'var(--color-success-50)',
|
||
|
|
border: 'var(--color-success-300)',
|
||
|
|
text: 'var(--color-success-900)',
|
||
|
|
icon: 'var(--color-success-600)',
|
||
|
|
};
|
||
|
|
case 'on_track':
|
||
|
|
return {
|
||
|
|
bg: 'var(--color-info-50)',
|
||
|
|
border: 'var(--color-info-300)',
|
||
|
|
text: 'var(--color-info-900)',
|
||
|
|
icon: 'var(--color-info-600)',
|
||
|
|
};
|
||
|
|
case 'at_risk':
|
||
|
|
return {
|
||
|
|
bg: 'var(--color-error-50)',
|
||
|
|
border: 'var(--color-error-300)',
|
||
|
|
text: 'var(--color-error-900)',
|
||
|
|
icon: 'var(--color-error-600)',
|
||
|
|
};
|
||
|
|
case 'no_plan':
|
||
|
|
case 'no_deliveries':
|
||
|
|
return {
|
||
|
|
bg: 'var(--bg-secondary)',
|
||
|
|
border: 'var(--border-secondary)',
|
||
|
|
text: 'var(--text-secondary)',
|
||
|
|
icon: 'var(--text-tertiary)',
|
||
|
|
};
|
||
|
|
default:
|
||
|
|
return {
|
||
|
|
bg: 'var(--bg-secondary)',
|
||
|
|
border: 'var(--border-secondary)',
|
||
|
|
text: 'var(--text-primary)',
|
||
|
|
icon: 'var(--text-secondary)',
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatTime(isoDate: string): string {
|
||
|
|
return formatTimeUtil(isoDate, 'HH:mm');
|
||
|
|
}
|
||
|
|
|
||
|
|
// ============================================================
|
||
|
|
// Sub-Components
|
||
|
|
// ============================================================
|
||
|
|
|
||
|
|
interface SectionProps {
|
||
|
|
title: string;
|
||
|
|
icon: React.ElementType;
|
||
|
|
status: string;
|
||
|
|
statusLabel: string;
|
||
|
|
children: React.ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
function Section({ title, icon: Icon, status, statusLabel, children }: SectionProps) {
|
||
|
|
const colors = getStatusColor(status);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className="rounded-lg border-2 p-4"
|
||
|
|
style={{
|
||
|
|
backgroundColor: colors.bg,
|
||
|
|
borderColor: colors.border,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{/* Section Header */}
|
||
|
|
<div className="flex items-center justify-between mb-4">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Icon className="w-5 h-5" style={{ color: colors.icon }} />
|
||
|
|
<h3 className="font-bold" style={{ color: colors.text }}>
|
||
|
|
{title}
|
||
|
|
</h3>
|
||
|
|
</div>
|
||
|
|
<span
|
||
|
|
className="px-3 py-1 rounded-full text-xs font-semibold"
|
||
|
|
style={{
|
||
|
|
backgroundColor: colors.border,
|
||
|
|
color: 'white',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{statusLabel}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Section Content */}
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// ============================================================
|
||
|
|
// Main Component
|
||
|
|
// ============================================================
|
||
|
|
|
||
|
|
export function ExecutionProgressTracker({
|
||
|
|
progress,
|
||
|
|
loading,
|
||
|
|
}: ExecutionProgressTrackerProps) {
|
||
|
|
const { t } = useTranslation(['dashboard', 'common']);
|
||
|
|
|
||
|
|
if (loading) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className="rounded-xl shadow-lg p-6 border"
|
||
|
|
style={{
|
||
|
|
backgroundColor: 'var(--bg-primary)',
|
||
|
|
borderColor: 'var(--border-primary)',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div className="animate-pulse space-y-4">
|
||
|
|
<div className="h-6 rounded w-1/3" style={{ backgroundColor: 'var(--bg-tertiary)' }}></div>
|
||
|
|
<div className="h-32 rounded" style={{ backgroundColor: 'var(--bg-tertiary)' }}></div>
|
||
|
|
<div className="h-32 rounded" style={{ backgroundColor: 'var(--bg-tertiary)' }}></div>
|
||
|
|
<div className="h-32 rounded" style={{ backgroundColor: 'var(--bg-tertiary)' }}></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!progress) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className="rounded-xl shadow-lg p-6 border"
|
||
|
|
style={{
|
||
|
|
backgroundColor: 'var(--bg-primary)',
|
||
|
|
borderColor: 'var(--border-primary)',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{/* Header */}
|
||
|
|
<div className="flex items-center gap-3 mb-6">
|
||
|
|
<TrendingUp className="w-6 h-6" style={{ color: 'var(--color-primary)' }} />
|
||
|
|
<div>
|
||
|
|
<h2 className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
|
||
|
|
{t('dashboard:execution_progress.title')}
|
||
|
|
</h2>
|
||
|
|
<p className="text-sm mt-1" style={{ color: 'var(--text-secondary)' }}>
|
||
|
|
{t('dashboard:execution_progress.subtitle')}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-4">
|
||
|
|
{/* Production Section */}
|
||
|
|
<Section
|
||
|
|
title={t('dashboard:execution_progress.production')}
|
||
|
|
icon={Package}
|
||
|
|
status={progress.production.status}
|
||
|
|
statusLabel={t(`dashboard:execution_progress.status.${progress.production.status}`)}
|
||
|
|
>
|
||
|
|
{progress.production.status === 'no_plan' ? (
|
||
|
|
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
|
||
|
|
{t('dashboard:execution_progress.no_production_plan')}
|
||
|
|
</p>
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
{/* Progress Bar */}
|
||
|
|
<div className="mb-3">
|
||
|
|
<div className="flex items-center justify-between text-sm mb-2">
|
||
|
|
<span style={{ color: 'var(--text-secondary)' }}>
|
||
|
|
{progress.production.completed} / {progress.production.total} {t('dashboard:execution_progress.batches_complete')}
|
||
|
|
</span>
|
||
|
|
<span className="font-semibold" style={{ color: 'var(--text-primary)' }}>
|
||
|
|
{Math.round((progress.production.completed / progress.production.total) * 100)}%
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
className="h-3 rounded-full overflow-hidden"
|
||
|
|
style={{ backgroundColor: 'var(--bg-tertiary)' }}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className="h-full transition-all duration-500"
|
||
|
|
style={{
|
||
|
|
width: `${(progress.production.completed / progress.production.total) * 100}%`,
|
||
|
|
backgroundColor:
|
||
|
|
progress.production.status === 'at_risk'
|
||
|
|
? 'var(--color-error-500)'
|
||
|
|
: progress.production.status === 'completed'
|
||
|
|
? 'var(--color-success-500)'
|
||
|
|
: 'var(--color-info-500)',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Status Breakdown */}
|
||
|
|
<div className="grid grid-cols-3 gap-2 text-sm">
|
||
|
|
<div>
|
||
|
|
<span style={{ color: 'var(--text-secondary)' }}>{t('dashboard:execution_progress.completed')}:</span>
|
||
|
|
<span className="ml-2 font-semibold" style={{ color: 'var(--color-success-700)' }}>
|
||
|
|
{progress.production.completed}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span style={{ color: 'var(--text-secondary)' }}>{t('dashboard:execution_progress.in_progress')}:</span>
|
||
|
|
<span className="ml-2 font-semibold" style={{ color: 'var(--color-info-700)' }}>
|
||
|
|
{progress.production.inProgress}
|
||
|
|
</span>
|
||
|
|
{progress.production.inProgressBatches && progress.production.inProgressBatches.length > 0 && (
|
||
|
|
<div className="ml-6 mt-1 text-xs" style={{ color: 'var(--text-tertiary)' }}>
|
||
|
|
{progress.production.inProgressBatches.map((batch) => (
|
||
|
|
<div key={batch.id} className="flex items-center gap-2">
|
||
|
|
<span>• {batch.productName}</span>
|
||
|
|
<span className="opacity-60">({batch.batchNumber})</span>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span style={{ color: 'var(--text-secondary)' }}>{t('dashboard:execution_progress.pending')}:</span>
|
||
|
|
<span className="ml-2 font-semibold" style={{ color: 'var(--text-tertiary)' }}>
|
||
|
|
{progress.production.pending}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Next Batch */}
|
||
|
|
{progress.production.nextBatch && (
|
||
|
|
<div
|
||
|
|
className="mt-3 p-3 rounded-lg border"
|
||
|
|
style={{
|
||
|
|
backgroundColor: 'var(--bg-primary)',
|
||
|
|
borderColor: 'var(--border-secondary)',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-2 mb-1">
|
||
|
|
<Clock className="w-4 h-4" style={{ color: 'var(--color-info)' }} />
|
||
|
|
<span className="text-xs font-semibold" style={{ color: 'var(--text-secondary)' }}>
|
||
|
|
{t('dashboard:execution_progress.whats_next')}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<p className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>
|
||
|
|
{progress.production.nextBatch.productName}
|
||
|
|
</p>
|
||
|
|
<p className="text-xs" style={{ color: 'var(--text-secondary)' }}>
|
||
|
|
{progress.production.nextBatch.batchNumber} · {t('dashboard:execution_progress.starts_at')}{' '}
|
||
|
|
{formatTime(progress.production.nextBatch.plannedStart)}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</Section>
|
||
|
|
|
||
|
|
{/* Deliveries Section */}
|
||
|
|
<Section
|
||
|
|
title={t('dashboard:execution_progress.deliveries')}
|
||
|
|
icon={Truck}
|
||
|
|
status={progress.deliveries.status}
|
||
|
|
statusLabel={t(`dashboard:execution_progress.status.${progress.deliveries.status}`)}
|
||
|
|
>
|
||
|
|
{progress.deliveries.status === 'no_deliveries' ? (
|
||
|
|
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
|
||
|
|
{t('dashboard:execution_progress.no_deliveries_today')}
|
||
|
|
</p>
|
||
|
|
) : (
|
||
|
|
<div className="grid grid-cols-3 gap-3">
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="flex items-center justify-center mb-1">
|
||
|
|
<CheckCircle className="w-4 h-4" style={{ color: 'var(--color-success-600)' }} />
|
||
|
|
</div>
|
||
|
|
<div className="text-2xl font-bold" style={{ color: 'var(--color-success-700)' }}>
|
||
|
|
{progress.deliveries.received}
|
||
|
|
</div>
|
||
|
|
<div className="text-xs" style={{ color: 'var(--text-secondary)' }}>
|
||
|
|
{t('dashboard:execution_progress.received')}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="flex items-center justify-center mb-1">
|
||
|
|
<Clock className="w-4 h-4" style={{ color: 'var(--color-info-600)' }} />
|
||
|
|
</div>
|
||
|
|
<div className="text-2xl font-bold" style={{ color: 'var(--color-info-700)' }}>
|
||
|
|
{progress.deliveries.pending}
|
||
|
|
</div>
|
||
|
|
<div className="text-xs" style={{ color: 'var(--text-secondary)' }}>
|
||
|
|
{t('dashboard:execution_progress.pending')}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="flex items-center justify-center mb-1">
|
||
|
|
<AlertCircle className="w-4 h-4" style={{ color: 'var(--color-error-600)' }} />
|
||
|
|
</div>
|
||
|
|
<div className="text-2xl font-bold" style={{ color: 'var(--color-error-700)' }}>
|
||
|
|
{progress.deliveries.overdue}
|
||
|
|
</div>
|
||
|
|
<div className="text-xs" style={{ color: 'var(--text-secondary)' }}>
|
||
|
|
{t('dashboard:execution_progress.overdue')}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</Section>
|
||
|
|
|
||
|
|
{/* Approvals Section */}
|
||
|
|
<Section
|
||
|
|
title={t('dashboard:execution_progress.approvals')}
|
||
|
|
icon={Calendar}
|
||
|
|
status={progress.approvals.status}
|
||
|
|
statusLabel={t(`dashboard:execution_progress.status.${progress.approvals.status}`)}
|
||
|
|
>
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<span style={{ color: 'var(--text-secondary)' }}>
|
||
|
|
{t('dashboard:execution_progress.pending_approvals')}
|
||
|
|
</span>
|
||
|
|
<span
|
||
|
|
className="text-3xl font-bold"
|
||
|
|
style={{
|
||
|
|
color:
|
||
|
|
progress.approvals.status === 'at_risk'
|
||
|
|
? 'var(--color-error-700)'
|
||
|
|
: progress.approvals.status === 'completed'
|
||
|
|
? 'var(--color-success-700)'
|
||
|
|
: 'var(--color-info-700)',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{progress.approvals.pending}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</Section>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|