diff --git a/frontend/src/api/hooks/production.ts b/frontend/src/api/hooks/production.ts
index 944eff6c..f795a29a 100644
--- a/frontend/src/api/hooks/production.ts
+++ b/frontend/src/api/hooks/production.ts
@@ -56,11 +56,11 @@ export const useProductionDashboard = (
 export const useDailyProductionRequirements = (
   tenantId: string,
   date?: string,
-  options?: Omit<UseQueryOptions<DailyProductionRequirements, ApiError>, 'queryKey' | 'queryFn'>
+  options?: Omit<UseQueryOptions<any, ApiError>, 'queryKey' | 'queryFn'>
 ) => {
-  return useQuery<DailyProductionRequirements, ApiError>({
+  return useQuery<any, ApiError>({
     queryKey: productionKeys.dailyRequirements(tenantId, date),
-    queryFn: () => productionService.getDailyRequirements(tenantId, date),
+    queryFn: () => productionService.getDailyProductionPlan(tenantId, date),
     enabled: !!tenantId,
     staleTime: 5 * 60 * 1000, // 5 minutes
     ...options,
@@ -70,11 +70,13 @@ export const useDailyProductionRequirements = (
 export const useProductionRequirements = (
   tenantId: string,
   date?: string,
-  options?: Omit<UseQueryOptions<ProductionRequirements, ApiError>, 'queryKey' | 'queryFn'>
+  options?: Omit<UseQueryOptions<any, ApiError>, 'queryKey' | 'queryFn'>
 ) => {
-  return useQuery<ProductionRequirements, ApiError>({
+  const queryDate = date || new Date().toISOString().split('T')[0];
+
+  return useQuery<any, ApiError>({
     queryKey: productionKeys.requirements(tenantId, date),
-    queryFn: () => productionService.getProductionRequirements(tenantId, date),
+    queryFn: () => productionService.getProductionRequirements(tenantId, queryDate),
     enabled: !!tenantId,
     staleTime: 5 * 60 * 1000, // 5 minutes
     ...options,
@@ -117,11 +119,11 @@ export const useProductionSchedule = (
   tenantId: string,
   startDate?: string,
   endDate?: string,
-  options?: Omit<UseQueryOptions<ProductionScheduleData, ApiError>, 'queryKey' | 'queryFn'>
+  options?: Omit<UseQueryOptions<any, ApiError>, 'queryKey' | 'queryFn'>
 ) => {
-  return useQuery<ProductionScheduleData, ApiError>({
+  return useQuery<any, ApiError>({
     queryKey: productionKeys.schedule(tenantId, startDate, endDate),
-    queryFn: () => productionService.getProductionSchedule(tenantId, startDate, endDate),
+    queryFn: () => productionService.getSchedules(tenantId, { start_date: startDate, end_date: endDate }),
     enabled: !!tenantId,
     staleTime: 5 * 60 * 1000, // 5 minutes
     ...options,
@@ -131,11 +133,11 @@ export const useProductionSchedule = (
 export const useCapacityStatus = (
   tenantId: string,
   date?: string,
-  options?: Omit<UseQueryOptions<ProductionCapacityStatus, ApiError>, 'queryKey' | 'queryFn'>
+  options?: Omit<UseQueryOptions<any, ApiError>, 'queryKey' | 'queryFn'>
 ) => {
-  return useQuery<ProductionCapacityStatus, ApiError>({
+  return useQuery<any, ApiError>({
     queryKey: productionKeys.capacity(tenantId, date),
-    queryFn: () => productionService.getCapacityStatus(tenantId, date),
+    queryFn: () => date ? productionService.getCapacityByDate(tenantId, date) : productionService.getCapacity(tenantId),
     enabled: !!tenantId,
     staleTime: 5 * 60 * 1000, // 5 minutes
     ...options,
@@ -146,11 +148,11 @@ export const useYieldMetrics = (
   tenantId: string,
   startDate: string,
   endDate: string,
-  options?: Omit<UseQueryOptions<ProductionYieldMetrics, ApiError>, 'queryKey' | 'queryFn'>
+  options?: Omit<UseQueryOptions<any, ApiError>, 'queryKey' | 'queryFn'>
 ) => {
-  return useQuery<ProductionYieldMetrics, ApiError>({
+  return useQuery<any, ApiError>({
     queryKey: productionKeys.yieldMetrics(tenantId, startDate, endDate),
-    queryFn: () => productionService.getYieldMetrics(tenantId, startDate, endDate),
+    queryFn: () => productionService.getYieldTrends(tenantId, startDate, endDate),
     enabled: !!tenantId && !!startDate && !!endDate,
     staleTime: 15 * 60 * 1000, // 15 minutes (metrics are less frequently changing)
     ...options,
diff --git a/frontend/src/api/types/production.ts b/frontend/src/api/types/production.ts
index baddfafa..56102f80 100644
--- a/frontend/src/api/types/production.ts
+++ b/frontend/src/api/types/production.ts
@@ -384,4 +384,76 @@ export interface BatchStatistics {
   on_time_rate: number;
   period_start: string;
   period_end: string;
+}
+
+// Additional types needed for hooks
+export interface DailyProductionRequirements {
+  date: string;
+  total_planned_units: number;
+  total_completed_units: number;
+  products: Array<{
+    product_id: string;
+    product_name: string;
+    planned_quantity: number;
+    completed_quantity: number;
+    required_materials: Array<{
+      ingredient_id: string;
+      ingredient_name: string;
+      required_amount: number;
+      unit: string;
+    }>;
+  }>;
+}
+
+export interface ProductionScheduleData {
+  schedules: Array<{
+    id: string;
+    date: string;
+    shift_start: string;
+    shift_end: string;
+    total_batches_planned: number;
+    staff_count: number;
+    utilization_percentage: number;
+    is_active: boolean;
+    is_finalized: boolean;
+  }>;
+}
+
+export interface ProductionCapacityStatus {
+  date: string;
+  total_capacity: number;
+  utilized_capacity: number;
+  utilization_percentage: number;
+  equipment_utilization: Array<{
+    equipment_id: string;
+    equipment_name: string;
+    capacity: number;
+    utilization: number;
+    status: 'operational' | 'maintenance' | 'down';
+  }>;
+}
+
+export interface ProductionRequirements {
+  date: string;
+  products: Array<{
+    product_id: string;
+    product_name: string;
+    required_quantity: number;
+    planned_quantity: number;
+    priority: ProductionPriority;
+  }>;
+}
+
+export interface ProductionYieldMetrics {
+  start_date: string;
+  end_date: string;
+  overall_yield: number;
+  products: Array<{
+    product_id: string;
+    product_name: string;
+    average_yield: number;
+    best_yield: number;
+    worst_yield: number;
+    batch_count: number;
+  }>;
 }
\ No newline at end of file
diff --git a/frontend/src/components/analytics/production/AnalyticsChart.tsx b/frontend/src/components/analytics/production/AnalyticsChart.tsx
new file mode 100644
index 00000000..aecfb485
--- /dev/null
+++ b/frontend/src/components/analytics/production/AnalyticsChart.tsx
@@ -0,0 +1,362 @@
+import React, { useRef, useEffect } from 'react';
+
+export type ChartType = 'line' | 'bar' | 'area' | 'pie' | 'doughnut';
+
+export interface ChartDataPoint {
+  x: string | number;
+  y: number;
+  label?: string;
+  color?: string;
+}
+
+export interface ChartSeries {
+  id: string;
+  name: string;
+  type: ChartType;
+  data: ChartDataPoint[];
+  color: string;
+  visible?: boolean;
+}
+
+export interface AnalyticsChartProps {
+  series: ChartSeries[];
+  height?: number;
+  className?: string;
+  showLegend?: boolean;
+  showGrid?: boolean;
+  animate?: boolean;
+}
+
+export const AnalyticsChart: React.FC<AnalyticsChartProps> = ({
+  series,
+  height = 300,
+  className = '',
+  showLegend = true,
+  showGrid = true,
+  animate = true
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    if (!canvasRef.current || series.length === 0) return;
+
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    // Set canvas size
+    const rect = canvas.getBoundingClientRect();
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+    ctx.scale(dpr, dpr);
+
+    // Clear canvas
+    ctx.clearRect(0, 0, rect.width, rect.height);
+
+    // Chart settings
+    const padding = 40;
+    const chartWidth = rect.width - 2 * padding;
+    const chartHeight = rect.height - 2 * padding - (showLegend ? 40 : 0);
+
+    // Get visible series
+    const visibleSeries = series.filter(s => s.visible !== false);
+    if (visibleSeries.length === 0) return;
+
+    // Draw based on chart type
+    const primarySeries = visibleSeries[0];
+
+    if (primarySeries.type === 'pie' || primarySeries.type === 'doughnut') {
+      drawPieChart(ctx, primarySeries, rect.width, rect.height - (showLegend ? 40 : 0));
+    } else {
+      drawCartesianChart(ctx, visibleSeries, padding, chartWidth, chartHeight, showGrid);
+    }
+
+    // Draw legend
+    if (showLegend) {
+      drawLegend(ctx, visibleSeries, rect.width, rect.height);
+    }
+  }, [series, height, showLegend, showGrid]);
+
+  const drawPieChart = (ctx: CanvasRenderingContext2D, series: ChartSeries, width: number, height: number) => {
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const radius = Math.min(width, height) / 3;
+    const innerRadius = series.type === 'doughnut' ? radius * 0.6 : 0;
+
+    const total = series.data.reduce((sum, point) => sum + point.y, 0);
+    let startAngle = -Math.PI / 2;
+
+    series.data.forEach((point, index) => {
+      const sliceAngle = (point.y / total) * 2 * Math.PI;
+      const color = point.color || series.color || getDefaultColor(index);
+
+      // Draw slice
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      ctx.moveTo(centerX, centerY);
+      ctx.arc(centerX, centerY, radius, startAngle, startAngle + sliceAngle);
+      if (innerRadius > 0) {
+        ctx.arc(centerX, centerY, innerRadius, startAngle + sliceAngle, startAngle, true);
+      }
+      ctx.closePath();
+      ctx.fill();
+
+      // Draw slice border
+      ctx.strokeStyle = '#ffffff';
+      ctx.lineWidth = 2;
+      ctx.stroke();
+
+      // Draw labels
+      const labelAngle = startAngle + sliceAngle / 2;
+      const labelRadius = radius + 20;
+      const labelX = centerX + Math.cos(labelAngle) * labelRadius;
+      const labelY = centerY + Math.sin(labelAngle) * labelRadius;
+
+      ctx.fillStyle = '#374151';
+      ctx.font = '12px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText(point.label || point.x.toString(), labelX, labelY);
+
+      const percentage = ((point.y / total) * 100).toFixed(1);
+      ctx.fillText(`${percentage}%`, labelX, labelY + 15);
+
+      startAngle += sliceAngle;
+    });
+
+    // Draw center label for doughnut
+    if (series.type === 'doughnut') {
+      ctx.fillStyle = '#374151';
+      ctx.font = 'bold 16px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText(total.toString(), centerX, centerY - 5);
+      ctx.font = '12px sans-serif';
+      ctx.fillText('Total', centerX, centerY + 10);
+    }
+  };
+
+  const drawCartesianChart = (
+    ctx: CanvasRenderingContext2D,
+    seriesList: ChartSeries[],
+    padding: number,
+    chartWidth: number,
+    chartHeight: number,
+    showGrid: boolean
+  ) => {
+    // Get all data points to determine scales
+    const allData = seriesList.flatMap(s => s.data);
+    const maxY = Math.max(...allData.map(d => d.y));
+    const minY = Math.min(0, Math.min(...allData.map(d => d.y)));
+
+    // Draw grid
+    if (showGrid) {
+      ctx.strokeStyle = '#e2e8f0';
+      ctx.lineWidth = 1;
+
+      // Horizontal grid lines
+      for (let i = 0; i <= 5; i++) {
+        const y = padding + (i * chartHeight) / 5;
+        ctx.beginPath();
+        ctx.moveTo(padding, y);
+        ctx.lineTo(padding + chartWidth, y);
+        ctx.stroke();
+
+        // Y-axis labels
+        const value = maxY - (i * (maxY - minY)) / 5;
+        ctx.fillStyle = '#64748b';
+        ctx.font = '12px sans-serif';
+        ctx.textAlign = 'right';
+        ctx.fillText(Math.round(value).toString(), padding - 10, y + 4);
+      }
+    }
+
+    // Draw axes
+    ctx.strokeStyle = '#374151';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(padding, padding);
+    ctx.lineTo(padding, padding + chartHeight);
+    ctx.lineTo(padding + chartWidth, padding + chartHeight);
+    ctx.stroke();
+
+    // Draw each series
+    seriesList.forEach((series, seriesIndex) => {
+      ctx.strokeStyle = series.color || getDefaultColor(seriesIndex);
+      ctx.fillStyle = series.color || getDefaultColor(seriesIndex);
+
+      if (series.type === 'line') {
+        drawLineChart(ctx, series, padding, chartWidth, chartHeight, maxY, minY);
+      } else if (series.type === 'bar') {
+        drawBarChart(ctx, series, padding, chartWidth, chartHeight, maxY, minY, seriesIndex, seriesList.length);
+      } else if (series.type === 'area') {
+        drawAreaChart(ctx, series, padding, chartWidth, chartHeight, maxY, minY);
+      }
+    });
+  };
+
+  const drawLineChart = (
+    ctx: CanvasRenderingContext2D,
+    series: ChartSeries,
+    padding: number,
+    chartWidth: number,
+    chartHeight: number,
+    maxY: number,
+    minY: number
+  ) => {
+    if (series.data.length === 0) return;
+
+    ctx.lineWidth = 3;
+    ctx.beginPath();
+
+    series.data.forEach((point, index) => {
+      const x = padding + (index * chartWidth) / (series.data.length - 1 || 1);
+      const y = padding + chartHeight - ((point.y - minY) / (maxY - minY)) * chartHeight;
+
+      if (index === 0) {
+        ctx.moveTo(x, y);
+      } else {
+        ctx.lineTo(x, y);
+      }
+
+      // Draw points
+      ctx.fillStyle = ctx.strokeStyle;
+      ctx.beginPath();
+      ctx.arc(x, y, 4, 0, 2 * Math.PI);
+      ctx.fill();
+    });
+
+    ctx.stroke();
+  };
+
+  const drawBarChart = (
+    ctx: CanvasRenderingContext2D,
+    series: ChartSeries,
+    padding: number,
+    chartWidth: number,
+    chartHeight: number,
+    maxY: number,
+    minY: number,
+    seriesIndex: number,
+    totalSeries: number
+  ) => {
+    const barGroupWidth = chartWidth / series.data.length;
+    const barWidth = barGroupWidth / totalSeries - 4;
+
+    series.data.forEach((point, index) => {
+      const x = padding + index * barGroupWidth + seriesIndex * (barWidth + 2) + 2;
+      const barHeight = ((point.y - minY) / (maxY - minY)) * chartHeight;
+      const y = padding + chartHeight - barHeight;
+
+      ctx.fillRect(x, y, barWidth, barHeight);
+
+      // Draw value labels
+      ctx.fillStyle = '#374151';
+      ctx.font = '12px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText(point.y.toString(), x + barWidth / 2, y - 5);
+
+      // Draw x-axis labels
+      if (seriesIndex === 0) {
+        ctx.fillText(
+          point.label || point.x.toString(),
+          padding + index * barGroupWidth + barGroupWidth / 2,
+          padding + chartHeight + 20
+        );
+      }
+    });
+  };
+
+  const drawAreaChart = (
+    ctx: CanvasRenderingContext2D,
+    series: ChartSeries,
+    padding: number,
+    chartWidth: number,
+    chartHeight: number,
+    maxY: number,
+    minY: number
+  ) => {
+    if (series.data.length === 0) return;
+
+    // Create gradient
+    const gradient = ctx.createLinearGradient(0, padding, 0, padding + chartHeight);
+    gradient.addColorStop(0, `${series.color}40`);
+    gradient.addColorStop(1, `${series.color}10`);
+
+    ctx.fillStyle = gradient;
+    ctx.strokeStyle = series.color;
+    ctx.lineWidth = 2;
+
+    ctx.beginPath();
+
+    // Start from bottom left
+    ctx.moveTo(padding, padding + chartHeight);
+
+    series.data.forEach((point, index) => {
+      const x = padding + (index * chartWidth) / (series.data.length - 1 || 1);
+      const y = padding + chartHeight - ((point.y - minY) / (maxY - minY)) * chartHeight;
+      ctx.lineTo(x, y);
+    });
+
+    // Close the path at bottom right
+    ctx.lineTo(padding + chartWidth, padding + chartHeight);
+    ctx.closePath();
+    ctx.fill();
+
+    // Draw the line on top
+    ctx.beginPath();
+    series.data.forEach((point, index) => {
+      const x = padding + (index * chartWidth) / (series.data.length - 1 || 1);
+      const y = padding + chartHeight - ((point.y - minY) / (maxY - minY)) * chartHeight;
+
+      if (index === 0) {
+        ctx.moveTo(x, y);
+      } else {
+        ctx.lineTo(x, y);
+      }
+    });
+    ctx.stroke();
+  };
+
+  const drawLegend = (ctx: CanvasRenderingContext2D, seriesList: ChartSeries[], width: number, height: number) => {
+    const legendY = height - 30;
+    let legendX = width / 2 - (seriesList.length * 80) / 2;
+
+    seriesList.forEach((series, index) => {
+      // Draw legend color box
+      ctx.fillStyle = series.color || getDefaultColor(index);
+      ctx.fillRect(legendX, legendY, 12, 12);
+
+      // Draw legend text
+      ctx.fillStyle = '#374151';
+      ctx.font = '12px sans-serif';
+      ctx.textAlign = 'left';
+      ctx.fillText(series.name, legendX + 18, legendY + 9);
+
+      legendX += Math.max(80, ctx.measureText(series.name).width + 30);
+    });
+  };
+
+  const getDefaultColor = (index: number): string => {
+    const colors = [
+      '#d97706', // orange
+      '#0284c7', // blue
+      '#16a34a', // green
+      '#dc2626', // red
+      '#7c3aed', // purple
+      '#0891b2', // cyan
+      '#ea580c', // orange variant
+      '#059669'  // emerald
+    ];
+    return colors[index % colors.length];
+  };
+
+  return (
+    <div className={`relative ${className}`} style={{ height: `${height}px` }}>
+      <canvas
+        ref={canvasRef}
+        className="w-full h-full"
+        style={{ height: `${height}px` }}
+      />
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/components/analytics/production/AnalyticsWidget.tsx b/frontend/src/components/analytics/production/AnalyticsWidget.tsx
new file mode 100644
index 00000000..ec3f85d5
--- /dev/null
+++ b/frontend/src/components/analytics/production/AnalyticsWidget.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import { Card } from '../../ui';
+import { LucideIcon } from 'lucide-react';
+
+export interface AnalyticsWidgetProps {
+  title: string;
+  subtitle?: string;
+  icon?: LucideIcon;
+  loading?: boolean;
+  error?: string;
+  className?: string;
+  children: React.ReactNode;
+  actions?: React.ReactNode;
+}
+
+export const AnalyticsWidget: React.FC<AnalyticsWidgetProps> = ({
+  title,
+  subtitle,
+  icon: Icon,
+  loading = false,
+  error,
+  className = '',
+  children,
+  actions
+}) => {
+  if (error) {
+    return (
+      <Card className={`p-6 ${className}`}>
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center space-x-3">
+            {Icon && (
+              <div className="w-10 h-10 bg-red-100 dark:bg-red-900/20 rounded-lg flex items-center justify-center">
+                <Icon className="w-5 h-5 text-red-600 dark:text-red-400" />
+              </div>
+            )}
+            <div>
+              <h3 className="text-lg font-semibold text-[var(--text-primary)]">{title}</h3>
+              {subtitle && <p className="text-sm text-[var(--text-secondary)]">{subtitle}</p>}
+            </div>
+          </div>
+          {actions}
+        </div>
+        <div className="text-center py-8">
+          <div className="w-12 h-12 mx-auto bg-red-100 dark:bg-red-900/20 rounded-lg flex items-center justify-center mb-3">
+            {Icon && <Icon className="w-6 h-6 text-red-600 dark:text-red-400" />}
+          </div>
+          <p className="text-sm text-red-600 dark:text-red-400">Error: {error}</p>
+        </div>
+      </Card>
+    );
+  }
+
+  if (loading) {
+    return (
+      <Card className={`p-6 ${className}`}>
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center space-x-3">
+            {Icon && (
+              <div className="w-10 h-10 bg-[var(--bg-tertiary)] rounded-lg flex items-center justify-center">
+                <Icon className="w-5 h-5 text-[var(--text-tertiary)]" />
+              </div>
+            )}
+            <div>
+              <h3 className="text-lg font-semibold text-[var(--text-primary)]">{title}</h3>
+              {subtitle && <p className="text-sm text-[var(--text-secondary)]">{subtitle}</p>}
+            </div>
+          </div>
+          {actions}
+        </div>
+        <div className="animate-pulse">
+          <div className="h-4 bg-[var(--bg-tertiary)] rounded w-3/4 mb-3"></div>
+          <div className="h-4 bg-[var(--bg-tertiary)] rounded w-1/2 mb-3"></div>
+          <div className="h-8 bg-[var(--bg-tertiary)] rounded w-full mb-4"></div>
+          <div className="space-y-2">
+            <div className="h-4 bg-[var(--bg-tertiary)] rounded"></div>
+            <div className="h-4 bg-[var(--bg-tertiary)] rounded w-5/6"></div>
+            <div className="h-4 bg-[var(--bg-tertiary)] rounded w-4/6"></div>
+          </div>
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className={`p-6 ${className}`}>
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center space-x-3">
+          {Icon && (
+            <div className="w-10 h-10 bg-[var(--color-primary)]/10 rounded-lg flex items-center justify-center">
+              <Icon className="w-5 h-5 text-[var(--color-primary)]" />
+            </div>
+          )}
+          <div>
+            <h3 className="text-lg font-semibold text-[var(--text-primary)]">{title}</h3>
+            {subtitle && <p className="text-sm text-[var(--text-secondary)]">{subtitle}</p>}
+          </div>
+        </div>
+        {actions}
+      </div>
+      {children}
+    </Card>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/components/analytics/production/widgets/AIInsightsWidget.tsx b/frontend/src/components/analytics/production/widgets/AIInsightsWidget.tsx
new file mode 100644
index 00000000..dc5c56d5
--- /dev/null
+++ b/frontend/src/components/analytics/production/widgets/AIInsightsWidget.tsx
@@ -0,0 +1,382 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Brain, TrendingUp, AlertTriangle, Target, Zap, DollarSign, Clock } from 'lucide-react';
+import { AnalyticsWidget } from '../AnalyticsWidget';
+import { Badge, Button } from '../../../ui';
+import { useCurrentTenant } from '../../../../stores/tenant.store';
+
+interface AIInsight {
+  id: string;
+  type: 'optimization' | 'prediction' | 'anomaly' | 'recommendation';
+  priority: 'low' | 'medium' | 'high' | 'critical';
+  confidence: number; // percentage
+  title: string;
+  description: string;
+  impact: {
+    type: 'cost_savings' | 'efficiency_gain' | 'quality_improvement' | 'risk_mitigation';
+    value: number;
+    unit: 'euros' | 'percentage' | 'hours' | 'units';
+  };
+  actionable: boolean;
+  category: 'production' | 'quality' | 'maintenance' | 'energy' | 'scheduling';
+  equipment?: string;
+  timeline: string;
+  status: 'new' | 'acknowledged' | 'in_progress' | 'implemented' | 'dismissed';
+}
+
+export const AIInsightsWidget: React.FC = () => {
+  const { t } = useTranslation('production');
+  const currentTenant = useCurrentTenant();
+
+  // Mock AI insights data - replace with real AI API call
+  const aiInsights: AIInsight[] = [
+    {
+      id: '1',
+      type: 'optimization',
+      priority: 'high',
+      confidence: 92,
+      title: 'Optimización de Horarios de Horneado',
+      description: 'Ajustar los horarios de horneado para aprovechar las tarifas eléctricas más bajas puede reducir los costos de energía en un 15%.',
+      impact: {
+        type: 'cost_savings',
+        value: 45,
+        unit: 'euros'
+      },
+      actionable: true,
+      category: 'energy',
+      equipment: 'Horno Principal',
+      timeline: 'Esta semana',
+      status: 'new'
+    },
+    {
+      id: '2',
+      type: 'prediction',
+      priority: 'medium',
+      confidence: 87,
+      title: 'Aumento de Demanda de Croissants Predicho',
+      description: 'Los datos meteorológicos y de eventos sugieren un aumento del 40% en la demanda de croissants este fin de semana.',
+      impact: {
+        type: 'efficiency_gain',
+        value: 25,
+        unit: 'percentage'
+      },
+      actionable: true,
+      category: 'production',
+      timeline: 'Este fin de semana',
+      status: 'acknowledged'
+    },
+    {
+      id: '3',
+      type: 'anomaly',
+      priority: 'critical',
+      confidence: 96,
+      title: 'Declive en Puntuación de Calidad Detectado',
+      description: 'La calidad del pan ha disminuido un 8% en los últimos 3 días. Verificar los niveles de humedad de la harina.',
+      impact: {
+        type: 'quality_improvement',
+        value: 12,
+        unit: 'percentage'
+      },
+      actionable: true,
+      category: 'quality',
+      timeline: 'Inmediatamente',
+      status: 'in_progress'
+    },
+    {
+      id: '4',
+      type: 'recommendation',
+      priority: 'medium',
+      confidence: 89,
+      title: 'Mantenimiento Preventivo Recomendado',
+      description: 'La Mezcladora #2 muestra patrones de desgaste temprano. Programar mantenimiento para prevenir averías.',
+      impact: {
+        type: 'risk_mitigation',
+        value: 8,
+        unit: 'hours'
+      },
+      actionable: true,
+      category: 'maintenance',
+      equipment: 'Mezcladora A',
+      timeline: 'Próxima semana',
+      status: 'new'
+    },
+    {
+      id: '5',
+      type: 'optimization',
+      priority: 'low',
+      confidence: 78,
+      title: 'Optimización de Secuencia de Productos',
+      description: 'Reordenar la secuencia de productos puede mejorar la eficiencia general en un 5%.',
+      impact: {
+        type: 'efficiency_gain',
+        value: 5,
+        unit: 'percentage'
+      },
+      actionable: true,
+      category: 'scheduling',
+      timeline: 'Próximo mes',
+      status: 'dismissed'
+    }
+  ];
+
+  const getTypeIcon = (type: AIInsight['type']) => {
+    switch (type) {
+      case 'optimization': return Target;
+      case 'prediction': return TrendingUp;
+      case 'anomaly': return AlertTriangle;
+      case 'recommendation': return Brain;
+      default: return Brain;
+    }
+  };
+
+  const getTypeColor = (type: AIInsight['type']) => {
+    switch (type) {
+      case 'optimization': return 'text-green-600';
+      case 'prediction': return 'text-blue-600';
+      case 'anomaly': return 'text-red-600';
+      case 'recommendation': return 'text-purple-600';
+      default: return 'text-gray-600';
+    }
+  };
+
+  const getPriorityBadgeVariant = (priority: AIInsight['priority']) => {
+    switch (priority) {
+      case 'critical': return 'error';
+      case 'high': return 'warning';
+      case 'medium': return 'info';
+      case 'low': return 'default';
+      default: return 'default';
+    }
+  };
+
+  const getStatusBadgeVariant = (status: AIInsight['status']) => {
+    switch (status) {
+      case 'new': return 'warning';
+      case 'acknowledged': return 'info';
+      case 'in_progress': return 'info';
+      case 'implemented': return 'success';
+      case 'dismissed': return 'default';
+      default: return 'default';
+    }
+  };
+
+  const getImpactIcon = (type: AIInsight['impact']['type']) => {
+    switch (type) {
+      case 'cost_savings': return DollarSign;
+      case 'efficiency_gain': return Zap;
+      case 'quality_improvement': return Target;
+      case 'risk_mitigation': return Clock;
+      default: return Target;
+    }
+  };
+
+  const formatImpactValue = (impact: AIInsight['impact']) => {
+    switch (impact.unit) {
+      case 'euros': return `€${impact.value}`;
+      case 'percentage': return `${impact.value}%`;
+      case 'hours': return `${impact.value}h`;
+      case 'units': return `${impact.value} unidades`;
+      default: return impact.value.toString();
+    }
+  };
+
+  const activeInsights = aiInsights.filter(i => i.status !== 'dismissed');
+  const highPriorityInsights = activeInsights.filter(i => i.priority === 'high' || i.priority === 'critical');
+  const implementedInsights = aiInsights.filter(i => i.status === 'implemented');
+  const avgConfidence = activeInsights.reduce((sum, insight) => sum + insight.confidence, 0) / activeInsights.length;
+
+  const totalPotentialSavings = aiInsights
+    .filter(i => i.impact.type === 'cost_savings' && i.status !== 'dismissed')
+    .reduce((sum, insight) => sum + insight.impact.value, 0);
+
+  return (
+    <AnalyticsWidget
+      title={t('ai.title')}
+      subtitle={t('ai.subtitle')}
+      icon={Brain}
+      actions={
+        <div className="flex space-x-2">
+          <Button variant="outline" size="sm">
+            <Brain className="w-4 h-4 mr-1" />
+            {t('ai.actions.train_model')}
+          </Button>
+          <Button variant="primary" size="sm">
+            <Target className="w-4 h-4 mr-1" />
+            {t('ai.actions.implement_all')}
+          </Button>
+        </div>
+      }
+    >
+      <div className="space-y-6">
+        {/* AI Insights Overview Stats */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
+            <Brain className="w-8 h-8 mx-auto text-purple-600 mb-2" />
+            <p className="text-2xl font-bold text-[var(--text-primary)]">{activeInsights.length}</p>
+            <p className="text-sm text-[var(--text-secondary)]">{t('ai.stats.active_insights')}</p>
+          </div>
+          <div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
+            <AlertTriangle className="w-8 h-8 mx-auto text-red-600 mb-2" />
+            <p className="text-2xl font-bold text-[var(--text-primary)]">{highPriorityInsights.length}</p>
+            <p className="text-sm text-[var(--text-secondary)]">{t('ai.stats.high_priority')}</p>
+          </div>
+          <div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
+            <div className="w-8 h-8 mx-auto bg-green-100 dark:bg-green-900/20 rounded-full flex items-center justify-center mb-2">
+              <span className="text-green-600 font-bold text-sm">€</span>
+            </div>
+            <p className="text-2xl font-bold text-[var(--text-primary)]">€{totalPotentialSavings}</p>
+            <p className="text-sm text-[var(--text-secondary)]">{t('ai.stats.potential_savings')}</p>
+          </div>
+          <div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
+            <div className="w-8 h-8 mx-auto bg-blue-100 dark:bg-blue-900/20 rounded-full flex items-center justify-center mb-2">
+              <span className="text-blue-600 font-bold text-sm">%</span>
+            </div>
+            <p className="text-2xl font-bold text-[var(--text-primary)]">{avgConfidence.toFixed(0)}%</p>
+            <p className="text-sm text-[var(--text-secondary)]">{t('ai.stats.avg_confidence')}</p>
+          </div>
+        </div>
+
+        {/* AI Status */}
+        <div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
+          <div className="flex items-center space-x-2">
+            <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+            <span className="text-sm font-medium text-green-600">
+              {t('ai.status.active')}
+            </span>
+            <span className="text-xs text-[var(--text-secondary)] ml-2">
+              {t('ai.last_updated')}
+            </span>
+          </div>
+        </div>
+
+        {/* High Priority Insights */}
+        {highPriorityInsights.length > 0 && (
+          <div>
+            <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3 flex items-center">
+              <AlertTriangle className="w-4 h-4 mr-2 text-red-600" />
+              {t('ai.high_priority_insights')} ({highPriorityInsights.length})
+            </h4>
+            <div className="space-y-3">
+              {highPriorityInsights.slice(0, 3).map((insight) => {
+                const TypeIcon = getTypeIcon(insight.type);
+                const ImpactIcon = getImpactIcon(insight.impact.type);
+
+                return (
+                  <div key={insight.id} className="p-4 bg-[var(--bg-secondary)] rounded-lg border border-red-200 dark:border-red-800">
+                    <div className="flex items-start justify-between mb-3">
+                      <div className="flex items-start space-x-3">
+                        <TypeIcon className={`w-5 h-5 mt-1 ${getTypeColor(insight.type)}`} />
+                        <div className="flex-1">
+                          <div className="flex items-center space-x-2 mb-1">
+                            <p className="font-medium text-[var(--text-primary)]">{insight.title}</p>
+                            <Badge variant={getPriorityBadgeVariant(insight.priority)}>
+                              {t(`ai.priority.${insight.priority}`)}
+                            </Badge>
+                          </div>
+                          <p className="text-sm text-[var(--text-secondary)] mb-2">{insight.description}</p>
+                          <div className="flex items-center space-x-4 text-xs text-[var(--text-secondary)]">
+                            <span>{t('ai.confidence')}: {insight.confidence}%</span>
+                            <span>{t('ai.timeline')}: {insight.timeline}</span>
+                            {insight.equipment && <span>{t('ai.equipment')}: {insight.equipment}</span>}
+                          </div>
+                        </div>
+                      </div>
+                      <Badge variant={getStatusBadgeVariant(insight.status)}>
+                        {t(`ai.status.${insight.status}`)}
+                      </Badge>
+                    </div>
+
+                    {/* Impact */}
+                    <div className="flex items-center justify-between p-3 bg-[var(--bg-tertiary)] rounded-lg">
+                      <div className="flex items-center space-x-2">
+                        <ImpactIcon className="w-4 h-4 text-[var(--color-primary)]" />
+                        <span className="text-sm font-medium text-[var(--text-primary)]">
+                          {t(`ai.impact.${insight.impact.type}`)}
+                        </span>
+                      </div>
+                      <span className="text-lg font-bold text-green-600">
+                        {formatImpactValue(insight.impact)}
+                      </span>
+                    </div>
+
+                    {insight.actionable && insight.status === 'new' && (
+                      <div className="mt-3 flex space-x-2">
+                        <Button variant="outline" size="sm">
+                          {t('ai.actions.acknowledge')}
+                        </Button>
+                        <Button variant="primary" size="sm">
+                          {t('ai.actions.implement')}
+                        </Button>
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* All Insights */}
+        <div>
+          <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3 flex items-center">
+            <Brain className="w-4 h-4 mr-2" />
+            {t('ai.all_insights')} ({activeInsights.length})
+          </h4>
+          <div className="space-y-3 max-h-96 overflow-y-auto">
+            {activeInsights.map((insight) => {
+              const TypeIcon = getTypeIcon(insight.type);
+              const ImpactIcon = getImpactIcon(insight.impact.type);
+
+              return (
+                <div key={insight.id} className="p-3 bg-[var(--bg-secondary)] rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center space-x-3">
+                      <TypeIcon className={`w-4 h-4 ${getTypeColor(insight.type)}`} />
+                      <div className="flex-1">
+                        <div className="flex items-center space-x-2">
+                          <p className="font-medium text-[var(--text-primary)] text-sm">{insight.title}</p>
+                          <Badge variant={getPriorityBadgeVariant(insight.priority)} className="text-xs">
+                            {t(`ai.priority.${insight.priority}`)}
+                          </Badge>
+                        </div>
+                        <div className="flex items-center space-x-4 text-xs text-[var(--text-secondary)] mt-1">
+                          <span>{insight.confidence}% {t('ai.confidence')}</span>
+                          <span>•</span>
+                          <span>{insight.timeline}</span>
+                          <span>•</span>
+                          <div className="flex items-center space-x-1">
+                            <ImpactIcon className="w-3 h-3" />
+                            <span>{formatImpactValue(insight.impact)}</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <Badge variant={getStatusBadgeVariant(insight.status)} className="text-xs">
+                      {t(`ai.status.${insight.status}`)}
+                    </Badge>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* AI Performance Summary */}
+        <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+          <div className="flex items-start space-x-2">
+            <Brain className="w-5 h-5 text-blue-600 mt-0.5" />
+            <div>
+              <p className="text-sm font-medium text-blue-600">
+                {t('ai.performance.summary')}
+              </p>
+              <p className="text-xs text-[var(--text-secondary)] mt-1">
+                {implementedInsights.length} {t('ai.performance.insights_implemented')},
+                {totalPotentialSavings > 0 && ` €${totalPotentialSavings} ${t('ai.performance.in_savings_identified')}`}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </AnalyticsWidget>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/components/analytics/production/widgets/CapacityUtilizationWidget.tsx b/frontend/src/components/analytics/production/widgets/CapacityUtilizationWidget.tsx
new file mode 100644
index 00000000..2bb8d259
--- /dev/null
+++ b/frontend/src/components/analytics/production/widgets/CapacityUtilizationWidget.tsx
@@ -0,0 +1,253 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { BarChart3, TrendingUp, AlertTriangle, Zap } from 'lucide-react';
+import { AnalyticsWidget } from '../AnalyticsWidget';
+import { AnalyticsChart, ChartSeries } from '../AnalyticsChart';
+import { Button, ProgressBar } from '../../../ui';
+import { useProductionDashboard, useCapacityStatus } from '../../../../api/hooks/production';
+import { useCurrentTenant } from '../../../../stores/tenant.store';
+
+interface CapacityData {
+  resource: string;
+  utilization: number;
+  capacity: number;
+  allocated: number;
+  available: number;
+  type: 'oven' | 'mixer' | 'staff' | 'station';
+}
+
+export const CapacityUtilizationWidget: React.FC = () => {
+  const { t } = useTranslation('production');
+  const currentTenant = useCurrentTenant();
+  const tenantId = currentTenant?.id || '';
+  const today = new Date().toISOString().split('T')[0];
+
+  const { data: dashboard, isLoading: dashboardLoading, error: dashboardError } = useProductionDashboard(tenantId);
+  const { data: capacity, isLoading: capacityLoading, error: capacityError } = useCapacityStatus(tenantId, today);
+
+  const isLoading = dashboardLoading || capacityLoading;
+  const error = dashboardError?.message || capacityError?.message;
+
+  const overallUtilization = dashboard?.capacity_utilization || 0;
+
+  // Mock capacity data by resource type (in real implementation, this would be processed from capacity API)
+  const getCapacityByResource = (): CapacityData[] => {
+    return [
+      {
+        resource: t('equipment.oven_capacity'),
+        utilization: 89,
+        capacity: 24,
+        allocated: 21,
+        available: 3,
+        type: 'oven'
+      },
+      {
+        resource: t('equipment.mixer_capacity'),
+        utilization: 67,
+        capacity: 12,
+        allocated: 8,
+        available: 4,
+        type: 'mixer'
+      },
+      {
+        resource: t('schedule.staff_capacity'),
+        utilization: 85,
+        capacity: 8,
+        allocated: 7,
+        available: 1,
+        type: 'staff'
+      },
+      {
+        resource: t('schedule.work_stations'),
+        utilization: 75,
+        capacity: 6,
+        allocated: 4,
+        available: 2,
+        type: 'station'
+      }
+    ];
+  };
+
+  const capacityData = getCapacityByResource();
+
+  // Heatmap data for hourly utilization
+  const getHourlyUtilizationData = (): ChartSeries[] => {
+    const hours = Array.from({ length: 12 }, (_, i) => i + 6); // 6 AM to 6 PM
+    const mockData = hours.map(hour => ({
+      x: `${hour}:00`,
+      y: Math.max(20, Math.min(100, 50 + Math.sin(hour / 2) * 30 + Math.random() * 20)),
+      label: `${hour}:00`
+    }));
+
+    return [
+      {
+        id: 'hourly-utilization',
+        name: t('insights.hourly_utilization'),
+        type: 'area',
+        color: '#d97706',
+        data: mockData
+      }
+    ];
+  };
+
+  const getUtilizationStatus = (utilization: number) => {
+    if (utilization >= 95) return { color: 'text-red-600', status: 'critical', bgColor: 'bg-red-100 dark:bg-red-900/20' };
+    if (utilization >= 85) return { color: 'text-orange-600', status: 'high', bgColor: 'bg-orange-100 dark:bg-orange-900/20' };
+    if (utilization >= 70) return { color: 'text-green-600', status: 'optimal', bgColor: 'bg-green-100 dark:bg-green-900/20' };
+    return { color: 'text-blue-600', status: 'low', bgColor: 'bg-blue-100 dark:bg-blue-900/20' };
+  };
+
+  const getResourceIcon = (type: CapacityData['type']) => {
+    switch (type) {
+      case 'oven': return '🔥';
+      case 'mixer': return '🥄';
+      case 'staff': return '👥';
+      case 'station': return '🏭';
+      default: return '📊';
+    }
+  };
+
+  const getProgressBarVariant = (utilization: number) => {
+    if (utilization >= 95) return 'error';
+    if (utilization >= 85) return 'warning';
+    if (utilization >= 70) return 'success';
+    return 'info';
+  };
+
+  const overallStatus = getUtilizationStatus(overallUtilization);
+
+  return (
+    <AnalyticsWidget
+      title={t('stats.capacity_utilization')}
+      subtitle={t('insights.resource_allocation_efficiency')}
+      icon={BarChart3}
+      loading={isLoading}
+      error={error}
+      actions={
+        <Button variant="outline" size="sm">
+          <Zap className="w-4 h-4 mr-1" />
+          {t('actions.optimize')}
+        </Button>
+      }
+    >
+      <div className="space-y-4">
+        {/* Overall Utilization */}
+        <div className="text-center">
+          <div className="flex items-center justify-center space-x-2 mb-2">
+            <BarChart3 className={`w-6 h-6 ${overallStatus.color}`} />
+            <span className="text-3xl font-bold text-[var(--text-primary)]">
+              {overallUtilization.toFixed(1)}%
+            </span>
+          </div>
+          <div className={`inline-flex items-center space-x-2 px-3 py-1 rounded-full text-sm ${overallStatus.bgColor}`}>
+            <span className={overallStatus.color}>
+              {t(`status.${overallStatus.status}`)}
+            </span>
+          </div>
+        </div>
+
+        {/* Resource Breakdown */}
+        <div>
+          <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3">
+            {t('insights.resource_breakdown')}
+          </h4>
+          <div className="space-y-3">
+            {capacityData.map((resource, index) => {
+              const status = getUtilizationStatus(resource.utilization);
+
+              return (
+                <div key={index} className="p-3 bg-[var(--bg-secondary)] rounded-lg">
+                  <div className="flex items-center justify-between mb-2">
+                    <div className="flex items-center space-x-2">
+                      <span className="text-lg">{getResourceIcon(resource.type)}</span>
+                      <span className="text-sm font-medium text-[var(--text-primary)]">
+                        {resource.resource}
+                      </span>
+                    </div>
+                    <span className={`text-sm font-semibold ${status.color}`}>
+                      {resource.utilization}%
+                    </span>
+                  </div>
+
+                  <ProgressBar
+                    value={resource.utilization}
+                    variant={getProgressBarVariant(resource.utilization)}
+                    size="sm"
+                    className="mb-2"
+                  />
+
+                  <div className="flex items-center justify-between text-xs text-[var(--text-secondary)]">
+                    <span>
+                      {resource.allocated}/{resource.capacity} {t('common.allocated')}
+                    </span>
+                    <span>
+                      {resource.available} {t('common.available')}
+                    </span>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Hourly Heatmap */}
+        <div>
+          <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3">
+            {t('insights.hourly_utilization_pattern')}
+          </h4>
+          <AnalyticsChart
+            series={getHourlyUtilizationData()}
+            height={120}
+            showLegend={false}
+            showGrid={true}
+          />
+        </div>
+
+        {/* Alerts & Recommendations */}
+        <div className="space-y-2">
+          {capacityData.some(r => r.utilization >= 95) && (
+            <div className="flex items-start space-x-2 p-3 bg-red-50 dark:bg-red-900/20 rounded-lg">
+              <AlertTriangle className="w-4 h-4 mt-0.5 text-red-600" />
+              <div>
+                <p className="text-sm font-medium text-red-600">
+                  {t('alerts.capacity_critical')}
+                </p>
+                <p className="text-xs text-[var(--text-secondary)] mt-1">
+                  {t('alerts.capacity_critical_description')}
+                </p>
+              </div>
+            </div>
+          )}
+
+          {capacityData.some(r => r.utilization >= 85 && r.utilization < 95) && (
+            <div className="flex items-start space-x-2 p-3 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
+              <TrendingUp className="w-4 h-4 mt-0.5 text-orange-600" />
+              <div>
+                <p className="text-sm font-medium text-orange-600">
+                  {t('alerts.capacity_high')}
+                </p>
+                <p className="text-xs text-[var(--text-secondary)] mt-1">
+                  {t('alerts.capacity_high_description')}
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Peak Hours Summary */}
+        <div className="pt-3 border-t border-[var(--border-primary)]">
+          <div className="grid grid-cols-2 gap-3 text-center text-sm">
+            <div>
+              <p className="font-semibold text-[var(--text-primary)]">10:00 - 12:00</p>
+              <p className="text-xs text-[var(--text-secondary)]">{t('insights.peak_hours')}</p>
+            </div>
+            <div>
+              <p className="font-semibold text-[var(--text-primary)]">14:00 - 16:00</p>
+              <p className="text-xs text-[var(--text-secondary)]">{t('insights.off_peak_optimal')}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </AnalyticsWidget>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/components/analytics/production/widgets/CostPerUnitWidget.tsx b/frontend/src/components/analytics/production/widgets/CostPerUnitWidget.tsx
new file mode 100644
index 00000000..99af0b44
--- /dev/null
+++ b/frontend/src/components/analytics/production/widgets/CostPerUnitWidget.tsx
@@ -0,0 +1,296 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { DollarSign, TrendingUp, TrendingDown, PieChart } from 'lucide-react';
+import { AnalyticsWidget } from '../AnalyticsWidget';
+import { AnalyticsChart, ChartSeries } from '../AnalyticsChart';
+import { Button } from '../../../ui';
+import { useActiveBatches } from '../../../../api/hooks/production';
+import { useCurrentTenant } from '../../../../stores/tenant.store';
+
+interface ProductCostData {
+  product: string;
+  estimatedCost: number;
+  actualCost: number;
+  variance: number;
+  variancePercent: number;
+  units: number;
+  costPerUnit: number;
+}
+
+export const CostPerUnitWidget: React.FC = () => {
+  const { t } = useTranslation('production');
+  const currentTenant = useCurrentTenant();
+  const tenantId = currentTenant?.id || '';
+
+  const { data: batchesData, isLoading, error } = useActiveBatches(tenantId);
+  const batches = batchesData?.batches || [];
+
+  // Process batches to calculate cost per unit data
+  const getProductCostData = (): ProductCostData[] => {
+    const productMap = new Map<string, any>();
+
+    batches.forEach(batch => {
+      const key = batch.product_name;
+      if (!productMap.has(key)) {
+        productMap.set(key, {
+          product: batch.product_name,
+          estimatedCosts: [],
+          actualCosts: [],
+          quantities: []
+        });
+      }
+
+      const data = productMap.get(key);
+      if (batch.estimated_cost) data.estimatedCosts.push(batch.estimated_cost);
+      if (batch.actual_cost) data.actualCosts.push(batch.actual_cost);
+      if (batch.actual_quantity || batch.planned_quantity) {
+        data.quantities.push(batch.actual_quantity || batch.planned_quantity);
+      }
+    });
+
+    return Array.from(productMap.values()).map(data => {
+      const avgEstimated = data.estimatedCosts.reduce((a: number, b: number) => a + b, 0) / (data.estimatedCosts.length || 1);
+      const avgActual = data.actualCosts.reduce((a: number, b: number) => a + b, 0) / (data.actualCosts.length || 1);
+      const totalUnits = data.quantities.reduce((a: number, b: number) => a + b, 0);
+      const variance = avgActual - avgEstimated;
+      const variancePercent = avgEstimated > 0 ? (variance / avgEstimated) * 100 : 0;
+      const costPerUnit = totalUnits > 0 ? avgActual / totalUnits : avgActual;
+
+      return {
+        product: data.product,
+        estimatedCost: avgEstimated,
+        actualCost: avgActual,
+        variance,
+        variancePercent,
+        units: totalUnits,
+        costPerUnit
+      };
+    }).filter(item => item.actualCost > 0);
+  };
+
+  const productCostData = getProductCostData();
+  const totalCosts = productCostData.reduce((sum, item) => sum + item.actualCost, 0);
+  const averageCostPerUnit = productCostData.length > 0
+    ? productCostData.reduce((sum, item) => sum + item.costPerUnit, 0) / productCostData.length
+    : 0;
+
+  // Create chart data for cost comparison
+  const getCostComparisonChartData = (): ChartSeries[] => {
+    if (productCostData.length === 0) return [];
+
+    const estimatedData = productCostData.map(item => ({
+      x: item.product,
+      y: item.estimatedCost,
+      label: item.product
+    }));
+
+    const actualData = productCostData.map(item => ({
+      x: item.product,
+      y: item.actualCost,
+      label: item.product
+    }));
+
+    return [
+      {
+        id: 'estimated-cost',
+        name: t('cost.estimated_cost'),
+        type: 'bar',
+        color: '#94a3b8',
+        data: estimatedData
+      },
+      {
+        id: 'actual-cost',
+        name: t('cost.actual_cost'),
+        type: 'bar',
+        color: '#d97706',
+        data: actualData
+      }
+    ];
+  };
+
+  // Create pie chart for cost distribution
+  const getCostDistributionChartData = (): ChartSeries[] => {
+    if (productCostData.length === 0) return [];
+
+    const pieData = productCostData.map((item, index) => ({
+      x: item.product,
+      y: item.actualCost,
+      label: item.product,
+      color: getProductColor(index)
+    }));
+
+    return [
+      {
+        id: 'cost-distribution',
+        name: t('cost.cost_distribution'),
+        type: 'pie',
+        color: '#d97706',
+        data: pieData
+      }
+    ];
+  };
+
+  const getProductColor = (index: number): string => {
+    const colors = ['#d97706', '#0284c7', '#16a34a', '#dc2626', '#7c3aed', '#0891b2'];
+    return colors[index % colors.length];
+  };
+
+  const getVarianceStatus = (variancePercent: number) => {
+    if (Math.abs(variancePercent) <= 5) return { color: 'text-green-600', status: 'on_target' };
+    if (variancePercent > 5) return { color: 'text-red-600', status: 'over_budget' };
+    return { color: 'text-blue-600', status: 'under_budget' };
+  };
+
+  return (
+    <AnalyticsWidget
+      title={t('cost.cost_per_unit_analysis')}
+      subtitle={t('cost.estimated_vs_actual_costs')}
+      icon={DollarSign}
+      loading={isLoading}
+      error={error?.message}
+      actions={
+        <Button variant="outline" size="sm">
+          <PieChart className="w-4 h-4 mr-1" />
+          {t('cost.view_breakdown')}
+        </Button>
+      }
+    >
+      <div className="space-y-4">
+        {/* Overall Metrics */}
+        <div className="grid grid-cols-2 gap-4">
+          <div className="p-4 bg-[var(--bg-secondary)] rounded-lg text-center">
+            <div className="flex items-center justify-center space-x-2 mb-2">
+              <DollarSign className="w-5 h-5 text-[var(--color-primary)]" />
+              <span className="text-lg font-bold text-[var(--text-primary)]">
+                €{averageCostPerUnit.toFixed(2)}
+              </span>
+            </div>
+            <p className="text-sm text-[var(--text-secondary)]">{t('cost.average_cost_per_unit')}</p>
+          </div>
+          <div className="p-4 bg-[var(--bg-secondary)] rounded-lg text-center">
+            <div className="flex items-center justify-center space-x-2 mb-2">
+              <TrendingUp className="w-5 h-5 text-[var(--color-primary)]" />
+              <span className="text-lg font-bold text-[var(--text-primary)]">
+                €{totalCosts.toFixed(0)}
+              </span>
+            </div>
+            <p className="text-sm text-[var(--text-secondary)]">{t('cost.total_production_cost')}</p>
+          </div>
+        </div>
+
+        {productCostData.length === 0 ? (
+          <div className="text-center py-8 text-[var(--text-secondary)]">
+            <DollarSign className="w-12 h-12 mx-auto mb-3 opacity-50" />
+            <p className="text-sm">{t('cost.no_cost_data_available')}</p>
+          </div>
+        ) : (
+          <>
+            {/* Cost Comparison Chart */}
+            <div>
+              <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3">
+                {t('cost.estimated_vs_actual')}
+              </h4>
+              <AnalyticsChart
+                series={getCostComparisonChartData()}
+                height={200}
+                showLegend={true}
+                showGrid={true}
+              />
+            </div>
+
+            {/* Product Cost Details */}
+            <div>
+              <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3">
+                {t('cost.product_cost_breakdown')}
+              </h4>
+              <div className="space-y-3 max-h-64 overflow-y-auto">
+                {productCostData.map((item, index) => {
+                  const varianceStatus = getVarianceStatus(item.variancePercent);
+                  const VarianceIcon = item.variance >= 0 ? TrendingUp : TrendingDown;
+
+                  return (
+                    <div key={index} className="p-3 bg-[var(--bg-secondary)] rounded-lg">
+                      <div className="flex items-center justify-between mb-2">
+                        <div className="flex items-center space-x-3">
+                          <div
+                            className="w-3 h-3 rounded-full"
+                            style={{ backgroundColor: getProductColor(index) }}
+                          />
+                          <span className="font-medium text-[var(--text-primary)]">
+                            {item.product}
+                          </span>
+                        </div>
+                        <span className="text-lg font-bold text-[var(--text-primary)]">
+                          €{item.costPerUnit.toFixed(2)}
+                        </span>
+                      </div>
+
+                      <div className="grid grid-cols-3 gap-3 text-sm">
+                        <div>
+                          <p className="text-[var(--text-secondary)]">{t('cost.estimated')}</p>
+                          <p className="font-semibold text-[var(--text-primary)]">
+                            €{item.estimatedCost.toFixed(2)}
+                          </p>
+                        </div>
+                        <div>
+                          <p className="text-[var(--text-secondary)]">{t('cost.actual')}</p>
+                          <p className="font-semibold text-[var(--text-primary)]">
+                            €{item.actualCost.toFixed(2)}
+                          </p>
+                        </div>
+                        <div>
+                          <p className="text-[var(--text-secondary)]">{t('cost.variance')}</p>
+                          <div className={`flex items-center space-x-1 ${varianceStatus.color}`}>
+                            <VarianceIcon className="w-3 h-3" />
+                            <span className="font-semibold">
+                              {item.variancePercent > 0 ? '+' : ''}{item.variancePercent.toFixed(1)}%
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="mt-2 pt-2 border-t border-[var(--border-primary)] text-xs text-[var(--text-tertiary)]">
+                        {t('cost.units_produced')}: {item.units}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+
+            {/* Cost Distribution Pie Chart */}
+            <div>
+              <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3">
+                {t('cost.cost_distribution')}
+              </h4>
+              <AnalyticsChart
+                series={getCostDistributionChartData()}
+                height={200}
+                showLegend={true}
+                showGrid={false}
+              />
+            </div>
+
+            {/* Cost Optimization Insights */}
+            <div className="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+              <div className="flex items-start space-x-2">
+                <DollarSign className="w-4 h-4 mt-0.5 text-blue-600" />
+                <div>
+                  <p className="text-sm font-medium text-blue-600">
+                    {t('cost.optimization_opportunity')}
+                  </p>
+                  <p className="text-xs text-[var(--text-secondary)] mt-1">
+                    {productCostData.some(item => item.variancePercent > 10)
+                      ? t('cost.high_variance_detected')
+                      : t('cost.costs_within_expected_range')
+                    }
+                  </p>
+                </div>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </AnalyticsWidget>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/components/analytics/production/widgets/EquipmentEfficiencyWidget.tsx b/frontend/src/components/analytics/production/widgets/EquipmentEfficiencyWidget.tsx
new file mode 100644
index 00000000..0c1da4c1
--- /dev/null
+++ b/frontend/src/components/analytics/production/widgets/EquipmentEfficiencyWidget.tsx
@@ -0,0 +1,389 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Zap, TrendingUp, TrendingDown, BarChart3, Target } from 'lucide-react';
+import { AnalyticsWidget } from '../AnalyticsWidget';
+import { AnalyticsChart, ChartSeries } from '../AnalyticsChart';
+import { Button } from '../../../ui';
+import { useCurrentTenant } from '../../../../stores/tenant.store';
+
+interface EquipmentEfficiencyData {
+  equipmentId: string;
+  equipmentName: string;
+  type: 'oven' | 'mixer' | 'proofer' | 'packaging';
+  currentEfficiency: number;
+  targetEfficiency: number;
+  trend: 'up' | 'down' | 'stable';
+  energyConsumption: number; // kWh
+  productionOutput: number; // units per hour
+  oee: number; // Overall Equipment Effectiveness
+  availability: number;
+  performance: number;
+  quality: number;
+  downtimeMinutes: number;
+  weeklyData: Array<{
+    day: string;
+    efficiency: number;
+    energyConsumption: number;
+    output: number;
+  }>;
+}
+
+export const EquipmentEfficiencyWidget: React.FC = () => {
+  const { t } = useTranslation('production');
+  const currentTenant = useCurrentTenant();
+
+  // Mock efficiency data - replace with real API call
+  const efficiencyData: EquipmentEfficiencyData[] = [
+    {
+      equipmentId: '1',
+      equipmentName: 'Horno Principal',
+      type: 'oven',
+      currentEfficiency: 94,
+      targetEfficiency: 95,
+      trend: 'up',
+      energyConsumption: 45.2,
+      productionOutput: 120,
+      oee: 89,
+      availability: 95,
+      performance: 96,
+      quality: 98,
+      downtimeMinutes: 15,
+      weeklyData: [
+        { day: 'Lun', efficiency: 92, energyConsumption: 44, output: 118 },
+        { day: 'Mar', efficiency: 93, energyConsumption: 45, output: 119 },
+        { day: 'Mié', efficiency: 94, energyConsumption: 45.2, output: 120 },
+        { day: 'Jue', efficiency: 94, energyConsumption: 45.1, output: 121 },
+        { day: 'Vie', efficiency: 95, energyConsumption: 45.3, output: 122 },
+        { day: 'Sáb', efficiency: 94, energyConsumption: 44.8, output: 119 },
+        { day: 'Dom', efficiency: 93, energyConsumption: 44.5, output: 117 }
+      ]
+    },
+    {
+      equipmentId: '2',
+      equipmentName: 'Mezcladora A',
+      type: 'mixer',
+      currentEfficiency: 87,
+      targetEfficiency: 90,
+      trend: 'down',
+      energyConsumption: 12.5,
+      productionOutput: 85,
+      oee: 82,
+      availability: 92,
+      performance: 89,
+      quality: 95,
+      downtimeMinutes: 45,
+      weeklyData: [
+        { day: 'Lun', efficiency: 89, energyConsumption: 12, output: 88 },
+        { day: 'Mar', efficiency: 88, energyConsumption: 12.2, output: 87 },
+        { day: 'Mié', efficiency: 87, energyConsumption: 12.5, output: 85 },
+        { day: 'Jue', efficiency: 86, energyConsumption: 12.8, output: 84 },
+        { day: 'Vie', efficiency: 87, energyConsumption: 12.6, output: 86 },
+        { day: 'Sáb', efficiency: 88, energyConsumption: 12.3, output: 87 },
+        { day: 'Dom', efficiency: 87, energyConsumption: 12.4, output: 85 }
+      ]
+    },
+    {
+      equipmentId: '3',
+      equipmentName: 'Cámara de Fermentación 1',
+      type: 'proofer',
+      currentEfficiency: 96,
+      targetEfficiency: 95,
+      trend: 'stable',
+      energyConsumption: 8.3,
+      productionOutput: 95,
+      oee: 94,
+      availability: 98,
+      performance: 97,
+      quality: 99,
+      downtimeMinutes: 5,
+      weeklyData: [
+        { day: 'Lun', efficiency: 96, energyConsumption: 8.2, output: 94 },
+        { day: 'Mar', efficiency: 96, energyConsumption: 8.3, output: 95 },
+        { day: 'Mié', efficiency: 96, energyConsumption: 8.3, output: 95 },
+        { day: 'Jue', efficiency: 97, energyConsumption: 8.4, output: 96 },
+        { day: 'Vie', efficiency: 96, energyConsumption: 8.3, output: 95 },
+        { day: 'Sáb', efficiency: 95, energyConsumption: 8.2, output: 94 },
+        { day: 'Dom', efficiency: 96, energyConsumption: 8.3, output: 95 }
+      ]
+    }
+  ];
+
+  const getTrendIcon = (trend: EquipmentEfficiencyData['trend']) => {
+    switch (trend) {
+      case 'up': return TrendingUp;
+      case 'down': return TrendingDown;
+      case 'stable': return BarChart3;
+      default: return BarChart3;
+    }
+  };
+
+  const getTrendColor = (trend: EquipmentEfficiencyData['trend']) => {
+    switch (trend) {
+      case 'up': return 'text-green-600';
+      case 'down': return 'text-red-600';
+      case 'stable': return 'text-blue-600';
+      default: return 'text-gray-600';
+    }
+  };
+
+  const getEfficiencyStatus = (current: number, target: number) => {
+    const percentage = (current / target) * 100;
+    if (percentage >= 100) return { status: 'excellent', color: 'text-green-600', bgColor: 'bg-green-100 dark:bg-green-900/20' };
+    if (percentage >= 90) return { status: 'good', color: 'text-blue-600', bgColor: 'bg-blue-100 dark:bg-blue-900/20' };
+    if (percentage >= 80) return { status: 'warning', color: 'text-orange-600', bgColor: 'bg-orange-100 dark:bg-orange-900/20' };
+    return { status: 'critical', color: 'text-red-600', bgColor: 'bg-red-100 dark:bg-red-900/20' };
+  };
+
+  // Calculate overall metrics
+  const avgEfficiency = efficiencyData.reduce((sum, item) => sum + item.currentEfficiency, 0) / efficiencyData.length;
+  const avgOEE = efficiencyData.reduce((sum, item) => sum + item.oee, 0) / efficiencyData.length;
+  const totalEnergyConsumption = efficiencyData.reduce((sum, item) => sum + item.energyConsumption, 0);
+  const totalDowntime = efficiencyData.reduce((sum, item) => sum + item.downtimeMinutes, 0);
+
+  // Create efficiency comparison chart
+  const getEfficiencyComparisonChartData = (): ChartSeries[] => {
+    const currentData = efficiencyData.map(item => ({
+      x: item.equipmentName,
+      y: item.currentEfficiency,
+      label: `${item.equipmentName}: ${item.currentEfficiency}%`
+    }));
+
+    const targetData = efficiencyData.map(item => ({
+      x: item.equipmentName,
+      y: item.targetEfficiency,
+      label: `Target: ${item.targetEfficiency}%`
+    }));
+
+    return [
+      {
+        id: 'current-efficiency',
+        name: t('equipment.efficiency.current'),
+        type: 'bar',
+        color: '#16a34a',
+        data: currentData
+      },
+      {
+        id: 'target-efficiency',
+        name: t('equipment.efficiency.target'),
+        type: 'bar',
+        color: '#d97706',
+        data: targetData
+      }
+    ];
+  };
+
+  // Create weekly efficiency trend chart
+  const getWeeklyTrendChartData = (): ChartSeries[] => {
+    return efficiencyData.map((equipment, index) => ({
+      id: `weekly-${equipment.equipmentId}`,
+      name: equipment.equipmentName,
+      type: 'line',
+      color: ['#16a34a', '#3b82f6', '#f59e0b'][index % 3],
+      data: equipment.weeklyData.map(day => ({
+        x: day.day,
+        y: day.efficiency,
+        label: `${day.day}: ${day.efficiency}%`
+      }))
+    }));
+  };
+
+  // Create OEE breakdown chart
+  const getOEEBreakdownChartData = (): ChartSeries[] => {
+    const avgAvailability = efficiencyData.reduce((sum, item) => sum + item.availability, 0) / efficiencyData.length;
+    const avgPerformance = efficiencyData.reduce((sum, item) => sum + item.performance, 0) / efficiencyData.length;
+    const avgQuality = efficiencyData.reduce((sum, item) => sum + item.quality, 0) / efficiencyData.length;
+
+    return [
+      {
+        id: 'oee-breakdown',
+        name: 'OEE Components',
+        type: 'doughnut',
+        color: '#3b82f6',
+        data: [
+          { x: t('equipment.oee.availability'), y: avgAvailability, label: `${t('equipment.oee.availability')}: ${avgAvailability.toFixed(1)}%` },
+          { x: t('equipment.oee.performance'), y: avgPerformance, label: `${t('equipment.oee.performance')}: ${avgPerformance.toFixed(1)}%` },
+          { x: t('equipment.oee.quality'), y: avgQuality, label: `${t('equipment.oee.quality')}: ${avgQuality.toFixed(1)}%` }
+        ]
+      }
+    ];
+  };
+
+  return (
+    <AnalyticsWidget
+      title={t('equipment.efficiency.title')}
+      subtitle={t('equipment.efficiency.subtitle')}
+      icon={Zap}
+      actions={
+        <div className="flex space-x-2">
+          <Button variant="outline" size="sm">
+            <BarChart3 className="w-4 h-4 mr-1" />
+            {t('equipment.efficiency.analyze')}
+          </Button>
+          <Button variant="primary" size="sm">
+            <Target className="w-4 h-4 mr-1" />
+            {t('equipment.efficiency.optimize')}
+          </Button>
+        </div>
+      }
+    >
+      <div className="space-y-6">
+        {/* Efficiency Overview Stats */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
+            <Zap className="w-8 h-8 mx-auto text-green-600 mb-2" />
+            <p className="text-2xl font-bold text-[var(--text-primary)]">{avgEfficiency.toFixed(1)}%</p>
+            <p className="text-sm text-[var(--text-secondary)]">{t('equipment.efficiency.average')}</p>
+          </div>
+          <div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
+            <Target className="w-8 h-8 mx-auto text-blue-600 mb-2" />
+            <p className="text-2xl font-bold text-[var(--text-primary)]">{avgOEE.toFixed(1)}%</p>
+            <p className="text-sm text-[var(--text-secondary)]">{t('equipment.oee.overall')}</p>
+          </div>
+          <div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
+            <div className="w-8 h-8 mx-auto bg-orange-100 dark:bg-orange-900/20 rounded-full flex items-center justify-center mb-2">
+              <span className="text-orange-600 font-bold text-sm">kWh</span>
+            </div>
+            <p className="text-2xl font-bold text-[var(--text-primary)]">{totalEnergyConsumption.toFixed(1)}</p>
+            <p className="text-sm text-[var(--text-secondary)]">{t('equipment.energy_consumption')}</p>
+          </div>
+          <div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
+            <div className="w-8 h-8 mx-auto bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center mb-2">
+              <span className="text-red-600 font-bold text-xs">min</span>
+            </div>
+            <p className="text-2xl font-bold text-[var(--text-primary)]">{totalDowntime}</p>
+            <p className="text-sm text-[var(--text-secondary)]">{t('equipment.downtime.total')}</p>
+          </div>
+        </div>
+
+        {/* Equipment Efficiency List */}
+        <div>
+          <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3 flex items-center">
+            <Zap className="w-4 h-4 mr-2" />
+            {t('equipment.efficiency.by_equipment')}
+          </h4>
+          <div className="space-y-3">
+            {efficiencyData.map((item) => {
+              const TrendIcon = getTrendIcon(item.trend);
+              const trendColor = getTrendColor(item.trend);
+              const status = getEfficiencyStatus(item.currentEfficiency, item.targetEfficiency);
+
+              return (
+                <div key={item.equipmentId} className="p-4 bg-[var(--bg-secondary)] rounded-lg">
+                  <div className="flex items-center justify-between mb-3">
+                    <div className="flex items-center space-x-3">
+                      <Zap className="w-5 h-5 text-[var(--color-primary)]" />
+                      <div>
+                        <p className="font-medium text-[var(--text-primary)]">{item.equipmentName}</p>
+                        <div className="flex items-center space-x-2 text-xs text-[var(--text-secondary)]">
+                          <span>OEE: {item.oee}%</span>
+                          <span>•</span>
+                          <span>{item.energyConsumption} kWh</span>
+                          <span>•</span>
+                          <span>{item.productionOutput} {t('equipment.units_per_hour')}</span>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <TrendIcon className={`w-4 h-4 ${trendColor}`} />
+                      <div className="text-right">
+                        <div className="text-lg font-bold text-[var(--text-primary)]">
+                          {item.currentEfficiency}%
+                        </div>
+                        <div className="text-xs text-[var(--text-secondary)]">
+                          {t('equipment.efficiency.target')}: {item.targetEfficiency}%
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Progress bar */}
+                  <div className="w-full bg-[var(--bg-tertiary)] rounded-full h-2 mb-3">
+                    <div
+                      className="bg-[var(--color-primary)] h-2 rounded-full transition-all duration-300"
+                      style={{ width: `${(item.currentEfficiency / 100) * 100}%` }}
+                    />
+                  </div>
+
+                  {/* OEE Components */}
+                  <div className="grid grid-cols-3 gap-4 text-center">
+                    <div>
+                      <p className="text-lg font-semibold text-green-600">{item.availability}%</p>
+                      <p className="text-xs text-[var(--text-secondary)]">{t('equipment.oee.availability')}</p>
+                    </div>
+                    <div>
+                      <p className="text-lg font-semibold text-blue-600">{item.performance}%</p>
+                      <p className="text-xs text-[var(--text-secondary)]">{t('equipment.oee.performance')}</p>
+                    </div>
+                    <div>
+                      <p className="text-lg font-semibold text-orange-600">{item.quality}%</p>
+                      <p className="text-xs text-[var(--text-secondary)]">{t('equipment.oee.quality')}</p>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Efficiency Charts */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Current vs Target Efficiency */}
+          <div>
+            <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3">
+              {t('equipment.efficiency.current_vs_target')}
+            </h4>
+            <AnalyticsChart
+              series={getEfficiencyComparisonChartData()}
+              height={200}
+              showLegend={true}
+              showGrid={true}
+            />
+          </div>
+
+          {/* OEE Breakdown */}
+          <div>
+            <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3">
+              {t('equipment.oee.breakdown')}
+            </h4>
+            <AnalyticsChart
+              series={getOEEBreakdownChartData()}
+              height={200}
+              showLegend={true}
+              showGrid={false}
+            />
+          </div>
+        </div>
+
+        {/* Weekly Efficiency Trends */}
+        <div>
+          <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3">
+            {t('equipment.efficiency.weekly_trends')}
+          </h4>
+          <AnalyticsChart
+            series={getWeeklyTrendChartData()}
+            height={250}
+            showLegend={true}
+            showGrid={true}
+          />
+        </div>
+
+        {/* Efficiency Recommendations */}
+        <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+          <div className="flex items-start space-x-2">
+            <Target className="w-5 h-5 text-blue-600 mt-0.5" />
+            <div>
+              <p className="text-sm font-medium text-blue-600">
+                {t('equipment.efficiency.recommendations')}
+              </p>
+              <ul className="text-xs text-[var(--text-secondary)] mt-1 space-y-1">
+                <li>• {t('equipment.efficiency.recommendation_1')}: Mezcladora A {t('equipment.efficiency.needs_maintenance')}</li>
+                <li>• {t('equipment.efficiency.recommendation_2')}: {t('equipment.efficiency.optimize_energy_consumption')}</li>
+                <li>• {t('equipment.efficiency.recommendation_3')}: {t('equipment.efficiency.schedule_preventive_maintenance')}</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </AnalyticsWidget>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/components/analytics/production/widgets/EquipmentStatusWidget.tsx b/frontend/src/components/analytics/production/widgets/EquipmentStatusWidget.tsx
new file mode 100644
index 00000000..a5e6f9fd
--- /dev/null
+++ b/frontend/src/components/analytics/production/widgets/EquipmentStatusWidget.tsx
@@ -0,0 +1,285 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Settings, AlertTriangle, CheckCircle, Clock, Zap } from 'lucide-react';
+import { AnalyticsWidget } from '../AnalyticsWidget';
+import { AnalyticsChart, ChartSeries } from '../AnalyticsChart';
+import { Badge, Button } from '../../../ui';
+import { useCurrentTenant } from '../../../../stores/tenant.store';
+
+interface EquipmentStatus {
+  id: string;
+  name: string;
+  type: 'oven' | 'mixer' | 'proofer' | 'packaging';
+  status: 'operational' | 'warning' | 'maintenance' | 'down';
+  efficiency: number;
+  temperature?: number;
+  uptime: number;
+  lastMaintenance: string;
+  nextMaintenance: string;
+  alertCount: number;
+}
+
+export const EquipmentStatusWidget: React.FC = () => {
+  const { t } = useTranslation('production');
+  const currentTenant = useCurrentTenant();
+
+  // Mock equipment data - replace with real API call
+  const equipment: EquipmentStatus[] = [
+    {
+      id: '1',
+      name: 'Horno Principal',
+      type: 'oven',
+      status: 'operational',
+      efficiency: 94,
+      temperature: 180,
+      uptime: 98.5,
+      lastMaintenance: '2024-01-15',
+      nextMaintenance: '2024-02-15',
+      alertCount: 0
+    },
+    {
+      id: '2',
+      name: 'Mezcladora A',
+      type: 'mixer',
+      status: 'warning',
+      efficiency: 87,
+      uptime: 85.2,
+      lastMaintenance: '2024-01-10',
+      nextMaintenance: '2024-02-10',
+      alertCount: 2
+    },
+    {
+      id: '3',
+      name: 'Cámara de Fermentación 1',
+      type: 'proofer',
+      status: 'operational',
+      efficiency: 96,
+      temperature: 28,
+      uptime: 99.1,
+      lastMaintenance: '2024-01-20',
+      nextMaintenance: '2024-02-20',
+      alertCount: 0
+    },
+    {
+      id: '4',
+      name: 'Empaquetadora',
+      type: 'packaging',
+      status: 'maintenance',
+      efficiency: 0,
+      uptime: 0,
+      lastMaintenance: '2024-01-25',
+      nextMaintenance: '2024-01-26',
+      alertCount: 1
+    }
+  ];
+
+  const getStatusColor = (status: EquipmentStatus['status']) => {
+    switch (status) {
+      case 'operational': return 'text-green-600';
+      case 'warning': return 'text-orange-600';
+      case 'maintenance': return 'text-blue-600';
+      case 'down': return 'text-red-600';
+      default: return 'text-gray-600';
+    }
+  };
+
+  const getStatusBadgeVariant = (status: EquipmentStatus['status']) => {
+    switch (status) {
+      case 'operational': return 'success';
+      case 'warning': return 'warning';
+      case 'maintenance': return 'info';
+      case 'down': return 'error';
+      default: return 'default';
+    }
+  };
+
+  const getStatusIcon = (status: EquipmentStatus['status']) => {
+    switch (status) {
+      case 'operational': return CheckCircle;
+      case 'warning': return AlertTriangle;
+      case 'maintenance': return Clock;
+      case 'down': return AlertTriangle;
+      default: return Settings;
+    }
+  };
+
+  const operationalCount = equipment.filter(e => e.status === 'operational').length;
+  const warningCount = equipment.filter(e => e.status === 'warning').length;
+  const maintenanceCount = equipment.filter(e => e.status === 'maintenance').length;
+  const downCount = equipment.filter(e => e.status === 'down').length;
+  const avgEfficiency = equipment.reduce((sum, e) => sum + e.efficiency, 0) / equipment.length;
+
+  // Equipment efficiency chart data
+  const getEfficiencyChartData = (): ChartSeries[] => {
+    const data = equipment.map(item => ({
+      x: item.name,
+      y: item.efficiency,
+      label: `${item.name}: ${item.efficiency}%`
+    }));
+
+    return [
+      {
+        id: 'equipment-efficiency',
+        name: t('equipment.efficiency'),
+        type: 'bar',
+        color: '#16a34a',
+        data
+      }
+    ];
+  };
+
+  // Status distribution chart
+  const getStatusDistributionChartData = (): ChartSeries[] => {
+    const statusData = [
+      { x: t('equipment.status.operational'), y: operationalCount, label: `${operationalCount} ${t('equipment.status.operational')}` },
+      { x: t('equipment.status.warning'), y: warningCount, label: `${warningCount} ${t('equipment.status.warning')}` },
+      { x: t('equipment.status.maintenance'), y: maintenanceCount, label: `${maintenanceCount} ${t('equipment.status.maintenance')}` },
+      { x: t('equipment.status.down'), y: downCount, label: `${downCount} ${t('equipment.status.down')}` }
+    ].filter(item => item.y > 0);
+
+    return [
+      {
+        id: 'status-distribution',
+        name: t('equipment.status.distribution'),
+        type: 'doughnut',
+        color: '#3b82f6',
+        data: statusData
+      }
+    ];
+  };
+
+  return (
+    <AnalyticsWidget
+      title={t('equipment.title')}
+      subtitle={t('equipment.subtitle')}
+      icon={Settings}
+      actions={
+        <div className="flex space-x-2">
+          <Button variant="outline" size="sm">
+            <Clock className="w-4 h-4 mr-1" />
+            {t('equipment.actions.schedule_maintenance')}
+          </Button>
+          <Button variant="primary" size="sm">
+            <Zap className="w-4 h-4 mr-1" />
+            {t('actions.optimize')}
+          </Button>
+        </div>
+      }
+    >
+      <div className="space-y-6">
+        {/* Equipment Overview Stats */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
+            <CheckCircle className="w-8 h-8 mx-auto text-green-600 mb-2" />
+            <p className="text-2xl font-bold text-[var(--text-primary)]">{operationalCount}</p>
+            <p className="text-sm text-[var(--text-secondary)]">{t('equipment.stats.operational')}</p>
+          </div>
+          <div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
+            <AlertTriangle className="w-8 h-8 mx-auto text-orange-600 mb-2" />
+            <p className="text-2xl font-bold text-[var(--text-primary)]">{warningCount}</p>
+            <p className="text-sm text-[var(--text-secondary)]">{t('equipment.stats.needs_attention')}</p>
+          </div>
+          <div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
+            <div className="w-8 h-8 mx-auto bg-blue-100 dark:bg-blue-900/20 rounded-full flex items-center justify-center mb-2">
+              <span className="text-blue-600 font-bold text-lg">{avgEfficiency.toFixed(0)}%</span>
+            </div>
+            <p className="text-2xl font-bold text-[var(--text-primary)]">{avgEfficiency.toFixed(1)}%</p>
+            <p className="text-sm text-[var(--text-secondary)]">{t('equipment.stats.avg_efficiency')}</p>
+          </div>
+          <div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
+            <AlertTriangle className="w-8 h-8 mx-auto text-red-600 mb-2" />
+            <p className="text-2xl font-bold text-[var(--text-primary)]">
+              {equipment.reduce((sum, e) => sum + e.alertCount, 0)}
+            </p>
+            <p className="text-sm text-[var(--text-secondary)]">{t('equipment.stats.alerts')}</p>
+          </div>
+        </div>
+
+        {/* Equipment List */}
+        <div>
+          <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3 flex items-center">
+            <Settings className="w-4 h-4 mr-2" />
+            {t('equipment.status.equipment_list')} ({equipment.length})
+          </h4>
+          <div className="space-y-3">
+            {equipment.map((item) => {
+              const StatusIcon = getStatusIcon(item.status);
+              return (
+                <div key={item.id} className="p-4 bg-[var(--bg-secondary)] rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center space-x-3">
+                      <StatusIcon className={`w-5 h-5 ${getStatusColor(item.status)}`} />
+                      <div>
+                        <p className="font-medium text-[var(--text-primary)]">{item.name}</p>
+                        <div className="flex items-center space-x-4 text-xs text-[var(--text-secondary)]">
+                          <span>{t('equipment.efficiency')}: {item.efficiency}%</span>
+                          <span>{t('equipment.uptime')}: {item.uptime}%</span>
+                          {item.temperature && (
+                            <span>{t('equipment.temperature')}: {item.temperature}°C</span>
+                          )}
+                          {item.alertCount > 0 && (
+                            <span className="text-red-600">{item.alertCount} {t('equipment.unread_alerts')}</span>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                    <Badge variant={getStatusBadgeVariant(item.status)}>
+                      {t(`equipment.status.${item.status}`)}
+                    </Badge>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Equipment Charts */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Efficiency Chart */}
+          <div>
+            <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3">
+              {t('equipment.efficiency')} {t('stats.by_equipment')}
+            </h4>
+            <AnalyticsChart
+              series={getEfficiencyChartData()}
+              height={200}
+              showLegend={false}
+              showGrid={true}
+            />
+          </div>
+
+          {/* Status Distribution */}
+          <div>
+            <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3">
+              {t('equipment.status.distribution')}
+            </h4>
+            <AnalyticsChart
+              series={getStatusDistributionChartData()}
+              height={200}
+              showLegend={true}
+              showGrid={false}
+            />
+          </div>
+        </div>
+
+        {/* Maintenance Alerts */}
+        {equipment.some(e => e.alertCount > 0 || e.status === 'maintenance') && (
+          <div className="p-4 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
+            <div className="flex items-start space-x-2">
+              <AlertTriangle className="w-5 h-5 text-orange-600 mt-0.5" />
+              <div>
+                <p className="text-sm font-medium text-orange-600">
+                  {t('equipment.alerts.maintenance_required')}
+                </p>
+                <p className="text-xs text-[var(--text-secondary)] mt-1">
+                  {equipment.filter(e => e.status === 'maintenance').length} {t('equipment.alerts.equipment_in_maintenance')},
+                  {equipment.reduce((sum, e) => sum + e.alertCount, 0)} {t('equipment.alerts.active_alerts')}
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </AnalyticsWidget>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/components/analytics/production/widgets/LiveBatchTrackerWidget.tsx b/frontend/src/components/analytics/production/widgets/LiveBatchTrackerWidget.tsx
new file mode 100644
index 00000000..ef0f7c58
--- /dev/null
+++ b/frontend/src/components/analytics/production/widgets/LiveBatchTrackerWidget.tsx
@@ -0,0 +1,259 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Activity, Clock, AlertCircle, CheckCircle, Play, Pause } from 'lucide-react';
+import { AnalyticsWidget } from '../AnalyticsWidget';
+import { Badge, ProgressBar, Button } from '../../../ui';
+import { useActiveBatches } from '../../../../api/hooks/production';
+import { useCurrentTenant } from '../../../../stores/tenant.store';
+import { ProductionStatus } from '../../../../api/types/production';
+
+export const LiveBatchTrackerWidget: React.FC = () => {
+  const { t } = useTranslation('production');
+  const currentTenant = useCurrentTenant();
+  const tenantId = currentTenant?.id || '';
+
+  const { data: batchesData, isLoading, error } = useActiveBatches(tenantId);
+  const batches = batchesData?.batches || [];
+
+  const getStatusIcon = (status: ProductionStatus) => {
+    switch (status) {
+      case ProductionStatus.COMPLETED:
+        return CheckCircle;
+      case ProductionStatus.IN_PROGRESS:
+        return Play;
+      case ProductionStatus.ON_HOLD:
+        return Pause;
+      case ProductionStatus.FAILED:
+        return AlertCircle;
+      default:
+        return Clock;
+    }
+  };
+
+  const getStatusBadgeVariant = (status: ProductionStatus) => {
+    switch (status) {
+      case ProductionStatus.COMPLETED:
+        return 'success';
+      case ProductionStatus.IN_PROGRESS:
+        return 'info';
+      case ProductionStatus.PENDING:
+        return 'warning';
+      case ProductionStatus.ON_HOLD:
+        return 'warning';
+      case ProductionStatus.CANCELLED:
+      case ProductionStatus.FAILED:
+        return 'error';
+      default:
+        return 'default';
+    }
+  };
+
+  const calculateProgress = (batch: any) => {
+    if (batch.status === ProductionStatus.COMPLETED) return 100;
+    if (batch.status === ProductionStatus.PENDING) return 0;
+
+    if (batch.actual_start_time && batch.planned_duration_minutes) {
+      const startTime = new Date(batch.actual_start_time).getTime();
+      const now = new Date().getTime();
+      const elapsed = (now - startTime) / (1000 * 60); // minutes
+      const progress = Math.min((elapsed / batch.planned_duration_minutes) * 100, 100);
+      return Math.round(progress);
+    }
+
+    return 25; // Default for in-progress without timing info
+  };
+
+  const calculateETA = (batch: any) => {
+    if (batch.status === ProductionStatus.COMPLETED) return null;
+    if (!batch.actual_start_time || !batch.planned_duration_minutes) return null;
+
+    const startTime = new Date(batch.actual_start_time).getTime();
+    const eta = new Date(startTime + batch.planned_duration_minutes * 60 * 1000);
+    const now = new Date();
+
+    if (eta < now) {
+      const delay = Math.round((now.getTime() - eta.getTime()) / (1000 * 60));
+      return `${delay}m ${t('schedule.delayed')}`;
+    }
+
+    return eta.toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' });
+  };
+
+  const getProgressBarVariant = (status: ProductionStatus, progress: number) => {
+    if (status === ProductionStatus.COMPLETED) return 'success';
+    if (status === ProductionStatus.FAILED || status === ProductionStatus.CANCELLED) return 'error';
+    if (progress > 90) return 'warning';
+    return 'info';
+  };
+
+  return (
+    <AnalyticsWidget
+      title={t('tracker.live_batch_tracker')}
+      subtitle={t('tracker.current_batches_status_progress')}
+      icon={Activity}
+      loading={isLoading}
+      error={error?.message}
+      actions={
+        <Button variant="outline" size="sm">
+          <Activity className="w-4 h-4 mr-1" />
+          {t('actions.refresh')}
+        </Button>
+      }
+    >
+      <div className="space-y-3">
+        {batches.length === 0 ? (
+          <div className="text-center py-8 text-[var(--text-secondary)]">
+            <Activity className="w-12 h-12 mx-auto mb-3 opacity-50" />
+            <h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
+              {t('messages.no_active_batches')}
+            </h3>
+            <p className="text-sm">{t('messages.no_active_batches_description')}</p>
+          </div>
+        ) : (
+          <div className="space-y-3 max-h-96 overflow-y-auto">
+            {batches.map((batch) => {
+              const StatusIcon = getStatusIcon(batch.status);
+              const progress = calculateProgress(batch);
+              const eta = calculateETA(batch);
+
+              return (
+                <div
+                  key={batch.id}
+                  className="p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-primary)] hover:shadow-md transition-all"
+                >
+                  {/* Header */}
+                  <div className="flex items-start justify-between mb-3">
+                    <div className="flex items-start space-x-3 flex-1">
+                      <div className="w-8 h-8 bg-[var(--color-primary)]/10 rounded-lg flex items-center justify-center mt-0.5">
+                        <StatusIcon className="w-4 h-4 text-[var(--color-primary)]" />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <h4 className="font-semibold text-[var(--text-primary)] mb-1">
+                          {batch.product_name}
+                        </h4>
+                        <p className="text-sm text-[var(--text-secondary)] mb-1">
+                          {t('batch.batch_number')}: {batch.batch_number}
+                        </p>
+                        <div className="flex items-center space-x-4 text-xs text-[var(--text-tertiary)]">
+                          <span>{batch.planned_quantity} {t('common.units')}</span>
+                          {batch.actual_quantity && (
+                            <span>
+                              {t('batch.actual')}: {batch.actual_quantity} {t('common.units')}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                    <Badge variant={getStatusBadgeVariant(batch.status)}>
+                      {t(`status.${batch.status.toLowerCase()}`)}
+                    </Badge>
+                  </div>
+
+                  {/* Progress Bar */}
+                  {batch.status !== ProductionStatus.PENDING && (
+                    <div className="mb-3">
+                      <div className="flex items-center justify-between mb-1">
+                        <span className="text-xs text-[var(--text-secondary)]">
+                          {t('tracker.progress')}
+                        </span>
+                        <span className="text-xs font-medium text-[var(--text-primary)]">
+                          {progress}%
+                        </span>
+                      </div>
+                      <ProgressBar
+                        value={progress}
+                        variant={getProgressBarVariant(batch.status, progress)}
+                        size="sm"
+                      />
+                    </div>
+                  )}
+
+                  {/* Details */}
+                  <div className="flex items-center justify-between text-xs">
+                    <div className="flex items-center space-x-4">
+                      {batch.priority && (
+                        <span className={`font-medium ${
+                          batch.priority === 'URGENT' ? 'text-red-600' :
+                          batch.priority === 'HIGH' ? 'text-orange-600' :
+                          batch.priority === 'MEDIUM' ? 'text-blue-600' :
+                          'text-gray-600'
+                        }`}>
+                          {t(`priority.${batch.priority.toLowerCase()}`)}
+                        </span>
+                      )}
+                      {batch.is_rush_order && (
+                        <span className="text-red-600 font-medium">
+                          {t('batch.rush_order')}
+                        </span>
+                      )}
+                    </div>
+                    <div className="flex items-center space-x-1 text-[var(--text-secondary)]">
+                      <Clock className="w-3 h-3" />
+                      <span>
+                        {eta ? (
+                          <span className={eta.includes('delayed') ? 'text-red-600' : ''}>
+                            ETA: {eta}
+                          </span>
+                        ) : (
+                          t('tracker.pending_start')
+                        )}
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* Equipment & Staff */}
+                  {(batch.equipment_used?.length > 0 || batch.staff_assigned?.length > 0) && (
+                    <div className="mt-2 pt-2 border-t border-[var(--border-primary)] text-xs text-[var(--text-tertiary)]">
+                      {batch.equipment_used?.length > 0 && (
+                        <div className="mb-1">
+                          {t('batch.equipment')}: {batch.equipment_used.join(', ')}
+                        </div>
+                      )}
+                      {batch.staff_assigned?.length > 0 && (
+                        <div>
+                          {t('batch.staff')}: {batch.staff_assigned.length} {t('common.assigned')}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        {/* Summary */}
+        {batches.length > 0 && (
+          <div className="pt-3 border-t border-[var(--border-primary)]">
+            <div className="grid grid-cols-4 gap-4 text-center text-xs">
+              <div>
+                <p className="font-medium text-green-600">
+                  {batches.filter(b => b.status === ProductionStatus.COMPLETED).length}
+                </p>
+                <p className="text-[var(--text-tertiary)]">{t('status.completed')}</p>
+              </div>
+              <div>
+                <p className="font-medium text-blue-600">
+                  {batches.filter(b => b.status === ProductionStatus.IN_PROGRESS).length}
+                </p>
+                <p className="text-[var(--text-tertiary)]">{t('status.in_progress')}</p>
+              </div>
+              <div>
+                <p className="font-medium text-orange-600">
+                  {batches.filter(b => b.status === ProductionStatus.PENDING).length}
+                </p>
+                <p className="text-[var(--text-tertiary)]">{t('status.pending')}</p>
+              </div>
+              <div>
+                <p className="font-medium text-red-600">
+                  {batches.filter(b => [ProductionStatus.FAILED, ProductionStatus.CANCELLED].includes(b.status)).length}
+                </p>
+                <p className="text-[var(--text-tertiary)]">{t('tracker.issues')}</p>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </AnalyticsWidget>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/components/analytics/production/widgets/MaintenanceScheduleWidget.tsx b/frontend/src/components/analytics/production/widgets/MaintenanceScheduleWidget.tsx
new file mode 100644
index 00000000..36b827a8
--- /dev/null
+++ b/frontend/src/components/analytics/production/widgets/MaintenanceScheduleWidget.tsx
@@ -0,0 +1,305 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Calendar, Clock, Wrench, AlertCircle, CheckCircle2 } from 'lucide-react';
+import { AnalyticsWidget } from '../AnalyticsWidget';
+import { Badge, Button } from '../../../ui';
+import { useCurrentTenant } from '../../../../stores/tenant.store';
+
+interface MaintenanceTask {
+  id: string;
+  equipmentId: string;
+  equipmentName: string;
+  type: 'preventive' | 'corrective' | 'inspection';
+  priority: 'low' | 'medium' | 'high' | 'urgent';
+  status: 'scheduled' | 'in_progress' | 'completed' | 'overdue';
+  scheduledDate: string;
+  completedDate?: string;
+  estimatedDuration: number; // in hours
+  actualDuration?: number;
+  technician?: string;
+  description: string;
+  cost?: number;
+}
+
+export const MaintenanceScheduleWidget: React.FC = () => {
+  const { t } = useTranslation('production');
+  const currentTenant = useCurrentTenant();
+
+  // Mock maintenance data - replace with real API call
+  const maintenanceTasks: MaintenanceTask[] = [
+    {
+      id: '1',
+      equipmentId: '1',
+      equipmentName: 'Horno Principal',
+      type: 'preventive',
+      priority: 'high',
+      status: 'scheduled',
+      scheduledDate: '2024-01-28',
+      estimatedDuration: 4,
+      description: 'Limpieza profunda y calibración de temperatura',
+      cost: 150
+    },
+    {
+      id: '2',
+      equipmentId: '2',
+      equipmentName: 'Mezcladora A',
+      type: 'corrective',
+      priority: 'urgent',
+      status: 'overdue',
+      scheduledDate: '2024-01-25',
+      estimatedDuration: 2,
+      description: 'Reparación de motor y reemplazo de correas',
+      cost: 280
+    },
+    {
+      id: '3',
+      equipmentId: '3',
+      equipmentName: 'Cámara de Fermentación 1',
+      type: 'inspection',
+      priority: 'medium',
+      status: 'in_progress',
+      scheduledDate: '2024-01-26',
+      estimatedDuration: 1,
+      technician: 'Carlos López',
+      description: 'Inspección rutinaria de sistemas de control',
+      cost: 80
+    },
+    {
+      id: '4',
+      equipmentId: '4',
+      equipmentName: 'Empaquetadora',
+      type: 'preventive',
+      priority: 'medium',
+      status: 'completed',
+      scheduledDate: '2024-01-24',
+      completedDate: '2024-01-24',
+      estimatedDuration: 3,
+      actualDuration: 2.5,
+      technician: 'Ana García',
+      description: 'Mantenimiento preventivo mensual',
+      cost: 120
+    },
+    {
+      id: '5',
+      equipmentId: '1',
+      equipmentName: 'Horno Principal',
+      type: 'inspection',
+      priority: 'low',
+      status: 'scheduled',
+      scheduledDate: '2024-02-05',
+      estimatedDuration: 0.5,
+      description: 'Inspección de seguridad semanal'
+    }
+  ];
+
+  const getStatusColor = (status: MaintenanceTask['status']) => {
+    switch (status) {
+      case 'completed': return 'text-green-600';
+      case 'in_progress': return 'text-blue-600';
+      case 'scheduled': return 'text-orange-600';
+      case 'overdue': return 'text-red-600';
+      default: return 'text-gray-600';
+    }
+  };
+
+  const getStatusBadgeVariant = (status: MaintenanceTask['status']) => {
+    switch (status) {
+      case 'completed': return 'success';
+      case 'in_progress': return 'info';
+      case 'scheduled': return 'warning';
+      case 'overdue': return 'error';
+      default: return 'default';
+    }
+  };
+
+  const getPriorityColor = (priority: MaintenanceTask['priority']) => {
+    switch (priority) {
+      case 'urgent': return 'text-red-600';
+      case 'high': return 'text-orange-600';
+      case 'medium': return 'text-blue-600';
+      case 'low': return 'text-gray-600';
+      default: return 'text-gray-600';
+    }
+  };
+
+  const getTypeIcon = (type: MaintenanceTask['type']) => {
+    switch (type) {
+      case 'preventive': return Calendar;
+      case 'corrective': return Wrench;
+      case 'inspection': return CheckCircle2;
+      default: return Wrench;
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('es-ES', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric'
+    });
+  };
+
+  const scheduledTasks = maintenanceTasks.filter(t => t.status === 'scheduled');
+  const overdueTasks = maintenanceTasks.filter(t => t.status === 'overdue');
+  const inProgressTasks = maintenanceTasks.filter(t => t.status === 'in_progress');
+  const completedTasks = maintenanceTasks.filter(t => t.status === 'completed');
+
+  const totalCost = maintenanceTasks.reduce((sum, task) => sum + (task.cost || 0), 0);
+  const avgDuration = maintenanceTasks.reduce((sum, task) => sum + task.estimatedDuration, 0) / maintenanceTasks.length;
+
+  return (
+    <AnalyticsWidget
+      title={t('equipment.maintenance.title')}
+      subtitle={t('equipment.maintenance.subtitle')}
+      icon={Calendar}
+      actions={
+        <div className="flex space-x-2">
+          <Button variant="outline" size="sm">
+            <Calendar className="w-4 h-4 mr-1" />
+            {t('equipment.actions.schedule_maintenance')}
+          </Button>
+          <Button variant="primary" size="sm">
+            <Wrench className="w-4 h-4 mr-1" />
+            {t('equipment.actions.add_task')}
+          </Button>
+        </div>
+      }
+    >
+      <div className="space-y-6">
+        {/* Maintenance Overview Stats */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
+            <Calendar className="w-8 h-8 mx-auto text-orange-600 mb-2" />
+            <p className="text-2xl font-bold text-[var(--text-primary)]">{scheduledTasks.length}</p>
+            <p className="text-sm text-[var(--text-secondary)]">{t('equipment.maintenance.scheduled')}</p>
+          </div>
+          <div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
+            <AlertCircle className="w-8 h-8 mx-auto text-red-600 mb-2" />
+            <p className="text-2xl font-bold text-[var(--text-primary)]">{overdueTasks.length}</p>
+            <p className="text-sm text-[var(--text-secondary)]">{t('equipment.maintenance.overdue')}</p>
+          </div>
+          <div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
+            <Clock className="w-8 h-8 mx-auto text-blue-600 mb-2" />
+            <p className="text-2xl font-bold text-[var(--text-primary)]">{avgDuration.toFixed(1)}h</p>
+            <p className="text-sm text-[var(--text-secondary)]">{t('equipment.maintenance.avg_duration')}</p>
+          </div>
+          <div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
+            <div className="w-8 h-8 mx-auto bg-green-100 dark:bg-green-900/20 rounded-full flex items-center justify-center mb-2">
+              <span className="text-green-600 font-bold text-sm">€</span>
+            </div>
+            <p className="text-2xl font-bold text-[var(--text-primary)]">€{totalCost}</p>
+            <p className="text-sm text-[var(--text-secondary)]">{t('equipment.maintenance.total_cost')}</p>
+          </div>
+        </div>
+
+        {/* Priority Tasks */}
+        {overdueTasks.length > 0 && (
+          <div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg">
+            <div className="flex items-start space-x-2">
+              <AlertCircle className="w-5 h-5 text-red-600 mt-0.5" />
+              <div>
+                <p className="text-sm font-medium text-red-600">
+                  {t('equipment.maintenance.overdue_tasks')} ({overdueTasks.length})
+                </p>
+                <p className="text-xs text-[var(--text-secondary)] mt-1">
+                  {t('equipment.maintenance.immediate_attention_required')}
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Maintenance Tasks List */}
+        <div>
+          <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3 flex items-center">
+            <Wrench className="w-4 h-4 mr-2" />
+            {t('equipment.maintenance.tasks')} ({maintenanceTasks.length})
+          </h4>
+          <div className="space-y-3">
+            {maintenanceTasks.map((task) => {
+              const TypeIcon = getTypeIcon(task.type);
+              return (
+                <div key={task.id} className="p-4 bg-[var(--bg-secondary)] rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors">
+                  <div className="flex items-start justify-between">
+                    <div className="flex items-start space-x-3">
+                      <TypeIcon className={`w-5 h-5 mt-1 ${getStatusColor(task.status)}`} />
+                      <div className="flex-1">
+                        <div className="flex items-center space-x-2 mb-1">
+                          <p className="font-medium text-[var(--text-primary)]">{task.equipmentName}</p>
+                          <span className={`text-xs font-medium ${getPriorityColor(task.priority)}`}>
+                            {t(`priority.${task.priority}`)}
+                          </span>
+                        </div>
+                        <p className="text-sm text-[var(--text-secondary)] mb-2">{task.description}</p>
+                        <div className="flex items-center space-x-4 text-xs text-[var(--text-secondary)]">
+                          <span>{t('equipment.maintenance.scheduled')}: {formatDate(task.scheduledDate)}</span>
+                          <span>{t('equipment.maintenance.duration')}: {task.estimatedDuration}h</span>
+                          {task.cost && <span>{t('equipment.maintenance.cost')}: €{task.cost}</span>}
+                          {task.technician && <span>{t('equipment.maintenance.technician')}: {task.technician}</span>}
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex flex-col items-end space-y-2">
+                      <Badge variant={getStatusBadgeVariant(task.status)}>
+                        {t(`equipment.maintenance.status.${task.status}`)}
+                      </Badge>
+                      <Badge variant="outline" className="text-xs">
+                        {t(`equipment.maintenance.type.${task.type}`)}
+                      </Badge>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Weekly Schedule Preview */}
+        <div>
+          <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3 flex items-center">
+            <Calendar className="w-4 h-4 mr-2" />
+            {t('equipment.maintenance.this_week')}
+          </h4>
+          <div className="grid grid-cols-7 gap-1">
+            {Array.from({ length: 7 }, (_, i) => {
+              const date = new Date();
+              date.setDate(date.getDate() + i);
+              const dateStr = date.toISOString().split('T')[0];
+              const tasksForDay = maintenanceTasks.filter(task => task.scheduledDate === dateStr);
+
+              return (
+                <div key={i} className="p-2 bg-[var(--bg-secondary)] rounded text-center">
+                  <p className="text-xs text-[var(--text-secondary)] mb-1">
+                    {date.toLocaleDateString('es-ES', { weekday: 'short' })}
+                  </p>
+                  <p className="text-sm font-medium text-[var(--text-primary)]">
+                    {date.getDate()}
+                  </p>
+                  {tasksForDay.length > 0 && (
+                    <div className="w-2 h-2 bg-orange-500 rounded-full mx-auto mt-1"></div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Maintenance Insights */}
+        <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+          <div className="flex items-start space-x-2">
+            <CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5" />
+            <div>
+              <p className="text-sm font-medium text-blue-600">
+                {t('equipment.maintenance.insights.title')}
+              </p>
+              <p className="text-xs text-[var(--text-secondary)] mt-1">
+                {completedTasks.length} {t('equipment.maintenance.insights.completed_this_month')},
+                {scheduledTasks.length} {t('equipment.maintenance.insights.scheduled_next_week')}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </AnalyticsWidget>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/components/analytics/production/widgets/OnTimeCompletionWidget.tsx b/frontend/src/components/analytics/production/widgets/OnTimeCompletionWidget.tsx
new file mode 100644
index 00000000..6c027a1b
--- /dev/null
+++ b/frontend/src/components/analytics/production/widgets/OnTimeCompletionWidget.tsx
@@ -0,0 +1,195 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Clock, TrendingUp, TrendingDown, Target } from 'lucide-react';
+import { AnalyticsWidget } from '../AnalyticsWidget';
+import { AnalyticsChart, ChartSeries } from '../AnalyticsChart';
+import { Button } from '../../../ui';
+import { useProductionDashboard } from '../../../../api/hooks/production';
+import { useCurrentTenant } from '../../../../stores/tenant.store';
+
+export const OnTimeCompletionWidget: React.FC = () => {
+  const { t } = useTranslation('production');
+  const currentTenant = useCurrentTenant();
+  const tenantId = currentTenant?.id || '';
+
+  const { data: dashboard, isLoading, error } = useProductionDashboard(tenantId);
+
+  // Mock historical data for the chart (in a real implementation, this would come from an analytics API)
+  const getHistoricalCompletionData = (): ChartSeries[] => {
+    const mockData = [
+      { x: 'Lun', y: 92, label: 'Lunes' },
+      { x: 'Mar', y: 89, label: 'Martes' },
+      { x: 'Mié', y: 95, label: 'Miércoles' },
+      { x: 'Jue', y: 87, label: 'Jueves' },
+      { x: 'Vie', y: 94, label: 'Viernes' },
+      { x: 'Sáb', y: 98, label: 'Sábado' },
+      { x: 'Dom', y: dashboard?.on_time_completion_rate || 91, label: 'Domingo' },
+    ];
+
+    return [
+      {
+        id: 'completion-rate',
+        name: t('stats.on_time_completion'),
+        type: 'line',
+        color: '#10b981',
+        data: mockData
+      }
+    ];
+  };
+
+  const currentRate = dashboard?.on_time_completion_rate || 0;
+  const targetRate = 95; // Target completion rate
+  const weekAverage = 93; // Mock week average
+  const trend = currentRate - weekAverage;
+
+  const getCompletionRateStatus = (rate: number) => {
+    if (rate >= 95) return { color: 'text-green-600', icon: TrendingUp, status: 'excellent' };
+    if (rate >= 90) return { color: 'text-blue-600', icon: TrendingUp, status: 'good' };
+    if (rate >= 85) return { color: 'text-orange-600', icon: TrendingDown, status: 'warning' };
+    return { color: 'text-red-600', icon: TrendingDown, status: 'critical' };
+  };
+
+  const rateStatus = getCompletionRateStatus(currentRate);
+  const RateIcon = rateStatus.icon;
+
+  const getPerformanceInsight = () => {
+    if (currentRate >= targetRate) {
+      return {
+        message: t('insights.on_time_excellent'),
+        color: 'text-green-600',
+        bgColor: 'bg-green-50 dark:bg-green-900/20'
+      };
+    } else if (currentRate >= 90) {
+      return {
+        message: t('insights.on_time_good_room_improvement'),
+        color: 'text-blue-600',
+        bgColor: 'bg-blue-50 dark:bg-blue-900/20'
+      };
+    } else if (currentRate >= 85) {
+      return {
+        message: t('insights.on_time_needs_attention'),
+        color: 'text-orange-600',
+        bgColor: 'bg-orange-50 dark:bg-orange-900/20'
+      };
+    } else {
+      return {
+        message: t('insights.on_time_critical_delays'),
+        color: 'text-red-600',
+        bgColor: 'bg-red-50 dark:bg-red-900/20'
+      };
+    }
+  };
+
+  const insight = getPerformanceInsight();
+
+  return (
+    <AnalyticsWidget
+      title={t('stats.on_time_completion_rate')}
+      subtitle={t('insights.on_time_vs_planned')}
+      icon={Clock}
+      loading={isLoading}
+      error={error?.message}
+      actions={
+        <Button variant="outline" size="sm">
+          <Target className="w-4 h-4 mr-1" />
+          {t('actions.analyze_delays')}
+        </Button>
+      }
+    >
+      <div className="space-y-4">
+        {/* Current Rate Display */}
+        <div className="text-center">
+          <div className="flex items-center justify-center space-x-2 mb-2">
+            <RateIcon className={`w-6 h-6 ${rateStatus.color}`} />
+            <span className="text-3xl font-bold text-[var(--text-primary)]">
+              {currentRate.toFixed(1)}%
+            </span>
+          </div>
+          <div className="flex items-center justify-center space-x-4 text-sm">
+            <div className={`flex items-center space-x-1 ${trend >= 0 ? 'text-green-600' : 'text-red-600'}`}>
+              {trend >= 0 ? (
+                <TrendingUp className="w-4 h-4" />
+              ) : (
+                <TrendingDown className="w-4 h-4" />
+              )}
+              <span>{Math.abs(trend).toFixed(1)}% {t('insights.vs_week_avg')}</span>
+            </div>
+            <div className="text-[var(--text-secondary)]">
+              {t('insights.target')}: {targetRate}%
+            </div>
+          </div>
+        </div>
+
+        {/* Progress towards target */}
+        <div className="p-3 bg-[var(--bg-secondary)] rounded-lg">
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-sm text-[var(--text-secondary)]">{t('insights.progress_to_target')}</span>
+            <span className="text-sm font-medium text-[var(--text-primary)]">
+              {Math.min(currentRate, targetRate).toFixed(1)}% / {targetRate}%
+            </span>
+          </div>
+          <div className="w-full bg-[var(--bg-tertiary)] rounded-full h-2">
+            <div
+              className={`h-2 rounded-full transition-all ${
+                currentRate >= targetRate ? 'bg-green-500' :
+                currentRate >= 90 ? 'bg-blue-500' :
+                currentRate >= 85 ? 'bg-orange-500' : 'bg-red-500'
+              }`}
+              style={{ width: `${Math.min((currentRate / targetRate) * 100, 100)}%` }}
+            />
+          </div>
+        </div>
+
+        {/* Weekly Trend Chart */}
+        <div>
+          <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3">
+            {t('insights.weekly_trend')}
+          </h4>
+          <AnalyticsChart
+            series={getHistoricalCompletionData()}
+            height={150}
+            showLegend={false}
+            showGrid={true}
+          />
+        </div>
+
+        {/* Performance Insight */}
+        <div className={`p-3 rounded-lg ${insight.bgColor}`}>
+          <div className="flex items-start space-x-2">
+            <Clock className={`w-4 h-4 mt-0.5 ${insight.color}`} />
+            <div>
+              <p className={`text-sm font-medium ${insight.color}`}>
+                {t('insights.performance_insight')}
+              </p>
+              <p className="text-sm text-[var(--text-secondary)] mt-1">
+                {insight.message}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Key Metrics */}
+        <div className="grid grid-cols-3 gap-3 text-center">
+          <div className="p-3 bg-[var(--bg-secondary)] rounded-lg">
+            <p className="text-lg font-bold text-[var(--text-primary)]">
+              {Math.round(currentRate * 0.85)}
+            </p>
+            <p className="text-xs text-[var(--text-secondary)]">{t('insights.batches_on_time')}</p>
+          </div>
+          <div className="p-3 bg-[var(--bg-secondary)] rounded-lg">
+            <p className="text-lg font-bold text-[var(--text-primary)]">
+              {Math.round((100 - currentRate) * 0.15)}
+            </p>
+            <p className="text-xs text-[var(--text-secondary)]">{t('insights.batches_delayed')}</p>
+          </div>
+          <div className="p-3 bg-[var(--bg-secondary)] rounded-lg">
+            <p className="text-lg font-bold text-[var(--text-primary)]">
+              {Math.round(12 * (100 - currentRate) / 100)}
+            </p>
+            <p className="text-xs text-[var(--text-secondary)]">{t('insights.avg_delay_minutes')}</p>
+          </div>
+        </div>
+      </div>
+    </AnalyticsWidget>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/components/analytics/production/widgets/PredictiveMaintenanceWidget.tsx b/frontend/src/components/analytics/production/widgets/PredictiveMaintenanceWidget.tsx
new file mode 100644
index 00000000..ca2cb762
--- /dev/null
+++ b/frontend/src/components/analytics/production/widgets/PredictiveMaintenanceWidget.tsx
@@ -0,0 +1,437 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Brain, AlertTriangle, TrendingDown, Calendar, Wrench, Target } from 'lucide-react';
+import { AnalyticsWidget } from '../AnalyticsWidget';
+import { AnalyticsChart, ChartSeries } from '../AnalyticsChart';
+import { Badge, Button } from '../../../ui';
+import { useCurrentTenant } from '../../../../stores/tenant.store';
+
+interface PredictiveMaintenanceAlert {
+  id: string;
+  equipmentId: string;
+  equipmentName: string;
+  equipmentType: 'oven' | 'mixer' | 'proofer' | 'packaging';
+  alertType: 'wear_prediction' | 'failure_risk' | 'performance_degradation' | 'component_replacement';
+  severity: 'low' | 'medium' | 'high' | 'critical';
+  confidence: number; // percentage
+  predictedFailureDate: string;
+  currentCondition: number; // percentage (100% = perfect, 0% = failed)
+  degradationRate: number; // percentage per week
+  affectedComponents: string[];
+  recommendedActions: string[];
+  estimatedCost: number;
+  potentialDowntime: number; // hours
+  riskScore: number; // 0-100
+  dataPoints: Array<{
+    date: string;
+    condition: number;
+    vibration?: number;
+    temperature?: number;
+    efficiency?: number;
+  }>;
+}
+
+export const PredictiveMaintenanceWidget: React.FC = () => {
+  const { t } = useTranslation('production');
+  const currentTenant = useCurrentTenant();
+
+  // Mock predictive maintenance data - replace with real ML API call
+  const maintenanceAlerts: PredictiveMaintenanceAlert[] = [
+    {
+      id: '1',
+      equipmentId: '2',
+      equipmentName: 'Mezcladora A',
+      equipmentType: 'mixer',
+      alertType: 'wear_prediction',
+      severity: 'high',
+      confidence: 94,
+      predictedFailureDate: '2024-02-15',
+      currentCondition: 78,
+      degradationRate: 3.2,
+      affectedComponents: ['Motor principal', 'Correas de transmisión', 'Rodamientos'],
+      recommendedActions: [
+        'Reemplazar correas de transmisión',
+        'Lubricar rodamientos',
+        'Inspeccionar motor'
+      ],
+      estimatedCost: 280,
+      potentialDowntime: 4,
+      riskScore: 85,
+      dataPoints: [
+        { date: '2024-01-01', condition: 95, vibration: 1.2, temperature: 35, efficiency: 94 },
+        { date: '2024-01-07', condition: 91, vibration: 1.5, temperature: 37, efficiency: 92 },
+        { date: '2024-01-14', condition: 87, vibration: 1.8, temperature: 39, efficiency: 89 },
+        { date: '2024-01-21', condition: 83, vibration: 2.1, temperature: 41, efficiency: 87 },
+        { date: '2024-01-28', condition: 78, vibration: 2.4, temperature: 43, efficiency: 85 }
+      ]
+    },
+    {
+      id: '2',
+      equipmentId: '1',
+      equipmentName: 'Horno Principal',
+      equipmentType: 'oven',
+      alertType: 'performance_degradation',
+      severity: 'medium',
+      confidence: 87,
+      predictedFailureDate: '2024-03-10',
+      currentCondition: 89,
+      degradationRate: 1.8,
+      affectedComponents: ['Sistema de calefacción', 'Sensores de temperatura'],
+      recommendedActions: [
+        'Calibrar sensores de temperatura',
+        'Limpiar sistema de calefacción',
+        'Verificar aislamiento térmico'
+      ],
+      estimatedCost: 150,
+      potentialDowntime: 2,
+      riskScore: 65,
+      dataPoints: [
+        { date: '2024-01-01', condition: 98, temperature: 180, efficiency: 96 },
+        { date: '2024-01-07', condition: 95, temperature: 178, efficiency: 95 },
+        { date: '2024-01-14', condition: 93, temperature: 176, efficiency: 94 },
+        { date: '2024-01-21', condition: 91, temperature: 174, efficiency: 93 },
+        { date: '2024-01-28', condition: 89, temperature: 172, efficiency: 92 }
+      ]
+    },
+    {
+      id: '3',
+      equipmentId: '4',
+      equipmentName: 'Empaquetadora',
+      equipmentType: 'packaging',
+      alertType: 'component_replacement',
+      severity: 'low',
+      confidence: 76,
+      predictedFailureDate: '2024-04-20',
+      currentCondition: 92,
+      degradationRate: 1.1,
+      affectedComponents: ['Cinta transportadora', 'Sistema de sellado'],
+      recommendedActions: [
+        'Inspeccionar cinta transportadora',
+        'Ajustar sistema de sellado',
+        'Reemplazar filtros'
+      ],
+      estimatedCost: 120,
+      potentialDowntime: 1.5,
+      riskScore: 35,
+      dataPoints: [
+        { date: '2024-01-01', condition: 98, efficiency: 97 },
+        { date: '2024-01-07', condition: 96, efficiency: 96 },
+        { date: '2024-01-14', condition: 95, efficiency: 95 },
+        { date: '2024-01-21', condition: 94, efficiency: 94 },
+        { date: '2024-01-28', condition: 92, efficiency: 93 }
+      ]
+    }
+  ];
+
+  const getSeverityColor = (severity: PredictiveMaintenanceAlert['severity']) => {
+    switch (severity) {
+      case 'critical': return 'text-red-600';
+      case 'high': return 'text-orange-600';
+      case 'medium': return 'text-yellow-600';
+      case 'low': return 'text-blue-600';
+      default: return 'text-gray-600';
+    }
+  };
+
+  const getSeverityBadgeVariant = (severity: PredictiveMaintenanceAlert['severity']) => {
+    switch (severity) {
+      case 'critical': return 'error';
+      case 'high': return 'warning';
+      case 'medium': return 'warning';
+      case 'low': return 'info';
+      default: return 'default';
+    }
+  };
+
+  const getAlertTypeIcon = (type: PredictiveMaintenanceAlert['alertType']) => {
+    switch (type) {
+      case 'wear_prediction': return TrendingDown;
+      case 'failure_risk': return AlertTriangle;
+      case 'performance_degradation': return Target;
+      case 'component_replacement': return Wrench;
+      default: return AlertTriangle;
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('es-ES', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric'
+    });
+  };
+
+  const getDaysUntilFailure = (failureDate: string) => {
+    const today = new Date();
+    const failure = new Date(failureDate);
+    const diffTime = failure.getTime() - today.getTime();
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    return diffDays;
+  };
+
+  const criticalAlerts = maintenanceAlerts.filter(alert => alert.severity === 'critical');
+  const highRiskAlerts = maintenanceAlerts.filter(alert => alert.riskScore > 70);
+  const totalEstimatedCost = maintenanceAlerts.reduce((sum, alert) => sum + alert.estimatedCost, 0);
+  const totalPotentialDowntime = maintenanceAlerts.reduce((sum, alert) => sum + alert.potentialDowntime, 0);
+  const avgConfidence = maintenanceAlerts.reduce((sum, alert) => sum + alert.confidence, 0) / maintenanceAlerts.length;
+
+  // Create equipment condition trend chart
+  const getConditionTrendChartData = (): ChartSeries[] => {
+    return maintenanceAlerts.map((alert, index) => ({
+      id: `condition-${alert.equipmentId}`,
+      name: alert.equipmentName,
+      type: 'line',
+      color: ['#ef4444', '#f97316', '#eab308'][index % 3],
+      data: alert.dataPoints.map(point => ({
+        x: new Date(point.date).toLocaleDateString('es-ES', { month: 'short', day: 'numeric' }),
+        y: point.condition,
+        label: `${point.condition}%`
+      }))
+    }));
+  };
+
+  // Create risk score distribution chart
+  const getRiskDistributionChartData = (): ChartSeries[] => {
+    const lowRisk = maintenanceAlerts.filter(a => a.riskScore <= 40).length;
+    const mediumRisk = maintenanceAlerts.filter(a => a.riskScore > 40 && a.riskScore <= 70).length;
+    const highRisk = maintenanceAlerts.filter(a => a.riskScore > 70).length;
+
+    return [
+      {
+        id: 'risk-distribution',
+        name: 'Risk Distribution',
+        type: 'doughnut',
+        color: '#3b82f6',
+        data: [
+          { x: t('ai.risk.low'), y: lowRisk, label: `${t('ai.risk.low')}: ${lowRisk}` },
+          { x: t('ai.risk.medium'), y: mediumRisk, label: `${t('ai.risk.medium')}: ${mediumRisk}` },
+          { x: t('ai.risk.high'), y: highRisk, label: `${t('ai.risk.high')}: ${highRisk}` }
+        ].filter(item => item.y > 0)
+      }
+    ];
+  };
+
+  return (
+    <AnalyticsWidget
+      title={t('ai.predictive_maintenance.title')}
+      subtitle={t('ai.predictive_maintenance.subtitle')}
+      icon={Brain}
+      actions={
+        <div className="flex space-x-2">
+          <Button variant="outline" size="sm">
+            <Calendar className="w-4 h-4 mr-1" />
+            {t('ai.predictive_maintenance.schedule_all')}
+          </Button>
+          <Button variant="primary" size="sm">
+            <Brain className="w-4 h-4 mr-1" />
+            {t('ai.predictive_maintenance.retrain_model')}
+          </Button>
+        </div>
+      }
+    >
+      <div className="space-y-6">
+        {/* Predictive Maintenance Overview Stats */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
+            <AlertTriangle className="w-8 h-8 mx-auto text-red-600 mb-2" />
+            <p className="text-2xl font-bold text-[var(--text-primary)]">{highRiskAlerts.length}</p>
+            <p className="text-sm text-[var(--text-secondary)]">{t('ai.predictive_maintenance.high_risk')}</p>
+          </div>
+          <div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
+            <div className="w-8 h-8 mx-auto bg-orange-100 dark:bg-orange-900/20 rounded-full flex items-center justify-center mb-2">
+              <span className="text-orange-600 font-bold text-sm">€</span>
+            </div>
+            <p className="text-2xl font-bold text-[var(--text-primary)]">€{totalEstimatedCost}</p>
+            <p className="text-sm text-[var(--text-secondary)]">{t('ai.predictive_maintenance.estimated_cost')}</p>
+          </div>
+          <div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
+            <div className="w-8 h-8 mx-auto bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center mb-2">
+              <span className="text-red-600 font-bold text-xs">h</span>
+            </div>
+            <p className="text-2xl font-bold text-[var(--text-primary)]">{totalPotentialDowntime}</p>
+            <p className="text-sm text-[var(--text-secondary)]">{t('ai.predictive_maintenance.potential_downtime')}</p>
+          </div>
+          <div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
+            <div className="w-8 h-8 mx-auto bg-blue-100 dark:bg-blue-900/20 rounded-full flex items-center justify-center mb-2">
+              <span className="text-blue-600 font-bold text-sm">%</span>
+            </div>
+            <p className="text-2xl font-bold text-[var(--text-primary)]">{avgConfidence.toFixed(0)}%</p>
+            <p className="text-sm text-[var(--text-secondary)]">{t('ai.predictive_maintenance.avg_confidence')}</p>
+          </div>
+        </div>
+
+        {/* Critical Alerts */}
+        {highRiskAlerts.length > 0 && (
+          <div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg">
+            <div className="flex items-start space-x-2">
+              <AlertTriangle className="w-5 h-5 text-red-600 mt-0.5" />
+              <div>
+                <p className="text-sm font-medium text-red-600">
+                  {t('ai.predictive_maintenance.high_risk_equipment')} ({highRiskAlerts.length})
+                </p>
+                <p className="text-xs text-[var(--text-secondary)] mt-1">
+                  {t('ai.predictive_maintenance.immediate_attention_required')}
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Maintenance Predictions */}
+        <div>
+          <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3 flex items-center">
+            <Brain className="w-4 h-4 mr-2" />
+            {t('ai.predictive_maintenance.predictions')} ({maintenanceAlerts.length})
+          </h4>
+          <div className="space-y-4">
+            {maintenanceAlerts.map((alert) => {
+              const AlertTypeIcon = getAlertTypeIcon(alert.alertType);
+              const daysUntilFailure = getDaysUntilFailure(alert.predictedFailureDate);
+
+              return (
+                <div key={alert.id} className="p-4 bg-[var(--bg-secondary)] rounded-lg">
+                  <div className="flex items-start justify-between mb-3">
+                    <div className="flex items-start space-x-3">
+                      <AlertTypeIcon className={`w-5 h-5 mt-1 ${getSeverityColor(alert.severity)}`} />
+                      <div className="flex-1">
+                        <div className="flex items-center space-x-2 mb-1">
+                          <p className="font-medium text-[var(--text-primary)]">{alert.equipmentName}</p>
+                          <Badge variant={getSeverityBadgeVariant(alert.severity)}>
+                            {t(`ai.severity.${alert.severity}`)}
+                          </Badge>
+                        </div>
+                        <div className="flex items-center space-x-4 text-xs text-[var(--text-secondary)] mb-2">
+                          <span>{t('ai.predictive_maintenance.confidence')}: {alert.confidence}%</span>
+                          <span>{t('ai.predictive_maintenance.risk_score')}: {alert.riskScore}/100</span>
+                          <span>{t('ai.predictive_maintenance.days_until_failure')}: {daysUntilFailure}</span>
+                        </div>
+                        <p className="text-sm text-[var(--text-secondary)] mb-2">
+                          {t(`ai.predictive_maintenance.alert_type.${alert.alertType}`)}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="text-right">
+                      <div className="text-lg font-bold text-[var(--text-primary)]">{alert.currentCondition}%</div>
+                      <div className="text-xs text-[var(--text-secondary)]">{t('ai.predictive_maintenance.condition')}</div>
+                    </div>
+                  </div>
+
+                  {/* Condition Progress Bar */}
+                  <div className="mb-3">
+                    <div className="flex justify-between text-xs text-[var(--text-secondary)] mb-1">
+                      <span>{t('ai.predictive_maintenance.current_condition')}</span>
+                      <span>{alert.currentCondition}%</span>
+                    </div>
+                    <div className="w-full bg-[var(--bg-tertiary)] rounded-full h-2">
+                      <div
+                        className={`h-2 rounded-full transition-all duration-300 ${
+                          alert.currentCondition > 80 ? 'bg-green-500' :
+                          alert.currentCondition > 60 ? 'bg-yellow-500' :
+                          alert.currentCondition > 40 ? 'bg-orange-500' : 'bg-red-500'
+                        }`}
+                        style={{ width: `${alert.currentCondition}%` }}
+                      />
+                    </div>
+                  </div>
+
+                  {/* Affected Components */}
+                  <div className="mb-3">
+                    <p className="text-xs font-medium text-[var(--text-primary)] mb-1">
+                      {t('ai.predictive_maintenance.affected_components')}:
+                    </p>
+                    <div className="flex flex-wrap gap-1">
+                      {alert.affectedComponents.map((component, index) => (
+                        <Badge key={index} variant="outline" className="text-xs">
+                          {component}
+                        </Badge>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* Recommended Actions */}
+                  <div className="mb-3">
+                    <p className="text-xs font-medium text-[var(--text-primary)] mb-1">
+                      {t('ai.predictive_maintenance.recommended_actions')}:
+                    </p>
+                    <ul className="text-xs text-[var(--text-secondary)] space-y-1">
+                      {alert.recommendedActions.map((action, index) => (
+                        <li key={index}>• {action}</li>
+                      ))}
+                    </ul>
+                  </div>
+
+                  {/* Cost and Downtime */}
+                  <div className="flex items-center justify-between p-3 bg-[var(--bg-tertiary)] rounded-lg">
+                    <div className="flex items-center space-x-4 text-xs">
+                      <span className="flex items-center space-x-1">
+                        <span className="w-2 h-2 bg-orange-500 rounded-full"></span>
+                        <span>{t('ai.predictive_maintenance.estimated_cost')}: €{alert.estimatedCost}</span>
+                      </span>
+                      <span className="flex items-center space-x-1">
+                        <span className="w-2 h-2 bg-red-500 rounded-full"></span>
+                        <span>{t('ai.predictive_maintenance.potential_downtime')}: {alert.potentialDowntime}h</span>
+                      </span>
+                    </div>
+                    <div className="flex space-x-2">
+                      <Button variant="outline" size="sm">
+                        {t('ai.predictive_maintenance.schedule')}
+                      </Button>
+                      <Button variant="primary" size="sm">
+                        {t('ai.predictive_maintenance.details')}
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Charts */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Equipment Condition Trends */}
+          <div>
+            <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3">
+              {t('ai.predictive_maintenance.condition_trends')}
+            </h4>
+            <AnalyticsChart
+              series={getConditionTrendChartData()}
+              height={200}
+              showLegend={true}
+              showGrid={true}
+            />
+          </div>
+
+          {/* Risk Distribution */}
+          <div>
+            <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3">
+              {t('ai.predictive_maintenance.risk_distribution')}
+            </h4>
+            <AnalyticsChart
+              series={getRiskDistributionChartData()}
+              height={200}
+              showLegend={true}
+              showGrid={false}
+            />
+          </div>
+        </div>
+
+        {/* ML Model Status */}
+        <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+          <div className="flex items-start space-x-2">
+            <Brain className="w-5 h-5 text-blue-600 mt-0.5" />
+            <div>
+              <p className="text-sm font-medium text-blue-600">
+                {t('ai.predictive_maintenance.model_status')}
+              </p>
+              <p className="text-xs text-[var(--text-secondary)] mt-1">
+                {t('ai.predictive_maintenance.last_training')}: {t('ai.predictive_maintenance.yesterday')}.
+                {t('ai.predictive_maintenance.accuracy')}: 94%. {t('ai.predictive_maintenance.next_training')}: {t('ai.predictive_maintenance.in_7_days')}.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </AnalyticsWidget>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/components/analytics/production/widgets/QualityScoreTrendsWidget.tsx b/frontend/src/components/analytics/production/widgets/QualityScoreTrendsWidget.tsx
new file mode 100644
index 00000000..22c83d16
--- /dev/null
+++ b/frontend/src/components/analytics/production/widgets/QualityScoreTrendsWidget.tsx
@@ -0,0 +1,257 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Star, TrendingUp, TrendingDown, Award } from 'lucide-react';
+import { AnalyticsWidget } from '../AnalyticsWidget';
+import { AnalyticsChart, ChartSeries } from '../AnalyticsChart';
+import { Button } from '../../../ui';
+import { useActiveBatches } from '../../../../api/hooks/production';
+import { useCurrentTenant } from '../../../../stores/tenant.store';
+
+export const QualityScoreTrendsWidget: React.FC = () => {
+  const { t } = useTranslation('production');
+  const currentTenant = useCurrentTenant();
+  const tenantId = currentTenant?.id || '';
+
+  const { data: batchesData, isLoading, error } = useActiveBatches(tenantId);
+  const batches = batchesData?.batches || [];
+
+  // Calculate quality score data
+  const getQualityData = () => {
+    const qualityScores = batches
+      .filter(batch => batch.quality_score)
+      .map(batch => batch.quality_score!);
+
+    if (qualityScores.length === 0) {
+      return {
+        averageScore: 0,
+        totalChecks: 0,
+        passRate: 0,
+        trend: 0
+      };
+    }
+
+    const averageScore = qualityScores.reduce((sum, score) => sum + score, 0) / qualityScores.length;
+    const totalChecks = qualityScores.length;
+    const passRate = (qualityScores.filter(score => score >= 7).length / totalChecks) * 100;
+
+    // Mock trend calculation (would be compared with previous period in real implementation)
+    const trend = 2.3; // +2.3 points vs last week
+
+    return {
+      averageScore,
+      totalChecks,
+      passRate,
+      trend
+    };
+  };
+
+  const qualityData = getQualityData();
+
+  // Create daily quality trend chart
+  const getQualityTrendChartData = (): ChartSeries[] => {
+    const days = ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'];
+    const scores = days.map((day, index) => ({
+      x: day,
+      y: Math.max(6, 8.5 + Math.sin(index) * 0.8 + (Math.random() - 0.5) * 0.5),
+      label: day
+    }));
+
+    return [
+      {
+        id: 'quality-trend',
+        name: t('quality.daily_quality_score'),
+        type: 'line',
+        color: '#16a34a',
+        data: scores
+      }
+    ];
+  };
+
+  // Create quality distribution chart
+  const getQualityDistributionChartData = (): ChartSeries[] => {
+    // Mock quality score distribution
+    const distribution = [
+      { range: '9-10', count: Math.round(qualityData.totalChecks * 0.35), label: t('quality.excellent') },
+      { range: '8-9', count: Math.round(qualityData.totalChecks * 0.30), label: t('quality.good') },
+      { range: '7-8', count: Math.round(qualityData.totalChecks * 0.20), label: t('quality.acceptable') },
+      { range: '6-7', count: Math.round(qualityData.totalChecks * 0.10), label: t('quality.poor') },
+      { range: '<6', count: Math.round(qualityData.totalChecks * 0.05), label: t('quality.failed') }
+    ].filter(item => item.count > 0);
+
+    return [
+      {
+        id: 'quality-distribution',
+        name: t('quality.score_distribution'),
+        type: 'bar',
+        color: '#d97706',
+        data: distribution.map(item => ({
+          x: item.range,
+          y: item.count,
+          label: item.label
+        }))
+      }
+    ];
+  };
+
+  const getScoreColor = (score: number) => {
+    if (score >= 9) return 'text-green-600';
+    if (score >= 8) return 'text-blue-600';
+    if (score >= 7) return 'text-orange-600';
+    return 'text-red-600';
+  };
+
+  const getScoreStatus = (score: number) => {
+    if (score >= 9) return { status: 'excellent', bgColor: 'bg-green-100 dark:bg-green-900/20' };
+    if (score >= 8) return { status: 'good', bgColor: 'bg-blue-100 dark:bg-blue-900/20' };
+    if (score >= 7) return { status: 'acceptable', bgColor: 'bg-orange-100 dark:bg-orange-900/20' };
+    return { status: 'needs_improvement', bgColor: 'bg-red-100 dark:bg-red-900/20' };
+  };
+
+  const scoreStatus = getScoreStatus(qualityData.averageScore);
+  const TrendIcon = qualityData.trend >= 0 ? TrendingUp : TrendingDown;
+
+  return (
+    <AnalyticsWidget
+      title={t('quality.recent_quality_scores')}
+      subtitle={t('quality.daily_average_quality_trends')}
+      icon={Star}
+      loading={isLoading}
+      error={error?.message}
+      actions={
+        <Button variant="outline" size="sm">
+          <Award className="w-4 h-4 mr-1" />
+          {t('quality.actions.view_trends')}
+        </Button>
+      }
+    >
+      <div className="space-y-4">
+        {/* Quality Score Display */}
+        <div className="text-center">
+          <div className="flex items-center justify-center space-x-2 mb-2">
+            <Star className={`w-6 h-6 ${getScoreColor(qualityData.averageScore)}`} />
+            <span className="text-3xl font-bold text-[var(--text-primary)]">
+              {qualityData.averageScore.toFixed(1)}/10
+            </span>
+          </div>
+          <div className={`inline-flex items-center space-x-2 px-3 py-1 rounded-full text-sm ${scoreStatus.bgColor}`}>
+            <span className={getScoreColor(qualityData.averageScore)}>
+              {t(`quality.${scoreStatus.status}`)}
+            </span>
+          </div>
+          <div className="flex items-center justify-center space-x-1 mt-2">
+            <TrendIcon className={`w-4 h-4 ${qualityData.trend >= 0 ? 'text-green-600' : 'text-red-600'}`} />
+            <span className={`text-sm ${qualityData.trend >= 0 ? 'text-green-600' : 'text-red-600'}`}>
+              {qualityData.trend > 0 ? '+' : ''}{qualityData.trend.toFixed(1)} {t('quality.vs_last_week')}
+            </span>
+          </div>
+        </div>
+
+        {/* Key Metrics */}
+        <div className="grid grid-cols-2 gap-4">
+          <div className="p-4 bg-[var(--bg-secondary)] rounded-lg text-center">
+            <div className="text-2xl font-bold text-[var(--text-primary)] mb-1">
+              {qualityData.totalChecks}
+            </div>
+            <p className="text-sm text-[var(--text-secondary)]">{t('stats.total_checks')}</p>
+          </div>
+          <div className="p-4 bg-[var(--bg-secondary)] rounded-lg text-center">
+            <div className="text-2xl font-bold text-green-600 mb-1">
+              {qualityData.passRate.toFixed(1)}%
+            </div>
+            <p className="text-sm text-[var(--text-secondary)]">{t('stats.pass_rate')}</p>
+          </div>
+        </div>
+
+        {qualityData.totalChecks === 0 ? (
+          <div className="text-center py-8 text-[var(--text-secondary)]">
+            <Star className="w-12 h-12 mx-auto mb-3 opacity-50" />
+            <p className="text-sm">{t('quality.no_quality_data')}</p>
+          </div>
+        ) : (
+          <>
+            {/* Weekly Quality Trend */}
+            <div>
+              <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3">
+                {t('quality.weekly_quality_trends')}
+              </h4>
+              <AnalyticsChart
+                series={getQualityTrendChartData()}
+                height={150}
+                showLegend={false}
+                showGrid={true}
+              />
+            </div>
+
+            {/* Quality Score Distribution */}
+            <div>
+              <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3">
+                {t('quality.score_distribution')}
+              </h4>
+              <AnalyticsChart
+                series={getQualityDistributionChartData()}
+                height={180}
+                showLegend={false}
+                showGrid={true}
+              />
+            </div>
+
+            {/* Quality Insights */}
+            <div className="grid grid-cols-3 gap-3 text-center">
+              <div className="p-3 bg-[var(--bg-secondary)] rounded-lg">
+                <p className="text-lg font-bold text-green-600">
+                  {Math.round(qualityData.totalChecks * 0.35)}
+                </p>
+                <p className="text-xs text-[var(--text-secondary)]">{t('quality.excellent_scores')}</p>
+              </div>
+              <div className="p-3 bg-[var(--bg-secondary)] rounded-lg">
+                <p className="text-lg font-bold text-blue-600">
+                  {Math.round(qualityData.totalChecks * 0.30)}
+                </p>
+                <p className="text-xs text-[var(--text-secondary)]">{t('quality.good_scores')}</p>
+              </div>
+              <div className="p-3 bg-[var(--bg-secondary)] rounded-lg">
+                <p className="text-lg font-bold text-red-600">
+                  {Math.round(qualityData.totalChecks * 0.15)}
+                </p>
+                <p className="text-xs text-[var(--text-secondary)]">{t('quality.needs_improvement')}</p>
+              </div>
+            </div>
+
+            {/* Quality Recommendations */}
+            {qualityData.averageScore < 8 && (
+              <div className="p-3 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
+                <div className="flex items-start space-x-2">
+                  <Star className="w-4 h-4 mt-0.5 text-orange-600" />
+                  <div>
+                    <p className="text-sm font-medium text-orange-600">
+                      {t('quality.recommendations.improve_quality')}
+                    </p>
+                    <p className="text-xs text-[var(--text-secondary)] mt-1">
+                      {t('quality.recommendations.focus_consistency')}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {qualityData.averageScore >= 9 && (
+              <div className="p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
+                <div className="flex items-start space-x-2">
+                  <Award className="w-4 h-4 mt-0.5 text-green-600" />
+                  <div>
+                    <p className="text-sm font-medium text-green-600">
+                      {t('quality.recommendations.excellent_quality')}
+                    </p>
+                    <p className="text-xs text-[var(--text-secondary)] mt-1">
+                      {t('quality.recommendations.maintain_standards')}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </AnalyticsWidget>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/components/analytics/production/widgets/TodaysScheduleSummaryWidget.tsx b/frontend/src/components/analytics/production/widgets/TodaysScheduleSummaryWidget.tsx
new file mode 100644
index 00000000..61a68f55
--- /dev/null
+++ b/frontend/src/components/analytics/production/widgets/TodaysScheduleSummaryWidget.tsx
@@ -0,0 +1,176 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Calendar, Clock, Users, Target, AlertCircle } from 'lucide-react';
+import { AnalyticsWidget } from '../AnalyticsWidget';
+import { Badge, Button } from '../../../ui';
+import { useProductionDashboard, useProductionSchedule } from '../../../../api/hooks/production';
+import { useCurrentTenant } from '../../../../stores/tenant.store';
+import { ProductionStatus } from '../../../../api/types/production';
+
+export const TodaysScheduleSummaryWidget: React.FC = () => {
+  const { t } = useTranslation('production');
+  const currentTenant = useCurrentTenant();
+  const tenantId = currentTenant?.id || '';
+
+  const { data: dashboard, isLoading: dashboardLoading, error: dashboardError } = useProductionDashboard(tenantId);
+  const today = new Date().toISOString().split('T')[0];
+  const { data: schedule, isLoading: scheduleLoading, error: scheduleError } = useProductionSchedule(tenantId, today, today);
+
+  const isLoading = dashboardLoading || scheduleLoading;
+  const error = dashboardError?.message || scheduleError?.message;
+
+  const todaysSchedule = schedule?.schedules?.[0];
+  const plannedBatches = dashboard?.todays_production_plan || [];
+
+  const getStatusBadgeVariant = (status: ProductionStatus) => {
+    switch (status) {
+      case ProductionStatus.COMPLETED:
+        return 'success';
+      case ProductionStatus.IN_PROGRESS:
+        return 'info';
+      case ProductionStatus.PENDING:
+        return 'warning';
+      case ProductionStatus.CANCELLED:
+      case ProductionStatus.FAILED:
+        return 'error';
+      default:
+        return 'default';
+    }
+  };
+
+  const getPriorityColor = (priority?: string) => {
+    if (!priority) return 'text-gray-600';
+
+    switch (priority) {
+      case 'URGENT':
+        return 'text-red-600';
+      case 'HIGH':
+        return 'text-orange-600';
+      case 'MEDIUM':
+        return 'text-blue-600';
+      case 'LOW':
+        return 'text-gray-600';
+      default:
+        return 'text-gray-600';
+    }
+  };
+
+  const formatTime = (timeString: string) => {
+    return new Date(timeString).toLocaleTimeString('es-ES', {
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+
+  return (
+    <AnalyticsWidget
+      title={t('schedule.todays_summary')}
+      subtitle={t('schedule.shift_hours_batches_staff')}
+      icon={Calendar}
+      loading={isLoading}
+      error={error}
+      actions={
+        <Button variant="outline" size="sm">
+          <Target className="w-4 h-4 mr-1" />
+          {t('actions.optimize')}
+        </Button>
+      }
+    >
+      <div className="space-y-4">
+        {/* Schedule Overview */}
+        {todaysSchedule && (
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 p-4 bg-[var(--bg-secondary)] rounded-lg">
+            <div className="text-center">
+              <Clock className="w-5 h-5 text-[var(--color-primary)] mx-auto mb-1" />
+              <p className="text-sm text-[var(--text-secondary)]">{t('schedule.shift_hours')}</p>
+              <p className="font-semibold text-[var(--text-primary)]">
+                {formatTime(todaysSchedule.shift_start)} - {formatTime(todaysSchedule.shift_end)}
+              </p>
+            </div>
+            <div className="text-center">
+              <Target className="w-5 h-5 text-[var(--color-primary)] mx-auto mb-1" />
+              <p className="text-sm text-[var(--text-secondary)]">{t('stats.planned_batches')}</p>
+              <p className="font-semibold text-[var(--text-primary)]">{todaysSchedule.total_batches_planned}</p>
+            </div>
+            <div className="text-center">
+              <Users className="w-5 h-5 text-[var(--color-primary)] mx-auto mb-1" />
+              <p className="text-sm text-[var(--text-secondary)]">{t('schedule.staff_count')}</p>
+              <p className="font-semibold text-[var(--text-primary)]">{todaysSchedule.staff_count}</p>
+            </div>
+            <div className="text-center">
+              <AlertCircle className="w-5 h-5 text-[var(--color-primary)] mx-auto mb-1" />
+              <p className="text-sm text-[var(--text-secondary)]">{t('schedule.capacity_utilization')}</p>
+              <p className="font-semibold text-[var(--text-primary)]">
+                {todaysSchedule.utilization_percentage?.toFixed(1) || 0}%
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Planned Batches */}
+        <div>
+          <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3 flex items-center">
+            <Target className="w-4 h-4 mr-2" />
+            {t('schedule.planned_batches')} ({plannedBatches.length})
+          </h4>
+
+          {plannedBatches.length === 0 ? (
+            <div className="text-center py-6 text-[var(--text-secondary)]">
+              <Calendar className="w-8 h-8 mx-auto mb-2 opacity-50" />
+              <p className="text-sm">{t('messages.no_batches_planned')}</p>
+            </div>
+          ) : (
+            <div className="space-y-2 max-h-64 overflow-y-auto">
+              {plannedBatches.map((batch, index) => (
+                <div
+                  key={batch.batch_id || index}
+                  className="flex items-center justify-between p-3 bg-[var(--bg-secondary)] rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
+                >
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center space-x-2 mb-1">
+                      <p className="font-medium text-[var(--text-primary)] truncate">
+                        {batch.product_name}
+                      </p>
+                      {batch.priority && (
+                        <span className={`text-xs font-medium ${getPriorityColor(batch.priority)}`}>
+                          {t(`priority.${batch.priority.toLowerCase()}`)}
+                        </span>
+                      )}
+                    </div>
+                    <p className="text-sm text-[var(--text-secondary)]">
+                      {t('batch.planned_quantity')}: {batch.planned_quantity} {t('common.units')}
+                    </p>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Badge variant={getStatusBadgeVariant(batch.status)}>
+                      {batch.status ? t(`status.${batch.status.toLowerCase()}`) : t('status.unknown')}
+                    </Badge>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Schedule Status */}
+        {todaysSchedule && (
+          <div className="flex items-center justify-between pt-3 border-t border-[var(--border-primary)]">
+            <div className="flex items-center space-x-2 text-sm">
+              <div className={`w-2 h-2 rounded-full ${todaysSchedule.is_active ? 'bg-green-500' : 'bg-gray-400'}`} />
+              <span className="text-[var(--text-secondary)]">
+                {todaysSchedule.is_active ? t('schedule.active') : t('schedule.inactive')}
+              </span>
+            </div>
+            <div className="text-sm text-[var(--text-secondary)]">
+              {todaysSchedule.is_finalized ? (
+                <span className="text-green-600">{t('schedule.finalized')}</span>
+              ) : (
+                <span className="text-orange-600">{t('schedule.draft')}</span>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </AnalyticsWidget>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/components/analytics/production/widgets/TopDefectTypesWidget.tsx b/frontend/src/components/analytics/production/widgets/TopDefectTypesWidget.tsx
new file mode 100644
index 00000000..c6beeea5
--- /dev/null
+++ b/frontend/src/components/analytics/production/widgets/TopDefectTypesWidget.tsx
@@ -0,0 +1,329 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { AlertCircle, Eye, Camera, CheckSquare } from 'lucide-react';
+import { AnalyticsWidget } from '../AnalyticsWidget';
+import { AnalyticsChart, ChartSeries } from '../AnalyticsChart';
+import { Button, Badge } from '../../../ui';
+import { useActiveBatches } from '../../../../api/hooks/production';
+import { useCurrentTenant } from '../../../../stores/tenant.store';
+
+interface DefectType {
+  type: string;
+  count: number;
+  percentage: number;
+  severity: 'low' | 'medium' | 'high';
+  trend: 'up' | 'down' | 'stable';
+  estimatedCost: number;
+}
+
+export const TopDefectTypesWidget: React.FC = () => {
+  const { t } = useTranslation('production');
+  const currentTenant = useCurrentTenant();
+  const tenantId = currentTenant?.id || '';
+
+  const { data: batchesData, isLoading, error } = useActiveBatches(tenantId);
+  const batches = batchesData?.batches || [];
+
+  // Calculate defect data from batches
+  const getDefectData = (): DefectType[] => {
+    const totalDefects = batches.reduce((sum, batch) => sum + (batch.defect_quantity || 0), 0);
+
+    if (totalDefects === 0) return [];
+
+    // Mock defect type distribution (in real implementation, this would come from quality check defect_types)
+    const defectTypes = [
+      {
+        type: 'burnt',
+        count: Math.round(totalDefects * 0.32),
+        percentage: 32,
+        severity: 'high' as const,
+        trend: 'down' as const,
+        estimatedCost: 45.60
+      },
+      {
+        type: 'underproofed',
+        count: Math.round(totalDefects * 0.24),
+        percentage: 24,
+        severity: 'medium' as const,
+        trend: 'stable' as const,
+        estimatedCost: 28.90
+      },
+      {
+        type: 'misshapen',
+        count: Math.round(totalDefects * 0.19),
+        percentage: 19,
+        severity: 'medium' as const,
+        trend: 'up' as const,
+        estimatedCost: 22.40
+      },
+      {
+        type: 'color_issues',
+        count: Math.round(totalDefects * 0.15),
+        percentage: 15,
+        severity: 'low' as const,
+        trend: 'stable' as const,
+        estimatedCost: 15.20
+      },
+      {
+        type: 'texture_problems',
+        count: Math.round(totalDefects * 0.10),
+        percentage: 10,
+        severity: 'medium' as const,
+        trend: 'down' as const,
+        estimatedCost: 12.80
+      }
+    ].filter(defect => defect.count > 0);
+
+    return defectTypes;
+  };
+
+  const defectData = getDefectData();
+  const totalDefects = defectData.reduce((sum, defect) => sum + defect.count, 0);
+  const totalDefectCost = defectData.reduce((sum, defect) => sum + defect.estimatedCost, 0);
+
+  // Create defect distribution pie chart
+  const getDefectDistributionChartData = (): ChartSeries[] => {
+    if (defectData.length === 0) return [];
+
+    const colors = ['#dc2626', '#ea580c', '#d97706', '#ca8a04', '#65a30d'];
+    const pieData = defectData.map((defect, index) => ({
+      x: t(`quality.defects.${defect.type}`),
+      y: defect.count,
+      label: t(`quality.defects.${defect.type}`),
+      color: colors[index % colors.length]
+    }));
+
+    return [
+      {
+        id: 'defect-distribution',
+        name: t('quality.defect_distribution'),
+        type: 'pie',
+        color: '#dc2626',
+        data: pieData
+      }
+    ];
+  };
+
+  // Create defect trend over time
+  const getDefectTrendChartData = (): ChartSeries[] => {
+    if (defectData.length === 0) return [];
+
+    const days = ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'];
+
+    return defectData.slice(0, 3).map((defect, seriesIndex) => {
+      const colors = ['#dc2626', '#ea580c', '#d97706'];
+      const baseValue = defect.count / 7; // Average per day
+
+      const trendData = days.map((day, index) => {
+        let value = baseValue;
+        // Apply trend
+        if (defect.trend === 'up') value *= (1 + index * 0.05);
+        else if (defect.trend === 'down') value *= (1 - index * 0.05);
+
+        return {
+          x: day,
+          y: Math.max(0, value + (Math.random() - 0.5) * baseValue * 0.3),
+          label: day
+        };
+      });
+
+      return {
+        id: `defect-trend-${defect.type}`,
+        name: t(`quality.defects.${defect.type}`),
+        type: 'line' as const,
+        color: colors[seriesIndex],
+        data: trendData
+      };
+    });
+  };
+
+  const getSeverityBadgeVariant = (severity: DefectType['severity']) => {
+    switch (severity) {
+      case 'high': return 'error';
+      case 'medium': return 'warning';
+      case 'low': return 'info';
+      default: return 'default';
+    }
+  };
+
+  const getTrendIcon = (trend: DefectType['trend']) => {
+    switch (trend) {
+      case 'up': return '↗️';
+      case 'down': return '↘️';
+      case 'stable': return '➡️';
+      default: return '➡️';
+    }
+  };
+
+  const getTrendColor = (trend: DefectType['trend']) => {
+    switch (trend) {
+      case 'up': return 'text-red-600';
+      case 'down': return 'text-green-600';
+      case 'stable': return 'text-blue-600';
+      default: return 'text-gray-600';
+    }
+  };
+
+  return (
+    <AnalyticsWidget
+      title={t('quality.top_defect_types_24h')}
+      subtitle={t('quality.defect_analysis_cost_impact')}
+      icon={AlertCircle}
+      loading={isLoading}
+      error={error?.message}
+      actions={
+        <Button variant="outline" size="sm">
+          <Eye className="w-4 h-4 mr-1" />
+          {t('quality.actions.view_details')}
+        </Button>
+      }
+    >
+      <div className="space-y-4">
+        {/* Overall Defect Metrics */}
+        <div className="grid grid-cols-2 gap-4">
+          <div className="p-4 bg-[var(--bg-secondary)] rounded-lg text-center">
+            <div className="flex items-center justify-center space-x-2 mb-1">
+              <AlertCircle className="w-5 h-5 text-red-600" />
+              <span className="text-2xl font-bold text-[var(--text-primary)]">
+                {totalDefects}
+              </span>
+            </div>
+            <p className="text-sm text-[var(--text-secondary)]">{t('quality.total_defects')}</p>
+          </div>
+          <div className="p-4 bg-[var(--bg-secondary)] rounded-lg text-center">
+            <div className="flex items-center justify-center space-x-2 mb-1">
+              <span className="text-2xl font-bold text-red-600">
+                €{totalDefectCost.toFixed(0)}
+              </span>
+            </div>
+            <p className="text-sm text-[var(--text-secondary)]">{t('quality.estimated_cost')}</p>
+          </div>
+        </div>
+
+        {defectData.length === 0 ? (
+          <div className="text-center py-8 text-[var(--text-secondary)]">
+            <CheckSquare className="w-12 h-12 mx-auto mb-3 opacity-50" />
+            <h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
+              {t('quality.no_defects_detected')}
+            </h3>
+            <p className="text-sm">{t('quality.excellent_quality_standards')}</p>
+          </div>
+        ) : (
+          <>
+            {/* Top Defect Types List */}
+            <div>
+              <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3">
+                {t('quality.defect_breakdown')}
+              </h4>
+              <div className="space-y-3 max-h-64 overflow-y-auto">
+                {defectData.map((defect, index) => (
+                  <div key={index} className="flex items-center justify-between p-3 bg-[var(--bg-secondary)] rounded-lg">
+                    <div className="flex items-center space-x-3">
+                      <div className="w-8 h-8 bg-red-100 dark:bg-red-900/20 rounded-lg flex items-center justify-center">
+                        <span className="text-sm font-bold text-red-600">#{index + 1}</span>
+                      </div>
+                      <div>
+                        <p className="font-medium text-[var(--text-primary)]">
+                          {t(`quality.defects.${defect.type}`)}
+                        </p>
+                        <div className="flex items-center space-x-3 text-xs text-[var(--text-secondary)]">
+                          <span>{defect.count} {t('quality.incidents')}</span>
+                          <span>•</span>
+                          <span>€{defect.estimatedCost.toFixed(2)} {t('quality.cost')}</span>
+                          <span className={getTrendColor(defect.trend)}>
+                            {getTrendIcon(defect.trend)} {t(`quality.trend.${defect.trend}`)}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <span className="text-lg font-bold text-[var(--text-primary)]">
+                        {defect.percentage}%
+                      </span>
+                      <Badge variant={getSeverityBadgeVariant(defect.severity)}>
+                        {t(`quality.severity.${defect.severity}`)}
+                      </Badge>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Defect Distribution Chart */}
+            <div>
+              <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3">
+                {t('quality.defect_distribution')}
+              </h4>
+              <AnalyticsChart
+                series={getDefectDistributionChartData()}
+                height={200}
+                showLegend={true}
+                showGrid={false}
+              />
+            </div>
+
+            {/* Defect Trends Over Time */}
+            {defectData.length > 0 && (
+              <div>
+                <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3">
+                  {t('quality.top_defects_weekly_trend')}
+                </h4>
+                <AnalyticsChart
+                  series={getDefectTrendChartData()}
+                  height={150}
+                  showLegend={true}
+                  showGrid={true}
+                />
+              </div>
+            )}
+
+            {/* Defect Prevention Insights */}
+            <div className="space-y-2">
+              {defectData.some(d => d.severity === 'high') && (
+                <div className="flex items-start space-x-2 p-3 bg-red-50 dark:bg-red-900/20 rounded-lg">
+                  <AlertCircle className="w-4 h-4 mt-0.5 text-red-600" />
+                  <div>
+                    <p className="text-sm font-medium text-red-600">
+                      {t('quality.recommendations.critical_defects')}
+                    </p>
+                    <p className="text-xs text-[var(--text-secondary)] mt-1">
+                      {t('quality.recommendations.immediate_action_required')}
+                    </p>
+                  </div>
+                </div>
+              )}
+
+              <div className="flex items-start space-x-2 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+                <Camera className="w-4 h-4 mt-0.5 text-blue-600" />
+                <div>
+                  <p className="text-sm font-medium text-blue-600">
+                    {t('quality.recommendations.documentation')}
+                  </p>
+                  <p className="text-xs text-[var(--text-secondary)] mt-1">
+                    {t('quality.recommendations.photo_documentation_helps')}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Action Items */}
+            <div className="pt-3 border-t border-[var(--border-primary)]">
+              <h5 className="text-sm font-medium text-[var(--text-primary)] mb-2">
+                {t('quality.recommended_actions')}
+              </h5>
+              <div className="space-y-1 text-xs text-[var(--text-secondary)]">
+                {defectData[0] && (
+                  <p>• {t('quality.actions.focus_on')} {t(`quality.defects.${defectData[0].type}`).toLowerCase()}</p>
+                )}
+                {defectData.some(d => d.trend === 'up') && (
+                  <p>• {t('quality.actions.investigate_increasing_defects')}</p>
+                )}
+                <p>• {t('quality.actions.review_process_controls')}</p>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </AnalyticsWidget>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/components/analytics/production/widgets/WasteDefectTrackerWidget.tsx b/frontend/src/components/analytics/production/widgets/WasteDefectTrackerWidget.tsx
new file mode 100644
index 00000000..d924d6d2
--- /dev/null
+++ b/frontend/src/components/analytics/production/widgets/WasteDefectTrackerWidget.tsx
@@ -0,0 +1,323 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { AlertTriangle, Trash2, Target, TrendingDown } from 'lucide-react';
+import { AnalyticsWidget } from '../AnalyticsWidget';
+import { AnalyticsChart, ChartSeries } from '../AnalyticsChart';
+import { Button, Badge } from '../../../ui';
+import { useActiveBatches } from '../../../../api/hooks/production';
+import { useCurrentTenant } from '../../../../stores/tenant.store';
+
+interface WasteSource {
+  source: string;
+  count: number;
+  percentage: number;
+  cost: number;
+  severity: 'low' | 'medium' | 'high';
+}
+
+export const WasteDefectTrackerWidget: React.FC = () => {
+  const { t } = useTranslation('production');
+  const currentTenant = useCurrentTenant();
+  const tenantId = currentTenant?.id || '';
+
+  const { data: batchesData, isLoading, error } = useActiveBatches(tenantId);
+  const batches = batchesData?.batches || [];
+
+  // Calculate waste and defect data from batches
+  const getWasteData = () => {
+    const totalUnits = batches.reduce((sum, batch) => sum + (batch.actual_quantity || batch.planned_quantity || 0), 0);
+    const totalWaste = batches.reduce((sum, batch) => sum + (batch.waste_quantity || 0), 0);
+    const totalDefects = batches.reduce((sum, batch) => sum + (batch.defect_quantity || 0), 0);
+
+    const wastePercentage = totalUnits > 0 ? (totalWaste / totalUnits) * 100 : 0;
+    const defectPercentage = totalUnits > 0 ? (totalDefects / totalUnits) * 100 : 0;
+
+    return {
+      totalUnits,
+      totalWaste,
+      totalDefects,
+      wastePercentage,
+      defectPercentage
+    };
+  };
+
+  const wasteData = getWasteData();
+
+  // Mock waste sources data (in real implementation, this would come from quality check defect types)
+  const getWasteSources = (): WasteSource[] => {
+    return [
+      {
+        source: t('quality.defects.burnt'),
+        count: Math.round(wasteData.totalWaste * 0.35),
+        percentage: 35,
+        cost: 45.20,
+        severity: 'high'
+      },
+      {
+        source: t('quality.defects.misshapen'),
+        count: Math.round(wasteData.totalWaste * 0.28),
+        percentage: 28,
+        cost: 32.15,
+        severity: 'medium'
+      },
+      {
+        source: t('quality.defects.underproofed'),
+        count: Math.round(wasteData.totalWaste * 0.20),
+        percentage: 20,
+        cost: 28.90,
+        severity: 'medium'
+      },
+      {
+        source: t('quality.defects.temperature_issues'),
+        count: Math.round(wasteData.totalWaste * 0.12),
+        percentage: 12,
+        cost: 18.70,
+        severity: 'low'
+      },
+      {
+        source: t('quality.defects.expired'),
+        count: Math.round(wasteData.totalWaste * 0.05),
+        percentage: 5,
+        cost: 8.40,
+        severity: 'low'
+      }
+    ].filter(source => source.count > 0);
+  };
+
+  const wasteSources = getWasteSources();
+  const totalWasteCost = wasteSources.reduce((sum, source) => sum + source.cost, 0);
+
+  // Create pie chart for waste sources
+  const getWasteSourcesChartData = (): ChartSeries[] => {
+    if (wasteSources.length === 0) return [];
+
+    const colors = ['#dc2626', '#ea580c', '#d97706', '#ca8a04', '#65a30d'];
+    const pieData = wasteSources.map((source, index) => ({
+      x: source.source,
+      y: source.count,
+      label: source.source,
+      color: colors[index % colors.length]
+    }));
+
+    return [
+      {
+        id: 'waste-sources',
+        name: t('quality.waste_sources'),
+        type: 'pie',
+        color: '#dc2626',
+        data: pieData
+      }
+    ];
+  };
+
+  // Create trend chart for waste over time
+  const getWasteTrendChartData = (): ChartSeries[] => {
+    const days = ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'];
+    const wasteData = days.map((day, index) => ({
+      x: day,
+      y: Math.max(1, 8 - index + Math.random() * 3), // Decreasing trend with some variation
+      label: day
+    }));
+
+    const defectData = days.map((day, index) => ({
+      x: day,
+      y: Math.max(0.5, 5 - index * 0.5 + Math.random() * 2),
+      label: day
+    }));
+
+    return [
+      {
+        id: 'waste-trend',
+        name: t('quality.waste_percentage'),
+        type: 'line',
+        color: '#dc2626',
+        data: wasteData
+      },
+      {
+        id: 'defect-trend',
+        name: t('quality.defect_percentage'),
+        type: 'line',
+        color: '#ea580c',
+        data: defectData
+      }
+    ];
+  };
+
+  const getSeverityBadgeVariant = (severity: WasteSource['severity']) => {
+    switch (severity) {
+      case 'high': return 'error';
+      case 'medium': return 'warning';
+      case 'low': return 'info';
+      default: return 'default';
+    }
+  };
+
+  const getWasteStatus = () => {
+    const totalWastePercentage = wasteData.wastePercentage + wasteData.defectPercentage;
+    if (totalWastePercentage <= 3) return { status: 'excellent', color: 'text-green-600', bgColor: 'bg-green-100 dark:bg-green-900/20' };
+    if (totalWastePercentage <= 5) return { status: 'good', color: 'text-blue-600', bgColor: 'bg-blue-100 dark:bg-blue-900/20' };
+    if (totalWastePercentage <= 8) return { status: 'warning', color: 'text-orange-600', bgColor: 'bg-orange-100 dark:bg-orange-900/20' };
+    return { status: 'critical', color: 'text-red-600', bgColor: 'bg-red-100 dark:bg-red-900/20' };
+  };
+
+  const wasteStatus = getWasteStatus();
+  const totalWastePercentage = wasteData.wastePercentage + wasteData.defectPercentage;
+
+  return (
+    <AnalyticsWidget
+      title={t('quality.waste_defect_tracker')}
+      subtitle={t('quality.waste_sources_trends_costs')}
+      icon={AlertTriangle}
+      loading={isLoading}
+      error={error?.message}
+      actions={
+        <Button variant="outline" size="sm">
+          <Target className="w-4 h-4 mr-1" />
+          {t('quality.actions.reduce_waste')}
+        </Button>
+      }
+    >
+      <div className="space-y-4">
+        {/* Overall Waste Metrics */}
+        <div className="grid grid-cols-3 gap-4">
+          <div className="p-3 bg-[var(--bg-secondary)] rounded-lg text-center">
+            <div className="flex items-center justify-center space-x-2 mb-1">
+              <Trash2 className="w-4 h-4 text-red-600" />
+              <span className="text-lg font-bold text-[var(--text-primary)]">
+                {totalWastePercentage.toFixed(1)}%
+              </span>
+            </div>
+            <p className="text-xs text-[var(--text-secondary)]">{t('quality.total_waste')}</p>
+          </div>
+          <div className="p-3 bg-[var(--bg-secondary)] rounded-lg text-center">
+            <div className="flex items-center justify-center space-x-2 mb-1">
+              <AlertTriangle className="w-4 h-4 text-orange-600" />
+              <span className="text-lg font-bold text-[var(--text-primary)]">
+                {wasteData.totalDefects}
+              </span>
+            </div>
+            <p className="text-xs text-[var(--text-secondary)]">{t('quality.total_defects')}</p>
+          </div>
+          <div className="p-3 bg-[var(--bg-secondary)] rounded-lg text-center">
+            <div className="flex items-center justify-center space-x-2 mb-1">
+              <TrendingDown className="w-4 h-4 text-green-600" />
+              <span className="text-lg font-bold text-[var(--text-primary)]">
+                €{totalWasteCost.toFixed(0)}
+              </span>
+            </div>
+            <p className="text-xs text-[var(--text-secondary)]">{t('cost.waste_cost')}</p>
+          </div>
+        </div>
+
+        {/* Waste Status */}
+        <div className={`p-3 rounded-lg ${wasteStatus.bgColor}`}>
+          <div className="flex items-center space-x-2">
+            <AlertTriangle className={`w-4 h-4 ${wasteStatus.color}`} />
+            <span className={`text-sm font-medium ${wasteStatus.color}`}>
+              {t(`quality.status.${wasteStatus.status}`)}
+            </span>
+          </div>
+        </div>
+
+        {wasteSources.length === 0 ? (
+          <div className="text-center py-8 text-[var(--text-secondary)]">
+            <Target className="w-12 h-12 mx-auto mb-3 opacity-50" />
+            <p className="text-sm">{t('quality.no_waste_data')}</p>
+          </div>
+        ) : (
+          <>
+            {/* Waste Sources Breakdown */}
+            <div>
+              <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3">
+                {t('quality.top_waste_sources')}
+              </h4>
+              <div className="space-y-2">
+                {wasteSources.slice(0, 5).map((source, index) => (
+                  <div key={index} className="flex items-center justify-between p-3 bg-[var(--bg-secondary)] rounded-lg">
+                    <div className="flex items-center space-x-3">
+                      <div className="w-3 h-3 bg-red-500 rounded-full" />
+                      <div>
+                        <p className="text-sm font-medium text-[var(--text-primary)]">
+                          {source.source}
+                        </p>
+                        <p className="text-xs text-[var(--text-secondary)]">
+                          {source.count} {t('common.units')} • €{source.cost.toFixed(2)}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <span className="text-sm font-semibold text-[var(--text-primary)]">
+                        {source.percentage}%
+                      </span>
+                      <Badge variant={getSeverityBadgeVariant(source.severity)}>
+                        {t(`quality.severity.${source.severity}`)}
+                      </Badge>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Waste Sources Pie Chart */}
+            <div>
+              <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3">
+                {t('quality.waste_distribution')}
+              </h4>
+              <AnalyticsChart
+                series={getWasteSourcesChartData()}
+                height={200}
+                showLegend={true}
+                showGrid={false}
+              />
+            </div>
+
+            {/* Weekly Waste Trend */}
+            <div>
+              <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3">
+                {t('quality.weekly_waste_trend')}
+              </h4>
+              <AnalyticsChart
+                series={getWasteTrendChartData()}
+                height={150}
+                showLegend={true}
+                showGrid={true}
+              />
+            </div>
+
+            {/* Reduction Recommendations */}
+            <div className="space-y-2">
+              {wasteSources.filter(s => s.severity === 'high').length > 0 && (
+                <div className="flex items-start space-x-2 p-3 bg-red-50 dark:bg-red-900/20 rounded-lg">
+                  <AlertTriangle className="w-4 h-4 mt-0.5 text-red-600" />
+                  <div>
+                    <p className="text-sm font-medium text-red-600">
+                      {t('quality.recommendations.high_waste_detected')}
+                    </p>
+                    <p className="text-xs text-[var(--text-secondary)] mt-1">
+                      {t('quality.recommendations.check_temperature_timing')}
+                    </p>
+                  </div>
+                </div>
+              )}
+
+              <div className="flex items-start space-x-2 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+                <Target className="w-4 h-4 mt-0.5 text-blue-600" />
+                <div>
+                  <p className="text-sm font-medium text-blue-600">
+                    {t('quality.recommendations.improvement_opportunity')}
+                  </p>
+                  <p className="text-xs text-[var(--text-secondary)] mt-1">
+                    {totalWastePercentage > 5
+                      ? t('quality.recommendations.reduce_waste_target', { target: '3%' })
+                      : t('quality.recommendations.maintain_quality_standards')
+                    }
+                  </p>
+                </div>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </AnalyticsWidget>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/components/analytics/production/widgets/YieldPerformanceWidget.tsx b/frontend/src/components/analytics/production/widgets/YieldPerformanceWidget.tsx
new file mode 100644
index 00000000..1b7de6e2
--- /dev/null
+++ b/frontend/src/components/analytics/production/widgets/YieldPerformanceWidget.tsx
@@ -0,0 +1,321 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Target, TrendingUp, Award, BarChart3 } from 'lucide-react';
+import { AnalyticsWidget } from '../AnalyticsWidget';
+import { AnalyticsChart, ChartSeries } from '../AnalyticsChart';
+import { Button, Badge } from '../../../ui';
+import { useActiveBatches } from '../../../../api/hooks/production';
+import { useCurrentTenant } from '../../../../stores/tenant.store';
+
+interface ProductYieldData {
+  product: string;
+  averageYield: number;
+  bestYield: number;
+  worstYield: number;
+  batchCount: number;
+  trend: 'up' | 'down' | 'stable';
+  performance: 'excellent' | 'good' | 'average' | 'poor';
+}
+
+export const YieldPerformanceWidget: React.FC = () => {
+  const { t } = useTranslation('production');
+  const currentTenant = useCurrentTenant();
+  const tenantId = currentTenant?.id || '';
+
+  const { data: batchesData, isLoading, error } = useActiveBatches(tenantId);
+  const batches = batchesData?.batches || [];
+
+  // Calculate yield data from batches
+  const getProductYieldData = (): ProductYieldData[] => {
+    const productMap = new Map<string, number[]>();
+
+    batches.forEach(batch => {
+      if (batch.yield_percentage) {
+        const product = batch.product_name;
+        if (!productMap.has(product)) {
+          productMap.set(product, []);
+        }
+        productMap.get(product)!.push(batch.yield_percentage);
+      }
+    });
+
+    return Array.from(productMap.entries()).map(([product, yields]) => {
+      const averageYield = yields.reduce((sum, yieldValue) => sum + yieldValue, 0) / yields.length;
+      const bestYield = Math.max(...yields);
+      const worstYield = Math.min(...yields);
+
+      // Simulate trend calculation (in real implementation, this would compare with historical data)
+      const trend: 'up' | 'down' | 'stable' =
+        averageYield > 92 ? 'up' :
+        averageYield < 88 ? 'down' : 'stable';
+
+      const performance: 'excellent' | 'good' | 'average' | 'poor' =
+        averageYield >= 95 ? 'excellent' :
+        averageYield >= 90 ? 'good' :
+        averageYield >= 85 ? 'average' : 'poor';
+
+      return {
+        product,
+        averageYield,
+        bestYield,
+        worstYield,
+        batchCount: yields.length,
+        trend,
+        performance
+      };
+    }).sort((a, b) => b.averageYield - a.averageYield);
+  };
+
+  const productYieldData = getProductYieldData();
+  const overallYield = productYieldData.length > 0
+    ? productYieldData.reduce((sum, item) => sum + item.averageYield, 0) / productYieldData.length
+    : 0;
+
+  // Create yield comparison chart
+  const getYieldComparisonChartData = (): ChartSeries[] => {
+    if (productYieldData.length === 0) return [];
+
+    const averageData = productYieldData.map(item => ({
+      x: item.product,
+      y: item.averageYield,
+      label: item.product
+    }));
+
+    const bestData = productYieldData.map(item => ({
+      x: item.product,
+      y: item.bestYield,
+      label: item.product
+    }));
+
+    return [
+      {
+        id: 'average-yield',
+        name: t('stats.average_yield'),
+        type: 'bar',
+        color: '#d97706',
+        data: averageData
+      },
+      {
+        id: 'best-yield',
+        name: t('stats.best_yield'),
+        type: 'bar',
+        color: '#16a34a',
+        data: bestData
+      }
+    ];
+  };
+
+  // Create yield trend over time
+  const getYieldTrendChartData = (): ChartSeries[] => {
+    const days = ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'];
+    const trendData = days.map((day, index) => ({
+      x: day,
+      y: Math.max(85, 90 + index * 0.5 + Math.random() * 3), // Slightly improving trend
+      label: day
+    }));
+
+    return [
+      {
+        id: 'yield-trend',
+        name: t('stats.yield_trend'),
+        type: 'line',
+        color: '#16a34a',
+        data: trendData
+      }
+    ];
+  };
+
+  const getPerformanceBadgeVariant = (performance: ProductYieldData['performance']) => {
+    switch (performance) {
+      case 'excellent': return 'success';
+      case 'good': return 'info';
+      case 'average': return 'warning';
+      case 'poor': return 'error';
+      default: return 'default';
+    }
+  };
+
+  const getTrendIcon = (trend: ProductYieldData['trend']) => {
+    switch (trend) {
+      case 'up': return TrendingUp;
+      case 'down': return TrendingUp; // We'll rotate it in CSS for down
+      case 'stable': return BarChart3;
+      default: return BarChart3;
+    }
+  };
+
+  const getTrendColor = (trend: ProductYieldData['trend']) => {
+    switch (trend) {
+      case 'up': return 'text-green-600';
+      case 'down': return 'text-red-600';
+      case 'stable': return 'text-blue-600';
+      default: return 'text-gray-600';
+    }
+  };
+
+  const getYieldStatus = () => {
+    if (overallYield >= 95) return { status: 'excellent', color: 'text-green-600', bgColor: 'bg-green-100 dark:bg-green-900/20' };
+    if (overallYield >= 90) return { status: 'good', color: 'text-blue-600', bgColor: 'bg-blue-100 dark:bg-blue-900/20' };
+    if (overallYield >= 85) return { status: 'average', color: 'text-orange-600', bgColor: 'bg-orange-100 dark:bg-orange-900/20' };
+    return { status: 'poor', color: 'text-red-600', bgColor: 'bg-red-100 dark:bg-red-900/20' };
+  };
+
+  const yieldStatus = getYieldStatus();
+
+  return (
+    <AnalyticsWidget
+      title={t('stats.yield_performance_leaderboard')}
+      subtitle={t('stats.product_yield_rankings_trends')}
+      icon={Award}
+      loading={isLoading}
+      error={error?.message}
+      actions={
+        <Button variant="outline" size="sm">
+          <Target className="w-4 h-4 mr-1" />
+          {t('actions.optimize_yields')}
+        </Button>
+      }
+    >
+      <div className="space-y-4">
+        {/* Overall Yield Status */}
+        <div className="text-center">
+          <div className="flex items-center justify-center space-x-2 mb-2">
+            <Award className={`w-6 h-6 ${yieldStatus.color}`} />
+            <span className="text-3xl font-bold text-[var(--text-primary)]">
+              {overallYield.toFixed(1)}%
+            </span>
+          </div>
+          <div className={`inline-flex items-center space-x-2 px-3 py-1 rounded-full text-sm ${yieldStatus.bgColor}`}>
+            <span className={yieldStatus.color}>
+              {t(`performance.${yieldStatus.status}`)}
+            </span>
+          </div>
+        </div>
+
+        {productYieldData.length === 0 ? (
+          <div className="text-center py-8 text-[var(--text-secondary)]">
+            <Award className="w-12 h-12 mx-auto mb-3 opacity-50" />
+            <p className="text-sm">{t('stats.no_yield_data')}</p>
+          </div>
+        ) : (
+          <>
+            {/* Yield Leaderboard */}
+            <div>
+              <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3 flex items-center">
+                <Award className="w-4 h-4 mr-2" />
+                {t('stats.product_leaderboard')}
+              </h4>
+              <div className="space-y-2 max-h-64 overflow-y-auto">
+                {productYieldData.map((item, index) => {
+                  const TrendIcon = getTrendIcon(item.trend);
+                  const trendColor = getTrendColor(item.trend);
+
+                  return (
+                    <div key={index} className="flex items-center justify-between p-3 bg-[var(--bg-secondary)] rounded-lg">
+                      <div className="flex items-center space-x-3">
+                        <div className="flex items-center justify-center w-6 h-6 bg-[var(--color-primary)]/10 rounded-full text-xs font-bold text-[var(--color-primary)]">
+                          {index + 1}
+                        </div>
+                        <div>
+                          <p className="font-medium text-[var(--text-primary)]">
+                            {item.product}
+                          </p>
+                          <div className="flex items-center space-x-2 text-xs text-[var(--text-secondary)]">
+                            <span>{item.batchCount} {t('stats.batches')}</span>
+                            <span>•</span>
+                            <span>{item.bestYield.toFixed(1)}% {t('stats.best')}</span>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <div className={`flex items-center space-x-1 ${trendColor}`}>
+                          <TrendIcon
+                            className={`w-3 h-3 ${item.trend === 'down' ? 'transform rotate-180' : ''}`}
+                          />
+                        </div>
+                        <div className="text-right">
+                          <div className="text-lg font-bold text-[var(--text-primary)]">
+                            {item.averageYield.toFixed(1)}%
+                          </div>
+                          <Badge variant={getPerformanceBadgeVariant(item.performance)} className="text-xs">
+                            {t(`performance.${item.performance}`)}
+                          </Badge>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+
+            {/* Yield Comparison Chart */}
+            <div>
+              <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3">
+                {t('stats.yield_comparison')}
+              </h4>
+              <AnalyticsChart
+                series={getYieldComparisonChartData()}
+                height={200}
+                showLegend={true}
+                showGrid={true}
+              />
+            </div>
+
+            {/* Weekly Yield Trend */}
+            <div>
+              <h4 className="text-sm font-medium text-[var(--text-primary)] mb-3">
+                {t('stats.weekly_yield_trend')}
+              </h4>
+              <AnalyticsChart
+                series={getYieldTrendChartData()}
+                height={150}
+                showLegend={false}
+                showGrid={true}
+              />
+            </div>
+
+            {/* Yield Insights */}
+            <div className="grid grid-cols-3 gap-3 text-center">
+              <div className="p-3 bg-[var(--bg-secondary)] rounded-lg">
+                <p className="text-lg font-bold text-green-600">
+                  {productYieldData.filter(p => p.performance === 'excellent').length}
+                </p>
+                <p className="text-xs text-[var(--text-secondary)]">{t('performance.excellent')}</p>
+              </div>
+              <div className="p-3 bg-[var(--bg-secondary)] rounded-lg">
+                <p className="text-lg font-bold text-blue-600">
+                  {productYieldData.filter(p => p.performance === 'good').length}
+                </p>
+                <p className="text-xs text-[var(--text-secondary)]">{t('performance.good')}</p>
+              </div>
+              <div className="p-3 bg-[var(--bg-secondary)] rounded-lg">
+                <p className="text-lg font-bold text-orange-600">
+                  {productYieldData.filter(p => p.performance === 'average' || p.performance === 'poor').length}
+                </p>
+                <p className="text-xs text-[var(--text-secondary)]">{t('performance.needs_improvement')}</p>
+              </div>
+            </div>
+
+            {/* Improvement Recommendations */}
+            <div className="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+              <div className="flex items-start space-x-2">
+                <Target className="w-4 h-4 mt-0.5 text-blue-600" />
+                <div>
+                  <p className="text-sm font-medium text-blue-600">
+                    {t('recommendations.yield_improvement')}
+                  </p>
+                  <p className="text-xs text-[var(--text-secondary)] mt-1">
+                    {overallYield < 90
+                      ? t('recommendations.focus_on_low_performers')
+                      : t('recommendations.maintain_high_standards')
+                    }
+                  </p>
+                </div>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </AnalyticsWidget>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/components/analytics/production/widgets/index.ts b/frontend/src/components/analytics/production/widgets/index.ts
new file mode 100644
index 00000000..70193171
--- /dev/null
+++ b/frontend/src/components/analytics/production/widgets/index.ts
@@ -0,0 +1,38 @@
+// Bakery Operations Overview Widgets
+export { TodaysScheduleSummaryWidget } from './TodaysScheduleSummaryWidget';
+export { LiveBatchTrackerWidget } from './LiveBatchTrackerWidget';
+export { OnTimeCompletionWidget } from './OnTimeCompletionWidget';
+export { CapacityUtilizationWidget } from './CapacityUtilizationWidget';
+
+// Cost & Efficiency Monitoring Widgets
+export { CostPerUnitWidget } from './CostPerUnitWidget';
+export { WasteDefectTrackerWidget } from './WasteDefectTrackerWidget';
+export { YieldPerformanceWidget } from './YieldPerformanceWidget';
+
+// Quality Assurance Panel Widgets
+export { QualityScoreTrendsWidget } from './QualityScoreTrendsWidget';
+export { TopDefectTypesWidget } from './TopDefectTypesWidget';
+
+// Equipment & Maintenance Widgets
+export { EquipmentStatusWidget } from './EquipmentStatusWidget';
+export { MaintenanceScheduleWidget } from './MaintenanceScheduleWidget';
+export { EquipmentEfficiencyWidget } from './EquipmentEfficiencyWidget';
+
+// AI Insights & Predictive Analytics Widgets
+export { AIInsightsWidget } from './AIInsightsWidget';
+export { PredictiveMaintenanceWidget } from './PredictiveMaintenanceWidget';
+
+import React from 'react';
+
+// Widget Types
+export interface WidgetConfig {
+  id: string;
+  title: string;
+  component: React.ComponentType;
+  category: 'operations' | 'cost' | 'quality' | 'equipment' | 'ai';
+  size: 'sm' | 'md' | 'lg' | 'xl';
+  minSubscription?: 'basic' | 'professional' | 'enterprise';
+}
+
+// Export widget configurations (temporarily commented out due to import issues)
+// export const WIDGET_CONFIGS: WidgetConfig[] = [];
\ No newline at end of file
diff --git a/frontend/src/components/domain/production/BatchTracker.tsx b/frontend/src/components/domain/production/BatchTracker.tsx
deleted file mode 100644
index 77bb8dcf..00000000
--- a/frontend/src/components/domain/production/BatchTracker.tsx
+++ /dev/null
@@ -1,680 +0,0 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import { Card, Button, Badge, Input, Modal, Table, Select, DatePicker } from '../../ui';
-import { productionService, type ProductionBatchResponse, ProductionBatchStatus, ProductionPriorityEnum } from '../../../api';
-import type { ProductionBatch, QualityCheck } from '../../../types/production.types';
-
-interface BatchTrackerProps {
-  className?: string;
-  batchId?: string;
-  onStageUpdate?: (batch: ProductionBatch, newStage: ProductionStage) => void;
-  onQualityCheckRequired?: (batch: ProductionBatch, stage: ProductionStage) => void;
-}
-
-interface ProductionStage {
-  id: string;
-  name: string;
-  spanishName: string;
-  icon: string;
-  estimatedMinutes: number;
-  requiresQualityCheck: boolean;
-  criticalControlPoint: boolean;
-  completedAt?: string;
-  notes?: string;
-  nextStages: string[];
-  temperature?: {
-    min: number;
-    max: number;
-    unit: string;
-  };
-}
-
-const PRODUCTION_STAGES: Record<string, ProductionStage> = {
-  mixing: {
-    id: 'mixing',
-    name: 'Mixing',
-    spanishName: 'Amasado',
-    icon: '🥄',
-    estimatedMinutes: 15,
-    requiresQualityCheck: true,
-    criticalControlPoint: true,
-    nextStages: ['resting'],
-    temperature: { min: 22, max: 26, unit: '°C' },
-  },
-  resting: {
-    id: 'resting',
-    name: 'Resting',
-    spanishName: 'Reposo',
-    icon: '⏰',
-    estimatedMinutes: 60,
-    requiresQualityCheck: false,
-    criticalControlPoint: false,
-    nextStages: ['shaping', 'fermentation'],
-  },
-  shaping: {
-    id: 'shaping',
-    name: 'Shaping',
-    spanishName: 'Formado',
-    icon: '✋',
-    estimatedMinutes: 20,
-    requiresQualityCheck: true,
-    criticalControlPoint: false,
-    nextStages: ['fermentation'],
-  },
-  fermentation: {
-    id: 'fermentation',
-    name: 'Fermentation',
-    spanishName: 'Fermentado',
-    icon: '🫧',
-    estimatedMinutes: 120,
-    requiresQualityCheck: true,
-    criticalControlPoint: true,
-    nextStages: ['baking'],
-    temperature: { min: 28, max: 32, unit: '°C' },
-  },
-  baking: {
-    id: 'baking',
-    name: 'Baking',
-    spanishName: 'Horneado',
-    icon: '🔥',
-    estimatedMinutes: 45,
-    requiresQualityCheck: true,
-    criticalControlPoint: true,
-    nextStages: ['cooling'],
-    temperature: { min: 180, max: 220, unit: '°C' },
-  },
-  cooling: {
-    id: 'cooling',
-    name: 'Cooling',
-    spanishName: 'Enfriado',
-    icon: '❄️',
-    estimatedMinutes: 90,
-    requiresQualityCheck: false,
-    criticalControlPoint: false,
-    nextStages: ['packaging'],
-    temperature: { min: 18, max: 25, unit: '°C' },
-  },
-  packaging: {
-    id: 'packaging',
-    name: 'Packaging',
-    spanishName: 'Empaquetado',
-    icon: '📦',
-    estimatedMinutes: 15,
-    requiresQualityCheck: true,
-    criticalControlPoint: false,
-    nextStages: ['completed'],
-  },
-  completed: {
-    id: 'completed',
-    name: 'Completed',
-    spanishName: 'Completado',
-    icon: '✅',
-    estimatedMinutes: 0,
-    requiresQualityCheck: false,
-    criticalControlPoint: false,
-    nextStages: [],
-  },
-};
-
-const STATUS_COLORS = {
-  [ProductionBatchStatus.PLANNED]: 'bg-[var(--color-info)]/10 text-[var(--color-info)] border-[var(--color-info)]/20',
-  [ProductionBatchStatus.IN_PROGRESS]: 'bg-yellow-100 text-yellow-800 border-yellow-200',
-  [ProductionBatchStatus.COMPLETED]: 'bg-[var(--color-success)]/10 text-[var(--color-success)] border-green-200',
-  [ProductionBatchStatus.CANCELLED]: 'bg-[var(--color-error)]/10 text-[var(--color-error)] border-red-200',
-  [ProductionBatchStatus.ON_HOLD]: 'bg-[var(--bg-tertiary)] text-[var(--text-primary)] border-[var(--border-primary)]',
-};
-
-const PRIORITY_COLORS = {
-  [ProductionPriorityEnum.LOW]: 'bg-[var(--bg-tertiary)] text-[var(--text-primary)]',
-  [ProductionPriorityEnum.NORMAL]: 'bg-[var(--color-info)]/10 text-[var(--color-info)]',
-  [ProductionPriorityEnum.HIGH]: 'bg-[var(--color-primary)]/10 text-[var(--color-primary)]',
-  [ProductionPriorityEnum.URGENT]: 'bg-[var(--color-error)]/10 text-[var(--color-error)]',
-};
-
-export const BatchTracker: React.FC<BatchTrackerProps> = ({
-  className = '',
-  batchId,
-  onStageUpdate,
-  onQualityCheckRequired,
-}) => {
-  const [batches, setBatches] = useState<ProductionBatchResponse[]>([]);
-  const [selectedBatch, setSelectedBatch] = useState<ProductionBatchResponse | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [currentStage, setCurrentStage] = useState<string>('mixing');
-  const [stageNotes, setStageNotes] = useState<Record<string, string>>({});
-  const [isStageModalOpen, setIsStageModalOpen] = useState(false);
-  const [selectedStageForUpdate, setSelectedStageForUpdate] = useState<ProductionStage | null>(null);
-  const [alerts, setAlerts] = useState<Array<{
-    id: string;
-    batchId: string;
-    stage: string;
-    type: 'overdue' | 'temperature' | 'quality' | 'equipment';
-    message: string;
-    severity: 'low' | 'medium' | 'high';
-    timestamp: string;
-  }>>([]);
-
-  const loadBatches = useCallback(async () => {
-    setLoading(true);
-    try {
-      const response = await productionService.getProductionBatches({
-        status: ProductionBatchStatus.IN_PROGRESS,
-      });
-      
-      if (response.success && response.data) {
-        setBatches(response.data.items || []);
-        
-        if (batchId) {
-          const specificBatch = response.data.items.find(b => b.id === batchId);
-          if (specificBatch) {
-            setSelectedBatch(specificBatch);
-          }
-        } else if (response.data.items.length > 0) {
-          setSelectedBatch(response.data.items[0]);
-        }
-      }
-    } catch (error) {
-      console.error('Error loading batches:', error);
-    } finally {
-      setLoading(false);
-    }
-  }, [batchId]);
-
-  useEffect(() => {
-    loadBatches();
-    
-    // Mock alerts for demonstration
-    setAlerts([
-      {
-        id: '1',
-        batchId: 'batch-1',
-        stage: 'fermentation',
-        type: 'overdue',
-        message: 'El fermentado ha superado el tiempo estimado en 30 minutos',
-        severity: 'medium',
-        timestamp: new Date().toISOString(),
-      },
-      {
-        id: '2',
-        batchId: 'batch-2',
-        stage: 'baking',
-        type: 'temperature',
-        message: 'Temperatura del horno fuera del rango óptimo (185°C)',
-        severity: 'high',
-        timestamp: new Date().toISOString(),
-      },
-    ]);
-  }, [loadBatches]);
-
-  const getCurrentStageInfo = (batch: ProductionBatchResponse): { stage: ProductionStage; progress: number } => {
-    // This would typically come from the batch data
-    // For demo purposes, we'll simulate based on batch status
-    let stageId = 'mixing';
-    let progress = 0;
-    
-    if (batch.status === ProductionBatchStatus.IN_PROGRESS) {
-      // Simulate current stage based on time elapsed
-      const startTime = new Date(batch.actual_start_date || batch.planned_start_date);
-      const now = new Date();
-      const elapsedMinutes = (now.getTime() - startTime.getTime()) / (1000 * 60);
-      
-      let cumulativeTime = 0;
-      const stageKeys = Object.keys(PRODUCTION_STAGES).slice(0, -1); // Exclude completed
-      
-      for (const key of stageKeys) {
-        const stage = PRODUCTION_STAGES[key];
-        cumulativeTime += stage.estimatedMinutes;
-        if (elapsedMinutes <= cumulativeTime) {
-          stageId = key;
-          const stageStartTime = cumulativeTime - stage.estimatedMinutes;
-          progress = Math.min(100, ((elapsedMinutes - stageStartTime) / stage.estimatedMinutes) * 100);
-          break;
-        }
-      }
-    }
-    
-    return {
-      stage: PRODUCTION_STAGES[stageId],
-      progress: Math.max(0, progress),
-    };
-  };
-
-  const getTimeRemaining = (batch: ProductionBatchResponse, stage: ProductionStage): string => {
-    const startTime = new Date(batch.actual_start_date || batch.planned_start_date);
-    const now = new Date();
-    const elapsedMinutes = (now.getTime() - startTime.getTime()) / (1000 * 60);
-    
-    // Calculate when this stage should complete based on cumulative time
-    let cumulativeTime = 0;
-    const stageKeys = Object.keys(PRODUCTION_STAGES);
-    const currentStageIndex = stageKeys.indexOf(stage.id);
-    
-    for (let i = 0; i <= currentStageIndex; i++) {
-      cumulativeTime += PRODUCTION_STAGES[stageKeys[i]].estimatedMinutes;
-    }
-    
-    const remainingMinutes = Math.max(0, cumulativeTime - elapsedMinutes);
-    const hours = Math.floor(remainingMinutes / 60);
-    const minutes = Math.floor(remainingMinutes % 60);
-    
-    if (hours > 0) {
-      return `${hours}h ${minutes}m restantes`;
-    } else {
-      return `${minutes}m restantes`;
-    }
-  };
-
-  const updateStage = async (batchId: string, newStage: string, notes?: string) => {
-    try {
-      // This would update the batch stage in the backend
-      const updatedBatch = batches.find(b => b.id === batchId);
-      if (updatedBatch && onStageUpdate) {
-        onStageUpdate(updatedBatch as unknown as ProductionBatch, PRODUCTION_STAGES[newStage]);
-      }
-      
-      // Update local state
-      if (notes) {
-        setStageNotes(prev => ({
-          ...prev,
-          [`${batchId}-${newStage}`]: notes,
-        }));
-      }
-      
-      await loadBatches();
-    } catch (error) {
-      console.error('Error updating stage:', error);
-    }
-  };
-
-  const handleQualityCheck = (batch: ProductionBatchResponse, stage: ProductionStage) => {
-    if (onQualityCheckRequired) {
-      onQualityCheckRequired(batch as unknown as ProductionBatch, stage);
-    }
-  };
-
-  const renderStageProgress = (batch: ProductionBatchResponse) => {
-    const { stage: currentStage, progress } = getCurrentStageInfo(batch);
-    const stages = Object.values(PRODUCTION_STAGES).slice(0, -1); // Exclude completed
-    
-    return (
-      <div className="space-y-4">
-        <div className="flex items-center justify-between">
-          <h3 className="font-semibold text-lg">Progreso del lote</h3>
-          <Badge className={STATUS_COLORS[batch.status]}>
-            {batch.status === ProductionBatchStatus.IN_PROGRESS && 'En progreso'}
-            {batch.status === ProductionBatchStatus.PLANNED && 'Planificado'}
-            {batch.status === ProductionBatchStatus.COMPLETED && 'Completado'}
-          </Badge>
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-          {stages.map((stage, index) => {
-            const isActive = stage.id === currentStage.id;
-            const isCompleted = stages.findIndex(s => s.id === currentStage.id) > index;
-            const isOverdue = false; // Would be calculated based on actual timing
-
-            return (
-              <Card
-                key={stage.id}
-                className={`p-4 border-2 transition-all cursor-pointer hover:shadow-md ${
-                  isActive 
-                    ? 'border-blue-500 bg-[var(--color-info)]/5' 
-                    : isCompleted 
-                      ? 'border-green-500 bg-green-50' 
-                      : 'border-[var(--border-primary)] bg-white'
-                } ${isOverdue ? 'border-red-500 bg-red-50' : ''}`}
-                onClick={() => {
-                  setSelectedStageForUpdate(stage);
-                  setIsStageModalOpen(true);
-                }}
-              >
-                <div className="flex items-center justify-between mb-2">
-                  <div className="flex items-center gap-2">
-                    <span className="text-xl">{stage.icon}</span>
-                    <span className="font-medium text-sm">{stage.spanishName}</span>
-                  </div>
-                  {stage.criticalControlPoint && (
-                    <Badge className="bg-[var(--color-primary)]/10 text-[var(--color-primary)] text-xs">
-                      PCC
-                    </Badge>
-                  )}
-                </div>
-
-                {isActive && (
-                  <div className="space-y-2">
-                    <div className="flex justify-between text-xs text-[var(--text-secondary)]">
-                      <span>Progreso</span>
-                      <span>{Math.round(progress)}%</span>
-                    </div>
-                    <div className="w-full bg-[var(--bg-quaternary)] rounded-full h-2">
-                      <div
-                        className="bg-[var(--color-info)]/50 h-2 rounded-full transition-all duration-500"
-                        style={{ width: `${progress}%` }}
-                      />
-                    </div>
-                    <p className="text-xs text-[var(--text-secondary)]">
-                      {getTimeRemaining(batch, stage)}
-                    </p>
-                  </div>
-                )}
-
-                {isCompleted && (
-                  <div className="flex items-center text-[var(--color-success)] text-sm">
-                    <span className="mr-1">✓</span>
-                    Completado
-                  </div>
-                )}
-
-                {!isActive && !isCompleted && (
-                  <p className="text-xs text-[var(--text-tertiary)]">
-                    ~{stage.estimatedMinutes}min
-                  </p>
-                )}
-
-                {stage.temperature && isActive && (
-                  <p className="text-xs text-[var(--text-secondary)] mt-1">
-                    🌡️ {stage.temperature.min}-{stage.temperature.max}{stage.temperature.unit}
-                  </p>
-                )}
-              </Card>
-            );
-          })}
-        </div>
-      </div>
-    );
-  };
-
-  const renderBatchDetails = (batch: ProductionBatchResponse) => (
-    <Card className="p-4">
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div>
-          <h4 className="font-semibold text-[var(--text-primary)]">{batch.recipe?.name || 'Producto'}</h4>
-          <p className="text-sm text-[var(--text-secondary)]">Lote #{batch.batch_number}</p>
-          <Badge className={PRIORITY_COLORS[batch.priority]} size="sm">
-            {batch.priority === ProductionPriorityEnum.LOW && 'Baja'}
-            {batch.priority === ProductionPriorityEnum.NORMAL && 'Normal'}
-            {batch.priority === ProductionPriorityEnum.HIGH && 'Alta'}
-            {batch.priority === ProductionPriorityEnum.URGENT && 'Urgente'}
-          </Badge>
-        </div>
-        
-        <div>
-          <p className="text-sm text-[var(--text-secondary)]">Cantidad planificada</p>
-          <p className="font-semibold">{batch.planned_quantity} unidades</p>
-          {batch.actual_quantity && (
-            <>
-              <p className="text-sm text-[var(--text-secondary)] mt-1">Cantidad real</p>
-              <p className="font-semibold">{batch.actual_quantity} unidades</p>
-            </>
-          )}
-        </div>
-        
-        <div>
-          <p className="text-sm text-[var(--text-secondary)]">Inicio planificado</p>
-          <p className="font-semibold">
-            {new Date(batch.planned_start_date).toLocaleString('es-ES')}
-          </p>
-          {batch.actual_start_date && (
-            <>
-              <p className="text-sm text-[var(--text-secondary)] mt-1">Inicio real</p>
-              <p className="font-semibold">
-                {new Date(batch.actual_start_date).toLocaleString('es-ES')}
-              </p>
-            </>
-          )}
-        </div>
-      </div>
-
-      {batch.notes && (
-        <div className="mt-4 p-3 bg-[var(--bg-secondary)] rounded-lg">
-          <p className="text-sm text-[var(--text-secondary)]">{batch.notes}</p>
-        </div>
-      )}
-    </Card>
-  );
-
-  const renderAlerts = () => (
-    <Card className="p-4">
-      <h3 className="font-semibold text-lg mb-4 flex items-center gap-2">
-        🚨 Alertas activas
-      </h3>
-      
-      {alerts.length === 0 ? (
-        <p className="text-[var(--text-tertiary)] text-center py-4">No hay alertas activas</p>
-      ) : (
-        <div className="space-y-3">
-          {alerts.map((alert) => (
-            <div
-              key={alert.id}
-              className={`p-3 rounded-lg border-l-4 ${
-                alert.severity === 'high' 
-                  ? 'bg-red-50 border-red-500' 
-                  : alert.severity === 'medium' 
-                    ? 'bg-yellow-50 border-yellow-500' 
-                    : 'bg-[var(--color-info)]/5 border-blue-500'
-              }`}
-            >
-              <div className="flex justify-between items-start">
-                <div>
-                  <p className="font-medium text-sm">
-                    Lote #{batches.find(b => b.id === alert.batchId)?.batch_number} - {PRODUCTION_STAGES[alert.stage]?.spanishName}
-                  </p>
-                  <p className="text-sm text-[var(--text-secondary)] mt-1">{alert.message}</p>
-                </div>
-                <Badge 
-                  className={
-                    alert.severity === 'high' 
-                      ? 'bg-[var(--color-error)]/10 text-[var(--color-error)]' 
-                      : alert.severity === 'medium' 
-                        ? 'bg-yellow-100 text-yellow-800' 
-                        : 'bg-[var(--color-info)]/10 text-[var(--color-info)]'
-                  }
-                >
-                  {alert.severity === 'high' && 'Alta'}
-                  {alert.severity === 'medium' && 'Media'}
-                  {alert.severity === 'low' && 'Baja'}
-                </Badge>
-              </div>
-              <p className="text-xs text-[var(--text-tertiary)] mt-2">
-                {new Date(alert.timestamp).toLocaleTimeString('es-ES')}
-              </p>
-            </div>
-          ))}
-        </div>
-      )}
-    </Card>
-  );
-
-  return (
-    <div className={`space-y-6 ${className}`}>
-      <div className="flex justify-between items-center">
-        <div>
-          <h2 className="text-2xl font-bold text-[var(--text-primary)]">Seguimiento de Lotes</h2>
-          <p className="text-[var(--text-secondary)]">Rastrea el progreso de los lotes a través de las etapas de producción</p>
-        </div>
-
-        {selectedBatch && (
-          <div className="flex gap-2">
-            <Select
-              value={selectedBatch.id}
-              onChange={(e) => {
-                const batch = batches.find(b => b.id === e.target.value);
-                if (batch) setSelectedBatch(batch);
-              }}
-              className="w-64"
-            >
-              {batches.map((batch) => (
-                <option key={batch.id} value={batch.id}>
-                  Lote #{batch.batch_number} - {batch.recipe?.name}
-                </option>
-              ))}
-            </Select>
-
-            <Button
-              variant="outline"
-              onClick={loadBatches}
-              disabled={loading}
-            >
-              {loading ? 'Actualizando...' : 'Actualizar'}
-            </Button>
-          </div>
-        )}
-      </div>
-
-      {loading ? (
-        <div className="flex justify-center items-center h-64">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
-        </div>
-      ) : (
-        <>
-          {selectedBatch ? (
-            <div className="space-y-6">
-              {renderBatchDetails(selectedBatch)}
-              {renderStageProgress(selectedBatch)}
-              {renderAlerts()}
-            </div>
-          ) : (
-            <Card className="p-8 text-center">
-              <p className="text-[var(--text-tertiary)]">No hay lotes en producción actualmente</p>
-              <Button variant="primary" className="mt-4">
-                Ver todos los lotes
-              </Button>
-            </Card>
-          )}
-        </>
-      )}
-
-      {/* Stage Update Modal */}
-      <Modal
-        isOpen={isStageModalOpen}
-        onClose={() => {
-          setIsStageModalOpen(false);
-          setSelectedStageForUpdate(null);
-        }}
-        title={`${selectedStageForUpdate?.spanishName} - Lote #${selectedBatch?.batch_number}`}
-      >
-        {selectedStageForUpdate && selectedBatch && (
-          <div className="space-y-4">
-            <div className="bg-[var(--bg-secondary)] p-4 rounded-lg">
-              <h4 className="font-medium mb-2 flex items-center gap-2">
-                <span className="text-xl">{selectedStageForUpdate.icon}</span>
-                {selectedStageForUpdate.spanishName}
-              </h4>
-              <p className="text-sm text-[var(--text-secondary)] mb-2">
-                Duración estimada: {selectedStageForUpdate.estimatedMinutes} minutos
-              </p>
-              
-              {selectedStageForUpdate.temperature && (
-                <p className="text-sm text-[var(--text-secondary)]">
-                  🌡️ Temperatura: {selectedStageForUpdate.temperature.min}-{selectedStageForUpdate.temperature.max}{selectedStageForUpdate.temperature.unit}
-                </p>
-              )}
-              
-              {selectedStageForUpdate.criticalControlPoint && (
-                <Badge className="bg-[var(--color-primary)]/10 text-[var(--color-primary)] mt-2">
-                  Punto Crítico de Control (PCC)
-                </Badge>
-              )}
-            </div>
-
-            {selectedStageForUpdate.requiresQualityCheck && (
-              <div className="bg-yellow-50 border border-yellow-200 p-3 rounded-lg">
-                <p className="text-sm text-yellow-800">
-                  ⚠️ Esta etapa requiere control de calidad antes de continuar
-                </p>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="mt-2"
-                  onClick={() => handleQualityCheck(selectedBatch, selectedStageForUpdate)}
-                >
-                  Realizar control de calidad
-                </Button>
-              </div>
-            )}
-
-            <div>
-              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-                Notas de la etapa
-              </label>
-              <Input
-                as="textarea"
-                rows={3}
-                placeholder="Añadir observaciones o notas sobre esta etapa..."
-                value={stageNotes[`${selectedBatch.id}-${selectedStageForUpdate.id}`] || ''}
-                onChange={(e) => setStageNotes(prev => ({
-                  ...prev,
-                  [`${selectedBatch.id}-${selectedStageForUpdate.id}`]: e.target.value,
-                }))}
-              />
-            </div>
-
-            <div className="flex justify-end gap-2 pt-4">
-              <Button
-                variant="outline"
-                onClick={() => setIsStageModalOpen(false)}
-              >
-                Cerrar
-              </Button>
-              
-              <Button
-                variant="primary"
-                onClick={() => {
-                  const notes = stageNotes[`${selectedBatch.id}-${selectedStageForUpdate.id}`];
-                  updateStage(selectedBatch.id, selectedStageForUpdate.id, notes);
-                  setIsStageModalOpen(false);
-                }}
-              >
-                Marcar como completado
-              </Button>
-            </div>
-          </div>
-        )}
-      </Modal>
-
-      {/* Quick Stats */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <Card className="p-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm text-[var(--text-secondary)]">Lotes activos</p>
-              <p className="text-2xl font-bold text-[var(--color-info)]">{batches.length}</p>
-            </div>
-            <span className="text-2xl">📊</span>
-          </div>
-        </Card>
-
-        <Card className="p-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm text-[var(--text-secondary)]">Alertas activas</p>
-              <p className="text-2xl font-bold text-[var(--color-error)]">{alerts.length}</p>
-            </div>
-            <span className="text-2xl">🚨</span>
-          </div>
-        </Card>
-
-        <Card className="p-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm text-[var(--text-secondary)]">En horneado</p>
-              <p className="text-2xl font-bold text-[var(--color-primary)]">3</p>
-            </div>
-            <span className="text-2xl">🔥</span>
-          </div>
-        </Card>
-
-        <Card className="p-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm text-[var(--text-secondary)]">Completados hoy</p>
-              <p className="text-2xl font-bold text-[var(--color-success)]">12</p>
-            </div>
-            <span className="text-2xl">✅</span>
-          </div>
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default BatchTracker;
\ No newline at end of file
diff --git a/frontend/src/components/domain/production/EquipmentManager.tsx b/frontend/src/components/domain/production/EquipmentManager.tsx
deleted file mode 100644
index d87e0136..00000000
--- a/frontend/src/components/domain/production/EquipmentManager.tsx
+++ /dev/null
@@ -1,632 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Card, CardHeader, CardBody } from '../../ui/Card';
-import { Button } from '../../ui/Button';
-import { Input } from '../../ui/Input';
-import { Badge } from '../../ui/Badge';
-import { Modal } from '../../ui/Modal';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../ui/Tabs';
-import { StatsGrid } from '../../ui/Stats';
-import {
-  Settings,
-  AlertTriangle,
-  CheckCircle,
-  Wrench,
-  Calendar,
-  Clock,
-  Thermometer,
-  Activity,
-  Zap,
-  TrendingUp,
-  Search,
-  Plus,
-  Filter,
-  Download,
-  BarChart3,
-  Bell,
-  MapPin,
-  User
-} from 'lucide-react';
-import { useCurrentTenant } from '../../../stores/tenant.store';
-
-export interface Equipment {
-  id: string;
-  name: string;
-  type: 'oven' | 'mixer' | 'proofer' | 'freezer' | 'packaging' | 'other';
-  model: string;
-  serialNumber: string;
-  location: string;
-  status: 'operational' | 'maintenance' | 'down' | 'warning';
-  installDate: string;
-  lastMaintenance: string;
-  nextMaintenance: string;
-  maintenanceInterval: number; // days
-  temperature?: number;
-  targetTemperature?: number;
-  efficiency: number;
-  uptime: number;
-  energyUsage: number;
-  utilizationToday: number;
-  alerts: Array<{
-    id: string;
-    type: 'warning' | 'critical' | 'info';
-    message: string;
-    timestamp: string;
-    acknowledged: boolean;
-  }>;
-  maintenanceHistory: Array<{
-    id: string;
-    date: string;
-    type: 'preventive' | 'corrective' | 'emergency';
-    description: string;
-    technician: string;
-    cost: number;
-    downtime: number; // hours
-    partsUsed: string[];
-  }>;
-  specifications: {
-    power: number; // kW
-    capacity: number;
-    dimensions: {
-      width: number;
-      height: number;
-      depth: number;
-    };
-    weight: number;
-  };
-}
-
-export interface EquipmentManagerProps {
-  className?: string;
-  equipment?: Equipment[];
-  onCreateEquipment?: () => void;
-  onEditEquipment?: (equipmentId: string) => void;
-  onScheduleMaintenance?: (equipmentId: string) => void;
-  onAcknowledgeAlert?: (equipmentId: string, alertId: string) => void;
-  onViewMaintenanceHistory?: (equipmentId: string) => void;
-}
-
-const MOCK_EQUIPMENT: Equipment[] = [
-  {
-    id: '1',
-    name: 'Horno Principal #1',
-    type: 'oven',
-    model: 'Miwe Condo CO 4.1212',
-    serialNumber: 'MCO-2021-001',
-    location: '�rea de Horneado - Zona A',
-    status: 'operational',
-    installDate: '2021-03-15',
-    lastMaintenance: '2024-01-15',
-    nextMaintenance: '2024-04-15',
-    maintenanceInterval: 90,
-    temperature: 220,
-    targetTemperature: 220,
-    efficiency: 92,
-    uptime: 98.5,
-    energyUsage: 45.2,
-    utilizationToday: 87,
-    alerts: [],
-    maintenanceHistory: [
-      {
-        id: '1',
-        date: '2024-01-15',
-        type: 'preventive',
-        description: 'Limpieza general y calibraci�n de termostatos',
-        technician: 'Juan P�rez',
-        cost: 150,
-        downtime: 2,
-        partsUsed: ['Filtros de aire', 'Sellos de puerta']
-      }
-    ],
-    specifications: {
-      power: 45,
-      capacity: 24,
-      dimensions: { width: 200, height: 180, depth: 120 },
-      weight: 850
-    }
-  },
-  {
-    id: '2',
-    name: 'Batidora Industrial #2',
-    type: 'mixer',
-    model: 'Hobart HL800',
-    serialNumber: 'HHL-2020-002',
-    location: '�rea de Preparaci�n - Zona B',
-    status: 'warning',
-    installDate: '2020-08-10',
-    lastMaintenance: '2024-01-20',
-    nextMaintenance: '2024-02-20',
-    maintenanceInterval: 30,
-    efficiency: 88,
-    uptime: 94.2,
-    energyUsage: 12.8,
-    utilizationToday: 76,
-    alerts: [
-      {
-        id: '1',
-        type: 'warning',
-        message: 'Vibraci�n inusual detectada en el motor',
-        timestamp: '2024-01-23T10:30:00Z',
-        acknowledged: false
-      },
-      {
-        id: '2',
-        type: 'info',
-        message: 'Mantenimiento programado en 5 d�as',
-        timestamp: '2024-01-23T08:00:00Z',
-        acknowledged: true
-      }
-    ],
-    maintenanceHistory: [
-      {
-        id: '1',
-        date: '2024-01-20',
-        type: 'corrective',
-        description: 'Reemplazo de correas de transmisi�n',
-        technician: 'Mar�a Gonz�lez',
-        cost: 85,
-        downtime: 4,
-        partsUsed: ['Correa tipo V', 'Rodamientos']
-      }
-    ],
-    specifications: {
-      power: 15,
-      capacity: 80,
-      dimensions: { width: 120, height: 150, depth: 80 },
-      weight: 320
-    }
-  },
-  {
-    id: '3',
-    name: 'C�mara de Fermentaci�n #1',
-    type: 'proofer',
-    model: 'Bongard EUROPA 16.18',
-    serialNumber: 'BEU-2022-001',
-    location: '�rea de Fermentaci�n',
-    status: 'maintenance',
-    installDate: '2022-06-20',
-    lastMaintenance: '2024-01-23',
-    nextMaintenance: '2024-01-24',
-    maintenanceInterval: 60,
-    temperature: 32,
-    targetTemperature: 35,
-    efficiency: 0,
-    uptime: 85.1,
-    energyUsage: 0,
-    utilizationToday: 0,
-    alerts: [
-      {
-        id: '1',
-        type: 'info',
-        message: 'En mantenimiento programado',
-        timestamp: '2024-01-23T06:00:00Z',
-        acknowledged: true
-      }
-    ],
-    maintenanceHistory: [
-      {
-        id: '1',
-        date: '2024-01-23',
-        type: 'preventive',
-        description: 'Mantenimiento programado - sistema de humidificaci�n',
-        technician: 'Carlos Rodr�guez',
-        cost: 200,
-        downtime: 8,
-        partsUsed: ['Sensor de humedad', 'V�lvulas']
-      }
-    ],
-    specifications: {
-      power: 8,
-      capacity: 16,
-      dimensions: { width: 180, height: 200, depth: 100 },
-      weight: 450
-    }
-  }
-];
-
-const EquipmentManager: React.FC<EquipmentManagerProps> = ({
-  className,
-  equipment = MOCK_EQUIPMENT,
-  onCreateEquipment,
-  onEditEquipment,
-  onScheduleMaintenance,
-  onAcknowledgeAlert,
-  onViewMaintenanceHistory
-}) => {
-  const { t } = useTranslation();
-  const [activeTab, setActiveTab] = useState('overview');
-  const [searchQuery, setSearchQuery] = useState('');
-  const [statusFilter, setStatusFilter] = useState<Equipment['status'] | 'all'>('all');
-  const [selectedEquipment, setSelectedEquipment] = useState<Equipment | null>(null);
-  const [showEquipmentModal, setShowEquipmentModal] = useState(false);
-
-  const filteredEquipment = useMemo(() => {
-    return equipment.filter(eq => {
-      const matchesSearch = !searchQuery ||
-        eq.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        eq.location.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        eq.type.toLowerCase().includes(searchQuery.toLowerCase());
-
-      const matchesStatus = statusFilter === 'all' || eq.status === statusFilter;
-
-      return matchesSearch && matchesStatus;
-    });
-  }, [equipment, searchQuery, statusFilter]);
-
-  const equipmentStats = useMemo(() => {
-    const total = equipment.length;
-    const operational = equipment.filter(e => e.status === 'operational').length;
-    const warning = equipment.filter(e => e.status === 'warning').length;
-    const maintenance = equipment.filter(e => e.status === 'maintenance').length;
-    const down = equipment.filter(e => e.status === 'down').length;
-    const avgEfficiency = equipment.reduce((sum, e) => sum + e.efficiency, 0) / total;
-    const avgUptime = equipment.reduce((sum, e) => sum + e.uptime, 0) / total;
-    const totalAlerts = equipment.reduce((sum, e) => sum + e.alerts.filter(a => !a.acknowledged).length, 0);
-
-    return {
-      total,
-      operational,
-      warning,
-      maintenance,
-      down,
-      avgEfficiency,
-      avgUptime,
-      totalAlerts
-    };
-  }, [equipment]);
-
-  const getStatusConfig = (status: Equipment['status']) => {
-    const configs = {
-      operational: { color: 'success' as const, icon: CheckCircle, label: t('equipment.status.operational', 'Operational') },
-      warning: { color: 'warning' as const, icon: AlertTriangle, label: t('equipment.status.warning', 'Warning') },
-      maintenance: { color: 'info' as const, icon: Wrench, label: t('equipment.status.maintenance', 'Maintenance') },
-      down: { color: 'error' as const, icon: AlertTriangle, label: t('equipment.status.down', 'Down') }
-    };
-    return configs[status];
-  };
-
-  const getTypeIcon = (type: Equipment['type']) => {
-    const icons = {
-      oven: Thermometer,
-      mixer: Activity,
-      proofer: Settings,
-      freezer: Zap,
-      packaging: Settings,
-      other: Settings
-    };
-    return icons[type];
-  };
-
-  const formatDateTime = (dateString: string) => {
-    return new Date(dateString).toLocaleDateString('es-ES', {
-      day: '2-digit',
-      month: '2-digit',
-      year: 'numeric'
-    });
-  };
-
-  const stats = [
-    {
-      title: t('equipment.stats.total', 'Total Equipment'),
-      value: equipmentStats.total,
-      icon: Settings,
-      variant: 'default' as const
-    },
-    {
-      title: t('equipment.stats.operational', 'Operational'),
-      value: equipmentStats.operational,
-      icon: CheckCircle,
-      variant: 'success' as const,
-      subtitle: `${((equipmentStats.operational / equipmentStats.total) * 100).toFixed(1)}%`
-    },
-    {
-      title: t('equipment.stats.avg_efficiency', 'Avg Efficiency'),
-      value: `${equipmentStats.avgEfficiency.toFixed(1)}%`,
-      icon: TrendingUp,
-      variant: equipmentStats.avgEfficiency >= 90 ? 'success' as const : 'warning' as const
-    },
-    {
-      title: t('equipment.stats.alerts', 'Active Alerts'),
-      value: equipmentStats.totalAlerts,
-      icon: Bell,
-      variant: equipmentStats.totalAlerts === 0 ? 'success' as const : 'error' as const
-    }
-  ];
-
-  return (
-    <Card className={className}>
-      <CardHeader>
-        <div className="flex items-center justify-between">
-          <div>
-            <h3 className="text-lg font-semibold text-[var(--text-primary)]">
-              {t('equipment.manager.title', 'Equipment Management')}
-            </h3>
-            <p className="text-sm text-[var(--text-secondary)]">
-              {t('equipment.manager.subtitle', 'Monitor and manage production equipment')}
-            </p>
-          </div>
-          <div className="flex space-x-2">
-            <Button variant="outline" size="sm">
-              <Download className="w-4 h-4 mr-2" />
-              {t('equipment.actions.export', 'Export')}
-            </Button>
-            <Button variant="primary" size="sm" onClick={onCreateEquipment}>
-              <Plus className="w-4 h-4 mr-2" />
-              {t('equipment.actions.add', 'Add Equipment')}
-            </Button>
-          </div>
-        </div>
-      </CardHeader>
-
-      <CardBody className="space-y-6">
-        {/* Stats */}
-        <StatsGrid stats={stats} columns={4} gap="md" />
-
-        {/* Filters */}
-        <div className="flex flex-col sm:flex-row gap-4">
-          <div className="flex-1">
-            <div className="relative">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-[var(--text-tertiary)]" />
-              <Input
-                placeholder={t('equipment.search.placeholder', 'Search equipment...')}
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-10"
-              />
-            </div>
-          </div>
-          <div className="flex items-center space-x-2">
-            <Filter className="w-4 h-4 text-[var(--text-tertiary)]" />
-            <select
-              value={statusFilter}
-              onChange={(e) => setStatusFilter(e.target.value as Equipment['status'] | 'all')}
-              className="px-3 py-2 border border-[var(--border-primary)] rounded-md bg-[var(--bg-primary)] text-[var(--text-primary)]"
-            >
-              <option value="all">{t('equipment.filter.all', 'All Status')}</option>
-              <option value="operational">{t('equipment.status.operational', 'Operational')}</option>
-              <option value="warning">{t('equipment.status.warning', 'Warning')}</option>
-              <option value="maintenance">{t('equipment.status.maintenance', 'Maintenance')}</option>
-              <option value="down">{t('equipment.status.down', 'Down')}</option>
-            </select>
-          </div>
-        </div>
-
-        {/* Equipment List */}
-        <Tabs value={activeTab} onValueChange={setActiveTab}>
-          <TabsList className="grid w-full grid-cols-3">
-            <TabsTrigger value="overview">
-              {t('equipment.tabs.overview', 'Overview')}
-            </TabsTrigger>
-            <TabsTrigger value="maintenance">
-              {t('equipment.tabs.maintenance', 'Maintenance')}
-            </TabsTrigger>
-            <TabsTrigger value="alerts">
-              {t('equipment.tabs.alerts', 'Alerts')}
-            </TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="overview" className="space-y-4">
-            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-              {filteredEquipment.map((eq) => {
-                const statusConfig = getStatusConfig(eq.status);
-                const TypeIcon = getTypeIcon(eq.type);
-                const StatusIcon = statusConfig.icon;
-
-                return (
-                  <div
-                    key={eq.id}
-                    className="p-4 bg-[var(--bg-secondary)] rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors cursor-pointer"
-                    onClick={() => {
-                      setSelectedEquipment(eq);
-                      setShowEquipmentModal(true);
-                    }}
-                  >
-                    <div className="flex items-center justify-between mb-3">
-                      <div className="flex items-center space-x-2">
-                        <TypeIcon className="w-5 h-5 text-[var(--color-primary)]" />
-                        <h4 className="font-semibold text-[var(--text-primary)]">{eq.name}</h4>
-                      </div>
-                      <Badge variant={statusConfig.color}>
-                        {statusConfig.label}
-                      </Badge>
-                    </div>
-
-                    <div className="space-y-2 text-sm">
-                      <div className="flex items-center justify-between">
-                        <span className="text-[var(--text-secondary)]">{t('equipment.efficiency', 'Efficiency')}:</span>
-                        <span className="font-medium">{eq.efficiency}%</span>
-                      </div>
-                      <div className="flex items-center justify-between">
-                        <span className="text-[var(--text-secondary)]">{t('equipment.uptime', 'Uptime')}:</span>
-                        <span className="font-medium">{eq.uptime.toFixed(1)}%</span>
-                      </div>
-                      <div className="flex items-center justify-between">
-                        <span className="text-[var(--text-secondary)]">{t('equipment.location', 'Location')}:</span>
-                        <span className="font-medium text-xs">{eq.location}</span>
-                      </div>
-                      {eq.temperature && (
-                        <div className="flex items-center justify-between">
-                          <span className="text-[var(--text-secondary)]">{t('equipment.temperature', 'Temperature')}:</span>
-                          <span className="font-medium">{eq.temperature}�C</span>
-                        </div>
-                      )}
-                    </div>
-
-                    {eq.alerts.filter(a => !a.acknowledged).length > 0 && (
-                      <div className="mt-3 p-2 bg-orange-50 dark:bg-orange-900/20 rounded border-l-2 border-orange-500">
-                        <div className="flex items-center space-x-2">
-                          <AlertTriangle className="w-4 h-4 text-orange-500" />
-                          <span className="text-sm font-medium text-orange-700 dark:text-orange-300">
-                            {eq.alerts.filter(a => !a.acknowledged).length} {t('equipment.unread_alerts', 'unread alerts')}
-                          </span>
-                        </div>
-                      </div>
-                    )}
-
-                    <div className="flex justify-between mt-4 pt-3 border-t border-[var(--border-primary)]">
-                      <Button
-                        variant="outline"
-                        size="xs"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          onEditEquipment?.(eq.id);
-                        }}
-                      >
-                        {t('common.edit', 'Edit')}
-                      </Button>
-                      <Button
-                        variant="primary"
-                        size="xs"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          onScheduleMaintenance?.(eq.id);
-                        }}
-                      >
-                        {t('equipment.actions.maintenance', 'Maintenance')}
-                      </Button>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </TabsContent>
-
-          <TabsContent value="maintenance" className="space-y-4">
-            {equipment.map((eq) => (
-              <div key={eq.id} className="p-4 bg-[var(--bg-secondary)] rounded-lg">
-                <div className="flex items-center justify-between mb-3">
-                  <h4 className="font-semibold text-[var(--text-primary)]">{eq.name}</h4>
-                  <Badge variant={new Date(eq.nextMaintenance) <= new Date() ? 'error' : 'success'}>
-                    {new Date(eq.nextMaintenance) <= new Date() ? t('equipment.maintenance.overdue', 'Overdue') : t('equipment.maintenance.scheduled', 'Scheduled')}
-                  </Badge>
-                </div>
-                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
-                  <div>
-                    <span className="text-[var(--text-secondary)]">{t('equipment.maintenance.last', 'Last')}:</span>
-                    <div className="font-medium">{formatDateTime(eq.lastMaintenance)}</div>
-                  </div>
-                  <div>
-                    <span className="text-[var(--text-secondary)]">{t('equipment.maintenance.next', 'Next')}:</span>
-                    <div className="font-medium">{formatDateTime(eq.nextMaintenance)}</div>
-                  </div>
-                  <div>
-                    <span className="text-[var(--text-secondary)]">{t('equipment.maintenance.interval', 'Interval')}:</span>
-                    <div className="font-medium">{eq.maintenanceInterval} {t('common.days', 'days')}</div>
-                  </div>
-                  <div>
-                    <span className="text-[var(--text-secondary)]">{t('equipment.maintenance.history', 'History')}:</span>
-                    <div className="font-medium">{eq.maintenanceHistory.length} {t('equipment.maintenance.records', 'records')}</div>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </TabsContent>
-
-          <TabsContent value="alerts" className="space-y-4">
-            {equipment.flatMap(eq =>
-              eq.alerts.map(alert => (
-                <div key={`${eq.id}-${alert.id}`} className={`p-4 rounded-lg border-l-4 ${
-                  alert.type === 'critical' ? 'bg-red-50 border-red-500 dark:bg-red-900/20' :
-                  alert.type === 'warning' ? 'bg-orange-50 border-orange-500 dark:bg-orange-900/20' :
-                  'bg-blue-50 border-blue-500 dark:bg-blue-900/20'
-                }`}>
-                  <div className="flex items-center justify-between mb-2">
-                    <div className="flex items-center space-x-2">
-                      <AlertTriangle className={`w-5 h-5 ${
-                        alert.type === 'critical' ? 'text-red-500' :
-                        alert.type === 'warning' ? 'text-orange-500' : 'text-blue-500'
-                      }`} />
-                      <h4 className="font-semibold text-[var(--text-primary)]">{eq.name}</h4>
-                      <Badge variant={alert.acknowledged ? 'success' : 'warning'}>
-                        {alert.acknowledged ? t('equipment.alerts.acknowledged', 'Acknowledged') : t('equipment.alerts.new', 'New')}
-                      </Badge>
-                    </div>
-                    <span className="text-sm text-[var(--text-secondary)]">
-                      {new Date(alert.timestamp).toLocaleString('es-ES')}
-                    </span>
-                  </div>
-                  <p className="text-[var(--text-secondary)] mb-3">{alert.message}</p>
-                  {!alert.acknowledged && (
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => onAcknowledgeAlert?.(eq.id, alert.id)}
-                    >
-                      {t('equipment.alerts.acknowledge', 'Acknowledge')}
-                    </Button>
-                  )}
-                </div>
-              ))
-            )}
-          </TabsContent>
-        </Tabs>
-
-        {/* Equipment Details Modal */}
-        {selectedEquipment && (
-          <Modal
-            isOpen={showEquipmentModal}
-            onClose={() => {
-              setShowEquipmentModal(false);
-              setSelectedEquipment(null);
-            }}
-            title={selectedEquipment.name}
-            size="lg"
-          >
-            <div className="p-6 space-y-6">
-              {/* Basic Info */}
-              <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <label className="text-sm font-medium text-[var(--text-secondary)]">{t('equipment.model', 'Model')}</label>
-                  <p className="text-[var(--text-primary)]">{selectedEquipment.model}</p>
-                </div>
-                <div>
-                  <label className="text-sm font-medium text-[var(--text-secondary)]">{t('equipment.serial', 'Serial Number')}</label>
-                  <p className="text-[var(--text-primary)]">{selectedEquipment.serialNumber}</p>
-                </div>
-                <div>
-                  <label className="text-sm font-medium text-[var(--text-secondary)]">{t('equipment.location', 'Location')}</label>
-                  <p className="text-[var(--text-primary)]">{selectedEquipment.location}</p>
-                </div>
-                <div>
-                  <label className="text-sm font-medium text-[var(--text-secondary)]">{t('equipment.install_date', 'Install Date')}</label>
-                  <p className="text-[var(--text-primary)]">{formatDateTime(selectedEquipment.installDate)}</p>
-                </div>
-              </div>
-
-              {/* Current Status */}
-              <div className="grid grid-cols-3 gap-4 p-4 bg-[var(--bg-secondary)] rounded-lg">
-                <div className="text-center">
-                  <div className="text-2xl font-bold text-[var(--text-primary)]">{selectedEquipment.efficiency}%</div>
-                  <div className="text-sm text-[var(--text-secondary)]">{t('equipment.efficiency', 'Efficiency')}</div>
-                </div>
-                <div className="text-center">
-                  <div className="text-2xl font-bold text-[var(--text-primary)]">{selectedEquipment.uptime.toFixed(1)}%</div>
-                  <div className="text-sm text-[var(--text-secondary)]">{t('equipment.uptime', 'Uptime')}</div>
-                </div>
-                <div className="text-center">
-                  <div className="text-2xl font-bold text-[var(--text-primary)]">{selectedEquipment.energyUsage} kW</div>
-                  <div className="text-sm text-[var(--text-secondary)]">{t('equipment.energy_usage', 'Energy Usage')}</div>
-                </div>
-              </div>
-
-              {/* Actions */}
-              <div className="flex justify-end space-x-3">
-                <Button variant="outline" onClick={() => onViewMaintenanceHistory?.(selectedEquipment.id)}>
-                  {t('equipment.actions.view_history', 'View History')}
-                </Button>
-                <Button variant="secondary" onClick={() => onEditEquipment?.(selectedEquipment.id)}>
-                  {t('common.edit', 'Edit')}
-                </Button>
-                <Button variant="primary" onClick={() => onScheduleMaintenance?.(selectedEquipment.id)}>
-                  {t('equipment.actions.schedule_maintenance', 'Schedule Maintenance')}
-                </Button>
-              </div>
-            </div>
-          </Modal>
-        )}
-      </CardBody>
-    </Card>
-  );
-};
-
-export default EquipmentManager;
\ No newline at end of file
diff --git a/frontend/src/components/domain/production/ProcessStageTracker.tsx b/frontend/src/components/domain/production/ProcessStageTracker.tsx
deleted file mode 100644
index 0ec3b9a3..00000000
--- a/frontend/src/components/domain/production/ProcessStageTracker.tsx
+++ /dev/null
@@ -1,377 +0,0 @@
-import React from 'react';
-import {
-  CheckCircle,
-  Clock,
-  AlertTriangle,
-  Play,
-  Pause,
-  ArrowRight,
-  Settings,
-  Thermometer,
-  Scale,
-  Eye
-} from 'lucide-react';
-import { Button, Badge, Card, ProgressBar } from '../../ui';
-import { ProcessStage } from '../../../api/types/qualityTemplates';
-import type { ProductionBatchResponse } from '../../../api/types/production';
-
-interface ProcessStageTrackerProps {
-  batch: ProductionBatchResponse;
-  onStageAdvance?: (stage: ProcessStage) => void;
-  onQualityCheck?: (stage: ProcessStage) => void;
-  onStageStart?: (stage: ProcessStage) => void;
-  onStagePause?: (stage: ProcessStage) => void;
-  className?: string;
-}
-
-const PROCESS_STAGES_ORDER: ProcessStage[] = [
-  ProcessStage.MIXING,
-  ProcessStage.PROOFING,
-  ProcessStage.SHAPING,
-  ProcessStage.BAKING,
-  ProcessStage.COOLING,
-  ProcessStage.PACKAGING,
-  ProcessStage.FINISHING
-];
-
-const STAGE_CONFIG = {
-  [ProcessStage.MIXING]: {
-    label: 'Mezclado',
-    icon: Settings,
-    color: 'bg-blue-500',
-    description: 'Preparación y mezclado de ingredientes'
-  },
-  [ProcessStage.PROOFING]: {
-    label: 'Fermentación',
-    icon: Clock,
-    color: 'bg-yellow-500',
-    description: 'Proceso de fermentación y crecimiento'
-  },
-  [ProcessStage.SHAPING]: {
-    label: 'Formado',
-    icon: Settings,
-    color: 'bg-purple-500',
-    description: 'Dar forma al producto'
-  },
-  [ProcessStage.BAKING]: {
-    label: 'Horneado',
-    icon: Thermometer,
-    color: 'bg-red-500',
-    description: 'Cocción en horno'
-  },
-  [ProcessStage.COOLING]: {
-    label: 'Enfriado',
-    icon: Settings,
-    color: 'bg-cyan-500',
-    description: 'Enfriamiento del producto'
-  },
-  [ProcessStage.PACKAGING]: {
-    label: 'Empaquetado',
-    icon: Settings,
-    color: 'bg-green-500',
-    description: 'Empaque del producto terminado'
-  },
-  [ProcessStage.FINISHING]: {
-    label: 'Acabado',
-    icon: CheckCircle,
-    color: 'bg-indigo-500',
-    description: 'Toques finales y control final'
-  }
-};
-
-export const ProcessStageTracker: React.FC<ProcessStageTrackerProps> = ({
-  batch,
-  onStageAdvance,
-  onQualityCheck,
-  onStageStart,
-  onStagePause,
-  className = ''
-}) => {
-  const currentStage = batch.current_process_stage;
-  const stageHistory = batch.process_stage_history || {};
-  const pendingQualityChecks = batch.pending_quality_checks || {};
-  const completedQualityChecks = batch.completed_quality_checks || {};
-
-  const getCurrentStageIndex = () => {
-    if (!currentStage) return -1;
-    return PROCESS_STAGES_ORDER.indexOf(currentStage);
-  };
-
-  const isStageCompleted = (stage: ProcessStage): boolean => {
-    const stageIndex = PROCESS_STAGES_ORDER.indexOf(stage);
-    const currentIndex = getCurrentStageIndex();
-    return stageIndex < currentIndex || (stageIndex === currentIndex && batch.status === 'COMPLETED');
-  };
-
-  const isStageActive = (stage: ProcessStage): boolean => {
-    return currentStage === stage && batch.status === 'IN_PROGRESS';
-  };
-
-  const isStageUpcoming = (stage: ProcessStage): boolean => {
-    const stageIndex = PROCESS_STAGES_ORDER.indexOf(stage);
-    const currentIndex = getCurrentStageIndex();
-    return stageIndex > currentIndex;
-  };
-
-  const hasQualityChecksRequired = (stage: ProcessStage): boolean => {
-    return pendingQualityChecks[stage]?.length > 0;
-  };
-
-  const hasQualityChecksCompleted = (stage: ProcessStage): boolean => {
-    return completedQualityChecks[stage]?.length > 0;
-  };
-
-  const getStageProgress = (stage: ProcessStage): number => {
-    if (isStageCompleted(stage)) return 100;
-    if (isStageActive(stage)) {
-      // Calculate progress based on time elapsed vs estimated duration
-      const stageStartTime = stageHistory[stage]?.start_time;
-      if (stageStartTime) {
-        const elapsed = Date.now() - new Date(stageStartTime).getTime();
-        const estimated = 30 * 60 * 1000; // Default 30 minutes per stage
-        return Math.min(100, (elapsed / estimated) * 100);
-      }
-    }
-    return 0;
-  };
-
-  const getStageStatus = (stage: ProcessStage) => {
-    if (isStageCompleted(stage)) {
-      return hasQualityChecksCompleted(stage)
-        ? { status: 'completed', icon: CheckCircle, color: 'text-green-500' }
-        : { status: 'completed-no-quality', icon: CheckCircle, color: 'text-yellow-500' };
-    }
-
-    if (isStageActive(stage)) {
-      return hasQualityChecksRequired(stage)
-        ? { status: 'active-quality-pending', icon: AlertTriangle, color: 'text-orange-500' }
-        : { status: 'active', icon: Play, color: 'text-blue-500' };
-    }
-
-    if (isStageUpcoming(stage)) {
-      return { status: 'upcoming', icon: Clock, color: 'text-gray-400' };
-    }
-
-    return { status: 'pending', icon: Clock, color: 'text-gray-400' };
-  };
-
-  const getOverallProgress = (): number => {
-    const currentIndex = getCurrentStageIndex();
-    if (currentIndex === -1) return 0;
-
-    const stageProgress = getStageProgress(currentStage!);
-    return ((currentIndex + stageProgress / 100) / PROCESS_STAGES_ORDER.length) * 100;
-  };
-
-  return (
-    <Card className={`p-6 ${className}`}>
-      <div className="space-y-6">
-        {/* Header */}
-        <div className="flex items-center justify-between">
-          <div>
-            <h3 className="text-lg font-semibold text-[var(--text-primary)]">
-              Etapas del Proceso
-            </h3>
-            <p className="text-sm text-[var(--text-secondary)] mt-1">
-              {batch.product_name} • Lote #{batch.batch_number}
-            </p>
-          </div>
-          <div className="text-right">
-            <div className="text-2xl font-bold text-[var(--text-primary)]">
-              {Math.round(getOverallProgress())}%
-            </div>
-            <div className="text-sm text-[var(--text-secondary)]">
-              Completado
-            </div>
-          </div>
-        </div>
-
-        {/* Overall Progress Bar */}
-        <ProgressBar
-          percentage={getOverallProgress()}
-          color="#f59e0b"
-          height={8}
-          showLabel={false}
-        />
-
-        {/* Stage Timeline */}
-        <div className="space-y-4">
-          {PROCESS_STAGES_ORDER.map((stage, index) => {
-            const config = STAGE_CONFIG[stage];
-            const status = getStageStatus(stage);
-            const progress = getStageProgress(stage);
-            const StageIcon = config.icon;
-            const StatusIcon = status.icon;
-
-            return (
-              <div key={stage} className="relative">
-                {/* Connection Line */}
-                {index < PROCESS_STAGES_ORDER.length - 1 && (
-                  <div
-                    className={`absolute left-6 top-12 w-0.5 h-8 ${
-                      isStageCompleted(stage) ? 'bg-green-500' : 'bg-gray-200'
-                    }`}
-                  />
-                )}
-
-                <div className="flex items-start gap-4">
-                  {/* Stage Icon */}
-                  <div
-                    className={`relative flex items-center justify-center w-12 h-12 rounded-full border-2 ${
-                      isStageCompleted(stage)
-                        ? 'bg-green-500 border-green-500 text-white'
-                        : isStageActive(stage)
-                        ? 'bg-blue-500 border-blue-500 text-white'
-                        : 'bg-white border-gray-300 text-gray-400'
-                    }`}
-                  >
-                    <StageIcon className="w-5 h-5" />
-
-                    {/* Status Indicator */}
-                    <div className="absolute -bottom-1 -right-1">
-                      <StatusIcon className={`w-4 h-4 ${status.color}`} />
-                    </div>
-                  </div>
-
-                  {/* Stage Content */}
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center justify-between">
-                      <div>
-                        <h4 className="font-medium text-[var(--text-primary)]">
-                          {config.label}
-                        </h4>
-                        <p className="text-sm text-[var(--text-secondary)]">
-                          {config.description}
-                        </p>
-                      </div>
-
-                      {/* Stage Actions */}
-                      <div className="flex items-center gap-2">
-                        {/* Quality Check Indicators */}
-                        {hasQualityChecksRequired(stage) && (
-                          <Badge variant="warning" size="sm">
-                            Control pendiente
-                          </Badge>
-                        )}
-
-                        {hasQualityChecksCompleted(stage) && (
-                          <Badge variant="success" size="sm">
-                            ✓ Calidad
-                          </Badge>
-                        )}
-
-                        {/* Action Buttons */}
-                        {isStageActive(stage) && (
-                          <div className="flex gap-1">
-                            {hasQualityChecksRequired(stage) && (
-                              <Button
-                                size="sm"
-                                variant="outline"
-                                onClick={() => onQualityCheck?.(stage)}
-                              >
-                                <Eye className="w-4 h-4 mr-1" />
-                                Control
-                              </Button>
-                            )}
-
-                            <Button
-                              size="sm"
-                              variant="primary"
-                              onClick={() => onStageAdvance?.(stage)}
-                              disabled={hasQualityChecksRequired(stage)}
-                            >
-                              <ArrowRight className="w-4 h-4" />
-                            </Button>
-                          </div>
-                        )}
-
-                        {getCurrentStageIndex() === index - 1 && (
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            onClick={() => onStageStart?.(stage)}
-                          >
-                            <Play className="w-4 h-4 mr-1" />
-                            Iniciar
-                          </Button>
-                        )}
-                      </div>
-                    </div>
-
-                    {/* Stage Progress */}
-                    {isStageActive(stage) && progress > 0 && (
-                      <div className="mt-2">
-                        <ProgressBar
-                          percentage={progress}
-                          color="#3b82f6"
-                          height={4}
-                          showLabel={false}
-                        />
-                        <p className="text-xs text-[var(--text-tertiary)] mt-1">
-                          Progreso de la etapa: {Math.round(progress)}%
-                        </p>
-                      </div>
-                    )}
-
-                    {/* Stage Details */}
-                    {(isStageActive(stage) || isStageCompleted(stage)) && (
-                      <div className="mt-3 text-xs text-[var(--text-secondary)] space-y-1">
-                        {stageHistory[stage]?.start_time && (
-                          <div>
-                            Inicio: {new Date(stageHistory[stage].start_time).toLocaleTimeString('es-ES')}
-                          </div>
-                        )}
-                        {stageHistory[stage]?.end_time && (
-                          <div>
-                            Fin: {new Date(stageHistory[stage].end_time).toLocaleTimeString('es-ES')}
-                          </div>
-                        )}
-                        {completedQualityChecks[stage]?.length > 0 && (
-                          <div>
-                            Controles completados: {completedQualityChecks[stage].length}
-                          </div>
-                        )}
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-
-        {/* Stage Summary */}
-        <div className="bg-[var(--bg-secondary)] rounded-lg p-4">
-          <div className="grid grid-cols-3 gap-4 text-center">
-            <div>
-              <div className="text-lg font-semibold text-green-500">
-                {PROCESS_STAGES_ORDER.filter(s => isStageCompleted(s)).length}
-              </div>
-              <div className="text-xs text-[var(--text-secondary)]">
-                Completadas
-              </div>
-            </div>
-            <div>
-              <div className="text-lg font-semibold text-blue-500">
-                {currentStage ? 1 : 0}
-              </div>
-              <div className="text-xs text-[var(--text-secondary)]">
-                En Proceso
-              </div>
-            </div>
-            <div>
-              <div className="text-lg font-semibold text-gray-400">
-                {PROCESS_STAGES_ORDER.filter(s => isStageUpcoming(s)).length}
-              </div>
-              <div className="text-xs text-[var(--text-secondary)]">
-                Pendientes
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Card>
-  );
-};
-
-export default ProcessStageTracker;
\ No newline at end of file
diff --git a/frontend/src/components/domain/production/QualityControl.tsx b/frontend/src/components/domain/production/QualityControl.tsx
deleted file mode 100644
index ac908ae4..00000000
--- a/frontend/src/components/domain/production/QualityControl.tsx
+++ /dev/null
@@ -1,882 +0,0 @@
-import React, { useState, useCallback, useRef } from 'react';
-import { Card, Button, Badge, Input, Modal, Table, Select, DatePicker } from '../../ui';
-import { productionService, type QualityCheckResponse, QualityCheckStatus } from '../../../api';
-import type { QualityCheck, QualityCheckCriteria, ProductionBatch, QualityCheckType } from '../../../types/production.types';
-
-interface QualityControlProps {
-  className?: string;
-  batchId?: string;
-  checkType?: QualityCheckType;
-  onQualityCheckCompleted?: (result: QualityCheck) => void;
-  onCorrectiveActionRequired?: (check: QualityCheck, actions: string[]) => void;
-}
-
-interface QualityCheckTemplate {
-  id: string;
-  name: string;
-  spanishName: string;
-  productTypes: string[];
-  criteria: QualityChecklistItem[];
-  requiresPhotos: boolean;
-  passThreshold: number;
-  criticalPoints: string[];
-}
-
-interface QualityChecklistItem {
-  id: string;
-  category: string;
-  description: string;
-  spanishDescription: string;
-  type: 'boolean' | 'numeric' | 'scale' | 'text';
-  required: boolean;
-  minValue?: number;
-  maxValue?: number;
-  unit?: string;
-  acceptableCriteria?: string;
-  weight: number;
-  isCritical: boolean;
-}
-
-interface QualityInspectionResult {
-  checklistId: string;
-  value: string | number | boolean;
-  notes?: string;
-  photo?: File;
-  timestamp: string;
-  inspector: string;
-}
-
-const QUALITY_CHECK_TEMPLATES: Record<string, QualityCheckTemplate> = {
-  visual_inspection: {
-    id: 'visual_inspection',
-    name: 'Visual Inspection',
-    spanishName: 'Inspección Visual',
-    productTypes: ['pan', 'bolleria', 'reposteria'],
-    requiresPhotos: true,
-    passThreshold: 80,
-    criticalPoints: ['color_defects', 'structural_defects'],
-    criteria: [
-      {
-        id: 'color_uniformity',
-        category: 'appearance',
-        description: 'Color uniformity',
-        spanishDescription: 'Uniformidad del color',
-        type: 'scale',
-        required: true,
-        minValue: 1,
-        maxValue: 5,
-        acceptableCriteria: 'Score 3 or higher',
-        weight: 20,
-        isCritical: false,
-      },
-      {
-        id: 'surface_texture',
-        category: 'appearance',
-        description: 'Surface texture quality',
-        spanishDescription: 'Calidad de la textura superficial',
-        type: 'scale',
-        required: true,
-        minValue: 1,
-        maxValue: 5,
-        acceptableCriteria: 'Score 3 or higher',
-        weight: 15,
-        isCritical: false,
-      },
-      {
-        id: 'shape_integrity',
-        category: 'structure',
-        description: 'Shape and form integrity',
-        spanishDescription: 'Integridad de forma y estructura',
-        type: 'boolean',
-        required: true,
-        acceptableCriteria: 'Must be true',
-        weight: 25,
-        isCritical: true,
-      },
-      {
-        id: 'size_consistency',
-        category: 'dimensions',
-        description: 'Size consistency within batch',
-        spanishDescription: 'Consistencia de tamaño en el lote',
-        type: 'scale',
-        required: true,
-        minValue: 1,
-        maxValue: 5,
-        acceptableCriteria: 'Score 3 or higher',
-        weight: 20,
-        isCritical: false,
-      },
-      {
-        id: 'defects_presence',
-        category: 'defects',
-        description: 'Visible defects or imperfections',
-        spanishDescription: 'Defectos visibles o imperfecciones',
-        type: 'boolean',
-        required: true,
-        acceptableCriteria: 'Must be false',
-        weight: 20,
-        isCritical: true,
-      },
-    ],
-  },
-  weight_check: {
-    id: 'weight_check',
-    name: 'Weight Check',
-    spanishName: 'Control de Peso',
-    productTypes: ['pan', 'bolleria', 'reposteria'],
-    requiresPhotos: false,
-    passThreshold: 95,
-    criticalPoints: ['weight_variance'],
-    criteria: [
-      {
-        id: 'individual_weight',
-        category: 'weight',
-        description: 'Individual piece weight',
-        spanishDescription: 'Peso individual de la pieza',
-        type: 'numeric',
-        required: true,
-        minValue: 0,
-        unit: 'g',
-        acceptableCriteria: 'Within ±5% of target',
-        weight: 40,
-        isCritical: true,
-      },
-      {
-        id: 'batch_average_weight',
-        category: 'weight',
-        description: 'Batch average weight',
-        spanishDescription: 'Peso promedio del lote',
-        type: 'numeric',
-        required: true,
-        minValue: 0,
-        unit: 'g',
-        acceptableCriteria: 'Within ±3% of target',
-        weight: 30,
-        isCritical: true,
-      },
-      {
-        id: 'weight_variance',
-        category: 'consistency',
-        description: 'Weight variance within batch',
-        spanishDescription: 'Variación de peso dentro del lote',
-        type: 'numeric',
-        required: true,
-        minValue: 0,
-        unit: '%',
-        acceptableCriteria: 'Less than 5%',
-        weight: 30,
-        isCritical: true,
-      },
-    ],
-  },
-  temperature_check: {
-    id: 'temperature_check',
-    name: 'Temperature Check',
-    spanishName: 'Control de Temperatura',
-    productTypes: ['pan', 'bolleria'],
-    requiresPhotos: false,
-    passThreshold: 90,
-    criticalPoints: ['core_temperature'],
-    criteria: [
-      {
-        id: 'core_temperature',
-        category: 'temperature',
-        description: 'Core temperature',
-        spanishDescription: 'Temperatura del núcleo',
-        type: 'numeric',
-        required: true,
-        minValue: 85,
-        maxValue: 98,
-        unit: '°C',
-        acceptableCriteria: '88-95°C',
-        weight: 60,
-        isCritical: true,
-      },
-      {
-        id: 'cooling_temperature',
-        category: 'temperature',
-        description: 'Cooling temperature',
-        spanishDescription: 'Temperatura de enfriado',
-        type: 'numeric',
-        required: false,
-        minValue: 18,
-        maxValue: 25,
-        unit: '°C',
-        acceptableCriteria: '20-23°C',
-        weight: 40,
-        isCritical: false,
-      },
-    ],
-  },
-  packaging_quality: {
-    id: 'packaging_quality',
-    name: 'Packaging Quality',
-    spanishName: 'Calidad del Empaquetado',
-    productTypes: ['pan', 'bolleria', 'reposteria'],
-    requiresPhotos: true,
-    passThreshold: 85,
-    criticalPoints: ['seal_integrity', 'labeling_accuracy'],
-    criteria: [
-      {
-        id: 'seal_integrity',
-        category: 'packaging',
-        description: 'Package seal integrity',
-        spanishDescription: 'Integridad del sellado del envase',
-        type: 'boolean',
-        required: true,
-        acceptableCriteria: 'Must be true',
-        weight: 30,
-        isCritical: true,
-      },
-      {
-        id: 'labeling_accuracy',
-        category: 'labeling',
-        description: 'Label accuracy and placement',
-        spanishDescription: 'Precisión y colocación de etiquetas',
-        type: 'scale',
-        required: true,
-        minValue: 1,
-        maxValue: 5,
-        acceptableCriteria: 'Score 4 or higher',
-        weight: 25,
-        isCritical: true,
-      },
-      {
-        id: 'package_appearance',
-        category: 'appearance',
-        description: 'Overall package appearance',
-        spanishDescription: 'Apariencia general del envase',
-        type: 'scale',
-        required: true,
-        minValue: 1,
-        maxValue: 5,
-        acceptableCriteria: 'Score 3 or higher',
-        weight: 20,
-        isCritical: false,
-      },
-      {
-        id: 'barcode_readability',
-        category: 'labeling',
-        description: 'Barcode readability',
-        spanishDescription: 'Legibilidad del código de barras',
-        type: 'boolean',
-        required: true,
-        acceptableCriteria: 'Must be true',
-        weight: 25,
-        isCritical: false,
-      },
-    ],
-  },
-};
-
-const STATUS_COLORS = {
-  [QualityCheckStatus.SCHEDULED]: 'bg-[var(--color-info)]/10 text-[var(--color-info)]',
-  [QualityCheckStatus.IN_PROGRESS]: 'bg-yellow-100 text-yellow-800',
-  [QualityCheckStatus.PASSED]: 'bg-[var(--color-success)]/10 text-[var(--color-success)]',
-  [QualityCheckStatus.FAILED]: 'bg-[var(--color-error)]/10 text-[var(--color-error)]',
-  [QualityCheckStatus.REQUIRES_REVIEW]: 'bg-[var(--color-primary)]/10 text-[var(--color-primary)]',
-  [QualityCheckStatus.CANCELLED]: 'bg-[var(--bg-tertiary)] text-[var(--text-primary)]',
-};
-
-export const QualityControl: React.FC<QualityControlProps> = ({
-  className = '',
-  batchId,
-  checkType,
-  onQualityCheckCompleted,
-  onCorrectiveActionRequired,
-}) => {
-  const [qualityChecks, setQualityChecks] = useState<QualityCheckResponse[]>([]);
-  const [selectedTemplate, setSelectedTemplate] = useState<QualityCheckTemplate | null>(null);
-  const [activeCheck, setActiveCheck] = useState<QualityCheck | null>(null);
-  const [inspectionResults, setInspectionResults] = useState<Record<string, QualityInspectionResult>>({});
-  const [loading, setLoading] = useState(false);
-  const [isInspectionModalOpen, setIsInspectionModalOpen] = useState(false);
-  const [uploadedPhotos, setUploadedPhotos] = useState<Record<string, File>>({});
-  const [currentInspector, setCurrentInspector] = useState<string>('inspector-1');
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  const loadQualityChecks = useCallback(async () => {
-    setLoading(true);
-    try {
-      const params: any = {};
-      if (batchId) params.batch_id = batchId;
-      if (checkType) params.check_type = checkType;
-
-      const response = await productionService.getQualityChecks(params);
-      
-      if (response.success && response.data) {
-        setQualityChecks(response.data.items || []);
-      }
-    } catch (error) {
-      console.error('Error loading quality checks:', error);
-    } finally {
-      setLoading(false);
-    }
-  }, [batchId, checkType]);
-
-  const startQualityCheck = (template: QualityCheckTemplate, batch?: any) => {
-    setSelectedTemplate(template);
-    setInspectionResults({});
-    setUploadedPhotos({});
-    setIsInspectionModalOpen(true);
-
-    // Initialize empty results for all criteria
-    template.criteria.forEach(criterion => {
-      setInspectionResults(prev => ({
-        ...prev,
-        [criterion.id]: {
-          checklistId: criterion.id,
-          value: criterion.type === 'boolean' ? false : criterion.type === 'numeric' ? 0 : '',
-          timestamp: new Date().toISOString(),
-          inspector: currentInspector,
-        }
-      }));
-    });
-  };
-
-  const updateInspectionResult = (criterionId: string, value: string | number | boolean, notes?: string) => {
-    setInspectionResults(prev => ({
-      ...prev,
-      [criterionId]: {
-        ...prev[criterionId],
-        value,
-        notes,
-        timestamp: new Date().toISOString(),
-      }
-    }));
-  };
-
-  const handlePhotoUpload = (criterionId: string, file: File) => {
-    setUploadedPhotos(prev => ({
-      ...prev,
-      [criterionId]: file,
-    }));
-
-    // Update inspection result with photo reference
-    setInspectionResults(prev => ({
-      ...prev,
-      [criterionId]: {
-        ...prev[criterionId],
-        photo: file,
-      }
-    }));
-  };
-
-  const calculateOverallScore = (): number => {
-    if (!selectedTemplate) return 0;
-
-    let totalScore = 0;
-    let totalWeight = 0;
-
-    selectedTemplate.criteria.forEach(criterion => {
-      const result = inspectionResults[criterion.id];
-      if (result) {
-        let score = 0;
-        
-        if (criterion.type === 'boolean') {
-          score = result.value ? 100 : 0;
-        } else if (criterion.type === 'scale') {
-          const numValue = Number(result.value);
-          score = (numValue / (criterion.maxValue || 5)) * 100;
-        } else if (criterion.type === 'numeric') {
-          // For numeric values, assume pass/fail based on acceptable range
-          score = 100; // Simplified - would need more complex logic
-        }
-
-        totalScore += score * criterion.weight;
-        totalWeight += criterion.weight;
-      }
-    });
-
-    return totalWeight > 0 ? totalScore / totalWeight : 0;
-  };
-
-  const checkCriticalFailures = (): string[] => {
-    if (!selectedTemplate) return [];
-
-    const failures: string[] = [];
-
-    selectedTemplate.criteria.forEach(criterion => {
-      if (criterion.isCritical) {
-        const result = inspectionResults[criterion.id];
-        if (result) {
-          if (criterion.type === 'boolean' && !result.value) {
-            failures.push(criterion.spanishDescription);
-          } else if (criterion.type === 'scale' && Number(result.value) < 3) {
-            failures.push(criterion.spanishDescription);
-          }
-        }
-      }
-    });
-
-    return failures;
-  };
-
-  const completeQualityCheck = async () => {
-    if (!selectedTemplate) return;
-
-    const overallScore = calculateOverallScore();
-    const criticalFailures = checkCriticalFailures();
-    const passed = overallScore >= selectedTemplate.passThreshold && criticalFailures.length === 0;
-
-    const checkData = {
-      status: passed ? QualityCheckStatus.PASSED : QualityCheckStatus.FAILED,
-      results: {
-        overallScore,
-        criticalFailures,
-        individualResults: inspectionResults,
-        photos: Object.keys(uploadedPhotos),
-      },
-      notes: `Inspección completada. Puntuación: ${overallScore.toFixed(1)}%`,
-      corrective_actions: criticalFailures.length > 0 ? [
-        `Fallas críticas encontradas: ${criticalFailures.join(', ')}`,
-        'Revisar proceso de producción',
-        'Re-entrenar personal si es necesario'
-      ] : undefined,
-    };
-
-    try {
-      // This would be the actual check ID from the created quality check
-      const mockCheckId = 'check-id';
-      const response = await productionService.completeQualityCheck(mockCheckId, checkData);
-      
-      if (response.success) {
-        if (onQualityCheckCompleted) {
-          onQualityCheckCompleted(response.data as unknown as QualityCheck);
-        }
-        
-        if (!passed && checkData.corrective_actions && onCorrectiveActionRequired) {
-          onCorrectiveActionRequired(response.data as unknown as QualityCheck, checkData.corrective_actions);
-        }
-        
-        setIsInspectionModalOpen(false);
-        setSelectedTemplate(null);
-        await loadQualityChecks();
-      }
-    } catch (error) {
-      console.error('Error completing quality check:', error);
-    }
-  };
-
-  const renderInspectionForm = () => {
-    if (!selectedTemplate) return null;
-
-    return (
-      <div className="space-y-6">
-        <div className="bg-[var(--color-info)]/5 border border-[var(--color-info)]/20 p-4 rounded-lg">
-          <h3 className="font-semibold text-blue-900 mb-2">{selectedTemplate.spanishName}</h3>
-          <p className="text-sm text-[var(--color-info)]">
-            Umbral de aprobación: {selectedTemplate.passThreshold}%
-          </p>
-          {selectedTemplate.criticalPoints.length > 0 && (
-            <p className="text-sm text-[var(--color-info)] mt-1">
-              Puntos críticos: {selectedTemplate.criticalPoints.length}
-            </p>
-          )}
-        </div>
-
-        <div className="space-y-4">
-          {selectedTemplate.criteria.map((criterion) => (
-            <Card key={criterion.id} className={`p-4 ${criterion.isCritical ? 'border-orange-200 bg-orange-50' : ''}`}>
-              <div className="flex justify-between items-start mb-3">
-                <div className="flex-1">
-                  <h4 className="font-medium text-[var(--text-primary)]">{criterion.spanishDescription}</h4>
-                  <p className="text-sm text-[var(--text-secondary)] mt-1">{criterion.acceptableCriteria}</p>
-                  {criterion.isCritical && (
-                    <Badge className="bg-[var(--color-primary)]/10 text-[var(--color-primary)] text-xs mt-1">
-                      Punto Crítico
-                    </Badge>
-                  )}
-                </div>
-                <span className="text-sm text-[var(--text-tertiary)]">Peso: {criterion.weight}%</span>
-              </div>
-
-              <div className="space-y-3">
-                {criterion.type === 'boolean' && (
-                  <div className="flex gap-4">
-                    <label className="flex items-center">
-                      <input
-                        type="radio"
-                        name={criterion.id}
-                        value="true"
-                        checked={inspectionResults[criterion.id]?.value === true}
-                        onChange={() => updateInspectionResult(criterion.id, true)}
-                        className="mr-2"
-                      />
-                      Sí / Pasa
-                    </label>
-                    <label className="flex items-center">
-                      <input
-                        type="radio"
-                        name={criterion.id}
-                        value="false"
-                        checked={inspectionResults[criterion.id]?.value === false}
-                        onChange={() => updateInspectionResult(criterion.id, false)}
-                        className="mr-2"
-                      />
-                      No / Falla
-                    </label>
-                  </div>
-                )}
-
-                {criterion.type === 'scale' && (
-                  <div className="flex items-center gap-4">
-                    <span className="text-sm">1</span>
-                    <input
-                      type="range"
-                      min={criterion.minValue || 1}
-                      max={criterion.maxValue || 5}
-                      step="1"
-                      value={inspectionResults[criterion.id]?.value || criterion.minValue || 1}
-                      onChange={(e) => updateInspectionResult(criterion.id, parseInt(e.target.value))}
-                      className="flex-1"
-                    />
-                    <span className="text-sm">{criterion.maxValue || 5}</span>
-                    <span className="min-w-8 text-center font-medium">
-                      {inspectionResults[criterion.id]?.value || criterion.minValue || 1}
-                    </span>
-                  </div>
-                )}
-
-                {criterion.type === 'numeric' && (
-                  <div className="flex items-center gap-2">
-                    <Input
-                      type="number"
-                      min={criterion.minValue}
-                      max={criterion.maxValue}
-                      step="0.1"
-                      value={inspectionResults[criterion.id]?.value || ''}
-                      onChange={(e) => updateInspectionResult(criterion.id, parseFloat(e.target.value) || 0)}
-                      className="w-24"
-                    />
-                    {criterion.unit && <span className="text-sm text-[var(--text-secondary)]">{criterion.unit}</span>}
-                  </div>
-                )}
-
-                <Input
-                  placeholder="Notas adicionales (opcional)"
-                  value={inspectionResults[criterion.id]?.notes || ''}
-                  onChange={(e) => {
-                    const currentResult = inspectionResults[criterion.id];
-                    if (currentResult) {
-                      updateInspectionResult(criterion.id, currentResult.value, e.target.value);
-                    }
-                  }}
-                />
-
-                {selectedTemplate.requiresPhotos && (
-                  <div>
-                    <input
-                      ref={fileInputRef}
-                      type="file"
-                      accept="image/*"
-                      onChange={(e) => {
-                        const file = e.target.files?.[0];
-                        if (file) {
-                          handlePhotoUpload(criterion.id, file);
-                        }
-                      }}
-                      className="hidden"
-                    />
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => fileInputRef.current?.click()}
-                    >
-                      📸 {uploadedPhotos[criterion.id] ? 'Cambiar foto' : 'Tomar foto'}
-                    </Button>
-                    {uploadedPhotos[criterion.id] && (
-                      <p className="text-sm text-[var(--color-success)] mt-1">
-                        ✓ Foto capturada: {uploadedPhotos[criterion.id].name}
-                      </p>
-                    )}
-                  </div>
-                )}
-              </div>
-            </Card>
-          ))}
-        </div>
-
-        <Card className="p-4 bg-[var(--bg-secondary)]">
-          <div className="flex justify-between items-center mb-2">
-            <span className="font-medium">Puntuación general</span>
-            <span className="text-2xl font-bold text-[var(--color-info)]">
-              {calculateOverallScore().toFixed(1)}%
-            </span>
-          </div>
-          
-          <div className="w-full bg-[var(--bg-quaternary)] rounded-full h-3 mb-2">
-            <div
-              className={`h-3 rounded-full transition-all duration-500 ${
-                calculateOverallScore() >= selectedTemplate.passThreshold 
-                  ? 'bg-green-500' 
-                  : 'bg-red-500'
-              }`}
-              style={{ width: `${calculateOverallScore()}%` }}
-            />
-          </div>
-          
-          <div className="flex justify-between text-sm text-[var(--text-secondary)]">
-            <span>Umbral: {selectedTemplate.passThreshold}%</span>
-            <span className={
-              calculateOverallScore() >= selectedTemplate.passThreshold 
-                ? 'text-[var(--color-success)] font-medium' 
-                : 'text-[var(--color-error)] font-medium'
-            }>
-              {calculateOverallScore() >= selectedTemplate.passThreshold ? '✓ APROBADO' : '✗ REPROBADO'}
-            </span>
-          </div>
-
-          {checkCriticalFailures().length > 0 && (
-            <div className="mt-3 p-2 bg-[var(--color-error)]/10 border border-red-200 rounded">
-              <p className="text-sm font-medium text-[var(--color-error)]">Fallas críticas detectadas:</p>
-              <ul className="text-sm text-[var(--color-error)] mt-1">
-                {checkCriticalFailures().map((failure, index) => (
-                  <li key={index}>• {failure}</li>
-                ))}
-              </ul>
-            </div>
-          )}
-        </Card>
-      </div>
-    );
-  };
-
-  const renderQualityChecksTable = () => {
-    const columns = [
-      { key: 'batch', label: 'Lote', sortable: true },
-      { key: 'type', label: 'Tipo de control', sortable: true },
-      { key: 'status', label: 'Estado', sortable: true },
-      { key: 'inspector', label: 'Inspector', sortable: false },
-      { key: 'scheduled_date', label: 'Fecha programada', sortable: true },
-      { key: 'completed_date', label: 'Fecha completada', sortable: true },
-      { key: 'actions', label: 'Acciones', sortable: false },
-    ];
-
-    const data = qualityChecks.map(check => ({
-      id: check.id,
-      batch: `#${check.batch?.batch_number || 'N/A'}`,
-      type: QUALITY_CHECK_TEMPLATES[check.check_type]?.spanishName || check.check_type,
-      status: (
-        <Badge className={STATUS_COLORS[check.status]}>
-          {check.status === QualityCheckStatus.SCHEDULED && 'Programado'}
-          {check.status === QualityCheckStatus.IN_PROGRESS && 'En progreso'}
-          {check.status === QualityCheckStatus.PASSED && 'Aprobado'}
-          {check.status === QualityCheckStatus.FAILED && 'Reprobado'}
-          {check.status === QualityCheckStatus.REQUIRES_REVIEW && 'Requiere revisión'}
-        </Badge>
-      ),
-      inspector: check.inspector || 'No asignado',
-      scheduled_date: check.scheduled_date 
-        ? new Date(check.scheduled_date).toLocaleDateString('es-ES')
-        : '-',
-      completed_date: check.completed_date 
-        ? new Date(check.completed_date).toLocaleDateString('es-ES')
-        : '-',
-      actions: (
-        <div className="flex gap-2">
-          {check.status === QualityCheckStatus.SCHEDULED && (
-            <Button
-              variant="primary"
-              size="sm"
-              onClick={() => {
-                const template = QUALITY_CHECK_TEMPLATES[check.check_type];
-                if (template) {
-                  startQualityCheck(template);
-                }
-              }}
-            >
-              Iniciar
-            </Button>
-          )}
-          <Button variant="outline" size="sm">
-            Ver detalles
-          </Button>
-        </div>
-      ),
-    }));
-
-    return <Table columns={columns} data={data} />;
-  };
-
-  return (
-    <div className={`space-y-6 ${className}`}>
-      <div className="flex justify-between items-center">
-        <div>
-          <h2 className="text-2xl font-bold text-[var(--text-primary)]">Control de Calidad</h2>
-          <p className="text-[var(--text-secondary)]">Gestiona las inspecciones de calidad y cumplimiento</p>
-        </div>
-
-        <div className="flex gap-2">
-          <Select
-            value={currentInspector}
-            onChange={(e) => setCurrentInspector(e.target.value)}
-            className="w-48"
-          >
-            <option value="inspector-1">María García (Inspector)</option>
-            <option value="inspector-2">Juan López (Supervisor)</option>
-            <option value="inspector-3">Ana Martín (Jefe Calidad)</option>
-          </Select>
-
-          <Button
-            variant="primary"
-            onClick={() => {
-              // Show modal to select quality check type
-              const template = QUALITY_CHECK_TEMPLATES.visual_inspection;
-              startQualityCheck(template);
-            }}
-          >
-            Nueva inspección
-          </Button>
-        </div>
-      </div>
-
-      {/* Quick Start Templates */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-        {Object.values(QUALITY_CHECK_TEMPLATES).map((template) => (
-          <Card
-            key={template.id}
-            className="p-4 cursor-pointer hover:shadow-md transition-shadow border-2 border-transparent hover:border-[var(--color-info)]/20"
-            onClick={() => startQualityCheck(template)}
-          >
-            <div className="flex items-center justify-between mb-3">
-              <h3 className="font-semibold text-[var(--text-primary)]">{template.spanishName}</h3>
-              {template.requiresPhotos && (
-                <span className="text-sm bg-[var(--color-info)]/10 text-[var(--color-info)] px-2 py-1 rounded">
-                  📸 Fotos
-                </span>
-              )}
-            </div>
-            
-            <p className="text-sm text-[var(--text-secondary)] mb-3">
-              {template.criteria.length} criterios • Umbral: {template.passThreshold}%
-            </p>
-            
-            <div className="flex flex-wrap gap-1">
-              {template.productTypes.map((type) => (
-                <Badge key={type} className="text-xs bg-[var(--bg-tertiary)] text-[var(--text-secondary)]">
-                  {type === 'pan' && 'Pan'}
-                  {type === 'bolleria' && 'Bollería'}
-                  {type === 'reposteria' && 'Repostería'}
-                </Badge>
-              ))}
-            </div>
-
-            {template.criticalPoints.length > 0 && (
-              <p className="text-xs text-[var(--color-primary)] mt-2">
-                {template.criticalPoints.length} puntos críticos
-              </p>
-            )}
-          </Card>
-        ))}
-      </div>
-
-      {/* Quality Checks Table */}
-      <Card className="p-6">
-        <div className="flex justify-between items-center mb-4">
-          <h3 className="text-lg font-semibold">Controles de calidad recientes</h3>
-          
-          <div className="flex gap-2">
-            <Select className="w-40">
-              <option value="all">Todos los estados</option>
-              <option value={QualityCheckStatus.SCHEDULED}>Programados</option>
-              <option value={QualityCheckStatus.IN_PROGRESS}>En progreso</option>
-              <option value={QualityCheckStatus.PASSED}>Aprobados</option>
-              <option value={QualityCheckStatus.FAILED}>Reprobados</option>
-            </Select>
-            
-            <Button variant="outline" onClick={loadQualityChecks}>
-              Actualizar
-            </Button>
-          </div>
-        </div>
-
-        {loading ? (
-          <div className="flex justify-center py-8">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
-          </div>
-        ) : (
-          renderQualityChecksTable()
-        )}
-      </Card>
-
-      {/* Quality Check Modal */}
-      <Modal
-        isOpen={isInspectionModalOpen}
-        onClose={() => {
-          setIsInspectionModalOpen(false);
-          setSelectedTemplate(null);
-        }}
-        title={`Control de Calidad: ${selectedTemplate?.spanishName}`}
-        size="lg"
-      >
-        {renderInspectionForm()}
-        
-        <div className="flex justify-end gap-2 pt-6 border-t">
-          <Button
-            variant="outline"
-            onClick={() => {
-              setIsInspectionModalOpen(false);
-              setSelectedTemplate(null);
-            }}
-          >
-            Cancelar
-          </Button>
-          
-          <Button
-            variant="primary"
-            onClick={completeQualityCheck}
-            disabled={!selectedTemplate || Object.keys(inspectionResults).length === 0}
-          >
-            Completar inspección
-          </Button>
-        </div>
-      </Modal>
-
-      {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <Card className="p-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm text-[var(--text-secondary)]">Tasa de aprobación</p>
-              <p className="text-2xl font-bold text-[var(--color-success)]">94.2%</p>
-            </div>
-            <span className="text-2xl">✅</span>
-          </div>
-        </Card>
-
-        <Card className="p-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm text-[var(--text-secondary)]">Controles pendientes</p>
-              <p className="text-2xl font-bold text-[var(--color-primary)]">7</p>
-            </div>
-            <span className="text-2xl">⏳</span>
-          </div>
-        </Card>
-
-        <Card className="p-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm text-[var(--text-secondary)]">Fallas críticas</p>
-              <p className="text-2xl font-bold text-[var(--color-error)]">2</p>
-            </div>
-            <span className="text-2xl">🚨</span>
-          </div>
-        </Card>
-
-        <Card className="p-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm text-[var(--text-secondary)]">Controles hoy</p>
-              <p className="text-2xl font-bold text-[var(--color-info)]">23</p>
-            </div>
-            <span className="text-2xl">📋</span>
-          </div>
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default QualityControl;
\ No newline at end of file
diff --git a/frontend/src/components/domain/production/QualityDashboard.tsx b/frontend/src/components/domain/production/QualityDashboard.tsx
deleted file mode 100644
index 7e9164fb..00000000
--- a/frontend/src/components/domain/production/QualityDashboard.tsx
+++ /dev/null
@@ -1,467 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Card, CardHeader, CardBody } from '../../ui/Card';
-import { StatsGrid } from '../../ui/Stats';
-import { Badge } from '../../ui/Badge';
-import { Button } from '../../ui/Button';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../ui/Tabs';
-import {
-  CheckCircle,
-  AlertTriangle,
-  TrendingUp,
-  TrendingDown,
-  Target,
-  Activity,
-  BarChart3,
-  Camera,
-  FileCheck,
-  Clock,
-  Users,
-  Package
-} from 'lucide-react';
-import { useCurrentTenant } from '../../../stores/tenant.store';
-import { useProductionDashboard } from '../../../api';
-
-export interface QualityMetrics {
-  totalChecks: number;
-  passedChecks: number;
-  failedChecks: number;
-  averageScore: number;
-  passRate: number;
-  trendsData: Array<{
-    date: string;
-    score: number;
-    passRate: number;
-    checks: number;
-  }>;
-  byProduct: Array<{
-    productName: string;
-    checks: number;
-    averageScore: number;
-    passRate: number;
-    topDefects: string[];
-  }>;
-  byCategory: Array<{
-    category: string;
-    checks: number;
-    averageScore: number;
-    issues: number;
-  }>;
-  recentChecks: Array<{
-    id: string;
-    batchId: string;
-    productName: string;
-    checkType: string;
-    score: number;
-    status: 'passed' | 'failed' | 'warning';
-    timestamp: string;
-    inspector: string;
-    defects: string[];
-  }>;
-}
-
-export interface QualityDashboardProps {
-  className?: string;
-  data?: QualityMetrics;
-  dateRange?: {
-    startDate: string;
-    endDate: string;
-  };
-  onCreateCheck?: () => void;
-  onViewCheck?: (checkId: string) => void;
-  onViewTrends?: () => void;
-}
-
-const QualityDashboard: React.FC<QualityDashboardProps> = ({
-  className,
-  data,
-  dateRange,
-  onCreateCheck,
-  onViewCheck,
-  onViewTrends
-}) => {
-  const { t } = useTranslation();
-  const [activeTab, setActiveTab] = useState('overview');
-  const currentTenant = useCurrentTenant();
-  const tenantId = currentTenant?.id || '';
-
-  const {
-    data: dashboardData,
-    isLoading,
-    error
-  } = useProductionDashboard(tenantId);
-
-  const qualityData = useMemo((): QualityMetrics => {
-    if (data) return data;
-
-    // Mock data for demonstration
-    return {
-      totalChecks: 156,
-      passedChecks: 142,
-      failedChecks: 14,
-      averageScore: 8.3,
-      passRate: 91.0,
-      trendsData: [
-        { date: '2024-01-17', score: 8.1, passRate: 89, checks: 22 },
-        { date: '2024-01-18', score: 8.4, passRate: 92, checks: 25 },
-        { date: '2024-01-19', score: 8.2, passRate: 90, checks: 24 },
-        { date: '2024-01-20', score: 8.5, passRate: 94, checks: 23 },
-        { date: '2024-01-21', score: 8.3, passRate: 91, checks: 26 },
-        { date: '2024-01-22', score: 8.6, passRate: 95, checks: 21 },
-        { date: '2024-01-23', score: 8.3, passRate: 91, checks: 15 }
-      ],
-      byProduct: [
-        {
-          productName: 'Pan de Molde Integral',
-          checks: 35,
-          averageScore: 8.7,
-          passRate: 94.3,
-          topDefects: ['Forma irregular', 'Color desigual']
-        },
-        {
-          productName: 'Croissants de Mantequilla',
-          checks: 28,
-          averageScore: 8.1,
-          passRate: 89.3,
-          topDefects: ['Textura dura', 'Tama�o inconsistente']
-        },
-        {
-          productName: 'Baguettes Tradicionales',
-          checks: 22,
-          averageScore: 8.5,
-          passRate: 95.5,
-          topDefects: ['Corteza muy oscura']
-        }
-      ],
-      byCategory: [
-        { category: 'Apariencia Visual', checks: 156, averageScore: 8.4, issues: 12 },
-        { category: 'Textura', checks: 142, averageScore: 8.2, issues: 15 },
-        { category: 'Sabor', checks: 98, averageScore: 8.6, issues: 8 },
-        { category: 'Dimensiones', checks: 156, averageScore: 8.1, issues: 18 },
-        { category: 'Peso', checks: 156, averageScore: 8.9, issues: 4 }
-      ],
-      recentChecks: [
-        {
-          id: '1',
-          batchId: 'PROD-2024-0123-001',
-          productName: 'Pan de Molde Integral',
-          checkType: 'Inspecci�n Visual',
-          score: 8.5,
-          status: 'passed',
-          timestamp: '2024-01-23T14:30:00Z',
-          inspector: 'Mar�a Gonz�lez',
-          defects: []
-        },
-        {
-          id: '2',
-          batchId: 'PROD-2024-0123-002',
-          productName: 'Croissants de Mantequilla',
-          checkType: 'Control de Calidad',
-          score: 7.2,
-          status: 'warning',
-          timestamp: '2024-01-23T13:45:00Z',
-          inspector: 'Carlos Rodr�guez',
-          defects: ['Textura ligeramente dura']
-        },
-        {
-          id: '3',
-          batchId: 'PROD-2024-0123-003',
-          productName: 'Baguettes Tradicionales',
-          checkType: 'Inspecci�n Final',
-          score: 6.8,
-          status: 'failed',
-          timestamp: '2024-01-23T12:15:00Z',
-          inspector: 'Ana Mart�n',
-          defects: ['Corteza muy oscura', 'Forma irregular']
-        }
-      ]
-    };
-  }, [data]);
-
-  const getStatusColor = (status: 'passed' | 'failed' | 'warning') => {
-    const colors = {
-      passed: 'success',
-      failed: 'error',
-      warning: 'warning'
-    };
-    return colors[status] as 'success' | 'error' | 'warning';
-  };
-
-  const getStatusIcon = (status: 'passed' | 'failed' | 'warning') => {
-    const icons = {
-      passed: CheckCircle,
-      failed: AlertTriangle,
-      warning: AlertTriangle
-    };
-    return icons[status];
-  };
-
-  const formatDateTime = (timestamp: string) => {
-    return new Date(timestamp).toLocaleString('es-ES', {
-      day: '2-digit',
-      month: '2-digit',
-      hour: '2-digit',
-      minute: '2-digit'
-    });
-  };
-
-  if (isLoading) {
-    return (
-      <Card className={className}>
-        <CardHeader>
-          <h3 className="text-lg font-semibold text-[var(--text-primary)]">
-            {t('quality.dashboard.title', 'Quality Dashboard')}
-          </h3>
-        </CardHeader>
-        <CardBody>
-          <div className="animate-pulse space-y-4">
-            <div className="grid grid-cols-4 gap-4">
-              <div className="h-20 bg-[var(--bg-secondary)] rounded"></div>
-              <div className="h-20 bg-[var(--bg-secondary)] rounded"></div>
-              <div className="h-20 bg-[var(--bg-secondary)] rounded"></div>
-              <div className="h-20 bg-[var(--bg-secondary)] rounded"></div>
-            </div>
-            <div className="h-64 bg-[var(--bg-secondary)] rounded"></div>
-          </div>
-        </CardBody>
-      </Card>
-    );
-  }
-
-  if (error) {
-    return (
-      <Card className={className}>
-        <CardBody className="text-center py-8">
-          <AlertTriangle className="w-12 h-12 text-red-500 mx-auto mb-4" />
-          <p className="text-[var(--text-secondary)]">
-            {t('quality.dashboard.error', 'Error loading quality data')}
-          </p>
-        </CardBody>
-      </Card>
-    );
-  }
-
-  const qualityStats = [
-    {
-      title: t('quality.stats.total_checks', 'Total Checks'),
-      value: qualityData.totalChecks,
-      icon: FileCheck,
-      variant: 'default' as const,
-      subtitle: t('quality.stats.last_7_days', 'Last 7 days')
-    },
-    {
-      title: t('quality.stats.pass_rate', 'Pass Rate'),
-      value: `${qualityData.passRate.toFixed(1)}%`,
-      icon: CheckCircle,
-      variant: qualityData.passRate >= 95 ? 'success' as const :
-                qualityData.passRate >= 90 ? 'warning' as const : 'error' as const,
-      trend: {
-        value: 2.3,
-        direction: 'up' as const,
-        label: t('quality.trends.vs_last_week', 'vs last week')
-      },
-      subtitle: `${qualityData.passedChecks}/${qualityData.totalChecks} ${t('quality.stats.passed', 'passed')}`
-    },
-    {
-      title: t('quality.stats.average_score', 'Average Score'),
-      value: qualityData.averageScore.toFixed(1),
-      icon: Target,
-      variant: qualityData.averageScore >= 8.5 ? 'success' as const :
-                qualityData.averageScore >= 7.5 ? 'warning' as const : 'error' as const,
-      subtitle: t('quality.stats.out_of_10', 'out of 10')
-    },
-    {
-      title: t('quality.stats.failed_checks', 'Failed Checks'),
-      value: qualityData.failedChecks,
-      icon: AlertTriangle,
-      variant: qualityData.failedChecks === 0 ? 'success' as const :
-                qualityData.failedChecks <= 5 ? 'warning' as const : 'error' as const,
-      subtitle: t('quality.stats.requiring_action', 'Requiring action')
-    }
-  ];
-
-  return (
-    <Card className={className}>
-      <CardHeader>
-        <div className="flex items-center justify-between">
-          <div>
-            <h3 className="text-lg font-semibold text-[var(--text-primary)]">
-              {t('quality.dashboard.title', 'Quality Dashboard')}
-            </h3>
-            <p className="text-sm text-[var(--text-secondary)]">
-              {t('quality.dashboard.subtitle', 'Monitor quality metrics and trends')}
-            </p>
-          </div>
-          <Button
-            onClick={onCreateCheck}
-            variant="primary"
-            size="sm"
-          >
-            <Camera className="w-4 h-4 mr-2" />
-            {t('quality.actions.new_check', 'New Check')}
-          </Button>
-        </div>
-      </CardHeader>
-
-      <CardBody className="space-y-6">
-        {/* Key Metrics */}
-        <StatsGrid
-          stats={qualityStats}
-          columns={4}
-          gap="md"
-        />
-
-        {/* Detailed Analysis Tabs */}
-        <Tabs value={activeTab} onValueChange={setActiveTab}>
-          <TabsList className="grid w-full grid-cols-4">
-            <TabsTrigger value="overview">
-              {t('quality.tabs.overview', 'Overview')}
-            </TabsTrigger>
-            <TabsTrigger value="products">
-              {t('quality.tabs.by_product', 'By Product')}
-            </TabsTrigger>
-            <TabsTrigger value="categories">
-              {t('quality.tabs.categories', 'Categories')}
-            </TabsTrigger>
-            <TabsTrigger value="recent">
-              {t('quality.tabs.recent', 'Recent')}
-            </TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="overview" className="space-y-4">
-            {/* Trends Chart Placeholder */}
-            <div className="p-6 bg-[var(--bg-secondary)] rounded-lg">
-              <div className="flex items-center justify-between mb-4">
-                <h4 className="font-medium text-[var(--text-primary)]">
-                  {t('quality.charts.weekly_trends', 'Weekly Quality Trends')}
-                </h4>
-                <Button variant="outline" size="sm" onClick={onViewTrends}>
-                  <BarChart3 className="w-4 h-4 mr-2" />
-                  {t('quality.actions.view_trends', 'View Trends')}
-                </Button>
-              </div>
-              <div className="h-32 flex items-center justify-center border-2 border-dashed border-[var(--border-primary)] rounded">
-                <p className="text-[var(--text-tertiary)]">
-                  {t('quality.charts.placeholder', 'Quality trends chart will be displayed here')}
-                </p>
-              </div>
-            </div>
-          </TabsContent>
-
-          <TabsContent value="products" className="space-y-4">
-            <div className="space-y-3">
-              {qualityData.byProduct.map((product, index) => (
-                <div key={index} className="p-4 bg-[var(--bg-secondary)] rounded-lg">
-                  <div className="flex items-center justify-between mb-2">
-                    <h4 className="font-medium text-[var(--text-primary)]">
-                      {product.productName}
-                    </h4>
-                    <Badge variant={product.passRate >= 95 ? 'success' : product.passRate >= 90 ? 'warning' : 'error'}>
-                      {product.passRate.toFixed(1)}% {t('quality.stats.pass_rate', 'pass rate')}
-                    </Badge>
-                  </div>
-                  <div className="grid grid-cols-3 gap-4 text-sm">
-                    <div>
-                      <span className="text-[var(--text-secondary)]">{t('quality.stats.checks', 'Checks')}: </span>
-                      <span className="font-medium">{product.checks}</span>
-                    </div>
-                    <div>
-                      <span className="text-[var(--text-secondary)]">{t('quality.stats.avg_score', 'Avg Score')}: </span>
-                      <span className="font-medium">{product.averageScore.toFixed(1)}</span>
-                    </div>
-                    <div>
-                      <span className="text-[var(--text-secondary)]">{t('quality.stats.top_defects', 'Top Defects')}: </span>
-                      <span className="font-medium">{product.topDefects.join(', ')}</span>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </TabsContent>
-
-          <TabsContent value="categories" className="space-y-4">
-            <div className="space-y-3">
-              {qualityData.byCategory.map((category, index) => (
-                <div key={index} className="flex items-center justify-between p-4 bg-[var(--bg-secondary)] rounded-lg">
-                  <div>
-                    <h4 className="font-medium text-[var(--text-primary)]">
-                      {category.category}
-                    </h4>
-                    <div className="flex items-center space-x-4 text-sm text-[var(--text-secondary)]">
-                      <span>{category.checks} {t('quality.stats.checks', 'checks')}</span>
-                      <span>{category.averageScore.toFixed(1)} {t('quality.stats.avg_score', 'avg score')}</span>
-                    </div>
-                  </div>
-                  <div className="text-right">
-                    <div className={`text-lg font-bold ${category.issues === 0 ? 'text-green-600' : category.issues <= 5 ? 'text-orange-600' : 'text-red-600'}`}>
-                      {category.issues}
-                    </div>
-                    <div className="text-sm text-[var(--text-secondary)]">
-                      {t('quality.stats.issues', 'issues')}
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </TabsContent>
-
-          <TabsContent value="recent" className="space-y-4">
-            <div className="space-y-3">
-              {qualityData.recentChecks.map((check) => {
-                const StatusIcon = getStatusIcon(check.status);
-                return (
-                  <div
-                    key={check.id}
-                    className="p-4 bg-[var(--bg-secondary)] rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors cursor-pointer"
-                    onClick={() => onViewCheck?.(check.id)}
-                  >
-                    <div className="flex items-center justify-between mb-2">
-                      <div className="flex items-center space-x-3">
-                        <StatusIcon className={`w-5 h-5 ${
-                          check.status === 'passed' ? 'text-green-500' :
-                          check.status === 'warning' ? 'text-orange-500' : 'text-red-500'
-                        }`} />
-                        <div>
-                          <h4 className="font-medium text-[var(--text-primary)]">
-                            {check.productName}
-                          </h4>
-                          <p className="text-sm text-[var(--text-secondary)]">
-                            {check.checkType} " {check.batchId}
-                          </p>
-                        </div>
-                      </div>
-                      <div className="text-right">
-                        <div className="text-lg font-bold text-[var(--text-primary)]">
-                          {check.score.toFixed(1)}
-                        </div>
-                        <div className="text-sm text-[var(--text-secondary)]">
-                          {formatDateTime(check.timestamp)}
-                        </div>
-                      </div>
-                    </div>
-                    <div className="flex items-center justify-between text-sm">
-                      <div className="flex items-center space-x-2">
-                        <Users className="w-4 h-4 text-[var(--text-tertiary)]" />
-                        <span className="text-[var(--text-secondary)]">{check.inspector}</span>
-                      </div>
-                      {check.defects.length > 0 && (
-                        <div className="flex items-center space-x-2">
-                          <AlertTriangle className="w-4 h-4 text-orange-500" />
-                          <span className="text-sm text-orange-600">
-                            {check.defects.length} {t('quality.stats.defects', 'defects')}
-                          </span>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </TabsContent>
-        </Tabs>
-      </CardBody>
-    </Card>
-  );
-};
-
-export default QualityDashboard;
\ No newline at end of file
diff --git a/frontend/src/components/domain/production/QualityInspection.tsx b/frontend/src/components/domain/production/QualityInspection.tsx
deleted file mode 100644
index a73e7ca1..00000000
--- a/frontend/src/components/domain/production/QualityInspection.tsx
+++ /dev/null
@@ -1,585 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Card, CardHeader, CardBody } from '../../ui/Card';
-import { Button } from '../../ui/Button';
-import { Input } from '../../ui/Input';
-import { Textarea } from '../../ui';
-import { Badge } from '../../ui/Badge';
-import { Modal } from '../../ui/Modal';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../ui/Tabs';
-import {
-  Camera,
-  CheckCircle,
-  XCircle,
-  AlertTriangle,
-  Upload,
-  Star,
-  Target,
-  FileText,
-  Clock,
-  User,
-  Package
-} from 'lucide-react';
-import { useCurrentTenant } from '../../../stores/tenant.store';
-
-export interface InspectionCriteria {
-  id: string;
-  category: string;
-  name: string;
-  description: string;
-  type: 'visual' | 'measurement' | 'taste' | 'texture' | 'temperature';
-  required: boolean;
-  weight: number;
-  acceptableCriteria: string;
-  minValue?: number;
-  maxValue?: number;
-  unit?: string;
-}
-
-export interface InspectionResult {
-  criteriaId: string;
-  value: number | string | boolean;
-  score: number;
-  notes?: string;
-  photos?: File[];
-  pass: boolean;
-  timestamp: string;
-}
-
-export interface QualityInspectionData {
-  batchId: string;
-  productName: string;
-  inspectionType: string;
-  inspector: string;
-  startTime: string;
-  criteria: InspectionCriteria[];
-  results: InspectionResult[];
-  overallScore: number;
-  overallPass: boolean;
-  finalNotes: string;
-  photos: File[];
-  correctiveActions: string[];
-}
-
-export interface QualityInspectionProps {
-  className?: string;
-  batchId?: string;
-  productName?: string;
-  inspectionType?: string;
-  criteria?: InspectionCriteria[];
-  onComplete?: (data: QualityInspectionData) => void;
-  onCancel?: () => void;
-  onSaveDraft?: (data: Partial<QualityInspectionData>) => void;
-}
-
-const DEFAULT_CRITERIA: InspectionCriteria[] = [
-  {
-    id: 'color_uniformity',
-    category: 'Visual',
-    name: 'Color Uniformity',
-    description: 'Evaluate the consistency of color across the product',
-    type: 'visual',
-    required: true,
-    weight: 15,
-    acceptableCriteria: 'Score 7 or higher',
-    minValue: 1,
-    maxValue: 10
-  },
-  {
-    id: 'shape_integrity',
-    category: 'Visual',
-    name: 'Shape Integrity',
-    description: 'Check if the product maintains its intended shape',
-    type: 'visual',
-    required: true,
-    weight: 20,
-    acceptableCriteria: 'Score 7 or higher',
-    minValue: 1,
-    maxValue: 10
-  },
-  {
-    id: 'surface_texture',
-    category: 'Texture',
-    name: 'Surface Texture',
-    description: 'Evaluate surface texture quality',
-    type: 'texture',
-    required: true,
-    weight: 15,
-    acceptableCriteria: 'Score 7 or higher',
-    minValue: 1,
-    maxValue: 10
-  },
-  {
-    id: 'weight_accuracy',
-    category: 'Measurement',
-    name: 'Weight Accuracy',
-    description: 'Measure actual weight vs target weight',
-    type: 'measurement',
-    required: true,
-    weight: 20,
-    acceptableCriteria: 'Within �5% of target',
-    unit: 'g'
-  },
-  {
-    id: 'internal_texture',
-    category: 'Texture',
-    name: 'Internal Texture',
-    description: 'Evaluate crumb structure and texture',
-    type: 'texture',
-    required: false,
-    weight: 15,
-    acceptableCriteria: 'Score 7 or higher',
-    minValue: 1,
-    maxValue: 10
-  },
-  {
-    id: 'taste_quality',
-    category: 'Taste',
-    name: 'Taste Quality',
-    description: 'Overall flavor and taste assessment',
-    type: 'taste',
-    required: false,
-    weight: 15,
-    acceptableCriteria: 'Score 7 or higher',
-    minValue: 1,
-    maxValue: 10
-  }
-];
-
-const QualityInspection: React.FC<QualityInspectionProps> = ({
-  className,
-  batchId = 'PROD-2024-0123-001',
-  productName = 'Pan de Molde Integral',
-  inspectionType = 'Final Quality Check',
-  criteria = DEFAULT_CRITERIA,
-  onComplete,
-  onCancel,
-  onSaveDraft
-}) => {
-  const { t } = useTranslation();
-  const currentTenant = useCurrentTenant();
-  const [activeTab, setActiveTab] = useState('inspection');
-
-  const [inspectionData, setInspectionData] = useState<Partial<QualityInspectionData>>({
-    batchId,
-    productName,
-    inspectionType,
-    inspector: currentTenant?.name || 'Inspector',
-    startTime: new Date().toISOString(),
-    criteria,
-    results: [],
-    finalNotes: '',
-    photos: [],
-    correctiveActions: []
-  });
-
-  const [currentCriteriaIndex, setCurrentCriteriaIndex] = useState(0);
-  const [showPhotoModal, setShowPhotoModal] = useState(false);
-  const [tempPhotos, setTempPhotos] = useState<File[]>([]);
-
-  const updateResult = useCallback((criteriaId: string, updates: Partial<InspectionResult>) => {
-    setInspectionData(prev => {
-      const existingResults = prev.results || [];
-      const existingIndex = existingResults.findIndex(r => r.criteriaId === criteriaId);
-
-      let newResults;
-      if (existingIndex >= 0) {
-        newResults = [...existingResults];
-        newResults[existingIndex] = { ...newResults[existingIndex], ...updates };
-      } else {
-        newResults = [...existingResults, {
-          criteriaId,
-          value: '',
-          score: 0,
-          pass: false,
-          timestamp: new Date().toISOString(),
-          ...updates
-        }];
-      }
-
-      return { ...prev, results: newResults };
-    });
-  }, []);
-
-  const getCriteriaResult = useCallback((criteriaId: string): InspectionResult | undefined => {
-    return inspectionData.results?.find(r => r.criteriaId === criteriaId);
-  }, [inspectionData.results]);
-
-  const calculateOverallScore = useCallback((): number => {
-    if (!inspectionData.results || inspectionData.results.length === 0) return 0;
-
-    const totalWeight = criteria.reduce((sum, c) => sum + c.weight, 0);
-    const weightedScore = inspectionData.results.reduce((sum, result) => {
-      const criterion = criteria.find(c => c.id === result.criteriaId);
-      return sum + (result.score * (criterion?.weight || 0));
-    }, 0);
-
-    return totalWeight > 0 ? weightedScore / totalWeight : 0;
-  }, [inspectionData.results, criteria]);
-
-  const isInspectionComplete = useCallback((): boolean => {
-    const requiredCriteria = criteria.filter(c => c.required);
-    const completedRequired = requiredCriteria.filter(c =>
-      inspectionData.results?.some(r => r.criteriaId === c.id)
-    );
-    return completedRequired.length === requiredCriteria.length;
-  }, [criteria, inspectionData.results]);
-
-  const handlePhotoUpload = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(event.target.files || []);
-    setTempPhotos(prev => [...prev, ...files]);
-  }, []);
-
-  const handleComplete = useCallback(() => {
-    const overallScore = calculateOverallScore();
-    const overallPass = overallScore >= 7.0; // Configurable threshold
-
-    const completedData: QualityInspectionData = {
-      ...inspectionData as QualityInspectionData,
-      overallScore,
-      overallPass,
-      photos: tempPhotos
-    };
-
-    onComplete?.(completedData);
-  }, [inspectionData, calculateOverallScore, tempPhotos, onComplete]);
-
-  const currentCriteria = criteria[currentCriteriaIndex];
-  const currentResult = currentCriteria ? getCriteriaResult(currentCriteria.id) : undefined;
-  const overallScore = calculateOverallScore();
-  const isComplete = isInspectionComplete();
-
-  const renderCriteriaInput = (criterion: InspectionCriteria) => {
-    const result = getCriteriaResult(criterion.id);
-
-    if (criterion.type === 'measurement') {
-      return (
-        <div className="space-y-4">
-          <Input
-            type="number"
-            placeholder={`Enter ${criterion.name.toLowerCase()}`}
-            value={result?.value as string || ''}
-            onChange={(e) => {
-              const value = parseFloat(e.target.value);
-              const score = !isNaN(value) ? Math.min(10, Math.max(1, 8)) : 0; // Simplified scoring
-              updateResult(criterion.id, {
-                value: e.target.value,
-                score,
-                pass: score >= 7
-              });
-            }}
-          />
-          {criterion.unit && (
-            <p className="text-sm text-[var(--text-secondary)]">
-              Unit: {criterion.unit}
-            </p>
-          )}
-        </div>
-      );
-    }
-
-    // For visual, texture, taste types - use 1-10 scale
-    return (
-      <div className="space-y-4">
-        <div className="grid grid-cols-5 gap-2">
-          {[...Array(10)].map((_, i) => {
-            const score = i + 1;
-            const isSelected = result?.score === score;
-            return (
-              <button
-                key={score}
-                className={`p-3 rounded-lg border-2 transition-all ${
-                  isSelected
-                    ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/10'
-                    : 'border-[var(--border-primary)] hover:border-[var(--color-primary)]/50'
-                }`}
-                onClick={() => {
-                  updateResult(criterion.id, {
-                    value: score,
-                    score,
-                    pass: score >= 7
-                  });
-                }}
-              >
-                <div className="text-center">
-                  <div className="font-bold text-[var(--text-primary)]">{score}</div>
-                  <div className="flex justify-center">
-                    <Star className={`w-4 h-4 ${isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-tertiary)]'}`} />
-                  </div>
-                </div>
-              </button>
-            );
-          })}
-        </div>
-
-        <div className="text-sm text-[var(--text-secondary)]">
-          <p>1-3: Poor | 4-6: Fair | 7-8: Good | 9-10: Excellent</p>
-          <p className="font-medium mt-1">Acceptable: {criterion.acceptableCriteria}</p>
-        </div>
-      </div>
-    );
-  };
-
-  return (
-    <Card className={className}>
-      <CardHeader>
-        <div className="flex items-center justify-between">
-          <div>
-            <h3 className="text-lg font-semibold text-[var(--text-primary)]">
-              {t('quality.inspection.title', 'Quality Inspection')}
-            </h3>
-            <p className="text-sm text-[var(--text-secondary)]">
-              {productName} " {batchId} " {inspectionType}
-            </p>
-          </div>
-          <div className="flex items-center space-x-2">
-            <Badge variant={isComplete ? 'success' : 'warning'}>
-              {isComplete ? t('quality.status.complete', 'Complete') : t('quality.status.in_progress', 'In Progress')}
-            </Badge>
-            {overallScore > 0 && (
-              <Badge variant={overallScore >= 7 ? 'success' : overallScore >= 5 ? 'warning' : 'error'}>
-                {overallScore.toFixed(1)}/10
-              </Badge>
-            )}
-          </div>
-        </div>
-      </CardHeader>
-
-      <CardBody className="space-y-6">
-        <Tabs value={activeTab} onValueChange={setActiveTab}>
-          <TabsList className="grid w-full grid-cols-3">
-            <TabsTrigger value="inspection">
-              {t('quality.tabs.inspection', 'Inspection')}
-            </TabsTrigger>
-            <TabsTrigger value="photos">
-              {t('quality.tabs.photos', 'Photos')}
-            </TabsTrigger>
-            <TabsTrigger value="summary">
-              {t('quality.tabs.summary', 'Summary')}
-            </TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="inspection" className="space-y-6">
-            {/* Progress Indicator */}
-            <div className="grid grid-cols-6 gap-2">
-              {criteria.map((criterion, index) => {
-                const result = getCriteriaResult(criterion.id);
-                const isCompleted = !!result;
-                const isCurrent = index === currentCriteriaIndex;
-
-                return (
-                  <button
-                    key={criterion.id}
-                    className={`p-2 rounded text-xs transition-all ${
-                      isCurrent
-                        ? 'bg-[var(--color-primary)] text-white'
-                        : isCompleted
-                        ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
-                        : 'bg-[var(--bg-secondary)] text-[var(--text-secondary)]'
-                    }`}
-                    onClick={() => setCurrentCriteriaIndex(index)}
-                  >
-                    {index + 1}
-                  </button>
-                );
-              })}
-            </div>
-
-            {/* Current Criteria */}
-            {currentCriteria && (
-              <div className="space-y-6">
-                <div className="bg-[var(--bg-secondary)] p-4 rounded-lg">
-                  <div className="flex items-center justify-between mb-2">
-                    <h4 className="font-semibold text-[var(--text-primary)]">
-                      {currentCriteria.name}
-                    </h4>
-                    <Badge variant={currentCriteria.required ? 'error' : 'default'}>
-                      {currentCriteria.required ? t('quality.required', 'Required') : t('quality.optional', 'Optional')}
-                    </Badge>
-                  </div>
-                  <p className="text-sm text-[var(--text-secondary)] mb-3">
-                    {currentCriteria.description}
-                  </p>
-                  <div className="flex items-center space-x-4 text-xs text-[var(--text-tertiary)]">
-                    <span>Weight: {currentCriteria.weight}%</span>
-                    <span>Category: {currentCriteria.category}</span>
-                    <span>Type: {currentCriteria.type}</span>
-                  </div>
-                </div>
-
-                {/* Input Section */}
-                {renderCriteriaInput(currentCriteria)}
-
-                {/* Notes Section */}
-                <Textarea
-                  placeholder={t('quality.inspection.notes_placeholder', 'Add notes for this criteria (optional)...')}
-                  value={currentResult?.notes || ''}
-                  onChange={(e) => {
-                    updateResult(currentCriteria.id, { notes: e.target.value });
-                  }}
-                  rows={3}
-                />
-
-                {/* Navigation */}
-                <div className="flex justify-between">
-                  <Button
-                    variant="outline"
-                    onClick={() => setCurrentCriteriaIndex(Math.max(0, currentCriteriaIndex - 1))}
-                    disabled={currentCriteriaIndex === 0}
-                  >
-                    {t('common.previous', 'Previous')}
-                  </Button>
-                  <Button
-                    variant="primary"
-                    onClick={() => setCurrentCriteriaIndex(Math.min(criteria.length - 1, currentCriteriaIndex + 1))}
-                    disabled={currentCriteriaIndex === criteria.length - 1}
-                  >
-                    {t('common.next', 'Next')}
-                  </Button>
-                </div>
-              </div>
-            )}
-          </TabsContent>
-
-          <TabsContent value="photos" className="space-y-4">
-            <div className="text-center py-8">
-              <Camera className="w-12 h-12 text-[var(--text-tertiary)] mx-auto mb-4" />
-              <p className="text-[var(--text-secondary)] mb-4">
-                {t('quality.photos.description', 'Add photos to document quality issues or evidence')}
-              </p>
-              <Button
-                variant="outline"
-                onClick={() => setShowPhotoModal(true)}
-              >
-                <Upload className="w-4 h-4 mr-2" />
-                {t('quality.photos.upload', 'Upload Photos')}
-              </Button>
-            </div>
-
-            {tempPhotos.length > 0 && (
-              <div className="grid grid-cols-3 gap-4">
-                {tempPhotos.map((photo, index) => (
-                  <div key={index} className="relative">
-                    <img
-                      src={URL.createObjectURL(photo)}
-                      alt={`Quality photo ${index + 1}`}
-                      className="w-full h-32 object-cover rounded-lg"
-                    />
-                    <button
-                      className="absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center"
-                      onClick={() => setTempPhotos(prev => prev.filter((_, i) => i !== index))}
-                    >
-                      �
-                    </button>
-                  </div>
-                ))}
-              </div>
-            )}
-          </TabsContent>
-
-          <TabsContent value="summary" className="space-y-6">
-            {/* Overall Score */}
-            <div className="text-center py-6 bg-[var(--bg-secondary)] rounded-lg">
-              <div className="text-4xl font-bold text-[var(--text-primary)] mb-2">
-                {overallScore.toFixed(1)}/10
-              </div>
-              <div className="text-lg text-[var(--text-secondary)]">
-                {t('quality.summary.overall_score', 'Overall Quality Score')}
-              </div>
-              <Badge
-                variant={overallScore >= 7 ? 'success' : overallScore >= 5 ? 'warning' : 'error'}
-                className="mt-2"
-              >
-                {overallScore >= 7 ? t('quality.status.passed', 'PASSED') : t('quality.status.failed', 'FAILED')}
-              </Badge>
-            </div>
-
-            {/* Results Summary */}
-            <div className="space-y-3">
-              <h4 className="font-medium text-[var(--text-primary)]">
-                {t('quality.summary.results', 'Inspection Results')}
-              </h4>
-              {criteria.map((criterion) => {
-                const result = getCriteriaResult(criterion.id);
-                if (!result) return null;
-
-                const StatusIcon = result.pass ? CheckCircle : XCircle;
-                return (
-                  <div key={criterion.id} className="flex items-center justify-between p-3 bg-[var(--bg-secondary)] rounded">
-                    <div className="flex items-center space-x-3">
-                      <StatusIcon className={`w-5 h-5 ${result.pass ? 'text-green-500' : 'text-red-500'}`} />
-                      <div>
-                        <div className="font-medium text-[var(--text-primary)]">{criterion.name}</div>
-                        <div className="text-sm text-[var(--text-secondary)]">{criterion.category}</div>
-                      </div>
-                    </div>
-                    <div className="text-right">
-                      <div className="font-bold text-[var(--text-primary)]">{result.score}/10</div>
-                      <div className="text-sm text-[var(--text-secondary)]">
-                        Weight: {criterion.weight}%
-                      </div>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-
-            {/* Final Notes */}
-            <Textarea
-              placeholder={t('quality.summary.final_notes', 'Add final notes and recommendations...')}
-              value={inspectionData.finalNotes || ''}
-              onChange={(e) => setInspectionData(prev => ({ ...prev, finalNotes: e.target.value }))}
-              rows={4}
-            />
-          </TabsContent>
-        </Tabs>
-
-        {/* Action Buttons */}
-        <div className="flex justify-between pt-6 border-t border-[var(--border-primary)]">
-          <div className="flex space-x-3">
-            <Button variant="outline" onClick={onCancel}>
-              {t('common.cancel', 'Cancel')}
-            </Button>
-            <Button variant="secondary" onClick={() => onSaveDraft?.(inspectionData)}>
-              {t('quality.actions.save_draft', 'Save Draft')}
-            </Button>
-          </div>
-          <Button
-            variant="primary"
-            onClick={handleComplete}
-            disabled={!isComplete}
-          >
-            {t('quality.actions.complete_inspection', 'Complete Inspection')}
-          </Button>
-        </div>
-
-        {/* Photo Upload Modal */}
-        <Modal
-          isOpen={showPhotoModal}
-          onClose={() => setShowPhotoModal(false)}
-          title={t('quality.photos.upload_title', 'Upload Quality Photos')}
-        >
-          <div className="p-6">
-            <input
-              type="file"
-              accept="image/*"
-              multiple
-              onChange={handlePhotoUpload}
-              className="w-full p-4 border-2 border-dashed border-[var(--border-primary)] rounded-lg"
-            />
-            <p className="text-sm text-[var(--text-secondary)] mt-2">
-              {t('quality.photos.upload_help', 'Select multiple images to upload')}
-            </p>
-            <div className="flex justify-end mt-4">
-              <Button onClick={() => setShowPhotoModal(false)}>
-                {t('common.done', 'Done')}
-              </Button>
-            </div>
-          </div>
-        </Modal>
-      </CardBody>
-    </Card>
-  );
-};
-
-export default QualityInspection;
\ No newline at end of file
diff --git a/frontend/src/components/domain/production/index.ts b/frontend/src/components/domain/production/index.ts
index ca644938..7329c853 100644
--- a/frontend/src/components/domain/production/index.ts
+++ b/frontend/src/components/domain/production/index.ts
@@ -1,12 +1,8 @@
 // Production Domain Components
 export { default as ProductionSchedule } from './ProductionSchedule';
-export { default as BatchTracker } from './BatchTracker';
-export { default as QualityDashboard } from './QualityDashboard';
-export { default as EquipmentManager } from './EquipmentManager';
 export { CreateProductionBatchModal } from './CreateProductionBatchModal';
 export { default as ProductionStatusCard } from './ProductionStatusCard';
 export { default as QualityCheckModal } from './QualityCheckModal';
-export { default as ProcessStageTracker } from './ProcessStageTracker';
 export { default as CompactProcessStageTracker } from './CompactProcessStageTracker';
 export { default as QualityTemplateManager } from './QualityTemplateManager';
 export { CreateQualityTemplateModal } from './CreateQualityTemplateModal';
@@ -14,8 +10,5 @@ export { EditQualityTemplateModal } from './EditQualityTemplateModal';
 
 // Export component props types
 export type { ProductionScheduleProps } from './ProductionSchedule';
-export type { BatchTrackerProps } from './BatchTracker';
-export type { QualityDashboardProps, QualityMetrics } from './QualityDashboard';
-export type { EquipmentManagerProps, Equipment } from './EquipmentManager';
 export type { ProductionStatusCardProps } from './ProductionStatusCard';
 export type { QualityCheckModalProps } from './QualityCheckModal';
\ No newline at end of file
diff --git a/frontend/src/locales/en/production.json b/frontend/src/locales/en/production.json
index 83834a1c..7070dbb7 100644
--- a/frontend/src/locales/en/production.json
+++ b/frontend/src/locales/en/production.json
@@ -21,7 +21,25 @@
     "avg_score": "avg score",
     "top_defects": "top defects",
     "issues": "issues",
-    "defects": "defects"
+    "defects": "defects",
+    "overall_efficiency": "Overall Efficiency",
+    "vs_target_95": "vs target 95%",
+    "average_cost_per_unit": "Average Cost per Unit",
+    "down_3_vs_last_week": "down 3% vs last week",
+    "active_equipment": "Active Equipment",
+    "one_in_maintenance": "1 in maintenance",
+    "excellent_standards": "excellent standards",
+    "yield_performance_leaderboard": "Yield Performance Leaderboard",
+    "product_yield_rankings_trends": "Product yield rankings and trends",
+    "no_yield_data": "No yield data available",
+    "product_leaderboard": "Product Leaderboard",
+    "batches": "batches",
+    "best": "best",
+    "yield_comparison": "Yield Comparison",
+    "weekly_yield_trend": "Weekly Yield Trend",
+    "average_yield": "Average Yield",
+    "best_yield": "Best Yield",
+    "yield_trend": "Yield Trend"
   },
   "status": {
     "pending": "Pending",
@@ -36,7 +54,8 @@
     "maintenance": "Maintenance",
     "down": "Down",
     "passed": "PASSED",
-    "complete": "Complete"
+    "complete": "Complete",
+    "unknown": "Unknown"
   },
   "priority": {
     "low": "Low",
@@ -233,7 +252,14 @@
     "edit": "Edit",
     "delete": "Delete",
     "schedule": "Schedule",
-    "optimize": "Optimize"
+    "optimize": "Optimize",
+    "export_report": "Export Report",
+    "optimize_production": "Optimize Production",
+    "request_beta_access": "Request Beta Access",
+    "join_ai_beta": "Join AI Beta",
+    "optimize_yields": "Optimize Yields",
+    "reduce_waste": "Reduce Waste",
+    "investigate_defects": "Investigate Defects"
   },
   "tabs": {
     "schedule": "Schedule",
@@ -254,9 +280,400 @@
   "messages": {
     "no_batches": "No production batches found",
     "no_active_batches": "No active production batches. Create the first batch to begin.",
+    "no_active_batches_description": "Create a new production batch to start tracking progress.",
+    "no_batches_planned": "No batches planned for today",
     "batch_created": "Production batch created successfully",
     "batch_updated": "Production batch updated successfully",
     "batch_started": "Production batch started",
     "batch_completed": "Production batch completed"
+  },
+  "analytics": {
+    "production_analytics": "Production Analytics",
+    "advanced_insights_professionals_enterprises": "Advanced analytics and insights for professionals and enterprises"
+  },
+  "subscription": {
+    "exclusive_professional_enterprise": "Exclusive content for Professional and Enterprise plans",
+    "advanced_production_analytics_description": "Advanced production analytics are available only for Professional and Enterprise users. Upgrade your plan to access all functionalities.",
+    "upgrade_plan": "Upgrade Plan"
+  },
+  "tabs": {
+    "overview": "Overview",
+    "bakery_operations": "Bakery Operations",
+    "cost_efficiency": "Cost & Efficiency",
+    "quality_assurance": "Quality Assurance",
+    "equipment_maintenance": "Equipment & Maintenance",
+    "ai_insights": "AI Insights"
+  },
+  "schedule": {
+    "todays_summary": "Today's Schedule Summary",
+    "shift_hours_batches_staff": "Shift hours, planned batches, and staff count",
+    "shift_hours": "Shift Hours",
+    "staff_count": "Staff Count",
+    "capacity_utilization": "Capacity Utilization",
+    "planned_batches": "Planned Batches",
+    "active": "Active",
+    "inactive": "Inactive",
+    "finalized": "Finalized",
+    "draft": "Draft",
+    "delayed": "delayed"
+  },
+  "tracker": {
+    "live_batch_tracker": "Live Batch Tracker",
+    "current_batches_status_progress": "Current batches with status, progress bar, and ETA",
+    "progress": "Progress",
+    "pending_start": "Pending Start",
+    "issues": "Issues"
+  },
+  "insights": {
+    "on_time_vs_planned": "Batch completion vs planned schedule",
+    "vs_week_avg": "vs week avg",
+    "target": "Target",
+    "progress_to_target": "Progress to Target",
+    "weekly_trend": "Weekly Trend",
+    "performance_insight": "Performance Insight",
+    "on_time_excellent": "Excellent on-time performance! Keep up the great work.",
+    "on_time_good_room_improvement": "Good performance with room for improvement.",
+    "on_time_needs_attention": "On-time completion needs attention. Review scheduling.",
+    "on_time_critical_delays": "Critical delays detected. Immediate action required.",
+    "batches_on_time": "On Time",
+    "batches_delayed": "Delayed",
+    "avg_delay_minutes": "Avg Delay (min)",
+    "resource_allocation_efficiency": "Monitor resource allocation and efficiency",
+    "resource_breakdown": "Resource Breakdown",
+    "hourly_utilization_pattern": "Hourly Utilization Pattern",
+    "peak_hours": "Peak Hours",
+    "off_peak_optimal": "Off-Peak (Optimal)",
+    "hourly_utilization": "Hourly Utilization"
+  },
+  "cost": {
+    "cost_per_unit_analysis": "Cost Per Unit Analysis",
+    "estimated_vs_actual_costs": "Compare estimated vs actual costs by product",
+    "average_cost_per_unit": "Average Cost per Unit",
+    "total_production_cost": "Total Production Cost",
+    "no_cost_data_available": "No cost data available for analysis",
+    "estimated_vs_actual": "Estimated vs Actual",
+    "product_cost_breakdown": "Product Cost Breakdown",
+    "estimated_cost": "Estimated Cost",
+    "actual_cost": "Actual Cost",
+    "estimated": "Estimated",
+    "actual": "Actual",
+    "variance": "Variance",
+    "cost_distribution": "Cost Distribution",
+    "units_produced": "Units produced",
+    "optimization_opportunity": "Cost Optimization Opportunity",
+    "high_variance_detected": "High cost variance detected in some products. Review pricing and processes.",
+    "costs_within_expected_range": "Costs are within expected range. Continue monitoring for optimization opportunities.",
+    "view_breakdown": "View Breakdown",
+    "waste_cost": "Waste Cost"
+  },
+  "quality": {
+    "waste_defect_tracker": "Waste & Defect Tracker",
+    "waste_sources_trends_costs": "Track waste sources, trends, and cost impact",
+    "total_waste": "Total Waste",
+    "total_defects": "Total Defects",
+    "estimated_cost": "Estimated Cost",
+    "no_waste_data": "No waste data available",
+    "top_waste_sources": "Top Waste Sources",
+    "waste_distribution": "Waste Distribution",
+    "weekly_waste_trend": "Weekly Waste Trend",
+    "waste_percentage": "Waste %",
+    "defect_percentage": "Defect %",
+    "incidents": "incidents",
+    "cost": "cost",
+    "severity": {
+      "low": "Low",
+      "medium": "Medium",
+      "high": "High"
+    },
+    "trend": {
+      "up": "Increasing",
+      "down": "Decreasing",
+      "stable": "Stable"
+    },
+    "defects": {
+      "burnt": "Burnt",
+      "underproofed": "Underproofed",
+      "misshapen": "Misshapen",
+      "color_issues": "Color Issues",
+      "texture_problems": "Texture Problems",
+      "temperature_issues": "Temperature Issues",
+      "expired": "Expired"
+    },
+    "status": {
+      "excellent": "Excellent",
+      "good": "Good",
+      "warning": "Needs Attention",
+      "critical": "Critical"
+    },
+    "recommendations": {
+      "high_waste_detected": "High waste levels detected",
+      "check_temperature_timing": "Check oven temperatures and timing settings for optimal results.",
+      "improvement_opportunity": "Waste Reduction Opportunity",
+      "reduce_waste_target": "Focus on reducing waste to target of {target}.",
+      "maintain_quality_standards": "Continue maintaining excellent quality standards.",
+      "documentation": "Quality Documentation",
+      "photo_documentation_helps": "Photo documentation helps identify root causes of defects.",
+      "critical_defects": "Critical Defects Detected",
+      "immediate_action_required": "High-severity defects require immediate attention and corrective action."
+    },
+    "actions": {
+      "reduce_waste": "Reduce Waste",
+      "focus_on": "Focus on reducing",
+      "investigate_increasing_defects": "Investigate increasing defect trends",
+      "review_process_controls": "Review process controls and training"
+    },
+    "recent_quality_scores": "Recent Quality Scores",
+    "daily_average_quality_trends": "Daily average quality score trends",
+    "daily_quality_score": "Daily Quality Score",
+    "score_distribution": "Score Distribution",
+    "excellent": "Excellent (9-10)",
+    "good": "Good (8-9)",
+    "acceptable": "Acceptable (7-8)",
+    "poor": "Poor (6-7)",
+    "failed": "Failed (<6)",
+    "vs_last_week": "vs last week",
+    "no_quality_data": "No quality data available",
+    "weekly_quality_trends": "Weekly Quality Trends",
+    "excellent_scores": "Excellent",
+    "good_scores": "Good",
+    "needs_improvement": "Needs Improvement",
+    "top_defect_types_24h": "Top Defect Types (Last 24h)",
+    "defect_analysis_cost_impact": "Analyze defect types and their cost impact",
+    "no_defects_detected": "No Defects Detected",
+    "excellent_quality_standards": "Maintaining excellent quality standards across all products.",
+    "defect_breakdown": "Defect Breakdown",
+    "defect_distribution": "Defect Distribution",
+    "top_defects_weekly_trend": "Top Defects - Weekly Trend",
+    "recommended_actions": "Recommended Actions"
+  },
+  "performance": {
+    "excellent": "Excellent",
+    "good": "Good",
+    "average": "Average",
+    "poor": "Poor",
+    "needs_improvement": "Needs Improvement"
+  },
+  "recommendations": {
+    "yield_improvement": "Yield Improvement Opportunity",
+    "focus_on_low_performers": "Focus on improving low-performing products to increase overall efficiency.",
+    "maintain_high_standards": "Continue maintaining high yield standards across all products.",
+    "improve_quality": "Quality Improvement Needed",
+    "focus_consistency": "Focus on improving consistency in production processes.",
+    "excellent_quality": "Excellent Quality Performance",
+    "maintain_standards": "Continue maintaining these high standards."
+  },
+  "common": {
+    "units": "units",
+    "assigned": "assigned",
+    "allocated": "allocated",
+    "available": "available"
+  },
+  "alerts": {
+    "capacity_critical": "Capacity Critical",
+    "capacity_critical_description": "Some resources are at maximum capacity. Consider redistributing workload.",
+    "capacity_high": "High Capacity Utilization",
+    "capacity_high_description": "Monitor closely to prevent bottlenecks."
+  },
+  "mobile": {
+    "optimized_experience": "Mobile Optimized Experience",
+    "swipe_scroll_interact": "Swipe, scroll, and tap to interact with all analytics widgets."
+  },
+  "equipment": {
+    "oven_capacity": "Oven Capacity",
+    "mixer_capacity": "Mixer Capacity",
+    "coming_soon": "Coming Soon",
+    "equipment_analytics_development": "Equipment analytics are currently in development. Advanced monitoring and predictive maintenance features will be available soon."
+  },
+  "ai": {
+    "ai_insights_coming_soon": "AI Insights Coming Soon",
+    "ai_powered_recommendations_development": "AI-powered recommendations and predictive analytics are in development. Join the beta program for early access.",
+    "title": "AI Insights",
+    "subtitle": "AI-powered recommendations and predictions",
+    "stats": {
+      "active_insights": "Active Insights",
+      "high_priority": "High Priority",
+      "potential_savings": "Potential Savings",
+      "avg_confidence": "Avg Confidence"
+    },
+    "status": {
+      "active": "AI monitoring active",
+      "new": "New",
+      "acknowledged": "Acknowledged",
+      "in_progress": "In Progress",
+      "implemented": "Implemented",
+      "dismissed": "Dismissed"
+    },
+    "priority": {
+      "low": "Low",
+      "medium": "Medium",
+      "high": "High",
+      "critical": "Critical"
+    },
+    "impact": {
+      "cost_savings": "Cost Savings",
+      "efficiency_gain": "Efficiency Gain",
+      "quality_improvement": "Quality Improvement",
+      "risk_mitigation": "Risk Mitigation"
+    },
+    "actions": {
+      "train_model": "Train Model",
+      "implement_all": "Implement All",
+      "acknowledge": "Acknowledge",
+      "implement": "Implement"
+    },
+    "confidence": "Confidence",
+    "timeline": "Timeline",
+    "equipment": "Equipment",
+    "high_priority_insights": "High Priority Insights",
+    "all_insights": "All Insights",
+    "last_updated": "Updated 5m ago",
+    "performance": {
+      "summary": "AI Performance Summary",
+      "insights_implemented": "insights implemented this month",
+      "in_savings_identified": "in potential savings identified"
+    },
+    "predictive_maintenance": {
+      "title": "Predictive Maintenance",
+      "subtitle": "AI-powered failure prediction and maintenance optimization",
+      "high_risk": "High Risk Equipment",
+      "estimated_cost": "Estimated Cost",
+      "potential_downtime": "Potential Downtime",
+      "avg_confidence": "Avg Confidence",
+      "high_risk_equipment": "High Risk Equipment",
+      "immediate_attention_required": "Immediate attention required to prevent failures",
+      "predictions": "Maintenance Predictions",
+      "confidence": "Confidence",
+      "risk_score": "Risk Score",
+      "days_until_failure": "Days Until Failure",
+      "condition": "Condition",
+      "current_condition": "Current Condition",
+      "affected_components": "Affected Components",
+      "recommended_actions": "Recommended Actions",
+      "schedule": "Schedule",
+      "details": "View Details",
+      "schedule_all": "Schedule All",
+      "retrain_model": "Retrain Model",
+      "condition_trends": "Equipment Condition Trends",
+      "risk_distribution": "Risk Distribution",
+      "model_status": "ML Model Status",
+      "last_training": "Last training",
+      "yesterday": "yesterday",
+      "accuracy": "Accuracy",
+      "next_training": "Next training",
+      "in_7_days": "in 7 days",
+      "alert_type": {
+        "wear_prediction": "Wear pattern indicates potential failure",
+        "failure_risk": "High failure risk detected",
+        "performance_degradation": "Performance degradation detected",
+        "component_replacement": "Component replacement recommended"
+      }
+    },
+    "severity": {
+      "low": "Low",
+      "medium": "Medium",
+      "high": "High",
+      "critical": "Critical"
+    },
+    "risk": {
+      "low": "Low Risk",
+      "medium": "Medium Risk",
+      "high": "High Risk"
+    }
+  },
+  "equipment": {
+    "title": "Equipment Status",
+    "subtitle": "Monitor equipment health and performance",
+    "status": {
+      "operational": "Operational",
+      "warning": "Warning",
+      "maintenance": "Maintenance",
+      "down": "Down",
+      "equipment_list": "Equipment List",
+      "distribution": "Status Distribution"
+    },
+    "stats": {
+      "total": "Total Equipment",
+      "operational": "Operational",
+      "needs_attention": "Needs Attention",
+      "efficiency": "Efficiency",
+      "avg_efficiency": "Avg Efficiency",
+      "alerts": "Active Alerts",
+      "by_equipment": "by Equipment"
+    },
+    "efficiency": {
+      "title": "Equipment Efficiency",
+      "subtitle": "Monitor performance and optimization opportunities",
+      "average": "Average Efficiency",
+      "current": "Current",
+      "target": "Target",
+      "current_vs_target": "Current vs Target Efficiency",
+      "weekly_trends": "Weekly Efficiency Trends",
+      "by_equipment": "Efficiency by Equipment",
+      "analyze": "Analyze",
+      "optimize": "Optimize",
+      "recommendations": "Efficiency Recommendations",
+      "recommendation_1": "Priority Action",
+      "recommendation_2": "Energy Optimization",
+      "recommendation_3": "Preventive Care",
+      "needs_maintenance": "requires maintenance attention",
+      "optimize_energy_consumption": "Optimize energy consumption during peak hours",
+      "schedule_preventive_maintenance": "Schedule preventive maintenance for all equipment"
+    },
+    "efficiency": "Efficiency",
+    "uptime": "Uptime",
+    "temperature": "Temperature",
+    "energy_consumption": "Energy Consumption",
+    "unread_alerts": "unread alerts",
+    "units_per_hour": "units/hour",
+    "downtime": {
+      "total": "Total Downtime"
+    },
+    "oee": {
+      "overall": "Overall OEE",
+      "breakdown": "OEE Breakdown",
+      "availability": "Availability",
+      "performance": "Performance",
+      "quality": "Quality"
+    },
+    "actions": {
+      "schedule_maintenance": "Schedule Maintenance",
+      "add_task": "Add Task"
+    },
+    "maintenance": {
+      "title": "Maintenance Schedule",
+      "subtitle": "Plan and track maintenance activities",
+      "scheduled": "Scheduled",
+      "overdue": "Overdue",
+      "avg_duration": "Avg Duration",
+      "total_cost": "Total Cost",
+      "overdue_tasks": "Overdue Tasks",
+      "immediate_attention_required": "Immediate attention required",
+      "tasks": "Maintenance Tasks",
+      "duration": "Duration",
+      "cost": "Cost",
+      "technician": "Technician",
+      "this_week": "This Week's Schedule",
+      "insights": {
+        "title": "Maintenance Insights",
+        "completed_this_month": "tasks completed this month",
+        "scheduled_next_week": "tasks scheduled for next week"
+      },
+      "status": {
+        "scheduled": "Scheduled",
+        "in_progress": "In Progress",
+        "completed": "Completed",
+        "overdue": "Overdue"
+      },
+      "type": {
+        "preventive": "Preventive",
+        "corrective": "Corrective",
+        "inspection": "Inspection"
+      }
+    },
+    "alerts": {
+      "maintenance_required": "Maintenance Required",
+      "equipment_in_maintenance": "equipment in maintenance",
+      "active_alerts": "active alerts"
+    }
   }
 }
\ No newline at end of file
diff --git a/frontend/src/locales/es/production.json b/frontend/src/locales/es/production.json
index b48e4b58..efb62385 100644
--- a/frontend/src/locales/es/production.json
+++ b/frontend/src/locales/es/production.json
@@ -1,84 +1,676 @@
 {
-  "title": "Producción",
-  "subtitle": "Gestiona la producción de tu panadería",
-  "production_status": {
-    "PENDING": "Pendiente",
-    "IN_PROGRESS": "En Proceso",
-    "COMPLETED": "Completado",
-    "CANCELLED": "Cancelado",
-    "ON_HOLD": "En Pausa",
-    "QUALITY_CHECK": "Control Calidad",
-    "FAILED": "Fallido"
+  "title": "Gestión de Producción",
+  "subtitle": "Planifica y controla la producción diaria de la panadería",
+  "stats": {
+    "active_batches": "Lotes Activos",
+    "todays_target": "Objetivo de Hoy",
+    "capacity_utilization": "Utilización de Capacidad",
+    "on_time_completion": "Finalización a Tiempo",
+    "quality_score": "Puntuación de Calidad",
+    "total_output": "Producción Total",
+    "efficiency": "Eficiencia",
+    "total_checks": "Controles Totales",
+    "pass_rate": "Tasa de Aprobación",
+    "average_score": "Puntuación Promedio",
+    "failed_checks": "Controles Fallidos",
+    "last_7_days": "Últimos 7 días",
+    "passed": "aprobados",
+    "out_of_10": "de 10",
+    "requiring_action": "Requieren acción",
+    "checks": "controles",
+    "avg_score": "puntuación media",
+    "top_defects": "principales defectos",
+    "issues": "problemas",
+    "defects": "defectos",
+    "overall_efficiency": "Eficiencia General",
+    "vs_target_95": "vs objetivo 95%",
+    "average_cost_per_unit": "Costo Promedio por Unidad",
+    "down_3_vs_last_week": "−3% vs semana pasada",
+    "active_equipment": "Equipos Activos",
+    "one_in_maintenance": "1 en mantenimiento",
+    "excellent_standards": "Estándares excelentes",
+    "planned_batches": "Lotes Planificados",
+    "batches": "lotes",
+    "best": "mejor",
+    "no_yield_data": "No hay datos de rendimiento disponibles",
+    "product_leaderboard": "Tabla de Clasificación de Productos",
+    "yield_comparison": "Comparación de Rendimiento",
+    "weekly_yield_trend": "Tendencia Semanal de Rendimiento",
+    "product_yield_rankings_trends": "Clasificación de rendimiento de productos y tendencias",
+    "average_yield": "Rendimiento Promedio",
+    "best_yield": "Mejor Rendimiento",
+    "yield_trend": "Tendencia de Rendimiento"
   },
-  "production_priority": {
-    "LOW": "Baja",
-    "MEDIUM": "Media",
-    "HIGH": "Alta",
-    "URGENT": "Urgente"
+  "status": {
+    "pending": "Pendiente",
+    "in_progress": "En Proceso",
+    "completed": "Completado",
+    "cancelled": "Cancelado",
+    "on_hold": "En Pausa",
+    "quality_check": "Control de Calidad",
+    "failed": "Fallido",
+    "operational": "Operativo",
+    "warning": "Advertencia",
+    "maintenance": "Mantenimiento",
+    "down": "Fuera de Servicio",
+    "passed": "APROBADO",
+    "complete": "Completo",
+    "unknown": "Desconocido",
+    "excellent": "Excelente",
+    "good": "Bueno",
+    "warning": "Necesita Atención",
+    "critical": "Crítico"
   },
-  "batch_status": {
-    "PLANNED": "Planificado",
-    "IN_PROGRESS": "En Proceso",
-    "COMPLETED": "Completado",
-    "CANCELLED": "Cancelado",
-    "ON_HOLD": "En Pausa"
+  "priority": {
+    "low": "Baja",
+    "medium": "Media",
+    "high": "Alta",
+    "urgent": "Urgente"
   },
-  "quality_check_status": {
-    "PENDING": "Pendiente",
-    "IN_PROGRESS": "En Proceso",
-    "PASSED": "Aprobado",
-    "FAILED": "Reprobado",
-    "REQUIRES_ATTENTION": "Requiere Atención"
-  },
-  "fields": {
+  "batch": {
+    "title": "Lote de Producción",
     "batch_number": "Número de Lote",
-    "production_date": "Fecha de Producción",
+    "product_name": "Nombre del Producto",
     "planned_quantity": "Cantidad Planificada",
     "actual_quantity": "Cantidad Real",
-    "yield_percentage": "Porcentaje de Rendimiento",
-    "priority": "Prioridad",
-    "assigned_staff": "Personal Asignado",
-    "production_notes": "Notas de Producción",
-    "quality_score": "Puntuación de Calidad",
-    "quality_notes": "Notas de Calidad",
-    "defect_rate": "Tasa de Defectos",
-    "rework_required": "Requiere Retrabajo",
-    "waste_quantity": "Cantidad de Desperdicio",
-    "waste_reason": "Razón del Desperdicio",
-    "efficiency": "Eficiencia",
-    "material_cost": "Costo de Materiales",
-    "labor_cost": "Costo de Mano de Obra",
-    "overhead_cost": "Costo Indirecto",
+    "planned_start": "Inicio Planificado",
+    "actual_start": "Inicio Real",
+    "planned_end": "Fin Planificado",
+    "actual_end": "Fin Real",
+    "staff_assigned": "Personal Asignado",
+    "equipment_used": "Equipo Utilizado",
+    "notes": "Notas",
+    "yield_percentage": "Rendimiento",
+    "duration": "Duración",
+    "cost": "Costo",
+    "rush_order": "Pedido Urgente",
+    "actual": "Real",
+    "staff": "Personal",
+    "equipment": "Equipo"
+  },
+  "quality": {
+    "title": "Control de Calidad",
+    "dashboard": {
+      "title": "Panel de Calidad",
+      "subtitle": "Monitorear métricas y tendencias de calidad",
+      "error": "Error al cargar datos de calidad"
+    },
+    "inspection": {
+      "title": "Inspección de Calidad",
+      "notes_placeholder": "Agregar notas para este criterio (opcional)..."
+    },
+    "tabs": {
+      "overview": "Resumen",
+      "by_product": "Por Producto",
+      "categories": "Categorías",
+      "recent": "Reciente",
+      "inspection": "Inspección",
+      "photos": "Fotos",
+      "summary": "Resumen"
+    },
+    "charts": {
+      "weekly_trends": "Tendencias Semanales de Calidad",
+      "placeholder": "El gráfico de tendencias de calidad se mostrará aquí"
+    },
+    "photos": {
+      "description": "Agregar fotos para documentar problemas de calidad o evidencia",
+      "upload": "Subir Fotos",
+      "upload_title": "Subir Fotos de Calidad",
+      "upload_help": "Seleccionar múltiples imágenes para subir"
+    },
+    "summary": {
+      "overall_score": "Puntuación General de Calidad",
+      "results": "Resultados de Inspección",
+      "final_notes": "Agregar notas finales y recomendaciones..."
+    },
+    "actions": {
+      "new_check": "Nuevo Control",
+      "view_trends": "Ver Tendencias",
+      "save_draft": "Guardar Borrador",
+      "complete_inspection": "Completar Inspección",
+      "check_ingredients": "Verificar Ingredientes",
+      "adjust_recipe": "Ajustar Receta",
+      "view_details": "Ver Detalles",
+      "reduce_waste": "Reducir Desperdicios",
+      "focus_on": "Enfocarse en reducir",
+      "investigate_increasing_defects": "Investigar tendencias de defectos crecientes",
+      "review_process_controls": "Revisar controles de proceso y capacitación"
+    },
+    "required": "Obligatorio",
+    "optional": "Opcional",
+    "trends": {
+      "vs_last_week": "vs semana pasada"
+    },
+    "waste_defect_tracker": "Rastreador de Desperdicios y Defectos",
+    "waste_sources_trends_costs": "Rastrear fuentes de desperdicios, tendencias e impacto de costos",
+    "total_waste": "Desperdicio Total",
+    "total_defects": "Defectos Totales",
+    "estimated_cost": "Costo Estimado",
+    "no_waste_data": "No hay datos de desperdicios disponibles",
+    "top_waste_sources": "Principales Fuentes de Desperdicios",
+    "waste_distribution": "Distribución de Desperdicios",
+    "weekly_waste_trend": "Tendencia Semanal de Desperdicios",
+    "waste_percentage": "% Desperdicios",
+    "defect_percentage": "% Defectos",
+    "incidents": "incidentes",
+    "cost": "costo",
+    "severity": {
+      "low": "Bajo",
+      "medium": "Medio",
+      "high": "Alto"
+    },
+    "trend": {
+      "up": "Aumentando",
+      "down": "Disminuyendo",
+      "stable": "Estable"
+    },
+    "defects": {
+      "burnt": "Quemado",
+      "underproofed": "Poco Fermentado",
+      "misshapen": "Deformado",
+      "color_issues": "Problemas de Color",
+      "texture_problems": "Problemas de Textura",
+      "temperature_issues": "Problemas de Temperatura",
+      "expired": "Caducado"
+    },
+    "recommendations": {
+      "high_waste_detected": "Niveles altos de desperdicio detectados",
+      "check_temperature_timing": "Verificar temperaturas del horno y configuraciones de tiempo para resultados óptimos.",
+      "improvement_opportunity": "Oportunidad de Reducción de Desperdicios",
+      "reduce_waste_target": "Enfocarse en reducir desperdicios al objetivo de {target}.",
+      "maintain_quality_standards": "Continuar manteniendo estándares de calidad excelentes.",
+      "documentation": "Documentación de Calidad",
+      "photo_documentation_helps": "La documentación fotográfica ayuda a identificar las causas raíz de los defectos.",
+      "critical_defects": "Defectos Críticos Detectados",
+      "immediate_action_required": "Los defectos de alta gravedad requieren atención inmediata y acción correctiva.",
+      "improve_quality": "Mejora de Calidad Necesaria",
+      "focus_consistency": "Enfocarse en mejorar la consistencia en los procesos de producción.",
+      "excellent_quality": "Excelente Rendimiento de Calidad",
+      "maintain_standards": "Continuar manteniendo estos altos estándares."
+    },
+    "recent_quality_scores": "Puntuaciones de Calidad Recientes",
+    "daily_average_quality_trends": "Tendencias diarias de puntuación promedio de calidad",
+    "daily_quality_score": "Puntuación Diaria de Calidad",
+    "score_distribution": "Distribución de Puntuaciones",
+    "excellent": "Excelente (9-10)",
+    "good": "Bueno (8-9)",
+    "acceptable": "Aceptable (7-8)",
+    "poor": "Pobre (6-7)",
+    "failed": "Fallido (<6)",
+    "vs_last_week": "vs semana pasada",
+    "no_quality_data": "No hay datos de calidad disponibles",
+    "weekly_quality_trends": "Tendencias Semanales de Calidad",
+    "excellent_scores": "Excelente",
+    "good_scores": "Bueno",
+    "needs_improvement": "Necesita Mejora",
+    "top_defect_types_24h": "Principales Tipos de Defectos (Últimas 24h)",
+    "defect_analysis_cost_impact": "Analizar tipos de defectos y su impacto en costos",
+    "no_defects_detected": "No se Detectaron Defectos",
+    "excellent_quality_standards": "Manteniendo estándares de calidad excelentes en todos los productos.",
+    "defect_breakdown": "Desglose de Defectos",
+    "defect_distribution": "Distribución de Defectos",
+    "top_defects_weekly_trend": "Principales Defectos - Tendencia Semanal",
+    "recommended_actions": "Acciones Recomendadas"
+  },
+  "cost": {
+    "title": "Monitor de Costos de Producción",
+    "subtitle": "Rastrear y optimizar costos de producción",
     "total_cost": "Costo Total",
-    "cost_per_unit": "Costo por Unidad"
-  },
-  "actions": {
-    "start_production": "Iniciar Producción",
-    "complete_batch": "Completar Lote",
-    "pause_production": "Pausar Producción",
-    "cancel_batch": "Cancelar Lote",
-    "quality_check": "Control de Calidad",
-    "create_batch": "Crear Lote",
+    "cost_per_unit": "Costo por Unidad",
+    "labor": "Mano de Obra",
+    "materials": "Materiales",
+    "overhead": "Gastos Generales",
+    "energy": "Energía",
+    "breakdown": "Desglose de Costos",
+    "budget_usage": "Uso del Presupuesto",
+    "over_budget": "Sobre Presupuesto",
+    "near_budget": "Cerca del Presupuesto",
+    "on_budget": "Dentro del Presupuesto",
+    "vs_yesterday": "vs ayer",
+    "average_today": "Promedio hoy",
     "view_details": "Ver Detalles",
-    "edit_batch": "Editar Lote",
-    "duplicate_batch": "Duplicar Lote"
-  },
-  "labels": {
-    "current_production": "Producción Actual",
-    "production_queue": "Cola de Producción",
-    "completed_today": "Completado Hoy",
-    "efficiency_rate": "Tasa de Eficiencia",
-    "quality_score": "Puntuación de Calidad",
-    "active_batches": "Lotes Activos",
-    "pending_quality_checks": "Controles de Calidad Pendientes"
-  },
-  "descriptions": {
-    "production_efficiency": "Porcentaje de eficiencia en la producción actual",
-    "quality_average": "Puntuación promedio de calidad en los últimos lotes",
-    "waste_reduction": "Reducción de desperdicio comparado con el mes anterior"
+    "optimize": "Optimizar Costos",
+    "error": "Error al cargar datos de costos",
+    "cost_per_unit_analysis": "Análisis de Costo por Unidad",
+    "estimated_vs_actual_costs": "Comparar costos estimados vs reales por producto",
+    "average_cost_per_unit": "Costo Promedio por Unidad",
+    "total_production_cost": "Costo Total de Producción",
+    "no_cost_data_available": "No hay datos de costos disponibles para análisis",
+    "estimated_vs_actual": "Estimado vs Real",
+    "product_cost_breakdown": "Desglose de Costos por Producto",
+    "estimated_cost": "Costo Estimado",
+    "actual_cost": "Costo Real",
+    "estimated": "Estimado",
+    "actual": "Real",
+    "variance": "Varianza",
+    "cost_distribution": "Distribución de Costos",
+    "units_produced": "Unidades producidas",
+    "optimization_opportunity": "Oportunidad de Optimización de Costos",
+    "high_variance_detected": "Alta varianza de costos detectada en algunos productos. Revisar precios y procesos.",
+    "costs_within_expected_range": "Los costos están dentro del rango esperado. Continuar monitoreando para oportunidades de optimización.",
+    "view_breakdown": "Ver Desglose",
+    "waste_cost": "Costo de Desperdicios"
   },
   "equipment": {
-    "title": "Equipos",
-    "subtitle": "Gestión de maquinaria de producción"
+    "title": "Estado del Equipo",
+    "subtitle": "Monitorear salud y rendimiento del equipo",
+    "manager": {
+      "title": "Gestión de Equipos",
+      "subtitle": "Monitorear y gestionar equipos de producción"
+    },
+    "status": {
+      "operational": "Operativo",
+      "warning": "Advertencia",
+      "maintenance": "Mantenimiento",
+      "down": "Fuera de Servicio"
+    },
+    "stats": {
+      "total": "Total de Equipos",
+      "operational": "Operativo",
+      "needs_attention": "Necesita Atención",
+      "efficiency": "Eficiencia",
+      "avg_efficiency": "Eficiencia Promedio",
+      "alerts": "Alertas Activas"
+    },
+    "filter": {
+      "all": "Todos los Estados"
+    },
+    "tabs": {
+      "overview": "Resumen",
+      "maintenance": "Mantenimiento",
+      "alerts": "Alertas"
+    },
+    "maintenance": {
+      "overdue": "Vencido",
+      "scheduled": "Programado",
+      "last": "Último",
+      "next": "Próximo",
+      "interval": "Intervalo",
+      "history": "Historial",
+      "records": "registros"
+    },
+    "alerts": {
+      "acknowledged": "Reconocidas",
+      "new": "Nuevas",
+      "acknowledge": "Reconocer"
+    },
+    "search": {
+      "placeholder": "Buscar equipos..."
+    },
+    "actions": {
+      "add": "Agregar Equipo",
+      "export": "Exportar",
+      "maintenance": "Mantenimiento",
+      "schedule_maintenance": "Programar Mantenimiento",
+      "view_history": "Ver Historial"
+    },
+    "efficiency": "Eficiencia",
+    "uptime": "Tiempo de Actividad",
+    "location": "Ubicación",
+    "temperature": "Temperatura",
+    "energy_usage": "Uso de Energía",
+    "unread_alerts": "alertas no leídas",
+    "model": "Modelo",
+    "serial": "Número de Serie",
+    "install_date": "Fecha de Instalación",
+    "error": "Error al cargar datos del equipo",
+    "oven_capacity": "Capacidad del Horno",
+    "mixer_capacity": "Capacidad de la Batidora",
+    "coming_soon": "Próximamente",
+    "equipment_analytics_development": "Los análisis de equipos están actualmente en desarrollo. Las funciones avanzadas de monitoreo y mantenimiento predictivo estarán disponibles pronto."
+  },
+  "ai": {
+    "title": "Perspectivas de IA",
+    "subtitle": "Recomendaciones y predicciones impulsadas por IA",
+    "high_impact": "Alto Impacto",
+    "potential_savings": "Ahorros Potenciales",
+    "confidence": "Confianza Promedio",
+    "impact": "IMPACTO",
+    "insights": {
+      "reduce_energy_costs": "Reducir Costos de Energía en 15%",
+      "energy_description": "Ajustar horarios del horno para usar tarifas eléctricas de menor costo. Ahorro estimado: €45/día",
+      "demand_increase": "Aumento de Demanda de Croissants Predicho",
+      "demand_description": "Los datos de clima y eventos sugieren un aumento del 40% en la demanda de croissants este fin de semana",
+      "quality_decline": "Declive en Puntuación de Calidad Detectado",
+      "quality_description": "La calidad del pan ha disminuido un 8% en los últimos 3 días. Verificar niveles de humedad de la harina",
+      "maintenance_due": "Mantenimiento Preventivo Recomendado",
+      "maintenance_description": "La batidora #2 muestra patrones de desgaste temprano. Programar mantenimiento para prevenir averías"
+    },
+    "actions": {
+      "schedule_optimization": "Optimizar Horario",
+      "view_details": "Ver Detalles",
+      "increase_production": "Aumentar Producción",
+      "order_ingredients": "Ordenar Ingredientes",
+      "schedule_maintenance": "Programar Mantenimiento",
+      "view_equipment": "Ver Equipo"
+    },
+    "status": {
+      "active": "Monitoreo de IA activo"
+    },
+    "last_updated": "Actualizado hace 5m",
+    "error": "Perspectivas de IA temporalmente no disponibles",
+    "ai_insights_coming_soon": "Perspectivas de IA Próximamente",
+    "ai_powered_recommendations_development": "Las recomendaciones impulsadas por IA y los análisis predictivos están en desarrollo. Únete al programa beta para acceso temprano."
+  },
+  "actions": {
+    "create_batch": "Crear Lote",
+    "start_batch": "Iniciar Lote",
+    "complete_batch": "Completar Lote",
+    "view_details": "Ver Detalles",
+    "edit": "Editar",
+    "delete": "Eliminar",
+    "schedule": "Programar",
+    "optimize": "Optimizar",
+    "export_report": "Exportar Reporte",
+    "optimize_production": "Optimizar Producción",
+    "analyze_delays": "Analizar Retrasos",
+    "optimize_yields": "Optimizar Rendimientos",
+    "refresh": "Actualizar",
+    "request_beta_access": "Solicitar Acceso Beta",
+    "join_ai_beta": "Unirse al Beta de IA",
+    "reduce_waste": "Reducir Desperdicios",
+    "investigate_defects": "Investigar Defectos"
+  },
+  "tabs": {
+    "schedule": "Horario",
+    "batches": "Lotes de Producción",
+    "quality": "Control de Calidad",
+    "overview": "Resumen",
+    "bakery_operations": "Operaciones de Panadería",
+    "cost_efficiency": "Costo y Eficiencia",
+    "quality_assurance": "Aseguramiento de Calidad",
+    "equipment_maintenance": "Equipo y Mantenimiento",
+    "ai_insights": "Perspectivas de IA"
+  },
+  "forms": {
+    "batch_number": "Número de Lote",
+    "product_selection": "Selección de Producto",
+    "quantity": "Cantidad",
+    "start_time": "Hora de Inicio",
+    "end_time": "Hora de Fin",
+    "priority": "Prioridad",
+    "staff": "Personal Asignado",
+    "equipment": "Equipo",
+    "notes": "Notas de Producción"
+  },
+  "messages": {
+    "no_batches": "No se encontraron lotes de producción",
+    "no_active_batches": "No hay lotes de producción activos. Crea el primer lote para comenzar.",
+    "no_active_batches_description": "Crea un nuevo lote de producción para comenzar a rastrear el progreso.",
+    "no_batches_planned": "No hay lotes planificados para hoy",
+    "batch_created": "Lote de producción creado exitosamente",
+    "batch_updated": "Lote de producción actualizado exitosamente",
+    "batch_started": "Lote de producción iniciado",
+    "batch_completed": "Lote de producción completado"
+  },
+  "analytics": {
+    "production_analytics": "Análisis de Producción",
+    "advanced_insights_professionals_enterprises": "Análisis avanzado y perspectivas para profesionales y empresas"
+  },
+  "subscription": {
+    "exclusive_professional_enterprise": "Contenido exclusivo para planes Professional y Enterprise",
+    "advanced_production_analytics_description": "Los análisis avanzados de producción están disponibles solo para usuarios Professional y Enterprise. Actualiza tu plan para acceder a todas las funcionalidades.",
+    "upgrade_plan": "Actualizar Plan"
+  },
+  "schedule": {
+    "todays_summary": "Resumen de Hoy",
+    "shift_hours_batches_staff": "Horas de turno, lotes planificados y conteo de personal",
+    "shift_hours": "Horas de Turno",
+    "staff_count": "Conteo de Personal",
+    "capacity_utilization": "Utilización de Capacidad",
+    "planned_batches": "Lotes Planificados",
+    "active": "Activo",
+    "inactive": "Inactivo",
+    "finalized": "Finalizado",
+    "draft": "Borrador",
+    "delayed": "retrasado",
+    "staff_capacity": "Capacidad de Personal",
+    "work_stations": "Estaciones de Trabajo"
+  },
+  "tracker": {
+    "live_batch_tracker": "Rastreador de Lotes en Vivo",
+    "current_batches_status_progress": "Lotes actuales con estado, barra de progreso y ETA",
+    "progress": "Progreso",
+    "pending_start": "Inicio Pendiente",
+    "issues": "Problemas"
+  },
+  "insights": {
+    "on_time_vs_planned": "Finalización de lotes vs horario planificado",
+    "vs_week_avg": "vs promedio semanal",
+    "target": "Objetivo",
+    "progress_to_target": "Progreso al Objetivo",
+    "weekly_trend": "Tendencia Semanal",
+    "performance_insight": "Perspectiva de Rendimiento",
+    "on_time_excellent": "¡Excelente rendimiento puntual! Continúa con el gran trabajo.",
+    "on_time_good_room_improvement": "Buen rendimiento con espacio para mejoras.",
+    "on_time_needs_attention": "La finalización puntual necesita atención. Revisar programación.",
+    "on_time_critical_delays": "Retrasos críticos detectados. Se requiere acción inmediata.",
+    "batches_on_time": "A Tiempo",
+    "batches_delayed": "Retrasados",
+    "avg_delay_minutes": "Retraso Promedio (min)",
+    "resource_allocation_efficiency": "Monitorear asignación de recursos y eficiencia",
+    "resource_breakdown": "Desglose de Recursos",
+    "hourly_utilization_pattern": "Patrón de Utilización por Horas",
+    "peak_hours": "Horas Pico",
+    "off_peak_optimal": "Fuera de Pico (Óptimo)",
+    "hourly_utilization": "Utilización por Horas"
+  },
+  "performance": {
+    "excellent": "Excelente",
+    "good": "Bueno",
+    "average": "Promedio",
+    "poor": "Pobre",
+    "needs_improvement": "Necesita Mejora"
+  },
+  "recommendations": {
+    "yield_improvement": "Oportunidad de Mejora de Rendimiento",
+    "focus_on_low_performers": "Enfocarse en mejorar productos de bajo rendimiento para aumentar la eficiencia general.",
+    "maintain_high_standards": "Continuar manteniendo altos estándares de rendimiento en todos los productos."
+  },
+  "common": {
+    "units": "unidades",
+    "assigned": "asignados",
+    "allocated": "asignados",
+    "available": "disponibles"
+  },
+  "alerts": {
+    "capacity_critical": "Capacidad Crítica",
+    "capacity_critical_description": "Algunos recursos están a máxima capacidad. Considerar redistribuir carga de trabajo.",
+    "capacity_high": "Alta Utilización de Capacidad",
+    "capacity_high_description": "Monitorear de cerca para prevenir cuellos de botella."
+  },
+  "mobile": {
+    "optimized_experience": "Experiencia Optimizada para Móvil",
+    "swipe_scroll_interact": "Desliza, desplázate y toca para interactuar con todos los widgets de análisis."
+  },
+  "ai": {
+    "title": "Perspectivas de IA",
+    "subtitle": "Recomendaciones y predicciones impulsadas por IA",
+    "stats": {
+      "active_insights": "Perspectivas Activas",
+      "high_priority": "Alta Prioridad",
+      "potential_savings": "Ahorros Potenciales",
+      "avg_confidence": "Confianza Promedio"
+    },
+    "status": {
+      "active": "Monitoreo IA activo",
+      "new": "Nuevo",
+      "acknowledged": "Reconocido",
+      "in_progress": "En Progreso",
+      "implemented": "Implementado",
+      "dismissed": "Descartado"
+    },
+    "priority": {
+      "low": "Baja",
+      "medium": "Media",
+      "high": "Alta",
+      "critical": "Crítica"
+    },
+    "impact": {
+      "cost_savings": "Ahorro de Costos",
+      "efficiency_gain": "Ganancia de Eficiencia",
+      "quality_improvement": "Mejora de Calidad",
+      "risk_mitigation": "Mitigación de Riesgos"
+    },
+    "actions": {
+      "train_model": "Entrenar Modelo",
+      "implement_all": "Implementar Todo",
+      "acknowledge": "Reconocer",
+      "implement": "Implementar"
+    },
+    "confidence": "Confianza",
+    "timeline": "Cronología",
+    "equipment": "Equipo",
+    "high_priority_insights": "Perspectivas de Alta Prioridad",
+    "all_insights": "Todas las Perspectivas",
+    "last_updated": "Actualizado hace 5m",
+    "performance": {
+      "summary": "Resumen de Rendimiento IA",
+      "insights_implemented": "perspectivas implementadas este mes",
+      "in_savings_identified": "en ahorros potenciales identificados"
+    },
+    "predictive_maintenance": {
+      "title": "Mantenimiento Predictivo",
+      "subtitle": "Predicción de fallos y optimización de mantenimiento impulsada por IA",
+      "high_risk": "Equipos de Alto Riesgo",
+      "estimated_cost": "Costo Estimado",
+      "potential_downtime": "Tiempo de Inactividad Potencial",
+      "avg_confidence": "Confianza Promedio",
+      "high_risk_equipment": "Equipos de Alto Riesgo",
+      "immediate_attention_required": "Se requiere atención inmediata para prevenir fallos",
+      "predictions": "Predicciones de Mantenimiento",
+      "confidence": "Confianza",
+      "risk_score": "Puntuación de Riesgo",
+      "days_until_failure": "Días Hasta Fallo",
+      "condition": "Condición",
+      "current_condition": "Condición Actual",
+      "affected_components": "Componentes Afectados",
+      "recommended_actions": "Acciones Recomendadas",
+      "schedule": "Programar",
+      "details": "Ver Detalles",
+      "schedule_all": "Programar Todo",
+      "retrain_model": "Reentrenar Modelo",
+      "condition_trends": "Tendencias de Condición del Equipo",
+      "risk_distribution": "Distribución de Riesgos",
+      "model_status": "Estado del Modelo ML",
+      "last_training": "Último entrenamiento",
+      "yesterday": "ayer",
+      "accuracy": "Precisión",
+      "next_training": "Próximo entrenamiento",
+      "in_7_days": "en 7 días",
+      "alert_type": {
+        "wear_prediction": "El patrón de desgaste indica fallo potencial",
+        "failure_risk": "Alto riesgo de fallo detectado",
+        "performance_degradation": "Degradación del rendimiento detectada",
+        "component_replacement": "Se recomienda reemplazo de componentes"
+      }
+    },
+    "severity": {
+      "low": "Baja",
+      "medium": "Media",
+      "high": "Alta",
+      "critical": "Crítica"
+    },
+    "risk": {
+      "low": "Riesgo Bajo",
+      "medium": "Riesgo Medio",
+      "high": "Riesgo Alto"
+    }
+  },
+  "equipment": {
+    "title": "Estado del Equipo",
+    "subtitle": "Monitorear salud y rendimiento del equipo",
+    "status": {
+      "operational": "Operacional",
+      "warning": "Advertencia",
+      "maintenance": "Mantenimiento",
+      "down": "Inactivo",
+      "equipment_list": "Lista de Equipos",
+      "distribution": "Distribución de Estados"
+    },
+    "stats": {
+      "total": "Total de Equipos",
+      "operational": "Operacional",
+      "needs_attention": "Necesita Atención",
+      "efficiency": "Eficiencia",
+      "avg_efficiency": "Eficiencia Promedio",
+      "alerts": "Alertas Activas",
+      "by_equipment": "por Equipo"
+    },
+    "efficiency": {
+      "title": "Eficiencia del Equipo",
+      "subtitle": "Monitorear rendimiento y oportunidades de optimización",
+      "average": "Eficiencia Promedio",
+      "current": "Actual",
+      "target": "Objetivo",
+      "current_vs_target": "Eficiencia Actual vs Objetivo",
+      "weekly_trends": "Tendencias Semanales de Eficiencia",
+      "by_equipment": "Eficiencia por Equipo",
+      "analyze": "Analizar",
+      "optimize": "Optimizar",
+      "recommendations": "Recomendaciones de Eficiencia",
+      "recommendation_1": "Acción Prioritaria",
+      "recommendation_2": "Optimización Energética",
+      "recommendation_3": "Cuidado Preventivo",
+      "needs_maintenance": "requiere atención de mantenimiento",
+      "optimize_energy_consumption": "Optimizar consumo energético durante horas pico",
+      "schedule_preventive_maintenance": "Programar mantenimiento preventivo para todos los equipos"
+    },
+    "efficiency": "Eficiencia",
+    "uptime": "Tiempo Activo",
+    "temperature": "Temperatura",
+    "energy_consumption": "Consumo Energético",
+    "unread_alerts": "alertas no leídas",
+    "units_per_hour": "unidades/hora",
+    "downtime": {
+      "total": "Tiempo de Inactividad Total"
+    },
+    "oee": {
+      "overall": "OEE General",
+      "breakdown": "Desglose OEE",
+      "availability": "Disponibilidad",
+      "performance": "Rendimiento",
+      "quality": "Calidad"
+    },
+    "actions": {
+      "schedule_maintenance": "Programar Mantenimiento",
+      "add_task": "Agregar Tarea"
+    },
+    "maintenance": {
+      "title": "Cronograma de Mantenimiento",
+      "subtitle": "Planificar y rastrear actividades de mantenimiento",
+      "scheduled": "Programado",
+      "overdue": "Vencido",
+      "avg_duration": "Duración Promedio",
+      "total_cost": "Costo Total",
+      "overdue_tasks": "Tareas Vencidas",
+      "immediate_attention_required": "Se requiere atención inmediata",
+      "tasks": "Tareas de Mantenimiento",
+      "duration": "Duración",
+      "cost": "Costo",
+      "technician": "Técnico",
+      "this_week": "Cronograma de Esta Semana",
+      "insights": {
+        "title": "Perspectivas de Mantenimiento",
+        "completed_this_month": "tareas completadas este mes",
+        "scheduled_next_week": "tareas programadas para la próxima semana"
+      },
+      "status": {
+        "scheduled": "Programado",
+        "in_progress": "En Progreso",
+        "completed": "Completado",
+        "overdue": "Vencido"
+      },
+      "type": {
+        "preventive": "Preventivo",
+        "corrective": "Correctivo",
+        "inspection": "Inspección"
+      }
+    },
+    "alerts": {
+      "maintenance_required": "Mantenimiento Requerido",
+      "equipment_in_maintenance": "equipos en mantenimiento",
+      "active_alerts": "alertas activas"
+    }
   }
 }
\ No newline at end of file
diff --git a/frontend/src/pages/app/analytics/ProductionAnalyticsPage.tsx b/frontend/src/pages/app/analytics/ProductionAnalyticsPage.tsx
index 64b6db97..cac1e106 100644
--- a/frontend/src/pages/app/analytics/ProductionAnalyticsPage.tsx
+++ b/frontend/src/pages/app/analytics/ProductionAnalyticsPage.tsx
@@ -1,906 +1,51 @@
 import React, { useState } from 'react';
-import { TrendingUp, DollarSign, Activity, AlertTriangle, Settings, CheckCircle, Wrench, Zap, Thermometer, Eye, Clock, CalendarClock, WrenchIcon, BarChart3, Bell, History, Lock } from 'lucide-react';
-import { Card, StatsGrid, Button } from '../../../components/ui';
+import { useTranslation } from 'react-i18next';
+import {
+  Factory,
+  DollarSign,
+  Award,
+  Settings,
+  Brain,
+  Lock,
+  BarChart3,
+  TrendingUp,
+  Target,
+  Zap
+} from 'lucide-react';
 import { PageHeader } from '../../../components/layout';
-import { QualityDashboard } from '../../../components/domain/production';
-import ProductionCostAnalytics from '../../../components/domain/analytics/ProductionCostAnalytics';
-import AIInsightsWidget from '../../../components/domain/dashboard/AIInsightsWidget';
-import EquipmentStatusWidget from '../../../components/domain/dashboard/EquipmentStatusWidget';
-import { Badge } from '../../../components/ui/Badge';
+import { Card, StatsGrid, Button, Tabs } from '../../../components/ui';
 import { useSubscription } from '../../../api/hooks/subscription';
 import { useCurrentTenant } from '../../../stores/tenant.store';
+import { useProductionDashboard } from '../../../api/hooks/production';
 
-// Mock data for equipment (from MaquinariaPage)
-const MOCK_EQUIPMENT = [
-  {
-    id: '1',
-    name: 'Horno Principal #1',
-    type: 'oven',
-    model: 'Miwe Condo CO 4.1212',
-    serialNumber: 'MCO-2021-001',
-    location: 'Área de Horneado - Zona A',
-    status: 'operational',
-    installDate: '2021-03-15',
-    lastMaintenance: '2024-01-15',
-    nextMaintenance: '2024-04-15',
-    maintenanceInterval: 90,
-    temperature: 220,
-    targetTemperature: 220,
-    efficiency: 92,
-    uptime: 98.5,
-    energyUsage: 45.2,
-    utilizationToday: 87,
-    alerts: [],
-    maintenanceHistory: [
-      {
-        id: '1',
-        date: '2024-01-15',
-        type: 'preventive',
-        description: 'Limpieza general y calibración de termostatos',
-        technician: 'Juan Pérez',
-        cost: 150,
-        downtime: 2,
-        partsUsed: ['Filtros de aire', 'Sellos de puerta']
-      }
-    ],
-    specifications: {
-      power: 45,
-      capacity: 24,
-      dimensions: { width: 200, height: 180, depth: 120 },
-      weight: 850
-    }
-  },
-  {
-    id: '2',
-    name: 'Batidora Industrial #2',
-    type: 'mixer',
-    model: 'Hobart HL800',
-    serialNumber: 'HHL-2020-002',
-    location: 'Área de Preparación - Zona B',
-    status: 'warning',
-    installDate: '2020-08-10',
-    lastMaintenance: '2024-01-20',
-    nextMaintenance: '2024-02-20',
-    maintenanceInterval: 30,
-    efficiency: 88,
-    uptime: 94.2,
-    energyUsage: 12.8,
-    utilizationToday: 76,
-    alerts: [
-      {
-        id: '1',
-        type: 'warning',
-        message: 'Vibración inusual detectada en el motor',
-        timestamp: '2024-01-23T10:30:00Z',
-        acknowledged: false
-      },
-      {
-        id: '2',
-        type: 'info',
-        message: 'Mantenimiento programado en 5 días',
-        timestamp: '2024-01-23T08:00:00Z',
-        acknowledged: true
-      }
-    ],
-    maintenanceHistory: [
-      {
-        id: '1',
-        date: '2024-01-20',
-        type: 'corrective',
-        description: 'Reemplazo de correas de transmisión',
-        technician: 'María González',
-        cost: 85,
-        downtime: 4,
-        partsUsed: ['Correa tipo V', 'Rodamientos']
-      }
-    ],
-    specifications: {
-      power: 15,
-      capacity: 80,
-      dimensions: { width: 120, height: 150, depth: 80 },
-      weight: 320
-    }
-  },
-  {
-    id: '3',
-    name: 'Cámara de Fermentación #1',
-    type: 'proofer',
-    model: 'Bongard EUROPA 16.18',
-    serialNumber: 'BEU-2022-001',
-    location: 'Área de Fermentación',
-    status: 'maintenance',
-    installDate: '2022-06-20',
-    lastMaintenance: '2024-01-23',
-    nextMaintenance: '2024-01-24',
-    maintenanceInterval: 60,
-    temperature: 32,
-    targetTemperature: 35,
-    efficiency: 0,
-    uptime: 85.1,
-    energyUsage: 0,
-    utilizationToday: 0,
-    alerts: [
-      {
-        id: '1',
-        type: 'info',
-        message: 'En mantenimiento programado',
-        timestamp: '2024-01-23T06:00:00Z',
-        acknowledged: true
-      }
-    ],
-    maintenanceHistory: [
-      {
-        id: '1',
-        date: '2024-01-23',
-        type: 'preventive',
-        description: 'Mantenimiento programado - sistema de humidificación',
-        technician: 'Carlos Rodríguez',
-        cost: 200,
-        downtime: 8,
-        partsUsed: ['Sensor de humedad', 'Válvulas']
-      }
-    ],
-    specifications: {
-      power: 8,
-      capacity: 16,
-      dimensions: { width: 180, height: 200, depth: 100 },
-      weight: 450
-    }
-  }
-];
-
-// Mock chart data for equipment analytics (from MaquinariaPage)
-const MOCK_CHART_DATA = [
-  {
-    id: 'efficiency',
-    name: 'Eficiencia',
-    type: 'bar' as const,
-    visible: true,
-    color: '#10B981',
-    data: [
-      { x: 1, y: 92, label: 'Horno Principal #1' },
-      { x: 2, y: 88, label: 'Batidora Industrial #2' },
-      { x: 3, y: 0, label: 'Cámara de Fermentación #1' }
-    ]
-  },
-  {
-    id: 'uptime',
-    name: 'Tiempo de Actividad',
-    type: 'line' as const,
-    visible: true,
-    color: '#3B82F6',
-    data: [
-      { x: 1, y: 98.5, label: 'Horno Principal #1' },
-      { x: 2, y: 94.2, label: 'Batidora Industrial #2' },
-      { x: 3, y: 85.1, label: 'Cámara de Fermentación #1' }
-    ]
-  },
-  {
-    id: 'energy',
-    name: 'Consumo Energético',
-    type: 'area' as const,
-    visible: true,
-    color: '#F59E0B',
-    data: [
-      { x: 1, y: 45.2, label: 'Horno Principal #1' },
-      { x: 2, y: 12.8, label: 'Batidora Industrial #2' },
-      { x: 3, y: 0, label: 'Cámara de Fermentación #1' }
-    ]
-  }
-];
-
-const MOCK_MAINTENANCE_CHART_DATA = [
-  {
-    id: 'costs',
-    name: 'Costos de Mantenimiento',
-    type: 'bar' as const,
-    visible: true,
-    color: '#8B5CF6',
-    data: [
-      { x: 1, y: 150, label: 'Horno Principal #1' },
-      { x: 2, y: 85, label: 'Batidora Industrial #2' },
-      { x: 3, y: 200, label: 'Cámara de Fermentación #1' }
-    ]
-  },
-  {
-    id: 'downtime',
-    name: 'Tiempo de Inactividad',
-    type: 'line' as const,
-    visible: true,
-    color: '#EF4444',
-    data: [
-      { x: 1, y: 2, label: 'Horno Principal #1' },
-      { x: 2, y: 4, label: 'Batidora Industrial #2' },
-      { x: 3, y: 8, label: 'Cámara de Fermentación #1' }
-    ]
-  }
-];
-
-const MOCK_STATUS_CHART_DATA = [
-  {
-    id: 'status',
-    name: 'Estado de Equipos',
-    type: 'pie' as const,
-    visible: true,
-    color: '#10B981',
-    data: [
-      { x: 'Operativo', y: 1, label: 'Operativo' },
-      { x: 'Advertencia', y: 1, label: 'Advertencia' },
-      { x: 'Mantenimiento', y: 1, label: 'Mantenimiento' }
-    ]
-  }
-];
-
-// Import statement is at the top of the file - already included
-
-// The enhanced ProductionCostMonitor is now imported from the components directory
-
-
-
-// Helper functions for equipment status
-const getStatusConfig = (status: string) => {
-  const configs = {
-    operational: { color: '#10B981', text: 'Operativo', icon: CheckCircle },
-    warning: { color: '#F59E0B', text: 'Advertencia', icon: AlertTriangle },
-    maintenance: { color: '#3B82F6', text: 'Mantenimiento', icon: Wrench },
-    down: { color: '#EF4444', text: 'Fuera de Servicio', icon: AlertTriangle }
-  };
-  return configs[status as keyof typeof configs] || { color: '#6B7280', text: 'Desconocido', icon: Settings };
-};
-
-const getTypeIcon = (type: string) => {
-  const icons = {
-    oven: Thermometer,
-    mixer: Activity,
-    proofer: Settings,
-    freezer: Zap,
-    packaging: Settings,
-    other: Settings
-  };
-  return icons[type as keyof typeof icons] || Settings;
-};
-
-const getStatusColor = (status: string): string => {
-  const statusColors: { [key: string]: string } = {
-    operational: '#10B981', // green-500
-    warning: '#F59E0B', // amber-500
-    maintenance: '#3B82F6', // blue-500
-    down: '#EF4444' // red-500
-  };
-  return statusColors[status] || '#6B7280'; // gray-500 as default
-};
-
-// Equipment Analytics Component (from MaquinariaPage)
-const EquipmentAnalytics: React.FC = () => {
-  const [activeTab, setActiveTab] = useState('overview');
-  const [searchTerm, setSearchTerm] = useState('');
-  const [statusFilter, setStatusFilter] = useState('all');
-
-  // Filter equipment based on search and status
-  const filteredEquipment = MOCK_EQUIPMENT.filter(eq => {
-    const matchesSearch = !searchTerm ||
-      eq.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      eq.location.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      eq.type.toLowerCase().includes(searchTerm.toLowerCase());
-
-    const matchesStatus = statusFilter === 'all' || eq.status === statusFilter;
-
-    return matchesSearch && matchesStatus;
-  });
-
-  // Calculate equipment stats
-  const equipmentStats = {
-    total: MOCK_EQUIPMENT.length,
-    operational: MOCK_EQUIPMENT.filter(e => e.status === 'operational').length,
-    warning: MOCK_EQUIPMENT.filter(e => e.status === 'warning').length,
-    maintenance: MOCK_EQUIPMENT.filter(e => e.status === 'maintenance').length,
-    down: MOCK_EQUIPMENT.filter(e => e.status === 'down').length,
-    avgEfficiency: MOCK_EQUIPMENT.reduce((sum, e) => sum + e.efficiency, 0) / MOCK_EQUIPMENT.length,
-    avgUptime: MOCK_EQUIPMENT.reduce((sum, e) => sum + e.uptime, 0) / MOCK_EQUIPMENT.length,
-    totalAlerts: MOCK_EQUIPMENT.reduce((sum, e) => sum + e.alerts.filter(a => !a.acknowledged).length, 0)
-  };
-
-  return (
-    <div className="space-y-6">
-      {/* Stats Grid */}
-      <StatsGrid
-        stats={[
-          {
-            title: 'Total Equipos',
-            value: equipmentStats.total,
-            icon: Settings,
-            variant: 'default' as const
-          },
-          {
-            title: 'Operativo',
-            value: equipmentStats.operational,
-            icon: CheckCircle,
-            variant: 'success' as const,
-            subtitle: `${((equipmentStats.operational / equipmentStats.total) * 100).toFixed(1)}%`
-          },
-          {
-            title: 'Eficiencia Promedio',
-            value: `${equipmentStats.avgEfficiency.toFixed(1)}%`,
-            icon: TrendingUp,
-            variant: equipmentStats.avgEfficiency >= 90 ? 'success' as const : 'warning' as const
-          },
-          {
-            title: 'Alertas Activas',
-            value: equipmentStats.totalAlerts,
-            icon: Bell,
-            variant: equipmentStats.totalAlerts === 0 ? 'success' as const : 'error' as const
-          }
-        ]}
-        columns={4}
-      />
-
-      {/* Tabs for different views */}
-      <Card className="p-0">
-        <div className="border-b border-[var(--border-primary)]">
-          <nav className="-mb-px flex space-x-8 px-6 pt-4">
-            <button
-              onClick={() => setActiveTab('overview')}
-              className={`py-2 px-1 border-b-2 font-medium text-sm ${
-                activeTab === 'overview'
-                  ? 'border-orange-500 text-[var(--color-primary)]'
-                  : 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
-              }`}
-            >
-              <BarChart3 className="w-4 h-4 inline mr-2" />
-              Resumen
-            </button>
-            <button
-              onClick={() => setActiveTab('maintenance')}
-              className={`py-2 px-1 border-b-2 font-medium text-sm ${
-                activeTab === 'maintenance'
-                  ? 'border-orange-500 text-[var(--color-primary)]'
-                  : 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
-              }`}
-            >
-              <CalendarClock className="w-4 h-4 inline mr-2" />
-              Mantenimiento
-            </button>
-            <button
-              onClick={() => setActiveTab('status')}
-              className={`py-2 px-1 border-b-2 font-medium text-sm ${
-                activeTab === 'status'
-                  ? 'border-orange-500 text-[var(--color-primary)]'
-                  : 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
-              }`}
-            >
-              <WrenchIcon className="w-4 h-4 inline mr-2" />
-              Estado
-            </button>
-          </nav>
-        </div>
-
-        <div className="p-6">
-          {/* Overview Tab */}
-          {activeTab === 'overview' && (
-            <div className="space-y-6">
-              {/* Charts for Equipment Analytics */}
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                <Card className="p-4">
-                  <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Eficiencia y Tiempo de Actividad</h3>
-                  <div className="h-64">
-                    <canvas ref={(canvas) => {
-                      if (canvas) {
-                        const ctx = canvas.getContext('2d');
-                        if (ctx) {
-                          // Set canvas size
-                          canvas.width = canvas.clientWidth;
-                          canvas.height = canvas.clientHeight;
-                          
-                          // Clear canvas
-                          ctx.clearRect(0, 0, canvas.width, canvas.height);
-                          
-                          // Draw simple bar chart for efficiency
-                          const padding = 40;
-                          const chartWidth = canvas.width - 2 * padding;
-                          const chartHeight = canvas.height - 2 * padding;
-                          
-                          // Get max value for scaling
-                          const maxValue = Math.max(...MOCK_CHART_DATA[0].data.map(d => d.y));
-                          
-                          // Draw bars
-                          MOCK_CHART_DATA[0].data.forEach((point, index) => {
-                            const barWidth = chartWidth / MOCK_CHART_DATA[0].data.length - 10;
-                            const x = padding + index * (chartWidth / MOCK_CHART_DATA[0].data.length) + 5;
-                            const barHeight = (point.y / maxValue) * chartHeight;
-                            const y = padding + chartHeight - barHeight;
-                            
-                            // Bar
-                            ctx.fillStyle = MOCK_CHART_DATA[0].color;
-                            ctx.fillRect(x, y, barWidth, barHeight);
-                            
-                            // Label
-                            ctx.fillStyle = '#374151';
-                            ctx.font = '12px sans-serif';
-                            ctx.textAlign = 'center';
-                            ctx.fillText(point.label, x + barWidth / 2, canvas.height - 10);
-                            ctx.fillText(point.y.toString(), x + barWidth / 2, y - 5);
-                          });
-                          
-                          // Axes
-                          ctx.strokeStyle = '#374151';
-                          ctx.lineWidth = 2;
-                          ctx.beginPath();
-                          ctx.moveTo(padding, padding);
-                          ctx.lineTo(padding, padding + chartHeight);
-                          ctx.lineTo(padding + chartWidth, padding + chartHeight);
-                          ctx.stroke();
-                        }
-                      }
-                    }} className="w-full h-full" />
-                  </div>
-                </Card>
-                
-                <Card className="p-4">
-                  <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Estado de Equipos</h3>
-                  <div className="h-64">
-                    <canvas ref={(canvas) => {
-                      if (canvas) {
-                        const ctx = canvas.getContext('2d');
-                        if (ctx) {
-                          // Set canvas size
-                          canvas.width = canvas.clientWidth;
-                          canvas.height = canvas.clientHeight;
-                          
-                          // Clear canvas
-                          ctx.clearRect(0, 0, canvas.width, canvas.height);
-                          
-                          // Draw pie chart for status distribution
-                          const centerX = canvas.width / 2;
-                          const centerY = canvas.height / 2;
-                          const radius = Math.min(canvas.width, canvas.height) / 3;
-                          
-                          const total = MOCK_STATUS_CHART_DATA[0].data.reduce((sum, point) => sum + point.y, 0);
-                          let startAngle = -Math.PI / 2;
-                          
-                          const colors = ['#10B981', '#F59E0B', '#3B82F6'];
-                          
-                          MOCK_STATUS_CHART_DATA[0].data.forEach((point, index) => {
-                            const sliceAngle = (point.y / total) * 2 * Math.PI;
-                            const color = colors[index];
-                            
-                            ctx.fillStyle = color;
-                            ctx.beginPath();
-                            ctx.moveTo(centerX, centerY);
-                            ctx.arc(centerX, centerY, radius, startAngle, startAngle + sliceAngle);
-                            ctx.closePath();
-                            ctx.fill();
-                            
-                            // Draw slice border
-                            ctx.strokeStyle = '#ffffff';
-                            ctx.lineWidth = 2;
-                            ctx.stroke();
-                            
-                            // Draw labels
-                            const labelAngle = startAngle + sliceAngle / 2;
-                            const labelX = centerX + Math.cos(labelAngle) * (radius + 30);
-                            const labelY = centerY + Math.sin(labelAngle) * (radius + 30);
-                            
-                            ctx.fillStyle = '#374151';
-                            ctx.font = '12px sans-serif';
-                            ctx.textAlign = 'center';
-                            ctx.fillText(point.x, labelX, labelY);
-                            
-                            const percentage = ((point.y / total) * 100).toFixed(1);
-                            ctx.fillText(`${percentage}%`, labelX, labelY + 15);
-                            
-                            startAngle += sliceAngle;
-                          });
-                        }
-                      }
-                    }} className="w-full h-full" />
-                  </div>
-                </Card>
-              </div>
-
-              {/* Controls */}
-              <Card className="p-4">
-                <div className="flex flex-col sm:flex-row gap-4">
-                  <div className="flex-1">
-                    <div className="relative">
-                      <Settings className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-[var(--text-tertiary)]" />
-                      <input
-                        placeholder="Buscar equipos..."
-                        value={searchTerm}
-                        onChange={(e) => setSearchTerm(e.target.value)}
-                        className="w-full pl-10 pr-4 py-2 border border-[var(--border-primary)] rounded-md bg-[var(--bg-primary)] text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent"
-                      />
-                    </div>
-                  </div>
-                  <div className="flex items-center space-x-2">
-                    <Wrench className="w-4 h-4 text-[var(--text-tertiary)]" />
-                    <select
-                      value={statusFilter}
-                      onChange={(e) => setStatusFilter(e.target.value)}
-                      className="px-3 py-2 border border-[var(--border-primary)] rounded-md bg-[var(--bg-primary)] text-[var(--text-primary)]"
-                    >
-                      <option value="all">Todos los estados</option>
-                      <option value="operational">Operativo</option>
-                      <option value="warning">Advertencia</option>
-                      <option value="maintenance">Mantenimiento</option>
-                      <option value="down">Fuera de Servicio</option>
-                    </select>
-                  </div>
-                </div>
-              </Card>
-
-              {/* Equipment Grid */}
-              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-                {filteredEquipment.map((equipment) => {
-                  const statusConfig = getStatusConfig(equipment.status);
-                  const TypeIcon = getTypeIcon(equipment.type);
-
-                  return (
-                    <Card key={equipment.id} className="p-4">
-                      <div className="flex items-start justify-between">
-                        <div className="flex items-center space-x-3">
-                          <div 
-                            className="w-3 h-3 rounded-full"
-                            style={{ backgroundColor: statusConfig.color }}
-                          />
-                          <div>
-                            <h3 className="font-semibold text-[var(--text-primary)]">{equipment.name}</h3>
-                            <p className="text-sm text-[var(--text-secondary)]">{equipment.location}</p>
-                          </div>
-                        </div>
-                        <TypeIcon className="w-5 h-5 text-[var(--text-tertiary)]" />
-                      </div>
-                      
-                      <div className="mt-4 grid grid-cols-2 gap-3">
-                        <div>
-                          <p className="text-xs text-[var(--text-secondary)]">Eficiencia</p>
-                          <p className="font-semibold text-[var(--text-primary)]">{equipment.efficiency}%</p>
-                        </div>
-                        <div>
-                          <p className="text-xs text-[var(--text-secondary)]">Tiempo Activo</p>
-                          <p className="font-semibold text-[var(--text-primary)]">{equipment.uptime.toFixed(1)}%</p>
-                        </div>
-                        <div>
-                          <p className="text-xs text-[var(--text-secondary)]">Consumo</p>
-                          <p className="font-semibold text-[var(--text-primary)]">{equipment.energyUsage} kW</p>
-                        </div>
-                        <div>
-                          <p className="text-xs text-[var(--text-secondary)]">Utilización Hoy</p>
-                          <p className="font-semibold text-[var(--text-primary)]">{equipment.utilizationToday}%</p>
-                        </div>
-                      </div>
-                      
-                      <div className="mt-4 flex justify-between">
-                        <Badge 
-                          variant={equipment.status === 'operational' ? 'success' : 
-                                 equipment.status === 'warning' ? 'warning' : 
-                                 equipment.status === 'maintenance' ? 'info' : 'error'}
-                        >
-                          {statusConfig.text}
-                        </Badge>
-                        <Button variant="outline" size="sm">
-                          <Eye className="w-4 h-4 mr-1" />
-                          Ver
-                        </Button>
-                      </div>
-                    </Card>
-                  );
-                })}
-              </div>
-            </div>
-          )}
-
-          {/* Maintenance Tab */}
-          {activeTab === 'maintenance' && (
-            <div className="space-y-6">
-              {/* Maintenance Charts */}
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                <Card className="p-4">
-                  <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Costos de Mantenimiento</h3>
-                  <div className="h-64">
-                    <canvas ref={(canvas) => {
-                      if (canvas) {
-                        const ctx = canvas.getContext('2d');
-                        if (ctx) {
-                          // Set canvas size
-                          canvas.width = canvas.clientWidth;
-                          canvas.height = canvas.clientHeight;
-                          
-                          // Clear canvas
-                          ctx.clearRect(0, 0, canvas.width, canvas.height);
-                          
-                          // Draw bar chart for maintenance costs
-                          const padding = 40;
-                          const chartWidth = canvas.width - 2 * padding;
-                          const chartHeight = canvas.height - 2 * padding;
-                          
-                          // Get max value for scaling
-                          const maxValue = Math.max(...MOCK_MAINTENANCE_CHART_DATA[0].data.map(d => d.y));
-                          
-                          // Draw bars
-                          MOCK_MAINTENANCE_CHART_DATA[0].data.forEach((point, index) => {
-                            const barWidth = chartWidth / MOCK_MAINTENANCE_CHART_DATA[0].data.length - 10;
-                            const x = padding + index * (chartWidth / MOCK_MAINTENANCE_CHART_DATA[0].data.length) + 5;
-                            const barHeight = (point.y / maxValue) * chartHeight;
-                            const y = padding + chartHeight - barHeight;
-                            
-                            // Bar
-                            ctx.fillStyle = MOCK_MAINTENANCE_CHART_DATA[0].color;
-                            ctx.fillRect(x, y, barWidth, barHeight);
-                            
-                            // Label
-                            ctx.fillStyle = '#374151';
-                            ctx.font = '12px sans-serif';
-                            ctx.textAlign = 'center';
-                            ctx.fillText(point.label, x + barWidth / 2, canvas.height - 10);
-                            ctx.fillText(`€${point.y}`, x + barWidth / 2, y - 5);
-                          });
-                          
-                          // Axes
-                          ctx.strokeStyle = '#374151';
-                          ctx.lineWidth = 2;
-                          ctx.beginPath();
-                          ctx.moveTo(padding, padding);
-                          ctx.lineTo(padding, padding + chartHeight);
-                          ctx.lineTo(padding + chartWidth, padding + chartHeight);
-                          ctx.stroke();
-                        }
-                      }
-                    }} className="w-full h-full" />
-                  </div>
-                </Card>
-                
-                <Card className="p-4">
-                  <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Tiempo de Inactividad</h3>
-                  <div className="h-64">
-                    <canvas ref={(canvas) => {
-                      if (canvas) {
-                        const ctx = canvas.getContext('2d');
-                        if (ctx) {
-                          // Set canvas size
-                          canvas.width = canvas.clientWidth;
-                          canvas.height = canvas.clientHeight;
-                          
-                          // Clear canvas
-                          ctx.clearRect(0, 0, canvas.width, canvas.height);
-                          
-                          // Draw line chart for downtime
-                          const padding = 40;
-                          const chartWidth = canvas.width - 2 * padding;
-                          const chartHeight = canvas.height - 2 * padding;
-                          
-                          // Get max value for scaling
-                          const maxValue = Math.max(...MOCK_MAINTENANCE_CHART_DATA[1].data.map(d => d.y));
-                          
-                          // Draw line
-                          ctx.strokeStyle = MOCK_MAINTENANCE_CHART_DATA[1].color;
-                          ctx.lineWidth = 2;
-                          ctx.beginPath();
-                          
-                          MOCK_MAINTENANCE_CHART_DATA[1].data.forEach((point, index) => {
-                            const x = padding + (index * chartWidth) / (MOCK_MAINTENANCE_CHART_DATA[1].data.length - 1);
-                            const y = padding + chartHeight - ((point.y / maxValue) * chartHeight);
-                            
-                            if (index === 0) {
-                              ctx.moveTo(x, y);
-                            } else {
-                              ctx.lineTo(x, y);
-                            }
-                            
-                            // Draw points
-                            ctx.fillStyle = MOCK_MAINTENANCE_CHART_DATA[1].color;
-                            ctx.beginPath();
-                            ctx.arc(x, y, 4, 0, 2 * Math.PI);
-                            ctx.fill();
-                            
-                            // Labels
-                            ctx.fillStyle = '#374151';
-                            ctx.font = '12px sans-serif';
-                            ctx.textAlign = 'center';
-                            ctx.fillText(point.label, x, canvas.height - 10);
-                            ctx.fillText(`${point.y}h`, x, y - 10);
-                          });
-                          
-                          ctx.stroke();
-                          
-                          // Axes
-                          ctx.strokeStyle = '#374151';
-                          ctx.lineWidth = 2;
-                          ctx.beginPath();
-                          ctx.moveTo(padding, padding);
-                          ctx.lineTo(padding, padding + chartHeight);
-                          ctx.lineTo(padding + chartWidth, padding + chartHeight);
-                          ctx.stroke();
-                        }
-                      }
-                    }} className="w-full h-full" />
-                  </div>
-                </Card>
-              </div>
-
-              {/* Maintenance Schedule */}
-              <Card className="p-4">
-                <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Programación de Mantenimiento</h3>
-                <div className="space-y-4">
-                  {MOCK_EQUIPMENT.map((equipment) => {
-                    const nextMaintenanceDate = new Date(equipment.nextMaintenance);
-                    const daysUntilMaintenance = Math.ceil((nextMaintenanceDate.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24));
-                    const isOverdue = daysUntilMaintenance < 0;
-                    
-                    return (
-                      <div key={equipment.id} className="p-4 bg-[var(--bg-secondary)] rounded-lg border-l-4 border-blue-500">
-                        <div className="flex items-center justify-between">
-                          <div>
-                            <h4 className="font-semibold text-[var(--text-primary)]">{equipment.name}</h4>
-                            <p className="text-sm text-[var(--text-secondary)]">{equipment.model}</p>
-                          </div>
-                          <div className="text-right">
-                            <p className={`font-medium ${isOverdue ? 'text-red-500' : 'text-[var(--text-primary)]'}`}>
-                              {isOverdue ? 'Atrasado' : 'Programado'}
-                            </p>
-                            <p className="text-sm text-[var(--text-secondary)]">
-                              {nextMaintenanceDate.toLocaleDateString('es-ES')}
-                            </p>
-                          </div>
-                        </div>
-                        <div className="mt-3 flex items-center justify-between">
-                          <div className="text-sm">
-                            <span className="text-[var(--text-secondary)]">Técnico: </span>
-                            <span className="text-[var(--text-primary)]">Juan Pérez</span>
-                          </div>
-                          <Button 
-                            variant="outline" 
-                            size="sm"
-                          >
-                            <CalendarClock className="w-4 h-4 mr-2" />
-                            Reagendar
-                          </Button>
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-              </Card>
-            </div>
-          )}
-
-          {/* Status Tab */}
-          {activeTab === 'status' && (
-            <div className="space-y-6">
-              {/* Status Overview */}
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-                <Card className="p-4 text-center">
-                  <div className="text-3xl font-bold text-green-500">{equipmentStats.operational}</div>
-                  <div className="text-sm text-[var(--text-secondary)]">Operativo</div>
-                </Card>
-                <Card className="p-4 text-center">
-                  <div className="text-3xl font-bold text-yellow-500">{equipmentStats.warning}</div>
-                  <div className="text-sm text-[var(--text-secondary)]">Advertencia</div>
-                </Card>
-                <Card className="p-4 text-center">
-                  <div className="text-3xl font-bold text-blue-500">{equipmentStats.maintenance}</div>
-                  <div className="text-sm text-[var(--text-secondary)]">Mantenimiento</div>
-                </Card>
-                <Card className="p-4 text-center">
-                  <div className="text-3xl font-bold text-red-500">{equipmentStats.down}</div>
-                  <div className="text-sm text-[var(--text-secondary)]">Fuera de Servicio</div>
-                </Card>
-              </div>
-
-              {/* Active Alerts */}
-              <Card className="p-4">
-                <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Alertas Activas</h3>
-                <div className="space-y-3">
-                  {MOCK_EQUIPMENT.flatMap(eq => 
-                    eq.alerts.filter(a => !a.acknowledged).map(alert => (
-                      <div 
-                        key={`${eq.id}-${alert.id}`} 
-                        className={`p-3 rounded border-l-4 ${
-                          alert.type === 'critical' ? 'bg-red-50 border-red-500 dark:bg-red-900/20' :
-                          alert.type === 'warning' ? 'bg-orange-50 border-orange-500 dark:bg-orange-900/20' :
-                          'bg-blue-50 border-blue-500 dark:bg-blue-900/20'
-                        }`}
-                      >
-                        <div className="flex items-center justify-between">
-                          <div className="flex items-center space-x-2">
-                            <AlertTriangle className={`w-4 h-4 ${
-                              alert.type === 'critical' ? 'text-red-500' :
-                              alert.type === 'warning' ? 'text-orange-500' : 'text-blue-500'
-                            }`} />
-                            <span className="font-medium text-[var(--text-primary)]">{eq.name}</span>
-                          </div>
-                          <span className="text-xs text-[var(--text-secondary)]">
-                            {new Date(alert.timestamp).toLocaleString('es-ES')}
-                          </span>
-                        </div>
-                        <p className="text-[var(--text-secondary)] mt-2">{alert.message}</p>
-                        <div className="flex justify-end mt-3">
-                          <Button 
-                            variant="outline" 
-                            size="sm"
-                          >
-                            Acknowledge
-                          </Button>
-                        </div>
-                      </div>
-                    ))
-                  )}
-                  
-                  {MOCK_EQUIPMENT.flatMap(eq => eq.alerts.filter(a => !a.acknowledged)).length === 0 && (
-                    <div className="text-center py-8">
-                      <CheckCircle className="mx-auto h-12 w-12 text-green-500" />
-                      <h3 className="mt-2 text-lg font-medium text-[var(--text-primary)]">No hay alertas activas</h3>
-                      <p className="mt-1 text-[var(--text-secondary)]">Todos los equipos están funcionando correctamente</p>
-                    </div>
-                  )}
-                </div>
-              </Card>
-
-              {/* Equipment Status Details */}
-              <Card className="p-4">
-                <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Detalles de Estado de Equipos</h3>
-                <div className="space-y-4">
-                  {MOCK_EQUIPMENT.map((equipment) => {
-                    const statusConfig = getStatusConfig(equipment.status);
-                    
-                    return (
-                      <div key={equipment.id} className="p-4 bg-[var(--bg-secondary)] rounded-lg">
-                        <div className="flex items-center justify-between">
-                          <div className="flex items-center space-x-3">
-                            <div 
-                              className="w-3 h-3 rounded-full"
-                              style={{ backgroundColor: statusConfig.color }}
-                            />
-                            <div>
-                              <h4 className="font-semibold text-[var(--text-primary)]">{equipment.name}</h4>
-                              <p className="text-sm text-[var(--text-secondary)]">{equipment.model}</p>
-                            </div>
-                          </div>
-                          <Badge 
-                            variant={equipment.status === 'operational' ? 'success' : 
-                                   equipment.status === 'warning' ? 'warning' : 
-                                   equipment.status === 'maintenance' ? 'info' : 'error'}
-                          >
-                            {statusConfig.text}
-                          </Badge>
-                        </div>
-                        
-                        <div className="mt-4 grid grid-cols-2 md:grid-cols-4 gap-4">
-                          <div className="text-center">
-                            <div className="text-lg font-bold text-[var(--text-primary)]">{equipment.efficiency}%</div>
-                            <div className="text-xs text-[var(--text-secondary)]">Eficiencia</div>
-                          </div>
-                          <div className="text-center">
-                            <div className="text-lg font-bold text-[var(--text-primary)]">{equipment.uptime.toFixed(1)}%</div>
-                            <div className="text-xs text-[var(--text-secondary)]">Tiempo de Actividad</div>
-                          </div>
-                          <div className="text-center">
-                            <div className="text-lg font-bold text-[var(--text-primary)]">{equipment.energyUsage} kW</div>
-                            <div className="text-xs text-[var(--text-secondary)]">Consumo Energético</div>
-                          </div>
-                          <div className="text-center">
-                            <div className="text-lg font-bold text-[var(--text-primary)]">{equipment.utilizationToday}%</div>
-                            <div className="text-xs text-[var(--text-secondary)]">Utilización Hoy</div>
-                          </div>
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-              </Card>
-            </div>
-          )}
-        </div>
-      </Card>
-    </div>
-  );
-};
+// Import all analytics widgets
+import {
+  TodaysScheduleSummaryWidget,
+  LiveBatchTrackerWidget,
+  OnTimeCompletionWidget,
+  CapacityUtilizationWidget,
+  CostPerUnitWidget,
+  WasteDefectTrackerWidget,
+  YieldPerformanceWidget,
+  QualityScoreTrendsWidget,
+  TopDefectTypesWidget,
+  EquipmentStatusWidget,
+  MaintenanceScheduleWidget,
+  EquipmentEfficiencyWidget,
+  AIInsightsWidget,
+  PredictiveMaintenanceWidget
+} from '../../../components/analytics/production/widgets';
 
 const ProductionAnalyticsPage: React.FC = () => {
-  const [activeTab, setActiveTab] = useState('overview');
+  const { t } = useTranslation('production');
   const { canAccessAnalytics } = useSubscription();
   const currentTenant = useCurrentTenant();
   const tenantId = currentTenant?.id || '';
-  
+
+  const [activeTab, setActiveTab] = useState('overview');
+
+  const { data: dashboard, isLoading: dashboardLoading } = useProductionDashboard(tenantId);
+
   // Check if user has access to advanced analytics (professional/enterprise)
   const hasAdvancedAccess = canAccessAnalytics('advanced');
 
@@ -909,170 +54,228 @@ const ProductionAnalyticsPage: React.FC = () => {
     return (
       <div className="space-y-6">
         <PageHeader
-          title="Análisis de Producción"
-          description="Análisis avanzado y insights para profesionales y empresas"
+          title={t('analytics.production_analytics')}
+          description={t('analytics.advanced_insights_professionals_enterprises')}
         />
-        
+
         <Card className="p-8 text-center">
           <Lock className="mx-auto h-12 w-12 text-[var(--text-tertiary)] mb-4" />
           <h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
-            Contenido exclusivo para planes Professional y Enterprise
+            {t('subscription.exclusive_professional_enterprise')}
           </h3>
           <p className="text-[var(--text-secondary)] mb-4">
-            El análisis avanzado de producción está disponible solo para usuarios con planes Professional o Enterprise.
-            Actualiza tu plan para acceder a todas las funcionalidades.
+            {t('subscription.advanced_production_analytics_description')}
           </p>
-          <Button 
-            variant="primary" 
+          <Button
+            variant="primary"
             size="md"
             onClick={() => window.location.hash = '#/app/settings/profile'}
           >
-            Actualizar Plan
+            {t('subscription.upgrade_plan')}
           </Button>
         </Card>
       </div>
     );
   }
 
+  // Tab configuration
+  const tabs = [
+    {
+      id: 'overview',
+      label: t('tabs.overview'),
+      icon: BarChart3
+    },
+    {
+      id: 'operations',
+      label: t('tabs.bakery_operations'),
+      icon: Factory
+    },
+    {
+      id: 'cost-efficiency',
+      label: t('tabs.cost_efficiency'),
+      icon: DollarSign
+    },
+    {
+      id: 'quality',
+      label: t('tabs.quality_assurance'),
+      icon: Award
+    },
+    {
+      id: 'equipment',
+      label: t('tabs.equipment_maintenance'),
+      icon: Settings
+    },
+    {
+      id: 'ai-insights',
+      label: t('tabs.ai_insights'),
+      icon: Brain
+    }
+  ];
+
   return (
     <div className="space-y-6">
       <PageHeader
-        title="Análisis de Producción"
-        description="Análisis avanzado y insights para profesionales y empresas"
+        title={t('analytics.production_analytics')}
+        description={t('analytics.advanced_insights_professionals_enterprises')}
+        actions={
+          <div className="flex space-x-2">
+            <Button variant="outline" size="sm">
+              <TrendingUp className="w-4 h-4 mr-2" />
+              {t('actions.export_report')}
+            </Button>
+            <Button variant="primary" size="sm">
+              <Zap className="w-4 h-4 mr-2" />
+              {t('actions.optimize_production')}
+            </Button>
+          </div>
+        }
       />
 
-      {/* Key Metrics */}
+      {/* Key Performance Indicators */}
       <StatsGrid
         stats={[
           {
-            title: 'Eficiencia General',
-            value: '94%',
+            title: t('stats.overall_efficiency'),
+            value: dashboard?.efficiency_percentage ? `${dashboard.efficiency_percentage.toFixed(1)}%` : '94%',
             variant: 'success' as const,
-            icon: TrendingUp,
+            icon: Target,
+            subtitle: t('stats.vs_target_95')
           },
           {
-            title: 'Costo Promedio',
+            title: t('stats.average_cost_per_unit'),
             value: '€2.45',
             variant: 'info' as const,
             icon: DollarSign,
+            subtitle: t('stats.down_3_vs_last_week')
           },
           {
-            title: 'Equipos Activos',
+            title: t('stats.active_equipment'),
             value: '8/9',
             variant: 'warning' as const,
             icon: Settings,
+            subtitle: t('stats.one_in_maintenance')
           },
           {
-            title: 'Calidad Promedio',
-            value: '9.2/10',
+            title: t('stats.quality_score'),
+            value: dashboard?.average_quality_score ? `${dashboard.average_quality_score.toFixed(1)}/10` : '9.2/10',
             variant: 'success' as const,
-            icon: Activity,
+            icon: Award,
+            subtitle: t('stats.excellent_standards')
           }
         ]}
         columns={4}
       />
 
-      {/* Tabs Navigation */}
-      <div className="border-b border-[var(--border-primary)]">
-        <nav className="-mb-px flex space-x-8">
-          <button
-            onClick={() => setActiveTab('overview')}
-            className={`py-2 px-1 border-b-2 font-medium text-sm ${
-              activeTab === 'overview'
-                ? 'border-orange-500 text-[var(--color-primary)]'
-                : 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
-            }`}
-          >
-            Resumen
-          </button>
-          <button
-            onClick={() => setActiveTab('costs')}
-            className={`py-2 px-1 border-b-2 font-medium text-sm ${
-              activeTab === 'costs'
-                ? 'border-orange-500 text-[var(--color-primary)]'
-                : 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
-            }`}
-          >
-            Costos
-          </button>
-          <button
-            onClick={() => setActiveTab('ai-insights')}
-            className={`py-2 px-1 border-b-2 font-medium text-sm ${
-              activeTab === 'ai-insights'
-                ? 'border-orange-500 text-[var(--color-primary)]'
-                : 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
-            }`}
-          >
-            IA Insights
-          </button>
-          <button
-            onClick={() => setActiveTab('maquinaria')}
-            className={`py-2 px-1 border-b-2 font-medium text-sm ${
-              activeTab === 'maquinaria'
-                ? 'border-orange-500 text-[var(--color-primary)]'
-                : 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
-            }`}
-          >
-            Maquinaria
-          </button>
-          <button
-            onClick={() => setActiveTab('quality')}
-            className={`py-2 px-1 border-b-2 font-medium text-sm ${
-              activeTab === 'quality'
-                ? 'border-orange-500 text-[var(--color-primary)]'
-                : 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
-            }`}
-          >
-            Calidad
-          </button>
-        </nav>
-      </div>
+      {/* Analytics Tabs */}
+      <Tabs
+        items={tabs.map(tab => ({ id: tab.id, label: tab.label }))}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+      />
 
       {/* Tab Content */}
-      {activeTab === 'overview' && (
-        <div className="grid gap-6 lg:grid-cols-2">
-          <ProductionCostAnalytics />
-          <AIInsightsWidget />
-          <EquipmentStatusWidget />
-          <Card className="p-6">
-            <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Resumen de Calidad</h3>
-            <div className="space-y-3">
-              <div className="flex justify-between">
-                <span className="text-[var(--text-secondary)]">Productos aprobados</span>
-                <span className="font-medium">96%</span>
-              </div>
-              <div className="flex justify-between">
-                <span className="text-[var(--text-secondary)]">Rechazos por calidad</span>
-                <span className="font-medium">2%</span>
-              </div>
-              <div className="flex justify-between">
-                <span className="text-[var(--text-secondary)]">Reprocesos</span>
-                <span className="font-medium">2%</span>
-              </div>
+      <div className="min-h-screen">
+        {/* Overview Tab - Mixed Dashboard */}
+        {activeTab === 'overview' && (
+          <div className="grid gap-6 lg:grid-cols-2 xl:grid-cols-3">
+            <div className="lg:col-span-2 xl:col-span-2">
+              <LiveBatchTrackerWidget />
             </div>
-          </Card>
+            <div>
+              <OnTimeCompletionWidget />
+            </div>
+            <div>
+              <QualityScoreTrendsWidget />
+            </div>
+            <div>
+              <WasteDefectTrackerWidget />
+            </div>
+            <div className="lg:col-span-2 xl:col-span-1">
+              <CapacityUtilizationWidget />
+            </div>
+          </div>
+        )}
+
+        {/* Bakery Operations Tab */}
+        {activeTab === 'operations' && (
+          <div className="grid gap-6">
+            <div className="grid gap-6 lg:grid-cols-2">
+              <TodaysScheduleSummaryWidget />
+              <OnTimeCompletionWidget />
+            </div>
+            <div>
+              <LiveBatchTrackerWidget />
+            </div>
+            <div>
+              <CapacityUtilizationWidget />
+            </div>
+          </div>
+        )}
+
+        {/* Cost & Efficiency Tab */}
+        {activeTab === 'cost-efficiency' && (
+          <div className="grid gap-6">
+            <div className="grid gap-6 lg:grid-cols-2">
+              <CostPerUnitWidget />
+              <WasteDefectTrackerWidget />
+            </div>
+            <div>
+              <YieldPerformanceWidget />
+            </div>
+          </div>
+        )}
+
+        {/* Quality Assurance Tab */}
+        {activeTab === 'quality' && (
+          <div className="grid gap-6">
+            <div className="grid gap-6 lg:grid-cols-2">
+              <QualityScoreTrendsWidget />
+              <WasteDefectTrackerWidget />
+            </div>
+            <div>
+              <TopDefectTypesWidget />
+            </div>
+          </div>
+        )}
+
+        {/* Equipment & Maintenance Tab */}
+        {activeTab === 'equipment' && (
+          <div className="grid gap-6">
+            <div className="grid gap-6 lg:grid-cols-2">
+              <EquipmentStatusWidget />
+              <MaintenanceScheduleWidget />
+            </div>
+            <div>
+              <EquipmentEfficiencyWidget />
+            </div>
+          </div>
+        )}
+
+        {/* AI Insights Tab */}
+        {activeTab === 'ai-insights' && (
+          <div className="grid gap-6">
+            <div className="grid gap-6 lg:grid-cols-2">
+              <AIInsightsWidget />
+              <PredictiveMaintenanceWidget />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Mobile Optimization Notice */}
+      <div className="md:hidden p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+        <div className="flex items-start space-x-3">
+          <Target className="w-5 h-5 mt-0.5 text-blue-600 flex-shrink-0" />
+          <div>
+            <p className="text-sm font-medium text-blue-600">
+              {t('mobile.optimized_experience')}
+            </p>
+            <p className="text-xs text-[var(--text-secondary)] mt-1">
+              {t('mobile.swipe_scroll_interact')}
+            </p>
+          </div>
         </div>
-      )}
-
-      {activeTab === 'costs' && (
-        <div className="space-y-6">
-          <ProductionCostAnalytics />
-        </div>
-      )}
-
-      {activeTab === 'ai-insights' && (
-        <div className="grid gap-6">
-          <AIInsightsWidget />
-        </div>
-      )}
-
-      {activeTab === 'maquinaria' && (
-        <EquipmentAnalytics />
-      )}
-
-      {activeTab === 'quality' && (
-        <QualityDashboard />
-      )}
+      </div>
     </div>
   );
 };
diff --git a/frontend/src/pages/app/operations/production/ProductionPage.tsx b/frontend/src/pages/app/operations/production/ProductionPage.tsx
index 0d014657..acb57181 100644
--- a/frontend/src/pages/app/operations/production/ProductionPage.tsx
+++ b/frontend/src/pages/app/operations/production/ProductionPage.tsx
@@ -5,7 +5,7 @@ import { statusColors } from '../../../../styles/colors';
 import { formatters } from '../../../../components/ui/Stats/StatsPresets';
 import { LoadingSpinner } from '../../../../components/shared';
 import { PageHeader } from '../../../../components/layout';
-import { ProductionSchedule, BatchTracker, QualityDashboard, EquipmentManager, CreateProductionBatchModal, ProductionStatusCard, QualityCheckModal, ProcessStageTracker, CompactProcessStageTracker } from '../../../../components/domain/production';
+import { ProductionSchedule, CreateProductionBatchModal, ProductionStatusCard, QualityCheckModal, CompactProcessStageTracker } from '../../../../components/domain/production';
 import { useCurrentTenant } from '../../../../stores/tenant.store';
 import {
   useProductionDashboard,