671 lines
24 KiB
TypeScript
671 lines
24 KiB
TypeScript
|
import React, { useState, useEffect } from 'react';
|
||
|
|
import {
|
||
|
|
Clock, Calendar, ChefHat, TrendingUp, AlertTriangle,
|
||
|
|
CheckCircle, Settings, Plus, BarChart3, Users,
|
||
|
|
Timer, Target, Activity, Zap
|
||
|
|
} from 'lucide-react';
|
||
|
|
|
||
|
|
// Import existing complex components
|
||
|
|
import ProductionSchedule from '../../components/ui/ProductionSchedule';
|
||
|
|
import DemandHeatmap from '../../components/ui/DemandHeatmap';
|
||
|
|
import { useDashboard } from '../../hooks/useDashboard';
|
||
|
|
|
||
|
|
// Types for production management
|
||
|
|
interface ProductionMetrics {
|
||
|
|
efficiency: number;
|
||
|
|
onTimeCompletion: number;
|
||
|
|
wastePercentage: number;
|
||
|
|
energyUsage: number;
|
||
|
|
staffUtilization: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface ProductionBatch {
|
||
|
|
id: string;
|
||
|
|
product: string;
|
||
|
|
batchSize: number;
|
||
|
|
startTime: string;
|
||
|
|
endTime: string;
|
||
|
|
status: 'planned' | 'in_progress' | 'completed' | 'delayed';
|
||
|
|
assignedStaff: string[];
|
||
|
|
actualYield: number;
|
||
|
|
expectedYield: number;
|
||
|
|
notes?: string;
|
||
|
|
temperature?: number;
|
||
|
|
humidity?: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface StaffMember {
|
||
|
|
id: string;
|
||
|
|
name: string;
|
||
|
|
role: 'baker' | 'assistant' | 'decorator';
|
||
|
|
currentTask?: string;
|
||
|
|
status: 'available' | 'busy' | 'break';
|
||
|
|
efficiency: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface Equipment {
|
||
|
|
id: string;
|
||
|
|
name: string;
|
||
|
|
type: 'oven' | 'mixer' | 'proofer' | 'cooling_rack';
|
||
|
|
status: 'idle' | 'in_use' | 'maintenance' | 'error';
|
||
|
|
currentBatch?: string;
|
||
|
|
temperature?: number;
|
||
|
|
maintenanceDue?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const ProductionPage: React.FC = () => {
|
||
|
|
const { todayForecasts, metrics, weather, isLoading } = useDashboard();
|
||
|
|
const [activeTab, setActiveTab] = useState<'schedule' | 'batches' | 'analytics' | 'staff' | 'equipment'>('schedule');
|
||
|
|
const [productionMetrics, setProductionMetrics] = useState<ProductionMetrics>({
|
||
|
|
efficiency: 87.5,
|
||
|
|
onTimeCompletion: 94.2,
|
||
|
|
wastePercentage: 3.8,
|
||
|
|
energyUsage: 156.7,
|
||
|
|
staffUtilization: 78.3
|
||
|
|
});
|
||
|
|
|
||
|
|
// Sample production schedule data
|
||
|
|
const [productionSchedule, setProductionSchedule] = useState([
|
||
|
|
{
|
||
|
|
time: '05:00 AM',
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
id: 'prod-1',
|
||
|
|
product: 'Croissants',
|
||
|
|
quantity: 48,
|
||
|
|
priority: 'high' as const,
|
||
|
|
estimatedTime: 180,
|
||
|
|
status: 'in_progress' as const,
|
||
|
|
confidence: 0.92,
|
||
|
|
notes: 'Alta demanda prevista - lote doble'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'prod-2',
|
||
|
|
product: 'Pan de molde',
|
||
|
|
quantity: 35,
|
||
|
|
priority: 'high' as const,
|
||
|
|
estimatedTime: 240,
|
||
|
|
status: 'pending' as const,
|
||
|
|
confidence: 0.88
|
||
|
|
}
|
||
|
|
],
|
||
|
|
totalTime: 420
|
||
|
|
},
|
||
|
|
{
|
||
|
|
time: '08:00 AM',
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
id: 'prod-3',
|
||
|
|
product: 'Baguettes',
|
||
|
|
quantity: 25,
|
||
|
|
priority: 'medium' as const,
|
||
|
|
estimatedTime: 200,
|
||
|
|
status: 'pending' as const,
|
||
|
|
confidence: 0.75
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'prod-4',
|
||
|
|
product: 'Magdalenas',
|
||
|
|
quantity: 60,
|
||
|
|
priority: 'medium' as const,
|
||
|
|
estimatedTime: 120,
|
||
|
|
status: 'pending' as const,
|
||
|
|
confidence: 0.82
|
||
|
|
}
|
||
|
|
],
|
||
|
|
totalTime: 320
|
||
|
|
}
|
||
|
|
]);
|
||
|
|
|
||
|
|
const [productionBatches, setProductionBatches] = useState<ProductionBatch[]>([
|
||
|
|
{
|
||
|
|
id: 'batch-1',
|
||
|
|
product: 'Croissants',
|
||
|
|
batchSize: 48,
|
||
|
|
startTime: '05:00',
|
||
|
|
endTime: '08:00',
|
||
|
|
status: 'in_progress',
|
||
|
|
assignedStaff: ['maria-lopez', 'carlos-ruiz'],
|
||
|
|
actualYield: 45,
|
||
|
|
expectedYield: 48,
|
||
|
|
temperature: 180,
|
||
|
|
humidity: 65,
|
||
|
|
notes: 'Masa fermentando correctamente'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'batch-2',
|
||
|
|
product: 'Pan de molde',
|
||
|
|
batchSize: 35,
|
||
|
|
startTime: '06:30',
|
||
|
|
endTime: '10:30',
|
||
|
|
status: 'planned',
|
||
|
|
assignedStaff: ['ana-garcia'],
|
||
|
|
actualYield: 0,
|
||
|
|
expectedYield: 35,
|
||
|
|
notes: 'Esperando finalización de croissants'
|
||
|
|
}
|
||
|
|
]);
|
||
|
|
|
||
|
|
const [staff, setStaff] = useState<StaffMember[]>([
|
||
|
|
{
|
||
|
|
id: 'maria-lopez',
|
||
|
|
name: 'María López',
|
||
|
|
role: 'baker',
|
||
|
|
currentTask: 'Preparando croissants',
|
||
|
|
status: 'busy',
|
||
|
|
efficiency: 94.2
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'carlos-ruiz',
|
||
|
|
name: 'Carlos Ruiz',
|
||
|
|
role: 'assistant',
|
||
|
|
currentTask: 'Horneando croissants',
|
||
|
|
status: 'busy',
|
||
|
|
efficiency: 87.8
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'ana-garcia',
|
||
|
|
name: 'Ana García',
|
||
|
|
role: 'baker',
|
||
|
|
status: 'available',
|
||
|
|
efficiency: 91.5
|
||
|
|
}
|
||
|
|
]);
|
||
|
|
|
||
|
|
const [equipment, setEquipment] = useState<Equipment[]>([
|
||
|
|
{
|
||
|
|
id: 'oven-1',
|
||
|
|
name: 'Horno Principal',
|
||
|
|
type: 'oven',
|
||
|
|
status: 'in_use',
|
||
|
|
currentBatch: 'batch-1',
|
||
|
|
temperature: 180,
|
||
|
|
maintenanceDue: '2024-11-15'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'mixer-1',
|
||
|
|
name: 'Amasadora Industrial',
|
||
|
|
type: 'mixer',
|
||
|
|
status: 'idle',
|
||
|
|
maintenanceDue: '2024-11-20'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'proofer-1',
|
||
|
|
name: 'Fermentadora',
|
||
|
|
type: 'proofer',
|
||
|
|
status: 'in_use',
|
||
|
|
currentBatch: 'batch-2',
|
||
|
|
temperature: 28,
|
||
|
|
maintenanceDue: '2024-12-01'
|
||
|
|
}
|
||
|
|
]);
|
||
|
|
|
||
|
|
// Demand heatmap sample data
|
||
|
|
const heatmapData = [
|
||
|
|
{
|
||
|
|
weekStart: '2024-11-04',
|
||
|
|
days: [
|
||
|
|
{
|
||
|
|
date: '2024-11-04',
|
||
|
|
demand: 180,
|
||
|
|
isToday: true,
|
||
|
|
products: [
|
||
|
|
{ name: 'Croissants', demand: 48, confidence: 'high' as const },
|
||
|
|
{ name: 'Pan de molde', demand: 35, confidence: 'high' as const },
|
||
|
|
{ name: 'Baguettes', demand: 25, confidence: 'medium' as const },
|
||
|
|
{ name: 'Magdalenas', demand: 32, confidence: 'medium' as const },
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
date: '2024-11-05',
|
||
|
|
demand: 165,
|
||
|
|
isForecast: true,
|
||
|
|
products: [
|
||
|
|
{ name: 'Croissants', demand: 42, confidence: 'high' as const },
|
||
|
|
{ name: 'Pan de molde', demand: 38, confidence: 'medium' as const },
|
||
|
|
{ name: 'Baguettes', demand: 28, confidence: 'medium' as const },
|
||
|
|
{ name: 'Magdalenas', demand: 28, confidence: 'low' as const },
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
date: '2024-11-06',
|
||
|
|
demand: 195,
|
||
|
|
isForecast: true,
|
||
|
|
products: [
|
||
|
|
{ name: 'Croissants', demand: 55, confidence: 'high' as const },
|
||
|
|
{ name: 'Pan de molde', demand: 40, confidence: 'high' as const },
|
||
|
|
{ name: 'Baguettes', demand: 32, confidence: 'medium' as const },
|
||
|
|
{ name: 'Magdalenas', demand: 35, confidence: 'medium' as const },
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{ date: '2024-11-07', demand: 220, isForecast: true },
|
||
|
|
{ date: '2024-11-08', demand: 185, isForecast: true },
|
||
|
|
{ date: '2024-11-09', demand: 250, isForecast: true },
|
||
|
|
{ date: '2024-11-10', demand: 160, isForecast: true }
|
||
|
|
]
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
const getStatusColor = (status: string) => {
|
||
|
|
switch (status) {
|
||
|
|
case 'planned':
|
||
|
|
return 'bg-blue-100 text-blue-800';
|
||
|
|
case 'in_progress':
|
||
|
|
return 'bg-yellow-100 text-yellow-800';
|
||
|
|
case 'completed':
|
||
|
|
return 'bg-green-100 text-green-800';
|
||
|
|
case 'delayed':
|
||
|
|
return 'bg-red-100 text-red-800';
|
||
|
|
default:
|
||
|
|
return 'bg-gray-100 text-gray-800';
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const getEquipmentStatusColor = (status: Equipment['status']) => {
|
||
|
|
switch (status) {
|
||
|
|
case 'idle':
|
||
|
|
return 'bg-gray-100 text-gray-800';
|
||
|
|
case 'in_use':
|
||
|
|
return 'bg-green-100 text-green-800';
|
||
|
|
case 'maintenance':
|
||
|
|
return 'bg-yellow-100 text-yellow-800';
|
||
|
|
case 'error':
|
||
|
|
return 'bg-red-100 text-red-800';
|
||
|
|
default:
|
||
|
|
return 'bg-gray-100 text-gray-800';
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if (isLoading) {
|
||
|
|
return (
|
||
|
|
<div className="p-6">
|
||
|
|
<div className="animate-pulse space-y-6">
|
||
|
|
<div className="h-8 bg-gray-200 rounded w-1/3"></div>
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
|
|
{[...Array(4)].map((_, i) => (
|
||
|
|
<div key={i} className="h-32 bg-gray-200 rounded-xl"></div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="p-6 space-y-6 bg-gray-50 min-h-screen">
|
||
|
|
{/* Header */}
|
||
|
|
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||
|
|
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between">
|
||
|
|
<div>
|
||
|
|
<h1 className="text-2xl font-bold text-gray-900 flex items-center">
|
||
|
|
<ChefHat className="h-8 w-8 mr-3 text-primary-600" />
|
||
|
|
Centro de Producción
|
||
|
|
</h1>
|
||
|
|
<p className="text-gray-600 mt-1">
|
||
|
|
Gestión completa de la producción diaria y planificación inteligente
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mt-4 lg:mt-0 flex items-center space-x-4">
|
||
|
|
<div className="bg-gray-50 rounded-lg px-4 py-2">
|
||
|
|
<div className="text-sm font-medium text-gray-900">Eficiencia Hoy</div>
|
||
|
|
<div className="text-2xl font-bold text-primary-600">{productionMetrics.efficiency}%</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button className="inline-flex items-center px-4 py-2 bg-primary-500 text-white rounded-xl hover:bg-primary-600 transition-colors">
|
||
|
|
<Plus className="h-5 w-5 mr-2" />
|
||
|
|
Nuevo Lote
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Key Metrics Cards */}
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
|
||
|
|
<div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<p className="text-sm text-gray-600">Eficiencia</p>
|
||
|
|
<p className="text-2xl font-bold text-green-600">{productionMetrics.efficiency}%</p>
|
||
|
|
</div>
|
||
|
|
<div className="p-3 bg-green-100 rounded-lg">
|
||
|
|
<Target className="h-6 w-6 text-green-600" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="mt-2 flex items-center text-xs text-green-600">
|
||
|
|
<TrendingUp className="h-3 w-3 mr-1" />
|
||
|
|
+2.3% vs ayer
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<p className="text-sm text-gray-600">A Tiempo</p>
|
||
|
|
<p className="text-2xl font-bold text-blue-600">{productionMetrics.onTimeCompletion}%</p>
|
||
|
|
</div>
|
||
|
|
<div className="p-3 bg-blue-100 rounded-lg">
|
||
|
|
<Clock className="h-6 w-6 text-blue-600" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="mt-2 flex items-center text-xs text-blue-600">
|
||
|
|
<CheckCircle className="h-3 w-3 mr-1" />
|
||
|
|
Muy bueno
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<p className="text-sm text-gray-600">Desperdicio</p>
|
||
|
|
<p className="text-2xl font-bold text-orange-600">{productionMetrics.wastePercentage}%</p>
|
||
|
|
</div>
|
||
|
|
<div className="p-3 bg-orange-100 rounded-lg">
|
||
|
|
<AlertTriangle className="h-6 w-6 text-orange-600" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="mt-2 flex items-center text-xs text-orange-600">
|
||
|
|
<TrendingUp className="h-3 w-3 mr-1" />
|
||
|
|
-0.5% vs ayer
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<p className="text-sm text-gray-600">Energía</p>
|
||
|
|
<p className="text-2xl font-bold text-purple-600">{productionMetrics.energyUsage} kW</p>
|
||
|
|
</div>
|
||
|
|
<div className="p-3 bg-purple-100 rounded-lg">
|
||
|
|
<Zap className="h-6 w-6 text-purple-600" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="mt-2 flex items-center text-xs text-purple-600">
|
||
|
|
<Activity className="h-3 w-3 mr-1" />
|
||
|
|
Normal
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<p className="text-sm text-gray-600">Personal</p>
|
||
|
|
<p className="text-2xl font-bold text-indigo-600">{productionMetrics.staffUtilization}%</p>
|
||
|
|
</div>
|
||
|
|
<div className="p-3 bg-indigo-100 rounded-lg">
|
||
|
|
<Users className="h-6 w-6 text-indigo-600" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="mt-2 flex items-center text-xs text-indigo-600">
|
||
|
|
<Users className="h-3 w-3 mr-1" />
|
||
|
|
3/4 activos
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Tabs Navigation */}
|
||
|
|
<div className="bg-white rounded-xl shadow-sm p-1">
|
||
|
|
<div className="flex space-x-1">
|
||
|
|
{[
|
||
|
|
{ id: 'schedule', label: 'Programa', icon: Calendar },
|
||
|
|
{ id: 'batches', label: 'Lotes Activos', icon: Timer },
|
||
|
|
{ id: 'analytics', label: 'Análisis', icon: BarChart3 },
|
||
|
|
{ id: 'staff', label: 'Personal', icon: Users },
|
||
|
|
{ id: 'equipment', label: 'Equipos', icon: Settings }
|
||
|
|
].map((tab) => (
|
||
|
|
<button
|
||
|
|
key={tab.id}
|
||
|
|
onClick={() => setActiveTab(tab.id as any)}
|
||
|
|
className={`flex-1 py-3 px-4 text-sm font-medium rounded-lg transition-all flex items-center justify-center ${
|
||
|
|
activeTab === tab.id
|
||
|
|
? 'bg-primary-100 text-primary-700'
|
||
|
|
: 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<tab.icon className="h-4 w-4 mr-2" />
|
||
|
|
{tab.label}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Tab Content */}
|
||
|
|
<div className="space-y-6">
|
||
|
|
{activeTab === 'schedule' && (
|
||
|
|
<>
|
||
|
|
<ProductionSchedule
|
||
|
|
schedule={productionSchedule}
|
||
|
|
onUpdateQuantity={(itemId, quantity) => {
|
||
|
|
setProductionSchedule(prev =>
|
||
|
|
prev.map(slot => ({
|
||
|
|
...slot,
|
||
|
|
items: slot.items.map(item =>
|
||
|
|
item.id === itemId ? { ...item, quantity } : item
|
||
|
|
)
|
||
|
|
}))
|
||
|
|
);
|
||
|
|
}}
|
||
|
|
onUpdateStatus={(itemId, status) => {
|
||
|
|
setProductionSchedule(prev =>
|
||
|
|
prev.map(slot => ({
|
||
|
|
...slot,
|
||
|
|
items: slot.items.map(item =>
|
||
|
|
item.id === itemId ? { ...item, status } : item
|
||
|
|
)
|
||
|
|
}))
|
||
|
|
);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{activeTab === 'batches' && (
|
||
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
|
|
{productionBatches.map((batch) => (
|
||
|
|
<div key={batch.id} className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||
|
|
<div className="flex items-center justify-between mb-4">
|
||
|
|
<h3 className="font-semibold text-gray-900">{batch.product}</h3>
|
||
|
|
<span className={`px-3 py-1 rounded-full text-sm font-medium ${getStatusColor(batch.status)}`}>
|
||
|
|
{batch.status === 'planned' ? 'Planificado' :
|
||
|
|
batch.status === 'in_progress' ? 'En Progreso' :
|
||
|
|
batch.status === 'completed' ? 'Completado' : 'Retrasado'}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-3">
|
||
|
|
<div className="grid grid-cols-2 gap-4">
|
||
|
|
<div>
|
||
|
|
<p className="text-sm text-gray-600">Tamaño del Lote</p>
|
||
|
|
<p className="font-semibold text-gray-900">{batch.batchSize} unidades</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p className="text-sm text-gray-600">Rendimiento</p>
|
||
|
|
<p className="font-semibold text-gray-900">
|
||
|
|
{batch.actualYield || 0}/{batch.expectedYield}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-2 gap-4">
|
||
|
|
<div>
|
||
|
|
<p className="text-sm text-gray-600">Inicio</p>
|
||
|
|
<p className="font-semibold text-gray-900">{batch.startTime}</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p className="text-sm text-gray-600">Fin Estimado</p>
|
||
|
|
<p className="font-semibold text-gray-900">{batch.endTime}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{(batch.temperature || batch.humidity) && (
|
||
|
|
<div className="grid grid-cols-2 gap-4">
|
||
|
|
{batch.temperature && (
|
||
|
|
<div>
|
||
|
|
<p className="text-sm text-gray-600">Temperatura</p>
|
||
|
|
<p className="font-semibold text-gray-900">{batch.temperature}°C</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{batch.humidity && (
|
||
|
|
<div>
|
||
|
|
<p className="text-sm text-gray-600">Humedad</p>
|
||
|
|
<p className="font-semibold text-gray-900">{batch.humidity}%</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<p className="text-sm text-gray-600 mb-2">Personal Asignado</p>
|
||
|
|
<div className="flex space-x-2">
|
||
|
|
{batch.assignedStaff.map((staffId) => {
|
||
|
|
const staffMember = staff.find(s => s.id === staffId);
|
||
|
|
return (
|
||
|
|
<span
|
||
|
|
key={staffId}
|
||
|
|
className="px-2 py-1 bg-gray-100 text-gray-700 text-sm rounded"
|
||
|
|
>
|
||
|
|
{staffMember?.name || staffId}
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{batch.notes && (
|
||
|
|
<div className="bg-gray-50 rounded-lg p-3">
|
||
|
|
<p className="text-sm text-gray-700">{batch.notes}</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{activeTab === 'analytics' && (
|
||
|
|
<div className="space-y-6">
|
||
|
|
<DemandHeatmap
|
||
|
|
data={heatmapData}
|
||
|
|
onDateClick={(date) => {
|
||
|
|
console.log('Selected date:', date);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Production Trends Chart Placeholder */}
|
||
|
|
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
|
||
|
|
<BarChart3 className="h-5 w-5 mr-2 text-primary-600" />
|
||
|
|
Tendencias de Producción
|
||
|
|
</h3>
|
||
|
|
<div className="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
|
||
|
|
<div className="text-center text-gray-500">
|
||
|
|
<BarChart3 className="h-12 w-12 mx-auto mb-2 text-gray-400" />
|
||
|
|
<p>Gráfico de tendencias de producción</p>
|
||
|
|
<p className="text-sm">Próximamente disponible</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{activeTab === 'staff' && (
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
|
|
{staff.map((member) => (
|
||
|
|
<div key={member.id} className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||
|
|
<div className="flex items-center justify-between mb-4">
|
||
|
|
<h3 className="font-semibold text-gray-900">{member.name}</h3>
|
||
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||
|
|
member.status === 'available' ? 'bg-green-100 text-green-800' :
|
||
|
|
member.status === 'busy' ? 'bg-yellow-100 text-yellow-800' :
|
||
|
|
'bg-gray-100 text-gray-800'
|
||
|
|
}`}>
|
||
|
|
{member.status === 'available' ? 'Disponible' :
|
||
|
|
member.status === 'busy' ? 'Ocupado' : 'Descanso'}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-3">
|
||
|
|
<div>
|
||
|
|
<p className="text-sm text-gray-600">Rol</p>
|
||
|
|
<p className="font-medium text-gray-900 capitalize">{member.role}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{member.currentTask && (
|
||
|
|
<div>
|
||
|
|
<p className="text-sm text-gray-600">Tarea Actual</p>
|
||
|
|
<p className="font-medium text-gray-900">{member.currentTask}</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<p className="text-sm text-gray-600">Eficiencia</p>
|
||
|
|
<div className="flex items-center space-x-2">
|
||
|
|
<div className="flex-1 bg-gray-200 rounded-full h-2">
|
||
|
|
<div
|
||
|
|
className="bg-primary-600 h-2 rounded-full"
|
||
|
|
style={{ width: `${member.efficiency}%` }}
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
<span className="text-sm font-medium text-gray-900">{member.efficiency}%</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{activeTab === 'equipment' && (
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
|
|
{equipment.map((item) => (
|
||
|
|
<div key={item.id} className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||
|
|
<div className="flex items-center justify-between mb-4">
|
||
|
|
<h3 className="font-semibold text-gray-900">{item.name}</h3>
|
||
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getEquipmentStatusColor(item.status)}`}>
|
||
|
|
{item.status === 'idle' ? 'Inactivo' :
|
||
|
|
item.status === 'in_use' ? 'En Uso' :
|
||
|
|
item.status === 'maintenance' ? 'Mantenimiento' : 'Error'}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-3">
|
||
|
|
<div>
|
||
|
|
<p className="text-sm text-gray-600">Tipo</p>
|
||
|
|
<p className="font-medium text-gray-900 capitalize">{item.type}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{item.currentBatch && (
|
||
|
|
<div>
|
||
|
|
<p className="text-sm text-gray-600">Lote Actual</p>
|
||
|
|
<p className="font-medium text-gray-900">
|
||
|
|
{productionBatches.find(b => b.id === item.currentBatch)?.product || item.currentBatch}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{item.temperature && (
|
||
|
|
<div>
|
||
|
|
<p className="text-sm text-gray-600">Temperatura</p>
|
||
|
|
<p className="font-medium text-gray-900">{item.temperature}°C</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{item.maintenanceDue && (
|
||
|
|
<div>
|
||
|
|
<p className="text-sm text-gray-600">Próximo Mantenimiento</p>
|
||
|
|
<p className="font-medium text-orange-600">
|
||
|
|
{new Date(item.maintenanceDue).toLocaleDateString('es-ES')}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ProductionPage;
|