New alert system and panel de control page

frontend/.dockerignore

@@ -0,0 +1,41 @@
+# Dependencies
+node_modules
+
+# Production build output (should be recreated during Docker build)
+dist
+
+# Testing
+coverage
+test-results
+playwright-report
+
+# Logs
+logs
+*.log
+
+# Environment variables
+.env*
+!.env.example
+
+# IDE files
+.vscode
+.idea
+*.swp
+*.swo
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Build outputs
+build
+.nyc_output
+
+# Local configuration files
+.git
+.gitignore

frontend/Dockerfile.kubernetes

@@ -9,15 +9,31 @@ WORKDIR /app
 # Copy package files
 COPY package*.json ./
 
-# Install dependencies including dev dependencies for building
+# Install all dependencies for building
 RUN npm ci --verbose && \
     npm cache clean --force
 
-# Copy source code
+# Copy source code (excluding unnecessary files like node_modules, dist, etc.)
 COPY . .
 
-# Build the application for production
-# This will use environment variables available at build time
+# Create a default runtime config in the public directory if it doesn't exist to satisfy the reference in index.html
+RUN if [ ! -f public/runtime-config.js ]; then \
+        mkdir -p public && \
+        echo "window.__RUNTIME_CONFIG__ = {};" > public/runtime-config.js; \
+    fi
+
+# Set build-time environment variables to prevent hanging on undefined variables
+ENV NODE_ENV=production
+ENV CI=true
+ENV VITE_API_URL=/api
+ENV VITE_APP_TITLE="BakeWise"
+ENV VITE_APP_VERSION="1.0.0"
+ENV VITE_PILOT_MODE_ENABLED="false"
+ENV VITE_PILOT_COUPON_CODE="PILOT2025"
+ENV VITE_PILOT_TRIAL_MONTHS="3"
+ENV VITE_STRIPE_PUBLISHABLE_KEY="pk_test_"
+# Set Node.js memory limit for the build process
+ENV NODE_OPTIONS="--max-old-space-size=4096"
 RUN npm run build
 
 # Stage 2: Production server with Nginx
@@ -26,6 +42,9 @@ FROM nginx:1.25-alpine AS production
 # Install curl for health checks
 RUN apk add --no-cache curl
 
+# Copy main nginx configuration that sets the PID file location
+COPY nginx-main.conf /etc/nginx/nginx.conf
+
 # Remove default nginx configuration
 RUN rm /etc/nginx/conf.d/default.conf
 
@@ -49,18 +68,7 @@ RUN chown -R nginx:nginx /usr/share/nginx/html && \
 
 # Create nginx PID directory and fix permissions
 RUN mkdir -p /var/run/nginx /var/lib/nginx/tmp && \
-    chown -R nginx:nginx /var/run/nginx /var/lib/nginx
-
-# Custom nginx.conf for running as non-root
-RUN echo 'pid /var/run/nginx/nginx.pid;' > /etc/nginx/nginx.conf && \
-    echo 'events { worker_connections 1024; }' >> /etc/nginx/nginx.conf && \
-    echo 'http {' >> /etc/nginx/nginx.conf && \
-    echo '    include /etc/nginx/mime.types;' >> /etc/nginx/nginx.conf && \
-    echo '    default_type application/octet-stream;' >> /etc/nginx/nginx.conf && \
-    echo '    sendfile on;' >> /etc/nginx/nginx.conf && \
-    echo '    keepalive_timeout 65;' >> /etc/nginx/nginx.conf && \
-    echo '    include /etc/nginx/conf.d/*.conf;' >> /etc/nginx/nginx.conf && \
-    echo '}' >> /etc/nginx/nginx.conf
+    chown -R nginx:nginx /var/run/nginx /var/lib/nginx /etc/nginx
 
 # Switch to non-root user
 USER nginx
@@ -74,3 +82,4 @@ HEALTHCHECK --interval=30s --timeout=10s --start-period=30s --retries=3 \
 
 # Start nginx
 CMD ["nginx", "-g", "daemon off;"]
+

frontend/Dockerfile.kubernetes.debug

@@ -0,0 +1,89 @@
+# Kubernetes-optimized DEBUG Dockerfile for Frontend
+# Multi-stage build for DEVELOPMENT/DEBUG deployment
+# This build DISABLES minification and provides full React error messages
+
+# Stage 1: Build the application in DEVELOPMENT MODE
+FROM node:18-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install all dependencies for building
+RUN npm ci --verbose && \
+    npm cache clean --force
+
+# Copy source code (excluding unnecessary files like node_modules, dist, etc.)
+COPY . .
+
+# Create a default runtime config in the public directory if it doesn't exist to satisfy the reference in index.html
+RUN if [ ! -f public/runtime-config.js ]; then \
+        mkdir -p public && \
+        echo "window.__RUNTIME_CONFIG__ = {};" > public/runtime-config.js; \
+    fi
+
+# DEBUG BUILD SETTINGS - NO MINIFICATION
+# This will produce larger bundles but with full error messages
+ENV NODE_ENV=development
+ENV CI=true
+ENV VITE_API_URL=/api
+ENV VITE_APP_TITLE="BakeWise (Debug)"
+ENV VITE_APP_VERSION="1.0.0-debug"
+ENV VITE_PILOT_MODE_ENABLED="false"
+ENV VITE_PILOT_COUPON_CODE="PILOT2025"
+ENV VITE_PILOT_TRIAL_MONTHS="3"
+ENV VITE_STRIPE_PUBLISHABLE_KEY="pk_test_"
+
+# Set Node.js memory limit for the build process
+ENV NODE_OPTIONS="--max-old-space-size=4096"
+
+# Build in development mode (no minification, full source maps)
+RUN npm run build -- --mode development
+
+# Stage 2: Production server with Nginx (same as production)
+FROM nginx:1.25-alpine AS production
+
+# Install curl for health checks
+RUN apk add --no-cache curl
+
+# Copy main nginx configuration that sets the PID file location
+COPY nginx-main.conf /etc/nginx/nginx.conf
+
+# Remove default nginx configuration
+RUN rm /etc/nginx/conf.d/default.conf
+
+# Copy custom nginx configuration
+COPY nginx.conf /etc/nginx/conf.d/
+
+# Copy built application from builder stage
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Copy and setup environment substitution script
+COPY substitute-env.sh /docker-entrypoint.d/30-substitute-env.sh
+
+# Make the script executable
+RUN chmod +x /docker-entrypoint.d/30-substitute-env.sh
+
+# Set proper permissions
+RUN chown -R nginx:nginx /usr/share/nginx/html && \
+    chown -R nginx:nginx /var/cache/nginx && \
+    chown -R nginx:nginx /var/log/nginx && \
+    chown -R nginx:nginx /etc/nginx/conf.d
+
+# Create nginx PID directory and fix permissions
+RUN mkdir -p /var/run/nginx /var/lib/nginx/tmp && \
+    chown -R nginx:nginx /var/run/nginx /var/lib/nginx /etc/nginx
+
+# Switch to non-root user
+USER nginx
+
+# Expose port 3000 (to match current setup)
+EXPOSE 3000
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=30s --retries=3 \
+  CMD curl -f http://localhost:3000/health || exit 1
+
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"]

frontend/nginx-main.conf

@@ -0,0 +1,12 @@
+pid /var/run/nginx/nginx.pid;
+worker_processes auto;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+    include /etc/nginx/conf.d/*.conf;
+}

frontend/src/api/hooks/newDashboard.ts

@@ -20,11 +20,13 @@ import { apiClient } from '../client';
 // ============================================================
 
 export interface HealthChecklistItem {
-  icon: 'check' | 'warning' | 'alert';
+  icon: 'check' | 'warning' | 'alert' | 'ai_handled';
   text?: string; // Deprecated: Use textKey instead
   textKey?: string; // i18n key for translation
   textParams?: Record<string, any>; // Parameters for i18n translation
   actionRequired: boolean;
+  status: 'good' | 'ai_handled' | 'needs_you'; // Tri-state status
+  actionPath?: string; // Optional path to navigate for action
 }
 
 export interface HeadlineData {
@@ -40,6 +42,7 @@ export interface BakeryHealthStatus {
   checklistItems: HealthChecklistItem[];
   criticalIssues: number;
   pendingActions: number;
+  aiPreventedIssues: number; // Count of issues AI prevented
 }
 
 export interface ReasoningInputs {
@@ -127,6 +130,53 @@ export interface ActionQueue {
   importantCount: number;
 }
 
+// New unified action queue with time-based grouping
+export interface EnrichedAlert {
+  id: string;
+  alert_type: string;
+  type_class: string;
+  priority_level: string;
+  priority_score: number;
+  title: string;
+  message: string;
+  actions: Array<{
+    type: string;
+    label: string;
+    variant: 'primary' | 'secondary' | 'ghost';
+    metadata?: Record<string, any>;
+    disabled?: boolean;
+    estimated_time_minutes?: number;
+  }>;
+  urgency_context?: {
+    deadline?: string;
+    time_until_consequence_hours?: number;
+  };
+  alert_metadata?: {
+    escalation?: {
+      original_score: number;
+      boost_applied: number;
+      escalated_at: string;
+      reason: string;
+    };
+  };
+  business_impact?: {
+    financial_impact_eur?: number;
+    affected_orders?: number;
+  };
+  ai_reasoning_summary?: string;
+  hidden_from_ui?: boolean;
+}
+
+export interface UnifiedActionQueue {
+  urgent: EnrichedAlert[]; // <6h to deadline or CRITICAL
+  today: EnrichedAlert[]; // <24h to deadline
+  week: EnrichedAlert[]; // <7d to deadline or escalated
+  totalActions: number;
+  urgentCount: number;
+  todayCount: number;
+  weekCount: number;
+}
+
 export interface ProductionTimelineItem {
   id: string;
   batchNumber: string;
@@ -234,7 +284,7 @@ export function useOrchestrationSummary(tenantId: string, runId?: string) {
 }
 
 /**
- * Get action queue
+ * Get action queue (LEGACY - use useUnifiedActionQueue for new implementation)
  *
  * Prioritized list of what requires user attention right now.
  * This is the core JTBD dashboard feature.
@@ -254,6 +304,31 @@ export function useActionQueue(tenantId: string) {
   });
 }
 
+/**
+ * Get unified action queue with time-based grouping
+ *
+ * Returns all action-needed alerts grouped by urgency:
+ * - URGENT: <6h to deadline or CRITICAL priority
+ * - TODAY: <24h to deadline
+ * - THIS WEEK: <7d to deadline or escalated (>48h pending)
+ *
+ * This is the NEW implementation for the redesigned Action Queue Card.
+ */
+export function useUnifiedActionQueue(tenantId: string) {
+  return useQuery<UnifiedActionQueue>({
+    queryKey: ['unified-action-queue', tenantId],
+    queryFn: async () => {
+      return await apiClient.get(
+        `/tenants/${tenantId}/dashboard/unified-action-queue`
+      );
+    },
+    enabled: !!tenantId,
+    refetchInterval: 30000, // Refresh every 30 seconds (more frequent than legacy)
+    staleTime: 15000,
+    retry: 2,
+  });
+}
+
 /**
  * Get production timeline
  *
@@ -294,6 +369,31 @@ export function useInsights(tenantId: string) {
   });
 }
 
+/**
+ * Get execution progress - plan vs actual for today
+ *
+ * Shows how today's execution is progressing:
+ * - Production: batches completed/in-progress/pending
+ * - Deliveries: received/pending/overdue
+ * - Approvals: pending count
+ *
+ * This is the NEW implementation for the ExecutionProgressTracker component.
+ */
+export function useExecutionProgress(tenantId: string) {
+  return useQuery({
+    queryKey: ['execution-progress', tenantId],
+    queryFn: async () => {
+      return await apiClient.get(
+        `/tenants/${tenantId}/dashboard/execution-progress`
+      );
+    },
+    enabled: !!tenantId,
+    refetchInterval: 60000, // Refresh every minute
+    staleTime: 30000,
+    retry: 2,
+  });
+}
+
 // ============================================================
 // Action Mutations
 // ============================================================

frontend/src/components/dashboard/ActionQueueCard.tsx

@@ -1,665 +0,0 @@
-// ================================================================
-// frontend/src/components/dashboard/ActionQueueCard.tsx
-// ================================================================
-/**
- * Action Queue Card - What needs your attention right now
- *
- * Prioritized list of actions the user needs to take, with context
- * about why each action is needed and what happens if they don't do it.
- */
-
-import React, { useState, useMemo } from 'react';
-import {
-  FileText,
-  AlertCircle,
-  CheckCircle2,
-  Eye,
-  Edit,
-  Clock,
-  Euro,
-  ChevronDown,
-  ChevronUp,
-  X,
-  Package,
-  Building2,
-  Calendar,
-  Truck,
-} from 'lucide-react';
-import { ActionItem, ActionQueue } from '../../api/hooks/newDashboard';
-import { useReasoningFormatter } from '../../hooks/useReasoningTranslation';
-import { useTranslation } from 'react-i18next';
-import { usePurchaseOrder } from '../../api/hooks/purchase-orders';
-
-interface ActionQueueCardProps {
-  actionQueue: ActionQueue;
-  loading?: boolean;
-  onApprove?: (actionId: string) => void;
-  onReject?: (actionId: string, reason: string) => void;
-  onViewDetails?: (actionId: string) => void;
-  onModify?: (actionId: string) => void;
-  tenantId?: string;
-}
-
-const urgencyConfig = {
-  critical: {
-    bgColor: 'var(--color-error-50)',
-    borderColor: 'var(--color-error-300)',
-    badgeBgColor: 'var(--color-error-100)',
-    badgeTextColor: 'var(--color-error-800)',
-    icon: AlertCircle,
-    iconColor: 'var(--color-error-700)',
-  },
-  important: {
-    bgColor: 'var(--color-warning-50)',
-    borderColor: 'var(--color-warning-300)',
-    badgeBgColor: 'var(--color-warning-100)',
-    badgeTextColor: 'var(--color-warning-900)',
-    icon: AlertCircle,
-    iconColor: 'var(--color-warning-700)',
-  },
-  normal: {
-    bgColor: 'var(--color-info-50)',
-    borderColor: 'var(--color-info-300)',
-    badgeBgColor: 'var(--color-info-100)',
-    badgeTextColor: 'var(--color-info-800)',
-    icon: FileText,
-    iconColor: 'var(--color-info-700)',
-  },
-};
-
-/**
- * Helper function to translate keys with proper namespace handling
- * Maps backend key formats to correct i18next namespaces
- */
-function translateKey(
-  key: string,
-  params: Record<string, any>,
-  tDashboard: any,
-  tReasoning: any
-): string {
-  // Preprocess parameters - join arrays into strings
-  const processedParams = { ...params };
-
-  // Convert product_names array to product_names_joined string
-  if ('product_names' in processedParams && Array.isArray(processedParams.product_names)) {
-    processedParams.product_names_joined = processedParams.product_names.join(', ');
-  }
-
-  // Convert affected_products array to affected_products_joined string
-  if ('affected_products' in processedParams && Array.isArray(processedParams.affected_products)) {
-    processedParams.affected_products_joined = processedParams.affected_products.join(', ');
-  }
-
-  // Determine namespace based on key prefix
-  if (key.startsWith('reasoning.')) {
-    // Remove 'reasoning.' prefix and use reasoning namespace
-    const translationKey = key.substring('reasoning.'.length);
-    // Use i18next-icu for interpolation with {variable} syntax
-    return String(tReasoning(translationKey, processedParams));
-  } else if (key.startsWith('action_queue.') || key.startsWith('dashboard.') || key.startsWith('health.')) {
-    // Use dashboard namespace
-    return String(tDashboard(key, processedParams));
-  }
-
-  // Default to dashboard
-  return String(tDashboard(key, processedParams));
-}
-
-function ActionItemCard({
-  action,
-  onApprove,
-  onReject,
-  onViewDetails,
-  onModify,
-  tenantId,
-}: {
-  action: ActionItem;
-  onApprove?: (id: string) => void;
-  onReject?: (id: string, reason: string) => void;
-  onViewDetails?: (id: string) => void;
-  onModify?: (id: string) => void;
-  tenantId?: string;
-}) {
-  const [expanded, setExpanded] = useState(false);
-  const [showDetails, setShowDetails] = useState(false);
-  const [showRejectModal, setShowRejectModal] = useState(false);
-  const [rejectionReason, setRejectionReason] = useState('');
-  const config = urgencyConfig[action.urgency as keyof typeof urgencyConfig] || urgencyConfig.normal;
-  const UrgencyIcon = config.icon;
-  const { formatPOAction } = useReasoningFormatter();
-  const { t: tReasoning } = useTranslation('reasoning');
-  const { t: tDashboard } = useTranslation('dashboard');
-
-  // Fetch PO details if this is a PO action and details are expanded
-  const { data: poDetail } = usePurchaseOrder(
-    tenantId || '',
-    action.id,
-    { enabled: !!tenantId && showDetails && action.type === 'po_approval' }
-  );
-
-  // Translate i18n fields (or fallback to deprecated text fields or reasoning_data for alerts)
-  const reasoning = useMemo(() => {
-    if (action.reasoning_i18n) {
-      return translateKey(action.reasoning_i18n.key, action.reasoning_i18n.params, tDashboard, tReasoning);
-    }
-    if (action.reasoning_data) {
-      const formatted = formatPOAction(action.reasoning_data);
-      return formatted.reasoning;
-    }
-    return action.reasoning || '';
-  }, [action.reasoning_i18n, action.reasoning_data, action.reasoning, tDashboard, tReasoning, formatPOAction]);
-
-  const consequence = useMemo(() => {
-    if (action.consequence_i18n) {
-      return translateKey(action.consequence_i18n.key, action.consequence_i18n.params, tDashboard, tReasoning);
-    }
-    if (action.reasoning_data) {
-      const formatted = formatPOAction(action.reasoning_data);
-      return formatted.consequence;
-    }
-    return '';
-  }, [action.consequence_i18n, action.reasoning_data, tDashboard, tReasoning, formatPOAction]);
-
-  return (
-    <div
-      className="border-2 rounded-lg p-4 md:p-5 transition-all duration-200 hover:shadow-md"
-      style={{
-        backgroundColor: config.bgColor,
-        borderColor: config.borderColor,
-      }}
-    >
-      {/* Header */}
-      <div className="flex items-start gap-3 mb-3">
-        <UrgencyIcon className="w-6 h-6 flex-shrink-0" style={{ color: config.iconColor }} />
-        <div className="flex-1 min-w-0">
-          <div className="flex items-start justify-between gap-2 mb-1">
-            <h3 className="font-bold text-lg" style={{ color: 'var(--text-primary)' }}>
-              {action.title_i18n ? translateKey(action.title_i18n.key, action.title_i18n.params, tDashboard, tReasoning) : (action.title || 'Action Required')}
-            </h3>
-            <span
-              className="px-2 py-1 rounded text-xs font-semibold uppercase flex-shrink-0"
-              style={{
-                backgroundColor: config.badgeBgColor,
-                color: config.badgeTextColor,
-              }}
-            >
-              {action.urgency || 'normal'}
-            </span>
-          </div>
-          <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
-            {action.subtitle_i18n ? translateKey(action.subtitle_i18n.key, action.subtitle_i18n.params, tDashboard, tReasoning) : (action.subtitle || '')}
-          </p>
-        </div>
-      </div>
-
-      {/* Amount (for POs) */}
-      {action.amount && (
-        <div className="flex items-center gap-2 mb-3 text-lg font-bold" style={{ color: 'var(--text-primary)' }}>
-          <Euro className="w-5 h-5" />
-          <span>
-            {action.amount.toFixed(2)} {action.currency}
-          </span>
-        </div>
-      )}
-
-      {/* Reasoning (always visible) */}
-      <div className="rounded-md p-3 mb-3" style={{ backgroundColor: 'var(--bg-primary)' }}>
-        <p className="text-sm font-medium mb-1" style={{ color: 'var(--text-primary)' }}>
-          {tReasoning('jtbd.action_queue.why_needed')}
-        </p>
-        <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>{reasoning}</p>
-      </div>
-
-      {/* Consequence (expandable) */}
-      {consequence && (
-        <>
-          <button
-            onClick={() => setExpanded(!expanded)}
-            className="flex items-center gap-2 text-sm transition-colors mb-3 w-full"
-            style={{ color: 'var(--text-secondary)' }}
-          >
-            {expanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
-            <span className="font-medium">{tReasoning('jtbd.action_queue.what_if_not')}</span>
-          </button>
-
-          {expanded && (
-            <div
-              className="border rounded-md p-3 mb-3"
-              style={{
-                backgroundColor: 'var(--color-warning-50)',
-                borderColor: 'var(--color-warning-200)',
-              }}
-            >
-              <p className="text-sm" style={{ color: 'var(--color-warning-900)' }}>{consequence}</p>
-            </div>
-          )}
-        </>
-      )}
-
-      {/* Inline PO Details (expandable) */}
-      {action.type === 'po_approval' && (
-        <>
-          <button
-            onClick={() => setShowDetails(!showDetails)}
-            className="flex items-center gap-2 text-sm font-medium transition-colors mb-3 w-full"
-            style={{ color: 'var(--color-info-700)' }}
-          >
-            {showDetails ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
-            <Package className="w-4 h-4" />
-            <span>View Order Details</span>
-          </button>
-
-          {showDetails && poDetail && (
-            <div
-              className="border rounded-md p-4 mb-3 space-y-3"
-              style={{
-                backgroundColor: 'var(--bg-primary)',
-                borderColor: 'var(--border-primary)',
-              }}
-            >
-              {/* Supplier Info */}
-              <div className="flex items-start gap-2">
-                <Building2 className="w-5 h-5 flex-shrink-0" style={{ color: 'var(--color-info-600)' }} />
-                <div className="flex-1">
-                  <p className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>
-                    {poDetail.supplier?.name || 'Supplier'}
-                  </p>
-                  {poDetail.supplier?.contact_person && (
-                    <p className="text-xs" style={{ color: 'var(--text-secondary)' }}>
-                      Contact: {poDetail.supplier.contact_person}
-                    </p>
-                  )}
-                  {poDetail.supplier?.email && (
-                    <p className="text-xs" style={{ color: 'var(--text-secondary)' }}>
-                      {poDetail.supplier.email}
-                    </p>
-                  )}
-                </div>
-              </div>
-
-              {/* Delivery Date & Tracking */}
-              {poDetail.required_delivery_date && (
-                <div className="space-y-2">
-                  <div className="flex items-center gap-2">
-                    <Calendar className="w-5 h-5" style={{ color: 'var(--color-warning-600)' }} />
-                    <div className="flex-1">
-                      <p className="text-xs font-medium" style={{ color: 'var(--text-secondary)' }}>
-                        Required Delivery
-                      </p>
-                      <p className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>
-                        {new Date(poDetail.required_delivery_date).toLocaleDateString()}
-                      </p>
-                    </div>
-                  </div>
-
-                  {/* Estimated Delivery Date (shown after approval) */}
-                  {poDetail.estimated_delivery_date && (
-                    <div className="flex items-center gap-2 ml-7">
-                      <Truck className="w-4 h-4" style={{ color: 'var(--color-info-600)' }} />
-                      <div className="flex-1">
-                        <p className="text-xs font-medium" style={{ color: 'var(--text-secondary)' }}>
-                          Expected Arrival
-                        </p>
-                        <p className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>
-                          {new Date(poDetail.estimated_delivery_date).toLocaleDateString()}
-                        </p>
-                      </div>
-                      {(() => {
-                        const now = new Date();
-                        const estimatedDate = new Date(poDetail.estimated_delivery_date);
-                        const daysUntil = Math.ceil((estimatedDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
-
-                        let statusColor = 'var(--color-success-600)';
-                        let statusText = 'On Track';
-
-                        if (daysUntil < 0) {
-                          statusColor = 'var(--color-error-600)';
-                          statusText = `${Math.abs(daysUntil)}d Overdue`;
-                        } else if (daysUntil === 0) {
-                          statusColor = 'var(--color-warning-600)';
-                          statusText = 'Due Today';
-                        } else if (daysUntil <= 2) {
-                          statusColor = 'var(--color-warning-600)';
-                          statusText = `${daysUntil}d Left`;
-                        } else {
-                          statusText = `${daysUntil}d Left`;
-                        }
-
-                        return (
-                          <span
-                            className="px-2 py-1 rounded text-xs font-semibold"
-                            style={{
-                              backgroundColor: statusColor.replace('600', '100'),
-                              color: statusColor,
-                            }}
-                          >
-                            {statusText}
-                          </span>
-                        );
-                      })()}
-                    </div>
-                  )}
-                </div>
-              )}
-
-              {/* Line Items */}
-              {poDetail.items && poDetail.items.length > 0 && (
-                <div>
-                  <p className="text-xs font-semibold mb-2" style={{ color: 'var(--text-secondary)' }}>
-                    Order Items ({poDetail.items.length})
-                  </p>
-                  <div className="space-y-2 max-h-48 overflow-y-auto">
-                    {poDetail.items.map((item, idx) => (
-                      <div
-                        key={idx}
-                        className="flex justify-between items-start p-2 rounded"
-                        style={{ backgroundColor: 'var(--bg-secondary)' }}
-                      >
-                        <div className="flex-1">
-                          <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
-                            {item.product_name || item.product_code || 'Product'}
-                          </p>
-                          <p className="text-xs" style={{ color: 'var(--text-secondary)' }}>
-                            {item.ordered_quantity} {item.unit_of_measure} × €{parseFloat(item.unit_price).toFixed(2)}
-                          </p>
-                        </div>
-                        <p className="text-sm font-bold" style={{ color: 'var(--text-primary)' }}>
-                          €{parseFloat(item.line_total).toFixed(2)}
-                        </p>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              {/* Total Amount */}
-              <div
-                className="border-t pt-2 flex justify-between items-center"
-                style={{ borderColor: 'var(--border-primary)' }}
-              >
-                <p className="text-sm font-bold" style={{ color: 'var(--text-primary)' }}>Total Amount</p>
-                <p className="text-lg font-bold" style={{ color: 'var(--color-info-700)' }}>
-                  €{parseFloat(poDetail.total_amount).toFixed(2)}
-                </p>
-              </div>
-            </div>
-          )}
-        </>
-      )}
-
-      {/* Time Estimate */}
-      <div className="flex items-center gap-2 text-xs mb-4" style={{ color: 'var(--text-tertiary)' }}>
-        <Clock className="w-4 h-4" />
-        <span>
-          {tReasoning('jtbd.action_queue.estimated_time')}: {action.estimatedTimeMinutes || 5} min
-        </span>
-      </div>
-
-      {/* Rejection Modal */}
-      {showRejectModal && (
-        <div
-          className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"
-          onClick={() => setShowRejectModal(false)}
-        >
-          <div
-            className="rounded-lg p-6 max-w-md w-full"
-            style={{ backgroundColor: 'var(--bg-primary)' }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="flex items-center justify-between mb-4">
-              <h3 className="text-lg font-bold" style={{ color: 'var(--text-primary)' }}>
-                Reject Purchase Order
-              </h3>
-              <button
-                onClick={() => setShowRejectModal(false)}
-                className="p-1 rounded hover:bg-opacity-10 hover:bg-black"
-              >
-                <X className="w-5 h-5" style={{ color: 'var(--text-secondary)' }} />
-              </button>
-            </div>
-
-            <p className="text-sm mb-4" style={{ color: 'var(--text-secondary)' }}>
-              Please provide a reason for rejecting this purchase order:
-            </p>
-
-            <textarea
-              value={rejectionReason}
-              onChange={(e) => setRejectionReason(e.target.value)}
-              placeholder="Enter rejection reason..."
-              className="w-full p-3 border rounded-lg mb-4 min-h-24"
-              style={{
-                backgroundColor: 'var(--bg-secondary)',
-                borderColor: 'var(--border-primary)',
-                color: 'var(--text-primary)',
-              }}
-            />
-
-            <div className="flex gap-3 justify-end">
-              <button
-                onClick={() => setShowRejectModal(false)}
-                className="px-4 py-2 rounded-lg font-semibold transition-colors"
-                style={{
-                  backgroundColor: 'var(--bg-tertiary)',
-                  color: 'var(--text-primary)',
-                }}
-              >
-                Cancel
-              </button>
-              <button
-                onClick={() => {
-                  if (onReject && rejectionReason.trim()) {
-                    onReject(action.id, rejectionReason);
-                    setShowRejectModal(false);
-                    setRejectionReason('');
-                  }
-                }}
-                disabled={!rejectionReason.trim()}
-                className="px-4 py-2 rounded-lg font-semibold transition-colors"
-                style={{
-                  backgroundColor: rejectionReason.trim() ? 'var(--color-error-600)' : 'var(--bg-quaternary)',
-                  color: rejectionReason.trim() ? 'white' : 'var(--text-tertiary)',
-                  cursor: rejectionReason.trim() ? 'pointer' : 'not-allowed',
-                }}
-              >
-                Reject Order
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Action Buttons */}
-      <div className="flex flex-wrap gap-2">
-        {(action.actions || []).map((button, index) => {
-          const buttonStyles: Record<string, React.CSSProperties> = {
-            primary: {
-              backgroundColor: 'var(--color-info-600)',
-              color: 'var(--text-inverse, #ffffff)',
-            },
-            secondary: {
-              backgroundColor: 'var(--bg-tertiary)',
-              color: 'var(--text-primary)',
-            },
-            tertiary: {
-              backgroundColor: 'var(--bg-primary)',
-              color: 'var(--text-primary)',
-              border: '1px solid var(--border-primary)',
-            },
-          };
-
-          const hoverStyles: Record<string, React.CSSProperties> = {
-            primary: {
-              backgroundColor: 'var(--color-info-700)',
-            },
-            secondary: {
-              backgroundColor: 'var(--bg-quaternary)',
-            },
-            tertiary: {
-              backgroundColor: 'var(--bg-secondary)',
-            },
-          };
-
-          const [isHovered, setIsHovered] = useState(false);
-
-          const handleClick = () => {
-            if (button.action === 'approve' && onApprove) {
-              onApprove(action.id);
-            } else if (button.action === 'reject') {
-              setShowRejectModal(true);
-            } else if (button.action === 'view_details' && onViewDetails) {
-              onViewDetails(action.id);
-            } else if (button.action === 'modify' && onModify) {
-              onModify(action.id);
-            }
-          };
-
-          const currentStyle = {
-            ...buttonStyles[button.type],
-            ...(isHovered ? hoverStyles[button.type] : {}),
-          };
-
-          return (
-            <button
-              key={index}
-              onClick={handleClick}
-              onMouseEnter={() => setIsHovered(true)}
-              onMouseLeave={() => setIsHovered(false)}
-              className="px-4 py-2 rounded-lg font-semibold text-sm transition-colors duration-200 flex items-center gap-2 min-h-[44px]"
-              style={currentStyle}
-            >
-              {button.action === 'approve' && <CheckCircle2 className="w-4 h-4" />}
-              {button.action === 'reject' && <X className="w-4 h-4" />}
-              {button.action === 'view_details' && <Eye className="w-4 h-4" />}
-              {button.action === 'modify' && <Edit className="w-4 h-4" />}
-              {translateKey(button.label_i18n.key, button.label_i18n.params, tDashboard, tReasoning)}
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-export function ActionQueueCard({
-  actionQueue,
-  loading,
-  onApprove,
-  onReject,
-  onViewDetails,
-  onModify,
-  tenantId,
-}: ActionQueueCardProps) {
-  const [showAll, setShowAll] = useState(false);
-  const { t: tReasoning } = useTranslation('reasoning');
-
-  if (loading || !actionQueue) {
-    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/2" 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 (!actionQueue.actions || actionQueue.actions.length === 0) {
-    return (
-      <div
-        className="border-2 rounded-xl p-8 text-center shadow-lg"
-        style={{
-          backgroundColor: 'var(--color-success-50)',
-          borderColor: 'var(--color-success-200)',
-        }}
-      >
-        <CheckCircle2 className="w-16 h-16 mx-auto mb-4" style={{ color: 'var(--color-success-600)' }} />
-        <h3 className="text-xl font-bold mb-2" style={{ color: 'var(--color-success-900)' }}>
-          {tReasoning('jtbd.action_queue.all_caught_up')}
-        </h3>
-        <p style={{ color: 'var(--color-success-700)' }}>{tReasoning('jtbd.action_queue.no_actions')}</p>
-      </div>
-    );
-  }
-
-  const displayedActions = showAll ? actionQueue.actions : actionQueue.actions.slice(0, 3);
-
-  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 justify-between mb-6">
-        <h2 className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>{tReasoning('jtbd.action_queue.title')}</h2>
-        {(actionQueue.totalActions || 0) > 3 && (
-          <span
-            className="px-3 py-1 rounded-full text-sm font-semibold"
-            style={{
-              backgroundColor: 'var(--color-error-100)',
-              color: 'var(--color-error-800)',
-            }}
-          >
-            {actionQueue.totalActions || 0} {tReasoning('jtbd.action_queue.total')}
-          </span>
-        )}
-      </div>
-
-      {/* Summary Badges */}
-      {((actionQueue.criticalCount || 0) > 0 || (actionQueue.importantCount || 0) > 0) && (
-        <div className="flex flex-wrap gap-2 mb-6">
-          {(actionQueue.criticalCount || 0) > 0 && (
-            <span
-              className="px-3 py-1 rounded-full text-sm font-semibold"
-              style={{
-                backgroundColor: 'var(--color-error-100)',
-                color: 'var(--color-error-800)',
-              }}
-            >
-              {actionQueue.criticalCount || 0} {tReasoning('jtbd.action_queue.critical')}
-            </span>
-          )}
-          {(actionQueue.importantCount || 0) > 0 && (
-            <span
-              className="px-3 py-1 rounded-full text-sm font-semibold"
-              style={{
-                backgroundColor: 'var(--color-warning-100)',
-                color: 'var(--color-warning-800)',
-              }}
-            >
-              {actionQueue.importantCount || 0} {tReasoning('jtbd.action_queue.important')}
-            </span>
-          )}
-        </div>
-      )}
-
-      {/* Action Items */}
-      <div className="space-y-4">
-        {displayedActions.map((action) => (
-          <ActionItemCard
-            key={action.id}
-            action={action}
-            onApprove={onApprove}
-            onReject={onReject}
-            onViewDetails={onViewDetails}
-            onModify={onModify}
-            tenantId={tenantId}
-          />
-        ))}
-      </div>
-
-      {/* Show More/Less */}
-      {(actionQueue.totalActions || 0) > 3 && (
-        <button
-          onClick={() => setShowAll(!showAll)}
-          className="w-full mt-4 py-3 rounded-lg font-semibold transition-colors duration-200"
-          style={{
-            backgroundColor: 'var(--bg-tertiary)',
-            color: 'var(--text-primary)',
-          }}
-        >
-          {showAll
-            ? tReasoning('jtbd.action_queue.show_less')
-            : tReasoning('jtbd.action_queue.show_more', { count: (actionQueue.totalActions || 3) - 3 })}
-        </button>
-      )}
-    </div>
-  );
-}

frontend/src/components/dashboard/CollapsibleSetupBanner.tsx

@@ -0,0 +1,230 @@
+// ================================================================
+// frontend/src/components/dashboard/CollapsibleSetupBanner.tsx
+// ================================================================
+/**
+ * Collapsible Setup Banner - Recommended Configuration Reminder
+ *
+ * JTBD: "Remind me to complete optional setup without blocking my workflow"
+ *
+ * This banner appears at the top of the dashboard when:
+ * - Critical setup is complete (can operate bakery)
+ * - BUT recommended setup is incomplete (missing features)
+ * - Progress: 50-99%
+ *
+ * Features:
+ * - Collapsible (default: collapsed to minimize distraction)
+ * - Dismissible (persists in localStorage for 7 days)
+ * - Shows progress + remaining sections
+ * - One-click navigation to incomplete sections
+ */
+
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { CheckCircle, ChevronDown, ChevronUp, X, ArrowRight } from 'lucide-react';
+
+interface RemainingSection {
+  id: string;
+  title: string;
+  icon: React.ElementType;
+  path: string;
+  count: number;
+  recommended: number;
+}
+
+interface CollapsibleSetupBannerProps {
+  remainingSections: RemainingSection[];
+  progressPercentage: number;
+  onDismiss?: () => void;
+}
+
+const DISMISS_KEY = 'setup_banner_dismissed';
+const DISMISS_DURATION = 7 * 24 * 60 * 60 * 1000; // 7 days in milliseconds
+
+export function CollapsibleSetupBanner({ remainingSections, progressPercentage, onDismiss }: CollapsibleSetupBannerProps) {
+  const { t } = useTranslation(['dashboard']);
+  const navigate = useNavigate();
+  const [expanded, setExpanded] = useState(false);
+  const [dismissed, setDismissed] = useState(false);
+
+  // Check if banner was dismissed
+  useEffect(() => {
+    const dismissedUntil = localStorage.getItem(DISMISS_KEY);
+    if (dismissedUntil) {
+      const dismissedTime = parseInt(dismissedUntil, 10);
+      if (Date.now() < dismissedTime) {
+        setDismissed(true);
+      } else {
+        localStorage.removeItem(DISMISS_KEY);
+      }
+    }
+  }, []);
+
+  const handleDismiss = () => {
+    const dismissUntil = Date.now() + DISMISS_DURATION;
+    localStorage.setItem(DISMISS_KEY, dismissUntil.toString());
+    setDismissed(true);
+    if (onDismiss) {
+      onDismiss();
+    }
+  };
+
+  const handleSectionClick = (path: string) => {
+    navigate(path);
+  };
+
+  if (dismissed || remainingSections.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className="mb-6 rounded-xl border-2 shadow-md transition-all duration-300"
+      style={{
+        backgroundColor: 'var(--bg-primary)',
+        borderColor: expanded ? 'var(--color-info-300)' : 'var(--border-secondary)',
+      }}
+    >
+      {/* Compact Header (Always Visible) */}
+      <div
+        className="flex items-center gap-4 p-4 cursor-pointer hover:bg-[var(--bg-secondary)] transition-colors"
+        onClick={() => setExpanded(!expanded)}
+      >
+        {/* Progress Circle */}
+        <div className="relative w-12 h-12 flex-shrink-0">
+          <svg className="w-full h-full transform -rotate-90">
+            {/* Background circle */}
+            <circle
+              cx="24"
+              cy="24"
+              r="20"
+              fill="none"
+              stroke="var(--bg-tertiary)"
+              strokeWidth="4"
+            />
+            {/* Progress circle */}
+            <circle
+              cx="24"
+              cy="24"
+              r="20"
+              fill="none"
+              stroke="var(--color-success)"
+              strokeWidth="4"
+              strokeDasharray={`${2 * Math.PI * 20}`}
+              strokeDashoffset={`${2 * Math.PI * 20 * (1 - progressPercentage / 100)}`}
+              strokeLinecap="round"
+            />
+          </svg>
+          <div className="absolute inset-0 flex items-center justify-center">
+            <span className="text-xs font-bold" style={{ color: 'var(--color-success)' }}>
+              {progressPercentage}%
+            </span>
+          </div>
+        </div>
+
+        {/* Text */}
+        <div className="flex-1 min-w-0">
+          <h3 className="font-semibold text-base mb-1" style={{ color: 'var(--text-primary)' }}>
+            📋 {t('dashboard:setup_banner.title', '{{count}} paso(s) más para desbloquear todas las funciones', { count: remainingSections.length })}
+          </h3>
+          <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+            {remainingSections.map(s => s.title).join(', ')} {t('dashboard:setup_banner.recommended', '(recomendado)')}
+          </p>
+        </div>
+
+        {/* Expand/Collapse Button */}
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            setExpanded(!expanded);
+          }}
+          className="flex-shrink-0 p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
+          title={expanded ? 'Ocultar' : 'Expandir'}
+        >
+          {expanded ? (
+            <ChevronUp className="w-5 h-5" style={{ color: 'var(--text-secondary)' }} />
+          ) : (
+            <ChevronDown className="w-5 h-5" style={{ color: 'var(--text-secondary)' }} />
+          )}
+        </button>
+
+        {/* Dismiss Button */}
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            handleDismiss();
+          }}
+          className="flex-shrink-0 p-2 rounded-lg hover:bg-[var(--color-error)]/10 transition-colors"
+          title={t('dashboard:setup_banner.dismiss', 'Ocultar por 7 días')}
+        >
+          <X className="w-5 h-5" style={{ color: 'var(--text-tertiary)' }} />
+        </button>
+      </div>
+
+      {/* Expanded Content */}
+      {expanded && (
+        <div
+          className="px-4 pb-4 border-t"
+          style={{ borderColor: 'var(--border-secondary)' }}
+        >
+          <div className="space-y-3 mt-4">
+            {remainingSections.map((section) => {
+              const Icon = section.icon || (() => <div>⚙️</div>);
+
+              return (
+                <button
+                  key={section.id}
+                  onClick={() => handleSectionClick(section.path)}
+                  className="w-full flex items-center gap-4 p-4 rounded-lg border border-[var(--border-secondary)] hover:border-[var(--color-primary)] hover:bg-[var(--bg-secondary)] transition-all group text-left"
+                >
+                  {/* Icon */}
+                  <div className="w-10 h-10 rounded-full flex items-center justify-center bg-[var(--bg-tertiary)] group-hover:bg-[var(--color-primary)]/10 transition-colors">
+                    <Icon className="w-5 h-5 text-[var(--text-secondary)] group-hover:text-[var(--color-primary)] transition-colors" />
+                  </div>
+
+                  {/* Content */}
+                  <div className="flex-1 min-w-0">
+                    <h4 className="font-semibold mb-1" style={{ color: 'var(--text-primary)' }}>
+                      {section.title}
+                    </h4>
+                    <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+                      {section.count} {t('dashboard:setup_banner.added', 'agregado(s)')} • {t('dashboard:setup_banner.recommended_count', 'Recomendado')}: {section.recommended}
+                    </p>
+                  </div>
+
+                  {/* Arrow */}
+                  <ArrowRight className="w-5 h-5 text-[var(--text-tertiary)] group-hover:text-[var(--color-primary)] group-hover:translate-x-1 transition-all" />
+                </button>
+              );
+            })}
+          </div>
+
+          {/* Benefits of Completion */}
+          <div
+            className="mt-4 p-4 rounded-lg"
+            style={{ backgroundColor: 'var(--color-info)]/5', border: '1px solid var(--color-info)/20' }}
+          >
+            <div className="flex items-start gap-3">
+              <CheckCircle className="w-5 h-5 flex-shrink-0 mt-0.5" style={{ color: 'var(--color-info)' }} />
+              <div>
+                <h5 className="font-semibold text-sm mb-1" style={{ color: 'var(--text-primary)' }}>
+                  {t('dashboard:setup_banner.benefits_title', '✨ Al completar estos pasos, desbloquearás')}:
+                </h5>
+                <ul className="text-sm space-y-1" style={{ color: 'var(--text-secondary)' }}>
+                  <li>• {t('dashboard:setup_banner.benefit_1', 'Análisis de costos más preciso')}</li>
+                  <li>• {t('dashboard:setup_banner.benefit_2', 'Recomendaciones de IA mejoradas')}</li>
+                  <li>• {t('dashboard:setup_banner.benefit_3', 'Planificación de producción optimizada')}</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          {/* Dismiss Info */}
+          <p className="text-xs text-center mt-4" style={{ color: 'var(--text-tertiary)' }}>
+            💡 {t('dashboard:setup_banner.dismiss_info', 'Puedes ocultar este banner por 7 días haciendo clic en la X')}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/dashboard/GlanceableHealthHero.tsx

@@ -0,0 +1,371 @@
+// ================================================================
+// frontend/src/components/dashboard/GlanceableHealthHero.tsx
+// ================================================================
+/**
+ * Glanceable Health Hero - Simplified Dashboard Status
+ *
+ * JTBD-Aligned Design:
+ * - Core Job: "Quickly understand if anything requires my immediate attention"
+ * - Emotional Job: "Feel confident to proceed or know to stop and fix"
+ * - Design Principle: Progressive disclosure (traffic light → details)
+ *
+ * States:
+ * - 🟢 Green: "Everything looks good - proceed with your day"
+ * - 🟡 Yellow: "Some items need attention - but not urgent"
+ * - 🔴 Red: "Critical issues - stop and fix these first"
+ */
+
+import React, { useState, useMemo } from 'react';
+import { CheckCircle, AlertTriangle, AlertCircle, Clock, RefreshCw, Zap, ChevronDown, ChevronUp, ChevronRight } from 'lucide-react';
+import { BakeryHealthStatus } from '../../api/hooks/newDashboard';
+import { formatDistanceToNow } from 'date-fns';
+import { es, eu, enUS } from 'date-fns/locale';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useNotifications } from '../../hooks/useNotifications';
+
+interface GlanceableHealthHeroProps {
+  healthStatus: BakeryHealthStatus;
+  loading?: boolean;
+  urgentActionCount?: number; // New: show count of urgent actions
+}
+
+const statusConfig = {
+  green: {
+    bgColor: 'var(--color-success-50)',
+    borderColor: 'var(--color-success-200)',
+    textColor: 'var(--color-success-900)',
+    icon: CheckCircle,
+    iconColor: 'var(--color-success-600)',
+    iconBg: 'var(--color-success-100)',
+  },
+  yellow: {
+    bgColor: 'var(--color-warning-50)',
+    borderColor: 'var(--color-warning-300)',
+    textColor: 'var(--color-warning-900)',
+    icon: AlertTriangle,
+    iconColor: 'var(--color-warning-600)',
+    iconBg: 'var(--color-warning-100)',
+  },
+  red: {
+    bgColor: 'var(--color-error-50)',
+    borderColor: 'var(--color-error-300)',
+    textColor: 'var(--color-error-900)',
+    icon: AlertCircle,
+    iconColor: 'var(--color-error-600)',
+    iconBg: 'var(--color-error-100)',
+  },
+};
+
+const iconMap = {
+  check: CheckCircle,
+  warning: AlertTriangle,
+  alert: AlertCircle,
+  ai_handled: Zap,
+};
+
+/**
+ * Helper function to translate keys with proper namespace handling
+ */
+function translateKey(
+  key: string,
+  params: Record<string, any>,
+  t: any
+): string {
+  const namespaceMap: Record<string, string> = {
+    'health.': 'dashboard',
+    'dashboard.health.': 'dashboard',
+    'dashboard.': 'dashboard',
+    'reasoning.': 'reasoning',
+    'production.': 'production',
+    'jtbd.': 'reasoning',
+  };
+
+  let namespace = 'common';
+  let translationKey = key;
+
+  for (const [prefix, ns] of Object.entries(namespaceMap)) {
+    if (key.startsWith(prefix)) {
+      namespace = ns;
+      if (prefix === 'reasoning.') {
+        translationKey = key.substring(prefix.length);
+      } else if (prefix === 'dashboard.health.') {
+        translationKey = key.substring('dashboard.'.length);
+      } else if (prefix === 'dashboard.' && !key.startsWith('dashboard.health.')) {
+        translationKey = key.substring('dashboard.'.length);
+      }
+      break;
+    }
+  }
+
+  return t(translationKey, { ...params, ns: namespace, defaultValue: key });
+}
+
+export function GlanceableHealthHero({ healthStatus, loading, urgentActionCount = 0 }: GlanceableHealthHeroProps) {
+  const { t, i18n } = useTranslation(['dashboard', 'reasoning', 'production']);
+  const navigate = useNavigate();
+  const { notifications } = useNotifications();
+  const [detailsExpanded, setDetailsExpanded] = useState(false);
+
+  // Get date-fns locale
+  const dateLocale = i18n.language === 'es' ? es : i18n.language === 'eu' ? eu : enUS;
+
+  // ============================================================================
+  // ALL HOOKS MUST BE CALLED BEFORE ANY EARLY RETURNS
+  // This ensures hooks are called in the same order on every render
+  // ============================================================================
+
+  // Optimize notifications filtering - cache the filtered array itself
+  const criticalAlerts = useMemo(() => {
+    if (!notifications || notifications.length === 0) return [];
+    return notifications.filter(
+      n => n.priority_level === 'CRITICAL' && !n.read && n.type_class !== 'prevented_issue'
+    );
+  }, [notifications]);
+
+  const criticalAlertsCount = criticalAlerts.length;
+
+  // Create stable key for checklist items to prevent infinite re-renders
+  const checklistItemsKey = useMemo(() => {
+    if (!healthStatus?.checklistItems || healthStatus.checklistItems.length === 0) return 'empty';
+    return healthStatus.checklistItems.map(item => item.textKey).join(',');
+  }, [healthStatus?.checklistItems]);
+
+  // Update checklist items with real-time data
+  const updatedChecklistItems = useMemo(() => {
+    if (!healthStatus?.checklistItems) return [];
+
+    return healthStatus.checklistItems.map(item => {
+      if (item.textKey === 'dashboard.health.critical_issues' && criticalAlertsCount > 0) {
+        return {
+          ...item,
+          textParams: { ...item.textParams, count: criticalAlertsCount },
+          status: 'needs_you' as const,
+          actionRequired: true,
+        };
+      }
+      return item;
+    });
+  }, [checklistItemsKey, criticalAlertsCount]);
+
+  // Status and config (use safe defaults for loading state)
+  const status = healthStatus?.status || 'green';
+  const config = statusConfig[status];
+  const StatusIcon = config?.icon || (() => <div>🟢</div>);
+
+  // Determine simplified headline for glanceable view (safe for loading state)
+  const simpleHeadline = useMemo(() => {
+    if (status === 'green') {
+      return t('jtbd.health_status.green_simple', { ns: 'reasoning', defaultValue: '✅ Todo listo para hoy' });
+    } else if (status === 'yellow') {
+      if (urgentActionCount > 0) {
+        return t('jtbd.health_status.yellow_simple_with_count', { count: urgentActionCount, ns: 'reasoning', defaultValue: `⚠️ ${urgentActionCount} acción${urgentActionCount > 1 ? 'es' : ''} necesaria${urgentActionCount > 1 ? 's' : ''}` });
+      }
+      return t('jtbd.health_status.yellow_simple', { ns: 'reasoning', defaultValue: '⚠️ Algunas cosas necesitan atención' });
+    } else {
+      return t('jtbd.health_status.red_simple', { ns: 'reasoning', defaultValue: '🔴 Problemas críticos requieren acción' });
+    }
+  }, [status, urgentActionCount, t]);
+
+  const displayCriticalIssues = criticalAlertsCount > 0 ? criticalAlertsCount : (healthStatus?.criticalIssues || 0);
+
+  // ============================================================================
+  // NOW it's safe to early return - all hooks have been called
+  // ============================================================================
+  if (loading || !healthStatus) {
+    return (
+      <div className="animate-pulse rounded-xl shadow-lg p-6 border-2 border-[var(--border-primary)] bg-[var(--bg-primary)]">
+        <div className="h-16 rounded w-2/3 mb-4 bg-[var(--bg-tertiary)]"></div>
+        <div className="h-6 rounded w-1/2 bg-[var(--bg-tertiary)]"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="border-2 rounded-xl shadow-xl transition-all duration-300 hover:shadow-2xl"
+      style={{
+        backgroundColor: config.bgColor,
+        borderColor: config.borderColor,
+      }}
+    >
+      {/* Glanceable Hero View (Always Visible) */}
+      <div className="p-6">
+        <div className="flex items-center gap-4">
+          {/* Status Icon */}
+          <div
+            className="flex-shrink-0 w-16 h-16 md:w-20 md:h-20 rounded-full flex items-center justify-center shadow-md"
+            style={{ backgroundColor: config.iconBg }}
+          >
+            <StatusIcon className="w-8 h-8 md:w-10 md:h-10" strokeWidth={2.5} style={{ color: config.iconColor }} />
+          </div>
+
+          {/* Headline + Quick Stats */}
+          <div className="flex-1 min-w-0">
+            <h2 className="text-2xl md:text-3xl font-bold mb-2" style={{ color: config.textColor }}>
+              {simpleHeadline}
+            </h2>
+
+            {/* Quick Stats Row */}
+            <div className="flex flex-wrap items-center gap-3 text-sm">
+              {/* Last Update */}
+              <div className="flex items-center gap-1.5" style={{ color: 'var(--text-secondary)' }}>
+                <Clock className="w-4 h-4" />
+                <span>
+                  {healthStatus.lastOrchestrationRun
+                    ? formatDistanceToNow(new Date(healthStatus.lastOrchestrationRun), {
+                        addSuffix: true,
+                        locale: dateLocale,
+                      })
+                    : t('jtbd.health_status.never', { ns: 'reasoning' })}
+                </span>
+              </div>
+
+              {/* Critical Issues Badge */}
+              {displayCriticalIssues > 0 && (
+                <div className="flex items-center gap-1.5 px-2 py-1 rounded-md" style={{ backgroundColor: 'var(--color-error-100)', color: 'var(--color-error-800)' }}>
+                  <AlertCircle className={`w-4 h-4 ${criticalAlertsCount > 0 ? 'animate-pulse' : ''}`} />
+                  <span className="font-semibold">{displayCriticalIssues} crítico{displayCriticalIssues > 1 ? 's' : ''}</span>
+                </div>
+              )}
+
+              {/* Pending Actions Badge */}
+              {healthStatus.pendingActions > 0 && (
+                <div className="flex items-center gap-1.5 px-2 py-1 rounded-md" style={{ backgroundColor: 'var(--color-warning-100)', color: 'var(--color-warning-800)' }}>
+                  <AlertTriangle className="w-4 h-4" />
+                  <span className="font-semibold">{healthStatus.pendingActions} pendiente{healthStatus.pendingActions > 1 ? 's' : ''}</span>
+                </div>
+              )}
+
+              {/* AI Prevented Badge */}
+              {healthStatus.aiPreventedIssues && healthStatus.aiPreventedIssues > 0 && (
+                <div className="flex items-center gap-1.5 px-2 py-1 rounded-md" style={{ backgroundColor: 'var(--color-info-100)', color: 'var(--color-info-800)' }}>
+                  <Zap className="w-4 h-4" />
+                  <span className="font-semibold">{healthStatus.aiPreventedIssues} evitado{healthStatus.aiPreventedIssues > 1 ? 's' : ''}</span>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Expand/Collapse Button */}
+          <button
+            onClick={() => setDetailsExpanded(!detailsExpanded)}
+            className="flex-shrink-0 p-2 rounded-lg transition-colors hover:bg-[var(--bg-tertiary)]"
+            title={detailsExpanded ? 'Ocultar detalles' : 'Ver detalles'}
+          >
+            {detailsExpanded ? (
+              <ChevronUp className="w-6 h-6" style={{ color: config.textColor }} />
+            ) : (
+              <ChevronDown className="w-6 h-6" style={{ color: config.textColor }} />
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Detailed Checklist (Collapsible) */}
+      {detailsExpanded && (
+        <div
+          className="px-6 pb-6 pt-2 border-t border-[var(--border-primary)]"
+          style={{ borderColor: config.borderColor }}
+        >
+          {/* Full Headline */}
+          <p className="text-base mb-4 text-[var(--text-secondary)]">
+            {typeof healthStatus.headline === 'object' && healthStatus.headline?.key
+              ? translateKey(healthStatus.headline.key, healthStatus.headline.params || {}, t)
+              : healthStatus.headline}
+          </p>
+
+          {/* Checklist */}
+          {updatedChecklistItems && updatedChecklistItems.length > 0 && (
+            <div className="space-y-2">
+              {updatedChecklistItems.map((item, index) => {
+                // Safely get the icon with proper validation
+                const SafeIconComponent = iconMap[item.icon];
+                const ItemIcon = SafeIconComponent || AlertCircle;
+
+                const getStatusStyles = () => {
+                  switch (item.status) {
+                    case 'good':
+                      return {
+                        iconColor: 'var(--color-success-600)',
+                        bgColor: 'var(--color-success-50)',
+                        borderColor: 'transparent',
+                      };
+                    case 'ai_handled':
+                      return {
+                        iconColor: 'var(--color-info-600)',
+                        bgColor: 'var(--color-info-50)',
+                        borderColor: 'var(--color-info-300)',
+                      };
+                    case 'needs_you':
+                      return {
+                        iconColor: 'var(--color-warning-600)',
+                        bgColor: 'var(--color-warning-50)',
+                        borderColor: 'var(--color-warning-300)',
+                      };
+                    default:
+                      return {
+                        iconColor: item.actionRequired ? 'var(--color-warning-600)' : 'var(--color-success-600)',
+                        bgColor: item.actionRequired ? 'var(--bg-primary)' : 'var(--bg-secondary)',
+                        borderColor: 'transparent',
+                      };
+                  }
+                };
+
+                const styles = getStatusStyles();
+                const displayText = item.textKey
+                  ? translateKey(item.textKey, item.textParams || {}, t)
+                  : item.text || '';
+
+                const handleClick = () => {
+                  if (item.actionPath && (item.status === 'needs_you' || item.actionRequired)) {
+                    navigate(item.actionPath);
+                  }
+                };
+
+                const isClickable = Boolean(item.actionPath && (item.status === 'needs_you' || item.actionRequired));
+
+                return (
+                  <div
+                    key={index}
+                    className={`flex items-center gap-3 p-3 rounded-lg border transition-all ${
+                      isClickable ? 'cursor-pointer hover:shadow-md hover:scale-[1.01] bg-[var(--bg-tertiary)]' : ''
+                    }`}
+                    style={{
+                      backgroundColor: styles.bgColor,
+                      borderColor: styles.borderColor,
+                    }}
+                    onClick={handleClick}
+                  >
+                    <ItemIcon className="w-5 h-5 flex-shrink-0" style={{ color: styles.iconColor }} />
+                    <span
+                      className={`flex-1 text-sm ${
+                        item.status === 'needs_you' || item.actionRequired ? 'font-semibold' : ''
+                      } text-[var(--text-primary)]`}
+                    >
+                      {displayText}
+                    </span>
+                    {isClickable && (
+                      <ChevronRight className="w-4 h-4 flex-shrink-0 text-[var(--text-tertiary)]" />
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+
+          {/* Next Check */}
+          {healthStatus.nextScheduledRun && (
+            <div className="flex items-center gap-2 text-sm mt-4 p-3 rounded-lg bg-[var(--bg-secondary)] text-[var(--text-secondary)]">
+              <RefreshCw className="w-4 h-4" />
+              <span>
+                {t('jtbd.health_status.next_check', { ns: 'reasoning' })}:{' '}
+                {formatDistanceToNow(new Date(healthStatus.nextScheduledRun), { addSuffix: true, locale: dateLocale })}
+              </span>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/dashboard/HealthStatusCard.tsx

@@ -1,221 +0,0 @@
-// ================================================================
-// frontend/src/components/dashboard/HealthStatusCard.tsx
-// ================================================================
-/**
- * Health Status Card - Top-level bakery status indicator
- *
- * Shows if the bakery is running smoothly (green), needs attention (yellow),
- * or has critical issues (red). This is the first thing users see.
- */
-
-import React from 'react';
-import { CheckCircle, AlertTriangle, AlertCircle, Clock, RefreshCw } from 'lucide-react';
-import { BakeryHealthStatus } from '../../api/hooks/newDashboard';
-import { formatDistanceToNow } from 'date-fns';
-import { es, eu, enUS } from 'date-fns/locale';
-import { useTranslation } from 'react-i18next';
-
-interface HealthStatusCardProps {
-  healthStatus: BakeryHealthStatus;
-  loading?: boolean;
-}
-
-const statusConfig = {
-  green: {
-    bgColor: 'var(--color-success-50)',
-    borderColor: 'var(--color-success-200)',
-    textColor: 'var(--color-success-800)',
-    icon: CheckCircle,
-    iconColor: 'var(--color-success-600)',
-  },
-  yellow: {
-    bgColor: 'var(--color-warning-50)',
-    borderColor: 'var(--color-warning-200)',
-    textColor: 'var(--color-warning-900)',
-    icon: AlertTriangle,
-    iconColor: 'var(--color-warning-600)',
-  },
-  red: {
-    bgColor: 'var(--color-error-50)',
-    borderColor: 'var(--color-error-200)',
-    textColor: 'var(--color-error-900)',
-    icon: AlertCircle,
-    iconColor: 'var(--color-error-600)',
-  },
-};
-
-const iconMap = {
-  check: CheckCircle,
-  warning: AlertTriangle,
-  alert: AlertCircle,
-};
-
-/**
- * Helper function to translate keys with proper namespace handling
- * Maps backend key formats to correct i18next namespaces
- */
-function translateKey(
-  key: string,
-  params: Record<string, any>,
-  t: any
-): string {
-  // Map key prefixes to their correct namespaces
-  const namespaceMap: Record<string, string> = {
-    'health.': 'dashboard',
-    'dashboard.health.': 'dashboard',
-    'dashboard.': 'dashboard',
-    'reasoning.': 'reasoning',
-    'production.': 'production',
-    'jtbd.': 'reasoning',
-  };
-
-  // Find the matching namespace
-  let namespace = 'common';
-  let translationKey = key;
-
-  for (const [prefix, ns] of Object.entries(namespaceMap)) {
-    if (key.startsWith(prefix)) {
-      namespace = ns;
-      // Remove the first segment if it matches the namespace
-      // e.g., "dashboard.health.production_on_schedule" -> "health.production_on_schedule"
-      // e.g., "reasoning.types.xyz" -> "types.xyz" for reasoning namespace
-      if (prefix === 'reasoning.') {
-        translationKey = key.substring(prefix.length);
-      } else if (prefix === 'dashboard.health.') {
-        // Keep "health." prefix but remove "dashboard."
-        translationKey = key.substring('dashboard.'.length);
-      } else if (prefix === 'dashboard.' && !key.startsWith('dashboard.health.')) {
-        // For other dashboard keys, remove "dashboard." prefix
-        translationKey = key.substring('dashboard.'.length);
-      }
-      break;
-    }
-  }
-
-  return t(translationKey, { ...params, ns: namespace, defaultValue: key });
-}
-
-export function HealthStatusCard({ healthStatus, loading }: HealthStatusCardProps) {
-  const { t, i18n } = useTranslation(['dashboard', 'reasoning', 'production']);
-
-  // Get date-fns locale based on current language
-  const dateLocale = i18n.language === 'es' ? es : i18n.language === 'eu' ? eu : enUS;
-
-  if (loading || !healthStatus) {
-    return (
-      <div className="animate-pulse rounded-lg shadow-md p-6" style={{ backgroundColor: 'var(--bg-primary)' }}>
-        <div className="h-8 rounded w-3/4 mb-4" style={{ backgroundColor: 'var(--bg-tertiary)' }}></div>
-        <div className="h-4 rounded w-1/2" style={{ backgroundColor: 'var(--bg-tertiary)' }}></div>
-      </div>
-    );
-  }
-
-  const status = healthStatus.status || 'green';
-  const config = statusConfig[status];
-  const StatusIcon = config.icon;
-
-  return (
-    <div
-      className="border-2 rounded-xl p-6 shadow-lg transition-all duration-300 hover:shadow-xl"
-      style={{
-        backgroundColor: config.bgColor,
-        borderColor: config.borderColor,
-      }}
-    >
-      {/* Header with Status Icon */}
-      <div className="flex items-start gap-4 mb-4">
-        <div className="flex-shrink-0">
-          <StatusIcon className="w-10 h-10 md:w-12 md:h-12" strokeWidth={2} style={{ color: config.iconColor }} />
-        </div>
-        <div className="flex-1 min-w-0">
-          <h2 className="text-xl md:text-2xl font-bold mb-2" style={{ color: config.textColor }}>
-            {typeof healthStatus.headline === 'object' && healthStatus.headline?.key
-              ? translateKey(healthStatus.headline.key, healthStatus.headline.params || {}, t)
-              : healthStatus.headline || t(`jtbd.health_status.${status}`, { ns: 'reasoning' })}
-          </h2>
-
-          {/* Last Update */}
-          <div className="flex items-center gap-2 text-sm" style={{ color: 'var(--text-secondary)' }}>
-            <Clock className="w-4 h-4" />
-            <span>
-              {t('jtbd.health_status.last_updated', { ns: 'reasoning' })}:{' '}
-              {healthStatus.lastOrchestrationRun
-                ? formatDistanceToNow(new Date(healthStatus.lastOrchestrationRun), {
-                    addSuffix: true,
-                    locale: dateLocale,
-                  })
-                : t('jtbd.health_status.never', { ns: 'reasoning' })}
-            </span>
-          </div>
-
-          {/* Next Check */}
-          {healthStatus.nextScheduledRun && (
-            <div className="flex items-center gap-2 text-sm mt-1" style={{ color: 'var(--text-secondary)' }}>
-              <RefreshCw className="w-4 h-4" />
-              <span>
-                {t('jtbd.health_status.next_check', { ns: 'reasoning' })}:{' '}
-                {formatDistanceToNow(new Date(healthStatus.nextScheduledRun), { addSuffix: true, locale: dateLocale })}
-              </span>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Status Checklist */}
-      {healthStatus.checklistItems && healthStatus.checklistItems.length > 0 && (
-        <div className="space-y-3 mt-6">
-          {healthStatus.checklistItems.map((item, index) => {
-          const ItemIcon = iconMap[item.icon];
-          const iconColor = item.actionRequired ? 'var(--color-warning-600)' : 'var(--color-success-600)';
-          const bgColor = item.actionRequired ? 'var(--bg-primary)' : 'rgba(255, 255, 255, 0.5)';
-
-          // Translate using textKey if available, otherwise use text
-          const displayText = item.textKey
-            ? translateKey(item.textKey, item.textParams || {}, t)
-            : item.text || '';
-
-          return (
-            <div
-              key={index}
-              className="flex items-center gap-3 p-3 rounded-lg"
-              style={{ backgroundColor: bgColor }}
-            >
-              <ItemIcon className="w-5 h-5 flex-shrink-0" style={{ color: iconColor }} />
-              <span
-                className={`text-sm md:text-base ${item.actionRequired ? 'font-semibold' : ''}`}
-                style={{ color: 'var(--text-primary)' }}
-              >
-                {displayText}
-              </span>
-            </div>
-          );
-        })}
-      </div>
-      )}
-
-      {/* Summary Footer */}
-      {(healthStatus.criticalIssues > 0 || healthStatus.pendingActions > 0) && (
-        <div className="mt-6 pt-4" style={{ borderTop: '1px solid var(--border-primary)' }}>
-          <div className="flex flex-wrap gap-4 text-sm">
-            {healthStatus.criticalIssues > 0 && (
-              <div className="flex items-center gap-2">
-                <AlertCircle className="w-4 h-4" style={{ color: 'var(--color-error-600)' }} />
-                <span className="font-semibold" style={{ color: 'var(--color-error-800)' }}>
-                  {t('jtbd.health_status.critical_issues', { count: healthStatus.criticalIssues, ns: 'reasoning' })}
-                </span>
-              </div>
-            )}
-            {healthStatus.pendingActions > 0 && (
-              <div className="flex items-center gap-2">
-                <AlertTriangle className="w-4 h-4" style={{ color: 'var(--color-warning-600)' }} />
-                <span className="font-semibold" style={{ color: 'var(--color-warning-800)' }}>
-                  {t('jtbd.health_status.actions_needed', { count: healthStatus.pendingActions, ns: 'reasoning' })}
-                </span>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

frontend/src/components/dashboard/InsightsGrid.tsx

@@ -1,129 +0,0 @@
-// ================================================================
-// frontend/src/components/dashboard/InsightsGrid.tsx
-// ================================================================
-/**
- * Insights Grid - Key metrics at a glance
- *
- * 2x2 grid of important metrics: savings, inventory, waste, deliveries.
- * Mobile-first design with large touch targets.
- */
-
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { Insights } from '../../api/hooks/newDashboard';
-
-interface InsightsGridProps {
-  insights: Insights;
-  loading?: boolean;
-}
-
-const colorConfig = {
-  green: {
-    bgColor: 'var(--color-success-50)',
-    borderColor: 'var(--color-success-200)',
-    textColor: 'var(--color-success-800)',
-    detailColor: 'var(--color-success-600)',
-  },
-  amber: {
-    bgColor: 'var(--color-warning-50)',
-    borderColor: 'var(--color-warning-200)',
-    textColor: 'var(--color-warning-900)',
-    detailColor: 'var(--color-warning-600)',
-  },
-  red: {
-    bgColor: 'var(--color-error-50)',
-    borderColor: 'var(--color-error-200)',
-    textColor: 'var(--color-error-900)',
-    detailColor: 'var(--color-error-600)',
-  },
-};
-
-function InsightCard({
-  color,
-  i18n,
-}: {
-  color: 'green' | 'amber' | 'red';
-  i18n: {
-    label: {
-      key: string;
-      params?: Record<string, any>;
-    };
-    value: {
-      key: string;
-      params?: Record<string, any>;
-    };
-    detail: {
-      key: string;
-      params?: Record<string, any>;
-    } | null;
-  };
-}) {
-  const { t } = useTranslation('dashboard');
-  const config = colorConfig[color];
-
-  // Translate using i18n keys
-  const displayLabel = t(i18n.label.key, i18n.label.params);
-  const displayValue = t(i18n.value.key, i18n.value.params);
-  const displayDetail = i18n.detail ? t(i18n.detail.key, i18n.detail.params) : '';
-
-  return (
-    <div
-      className="border-2 rounded-xl p-4 md:p-6 transition-all duration-200 hover:shadow-lg cursor-pointer"
-      style={{
-        backgroundColor: config.bgColor,
-        borderColor: config.borderColor,
-      }}
-    >
-      {/* Label */}
-      <div className="text-sm md:text-base font-bold mb-2" style={{ color: 'var(--text-primary)' }}>{displayLabel}</div>
-
-      {/* Value */}
-      <div className="text-xl md:text-2xl font-bold mb-1" style={{ color: config.textColor }}>{displayValue}</div>
-
-      {/* Detail */}
-      <div className="text-sm font-medium" style={{ color: config.detailColor }}>{displayDetail}</div>
-    </div>
-  );
-}
-
-export function InsightsGrid({ insights, loading }: InsightsGridProps) {
-  if (loading) {
-    return (
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-        {[1, 2, 3, 4].map((i) => (
-          <div key={i} className="animate-pulse rounded-xl p-6" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
-            <div className="h-4 rounded w-1/2 mb-3" style={{ backgroundColor: 'var(--bg-quaternary)' }}></div>
-            <div className="h-8 rounded w-3/4 mb-2" style={{ backgroundColor: 'var(--bg-quaternary)' }}></div>
-            <div className="h-4 rounded w-2/3" style={{ backgroundColor: 'var(--bg-quaternary)' }}></div>
-          </div>
-        ))}
-      </div>
-    );
-  }
-
-  // Guard against undefined values
-  if (!insights || !insights.savings || !insights.inventory || !insights.waste || !insights.deliveries) {
-    return null;
-  }
-
-  return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-      <InsightCard
-        color={insights.savings.color}
-        i18n={insights.savings.i18n}
-      />
-      <InsightCard
-        color={insights.inventory.color}
-        i18n={insights.inventory.i18n}
-      />
-      <InsightCard
-        color={insights.waste.color}
-        i18n={insights.waste.i18n}
-      />
-      <InsightCard
-        color={insights.deliveries.color}
-        i18n={insights.deliveries.i18n}
-      />
-    </div>
-  );
-}

frontend/src/components/dashboard/IntelligentSystemSummaryCard.tsx

@@ -0,0 +1,432 @@
+// ================================================================
+// frontend/src/components/dashboard/IntelligentSystemSummaryCard.tsx
+// ================================================================
+/**
+ * Intelligent System Summary Card - Unified AI Impact Component
+ *
+ * Simplified design matching GlanceableHealthHero pattern:
+ * - Clean, scannable header with inline metrics badges
+ * - Minimal orchestration summary (details shown elsewhere)
+ * - Progressive disclosure for prevented issues details
+ */
+
+import React, { useState, useEffect, useMemo } from 'react';
+import {
+  Bot,
+  TrendingUp,
+  TrendingDown,
+  Clock,
+  CheckCircle,
+  ChevronDown,
+  ChevronUp,
+  Zap,
+  ShieldCheck,
+  Euro,
+} from 'lucide-react';
+import { OrchestrationSummary } from '../../api/hooks/newDashboard';
+import { useTranslation } from 'react-i18next';
+import { formatTime, formatRelativeTime } from '../../utils/date';
+import { useTenant } from '../../stores/tenant.store';
+import { useNotifications } from '../../hooks/useNotifications';
+import { EnrichedAlert } from '../../types/alerts';
+import { Badge } from '../ui/Badge';
+
+interface PeriodComparison {
+  current_period: {
+    days: number;
+    total_alerts: number;
+    prevented_issues: number;
+    handling_rate_percentage: number;
+  };
+  previous_period: {
+    days: number;
+    total_alerts: number;
+    prevented_issues: number;
+    handling_rate_percentage: number;
+  };
+  changes: {
+    handling_rate_change_percentage: number;
+    alert_count_change_percentage: number;
+    trend_direction: 'up' | 'down' | 'stable';
+  };
+}
+
+interface DashboardAnalytics {
+  period_days: number;
+  total_alerts: number;
+  active_alerts: number;
+  ai_handling_rate: number;
+  prevented_issues_count: number;
+  estimated_savings_eur: number;
+  total_financial_impact_at_risk_eur: number;
+  period_comparison?: PeriodComparison;
+}
+
+interface IntelligentSystemSummaryCardProps {
+  orchestrationSummary: OrchestrationSummary;
+  orchestrationLoading?: boolean;
+  onWorkflowComplete?: () => void;
+  className?: string;
+}
+
+export function IntelligentSystemSummaryCard({
+  orchestrationSummary,
+  orchestrationLoading,
+  onWorkflowComplete,
+  className = '',
+}: IntelligentSystemSummaryCardProps) {
+  const { t } = useTranslation(['dashboard', 'reasoning']);
+  const { currentTenant } = useTenant();
+  const { notifications } = useNotifications();
+
+  const [analytics, setAnalytics] = useState<DashboardAnalytics | null>(null);
+  const [preventedAlerts, setPreventedAlerts] = useState<EnrichedAlert[]>([]);
+  const [analyticsLoading, setAnalyticsLoading] = useState(true);
+  const [preventedIssuesExpanded, setPreventedIssuesExpanded] = useState(false);
+  const [orchestrationExpanded, setOrchestrationExpanded] = useState(false);
+
+  // Fetch analytics data
+  useEffect(() => {
+    const fetchAnalytics = async () => {
+      if (!currentTenant?.id) {
+        setAnalyticsLoading(false);
+        return;
+      }
+
+      try {
+        setAnalyticsLoading(true);
+        const { apiClient } = await import('../../api/client/apiClient');
+
+        const [analyticsData, alertsData] = await Promise.all([
+          apiClient.get<DashboardAnalytics>(
+            `/tenants/${currentTenant.id}/alerts/analytics/dashboard`,
+            { params: { days: 30 } }
+          ),
+          apiClient.get<{ alerts: EnrichedAlert[] }>(
+            `/tenants/${currentTenant.id}/alerts`,
+            { params: { limit: 100 } }
+          ),
+        ]);
+
+        setAnalytics(analyticsData);
+
+        const sevenDaysAgo = new Date();
+        sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
+
+        const filteredAlerts = (alertsData.alerts || [])
+          .filter(
+            (alert) =>
+              alert.type_class === 'prevented_issue' &&
+              new Date(alert.created_at) >= sevenDaysAgo
+          )
+          .slice(0, 20);
+
+        setPreventedAlerts(filteredAlerts);
+      } catch (err) {
+        console.error('Error fetching intelligent system data:', err);
+      } finally {
+        setAnalyticsLoading(false);
+      }
+    };
+
+    fetchAnalytics();
+  }, [currentTenant?.id]);
+
+  // Real-time prevented issues from SSE
+  const preventedIssuesKey = useMemo(() => {
+    if (!notifications || notifications.length === 0) return 'empty';
+    return notifications
+      .filter((n) => n.type_class === 'prevented_issue' && !n.read)
+      .map((n) => n.id)
+      .sort()
+      .join(',');
+  }, [notifications]);
+
+  // Calculate metrics
+  const totalSavings = analytics?.estimated_savings_eur || 0;
+  const trendPercentage = analytics?.period_comparison?.changes?.handling_rate_change_percentage || 0;
+  const hasPositiveTrend = trendPercentage > 0;
+
+  // Loading state
+  if (analyticsLoading || orchestrationLoading) {
+    return (
+      <div
+        className={`rounded-xl shadow-xl p-6 border-2 ${className}`}
+        style={{ backgroundColor: 'var(--bg-primary)', borderColor: 'var(--border-primary)' }}
+      >
+        <div className="animate-pulse space-y-4">
+          <div className="flex items-center gap-4">
+            <div className="w-16 h-16 rounded-full" style={{ backgroundColor: 'var(--bg-tertiary)' }}></div>
+            <div className="flex-1">
+              <div className="h-6 rounded w-1/2 mb-2" style={{ backgroundColor: 'var(--bg-tertiary)' }}></div>
+              <div className="h-4 rounded w-3/4" style={{ backgroundColor: 'var(--bg-tertiary)' }}></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`rounded-xl shadow-xl border-2 transition-all duration-300 hover:shadow-2xl ${className}`}
+      style={{
+        backgroundColor: 'var(--color-success-50)',
+        borderColor: 'var(--color-success-200)',
+      }}
+    >
+      {/* Always Visible Header - GlanceableHealthHero Style */}
+      <div className="p-6">
+        <div className="flex items-center gap-4">
+          {/* Icon */}
+          <div
+            className="w-16 h-16 md:w-20 md:h-20 rounded-full flex items-center justify-center flex-shrink-0 shadow-md"
+            style={{ backgroundColor: 'var(--color-success-100)' }}
+          >
+            <Bot className="w-8 h-8 md:w-10 md:h-10" style={{ color: 'var(--color-success-600)' }} />
+          </div>
+
+          {/* Title + Metrics Badges */}
+          <div className="flex-1 min-w-0">
+            <h2 className="text-2xl md:text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
+              {t('dashboard:intelligent_system.title', 'Intelligent System Summary')}
+            </h2>
+
+            {/* Inline Metrics Badges */}
+            <div className="flex flex-wrap items-center gap-3">
+              {/* AI Handling Rate Badge */}
+              <div
+                className="flex items-center gap-2 px-2 py-1 rounded-md"
+                style={{ backgroundColor: 'var(--color-success-100)', border: '1px solid var(--color-success-300)' }}
+              >
+                <span className="text-sm font-semibold" style={{ color: 'var(--color-success-700)' }}>
+                  {analytics?.ai_handling_rate.toFixed(1)}%
+                </span>
+                {hasPositiveTrend ? (
+                  <TrendingUp className="w-3 h-3" style={{ color: 'var(--color-success-600)' }} />
+                ) : (
+                  <TrendingDown className="w-3 h-3" style={{ color: 'var(--color-error)' }} />
+                )}
+                {trendPercentage !== 0 && (
+                  <span className="text-xs" style={{ color: 'var(--color-success-600)' }}>
+                    {trendPercentage > 0 ? '+' : ''}{trendPercentage}%
+                  </span>
+                )}
+              </div>
+
+              {/* Prevented Issues Badge */}
+              <div
+                className="flex items-center gap-1 px-2 py-1 rounded-md"
+                style={{ backgroundColor: 'var(--color-primary-100)', border: '1px solid var(--color-primary-300)' }}
+              >
+                <ShieldCheck className="w-4 h-4" style={{ color: 'var(--color-primary-600)' }} />
+                <span className="text-sm font-semibold" style={{ color: 'var(--color-primary-700)' }}>
+                  {analytics?.prevented_issues_count || 0}
+                </span>
+                <span className="text-xs" style={{ color: 'var(--color-primary-600)' }}>
+                  {t('dashboard:intelligent_system.prevented_issues', 'issues')}
+                </span>
+              </div>
+
+              {/* Savings Badge */}
+              <div
+                className="flex items-center gap-1 px-2 py-1 rounded-md"
+                style={{ backgroundColor: 'var(--color-success-100)', border: '1px solid var(--color-success-300)' }}
+              >
+                <Euro className="w-4 h-4" style={{ color: 'var(--color-success-600)' }} />
+                <span className="text-sm font-semibold" style={{ color: 'var(--color-success-700)' }}>
+                  €{totalSavings.toFixed(0)}
+                </span>
+                <span className="text-xs" style={{ color: 'var(--color-success-600)' }}>
+                  saved
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Expand Button */}
+          <button
+            onClick={() => setPreventedIssuesExpanded(!preventedIssuesExpanded)}
+            className="flex-shrink-0 p-2 rounded-lg hover:bg-black/5 transition-colors"
+          >
+            {preventedIssuesExpanded ? (
+              <ChevronUp className="w-6 h-6" style={{ color: 'var(--text-secondary)' }} />
+            ) : (
+              <ChevronDown className="w-6 h-6" style={{ color: 'var(--text-secondary)' }} />
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Collapsible Section: Prevented Issues Details */}
+      {preventedIssuesExpanded && (
+        <div className="px-6 pb-6 pt-2 border-t" style={{ borderColor: 'var(--color-success-200)' }}>
+          {preventedAlerts.length === 0 ? (
+            <div className="text-center py-8">
+              <p className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>
+                {t('dashboard:intelligent_system.no_prevented_issues', 'No issues prevented this week - all systems running smoothly!')}
+              </p>
+            </div>
+          ) : (
+            <>
+              {/* Celebration Message */}
+              <div
+                className="rounded-lg p-3 mb-4"
+                style={{ backgroundColor: 'var(--color-success-100)', border: '1px solid var(--color-success-300)' }}
+              >
+                <p className="text-sm font-semibold" style={{ color: 'var(--color-success-700)' }}>
+                  {t('dashboard:intelligent_system.celebration', 'Great news! AI prevented {count} issue(s) before they became problems.', {
+                    count: preventedAlerts.length,
+                  })}
+                </p>
+              </div>
+
+              {/* Prevented Issues List */}
+              <div className="space-y-2">
+                {preventedAlerts.map((alert) => {
+                  const savings = alert.orchestrator_context?.estimated_savings_eur || 0;
+                  const actionTaken = alert.orchestrator_context?.action_taken || 'AI intervention';
+                  const timeAgo = formatRelativeTime(alert.created_at) || 'Fecha desconocida';
+
+                  return (
+                    <div
+                      key={alert.id}
+                      className="rounded-lg p-3 border"
+                      style={{ backgroundColor: 'var(--bg-primary)', borderColor: 'var(--border-primary)' }}
+                    >
+                      <div className="flex items-start justify-between mb-2">
+                        <div className="flex items-start gap-2 flex-1">
+                          <CheckCircle className="w-4 h-4 mt-0.5 flex-shrink-0" style={{ color: 'var(--color-success-600)' }} />
+                          <div className="flex-1 min-w-0">
+                            <h4 className="font-semibold text-sm mb-1" style={{ color: 'var(--text-primary)' }}>
+                              {alert.title}
+                            </h4>
+                            <p className="text-xs" style={{ color: 'var(--text-secondary)' }}>
+                              {alert.message}
+                            </p>
+                          </div>
+                        </div>
+                        {savings > 0 && (
+                          <Badge variant="success" className="ml-2 flex-shrink-0">
+                            <Euro className="w-3 h-3 mr-1" />
+                            €{savings.toFixed(0)}
+                          </Badge>
+                        )}
+                      </div>
+
+                      <div className="flex items-center justify-between text-xs" style={{ color: 'var(--text-tertiary)' }}>
+                        <div className="flex items-center gap-1">
+                          <Zap className="w-3 h-3" />
+                          <span>{actionTaken}</span>
+                        </div>
+                        <div className="flex items-center gap-1">
+                          <Clock className="w-3 h-3" />
+                          <span>{timeAgo}</span>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </>
+          )}
+        </div>
+      )}
+
+      {/* Collapsible Section: Latest Orchestration Run (Ultra Minimal) */}
+      <div className="border-t" style={{ borderColor: 'var(--color-success-200)' }}>
+        <button
+          onClick={() => setOrchestrationExpanded(!orchestrationExpanded)}
+          className="w-full flex items-center justify-between px-6 py-3 hover:bg-black/5 transition-colors"
+        >
+          <div className="flex items-center gap-2">
+            <Bot className="w-5 h-5" style={{ color: 'var(--color-primary)' }} />
+            <h3 className="text-base font-bold" style={{ color: 'var(--text-primary)' }}>
+              {t('dashboard:intelligent_system.orchestration_title', 'Latest Orchestration Run')}
+            </h3>
+          </div>
+          {orchestrationExpanded ? (
+            <ChevronUp className="w-5 h-5" style={{ color: 'var(--text-secondary)' }} />
+          ) : (
+            <ChevronDown className="w-5 h-5" style={{ color: 'var(--text-secondary)' }} />
+          )}
+        </button>
+
+        {orchestrationExpanded && (
+          <div className="px-6 pb-4">
+            {orchestrationSummary && orchestrationSummary.status !== 'no_runs' ? (
+              <div className="space-y-2">
+                {/* Run Info Line */}
+                <div className="flex items-center gap-2 text-sm" style={{ color: 'var(--text-secondary)' }}>
+                  <Clock className="w-4 h-4" />
+                  <span>
+                    {t('reasoning:jtbd.orchestration_summary.run_info', 'Run #{runNumber}', {
+                      runNumber: orchestrationSummary.runNumber || 0,
+                    })}{' '}
+                    •{' '}
+                    {orchestrationSummary.runTimestamp
+                      ? formatRelativeTime(orchestrationSummary.runTimestamp) || 'recently'
+                      : 'recently'}
+                    {orchestrationSummary.durationSeconds && ` • ${orchestrationSummary.durationSeconds}s`}
+                  </span>
+                </div>
+
+                {/* Summary Line */}
+                <div className="text-sm" style={{ color: 'var(--text-primary)' }}>
+                  {orchestrationSummary.purchaseOrdersCreated > 0 && (
+                    <span>
+                      <span className="font-semibold">{orchestrationSummary.purchaseOrdersCreated}</span>{' '}
+                      {orchestrationSummary.purchaseOrdersCreated === 1 ? 'purchase order' : 'purchase orders'}
+                      {orchestrationSummary.purchaseOrdersSummary && orchestrationSummary.purchaseOrdersSummary.length > 0 && (
+                        <span>
+                          {' '}(€
+                          {orchestrationSummary.purchaseOrdersSummary
+                            .reduce((sum, po) => sum + (po.totalAmount || 0), 0)
+                            .toFixed(0)}
+                          )
+                        </span>
+                      )}
+                    </span>
+                  )}
+                  {orchestrationSummary.purchaseOrdersCreated > 0 && orchestrationSummary.productionBatchesCreated > 0 && ' • '}
+                  {orchestrationSummary.productionBatchesCreated > 0 && (
+                    <span>
+                      <span className="font-semibold">{orchestrationSummary.productionBatchesCreated}</span>{' '}
+                      {orchestrationSummary.productionBatchesCreated === 1 ? 'production batch' : 'production batches'}
+                      {orchestrationSummary.productionBatchesSummary && orchestrationSummary.productionBatchesSummary.length > 0 && (
+                        <span>
+                          {' '}(
+                          {orchestrationSummary.productionBatchesSummary[0].readyByTime
+                            ? formatTime(orchestrationSummary.productionBatchesSummary[0].readyByTime, 'HH:mm')
+                            : 'TBD'}
+                          {orchestrationSummary.productionBatchesSummary.length > 1 &&
+                            orchestrationSummary.productionBatchesSummary[orchestrationSummary.productionBatchesSummary.length - 1]
+                              .readyByTime &&
+                            ` - ${formatTime(
+                              orchestrationSummary.productionBatchesSummary[orchestrationSummary.productionBatchesSummary.length - 1]
+                                .readyByTime,
+                              'HH:mm'
+                            )}`}
+                          )
+                        </span>
+                      )}
+                    </span>
+                  )}
+                  {orchestrationSummary.purchaseOrdersCreated === 0 && orchestrationSummary.productionBatchesCreated === 0 && (
+                    <span style={{ color: 'var(--text-secondary)' }}>
+                      {t('reasoning:jtbd.orchestration_summary.no_actions', 'No actions created')}
+                    </span>
+                  )}
+                </div>
+              </div>
+            ) : (
+              <div className="text-sm text-center py-4" style={{ color: 'var(--text-secondary)' }}>
+                {t('dashboard:orchestration.no_runs_message', 'No orchestration has been run yet.')}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/dashboard/OrchestrationSummaryCard.tsx

@@ -1,316 +0,0 @@
-// ================================================================
-// frontend/src/components/dashboard/OrchestrationSummaryCard.tsx
-// ================================================================
-/**
- * Orchestration Summary Card - What the system did for you
- *
- * Builds trust by showing transparency into automation decisions.
- * Narrative format makes it feel like a helpful assistant.
- */
-
-import React, { useState } from 'react';
-import {
-  Bot,
-  TrendingUp,
-  Package,
-  Clock,
-  CheckCircle,
-  FileText,
-  Users,
-  Brain,
-  ChevronDown,
-  ChevronUp,
-  Loader2,
-} from 'lucide-react';
-import { OrchestrationSummary } from '../../api/hooks/newDashboard';
-import { runDailyWorkflow } from '../../api/services/orchestrator';
-import { formatDistanceToNow } from 'date-fns';
-import { useTranslation } from 'react-i18next';
-import { useTenant } from '../../stores/tenant.store';
-import toast from 'react-hot-toast';
-
-interface OrchestrationSummaryCardProps {
-  summary: OrchestrationSummary;
-  loading?: boolean;
-  onWorkflowComplete?: () => void;
-}
-
-export function OrchestrationSummaryCard({ summary, loading, onWorkflowComplete }: OrchestrationSummaryCardProps) {
-  const [expanded, setExpanded] = useState(false);
-  const [isRunning, setIsRunning] = useState(false);
-  const { t } = useTranslation('reasoning');
-  const { currentTenant } = useTenant();
-
-  const handleRunPlanning = async () => {
-    if (!currentTenant?.id) {
-      toast.error(t('jtbd.orchestration_summary.no_tenant_error') || 'No tenant ID found');
-      return;
-    }
-
-    setIsRunning(true);
-    try {
-      const result = await runDailyWorkflow(currentTenant.id);
-
-      if (result.success) {
-        toast.success(t('jtbd.orchestration_summary.planning_started') || 'Planning started successfully');
-        // Call callback to refresh the orchestration summary
-        if (onWorkflowComplete) {
-          onWorkflowComplete();
-        }
-      } else {
-        toast.error(result.message || t('jtbd.orchestration_summary.planning_failed') || 'Failed to start planning');
-      }
-    } catch (error) {
-      console.error('Error running daily workflow:', error);
-      toast.error(t('jtbd.orchestration_summary.planning_error') || 'An error occurred while starting planning');
-    } finally {
-      setIsRunning(false);
-    }
-  };
-
-  if (loading || !summary) {
-    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="flex items-center gap-3">
-            <div className="w-10 h-10 rounded-full" style={{ backgroundColor: 'var(--bg-tertiary)' }}></div>
-            <div className="h-6 rounded w-1/2" style={{ backgroundColor: 'var(--bg-tertiary)' }}></div>
-          </div>
-          <div className="space-y-2">
-            <div className="h-4 rounded" style={{ backgroundColor: 'var(--bg-tertiary)' }}></div>
-            <div className="h-4 rounded w-5/6" style={{ backgroundColor: 'var(--bg-tertiary)' }}></div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // Handle case where no orchestration has run yet
-  if (summary.status === 'no_runs') {
-    return (
-      <div
-        className="border-2 rounded-xl p-6 shadow-lg"
-        style={{
-          backgroundColor: 'var(--surface-secondary)',
-          borderColor: 'var(--color-info-300)',
-        }}
-      >
-        <div className="flex items-start gap-4">
-          <Bot className="w-10 h-10 flex-shrink-0" style={{ color: 'var(--color-info)' }} />
-          <div>
-            <h3 className="text-lg font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
-              {t('jtbd.orchestration_summary.ready_to_plan')}
-            </h3>
-            <p className="mb-4" style={{ color: 'var(--text-secondary)' }}>{summary.message || ''}</p>
-            <button
-              onClick={handleRunPlanning}
-              disabled={isRunning}
-              className="px-4 py-2 rounded-lg font-semibold transition-colors duration-200 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed hover:opacity-90"
-              style={{
-                backgroundColor: 'var(--color-info)',
-                color: 'var(--bg-primary)',
-              }}
-            >
-              {isRunning && <Loader2 className="w-4 h-4 animate-spin" />}
-              {t('jtbd.orchestration_summary.run_planning')}
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  const runTime = summary.runTimestamp
-    ? formatDistanceToNow(new Date(summary.runTimestamp), { addSuffix: true })
-    : 'recently';
-
-  return (
-    <div
-      className="rounded-xl shadow-lg p-6 border"
-      style={{
-        background: 'linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%)',
-        borderColor: 'var(--border-primary)',
-      }}
-    >
-      {/* Header */}
-      <div className="flex items-start gap-4 mb-6">
-        <div className="p-3 rounded-full" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
-          <Bot className="w-8 h-8" style={{ color: 'var(--color-primary)' }} />
-        </div>
-        <div className="flex-1">
-          <h2 className="text-2xl font-bold mb-1" style={{ color: 'var(--text-primary)' }}>
-            {t('jtbd.orchestration_summary.title')}
-          </h2>
-          <div className="flex items-center gap-2 text-sm" style={{ color: 'var(--text-secondary)' }}>
-            <Clock className="w-4 h-4" />
-            <span>
-              {t('jtbd.orchestration_summary.run_info', { runNumber: summary.runNumber || 0 })} • {runTime}
-            </span>
-            {summary.durationSeconds && (
-              <span style={{ color: 'var(--text-tertiary)' }}>
-                • {t('jtbd.orchestration_summary.took', { seconds: summary.durationSeconds })}
-              </span>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Purchase Orders Created */}
-      {summary.purchaseOrdersCreated > 0 && (
-        <div className="rounded-lg p-4 mb-4" style={{ backgroundColor: 'var(--bg-primary)' }}>
-          <div className="flex items-center gap-3 mb-3">
-            <CheckCircle className="w-5 h-5" style={{ color: 'var(--color-success-600)' }} />
-            <h3 className="font-bold" style={{ color: 'var(--text-primary)' }}>
-              {t('jtbd.orchestration_summary.created_pos', { count: summary.purchaseOrdersCreated })}
-            </h3>
-          </div>
-
-          {summary.purchaseOrdersSummary && summary.purchaseOrdersSummary.length > 0 && (
-            <ul className="space-y-2 ml-8">
-              {summary.purchaseOrdersSummary.map((po, index) => (
-                <li key={index} className="text-sm" style={{ color: 'var(--text-secondary)' }}>
-                  <span className="font-medium">{po.supplierName || 'Unknown Supplier'}</span>
-                  {' • '}
-                  {(po.itemCategories || []).slice(0, 2).join(', ') || 'Items'}
-                  {(po.itemCategories || []).length > 2 && ` +${po.itemCategories.length - 2} more`}
-                  {' • '}
-                  <span className="font-semibold">€{(po.totalAmount || 0).toFixed(2)}</span>
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
-      )}
-
-      {/* Production Batches Created */}
-      {summary.productionBatchesCreated > 0 && (
-        <div className="rounded-lg p-4 mb-4" style={{ backgroundColor: 'var(--bg-primary)' }}>
-          <div className="flex items-center gap-3 mb-3">
-            <CheckCircle className="w-5 h-5" style={{ color: 'var(--color-success-600)' }} />
-            <h3 className="font-bold" style={{ color: 'var(--text-primary)' }}>
-              {t('jtbd.orchestration_summary.scheduled_batches', {
-                count: summary.productionBatchesCreated,
-              })}
-            </h3>
-          </div>
-
-          {summary.productionBatchesSummary && summary.productionBatchesSummary.length > 0 && (
-            <ul className="space-y-2 ml-8">
-              {summary.productionBatchesSummary.slice(0, expanded ? undefined : 3).map((batch, index) => (
-                <li key={index} className="text-sm" style={{ color: 'var(--text-secondary)' }}>
-                  <span className="font-semibold">{batch.quantity || 0}</span> {batch.productName || 'Product'}
-                  {' • '}
-                  <span style={{ color: 'var(--text-tertiary)' }}>
-                    ready by {batch.readyByTime ? new Date(batch.readyByTime).toLocaleTimeString('en-US', {
-                      hour: 'numeric',
-                      minute: '2-digit',
-                      hour12: true,
-                    }) : 'TBD'}
-                  </span>
-                </li>
-              ))}
-            </ul>
-          )}
-
-          {summary.productionBatchesSummary && summary.productionBatchesSummary.length > 3 && (
-            <button
-              onClick={() => setExpanded(!expanded)}
-              className="ml-8 mt-2 flex items-center gap-1 text-sm font-medium"
-              style={{ color: 'var(--color-primary-600)' }}
-            >
-              {expanded ? (
-                <>
-                  <ChevronUp className="w-4 h-4" />
-                  {t('jtbd.orchestration_summary.show_less')}
-                </>
-              ) : (
-                <>
-                  <ChevronDown className="w-4 h-4" />
-                  {t('jtbd.orchestration_summary.show_more', {
-                    count: summary.productionBatchesSummary.length - 3,
-                  })}
-                </>
-              )}
-            </button>
-          )}
-        </div>
-      )}
-
-      {/* No actions created */}
-      {summary.purchaseOrdersCreated === 0 && summary.productionBatchesCreated === 0 && (
-        <div className="rounded-lg p-4 mb-4" style={{ backgroundColor: 'var(--bg-primary)' }}>
-          <div className="flex items-center gap-3">
-            <CheckCircle className="w-5 h-5" style={{ color: 'var(--text-tertiary)' }} />
-            <p style={{ color: 'var(--text-secondary)' }}>{t('jtbd.orchestration_summary.no_actions')}</p>
-          </div>
-        </div>
-      )}
-
-      {/* Reasoning Inputs (How decisions were made) */}
-      <div className="rounded-lg p-4" style={{ backgroundColor: 'var(--surface-secondary)', border: '1px solid var(--border-primary)' }}>
-        <div className="flex items-center gap-2 mb-3">
-          <Brain className="w-5 h-5" style={{ color: 'var(--color-primary)' }} />
-          <h3 className="font-bold" style={{ color: 'var(--text-primary)' }}>{t('jtbd.orchestration_summary.based_on')}</h3>
-        </div>
-
-        <div className="grid grid-cols-2 gap-3 ml-7">
-          {summary.reasoningInputs.customerOrders > 0 && (
-            <div className="flex items-center gap-2 text-sm">
-              <Users className="w-4 h-4" style={{ color: 'var(--text-secondary)' }} />
-              <span style={{ color: 'var(--text-secondary)' }}>
-                {t('jtbd.orchestration_summary.customer_orders', {
-                  count: summary.reasoningInputs.customerOrders,
-                })}
-              </span>
-            </div>
-          )}
-
-          {summary.reasoningInputs.historicalDemand && (
-            <div className="flex items-center gap-2 text-sm">
-              <TrendingUp className="w-4 h-4" style={{ color: 'var(--text-secondary)' }} />
-              <span style={{ color: 'var(--text-secondary)' }}>
-                {t('jtbd.orchestration_summary.historical_demand')}
-              </span>
-            </div>
-          )}
-
-          {summary.reasoningInputs.inventoryLevels && (
-            <div className="flex items-center gap-2 text-sm">
-              <Package className="w-4 h-4" style={{ color: 'var(--text-secondary)' }} />
-              <span style={{ color: 'var(--text-secondary)' }}>{t('jtbd.orchestration_summary.inventory_levels')}</span>
-            </div>
-          )}
-
-          {summary.reasoningInputs.aiInsights && (
-            <div className="flex items-center gap-2 text-sm">
-              <Brain className="w-4 h-4" style={{ color: 'var(--color-primary-600)' }} />
-              <span className="font-medium" style={{ color: 'var(--text-secondary)' }}>
-                {t('jtbd.orchestration_summary.ai_optimization')}
-              </span>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Actions Required Footer */}
-      {summary.userActionsRequired > 0 && (
-        <div
-          className="mt-4 p-4 border rounded-lg"
-          style={{
-            backgroundColor: 'var(--bg-tertiary)',
-            borderColor: 'var(--color-warning)',
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <FileText className="w-5 h-5" style={{ color: 'var(--color-warning)' }} />
-            <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
-              {t('jtbd.orchestration_summary.actions_required', {
-                count: summary.userActionsRequired,
-              })}
-            </p>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

frontend/src/components/dashboard/ProductionTimelineCard.tsx

@@ -1,324 +0,0 @@
-// ================================================================
-// frontend/src/components/dashboard/ProductionTimelineCard.tsx
-// ================================================================
-/**
- * Production Timeline Card - Today's production schedule
- *
- * Chronological view of what's being made today with real-time progress.
- */
-
-import React, { useMemo } from 'react';
-import { Factory, Clock, Play, Pause, CheckCircle2 } from 'lucide-react';
-import { ProductionTimeline, ProductionTimelineItem } from '../../api/hooks/newDashboard';
-import { useReasoningFormatter } from '../../hooks/useReasoningTranslation';
-import { useTranslation } from 'react-i18next';
-
-interface ProductionTimelineCardProps {
-  timeline: ProductionTimeline;
-  loading?: boolean;
-  onStart?: (batchId: string) => void;
-  onPause?: (batchId: string) => void;
-}
-
-const priorityColors = {
-  URGENT: 'var(--color-error-600)',
-  HIGH: 'var(--color-warning-600)',
-  MEDIUM: 'var(--color-info-600)',
-  LOW: 'var(--text-tertiary)',
-};
-
-function TimelineItemCard({
-  item,
-  onStart,
-  onPause,
-}: {
-  item: ProductionTimelineItem;
-  onStart?: (id: string) => void;
-  onPause?: (id: string) => void;
-}) {
-  const priorityColor = priorityColors[item.priority as keyof typeof priorityColors] || 'var(--text-tertiary)';
-  const { formatBatchAction } = useReasoningFormatter();
-  const { t } = useTranslation(['reasoning', 'dashboard', 'production']);
-
-  // Translate reasoning_data (or use new reasoning_i18n or fallback to deprecated text field)
-  // Memoize to prevent undefined values from being created on each render
-  const { reasoning } = useMemo(() => {
-    if (item.reasoning_i18n) {
-      // Use new i18n structure if available
-      const { key, params = {} } = item.reasoning_i18n;
-      // Handle namespace - remove "reasoning." prefix for reasoning namespace
-      let translationKey = key;
-      let namespace = 'reasoning';
-      if (key.startsWith('reasoning.')) {
-        translationKey = key.substring('reasoning.'.length);
-      } else if (key.startsWith('production.')) {
-        translationKey = key.substring('production.'.length);
-        namespace = 'production';
-      }
-      // Use i18next-icu for interpolation with {variable} syntax
-      const fullKey = `${namespace}:${translationKey}`;
-      const result = t(fullKey, params);
-      return { reasoning: String(result || item.reasoning || '') };
-    } else if (item.reasoning_data) {
-      return formatBatchAction(item.reasoning_data);
-    }
-    return { reasoning: item.reasoning || '' };
-  }, [item.reasoning_i18n, item.reasoning_data, item.reasoning, formatBatchAction, t]);
-
-  const startTime = item.plannedStartTime
-    ? new Date(item.plannedStartTime).toLocaleTimeString('en-US', {
-        hour: 'numeric',
-        minute: '2-digit',
-        hour12: true,
-      })
-    : 'N/A';
-
-  const readyByTime = item.readyBy
-    ? new Date(item.readyBy).toLocaleTimeString('en-US', {
-        hour: 'numeric',
-        minute: '2-digit',
-        hour12: true,
-      })
-    : 'N/A';
-
-  return (
-    <div
-      className="flex gap-4 p-4 md:p-5 rounded-lg border-2 hover:shadow-md transition-all duration-200"
-      style={{
-        backgroundColor: 'var(--bg-primary)',
-        borderColor: 'var(--border-primary)',
-      }}
-    >
-      {/* Timeline icon and connector */}
-      <div className="flex flex-col items-center flex-shrink-0">
-        <div className="text-2xl">{item.statusIcon || '🔵'}</div>
-        <div className="text-xs font-mono mt-1" style={{ color: 'var(--text-tertiary)' }}>{startTime}</div>
-      </div>
-
-      {/* Content */}
-      <div className="flex-1 min-w-0">
-        {/* Header */}
-        <div className="flex items-start justify-between gap-2 mb-2">
-          <div>
-            <h3 className="font-bold text-lg" style={{ color: 'var(--text-primary)' }}>{item.productName || 'Product'}</h3>
-            <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
-              {item.quantity || 0} {item.unit || 'units'} • Batch #{item.batchNumber || 'N/A'}
-            </p>
-          </div>
-          <span className="text-xs font-semibold uppercase" style={{ color: priorityColor }}>
-            {item.priority || 'NORMAL'}
-          </span>
-        </div>
-
-        {/* Status and Progress */}
-        <div className="mb-3">
-          <div className="flex items-center justify-between mb-1">
-            <span className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
-              {item.status_i18n
-                ? (() => {
-                    const statusKey = item.status_i18n.key;
-                    const statusNamespace = statusKey.startsWith('production.') ? 'production' : 'reasoning';
-                    const statusTranslationKey = statusKey.startsWith('production.')
-                      ? statusKey.substring('production.'.length)
-                      : (statusKey.startsWith('reasoning.') ? statusKey.substring('reasoning.'.length) : statusKey);
-                    const fullStatusKey = `${statusNamespace}:${statusTranslationKey}`;
-                    return String(t(fullStatusKey, item.status_i18n.params) || item.statusText || 'Status');
-                  })()
-                : item.statusText || 'Status'}
-            </span>
-            {item.status === 'IN_PROGRESS' && (
-              <span className="text-sm" style={{ color: 'var(--text-secondary)' }}>{item.progress || 0}%</span>
-            )}
-          </div>
-
-          {/* Progress Bar */}
-          {item.status === 'IN_PROGRESS' && (
-            <div className="w-full rounded-full h-2" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
-              <div
-                className="h-2 rounded-full transition-all duration-500"
-                style={{ width: `${item.progress || 0}%`, backgroundColor: 'var(--color-info-600)' }}
-              />
-            </div>
-          )}
-        </div>
-
-        {/* Ready By Time */}
-        {item.status !== 'COMPLETED' && (
-          <div className="flex items-center gap-2 text-sm mb-2" style={{ color: 'var(--text-secondary)' }}>
-            <Clock className="w-4 h-4" />
-            <span>
-              {t('jtbd.production_timeline.ready_by')}: {readyByTime}
-            </span>
-          </div>
-        )}
-
-        {/* Reasoning */}
-        {reasoning && (
-          <p className="text-sm italic mb-3" style={{ color: 'var(--text-secondary)' }}>"{reasoning}"</p>
-        )}
-
-        {/* Actions */}
-        {item.status === 'PENDING' && onStart && (
-          <button
-            onClick={() => onStart(item.id)}
-            className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-semibold transition-colors duration-200"
-            style={{
-              backgroundColor: 'var(--color-success-600)',
-              color: 'var(--text-inverse)',
-            }}
-          >
-            <Play className="w-4 h-4" />
-            {t('jtbd.production_timeline.start_batch')}
-          </button>
-        )}
-
-        {item.status === 'IN_PROGRESS' && onPause && (
-          <button
-            onClick={() => onPause(item.id)}
-            className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-semibold transition-colors duration-200"
-            style={{
-              backgroundColor: 'var(--color-warning-600)',
-              color: 'var(--text-inverse)',
-            }}
-          >
-            <Pause className="w-4 h-4" />
-            {t('jtbd.production_timeline.pause_batch')}
-          </button>
-        )}
-
-        {item.status === 'COMPLETED' && (
-          <div className="flex items-center gap-2 text-sm font-medium" style={{ color: 'var(--color-success-600)' }}>
-            <CheckCircle2 className="w-4 h-4" />
-            {t('jtbd.production_timeline.completed')}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export function ProductionTimelineCard({
-  timeline,
-  loading,
-  onStart,
-  onPause,
-}: ProductionTimelineCardProps) {
-  const { t } = useTranslation('reasoning');
-
-  // Filter for today's PENDING/ON_HOLD batches only
-  const filteredTimeline = useMemo(() => {
-    if (!timeline?.timeline) return null;
-
-    const today = new Date();
-    today.setHours(0, 0, 0, 0);
-    const tomorrow = new Date(today);
-    tomorrow.setDate(tomorrow.getDate() + 1);
-
-    const filteredItems = timeline.timeline.filter(item => {
-      // Only show PENDING or ON_HOLD status
-      if (item.status !== 'PENDING' && item.status !== 'ON_HOLD') {
-        return false;
-      }
-
-      // Check if plannedStartTime is today
-      if (item.plannedStartTime) {
-        const startTime = new Date(item.plannedStartTime);
-        return startTime >= today && startTime < tomorrow;
-      }
-
-      return false;
-    });
-
-    return {
-      ...timeline,
-      timeline: filteredItems,
-      totalBatches: filteredItems.length,
-      pendingBatches: filteredItems.filter(item => item.status === 'PENDING').length,
-      inProgressBatches: 0, // Filtered out
-      completedBatches: 0, // Filtered out
-    };
-  }, [timeline]);
-
-  if (loading || !filteredTimeline) {
-    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/2" style={{ backgroundColor: 'var(--bg-tertiary)' }}></div>
-          <div className="space-y-3">
-            <div className="h-24 rounded" style={{ backgroundColor: 'var(--bg-tertiary)' }}></div>
-            <div className="h-24 rounded" style={{ backgroundColor: 'var(--bg-tertiary)' }}></div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (!filteredTimeline.timeline || filteredTimeline.timeline.length === 0) {
-    return (
-      <div className="rounded-xl shadow-lg p-8 text-center border" style={{ backgroundColor: 'var(--bg-primary)', borderColor: 'var(--border-primary)' }}>
-        <Factory className="w-16 h-16 mx-auto mb-4" style={{ color: 'var(--text-tertiary)' }} />
-        <h3 className="text-xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
-          {t('jtbd.production_timeline.no_production')}
-        </h3>
-        <p style={{ color: 'var(--text-secondary)' }}>{t('jtbd.production_timeline.no_batches')}</p>
-      </div>
-    );
-  }
-
-  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 justify-between mb-6">
-        <div className="flex items-center gap-3">
-          <Factory className="w-8 h-8" style={{ color: 'var(--color-info-600)' }} />
-          <h2 className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>{t('jtbd.production_timeline.title')}</h2>
-        </div>
-      </div>
-
-      {/* Summary Stats */}
-      <div className="grid grid-cols-4 gap-4 mb-6">
-        <div className="rounded-lg p-3 text-center" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
-          <div className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>{filteredTimeline.totalBatches}</div>
-          <div className="text-xs uppercase" style={{ color: 'var(--text-secondary)' }}>{t('jtbd.production_timeline.total')}</div>
-        </div>
-        <div className="rounded-lg p-3 text-center" style={{ backgroundColor: 'var(--color-success-50)' }}>
-          <div className="text-2xl font-bold" style={{ color: 'var(--color-success-600)' }}>{filteredTimeline.completedBatches}</div>
-          <div className="text-xs uppercase" style={{ color: 'var(--color-success-700)' }}>{t('jtbd.production_timeline.done')}</div>
-        </div>
-        <div className="rounded-lg p-3 text-center" style={{ backgroundColor: 'var(--color-info-50)' }}>
-          <div className="text-2xl font-bold" style={{ color: 'var(--color-info-600)' }}>{filteredTimeline.inProgressBatches}</div>
-          <div className="text-xs uppercase" style={{ color: 'var(--color-info-700)' }}>{t('jtbd.production_timeline.active')}</div>
-        </div>
-        <div className="rounded-lg p-3 text-center" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
-          <div className="text-2xl font-bold" style={{ color: 'var(--text-secondary)' }}>{filteredTimeline.pendingBatches}</div>
-          <div className="text-xs uppercase" style={{ color: 'var(--text-secondary)' }}>{t('jtbd.production_timeline.pending')}</div>
-        </div>
-      </div>
-
-      {/* Timeline */}
-      <div className="space-y-4">
-        {filteredTimeline.timeline.map((item) => (
-          <TimelineItemCard
-            key={item.id}
-            item={item}
-            onStart={onStart}
-            onPause={onPause}
-          />
-        ))}
-      </div>
-
-      {/* View Full Schedule Link */}
-      {filteredTimeline.totalBatches > 5 && (
-        <button
-          className="w-full mt-6 py-3 rounded-lg font-semibold transition-colors duration-200"
-          style={{
-            backgroundColor: 'var(--bg-tertiary)',
-            color: 'var(--text-primary)',
-          }}
-        >
-          {t('jtbd.production_timeline.view_full_schedule')}
-        </button>
-      )}
-    </div>
-  );
-}

frontend/src/components/dashboard/SetupWizardBlocker.tsx

@@ -0,0 +1,237 @@
+// ================================================================
+// frontend/src/components/dashboard/SetupWizardBlocker.tsx
+// ================================================================
+/**
+ * Setup Wizard Blocker - Critical Path Onboarding
+ *
+ * JTBD: "I cannot operate my bakery without basic configuration"
+ *
+ * This component blocks the entire dashboard when critical setup is incomplete.
+ * Shows a full-page wizard to guide users through essential configuration.
+ *
+ * Triggers when:
+ * - 0-2 critical sections complete (<50% progress)
+ * - Missing: Ingredients (<3) OR Suppliers (<1) OR Recipes (<1)
+ */
+
+import React, { useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { AlertCircle, Package, Users, BookOpen, ChevronRight, CheckCircle2, Circle } from 'lucide-react';
+
+interface SetupSection {
+  id: string;
+  title: string;
+  description: string;
+  icon: React.ElementType;
+  path: string;
+  isComplete: boolean;
+  count: number;
+  minimum: number;
+}
+
+interface SetupWizardBlockerProps {
+  criticalSections: SetupSection[];
+  onComplete?: () => void;
+}
+
+export function SetupWizardBlocker({ criticalSections = [], onComplete }: SetupWizardBlockerProps) {
+  const { t } = useTranslation(['dashboard', 'common']);
+  const navigate = useNavigate();
+
+  // Calculate progress
+  const { completedCount, totalCount, progressPercentage, nextSection } = useMemo(() => {
+    // Guard against undefined or invalid criticalSections
+    if (!criticalSections || !Array.isArray(criticalSections) || criticalSections.length === 0) {
+      return {
+        completedCount: 0,
+        totalCount: 0,
+        progressPercentage: 0,
+        nextSection: undefined,
+      };
+    }
+
+    const completed = criticalSections.filter(s => s.isComplete).length;
+    const total = criticalSections.length;
+    const percentage = Math.round((completed / total) * 100);
+    const next = criticalSections.find(s => !s.isComplete);
+
+    return {
+      completedCount: completed,
+      totalCount: total,
+      progressPercentage: percentage,
+      nextSection: next,
+    };
+  }, [criticalSections]);
+
+  const handleSectionClick = (path: string) => {
+    navigate(path);
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4" style={{ backgroundColor: 'var(--bg-secondary)' }}>
+      <div className="w-full max-w-3xl">
+        {/* Warning Header */}
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center justify-center w-20 h-20 rounded-full mb-4" style={{ backgroundColor: 'var(--color-warning-100)' }}>
+            <AlertCircle className="w-10 h-10" style={{ color: 'var(--color-warning-600)' }} />
+          </div>
+          <h1 className="text-3xl md:text-4xl font-bold mb-3" style={{ color: 'var(--text-primary)' }}>
+            ⚠️ {t('dashboard:setup_blocker.title', 'Configuración Requerida')}
+          </h1>
+          <p className="text-lg" style={{ color: 'var(--text-secondary)' }}>
+            {t('dashboard:setup_blocker.subtitle', 'Necesitas completar la configuración básica antes de usar el panel de control')}
+          </p>
+        </div>
+
+        {/* Progress Card */}
+        <div className="bg-[var(--bg-primary)] border-2 border-[var(--border-primary)] rounded-xl shadow-xl p-8">
+          {/* Progress Bar */}
+          <div className="mb-8">
+            <div className="flex items-center justify-between text-sm mb-3">
+              <span className="font-semibold" style={{ color: 'var(--text-primary)' }}>
+                {t('dashboard:setup_blocker.progress', 'Progreso de Configuración')}
+              </span>
+              <span className="font-bold" style={{ color: 'var(--color-primary)' }}>
+                {completedCount}/{totalCount} ({progressPercentage}%)
+              </span>
+            </div>
+            <div className="w-full h-3 bg-[var(--bg-tertiary)] rounded-full overflow-hidden">
+              <div
+                className="h-full transition-all duration-500 ease-out"
+                style={{
+                  width: `${progressPercentage}%`,
+                  background: 'linear-gradient(90deg, var(--color-primary), var(--color-success))',
+                }}
+              />
+            </div>
+          </div>
+
+          {/* Critical Sections List */}
+          <div className="space-y-4 mb-8">
+            <h3 className="text-lg font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
+              {t('dashboard:setup_blocker.required_steps', 'Pasos Requeridos')}
+            </h3>
+
+            {criticalSections.map((section, index) => {
+              const Icon = section.icon || (() => <div>⚙️</div>);
+              const isNext = section === nextSection;
+
+              return (
+                <button
+                  key={section.id}
+                  onClick={() => handleSectionClick(section.path)}
+                  className={`w-full p-5 rounded-lg border-2 transition-all duration-200 text-left group ${
+                    section.isComplete
+                      ? 'border-[var(--color-success)]/30 bg-[var(--color-success)]/5'
+                      : isNext
+                      ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5 hover:bg-[var(--color-primary)]/10 shadow-md'
+                      : 'border-[var(--border-secondary)] bg-[var(--bg-secondary)] hover:border-[var(--color-primary)] hover:bg-[var(--bg-primary)]'
+                  }`}
+                >
+                  <div className="flex items-start gap-4">
+                    {/* Step Number / Status */}
+                    <div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm ${
+                      section.isComplete
+                        ? 'bg-[var(--color-success)] text-white'
+                        : isNext
+                        ? 'bg-[var(--color-primary)] text-white'
+                        : 'bg-[var(--bg-tertiary)] text-[var(--text-secondary)]'
+                    }`}>
+                      {section.isComplete ? (
+                        <CheckCircle2 className="w-5 h-5" />
+                      ) : (
+                        <span>{index + 1}</span>
+                      )}
+                    </div>
+
+                    {/* Section Icon */}
+                    <div className={`w-12 h-12 rounded-full flex items-center justify-center ${
+                      section.isComplete
+                        ? 'bg-[var(--color-success)]/20 text-[var(--color-success)]'
+                        : isNext
+                        ? 'bg-[var(--color-primary)]/20 text-[var(--color-primary)]'
+                        : 'bg-[var(--bg-tertiary)] text-[var(--text-secondary)]'
+                    }`}>
+                      <Icon className="w-6 h-6" />
+                    </div>
+
+                    {/* Content */}
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-1">
+                        <h4 className="font-bold text-lg" style={{ color: 'var(--text-primary)' }}>
+                          {section.title}
+                        </h4>
+                        {isNext && !section.isComplete && (
+                          <span className="px-2 py-0.5 bg-[var(--color-primary)] text-white rounded-full text-xs font-semibold">
+                            {t('dashboard:setup_blocker.next', 'Siguiente')}
+                          </span>
+                        )}
+                      </div>
+
+                      <p className="text-sm mb-2" style={{ color: 'var(--text-secondary)' }}>
+                        {section.description}
+                      </p>
+
+                      <div className="flex items-center gap-2 text-sm">
+                        {section.isComplete ? (
+                          <span className="font-semibold" style={{ color: 'var(--color-success)' }}>
+                            ✅ {section.count} {t('dashboard:setup_blocker.added', 'agregado(s)')}
+                          </span>
+                        ) : (
+                          <span className="font-semibold" style={{ color: 'var(--color-warning-700)' }}>
+                            ⚠️ {t('dashboard:setup_blocker.minimum_required', 'Mínimo requerido')}: {section.minimum}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Chevron */}
+                    <ChevronRight className={`w-6 h-6 flex-shrink-0 transition-transform group-hover:translate-x-1 ${
+                      isNext ? 'text-[var(--color-primary)]' : 'text-[var(--text-tertiary)]'
+                    }`} />
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+
+          {/* Next Step CTA */}
+          {nextSection && (
+            <div className="p-5 rounded-xl border-2 border-[var(--color-primary)]/30" style={{ backgroundColor: 'var(--color-primary)]/5' }}>
+              <div className="flex items-start gap-4">
+                <AlertCircle className="w-6 h-6 flex-shrink-0" style={{ color: 'var(--color-primary)' }} />
+                <div className="flex-1">
+                  <h4 className="font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
+                    👉 {t('dashboard:setup_blocker.start_with', 'Empieza por')}: {nextSection.title}
+                  </h4>
+                  <p className="text-sm mb-4" style={{ color: 'var(--text-secondary)' }}>
+                    {nextSection.description}
+                  </p>
+                  <button
+                    onClick={() => handleSectionClick(nextSection.path)}
+                    className="px-6 py-3 rounded-lg font-semibold transition-all duration-200 hover:scale-105 active:scale-95 shadow-lg hover:shadow-xl inline-flex items-center gap-2"
+                    style={{
+                      background: 'linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%)',
+                      color: 'white',
+                    }}
+                  >
+                    {t('dashboard:setup_blocker.configure_now', 'Configurar Ahora')} {nextSection.title}
+                    <ChevronRight className="w-5 h-5" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Help Text */}
+          <div className="mt-6 pt-6 border-t" style={{ borderColor: 'var(--border-secondary)' }}>
+            <p className="text-sm text-center" style={{ color: 'var(--text-tertiary)' }}>
+              💡 {t('dashboard:setup_blocker.help_text', 'Una vez completes estos pasos, podrás acceder al panel de control completo y comenzar a usar todas las funciones de IA')}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/dashboard/StockReceiptModal.tsx

@@ -0,0 +1,677 @@
+// ================================================================
+// frontend/src/components/dashboard/StockReceiptModal.tsx
+// ================================================================
+/**
+ * Stock Receipt Modal - Lot-Level Tracking
+ *
+ * Complete workflow for receiving deliveries with lot-level expiration tracking.
+ * Critical for food safety compliance.
+ *
+ * Features:
+ * - Multi-line item support (one per ingredient)
+ * - Lot splitting (e.g., 50kg → 2×25kg lots with different expiration dates)
+ * - Mandatory expiration dates
+ * - Quantity validation (lot quantities must sum to actual quantity)
+ * - Discrepancy tracking (expected vs actual)
+ * - Draft save functionality
+ * - Warehouse location tracking
+ */
+
+import React, { useState, useEffect } from 'react';
+import {
+  X,
+  Plus,
+  Trash2,
+  Save,
+  CheckCircle,
+  AlertTriangle,
+  Package,
+  Calendar,
+  MapPin,
+  FileText,
+  Truck,
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '../ui/Button';
+
+// ============================================================
+// Types
+// ============================================================
+
+export interface StockLot {
+  id?: string;
+  lot_number?: string;
+  supplier_lot_number?: string;
+  quantity: number;
+  unit_of_measure: string;
+  expiration_date: string; // ISO date string (YYYY-MM-DD)
+  best_before_date?: string;
+  warehouse_location?: string;
+  storage_zone?: string;
+  quality_notes?: string;
+}
+
+export interface StockReceiptLineItem {
+  id?: string;
+  ingredient_id: string;
+  ingredient_name: string;
+  po_line_id?: string;
+  expected_quantity: number;
+  actual_quantity: number;
+  unit_of_measure: string;
+  has_discrepancy: boolean;
+  discrepancy_reason?: string;
+  unit_cost?: number;
+  total_cost?: number;
+  lots: StockLot[];
+}
+
+export interface StockReceipt {
+  id?: string;
+  tenant_id: string;
+  po_id: string;
+  po_number?: string;
+  received_at?: string;
+  received_by_user_id: string;
+  status?: 'draft' | 'confirmed' | 'cancelled';
+  supplier_id?: string;
+  supplier_name?: string;
+  notes?: string;
+  has_discrepancies?: boolean;
+  line_items: StockReceiptLineItem[];
+}
+
+interface StockReceiptModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  receipt: Partial<StockReceipt>;
+  mode?: 'create' | 'edit';
+  onSaveDraft?: (receipt: StockReceipt) => Promise<void>;
+  onConfirm?: (receipt: StockReceipt) => Promise<void>;
+}
+
+// ============================================================
+// Helper Functions
+// ============================================================
+
+function calculateLotQuantitySum(lots: StockLot[]): number {
+  return lots.reduce((sum, lot) => sum + (lot.quantity || 0), 0);
+}
+
+function hasDiscrepancy(expected: number, actual: number): boolean {
+  return Math.abs(expected - actual) > 0.01;
+}
+
+// ============================================================
+// Sub-Components
+// ============================================================
+
+interface LotInputProps {
+  lot: StockLot;
+  lineItemUoM: string;
+  onChange: (updatedLot: StockLot) => void;
+  onRemove: () => void;
+  canRemove: boolean;
+}
+
+function LotInput({ lot, lineItemUoM, onChange, onRemove, canRemove }: LotInputProps) {
+  const { t } = useTranslation('inventory');
+
+  return (
+    <div
+      className="p-4 rounded-lg border-2"
+      style={{
+        backgroundColor: 'var(--bg-secondary)',
+        borderColor: 'var(--border-secondary)',
+      }}
+    >
+      {/* Lot Header */}
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <Package className="w-4 h-4" style={{ color: 'var(--color-info)' }} />
+          <span className="font-semibold text-sm" style={{ color: 'var(--text-primary)' }}>
+            {t('lot_details')}
+          </span>
+        </div>
+        {canRemove && (
+          <button
+            onClick={onRemove}
+            className="p-1 rounded hover:bg-red-100 transition-colors"
+            style={{ color: 'var(--color-error)' }}
+          >
+            <Trash2 className="w-4 h-4" />
+          </button>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+        {/* Quantity (Required) */}
+        <div>
+          <label className="block text-sm font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>
+            {t('quantity')} ({lineItemUoM}) *
+          </label>
+          <input
+            type="number"
+            step="0.01"
+            min="0"
+            value={lot.quantity || ''}
+            onChange={(e) => onChange({ ...lot, quantity: parseFloat(e.target.value) || 0 })}
+            className="w-full px-3 py-2 rounded-lg border"
+            style={{
+              backgroundColor: 'var(--bg-primary)',
+              borderColor: 'var(--border-primary)',
+              color: 'var(--text-primary)',
+            }}
+            required
+          />
+        </div>
+
+        {/* Expiration Date (Required) */}
+        <div>
+          <label className="block text-sm font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>
+            <Calendar className="w-3 h-3 inline mr-1" />
+            {t('expiration_date')} *
+          </label>
+          <input
+            type="date"
+            value={lot.expiration_date || ''}
+            onChange={(e) => onChange({ ...lot, expiration_date: e.target.value })}
+            className="w-full px-3 py-2 rounded-lg border"
+            style={{
+              backgroundColor: 'var(--bg-primary)',
+              borderColor: 'var(--border-primary)',
+              color: 'var(--text-primary)',
+            }}
+            required
+          />
+        </div>
+
+        {/* Lot Number (Optional) */}
+        <div>
+          <label className="block text-sm font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>
+            {t('lot_number')}
+          </label>
+          <input
+            type="text"
+            value={lot.lot_number || ''}
+            onChange={(e) => onChange({ ...lot, lot_number: e.target.value })}
+            placeholder="LOT-2024-001"
+            className="w-full px-3 py-2 rounded-lg border"
+            style={{
+              backgroundColor: 'var(--bg-primary)',
+              borderColor: 'var(--border-primary)',
+              color: 'var(--text-primary)',
+            }}
+          />
+        </div>
+
+        {/* Supplier Lot Number (Optional) */}
+        <div>
+          <label className="block text-sm font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>
+            {t('supplier_lot_number')}
+          </label>
+          <input
+            type="text"
+            value={lot.supplier_lot_number || ''}
+            onChange={(e) => onChange({ ...lot, supplier_lot_number: e.target.value })}
+            placeholder="SUPP-LOT-123"
+            className="w-full px-3 py-2 rounded-lg border"
+            style={{
+              backgroundColor: 'var(--bg-primary)',
+              borderColor: 'var(--border-primary)',
+              color: 'var(--text-primary)',
+            }}
+          />
+        </div>
+
+        {/* Warehouse Location (Optional) */}
+        <div>
+          <label className="block text-sm font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>
+            <MapPin className="w-3 h-3 inline mr-1" />
+            {t('warehouse_location')}
+          </label>
+          <input
+            type="text"
+            value={lot.warehouse_location || ''}
+            onChange={(e) => onChange({ ...lot, warehouse_location: e.target.value })}
+            placeholder="A-01-03"
+            className="w-full px-3 py-2 rounded-lg border"
+            style={{
+              backgroundColor: 'var(--bg-primary)',
+              borderColor: 'var(--border-primary)',
+              color: 'var(--text-primary)',
+            }}
+          />
+        </div>
+
+        {/* Storage Zone (Optional) */}
+        <div>
+          <label className="block text-sm font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>
+            {t('storage_zone')}
+          </label>
+          <input
+            type="text"
+            value={lot.storage_zone || ''}
+            onChange={(e) => onChange({ ...lot, storage_zone: e.target.value })}
+            placeholder="Cold Storage"
+            className="w-full px-3 py-2 rounded-lg border"
+            style={{
+              backgroundColor: 'var(--bg-primary)',
+              borderColor: 'var(--border-primary)',
+              color: 'var(--text-primary)',
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Quality Notes (Optional, full width) */}
+      <div className="mt-3">
+        <label className="block text-sm font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>
+          <FileText className="w-3 h-3 inline mr-1" />
+          {t('quality_notes')}
+        </label>
+        <textarea
+          value={lot.quality_notes || ''}
+          onChange={(e) => onChange({ ...lot, quality_notes: e.target.value })}
+          placeholder={t('quality_notes_placeholder')}
+          rows={2}
+          className="w-full px-3 py-2 rounded-lg border resize-none"
+          style={{
+            backgroundColor: 'var(--bg-primary)',
+            borderColor: 'var(--border-primary)',
+            color: 'var(--text-primary)',
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+// ============================================================
+// Main Component
+// ============================================================
+
+export function StockReceiptModal({
+  isOpen,
+  onClose,
+  receipt: initialReceipt,
+  mode = 'create',
+  onSaveDraft,
+  onConfirm,
+}: StockReceiptModalProps) {
+  const { t } = useTranslation(['inventory', 'common']);
+  const [receipt, setReceipt] = useState<Partial<StockReceipt>>(initialReceipt);
+  const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
+  const [isSaving, setIsSaving] = useState(false);
+
+  useEffect(() => {
+    setReceipt(initialReceipt);
+  }, [initialReceipt]);
+
+  if (!isOpen) return null;
+
+  // ============================================================
+  // Handlers
+  // ============================================================
+
+  const updateLineItem = (index: number, updates: Partial<StockReceiptLineItem>) => {
+    const newLineItems = [...(receipt.line_items || [])];
+    newLineItems[index] = { ...newLineItems[index], ...updates };
+
+    // Auto-detect discrepancy
+    if (updates.actual_quantity !== undefined || updates.expected_quantity !== undefined) {
+      const item = newLineItems[index];
+      item.has_discrepancy = hasDiscrepancy(item.expected_quantity, item.actual_quantity);
+    }
+
+    setReceipt({ ...receipt, line_items: newLineItems });
+  };
+
+  const updateLot = (lineItemIndex: number, lotIndex: number, updatedLot: StockLot) => {
+    const newLineItems = [...(receipt.line_items || [])];
+    newLineItems[lineItemIndex].lots[lotIndex] = updatedLot;
+    setReceipt({ ...receipt, line_items: newLineItems });
+  };
+
+  const addLot = (lineItemIndex: number) => {
+    const lineItem = receipt.line_items?.[lineItemIndex];
+    if (!lineItem) return;
+
+    const newLot: StockLot = {
+      quantity: 0,
+      unit_of_measure: lineItem.unit_of_measure,
+      expiration_date: '',
+    };
+
+    const newLineItems = [...(receipt.line_items || [])];
+    newLineItems[lineItemIndex].lots.push(newLot);
+    setReceipt({ ...receipt, line_items: newLineItems });
+  };
+
+  const removeLot = (lineItemIndex: number, lotIndex: number) => {
+    const newLineItems = [...(receipt.line_items || [])];
+    newLineItems[lineItemIndex].lots.splice(lotIndex, 1);
+    setReceipt({ ...receipt, line_items: newLineItems });
+  };
+
+  const validate = (): boolean => {
+    const errors: Record<string, string> = {};
+
+    if (!receipt.line_items || receipt.line_items.length === 0) {
+      errors.general = t('inventory:validation.no_line_items');
+      setValidationErrors(errors);
+      return false;
+    }
+
+    receipt.line_items.forEach((item, idx) => {
+      // Check lots exist
+      if (!item.lots || item.lots.length === 0) {
+        errors[`line_${idx}_lots`] = t('inventory:validation.at_least_one_lot');
+      }
+
+      // Check lot quantities sum to actual quantity
+      const lotSum = calculateLotQuantitySum(item.lots);
+      if (Math.abs(lotSum - item.actual_quantity) > 0.01) {
+        errors[`line_${idx}_quantity`] = t('inventory:validation.lot_quantity_mismatch', {
+          expected: item.actual_quantity,
+          actual: lotSum,
+        });
+      }
+
+      // Check expiration dates
+      item.lots.forEach((lot, lotIdx) => {
+        if (!lot.expiration_date) {
+          errors[`line_${idx}_lot_${lotIdx}_exp`] = t('inventory:validation.expiration_required');
+        }
+        if (!lot.quantity || lot.quantity <= 0) {
+          errors[`line_${idx}_lot_${lotIdx}_qty`] = t('inventory:validation.quantity_required');
+        }
+      });
+    });
+
+    setValidationErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+
+  const handleSaveDraft = async () => {
+    if (!onSaveDraft) return;
+
+    setIsSaving(true);
+    try {
+      await onSaveDraft(receipt as StockReceipt);
+      onClose();
+    } catch (error) {
+      console.error('Failed to save draft:', error);
+      setValidationErrors({ general: t('inventory:errors.save_failed') });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleConfirm = async () => {
+    if (!validate()) return;
+    if (!onConfirm) return;
+
+    setIsSaving(true);
+    try {
+      await onConfirm(receipt as StockReceipt);
+      onClose();
+    } catch (error) {
+      console.error('Failed to confirm receipt:', error);
+      setValidationErrors({ general: t('inventory:errors.confirm_failed') });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  // ============================================================
+  // Render
+  // ============================================================
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
+      <div
+        className="w-full max-w-5xl max-h-[90vh] overflow-hidden rounded-xl shadow-2xl flex flex-col"
+        style={{ backgroundColor: 'var(--bg-primary)' }}
+      >
+        {/* Header */}
+        <div
+          className="flex items-center justify-between p-6 border-b"
+          style={{ borderColor: 'var(--border-primary)' }}
+        >
+          <div className="flex items-center gap-3">
+            <Truck className="w-6 h-6" style={{ color: 'var(--color-primary)' }} />
+            <div>
+              <h2 className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
+                {t('inventory:stock_receipt_title')}
+              </h2>
+              {receipt.po_number && (
+                <p className="text-sm mt-1" style={{ color: 'var(--text-secondary)' }}>
+                  {t('inventory:purchase_order')}: {receipt.po_number}
+                </p>
+              )}
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
+            style={{ color: 'var(--text-secondary)' }}
+          >
+            <X className="w-6 h-6" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-6">
+          {/* Supplier Info */}
+          {receipt.supplier_name && (
+            <div
+              className="mb-6 p-4 rounded-lg border"
+              style={{
+                backgroundColor: 'var(--bg-secondary)',
+                borderColor: 'var(--border-secondary)',
+              }}
+            >
+              <h3 className="font-semibold mb-2" style={{ color: 'var(--text-primary)' }}>
+                {t('inventory:supplier_info')}
+              </h3>
+              <p style={{ color: 'var(--text-secondary)' }}>{receipt.supplier_name}</p>
+            </div>
+          )}
+
+          {/* Validation Errors */}
+          {validationErrors.general && (
+            <div
+              className="mb-6 p-4 rounded-lg border-2 flex items-start gap-3"
+              style={{
+                backgroundColor: 'var(--color-error-50)',
+                borderColor: 'var(--color-error-300)',
+              }}
+            >
+              <AlertTriangle className="w-5 h-5 flex-shrink-0 mt-0.5" style={{ color: 'var(--color-error-700)' }} />
+              <div>
+                <p className="font-semibold" style={{ color: 'var(--color-error-900)' }}>
+                  {validationErrors.general}
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Line Items */}
+          {receipt.line_items?.map((item, idx) => (
+            <div
+              key={idx}
+              className="mb-6 p-6 rounded-xl border-2"
+              style={{
+                backgroundColor: 'var(--bg-primary)',
+                borderColor: item.has_discrepancy ? 'var(--color-warning-300)' : 'var(--border-primary)',
+              }}
+            >
+              {/* Line Item Header */}
+              <div className="flex items-start justify-between mb-4">
+                <div>
+                  <h3 className="text-lg font-bold mb-1" style={{ color: 'var(--text-primary)' }}>
+                    {item.ingredient_name}
+                  </h3>
+                  <div className="flex items-center gap-4 text-sm" style={{ color: 'var(--text-secondary)' }}>
+                    <span>
+                      {t('inventory:expected')}: {item.expected_quantity} {item.unit_of_measure}
+                    </span>
+                    <span>→</span>
+                    <span className={item.has_discrepancy ? 'font-semibold' : ''}>
+                      {t('inventory:actual')}: {item.actual_quantity} {item.unit_of_measure}
+                    </span>
+                  </div>
+                  {item.has_discrepancy && (
+                    <div className="mt-2 flex items-center gap-2">
+                      <AlertTriangle className="w-4 h-4" style={{ color: 'var(--color-warning-700)' }} />
+                      <span className="text-sm font-semibold" style={{ color: 'var(--color-warning-900)' }}>
+                        {t('inventory:discrepancy_detected')}
+                      </span>
+                    </div>
+                  )}
+                </div>
+
+                {/* Lot Quantity Summary */}
+                <div className="text-right">
+                  <div className="text-sm font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>
+                    {t('inventory:lot_total')}
+                  </div>
+                  <div
+                    className="text-2xl font-bold"
+                    style={{
+                      color:
+                        Math.abs(calculateLotQuantitySum(item.lots) - item.actual_quantity) < 0.01
+                          ? 'var(--color-success)'
+                          : 'var(--color-error)',
+                    }}
+                  >
+                    {calculateLotQuantitySum(item.lots).toFixed(2)} {item.unit_of_measure}
+                  </div>
+                </div>
+              </div>
+
+              {/* Discrepancy Reason */}
+              {item.has_discrepancy && (
+                <div className="mb-4">
+                  <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>
+                    {t('inventory:discrepancy_reason')}
+                  </label>
+                  <textarea
+                    value={item.discrepancy_reason || ''}
+                    onChange={(e) => updateLineItem(idx, { discrepancy_reason: e.target.value })}
+                    placeholder={t('inventory:discrepancy_reason_placeholder')}
+                    rows={2}
+                    className="w-full px-3 py-2 rounded-lg border resize-none"
+                    style={{
+                      backgroundColor: 'var(--bg-primary)',
+                      borderColor: 'var(--border-primary)',
+                      color: 'var(--text-primary)',
+                    }}
+                  />
+                </div>
+              )}
+
+              {/* Lots */}
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <h4 className="font-semibold" style={{ color: 'var(--text-primary)' }}>
+                    {t('inventory:lots')} ({item.lots.length})
+                  </h4>
+                </div>
+
+                {item.lots.map((lot, lotIdx) => (
+                  <LotInput
+                    key={lotIdx}
+                    lot={lot}
+                    lineItemUoM={item.unit_of_measure}
+                    onChange={(updatedLot) => updateLot(idx, lotIdx, updatedLot)}
+                    onRemove={() => removeLot(idx, lotIdx)}
+                    canRemove={item.lots.length > 1}
+                  />
+                ))}
+
+                {/* Add Lot Button */}
+                <button
+                  onClick={() => addLot(idx)}
+                  className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-lg border-2 border-dashed transition-colors hover:border-solid"
+                  style={{
+                    borderColor: 'var(--border-primary)',
+                    color: 'var(--color-primary)',
+                    backgroundColor: 'transparent',
+                  }}
+                >
+                  <Plus className="w-4 h-4" />
+                  <span className="font-semibold">{t('inventory:add_lot')}</span>
+                </button>
+              </div>
+
+              {/* Validation Error for this line */}
+              {(validationErrors[`line_${idx}_lots`] ||
+                validationErrors[`line_${idx}_quantity`]) && (
+                <div
+                  className="mt-4 p-3 rounded-lg border flex items-start gap-2"
+                  style={{
+                    backgroundColor: 'var(--color-error-50)',
+                    borderColor: 'var(--color-error-300)',
+                  }}
+                >
+                  <AlertTriangle className="w-4 h-4 flex-shrink-0 mt-0.5" style={{ color: 'var(--color-error-700)' }} />
+                  <p className="text-sm" style={{ color: 'var(--color-error-900)' }}>
+                    {validationErrors[`line_${idx}_lots`] ||
+                      validationErrors[`line_${idx}_quantity`]}
+                  </p>
+                </div>
+              )}
+            </div>
+          ))}
+
+          {/* General Notes */}
+          <div className="mt-6">
+            <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>
+              {t('inventory:receipt_notes')}
+            </label>
+            <textarea
+              value={receipt.notes || ''}
+              onChange={(e) => setReceipt({ ...receipt, notes: e.target.value })}
+              placeholder={t('inventory:receipt_notes_placeholder')}
+              rows={3}
+              className="w-full px-3 py-2 rounded-lg border resize-none"
+              style={{
+                backgroundColor: 'var(--bg-primary)',
+                borderColor: 'var(--border-primary)',
+                color: 'var(--text-primary)',
+              }}
+            />
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div
+          className="flex items-center justify-between p-6 border-t"
+          style={{ borderColor: 'var(--border-primary)' }}
+        >
+          <Button variant="ghost" onClick={onClose} disabled={isSaving}>
+            {t('common:actions.cancel')}
+          </Button>
+
+          <div className="flex items-center gap-3">
+            {onSaveDraft && (
+              <Button variant="secondary" onClick={handleSaveDraft} disabled={isSaving}>
+                <Save className="w-4 h-4 mr-2" />
+                {t('common:actions.save_draft')}
+              </Button>
+            )}
+
+            {onConfirm && (
+              <Button variant="default" onClick={handleConfirm} disabled={isSaving}>
+                <CheckCircle className="w-4 h-4 mr-2" />
+                {t('common:actions.confirm_receipt')}
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/dashboard/UnifiedActionQueueCard.tsx

@@ -95,11 +95,7 @@ function EscalationBadge({ alert }: { alert: EnrichedAlert }) {
 
   return (
     <div
-      className="flex items-center gap-1 px-2 py-1 rounded-md text-xs font-semibold"
-      style={{
-        backgroundColor: 'var(--color-warning-100)',
-        color: 'var(--color-warning-900)',
-      }}
+      className="flex items-center gap-1 px-2 py-1 rounded-md text-xs font-semibold bg-[var(--color-warning-100)] text-[var(--color-warning-900)]"
     >
       <AlertTriangle className="w-3 h-3" />
       <span>
@@ -267,7 +263,7 @@ function ActionCard({ alert, showEscalationBadge = false, onActionSuccess, onAct
           {showEscalationBadge && <EscalationBadge alert={alert} />}
 
           {/* Message */}
-          <p className="text-sm mb-3" style={{ color: 'var(--text-secondary)' }}>
+          <p className="text-sm mb-3 text-[var(--text-secondary)]">
             {alert.message}
           </p>
 
@@ -276,11 +272,7 @@ function ActionCard({ alert, showEscalationBadge = false, onActionSuccess, onAct
             <div className="flex flex-wrap gap-2 mb-3">
               {alert.business_impact?.financial_impact_eur && (
                 <div
-                  className="flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-semibold"
-                  style={{
-                    backgroundColor: 'var(--color-warning-100)',
-                    color: 'var(--color-warning-800)',
-                  }}
+                  className="flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-semibold bg-[var(--color-warning-100)] text-[var(--color-warning-800)]"
                 >
                   <TrendingUp className="w-4 h-4" />
                   <span>€{alert.business_impact.financial_impact_eur.toFixed(0)} at risk</span>
@@ -290,11 +282,7 @@ function ActionCard({ alert, showEscalationBadge = false, onActionSuccess, onAct
                 <div
                   className={`flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-semibold ${
                     alert.urgency_context.time_until_consequence_hours < 6 ? 'animate-pulse' : ''
-                  }`}
-                  style={{
-                    backgroundColor: 'var(--color-error-100)',
-                    color: 'var(--color-error-800)',
-                  }}
+                  } bg-[var(--color-error-100)] text-[var(--color-error-800)]`}
                 >
                   <Clock className="w-4 h-4" />
                   <span>{Math.round(alert.urgency_context.time_until_consequence_hours)}h left</span>
@@ -302,11 +290,7 @@ function ActionCard({ alert, showEscalationBadge = false, onActionSuccess, onAct
               )}
               {alert.type_class === 'prevented_issue' && (
                 <div
-                  className="flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-semibold"
-                  style={{
-                    backgroundColor: 'var(--color-success-100)',
-                    color: 'var(--color-success-800)',
-                  }}
+                  className="flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-semibold bg-[var(--color-success-100)] text-[var(--color-success-800)]"
                 >
                   <Bot className="w-4 h-4" />
                   <span>AI handled</span>
@@ -320,8 +304,7 @@ function ActionCard({ alert, showEscalationBadge = false, onActionSuccess, onAct
             <>
               <button
                 onClick={() => setExpanded(!expanded)}
-                className="flex items-center gap-2 text-sm font-medium transition-colors mb-2"
-                style={{ color: 'var(--color-info-700)' }}
+                className="flex items-center gap-2 text-sm font-medium transition-colors mb-2 text-[var(--color-info-700)]"
               >
                 {expanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
                 <Zap className="w-4 h-4" />
@@ -330,15 +313,11 @@ function ActionCard({ alert, showEscalationBadge = false, onActionSuccess, onAct
 
               {expanded && (
                 <div
-                  className="rounded-md p-3 mb-3"
-                  style={{
-                    backgroundColor: 'var(--bg-secondary)',
-                    borderLeft: '3px solid var(--color-info-600)',
-                  }}
+                  className="rounded-md p-3 mb-3 bg-[var(--bg-secondary)] border-l-4 border-l-[var(--color-info-600)]"
                 >
                   <div className="flex items-start gap-2">
-                    <Bot className="w-4 h-4 flex-shrink-0 mt-0.5" style={{ color: 'var(--color-info-700)' }} />
-                    <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+                    <Bot className="w-4 h-4 flex-shrink-0 mt-0.5 text-[var(--color-info-700)]" />
+                    <p className="text-sm text-[var(--text-secondary)]">
                       {alert.ai_reasoning_summary}
                     </p>
                   </div>
@@ -386,11 +365,7 @@ function ActionCard({ alert, showEscalationBadge = false, onActionSuccess, onAct
           {/* Action Completed State */}
           {actionCompleted && (
             <div
-              className="flex items-center gap-2 mt-3 px-3 py-2 rounded-md"
-              style={{
-                backgroundColor: 'var(--color-success-100)',
-                color: 'var(--color-success-800)',
-              }}
+              className="flex items-center gap-2 mt-3 px-3 py-2 rounded-md bg-[var(--color-success-100)] text-[var(--color-success-800)]"
             >
               <CheckCircle className="w-5 h-5" />
               <span className="font-semibold">Action completed successfully</span>
@@ -443,7 +418,7 @@ function ActionSection({
       >
         <div className="flex items-center gap-2">
           <Icon className="w-5 h-5" style={{ color: iconColor }} />
-          <h3 className="text-lg font-bold" style={{ color: 'var(--text-primary)' }}>
+          <h3 className="text-lg font-bold text-[var(--text-primary)]">
             {title}
           </h3>
           <span
@@ -457,9 +432,9 @@ function ActionSection({
           </span>
         </div>
         {expanded ? (
-          <ChevronUp className="w-5 h-5 transition-transform" style={{ color: 'var(--text-secondary)' }} />
+          <ChevronUp className="w-5 h-5 transition-transform text-[var(--text-secondary)]" />
         ) : (
-          <ChevronDown className="w-5 h-5 transition-transform" style={{ color: 'var(--text-secondary)' }} />
+          <ChevronDown className="w-5 h-5 transition-transform text-[var(--text-secondary)]" />
         )}
       </button>
 
@@ -674,9 +649,9 @@ export function UnifiedActionQueueCard({
         }}
       >
         <div className="animate-pulse space-y-4">
-          <div className="h-6 rounded w-1/2" 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-6 rounded w-1/2 bg-[var(--bg-tertiary)]"></div>
+          <div className="h-32 rounded bg-[var(--bg-tertiary)]"></div>
+          <div className="h-32 rounded bg-[var(--bg-tertiary)]"></div>
         </div>
       </div>
     );
@@ -685,19 +660,15 @@ export function UnifiedActionQueueCard({
   if (!displayQueue || displayQueue.totalActions === 0) {
     return (
       <div
-        className="border-2 rounded-xl p-8 text-center shadow-lg"
-        style={{
-          backgroundColor: 'var(--color-success-50)',
-          borderColor: 'var(--color-success-200)',
-        }}
+        className="border-2 rounded-xl p-8 text-center shadow-lg bg-[var(--color-success-50)] border-[var(--color-success-200)]"
       >
-        <div className="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center" style={{ backgroundColor: 'var(--color-success-100)' }}>
-          <Zap className="w-8 h-8" style={{ color: 'var(--color-success-600)' }} />
+        <div className="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center bg-[var(--color-success-100)]">
+          <Zap className="w-8 h-8 text-[var(--color-success-600)]" />
         </div>
-        <h3 className="text-xl font-bold mb-2" style={{ color: 'var(--color-success-900)' }}>
+        <h3 className="text-xl font-bold mb-2 text-[var(--color-success-900)]">
           {t('dashboard:all_caught_up')}
         </h3>
-        <p style={{ color: 'var(--color-success-700)' }}>
+        <p className="text-[var(--color-success-700)]">
           {t('dashboard:no_actions_needed')}
         </p>
       </div>
@@ -706,11 +677,7 @@ export function UnifiedActionQueueCard({
 
   return (
     <div
-      className="rounded-xl shadow-xl p-6 border-2 transition-all duration-300 hover:shadow-2xl"
-      style={{
-        backgroundColor: 'var(--bg-primary)',
-        borderColor: 'var(--border-primary)',
-      }}
+      className="rounded-xl shadow-xl p-6 border-2 transition-all duration-300 hover:shadow-2xl bg-[var(--bg-primary)] border-[var(--border-primary)]"
     >
       {/* Header with Hero Icon */}
       <div className="flex items-center gap-4 mb-6">
@@ -728,7 +695,7 @@ export function UnifiedActionQueueCard({
 
         {/* Title + Inline Metrics */}
         <div className="flex-1 min-w-0">
-          <h2 className="text-2xl md:text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
+          <h2 className="text-2xl md:text-3xl font-bold mb-2 text-[var(--text-primary)]">
             {t('dashboard:action_queue_title')}
           </h2>
 
@@ -736,12 +703,11 @@ export function UnifiedActionQueueCard({
           <div className="flex flex-wrap items-center gap-3">
             {/* Total Actions Badge */}
             <div
-              className="flex items-center gap-1.5 px-2 py-1 rounded-md"
-              style={{
-                backgroundColor: displayQueue.totalActions > 5 ? 'var(--color-error-100)' : 'var(--color-info-100)',
-                color: displayQueue.totalActions > 5 ? 'var(--color-error-800)' : 'var(--color-info-800)',
-                border: `1px solid ${displayQueue.totalActions > 5 ? 'var(--color-error-300)' : 'var(--color-info-300)'}`,
-              }}
+              className={`flex items-center gap-1.5 px-2 py-1 rounded-md ${
+                displayQueue.totalActions > 5
+                  ? 'bg-[var(--color-error-100)] text-[var(--color-error-800)] border border-[var(--color-error-300)]'
+                  : 'bg-[var(--color-info-100)] text-[var(--color-info-800)] border border-[var(--color-info-300)]'
+              }`}
             >
               <span className="font-semibold">{displayQueue.totalActions}</span>
               <span className="text-xs">{t('dashboard:total_actions')}</span>
@@ -749,12 +715,11 @@ export function UnifiedActionQueueCard({
 
             {/* SSE Connection Badge */}
             <div
-              className="flex items-center gap-1.5 px-2 py-1 rounded-md text-xs"
-              style={{
-                backgroundColor: isConnected ? 'var(--color-success-100)' : 'var(--color-error-100)',
-                color: isConnected ? 'var(--color-success-800)' : 'var(--color-error-800)',
-                border: `1px solid ${isConnected ? 'var(--color-success-300)' : 'var(--color-error-300)'}`,
-              }}
+              className={`flex items-center gap-1.5 px-2 py-1 rounded-md text-xs ${
+                isConnected
+                  ? 'bg-[var(--color-success-100)] text-[var(--color-success-800)] border border-[var(--color-success-300)]'
+                  : 'bg-[var(--color-error-100)] text-[var(--color-error-800)] border border-[var(--color-error-300)]'
+              }`}
             >
               {isConnected ? (
                 <>
@@ -775,11 +740,11 @@ export function UnifiedActionQueueCard({
       {/* Toast Notification */}
       {toastMessage && (
         <div
-          className="fixed top-4 right-4 z-50 px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 animate-slide-in-right"
-          style={{
-            backgroundColor: toastMessage.type === 'success' ? 'var(--color-success-600)' : 'var(--color-error-600)',
-            color: 'white',
-          }}
+          className={`fixed top-4 right-4 z-50 px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 animate-slide-in-right text-white ${
+            toastMessage.type === 'success'
+              ? 'bg-[var(--color-success-600)]'
+              : 'bg-[var(--color-error-600)]'
+          }`}
         >
           {toastMessage.type === 'success' ? (
             <CheckCircle className="w-5 h-5" />

frontend/src/components/dashboard/index.ts

@@ -6,8 +6,15 @@
  * Barrel export for all JTBD dashboard components
  */
 
-export { HealthStatusCard } from './HealthStatusCard';
-export { ActionQueueCard } from './ActionQueueCard';
-export { OrchestrationSummaryCard } from './OrchestrationSummaryCard';
-export { ProductionTimelineCard } from './ProductionTimelineCard';
-export { InsightsGrid } from './InsightsGrid';
+// Core Dashboard Components (JTBD-Aligned)
+export { GlanceableHealthHero } from './GlanceableHealthHero';
+export { UnifiedActionQueueCard } from './UnifiedActionQueueCard';
+export { ExecutionProgressTracker } from './ExecutionProgressTracker';
+export { IntelligentSystemSummaryCard } from './IntelligentSystemSummaryCard';
+
+// Setup Flow Components
+export { SetupWizardBlocker } from './SetupWizardBlocker';
+export { CollapsibleSetupBanner } from './CollapsibleSetupBanner';
+
+// Modals & Utilities
+export { StockReceiptModal } from './StockReceiptModal';

frontend/src/components/domain/dashboard/AlertBulkActions.tsx

@@ -1,126 +0,0 @@
-import React, { useState } from 'react';
-import { Check, Trash2, Clock, X } from 'lucide-react';
-import { Button } from '../../ui/Button';
-import AlertSnoozeMenu from './AlertSnoozeMenu';
-
-export interface AlertBulkActionsProps {
-  selectedCount: number;
-  onMarkAsRead: () => void;
-  onRemove: () => void;
-  onSnooze: (duration: '15min' | '1hr' | '4hr' | 'tomorrow' | number) => void;
-  onDeselectAll: () => void;
-  onSelectAll: () => void;
-  totalCount: number;
-}
-
-const AlertBulkActions: React.FC<AlertBulkActionsProps> = ({
-  selectedCount,
-  onMarkAsRead,
-  onRemove,
-  onSnooze,
-  onDeselectAll,
-  onSelectAll,
-  totalCount,
-}) => {
-  const [showSnoozeMenu, setShowSnoozeMenu] = useState(false);
-
-  if (selectedCount === 0) {
-    return null;
-  }
-
-  const handleSnooze = (duration: '15min' | '1hr' | '4hr' | 'tomorrow' | number) => {
-    onSnooze(duration);
-    setShowSnoozeMenu(false);
-  };
-
-  const allSelected = selectedCount === totalCount;
-
-  return (
-    <div className="sticky top-0 z-20 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] text-white px-4 py-3 rounded-xl shadow-xl flex items-center justify-between gap-3 animate-in slide-in-from-top-2 duration-300">
-      <div className="flex items-center gap-3 flex-1 min-w-0">
-        <div className="flex items-center gap-2 px-3 py-1.5 bg-white/20 backdrop-blur-sm rounded-lg">
-          <span className="text-sm font-bold">{selectedCount}</span>
-          <span className="text-xs font-medium opacity-90">
-            {selectedCount === 1 ? 'seleccionado' : 'seleccionados'}
-          </span>
-        </div>
-
-        {!allSelected && totalCount > selectedCount && (
-          <button
-            onClick={onSelectAll}
-            className="text-sm font-medium hover:underline opacity-90 hover:opacity-100 transition-opacity whitespace-nowrap"
-            aria-label={`Select all ${totalCount} alerts`}
-          >
-            Seleccionar todos ({totalCount})
-          </button>
-        )}
-      </div>
-
-      <div className="flex items-center gap-2 relative flex-shrink-0">
-        {/* Quick Actions */}
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={onMarkAsRead}
-          className="bg-white/15 text-white border-white/30 hover:bg-white/25 backdrop-blur-sm h-9 px-3"
-          aria-label="Mark all selected as read"
-        >
-          <Check className="w-4 h-4 sm:mr-2" />
-          <span className="hidden sm:inline">Marcar leídos</span>
-        </Button>
-
-        <div className="relative">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setShowSnoozeMenu(!showSnoozeMenu)}
-            className="bg-white/15 text-white border-white/30 hover:bg-white/25 backdrop-blur-sm h-9 px-3"
-            aria-label="Snooze selected alerts"
-          >
-            <Clock className="w-4 h-4 sm:mr-2" />
-            <span className="hidden sm:inline">Posponer</span>
-          </Button>
-
-          {showSnoozeMenu && (
-            <>
-              <div
-                className="fixed inset-0 z-20"
-                onClick={() => setShowSnoozeMenu(false)}
-                aria-hidden="true"
-              />
-              <div className="absolute right-0 top-full mt-2 z-30">
-                <AlertSnoozeMenu
-                  onSnooze={handleSnooze}
-                  onCancel={() => setShowSnoozeMenu(false)}
-                />
-              </div>
-            </>
-          )}
-        </div>
-
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={onRemove}
-          className="bg-red-500/25 text-white border-red-300/40 hover:bg-red-500/40 backdrop-blur-sm h-9 px-3"
-          aria-label="Delete selected alerts"
-        >
-          <Trash2 className="w-4 h-4 sm:mr-2" />
-          <span className="hidden sm:inline">Eliminar</span>
-        </Button>
-
-        {/* Close button */}
-        <button
-          onClick={onDeselectAll}
-          className="ml-1 p-2 hover:bg-white/15 rounded-lg transition-colors"
-          aria-label="Deselect all"
-          title="Cerrar selección"
-        >
-          <X className="w-4 h-4" />
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default AlertBulkActions;

frontend/src/components/domain/dashboard/AlertCard.tsx

@@ -1,446 +0,0 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  AlertTriangle,
-  AlertCircle,
-  Info,
-  CheckCircle,
-  Check,
-  Trash2,
-  Clock,
-  MoreVertical,
-  ChevronDown,
-  ChevronUp,
-} from 'lucide-react';
-import { Badge } from '../../ui/Badge';
-import { Button } from '../../ui/Button';
-import type { NotificationData } from '../../../hooks/useNotifications';
-import { getSnoozedTimeRemaining, categorizeAlert } from '../../../utils/alertHelpers';
-import AlertContextActions from './AlertContextActions';
-import AlertSnoozeMenu from './AlertSnoozeMenu';
-
-export interface AlertCardProps {
-  alert: NotificationData;
-  isExpanded: boolean;
-  isSelected: boolean;
-  isSnoozed: boolean;
-  snoozedUntil?: number;
-  onToggleExpand: () => void;
-  onToggleSelect: () => void;
-  onMarkAsRead: () => void;
-  onRemove: () => void;
-  onSnooze: (duration: '15min' | '1hr' | '4hr' | 'tomorrow' | number) => void;
-  onUnsnooze: () => void;
-  showCheckbox?: boolean;
-}
-
-const getSeverityIcon = (severity: string) => {
-  switch (severity) {
-    case 'urgent':
-      return AlertTriangle;
-    case 'high':
-      return AlertCircle;
-    case 'medium':
-      return Info;
-    case 'low':
-      return CheckCircle;
-    default:
-      return Info;
-  }
-};
-
-const getSeverityColor = (severity: string) => {
-  switch (severity) {
-    case 'urgent':
-      return 'var(--color-error)';
-    case 'high':
-      return 'var(--color-warning)';
-    case 'medium':
-      return 'var(--color-info)';
-    case 'low':
-      return 'var(--color-success)';
-    default:
-      return 'var(--color-info)';
-  }
-};
-
-const getSeverityBadge = (severity: string): 'error' | 'warning' | 'info' | 'success' => {
-  switch (severity) {
-    case 'urgent':
-      return 'error';
-    case 'high':
-      return 'warning';
-    case 'medium':
-      return 'info';
-    case 'low':
-      return 'success';
-    default:
-      return 'info';
-  }
-};
-
-const formatTimestamp = (timestamp: string, t: any) => {
-  const date = new Date(timestamp);
-  const now = new Date();
-  const diffMs = now.getTime() - date.getTime();
-  const diffMins = Math.floor(diffMs / (1000 * 60));
-
-  if (diffMins < 1) return t('dashboard:alerts.time.now', 'Ahora');
-  if (diffMins < 60) return t('dashboard:alerts.time.minutes_ago', 'hace {{count}} min', { count: diffMins });
-  const diffHours = Math.floor(diffMins / 60);
-  if (diffHours < 24) return t('dashboard:alerts.time.hours_ago', 'hace {{count}} h', { count: diffHours });
-  return date.toLocaleDateString() === new Date(now.getTime() - 24 * 60 * 60 * 1000).toLocaleDateString()
-    ? t('dashboard:alerts.time.yesterday', 'Ayer')
-    : date.toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit' });
-};
-
-const AlertCard: React.FC<AlertCardProps> = ({
-  alert,
-  isExpanded,
-  isSelected,
-  isSnoozed,
-  snoozedUntil,
-  onToggleExpand,
-  onToggleSelect,
-  onMarkAsRead,
-  onRemove,
-  onSnooze,
-  onUnsnooze,
-  showCheckbox = false,
-}) => {
-  const { t } = useTranslation(['dashboard']);
-  const [showSnoozeMenu, setShowSnoozeMenu] = useState(false);
-  const [showActions, setShowActions] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-
-  const SeverityIcon = getSeverityIcon(alert.severity);
-  const severityColor = getSeverityColor(alert.severity);
-
-  const handleSnooze = (duration: '15min' | '1hr' | '4hr' | 'tomorrow' | number) => {
-    onSnooze(duration);
-    setShowSnoozeMenu(false);
-  };
-
-  const category = categorizeAlert(alert);
-
-  return (
-    <div
-      className={`
-        rounded-lg transition-all duration-200 relative overflow-hidden
-        ${isExpanded ? 'shadow-md' : 'hover:shadow-md'}
-        ${isSelected ? 'ring-2 ring-[var(--color-primary)] ring-offset-2' : ''}
-        ${isSnoozed ? 'opacity-75' : ''}
-      `}
-      style={{
-        backgroundColor: 'var(--bg-primary)',
-        border: '1px solid var(--border-primary)',
-        ...(isExpanded && {
-          backgroundColor: 'var(--bg-secondary)',
-        }),
-      }}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      {/* Left severity accent border */}
-      <div
-        className="absolute left-0 top-0 bottom-0 w-1"
-        style={{ backgroundColor: severityColor }}
-      />
-
-      {/* Compact Card Header */}
-      <div className="flex items-start gap-3 p-4 pl-5">
-        {/* Checkbox for selection */}
-        {showCheckbox && (
-          <div className="flex-shrink-0 pt-0.5">
-            <input
-              type="checkbox"
-              checked={isSelected}
-              onChange={(e) => {
-                e.stopPropagation();
-                onToggleSelect();
-              }}
-              className="w-4 h-4 rounded border-[var(--border-primary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)] focus:ring-offset-0 cursor-pointer"
-              aria-label={`Select alert: ${alert.title}`}
-            />
-          </div>
-        )}
-
-        {/* Severity Icon */}
-        <div
-          className="flex-shrink-0 p-2 rounded-lg cursor-pointer hover:scale-105 transition-transform"
-          style={{ backgroundColor: severityColor + '15' }}
-          onClick={onToggleExpand}
-          aria-label="Toggle alert details"
-        >
-          <SeverityIcon
-            className="w-5 h-5"
-            style={{ color: severityColor }}
-          />
-        </div>
-
-        {/* Alert Content */}
-        <div className="flex-1 min-w-0 cursor-pointer" onClick={onToggleExpand}>
-          {/* Title and Status */}
-          <div className="flex items-start justify-between gap-3 mb-1.5">
-            <div className="flex-1 min-w-0">
-              <h4 className="text-base font-semibold leading-snug mb-1" style={{ color: 'var(--text-primary)' }}>
-                {alert.title}
-              </h4>
-              <div className="flex items-center gap-2 flex-wrap">
-                {/* Single primary severity badge */}
-                <Badge variant={getSeverityBadge(alert.severity)} size="sm" className="font-semibold px-2.5 py-1 min-h-[1.375rem]">
-                  {t(`dashboard:alerts.severity.${alert.severity}`, alert.severity.toUpperCase())}
-                </Badge>
-
-                {/* Unread indicator */}
-                {!alert.read && (
-                  <span className="inline-flex items-center gap-1.5 text-xs font-medium px-2 py-1 rounded-md bg-blue-50 dark:bg-blue-900/20 min-h-[1.375rem]" style={{ color: 'var(--color-info)' }}>
-                    <span className="w-2 h-2 rounded-full bg-[var(--color-info)] animate-pulse flex-shrink-0" />
-                    {t('dashboard:alerts.status.new', 'Nuevo')}
-                  </span>
-                )}
-
-                {/* Snoozed indicator */}
-                {isSnoozed && snoozedUntil && (
-                  <span className="inline-flex items-center gap-1.5 text-xs font-medium px-2 py-1 rounded-md bg-gray-50 dark:bg-gray-800 min-h-[1.375rem]" style={{ color: 'var(--text-secondary)' }}>
-                    <Clock className="w-3 h-3 flex-shrink-0" />
-                    <span className="whitespace-nowrap">{getSnoozedTimeRemaining(alert.id, new Map([[alert.id, { alertId: alert.id, until: snoozedUntil }]]))}</span>
-                  </span>
-                )}
-              </div>
-            </div>
-
-            {/* Timestamp */}
-            <span className="text-xs font-medium flex-shrink-0 pt-0.5" style={{ color: 'var(--text-secondary)' }}>
-              {formatTimestamp(alert.timestamp, t)}
-            </span>
-          </div>
-
-          {/* Preview message when collapsed */}
-          {!isExpanded && alert.message && (
-            <p
-              className="text-sm leading-relaxed mt-2 overflow-hidden"
-              style={{
-                color: 'var(--text-secondary)',
-                display: '-webkit-box',
-                WebkitLineClamp: 2,
-                WebkitBoxOrient: 'vertical',
-              }}
-            >
-              {alert.message}
-            </p>
-          )}
-        </div>
-
-        {/* Actions - shown on hover or when expanded */}
-        <div className={`flex-shrink-0 flex items-center gap-1 transition-opacity ${isHovered || isExpanded || showActions ? 'opacity-100' : 'opacity-0'}`}>
-          {/* Quick action buttons */}
-          {!alert.read && !isExpanded && (
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                onMarkAsRead();
-              }}
-              className="p-1.5 rounded-md hover:bg-[var(--bg-tertiary)] transition-colors"
-              title={t('dashboard:alerts.mark_as_read', 'Marcar como leído')}
-              aria-label="Mark as read"
-            >
-              <Check className="w-4 h-4" style={{ color: 'var(--color-success)' }} />
-            </button>
-          )}
-
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              setShowActions(!showActions);
-            }}
-            className="p-1.5 rounded-md hover:bg-[var(--bg-tertiary)] transition-colors"
-            aria-label="More actions"
-            title="More actions"
-          >
-            <MoreVertical className="w-4 h-4" style={{ color: 'var(--text-secondary)' }} />
-          </button>
-
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              onToggleExpand();
-            }}
-            className="p-1.5 rounded-md hover:bg-[var(--bg-tertiary)] transition-colors"
-            aria-label={isExpanded ? "Collapse" : "Expand"}
-            title={isExpanded ? "Collapse" : "Expand"}
-          >
-            {isExpanded ? (
-              <ChevronUp className="w-4 h-4" style={{ color: 'var(--text-secondary)' }} />
-            ) : (
-              <ChevronDown className="w-4 h-4" style={{ color: 'var(--text-secondary)' }} />
-            )}
-          </button>
-        </div>
-      </div>
-
-      {/* Quick Actions Menu - Better positioning */}
-      {showActions && (
-        <>
-          <div
-            className="fixed inset-0 z-20"
-            onClick={() => setShowActions(false)}
-            aria-hidden="true"
-          />
-          <div className="absolute right-3 top-16 z-30 bg-[var(--bg-primary)] border border-[var(--border-primary)] rounded-lg shadow-xl py-1 min-w-[180px]">
-            {!alert.read && (
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onMarkAsRead();
-                  setShowActions(false);
-                }}
-                className="w-full px-4 py-2 text-left text-sm hover:bg-[var(--bg-secondary)] transition-colors flex items-center gap-2"
-                style={{ color: 'var(--text-primary)' }}
-              >
-                <Check className="w-4 h-4" style={{ color: 'var(--color-success)' }} />
-                Marcar como leído
-              </button>
-            )}
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                setShowSnoozeMenu(true);
-                setShowActions(false);
-              }}
-              className="w-full px-4 py-2 text-left text-sm hover:bg-[var(--bg-secondary)] transition-colors flex items-center gap-2"
-              style={{ color: 'var(--text-primary)' }}
-            >
-              <Clock className="w-4 h-4" />
-              {isSnoozed ? 'Cambiar tiempo' : 'Posponer'}
-            </button>
-            {isSnoozed && (
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onUnsnooze();
-                  setShowActions(false);
-                }}
-                className="w-full px-4 py-2 text-left text-sm hover:bg-[var(--bg-secondary)] transition-colors flex items-center gap-2"
-                style={{ color: 'var(--text-primary)' }}
-              >
-                <Clock className="w-4 h-4" />
-                Reactivar ahora
-              </button>
-            )}
-            <div className="my-1 border-t border-[var(--border-primary)]" />
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                onRemove();
-                setShowActions(false);
-              }}
-              className="w-full px-4 py-2 text-left text-sm hover:bg-red-50 dark:hover:bg-red-900/20 text-red-600 transition-colors flex items-center gap-2"
-            >
-              <Trash2 className="w-4 h-4" />
-              Eliminar
-            </button>
-          </div>
-        </>
-      )}
-
-      {/* Snooze Menu - Better positioning */}
-      {showSnoozeMenu && (
-        <>
-          <div
-            className="fixed inset-0 z-20"
-            onClick={() => setShowSnoozeMenu(false)}
-            aria-hidden="true"
-          />
-          <div className="absolute right-3 top-16 z-30">
-            <AlertSnoozeMenu
-              onSnooze={handleSnooze}
-              onCancel={() => setShowSnoozeMenu(false)}
-            />
-          </div>
-        </>
-      )}
-
-      {/* Expanded Details */}
-      {isExpanded && (
-        <div className="px-5 pb-4 border-t pt-4" style={{ borderColor: 'var(--border-primary)' }}>
-          {/* Full Message */}
-          <div className="mb-4">
-            <p className="text-sm leading-relaxed" style={{ color: 'var(--text-primary)' }}>
-              {alert.message}
-            </p>
-          </div>
-
-          {/* Metadata */}
-          {alert.metadata && Object.keys(alert.metadata).length > 0 && (
-            <div className="mb-4 p-3 rounded-lg border" style={{
-              backgroundColor: 'var(--bg-tertiary)',
-              borderColor: 'var(--border-primary)'
-            }}>
-              <p className="text-xs font-semibold mb-2 uppercase tracking-wide" style={{ color: 'var(--text-primary)' }}>
-                {t('dashboard:alerts.additional_details', 'Detalles Adicionales')}
-              </p>
-              <div className="text-sm space-y-2" style={{ color: 'var(--text-secondary)' }}>
-                {Object.entries(alert.metadata).map(([key, value]) => (
-                  <div key={key} className="flex justify-between gap-4">
-                    <span className="font-medium capitalize text-[var(--text-primary)]">{key.replace(/_/g, ' ')}:</span>
-                    <span className="text-right">{String(value)}</span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* Contextual Actions */}
-          <div className="mb-4">
-            <AlertContextActions alert={alert} />
-          </div>
-
-          {/* Action Buttons */}
-          <div className="flex items-center gap-2 flex-wrap">
-            {!alert.read && (
-              <Button
-                variant="primary"
-                size="sm"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onMarkAsRead();
-                }}
-                className="h-9 px-4 text-sm font-medium"
-              >
-                <Check className="w-4 h-4 mr-2" />
-                {t('dashboard:alerts.mark_as_read', 'Marcar como leído')}
-              </Button>
-            )}
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={(e) => {
-                e.stopPropagation();
-                setShowSnoozeMenu(true);
-              }}
-              className="h-9 px-4 text-sm font-medium"
-            >
-              <Clock className="w-4 h-4 mr-2" />
-              {isSnoozed ? 'Cambiar' : 'Posponer'}
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={(e) => {
-                e.stopPropagation();
-                onRemove();
-              }}
-              className="h-9 px-4 text-sm font-medium text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20"
-            >
-              <Trash2 className="w-4 h-4 mr-2" />
-              {t('dashboard:alerts.remove', 'Eliminar')}
-            </Button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default AlertCard;

frontend/src/components/domain/dashboard/AlertContextActions.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import { Button } from '../../ui/Button';
-import type { NotificationData } from '../../../hooks/useNotifications';
-import { useAlertActions } from '../../../hooks/useAlertActions';
-
-export interface AlertContextActionsProps {
-  alert: NotificationData;
-}
-
-const AlertContextActions: React.FC<AlertContextActionsProps> = ({ alert }) => {
-  const { getActions, executeAction } = useAlertActions();
-  const actions = getActions(alert);
-
-  if (actions.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="mb-4">
-      <p className="text-xs font-semibold mb-2 uppercase tracking-wide text-[var(--text-primary)]">
-        Acciones Recomendadas
-      </p>
-      <div className="flex flex-wrap gap-2">
-        {actions.map((action, index) => {
-          const variantMap: Record<string, 'primary' | 'secondary' | 'outline'> = {
-            primary: 'primary',
-            secondary: 'secondary',
-            outline: 'outline',
-          };
-
-          return (
-            <Button
-              key={index}
-              variant={variantMap[action.variant] || 'outline'}
-              size="sm"
-              onClick={() => executeAction(alert, action)}
-              className="flex items-center gap-2"
-            >
-              <span>{action.icon}</span>
-              <span>{action.label}</span>
-            </Button>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-
-export default AlertContextActions;

frontend/src/components/domain/dashboard/AlertFilters.tsx

@@ -1,306 +0,0 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Search, X, Filter, ChevronDown } from 'lucide-react';
-import { Badge } from '../../ui/Badge';
-import { Button } from '../../ui/Button';
-import { Input } from '../../ui/Input';
-import type { AlertSeverity, AlertCategory, TimeGroup } from '../../../utils/alertHelpers';
-import { getCategoryName, getCategoryIcon } from '../../../utils/alertHelpers';
-
-export interface AlertFiltersProps {
-  selectedSeverities: AlertSeverity[];
-  selectedCategories: AlertCategory[];
-  selectedTimeRange: TimeGroup | 'all';
-  searchQuery: string;
-  showSnoozed: boolean;
-  onToggleSeverity: (severity: AlertSeverity) => void;
-  onToggleCategory: (category: AlertCategory) => void;
-  onSetTimeRange: (range: TimeGroup | 'all') => void;
-  onSearchChange: (query: string) => void;
-  onToggleShowSnoozed: () => void;
-  onClearFilters: () => void;
-  hasActiveFilters: boolean;
-  activeFilterCount: number;
-}
-
-const SEVERITY_CONFIG: Record<AlertSeverity, { label: string; color: string; variant: 'error' | 'warning' | 'info' | 'success' }> = {
-  urgent: { label: 'Urgente', color: 'bg-red-500', variant: 'error' },
-  high: { label: 'Alta', color: 'bg-orange-500', variant: 'warning' },
-  medium: { label: 'Media', color: 'bg-blue-500', variant: 'info' },
-  low: { label: 'Baja', color: 'bg-green-500', variant: 'success' },
-};
-
-const TIME_RANGES: Array<{ value: TimeGroup | 'all'; label: string }> = [
-  { value: 'all', label: 'Todos' },
-  { value: 'today', label: 'Hoy' },
-  { value: 'yesterday', label: 'Ayer' },
-  { value: 'this_week', label: 'Esta semana' },
-  { value: 'older', label: 'Anteriores' },
-];
-
-const CATEGORIES: AlertCategory[] = ['inventory', 'production', 'orders', 'equipment', 'quality', 'suppliers'];
-
-const AlertFilters: React.FC<AlertFiltersProps> = ({
-  selectedSeverities,
-  selectedCategories,
-  selectedTimeRange,
-  searchQuery,
-  showSnoozed,
-  onToggleSeverity,
-  onToggleCategory,
-  onSetTimeRange,
-  onSearchChange,
-  onToggleShowSnoozed,
-  onClearFilters,
-  hasActiveFilters,
-  activeFilterCount,
-}) => {
-  const { t, i18n } = useTranslation(['dashboard']);
-  // Start collapsed by default for cleaner UI
-  const [showFilters, setShowFilters] = useState(false);
-
-  return (
-    <div className="space-y-3">
-      {/* Search and Filter Toggle */}
-      <div className="flex items-center gap-2">
-        <div className="flex-1 relative">
-          <Input
-            type="text"
-            placeholder={t('dashboard:alerts.filters.search_placeholder', 'Buscar alertas...')}
-            value={searchQuery}
-            onChange={(e) => onSearchChange(e.target.value)}
-            leftIcon={<Search className="w-4 h-4" />}
-            rightIcon={
-              searchQuery ? (
-                <button
-                  onClick={() => onSearchChange('')}
-                  className="p-1 hover:bg-[var(--bg-secondary)] rounded-full transition-colors"
-                  aria-label="Clear search"
-                >
-                  <X className="w-3 h-3" />
-                </button>
-              ) : undefined
-            }
-            className="pr-8 h-10"
-          />
-        </div>
-
-        <Button
-          variant={showFilters || hasActiveFilters ? 'primary' : 'outline'}
-          size="md"
-          onClick={() => setShowFilters(!showFilters)}
-          className="flex items-center gap-2 relative h-10 px-4"
-          aria-expanded={showFilters}
-          aria-label="Toggle filters"
-        >
-          <Filter className="w-4 h-4" />
-          <span className="hidden sm:inline font-medium">Filtros</span>
-          {activeFilterCount > 0 && (
-            <span className="absolute -top-1.5 -right-1.5 w-5 h-5 bg-[var(--color-error)] text-white text-xs font-bold rounded-full flex items-center justify-center">
-              {activeFilterCount}
-            </span>
-          )}
-          <ChevronDown className={`w-4 h-4 transition-transform duration-200 ${showFilters ? 'rotate-180' : ''}`} />
-        </Button>
-
-        {hasActiveFilters && (
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onClearFilters}
-            className="text-red-500 hover:text-red-600 h-10 px-3"
-            title="Clear all filters"
-            aria-label="Clear all filters"
-          >
-            <X className="w-4 h-4" />
-            <span className="sr-only">Limpiar filtros</span>
-          </Button>
-        )}
-      </div>
-
-      {/* Expandable Filters Panel - Animated */}
-      {showFilters && (
-        <div className="p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-primary)] space-y-5 animate-in fade-in slide-in-from-top-2 duration-200">
-          {/* Severity Filters */}
-          <div>
-            <label className="block text-sm font-semibold text-[var(--text-primary)] mb-3">
-              {t('dashboard:alerts.filters.severity', 'Severidad')}
-            </label>
-            <div className="flex flex-wrap gap-2">
-              {(Object.keys(SEVERITY_CONFIG) as AlertSeverity[]).map((severity) => {
-                const config = SEVERITY_CONFIG[severity];
-                const isSelected = selectedSeverities.includes(severity);
-
-                return (
-                  <button
-                    key={severity}
-                    onClick={() => onToggleSeverity(severity)}
-                    className={`
-                      px-4 py-2 rounded-lg text-sm font-medium transition-all
-                      ${isSelected
-                        ? 'ring-2 ring-[var(--color-primary)] ring-offset-2 ring-offset-[var(--bg-secondary)] scale-105'
-                        : 'opacity-70 hover:opacity-100 hover:scale-105'
-                      }
-                    `}
-                    aria-pressed={isSelected}
-                  >
-                    <Badge variant={config.variant} size="sm" className="pointer-events-none">
-                      {config.label}
-                    </Badge>
-                  </button>
-                );
-              })}
-            </div>
-          </div>
-
-          {/* Category Filters */}
-          <div>
-            <label className="block text-sm font-semibold text-[var(--text-primary)] mb-3">
-              {t('dashboard:alerts.filters.category', 'Categoría')}
-            </label>
-            <div className="flex flex-wrap gap-2">
-              {CATEGORIES.map((category) => {
-                const isSelected = selectedCategories.includes(category);
-
-                return (
-                  <button
-                    key={category}
-                    onClick={() => onToggleCategory(category)}
-                    className={`
-                      px-4 py-2 rounded-lg text-sm font-medium transition-all border-2
-                      ${isSelected
-                        ? 'bg-[var(--color-primary)] text-white border-[var(--color-primary)] scale-105'
-                        : 'bg-[var(--bg-primary)] text-[var(--text-secondary)] border-[var(--border-primary)] hover:border-[var(--color-primary)] hover:text-[var(--text-primary)] hover:scale-105'
-                      }
-                    `}
-                    aria-pressed={isSelected}
-                  >
-                    <span className="mr-1.5">{getCategoryIcon(category)}</span>
-                    {getCategoryName(category, i18n.language)}
-                  </button>
-                );
-              })}
-            </div>
-          </div>
-
-          {/* Time Range Filters */}
-          <div>
-            <label className="block text-sm font-semibold text-[var(--text-primary)] mb-3">
-              {t('dashboard:alerts.filters.time_range', 'Periodo')}
-            </label>
-            <div className="grid grid-cols-3 sm:grid-cols-5 gap-2">
-              {TIME_RANGES.map((range) => {
-                const isSelected = selectedTimeRange === range.value;
-
-                return (
-                  <button
-                    key={range.value}
-                    onClick={() => onSetTimeRange(range.value)}
-                    className={`
-                      px-4 py-2 rounded-lg text-sm font-medium transition-all
-                      ${isSelected
-                        ? 'bg-[var(--color-primary)] text-white shadow-md scale-105'
-                        : 'bg-[var(--bg-primary)] text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-primary)] hover:scale-105'
-                      }
-                    `}
-                    aria-pressed={isSelected}
-                  >
-                    {range.label}
-                  </button>
-                );
-              })}
-            </div>
-          </div>
-
-          {/* Show Snoozed Toggle */}
-          <div className="flex items-center justify-between pt-3 border-t border-[var(--border-primary)]">
-            <label htmlFor="show-snoozed-toggle" className="text-sm font-medium text-[var(--text-primary)] cursor-pointer">
-              {t('dashboard:alerts.filters.show_snoozed', 'Mostrar pospuestos')}
-            </label>
-            <label className="relative inline-flex items-center cursor-pointer">
-              <input
-                id="show-snoozed-toggle"
-                type="checkbox"
-                checked={showSnoozed}
-                onChange={onToggleShowSnoozed}
-                className="sr-only peer"
-                aria-label="Toggle show snoozed alerts"
-              />
-              <div className="w-11 h-6 bg-gray-300 dark:bg-gray-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-[var(--color-primary)]/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--color-primary)]"></div>
-            </label>
-          </div>
-        </div>
-      )}
-
-      {/* Active Filters Summary - Chips */}
-      {hasActiveFilters && !showFilters && (
-        <div className="flex flex-wrap gap-2 animate-in fade-in slide-in-from-top-1 duration-200">
-          <span className="text-xs font-medium text-[var(--text-secondary)] self-center">
-            Filtros activos:
-          </span>
-
-          {selectedSeverities.map((severity) => (
-            <button
-              key={severity}
-              onClick={() => onToggleSeverity(severity)}
-              className="group inline-flex items-center gap-1.5 transition-all hover:scale-105"
-              aria-label={`Remove ${severity} filter`}
-            >
-              <Badge
-                variant={SEVERITY_CONFIG[severity].variant}
-                size="sm"
-                className="flex items-center gap-1.5 pr-1"
-              >
-                {SEVERITY_CONFIG[severity].label}
-                <span className="p-0.5 rounded-full hover:bg-black/10 transition-colors">
-                  <X className="w-3 h-3" />
-                </span>
-              </Badge>
-            </button>
-          ))}
-
-          {selectedCategories.map((category) => (
-            <button
-              key={category}
-              onClick={() => onToggleCategory(category)}
-              className="group inline-flex items-center gap-1.5 transition-all hover:scale-105"
-              aria-label={`Remove ${category} filter`}
-            >
-              <Badge
-                variant="secondary"
-                size="sm"
-                className="flex items-center gap-1.5 pr-1"
-              >
-                {getCategoryIcon(category)} {getCategoryName(category, i18n.language)}
-                <span className="p-0.5 rounded-full hover:bg-black/10 transition-colors">
-                  <X className="w-3 h-3" />
-                </span>
-              </Badge>
-            </button>
-          ))}
-
-          {selectedTimeRange !== 'all' && (
-            <button
-              onClick={() => onSetTimeRange('all')}
-              className="group inline-flex items-center gap-1.5 transition-all hover:scale-105"
-              aria-label="Remove time range filter"
-            >
-              <Badge
-                variant="info"
-                size="sm"
-                className="flex items-center gap-1.5 pr-1"
-              >
-                {TIME_RANGES.find(r => r.value === selectedTimeRange)?.label}
-                <span className="p-0.5 rounded-full hover:bg-black/10 transition-colors">
-                  <X className="w-3 h-3" />
-                </span>
-              </Badge>
-            </button>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default AlertFilters;

frontend/src/components/domain/dashboard/AlertGroupHeader.tsx

@@ -1,84 +0,0 @@
-import React from 'react';
-import { ChevronDown, ChevronUp } from 'lucide-react';
-import { Badge } from '../../ui/Badge';
-import type { AlertGroup } from '../../../utils/alertHelpers';
-
-export interface AlertGroupHeaderProps {
-  group: AlertGroup;
-  isCollapsed: boolean;
-  onToggleCollapse: () => void;
-}
-
-const SEVERITY_COLORS: Record<string, string> = {
-  urgent: 'text-red-600 bg-red-50 border-red-200',
-  high: 'text-orange-600 bg-orange-50 border-orange-200',
-  medium: 'text-blue-600 bg-blue-50 border-blue-200',
-  low: 'text-green-600 bg-green-50 border-green-200',
-};
-
-const SEVERITY_BADGE_VARIANTS: Record<string, 'error' | 'warning' | 'info' | 'success'> = {
-  urgent: 'error',
-  high: 'warning',
-  medium: 'info',
-  low: 'success',
-};
-
-const AlertGroupHeader: React.FC<AlertGroupHeaderProps> = ({
-  group,
-  isCollapsed,
-  onToggleCollapse,
-}) => {
-  const severityConfig = SEVERITY_COLORS[group.severity] || SEVERITY_COLORS.low;
-  const badgeVariant = SEVERITY_BADGE_VARIANTS[group.severity] || 'info';
-
-  return (
-    <button
-      onClick={onToggleCollapse}
-      className={`
-        w-full flex items-center justify-between p-3.5 rounded-lg border-2 transition-all
-        ${severityConfig}
-        hover:shadow-md cursor-pointer hover:scale-[1.01]
-      `}
-      aria-expanded={!isCollapsed}
-      aria-label={`${isCollapsed ? 'Expand' : 'Collapse'} ${group.title}`}
-    >
-      <div className="flex items-center gap-3 flex-1 min-w-0">
-        <div className="flex-shrink-0">
-          {isCollapsed ? (
-            <ChevronDown className="w-5 h-5" />
-          ) : (
-            <ChevronUp className="w-5 h-5" />
-          )}
-        </div>
-
-        <div className="text-left flex-1 min-w-0">
-          <h3 className="font-bold text-sm truncate">
-            {group.title}
-          </h3>
-          {group.type === 'similarity' && group.count > 1 && (
-            <p className="text-xs opacity-75 mt-0.5">
-              {group.alerts.length} alertas similares
-            </p>
-          )}
-        </div>
-      </div>
-
-      <div className="flex items-center gap-2 flex-shrink-0 ml-3">
-        {group.count > 1 && (
-          <div className="flex items-center gap-1.5 px-2.5 py-1 bg-white/60 backdrop-blur-sm rounded-lg border border-current/20 min-h-[1.625rem]">
-            <span className="text-xs font-bold leading-none">{group.count}</span>
-            <span className="text-xs opacity-75 leading-none">alertas</span>
-          </div>
-        )}
-
-        {group.severity && (
-          <Badge variant={badgeVariant} size="sm" className="font-bold px-2.5 py-1 min-h-[1.625rem]">
-            {group.severity.toUpperCase()}
-          </Badge>
-        )}
-      </div>
-    </button>
-  );
-};
-
-export default AlertGroupHeader;

frontend/src/components/domain/dashboard/AlertSnoozeMenu.tsx

@@ -1,118 +0,0 @@
-import React, { useState } from 'react';
-import { Clock, X } from 'lucide-react';
-import { Button } from '../../ui/Button';
-
-export interface AlertSnoozeMenuProps {
-  onSnooze: (duration: '15min' | '1hr' | '4hr' | 'tomorrow' | number) => void;
-  onCancel: () => void;
-}
-
-const PRESET_DURATIONS = [
-  { value: '15min' as const, label: '15 minutos', icon: '⏰' },
-  { value: '1hr' as const, label: '1 hora', icon: '🕐' },
-  { value: '4hr' as const, label: '4 horas', icon: '🕓' },
-  { value: 'tomorrow' as const, label: 'Mañana (9 AM)', icon: '☀️' },
-];
-
-const AlertSnoozeMenu: React.FC<AlertSnoozeMenuProps> = ({
-  onSnooze,
-  onCancel,
-}) => {
-  const [showCustom, setShowCustom] = useState(false);
-  const [customHours, setCustomHours] = useState(1);
-
-  const handleCustomSnooze = () => {
-    const milliseconds = customHours * 60 * 60 * 1000;
-    onSnooze(milliseconds);
-  };
-
-  return (
-    <div className="bg-[var(--bg-primary)] border border-[var(--border-primary)] rounded-lg shadow-lg p-3 min-w-[240px]">
-      {/* Header */}
-      <div className="flex items-center justify-between mb-3 pb-2 border-b border-[var(--border-primary)]">
-        <div className="flex items-center gap-2">
-          <Clock className="w-4 h-4 text-[var(--color-primary)]" />
-          <span className="text-sm font-semibold text-[var(--text-primary)]">
-            Posponer hasta
-          </span>
-        </div>
-        <button
-          onClick={onCancel}
-          className="p-1 hover:bg-[var(--bg-secondary)] rounded transition-colors"
-        >
-          <X className="w-4 h-4 text-[var(--text-secondary)]" />
-        </button>
-      </div>
-
-      {!showCustom ? (
-        <>
-          {/* Preset Options */}
-          <div className="space-y-1 mb-2">
-            {PRESET_DURATIONS.map((preset) => (
-              <button
-                key={preset.value}
-                onClick={() => onSnooze(preset.value)}
-                className="w-full px-3 py-2 text-left text-sm rounded-lg hover:bg-[var(--bg-secondary)] transition-colors flex items-center gap-2 text-[var(--text-primary)]"
-              >
-                <span className="text-lg">{preset.icon}</span>
-                <span>{preset.label}</span>
-              </button>
-            ))}
-          </div>
-
-          {/* Custom Option */}
-          <button
-            onClick={() => setShowCustom(true)}
-            className="w-full px-3 py-2 text-left text-sm rounded-lg border border-dashed border-[var(--border-primary)] hover:bg-[var(--bg-secondary)] transition-colors text-[var(--text-secondary)]"
-          >
-            ⚙️ Personalizado...
-          </button>
-        </>
-      ) : (
-        <>
-          {/* Custom Time Input */}
-          <div className="space-y-3">
-            <div>
-              <label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">
-                Número de horas
-              </label>
-              <input
-                type="number"
-                min="1"
-                max="168"
-                value={customHours}
-                onChange={(e) => setCustomHours(parseInt(e.target.value) || 1)}
-                className="w-full px-3 py-2 border border-[var(--border-primary)] rounded-lg text-sm bg-[var(--bg-primary)] text-[var(--text-primary)]"
-                autoFocus
-              />
-              <p className="text-xs text-[var(--text-tertiary)] mt-1">
-                Máximo 168 horas (7 días)
-              </p>
-            </div>
-
-            <div className="flex gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setShowCustom(false)}
-                className="flex-1"
-              >
-                Atrás
-              </Button>
-              <Button
-                variant="primary"
-                size="sm"
-                onClick={handleCustomSnooze}
-                className="flex-1"
-              >
-                Confirmar
-              </Button>
-            </div>
-          </div>
-        </>
-      )}
-    </div>
-  );
-};
-
-export default AlertSnoozeMenu;

frontend/src/components/domain/dashboard/AlertTrends.tsx

@@ -1,179 +0,0 @@
-import React from 'react';
-import { TrendingUp, Clock, AlertTriangle, BarChart3 } from 'lucide-react';
-import { Badge } from '../../ui/Badge';
-import type { AlertAnalytics } from '../../../hooks/useAlertAnalytics';
-
-export interface AlertTrendsProps {
-  analytics: AlertAnalytics | undefined;
-  className?: string;
-}
-
-const AlertTrends: React.FC<AlertTrendsProps> = ({ analytics, className }) => {
-  // Debug logging
-  console.log('[AlertTrends] Received analytics:', analytics);
-  console.log('[AlertTrends] Has trends?', analytics?.trends);
-  console.log('[AlertTrends] Is array?', Array.isArray(analytics?.trends));
-
-  // Safety check: handle undefined or missing analytics data
-  if (!analytics || !analytics.trends || !Array.isArray(analytics.trends)) {
-    console.log('[AlertTrends] Showing loading state');
-    return (
-      <div className={`bg-[var(--bg-secondary)] rounded-lg p-4 border border-[var(--border-primary)] ${className}`}>
-        <div className="flex items-center justify-center h-32 text-[var(--text-secondary)]">
-          Cargando analíticas...
-        </div>
-      </div>
-    );
-  }
-
-  console.log('[AlertTrends] Rendering analytics with', analytics.trends.length, 'trends');
-
-  // Ensure we have valid trend data
-  const validTrends = analytics.trends.filter(t => t && typeof t.count === 'number');
-  const maxCount = validTrends.length > 0 ? Math.max(...validTrends.map(t => t.count), 1) : 1;
-
-  const formatDate = (dateStr: string) => {
-    const date = new Date(dateStr);
-    const today = new Date();
-    const yesterday = new Date(today);
-    yesterday.setDate(yesterday.getDate() - 1);
-
-    if (date.toDateString() === today.toDateString()) {
-      return 'Hoy';
-    }
-    if (date.toDateString() === yesterday.toDateString()) {
-      return 'Ayer';
-    }
-    return date.toLocaleDateString('es-ES', { weekday: 'short', day: 'numeric' });
-  };
-
-  return (
-    <div className={`bg-[var(--bg-secondary)] rounded-lg p-4 border border-[var(--border-primary)] ${className}`}>
-      {/* Header */}
-      <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center gap-2">
-          <BarChart3 className="w-5 h-5 text-[var(--color-primary)]" />
-          <h3 className="font-semibold text-[var(--text-primary)]">
-            Tendencias (7 días)
-          </h3>
-        </div>
-        <Badge variant="secondary" size="sm">
-          {analytics.totalAlerts} total
-        </Badge>
-      </div>
-
-      {/* Chart */}
-      <div className="mb-4">
-        <div className="flex items-end justify-between gap-1 h-32">
-          {analytics.trends.map((trend, index) => {
-            const heightPercentage = maxCount > 0 ? (trend.count / maxCount) * 100 : 0;
-
-            return (
-              <div
-                key={trend.date}
-                className="flex-1 flex flex-col items-center gap-1"
-              >
-                <div className="w-full flex flex-col justify-end" style={{ height: '100px' }}>
-                  {/* Bar */}
-                  <div
-                    className="w-full bg-gradient-to-t from-[var(--color-primary)] to-[var(--color-primary)]/60 rounded-t transition-all hover:opacity-80 cursor-pointer relative group"
-                    style={{ height: `${heightPercentage}%`, minHeight: trend.count > 0 ? '4px' : '0' }}
-                    title={`${trend.count} alertas`}
-                  >
-                    {/* Tooltip on hover */}
-                    <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
-                      <div className="bg-[var(--text-primary)] text-white text-xs rounded px-2 py-1 whitespace-nowrap">
-                        {trend.count} alertas
-                        <div className="text-[10px] opacity-75">
-                          🔴 {trend.urgentCount} • 🟠 {trend.highCount} • 🔵 {trend.mediumCount} • 🟢 {trend.lowCount}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                {/* Label */}
-                <span className="text-[10px] text-[var(--text-secondary)] text-center">
-                  {formatDate(trend.date)}
-                </span>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-
-      {/* Stats Grid */}
-      <div className="grid grid-cols-2 gap-3 pt-3 border-t border-[var(--border-primary)]">
-        {/* Average Response Time */}
-        <div className="flex items-center gap-2">
-          <div className="p-2 bg-blue-500/10 rounded">
-            <Clock className="w-4 h-4 text-blue-500" />
-          </div>
-          <div>
-            <div className="text-xs text-[var(--text-secondary)]">Respuesta promedio</div>
-            <div className="text-sm font-semibold text-[var(--text-primary)]">
-              {analytics.averageResponseTime > 0 ? `${analytics.averageResponseTime} min` : 'N/A'}
-            </div>
-          </div>
-        </div>
-
-        {/* Daily Average */}
-        <div className="flex items-center gap-2">
-          <div className="p-2 bg-purple-500/10 rounded">
-            <TrendingUp className="w-4 h-4 text-purple-500" />
-          </div>
-          <div>
-            <div className="text-xs text-[var(--text-secondary)]">Promedio diario</div>
-            <div className="text-sm font-semibold text-[var(--text-primary)]">
-              {analytics.predictedDailyAverage} alertas
-            </div>
-          </div>
-        </div>
-
-        {/* Resolution Rate */}
-        <div className="flex items-center gap-2">
-          <div className="p-2 bg-green-500/10 rounded">
-            <BarChart3 className="w-4 h-4 text-green-500" />
-          </div>
-          <div>
-            <div className="text-xs text-[var(--text-secondary)]">Tasa de resolución</div>
-            <div className="text-sm font-semibold text-[var(--text-primary)]">
-              {analytics.resolutionRate}%
-            </div>
-          </div>
-        </div>
-
-        {/* Busiest Day */}
-        <div className="flex items-center gap-2">
-          <div className="p-2 bg-orange-500/10 rounded">
-            <AlertTriangle className="w-4 h-4 text-orange-500" />
-          </div>
-          <div>
-            <div className="text-xs text-[var(--text-secondary)]">Día más activo</div>
-            <div className="text-sm font-semibold text-[var(--text-primary)]">
-              {analytics.busiestDay}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Top Categories */}
-      {analytics.topCategories.length > 0 && (
-        <div className="mt-3 pt-3 border-t border-[var(--border-primary)]">
-          <div className="text-xs font-semibold text-[var(--text-secondary)] mb-2">
-            Categorías principales
-          </div>
-          <div className="flex flex-wrap gap-2">
-            {analytics.topCategories.map((cat) => (
-              <Badge key={cat.category} variant="secondary" size="sm">
-                {cat.count} ({cat.percentage}%)
-              </Badge>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default AlertTrends;

frontend/src/components/domain/dashboard/AutoActionCountdownComponent.tsx

@@ -0,0 +1,286 @@
+// ================================================================
+// frontend/src/components/domain/dashboard/AutoActionCountdownComponent.tsx
+// ================================================================
+/**
+ * Auto Action Countdown Component
+ *
+ * Displays countdown timer for ESCALATION type alerts where AI will
+ * automatically take action unless user intervenes.
+ *
+ * Design Philosophy:
+ * - High urgency visual design
+ * - Clear countdown timer
+ * - One-click cancel button
+ * - Shows what action will be taken
+ */
+
+import React, { useState, useEffect } from 'react';
+import { AlertTriangle, Clock, XCircle, CheckCircle } from 'lucide-react';
+import { Button } from '../../ui/Button';
+import { Badge } from '../../ui/Badge';
+import { useTranslation } from 'react-i18next';
+
+export interface AutoActionCountdownProps {
+  actionDescription: string;
+  countdownSeconds: number;
+  onCancel: () => Promise<void>;
+  financialImpactEur?: number;
+  alertId: string;
+  className?: string;
+}
+
+export function AutoActionCountdownComponent({
+  actionDescription,
+  countdownSeconds,
+  onCancel,
+  financialImpactEur,
+  alertId,
+  className = '',
+}: AutoActionCountdownProps) {
+  const { t } = useTranslation('alerts');
+  const [timeRemaining, setTimeRemaining] = useState(countdownSeconds);
+  const [isCancelling, setIsCancelling] = useState(false);
+  const [isCancelled, setIsCancelled] = useState(false);
+
+  useEffect(() => {
+    if (timeRemaining <= 0 || isCancelled) return;
+
+    const timer = setInterval(() => {
+      setTimeRemaining((prev) => {
+        if (prev <= 1) {
+          clearInterval(timer);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [timeRemaining, isCancelled]);
+
+  const handleCancel = async () => {
+    setIsCancelling(true);
+    try {
+      await onCancel();
+      setIsCancelled(true);
+    } catch (error) {
+      console.error('Failed to cancel auto-action:', error);
+    } finally {
+      setIsCancelling(false);
+    }
+  };
+
+  const formatTime = (seconds: number): string => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  const getUrgencyLevel = (seconds: number): 'critical' | 'warning' | 'info' => {
+    if (seconds <= 60) return 'critical';
+    if (seconds <= 300) return 'warning';
+    return 'info';
+  };
+
+  const urgency = getUrgencyLevel(timeRemaining);
+  const progressPercentage = ((countdownSeconds - timeRemaining) / countdownSeconds) * 100;
+
+  // Cancelled state
+  if (isCancelled) {
+    return (
+      <div
+        className={`rounded-lg p-4 border ${className}`}
+        style={{
+          backgroundColor: 'var(--color-success-50)',
+          borderColor: 'var(--color-success-300)',
+        }}
+      >
+        <div className="flex items-center gap-3">
+          <CheckCircle className="w-6 h-6 flex-shrink-0" style={{ color: 'var(--color-success-600)' }} />
+          <div className="flex-1">
+            <h4 className="font-semibold" style={{ color: 'var(--color-success-700)' }}>
+              {t('auto_action.cancelled_title', 'Auto-action Cancelled')}
+            </h4>
+            <p className="text-sm mt-1" style={{ color: 'var(--color-success-600)' }}>
+              {t('auto_action.cancelled_message', 'The automatic action has been prevented. You can now handle this manually.')}
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Action completed (countdown reached 0)
+  if (timeRemaining <= 0) {
+    return (
+      <div
+        className={`rounded-lg p-4 border ${className}`}
+        style={{
+          backgroundColor: 'var(--bg-secondary)',
+          borderColor: 'var(--border-primary)',
+        }}
+      >
+        <div className="flex items-center gap-3">
+          <Clock className="w-6 h-6 flex-shrink-0" style={{ color: 'var(--text-tertiary)' }} />
+          <div className="flex-1">
+            <h4 className="font-semibold" style={{ color: 'var(--text-primary)' }}>
+              {t('auto_action.completed_title', 'Auto-action Executed')}
+            </h4>
+            <p className="text-sm mt-1" style={{ color: 'var(--text-secondary)' }}>
+              {actionDescription}
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Active countdown
+  return (
+    <div
+      className={`rounded-lg p-4 border-2 shadow-lg ${className}`}
+      style={{
+        backgroundColor:
+          urgency === 'critical'
+            ? 'var(--color-error-50)'
+            : urgency === 'warning'
+            ? 'var(--color-warning-50)'
+            : 'var(--color-info-50)',
+        borderColor:
+          urgency === 'critical'
+            ? 'var(--color-error-400)'
+            : urgency === 'warning'
+            ? 'var(--color-warning-400)'
+            : 'var(--color-info-400)',
+      }}
+    >
+      {/* Header */}
+      <div className="flex items-start justify-between gap-3 mb-3">
+        <div className="flex items-center gap-3 flex-1">
+          <div
+            className={`p-2 rounded-full ${
+              urgency === 'critical' ? 'animate-pulse' : ''
+            }`}
+            style={{
+              backgroundColor:
+                urgency === 'critical'
+                  ? 'var(--color-error-100)'
+                  : urgency === 'warning'
+                  ? 'var(--color-warning-100)'
+                  : 'var(--color-info-100)',
+            }}
+          >
+            <AlertTriangle
+              className="w-5 h-5"
+              style={{
+                color:
+                  urgency === 'critical'
+                    ? 'var(--color-error-600)'
+                    : urgency === 'warning'
+                    ? 'var(--color-warning-600)'
+                    : 'var(--color-info-600)',
+              }}
+            />
+          </div>
+          <div className="flex-1">
+            <div className="flex items-center gap-2 mb-1">
+              <h4 className="font-bold" style={{ color: 'var(--text-primary)' }}>
+                {t('auto_action.title', 'Auto-action Pending')}
+              </h4>
+              <Badge
+                variant={urgency === 'critical' ? 'error' : urgency === 'warning' ? 'warning' : 'info'}
+                size="sm"
+              >
+                {urgency === 'critical'
+                  ? t('auto_action.urgency.critical', 'URGENT')
+                  : urgency === 'warning'
+                  ? t('auto_action.urgency.warning', 'SOON')
+                  : t('auto_action.urgency.info', 'SCHEDULED')}
+              </Badge>
+            </div>
+            <p className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>
+              {actionDescription}
+            </p>
+          </div>
+        </div>
+
+        {/* Countdown Timer */}
+        <div className="text-center flex-shrink-0">
+          <div
+            className="text-2xl font-bold tabular-nums"
+            style={{
+              color:
+                urgency === 'critical'
+                  ? 'var(--color-error-600)'
+                  : urgency === 'warning'
+                  ? 'var(--color-warning-600)'
+                  : 'var(--color-info-600)',
+            }}
+          >
+            {formatTime(timeRemaining)}
+          </div>
+          <div className="text-xs font-medium" style={{ color: 'var(--text-tertiary)' }}>
+            {t('auto_action.remaining', 'remaining')}
+          </div>
+        </div>
+      </div>
+
+      {/* Progress Bar */}
+      <div className="mb-3 rounded-full overflow-hidden" style={{ backgroundColor: 'var(--bg-tertiary)', height: '6px' }}>
+        <div
+          className="h-full transition-all duration-1000 ease-linear"
+          style={{
+            width: `${progressPercentage}%`,
+            backgroundColor:
+              urgency === 'critical'
+                ? 'var(--color-error-500)'
+                : urgency === 'warning'
+                ? 'var(--color-warning-500)'
+                : 'var(--color-info-500)',
+          }}
+        />
+      </div>
+
+      {/* Financial Impact & Cancel Button */}
+      <div className="flex items-center justify-between gap-3">
+        {financialImpactEur !== undefined && financialImpactEur > 0 && (
+          <div className="text-sm">
+            <span className="font-medium" style={{ color: 'var(--text-secondary)' }}>
+              {t('auto_action.financial_impact', 'Impact:')}
+            </span>{' '}
+            <span className="font-bold" style={{ color: 'var(--text-primary)' }}>
+              €{financialImpactEur.toFixed(2)}
+            </span>
+          </div>
+        )}
+
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleCancel}
+          disabled={isCancelling}
+          className="ml-auto bg-white/80 hover:bg-white flex items-center gap-2"
+        >
+          <XCircle className="w-4 h-4" />
+          {isCancelling
+            ? t('auto_action.cancelling', 'Cancelling...')
+            : t('auto_action.cancel_button', 'Cancel Auto-action')}
+        </Button>
+      </div>
+
+      {/* Help Text */}
+      <div
+        className="mt-3 text-xs p-2 rounded"
+        style={{
+          backgroundColor: 'var(--bg-primary)',
+          color: 'var(--text-tertiary)',
+        }}
+      >
+        {t(
+          'auto_action.help_text',
+          'AI will automatically execute this action when the timer expires. Click "Cancel" to prevent it and handle manually.'
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/domain/dashboard/ConfigurationProgressWidget.tsx

@@ -1,298 +0,0 @@
-import React, { useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import { useCurrentTenant } from '../../../stores/tenant.store';
-import { useIngredients } from '../../../api/hooks/inventory';
-import { useSuppliers } from '../../../api/hooks/suppliers';
-import { useRecipes } from '../../../api/hooks/recipes';
-import { useQualityTemplates } from '../../../api/hooks/qualityTemplates';
-import { CheckCircle2, Circle, AlertCircle, ChevronRight, Package, Users, BookOpen, Shield } from 'lucide-react';
-
-interface ConfigurationSection {
-  id: string;
-  title: string;
-  icon: React.ElementType;
-  path: string;
-  count: number;
-  minimum: number;
-  recommended: number;
-  isOptional?: boolean;
-  isComplete: boolean;
-  nextAction?: string;
-}
-
-export const ConfigurationProgressWidget: React.FC = () => {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const currentTenant = useCurrentTenant();
-  const tenantId = currentTenant?.id || '';
-
-  // Fetch configuration data
-  const { data: ingredients = [], isLoading: loadingIngredients } = useIngredients(tenantId, {}, { enabled: !!tenantId });
-  const { data: suppliersData, isLoading: loadingSuppliers } = useSuppliers(tenantId, { enabled: !!tenantId });
-  const suppliers = suppliersData?.suppliers || [];
-  const { data: recipesData, isLoading: loadingRecipes } = useRecipes(tenantId, { enabled: !!tenantId });
-  const recipes = recipesData?.recipes || [];
-  const { data: qualityData, isLoading: loadingQuality } = useQualityTemplates(tenantId, { enabled: !!tenantId });
-  const qualityTemplates = qualityData?.templates || [];
-
-  const isLoading = loadingIngredients || loadingSuppliers || loadingRecipes || loadingQuality;
-
-  // Calculate configuration sections
-  const sections: ConfigurationSection[] = useMemo(() => [
-    {
-      id: 'inventory',
-      title: t('dashboard:config.inventory', 'Inventory'),
-      icon: Package,
-      path: '/app/operations/inventory',
-      count: ingredients.length,
-      minimum: 3,
-      recommended: 10,
-      isComplete: ingredients.length >= 3,
-      nextAction: ingredients.length < 3 ? t('dashboard:config.add_ingredients', 'Add at least {{count}} ingredients', { count: 3 - ingredients.length }) : undefined
-    },
-    {
-      id: 'suppliers',
-      title: t('dashboard:config.suppliers', 'Suppliers'),
-      icon: Users,
-      path: '/app/operations/suppliers',
-      count: suppliers.length,
-      minimum: 1,
-      recommended: 3,
-      isComplete: suppliers.length >= 1,
-      nextAction: suppliers.length < 1 ? t('dashboard:config.add_supplier', 'Add your first supplier') : undefined
-    },
-    {
-      id: 'recipes',
-      title: t('dashboard:config.recipes', 'Recipes'),
-      icon: BookOpen,
-      path: '/app/operations/recipes',
-      count: recipes.length,
-      minimum: 1,
-      recommended: 3,
-      isComplete: recipes.length >= 1,
-      nextAction: recipes.length < 1 ? t('dashboard:config.add_recipe', 'Create your first recipe') : undefined
-    },
-    {
-      id: 'quality',
-      title: t('dashboard:config.quality', 'Quality Standards'),
-      icon: Shield,
-      path: '/app/operations/production/quality',
-      count: qualityTemplates.length,
-      minimum: 0,
-      recommended: 2,
-      isOptional: true,
-      isComplete: true, // Optional, so always "complete"
-      nextAction: qualityTemplates.length < 2 ? t('dashboard:config.add_quality', 'Add quality checks (optional)') : undefined
-    }
-  ], [ingredients.length, suppliers.length, recipes.length, qualityTemplates.length, t]);
-
-  // Calculate overall progress
-  const { completedSections, totalSections, progressPercentage, nextIncompleteSection } = useMemo(() => {
-    const requiredSections = sections.filter(s => !s.isOptional);
-    const completed = requiredSections.filter(s => s.isComplete).length;
-    const total = requiredSections.length;
-    const percentage = Math.round((completed / total) * 100);
-    const nextIncomplete = sections.find(s => !s.isComplete && !s.isOptional);
-
-    return {
-      completedSections: completed,
-      totalSections: total,
-      progressPercentage: percentage,
-      nextIncompleteSection: nextIncomplete
-    };
-  }, [sections]);
-
-  const isFullyConfigured = progressPercentage === 100;
-
-  // Determine unlocked features
-  const unlockedFeatures = useMemo(() => {
-    const features: string[] = [];
-    if (ingredients.length >= 3) features.push(t('dashboard:config.features.inventory_tracking', 'Inventory Tracking'));
-    if (suppliers.length >= 1 && ingredients.length >= 3) features.push(t('dashboard:config.features.purchase_orders', 'Purchase Orders'));
-    if (recipes.length >= 1 && ingredients.length >= 3) features.push(t('dashboard:config.features.production_planning', 'Production Planning'));
-    if (recipes.length >= 1 && ingredients.length >= 3 && suppliers.length >= 1) features.push(t('dashboard:config.features.cost_analysis', 'Cost Analysis'));
-    return features;
-  }, [ingredients.length, suppliers.length, recipes.length, t]);
-
-  if (isLoading) {
-    return (
-      <div className="bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded-lg p-6">
-        <div className="flex items-center gap-3">
-          <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-[var(--color-primary)]"></div>
-          <span className="text-sm text-[var(--text-secondary)]">{t('common:loading', 'Loading configuration...')}</span>
-        </div>
-      </div>
-    );
-  }
-
-  // Don't show widget if fully configured
-  if (isFullyConfigured) {
-    return null;
-  }
-
-  return (
-    <div className="bg-gradient-to-br from-[var(--bg-primary)] to-[var(--bg-secondary)] border-2 border-[var(--color-primary)]/20 rounded-xl shadow-lg overflow-hidden">
-      {/* Header */}
-      <div className="p-6 pb-4 border-b border-[var(--border-secondary)]">
-        <div className="flex items-start justify-between mb-3">
-          <div className="flex items-center gap-3">
-            <div className="w-10 h-10 rounded-full bg-[var(--color-primary)]/10 flex items-center justify-center">
-              <AlertCircle className="w-5 h-5 text-[var(--color-primary)]" />
-            </div>
-            <div>
-              <h3 className="text-lg font-semibold text-[var(--text-primary)]">
-                🏗️ {t('dashboard:config.title', 'Complete Your Bakery Setup')}
-              </h3>
-              <p className="text-sm text-[var(--text-secondary)] mt-0.5">
-                {t('dashboard:config.subtitle', 'Configure essential features to get started')}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        {/* Progress Bar */}
-        <div className="mt-4">
-          <div className="flex items-center justify-between text-sm mb-2">
-            <span className="font-medium text-[var(--text-primary)]">
-              {completedSections}/{totalSections} {t('dashboard:config.sections_complete', 'sections complete')}
-            </span>
-            <span className="text-[var(--color-primary)] font-bold">{progressPercentage}%</span>
-          </div>
-          <div className="w-full h-2.5 bg-[var(--bg-tertiary)] rounded-full overflow-hidden">
-            <div
-              className="h-full bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-success)] transition-all duration-500 ease-out"
-              style={{ width: `${progressPercentage}%` }}
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* Sections List */}
-      <div className="p-6 pt-4 space-y-3">
-        {sections.map((section) => {
-          const Icon = section.icon;
-          const meetsRecommended = section.count >= section.recommended;
-
-          return (
-            <button
-              key={section.id}
-              onClick={() => navigate(section.path)}
-              className={`w-full p-4 rounded-lg border-2 transition-all duration-200 text-left group ${
-                section.isComplete
-                  ? 'border-[var(--color-success)]/30 bg-[var(--color-success)]/5 hover:bg-[var(--color-success)]/10'
-                  : 'border-[var(--border-secondary)] hover:border-[var(--color-primary)] hover:bg-[var(--bg-secondary)]'
-              }`}
-            >
-              <div className="flex items-center gap-4">
-                {/* Status Icon */}
-                <div className={`flex-shrink-0 ${
-                  section.isComplete
-                    ? 'text-[var(--color-success)]'
-                    : 'text-[var(--text-tertiary)]'
-                }`}>
-                  {section.isComplete ? (
-                    <CheckCircle2 className="w-5 h-5" />
-                  ) : (
-                    <Circle className="w-5 h-5" />
-                  )}
-                </div>
-
-                {/* Section Icon */}
-                <div className={`w-10 h-10 rounded-full flex items-center justify-center ${
-                  section.isComplete
-                    ? 'bg-[var(--color-success)]/10 text-[var(--color-success)]'
-                    : 'bg-[var(--bg-tertiary)] text-[var(--text-secondary)]'
-                }`}>
-                  <Icon className="w-5 h-5" />
-                </div>
-
-                {/* Content */}
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2 mb-1">
-                    <h4 className="font-semibold text-[var(--text-primary)]">{section.title}</h4>
-                    {section.isOptional && (
-                      <span className="text-xs px-2 py-0.5 bg-[var(--bg-tertiary)] text-[var(--text-tertiary)] rounded-full">
-                        {t('common:optional', 'Optional')}
-                      </span>
-                    )}
-                  </div>
-
-                  <div className="flex items-center gap-3 text-sm">
-                    <span className={`font-medium ${
-                      section.isComplete
-                        ? 'text-[var(--color-success)]'
-                        : 'text-[var(--text-secondary)]'
-                    }`}>
-                      {section.count} {t('dashboard:config.added', 'added')}
-                    </span>
-
-                    {!section.isComplete && section.nextAction && (
-                      <span className="text-[var(--text-tertiary)]">
-                        • {section.nextAction}
-                      </span>
-                    )}
-
-                    {section.isComplete && !meetsRecommended && (
-                      <span className="text-[var(--text-tertiary)]">
-                        • {section.recommended} {t('dashboard:config.recommended', 'recommended')}
-                      </span>
-                    )}
-                  </div>
-                </div>
-
-                {/* Chevron */}
-                <ChevronRight className="w-5 h-5 text-[var(--text-tertiary)] group-hover:text-[var(--color-primary)] transition-colors flex-shrink-0" />
-              </div>
-            </button>
-          );
-        })}
-      </div>
-
-      {/* Next Action / Unlocked Features */}
-      <div className="px-6 pb-6">
-        {nextIncompleteSection ? (
-          <div className="p-4 bg-[var(--color-warning)]/10 border border-[var(--color-warning)]/30 rounded-lg">
-            <div className="flex items-start gap-3">
-              <AlertCircle className="w-5 h-5 text-[var(--color-warning)] flex-shrink-0 mt-0.5" />
-              <div className="flex-1">
-                <p className="text-sm font-medium text-[var(--text-primary)] mb-1">
-                  👉 {t('dashboard:config.next_step', 'Next Step')}
-                </p>
-                <p className="text-sm text-[var(--text-secondary)] mb-3">
-                  {nextIncompleteSection.nextAction}
-                </p>
-                <button
-                  onClick={() => navigate(nextIncompleteSection.path)}
-                  className="px-4 py-2 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] transition-colors text-sm font-medium inline-flex items-center gap-2"
-                >
-                  {t('dashboard:config.configure', 'Configure')} {nextIncompleteSection.title}
-                  <ChevronRight className="w-4 h-4" />
-                </button>
-              </div>
-            </div>
-          </div>
-        ) : unlockedFeatures.length > 0 && (
-          <div className="p-4 bg-[var(--color-success)]/10 border border-[var(--color-success)]/30 rounded-lg">
-            <div className="flex items-start gap-3">
-              <CheckCircle2 className="w-5 h-5 text-[var(--color-success)] flex-shrink-0 mt-0.5" />
-              <div>
-                <p className="text-sm font-medium text-[var(--text-primary)] mb-2">
-                  🎉 {t('dashboard:config.features_unlocked', 'Features Unlocked!')}
-                </p>
-                <ul className="space-y-1">
-                  {unlockedFeatures.map((feature, idx) => (
-                    <li key={idx} className="text-sm text-[var(--text-secondary)] flex items-center gap-2">
-                      <CheckCircle2 className="w-3 h-3 text-[var(--color-success)]" />
-                      {feature}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};

frontend/src/components/domain/dashboard/PriorityBadge.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { cn } from '../../../lib/utils';
+
+interface PriorityBadgeProps {
+  score: number; // 0-100
+  level: 'critical' | 'important' | 'standard' | 'info';
+  className?: string;
+  showScore?: boolean;
+}
+
+/**
+ * PriorityBadge - Visual indicator for alert priority
+ *
+ * Priority Levels:
+ * - Critical (90-100): Red with pulse animation
+ * - Important (70-89): Orange/Yellow
+ * - Standard (50-69): Blue
+ * - Info (0-49): Gray
+ */
+export const PriorityBadge: React.FC<PriorityBadgeProps> = ({
+  score,
+  level,
+  className,
+  showScore = true,
+}) => {
+  const getStyles = () => {
+    switch (level) {
+      case 'critical':
+        return {
+          bg: 'bg-red-100 dark:bg-red-900/30',
+          text: 'text-red-800 dark:text-red-200',
+          border: 'border-red-300 dark:border-red-700',
+          pulse: 'animate-pulse',
+        };
+      case 'important':
+        return {
+          bg: 'bg-orange-100 dark:bg-orange-900/30',
+          text: 'text-orange-800 dark:text-orange-200',
+          border: 'border-orange-300 dark:border-orange-700',
+          pulse: '',
+        };
+      case 'standard':
+        return {
+          bg: 'bg-blue-100 dark:bg-blue-900/30',
+          text: 'text-blue-800 dark:text-blue-200',
+          border: 'border-blue-300 dark:border-blue-700',
+          pulse: '',
+        };
+      case 'info':
+      default:
+        return {
+          bg: 'bg-gray-100 dark:bg-gray-800',
+          text: 'text-gray-700 dark:text-gray-300',
+          border: 'border-gray-300 dark:border-gray-600',
+          pulse: '',
+        };
+    }
+  };
+
+  const styles = getStyles();
+  const displayText = level.charAt(0).toUpperCase() + level.slice(1);
+
+  return (
+    <div
+      className={cn(
+        'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border',
+        styles.bg,
+        styles.text,
+        styles.border,
+        styles.pulse,
+        className
+      )}
+      title={`Puntuación de prioridad: ${score}/100`}
+    >
+      <span>{displayText}</span>
+      {showScore && (
+        <span className="font-bold">{score}</span>
+      )}
+    </div>
+  );
+};
+
+export default PriorityBadge;

frontend/src/components/domain/dashboard/PriorityScoreExplainerModal.tsx

@@ -0,0 +1,358 @@
+// ================================================================
+// frontend/src/components/domain/dashboard/PriorityScoreExplainerModal.tsx
+// ================================================================
+/**
+ * Priority Score Explainer Modal
+ *
+ * Educational modal explaining the 0-100 priority scoring algorithm.
+ * Builds trust by showing transparency into AI decision-making.
+ *
+ * Shows:
+ * - Overall priority score breakdown
+ * - 4 weighted components (Business Impact 40%, Urgency 30%, Agency 20%, Confidence 10%)
+ * - Example calculations
+ * - Visual progress bars for each component
+ */
+
+import React from 'react';
+import { X, TrendingUp, DollarSign, Clock, Target, Brain, Info } from 'lucide-react';
+import { Button } from '../../ui/Button';
+import { Badge } from '../../ui/Badge';
+import { useTranslation } from 'react-i18next';
+
+export interface PriorityScoreExplainerModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  exampleScore?: number;
+  exampleBreakdown?: {
+    businessImpact: number;
+    urgency: number;
+    agency: number;
+    confidence: number;
+  };
+}
+
+interface ScoreComponent {
+  name: string;
+  icon: typeof DollarSign;
+  weight: number;
+  description: string;
+  examples: string[];
+  color: string;
+}
+
+export function PriorityScoreExplainerModal({
+  isOpen,
+  onClose,
+  exampleScore,
+  exampleBreakdown,
+}: PriorityScoreExplainerModalProps) {
+  const { t } = useTranslation('alerts');
+
+  if (!isOpen) return null;
+
+  const components: ScoreComponent[] = [
+    {
+      name: t('priority_explainer.business_impact.name', 'Business Impact'),
+      icon: DollarSign,
+      weight: 40,
+      description: t(
+        'priority_explainer.business_impact.description',
+        'Financial consequences, affected orders, customer satisfaction'
+      ),
+      examples: [
+        t('priority_explainer.business_impact.example1', '€500 in potential revenue at risk'),
+        t('priority_explainer.business_impact.example2', '10 customer orders affected'),
+        t('priority_explainer.business_impact.example3', 'High customer satisfaction impact'),
+      ],
+      color: 'var(--color-error-500)',
+    },
+    {
+      name: t('priority_explainer.urgency.name', 'Urgency'),
+      icon: Clock,
+      weight: 30,
+      description: t(
+        'priority_explainer.urgency.description',
+        'Time sensitivity, deadlines, escalation potential'
+      ),
+      examples: [
+        t('priority_explainer.urgency.example1', 'Deadline in 2 hours'),
+        t('priority_explainer.urgency.example2', 'Stockout imminent (4 hours)'),
+        t('priority_explainer.urgency.example3', 'Production window closing soon'),
+      ],
+      color: 'var(--color-warning-500)',
+    },
+    {
+      name: t('priority_explainer.agency.name', 'User Agency'),
+      icon: Target,
+      weight: 20,
+      description: t(
+        'priority_explainer.agency.description',
+        'Can you take action? Do you have control over the outcome?'
+      ),
+      examples: [
+        t('priority_explainer.agency.example1', 'Requires approval from you'),
+        t('priority_explainer.agency.example2', 'One-click action available'),
+        t('priority_explainer.agency.example3', 'Decision needed within your authority'),
+      ],
+      color: 'var(--color-primary-500)',
+    },
+    {
+      name: t('priority_explainer.confidence.name', 'AI Confidence'),
+      icon: Brain,
+      weight: 10,
+      description: t(
+        'priority_explainer.confidence.description',
+        "How certain is the AI about this alert's validity?"
+      ),
+      examples: [
+        t('priority_explainer.confidence.example1', 'Based on historical patterns (95% match)'),
+        t('priority_explainer.confidence.example2', 'Data quality: High'),
+        t('priority_explainer.confidence.example3', 'Prediction accuracy validated'),
+      ],
+      color: 'var(--color-info-500)',
+    },
+  ];
+
+  const calculateExampleScore = (breakdown?: typeof exampleBreakdown): number => {
+    if (!breakdown) return 75; // Default example
+
+    return (
+      (breakdown.businessImpact * 0.4) +
+      (breakdown.urgency * 0.3) +
+      (breakdown.agency * 0.2) +
+      (breakdown.confidence * 0.1)
+    );
+  };
+
+  const displayScore = exampleScore ?? calculateExampleScore(exampleBreakdown);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-in fade-in duration-200"
+      onClick={onClose}
+    >
+      <div
+        className="bg-[var(--bg-primary)] rounded-xl shadow-2xl max-w-3xl w-full max-h-[90vh] overflow-y-auto"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div
+          className="sticky top-0 z-10 flex items-center justify-between p-6 border-b"
+          style={{
+            backgroundColor: 'var(--bg-primary)',
+            borderColor: 'var(--border-primary)',
+          }}
+        >
+          <div className="flex items-center gap-3">
+            <div
+              className="p-2 rounded-lg"
+              style={{ backgroundColor: 'var(--color-primary-100)' }}
+            >
+              <TrendingUp className="w-6 h-6" style={{ color: 'var(--color-primary-600)' }} />
+            </div>
+            <div>
+              <h2 className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
+                {t('priority_explainer.title', 'Understanding Priority Scores')}
+              </h2>
+              <p className="text-sm mt-1" style={{ color: 'var(--text-secondary)' }}>
+                {t('priority_explainer.subtitle', 'How AI calculates what needs your attention first')}
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 rounded-lg hover:bg-[var(--bg-secondary)] transition-colors"
+            aria-label="Close"
+          >
+            <X className="w-5 h-5" style={{ color: 'var(--text-secondary)' }} />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="p-6 space-y-6">
+          {/* Overview */}
+          <div
+            className="rounded-lg p-5 border"
+            style={{
+              backgroundColor: 'var(--bg-secondary)',
+              borderColor: 'var(--border-primary)',
+            }}
+          >
+            <div className="flex items-start gap-3">
+              <Info className="w-5 h-5 mt-0.5 flex-shrink-0" style={{ color: 'var(--color-info)' }} />
+              <div>
+                <h3 className="font-semibold mb-2" style={{ color: 'var(--text-primary)' }}>
+                  {t('priority_explainer.overview.title', 'The Priority Score (0-100)')}
+                </h3>
+                <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+                  {t(
+                    'priority_explainer.overview.description',
+                    'Every alert receives a priority score from 0-100 based on four weighted components. This helps you focus on what truly matters for your bakery.'
+                  )}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Example Score */}
+          {exampleScore !== undefined && (
+            <div
+              className="rounded-lg p-5 border-2"
+              style={{
+                backgroundColor: 'var(--color-primary-50)',
+                borderColor: 'var(--color-primary-300)',
+              }}
+            >
+              <div className="text-center">
+                <div className="text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>
+                  {t('priority_explainer.example_alert', 'Example Alert Priority')}
+                </div>
+                <div className="flex items-center justify-center gap-3">
+                  <div className="text-5xl font-bold" style={{ color: 'var(--color-primary-600)' }}>
+                    {displayScore.toFixed(0)}
+                  </div>
+                  <Badge variant="primary" size="lg">
+                    {displayScore >= 90
+                      ? t('priority_explainer.level.critical', 'CRITICAL')
+                      : displayScore >= 70
+                      ? t('priority_explainer.level.important', 'IMPORTANT')
+                      : displayScore >= 50
+                      ? t('priority_explainer.level.standard', 'STANDARD')
+                      : t('priority_explainer.level.info', 'INFO')}
+                  </Badge>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Components Breakdown */}
+          <div>
+            <h3 className="text-lg font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
+              {t('priority_explainer.components_title', 'Score Components')}
+            </h3>
+            <div className="space-y-4">
+              {components.map((component) => {
+                const Icon = component.icon;
+                const componentValue = exampleBreakdown
+                  ? exampleBreakdown[
+                      component.name.toLowerCase().replace(/\s+/g, '') as keyof typeof exampleBreakdown
+                    ] || 75
+                  : 75;
+
+                return (
+                  <div
+                    key={component.name}
+                    className="rounded-lg p-4 border"
+                    style={{
+                      backgroundColor: 'var(--bg-secondary)',
+                      borderColor: 'var(--border-primary)',
+                    }}
+                  >
+                    {/* Component Header */}
+                    <div className="flex items-center justify-between mb-3">
+                      <div className="flex items-center gap-3">
+                        <div
+                          className="p-2 rounded-lg"
+                          style={{ backgroundColor: component.color + '20' }}
+                        >
+                          <Icon className="w-5 h-5" style={{ color: component.color }} />
+                        </div>
+                        <div>
+                          <h4 className="font-semibold" style={{ color: 'var(--text-primary)' }}>
+                            {component.name}
+                          </h4>
+                          <p className="text-xs" style={{ color: 'var(--text-tertiary)' }}>
+                            {component.description}
+                          </p>
+                        </div>
+                      </div>
+                      <Badge variant="secondary" size="sm">
+                        {component.weight}% {t('priority_explainer.weight', 'weight')}
+                      </Badge>
+                    </div>
+
+                    {/* Progress Bar */}
+                    <div className="mb-3">
+                      <div
+                        className="h-2 rounded-full overflow-hidden"
+                        style={{ backgroundColor: 'var(--bg-tertiary)' }}
+                      >
+                        <div
+                          className="h-full transition-all duration-500"
+                          style={{
+                            width: `${componentValue}%`,
+                            backgroundColor: component.color,
+                          }}
+                        />
+                      </div>
+                      <div className="flex justify-between text-xs mt-1">
+                        <span style={{ color: 'var(--text-tertiary)' }}>0</span>
+                        <span className="font-semibold" style={{ color: component.color }}>
+                          {componentValue}/100
+                        </span>
+                        <span style={{ color: 'var(--text-tertiary)' }}>100</span>
+                      </div>
+                    </div>
+
+                    {/* Examples */}
+                    <div className="space-y-1">
+                      {component.examples.map((example, idx) => (
+                        <div key={idx} className="flex items-start gap-2 text-xs">
+                          <span style={{ color: component.color }}>•</span>
+                          <span style={{ color: 'var(--text-secondary)' }}>{example}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Formula */}
+          <div
+            className="rounded-lg p-5 border"
+            style={{
+              backgroundColor: 'var(--bg-tertiary)',
+              borderColor: 'var(--border-secondary)',
+            }}
+          >
+            <h4 className="font-semibold mb-3" style={{ color: 'var(--text-primary)' }}>
+              {t('priority_explainer.formula_title', 'The Formula')}
+            </h4>
+            <div
+              className="font-mono text-sm p-3 rounded"
+              style={{
+                backgroundColor: 'var(--bg-primary)',
+                color: 'var(--text-primary)',
+              }}
+            >
+              Priority Score = (Business Impact × 0.40) + (Urgency × 0.30) + (User Agency × 0.20) + (AI Confidence ×
+              0.10)
+            </div>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div
+          className="sticky bottom-0 flex items-center justify-between p-6 border-t"
+          style={{
+            backgroundColor: 'var(--bg-primary)',
+            borderColor: 'var(--border-primary)',
+          }}
+        >
+          <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+            {t(
+              'priority_explainer.footer',
+              'This scoring helps AI prioritize alerts, ensuring you see the most important issues first.'
+            )}
+          </p>
+          <Button onClick={onClose} variant="primary">
+            {t('priority_explainer.got_it', 'Got it!')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/domain/dashboard/RealTimeAlerts.tsx

@@ -1,539 +0,0 @@
-import React, { useState, useMemo, useCallback, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Card, CardHeader, CardBody } from '../../ui/Card';
-import { SeverityBadge } from '../../ui/Badge';
-import { Button } from '../../ui/Button';
-import { useNotifications } from '../../../hooks/useNotifications';
-import { useAlertFilters } from '../../../hooks/useAlertFilters';
-import { useAlertGrouping, type GroupingMode } from '../../../hooks/useAlertGrouping';
-import { useAlertAnalytics, useAlertAnalyticsTracking } from '../../../hooks/useAlertAnalytics';
-import { useKeyboardNavigation } from '../../../hooks/useKeyboardNavigation';
-import { filterAlerts, getAlertStatistics, getTimeGroup } from '../../../utils/alertHelpers';
-import {
-  Bell,
-  Wifi,
-  WifiOff,
-  CheckCircle,
-  BarChart3,
-  AlertTriangle,
-  AlertCircle,
-  Clock,
-  ChevronLeft,
-  ChevronRight,
-} from 'lucide-react';
-import AlertFilters from './AlertFilters';
-import AlertGroupHeader from './AlertGroupHeader';
-import AlertCard from './AlertCard';
-import AlertTrends from './AlertTrends';
-import AlertBulkActions from './AlertBulkActions';
-
-export interface RealTimeAlertsProps {
-  className?: string;
-  maxAlerts?: number;
-  showAnalytics?: boolean;
-  showGrouping?: boolean;
-}
-
-/**
- * RealTimeAlerts - Dashboard component for displaying today's active alerts
- *
- * IMPORTANT: This component shows ONLY TODAY'S alerts (from 00:00 UTC today onwards)
- * to prevent flooding the dashboard with historical data.
- *
- * For historical alert data, use the Analytics panel or API endpoints:
- * - showAnalytics=true: Shows AlertTrends component with historical data (7 days, 30 days, etc.)
- * - API: /api/v1/tenants/{tenant_id}/alerts/analytics for historical analytics
- *
- * Alert scopes across the application:
- * - Dashboard (this component): TODAY'S alerts only
- * - Notification Bell: Last 24 hours
- * - Analytics Panel: Historical data (configurable: 7 days, 30 days, etc.)
- * - localStorage: Auto-cleanup of alerts >24h old on load
- * - Redis cache (initial_items): TODAY'S alerts only
- */
-const RealTimeAlerts: React.FC<RealTimeAlertsProps> = ({
-  className,
-  maxAlerts = 50,
-  showAnalytics = true,
-  showGrouping = true,
-}) => {
-  const { t } = useTranslation(['dashboard']);
-  const [expandedAlerts, setExpandedAlerts] = useState<Set<string>>(new Set());
-  const [selectedAlerts, setSelectedAlerts] = useState<Set<string>>(new Set());
-  const [showBulkActions, setShowBulkActions] = useState(false);
-  const [showAnalyticsPanel, setShowAnalyticsPanel] = useState(false);
-
-  // Pagination state
-  const ALERTS_PER_PAGE = 3;
-  const [currentPage, setCurrentPage] = useState(1);
-
-  const {
-    notifications,
-    isConnected,
-    markAsRead,
-    removeNotification,
-    snoozeAlert,
-    unsnoozeAlert,
-    isAlertSnoozed,
-    snoozedAlerts,
-    markMultipleAsRead,
-    removeMultiple,
-    snoozeMultiple,
-  } = useNotifications();
-
-  const {
-    filters,
-    toggleSeverity,
-    toggleCategory,
-    setTimeRange,
-    setSearch,
-    toggleShowSnoozed,
-    clearFilters,
-    hasActiveFilters,
-    activeFilterCount,
-  } = useAlertFilters();
-
-  // Dashboard shows only TODAY's alerts
-  // Analytics panel shows historical data (configured separately)
-  const filteredNotifications = useMemo(() => {
-    // Filter to today's alerts only for dashboard display
-    // This prevents showing yesterday's or older alerts on the main dashboard
-    const todayAlerts = notifications.filter(alert => {
-      const timeGroup = getTimeGroup(alert.timestamp);
-      return timeGroup === 'today';
-    });
-
-    return filterAlerts(todayAlerts, filters, snoozedAlerts).slice(0, maxAlerts);
-  }, [notifications, filters, snoozedAlerts, maxAlerts]);
-
-  const {
-    groupedAlerts,
-    groupingMode,
-    setGroupingMode,
-    toggleGroupCollapse,
-    isGroupCollapsed,
-  } = useAlertGrouping(filteredNotifications, 'time');
-
-  const analytics = useAlertAnalytics(notifications);
-  const { trackAcknowledgment, trackResolution } = useAlertAnalyticsTracking();
-
-  const stats = useMemo(() => {
-    return getAlertStatistics(filteredNotifications, snoozedAlerts);
-  }, [filteredNotifications, snoozedAlerts]);
-
-  const flatAlerts = useMemo(() => {
-    return groupedAlerts.flatMap(group =>
-      isGroupCollapsed(group.id) ? [] : group.alerts
-    );
-  }, [groupedAlerts, isGroupCollapsed]);
-
-  // Reset pagination when filters change
-  useEffect(() => {
-    setCurrentPage(1);
-  }, [filters, groupingMode]);
-
-  // Pagination calculations
-  const totalAlerts = flatAlerts.length;
-  const totalPages = Math.ceil(totalAlerts / ALERTS_PER_PAGE);
-  const startIndex = (currentPage - 1) * ALERTS_PER_PAGE;
-  const endIndex = startIndex + ALERTS_PER_PAGE;
-
-  // Paginated alerts - slice the flat alerts for current page
-  const paginatedAlerts = useMemo(() => {
-    const alertsToShow = flatAlerts.slice(startIndex, endIndex);
-    const alertIds = new Set(alertsToShow.map(a => a.id));
-
-    // Filter groups to only show alerts on current page
-    return groupedAlerts
-      .map(group => ({
-        ...group,
-        alerts: group.alerts.filter(alert => alertIds.has(alert.id)),
-        count: group.alerts.filter(alert => alertIds.has(alert.id)).length,
-      }))
-      .filter(group => group.alerts.length > 0);
-  }, [groupedAlerts, flatAlerts, startIndex, endIndex]);
-
-  const { focusedIndex } = useKeyboardNavigation(
-    flatAlerts.length,
-    {
-      onMoveUp: () => {},
-      onMoveDown: () => {},
-      onSelect: () => {
-        if (flatAlerts[focusedIndex]) {
-          toggleAlertSelection(flatAlerts[focusedIndex].id);
-        }
-      },
-      onExpand: () => {
-        if (flatAlerts[focusedIndex]) {
-          toggleAlertExpansion(flatAlerts[focusedIndex].id);
-        }
-      },
-      onMarkAsRead: () => {
-        if (flatAlerts[focusedIndex]) {
-          handleMarkAsRead(flatAlerts[focusedIndex].id);
-        }
-      },
-      onDismiss: () => {
-        if (flatAlerts[focusedIndex]) {
-          handleRemoveAlert(flatAlerts[focusedIndex].id);
-        }
-      },
-      onSnooze: () => {
-        if (flatAlerts[focusedIndex]) {
-          handleSnoozeAlert(flatAlerts[focusedIndex].id, '1hr');
-        }
-      },
-      onEscape: () => {
-        setExpandedAlerts(new Set());
-        setSelectedAlerts(new Set());
-      },
-      onSelectAll: () => {
-        handleSelectAll();
-      },
-      onSearch: () => {},
-    },
-    true
-  );
-
-  const toggleAlertExpansion = useCallback((alertId: string) => {
-    setExpandedAlerts(prev => {
-      const next = new Set(prev);
-      if (next.has(alertId)) {
-        next.delete(alertId);
-      } else {
-        next.add(alertId);
-      }
-      return next;
-    });
-  }, []);
-
-  const toggleAlertSelection = useCallback((alertId: string) => {
-    setSelectedAlerts(prev => {
-      const next = new Set(prev);
-      if (next.has(alertId)) {
-        next.delete(alertId);
-      } else {
-        next.add(alertId);
-      }
-      return next;
-    });
-  }, []);
-
-  const handleMarkAsRead = useCallback((alertId: string) => {
-    markAsRead(alertId);
-    trackAcknowledgment(alertId).catch(err =>
-      console.error('Failed to track acknowledgment:', err)
-    );
-  }, [markAsRead, trackAcknowledgment]);
-
-  const handleRemoveAlert = useCallback((alertId: string) => {
-    removeNotification(alertId);
-    trackResolution(alertId).catch(err =>
-      console.error('Failed to track resolution:', err)
-    );
-    setExpandedAlerts(prev => {
-      const next = new Set(prev);
-      next.delete(alertId);
-      return next;
-    });
-    setSelectedAlerts(prev => {
-      const next = new Set(prev);
-      next.delete(alertId);
-      return next;
-    });
-  }, [removeNotification, trackResolution]);
-
-  const handleSnoozeAlert = useCallback((alertId: string, duration: '15min' | '1hr' | '4hr' | 'tomorrow' | number) => {
-    snoozeAlert(alertId, duration);
-  }, [snoozeAlert]);
-
-  const handleUnsnoozeAlert = useCallback((alertId: string) => {
-    unsnoozeAlert(alertId);
-  }, [unsnoozeAlert]);
-
-  const handleSelectAll = useCallback(() => {
-    setSelectedAlerts(new Set(flatAlerts.map(a => a.id)));
-    setShowBulkActions(true);
-  }, [flatAlerts]);
-
-  const handleDeselectAll = useCallback(() => {
-    setSelectedAlerts(new Set());
-    setShowBulkActions(false);
-  }, []);
-
-  const handleBulkMarkAsRead = useCallback(() => {
-    const ids = Array.from(selectedAlerts);
-    markMultipleAsRead(ids);
-    ids.forEach(id =>
-      trackAcknowledgment(id).catch(err =>
-        console.error('Failed to track acknowledgment:', err)
-      )
-    );
-    handleDeselectAll();
-  }, [selectedAlerts, markMultipleAsRead, trackAcknowledgment, handleDeselectAll]);
-
-  const handleBulkRemove = useCallback(() => {
-    const ids = Array.from(selectedAlerts);
-    removeMultiple(ids);
-    ids.forEach(id =>
-      trackResolution(id).catch(err =>
-        console.error('Failed to track resolution:', err)
-      )
-    );
-    handleDeselectAll();
-  }, [selectedAlerts, removeMultiple, trackResolution, handleDeselectAll]);
-
-  const handleBulkSnooze = useCallback((duration: '15min' | '1hr' | '4hr' | 'tomorrow' | number) => {
-    const ids = Array.from(selectedAlerts);
-    snoozeMultiple(ids, duration);
-    handleDeselectAll();
-  }, [selectedAlerts, snoozeMultiple, handleDeselectAll]);
-
-  const activeAlerts = filteredNotifications.filter(a => a.status !== 'acknowledged' && !isAlertSnoozed(a.id));
-  const urgentCount = activeAlerts.filter(a => a.severity === 'urgent').length;
-  const highCount = activeAlerts.filter(a => a.severity === 'high').length;
-
-  return (
-    <Card className={className} variant="elevated" padding="none">
-      <CardHeader padding="lg" divider>
-        <div className="flex items-start sm:items-center justify-between w-full gap-4 flex-col sm:flex-row">
-          <div className="flex items-center gap-3">
-            <div
-              className="p-2.5 rounded-xl shadow-sm flex-shrink-0"
-              style={{ backgroundColor: 'var(--color-primary)15' }}
-            >
-              <Bell className="w-5 h-5" style={{ color: 'var(--color-primary)' }} />
-            </div>
-            <div>
-              <h3 className="text-lg font-bold mb-0.5" style={{ color: 'var(--text-primary)' }}>
-                {t('dashboard:alerts.title', 'Alertas')}
-              </h3>
-              <div className="flex items-center gap-2">
-                {isConnected ? (
-                  <Wifi className="w-3.5 h-3.5" style={{ color: 'var(--color-success)' }} />
-                ) : (
-                  <WifiOff className="w-3.5 h-3.5" style={{ color: 'var(--color-error)' }} />
-                )}
-                <span className="text-xs font-medium whitespace-nowrap" style={{ color: 'var(--text-secondary)' }}>
-                  {isConnected
-                    ? t('dashboard:alerts.live', 'En vivo')
-                    : t('dashboard:alerts.offline', 'Desconectado')
-                  }
-                </span>
-              </div>
-            </div>
-          </div>
-
-          <div className="flex items-center gap-3 flex-wrap w-full sm:w-auto">
-            {/* Alert count badges */}
-            <div className="flex items-center gap-2">
-              {urgentCount > 0 && (
-                <SeverityBadge
-                  severity="high"
-                  count={urgentCount}
-                  size="sm"
-                />
-              )}
-              {highCount > 0 && (
-                <SeverityBadge
-                  severity="medium"
-                  count={highCount}
-                  size="sm"
-                />
-              )}
-            </div>
-
-            {/* Controls */}
-            {showAnalytics && (
-              <Button
-                variant={showAnalyticsPanel ? 'primary' : 'ghost'}
-                size="sm"
-                onClick={() => setShowAnalyticsPanel(!showAnalyticsPanel)}
-                className="h-9"
-                title="Toggle analytics"
-                aria-label="Toggle analytics panel"
-              >
-                <BarChart3 className="w-4 h-4" />
-              </Button>
-            )}
-
-            {showGrouping && (
-              <select
-                value={groupingMode}
-                onChange={(e) => setGroupingMode(e.target.value as GroupingMode)}
-                className="px-3 py-2 text-sm font-medium border-2 border-[var(--border-primary)] rounded-lg bg-[var(--bg-primary)] text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-all cursor-pointer hover:border-[var(--color-primary)]"
-                aria-label="Group alerts by"
-              >
-                <option value="time">⏰ Por tiempo</option>
-                <option value="category">📁 Por categoría</option>
-                <option value="similarity">🔗 Similares</option>
-                <option value="none">📋 Sin agrupar</option>
-              </select>
-            )}
-          </div>
-        </div>
-      </CardHeader>
-
-      <CardBody padding="none">
-        {showAnalyticsPanel && (
-          <div className="p-4 border-b border-[var(--border-primary)]">
-            <AlertTrends analytics={analytics} />
-          </div>
-        )}
-
-        <div className="px-4 py-4 border-b border-[var(--border-primary)] bg-[var(--bg-secondary)]/30">
-          <AlertFilters
-            selectedSeverities={filters.severities}
-            selectedCategories={filters.categories}
-            selectedTimeRange={filters.timeRange}
-            searchQuery={filters.search}
-            showSnoozed={filters.showSnoozed}
-            onToggleSeverity={toggleSeverity}
-            onToggleCategory={toggleCategory}
-            onSetTimeRange={setTimeRange}
-            onSearchChange={setSearch}
-            onToggleShowSnoozed={toggleShowSnoozed}
-            onClearFilters={clearFilters}
-            hasActiveFilters={hasActiveFilters}
-            activeFilterCount={activeFilterCount}
-          />
-        </div>
-
-        {selectedAlerts.size > 0 && (
-          <div className="p-4 border-b border-[var(--border-primary)]">
-            <AlertBulkActions
-              selectedCount={selectedAlerts.size}
-              totalCount={flatAlerts.length}
-              onMarkAsRead={handleBulkMarkAsRead}
-              onRemove={handleBulkRemove}
-              onSnooze={handleBulkSnooze}
-              onDeselectAll={handleDeselectAll}
-              onSelectAll={handleSelectAll}
-            />
-          </div>
-        )}
-
-        {filteredNotifications.length === 0 ? (
-          <div className="p-12 text-center">
-            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[var(--color-success)]/10 mb-4">
-              <CheckCircle className="w-8 h-8" style={{ color: 'var(--color-success)' }} />
-            </div>
-            <h4 className="text-base font-semibold mb-2" style={{ color: 'var(--text-primary)' }}>
-              {hasActiveFilters ? 'Sin resultados' : 'Todo despejado'}
-            </h4>
-            <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
-              {hasActiveFilters
-                ? 'No hay alertas que coincidan con los filtros seleccionados'
-                : t('dashboard:alerts.no_alerts', 'No hay alertas activas en este momento')
-              }
-            </p>
-          </div>
-        ) : (
-          <div className="space-y-3 p-4">
-            {paginatedAlerts.map((group) => (
-              <div key={group.id}>
-                {(group.count > 1 || groupingMode !== 'none') && (
-                  <div className="mb-3">
-                    <AlertGroupHeader
-                      group={group}
-                      isCollapsed={isGroupCollapsed(group.id)}
-                      onToggleCollapse={() => toggleGroupCollapse(group.id)}
-                    />
-                  </div>
-                )}
-
-                {!isGroupCollapsed(group.id) && (
-                  <div className="space-y-3 ml-0">
-                    {group.alerts.map((alert) => (
-                      <AlertCard
-                        key={alert.id}
-                        alert={alert}
-                        isExpanded={expandedAlerts.has(alert.id)}
-                        isSelected={selectedAlerts.has(alert.id)}
-                        isSnoozed={isAlertSnoozed(alert.id)}
-                        snoozedUntil={snoozedAlerts.get(alert.id)?.until}
-                        onToggleExpand={() => toggleAlertExpansion(alert.id)}
-                        onToggleSelect={() => toggleAlertSelection(alert.id)}
-                        onMarkAsRead={() => handleMarkAsRead(alert.id)}
-                        onRemove={() => handleRemoveAlert(alert.id)}
-                        onSnooze={(duration) => handleSnoozeAlert(alert.id, duration)}
-                        onUnsnooze={() => handleUnsnoozeAlert(alert.id)}
-                        showCheckbox={showBulkActions || selectedAlerts.size > 0}
-                      />
-                    ))}
-                  </div>
-                )}
-              </div>
-            ))}
-          </div>
-        )}
-
-        {filteredNotifications.length > 0 && (
-          <div
-            className="px-4 py-3 border-t"
-            style={{
-              borderColor: 'var(--border-primary)',
-              backgroundColor: 'var(--bg-secondary)/50',
-            }}
-          >
-            <div className="flex flex-col gap-3">
-              {/* Stats row */}
-              <div className="flex items-center justify-between text-sm" style={{ color: 'var(--text-secondary)' }}>
-                <span className="font-medium">
-                  Mostrando <span className="font-bold text-[var(--text-primary)]">{startIndex + 1}-{Math.min(endIndex, totalAlerts)}</span> de <span className="font-bold text-[var(--text-primary)]">{totalAlerts}</span> alertas
-                </span>
-                <div className="flex items-center gap-4">
-                  {stats.unread > 0 && (
-                    <span className="flex items-center gap-1.5">
-                      <span className="w-2 h-2 rounded-full bg-[var(--color-info)] animate-pulse" />
-                      <span className="font-semibold text-[var(--text-primary)]">{stats.unread}</span> sin leer
-                    </span>
-                  )}
-                  {stats.snoozed > 0 && (
-                    <span className="flex items-center gap-1.5">
-                      <Clock className="w-3.5 h-3.5" />
-                      <span className="font-semibold text-[var(--text-primary)]">{stats.snoozed}</span> pospuestas
-                    </span>
-                  )}
-                </div>
-              </div>
-
-              {/* Pagination controls */}
-              {totalPages > 1 && (
-                <div className="flex items-center justify-center gap-2">
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
-                    disabled={currentPage === 1}
-                    className="h-8 px-3"
-                    aria-label="Previous page"
-                  >
-                    <ChevronLeft className="w-4 h-4" />
-                  </Button>
-
-                  <span className="text-sm font-medium px-3" style={{ color: 'var(--text-primary)' }}>
-                    Página <span className="font-bold">{currentPage}</span> de <span className="font-bold">{totalPages}</span>
-                  </span>
-
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
-                    disabled={currentPage === totalPages}
-                    className="h-8 px-3"
-                    aria-label="Next page"
-                  >
-                    <ChevronRight className="w-4 h-4" />
-                  </Button>
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-      </CardBody>
-    </Card>
-  );
-};
-
-export default RealTimeAlerts;

frontend/src/components/domain/dashboard/SmartActionConsequencePreview.tsx

@@ -0,0 +1,284 @@
+// ================================================================
+// frontend/src/components/domain/dashboard/SmartActionConsequencePreview.tsx
+// ================================================================
+/**
+ * Smart Action Consequence Preview
+ *
+ * Shows "What happens if I click this?" before user takes action.
+ * Displays expected outcomes, affected systems, and financial impact.
+ *
+ * Design: Tooltip/popover style preview with clear consequences
+ */
+
+import React, { useState } from 'react';
+import { Info, CheckCircle, AlertTriangle, DollarSign, Clock, ArrowRight } from 'lucide-react';
+import { Badge } from '../../ui/Badge';
+import { useTranslation } from 'react-i18next';
+
+export interface ActionConsequence {
+  outcome: string;
+  affectedSystems?: string[];
+  financialImpact?: {
+    amount: number;
+    currency: string;
+    type: 'cost' | 'savings' | 'revenue';
+  };
+  timeImpact?: string;
+  reversible: boolean;
+  confidence?: number;
+  warnings?: string[];
+}
+
+export interface SmartActionConsequencePreviewProps {
+  action: {
+    label: string;
+    actionType: string;
+  };
+  consequences: ActionConsequence;
+  onConfirm: () => void;
+  onCancel: () => void;
+  isOpen: boolean;
+  triggerElement?: React.ReactNode;
+}
+
+export function SmartActionConsequencePreview({
+  action,
+  consequences,
+  onConfirm,
+  onCancel,
+  isOpen,
+  triggerElement,
+}: SmartActionConsequencePreviewProps) {
+  const { t } = useTranslation('alerts');
+  const [showPreview, setShowPreview] = useState(isOpen);
+
+  const handleConfirm = () => {
+    setShowPreview(false);
+    onConfirm();
+  };
+
+  const handleCancel = () => {
+    setShowPreview(false);
+    onCancel();
+  };
+
+  if (!showPreview) {
+    return (
+      <div onClick={() => setShowPreview(true)}>
+        {triggerElement}
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 z-40 bg-black/20 backdrop-blur-sm animate-in fade-in duration-200"
+        onClick={handleCancel}
+      />
+
+      {/* Preview Card */}
+      <div
+        className="fixed z-50 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-md animate-in zoom-in-95 duration-200"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div
+          className="rounded-xl shadow-2xl border-2"
+          style={{
+            backgroundColor: 'var(--bg-primary)',
+            borderColor: 'var(--color-primary-300)',
+          }}
+        >
+          {/* Header */}
+          <div
+            className="p-4 border-b"
+            style={{
+              backgroundColor: 'var(--color-primary-50)',
+              borderColor: 'var(--border-primary)',
+            }}
+          >
+            <div className="flex items-center gap-3">
+              <div
+                className="p-2 rounded-lg"
+                style={{ backgroundColor: 'var(--color-primary-100)' }}
+              >
+                <Info className="w-5 h-5" style={{ color: 'var(--color-primary-600)' }} />
+              </div>
+              <div>
+                <h3 className="font-bold text-lg" style={{ color: 'var(--text-primary)' }}>
+                  {t('action_preview.title', 'Action Preview')}
+                </h3>
+                <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+                  {action.label}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Content */}
+          <div className="p-4 space-y-4">
+            {/* Expected Outcome */}
+            <div>
+              <div className="flex items-center gap-2 mb-2">
+                <ArrowRight className="w-4 h-4" style={{ color: 'var(--color-primary)' }} />
+                <h4 className="font-semibold text-sm" style={{ color: 'var(--text-primary)' }}>
+                  {t('action_preview.outcome', 'What will happen')}
+                </h4>
+              </div>
+              <p className="text-sm pl-6" style={{ color: 'var(--text-secondary)' }}>
+                {consequences.outcome}
+              </p>
+            </div>
+
+            {/* Financial Impact */}
+            {consequences.financialImpact && (
+              <div
+                className="rounded-lg p-3 border"
+                style={{
+                  backgroundColor:
+                    consequences.financialImpact.type === 'cost'
+                      ? 'var(--color-error-50)'
+                      : 'var(--color-success-50)',
+                  borderColor:
+                    consequences.financialImpact.type === 'cost'
+                      ? 'var(--color-error-200)'
+                      : 'var(--color-success-200)',
+                }}
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <DollarSign
+                      className="w-4 h-4"
+                      style={{
+                        color:
+                          consequences.financialImpact.type === 'cost'
+                            ? 'var(--color-error-600)'
+                            : 'var(--color-success-600)',
+                      }}
+                    />
+                    <span className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
+                      {t('action_preview.financial_impact', 'Financial Impact')}
+                    </span>
+                  </div>
+                  <span
+                    className="text-lg font-bold"
+                    style={{
+                      color:
+                        consequences.financialImpact.type === 'cost'
+                          ? 'var(--color-error-600)'
+                          : 'var(--color-success-600)',
+                    }}
+                  >
+                    {consequences.financialImpact.type === 'cost' ? '-' : '+'}
+                    {consequences.financialImpact.currency}
+                    {consequences.financialImpact.amount.toFixed(2)}
+                  </span>
+                </div>
+              </div>
+            )}
+
+            {/* Affected Systems */}
+            {consequences.affectedSystems && consequences.affectedSystems.length > 0 && (
+              <div>
+                <h4 className="font-semibold text-sm mb-2" style={{ color: 'var(--text-primary)' }}>
+                  {t('action_preview.affected_systems', 'Affected Systems')}
+                </h4>
+                <div className="flex flex-wrap gap-2">
+                  {consequences.affectedSystems.map((system, idx) => (
+                    <Badge key={idx} variant="secondary" size="sm">
+                      {system}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Time Impact */}
+            {consequences.timeImpact && (
+              <div className="flex items-center gap-2 text-sm">
+                <Clock className="w-4 h-4" style={{ color: 'var(--text-tertiary)' }} />
+                <span style={{ color: 'var(--text-secondary)' }}>{consequences.timeImpact}</span>
+              </div>
+            )}
+
+            {/* Reversibility */}
+            <div
+              className="flex items-center gap-2 text-sm p-2 rounded"
+              style={{ backgroundColor: 'var(--bg-secondary)' }}
+            >
+              <CheckCircle
+                className="w-4 h-4"
+                style={{ color: consequences.reversible ? 'var(--color-success-500)' : 'var(--color-warning-500)' }}
+              />
+              <span style={{ color: 'var(--text-secondary)' }}>
+                {consequences.reversible
+                  ? t('action_preview.reversible', 'This action can be undone')
+                  : t('action_preview.not_reversible', 'This action cannot be undone')}
+              </span>
+            </div>
+
+            {/* Warnings */}
+            {consequences.warnings && consequences.warnings.length > 0 && (
+              <div
+                className="rounded-lg p-3 border"
+                style={{
+                  backgroundColor: 'var(--color-warning-50)',
+                  borderColor: 'var(--color-warning-300)',
+                }}
+              >
+                <div className="flex items-start gap-2">
+                  <AlertTriangle className="w-4 h-4 mt-0.5 flex-shrink-0" style={{ color: 'var(--color-warning-600)' }} />
+                  <div className="space-y-1">
+                    {consequences.warnings.map((warning, idx) => (
+                      <p key={idx} className="text-sm" style={{ color: 'var(--color-warning-700)' }}>
+                        {warning}
+                      </p>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Confidence Score */}
+            {consequences.confidence !== undefined && (
+              <div className="text-xs text-center" style={{ color: 'var(--text-tertiary)' }}>
+                {t('action_preview.confidence', 'AI Confidence: {{confidence}}%', {
+                  confidence: consequences.confidence,
+                })}
+              </div>
+            )}
+          </div>
+
+          {/* Actions */}
+          <div
+            className="flex items-center gap-3 p-4 border-t"
+            style={{ borderColor: 'var(--border-primary)' }}
+          >
+            <button
+              onClick={handleCancel}
+              className="flex-1 px-4 py-2 rounded-lg font-medium transition-colors"
+              style={{
+                backgroundColor: 'var(--bg-secondary)',
+                color: 'var(--text-primary)',
+                border: '1px solid var(--border-primary)',
+              }}
+            >
+              {t('action_preview.cancel', 'Cancel')}
+            </button>
+            <button
+              onClick={handleConfirm}
+              className="flex-1 px-4 py-2 rounded-lg font-semibold transition-colors"
+              style={{
+                backgroundColor: 'var(--color-primary)',
+                color: 'white',
+              }}
+            >
+              {t('action_preview.confirm', 'Confirm Action')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

frontend/src/components/domain/dashboard/TrendVisualizationComponent.tsx

@@ -0,0 +1,189 @@
+// ================================================================
+// frontend/src/components/domain/dashboard/TrendVisualizationComponent.tsx
+// ================================================================
+/**
+ * Trend Visualization Component
+ *
+ * Displays visual trend indicators for TREND_WARNING type alerts.
+ * Shows historical comparison with simple sparkline/arrow indicators.
+ *
+ * Design: Lightweight, inline trend indicators with color coding
+ */
+
+import React from 'react';
+import { TrendingUp, TrendingDown, Minus, AlertTriangle } from 'lucide-react';
+import { Badge } from '../../ui/Badge';
+import { useTranslation } from 'react-i18next';
+
+export interface TrendData {
+  direction: 'increasing' | 'decreasing' | 'stable';
+  percentageChange?: number;
+  historicalComparison?: string;
+  dataPoints?: number[];
+  threshold?: number;
+  current?: number;
+}
+
+export interface TrendVisualizationProps {
+  trend: TrendData;
+  label?: string;
+  showSparkline?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+export function TrendVisualizationComponent({
+  trend,
+  label,
+  showSparkline = false,
+  size = 'md',
+  className = '',
+}: TrendVisualizationProps) {
+  const { t } = useTranslation('alerts');
+
+  const getTrendIcon = () => {
+    switch (trend.direction) {
+      case 'increasing':
+        return TrendingUp;
+      case 'decreasing':
+        return TrendingDown;
+      case 'stable':
+        return Minus;
+    }
+  };
+
+  const getTrendColor = () => {
+    switch (trend.direction) {
+      case 'increasing':
+        return 'var(--color-error-500)';
+      case 'decreasing':
+        return 'var(--color-success-500)';
+      case 'stable':
+        return 'var(--text-tertiary)';
+    }
+  };
+
+  const getTrendBadgeVariant = (): 'error' | 'success' | 'secondary' => {
+    switch (trend.direction) {
+      case 'increasing':
+        return 'error';
+      case 'decreasing':
+        return 'success';
+      case 'stable':
+        return 'secondary';
+    }
+  };
+
+  const getTrendLabel = () => {
+    if (trend.percentageChange !== undefined) {
+      const sign = trend.percentageChange > 0 ? '+' : '';
+      return `${sign}${trend.percentageChange.toFixed(1)}%`;
+    }
+    return trend.direction.charAt(0).toUpperCase() + trend.direction.slice(1);
+  };
+
+  const isNearThreshold = trend.threshold !== undefined && trend.current !== undefined
+    ? Math.abs(trend.current - trend.threshold) / trend.threshold < 0.1
+    : false;
+
+  const TrendIcon = getTrendIcon();
+  const trendColor = getTrendColor();
+
+  const iconSizes = {
+    sm: 'w-3 h-3',
+    md: 'w-4 h-4',
+    lg: 'w-5 h-5',
+  };
+
+  return (
+    <div className={`inline-flex items-center gap-2 ${className}`}>
+      {/* Trend Indicator */}
+      <div className="flex items-center gap-1.5">
+        <TrendIcon
+          className={iconSizes[size]}
+          style={{ color: trendColor }}
+        />
+        <Badge variant={getTrendBadgeVariant()} size={size === 'sm' ? 'sm' : 'md'}>
+          {getTrendLabel()}
+        </Badge>
+      </div>
+
+      {/* Optional Label */}
+      {label && (
+        <span
+          className={`font-medium ${size === 'sm' ? 'text-xs' : size === 'lg' ? 'text-base' : 'text-sm'}`}
+          style={{ color: 'var(--text-secondary)' }}
+        >
+          {label}
+        </span>
+      )}
+
+      {/* Threshold Warning */}
+      {isNearThreshold && (
+        <div className="flex items-center gap-1">
+          <AlertTriangle className="w-3 h-3" style={{ color: 'var(--color-warning-500)' }} />
+          <span className="text-xs font-medium" style={{ color: 'var(--color-warning-600)' }}>
+            {t('trend.near_threshold', 'Near threshold')}
+          </span>
+        </div>
+      )}
+
+      {/* Sparkline (Simple Mini Chart) */}
+      {showSparkline && trend.dataPoints && trend.dataPoints.length > 0 && (
+        <div className="flex items-end gap-0.5 h-6">
+          {trend.dataPoints.slice(-8).map((value, idx) => {
+            const maxValue = Math.max(...trend.dataPoints!);
+            const heightPercent = (value / maxValue) * 100;
+
+            return (
+              <div
+                key={idx}
+                className="w-1 rounded-t transition-all"
+                style={{
+                  height: `${heightPercent}%`,
+                  backgroundColor: trendColor,
+                  opacity: 0.3 + (idx / trend.dataPoints!.length) * 0.7,
+                }}
+                title={`${value}`}
+              />
+            );
+          })}
+        </div>
+      )}
+
+      {/* Historical Comparison Text */}
+      {trend.historicalComparison && (
+        <span
+          className={`${size === 'sm' ? 'text-xs' : 'text-sm'}`}
+          style={{ color: 'var(--text-tertiary)' }}
+        >
+          {trend.historicalComparison}
+        </span>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Compact version for inline use in alert cards
+ */
+export function TrendVisualizationInline({ trend }: { trend: TrendData }) {
+  const TrendIcon = trend.direction === 'increasing' ? TrendingUp
+    : trend.direction === 'decreasing' ? TrendingDown
+    : Minus;
+
+  const color = trend.direction === 'increasing' ? 'var(--color-error-500)'
+    : trend.direction === 'decreasing' ? 'var(--color-success-500)'
+    : 'var(--text-tertiary)';
+
+  return (
+    <div className="inline-flex items-center gap-1">
+      <TrendIcon className="w-3 h-3" style={{ color }} />
+      {trend.percentageChange !== undefined && (
+        <span className="text-xs font-semibold" style={{ color }}>
+          {trend.percentageChange > 0 ? '+' : ''}{trend.percentageChange.toFixed(1)}%
+        </span>
+      )}
+    </div>
+  );
+}

frontend/src/components/layout/DemoBanner/DemoBanner.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { extendDemoSession, destroyDemoSession } from '../../../api/services/demo';
 import { apiClient } from '../../../api/client';
 import { useNavigate } from 'react-router-dom';
@@ -7,7 +7,7 @@ import { BookOpen, Clock, Sparkles, X } from 'lucide-react';
 
 export const DemoBanner: React.FC = () => {
   const navigate = useNavigate();
-  const { startTour, resumeTour, tourState } = useDemoTour();
+  const { startTour, resumeTour } = useDemoTour();
   const [isDemo, setIsDemo] = useState(() => localStorage.getItem('demo_mode') === 'true');
   const [expiresAt, setExpiresAt] = useState<string | null>(() => localStorage.getItem('demo_expires_at'));
   const [timeRemaining, setTimeRemaining] = useState<string>('');
@@ -15,6 +15,16 @@ export const DemoBanner: React.FC = () => {
   const [extending, setExtending] = useState(false);
   const [showExitModal, setShowExitModal] = useState(false);
 
+  // Memoize tour state to prevent re-renders
+  const tourState = useMemo(() => {
+    try {
+      return getTourState();
+    } catch (error) {
+      console.error('Error getting tour state:', error);
+      return null;
+    }
+  }, []); // Only get tour state on initial render
+
   useEffect(() => {
     const demoMode = localStorage.getItem('demo_mode') === 'true';
     const expires = localStorage.getItem('demo_expires_at');

frontend/src/components/layout/Header/Header.tsx

@@ -1,21 +1,15 @@
-import React, { useState, useCallback, forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import { clsx } from 'clsx';
-import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useAuthUser, useIsAuthenticated } from '../../../stores';
 import { useTheme } from '../../../contexts/ThemeContext';
-import { useNotifications } from '../../../hooks/useNotifications';
 import { useHasAccess } from '../../../hooks/useAccessControl';
 import { Button } from '../../ui';
-import { CountBadge } from '../../ui';
 import { TenantSwitcher } from '../../ui/TenantSwitcher';
 import { ThemeToggle } from '../../ui/ThemeToggle';
-import { NotificationPanel } from '../../ui/NotificationPanel/NotificationPanel';
 import { CompactLanguageSelector } from '../../ui/LanguageSelector';
 import {
   Menu,
-  Bell,
-  X,
   TrendingUp
 } from 'lucide-react';
 
@@ -33,10 +27,6 @@ export interface HeaderProps {
    * Show/hide search functionality
    */
   showSearch?: boolean;
-  /**
-   * Show/hide notifications
-   */
-  showNotifications?: boolean;
   /**
    * Show/hide theme toggle
    */
@@ -49,14 +39,6 @@ export interface HeaderProps {
    * Custom search placeholder
    */
   searchPlaceholder?: string;
-  /**
-   * Notification count
-   */
-  notificationCount?: number;
-  /**
-   * Custom notification handler
-   */
-  onNotificationClick?: () => void;
 }
 
 export interface HeaderRef {
@@ -64,12 +46,10 @@ export interface HeaderRef {
 }
 
 /**
- * Header - Top navigation header with logo, notifications, theme toggle
+ * Header - Top navigation header with logo and theme toggle
  *
  * Features:
  * - Logo/brand area with responsive sizing
- * - Global search functionality with keyboard shortcuts
- * - Notifications bell with badge count
  * - Theme toggle button (light/dark/system)
  * - Mobile hamburger menu integration
  * - Keyboard navigation support
@@ -79,39 +59,14 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
   onMenuClick,
   sidebarCollapsed = false,
   showSearch = true,
-  showNotifications = true,
   showThemeToggle = true,
   logo,
   searchPlaceholder,
-  notificationCount = 0,
-  onNotificationClick,
 }, ref) => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
   const user = useAuthUser();
   const hasAccess = useHasAccess(); // Check both authentication and demo mode
   const { theme, resolvedTheme, setTheme } = useTheme();
-  const {
-    notifications,
-    unreadCount,
-    isConnected,
-    markAsRead,
-    markAllAsRead,
-    removeNotification,
-    clearAll
-  } = useNotifications();
-
-  const [isNotificationPanelOpen, setIsNotificationPanelOpen] = useState(false);
-
-  // Filter notifications to last 24 hours for the notification bell
-  // This prevents showing old/stale alerts in the notification panel
-  const recentNotifications = React.useMemo(() => {
-    const oneDayAgo = Date.now() - (24 * 60 * 60 * 1000);
-    return notifications.filter(n => {
-      const alertTime = new Date(n.timestamp).getTime();
-      return alertTime > oneDayAgo;
-    });
-  }, [notifications]);
 
   const defaultSearchPlaceholder = searchPlaceholder || t('common:forms.search_placeholder', 'Search...');
 
@@ -121,31 +76,7 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
   }), []);
 
 
-  // Keyboard shortcuts
-  React.useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      // Escape to close menus
-      if (e.key === 'Escape') {
-        setIsNotificationPanelOpen(false);
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, []);
-
-  // Close menus when clicking outside
-  React.useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      const target = event.target as Element;
-      if (!target.closest('[data-notification-panel]')) {
-        setIsNotificationPanelOpen(false);
-      }
-    };
-
-    document.addEventListener('click', handleClickOutside);
-    return () => document.removeEventListener('click', handleClickOutside);
-  }, []);
+  // Removed notification panel effects as part of new alert system integration
 
 
   return (
@@ -227,8 +158,6 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
       {/* Right section */}
       {hasAccess && (
         <div className="flex items-center gap-1">
-          {/* Placeholder for potential future items */ }
-
           {/* Language selector */}
           <CompactLanguageSelector className="w-auto min-w-[50px]" />
 
@@ -236,51 +165,6 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
           {showThemeToggle && (
             <ThemeToggle variant="button" size="md" />
           )}
-
-          {/* Notifications */}
-          {showNotifications && (
-            <div className="relative" data-notification-panel>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => setIsNotificationPanelOpen(!isNotificationPanelOpen)}
-                className={clsx(
-                  "w-10 h-10 p-0 flex items-center justify-center relative",
-                  !isConnected && "opacity-50",
-                  isNotificationPanelOpen && "bg-[var(--bg-secondary)]"
-                )}
-                aria-label={`${t('common:navigation.notifications', 'Notifications')}${unreadCount > 0 ? ` (${unreadCount})` : ''}${!isConnected ? ` - ${t('common:status.disconnected', 'Disconnected')}` : ''}`}
-                title={!isConnected ? t('common:status.no_realtime_connection', 'No real-time connection') : undefined}
-                aria-expanded={isNotificationPanelOpen}
-                aria-haspopup="true"
-              >
-                <Bell className={clsx(
-                  "h-5 w-5 transition-colors",
-                  unreadCount > 0 && "text-[var(--color-warning)]"
-                )} />
-                {unreadCount > 0 && (
-                  <CountBadge
-                    count={unreadCount}
-                    max={99}
-                    variant="error"
-                    size="sm"
-                    overlay
-                  />
-                )}
-              </Button>
-
-              <NotificationPanel
-                notifications={recentNotifications}
-                isOpen={isNotificationPanelOpen}
-                onClose={() => setIsNotificationPanelOpen(false)}
-                onMarkAsRead={markAsRead}
-                onMarkAllAsRead={markAllAsRead}
-                onRemoveNotification={removeNotification}
-                onClearAll={clearAll}
-              />
-            </div>
-          )}
-
         </div>
       )}
     </header>

frontend/src/components/layout/Sidebar/Sidebar.tsx

@@ -25,6 +25,7 @@ import {
   Store,
   GraduationCap,
   Bell,
+  MessageSquare,
   Settings,
   User,
   CreditCard,
@@ -119,6 +120,7 @@ const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
   training: GraduationCap,
   notifications: Bell,
   bell: Bell,
+  communications: MessageSquare, // Added for communications section
   settings: Settings,
   user: User,
   'credit-card': CreditCard,

frontend/src/components/ui/KeyValueEditor/index.ts

@@ -1,2 +1,2 @@
 export { KeyValueEditor } from './KeyValueEditor';
-export default from './KeyValueEditor';
+export default KeyValueEditor;

frontend/src/components/ui/NotificationPanel/NotificationPanel.tsx

@@ -7,14 +7,23 @@ import {
   Check,
   Trash2,
   AlertTriangle,
-  AlertCircle,
-  Info,
   CheckCircle,
-  X
+  X,
+  Bot,
+  TrendingUp,
+  Clock,
+  DollarSign,
+  Phone,
+  ExternalLink
 } from 'lucide-react';
+import { EnrichedAlert, AlertTypeClass } from '../../../types/alerts';
+import { useSmartActionHandler } from '../../../utils/smartActionHandlers';
+import { getPriorityColor, getTypeClassBadgeVariant, formatTimeUntilConsequence } from '../../../types/alerts';
+import { useAuthUser } from '../../../stores/auth.store';
 
 export interface NotificationPanelProps {
   notifications: NotificationData[];
+  enrichedAlerts?: EnrichedAlert[];
   isOpen: boolean;
   onClose: () => void;
   onMarkAsRead: (id: string) => void;
@@ -24,50 +33,7 @@ export interface NotificationPanelProps {
   className?: string;
 }
 
-const getSeverityIcon = (severity: string) => {
-  switch (severity) {
-    case 'urgent':
-      return AlertTriangle;
-    case 'high':
-      return AlertCircle;
-    case 'medium':
-      return Info;
-    case 'low':
-      return CheckCircle;
-    default:
-      return Info;
-  }
-};
-
-const getSeverityColor = (severity: string) => {
-  switch (severity) {
-    case 'urgent':
-      return 'var(--color-error)';
-    case 'high':
-      return 'var(--color-warning)';
-    case 'medium':
-      return 'var(--color-info)';
-    case 'low':
-      return 'var(--color-success)';
-    default:
-      return 'var(--color-info)';
-  }
-};
-
-const getSeverityBadge = (severity: string) => {
-  switch (severity) {
-    case 'urgent':
-      return 'error';
-    case 'high':
-      return 'warning';
-    case 'medium':
-      return 'info';
-    case 'low':
-      return 'success';
-    default:
-      return 'info';
-  }
-};
+// Legacy severity functions removed - now using enriched priority_level and type_class
 
 const formatTimestamp = (timestamp: string) => {
   const date = new Date(timestamp);
@@ -82,8 +48,176 @@ const formatTimestamp = (timestamp: string) => {
   return date.toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit' });
 };
 
+// Enriched Alert Item Component
+const EnrichedAlertItem: React.FC<{
+  alert: EnrichedAlert;
+  isMobile: boolean;
+  onMarkAsRead: (id: string) => void;
+  onRemove: (id: string) => void;
+  actionHandler: any;
+}> = ({ alert, isMobile, onMarkAsRead, onRemove, actionHandler }) => {
+  const isUnread = alert.status === 'active';
+  const priorityColor = getPriorityColor(alert.priority_level);
+
+  return (
+    <div
+      className={clsx(
+        "transition-colors hover:bg-[var(--bg-secondary)] active:bg-[var(--bg-tertiary)]",
+        isMobile ? 'px-4 py-4 mx-2 my-1 rounded-lg' : 'p-3',
+        isUnread && "bg-[var(--color-info)]/5 border-l-4"
+      )}
+      style={isUnread ? { borderLeftColor: priorityColor } : {}}
+    >
+      <div className={`flex gap-${isMobile ? '4' : '3'}`}>
+        {/* Priority Icon */}
+        <div
+          className={`flex-shrink-0 rounded-full mt-0.5 ${isMobile ? 'p-2' : 'p-1'}`}
+          style={{ backgroundColor: priorityColor + '15' }}
+        >
+          {alert.type_class === AlertTypeClass.PREVENTED_ISSUE ? (
+            <CheckCircle className={`${isMobile ? 'w-5 h-5' : 'w-3 h-3'}`} style={{ color: 'var(--color-success)' }} />
+          ) : alert.type_class === AlertTypeClass.ESCALATION ? (
+            <Clock className={`${isMobile ? 'w-5 h-5' : 'w-3 h-3'}`} style={{ color: priorityColor }} />
+          ) : (
+            <AlertTriangle className={`${isMobile ? 'w-5 h-5' : 'w-3 h-3'}`} style={{ color: priorityColor }} />
+          )}
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 min-w-0">
+          {/* Header */}
+          <div className={`flex items-start justify-between gap-2 ${isMobile ? 'mb-2' : 'mb-1'}`}>
+            <div className={`flex items-center gap-2 ${isMobile ? 'flex-wrap' : ''}`}>
+              <Badge variant={getTypeClassBadgeVariant(alert.type_class)} size={isMobile ? "md" : "sm"}>
+                {alert.priority_level.toUpperCase()}
+              </Badge>
+              <Badge variant="secondary" size={isMobile ? "md" : "sm"}>
+                {alert.priority_score}
+              </Badge>
+              {alert.is_group_summary && (
+                <Badge variant="info" size={isMobile ? "md" : "sm"}>
+                  {alert.grouped_alert_count} agrupadas
+                </Badge>
+              )}
+            </div>
+            <span className={`font-medium text-[var(--text-secondary)] ${isMobile ? 'text-sm' : 'text-xs'}`}>
+              {formatTimestamp(alert.created_at)}
+            </span>
+          </div>
+
+          {/* Title */}
+          <p className={`font-medium leading-tight text-[var(--text-primary)] ${
+            isMobile ? 'text-base mb-2' : 'text-sm mb-1'
+          }`}>
+            {alert.title}
+          </p>
+
+          {/* Message */}
+          <p className={`leading-relaxed text-[var(--text-secondary)] ${
+            isMobile ? 'text-sm mb-3' : 'text-xs mb-2'
+          }`}>
+            {alert.message}
+          </p>
+
+          {/* Context Badges */}
+          <div className="flex flex-wrap gap-2 mb-3">
+            {alert.orchestrator_context?.already_addressed && (
+              <div className="flex items-center gap-1 px-2 py-1 rounded-md bg-success/10 text-success text-xs">
+                <Bot className="w-3 h-3" />
+                <span>AI ya gestionó esto</span>
+              </div>
+            )}
+            {alert.business_impact?.financial_impact_eur && (
+              <div className="flex items-center gap-1 px-2 py-1 rounded-md bg-warning/10 text-warning text-xs">
+                <DollarSign className="w-3 h-3" />
+                <span>€{alert.business_impact.financial_impact_eur.toFixed(0)} en riesgo</span>
+              </div>
+            )}
+            {alert.urgency_context?.time_until_consequence_hours && (
+              <div className="flex items-center gap-1 px-2 py-1 rounded-md bg-error/10 text-error text-xs">
+                <Clock className="w-3 h-3" />
+                <span>{formatTimeUntilConsequence(alert.urgency_context.time_until_consequence_hours)}</span>
+              </div>
+            )}
+            {alert.trend_context && (
+              <div className="flex items-center gap-1 px-2 py-1 rounded-md bg-info/10 text-info text-xs">
+                <TrendingUp className="w-3 h-3" />
+                <span>{alert.trend_context.change_percentage > 0 ? '+' : ''}{alert.trend_context.change_percentage.toFixed(1)}%</span>
+              </div>
+            )}
+          </div>
+
+          {/* AI Reasoning Summary */}
+          {alert.ai_reasoning_summary && (
+            <div className="mb-3 p-2 rounded-md bg-primary/5 border border-primary/20">
+              <div className="flex items-start gap-2">
+                <Bot className="w-4 h-4 text-primary mt-0.5 flex-shrink-0" />
+                <p className="text-xs text-[var(--text-secondary)] italic">
+                  {alert.ai_reasoning_summary}
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Smart Actions */}
+          {alert.actions && alert.actions.length > 0 && (
+            <div className={`flex flex-wrap gap-2 ${isMobile ? 'mb-3' : 'mb-2'}`}>
+              {alert.actions.slice(0, 3).map((action, idx) => (
+                <Button
+                  key={idx}
+                  size={isMobile ? "sm" : "xs"}
+                  variant={action.variant === 'primary' ? 'default' : 'ghost'}
+                  onClick={() => actionHandler.handleAction(action)}
+                  disabled={action.disabled}
+                  className={`${isMobile ? 'text-xs' : 'text-[10px]'} ${
+                    action.variant === 'danger' ? 'text-error hover:text-error-dark' : ''
+                  }`}
+                >
+                  {action.type === 'call_supplier' && <Phone className="w-3 h-3 mr-1" />}
+                  {action.type === 'navigate' && <ExternalLink className="w-3 h-3 mr-1" />}
+                  {action.label}
+                  {action.estimated_time_minutes && (
+                    <span className="ml-1 opacity-60">({action.estimated_time_minutes}m)</span>
+                  )}
+                </Button>
+              ))}
+            </div>
+          )}
+
+          {/* Standard Actions */}
+          <div className={`flex items-center gap-2 ${isMobile ? 'flex-col sm:flex-row' : ''}`}>
+            {isUnread && (
+              <Button
+                variant="ghost"
+                size={isMobile ? "md" : "sm"}
+                onClick={() => onMarkAsRead(alert.id)}
+                className={`${isMobile ? 'w-full sm:w-auto px-4 py-2 text-sm' : 'h-6 px-2 text-xs'}`}
+              >
+                <Check className={`${isMobile ? 'w-4 h-4 mr-2' : 'w-3 h-3 mr-1'}`} />
+                Marcar como leído
+              </Button>
+            )}
+            <Button
+              variant="ghost"
+              size={isMobile ? "md" : "sm"}
+              onClick={() => onRemove(alert.id)}
+              className={`text-[var(--color-error)] hover:text-[var(--color-error-dark)] ${
+                isMobile ? 'w-full sm:w-auto px-4 py-2 text-sm' : 'h-6 px-2 text-xs'
+              }`}
+            >
+              <Trash2 className={`${isMobile ? 'w-4 h-4 mr-2' : 'w-3 h-3 mr-1'}`} />
+              Eliminar
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 export const NotificationPanel: React.FC<NotificationPanelProps> = ({
   notifications,
+  enrichedAlerts = [],
   isOpen,
   onClose,
   onMarkAsRead,
@@ -94,9 +228,20 @@ export const NotificationPanel: React.FC<NotificationPanelProps> = ({
 }) => {
   if (!isOpen) return null;
 
-  const unreadNotifications = notifications.filter(n => !n.read);
+  const actionHandler = useSmartActionHandler();
+  const user = useAuthUser();
+
+  // Memoize unread notifications to prevent recalculation on every render
+  const unreadNotifications = React.useMemo(() =>
+    notifications.filter(n => !n.read),
+    [notifications]
+  );
+
   const isMobile = window.innerWidth < 768;
 
+  // Use enriched alerts if available, otherwise fallback to legacy notifications
+  const useEnrichedAlerts = enrichedAlerts.length > 0;
+
   return (
     <>
       {/* Backdrop - Only on mobile */}
@@ -167,7 +312,7 @@ export const NotificationPanel: React.FC<NotificationPanelProps> = ({
 
         {/* Notifications List */}
         <div className={`flex-1 overflow-y-auto ${isMobile ? 'px-2 py-2' : ''}`}>
-          {notifications.length === 0 ? (
+          {(useEnrichedAlerts ? enrichedAlerts.length === 0 : notifications.length === 0) ? (
             <div className={`text-center ${isMobile ? 'py-12 px-6' : 'p-8'}`}>
               <CheckCircle className={`mx-auto mb-3 ${isMobile ? 'w-12 h-12' : 'w-8 h-8'}`} style={{ color: 'var(--color-success)' }} />
               <p className={`text-[var(--text-secondary)] ${isMobile ? 'text-base' : 'text-sm'}`}>
@@ -176,91 +321,47 @@ export const NotificationPanel: React.FC<NotificationPanelProps> = ({
             </div>
           ) : (
             <div className="divide-y divide-[var(--border-primary)]">
-              {notifications.map((notification) => {
-                const SeverityIcon = getSeverityIcon(notification.severity);
-
-                return (
-                  <div
-                    key={notification.id}
-                    className={clsx(
-                      "transition-colors hover:bg-[var(--bg-secondary)] active:bg-[var(--bg-tertiary)]",
-                      isMobile ? 'px-4 py-4 mx-2 my-1 rounded-lg' : 'p-3',
-                      !notification.read && "bg-[var(--color-info)]/5"
-                    )}
-                  >
-                    <div className={`flex gap-${isMobile ? '4' : '3'}`}>
-                      {/* Icon */}
-                      <div
-                        className={`flex-shrink-0 rounded-full mt-0.5 ${isMobile ? 'p-2' : 'p-1'}`}
-                        style={{ backgroundColor: getSeverityColor(notification.severity) + '15' }}
-                      >
-                        <SeverityIcon
-                          className={`${isMobile ? 'w-5 h-5' : 'w-3 h-3'}`}
-                          style={{ color: getSeverityColor(notification.severity) }}
-                        />
-                      </div>
-
-                      {/* Content */}
-                      <div className="flex-1 min-w-0">
-                        {/* Header */}
-                        <div className={`flex items-start justify-between gap-2 ${isMobile ? 'mb-2' : 'mb-1'}`}>
-                          <div className={`flex items-center gap-2 ${isMobile ? 'flex-wrap' : ''}`}>
-                            <Badge variant={getSeverityBadge(notification.severity)} size={isMobile ? "md" : "sm"}>
-                              {notification.severity.toUpperCase()}
-                            </Badge>
-                            <Badge variant="secondary" size={isMobile ? "md" : "sm"}>
-                              {notification.item_type === 'alert' ? 'Alerta' : 'Recomendación'}
-                            </Badge>
-                          </div>
-                          <span className={`font-medium text-[var(--text-secondary)] ${isMobile ? 'text-sm' : 'text-xs'}`}>
-                            {formatTimestamp(notification.timestamp)}
-                          </span>
-                        </div>
-
-                        {/* Title */}
-                        <p className={`font-medium leading-tight text-[var(--text-primary)] ${
-                          isMobile ? 'text-base mb-2' : 'text-sm mb-1'
-                        }`}>
-                          {notification.title}
-                        </p>
-
-                        {/* Message */}
-                        <p className={`leading-relaxed text-[var(--text-secondary)] ${
-                          isMobile ? 'text-sm mb-4' : 'text-xs mb-2'
-                        }`}>
-                          {notification.message}
-                        </p>
-
-                        {/* Actions */}
-                        <div className={`flex items-center gap-2 ${isMobile ? 'flex-col sm:flex-row' : ''}`}>
-                          {!notification.read && (
-                            <Button
-                              variant="ghost"
-                              size={isMobile ? "md" : "sm"}
-                              onClick={() => onMarkAsRead(notification.id)}
-                              className={`${isMobile ? 'w-full sm:w-auto px-4 py-2 text-sm' : 'h-6 px-2 text-xs'}`}
-                            >
-                              <Check className={`${isMobile ? 'w-4 h-4 mr-2' : 'w-3 h-3 mr-1'}`} />
-                              Marcar como leído
-                            </Button>
-                          )}
-                          <Button
-                            variant="ghost"
-                            size={isMobile ? "md" : "sm"}
-                            onClick={() => onRemoveNotification(notification.id)}
-                            className={`text-[var(--color-error)] hover:text-[var(--color-error-dark)] ${
-                              isMobile ? 'w-full sm:w-auto px-4 py-2 text-sm' : 'h-6 px-2 text-xs'
-                            }`}
-                          >
-                            <Trash2 className={`${isMobile ? 'w-4 h-4 mr-2' : 'w-3 h-3 mr-1'}`} />
-                            Eliminar
-                          </Button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                );
-              })}
+              {useEnrichedAlerts ? (
+                // Render enriched alerts
+                enrichedAlerts
+                  .sort((a, b) => b.priority_score - a.priority_score)
+                  .map((alert) => (
+                    <EnrichedAlertItem
+                      key={alert.id}
+                      alert={alert}
+                      isMobile={isMobile}
+                      onMarkAsRead={onMarkAsRead}
+                      onRemove={onRemoveNotification}
+                      actionHandler={actionHandler}
+                    />
+                  ))
+              ) : (
+                // Render notifications as enriched alerts (NotificationData now has enriched fields)
+                notifications
+                  .sort((a, b) => b.priority_score - a.priority_score)
+                  .map((notification) => (
+                    <EnrichedAlertItem
+                      key={notification.id}
+                      alert={{
+                        ...notification,
+                        tenant_id: user?.tenant_id || '',
+                        status: notification.read ? 'acknowledged' : 'active',
+                        created_at: notification.timestamp,
+                        enriched_at: notification.timestamp,
+                        alert_metadata: notification.metadata || {},
+                        service: 'notification-service',
+                        alert_type: notification.item_type,
+                        actions: notification.actions || [],
+                        is_group_summary: false,
+                        placement: notification.placement || ['notification_panel']
+                      } as EnrichedAlert}
+                      isMobile={isMobile}
+                      onMarkAsRead={onMarkAsRead}
+                      onRemove={onRemoveNotification}
+                      actionHandler={actionHandler}
+                    />
+                  ))
+              )}
             </div>
           )}
         </div>

frontend/src/contexts/SSEContext.tsx

@@ -17,7 +17,7 @@ interface SSEContextType {
   addEventListener: (eventType: string, callback: (data: any) => void) => () => void;
 }
 
-const SSEContext = createContext<SSEContextType | undefined>(undefined);
+export const SSEContext = createContext<SSEContextType | undefined>(undefined);
 
 export const useSSE = () => {
   const context = useContext(SSEContext);
@@ -98,63 +98,13 @@ export const SSEProvider: React.FC<SSEProviderProps> = ({ children }) => {
         console.log('SSE connection opened');
         setIsConnected(true);
         reconnectAttempts.current = 0;
-        
+
         if (reconnectTimeoutRef.current) {
           clearTimeout(reconnectTimeoutRef.current);
           reconnectTimeoutRef.current = undefined;
         }
       };
 
-      eventSource.onmessage = (event) => {
-        try {
-          const data = JSON.parse(event.data);
-
-          // Handle different SSE message types from notification service
-          if (data.status === 'keepalive') {
-            console.log('SSE keepalive received');
-            return;
-          }
-
-          const sseEvent: SSEEvent = {
-            type: data.item_type || 'message',
-            data: data,
-            timestamp: data.timestamp || new Date().toISOString(),
-          };
-
-          setLastEvent(sseEvent);
-
-          // Show notification if it's an alert or recommendation
-          if (data.item_type && ['alert', 'recommendation'].includes(data.item_type)) {
-            let toastType: 'info' | 'success' | 'warning' | 'error' = 'info';
-
-            if (data.item_type === 'alert') {
-              if (data.severity === 'urgent') toastType = 'error';
-              else if (data.severity === 'high') toastType = 'error';
-              else if (data.severity === 'medium') toastType = 'warning';
-              else toastType = 'info';
-            } else if (data.item_type === 'recommendation') {
-              toastType = 'info';
-            }
-
-            showToast[toastType](data.message, { title: data.title || 'Notificación', duration: data.severity === 'urgent' ? 0 : 5000 });
-          }
-
-          // Trigger registered listeners
-          const listeners = eventListenersRef.current.get(sseEvent.type);
-          if (listeners) {
-            listeners.forEach(callback => callback(data));
-          }
-
-          // Also trigger 'message' listeners for backward compatibility
-          const messageListeners = eventListenersRef.current.get('message');
-          if (messageListeners) {
-            messageListeners.forEach(callback => callback(data));
-          }
-        } catch (error) {
-          console.error('Error parsing SSE message:', error);
-        }
-      };
-
       // Handle connection confirmation from gateway
       eventSource.addEventListener('connection', (event) => {
         try {
@@ -175,7 +125,7 @@ export const SSEProvider: React.FC<SSEProviderProps> = ({ children }) => {
         }
       });
 
-      // Handle alert events
+      // Handle alert events (enriched alerts from alert-processor)
       eventSource.addEventListener('alert', (event) => {
         try {
           const data = JSON.parse(event.data);
@@ -187,114 +137,45 @@ export const SSEProvider: React.FC<SSEProviderProps> = ({ children }) => {
 
           setLastEvent(sseEvent);
 
-          // Show alert toast
+          // Determine toast type based on enriched priority_level and type_class
           let toastType: 'info' | 'success' | 'warning' | 'error' = 'info';
-          if (data.severity === 'urgent') toastType = 'error';
-          else if (data.severity === 'high') toastType = 'error';
-          else if (data.severity === 'medium') toastType = 'warning';
-          else toastType = 'info';
 
-          showToast[toastType](data.message, { title: data.title || 'Alerta', duration: data.severity === 'urgent' ? 0 : 5000 });
+          // Use success toast for prevented_issue type (AI already handled)
+          if (data.type_class === 'prevented_issue') {
+            toastType = 'success';
+          } else if (data.priority_level === 'critical') {
+            toastType = 'error';
+          } else if (data.priority_level === 'important') {
+            toastType = 'warning';
+          } else if (data.priority_level === 'standard') {
+            toastType = 'info';
+          }
 
-          // Trigger listeners
+          // Show toast with enriched data
+          const title = data.title || 'Alerta';
+          const duration = data.priority_level === 'critical' ? 0 : 5000;
+
+          // Add financial impact to message if available
+          let message = data.message;
+          if (data.business_impact?.financial_impact_eur) {
+            message = `${data.message} • €${data.business_impact.financial_impact_eur} en riesgo`;
+          }
+
+          showToast[toastType](message, { title, duration });
+
+          // Trigger listeners with enriched alert data
+          // Wrap in queueMicrotask to prevent setState during render warnings
           const listeners = eventListenersRef.current.get('alert');
           if (listeners) {
-            listeners.forEach(callback => callback(data));
+            listeners.forEach(callback => {
+              queueMicrotask(() => callback(data));
+            });
           }
         } catch (error) {
           console.error('Error parsing alert event:', error);
         }
       });
 
-      // Handle recommendation events
-      eventSource.addEventListener('recommendation', (event) => {
-        try {
-          const data = JSON.parse(event.data);
-          const sseEvent: SSEEvent = {
-            type: 'recommendation',
-            data,
-            timestamp: data.timestamp || new Date().toISOString(),
-          };
-
-          setLastEvent(sseEvent);
-
-          // Show recommendation toast
-          showToast.info(data.message, { title: data.title || 'Recomendación', duration: 5000 });
-
-          // Trigger listeners
-          const listeners = eventListenersRef.current.get('recommendation');
-          if (listeners) {
-            listeners.forEach(callback => callback(data));
-          }
-        } catch (error) {
-          console.error('Error parsing recommendation event:', error);
-        }
-      });
-
-      // Handle inventory_alert events (high/urgent severity alerts from gateway)
-      eventSource.addEventListener('inventory_alert', (event) => {
-        try {
-          const data = JSON.parse(event.data);
-          const sseEvent: SSEEvent = {
-            type: 'alert',
-            data,
-            timestamp: data.timestamp || new Date().toISOString(),
-          };
-
-          setLastEvent(sseEvent);
-
-          // Show urgent alert toast
-          const toastType = data.severity === 'urgent' ? 'error' : 'error';
-
-          showToast[toastType](data.message, { title: data.title || 'Alerta de Inventario', duration: data.severity === 'urgent' ? 0 : 5000 });
-
-          // Trigger alert listeners
-          const listeners = eventListenersRef.current.get('alert');
-          if (listeners) {
-            listeners.forEach(callback => callback(data));
-          }
-        } catch (error) {
-          console.error('Error parsing inventory_alert event:', error);
-        }
-      });
-
-      // Handle generic notification events from gateway
-      eventSource.addEventListener('notification', (event) => {
-        try {
-          const data = JSON.parse(event.data);
-          const sseEvent: SSEEvent = {
-            type: data.item_type || 'notification',
-            data,
-            timestamp: data.timestamp || new Date().toISOString(),
-          };
-
-          setLastEvent(sseEvent);
-
-          // Show notification toast
-          let toastType: 'info' | 'success' | 'warning' | 'error' = 'info';
-          if (data.severity === 'urgent') toastType = 'error';
-          else if (data.severity === 'high') toastType = 'warning';
-          else if (data.severity === 'medium') toastType = 'info';
-
-          showToast[toastType](data.message, { title: data.title || 'Notificación', duration: data.severity === 'urgent' ? 0 : 5000 });
-
-          // Trigger listeners for both notification and specific type
-          const notificationListeners = eventListenersRef.current.get('notification');
-          if (notificationListeners) {
-            notificationListeners.forEach(callback => callback(data));
-          }
-
-          if (data.item_type) {
-            const typeListeners = eventListenersRef.current.get(data.item_type);
-            if (typeListeners) {
-              typeListeners.forEach(callback => callback(data));
-            }
-          }
-        } catch (error) {
-          console.error('Error parsing notification event:', error);
-        }
-      });
-
       eventSource.onerror = (error) => {
         console.error('SSE connection error:', error);
         setIsConnected(false);

frontend/src/features/demo-onboarding/utils/tour-state.ts

@@ -57,21 +57,30 @@ export const shouldStartTour = (): boolean => {
   const tourState = getTourState();
   const shouldStart = sessionStorage.getItem('demo_tour_should_start') === 'true';
 
-  console.log('[shouldStartTour] tourState:', tourState);
-  console.log('[shouldStartTour] shouldStart flag:', shouldStart);
+  // Only log in development to prevent excessive console output that might affect performance
+  if (process.env.NODE_ENV === 'development') {
+    console.log('[shouldStartTour] tourState:', tourState);
+    console.log('[shouldStartTour] shouldStart flag:', shouldStart);
+  }
 
   // If explicitly marked to start, always start (unless already completed)
   if (shouldStart) {
     if (tourState && tourState.completed) {
-      console.log('[shouldStartTour] Tour already completed, not starting');
+      if (process.env.NODE_ENV === 'development') {
+        console.log('[shouldStartTour] Tour already completed, not starting');
+      }
       return false;
     }
-    console.log('[shouldStartTour] Should start flag is true, starting tour');
+    if (process.env.NODE_ENV === 'development') {
+      console.log('[shouldStartTour] Should start flag is true, starting tour');
+    }
     return true;
   }
 
   // No explicit start flag, don't auto-start
-  console.log('[shouldStartTour] No start flag, not starting');
+  if (process.env.NODE_ENV === 'development') {
+    console.log('[shouldStartTour] No start flag, not starting');
+  }
   return false;
 };
 

frontend/src/hooks/index.ts

@@ -1,5 +1,25 @@
 // Export commonly used hooks
-export { default as useLocalStorage } from './useLocalStorage';
-export { default as useDebounce } from './useDebounce';
-export { default as useSubscription } from '../api/hooks/subscription';
-export { useTenantId, useTenantInfo, useRequiredTenant } from './useTenantId';
+export { useTenantId, useTenantInfo, useRequiredTenant } from './useTenantId';
+
+// Export new event system hooks
+export { useSSEEvents, useSSEEventsWithDedupe } from './useSSE';
+export {
+  useEventNotifications,
+  useNotificationsByDomain,
+  useProductionNotifications,
+  useInventoryNotifications,
+  useSupplyChainNotifications,
+  useOperationsNotifications,
+  useBatchNotifications,
+  useDeliveryNotifications,
+  useOrchestrationNotifications,
+} from './useEventNotifications';
+export {
+  useRecommendations,
+  useRecommendationsByDomain,
+  useRecommendationsByType,
+  useDemandRecommendations,
+  useInventoryOptimizationRecommendations,
+  useCostReductionRecommendations,
+  useHighConfidenceRecommendations,
+} from './useRecommendations';

frontend/src/hooks/useAlertActions.ts

@@ -1,71 +0,0 @@
-/**
- * useAlertActions Hook
- * Provides contextual actions for alerts
- */
-
-import { useCallback, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { NotificationData } from './useNotifications';
-import { getContextualActions, type ContextualAction } from '../utils/alertHelpers';
-
-export interface UseAlertActionsReturn {
-  getActions: (alert: NotificationData) => ContextualAction[];
-  executeAction: (alert: NotificationData, action: ContextualAction) => void;
-}
-
-/**
- * Hook to manage alert actions
- */
-export function useAlertActions(): UseAlertActionsReturn {
-  const navigate = useNavigate();
-
-  const getActions = useCallback((alert: NotificationData): ContextualAction[] => {
-    return getContextualActions(alert);
-  }, []);
-
-  const executeAction = useCallback((alert: NotificationData, action: ContextualAction) => {
-    switch (action.action) {
-      case 'order_stock':
-        if (action.route) {
-          navigate(action.route);
-        }
-        break;
-
-      case 'plan_usage':
-        if (action.route) {
-          navigate(action.route);
-        }
-        break;
-
-      case 'schedule_maintenance':
-        if (action.route) {
-          navigate(action.route);
-        }
-        break;
-
-      case 'contact_customer':
-        // In a real app, this would open a communication modal
-        console.log('Contact customer for alert:', alert.id);
-        break;
-
-      case 'view_production':
-        if (action.route) {
-          navigate(action.route);
-        }
-        break;
-
-      case 'view_details':
-        // Default: expand the alert or navigate to details
-        console.log('View details for alert:', alert.id);
-        break;
-
-      default:
-        console.log('Unknown action:', action.action);
-    }
-  }, [navigate]);
-
-  return {
-    getActions,
-    executeAction,
-  };
-}

frontend/src/hooks/useAlertAnalytics.ts

@@ -1,181 +0,0 @@
-/**
- * useAlertAnalytics Hook
- * Fetches analytics data from backend API
- */
-
-import { useState, useEffect, useCallback } from 'react';
-import { NotificationData } from './useNotifications';
-import type { AlertCategory } from '../utils/alertHelpers';
-import { useCurrentTenant } from '../stores/tenant.store';
-import { useAuthUser } from '../stores/auth.store';
-
-export interface AlertTrendData {
-  date: string;
-  count: number;
-  urgentCount: number;
-  highCount: number;
-  mediumCount: number;
-  lowCount: number;
-}
-
-export interface AlertAnalytics {
-  trends: AlertTrendData[];
-  averageResponseTime: number;
-  topCategories: Array<{ category: AlertCategory | string; count: number; percentage: number }>;
-  totalAlerts: number;
-  resolvedAlerts: number;
-  activeAlerts: number;
-  resolutionRate: number;
-  predictedDailyAverage: number;
-  busiestDay: string;
-}
-
-/**
- * Hook to fetch and display alert analytics from backend
- */
-export function useAlertAnalytics(alerts: NotificationData[], days: number = 7): AlertAnalytics {
-  const currentTenant = useCurrentTenant();
-  const user = useAuthUser();
-  const tenantId = currentTenant?.id || user?.tenant_id;
-
-  const [analytics, setAnalytics] = useState<AlertAnalytics>({
-    trends: [],
-    averageResponseTime: 0,
-    topCategories: [],
-    totalAlerts: 0,
-    resolvedAlerts: 0,
-    activeAlerts: 0,
-    resolutionRate: 0,
-    predictedDailyAverage: 0,
-    busiestDay: 'N/A',
-  });
-
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  // Fetch analytics from backend
-  const fetchAnalytics = useCallback(async () => {
-    if (!tenantId) {
-      console.warn('[useAlertAnalytics] No tenant ID found, skipping analytics fetch');
-      return;
-    }
-
-    console.log('[useAlertAnalytics] Fetching analytics for tenant:', tenantId, 'days:', days);
-    setLoading(true);
-    setError(null);
-
-    try {
-      const { getAlertAnalytics } = await import('../api/services/alert_analytics');
-      const data = await getAlertAnalytics(tenantId, days);
-      console.log('[useAlertAnalytics] Received data from API:', data);
-      setAnalytics(data);
-      console.log('[useAlertAnalytics] Analytics state updated');
-    } catch (err) {
-      console.error('[useAlertAnalytics] Failed to fetch alert analytics:', err);
-      setError(err instanceof Error ? err.message : 'Failed to fetch analytics');
-
-      // Fallback to empty state on error
-      setAnalytics({
-        trends: [],
-        averageResponseTime: 0,
-        topCategories: [],
-        totalAlerts: alerts.length,
-        resolvedAlerts: 0,
-        activeAlerts: alerts.length,
-        resolutionRate: 0,
-        predictedDailyAverage: 0,
-        busiestDay: 'N/A',
-      });
-    } finally {
-      setLoading(false);
-    }
-  }, [tenantId, days, alerts.length]);
-
-  // Fetch on mount and when days changes
-  useEffect(() => {
-    fetchAnalytics();
-  }, [fetchAnalytics]);
-
-  // Refetch when new alerts arrive (debounced)
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      fetchAnalytics();
-    }, 2000);
-
-    return () => clearTimeout(timer);
-  }, [alerts.length, fetchAnalytics]);
-
-  return analytics;
-}
-
-/**
- * Hook to export analytics tracking methods
- * Uses backend API for persistent tracking across devices
- */
-export function useAlertAnalyticsTracking() {
-  const { trackAlertInteraction } = useAlertInteractions();
-
-  const trackAcknowledgment = useCallback(async (alertId: string) => {
-    try {
-      await trackAlertInteraction(alertId, 'acknowledged');
-    } catch (error) {
-      console.error('Failed to track acknowledgment:', error);
-    }
-  }, [trackAlertInteraction]);
-
-  const trackResolution = useCallback(async (alertId: string) => {
-    try {
-      await trackAlertInteraction(alertId, 'resolved');
-    } catch (error) {
-      console.error('Failed to track resolution:', error);
-    }
-  }, [trackAlertInteraction]);
-
-  const trackSnooze = useCallback(async (alertId: string, duration: string) => {
-    try {
-      await trackAlertInteraction(alertId, 'snoozed', { duration });
-    } catch (error) {
-      console.error('Failed to track snooze:', error);
-    }
-  }, [trackAlertInteraction]);
-
-  const trackDismiss = useCallback(async (alertId: string, reason?: string) => {
-    try {
-      await trackAlertInteraction(alertId, 'dismissed', { reason });
-    } catch (error) {
-      console.error('Failed to track dismiss:', error);
-    }
-  }, [trackAlertInteraction]);
-
-  return {
-    trackAcknowledgment,
-    trackResolution,
-    trackSnooze,
-    trackDismiss,
-  };
-}
-
-/**
- * Hook for tracking alert interactions
- */
-function useAlertInteractions() {
-  const currentTenant = useCurrentTenant();
-  const user = useAuthUser();
-  const tenantId = currentTenant?.id || user?.tenant_id;
-
-  const trackAlertInteraction = useCallback(async (
-    alertId: string,
-    interactionType: 'acknowledged' | 'resolved' | 'snoozed' | 'dismissed',
-    metadata?: Record<string, any>
-  ) => {
-    if (!tenantId) {
-      console.warn('No tenant ID found, skipping interaction tracking');
-      return;
-    }
-
-    const { trackAlertInteraction: apiTrack } = await import('../api/services/alert_analytics');
-    await apiTrack(tenantId, alertId, interactionType, metadata);
-  }, [tenantId]);
-
-  return { trackAlertInteraction };
-}

frontend/src/hooks/useAlertFilters.ts

@@ -1,112 +0,0 @@
-/**
- * useAlertFilters Hook
- * Manages alert filtering state and logic
- */
-
-import { useState, useCallback, useMemo } from 'react';
-import type { AlertFilters, AlertSeverity, AlertCategory, TimeGroup } from '../utils/alertHelpers';
-
-export interface UseAlertFiltersReturn {
-  filters: AlertFilters;
-  setFilters: React.Dispatch<React.SetStateAction<AlertFilters>>;
-  toggleSeverity: (severity: AlertSeverity) => void;
-  toggleCategory: (category: AlertCategory) => void;
-  setTimeRange: (range: TimeGroup | 'all') => void;
-  setSearch: (search: string) => void;
-  toggleShowSnoozed: () => void;
-  clearFilters: () => void;
-  hasActiveFilters: boolean;
-  activeFilterCount: number;
-}
-
-const DEFAULT_FILTERS: AlertFilters = {
-  severities: [],
-  categories: [],
-  timeRange: 'all',
-  search: '',
-  showSnoozed: false,
-};
-
-/**
- * Hook to manage alert filters
- */
-export function useAlertFilters(initialFilters: Partial<AlertFilters> = {}): UseAlertFiltersReturn {
-  const [filters, setFilters] = useState<AlertFilters>({
-    ...DEFAULT_FILTERS,
-    ...initialFilters,
-  });
-
-  const toggleSeverity = useCallback((severity: AlertSeverity) => {
-    setFilters(prev => ({
-      ...prev,
-      severities: prev.severities.includes(severity)
-        ? prev.severities.filter(s => s !== severity)
-        : [...prev.severities, severity],
-    }));
-  }, []);
-
-  const toggleCategory = useCallback((category: AlertCategory) => {
-    setFilters(prev => ({
-      ...prev,
-      categories: prev.categories.includes(category)
-        ? prev.categories.filter(c => c !== category)
-        : [...prev.categories, category],
-    }));
-  }, []);
-
-  const setTimeRange = useCallback((range: TimeGroup | 'all') => {
-    setFilters(prev => ({
-      ...prev,
-      timeRange: range,
-    }));
-  }, []);
-
-  const setSearch = useCallback((search: string) => {
-    setFilters(prev => ({
-      ...prev,
-      search,
-    }));
-  }, []);
-
-  const toggleShowSnoozed = useCallback(() => {
-    setFilters(prev => ({
-      ...prev,
-      showSnoozed: !prev.showSnoozed,
-    }));
-  }, []);
-
-  const clearFilters = useCallback(() => {
-    setFilters(DEFAULT_FILTERS);
-  }, []);
-
-  const hasActiveFilters = useMemo(() => {
-    return (
-      filters.severities.length > 0 ||
-      filters.categories.length > 0 ||
-      filters.timeRange !== 'all' ||
-      filters.search.trim() !== ''
-    );
-  }, [filters]);
-
-  const activeFilterCount = useMemo(() => {
-    let count = 0;
-    if (filters.severities.length > 0) count += filters.severities.length;
-    if (filters.categories.length > 0) count += filters.categories.length;
-    if (filters.timeRange !== 'all') count += 1;
-    if (filters.search.trim() !== '') count += 1;
-    return count;
-  }, [filters]);
-
-  return {
-    filters,
-    setFilters,
-    toggleSeverity,
-    toggleCategory,
-    setTimeRange,
-    setSearch,
-    toggleShowSnoozed,
-    clearFilters,
-    hasActiveFilters,
-    activeFilterCount,
-  };
-}

frontend/src/hooks/useAlertGrouping.ts

@@ -1,102 +0,0 @@
-/**
- * useAlertGrouping Hook
- * Manages alert grouping logic and state
- */
-
-import { useMemo, useState, useCallback } from 'react';
-import { NotificationData } from './useNotifications';
-import {
-  groupAlertsByTime,
-  groupAlertsByCategory,
-  groupSimilarAlerts,
-  sortAlerts,
-  type AlertGroup,
-} from '../utils/alertHelpers';
-
-export type GroupingMode = 'none' | 'time' | 'category' | 'similarity';
-
-export interface UseAlertGroupingReturn {
-  groupedAlerts: AlertGroup[];
-  groupingMode: GroupingMode;
-  setGroupingMode: (mode: GroupingMode) => void;
-  collapsedGroups: Set<string>;
-  toggleGroupCollapse: (groupId: string) => void;
-  collapseAll: () => void;
-  expandAll: () => void;
-  isGroupCollapsed: (groupId: string) => boolean;
-}
-
-/**
- * Hook to manage alert grouping
- */
-export function useAlertGrouping(
-  alerts: NotificationData[],
-  initialMode: GroupingMode = 'time'
-): UseAlertGroupingReturn {
-  const [groupingMode, setGroupingMode] = useState<GroupingMode>(initialMode);
-  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set());
-
-  const groupedAlerts = useMemo(() => {
-    // Sort alerts first
-    const sortedAlerts = sortAlerts(alerts);
-
-    switch (groupingMode) {
-      case 'time':
-        return groupAlertsByTime(sortedAlerts);
-
-      case 'category':
-        return groupAlertsByCategory(sortedAlerts);
-
-      case 'similarity':
-        return groupSimilarAlerts(sortedAlerts);
-
-      case 'none':
-      default:
-        // Return each alert as its own group
-        return sortedAlerts.map((alert, index) => ({
-          id: `single-${alert.id}`,
-          type: 'time' as const,
-          key: alert.id,
-          title: alert.title,
-          count: 1,
-          severity: alert.severity as any,
-          alerts: [alert],
-        }));
-    }
-  }, [alerts, groupingMode]);
-
-  const toggleGroupCollapse = useCallback((groupId: string) => {
-    setCollapsedGroups(prev => {
-      const next = new Set(prev);
-      if (next.has(groupId)) {
-        next.delete(groupId);
-      } else {
-        next.add(groupId);
-      }
-      return next;
-    });
-  }, []);
-
-  const collapseAll = useCallback(() => {
-    setCollapsedGroups(new Set(groupedAlerts.map(g => g.id)));
-  }, [groupedAlerts]);
-
-  const expandAll = useCallback(() => {
-    setCollapsedGroups(new Set());
-  }, []);
-
-  const isGroupCollapsed = useCallback((groupId: string) => {
-    return collapsedGroups.has(groupId);
-  }, [collapsedGroups]);
-
-  return {
-    groupedAlerts,
-    groupingMode,
-    setGroupingMode,
-    collapsedGroups,
-    toggleGroupCollapse,
-    collapseAll,
-    expandAll,
-    isGroupCollapsed,
-  };
-}

frontend/src/hooks/useEventNotifications.ts

@@ -0,0 +1,318 @@
+/**
+ * useEventNotifications Hook
+ *
+ * Subscribe to lightweight informational notifications from the new event architecture.
+ * Subscribes to domain-specific notification channels via SSE.
+ *
+ * Examples:
+ *   const { notifications } = useEventNotifications(); // All notifications
+ *   const { notifications } = useEventNotifications({ domains: ['production'], maxAge: 3600 });
+ *   const { notifications } = useEventNotifications({ eventTypes: ['batch_completed', 'batch_started'] });
+ */
+
+import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import { useSSEEvents } from './useSSE';
+import type {
+  Notification,
+  EventDomain,
+  UseNotificationsConfig,
+} from '../types/events';
+import { isNotification } from '../types/events';
+
+interface UseEventNotificationsReturn {
+  notifications: Notification[];
+  recentNotifications: Notification[];
+  isLoading: boolean;
+  clearNotifications: () => void;
+}
+
+const DEFAULT_MAX_AGE = 3600; // 1 hour
+
+export function useEventNotifications(config: UseNotificationsConfig = {}): UseEventNotificationsReturn {
+  const {
+    domains,
+    eventTypes,
+    maxAge = DEFAULT_MAX_AGE,
+  } = config;
+
+  // Determine which channels to subscribe to
+  const channels = useMemo(() => {
+    if (!domains || domains.length === 0) {
+      // Subscribe to all notification channels
+      return ['*.notifications'];
+    }
+    // Subscribe to specific domain notification channels
+    return domains.map(domain => `${domain}.notifications`);
+  }, [domains]);
+
+  // Subscribe to SSE with channel filter
+  const { events, isConnected } = useSSEEvents({ channels });
+
+  // Filter events to notifications only
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+ // Use refs to track previous values and prevent unnecessary updates
+  const prevEventIdsRef = useRef<string>('');
+  const prevEventTypesRef = useRef<string[]>([]);
+  const prevMaxAgeRef = useRef<number>(maxAge);
+  const prevDomainsRef = useRef<string[]>(domains || []);
+
+  useEffect(() => {
+    // Check if the configuration has actually changed
+    const currentEventTypes = eventTypes || [];
+    const currentDomains = domains || [];
+    
+    const configChanged = 
+      JSON.stringify(currentEventTypes) !== JSON.stringify(prevEventTypesRef.current) ||
+      prevMaxAgeRef.current !== maxAge ||
+      JSON.stringify(currentDomains) !== JSON.stringify(prevDomainsRef.current);
+
+    // Update refs with current values
+    prevEventTypesRef.current = currentEventTypes;
+    prevMaxAgeRef.current = maxAge;
+    prevDomainsRef.current = currentDomains;
+
+    // Create current event IDs string for comparison
+    const currentEventIds = events.map(e => e.id).join(',');
+    
+    // Only process if config changed OR events actually changed
+    if (!configChanged && currentEventIds === prevEventIdsRef.current) {
+      return; // No changes, skip processing
+    }
+
+    // Update the previous event IDs
+    prevEventIdsRef.current = currentEventIds;
+
+    console.log('🔵 [useEventNotifications] Effect triggered', {
+      eventsCount: events.length,
+      eventTypes,
+      maxAge,
+      domains,
+      channels,
+    });
+
+    // Filter and process incoming events
+    const notificationEvents = events.filter(isNotification);
+    console.log('🔵 [useEventNotifications] After isNotification filter:', {
+      notificationEventsCount: notificationEvents.length,
+      eventIds: notificationEvents.map(e => e.id).join(','),
+    });
+
+    // Apply filters
+    let filtered = notificationEvents;
+
+    // Filter by event types
+    if (eventTypes && eventTypes.length > 0) {
+      filtered = filtered.filter(notification =>
+        eventTypes.includes(notification.event_type)
+      );
+      console.log('🔵 [useEventNotifications] After event type filter:', {
+        filteredCount: filtered.length,
+        requestedTypes: eventTypes,
+      });
+    }
+
+    // Filter by age (maxAge in seconds)
+    if (maxAge) {
+      const maxAgeMs = maxAge * 1000;
+      const now = Date.now();
+      filtered = filtered.filter(notification => {
+        const notificationTime = new Date(notification.created_at).getTime();
+        return now - notificationTime <= maxAgeMs;
+      });
+      console.log('🔵 [useEventNotifications] After age filter:', {
+        filteredCount: filtered.length,
+        maxAge,
+      });
+    }
+
+    // Filter expired notifications (TTL)
+    filtered = filtered.filter(notification => {
+      if (notification.expires_at) {
+        const expiryTime = new Date(notification.expires_at).getTime();
+        return Date.now() < expiryTime;
+      }
+      return true;
+    });
+    console.log('🔵 [useEventNotifications] After expiry filter:', {
+      filteredCount: filtered.length,
+    });
+
+    // Sort by timestamp (newest first)
+    filtered.sort((a, b) => {
+      const timeA = new Date(a.created_at).getTime();
+      const timeB = new Date(b.created_at).getTime();
+      return timeB - timeA;
+    });
+
+    console.log('🔵 [useEventNotifications] Setting notifications state', {
+      filteredCount: filtered.length,
+      filteredIds: filtered.map(n => n.id).join(','),
+      firstId: filtered[0]?.id,
+    });
+
+    // Only update state if the IDs have actually changed to prevent infinite loops
+    setNotifications(prev => {
+      const prevIds = prev.map(n => n.id).join(',');
+      const newIds = filtered.map(n => n.id).join(',');
+
+      console.log('🔵 [useEventNotifications] Comparing IDs:', {
+        prevIds,
+        newIds,
+        hasChanged: prevIds !== newIds,
+      });
+
+      if (prevIds === newIds) {
+        console.log('🔵 [useEventNotifications] IDs unchanged, keeping previous array reference');
+        return prev; // Keep same reference if IDs haven't changed
+      }
+
+      console.log('🔵 [useEventNotifications] IDs changed, updating state');
+      return filtered;
+    });
+    setIsLoading(false);
+  }, [events, eventTypes, maxAge, domains, channels]); // Include all dependencies
+
+  // Computed values
+  const recentNotifications = useMemo(() => {
+    // Last 10 notifications
+    return notifications.slice(0, 10);
+  }, [notifications]);
+
+  const clearNotifications = useCallback(() => {
+    setNotifications([]);
+  }, []);
+
+  return {
+    notifications,
+    recentNotifications,
+    isLoading: isLoading || !isConnected,
+    clearNotifications,
+  };
+}
+
+/**
+ * useNotificationsByDomain Hook
+ *
+ * Get notifications grouped by domain.
+ */
+export function useNotificationsByDomain(config: UseNotificationsConfig = {}) {
+  const { notifications, ...rest } = useEventNotifications(config);
+
+  const notificationsByDomain = useMemo(() => {
+    const grouped: Partial<Record<EventDomain, Notification[]>> = {};
+
+    notifications.forEach(notification => {
+      if (!grouped[notification.event_domain]) {
+        grouped[notification.event_domain] = [];
+      }
+      grouped[notification.event_domain]!.push(notification);
+    });
+
+    return grouped;
+  }, [notifications]);
+
+  return {
+    notifications,
+    notificationsByDomain,
+    ...rest,
+  };
+}
+
+/**
+ * useProductionNotifications Hook
+ *
+ * Convenience hook for production domain notifications.
+ */
+export function useProductionNotifications(eventTypes?: string[]) {
+  return useEventNotifications({
+    domains: ['production'],
+    eventTypes,
+  });
+}
+
+/**
+ * useInventoryNotifications Hook
+ *
+ * Convenience hook for inventory domain notifications.
+ */
+export function useInventoryNotifications(eventTypes?: string[]) {
+  return useEventNotifications({
+    domains: ['inventory'],
+    eventTypes,
+  });
+}
+
+/**
+ * useSupplyChainNotifications Hook
+ *
+ * Convenience hook for supply chain domain notifications.
+ */
+export function useSupplyChainNotifications(eventTypes?: string[]) {
+  return useEventNotifications({
+    domains: ['supply_chain'],
+    eventTypes,
+  });
+}
+
+/**
+ * useOperationsNotifications Hook
+ *
+ * Convenience hook for operations domain notifications (orchestration).
+ */
+export function useOperationsNotifications(eventTypes?: string[]) {
+  return useEventNotifications({
+    domains: ['operations'],
+    eventTypes,
+  });
+}
+
+/**
+ * useBatchNotifications Hook
+ *
+ * Convenience hook for production batch-related notifications.
+ */
+export function useBatchNotifications() {
+  return useEventNotifications({
+    domains: ['production'],
+    eventTypes: [
+      'batch_state_changed',
+      'batch_completed',
+      'batch_started',
+    ],
+  });
+}
+
+/**
+ * useDeliveryNotifications Hook
+ *
+ * Convenience hook for delivery-related notifications.
+ */
+export function useDeliveryNotifications() {
+  return useEventNotifications({
+    domains: ['supply_chain'],
+    eventTypes: [
+      'delivery_scheduled',
+      'delivery_arriving_soon',
+      'delivery_received',
+    ],
+  });
+}
+
+/**
+ * useOrchestrationNotifications Hook
+ *
+ * Convenience hook for orchestration run notifications.
+ */
+export function useOrchestrationNotifications() {
+  return useEventNotifications({
+    domains: ['operations'],
+    eventTypes: [
+      'orchestration_run_started',
+      'orchestration_run_completed',
+      'action_created',
+      'action_completed',
+    ],
+  });
+}

frontend/src/hooks/useNotifications.ts

@@ -1,16 +1,58 @@
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { useSSE } from '../contexts/SSEContext';
 import { calculateSnoozeUntil, type SnoozedAlert } from '../utils/alertHelpers';
 
 export interface NotificationData {
   id: string;
   item_type: 'alert' | 'recommendation';
-  severity: 'urgent' | 'high' | 'medium' | 'low';
   title: string;
   message: string;
   timestamp: string;
   read: boolean;
   metadata?: Record<string, any>;
+
+  // Enriched alert fields (REQUIRED for alerts)
+  priority_score: number;  // 0-100
+  priority_level: 'critical' | 'important' | 'standard' | 'info';
+  type_class: 'action_needed' | 'prevented_issue' | 'trend_warning' | 'escalation' | 'information';
+  orchestrator_context?: {
+    already_addressed?: boolean;
+    action_type?: string;
+    entity_id?: string;
+    delivery_date?: string;
+    reasoning?: string;
+  };
+  business_impact?: {
+    financial_impact_eur?: number;
+    affected_orders?: number;
+    affected_products?: string[];
+    stockout_risk_hours?: number;
+    customer_satisfaction_impact?: 'high' | 'medium' | 'low';
+  };
+  urgency_context?: {
+    deadline?: string;
+    time_until_consequence_hours?: number;
+    can_wait_until_tomorrow?: boolean;
+    auto_action_countdown_seconds?: number;
+  };
+  user_agency?: {
+    can_user_fix?: boolean;
+    requires_external_party?: boolean;
+    external_party_name?: string;
+    external_party_contact?: string;
+  };
+  trend_context?: {
+    metric_name?: string;
+    current_value?: number;
+    baseline_value?: number;
+    change_percentage?: number;
+    direction?: 'increasing' | 'decreasing';
+    significance?: 'high' | 'medium' | 'low';
+  };
+  actions?: any[];  // Smart actions
+  ai_reasoning_summary?: string;
+  confidence_score?: number;
+  placement?: string[];
 }
 
 const STORAGE_KEY = 'bakery-notifications';
@@ -165,12 +207,25 @@ export const useNotifications = () => {
         const initialNotifications: NotificationData[] = data.map(item => ({
           id: item.id,
           item_type: item.item_type,
-          severity: item.severity,
           title: item.title,
           message: item.message,
           timestamp: item.timestamp || new Date().toISOString(),
           read: false,
           metadata: item.metadata,
+
+          // Enriched fields (REQUIRED)
+          priority_score: item.priority_score || 50,
+          priority_level: item.priority_level || 'standard',
+          type_class: item.type_class || 'information',
+          orchestrator_context: item.orchestrator_context,
+          business_impact: item.business_impact,
+          urgency_context: item.urgency_context,
+          user_agency: item.user_agency,
+          trend_context: item.trend_context,
+          actions: item.actions || [],
+          ai_reasoning_summary: item.ai_reasoning_summary,
+          confidence_score: item.confidence_score,
+          placement: item.placement || ['notification_panel'],
         }));
 
         setNotifications(prev => {
@@ -188,17 +243,30 @@ export const useNotifications = () => {
       }
     });
 
-    // Listen for alert events
+    // Listen for alert events (enriched alerts from alert-processor)
     const removeAlertListener = addEventListener('alert', (data: any) => {
       const notification: NotificationData = {
         id: data.id,
         item_type: 'alert',
-        severity: data.severity,
         title: data.title,
         message: data.message,
         timestamp: data.timestamp || new Date().toISOString(),
         read: false,
         metadata: data.metadata,
+
+        // Enriched alert fields (REQUIRED)
+        priority_score: data.priority_score || 50,
+        priority_level: data.priority_level || 'standard',
+        type_class: data.type_class || 'action_needed',
+        orchestrator_context: data.orchestrator_context,
+        business_impact: data.business_impact,
+        urgency_context: data.urgency_context,
+        user_agency: data.user_agency,
+        trend_context: data.trend_context,
+        actions: data.actions || [],
+        ai_reasoning_summary: data.ai_reasoning_summary,
+        confidence_score: data.confidence_score,
+        placement: data.placement || ['notification_panel'],
       };
 
       setNotifications(prev => {
@@ -206,7 +274,9 @@ export const useNotifications = () => {
         const exists = prev.some(n => n.id === notification.id);
         if (exists) return prev;
 
-        return [notification, ...prev].slice(0, 50); // Keep last 50 notifications
+        const newNotifications = [notification, ...prev].slice(0, 50); // Keep last 50 notifications
+        // Only update state if there's an actual change
+        return newNotifications;
       });
       setUnreadCount(prev => prev + 1);
     });
@@ -216,12 +286,25 @@ export const useNotifications = () => {
       const notification: NotificationData = {
         id: data.id,
         item_type: 'recommendation',
-        severity: data.severity,
         title: data.title,
         message: data.message,
         timestamp: data.timestamp || new Date().toISOString(),
         read: false,
         metadata: data.metadata,
+
+        // Recommendations use info priority by default
+        priority_score: data.priority_score || 40,
+        priority_level: data.priority_level || 'info',
+        type_class: data.type_class || 'information',
+        orchestrator_context: data.orchestrator_context,
+        business_impact: data.business_impact,
+        urgency_context: data.urgency_context,
+        user_agency: data.user_agency,
+        trend_context: data.trend_context,
+        actions: data.actions || [],
+        ai_reasoning_summary: data.ai_reasoning_summary,
+        confidence_score: data.confidence_score,
+        placement: data.placement || ['notification_panel'],
       };
 
       setNotifications(prev => {
@@ -229,7 +312,9 @@ export const useNotifications = () => {
         const exists = prev.some(n => n.id === notification.id);
         if (exists) return prev;
 
-        return [notification, ...prev].slice(0, 50); // Keep last 50 notifications
+        const newNotifications = [notification, ...prev].slice(0, 50); // Keep last 50 notifications
+        // Only update state if there's an actual change
+        return newNotifications;
       });
       setUnreadCount(prev => prev + 1);
     });
@@ -260,12 +345,17 @@ export const useNotifications = () => {
   }, []);
 
   const removeNotification = useCallback((notificationId: string) => {
-    const notification = notifications.find(n => n.id === notificationId);
-    setNotifications(prev => prev.filter(n => n.id !== notificationId));
+    // Use functional state update to avoid dependency on notifications array
+    setNotifications(prev => {
+      const notification = prev.find(n => n.id === notificationId);
 
-    if (notification && !notification.read) {
-      setUnreadCount(prev => Math.max(0, prev - 1));
-    }
+      // Update unread count if necessary
+      if (notification && !notification.read) {
+        setUnreadCount(curr => Math.max(0, curr - 1));
+      }
+
+      return prev.filter(n => n.id !== notificationId);
+    });
 
     // Also remove from snoozed if present
     setSnoozedAlerts(prev => {
@@ -273,7 +363,7 @@ export const useNotifications = () => {
       updated.delete(notificationId);
       return updated;
     });
-  }, [notifications]);
+  }, []); // Fixed: No dependencies needed with functional updates
 
   const clearAllNotifications = useCallback(() => {
     setNotifications([]);
@@ -301,8 +391,17 @@ export const useNotifications = () => {
   }, []);
 
   // Check if alert is snoozed
+  // Note: This function has side effects (removes expired snoozes) but we need to avoid
+  // depending on snoozedAlerts to prevent callback recreation. We use a ref to access
+  // the latest snoozedAlerts value without triggering re-renders.
+  const snoozedAlertsRef = useRef(snoozedAlerts);
+
+  useEffect(() => {
+    snoozedAlertsRef.current = snoozedAlerts;
+  }, [snoozedAlerts]);
+
   const isAlertSnoozed = useCallback((alertId: string): boolean => {
-    const snoozed = snoozedAlerts.get(alertId);
+    const snoozed = snoozedAlertsRef.current.get(alertId);
     if (!snoozed) {
       return false;
     }
@@ -318,7 +417,7 @@ export const useNotifications = () => {
     }
 
     return true;
-  }, [snoozedAlerts]);
+  }, []); // Fixed: No dependencies, uses ref for latest state
 
   // Get snoozed alerts that are active
   const activeSnoozedAlerts = useMemo(() => {
@@ -335,25 +434,41 @@ export const useNotifications = () => {
   const markMultipleAsRead = useCallback((notificationIds: string[]) => {
     const idsSet = new Set(notificationIds);
 
-    setNotifications(prev =>
-      prev.map(notification =>
+    // Use functional state update to avoid dependency on notifications array
+    setNotifications(prev => {
+      // Calculate unread count that will be marked as read
+      const unreadToMark = prev.filter(n => idsSet.has(n.id) && !n.read).length;
+
+      // Update unread count
+      if (unreadToMark > 0) {
+        setUnreadCount(curr => Math.max(0, curr - unreadToMark));
+      }
+
+      // Return updated notifications
+      return prev.map(notification =>
         idsSet.has(notification.id)
           ? { ...notification, read: true }
           : notification
-      )
-    );
-
-    const unreadToMark = notifications.filter(n => idsSet.has(n.id) && !n.read).length;
-    setUnreadCount(prev => Math.max(0, prev - unreadToMark));
-  }, [notifications]);
+      );
+    });
+  }, []); // Fixed: No dependencies needed with functional updates
 
   const removeMultiple = useCallback((notificationIds: string[]) => {
     const idsSet = new Set(notificationIds);
 
-    const unreadToRemove = notifications.filter(n => idsSet.has(n.id) && !n.read).length;
+    // Use functional state update to avoid dependency on notifications array
+    setNotifications(prev => {
+      // Calculate unread count that will be removed
+      const unreadToRemove = prev.filter(n => idsSet.has(n.id) && !n.read).length;
 
-    setNotifications(prev => prev.filter(n => !idsSet.has(n.id)));
-    setUnreadCount(prev => Math.max(0, prev - unreadToRemove));
+      // Update unread count
+      if (unreadToRemove > 0) {
+        setUnreadCount(curr => Math.max(0, curr - unreadToRemove));
+      }
+
+      // Return filtered notifications
+      return prev.filter(n => !idsSet.has(n.id));
+    });
 
     // Also remove from snoozed
     setSnoozedAlerts(prev => {
@@ -361,7 +476,7 @@ export const useNotifications = () => {
       notificationIds.forEach(id => updated.delete(id));
       return updated;
     });
-  }, [notifications]);
+  }, []); // Fixed: No dependencies needed with functional updates
 
   const snoozeMultiple = useCallback((alertIds: string[], duration: '15min' | '1hr' | '4hr' | 'tomorrow' | number) => {
     const until = calculateSnoozeUntil(duration);

frontend/src/hooks/useRecommendations.ts

@@ -0,0 +1,230 @@
+/**
+ * useRecommendations Hook
+ *
+ * Subscribe to AI-generated recommendations with filtering.
+ * Subscribes to tenant-wide recommendations channel via SSE.
+ *
+ * Examples:
+ *   const { recommendations } = useRecommendations(); // All recommendations
+ *   const { recommendations } = useRecommendations({ domains: ['demand'], minConfidence: 0.8 });
+ *   const { recommendations } = useRecommendations({ includeDismissed: false });
+ */
+
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useSSEEvents } from './useSSE';
+import type {
+  Recommendation,
+  EventDomain,
+  UseRecommendationsConfig,
+} from '../types/events';
+import { isRecommendation } from '../types/events';
+
+interface UseRecommendationsReturn {
+  recommendations: Recommendation[];
+  activeRecommendations: Recommendation[];
+  highConfidenceRecommendations: Recommendation[];
+  isLoading: boolean;
+  dismiss: (recommendationId: string) => void;
+  clearRecommendations: () => void;
+}
+
+export function useRecommendations(config: UseRecommendationsConfig = {}): UseRecommendationsReturn {
+  const {
+    domains,
+    includeDismissed = false,
+    minConfidence = 0.0,
+  } = config;
+
+  // Recommendations are tenant-wide, not domain-specific
+  // But we can filter by domain after receiving
+  const channels = useMemo(() => ['recommendations'], []);
+
+  // Subscribe to SSE with channel filter
+  const { events, isConnected } = useSSEEvents({ channels });
+
+  // Filter events to recommendations only
+  const [recommendations, setRecommendations] = useState<Recommendation[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    // Filter and process incoming events
+    const recommendationEvents = events.filter(isRecommendation);
+
+    // Apply filters
+    let filtered = recommendationEvents;
+
+    // Filter by domain
+    if (domains && domains.length > 0) {
+      filtered = filtered.filter(rec => domains.includes(rec.event_domain));
+    }
+
+    // Filter by confidence
+    if (minConfidence > 0) {
+      filtered = filtered.filter(rec => {
+        const confidence = rec.confidence_score ?? 1.0;
+        return confidence >= minConfidence;
+      });
+    }
+
+    // Filter dismissed recommendations
+    if (!includeDismissed) {
+      filtered = filtered.filter(rec => !rec.dismissed_at);
+    }
+
+    // Sort by confidence (highest first), then by timestamp (newest first)
+    filtered.sort((a, b) => {
+      const confidenceA = a.confidence_score ?? 0.5;
+      const confidenceB = b.confidence_score ?? 0.5;
+      const confidenceDiff = confidenceB - confidenceA;
+      if (Math.abs(confidenceDiff) > 0.01) return confidenceDiff;
+
+      const timeA = new Date(a.created_at).getTime();
+      const timeB = new Date(b.created_at).getTime();
+      return timeB - timeA;
+    });
+
+    setRecommendations(filtered);
+    setIsLoading(false);
+  }, [events, domains, minConfidence, includeDismissed]);
+
+  // Computed values
+  const activeRecommendations = useMemo(() => {
+    return recommendations.filter(rec => !rec.dismissed_at);
+  }, [recommendations]);
+
+  const highConfidenceRecommendations = useMemo(() => {
+    return recommendations.filter(rec => (rec.confidence_score ?? 0.5) >= 0.8);
+  }, [recommendations]);
+
+  // Actions
+  const dismiss = useCallback((recommendationId: string) => {
+    setRecommendations(prev =>
+      prev.map(rec =>
+        rec.id === recommendationId
+          ? { ...rec, dismissed_at: new Date().toISOString() }
+          : rec
+      )
+    );
+    // TODO: Send dismissal to backend
+  }, []);
+
+  const clearRecommendations = useCallback(() => {
+    setRecommendations([]);
+  }, []);
+
+  return {
+    recommendations,
+    activeRecommendations,
+    highConfidenceRecommendations,
+    isLoading: isLoading || !isConnected,
+    dismiss,
+    clearRecommendations,
+  };
+}
+
+/**
+ * useRecommendationsByDomain Hook
+ *
+ * Get recommendations grouped by domain.
+ */
+export function useRecommendationsByDomain(config: UseRecommendationsConfig = {}) {
+  const { recommendations, ...rest } = useRecommendations(config);
+
+  const recommendationsByDomain = useMemo(() => {
+    const grouped: Partial<Record<EventDomain, Recommendation[]>> = {};
+
+    recommendations.forEach(rec => {
+      if (!grouped[rec.event_domain]) {
+        grouped[rec.event_domain] = [];
+      }
+      grouped[rec.event_domain]!.push(rec);
+    });
+
+    return grouped;
+  }, [recommendations]);
+
+  return {
+    recommendations,
+    recommendationsByDomain,
+    ...rest,
+  };
+}
+
+/**
+ * useRecommendationsByType Hook
+ *
+ * Get recommendations grouped by recommendation type.
+ */
+export function useRecommendationsByType(config: UseRecommendationsConfig = {}) {
+  const { recommendations, ...rest } = useRecommendations(config);
+
+  const recommendationsByType = useMemo(() => {
+    const grouped: Partial<Record<string, Recommendation[]>> = {};
+
+    recommendations.forEach(rec => {
+      if (!grouped[rec.recommendation_type]) {
+        grouped[rec.recommendation_type] = [];
+      }
+      grouped[rec.recommendation_type]!.push(rec);
+    });
+
+    return grouped;
+  }, [recommendations]);
+
+  return {
+    recommendations,
+    recommendationsByType,
+    ...rest,
+  };
+}
+
+/**
+ * useDemandRecommendations Hook
+ *
+ * Convenience hook for demand/forecasting recommendations.
+ */
+export function useDemandRecommendations() {
+  return useRecommendations({
+    domains: ['demand'],
+    includeDismissed: false,
+  });
+}
+
+/**
+ * useInventoryOptimizationRecommendations Hook
+ *
+ * Convenience hook for inventory optimization recommendations.
+ */
+export function useInventoryOptimizationRecommendations() {
+  return useRecommendations({
+    domains: ['inventory'],
+    includeDismissed: false,
+    minConfidence: 0.7,
+  });
+}
+
+/**
+ * useCostReductionRecommendations Hook
+ *
+ * Convenience hook for cost reduction recommendations.
+ */
+export function useCostReductionRecommendations() {
+  return useRecommendations({
+    domains: ['supply_chain'],
+    includeDismissed: false,
+    minConfidence: 0.75,
+  });
+}
+
+/**
+ * useHighConfidenceRecommendations Hook
+ *
+ * Convenience hook for high-confidence recommendations (>= 80%).
+ */
+export function useHighConfidenceRecommendations(domains?: EventDomain[]) {
+  return useRecommendations({
+    domains,
+    includeDismissed: false,
+    minConfidence: 0.8,
+  });
+}

frontend/src/hooks/useSSE.ts

@@ -0,0 +1,238 @@
+/**
+ * useSSE Hook
+ *
+ * Wrapper around SSEContext that collects and manages events.
+ * Provides a clean interface for subscribing to SSE events with channel filtering.
+ *
+ * Examples:
+ *   const { events } = useSSE(); // All events
+ *   const { events } = useSSE({ channels: ['inventory.alerts'] });
+ *   const { events } = useSSE({ channels: ['*.notifications'] });
+ */
+
+import { useContext, useEffect, useState, useCallback } from 'react';
+import { SSEContext } from '../contexts/SSEContext';
+import type { Event, Alert, Notification, Recommendation } from '../types/events';
+import { convertLegacyAlert } from '../types/events';
+
+interface UseSSEConfig {
+  channels?: string[];
+}
+
+interface UseSSEReturn {
+  events: Event[];
+  isConnected: boolean;
+  clearEvents: () => void;
+}
+
+const MAX_EVENTS = 200; // Keep last 200 events in memory
+
+export function useSSEEvents(config: UseSSEConfig = {}): UseSSEReturn {
+ const context = useContext(SSEContext);
+  const [events, setEvents] = useState<Event[]>([]);
+
+  if (!context) {
+    throw new Error('useSSE must be used within SSEProvider');
+  }
+
+  // Create a stable key for the config channels to avoid unnecessary re-renders
+  // Use JSON.stringify for reliable comparison of channel arrays
+  const channelsKey = JSON.stringify(config.channels || []);
+
+  useEffect(() => {
+    const unsubscribers: (() => void)[] = [];
+
+    // Listen to 'alert' events (can be Alert or legacy format)
+    const handleAlert = (data: any) => {
+      console.log('🟢 [useSSE] handleAlert triggered', { data });
+      let event: Event;
+
+      // Check if it's new format (has event_class) or legacy format
+      if (data.event_class === 'alert' || data.event_class === 'notification' || data.event_class === 'recommendation') {
+        // New format
+        event = data as Event;
+      } else if (data.item_type === 'alert' || data.item_type === 'recommendation') {
+        // Legacy format - convert
+        event = convertLegacyAlert(data);
+      } else {
+        // Assume it's an alert if no clear classification
+        event = { ...data, event_class: 'alert', event_domain: 'operations' } as Alert;
+      }
+
+      console.log('🟢 [useSSE] Setting events state with new alert', {
+        eventId: event.id,
+        eventClass: event.event_class,
+        eventDomain: event.event_domain,
+      });
+
+      setEvents(prev => {
+        // Check if this event already exists to prevent duplicate processing
+        const existingIndex = prev.findIndex(e => e.id === event.id);
+        if (existingIndex !== -1) {
+          // Update existing event instead of adding duplicate
+          const newEvents = [...prev];
+          newEvents[existingIndex] = event;
+          return newEvents.slice(0, MAX_EVENTS);
+        }
+        
+        // Add new event if not duplicate
+        const filtered = prev.filter(e => e.id !== event.id);
+        const newEvents = [event, ...filtered].slice(0, MAX_EVENTS);
+        console.log('🟢 [useSSE] Events array updated', {
+          prevCount: prev.length,
+          newCount: newEvents.length,
+          newEventIds: newEvents.map(e => e.id).join(','),
+        });
+        return newEvents;
+      });
+    };
+
+    unsubscribers.push(context.addEventListener('alert', handleAlert));
+
+    // Listen to 'notification' events
+    const handleNotification = (data: Notification) => {
+      setEvents(prev => {
+        // Check if this notification already exists to prevent duplicate processing
+        const existingIndex = prev.findIndex(e => e.id === data.id);
+        if (existingIndex !== -1) {
+          // Update existing notification instead of adding duplicate
+          const newEvents = [...prev];
+          newEvents[existingIndex] = data;
+          return newEvents.slice(0, MAX_EVENTS);
+        }
+        
+        // Add new notification if not duplicate
+        const filtered = prev.filter(e => e.id !== data.id);
+        return [data, ...filtered].slice(0, MAX_EVENTS);
+      });
+    };
+
+    unsubscribers.push(context.addEventListener('notification', handleNotification));
+
+    // Listen to 'recommendation' events
+    const handleRecommendation = (data: any) => {
+      let event: Recommendation;
+
+      // Handle both new and legacy formats
+      if (data.event_class === 'recommendation') {
+        event = data as Recommendation;
+      } else if (data.item_type === 'recommendation') {
+        event = convertLegacyAlert(data) as Recommendation;
+      } else {
+        event = { ...data, event_class: 'recommendation', event_domain: 'operations' } as Recommendation;
+      }
+
+      setEvents(prev => {
+        // Check if this recommendation already exists to prevent duplicate processing
+        const existingIndex = prev.findIndex(e => e.id === event.id);
+        if (existingIndex !== -1) {
+          // Update existing recommendation instead of adding duplicate
+          const newEvents = [...prev];
+          newEvents[existingIndex] = event;
+          return newEvents.slice(0, MAX_EVENTS);
+        }
+        
+        // Add new recommendation if not duplicate
+        const filtered = prev.filter(e => e.id !== event.id);
+        return [event, ...filtered].slice(0, MAX_EVENTS);
+      });
+    };
+
+    unsubscribers.push(context.addEventListener('recommendation', handleRecommendation));
+
+    // Listen to 'initial_state' event (batch load on connection)
+    const handleInitialState = (data: any) => {
+      if (Array.isArray(data)) {
+        // Convert each event to proper format
+        const initialEvents = data.map(item => {
+          if (item.event_class) {
+            return item as Event;
+          } else if (item.item_type) {
+            return convertLegacyAlert(item);
+          } else {
+            return { ...item, event_class: 'alert', event_domain: 'operations' } as Event;
+          }
+        });
+        setEvents(initialEvents.slice(0, MAX_EVENTS));
+      }
+    };
+
+    unsubscribers.push(context.addEventListener('initial_state', handleInitialState));
+
+    // Also listen to legacy 'initial_items' event
+    const handleInitialItems = (data: any) => {
+      if (Array.isArray(data)) {
+        const initialEvents = data.map(item => {
+          if (item.event_class) {
+            return item as Event;
+          } else {
+            return convertLegacyAlert(item);
+          }
+        });
+        setEvents(initialEvents.slice(0, MAX_EVENTS));
+      }
+    };
+
+    unsubscribers.push(context.addEventListener('initial_items', handleInitialItems));
+
+    return () => {
+      unsubscribers.forEach(unsub => unsub());
+    };
+  }, [context, channelsKey]); // Fixed: Added channelsKey dependency
+
+  const clearEvents = useCallback(() => {
+    setEvents([]);
+  }, []);
+
+  return {
+    events,
+    isConnected: context.isConnected,
+    clearEvents,
+  };
+}
+
+/**
+ * useSSEWithDedupe Hook
+ *
+ * Enhanced version that deduplicates events more aggressively
+ * based on event_type + entity_id for state change notifications.
+ */
+export function useSSEEventsWithDedupe(config: UseSSEConfig = {}) {
+  const { events: rawEvents, ...rest } = useSSEEvents(config);
+  const [deduplicatedEvents, setDeduplicatedEvents] = useState<Event[]>([]);
+
+  useEffect(() => {
+    // Deduplicate notifications by event_type + entity_id
+    const seen = new Set<string>();
+    const deduplicated: Event[] = [];
+
+    for (const event of rawEvents) {
+      let key: string;
+
+      if (event.event_class === 'notification') {
+        const notification = event as Notification;
+        // Deduplicate by entity (keep only latest state)
+        if (notification.entity_type && notification.entity_id) {
+          key = `${notification.event_type}:${notification.entity_type}:${notification.entity_id}`;
+        } else {
+          key = event.id;
+        }
+      } else {
+        // For alerts and recommendations, use ID
+        key = event.id;
+      }
+
+      if (!seen.has(key)) {
+        seen.add(key);
+        deduplicated.push(event);
+      }
+    }
+
+    setDeduplicatedEvents(deduplicated);
+  }, [rawEvents]);
+
+  return {
+    events: deduplicatedEvents,
+    ...rest,
+  };
+}

frontend/src/locales/en/alerts.json

@@ -46,6 +46,7 @@
     "last_run": "Last run",
     "what_ai_did": "What AI did for you"
   },
+  "no_reasoning_available": "No reasoning available",
   "metrics": {
     "hours": "{count, plural, =1 {# hour} other {# hours}}",
     "minutes": "{count, plural, =1 {# minute} other {# minutes}}",
@@ -135,14 +136,14 @@
   "trend": {
     "near_threshold": "Near threshold"
   },
-  "action_preview": {
+    "action_preview": {
     "title": "Action Preview",
     "outcome": "What will happen",
     "financial_impact": "Financial Impact",
     "affected_systems": "Affected Systems",
     "reversible": "This action can be undone",
     "not_reversible": "This action cannot be undone",
-    "confidence": "AI Confidence: {{confidence}}%",
+    "confidence": "AI Confidence: {confidence}%",
     "cancel": "Cancel",
     "confirm": "Confirm Action"
   },
@@ -288,8 +289,8 @@
       "message": "{{shift_name}} over-staffed by {{excess_percent}}%. Consider adjusting staff levels to reduce labor costs."
     },
     "po_approval_needed": {
-      "title": "Purchase Order #{{po_number}} requires approval",
-      "message": "Purchase order for {{supplier_name}} totaling {{currency}} {{total_amount}} is pending approval. Delivery required by {{required_delivery_date}}."
+      "title": "Purchase Order #{po_number} requires approval",
+      "message": "Purchase order for {supplier_name} totaling {currency} {total_amount} is pending approval. Delivery required by {required_delivery_date}."
     },
     "production_batch_start": {
       "title": "Production Batch Ready: {{product_name}}",

frontend/src/locales/en/common.json

@@ -65,8 +65,11 @@
     "continue": "Continue",
     "confirm": "Confirm",
     "expand": "Expand",
-    "collapse": "Collapse"
+    "collapse": "Collapse",
+    "save_draft": "Save Draft",
+    "confirm_receipt": "Confirm Receipt"
   },
+  "saved": "saved",
   "item": "item",
   "items": "items",
   "unknown": "Unknown",
@@ -317,10 +320,6 @@
     "profile_menu": "Profile menu",
     "close_navigation": "Close navigation"
   },
-  "header": {
-    "main_navigation": "Main navigation",
-    "open_menu": "Open navigation menu"
-  },
   "footer": {
     "company_description": "Intelligent management system for bakeries. Optimize your production, inventory and sales with artificial intelligence.",
     "sections": {
@@ -413,9 +412,14 @@
     "minimize": "Minimize",
     "accept_all": "Accept All",
     "accept_essential": "Essential Only",
-    "customize": "Customize"
+    "customize": "Customize",
+    "save_draft": "Save Draft",
+    "confirm_receipt": "Confirm Receipt"
   },
   "header": {
+    "main_navigation": "Main navigation",
+    "notifications": "Notifications",
+    "unread_count": "{{count}} unread notifications",
     "login": "Login",
     "start_free": "Start Free",
     "register": "Sign Up",

frontend/src/locales/en/dashboard.json

@@ -171,10 +171,15 @@
   "health": {
     "production_on_schedule": "Production on schedule",
     "production_delayed": "{count} production batch{count, plural, one {} other {es}} delayed",
+    "production_ai_prevented": "AI prevented {count} production delay{count, plural, one {} other {s}}",
     "all_ingredients_in_stock": "All ingredients in stock",
     "ingredients_out_of_stock": "{count} ingredient{count, plural, one {} other {s}} out of stock",
+    "inventory_ai_prevented": "AI prevented {count} inventory issue{count, plural, one {} other {s}}",
     "no_pending_approvals": "No pending approvals",
     "approvals_awaiting": "{count} purchase order{count, plural, one {} other {s}} awaiting approval",
+    "procurement_ai_created": "AI created {count} purchase order{count, plural, one {} other {s}} automatically",
+    "deliveries_on_track": "All deliveries on track",
+    "deliveries_pending": "{count} pending deliver{count, plural, one {y} other {ies}}",
     "all_systems_operational": "All systems operational",
     "critical_issues": "{count} critical issue{count, plural, one {} other {s}}",
     "headline_green": "Your bakery is running smoothly",
@@ -235,10 +240,94 @@
       "complete_setup": "Complete Setup"
     }
   },
+  "action_queue_title": "Action Queue",
+  "total_actions": "actions",
+  "all_caught_up": "All Caught Up!",
+  "no_actions_needed": "No actions needed right now",
   "orchestration": {
-    "no_runs_message": "No orchestration has been run yet. Click 'Run Daily Planning' to generate your first plan."
+    "no_runs_message": "No orchestration has been run yet. Click 'Run Daily Planning' to generate your first plan.",
+    "reasoning_title": "AI Orchestration Reasoning",
+    "no_data": "No orchestration data available yet. The AI will analyze your operations and make recommendations.",
+    "last_run": "Last run",
+    "ai_automated": "AI Automated",
+    "actions_completed": "actions completed",
+    "user_needed": "User Needed",
+    "needs_review": "needs your review",
+    "all_handled": "all handled by AI",
+    "prevented_badge": "{{count}} issue{{count, plural, one {} other {s}}} prevented",
+    "prevented_description": "AI proactively handled these before they became problems",
+    "analyzed_title": "What I Analyzed",
+    "actions_taken": "What I Did",
+    "prevented_issues": "Issues I Prevented",
+    "prevented_issues_detail": "Issue Prevention Details",
+    "estimated_impact": "Estimated Impact",
+    "impact_description": "Based on prevented stockouts, waste reduction, and optimized purchasing"
   },
   "errors": {
     "failed_to_load_stats": "Failed to load dashboard statistics. Please try again."
+  },
+  "ai_handling_rate": {
+    "title": "AI Impact This Week",
+    "subtitle": "Issues prevented before they became problems",
+    "handling_rate_label": "of alerts handled automatically",
+    "prevented_count_label": "Prevented",
+    "issues_text": "issues",
+    "savings_label": "Savings",
+    "estimated_text": "estimated",
+    "context": "Based on {total} total alerts over the last {days} days.",
+    "view_prevented_issues": "View Prevented Issues",
+    "no_prevented_issues": "No issues prevented this week - all systems running smoothly!",
+    "error_title": "Unable to load AI metrics",
+    "error_message": "Please try again later"
+  },
+  "prevented_issues": {
+    "title": "Prevented Issues",
+    "subtitle": "AI interventions this week",
+    "total_savings": "Total Saved",
+    "celebration": "Great news! AI prevented {count} issue{plural} before they became problems.",
+    "ai_insight": "AI Insight:",
+    "show_less": "Show Less",
+    "show_more": "Show {{count}} More",
+    "no_issues": "No issues prevented this week",
+    "no_issues_detail": "All systems running smoothly!",
+    "error_title": "Unable to load prevented issues"
+  },
+  "execution_progress": {
+    "title": "Today's Execution Progress",
+    "subtitle": "Plan vs Actual",
+    "production": "Production",
+    "deliveries": "Deliveries",
+    "approvals": "Approvals",
+    "status": {
+      "no_plan": "No Plan",
+      "no_deliveries": "No Deliveries",
+      "completed": "Completed",
+      "on_track": "On Track",
+      "at_risk": "At Risk"
+    },
+    "no_production_plan": "No production planned for today",
+    "no_deliveries_today": "No deliveries scheduled for today",
+    "batches_complete": "batches complete",
+    "completed": "Completed",
+    "in_progress": "In Progress",
+    "pending": "Pending",
+    "received": "Received",
+    "overdue": "Overdue",
+    "pending_approvals": "Pending Approvals",
+    "whats_next": "What's Next",
+    "starts_at": "starts at"
+  },
+  "intelligent_system": {
+    "title": "Intelligent System Summary",
+    "subtitle": "AI-powered automation working for you",
+    "ai_handling_rate": "AI Handling Rate",
+    "prevented_issues": "Issues Prevented",
+    "estimated_savings": "Estimated Savings",
+    "context": "Based on {total} alerts over the last {days} days",
+    "prevented_issues_details": "Prevented Issues Details",
+    "no_prevented_issues": "No issues prevented this week - all systems running smoothly!",
+    "celebration": "Great news! AI prevented {count} issue(s) before they became problems.",
+    "ai_insight": "AI Insight:",
+    "orchestration_title": "Latest Orchestration Run"
   }
 }

frontend/src/locales/en/inventory.json

@@ -114,5 +114,36 @@
       "INITIAL_STOCK": "Initial Stock",
       "OTHER": "Other"
     }
+  },
+  "stock_receipt_title": "Stock Receipt Confirmation",
+  "purchase_order": "Purchase Order",
+  "supplier_info": "Supplier Information",
+  "expected": "Expected",
+  "actual": "Actual",
+  "discrepancy_detected": "Discrepancy Detected",
+  "lot_total": "Lot Total",
+  "discrepancy_reason": "Discrepancy Reason",
+  "discrepancy_reason_placeholder": "Explain why the received quantity differs from expected...",
+  "lots": "Lots",
+  "lot_details": "Lot Details",
+  "quantity": "Quantity",
+  "supplier_lot_number": "Supplier Lot Number",
+  "warehouse_location": "Warehouse Location",
+  "storage_zone": "Storage Zone",
+  "quality_notes": "Quality Notes",
+  "quality_notes_placeholder": "Any quality observations or special handling notes...",
+  "add_lot": "Add Another Lot",
+  "receipt_notes": "Receipt Notes",
+  "receipt_notes_placeholder": "General notes about this delivery...",
+  "validation": {
+    "no_line_items": "At least one line item is required",
+    "at_least_one_lot": "At least one lot is required for each line item",
+    "lot_quantity_mismatch": "Lot quantities ({{actual}}) must sum to actual quantity ({{expected}})",
+    "expiration_required": "Expiration date is required",
+    "quantity_required": "Quantity must be greater than 0"
+  },
+  "errors": {
+    "save_failed": "Failed to save draft. Please try again.",
+    "confirm_failed": "Failed to confirm receipt. Please check all fields and try again."
   }
 }

frontend/src/locales/en/reasoning.json

@@ -73,6 +73,10 @@
       "green": "Everything is running smoothly",
       "yellow": "Some items need attention",
       "red": "Critical issues require immediate action",
+      "green_simple": "✅ Everything is ready for today",
+      "yellow_simple": "⚠️ Some items need attention",
+      "red_simple": "🔴 Critical issues require action",
+      "yellow_simple_with_count": "⚠️ {count} action{count, plural, one {} other {s}} needed",
       "last_updated": "Last updated",
       "next_check": "Next check",
       "never": "Never",

frontend/src/locales/es/alerts.json

@@ -46,6 +46,7 @@
     "last_run": "Última ejecución",
     "what_ai_did": "Lo que hizo la IA por ti"
   },
+  "no_reasoning_available": "No hay razonamiento disponible",
   "metrics": {
     "hours": "{count, plural, =1 {# hora} other {# horas}}",
     "minutes": "{count, plural, =1 {# minuto} other {# minutos}}",
@@ -140,7 +141,7 @@
     "affected_systems": "Sistemas Afectados",
     "reversible": "Esta acción se puede deshacer",
     "not_reversible": "Esta acción no se puede deshacer",
-    "confidence": "Confianza de IA: {{confidence}}%",
+    "confidence": "Confianza de IA: {confidence}%",
     "cancel": "Cancelar",
     "confirm": "Confirmar Acción"
   },
@@ -161,137 +162,137 @@
   },
   "alerts": {
     "critical_stock_shortage": {
-      "title": "🚨 Stock Crítico: {{ingredient_name}}",
-      "message_with_po_pending": "Solo {{current_stock}}kg de {{ingredient_name}} (necesitas {{required_stock}}kg). Ya creé {{po_id}} para entrega el {{delivery_day_name}}. Por favor aprueba €{{po_amount}}.",
-      "message_with_po_created": "Solo {{current_stock}}kg de {{ingredient_name}} (necesitas {{required_stock}}kg). Ya creé {{po_id}}. Revisa y aprueba €{{po_amount}}.",
-      "message_with_hours": "Solo {{current_stock}}kg de {{ingredient_name}} disponibles (necesitas {{required_stock}}kg en {{hours_until}} horas).",
-      "message_with_date": "Solo {{current_stock}}kg de {{ingredient_name}} disponibles (necesitas {{required_stock}}kg para producción del {{production_day_name}}).",
-      "message_generic": "Solo {{current_stock}}kg de {{ingredient_name}} disponibles (necesitas {{required_stock}}kg)."
+      "title": "🚨 Stock Crítico: {ingredient_name}",
+      "message_with_po_pending": "Solo {current_stock}kg de {ingredient_name} (necesitas {required_stock}kg). Ya creé {po_id} para entrega el {delivery_day_name}. Por favor aprueba €{po_amount}.",
+      "message_with_po_created": "Solo {current_stock}kg de {ingredient_name} (necesitas {required_stock}kg). Ya creé {po_id}. Revisa y aprueba €{po_amount}.",
+      "message_with_hours": "Solo {current_stock}kg de {ingredient_name} disponibles (necesitas {required_stock}kg en {hours_until} horas).",
+      "message_with_date": "Solo {current_stock}kg de {ingredient_name} disponibles (necesitas {required_stock}kg para producción del {production_day_name}).",
+      "message_generic": "Solo {current_stock}kg de {ingredient_name} disponibles (necesitas {required_stock}kg)."
     },
     "low_stock": {
-      "title": "⚠️ Stock Bajo: {{ingredient_name}}",
-      "message_with_po": "Stock de {{ingredient_name}}: {{current_stock}}kg (mínimo: {{minimum_stock}}kg). Ya programé PO para reposición.",
-      "message_generic": "Stock de {{ingredient_name}}: {{current_stock}}kg (mínimo: {{minimum_stock}}kg). Considera hacer un pedido."
+      "title": "⚠️ Stock Bajo: {ingredient_name}",
+      "message_with_po": "Stock de {ingredient_name}: {current_stock}kg (mínimo: {minimum_stock}kg). Ya programé PO para reposición.",
+      "message_generic": "Stock de {ingredient_name}: {current_stock}kg (mínimo: {minimum_stock}kg). Considera hacer un pedido."
     },
     "stock_depleted": {
       "title": "📦 Stock Agotado por Pedido",
-      "message_with_supplier": "Pedido #{{order_id}} requiere {{ingredient_name}} pero está agotado. Contacta a {{supplier_name}} ({{supplier_phone}}).",
-      "message_generic": "Pedido #{{order_id}} requiere {{ingredient_name}} pero está agotado. Acción inmediata requerida."
+      "message_with_supplier": "Pedido #{order_id} requiere {ingredient_name} pero está agotado. Contacta a {supplier_name} ({supplier_phone}).",
+      "message_generic": "Pedido #{order_id} requiere {ingredient_name} pero está agotado. Acción inmediata requerida."
     },
     "ingredient_shortage": {
       "title": "⚠️ Falta de Ingrediente en Producción",
-      "message_with_customers": "{{ingredient_name}} insuficiente para lotes en curso. {{affected_orders}} pedidos afectados ({{customer_names}}). Stock actual: {{current_stock}}kg, necesario: {{required_stock}}kg.",
-      "message_generic": "{{ingredient_name}} insuficiente para lotes en curso. Stock actual: {{current_stock}}kg, necesario: {{required_stock}}kg."
+      "message_with_customers": "{ingredient_name} insuficiente para lotes en curso. {affected_orders} pedidos afectados ({customer_names}). Stock actual: {current_stock}kg, necesario: {required_stock}kg.",
+      "message_generic": "{ingredient_name} insuficiente para lotes en curso. Stock actual: {current_stock}kg, necesario: {required_stock}kg."
     },
     "expired_products": {
       "title": "🚫 Productos Caducados o por Caducar",
-      "message_with_names": "{{count}} productos caducando: {{product_names}}. Valor total: €{{total_value}}.",
-      "message_generic": "{{count}} productos caducando. Valor total: €{{total_value}}."
+      "message_with_names": "{count} productos caducando: {product_names}. Valor total: €{total_value}.",
+      "message_generic": "{count} productos caducando. Valor total: €{total_value}."
     },
     "production_delay": {
-      "title": "⏰ Retraso en Producción: {{batch_name}}",
-      "message_with_customers": "Lote {{batch_name}} retrasado {{delay_minutes}} minutos. Clientes afectados: {{customer_names}}. Hora entrega original: {{scheduled_time}}.",
-      "message_with_orders": "Lote {{batch_name}} retrasado {{delay_minutes}} minutos. {{affected_orders}} pedidos afectados. Hora entrega original: {{scheduled_time}}.",
-      "message_generic": "Lote {{batch_name}} retrasado {{delay_minutes}} minutos. Hora entrega original: {{scheduled_time}}."
+      "title": "⏰ Retraso en Producción: {batch_name}",
+      "message_with_customers": "Lote {batch_name} retrasado {delay_minutes} minutos. Clientes afectados: {customer_names}. Hora entrega original: {scheduled_time}.",
+      "message_with_orders": "Lote {batch_name} retrasado {delay_minutes} minutos. {affected_orders} pedidos afectados. Hora entrega original: {scheduled_time}.",
+      "message_generic": "Lote {batch_name} retrasado {delay_minutes} minutos. Hora entrega original: {scheduled_time}."
     },
     "equipment_failure": {
-      "title": "🔧 Fallo de Equipo: {{equipment_name}}",
-      "message_with_batches": "{{equipment_name}} falló. {{affected_batches}} lotes en producción afectados ({{batch_names}}).",
-      "message_generic": "{{equipment_name}} falló. Requiere reparación inmediata."
+      "title": "🔧 Fallo de Equipo: {equipment_name}",
+      "message_with_batches": "{equipment_name} falló. {affected_batches} lotes en producción afectados ({batch_names}).",
+      "message_generic": "{equipment_name} falló. Requiere reparación inmediata."
     },
     "maintenance_required": {
-      "title": "🔧 Mantenimiento Requerido: {{equipment_name}}",
-      "message_with_hours": "{{equipment_name}} requiere mantenimiento en {{hours_until}} horas. Programa ahora para evitar interrupciones.",
-      "message_with_days": "{{equipment_name}} requiere mantenimiento en {{days_until}} días. Programa antes del {{maintenance_date}}."
+      "title": "🔧 Mantenimiento Requerido: {equipment_name}",
+      "message_with_hours": "{equipment_name} requiere mantenimiento en {hours_until} horas. Programa ahora para evitar interrupciones.",
+      "message_with_days": "{equipment_name} requiere mantenimiento en {days_until} días. Programa antes del {maintenance_date}."
     },
     "low_equipment_efficiency": {
-      "title": "📉 Baja Eficiencia: {{equipment_name}}",
-      "message": "{{equipment_name}} operando a {{efficiency_percent}}% eficiencia (esperado: >{{threshold_percent}}%). Considera mantenimiento."
+      "title": "📉 Baja Eficiencia: {equipment_name}",
+      "message": "{equipment_name} operando a {efficiency_percent}% eficiencia (esperado: >{threshold_percent}%). Considera mantenimiento."
     },
     "order_overload": {
       "title": "📊 Sobrecarga de Pedidos",
-      "message_with_orders": "Capacidad sobrecargada en {{overload_percent}}%. {{total_orders}} pedidos programados, capacidad: {{capacity_orders}}. Considera ajustar el calendario.",
-      "message_generic": "Capacidad sobrecargada en {{overload_percent}}%. Considera ajustar el calendario de producción."
+      "message_with_orders": "Capacidad sobrecargada en {overload_percent}%. {total_orders} pedidos programados, capacidad: {capacity_orders}. Considera ajustar el calendario.",
+      "message_generic": "Capacidad sobrecargada en {overload_percent}%. Considera ajustar el calendario de producción."
     },
     "supplier_delay": {
-      "title": "🚚 Retraso de Proveedor: {{supplier_name}}",
-      "message": "{{supplier_name}} retrasó entrega de {{ingredient_name}} (PO: {{po_id}}). Nueva fecha: {{new_delivery_date}}. Original: {{original_delivery_date}}."
+      "title": "🚚 Retraso de Proveedor: {supplier_name}",
+      "message": "{supplier_name} retrasó entrega de {ingredient_name} (PO: {po_id}). Nueva fecha: {new_delivery_date}. Original: {original_delivery_date}."
     },
     "temperature_breach": {
       "title": "🌡️ Violación de Temperatura",
-      "message": "Temperatura {{location}}: {{current_temp}}°C (rango: {{min_temp}}°C-{{max_temp}}°C). Duración: {{duration_minutes}} minutos."
+      "message": "Temperatura {location}: {current_temp}°C (rango: {min_temp}°C-{max_temp}°C). Duración: {duration_minutes} minutos."
     },
     "demand_surge_weekend": {
       "title": "📈 Aumento de Demanda: Fin de Semana",
-      "message": "Demanda esperada {{surge_percent}}% mayor para {{weekend_date}}. Productos afectados: {{products}}. Considera aumentar producción."
+      "message": "Demanda esperada {surge_percent}% mayor para {weekend_date}. Productos afectados: {products}. Considera aumentar producción."
     },
     "weather_impact_alert": {
       "title": "🌦️ Impacto Climático Esperado",
-      "message": "{{weather_condition}} esperado {{date}}. Impacto en demanda: {{impact_percent}}%. Productos afectados: {{products}}."
+      "message": "{weather_condition} esperado {date}. Impacto en demanda: {impact_percent}%. Productos afectados: {products}."
     },
     "holiday_preparation": {
-      "title": "🎉 Preparación para Festivo: {{holiday_name}}",
-      "message": "{{holiday_name}} en {{days_until}} días ({{holiday_date}}). Demanda esperada {{expected_increase}}% mayor. Productos clave: {{products}}."
+      "title": "🎉 Preparación para Festivo: {holiday_name}",
+      "message": "{holiday_name} en {days_until} días ({holiday_date}). Demanda esperada {expected_increase}% mayor. Productos clave: {products}."
     },
     "severe_weather_impact": {
       "title": "⛈️ Impacto Climático Severo",
-      "message": "{{weather_condition}} severo esperado {{date}}. Impacto en demanda: {{impact_percent}}%. Considera ajustar horarios de entrega."
+      "message": "{weather_condition} severo esperado {date}. Impacto en demanda: {impact_percent}%. Considera ajustar horarios de entrega."
     },
     "unexpected_demand_spike": {
       "title": "📊 Pico de Demanda Inesperado",
-      "message": "Demanda aumentó {{spike_percent}}% para {{products}}. Stock actual podría agotarse en {{hours_until_stockout}} horas."
+      "message": "Demanda aumentó {spike_percent}% para {products}. Stock actual podría agotarse en {hours_until_stockout} horas."
     },
     "demand_pattern_optimization": {
       "title": "💡 Optimización de Patrón de Demanda",
-      "message": "Patrón detectado: {{pattern_description}}. Recomienda ajustar producción de {{products}} para optimizar eficiencia."
+      "message": "Patrón detectado: {pattern_description}. Recomienda ajustar producción de {products} para optimizar eficiencia."
     },
     "inventory_optimization": {
       "title": "📦 Optimización de Inventario",
-      "message": "{{ingredient_name}} consistentemente sobre-stock por {{excess_percent}}%. Recomienda reducir pedido a {{recommended_amount}}kg."
+      "message": "{ingredient_name} consistentemente sobre-stock por {excess_percent}%. Recomienda reducir pedido a {recommended_amount}kg."
     },
     "production_efficiency": {
       "title": "⚡ Oportunidad de Eficiencia en Producción",
-      "message": "{{product_name}} más eficiente a las {{suggested_time}}. Tiempo de producción {{time_saved}} minutos menor ({{savings_percent}}% ahorro)."
+      "message": "{product_name} más eficiente a las {suggested_time}. Tiempo de producción {time_saved} minutos menor ({savings_percent}% ahorro)."
     },
     "sales_opportunity": {
       "title": "💰 Oportunidad de Ventas",
-      "message": "Alta demanda de {{products}} detectada. Considera producción adicional. Ingresos potenciales: €{{potential_revenue}}."
+      "message": "Alta demanda de {products} detectada. Considera producción adicional. Ingresos potenciales: €{potential_revenue}."
     },
     "seasonal_adjustment": {
       "title": "🍂 Ajuste Estacional Recomendado",
-      "message": "Temporada {{season}} acercándose. Ajusta producción de {{products}} basado en tendencias históricas ({{adjustment_percent}}% {{adjustment_direction}})."
+      "message": "Temporada {season} acercándose. Ajusta producción de {products} basado en tendencias históricas ({adjustment_percent}% {adjustment_direction})."
     },
     "cost_reduction": {
       "title": "💵 Oportunidad de Reducción de Costos",
-      "message": "Cambiando a {{alternative_ingredient}} puede ahorrar €{{savings_amount}}/mes. Calidad similar, menor costo."
+      "message": "Cambiando a {alternative_ingredient} puede ahorrar €{savings_amount}/mes. Calidad similar, menor costo."
     },
     "waste_reduction": {
       "title": "♻️ Oportunidad de Reducción de Desperdicio",
-      "message": "{{product_name}} desperdicio alto ({{waste_percent}}%). Recomienda reducir lote a {{recommended_quantity}} unidades."
+      "message": "{product_name} desperdicio alto ({waste_percent}%). Recomienda reducir lote a {recommended_quantity} unidades."
     },
     "quality_improvement": {
       "title": "⭐ Mejora de Calidad Recomendada",
-      "message": "{{issue_description}} detectado en {{product_name}}. Acción recomendada: {{recommended_action}}."
+      "message": "{issue_description} detectado en {product_name}. Acción recomendada: {recommended_action}."
     },
     "customer_satisfaction": {
       "title": "😊 Oportunidad de Satisfacción del Cliente",
-      "message": "Cliente {{customer_name}} consistentemente ordena {{product_name}}. Considera oferta especial o programa de lealtad."
+      "message": "Cliente {customer_name} consistentemente ordena {product_name}. Considera oferta especial o programa de lealtad."
     },
     "energy_optimization": {
       "title": "⚡ Optimización de Energía",
-      "message": "Uso de energía para {{equipment_name}} pico a las {{peak_time}}. Cambiando a {{off_peak_start}}-{{off_peak_end}} puede ahorrar €{{savings_amount}}/mes."
+      "message": "Uso de energía para {equipment_name} pico a las {peak_time}. Cambiando a {off_peak_start}-{off_peak_end} puede ahorrar €{savings_amount}/mes."
     },
     "staff_optimization": {
       "title": "👥 Optimización de Personal",
-      "message": "{{shift_name}} sobrestimado por {{excess_percent}}%. Considera ajustar niveles de personal para reducir costos laborales."
+      "message": "{shift_name} sobrestimado por {excess_percent}%. Considera ajustar niveles de personal para reducir costos laborales."
     },
     "po_approval_needed": {
-      "title": "Orden de Compra #{{po_number}} requiere aprobación",
-      "message": "Orden de compra para {{supplier_name}} por un total de {{currency}} {{total_amount}} pendiente de aprobación. Entrega requerida para {{required_delivery_date}}."
+      "title": "Orden de Compra #{po_number} requiere aprobación",
+      "message": "Orden de compra para {supplier_name} por un total de {currency} {total_amount} pendiente de aprobación. Entrega requerida para {required_delivery_date}."
     },
     "production_batch_start": {
-      "title": "Lote de Producción Listo: {{product_name}}",
-      "message": "Lote #{{batch_number}} ({{quantity_planned}} {{unit}} de {{product_name}}) está listo para comenzar. Prioridad: {{priority}}."
+      "title": "Lote de Producción Listo: {product_name}",
+      "message": "Lote #{batch_number} ({quantity_planned} {unit} de {product_name}) está listo para comenzar. Prioridad: {priority}."
     }
   }
 }

frontend/src/locales/es/common.json

@@ -65,8 +65,11 @@
     "continue": "Continuar",
     "confirm": "Confirmar",
     "expand": "Expandir",
-    "collapse": "Contraer"
+    "collapse": "Contraer",
+    "save_draft": "Guardar Borrador",
+    "confirm_receipt": "Confirmar Recepción"
   },
+  "saved": "ahorrado",
   "item": "artículo",
   "items": "artículos",
   "unknown": "Desconocido",
@@ -341,10 +344,6 @@
     "profile_menu": "Menú de perfil",
     "close_navigation": "Cerrar navegación"
   },
-  "header": {
-    "main_navigation": "Navegación principal",
-    "open_menu": "Abrir menú de navegación"
-  },
   "footer": {
     "company_description": "Sistema inteligente de gestión para panaderías. Optimiza tu producción, inventario y ventas con inteligencia artificial.",
     "sections": {
@@ -440,6 +439,9 @@
     "customize": "Personalizar"
   },
   "header": {
+    "main_navigation": "Navegación principal",
+    "notifications": "Notificaciones",
+    "unread_count": "{{count}} notificaciones sin leer",
     "login": "Iniciar Sesión",
     "start_free": "Comenzar Gratis",
     "register": "Registro",

frontend/src/locales/es/dashboard.json

@@ -107,12 +107,6 @@
       "hours_ago": "hace {{count}} h",
       "yesterday": "Ayer"
     },
-    "severity": {
-      "urgent": "Urgente",
-      "high": "Alta",
-      "medium": "Media",
-      "low": "Baja"
-    },
     "types": {
       "alert": "Alerta",
       "recommendation": "Recomendación",
@@ -134,8 +128,6 @@
     },
     "filters": {
       "search_placeholder": "Buscar alertas...",
-      "severity": "Severidad",
-      "category": "Categoría",
       "time_range": "Periodo",
       "show_snoozed": "Mostrar pospuestos",
       "active_filters": "Filtros activos:",
@@ -143,7 +135,7 @@
     },
     "grouping": {
       "by_time": "Por tiempo",
-      "by_category": "Por categoría",
+      "by_type_class": "Por tipo",
       "by_similarity": "Similares",
       "none": "Sin agrupar"
     },
@@ -206,10 +198,15 @@
   "health": {
     "production_on_schedule": "Producción a tiempo",
     "production_delayed": "{count} lote{count, plural, one {} other {s}} de producción retrasado{count, plural, one {} other {s}}",
+    "production_ai_prevented": "IA evitó {count} retraso{count, plural, one {} other {s}} de producción",
     "all_ingredients_in_stock": "Todos los ingredientes en stock",
     "ingredients_out_of_stock": "{count} ingrediente{count, plural, one {} other {s}} sin stock",
+    "inventory_ai_prevented": "IA evitó {count} problema{count, plural, one {} other {s}} de inventario",
     "no_pending_approvals": "Sin aprobaciones pendientes",
     "approvals_awaiting": "{count} orden{count, plural, one {} other {es}} de compra esperando aprobación",
+    "procurement_ai_created": "IA creó {count} orden{count, plural, one {} other {es}} de compra automáticamente",
+    "deliveries_on_track": "Todas las entregas a tiempo",
+    "deliveries_pending": "{count} entrega{count, plural, one {} other {s}} pendiente{count, plural, one {} other {s}}",
     "all_systems_operational": "Todos los sistemas operativos",
     "critical_issues": "{count} problema{count, plural, one {} other {s}} crítico{count, plural, one {} other {s}}",
     "headline_green": "Tu panadería funciona sin problemas",
@@ -251,6 +248,28 @@
       "cost_analysis": "Análisis de Costos"
     }
   },
+  "setup_banner": {
+    "title": "{{count}} paso(s) más para desbloquear todas las funciones",
+    "recommended": "(recomendado)",
+    "added": "agregado(s)",
+    "recommended_count": "Recomendado",
+    "dismiss": "Ocultar por 7 días",
+    "dismiss_info": "Puedes ocultar este banner por 7 días haciendo clic en la X",
+    "benefits_title": "✨ Al completar estos pasos, desbloquearás",
+    "benefit_1": "Análisis de costos más preciso",
+    "benefit_2": "Recomendaciones de IA mejoradas",
+    "benefit_3": "Planificación de producción optimizada"
+  },
+  "setup_wizard": {
+    "title": "🏗️ Configuración Necesaria",
+    "subtitle": "Completa estos pasos para empezar a usar tu panadería",
+    "progress": "Progreso",
+    "step": "Paso",
+    "of": "de",
+    "next": "SIGUIENTE",
+    "complete_to_continue": "Completa para continuar",
+    "setup_blocked_message": "Necesitas completar la configuración básica antes de acceder al panel de control."
+  },
   "action_queue": {
     "consequences": {
       "delayed_delivery": "La entrega retrasada puede afectar el programa de producción",
@@ -270,10 +289,94 @@
       "complete_setup": "Completar Configuración"
     }
   },
+  "action_queue_title": "Cola de Acciones",
+  "total_actions": "acciones",
+  "all_caught_up": "¡Todo al Día!",
+  "no_actions_needed": "No se necesitan acciones ahora mismo",
   "orchestration": {
-    "no_runs_message": "Aún no se ha ejecutado ninguna orquestación. Haga clic en 'Ejecutar Planificación Diaria' para generar su primer plan."
+    "no_runs_message": "Aún no se ha ejecutado ninguna orquestación. Haga clic en 'Ejecutar Planificación Diaria' para generar su primer plan.",
+    "reasoning_title": "Razonamiento de Orquestación de IA",
+    "no_data": "Aún no hay datos de orquestación disponibles. La IA analizará sus operaciones y hará recomendaciones.",
+    "last_run": "Última ejecución",
+    "ai_automated": "IA Automatizada",
+    "actions_completed": "acciones completadas",
+    "user_needed": "Usuario Necesario",
+    "needs_review": "necesita tu revisión",
+    "all_handled": "todo manejado por IA",
+    "prevented_badge": "{{count}} problema{{count, plural, one {} other {s}}} evitado{{count, plural, one {} other {s}}}",
+    "prevented_description": "La IA manejó estos proactivamente antes de que se convirtieran en problemas",
+    "analyzed_title": "Lo Que Analicé",
+    "actions_taken": "Lo Que Hice",
+    "prevented_issues": "Problemas Que Evité",
+    "prevented_issues_detail": "Detalles de Prevención de Problemas",
+    "estimated_impact": "Impacto Estimado",
+    "impact_description": "Basado en desabastecimientos evitados, reducción de desperdicios y compras optimizadas"
   },
   "errors": {
     "failed_to_load_stats": "Error al cargar las estadísticas del panel. Por favor, inténtelo de nuevo."
+  },
+  "ai_handling_rate": {
+    "title": "Impacto de IA Esta Semana",
+    "subtitle": "Problemas evitados antes de que se convirtieran en incidencias",
+    "handling_rate_label": "de alertas manejadas automáticamente",
+    "prevented_count_label": "Evitadas",
+    "issues_text": "incidencias",
+    "savings_label": "Ahorros",
+    "estimated_text": "estimados",
+    "context": "Basado en {total} alertas totales durante los últimos {days} días.",
+    "view_prevented_issues": "Ver Incidencias Evitadas",
+    "no_prevented_issues": "No se evitaron incidencias esta semana - ¡todos los sistemas funcionan correctamente!",
+    "error_title": "No se pueden cargar las métricas de IA",
+    "error_message": "Por favor, inténtelo de nuevo más tarde"
+  },
+  "prevented_issues": {
+    "title": "Incidencias Evitadas",
+    "subtitle": "Intervenciones de IA esta semana",
+    "total_savings": "Total Ahorrado",
+    "celebration": "¡Buenas noticias! La IA evitó {count} incidencia{plural} antes de que se convirtieran en problemas.",
+    "ai_insight": "Análisis de IA:",
+    "show_less": "Mostrar Menos",
+    "show_more": "Mostrar {{count}} Más",
+    "no_issues": "No se evitaron incidencias esta semana",
+    "no_issues_detail": "¡Todos los sistemas funcionan correctamente!",
+    "error_title": "No se pueden cargar las incidencias evitadas"
+  },
+  "execution_progress": {
+    "title": "Progreso de Ejecución de Hoy",
+    "subtitle": "Plan vs Real",
+    "production": "Producción",
+    "deliveries": "Entregas",
+    "approvals": "Aprobaciones",
+    "status": {
+      "no_plan": "Sin Plan",
+      "no_deliveries": "Sin Entregas",
+      "completed": "Completado",
+      "on_track": "En Marcha",
+      "at_risk": "En Riesgo"
+    },
+    "no_production_plan": "No hay producción planificada para hoy",
+    "no_deliveries_today": "No hay entregas programadas para hoy",
+    "batches_complete": "lotes completos",
+    "completed": "Completado",
+    "in_progress": "En Progreso",
+    "pending": "Pendiente",
+    "received": "Recibido",
+    "overdue": "Atrasado",
+    "pending_approvals": "Aprobaciones Pendientes",
+    "whats_next": "Qué Sigue",
+    "starts_at": "comienza a las"
+  },
+  "intelligent_system": {
+    "title": "Resumen del Sistema Inteligente",
+    "subtitle": "Automatización impulsada por IA trabajando para ti",
+    "ai_handling_rate": "Tasa de Gestión de IA",
+    "prevented_issues": "Incidencias Evitadas",
+    "estimated_savings": "Ahorros Estimados",
+    "context": "Basado en {total} alertas durante los últimos {days} días",
+    "prevented_issues_details": "Detalles de Incidencias Evitadas",
+    "no_prevented_issues": "No se evitaron incidencias esta semana - ¡todos los sistemas funcionan correctamente!",
+    "celebration": "¡Buenas noticias! La IA evitó {count} incidencia(s) antes de que se convirtieran en problemas.",
+    "ai_insight": "Análisis de IA:",
+    "orchestration_title": "Última Ejecución de Orquestación"
   }
 }

frontend/src/locales/es/reasoning.json

@@ -73,6 +73,10 @@
       "green": "Todo funciona correctamente",
       "yellow": "Algunos elementos necesitan atención",
       "red": "Problemas críticos requieren acción inmediata",
+      "green_simple": "✅ Todo listo para hoy",
+      "yellow_simple": "⚠️ Algunas cosas necesitan atención",
+      "red_simple": "🔴 Problemas críticos requieren acción",
+      "yellow_simple_with_count": "⚠️ {count} acción{count, plural, one {} other {es}} necesaria{count, plural, one {} other {s}}",
       "last_updated": "Última actualización",
       "next_check": "Próxima verificación",
       "never": "Nunca",

frontend/src/locales/eu/alerts.json

@@ -286,8 +286,8 @@
       "message": "{{shift_name}} langileak gehiegi %{{excess_percent}}z. Langile mailak doitzea kontuan hartu lan kostuak murrizteko."
     },
     "po_approval_needed": {
-      "title": "Erosketa Agindua #{{po_number}} onarpenaren beharra",
-      "message": "{{supplier_name}}-(r)entzako erosketa agindua {{currency}} {{total_amount}} onarpenaren zain. Entreaga {{required_delivery_date}}-(e)rako behar da."
+      "title": "Erosketa Agindua #{po_number} onarpenaren beharra",
+      "message": "{supplier_name}-(r)entzako erosketa agindua {currency} {total_amount} onarpenaren zain. Entreaga {required_delivery_date}-(e)rako behar da."
     },
     "production_batch_start": {
       "title": "Ekoizpen Lote Prest: {{product_name}}",

frontend/src/locales/eu/common.json

@@ -65,8 +65,11 @@
     "continue": "Jarraitu",
     "confirm": "Berretsi",
     "expand": "Zabaldu",
-    "collapse": "Tolestu"
+    "collapse": "Tolestu",
+    "save_draft": "Zirriborroa Gorde",
+    "confirm_receipt": "Harrera Berretsi"
   },
+  "saved": "aurreztuta",
   "item": "produktua",
   "items": "produktuak",
   "unknown": "Ezezaguna",
@@ -317,10 +320,6 @@
     "profile_menu": "Profil menua",
     "close_navigation": "Nabigazioa itxi"
   },
-  "header": {
-    "main_navigation": "Nabigazio nagusia",
-    "open_menu": "Nabigazioa ireki"
-  },
   "footer": {
     "company_description": "Okindegirentzako kudeaketa sistema adimentsua. Optimizatu zure ekoizpena, inbentarioa eta salmentak adimen artifizialarekin.",
     "sections": {
@@ -416,6 +415,9 @@
     "customize": "Pertsonalizatu"
   },
   "header": {
+    "main_navigation": "Nabigazio nagusia",
+    "notifications": "Jakinarazpenak",
+    "unread_count": "{{count}} jakinarazpen irakurri gabeak",
     "login": "Hasi Saioa",
     "start_free": "Hasi Doan",
     "register": "Erregistratu",

frontend/src/locales/eu/dashboard.json

@@ -169,10 +169,15 @@
   "health": {
     "production_on_schedule": "Ekoizpena orduan",
     "production_delayed": "{count} ekoizpen sorta atzeratuta",
+    "production_ai_prevented": "AIk {count} ekoizpen atzerapen saihestu {count, plural, one {du} other {ditu}}",
     "all_ingredients_in_stock": "Osagai guztiak stockean",
     "ingredients_out_of_stock": "{count} osagai stockik gabe",
+    "inventory_ai_prevented": "AIk {count} inbentario arazo saihestu {count, plural, one {du} other {ditu}}",
     "no_pending_approvals": "Ez dago onarpen pendienteik",
     "approvals_awaiting": "{count} erosketa agindu{count, plural, one {} other {k}}} onarpenaren zai",
+    "procurement_ai_created": "AIk {count} erosketa agindu sortu {count, plural, one {du} other {ditu}} automatikoki",
+    "deliveries_on_track": "Entrega guztiak orduan",
+    "deliveries_pending": "{count} entrega zain",
     "all_systems_operational": "Sistema guztiak martxan",
     "critical_issues": "{count} arazo kritiko",
     "headline_green": "Zure okindegia arazorik gabe dabil",
@@ -233,10 +238,94 @@
       "complete_setup": "Konfigurazioa Osatu"
     }
   },
+  "action_queue_title": "Ekintza Ilara",
+  "total_actions": "ekintzak",
+  "all_caught_up": "Dena Eguneratuta!",
+  "no_actions_needed": "Ez da ekintzarik behar orain",
   "orchestration": {
-    "no_runs_message": "Oraindik ez da orkestraziorik exekutatu. Sakatu 'Eguneko Plangintza Exekutatu' zure lehen plana sortzeko."
+    "no_runs_message": "Oraindik ez da orkestraziorik exekutatu. Sakatu 'Eguneko Plangintza Exekutatu' zure lehen plana sortzeko.",
+    "reasoning_title": "AI Orkestrazioaren Arrazoiketa",
+    "no_data": "Oraindik ez dago orkestrazioaren daturik eskuragarri. AIak zure eragiketak aztertuko ditu eta gomendioak egingo ditu.",
+    "last_run": "Azken exekuzioa",
+    "ai_automated": "AI Automatizatua",
+    "actions_completed": "ekintza osatu",
+    "user_needed": "Erabiltzailea Behar",
+    "needs_review": "zure berrikuspena behar du",
+    "all_handled": "guztia AIak kudeatua",
+    "prevented_badge": "{{count}} arazu saihestau{{count, plural, one {} other {}}",
+    "prevented_description": "AIak hauek proaktiboki kudeatu zituen arazo bihurtu aurretik",
+    "analyzed_title": "Zer Aztertu Nuen",
+    "actions_taken": "Zer Egin Nuen",
+    "prevented_issues": "Saihestutako Arazoak",
+    "prevented_issues_detail": "Arazo Saihespenaren Xehetasunak",
+    "estimated_impact": "Estimatutako Eragina",
+    "impact_description": "Saihestutako stockout-etan, hondakin murrizketan eta erosketa optimizatuetan oinarrituta"
   },
   "errors": {
     "failed_to_load_stats": "Huts egin du aginte-paneleko estatistikak kargatzean. Saiatu berriro mesedez."
+  },
+  "ai_handling_rate": {
+    "title": "AI Eragina Aste Honetan",
+    "subtitle": "Arazoak gertatu aurretik saihestutakoak",
+    "handling_rate_label": "alertetatik automatikoki kudeatuak",
+    "prevented_count_label": "Saihestuta",
+    "issues_text": "arazoak",
+    "savings_label": "Aurrezkiak",
+    "estimated_text": "estimatuta",
+    "context": "{total} alerta guztiak oinarri hartuta azken {days} egunetan.",
+    "view_prevented_issues": "Ikusi Saihestutako Arazoak",
+    "no_prevented_issues": "Ez da arazorik saihestau aste honetan - sistema guztiak ondo dabiltza!",
+    "error_title": "Ezin dira AI metrikak kargatu",
+    "error_message": "Saiatu berriro mesedez"
+  },
+  "prevented_issues": {
+    "title": "Saihestutako Arazoak",
+    "subtitle": "AI esku-hartzeak aste honetan",
+    "total_savings": "Aurreztutako Guztira",
+    "celebration": "Albiste onak! AIk {count} arazu{plural} saihestau ditu arazo bihurtu aurretik.",
+    "ai_insight": "AI Analisia:",
+    "show_less": "Gutxiago Erakutsi",
+    "show_more": "{{count}} Gehiago Erakutsi",
+    "no_issues": "Ez da arazorik saihestau aste honetan",
+    "no_issues_detail": "Sistema guztiak ondo dabiltza!",
+    "error_title": "Ezin dira saihestutako arazoak kargatu"
+  },
+  "execution_progress": {
+    "title": "Gaurko Exekuzio Aurrerakuntza",
+    "subtitle": "Plana vs Erreala",
+    "production": "Ekoizpena",
+    "deliveries": "Entregak",
+    "approvals": "Onarpanak",
+    "status": {
+      "no_plan": "Planik Ez",
+      "no_deliveries": "Entregarik Ez",
+      "completed": "Osatua",
+      "on_track": "Bidean",
+      "at_risk": "Arriskuan"
+    },
+    "no_production_plan": "Ez dago ekoizpen planarik gaurkoz",
+    "no_deliveries_today": "Ez dago entregarik programatuta gaurkoz",
+    "batches_complete": "lote osatu",
+    "completed": "Osatua",
+    "in_progress": "Abian",
+    "pending": "Zain",
+    "received": "Jasoa",
+    "overdue": "Berandu",
+    "pending_approvals": "Onarpen Zain",
+    "whats_next": "Zer Dator",
+    "starts_at": "hasiko da"
+  },
+  "intelligent_system": {
+    "title": "Sistema Adimentuaren Laburpena",
+    "subtitle": "IA bidezko automatizazioa zuretzat lanean",
+    "ai_handling_rate": "IAren Kudeaketa-Tasa",
+    "prevented_issues": "Saihestutako Arazoak",
+    "estimated_savings": "Aurrezki Estimatuak",
+    "context": "{total} alertatan oinarrituta azken {days} egunetan",
+    "prevented_issues_details": "Saihestutako Arazoen Xehetasunak",
+    "no_prevented_issues": "Ez da arazorik saihestatu aste honetan - sistema guztiak ondo dabiltza!",
+    "celebration": "Albiste onak! IAk {count} arazo saihestatu ditu arazo bihurtu aurretik.",
+    "ai_insight": "IAren Analisia:",
+    "orchestration_title": "Azken Orkestraketa-Exekuzioa"
   }
 }

frontend/src/locales/eu/reasoning.json

@@ -73,6 +73,10 @@
       "green": "Dena ondo dabil",
       "yellow": "Elementu batzuek arreta behar dute",
       "red": "Arazo kritikoek ekintza berehalakoa behar dute",
+      "green_simple": "✅ Dena prest gaur",
+      "yellow_simple": "⚠️ Zerbait arreta behar du",
+      "red_simple": "🔴 Arazo kritikoek ekintza behar dute",
+      "yellow_simple_with_count": "⚠️ {count} ekintza behar",
       "last_updated": "Azken eguneratzea",
       "next_check": "Hurrengo egiaztapena",
       "never": "Inoiz ez",

frontend/src/locales/index.ts

@@ -22,6 +22,7 @@ import featuresEs from './es/features.json';
 import aboutEs from './es/about.json';
 import demoEs from './es/demo.json';
 import blogEs from './es/blog.json';
+import alertsEs from './es/alerts.json';
 
 // English translations
 import commonEn from './en/common.json';
@@ -47,6 +48,7 @@ import featuresEn from './en/features.json';
 import aboutEn from './en/about.json';
 import demoEn from './en/demo.json';
 import blogEn from './en/blog.json';
+import alertsEn from './en/alerts.json';
 
 // Basque translations
 import commonEu from './eu/common.json';
@@ -72,6 +74,7 @@ import featuresEu from './eu/features.json';
 import aboutEu from './eu/about.json';
 import demoEu from './eu/demo.json';
 import blogEu from './eu/blog.json';
+import alertsEu from './eu/alerts.json';
 
 // Translation resources by language
 export const resources = {
@@ -99,6 +102,7 @@ export const resources = {
     about: aboutEs,
     demo: demoEs,
     blog: blogEs,
+    alerts: alertsEs,
   },
   en: {
     common: commonEn,
@@ -124,6 +128,7 @@ export const resources = {
     about: aboutEn,
     demo: demoEn,
     blog: blogEn,
+    alerts: alertsEn,
   },
   eu: {
     common: commonEu,
@@ -149,6 +154,7 @@ export const resources = {
     about: aboutEu,
     demo: demoEu,
     blog: blogEu,
+    alerts: alertsEu,
   },
 };
 
@@ -185,7 +191,7 @@ export const languageConfig = {
 };
 
 // Namespaces available in translations
-export const namespaces = ['common', 'auth', 'inventory', 'foodSafety', 'suppliers', 'orders', 'recipes', 'errors', 'dashboard', 'production', 'equipment', 'landing', 'settings', 'ajustes', 'reasoning', 'wizards', 'subscription', 'purchase_orders', 'help', 'features', 'about', 'demo', 'blog'] as const;
+export const namespaces = ['common', 'auth', 'inventory', 'foodSafety', 'suppliers', 'orders', 'recipes', 'errors', 'dashboard', 'production', 'equipment', 'landing', 'settings', 'ajustes', 'reasoning', 'wizards', 'subscription', 'purchase_orders', 'help', 'features', 'about', 'demo', 'blog', 'alerts'] as const;
 export type Namespace = typeof namespaces[number];
 
 // Helper function to get language display name

frontend/src/pages/app/CommunicationsPage.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+
+// Placeholder page for communications section
+// This allows the nested routing to work properly
+const CommunicationsPage: React.FC = () => {
+  return (
+    <div>
+      <Outlet />
+    </div>
+  );
+};
+
+export default CommunicationsPage;

frontend/src/pages/app/DashboardPage.legacy.tsx

@@ -1,611 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import { PageHeader } from '../../components/layout';
-import StatsGrid from '../../components/ui/Stats/StatsGrid';
-import RealTimeAlerts from '../../components/domain/dashboard/RealTimeAlerts';
-import { IncompleteIngredientsAlert } from '../../components/domain/dashboard/IncompleteIngredientsAlert';
-import { ConfigurationProgressWidget } from '../../components/domain/dashboard/ConfigurationProgressWidget';
-import PendingPOApprovals from '../../components/domain/dashboard/PendingPOApprovals';
-import TodayProduction from '../../components/domain/dashboard/TodayProduction';
-// Sustainability widget removed - now using stats in StatsGrid
-import { EditViewModal } from '../../components/ui';
-import { useTenant } from '../../stores/tenant.store';
-import { useDemoTour, shouldStartTour, clearTourStartPending } from '../../features/demo-onboarding';
-import { useDashboardStats } from '../../api/hooks/dashboard';
-import { usePurchaseOrder, useApprovePurchaseOrder, useRejectPurchaseOrder } from '../../api/hooks/purchase-orders';
-import { useBatchDetails, useUpdateBatchStatus } from '../../api/hooks/production';
-import { useRunDailyWorkflow } from '../../api';
-import { ProductionStatusEnum } from '../../api';
-import {
-  AlertTriangle,
- Clock,
-  Euro,
-  Package,
-  FileText,
-  Building2,
-  Calendar,
-  CheckCircle,
-  X,
-  ShoppingCart,
-  Factory,
-  Timer,
-  TrendingDown,
-  Leaf,
-  Play
-} from 'lucide-react';
-import { showToast } from '../../utils/toast';
-
-const DashboardPage: React.FC = () => {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const { availableTenants, currentTenant } = useTenant();
-  const { startTour } = useDemoTour();
-  const isDemoMode = localStorage.getItem('demo_mode') === 'true';
-
-  // Modal state management
-  const [selectedPOId, setSelectedPOId] = useState<string | null>(null);
-  const [selectedBatchId, setSelectedBatchId] = useState<string | null>(null);
-  const [showPOModal, setShowPOModal] = useState(false);
-  const [showBatchModal, setShowBatchModal] = useState(false);
-  const [approvalNotes, setApprovalNotes] = useState('');
-
-  // Fetch real dashboard statistics
-  const { data: dashboardStats, isLoading: isLoadingStats, error: statsError } = useDashboardStats(
-    currentTenant?.id || '',
-    {
-      enabled: !!currentTenant?.id,
-    }
-  );
-
-  // Fetch PO details when modal is open
-  const { data: poDetails, isLoading: isLoadingPO } = usePurchaseOrder(
-    currentTenant?.id || '',
-    selectedPOId || '',
-    {
-      enabled: !!currentTenant?.id && !!selectedPOId && showPOModal
-    }
-  );
-
-  // Fetch Production batch details when modal is open
-  const { data: batchDetails, isLoading: isLoadingBatch } = useBatchDetails(
-    currentTenant?.id || '',
-    selectedBatchId || '',
-    {
-      enabled: !!currentTenant?.id && !!selectedBatchId && showBatchModal
-    }
-  );
-
-  // Mutations
-  const approvePOMutation = useApprovePurchaseOrder();
-  const rejectPOMutation = useRejectPurchaseOrder();
-  const updateBatchStatusMutation = useUpdateBatchStatus();
-  const orchestratorMutation = useRunDailyWorkflow();
-
-  const handleRunOrchestrator = async () => {
-    try {
-      await orchestratorMutation.mutateAsync(currentTenant?.id || '');
-      showToast.success('Flujo de planificación ejecutado exitosamente');
-    } catch (error) {
-      console.error('Error running orchestrator:', error);
-      showToast.error('Error al ejecutar flujo de planificación');
-    }
-  };
-
-  useEffect(() => {
-    console.log('[Dashboard] Demo mode:', isDemoMode);
-    console.log('[Dashboard] Should start tour:', shouldStartTour());
-    console.log('[Dashboard] SessionStorage demo_tour_should_start:', sessionStorage.getItem('demo_tour_should_start'));
-    console.log('[Dashboard] SessionStorage demo_tour_start_step:', sessionStorage.getItem('demo_tour_start_step'));
-
-    // Check if there's a tour intent from redirection (higher priority)
-    const shouldStartFromRedirect = sessionStorage.getItem('demo_tour_should_start') === 'true';
-    const redirectStartStep = parseInt(sessionStorage.getItem('demo_tour_start_step') || '0', 10);
-
-    if (isDemoMode && (shouldStartTour() || shouldStartFromRedirect)) {
-      console.log('[Dashboard] Starting tour in 1.5s...');
-      const timer = setTimeout(() => {
-        console.log('[Dashboard] Executing startTour()');
-        if (shouldStartFromRedirect) {
-          // Start tour from the specific step that was intended
-          startTour(redirectStartStep);
-          // Clear the redirect intent
-          sessionStorage.removeItem('demo_tour_should_start');
-          sessionStorage.removeItem('demo_tour_start_step');
-        } else {
-          // Start tour normally (from beginning or resume)
-          startTour();
-          clearTourStartPending();
-        }
-      }, 1500);
-
-      return () => clearTimeout(timer);
-    }
-  }, [isDemoMode, startTour]);
-
-  const handleViewAllProcurement = () => {
-    navigate('/app/operations/procurement');
-  };
-
-  const handleViewAllProduction = () => {
-    navigate('/app/operations/production');
-  };
-
-  const handleOrderItem = (itemId: string) => {
-    console.log('Ordering item:', itemId);
-    navigate('/app/operations/procurement');
-  };
-
-  const handleStartBatch = async (batchId: string) => {
-    try {
-      await updateBatchStatusMutation.mutateAsync({
-        tenantId: currentTenant?.id || '',
-        batchId,
-        statusUpdate: { status: ProductionStatusEnum.IN_PROGRESS }
-      });
-      showToast.success('Lote iniciado');
-    } catch (error) {
-      console.error('Error starting batch:', error);
-      showToast.error('Error al iniciar lote');
-    }
-  };
-
-  const handlePauseBatch = async (batchId: string) => {
-    try {
-      await updateBatchStatusMutation.mutateAsync({
-        tenantId: currentTenant?.id || '',
-        batchId,
-        statusUpdate: { status: ProductionStatusEnum.ON_HOLD }
-      });
-      showToast.success('Lote pausado');
-    } catch (error) {
-      console.error('Error pausing batch:', error);
-      showToast.error('Error al pausar lote');
-    }
-  };
-
-  const handleViewDetails = (batchId: string) => {
-    setSelectedBatchId(batchId);
-    setShowBatchModal(true);
-  };
-
-  const handleApprovePO = async (poId: string) => {
-    try {
-      await approvePOMutation.mutateAsync({
-        tenantId: currentTenant?.id || '',
-        poId,
-        notes: 'Aprobado desde el dashboard'
-      });
-      showToast.success('Orden aprobada');
-    } catch (error) {
-      console.error('Error approving PO:', error);
-      showToast.error('Error al aprobar orden');
-    }
-  };
-
-  const handleRejectPO = async (poId: string) => {
-    try {
-      await rejectPOMutation.mutateAsync({
-        tenantId: currentTenant?.id || '',
-        poId,
-        reason: 'Rechazado desde el dashboard'
-      });
-      showToast.success('Orden rechazada');
-    } catch (error) {
-      console.error('Error rejecting PO:', error);
-      showToast.error('Error al rechazar orden');
-    }
-  };
-
-  const handleViewPODetails = (poId: string) => {
-    setSelectedPOId(poId);
-    setShowPOModal(true);
-  };
-
-  const handleViewAllPOs = () => {
-    navigate('/app/operations/procurement');
-  };
-
-  // Build stats from real API data (Sales analytics removed - Professional/Enterprise tier only)
-  const criticalStats = React.useMemo(() => {
-    if (!dashboardStats) {
-      // Return loading/empty state
-      return [];
-    }
-
-    // Determine trend direction
-    const getTrendDirection = (value: number): 'up' | 'down' | 'neutral' => {
-      if (value > 0) return 'up';
-      if (value < 0) return 'down';
-      return 'neutral';
-    };
-
-    return [
-      {
-        title: t('dashboard:stats.pending_orders', 'Pending Orders'),
-        value: dashboardStats.pendingOrders.toString(),
-        icon: Clock,
-        variant: dashboardStats.pendingOrders > 10 ? ('warning' as const) : ('info' as const),
-        trend: dashboardStats.ordersTrend !== 0 ? {
-          value: Math.abs(dashboardStats.ordersTrend),
-          direction: getTrendDirection(dashboardStats.ordersTrend),
-          label: t('dashboard:trends.vs_yesterday', '% vs yesterday')
-        } : undefined,
-        subtitle: dashboardStats.pendingOrders > 0
-          ? t('dashboard:messages.require_attention', 'Require attention')
-          : t('dashboard:messages.all_caught_up', 'All caught up!')
-      },
-      {
-        title: t('dashboard:stats.stock_alerts', 'Critical Stock'),
-        value: dashboardStats.criticalStock.toString(),
-        icon: AlertTriangle,
-        variant: dashboardStats.criticalStock > 0 ? ('error' as const) : ('success' as const),
-        trend: undefined, // Stock alerts don't have historical trends
-        subtitle: dashboardStats.criticalStock > 0
-          ? t('dashboard:messages.action_required', 'Action required')
-          : t('dashboard:messages.stock_healthy', 'Stock levels healthy')
-      },
-      {
-        title: t('dashboard:stats.waste_reduction', 'Waste Reduction'),
-        value: dashboardStats.wasteReductionPercentage
-          ? `${Math.abs(dashboardStats.wasteReductionPercentage).toFixed(1)}%`
-          : '0%',
-        icon: TrendingDown,
-        variant: (dashboardStats.wasteReductionPercentage || 0) >= 15 ? ('success' as const) : ('info' as const),
-        trend: undefined,
-        subtitle: (dashboardStats.wasteReductionPercentage || 0) >= 15
-          ? t('dashboard:messages.excellent_progress', 'Excellent progress!')
-          : t('dashboard:messages.keep_improving', 'Keep improving')
-      },
-      {
-        title: t('dashboard:stats.monthly_savings', 'Monthly Savings'),
-        value: dashboardStats.monthlySavingsEur
-          ? `€${dashboardStats.monthlySavingsEur.toFixed(0)}`
-          : '€0',
-        icon: Leaf,
-        variant: 'success' as const,
-        trend: undefined,
-        subtitle: t('dashboard:messages.from_sustainability', 'From sustainability')
-      }
-    ];
-  }, [dashboardStats, t]);
-
-  // Helper function to build PO detail sections (reused from ProcurementPage)
-  const buildPODetailsSections = (po: any) => {
-    if (!po) return [];
-
-    const getPOStatusConfig = (status: string) => {
-      const normalizedStatus = status?.toUpperCase().replace(/_/g, '_');
-      const configs: Record<string, any> = {
-        PENDING_APPROVAL: { text: 'Pendiente de Aprobación', color: 'var(--color-warning)' },
-        APPROVED: { text: 'Aprobado', color: 'var(--color-success)' },
-        SENT_TO_SUPPLIER: { text: 'Enviado al Proveedor', color: 'var(--color-info)' },
-        CONFIRMED: { text: 'Confirmado', color: 'var(--color-success)' },
-        RECEIVED: { text: 'Recibido', color: 'var(--color-success)' },
-        COMPLETED: { text: 'Completado', color: 'var(--color-success)' },
-        CANCELLED: { text: 'Cancelado', color: 'var(--color-error)' },
-      };
-      return configs[normalizedStatus] || { text: status, color: 'var(--color-info)' };
-    };
-
-    const statusConfig = getPOStatusConfig(po.status);
-
-    return [
-      {
-        title: 'Información General',
-        icon: FileText,
-        fields: [
-          { label: 'Número de Orden', value: po.po_number, type: 'text' as const },
-          { label: 'Estado', value: statusConfig.text, type: 'status' as const },
-          { label: 'Prioridad', value: po.priority === 'urgent' ? 'Urgente' : po.priority === 'high' ? 'Alta' : po.priority === 'low' ? 'Baja' : 'Normal', type: 'text' as const },
-          { label: 'Fecha de Creación', value: new Date(po.created_at).toLocaleDateString('es-ES', { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' }), type: 'text' as const }
-        ]
-      },
-      {
-        title: 'Información del Proveedor',
-        icon: Building2,
-        fields: [
-          { label: 'Proveedor', value: po.supplier?.name || po.supplier_name || 'N/A', type: 'text' as const },
-          { label: 'Email', value: po.supplier?.contact_email || 'N/A', type: 'text' as const },
-          { label: 'Teléfono', value: po.supplier?.contact_phone || 'N/A', type: 'text' as const }
-        ]
-      },
-      {
-        title: 'Resumen Financiero',
-        icon: Euro,
-        fields: [
-          { label: 'Subtotal', value: `€${(typeof po.subtotal === 'string' ? parseFloat(po.subtotal) : po.subtotal || 0).toFixed(2)}`, type: 'text' as const },
-          { label: 'Impuestos', value: `€${(typeof po.tax_amount === 'string' ? parseFloat(po.tax_amount) : po.tax_amount || 0).toFixed(2)}`, type: 'text' as const },
-          { label: 'TOTAL', value: `€${(typeof po.total_amount === 'string' ? parseFloat(po.total_amount) : po.total_amount || 0).toFixed(2)}`, type: 'text' as const, highlight: true }
-        ]
-      },
-      {
-        title: 'Entrega',
-        icon: Calendar,
-        fields: [
-          { label: 'Fecha Requerida', value: po.required_delivery_date ? new Date(po.required_delivery_date).toLocaleDateString('es-ES', { year: 'numeric', month: 'long', day: 'numeric' }) : 'No especificada', type: 'text' as const },
-          { label: 'Fecha Esperada', value: po.expected_delivery_date ? new Date(po.expected_delivery_date).toLocaleDateString('es-ES', { year: 'numeric', month: 'long', day: 'numeric' }) : 'No especificada', type: 'text' as const }
-        ]
-      }
-    ];
-  };
-
-  // Helper function to build Production batch detail sections
-  const buildBatchDetailsSections = (batch: any) => {
-    if (!batch) return [];
-
-    return [
-      {
-        title: 'Información General',
-        icon: Package,
-        fields: [
-          { label: 'Producto', value: batch.product_name, type: 'text' as const, highlight: true },
-          { label: 'Número de Lote', value: batch.batch_number, type: 'text' as const },
-          { label: 'Cantidad Planificada', value: `${batch.planned_quantity} unidades`, type: 'text' as const },
-          { label: 'Cantidad Real', value: batch.actual_quantity ? `${batch.actual_quantity} unidades` : 'Pendiente', type: 'text' as const },
-          { label: 'Estado', value: batch.status, type: 'text' as const },
-          { label: 'Prioridad', value: batch.priority, type: 'text' as const }
-        ]
-      },
-      {
-        title: 'Cronograma',
-        icon: Clock,
-        fields: [
-          { label: 'Inicio Planificado', value: batch.planned_start_time ? new Date(batch.planned_start_time).toLocaleString('es-ES') : 'No especificado', type: 'text' as const },
-          { label: 'Fin Planificado', value: batch.planned_end_time ? new Date(batch.planned_end_time).toLocaleString('es-ES') : 'No especificado', type: 'text' as const },
-          { label: 'Inicio Real', value: batch.actual_start_time ? new Date(batch.actual_start_time).toLocaleString('es-ES') : 'Pendiente', type: 'text' as const },
-          { label: 'Fin Real', value: batch.actual_end_time ? new Date(batch.actual_end_time).toLocaleString('es-ES') : 'Pendiente', type: 'text' as const }
-        ]
-      },
-      {
-        title: 'Producción',
-        icon: Factory,
-        fields: [
-          { label: 'Personal Asignado', value: batch.staff_assigned?.join(', ') || 'No asignado', type: 'text' as const },
-          { label: 'Estación', value: batch.station_id || 'No asignada', type: 'text' as const },
-          { label: 'Duración Planificada', value: batch.planned_duration_minutes ? `${batch.planned_duration_minutes} minutos` : 'No especificada', type: 'text' as const }
-        ]
-      },
-      {
-        title: 'Calidad y Costos',
-        icon: CheckCircle,
-        fields: [
-          { label: 'Puntuación de Calidad', value: batch.quality_score ? `${batch.quality_score}/10` : 'Pendiente', type: 'text' as const },
-          { label: 'Rendimiento', value: batch.yield_percentage ? `${batch.yield_percentage}%` : 'Calculando...', type: 'text' as const },
-          { label: 'Costo Estimado', value: batch.estimated_cost ? `€${batch.estimated_cost}` : '€0.00', type: 'text' as const },
-          { label: 'Costo Real', value: batch.actual_cost ? `€${batch.actual_cost}` : '€0.00', type: 'text' as const }
-        ]
-      }
-    ];
-  };
-
-  return (
-    <div className="space-y-6 p-4 sm:p-6">
-      <PageHeader
-        title={t('dashboard:title', 'Dashboard')}
-        description={t('dashboard:subtitle', 'Overview of your bakery operations')}
-        actions={[
-          {
-            id: 'run-orchestrator',
-            label: orchestratorMutation.isPending ? 'Ejecutando...' : 'Ejecutar Planificación Diaria',
-            icon: Play,
-            onClick: handleRunOrchestrator,
-            variant: 'primary', // Primary button for visibility
-            size: 'sm',
-            disabled: orchestratorMutation.isPending,
-            loading: orchestratorMutation.isPending
-          }
-        ]}
-      />
-
-      {/* Critical Metrics using StatsGrid */}
-      <div data-tour="dashboard-stats">
-        {isLoadingStats ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-            {[1, 2, 3, 4].map((i) => (
-              <div
-                key={i}
-                className="h-32 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg animate-pulse"
-              />
-            ))}
-          </div>
-        ) : statsError ? (
-          <div className="mb-6 p-4 bg-[var(--color-error)]/10 border border-[var(--color-error)]/20 rounded-lg">
-            <p className="text-[var(--color-error)] text-sm">
-              {t('dashboard:errors.failed_to_load_stats', 'Failed to load dashboard statistics. Please try again.')}
-            </p>
-          </div>
-        ) : (
-          <StatsGrid
-            stats={criticalStats}
-            columns={4}
-            gap="lg"
-            className="mb-6"
-          />
-        )}
-      </div>
-
-      {/* Dashboard Content - Main Sections */}
-      <div className="space-y-6">
-        {/* 0. Configuration Progress Widget */}
-        <ConfigurationProgressWidget />
-
-        {/* 1. Real-time Alerts */}
-        <div data-tour="real-time-alerts">
-          <RealTimeAlerts />
-        </div>
-
-        {/* 1.5. Incomplete Ingredients Alert */}
-        <IncompleteIngredientsAlert />
-
-        {/* 2. Pending PO Approvals - What purchase orders need approval? */}
-        <div data-tour="pending-po-approvals">
-          <PendingPOApprovals
-            onApprovePO={handleApprovePO}
-            onRejectPO={handleRejectPO}
-            onViewDetails={handleViewPODetails}
-            onViewAllPOs={handleViewAllPOs}
-            maxPOs={5}
-          />
-        </div>
-
-        {/* 3. Today's Production - What needs to be produced today? */}
-        <div data-tour="today-production">
-          <TodayProduction
-            onStartBatch={handleStartBatch}
-            onPauseBatch={handlePauseBatch}
-            onViewDetails={handleViewDetails}
-            onViewAllPlans={handleViewAllProduction}
-            maxBatches={5}
-          />
-        </div>
-      </div>
-
-      {/* Purchase Order Details Modal */}
-      {showPOModal && poDetails && (
-        <EditViewModal
-          isOpen={showPOModal}
-          onClose={() => {
-            setShowPOModal(false);
-            setSelectedPOId(null);
-          }}
-          title={`Orden de Compra: ${poDetails.po_number}`}
-          subtitle={`Proveedor: ${poDetails.supplier?.name || poDetails.supplier_name || 'N/A'}`}
-          mode="view"
-          sections={buildPODetailsSections(poDetails)}
-          loading={isLoadingPO}
-          statusIndicator={{
-            color: poDetails.status === 'PENDING_APPROVAL' ? 'var(--color-warning)' :
-                   poDetails.status === 'APPROVED' ? 'var(--color-success)' :
-                   'var(--color-info)',
-            text: poDetails.status === 'PENDING_APPROVAL' ? 'Pendiente de Aprobación' :
-                  poDetails.status === 'APPROVED' ? 'Aprobado' :
-                  poDetails.status || 'N/A',
-            icon: ShoppingCart
-          }}
-          actions={
-            poDetails.status === 'PENDING_APPROVAL' ? [
-              {
-                label: 'Aprobar',
-                onClick: async () => {
-                  try {
-                    await approvePOMutation.mutateAsync({
-                      tenantId: currentTenant?.id || '',
-                      poId: poDetails.id,
-                      notes: 'Aprobado desde el dashboard'
-                    });
-                    showToast.success('Orden aprobada');
-                    setShowPOModal(false);
-                    setSelectedPOId(null);
-                  } catch (error) {
-                    console.error('Error approving PO:', error);
-                    showToast.error('Error al aprobar orden');
-                  }
-                },
-                variant: 'primary' as const,
-                icon: CheckCircle
-              },
-              {
-                label: 'Rechazar',
-                onClick: async () => {
-                  try {
-                    await rejectPOMutation.mutateAsync({
-                      tenantId: currentTenant?.id || '',
-                      poId: poDetails.id,
-                      reason: 'Rechazado desde el dashboard'
-                    });
-                    showToast.success('Orden rechazada');
-                    setShowPOModal(false);
-                    setSelectedPOId(null);
-                  } catch (error) {
-                    console.error('Error rejecting PO:', error);
-                    showToast.error('Error al rechazar orden');
-                  }
-                },
-                variant: 'outline' as const,
-                icon: X
-              }
-            ] : undefined
-          }
-        />
-      )}
-
-      {/* Production Batch Details Modal */}
-      {showBatchModal && batchDetails && (
-        <EditViewModal
-          isOpen={showBatchModal}
-          onClose={() => {
-            setShowBatchModal(false);
-            setSelectedBatchId(null);
-          }}
-          title={batchDetails.product_name}
-          subtitle={`Lote #${batchDetails.batch_number}`}
-          mode="view"
-          sections={buildBatchDetailsSections(batchDetails)}
-          loading={isLoadingBatch}
-          statusIndicator={{
-            color: batchDetails.status === 'PENDING' ? 'var(--color-warning)' :
-                   batchDetails.status === 'IN_PROGRESS' ? 'var(--color-info)' :
-                   batchDetails.status === 'COMPLETED' ? 'var(--color-success)' :
-                   batchDetails.status === 'FAILED' ? 'var(--color-error)' :
-                   'var(--color-info)',
-            text: batchDetails.status === 'PENDING' ? 'Pendiente' :
-                  batchDetails.status === 'IN_PROGRESS' ? 'En Progreso' :
-                  batchDetails.status === 'COMPLETED' ? 'Completado' :
-                  batchDetails.status === 'FAILED' ? 'Fallido' :
-                  batchDetails.status === 'ON_HOLD' ? 'Pausado' :
-                  batchDetails.status || 'N/A',
-            icon: Factory
-          }}
-          actions={
-            batchDetails.status === 'PENDING' ? [
-              {
-                label: 'Iniciar Lote',
-                onClick: async () => {
-                  try {
-                    await updateBatchStatusMutation.mutateAsync({
-                      tenantId: currentTenant?.id || '',
-                      batchId: batchDetails.id,
-                      statusUpdate: { status: ProductionStatusEnum.IN_PROGRESS }
-                    });
-                    showToast.success('Lote iniciado');
-                    setShowBatchModal(false);
-                    setSelectedBatchId(null);
-                  } catch (error) {
-                    console.error('Error starting batch:', error);
-                    showToast.error('Error al iniciar lote');
-                  }
-                },
-                variant: 'primary' as const,
-                icon: CheckCircle
-              }
-            ] : batchDetails.status === 'IN_PROGRESS' ? [
-              {
-                label: 'Pausar Lote',
-                onClick: async () => {
-                  try {
-                    await updateBatchStatusMutation.mutateAsync({
-                      tenantId: currentTenant?.id || '',
-                      batchId: batchDetails.id,
-                      statusUpdate: { status: ProductionStatusEnum.ON_HOLD }
-                    });
-                    showToast.success('Lote pausado');
-                    setShowBatchModal(false);
-                    setSelectedBatchId(null);
-                  } catch (error) {
-                    console.error('Error pausing batch:', error);
-                    showToast.error('Error al pausar lote');
-                  }
-                },
-                variant: 'outline' as const,
-                icon: X
-              }
-            ] : undefined
-          }
-        />
-      )}
-    </div>
-  );
-};
-
-export default DashboardPage;

frontend/src/pages/app/DashboardPage.tsx

@@ -123,6 +123,15 @@ export function NewDashboardPage() {
   const { notifications: deliveryNotifications } = useDeliveryNotifications();
   const { recentNotifications: orchestrationNotifications } = useOrchestrationNotifications();
 
+  console.log('🔄 [Dashboard] Component render - notification counts:', {
+    batch: batchNotifications.length,
+    delivery: deliveryNotifications.length,
+    orchestration: orchestrationNotifications.length,
+    batchIds: batchNotifications.map(n => n.id).join(','),
+    deliveryIds: deliveryNotifications.map(n => n.id).join(','),
+    orchestrationIds: orchestrationNotifications.map(n => n.id).join(','),
+  });
+
   // SSE connection status
   const sseConnected = true; // Simplified - based on other notification hooks
 
@@ -152,56 +161,118 @@ export function NewDashboardPage() {
   });
 
   // Track the latest notification ID to prevent re-running on same notification
-  const latestBatchNotificationId = useMemo(() =>
-    batchNotifications.length > 0 ? batchNotifications[0]?.id : null,
-    [batchNotifications]
-  );
+  // Use stringified ID array to create stable dependency that only changes when IDs actually change
+  const batchIdsString = JSON.stringify(batchNotifications.map(n => n.id));
+  const deliveryIdsString = JSON.stringify(deliveryNotifications.map(n => n.id));
+  const orchestrationIdsString = JSON.stringify(orchestrationNotifications.map(n => n.id));
 
-  const latestDeliveryNotificationId = useMemo(() =>
-    deliveryNotifications.length > 0 ? deliveryNotifications[0]?.id : null,
-    [deliveryNotifications]
-  );
+  console.log('📝 [Dashboard] Stringified ID arrays:', {
+    batchIdsString,
+    deliveryIdsString,
+    orchestrationIdsString,
+  });
 
-  const latestOrchestrationNotificationId = useMemo(() =>
-    orchestrationNotifications.length > 0 ? orchestrationNotifications[0]?.id : null,
-    [orchestrationNotifications]
-  );
+  const latestBatchNotificationId = useMemo(() => {
+    const result = batchNotifications.length === 0 ? '' : (batchNotifications[0]?.id || '');
+    console.log('🧮 [Dashboard] latestBatchNotificationId useMemo recalculated:', {
+      result,
+      dependency: batchIdsString,
+      notificationCount: batchNotifications.length,
+    });
+    return result;
+  }, [batchIdsString]);
+
+  const latestDeliveryNotificationId = useMemo(() => {
+    const result = deliveryNotifications.length === 0 ? '' : (deliveryNotifications[0]?.id || '');
+    console.log('🧮 [Dashboard] latestDeliveryNotificationId useMemo recalculated:', {
+      result,
+      dependency: deliveryIdsString,
+      notificationCount: deliveryNotifications.length,
+    });
+    return result;
+  }, [deliveryIdsString]);
+
+  const latestOrchestrationNotificationId = useMemo(() => {
+    const result = orchestrationNotifications.length === 0 ? '' : (orchestrationNotifications[0]?.id || '');
+    console.log('🧮 [Dashboard] latestOrchestrationNotificationId useMemo recalculated:', {
+      result,
+      dependency: orchestrationIdsString,
+      notificationCount: orchestrationNotifications.length,
+    });
+    return result;
+  }, [orchestrationIdsString]);
 
   useEffect(() => {
-    const currentBatchNotificationId = latestBatchNotificationId || '';
-    if (currentBatchNotificationId &&
-        currentBatchNotificationId !== prevBatchNotificationsRef.current) {
-      prevBatchNotificationsRef.current = currentBatchNotificationId;
+    console.log('⚡ [Dashboard] batchNotifications useEffect triggered', {
+      latestBatchNotificationId,
+      prevValue: prevBatchNotificationsRef.current,
+      hasChanged: latestBatchNotificationId !== prevBatchNotificationsRef.current,
+      notificationCount: batchNotifications.length,
+      firstNotification: batchNotifications[0],
+    });
+
+    if (latestBatchNotificationId &&
+        latestBatchNotificationId !== prevBatchNotificationsRef.current) {
+      console.log('🔥 [Dashboard] NEW batch notification detected, updating ref and refetching');
+      prevBatchNotificationsRef.current = latestBatchNotificationId;
       const latest = batchNotifications[0];
+
       if (['batch_completed', 'batch_started'].includes(latest.event_type)) {
+        console.log('🚀 [Dashboard] Triggering refetch for batch event:', latest.event_type);
         refetchCallbacksRef.current.refetchExecutionProgress();
         refetchCallbacksRef.current.refetchHealth();
+      } else {
+        console.log('⏭️  [Dashboard] Skipping refetch - event type not relevant:', latest.event_type);
       }
     }
   }, [latestBatchNotificationId]); // Only run when a NEW notification arrives
 
   useEffect(() => {
-    const currentDeliveryNotificationId = latestDeliveryNotificationId || '';
-    if (currentDeliveryNotificationId &&
-        currentDeliveryNotificationId !== prevDeliveryNotificationsRef.current) {
-      prevDeliveryNotificationsRef.current = currentDeliveryNotificationId;
+    console.log('⚡ [Dashboard] deliveryNotifications useEffect triggered', {
+      latestDeliveryNotificationId,
+      prevValue: prevDeliveryNotificationsRef.current,
+      hasChanged: latestDeliveryNotificationId !== prevDeliveryNotificationsRef.current,
+      notificationCount: deliveryNotifications.length,
+      firstNotification: deliveryNotifications[0],
+    });
+
+    if (latestDeliveryNotificationId &&
+        latestDeliveryNotificationId !== prevDeliveryNotificationsRef.current) {
+      console.log('🔥 [Dashboard] NEW delivery notification detected, updating ref and refetching');
+      prevDeliveryNotificationsRef.current = latestDeliveryNotificationId;
       const latest = deliveryNotifications[0];
+
       if (['delivery_received', 'delivery_overdue'].includes(latest.event_type)) {
+        console.log('🚀 [Dashboard] Triggering refetch for delivery event:', latest.event_type);
         refetchCallbacksRef.current.refetchExecutionProgress();
         refetchCallbacksRef.current.refetchHealth();
+      } else {
+        console.log('⏭️  [Dashboard] Skipping refetch - event type not relevant:', latest.event_type);
       }
     }
   }, [latestDeliveryNotificationId]); // Only run when a NEW notification arrives
 
   useEffect(() => {
-    const currentOrchestrationNotificationId = latestOrchestrationNotificationId || '';
-    if (currentOrchestrationNotificationId &&
-        currentOrchestrationNotificationId !== prevOrchestrationNotificationsRef.current) {
-      prevOrchestrationNotificationsRef.current = currentOrchestrationNotificationId;
+    console.log('⚡ [Dashboard] orchestrationNotifications useEffect triggered', {
+      latestOrchestrationNotificationId,
+      prevValue: prevOrchestrationNotificationsRef.current,
+      hasChanged: latestOrchestrationNotificationId !== prevOrchestrationNotificationsRef.current,
+      notificationCount: orchestrationNotifications.length,
+      firstNotification: orchestrationNotifications[0],
+    });
+
+    if (latestOrchestrationNotificationId &&
+        latestOrchestrationNotificationId !== prevOrchestrationNotificationsRef.current) {
+      console.log('🔥 [Dashboard] NEW orchestration notification detected, updating ref and refetching');
+      prevOrchestrationNotificationsRef.current = latestOrchestrationNotificationId;
       const latest = orchestrationNotifications[0];
+
       if (latest.event_type === 'orchestration_run_completed') {
+        console.log('🚀 [Dashboard] Triggering refetch for orchestration event:', latest.event_type);
         refetchCallbacksRef.current.refetchOrchestration();
         refetchCallbacksRef.current.refetchActionQueue();
+      } else {
+        console.log('⏭️  [Dashboard] Skipping refetch - event type not relevant:', latest.event_type);
       }
     }
   }, [latestOrchestrationNotificationId]); // Only run when a NEW notification arrives
@@ -432,27 +503,21 @@ export function NewDashboardPage() {
   // Note: startTour removed from deps to prevent infinite loop - the effect guards with sessionStorage ensure it only runs once
 
   return (
-    <div className="min-h-screen pb-20 md:pb-8">
+    <div className="min-h-screen pb-20 md:pb-8 bg-[var(--bg-primary)]">
       {/* Mobile-optimized container */}
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
         {/* Header */}
         <div className="flex items-center justify-between mb-6">
           <div>
-            <h1 className="text-3xl md:text-4xl font-bold" style={{ color: 'var(--text-primary)' }}>{t('dashboard:title')}</h1>
-            <p className="mt-1" style={{ color: 'var(--text-secondary)' }}>{t('dashboard:subtitle')}</p>
+            <h1 className="text-3xl md:text-4xl font-bold text-[var(--text-primary)]">{t('dashboard:title')}</h1>
+            <p className="mt-1 text-[var(--text-secondary)]">{t('dashboard:subtitle')}</p>
           </div>
 
           {/* Action Buttons */}
           <div className="flex items-center gap-3">
             <button
               onClick={handleRefreshAll}
-              className="flex items-center gap-2 px-4 py-2 rounded-lg font-semibold transition-colors duration-200"
-              style={{
-                backgroundColor: 'var(--bg-primary)',
-                borderColor: 'var(--border-primary)',
-                border: '1px solid',
-                color: 'var(--text-secondary)'
-              }}
+              className="flex items-center gap-2 px-4 py-2 rounded-lg font-semibold transition-colors duration-200 border border-[var(--border-primary)] bg-[var(--bg-primary)] text-[var(--text-secondary)]"
             >
               <RefreshCw className="w-5 h-5" />
               <span className="hidden sm:inline">{t('common:actions.refresh')}</span>
@@ -461,23 +526,19 @@ export function NewDashboardPage() {
             {/* Unified Add Button with Keyboard Shortcut */}
             <button
               onClick={() => setIsAddWizardOpen(true)}
-              className="group relative flex items-center gap-2 px-6 py-2.5 rounded-lg font-semibold transition-all duration-200 shadow-lg hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0"
-              style={{
-                background: 'linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%)',
-                color: 'white'
-              }}
+              className="group relative flex items-center gap-2 px-6 py-2.5 rounded-lg font-semibold transition-all duration-200 shadow-lg hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] text-white"
               title={`Quick Add (${navigator.platform.includes('Mac') ? 'Cmd' : 'Ctrl'}+K)`}
             >
               <Plus className="w-5 h-5" />
               <span className="hidden sm:inline">{t('common:actions.add')}</span>
               <Sparkles className="w-4 h-4 opacity-80" />
               {/* Keyboard shortcut badge - shown on hover */}
-              <span className="hidden lg:flex absolute -bottom-8 left-1/2 -translate-x-1/2 items-center gap-1 px-2 py-1 rounded text-xs font-mono opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap pointer-events-none" style={{ backgroundColor: 'var(--bg-primary)', color: 'var(--text-secondary)', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}>
-                <kbd className="px-1.5 py-0.5 rounded text-xs font-semibold" style={{ backgroundColor: 'var(--bg-tertiary)', border: '1px solid var(--border-secondary)' }}>
+              <span className="hidden lg:flex absolute -bottom-8 left-1/2 -translate-x-1/2 items-center gap-1 px-2 py-1 rounded text-xs font-mono opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap pointer-events-none bg-[var(--bg-primary)] text-[var(--text-secondary)] shadow-sm">
+                <kbd className="px-1.5 py-0.5 rounded text-xs font-semibold bg-[var(--bg-tertiary)] border border-[var(--border-secondary)]">
                   {navigator.platform.includes('Mac') ? '⌘' : 'Ctrl'}
                 </kbd>
                 <span>+</span>
-                <kbd className="px-1.5 py-0.5 rounded text-xs font-semibold" style={{ backgroundColor: 'var(--bg-tertiary)', border: '1px solid var(--border-secondary)' }}>
+                <kbd className="px-1.5 py-0.5 rounded text-xs font-semibold bg-[var(--bg-tertiary)] border border-[var(--border-secondary)]">
                   K
                 </kbd>
               </span>
@@ -545,43 +606,39 @@ export function NewDashboardPage() {
               </div>
 
               {/* SECTION 6: Quick Action Links */}
-              <div className="rounded-xl shadow-lg p-6 border" style={{ backgroundColor: 'var(--bg-primary)', borderColor: 'var(--border-primary)' }}>
-                <h2 className="text-xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>{t('dashboard:sections.quick_actions')}</h2>
+              <div className="rounded-xl shadow-lg p-6 border border-[var(--border-primary)] bg-[var(--bg-primary)]">
+                <h2 className="text-xl font-bold mb-4 text-[var(--text-primary)]">{t('dashboard:sections.quick_actions')}</h2>
                 <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                   <button
                     onClick={() => navigate('/app/operations/procurement')}
-                    className="flex items-center justify-between p-4 rounded-lg transition-colors duration-200 group"
-                    style={{ backgroundColor: 'var(--bg-tertiary)', borderLeft: '4px solid var(--color-info)' }}
+                    className="flex items-center justify-between p-4 rounded-lg transition-colors duration-200 group bg-[var(--bg-tertiary)] border-l-4 border-l-[var(--color-info)]"
                   >
-                    <span className="font-semibold" style={{ color: 'var(--text-primary)' }}>{t('dashboard:quick_actions.view_orders')}</span>
-                    <ExternalLink className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-200" style={{ color: 'var(--color-info)' }} />
+                    <span className="font-semibold text-[var(--text-primary)]">{t('dashboard:quick_actions.view_orders')}</span>
+                    <ExternalLink className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-200 text-[var(--color-info)]" />
                   </button>
 
                   <button
                     onClick={() => navigate('/app/operations/production')}
-                    className="flex items-center justify-between p-4 rounded-lg transition-colors duration-200 group"
-                    style={{ backgroundColor: 'var(--bg-tertiary)', borderLeft: '4px solid var(--color-success)' }}
+                    className="flex items-center justify-between p-4 rounded-lg transition-colors duration-200 group bg-[var(--bg-tertiary)] border-l-4 border-l-[var(--color-success)]"
                   >
-                    <span className="font-semibold" style={{ color: 'var(--text-primary)' }}>{t('dashboard:quick_actions.view_production')}</span>
-                    <ExternalLink className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-200" style={{ color: 'var(--color-success)' }} />
+                    <span className="font-semibold text-[var(--text-primary)]">{t('dashboard:quick_actions.view_production')}</span>
+                    <ExternalLink className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-200 text-[var(--color-success)]" />
                   </button>
 
                   <button
                     onClick={() => navigate('/app/database/inventory')}
-                    className="flex items-center justify-between p-4 rounded-lg transition-colors duration-200 group"
-                    style={{ backgroundColor: 'var(--bg-tertiary)', borderLeft: '4px solid var(--color-secondary)' }}
+                    className="flex items-center justify-between p-4 rounded-lg transition-colors duration-200 group bg-[var(--bg-tertiary)] border-l-4 border-l-[var(--color-secondary)]"
                   >
-                    <span className="font-semibold" style={{ color: 'var(--text-primary)' }}>{t('dashboard:quick_actions.view_inventory')}</span>
-                    <ExternalLink className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-200" style={{ color: 'var(--color-secondary)' }} />
+                    <span className="font-semibold text-[var(--text-primary)]">{t('dashboard:quick_actions.view_inventory')}</span>
+                    <ExternalLink className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-200 text-[var(--color-secondary)]" />
                   </button>
 
                   <button
                     onClick={() => navigate('/app/database/suppliers')}
-                    className="flex items-center justify-between p-4 rounded-lg transition-colors duration-200 group"
-                    style={{ backgroundColor: 'var(--bg-tertiary)', borderLeft: '4px solid var(--color-warning)' }}
+                    className="flex items-center justify-between p-4 rounded-lg transition-colors duration-200 group bg-[var(--bg-tertiary)] border-l-4 border-l-[var(--color-warning)]"
                   >
-                    <span className="font-semibold" style={{ color: 'var(--text-primary)' }}>{t('dashboard:quick_actions.view_suppliers')}</span>
-                    <ExternalLink className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-200" style={{ color: 'var(--color-warning)' }} />
+                    <span className="font-semibold text-[var(--text-primary)]">{t('dashboard:quick_actions.view_suppliers')}</span>
+                    <ExternalLink className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-200 text-[var(--color-warning)]" />
                   </button>
                 </div>
               </div>

frontend/src/pages/public/DemoPage.tsx

@@ -64,11 +64,45 @@ export const DemoPage: React.FC = () => {
       }
 
       // Check if ready to redirect
-      const hasUsableData = statusData.total_records_cloned > 100;
+      // CRITICAL: Wait for inventory, recipes, AND suppliers to complete
+      // to prevent dashboard from showing SetupWizardBlocker
+      const progress = statusData.progress || {};
+      const inventoryReady = progress.inventory?.status === 'completed';
+      const recipesReady = progress.recipes?.status === 'completed';
+      const suppliersReady = progress.suppliers?.status === 'completed';
+
+      const criticalServicesReady = inventoryReady && recipesReady && suppliersReady;
+
+      // Additionally verify that we have minimum required data to bypass SetupWizardBlocker
+      // The SetupWizardBlocker requires: 3+ ingredients, 1+ suppliers, 1+ recipes
+
+      // Ensure progress data exists for all required services
+      const hasInventoryProgress = !!progress.inventory;
+      const hasSuppliersProgress = !!progress.suppliers;
+      const hasRecipesProgress = !!progress.recipes;
+
+      // Extract counts with defensive checks
+      const ingredientsCount = hasInventoryProgress ? (progress.inventory.details?.ingredients || 0) : 0;
+      const suppliersCount = hasSuppliersProgress ? (progress.suppliers.details?.suppliers || 0) : 0;
+      const recipesCount = hasRecipesProgress ? (progress.recipes.details?.recipes || 0) : 0;
+
+      // Verify we have the minimum required counts
+      const hasMinimumIngredients = (typeof ingredientsCount === 'number' && ingredientsCount >= 3);
+      const hasMinimumSuppliers = (typeof suppliersCount === 'number' && suppliersCount >= 1);
+      const hasMinimumRecipes = (typeof recipesCount === 'number' && recipesCount >= 1);
+
+      // Ensure all required services have completed AND we have minimum data
+      const hasMinimumRequiredData =
+        hasInventoryProgress &&
+        hasSuppliersProgress &&
+        hasRecipesProgress &&
+        hasMinimumIngredients &&
+        hasMinimumSuppliers &&
+        hasMinimumRecipes;
+
       const shouldRedirect =
-        statusData.status === 'ready' ||
-        (statusData.status === 'partial' && hasUsableData) ||
-        (statusData.status === 'failed' && hasUsableData);
+        (statusData.status === 'ready' && hasMinimumRequiredData) || // Ready status AND minimum required data
+        (criticalServicesReady && hasMinimumRequiredData); // Critical services done + minimum required data
 
       if (shouldRedirect) {
         // Show 100% before redirect

frontend/src/router/AppRouter.tsx

@@ -100,14 +100,14 @@ export const AppRouter: React.FC = () => {
           } 
         />
         <Route 
-          path="/app/dashboard" 
+          path="/app/dashboard"
           element={
             <ProtectedRoute>
               <AppShell>
                 <DashboardPage />
               </AppShell>
             </ProtectedRoute>
-          } 
+          }
         />
 
         {/* Operations Routes - Business Operations Only */}

frontend/src/router/routes.config.ts

@@ -45,7 +45,7 @@ export const ROUTES = {
   
   // Dashboard
   DASHBOARD: '/app/dashboard',
-  
+
   // Inventory Management
   INVENTORY: '/app/database/inventory',
   INVENTORY_INGREDIENTS: '/inventory/ingredients',
@@ -514,6 +514,7 @@ export const routesConfig: RouteConfig[] = [
     ],
   },
 
+
   // Settings Section
   {
     path: '/app/settings',

frontend/src/types/alerts.ts

@@ -0,0 +1,219 @@
+/**
+ * Next-Generation Alert Types
+ *
+ * TypeScript definitions for enriched, context-aware alerts
+ * Matches shared/schemas/alert_types.py
+ */
+
+export enum AlertTypeClass {
+  ACTION_NEEDED = 'action_needed',
+  PREVENTED_ISSUE = 'prevented_issue',
+  TREND_WARNING = 'trend_warning',
+  ESCALATION = 'escalation',
+  INFORMATION = 'information'
+}
+
+export enum PriorityLevel {
+  CRITICAL = 'critical',  // 90-100: Needs decision in next 2 hours
+  IMPORTANT = 'important', // 70-89: Needs decision today
+  STANDARD = 'standard',   // 50-69: Review when convenient
+  INFO = 'info'            // 0-49: For awareness
+}
+
+export enum PlacementHint {
+  TOAST = 'toast',
+  ACTION_QUEUE = 'action_queue',
+  DASHBOARD_INLINE = 'dashboard_inline',
+  NOTIFICATION_PANEL = 'notification_panel',
+  EMAIL_DIGEST = 'email_digest'
+}
+
+export enum SmartActionType {
+  APPROVE_PO = 'approve_po',
+  REJECT_PO = 'reject_po',
+  CALL_SUPPLIER = 'call_supplier',
+  NAVIGATE = 'navigate',
+  ADJUST_PRODUCTION = 'adjust_production',
+  NOTIFY_CUSTOMER = 'notify_customer',
+  CANCEL_AUTO_ACTION = 'cancel_auto_action',
+  OPEN_REASONING = 'open_reasoning',
+  SNOOZE = 'snooze',
+  DISMISS = 'dismiss',
+  MARK_READ = 'mark_read'
+}
+
+export interface SmartAction {
+  label: string;
+  type: SmartActionType;
+  variant: 'primary' | 'secondary' | 'tertiary' | 'danger';
+  metadata: Record<string, any>;
+  disabled?: boolean;
+  disabled_reason?: string;
+  estimated_time_minutes?: number;
+  consequence?: string;
+}
+
+export interface OrchestratorContext {
+  already_addressed: boolean;
+  action_type?: string;
+  action_id?: string;
+  action_status?: string;
+  delivery_date?: string;
+  reasoning?: Record<string, any>;
+  estimated_resolution_time?: string;
+}
+
+export interface BusinessImpact {
+  financial_impact_eur?: number;
+  affected_orders?: number;
+  affected_customers?: string[];
+  production_batches_at_risk?: string[];
+  stockout_risk_hours?: number;
+  waste_risk_kg?: number;
+  customer_satisfaction_impact?: 'high' | 'medium' | 'low';
+}
+
+export interface UrgencyContext {
+  deadline?: string;
+  time_until_consequence_hours?: number;
+  can_wait_until_tomorrow: boolean;
+  peak_hour_relevant: boolean;
+  auto_action_countdown_seconds?: number;
+}
+
+export interface UserAgency {
+  can_user_fix: boolean;
+  requires_external_party: boolean;
+  external_party_name?: string;
+  external_party_contact?: string;
+  blockers?: string[];
+  suggested_workaround?: string;
+}
+
+export interface TrendContext {
+  metric_name: string;
+  current_value: number;
+  baseline_value: number;
+  change_percentage: number;
+  direction: 'increasing' | 'decreasing';
+  significance: 'high' | 'medium' | 'low';
+  period_days: number;
+  possible_causes?: string[];
+}
+
+export interface EnrichedAlert {
+  // Original Alert Data
+  id: string;
+  tenant_id: string;
+  service: string;
+  alert_type: string;
+  title: string;
+  message: string;
+
+  // Classification
+  type_class: AlertTypeClass;
+  priority_level: PriorityLevel;
+  priority_score: number;
+
+  // Context Enrichment
+  orchestrator_context?: OrchestratorContext;
+  business_impact?: BusinessImpact;
+  urgency_context?: UrgencyContext;
+  user_agency?: UserAgency;
+  trend_context?: TrendContext;
+
+  // AI Reasoning
+  ai_reasoning_summary?: string;
+  reasoning_data?: Record<string, any>;
+  confidence_score?: number;
+
+  // Actions
+  actions: SmartAction[];
+  primary_action?: SmartAction;
+
+  // UI Placement
+  placement: PlacementHint[];
+
+  // Grouping
+  group_id?: string;
+  is_group_summary: boolean;
+  grouped_alert_count?: number;
+  grouped_alert_ids?: string[];
+
+  // Metadata
+  created_at: string;
+  enriched_at: string;
+  alert_metadata: Record<string, any>;
+  status: 'active' | 'resolved' | 'acknowledged' | 'snoozed';
+}
+
+export interface PriorityScoreComponents {
+  business_impact_score: number;
+  urgency_score: number;
+  user_agency_score: number;
+  confidence_score: number;
+  final_score: number;
+  weights: Record<string, number>;
+}
+
+// Helper functions
+export function getPriorityColor(level: PriorityLevel): string {
+  switch (level) {
+    case PriorityLevel.CRITICAL:
+      return 'var(--color-error)';
+    case PriorityLevel.IMPORTANT:
+      return 'var(--color-warning)';
+    case PriorityLevel.STANDARD:
+      return 'var(--color-info)';
+    case PriorityLevel.INFO:
+      return 'var(--color-success)';
+  }
+}
+
+export function getPriorityIcon(level: PriorityLevel): string {
+  switch (level) {
+    case PriorityLevel.CRITICAL:
+      return 'alert-triangle';
+    case PriorityLevel.IMPORTANT:
+      return 'alert-circle';
+    case PriorityLevel.STANDARD:
+      return 'info';
+    case PriorityLevel.INFO:
+      return 'check-circle';
+  }
+}
+
+export function getTypeClassBadgeVariant(typeClass: AlertTypeClass): 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'outline' {
+  switch (typeClass) {
+    case AlertTypeClass.ACTION_NEEDED:
+      return 'error';
+    case AlertTypeClass.PREVENTED_ISSUE:
+      return 'success';
+    case AlertTypeClass.TREND_WARNING:
+      return 'warning';
+    case AlertTypeClass.ESCALATION:
+      return 'error';
+    case AlertTypeClass.INFORMATION:
+      return 'info';
+  }
+}
+
+export function formatTimeUntilConsequence(hours?: number): string {
+  if (!hours) return '';
+
+  if (hours < 1) {
+    return `${Math.round(hours * 60)} minutes`;
+  } else if (hours < 24) {
+    return `${Math.round(hours)} hours`;
+  } else {
+    return `${Math.round(hours / 24)} days`;
+  }
+}
+
+export function shouldShowToast(alert: EnrichedAlert): boolean {
+  return alert.placement.includes(PlacementHint.TOAST);
+}
+
+export function shouldShowInActionQueue(alert: EnrichedAlert): boolean {
+  return alert.placement.includes(PlacementHint.ACTION_QUEUE);
+}

frontend/src/types/events.ts

@@ -0,0 +1,369 @@
+/**
+ * Event System Type Definitions
+ *
+ * Matches backend event architecture with three-tier model:
+ * - ALERT: Actionable events requiring user decision
+ * - NOTIFICATION: Informational state changes
+ * - RECOMMENDATION: AI-generated suggestions
+ */
+
+// ============================================================
+// Event Classifications
+// ============================================================
+
+export type EventClass = 'alert' | 'notification' | 'recommendation';
+
+export type EventDomain =
+  | 'inventory'
+  | 'production'
+  | 'supply_chain'
+  | 'demand'
+  | 'operations';
+
+export type PriorityLevel = 'critical' | 'important' | 'standard' | 'info';
+
+export type AlertTypeClass =
+  | 'action_needed'
+  | 'prevented_issue'
+  | 'trend_warning'
+  | 'escalation'
+  | 'information';
+
+export type NotificationType =
+  | 'state_change'
+  | 'completion'
+  | 'arrival'
+  | 'departure'
+  | 'update'
+  | 'system_event';
+
+export type RecommendationType =
+  | 'optimization'
+  | 'cost_reduction'
+  | 'risk_mitigation'
+  | 'trend_insight'
+  | 'best_practice';
+
+// ============================================================
+// Base Event Interface
+// ============================================================
+
+export interface BaseEvent {
+  id: string;
+  tenant_id: string;
+  event_class: EventClass;
+  event_domain: EventDomain;
+  event_type: string;
+  service: string;
+  title: string;
+  message: string;
+  timestamp: string;
+  created_at: string;
+  metadata?: Record<string, any>;
+  _channel?: string; // Added by gateway for frontend routing
+}
+
+// ============================================================
+// Alert (Full Enrichment)
+// ============================================================
+
+export interface OrchestratorContext {
+  already_addressed?: boolean;
+  action_type?: string;
+  action_id?: string;
+  action_status?: string;
+  delivery_date?: string;
+  reasoning?: string;
+}
+
+export interface BusinessImpact {
+  financial_impact_eur?: number;
+  affected_orders?: number;
+  affected_customers?: string[];
+  production_batches_at_risk?: string[];
+  stockout_risk_hours?: number;
+  waste_risk_kg?: number;
+  customer_satisfaction_impact?: 'high' | 'medium' | 'low';
+}
+
+export interface UrgencyContext {
+  deadline?: string;
+  time_until_consequence_hours?: number;
+  can_wait_until_tomorrow?: boolean;
+  peak_hour_relevant?: boolean;
+  auto_action_countdown_seconds?: number;
+}
+
+export interface UserAgency {
+  can_user_fix?: boolean;
+  requires_external_party?: boolean;
+  external_party_name?: string;
+  external_party_contact?: string;
+  blockers?: string[];
+  suggested_workaround?: string;
+}
+
+export interface SmartAction {
+  type: string;
+  label: string;
+  variant?: 'primary' | 'secondary' | 'danger' | 'success';
+  metadata?: Record<string, any>;
+  estimated_time_minutes?: number;
+  consequence?: string;
+  disabled?: boolean;
+  disabled_reason?: string;
+}
+
+export interface Alert extends BaseEvent {
+  event_class: 'alert';
+  type_class: AlertTypeClass;
+  status: 'active' | 'acknowledged' | 'resolved' | 'dismissed' | 'in_progress';
+
+  // Priority
+  priority_score: number; // 0-100
+  priority_level: PriorityLevel;
+
+  // Enrichment context
+  orchestrator_context?: OrchestratorContext;
+  business_impact?: BusinessImpact;
+  urgency_context?: UrgencyContext;
+  user_agency?: UserAgency;
+  trend_context?: Record<string, any>;
+
+  // Smart actions
+  actions?: SmartAction[];
+
+  // AI reasoning
+  ai_reasoning_summary?: string;
+  confidence_score?: number;
+
+  // Timing
+  timing_decision?: 'send_now' | 'schedule_later' | 'batch_for_digest';
+  scheduled_send_time?: string;
+  placement?: string[];
+
+  // Escalation & chaining
+  action_created_at?: string;
+  superseded_by_action_id?: string;
+  hidden_from_ui?: boolean;
+
+  // Timestamps
+  updated_at?: string;
+  resolved_at?: string;
+
+  // Legacy fields (for backward compatibility)
+  alert_type?: string;
+  item_type?: 'alert';
+}
+
+// ============================================================
+// Notification (Lightweight)
+// ============================================================
+
+export interface Notification extends BaseEvent {
+  event_class: 'notification';
+  notification_type: NotificationType;
+
+  // Entity context
+  entity_type?: string;
+  entity_id?: string;
+  old_state?: string;
+  new_state?: string;
+
+  // Display
+  placement?: string[];
+
+  // TTL
+  expires_at?: string;
+
+  // Legacy fields
+  item_type?: 'notification';
+}
+
+// ============================================================
+// Recommendation (AI Suggestions)
+// ============================================================
+
+export interface Recommendation extends BaseEvent {
+  event_class: 'recommendation';
+  recommendation_type: RecommendationType;
+
+  // Light priority
+  priority_level: PriorityLevel;
+
+  // Context
+  estimated_impact?: {
+    financial_savings_eur?: number;
+    time_saved_hours?: number;
+    efficiency_gain_percent?: number;
+    [key: string]: any;
+  };
+  suggested_actions?: SmartAction[];
+
+  // AI reasoning
+  ai_reasoning_summary?: string;
+  confidence_score?: number;
+
+  // Dismissal
+  dismissed_at?: string;
+  dismissed_by?: string;
+
+  // Timestamps
+  updated_at?: string;
+
+  // Legacy fields
+  item_type?: 'recommendation';
+}
+
+// ============================================================
+// Union Types
+// ============================================================
+
+export type Event = Alert | Notification | Recommendation;
+
+// Type guards
+export function isAlert(event: Event): event is Alert {
+  return event.event_class === 'alert' || event.item_type === 'alert';
+}
+
+export function isNotification(event: Event): event is Notification {
+  return event.event_class === 'notification';
+}
+
+export function isRecommendation(event: Event): event is Recommendation {
+  return event.event_class === 'recommendation' || event.item_type === 'recommendation';
+}
+
+// ============================================================
+// Channel Patterns
+// ============================================================
+
+export type ChannelPattern =
+  | `${EventDomain}.${Exclude<EventClass, 'recommendation'>}` // e.g., "inventory.alerts"
+  | `${EventDomain}.*` // e.g., "inventory.*"
+  | `*.${Exclude<EventClass, 'recommendation'>}` // e.g., "*.alerts"
+  | 'recommendations'
+  | '*.*';
+
+// ============================================================
+// Hook Configuration Types
+// ============================================================
+
+export interface UseAlertsConfig {
+  domains?: EventDomain[];
+  minPriority?: PriorityLevel;
+  typeClass?: AlertTypeClass[];
+  includeResolved?: boolean;
+  maxAge?: number; // seconds
+}
+
+export interface UseNotificationsConfig {
+  domains?: EventDomain[];
+  eventTypes?: string[];
+  maxAge?: number; // seconds, default 3600 (1 hour)
+}
+
+export interface UseRecommendationsConfig {
+  domains?: EventDomain[];
+  includeDismissed?: boolean;
+  minConfidence?: number; // 0.0 - 1.0
+}
+
+// ============================================================
+// SSE Event Types
+// ============================================================
+
+export interface SSEConnectionEvent {
+  type: 'connected';
+  message: string;
+  channels: string[];
+  timestamp: number;
+}
+
+export interface SSEHeartbeatEvent {
+  type: 'heartbeat';
+  timestamp: number;
+}
+
+export interface SSEInitialStateEvent {
+  events: Event[];
+}
+
+// ============================================================
+// Backward Compatibility (Legacy Alert Format)
+// ============================================================
+
+/**
+ * @deprecated Use Alert type instead
+ */
+export interface LegacyAlert {
+  id: string;
+  tenant_id: string;
+  item_type: 'alert' | 'recommendation';
+  alert_type: string;
+  service: string;
+  title: string;
+  message: string;
+  priority_level?: string;
+  priority_score?: number;
+  type_class?: string;
+  status?: string;
+  actions?: any[];
+  metadata?: Record<string, any>;
+  timestamp: string;
+  created_at: string;
+}
+
+/**
+ * Convert legacy alert format to new Event format
+ */
+export function convertLegacyAlert(legacy: LegacyAlert): Event {
+  const eventClass: EventClass = legacy.item_type === 'recommendation' ? 'recommendation' : 'alert';
+
+  // Infer domain from service (best effort)
+  const domainMap: Record<string, EventDomain> = {
+    'inventory': 'inventory',
+    'production': 'production',
+    'procurement': 'supply_chain',
+    'forecasting': 'demand',
+    'orchestrator': 'operations',
+  };
+  const event_domain = domainMap[legacy.service] || 'operations';
+
+  const base = {
+    id: legacy.id,
+    tenant_id: legacy.tenant_id,
+    event_class: eventClass,
+    event_domain,
+    event_type: legacy.alert_type,
+    service: legacy.service,
+    title: legacy.title,
+    message: legacy.message,
+    timestamp: legacy.timestamp,
+    created_at: legacy.created_at,
+    metadata: legacy.metadata,
+  };
+
+  if (eventClass === 'alert') {
+    return {
+      ...base,
+      event_class: 'alert',
+      type_class: (legacy.type_class as AlertTypeClass) || 'action_needed',
+      status: (legacy.status as any) || 'active',
+      priority_score: legacy.priority_score || 50,
+      priority_level: (legacy.priority_level as PriorityLevel) || 'standard',
+      actions: legacy.actions as SmartAction[],
+      alert_type: legacy.alert_type,
+      item_type: 'alert',
+    } as Alert;
+  } else {
+    return {
+      ...base,
+      event_class: 'recommendation',
+      recommendation_type: 'trend_insight',
+      priority_level: (legacy.priority_level as PriorityLevel) || 'info',
+      suggested_actions: legacy.actions as SmartAction[],
+      item_type: 'recommendation',
+    } as Recommendation;
+  }
+}

frontend/src/utils/alertHelpers.ts

@@ -3,25 +3,39 @@
  * Provides grouping, filtering, sorting, and categorization logic for alerts
  */
 
-import { NotificationData } from '../hooks/useNotifications';
+import { PriorityLevel } from '../types/alerts';
+import type { Alert } from '../types/events';
+import { TFunction } from 'i18next';
+import { translateAlertTitle, translateAlertMessage } from './alertI18n';
 
 export type AlertSeverity = 'urgent' | 'high' | 'medium' | 'low';
 export type AlertCategory = 'inventory' | 'production' | 'orders' | 'equipment' | 'quality' | 'suppliers' | 'other';
 export type TimeGroup = 'today' | 'yesterday' | 'this_week' | 'older';
 
+/**
+ * Map Alert priority_score to AlertSeverity
+ */
+export function getSeverity(alert: Alert): AlertSeverity {
+  // Map based on priority_score for more granularity
+  if (alert.priority_score >= 80) return 'urgent';
+  if (alert.priority_score >= 60) return 'high';
+  if (alert.priority_score >= 40) return 'medium';
+  return 'low';
+}
+
 export interface AlertGroup {
   id: string;
   type: 'time' | 'category' | 'similarity';
   key: string;
   title: string;
   count: number;
-  severity: AlertSeverity;
-  alerts: NotificationData[];
+  priority_level: PriorityLevel;
+  alerts: Alert[];
   collapsed?: boolean;
 }
 
 export interface AlertFilters {
-  severities: AlertSeverity[];
+  priorities: PriorityLevel[];
   categories: AlertCategory[];
   timeRange: TimeGroup | 'all';
   search: string;
@@ -37,8 +51,17 @@ export interface SnoozedAlert {
 /**
  * Categorize alert based on title and message content
  */
-export function categorizeAlert(alert: NotificationData): AlertCategory {
-  const text = `${alert.title} ${alert.message}`.toLowerCase();
+export function categorizeAlert(alert: AlertOrNotification, t?: TFunction): AlertCategory {
+  let title = alert.title;
+  let message = alert.message;
+
+  // Use translated text if translation function is provided
+  if (t) {
+    title = translateAlertTitle(alert, t);
+    message = translateAlertMessage(alert, t);
+  }
+
+  const text = `${title} ${message}`.toLowerCase();
 
   if (text.includes('stock') || text.includes('inventario') || text.includes('caducad') || text.includes('expi')) {
     return 'inventory';
@@ -138,12 +161,12 @@ export function getTimeGroupName(group: TimeGroup, locale: string = 'es'): strin
 /**
  * Check if two alerts are similar enough to group together
  */
-export function areAlertsSimilar(alert1: NotificationData, alert2: NotificationData): boolean {
+export function areAlertsSimilar(alert1: Alert, alert2: Alert): boolean {
   // Must be same category and severity
   if (categorizeAlert(alert1) !== categorizeAlert(alert2)) {
     return false;
   }
-  if (alert1.severity !== alert2.severity) {
+  if (getSeverity(alert1) !== getSeverity(alert2)) {
     return false;
   }
 
@@ -173,11 +196,11 @@ export function areAlertsSimilar(alert1: NotificationData, alert2: NotificationD
 /**
  * Group alerts by time periods
  */
-export function groupAlertsByTime(alerts: NotificationData[]): AlertGroup[] {
-  const groups: Map<TimeGroup, NotificationData[]> = new Map();
+export function groupAlertsByTime(alerts: Alert[]): AlertGroup[] {
+  const groups: Map<TimeGroup, Alert[]> = new Map();
 
   alerts.forEach(alert => {
-    const timeGroup = getTimeGroup(alert.timestamp);
+    const timeGroup = getTimeGroup(alert.created_at);
     if (!groups.has(timeGroup)) {
       groups.set(timeGroup, []);
     }
@@ -207,8 +230,8 @@ export function groupAlertsByTime(alerts: NotificationData[]): AlertGroup[] {
 /**
  * Group alerts by category
  */
-export function groupAlertsByCategory(alerts: NotificationData[]): AlertGroup[] {
-  const groups: Map<AlertCategory, NotificationData[]> = new Map();
+export function groupAlertsByCategory(alerts: Alert[]): AlertGroup[] {
+  const groups: Map<AlertCategory, Alert[]> = new Map();
 
   alerts.forEach(alert => {
     const category = categorizeAlert(alert);
@@ -240,7 +263,7 @@ export function groupAlertsByCategory(alerts: NotificationData[]): AlertGroup[]
 /**
  * Group similar alerts together
  */
-export function groupSimilarAlerts(alerts: NotificationData[]): AlertGroup[] {
+export function groupSimilarAlerts(alerts: Alert[]): AlertGroup[] {
   const groups: AlertGroup[] = [];
   const processed = new Set<string>();
 
@@ -264,7 +287,7 @@ export function groupSimilarAlerts(alerts: NotificationData[]): AlertGroup[] {
       groups.push({
         id: `similar-${alert.id}`,
         type: 'similarity',
-        key: `${category}-${alert.severity}`,
+        key: `${category}-${getSeverity(alert)}`,
         title: `${similarAlerts.length} alertas de ${getCategoryName(category).toLowerCase()}`,
         count: similarAlerts.length,
         severity: highestSeverity,
@@ -279,7 +302,7 @@ export function groupSimilarAlerts(alerts: NotificationData[]): AlertGroup[] {
         key: alert.id,
         title: alert.title,
         count: 1,
-        severity: alert.severity as AlertSeverity,
+        severity: getSeverity(alert) as AlertSeverity,
         alerts: [alert],
       });
     }
@@ -291,11 +314,11 @@ export function groupSimilarAlerts(alerts: NotificationData[]): AlertGroup[] {
 /**
  * Get highest severity from a list of alerts
  */
-export function getHighestSeverity(alerts: NotificationData[]): AlertSeverity {
+export function getHighestSeverity(alerts: Alert[]): AlertSeverity {
   const severityOrder: AlertSeverity[] = ['urgent', 'high', 'medium', 'low'];
 
   for (const severity of severityOrder) {
-    if (alerts.some(alert => alert.severity === severity)) {
+    if (alerts.some(alert => getSeverity(alert) === severity)) {
       return severity;
     }
   }
@@ -306,7 +329,7 @@ export function getHighestSeverity(alerts: NotificationData[]): AlertSeverity {
 /**
  * Sort alerts by severity and timestamp
  */
-export function sortAlerts(alerts: NotificationData[]): NotificationData[] {
+export function sortAlerts(alerts: Alert[]): Alert[] {
   const severityOrder: Record<AlertSeverity, number> = {
     urgent: 4,
     high: 3,
@@ -316,13 +339,13 @@ export function sortAlerts(alerts: NotificationData[]): NotificationData[] {
 
   return [...alerts].sort((a, b) => {
     // First by severity
-    const severityDiff = severityOrder[b.severity as AlertSeverity] - severityOrder[a.severity as AlertSeverity];
+    const severityDiff = severityOrder[getSeverity(b) as AlertSeverity] - severityOrder[getSeverity(a) as AlertSeverity];
     if (severityDiff !== 0) {
       return severityDiff;
     }
 
     // Then by timestamp (newest first)
-    return new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime();
+    return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
   });
 }
 
@@ -330,13 +353,14 @@ export function sortAlerts(alerts: NotificationData[]): NotificationData[] {
  * Filter alerts based on criteria
  */
 export function filterAlerts(
-  alerts: NotificationData[],
+  alerts: Alert[],
   filters: AlertFilters,
-  snoozedAlerts: Map<string, SnoozedAlert>
-): NotificationData[] {
+  snoozedAlerts: Map<string, SnoozedAlert>,
+  t?: TFunction
+): Alert[] {
   return alerts.filter(alert => {
-    // Filter by severity
-    if (filters.severities.length > 0 && !filters.severities.includes(alert.severity as AlertSeverity)) {
+    // Filter by priority
+    if (filters.priorities.length > 0 && !filters.priorities.includes(alert.priority_level as PriorityLevel)) {
       return false;
     }
 
@@ -350,7 +374,7 @@ export function filterAlerts(
 
     // Filter by time range
     if (filters.timeRange !== 'all') {
-      const timeGroup = getTimeGroup(alert.timestamp);
+      const timeGroup = getTimeGroup(alert.created_at);
       if (timeGroup !== filters.timeRange) {
         return false;
       }
@@ -359,9 +383,21 @@ export function filterAlerts(
     // Filter by search text
     if (filters.search.trim()) {
       const searchLower = filters.search.toLowerCase();
-      const searchableText = `${alert.title} ${alert.message}`.toLowerCase();
-      if (!searchableText.includes(searchLower)) {
-        return false;
+
+      // If translation function is provided, search in translated text
+      if (t) {
+        const translatedTitle = translateAlertTitle(alert, t);
+        const translatedMessage = translateAlertMessage(alert, t);
+        const searchableText = `${translatedTitle} ${translatedMessage}`.toLowerCase();
+        if (!searchableText.includes(searchLower)) {
+          return false;
+        }
+      } else {
+        // Fallback to original title and message
+        const searchableText = `${alert.title} ${alert.message}`.toLowerCase();
+        if (!searchableText.includes(searchLower)) {
+          return false;
+        }
       }
     }
 
@@ -453,9 +489,10 @@ export interface ContextualAction {
   variant: 'primary' | 'secondary' | 'outline';
   action: string; // action identifier
   route?: string; // navigation route
+  metadata?: Record<string, any>; // Additional action metadata
 }
 
-export function getContextualActions(alert: NotificationData): ContextualAction[] {
+export function getContextualActions(alert: Alert): ContextualAction[] {
   const category = categorizeAlert(alert);
   const text = `${alert.title} ${alert.message}`.toLowerCase();
 
@@ -529,14 +566,14 @@ export function getContextualActions(alert: NotificationData): ContextualAction[
  * Search alerts with highlighting
  */
 export interface SearchMatch {
-  alert: NotificationData;
+  alert: Alert;
   highlights: {
     title: boolean;
     message: boolean;
   };
 }
 
-export function searchAlerts(alerts: NotificationData[], query: string): SearchMatch[] {
+export function searchAlerts(alerts: Alert[], query: string): SearchMatch[] {
   if (!query.trim()) {
     return alerts.map(alert => ({
       alert,
@@ -573,7 +610,7 @@ export interface AlertStats {
 }
 
 export function getAlertStatistics(
-  alerts: NotificationData[],
+  alerts: Alert[],
   snoozedAlerts: Map<string, SnoozedAlert>
 ): AlertStats {
   const stats: AlertStats = {
@@ -585,10 +622,10 @@ export function getAlertStatistics(
   };
 
   alerts.forEach(alert => {
-    stats.bySeverity[alert.severity as AlertSeverity]++;
+    stats.bySeverity[getSeverity(alert) as AlertSeverity]++;
     stats.byCategory[categorizeAlert(alert)]++;
 
-    if (!alert.read) {
+    if (alert.status === 'active') {
       stats.unread++;
     }
 

frontend/src/utils/alertI18n.ts

@@ -0,0 +1,152 @@
+/**
+ * Alert i18n Translation Utility
+ *
+ * Handles translation of alert titles and messages using i18n keys from backend enrichment.
+ * Falls back to raw title/message if i18n data is not available.
+ */
+
+import { TFunction } from 'i18next';
+
+export interface AlertI18nData {
+  title_key?: string;
+  title_params?: Record<string, any>;
+  message_key?: string;
+  message_params?: Record<string, any>;
+}
+
+export interface AlertTranslationResult {
+  title: string;
+  message: string;
+  isTranslated: boolean;
+}
+
+/**
+ * Translates alert title and message using i18n data from metadata
+ *
+ * @param alert - Alert object with title, message, and metadata
+ * @param t - i18next translation function
+ * @returns Translated or fallback title and message
+ */
+export function translateAlert(
+  alert: {
+    title: string;
+    message: string;
+    metadata?: Record<string, any>;
+  },
+  t: TFunction
+): AlertTranslationResult {
+  // Extract i18n data from metadata
+  const i18nData = alert.metadata?.i18n as AlertI18nData | undefined;
+
+  // If no i18n data, return original title and message
+  if (!i18nData || (!i18nData.title_key && !i18nData.message_key)) {
+    return {
+      title: alert.title,
+      message: alert.message,
+      isTranslated: false,
+    };
+  }
+
+  // Translate title
+  let translatedTitle = alert.title;
+  if (i18nData.title_key) {
+    try {
+      const translated = t(i18nData.title_key, i18nData.title_params || {});
+      // Only use translation if it's not the key itself (i18next returns key if translation missing)
+      if (translated !== i18nData.title_key) {
+        translatedTitle = translated;
+      }
+    } catch (error) {
+      console.warn(`Failed to translate alert title with key: ${i18nData.title_key}`, error);
+    }
+  }
+
+  // Translate message
+  let translatedMessage = alert.message;
+  if (i18nData.message_key) {
+    try {
+      const translated = t(i18nData.message_key, i18nData.message_params || {});
+      // Only use translation if it's not the key itself
+      if (translated !== i18nData.message_key) {
+        translatedMessage = translated;
+      }
+    } catch (error) {
+      console.warn(`Failed to translate alert message with key: ${i18nData.message_key}`, error);
+    }
+  }
+
+  return {
+    title: translatedTitle,
+    message: translatedMessage,
+    isTranslated: true,
+  };
+}
+
+/**
+ * Translates alert title only
+ *
+ * @param alert - Alert object
+ * @param t - i18next translation function
+ * @returns Translated or fallback title
+ */
+export function translateAlertTitle(
+  alert: {
+    title: string;
+    metadata?: Record<string, any>;
+  },
+  t: TFunction
+): string {
+  const i18nData = alert.metadata?.i18n as AlertI18nData | undefined;
+
+  if (!i18nData?.title_key) {
+    return alert.title;
+  }
+
+  try {
+    const translated = t(i18nData.title_key, i18nData.title_params || {});
+    return translated !== i18nData.title_key ? translated : alert.title;
+  } catch (error) {
+    console.warn(`Failed to translate alert title with key: ${i18nData.title_key}`, error);
+    return alert.title;
+  }
+}
+
+/**
+ * Translates alert message only
+ *
+ * @param alert - Alert object
+ * @param t - i18next translation function
+ * @returns Translated or fallback message
+ */
+export function translateAlertMessage(
+  alert: {
+    message: string;
+    metadata?: Record<string, any>;
+  },
+  t: TFunction
+): string {
+  const i18nData = alert.metadata?.i18n as AlertI18nData | undefined;
+
+  if (!i18nData?.message_key) {
+    return alert.message;
+  }
+
+  try {
+    const translated = t(i18nData.message_key, i18nData.message_params || {});
+    return translated !== i18nData.message_key ? translated : alert.message;
+  } catch (error) {
+    console.warn(`Failed to translate alert message with key: ${i18nData.message_key}`, error);
+    return alert.message;
+  }
+}
+
+/**
+ * Checks if alert has i18n data available
+ *
+ * @param alert - Alert object
+ * @returns True if i18n data is present
+ */
+export function hasI18nData(alert: { metadata?: Record<string, any> }): boolean {
+  const i18nData = alert.metadata?.i18n as AlertI18nData | undefined;
+  return !!(i18nData && (i18nData.title_key || i18nData.message_key));
+}

frontend/vite.config.ts

@@ -2,61 +2,72 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
 
-export default defineConfig({
-  plugins: [
-    react(),
-    // PWA plugin temporarily disabled to avoid service worker conflicts
-    // VitePWA can be re-enabled later for production PWA features
-  ],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src'),
-      '@components': path.resolve(__dirname, './src/components'),
-      '@pages': path.resolve(__dirname, './src/pages'),
-      '@hooks': path.resolve(__dirname, './src/hooks'),
-      '@stores': path.resolve(__dirname, './src/stores'),
-      '@services': path.resolve(__dirname, './src/services'),
-      '@utils': path.resolve(__dirname, './src/utils'),
-      '@types': path.resolve(__dirname, './src/types'),
-    },
-  },
-  server: {
-    host: '0.0.0.0', // Important for Docker
-    port: 3000,
-    watch: {
-      // Use polling for Docker/Kubernetes compatibility
-      usePolling: true,
-      ignored: [
-        '**/node_modules/**',
-        '**/dist/**',
-        '**/.git/**',
-      ],
-    },
-    proxy: {
-      '/api': {
-        target: process.env.VITE_API_URL !== undefined
-                ? (process.env.VITE_API_URL || '')  // Use value or empty string
-                : (process.env.NODE_ENV === 'development' && process.env.KUBERNETES_SERVICE_HOST
-                    ? 'http://gateway-service:8000'  // Kubernetes internal service
-                    : 'http://localhost:8000'),      // Local development
-        changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, ''),
+export default defineConfig(({ mode }) => {
+  // Enable debug mode for development builds
+  const isDevelopment = mode === 'development';
+
+  return {
+    plugins: [
+      react(),
+      // PWA plugin temporarily disabled to avoid service worker conflicts
+      // VitePWA can be re-enabled later for production PWA features
+    ],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src'),
+        '@components': path.resolve(__dirname, './src/components'),
+        '@pages': path.resolve(__dirname, './src/pages'),
+        '@hooks': path.resolve(__dirname, './src/hooks'),
+        '@stores': path.resolve(__dirname, './src/stores'),
+        '@services': path.resolve(__dirname, './src/services'),
+        '@utils': path.resolve(__dirname, './src/utils'),
+        '@types': path.resolve(__dirname, './src/types'),
       },
     },
-  },
-  build: {
-    outDir: 'dist',
-    sourcemap: true,
-    rollupOptions: {
-      external: ['/runtime-config.js'], // Externalize runtime config to avoid bundling
-      output: {
-        manualChunks: {
-          vendor: ['react', 'react-dom', 'react-router-dom'],
-          ui: ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu'],
-          charts: ['recharts'],
-          forms: ['react-hook-form', 'zod'],
+    server: {
+      host: '0.0.0.0', // Important for Docker
+      port: 3000,
+      watch: {
+        // Use polling for Docker/Kubernetes compatibility
+        usePolling: true,
+        ignored: [
+          '**/node_modules/**',
+          '**/dist/**',
+          '**/.git/**',
+        ],
+      },
+      proxy: {
+        '/api': {
+          target: process.env.VITE_API_URL !== undefined
+                  ? (process.env.VITE_API_URL || '')  // Use value or empty string
+                  : (process.env.NODE_ENV === 'development' && process.env.KUBERNETES_SERVICE_HOST
+                      ? 'http://gateway-service:8000'  // Kubernetes internal service
+                      : 'http://localhost:8000'),      // Local development
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, ''),
         },
       },
     },
-  },
+    build: {
+      outDir: 'dist',
+      // In development mode: inline source maps for better debugging
+      // In production mode: external source maps
+      sourcemap: isDevelopment ? 'inline' : true,
+      // In development mode: disable minification for readable errors
+      // In production mode: use esbuild minification
+      minify: isDevelopment ? false : 'esbuild',
+      rollupOptions: {
+        output: {
+          // In development mode: don't split chunks (easier debugging)
+          // In production mode: split chunks for better caching
+          manualChunks: isDevelopment ? undefined : {
+            vendor: ['react', 'react-dom', 'react-router-dom'],
+            ui: ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu'],
+            charts: ['recharts'],
+            forms: ['react-hook-form', 'zod'],
+          },
+        },
+      },
+    },
+  };
 });