414 lines
14 KiB
TypeScript
414 lines
14 KiB
TypeScript
|
import React, { useMemo } from 'react';
|
||
|
|
import { useTranslation } from 'react-i18next';
|
||
|
|
import { Card, CardHeader, CardBody } from '../../ui/Card';
|
||
|
|
import { StatusCard } from '../../ui/StatusCard/StatusCard';
|
||
|
|
import { Badge } from '../../ui/Badge';
|
||
|
|
import { Button } from '../../ui/Button';
|
||
|
|
import { useCurrentTenant } from '../../../stores/tenant.store';
|
||
|
|
import { useActiveBatches } from '../../../api/hooks/production';
|
||
|
|
import {
|
||
|
|
Factory,
|
||
|
|
Clock,
|
||
|
|
Play,
|
||
|
|
Pause,
|
||
|
|
CheckCircle,
|
||
|
|
AlertTriangle,
|
||
|
|
ChevronRight,
|
||
|
|
Timer,
|
||
|
|
ChefHat,
|
||
|
|
Flame,
|
||
|
|
Calendar
|
||
|
|
} from 'lucide-react';
|
||
|
|
|
||
|
|
export interface TodayProductionProps {
|
||
|
|
className?: string;
|
||
|
|
maxBatches?: number;
|
||
|
|
onStartBatch?: (batchId: string) => void;
|
||
|
|
onPauseBatch?: (batchId: string) => void;
|
||
|
|
onViewDetails?: (batchId: string) => void;
|
||
|
|
onViewAllPlans?: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const TodayProduction: React.FC<TodayProductionProps> = ({
|
||
|
|
className,
|
||
|
|
maxBatches = 5,
|
||
|
|
onStartBatch,
|
||
|
|
onPauseBatch,
|
||
|
|
onViewDetails,
|
||
|
|
onViewAllPlans
|
||
|
|
}) => {
|
||
|
|
const { t } = useTranslation(['dashboard']);
|
||
|
|
const currentTenant = useCurrentTenant();
|
||
|
|
const tenantId = currentTenant?.id || '';
|
||
|
|
|
||
|
|
// Get today's date
|
||
|
|
const todayDate = useMemo(() => {
|
||
|
|
return new Date().toISOString().split('T')[0];
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// Fetch active production batches
|
||
|
|
const { data: productionData, isLoading, error } = useActiveBatches(
|
||
|
|
tenantId,
|
||
|
|
{
|
||
|
|
enabled: !!tenantId,
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
const getBatchStatusConfig = (batch: any) => {
|
||
|
|
const baseConfig = {
|
||
|
|
isCritical: batch.status === 'FAILED' || batch.priority === 'URGENT',
|
||
|
|
isHighlight: batch.status === 'IN_PROGRESS' || batch.priority === 'HIGH',
|
||
|
|
};
|
||
|
|
|
||
|
|
switch (batch.status) {
|
||
|
|
case 'PENDING':
|
||
|
|
return {
|
||
|
|
...baseConfig,
|
||
|
|
color: 'var(--color-warning)',
|
||
|
|
text: 'Pendiente',
|
||
|
|
icon: Clock
|
||
|
|
};
|
||
|
|
case 'IN_PROGRESS':
|
||
|
|
return {
|
||
|
|
...baseConfig,
|
||
|
|
color: 'var(--color-info)',
|
||
|
|
text: 'En Proceso',
|
||
|
|
icon: Flame
|
||
|
|
};
|
||
|
|
case 'COMPLETED':
|
||
|
|
return {
|
||
|
|
...baseConfig,
|
||
|
|
color: 'var(--color-success)',
|
||
|
|
text: 'Completado',
|
||
|
|
icon: CheckCircle
|
||
|
|
};
|
||
|
|
case 'ON_HOLD':
|
||
|
|
return {
|
||
|
|
...baseConfig,
|
||
|
|
color: 'var(--color-warning)',
|
||
|
|
text: 'Pausado',
|
||
|
|
icon: Pause
|
||
|
|
};
|
||
|
|
case 'FAILED':
|
||
|
|
return {
|
||
|
|
...baseConfig,
|
||
|
|
color: 'var(--color-error)',
|
||
|
|
text: 'Fallido',
|
||
|
|
icon: AlertTriangle
|
||
|
|
};
|
||
|
|
case 'QUALITY_CHECK':
|
||
|
|
return {
|
||
|
|
...baseConfig,
|
||
|
|
color: 'var(--color-info)',
|
||
|
|
text: 'Control de Calidad',
|
||
|
|
icon: CheckCircle
|
||
|
|
};
|
||
|
|
default:
|
||
|
|
return {
|
||
|
|
...baseConfig,
|
||
|
|
color: 'var(--color-warning)',
|
||
|
|
text: 'Pendiente',
|
||
|
|
icon: Clock
|
||
|
|
};
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const formatDuration = (minutes: number) => {
|
||
|
|
const hours = Math.floor(minutes / 60);
|
||
|
|
const mins = minutes % 60;
|
||
|
|
if (hours > 0) {
|
||
|
|
return `${hours}h ${mins}m`;
|
||
|
|
}
|
||
|
|
return `${mins}m`;
|
||
|
|
};
|
||
|
|
|
||
|
|
// Process batches and sort by priority
|
||
|
|
const displayBatches = useMemo(() => {
|
||
|
|
if (!productionData?.batches || !Array.isArray(productionData.batches)) return [];
|
||
|
|
|
||
|
|
const batches = [...productionData.batches];
|
||
|
|
|
||
|
|
// Filter for today's batches only
|
||
|
|
const todayBatches = batches.filter(batch => {
|
||
|
|
const batchDate = new Date(batch.planned_start_time || batch.created_at);
|
||
|
|
return batchDate.toISOString().split('T')[0] === todayDate;
|
||
|
|
});
|
||
|
|
|
||
|
|
// Sort by priority and start time
|
||
|
|
const priorityOrder = { URGENT: 0, HIGH: 1, MEDIUM: 2, LOW: 3 };
|
||
|
|
todayBatches.sort((a, b) => {
|
||
|
|
// First sort by status (pending/in_progress first)
|
||
|
|
const statusOrder = { PENDING: 0, IN_PROGRESS: 1, QUALITY_CHECK: 2, ON_HOLD: 3, COMPLETED: 4, FAILED: 5, CANCELLED: 6 };
|
||
|
|
const aStatus = statusOrder[a.status as keyof typeof statusOrder] ?? 7;
|
||
|
|
const bStatus = statusOrder[b.status as keyof typeof statusOrder] ?? 7;
|
||
|
|
|
||
|
|
if (aStatus !== bStatus) return aStatus - bStatus;
|
||
|
|
|
||
|
|
// Then by priority
|
||
|
|
const aPriority = priorityOrder[a.priority as keyof typeof priorityOrder] ?? 4;
|
||
|
|
const bPriority = priorityOrder[b.priority as keyof typeof priorityOrder] ?? 4;
|
||
|
|
|
||
|
|
if (aPriority !== bPriority) return aPriority - bPriority;
|
||
|
|
|
||
|
|
// Finally by start time
|
||
|
|
const aTime = new Date(a.planned_start_time || a.created_at).getTime();
|
||
|
|
const bTime = new Date(b.planned_start_time || b.created_at).getTime();
|
||
|
|
return aTime - bTime;
|
||
|
|
});
|
||
|
|
|
||
|
|
return todayBatches.slice(0, maxBatches);
|
||
|
|
}, [productionData, todayDate, maxBatches]);
|
||
|
|
|
||
|
|
const inProgressBatches = productionData?.batches?.filter(
|
||
|
|
b => b.status === 'IN_PROGRESS'
|
||
|
|
).length || 0;
|
||
|
|
|
||
|
|
const completedBatches = productionData?.batches?.filter(
|
||
|
|
b => b.status === 'COMPLETED'
|
||
|
|
).length || 0;
|
||
|
|
|
||
|
|
const delayedBatches = productionData?.batches?.filter(
|
||
|
|
b => b.status === 'FAILED'
|
||
|
|
).length || 0;
|
||
|
|
|
||
|
|
const pendingBatches = productionData?.batches?.filter(
|
||
|
|
b => b.status === 'PENDING'
|
||
|
|
).length || 0;
|
||
|
|
|
||
|
|
if (isLoading) {
|
||
|
|
return (
|
||
|
|
<Card className={className} variant="elevated" padding="none">
|
||
|
|
<CardHeader padding="lg" divider>
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<div className="p-2 rounded-lg bg-[var(--color-primary)]/20">
|
||
|
|
<Factory className="w-5 h-5 text-[var(--color-primary)]" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 className="text-lg font-semibold text-[var(--text-primary)]">
|
||
|
|
{t('dashboard:sections.production_today', 'Producción de Hoy')}
|
||
|
|
</h3>
|
||
|
|
<p className="text-sm text-[var(--text-secondary)]">
|
||
|
|
{t('dashboard:production.title', '¿Qué necesito producir hoy?')}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CardHeader>
|
||
|
|
<CardBody>
|
||
|
|
<div className="flex items-center justify-center py-8">
|
||
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[var(--color-primary)]"></div>
|
||
|
|
</div>
|
||
|
|
</CardBody>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (error) {
|
||
|
|
return (
|
||
|
|
<Card className={className} variant="elevated" padding="none">
|
||
|
|
<CardHeader padding="lg" divider>
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<div className="p-2 rounded-lg bg-[var(--color-primary)]/20">
|
||
|
|
<Factory className="w-5 h-5 text-[var(--color-primary)]" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 className="text-lg font-semibold text-[var(--text-primary)]">
|
||
|
|
{t('dashboard:sections.production_today', 'Producción de Hoy')}
|
||
|
|
</h3>
|
||
|
|
<p className="text-sm text-[var(--text-secondary)]">
|
||
|
|
{t('dashboard:production.title', '¿Qué necesito producir hoy?')}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CardHeader>
|
||
|
|
<CardBody>
|
||
|
|
<div className="p-4 bg-[var(--color-error)]/10 border border-[var(--color-error)]/20 rounded-lg">
|
||
|
|
<p className="text-[var(--color-error)] text-sm">
|
||
|
|
{t('dashboard:messages.error_loading', 'Error al cargar los datos')}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</CardBody>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Card className={className} variant="elevated" padding="none">
|
||
|
|
<CardHeader padding="lg" divider>
|
||
|
|
<div className="flex items-center justify-between w-full flex-wrap gap-4">
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<div className="p-2 rounded-lg bg-[var(--color-primary)]/20">
|
||
|
|
<Factory className="w-5 h-5 text-[var(--color-primary)]" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 className="text-lg font-semibold text-[var(--text-primary)]">
|
||
|
|
{t('dashboard:sections.production_today', 'Producción de Hoy')}
|
||
|
|
</h3>
|
||
|
|
<p className="text-sm text-[var(--text-secondary)]">
|
||
|
|
{t('dashboard:production.title', '¿Qué necesito producir hoy?')}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex items-center gap-2 flex-wrap">
|
||
|
|
{delayedBatches > 0 && (
|
||
|
|
<Badge variant="error" size="sm">
|
||
|
|
{delayedBatches} retrasados
|
||
|
|
</Badge>
|
||
|
|
)}
|
||
|
|
{inProgressBatches > 0 && (
|
||
|
|
<Badge variant="info" size="sm">
|
||
|
|
{inProgressBatches} activos
|
||
|
|
</Badge>
|
||
|
|
)}
|
||
|
|
{completedBatches > 0 && (
|
||
|
|
<Badge variant="success" size="sm">
|
||
|
|
{completedBatches} completados
|
||
|
|
</Badge>
|
||
|
|
)}
|
||
|
|
<div className="flex items-center gap-1 text-sm text-[var(--text-secondary)]">
|
||
|
|
<Calendar className="w-4 h-4" />
|
||
|
|
<span>{new Date(todayDate).toLocaleDateString('es-ES')}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CardHeader>
|
||
|
|
|
||
|
|
<CardBody padding="none">
|
||
|
|
{displayBatches.length === 0 ? (
|
||
|
|
<div className="p-8 text-center">
|
||
|
|
<div
|
||
|
|
className="p-4 rounded-full mx-auto mb-4 w-16 h-16 flex items-center justify-center"
|
||
|
|
style={{ backgroundColor: 'var(--color-success)/20' }}
|
||
|
|
>
|
||
|
|
<CheckCircle className="w-8 h-8" style={{ color: 'var(--color-success)' }} />
|
||
|
|
</div>
|
||
|
|
<h4 className="text-lg font-medium mb-2 text-[var(--text-primary)]">
|
||
|
|
{t('dashboard:production.empty', 'Sin producción programada para hoy')}
|
||
|
|
</h4>
|
||
|
|
<p className="text-sm text-[var(--text-secondary)]">
|
||
|
|
No hay lotes programados para iniciar hoy
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="space-y-3 p-4">
|
||
|
|
{displayBatches.map((batch) => {
|
||
|
|
const statusConfig = getBatchStatusConfig(batch);
|
||
|
|
|
||
|
|
// Calculate progress based on status and time
|
||
|
|
let progress = 0;
|
||
|
|
if (batch.status === 'COMPLETED') {
|
||
|
|
progress = 100;
|
||
|
|
} else if (batch.status === 'IN_PROGRESS' && batch.actual_start_time && batch.planned_duration_minutes) {
|
||
|
|
const elapsed = Date.now() - new Date(batch.actual_start_time).getTime();
|
||
|
|
const elapsedMinutes = elapsed / (1000 * 60);
|
||
|
|
progress = Math.min(Math.round((elapsedMinutes / batch.planned_duration_minutes) * 100), 99);
|
||
|
|
} else if (batch.status === 'QUALITY_CHECK') {
|
||
|
|
progress = 95;
|
||
|
|
}
|
||
|
|
|
||
|
|
const startTime = batch.planned_start_time
|
||
|
|
? new Date(batch.planned_start_time).toLocaleTimeString('es-ES', {
|
||
|
|
hour: '2-digit',
|
||
|
|
minute: '2-digit'
|
||
|
|
})
|
||
|
|
: 'No programado';
|
||
|
|
|
||
|
|
const assignedStaff = batch.staff_assigned && batch.staff_assigned.length > 0
|
||
|
|
? batch.staff_assigned[0]
|
||
|
|
: 'Sin asignar';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<StatusCard
|
||
|
|
key={batch.id}
|
||
|
|
id={batch.id}
|
||
|
|
statusIndicator={statusConfig}
|
||
|
|
title={batch.product_name}
|
||
|
|
subtitle={`Lote ${batch.batch_number} • ${batch.planned_quantity} unidades`}
|
||
|
|
primaryValue={`${progress}%`}
|
||
|
|
primaryValueLabel="PROGRESO"
|
||
|
|
secondaryInfo={{
|
||
|
|
label: 'Panadero asignado',
|
||
|
|
value: assignedStaff
|
||
|
|
}}
|
||
|
|
progress={batch.status !== 'PENDING' ? {
|
||
|
|
label: `Progreso de producción`,
|
||
|
|
percentage: progress,
|
||
|
|
color: progress === 100 ? 'var(--color-success)' :
|
||
|
|
progress > 70 ? 'var(--color-info)' :
|
||
|
|
progress > 30 ? 'var(--color-warning)' : 'var(--color-error)'
|
||
|
|
} : undefined}
|
||
|
|
metadata={[
|
||
|
|
`⏰ Inicio: ${startTime}`,
|
||
|
|
...(batch.planned_duration_minutes ? [`⏱️ Duración: ${formatDuration(batch.planned_duration_minutes)}`] : []),
|
||
|
|
...(batch.station_id ? [`🏭 Estación: ${batch.station_id}`] : []),
|
||
|
|
...(batch.priority === 'URGENT' ? [`⚠️ URGENTE`] : []),
|
||
|
|
...(batch.production_notes ? [`📋 ${batch.production_notes}`] : [])
|
||
|
|
]}
|
||
|
|
actions={[
|
||
|
|
...(batch.status === 'PENDING' ? [{
|
||
|
|
label: 'Iniciar',
|
||
|
|
icon: Play,
|
||
|
|
variant: 'primary' as const,
|
||
|
|
onClick: () => onStartBatch?.(batch.id),
|
||
|
|
priority: 'primary' as const
|
||
|
|
}] : []),
|
||
|
|
...(batch.status === 'IN_PROGRESS' ? [{
|
||
|
|
label: 'Pausar',
|
||
|
|
icon: Pause,
|
||
|
|
variant: 'outline' as const,
|
||
|
|
onClick: () => onPauseBatch?.(batch.id),
|
||
|
|
priority: 'primary' as const,
|
||
|
|
destructive: true
|
||
|
|
}] : []),
|
||
|
|
{
|
||
|
|
label: 'Ver Detalles',
|
||
|
|
icon: ChevronRight,
|
||
|
|
variant: 'outline' as const,
|
||
|
|
onClick: () => onViewDetails?.(batch.id),
|
||
|
|
priority: 'secondary' as const
|
||
|
|
}
|
||
|
|
]}
|
||
|
|
compact={true}
|
||
|
|
className="border-l-4"
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{displayBatches.length > 0 && (
|
||
|
|
<div
|
||
|
|
className="p-4 border-t"
|
||
|
|
style={{
|
||
|
|
borderColor: 'var(--border-primary)',
|
||
|
|
backgroundColor: 'var(--bg-secondary)'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div className="flex items-center justify-between flex-wrap gap-2">
|
||
|
|
<div className="text-sm">
|
||
|
|
<span className="text-[var(--text-secondary)]">
|
||
|
|
{pendingBatches} {t('dashboard:production.batches_pending', 'lotes pendientes')} de {productionData?.batches?.length || 0} total
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{onViewAllPlans && (
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
size="sm"
|
||
|
|
onClick={onViewAllPlans}
|
||
|
|
className="flex items-center gap-2"
|
||
|
|
>
|
||
|
|
Ver Todos los Planes
|
||
|
|
<ChevronRight className="w-4 h-4" />
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</CardBody>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default TodayProduction;
|