feat(dashboard): Add production batch details to execution progress

Backend changes (dashboard_service.py):
- Collect in-progress batch details with id, batchNumber, productName, etc.
- Add inProgressBatches array to production progress response

Frontend changes (ExecutionProgressTracker.tsx):
- Update ProductionProgress interface to include inProgressBatches array
- Display batch names and numbers under "En Progreso" count
- Show which specific batches are currently running

Users can now see which production batches are in progress
instead of just a count (e.g., "• Pan (BATCH-001)").

Fixes: Issue #5 - Missing production batch details

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/components/dashboard/ExecutionProgressTracker.tsx

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