diff --git a/frontend/src/components/domain/dashboard/index.ts b/frontend/src/components/domain/dashboard/index.ts
index b75a795b..9bc4760d 100644
--- a/frontend/src/components/domain/dashboard/index.ts
+++ b/frontend/src/components/domain/dashboard/index.ts
@@ -1,88 +1,13 @@
 // Dashboard Domain Components - Bakery Management System
 
-// Core dashboard components
-export { default as DashboardCard } from './DashboardCard';
-export { default as DashboardGrid } from './DashboardGrid';
-export { default as QuickActions, BAKERY_QUICK_ACTIONS } from './QuickActions';
-export { default as RecentActivity } from './RecentActivity';
-export { default as KPIWidget, BAKERY_KPI_CONFIGS } from './KPIWidget';
+// Existing dashboard components
+export { default as RealTimeAlerts } from './RealTimeAlerts';
+export { default as ProcurementPlansToday } from './ProcurementPlansToday';
+export { default as ProductionPlansToday } from './ProductionPlansToday';
 
-// Export types for external usage
-export type { DashboardCardProps } from './DashboardCard';
-export type { 
-  QuickActionsProps, 
-  QuickAction 
-} from './QuickActions';
-export type { 
-  RecentActivityProps, 
-  ActivityItem, 
-  ActivityUser,
-  ActivityType,
-  ActivityStatus, 
-  ActivityPriority 
-} from './RecentActivity';
-export type { 
-  KPIWidgetProps, 
-  KPIValue, 
-  KPITrend, 
-  KPIThreshold,
-  SparklineDataPoint 
-} from './KPIWidget';
-
-// Re-export enums for convenience
-export { 
-  ActivityType, 
-  ActivityStatus, 
-  ActivityPriority 
-} from './RecentActivity';
-
-/**
- * Dashboard Components Usage Examples:
- * 
- * import { 
- *   DashboardCard, 
- *   QuickActions, 
- *   BAKERY_QUICK_ACTIONS,
- *   RecentActivity, 
- *   KPIWidget,
- *   BAKERY_KPI_CONFIGS 
- * } from '@/components/domain/dashboard';
- * 
- * // Basic dashboard card
- * <DashboardCard 
- *   title="Ventas Hoy" 
- *   variant="metric"
- *   isLoading={false}
- * >
- *   Content goes here
- * </DashboardCard>
- * 
- * // Quick actions with predefined bakery actions
- * <QuickActions 
- *   actions={BAKERY_QUICK_ACTIONS}
- *   columns={3}
- *   userRole="baker"
- *   userPermissions={['orders.create', 'inventory.view']}
- * />
- * 
- * // Recent activity feed
- * <RecentActivity 
- *   activities={activities}
- *   showTimestamp={true}
- *   allowFiltering={true}
- *   maxItems={10}
- * />
- * 
- * // KPI widget with Spanish formatting
- * <KPIWidget
- *   title="Ingresos Diarios"
- *   value={{
- *     current: 1250.50,
- *     previous: 1100.00,
- *     format: 'currency'
- *   }}
- *   color="green"
- *   variant="detailed"
- *   showSparkline={true}
- * />
- */
\ No newline at end of file
+// Note: The following components are specified in the design but not yet implemented:
+// - DashboardCard
+// - DashboardGrid
+// - QuickActions
+// - RecentActivity
+// - KPIWidget
\ No newline at end of file
diff --git a/frontend/src/components/domain/index.ts b/frontend/src/components/domain/index.ts
index a48268f7..933db471 100644
--- a/frontend/src/components/domain/index.ts
+++ b/frontend/src/components/domain/index.ts
@@ -22,4 +22,7 @@ export * from './forecasting';
 export * from './analytics';
 
 // Onboarding components
-export * from './onboarding';
\ No newline at end of file
+export * from './onboarding';
+
+// Team components
+export { default as AddTeamMemberModal } from './team/AddTeamMemberModal';
\ No newline at end of file
diff --git a/frontend/src/components/domain/production/CreateProductionBatchModal.tsx b/frontend/src/components/domain/production/CreateProductionBatchModal.tsx
new file mode 100644
index 00000000..dead2276
--- /dev/null
+++ b/frontend/src/components/domain/production/CreateProductionBatchModal.tsx
@@ -0,0 +1,383 @@
+import React, { useState, useEffect } from 'react';
+import { Package, Clock, Users, AlertCircle, ChefHat } from 'lucide-react';
+import { StatusModal, StatusModalSection, StatusModalField } from '../../ui/StatusModal/StatusModal';
+import { Button, Input, Select } from '../../ui';
+import {
+  ProductionBatchCreate,
+  ProductionPriorityEnum
+} from '../../../api/types/production';
+import { useProductionEnums } from '../../../utils/enumHelpers';
+import { useRecipes } from '../../../api/hooks/recipes';
+import { useIngredients } from '../../../api/hooks/inventory';
+import { useCurrentTenant } from '../../../stores/tenant.store';
+
+interface CreateProductionBatchModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onCreateBatch?: (batchData: ProductionBatchCreate) => Promise<void>;
+}
+
+/**
+ * CreateProductionBatchModal - Modal for creating a new production batch
+ * Comprehensive form for adding new production batches
+ */
+export const CreateProductionBatchModal: React.FC<CreateProductionBatchModalProps> = ({
+  isOpen,
+  onClose,
+  onCreateBatch
+}) => {
+  const productionEnums = useProductionEnums();
+  const currentTenant = useCurrentTenant();
+  const tenantId = currentTenant?.id || '';
+
+  // API Data
+  const { data: recipes = [], isLoading: recipesLoading } = useRecipes(tenantId);
+  const { data: ingredients = [], isLoading: ingredientsLoading } = useIngredients(tenantId);
+
+  const [formData, setFormData] = useState<ProductionBatchCreate>({
+    product_id: '',
+    product_name: '',
+    recipe_id: '',
+    planned_start_time: '',
+    planned_end_time: '',
+    planned_quantity: 1,
+    planned_duration_minutes: 60,
+    priority: ProductionPriorityEnum.MEDIUM,
+    is_rush_order: false,
+    is_special_recipe: false,
+    production_notes: '',
+    batch_number: '',
+    order_id: '',
+    forecast_id: '',
+    equipment_used: [],
+    staff_assigned: [],
+    station_id: ''
+  });
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Reset form when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      setFormData({
+        product_id: '',
+        product_name: '',
+        recipe_id: '',
+        planned_start_time: '',
+        planned_end_time: '',
+        planned_quantity: 1,
+        planned_duration_minutes: 60,
+        priority: ProductionPriorityEnum.MEDIUM,
+        is_rush_order: false,
+        is_special_recipe: false,
+        production_notes: '',
+        batch_number: '',
+        order_id: '',
+        forecast_id: '',
+        equipment_used: [],
+        staff_assigned: [],
+        station_id: ''
+      });
+    }
+  }, [isOpen]);
+
+  // Filter finished products (ingredients that are finished products)
+  const finishedProducts = ingredients.filter(ing =>
+    ing.type === 'finished_product' ||
+    ing.category === 'finished_products' ||
+    ing.name.toLowerCase().includes('pan') ||
+    ing.name.toLowerCase().includes('pastel') ||
+    ing.name.toLowerCase().includes('torta')
+  );
+
+  const productOptions = finishedProducts.map(product => ({
+    value: product.id,
+    label: product.name
+  }));
+
+  const recipeOptions = recipes.map(recipe => ({
+    value: recipe.id,
+    label: recipe.name
+  }));
+
+  const handleSubmit = async () => {
+    // Validate required fields
+    if (!formData.product_name.trim()) {
+      alert('El nombre del producto es obligatorio');
+      return;
+    }
+
+    if (!formData.product_id.trim()) {
+      alert('El ID del producto es obligatorio');
+      return;
+    }
+
+    if (!formData.planned_start_time) {
+      alert('La fecha de inicio planificada es obligatoria');
+      return;
+    }
+
+    if (!formData.planned_end_time) {
+      alert('La fecha de fin planificada es obligatoria');
+      return;
+    }
+
+    if (formData.planned_quantity <= 0) {
+      alert('La cantidad planificada debe ser mayor a 0');
+      return;
+    }
+
+    if (formData.planned_duration_minutes <= 0) {
+      alert('La duración planificada debe ser mayor a 0');
+      return;
+    }
+
+    // Validate that end time is after start time
+    const startTime = new Date(formData.planned_start_time);
+    const endTime = new Date(formData.planned_end_time);
+
+    if (endTime <= startTime) {
+      alert('La fecha de fin debe ser posterior a la fecha de inicio');
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      if (onCreateBatch) {
+        await onCreateBatch(formData);
+      }
+      onClose();
+    } catch (error) {
+      console.error('Error creating production batch:', error);
+      alert('Error al crear el lote de producción. Por favor, inténtalo de nuevo.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // Define sections for StatusModal
+  const sections: StatusModalSection[] = [
+    {
+      title: 'Información del Producto',
+      icon: Package,
+      fields: [
+        {
+          label: 'Producto a Producir *',
+          value: formData.product_id,
+          type: 'select',
+          editable: true,
+          required: true,
+          options: productOptions,
+          span: 2
+        },
+        {
+          label: 'Receta a Utilizar',
+          value: formData.recipe_id || '',
+          type: 'select',
+          editable: true,
+          options: recipeOptions,
+          span: 2
+        },
+        {
+          label: 'Número de Lote',
+          value: formData.batch_number || '',
+          type: 'text',
+          editable: true,
+          placeholder: 'Se generará automáticamente si se deja vacío'
+        }
+      ]
+    },
+    {
+      title: 'Planificación de Producción',
+      icon: Clock,
+      fields: [
+        {
+          label: 'Inicio Planificado *',
+          value: formData.planned_start_time,
+          type: 'datetime-local',
+          editable: true,
+          required: true
+        },
+        {
+          label: 'Fin Planificado *',
+          value: formData.planned_end_time,
+          type: 'datetime-local',
+          editable: true,
+          required: true
+        },
+        {
+          label: 'Cantidad Planificada *',
+          value: formData.planned_quantity,
+          type: 'number',
+          editable: true,
+          required: true
+        },
+        {
+          label: 'Duración (minutos) *',
+          value: formData.planned_duration_minutes,
+          type: 'number',
+          editable: true,
+          required: true
+        }
+      ]
+    },
+    {
+      title: 'Configuración y Prioridad',
+      icon: AlertCircle,
+      fields: [
+        {
+          label: 'Prioridad *',
+          value: formData.priority,
+          type: 'select',
+          editable: true,
+          required: true,
+          options: productionEnums.getProductionPriorityOptions()
+        },
+        {
+          label: 'Orden Urgente',
+          value: formData.is_rush_order ? 'Sí' : 'No',
+          type: 'select',
+          editable: true,
+          options: [
+            { label: 'Sí', value: 'true' },
+            { label: 'No', value: 'false' }
+          ]
+        },
+        {
+          label: 'Receta Especial',
+          value: formData.is_special_recipe ? 'Sí' : 'No',
+          type: 'select',
+          editable: true,
+          options: [
+            { label: 'Sí', value: 'true' },
+            { label: 'No', value: 'false' }
+          ]
+        }
+      ]
+    },
+    {
+      title: 'Recursos y Notas',
+      icon: Users,
+      fields: [
+        {
+          label: 'Personal Asignado',
+          value: Array.isArray(formData.staff_assigned) ? formData.staff_assigned.join(', ') : '',
+          type: 'text',
+          editable: true,
+          placeholder: 'Separar nombres con comas (opcional)',
+          span: 2
+        },
+        {
+          label: 'Notas de Producción',
+          value: formData.production_notes || '',
+          type: 'text',
+          editable: true,
+          placeholder: 'Instrucciones especiales, observaciones, etc.',
+          span: 2
+        }
+      ]
+    }
+  ];
+
+  // Handle field changes
+  const handleFieldChange = (sectionIndex: number, fieldIndex: number, value: string | number) => {
+    // Map section and field indices to form data properties
+    switch (sectionIndex) {
+      case 0: // Product Information
+        switch (fieldIndex) {
+          case 0: // Product ID
+            const selectedProduct = finishedProducts.find(p => p.id === value);
+            setFormData(prev => ({
+              ...prev,
+              product_id: String(value),
+              product_name: selectedProduct?.name || ''
+            }));
+            break;
+          case 1: // Recipe ID
+            setFormData(prev => ({ ...prev, recipe_id: String(value) }));
+            break;
+          case 2: // Batch Number
+            setFormData(prev => ({ ...prev, batch_number: String(value) }));
+            break;
+        }
+        break;
+      case 1: // Production Planning
+        switch (fieldIndex) {
+          case 0: // Start Time
+            const startTime = String(value);
+            setFormData(prev => ({ ...prev, planned_start_time: startTime }));
+            // Auto-calculate end time
+            if (startTime && formData.planned_duration_minutes > 0) {
+              const start = new Date(startTime);
+              const end = new Date(start.getTime() + formData.planned_duration_minutes * 60000);
+              const endTimeString = end.toISOString().slice(0, 16);
+              setFormData(prev => ({ ...prev, planned_end_time: endTimeString }));
+            }
+            break;
+          case 1: // End Time
+            setFormData(prev => ({ ...prev, planned_end_time: String(value) }));
+            break;
+          case 2: // Quantity
+            setFormData(prev => ({ ...prev, planned_quantity: Number(value) || 1 }));
+            break;
+          case 3: // Duration
+            const duration = Number(value) || 60;
+            setFormData(prev => ({ ...prev, planned_duration_minutes: duration }));
+            // Auto-calculate end time
+            if (formData.planned_start_time && duration > 0) {
+              const start = new Date(formData.planned_start_time);
+              const end = new Date(start.getTime() + duration * 60000);
+              const endTimeString = end.toISOString().slice(0, 16);
+              setFormData(prev => ({ ...prev, planned_end_time: endTimeString }));
+            }
+            break;
+        }
+        break;
+      case 2: // Configuration
+        switch (fieldIndex) {
+          case 0: // Priority
+            setFormData(prev => ({ ...prev, priority: value as ProductionPriorityEnum }));
+            break;
+          case 1: // Rush Order
+            setFormData(prev => ({ ...prev, is_rush_order: String(value) === 'true' }));
+            break;
+          case 2: // Special Recipe
+            setFormData(prev => ({ ...prev, is_special_recipe: String(value) === 'true' }));
+            break;
+        }
+        break;
+      case 3: // Resources and Notes
+        switch (fieldIndex) {
+          case 0: // Staff Assigned
+            const staff = String(value).split(',').map(s => s.trim()).filter(s => s.length > 0);
+            setFormData(prev => ({ ...prev, staff_assigned: staff }));
+            break;
+          case 1: // Production Notes
+            setFormData(prev => ({ ...prev, production_notes: String(value) }));
+            break;
+        }
+        break;
+    }
+  };
+
+  return (
+    <StatusModal
+      isOpen={isOpen}
+      onClose={onClose}
+      mode="edit"
+      title="Nueva Orden de Producción"
+      subtitle="Crear un nuevo lote de producción"
+      sections={sections}
+      size="xl"
+      loading={isSubmitting}
+      onFieldChange={handleFieldChange}
+      image={undefined}
+      onSave={handleSubmit}
+      onCancel={onClose}
+      showDefaultActions={true}
+    />
+  );
+};
+
+export default CreateProductionBatchModal;
\ No newline at end of file
diff --git a/frontend/src/components/domain/production/RecipeDisplay.tsx b/frontend/src/components/domain/production/RecipeDisplay.tsx
deleted file mode 100644
index 27f7fcec..00000000
--- a/frontend/src/components/domain/production/RecipeDisplay.tsx
+++ /dev/null
@@ -1,802 +0,0 @@
-import React, { useState, useCallback, useMemo } from 'react';
-import { Card, Button, Badge, Input, Modal, Table, Select } from '../../ui';
-import type { Recipe, RecipeIngredient, RecipeInstruction, NutritionalInfo } from '../../../types/production.types';
-
-// Local enum definition to avoid import issues
-enum DifficultyLevel {
-  BEGINNER = 'beginner',
-  INTERMEDIATE = 'intermediate',
-  ADVANCED = 'advanced',
-  EXPERT = 'expert',
-}
-
-interface RecipeDisplayProps {
-  className?: string;
-  recipe: Recipe;
-  editable?: boolean;
-  showNutrition?: boolean;
-  showCosting?: boolean;
-  onScaleChange?: (scaleFactor: number, scaledRecipe: Recipe) => void;
-  onVersionUpdate?: (newVersion: Recipe) => void;
-  onCostCalculation?: (totalCost: number, costPerUnit: number) => void;
-}
-
-interface ScaledIngredient extends RecipeIngredient {
-  scaledQuantity: number;
-  scaledCost?: number;
-}
-
-interface ScaledInstruction extends RecipeInstruction {
-  scaledDuration?: number;
-}
-
-interface ScaledRecipe extends Omit<Recipe, 'ingredients' | 'instructions'> {
-  scaledYieldQuantity: number;
-  scaledTotalTime: number;
-  ingredients: ScaledIngredient[];
-  instructions: ScaledInstruction[];
-  scaleFactor: number;
-  estimatedTotalCost?: number;
-  costPerScaledUnit?: number;
-}
-
-interface TimerState {
-  instructionId: string;
-  duration: number;
-  remaining: number;
-  isActive: boolean;
-  isComplete: boolean;
-}
-
-const DIFFICULTY_COLORS = {
-  [DifficultyLevel.BEGINNER]: 'bg-[var(--color-success)]/10 text-[var(--color-success)]',
-  [DifficultyLevel.INTERMEDIATE]: 'bg-yellow-100 text-yellow-800',
-  [DifficultyLevel.ADVANCED]: 'bg-[var(--color-primary)]/10 text-[var(--color-primary)]',
-  [DifficultyLevel.EXPERT]: 'bg-[var(--color-error)]/10 text-[var(--color-error)]',
-};
-
-const DIFFICULTY_LABELS = {
-  [DifficultyLevel.BEGINNER]: 'Principiante',
-  [DifficultyLevel.INTERMEDIATE]: 'Intermedio',
-  [DifficultyLevel.ADVANCED]: 'Avanzado',
-  [DifficultyLevel.EXPERT]: 'Experto',
-};
-
-const ALLERGEN_ICONS: Record<string, string> = {
-  gluten: '🌾',
-  milk: '🥛',
-  eggs: '🥚',
-  nuts: '🥜',
-  soy: '🫘',
-  sesame: '🌰',
-  fish: '🐟',
-  shellfish: '🦐',
-};
-
-const EQUIPMENT_ICONS: Record<string, string> = {
-  oven: '🔥',
-  mixer: '🥄',
-  scale: '⚖️',
-  bowl: '🥣',
-  whisk: '🔄',
-  spatula: '🍴',
-  thermometer: '🌡️',
-  timer: '⏰',
-};
-
-export const RecipeDisplay: React.FC<RecipeDisplayProps> = ({
-  className = '',
-  recipe,
-  editable = false,
-  showNutrition = true,
-  showCosting = false,
-  onScaleChange,
-  onVersionUpdate,
-  onCostCalculation,
-}) => {
-  const [scaleFactor, setScaleFactor] = useState<number>(1);
-  const [activeTimers, setActiveTimers] = useState<Record<string, TimerState>>({});
-  const [isNutritionModalOpen, setIsNutritionModalOpen] = useState(false);
-  const [isCostingModalOpen, setIsCostingModalOpen] = useState(false);
-  const [isEquipmentModalOpen, setIsEquipmentModalOpen] = useState(false);
-  const [selectedInstruction, setSelectedInstruction] = useState<RecipeInstruction | null>(null);
-  const [showAllergensDetail, setShowAllergensDetail] = useState(false);
-
-  // Mock ingredient costs for demonstration
-  const ingredientCosts: Record<string, number> = {
-    flour: 1.2, // €/kg
-    water: 0.001, // €/l
-    salt: 0.8, // €/kg
-    yeast: 8.5, // €/kg
-    sugar: 1.5, // €/kg
-    butter: 6.2, // €/kg
-    milk: 1.3, // €/l
-    eggs: 0.25, // €/unit
-  };
-
-  const scaledRecipe = useMemo((): ScaledRecipe => {
-    const scaledIngredients: ScaledIngredient[] = recipe.ingredients.map(ingredient => ({
-      ...ingredient,
-      scaledQuantity: ingredient.quantity * scaleFactor,
-      scaledCost: ingredientCosts[ingredient.ingredient_id] 
-        ? ingredientCosts[ingredient.ingredient_id] * ingredient.quantity * scaleFactor
-        : undefined,
-    }));
-
-    const scaledInstructions: ScaledInstruction[] = recipe.instructions.map(instruction => ({
-      ...instruction,
-      scaledDuration: instruction.duration_minutes ? Math.ceil(instruction.duration_minutes * scaleFactor) : undefined,
-    }));
-
-    const estimatedTotalCost = scaledIngredients.reduce((total, ingredient) => 
-      total + (ingredient.scaledCost || 0), 0
-    );
-
-    const scaledYieldQuantity = recipe.yield_quantity * scaleFactor;
-    const costPerScaledUnit = scaledYieldQuantity > 0 ? estimatedTotalCost / scaledYieldQuantity : 0;
-
-    return {
-      ...recipe,
-      scaledYieldQuantity,
-      scaledTotalTime: Math.ceil(recipe.total_time_minutes * scaleFactor),
-      ingredients: scaledIngredients,
-      instructions: scaledInstructions,
-      scaleFactor,
-      estimatedTotalCost,
-      costPerScaledUnit,
-    };
-  }, [recipe, scaleFactor, ingredientCosts]);
-
-  const handleScaleChange = useCallback((newScaleFactor: number) => {
-    setScaleFactor(newScaleFactor);
-    if (onScaleChange) {
-      onScaleChange(newScaleFactor, scaledRecipe as unknown as Recipe);
-    }
-  }, [scaledRecipe, onScaleChange]);
-
-  const startTimer = (instruction: RecipeInstruction) => {
-    if (!instruction.duration_minutes) return;
-
-    const timerState: TimerState = {
-      instructionId: instruction.step_number.toString(),
-      duration: instruction.duration_minutes * 60, // Convert to seconds
-      remaining: instruction.duration_minutes * 60,
-      isActive: true,
-      isComplete: false,
-    };
-
-    setActiveTimers(prev => ({
-      ...prev,
-      [instruction.step_number.toString()]: timerState,
-    }));
-
-    // Start countdown
-    const interval = setInterval(() => {
-      setActiveTimers(prev => {
-        const current = prev[instruction.step_number.toString()];
-        if (!current || current.remaining <= 0) {
-          clearInterval(interval);
-          return {
-            ...prev,
-            [instruction.step_number.toString()]: {
-              ...current,
-              remaining: 0,
-              isActive: false,
-              isComplete: true,
-            }
-          };
-        }
-
-        return {
-          ...prev,
-          [instruction.step_number.toString()]: {
-            ...current,
-            remaining: current.remaining - 1,
-          }
-        };
-      });
-    }, 1000);
-  };
-
-  const stopTimer = (instructionId: string) => {
-    setActiveTimers(prev => ({
-      ...prev,
-      [instructionId]: {
-        ...prev[instructionId],
-        isActive: false,
-      }
-    }));
-  };
-
-  const formatTime = (seconds: number): string => {
-    const hours = Math.floor(seconds / 3600);
-    const minutes = Math.floor((seconds % 3600) / 60);
-    const secs = seconds % 60;
-
-    if (hours > 0) {
-      return `${hours}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
-    }
-    return `${minutes}:${String(secs).padStart(2, '0')}`;
-  };
-
-  const renderScalingControls = () => (
-    <Card className="p-4">
-      <h3 className="font-semibold text-lg mb-4">Escalado de receta</h3>
-      
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 items-end">
-        <div>
-          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-            Factor de escala
-          </label>
-          <Input
-            type="number"
-            min="0.1"
-            max="10"
-            step="0.1"
-            value={scaleFactor}
-            onChange={(e) => handleScaleChange(parseFloat(e.target.value) || 1)}
-            className="w-full"
-          />
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-            Cantidad original
-          </label>
-          <p className="text-lg font-semibold text-[var(--text-primary)]">
-            {recipe.yield_quantity} {recipe.yield_unit}
-          </p>
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
-            Cantidad escalada
-          </label>
-          <p className="text-lg font-semibold text-[var(--color-info)]">
-            {scaledRecipe.scaledYieldQuantity} {recipe.yield_unit}
-          </p>
-        </div>
-      </div>
-
-      <div className="flex gap-2 mt-4">
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => handleScaleChange(0.5)}
-          className={scaleFactor === 0.5 ? 'bg-[var(--color-info)]/5 border-blue-300' : ''}
-        >
-          1/2
-        </Button>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => handleScaleChange(1)}
-          className={scaleFactor === 1 ? 'bg-[var(--color-info)]/5 border-blue-300' : ''}
-        >
-          1x
-        </Button>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => handleScaleChange(2)}
-          className={scaleFactor === 2 ? 'bg-[var(--color-info)]/5 border-blue-300' : ''}
-        >
-          2x
-        </Button>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => handleScaleChange(3)}
-          className={scaleFactor === 3 ? 'bg-[var(--color-info)]/5 border-blue-300' : ''}
-        >
-          3x
-        </Button>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => handleScaleChange(5)}
-          className={scaleFactor === 5 ? 'bg-[var(--color-info)]/5 border-blue-300' : ''}
-        >
-          5x
-        </Button>
-      </div>
-
-      {scaleFactor !== 1 && (
-        <div className="mt-4 p-3 bg-[var(--color-info)]/5 border border-[var(--color-info)]/20 rounded-lg">
-          <p className="text-sm text-[var(--color-info)]">
-            <span className="font-medium">Tiempo total escalado:</span> {Math.ceil(scaledRecipe.scaledTotalTime / 60)}h {scaledRecipe.scaledTotalTime % 60}m
-          </p>
-          {showCosting && scaledRecipe.estimatedTotalCost && (
-            <p className="text-sm text-[var(--color-info)] mt-1">
-              <span className="font-medium">Costo estimado:</span> €{scaledRecipe.estimatedTotalCost.toFixed(2)} 
-              (€{scaledRecipe.costPerScaledUnit?.toFixed(3)}/{recipe.yield_unit})
-            </p>
-          )}
-        </div>
-      )}
-    </Card>
-  );
-
-  const renderRecipeHeader = () => (
-    <Card className="p-6">
-      <div className="flex flex-col lg:flex-row gap-6">
-        <div className="flex-1">
-          <div className="flex items-start justify-between mb-4">
-            <div>
-              <h1 className="text-3xl font-bold text-[var(--text-primary)]">{recipe.name}</h1>
-              <p className="text-[var(--text-secondary)] mt-1">{recipe.description}</p>
-            </div>
-            
-            <div className="flex gap-2">
-              <Badge className={DIFFICULTY_COLORS[recipe.difficulty_level]}>
-                {DIFFICULTY_LABELS[recipe.difficulty_level]}
-              </Badge>
-              <Badge className="bg-[var(--color-info)]/10 text-[var(--color-info)]">
-                v{recipe.version}
-              </Badge>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-            <div>
-              <p className="text-sm text-[var(--text-secondary)]">Preparación</p>
-              <p className="font-semibold">{recipe.prep_time_minutes} min</p>
-            </div>
-            <div>
-              <p className="text-sm text-[var(--text-secondary)]">Cocción</p>
-              <p className="font-semibold">{recipe.cook_time_minutes} min</p>
-            </div>
-            <div>
-              <p className="text-sm text-[var(--text-secondary)]">Total</p>
-              <p className="font-semibold">{Math.ceil(recipe.total_time_minutes / 60)}h {recipe.total_time_minutes % 60}m</p>
-            </div>
-            <div>
-              <p className="text-sm text-[var(--text-secondary)]">Rendimiento</p>
-              <p className="font-semibold">{scaledRecipe.scaledYieldQuantity} {recipe.yield_unit}</p>
-            </div>
-          </div>
-
-          {recipe.allergen_warnings.length > 0 && (
-            <div className="mt-4">
-              <div className="flex items-center justify-between">
-                <p className="text-sm font-medium text-[var(--text-secondary)]">Alérgenos:</p>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => setShowAllergensDetail(!showAllergensDetail)}
-                >
-                  {showAllergensDetail ? 'Ocultar' : 'Ver detalles'}
-                </Button>
-              </div>
-              <div className="flex flex-wrap gap-2 mt-2">
-                {recipe.allergen_warnings.map((allergen) => (
-                  <Badge
-                    key={allergen}
-                    className="bg-[var(--color-error)]/10 text-[var(--color-error)] border border-red-200"
-                  >
-                    {ALLERGEN_ICONS[allergen]} {allergen}
-                  </Badge>
-                ))}
-              </div>
-              
-              {showAllergensDetail && (
-                <div className="mt-3 p-3 bg-red-50 border border-red-200 rounded-lg">
-                  <p className="text-sm text-[var(--color-error)]">
-                    ⚠️ Este producto contiene los siguientes alérgenos. Revisar cuidadosamente 
-                    antes del consumo si existe alguna alergia o intolerancia alimentaria.
-                  </p>
-                </div>
-              )}
-            </div>
-          )}
-
-          {recipe.storage_instructions && (
-            <div className="mt-4 p-3 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg">
-              <p className="text-sm text-[var(--text-secondary)]">
-                <span className="font-medium">Conservación:</span> {recipe.storage_instructions}
-                {recipe.shelf_life_hours && (
-                  <span className="ml-2">
-                    • Vida útil: {Math.ceil(recipe.shelf_life_hours / 24)} días
-                  </span>
-                )}
-              </p>
-            </div>
-          )}
-        </div>
-
-        <div className="flex flex-col gap-2 lg:w-48">
-          {showNutrition && (
-            <Button
-              variant="outline"
-              onClick={() => setIsNutritionModalOpen(true)}
-              className="w-full"
-            >
-              📊 Información nutricional
-            </Button>
-          )}
-          
-          {showCosting && (
-            <Button
-              variant="outline"
-              onClick={() => setIsCostingModalOpen(true)}
-              className="w-full"
-            >
-              💰 Análisis de costos
-            </Button>
-          )}
-          
-          <Button
-            variant="outline"
-            onClick={() => setIsEquipmentModalOpen(true)}
-            className="w-full"
-          >
-            🔧 Equipo necesario
-          </Button>
-          
-          {editable && onVersionUpdate && (
-            <Button variant="primary" className="w-full">
-              ✏️ Editar receta
-            </Button>
-          )}
-        </div>
-      </div>
-    </Card>
-  );
-
-  const renderIngredients = () => (
-    <Card className="p-6">
-      <h2 className="text-xl font-semibold mb-4">Ingredientes</h2>
-      
-      <div className="space-y-3">
-        {scaledRecipe.ingredients.map((ingredient, index) => (
-          <div
-            key={`${ingredient.ingredient_id}-${index}`}
-            className="flex items-center justify-between py-2 border-b border-[var(--border-primary)] last:border-b-0"
-          >
-            <div className="flex-1">
-              <p className="font-medium text-[var(--text-primary)]">{ingredient.ingredient_name}</p>
-              {ingredient.preparation_notes && (
-                <p className="text-sm text-[var(--text-secondary)] italic">{ingredient.preparation_notes}</p>
-              )}
-              {ingredient.is_optional && (
-                <Badge className="bg-[var(--bg-tertiary)] text-[var(--text-secondary)] text-xs mt-1">
-                  Opcional
-                </Badge>
-              )}
-            </div>
-            
-            <div className="text-right ml-4">
-              <p className="font-semibold text-lg">
-                {ingredient.scaledQuantity.toFixed(ingredient.scaledQuantity < 1 ? 2 : 0)} {ingredient.unit}
-              </p>
-              {scaleFactor !== 1 && (
-                <p className="text-sm text-[var(--text-tertiary)]">
-                  (original: {ingredient.quantity} {ingredient.unit})
-                </p>
-              )}
-              {showCosting && ingredient.scaledCost && (
-                <p className="text-sm text-[var(--color-success)]">
-                  €{ingredient.scaledCost.toFixed(2)}
-                </p>
-              )}
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {showCosting && scaledRecipe.estimatedTotalCost && (
-        <div className="mt-4 pt-4 border-t border-[var(--border-primary)]">
-          <div className="flex justify-between items-center">
-            <span className="font-semibold">Costo total estimado:</span>
-            <span className="text-xl font-bold text-[var(--color-success)]">
-              €{scaledRecipe.estimatedTotalCost.toFixed(2)}
-            </span>
-          </div>
-          <p className="text-sm text-[var(--text-secondary)] text-right">
-            €{scaledRecipe.costPerScaledUnit?.toFixed(3)} por {recipe.yield_unit}
-          </p>
-        </div>
-      )}
-    </Card>
-  );
-
-  const renderInstructions = () => (
-    <Card className="p-6">
-      <h2 className="text-xl font-semibold mb-4">Instrucciones</h2>
-      
-      <div className="space-y-4">
-        {scaledRecipe.instructions.map((instruction, index) => {
-          const timer = activeTimers[instruction.step_number.toString()];
-          
-          return (
-            <div
-              key={instruction.step_number}
-              className={`p-4 border rounded-lg ${
-                instruction.critical_control_point 
-                  ? 'border-orange-300 bg-orange-50' 
-                  : 'border-[var(--border-primary)] bg-[var(--bg-secondary)]'
-              }`}
-            >
-              <div className="flex items-start gap-4">
-                <div className="flex-shrink-0">
-                  <div className="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-semibold">
-                    {instruction.step_number}
-                  </div>
-                </div>
-                
-                <div className="flex-1">
-                  <div className="flex items-center justify-between mb-2">
-                    <div className="flex items-center gap-2">
-                      {instruction.duration_minutes && (
-                        <Badge className="bg-[var(--color-info)]/10 text-[var(--color-info)]">
-                          ⏱️ {instruction.scaledDuration || instruction.duration_minutes} min
-                        </Badge>
-                      )}
-                      
-                      {instruction.temperature && (
-                        <Badge className="bg-[var(--color-error)]/10 text-[var(--color-error)]">
-                          🌡️ {instruction.temperature}°C
-                        </Badge>
-                      )}
-                      
-                      {instruction.critical_control_point && (
-                        <Badge className="bg-[var(--color-primary)]/10 text-[var(--color-primary)]">
-                          🚨 PCC
-                        </Badge>
-                      )}
-                    </div>
-                    
-                    {instruction.duration_minutes && (
-                      <div className="flex gap-2">
-                        {!timer?.isActive && !timer?.isComplete && (
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            onClick={() => startTimer(instruction)}
-                          >
-                            ▶️ Iniciar timer
-                          </Button>
-                        )}
-                        
-                        {timer?.isActive && (
-                          <div className="flex items-center gap-2">
-                            <span className="text-lg font-mono font-bold text-[var(--color-info)]">
-                              {formatTime(timer.remaining)}
-                            </span>
-                            <Button
-                              variant="outline"
-                              size="sm"
-                              onClick={() => stopTimer(instruction.step_number.toString())}
-                            >
-                              ⏸️
-                            </Button>
-                          </div>
-                        )}
-                        
-                        {timer?.isComplete && (
-                          <Badge className="bg-[var(--color-success)]/10 text-[var(--color-success)] animate-pulse">
-                            ✅ Completado
-                          </Badge>
-                        )}
-                      </div>
-                    )}
-                  </div>
-                  
-                  <p className="text-[var(--text-primary)] leading-relaxed mb-2">
-                    {instruction.instruction}
-                  </p>
-                  
-                  {instruction.equipment && instruction.equipment.length > 0 && (
-                    <div className="mb-2">
-                      <p className="text-sm text-[var(--text-secondary)] mb-1">Equipo necesario:</p>
-                      <div className="flex flex-wrap gap-1">
-                        {instruction.equipment.map((equipment, idx) => (
-                          <Badge key={idx} className="bg-[var(--bg-tertiary)] text-[var(--text-secondary)] text-xs">
-                            {EQUIPMENT_ICONS[equipment.toLowerCase()] || '🔧'} {equipment}
-                          </Badge>
-                        ))}
-                      </div>
-                    </div>
-                  )}
-                  
-                  {instruction.tips && (
-                    <div className="mt-3 p-2 bg-yellow-50 border border-yellow-200 rounded">
-                      <p className="text-sm text-yellow-800">
-                        💡 <span className="font-medium">Tip:</span> {instruction.tips}
-                      </p>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </Card>
-  );
-
-  const renderNutritionModal = () => (
-    <Modal
-      isOpen={isNutritionModalOpen}
-      onClose={() => setIsNutritionModalOpen(false)}
-      title="Información Nutricional"
-    >
-      {recipe.nutritional_info ? (
-        <div className="space-y-4">
-          <div className="grid grid-cols-2 gap-4">
-            <div className="bg-[var(--bg-secondary)] p-4 rounded-lg">
-              <p className="text-sm text-[var(--text-secondary)]">Calorías por porción</p>
-              <p className="text-2xl font-bold text-[var(--text-primary)]">
-                {recipe.nutritional_info.calories_per_serving || 'N/A'}
-              </p>
-            </div>
-            
-            <div className="bg-[var(--bg-secondary)] p-4 rounded-lg">
-              <p className="text-sm text-[var(--text-secondary)]">Tamaño de porción</p>
-              <p className="text-lg font-semibold text-[var(--text-primary)]">
-                {recipe.nutritional_info.serving_size || 'N/A'}
-              </p>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-            <div>
-              <p className="text-sm text-[var(--text-secondary)]">Proteínas</p>
-              <p className="text-lg font-semibold">{recipe.nutritional_info.protein_g || 0}g</p>
-            </div>
-            <div>
-              <p className="text-sm text-[var(--text-secondary)]">Carbohidratos</p>
-              <p className="text-lg font-semibold">{recipe.nutritional_info.carbohydrates_g || 0}g</p>
-            </div>
-            <div>
-              <p className="text-sm text-[var(--text-secondary)]">Grasas</p>
-              <p className="text-lg font-semibold">{recipe.nutritional_info.fat_g || 0}g</p>
-            </div>
-            <div>
-              <p className="text-sm text-[var(--text-secondary)]">Fibra</p>
-              <p className="text-lg font-semibold">{recipe.nutritional_info.fiber_g || 0}g</p>
-            </div>
-            <div>
-              <p className="text-sm text-[var(--text-secondary)]">Azúcares</p>
-              <p className="text-lg font-semibold">{recipe.nutritional_info.sugar_g || 0}g</p>
-            </div>
-            <div>
-              <p className="text-sm text-[var(--text-secondary)]">Sodio</p>
-              <p className="text-lg font-semibold">{recipe.nutritional_info.sodium_mg || 0}mg</p>
-            </div>
-          </div>
-
-          <div className="bg-[var(--color-info)]/5 p-4 rounded-lg">
-            <p className="text-sm text-[var(--color-info)]">
-              <span className="font-medium">Porciones por lote escalado:</span> {
-                recipe.nutritional_info.servings_per_batch 
-                  ? Math.ceil(recipe.nutritional_info.servings_per_batch * scaleFactor)
-                  : 'N/A'
-              }
-            </p>
-          </div>
-        </div>
-      ) : (
-        <p className="text-[var(--text-tertiary)] text-center py-8">
-          No hay información nutricional disponible para esta receta.
-        </p>
-      )}
-    </Modal>
-  );
-
-  const renderCostingModal = () => (
-    <Modal
-      isOpen={isCostingModalOpen}
-      onClose={() => setIsCostingModalOpen(false)}
-      title="Análisis de Costos"
-    >
-      <div className="space-y-4">
-        <div className="bg-green-50 border border-green-200 p-4 rounded-lg">
-          <div className="flex justify-between items-center mb-2">
-            <span className="font-semibold text-green-900">Costo total</span>
-            <span className="text-2xl font-bold text-[var(--color-success)]">
-              €{scaledRecipe.estimatedTotalCost?.toFixed(2)}
-            </span>
-          </div>
-          <p className="text-sm text-[var(--color-success)]">
-            €{scaledRecipe.costPerScaledUnit?.toFixed(3)} por {recipe.yield_unit}
-          </p>
-        </div>
-
-        <div>
-          <h4 className="font-semibold mb-3">Desglose por ingrediente</h4>
-          <div className="space-y-2">
-            {scaledRecipe.ingredients.map((ingredient, index) => (
-              <div key={index} className="flex justify-between items-center py-2 border-b border-[var(--border-primary)]">
-                <div>
-                  <p className="font-medium">{ingredient.ingredient_name}</p>
-                  <p className="text-sm text-[var(--text-secondary)]">
-                    {ingredient.scaledQuantity.toFixed(2)} {ingredient.unit}
-                  </p>
-                </div>
-                <p className="font-semibold text-[var(--color-success)]">
-                  €{ingredient.scaledCost?.toFixed(2) || '0.00'}
-                </p>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <div className="bg-[var(--color-info)]/5 p-4 rounded-lg">
-          <h4 className="font-semibold text-blue-900 mb-2">Análisis de rentabilidad</h4>
-          <div className="space-y-1 text-sm text-[var(--color-info)]">
-            <p>• Costo de ingredientes: €{scaledRecipe.estimatedTotalCost?.toFixed(2)}</p>
-            <p>• Margen sugerido (300%): €{((scaledRecipe.estimatedTotalCost || 0) * 3).toFixed(2)}</p>
-            <p>• Precio de venta sugerido por {recipe.yield_unit}: €{((scaledRecipe.costPerScaledUnit || 0) * 4).toFixed(2)}</p>
-          </div>
-        </div>
-      </div>
-    </Modal>
-  );
-
-  const renderEquipmentModal = () => (
-    <Modal
-      isOpen={isEquipmentModalOpen}
-      onClose={() => setIsEquipmentModalOpen(false)}
-      title="Equipo Necesario"
-    >
-      <div className="space-y-4">
-        <div>
-          <h4 className="font-semibold mb-3">Equipo general de la receta</h4>
-          <div className="grid grid-cols-2 gap-2">
-            {recipe.equipment_needed.map((equipment, index) => (
-              <div key={index} className="flex items-center gap-2 p-2 bg-[var(--bg-secondary)] rounded">
-                <span className="text-xl">
-                  {EQUIPMENT_ICONS[equipment.toLowerCase()] || '🔧'}
-                </span>
-                <span className="text-sm">{equipment}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <div>
-          <h4 className="font-semibold mb-3">Equipo por instrucción</h4>
-          <div className="space-y-2">
-            {recipe.instructions
-              .filter(instruction => instruction.equipment && instruction.equipment.length > 0)
-              .map((instruction) => (
-                <div key={instruction.step_number} className="border border-[var(--border-primary)] p-3 rounded">
-                  <p className="font-medium text-sm mb-2">
-                    Paso {instruction.step_number}
-                  </p>
-                  <div className="flex flex-wrap gap-1">
-                    {instruction.equipment?.map((equipment, idx) => (
-                      <Badge key={idx} className="bg-[var(--color-info)]/10 text-[var(--color-info)] text-xs">
-                        {EQUIPMENT_ICONS[equipment.toLowerCase()] || '🔧'} {equipment}
-                      </Badge>
-                    ))}
-                  </div>
-                </div>
-              ))}
-          </div>
-        </div>
-      </div>
-    </Modal>
-  );
-
-  return (
-    <div className={`space-y-6 ${className}`}>
-      {renderRecipeHeader()}
-      {renderScalingControls()}
-      
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {renderIngredients()}
-        <div className="space-y-6">
-          {renderInstructions()}
-        </div>
-      </div>
-
-      {renderNutritionModal()}
-      {renderCostingModal()}
-      {renderEquipmentModal()}
-    </div>
-  );
-};
-
-export default RecipeDisplay;
\ No newline at end of file
diff --git a/frontend/src/components/domain/production/index.ts b/frontend/src/components/domain/production/index.ts
index 1ef6ddb5..5b3f8542 100644
--- a/frontend/src/components/domain/production/index.ts
+++ b/frontend/src/components/domain/production/index.ts
@@ -2,11 +2,9 @@
 export { default as ProductionSchedule } from './ProductionSchedule';
 export { default as BatchTracker } from './BatchTracker';
 export { default as QualityControl } from './QualityControl';
-export { default as RecipeDisplay } from './RecipeDisplay';
-
+export { CreateProductionBatchModal } from './CreateProductionBatchModal';
 
 // Export component props types
 export type { ProductionScheduleProps } from './ProductionSchedule';
 export type { BatchTrackerProps } from './BatchTracker';
-export type { QualityControlProps } from './QualityControl';
-export type { RecipeDisplayProps } from './RecipeDisplay';
\ No newline at end of file
+export type { QualityControlProps } from './QualityControl';
\ No newline at end of file
diff --git a/frontend/src/components/domain/sales/OrdersTable.tsx b/frontend/src/components/domain/sales/OrdersTable.tsx
index 471eaf4a..3982ee30 100644
--- a/frontend/src/components/domain/sales/OrdersTable.tsx
+++ b/frontend/src/components/domain/sales/OrdersTable.tsx
@@ -9,15 +9,38 @@ import {
   Modal,
   Tooltip
 } from '../../ui';
-import { 
-  SalesRecord,
-  SalesChannel,
-  PaymentMethod,
-  SalesSortField,
-  SortOrder
-} from '../../../types/sales.types';
-import { salesService } from '../../../api/services/sales.service';
-import { useSales } from '../../../hooks/api/useSales';
+import { SalesDataResponse } from '../../../api/types/sales';
+import { salesService } from '../../../api/services/sales';
+import { useSalesRecords } from '../../../api/hooks/sales';
+
+// Define missing types for backwards compatibility
+type SalesRecord = SalesDataResponse;
+
+enum SalesChannel {
+  ONLINE = 'online',
+  IN_STORE = 'in_store',
+  PHONE = 'phone',
+  DELIVERY = 'delivery'
+}
+
+enum PaymentMethod {
+  CASH = 'cash',
+  CARD = 'card',
+  DIGITAL = 'digital',
+  TRANSFER = 'transfer'
+}
+
+enum SalesSortField {
+  DATE = 'date',
+  TOTAL = 'total_revenue',
+  PRODUCT = 'product_name',
+  QUANTITY = 'quantity_sold'
+}
+
+enum SortOrder {
+  ASC = 'asc',
+  DESC = 'desc'
+}
 
 // Extended interface for orders
 interface Order extends SalesRecord {
diff --git a/frontend/src/components/domain/sales/SalesChart.tsx b/frontend/src/components/domain/sales/SalesChart.tsx
index d90f2520..6b02308a 100644
--- a/frontend/src/components/domain/sales/SalesChart.tsx
+++ b/frontend/src/components/domain/sales/SalesChart.tsx
@@ -6,14 +6,58 @@ import {
   Badge,
   Tooltip
 } from '../../ui';
-import { 
-  SalesAnalytics,
-  DailyTrend,
-  ProductPerformance,
-  PeriodType
-} from '../../../types/sales.types';
-import { salesService } from '../../../api/services/sales.service';
-import { useSales } from '../../../hooks/api/useSales';
+import { SalesAnalytics } from '../../../api/types/sales';
+import { ProductPerformance } from '../analytics/types';
+import { salesService } from '../../../api/services/sales';
+import { useSalesAnalytics } from '../../../api/hooks/sales';
+
+// Define missing types
+export enum PeriodType {
+  DAILY = 'daily',
+  WEEKLY = 'weekly',
+  MONTHLY = 'monthly',
+  QUARTERLY = 'quarterly',
+  YEARLY = 'yearly'
+}
+
+export interface DailyTrend {
+  date: string;
+  revenue: number;
+  quantity: number;
+  orders: number;
+  average_order_value: number;
+  new_customers: number;
+  day_type: 'weekday' | 'weekend' | 'holiday';
+}
+
+interface ExtendedSalesAnalytics extends SalesAnalytics {
+  overview?: {
+    total_revenue: number;
+    total_quantity: number;
+    total_orders: number;
+    average_order_value: number;
+    gross_profit: number;
+    profit_margin: number;
+    discount_percentage: number;
+    tax_percentage: number;
+    best_selling_products: ProductPerformance[];
+    revenue_by_channel: any[];
+  };
+  daily_trends?: DailyTrend[];
+  hourly_patterns?: Array<{
+    hour: number;
+    average_sales: number;
+    peak_day: string;
+    orders_count: number;
+    revenue_percentage: number;
+    staff_recommendation: number;
+  }>;
+  product_performance?: ProductPerformance[];
+  customer_segments?: any[];
+  weather_impact?: any[];
+  seasonal_patterns?: any[];
+  forecast?: any[];
+}
 
 interface SalesChartProps {
   tenantId?: string;
@@ -94,7 +138,7 @@ export const SalesChart: React.FC<SalesChartProps> = ({
   className = ''
 }) => {
   // State
-  const [analytics, setAnalytics] = useState<SalesAnalytics | null>(null);
+  const [analytics, setAnalytics] = useState<ExtendedSalesAnalytics | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -117,8 +161,8 @@ export const SalesChart: React.FC<SalesChartProps> = ({
   // Export options
   const [showExportModal, setShowExportModal] = useState(false);
 
-  // Sales hook
-  const { fetchAnalytics } = useSales();
+  // Sales hook (not used directly, but could be used for caching)
+  // const salesAnalytics = useSalesAnalytics(tenantId || '', dateRange.start, dateRange.end);
 
   // Load analytics data
   useEffect(() => {
@@ -130,55 +174,55 @@ export const SalesChart: React.FC<SalesChartProps> = ({
     setError(null);
 
     try {
-      const response = await salesService.getSalesAnalytics({
-        start_date: dateRange.start,
-        end_date: dateRange.end,
-        granularity: timePeriod === PeriodType.DAILY ? 'daily' : 
-                    timePeriod === PeriodType.WEEKLY ? 'weekly' : 'monthly'
-      });
+      const response = await salesService.getSalesAnalytics(
+        tenantId || '',
+        dateRange.start,
+        dateRange.end
+      );
 
-      if (response.success && response.data) {
-        // Transform the API data to our analytics format
-        const mockAnalytics: SalesAnalytics = {
+      if (response) {
+        // Transform the API data to our extended analytics format
+        const extendedAnalytics: ExtendedSalesAnalytics = {
+          ...response,
           overview: {
-            total_revenue: response.data.daily_sales?.reduce((sum, day) => sum + day.revenue, 0) || 0,
-            total_quantity: response.data.daily_sales?.reduce((sum, day) => sum + day.quantity, 0) || 0,
-            total_orders: response.data.daily_sales?.reduce((sum, day) => sum + day.orders, 0) || 0,
-            average_order_value: 0,
+            total_revenue: response.total_revenue || 0,
+            total_quantity: response.total_quantity || 0,
+            total_orders: response.total_transactions || 0,
+            average_order_value: response.average_unit_price || 0,
             gross_profit: 0,
             profit_margin: 0,
             discount_percentage: 0,
             tax_percentage: 21,
-            best_selling_products: response.data.product_performance || [],
-            revenue_by_channel: []
+            best_selling_products: response.top_products || [],
+            revenue_by_channel: response.revenue_by_channel || []
           },
-          daily_trends: response.data.daily_sales?.map(day => ({
+          daily_trends: response.revenue_by_date?.map(day => ({
             date: day.date,
             revenue: day.revenue,
             quantity: day.quantity,
-            orders: day.orders,
-            average_order_value: day.revenue / day.orders || 0,
+            orders: Math.floor(day.quantity / 2) || 1, // Mock orders count
+            average_order_value: day.revenue / Math.max(Math.floor(day.quantity / 2), 1),
             new_customers: Math.floor(Math.random() * 10),
             day_type: 'weekday' as const
           })) || [],
-          hourly_patterns: response.data.hourly_patterns?.map((pattern, index) => ({
+          hourly_patterns: Array.from({ length: 12 }, (_, index) => ({
             hour: index + 8, // Start from 8 AM
-            average_sales: pattern.average_sales,
-            peak_day: pattern.peak_day as any,
-            orders_count: Math.floor(pattern.average_sales / 15),
-            revenue_percentage: (pattern.average_sales / 1000) * 100,
-            staff_recommendation: Math.ceil(pattern.average_sales / 200)
-          })) || [],
-          product_performance: response.data.product_performance || [],
+            average_sales: Math.random() * 500 + 100,
+            peak_day: 'Saturday',
+            orders_count: Math.floor(Math.random() * 20 + 5),
+            revenue_percentage: Math.random() * 10 + 5,
+            staff_recommendation: Math.ceil(Math.random() * 3 + 1)
+          })),
+          product_performance: response.top_products || [],
           customer_segments: [],
-          weather_impact: response.data.weather_impact || [],
+          weather_impact: [],
           seasonal_patterns: [],
           forecast: []
         };
 
-        setAnalytics(mockAnalytics);
+        setAnalytics(extendedAnalytics);
       } else {
-        setError(response.error || 'Error al cargar datos de analítica');
+        setError('Error al cargar datos de analítica');
       }
     } catch (err) {
       setError('Error de conexión al servidor');
@@ -755,7 +799,7 @@ export const SalesChart: React.FC<SalesChartProps> = ({
           </h3>
           <div className="flex items-center space-x-2">
             <span className="text-sm text-[var(--text-secondary)]">Tipo:</span>
-            <Badge variant="soft" color="blue">
+            <Badge variant="secondary">
               {ChartTypeLabels[chartType]}
             </Badge>
           </div>
diff --git a/frontend/src/components/domain/team/AddTeamMemberModal.tsx b/frontend/src/components/domain/team/AddTeamMemberModal.tsx
new file mode 100644
index 00000000..fd72c38e
--- /dev/null
+++ b/frontend/src/components/domain/team/AddTeamMemberModal.tsx
@@ -0,0 +1,176 @@
+import React, { useState } from 'react';
+import { Plus, Users, Shield, Eye } from 'lucide-react';
+import { StatusModal } from '../../ui/StatusModal/StatusModal';
+import { TENANT_ROLES } from '../../../types/roles';
+import { statusColors } from '../../../styles/colors';
+
+interface AddTeamMemberModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onAddMember?: (userData: { userId: string; role: string }) => Promise<void>;
+  availableUsers: Array<{ id: string; full_name: string; email: string }>;
+}
+
+/**
+ * AddTeamMemberModal - Modal for adding a new member to the team
+ * Comprehensive form for adding new users to the bakery team
+ */
+export const AddTeamMemberModal: React.FC<AddTeamMemberModalProps> = ({
+  isOpen,
+  onClose,
+  onAddMember,
+  availableUsers
+}) => {
+  const [formData, setFormData] = useState({
+    userId: '',
+    role: TENANT_ROLES.MEMBER
+  });
+
+  const [loading, setLoading] = useState(false);
+  const [mode, setMode] = useState<'view' | 'edit'>('edit');
+
+  const handleFieldChange = (sectionIndex: number, fieldIndex: number, value: string | number | boolean) => {
+    // Map field positions to form data fields
+    const fieldMappings = [
+      // Basic Information section
+      ['userId', 'role']
+    ];
+
+    const fieldName = fieldMappings[sectionIndex]?.[fieldIndex] as keyof typeof formData;
+    if (fieldName) {
+      setFormData(prev => ({
+        ...prev,
+        [fieldName]: value
+      }));
+    }
+  };
+
+  const handleSave = async () => {
+    // Validation
+    if (!formData.userId) {
+      alert('Por favor selecciona un usuario');
+      return;
+    }
+
+    if (!formData.role) {
+      alert('Por favor selecciona un rol');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      if (onAddMember) {
+        await onAddMember({
+          userId: formData.userId,
+          role: formData.role
+        });
+      }
+
+      // Reset form
+      setFormData({
+        userId: '',
+        role: TENANT_ROLES.MEMBER
+      });
+
+      onClose();
+    } catch (error) {
+      console.error('Error adding team member:', error);
+      alert('Error al agregar el miembro del equipo. Por favor, intenta de nuevo.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    // Reset form to initial values
+    setFormData({
+      userId: '',
+      role: TENANT_ROLES.MEMBER
+    });
+    onClose();
+  };
+
+  const statusConfig = {
+    color: statusColors.inProgress.primary,
+    text: 'Nuevo Miembro',
+    icon: Plus,
+    isCritical: false,
+    isHighlight: true
+  };
+
+  const roleOptions = [
+    { label: 'Miembro - Acceso estándar', value: TENANT_ROLES.MEMBER },
+    { label: 'Administrador - Gestión de equipo', value: TENANT_ROLES.ADMIN },
+    { label: 'Observador - Solo lectura', value: TENANT_ROLES.VIEWER }
+  ];
+
+  const userOptions = availableUsers.map(user => ({
+    label: `${user.full_name} (${user.email})`,
+    value: user.id
+  }));
+
+  const getRoleDescription = (role: string) => {
+    switch (role) {
+      case TENANT_ROLES.ADMIN:
+        return 'Los administradores pueden gestionar miembros del equipo y configuraciones.';
+      case TENANT_ROLES.MEMBER:
+        return 'Los miembros tienen acceso completo para trabajar con datos y funcionalidades.';
+      case TENANT_ROLES.VIEWER:
+        return 'Los observadores solo pueden ver datos, sin realizar cambios.';
+      default:
+        return '';
+    }
+  };
+
+  const sections = [
+    {
+      title: 'Información del Miembro',
+      icon: Users,
+      fields: [
+        {
+          label: 'Usuario',
+          value: formData.userId,
+          type: 'select' as const,
+          editable: true,
+          required: true,
+          options: userOptions,
+          placeholder: 'Seleccionar usuario...'
+        },
+        {
+          label: 'Rol',
+          value: formData.role,
+          type: 'select' as const,
+          editable: true,
+          required: true,
+          options: roleOptions
+        },
+        {
+          label: 'Descripción del Rol',
+          value: getRoleDescription(formData.role),
+          type: 'text' as const,
+          editable: false
+        }
+      ]
+    }
+  ];
+
+  return (
+    <StatusModal
+      isOpen={isOpen}
+      onClose={onClose}
+      mode={mode}
+      title="Agregar Miembro al Equipo"
+      subtitle="Agregar un nuevo miembro al equipo de la panadería"
+      statusIndicator={statusConfig}
+      sections={sections}
+      size="lg"
+      loading={loading}
+      showDefaultActions={true}
+      onSave={handleSave}
+      onCancel={handleCancel}
+      onFieldChange={handleFieldChange}
+    />
+  );
+};
+
+export default AddTeamMemberModal;
\ No newline at end of file
diff --git a/frontend/src/components/domain/team/index.ts b/frontend/src/components/domain/team/index.ts
new file mode 100644
index 00000000..dd5e0f74
--- /dev/null
+++ b/frontend/src/components/domain/team/index.ts
@@ -0,0 +1,4 @@
+// Team Components - Export all team-related components
+
+export { default as AddTeamMemberModal } from './AddTeamMemberModal';
+export type { AddTeamMemberModalProps } from './AddTeamMemberModal';
\ No newline at end of file
diff --git a/frontend/src/components/layout/MinimalSidebar/README.md b/frontend/src/components/layout/MinimalSidebar/README.md
new file mode 100644
index 00000000..52278a35
--- /dev/null
+++ b/frontend/src/components/layout/MinimalSidebar/README.md
@@ -0,0 +1,70 @@
+# MinimalSidebar Component
+
+A minimalist, responsive sidebar component for the Panadería IA application, inspired by grok.com's clean design.
+
+## Features
+
+- **Minimalist Design**: Clean, uncluttered interface following modern UI principles
+- **Responsive**: Works on both desktop and mobile devices
+- **Collapsible**: Can be collapsed on desktop to save space
+- **Navigation Hierarchy**: Supports nested menu items with expand/collapse functionality
+- **Profile Integration**: Includes user profile section with logout functionality
+- **Theme Consistency**: Follows the application's global color palette and design system
+- **Accessibility**: Proper ARIA labels and keyboard navigation support
+
+## Usage
+
+```tsx
+import { MinimalSidebar } from './MinimalSidebar';
+
+// Basic usage
+<MinimalSidebar />
+
+// With custom props
+<MinimalSidebar
+  isCollapsed={isSidebarCollapsed}
+  onToggleCollapse={toggleSidebar}
+  isOpen={isMobileMenuOpen}
+  onClose={closeMobileMenu}
+/>
+```
+
+## Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `className` | `string` | Additional CSS classes |
+| `isOpen` | `boolean` | Whether the mobile drawer is open |
+| `isCollapsed` | `boolean` | Whether the desktop sidebar is collapsed |
+| `onClose` | `() => void` | Callback when sidebar is closed (mobile) |
+| `onToggleCollapse` | `() => void` | Callback when collapse state changes (desktop) |
+| `customItems` | `NavigationItem[]` | Custom navigation items |
+| `showCollapseButton` | `boolean` | Whether to show the collapse button |
+| `showFooter` | `boolean` | Whether to show the footer section |
+
+## Design Principles
+
+- **Minimalist Aesthetic**: Clean lines, ample whitespace, and focused content
+- **Grok.com Inspired**: Follows the clean, functional design of grok.com
+- **Consistent with Brand**: Uses the application's color palette and typography
+- **Mobile First**: Responsive design that works well on all screen sizes
+- **Performance Focused**: Lightweight implementation with minimal dependencies
+
+## Color Palette
+
+The component uses the application's global CSS variables for consistent theming:
+
+- `--color-primary`: Primary brand color (orange)
+- `--color-secondary`: Secondary brand color (green)
+- `--bg-primary`: Main background color
+- `--bg-secondary`: Secondary background color
+- `--text-primary`: Primary text color
+- `--text-secondary`: Secondary text color
+- `--border-primary`: Primary border color
+
+## Accessibility
+
+- Proper ARIA attributes for screen readers
+- Keyboard navigation support
+- Focus management
+- Semantic HTML structure
\ No newline at end of file
diff --git a/frontend/src/pages/app/database/models/ModelsConfigPage.tsx b/frontend/src/pages/app/database/models/ModelsConfigPage.tsx
index 85e09f34..ced49bfb 100644
--- a/frontend/src/pages/app/database/models/ModelsConfigPage.tsx
+++ b/frontend/src/pages/app/database/models/ModelsConfigPage.tsx
@@ -117,7 +117,10 @@ const ModelsConfigPage: React.FC = () => {
         model,
         isTraining,
         lastTrainingDate: model?.created_at,
-        accuracy: model?.training_metrics?.mape ? (100 - model.training_metrics.mape) : undefined,
+        accuracy: model ? 
+                 (model.training_metrics?.mape !== undefined ? (100 - model.training_metrics.mape) : 
+                 (model as any).mape !== undefined ? (100 - (model as any).mape) : 
+                 undefined) : undefined,
         status: model
           ? (isTraining ? 'training' : 'active')
           : 'no_model'
diff --git a/frontend/src/pages/app/operations/production/ProductionPage.tsx b/frontend/src/pages/app/operations/production/ProductionPage.tsx
index e130ee94..3e163e4f 100644
--- a/frontend/src/pages/app/operations/production/ProductionPage.tsx
+++ b/frontend/src/pages/app/operations/production/ProductionPage.tsx
@@ -1,145 +1,190 @@
-import React, { useState } from 'react';
-import { Plus, Download, Clock, Users, AlertCircle, CheckCircle, Timer, ChefHat, Eye, Edit, Calendar, Zap, Package } from 'lucide-react';
-import { Button, Input, Card, Badge, StatsGrid, StatusCard, getStatusColor, StatusModal } from '../../../../components/ui';
-import { pagePresets } from '../../../../components/ui/Stats/StatsPresets';
+import React, { useState, useMemo } from 'react';
+import { Plus, Clock, AlertCircle, CheckCircle, Timer, ChefHat, Eye, Edit, Package } from 'lucide-react';
+import { Button, Input, Card, StatsGrid, StatusCard, getStatusColor, StatusModal } from '../../../../components/ui';
+import { formatters } from '../../../../components/ui/Stats/StatsPresets';
+import { LoadingSpinner } from '../../../../components/shared';
 import { PageHeader } from '../../../../components/layout';
-import { ProductionSchedule, BatchTracker, QualityControl } from '../../../../components/domain/production';
+import { ProductionSchedule, BatchTracker, QualityControl, CreateProductionBatchModal } from '../../../../components/domain/production';
+import { useCurrentTenant } from '../../../../stores/tenant.store';
+import {
+  useProductionDashboard,
+  useActiveBatches,
+  useCreateProductionBatch,
+  useUpdateBatchStatus,
+  productionService
+} from '../../../../api';
+import type {
+  ProductionBatchResponse,
+  ProductionBatchCreate,
+  ProductionBatchStatusUpdate
+} from '../../../../api';
+import {
+  ProductionStatusEnum,
+  ProductionPriorityEnum
+} from '../../../../api';
+import { useProductionEnums } from '../../../../utils/enumHelpers';
 
 const ProductionPage: React.FC = () => {
   const [activeTab, setActiveTab] = useState('schedule');
   const [searchQuery, setSearchQuery] = useState('');
-  const [selectedOrder, setSelectedOrder] = useState<typeof mockProductionOrders[0] | null>(null);
-  const [showForm, setShowForm] = useState(false);
+  const [selectedBatch, setSelectedBatch] = useState<ProductionBatchResponse | null>(null);
+  const [showBatchModal, setShowBatchModal] = useState(false);
+  const [showCreateModal, setShowCreateModal] = useState(false);
   const [modalMode, setModalMode] = useState<'view' | 'edit'>('view');
 
-  const mockProductionStats = {
-    dailyTarget: 150,
-    completed: 85,
-    inProgress: 12,
-    pending: 53,
-    efficiency: 78,
-    quality: 94,
+  const currentTenant = useCurrentTenant();
+  const tenantId = currentTenant?.id || '';
+  const productionEnums = useProductionEnums();
+
+  // API Data
+  const {
+    data: dashboardData,
+    isLoading: dashboardLoading,
+    error: dashboardError
+  } = useProductionDashboard(tenantId);
+
+  const {
+    data: activeBatchesData,
+    isLoading: batchesLoading,
+    error: batchesError
+  } = useActiveBatches(tenantId);
+
+  // Mutations
+  const createBatchMutation = useCreateProductionBatch();
+  const updateBatchStatusMutation = useUpdateBatchStatus();
+
+  // Handlers
+  const handleCreateBatch = async (batchData: ProductionBatchCreate) => {
+    try {
+      await createBatchMutation.mutateAsync({
+        tenantId,
+        batchData
+      });
+    } catch (error) {
+      console.error('Error creating production batch:', error);
+      throw error;
+    }
   };
 
-  const mockProductionOrders = [
-    {
-      id: '1',
-      recipeName: 'Pan de Molde Integral',
-      quantity: 20,
-      status: 'in_progress',
-      priority: 'high',
-      assignedTo: 'Juan Panadero',
-      startTime: '2024-01-26T06:00:00Z',
-      estimatedCompletion: '2024-01-26T10:00:00Z',
-      progress: 65,
-    },
-    {
-      id: '2',
-      recipeName: 'Croissants de Mantequilla',
-      quantity: 50,
-      status: 'pending',
-      priority: 'medium',
-      assignedTo: 'María González',
-      startTime: '2024-01-26T08:00:00Z',
-      estimatedCompletion: '2024-01-26T12:00:00Z',
-      progress: 0,
-    },
-    {
-      id: '3',
-      recipeName: 'Baguettes Francesas',
-      quantity: 30,
-      status: 'completed',
-      priority: 'medium',
-      assignedTo: 'Carlos Ruiz',
-      startTime: '2024-01-26T04:00:00Z',
-      estimatedCompletion: '2024-01-26T08:00:00Z',
-      progress: 100,
-    },
-    {
-      id: '4',
-      recipeName: 'Tarta de Chocolate',
-      quantity: 5,
-      status: 'pending',
-      priority: 'low',
-      assignedTo: 'Ana Pastelera',
-      startTime: '2024-01-26T10:00:00Z',
-      estimatedCompletion: '2024-01-26T16:00:00Z',
-      progress: 0,
-    },
-    {
-      id: '5',
-      recipeName: 'Empanadas de Pollo',
-      quantity: 40,
-      status: 'in_progress',
-      priority: 'high',
-      assignedTo: 'Luis Hornero',
-      startTime: '2024-01-26T07:00:00Z',
-      estimatedCompletion: '2024-01-26T11:00:00Z',
-      progress: 45,
-    },
-    {
-      id: '6',
-      recipeName: 'Donuts Glaseados',
-      quantity: 60,
-      status: 'pending',
-      priority: 'urgent',
-      assignedTo: 'María González',
-      startTime: '2024-01-26T12:00:00Z',
-      estimatedCompletion: '2024-01-26T15:00:00Z',
-      progress: 0,
-    },
-    {
-      id: '7',
-      recipeName: 'Pan de Centeno',
-      quantity: 25,
-      status: 'completed',
-      priority: 'medium',
-      assignedTo: 'Juan Panadero',
-      startTime: '2024-01-26T05:00:00Z',
-      estimatedCompletion: '2024-01-26T09:00:00Z',
-      progress: 100,
-    },
-    {
-      id: '8',
-      recipeName: 'Muffins de Arándanos',
-      quantity: 36,
-      status: 'in_progress',
-      priority: 'medium',
-      assignedTo: 'Ana Pastelera',
-      startTime: '2024-01-26T08:30:00Z',
-      estimatedCompletion: '2024-01-26T12:30:00Z',
-      progress: 70,
-    },
-  ];
-
-  const getProductionStatusConfig = (status: string, priority: string) => {
+  const getProductionStatusConfig = (status: ProductionStatusEnum, priority: ProductionPriorityEnum) => {
     const statusConfig = {
-      pending: { text: 'Pendiente', icon: Clock },
-      in_progress: { text: 'En Proceso', icon: Timer },
-      completed: { text: 'Completado', icon: CheckCircle },
-      cancelled: { text: 'Cancelado', icon: AlertCircle },
+      [ProductionStatusEnum.PENDING]: { icon: Clock },
+      [ProductionStatusEnum.IN_PROGRESS]: { icon: Timer },
+      [ProductionStatusEnum.COMPLETED]: { icon: CheckCircle },
+      [ProductionStatusEnum.CANCELLED]: { icon: AlertCircle },
+      [ProductionStatusEnum.ON_HOLD]: { icon: AlertCircle },
+      [ProductionStatusEnum.QUALITY_CHECK]: { icon: Package },
+      [ProductionStatusEnum.FAILED]: { icon: AlertCircle },
     };
-    
-    const config = statusConfig[status as keyof typeof statusConfig];
-    const Icon = config?.icon;
-    const isUrgent = priority === 'urgent';
-    
+
+    const config = statusConfig[status] || { icon: AlertCircle };
+    const Icon = config.icon;
+    const isUrgent = priority === ProductionPriorityEnum.URGENT;
+    const isCritical = status === ProductionStatusEnum.FAILED || (status === ProductionStatusEnum.PENDING && isUrgent);
+
     return {
-      color: getStatusColor(status),
-      text: config?.text || status,
+      color: getStatusColor(
+        status === ProductionStatusEnum.COMPLETED ? 'completed' :
+        status === ProductionStatusEnum.PENDING ? 'pending' :
+        status === ProductionStatusEnum.CANCELLED || status === ProductionStatusEnum.FAILED ? 'cancelled' :
+        'in_progress'
+      ),
+      text: productionEnums.getProductionStatusLabel(status),
       icon: Icon,
-      isCritical: isUrgent,
-      isHighlight: false
+      isCritical,
+      isHighlight: isUrgent
     };
   };
 
-  const filteredOrders = mockProductionOrders.filter(order => {
-    const matchesSearch = order.recipeName.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      order.assignedTo.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      order.id.toLowerCase().includes(searchQuery.toLowerCase());
-    
-    return matchesSearch;
-  });
+  const batches = activeBatchesData?.batches || [];
+
+  const filteredBatches = useMemo(() => {
+    if (!searchQuery) return batches;
+
+    const searchLower = searchQuery.toLowerCase();
+    return batches.filter(batch =>
+      batch.product_name.toLowerCase().includes(searchLower) ||
+      batch.batch_number.toLowerCase().includes(searchLower) ||
+      (batch.staff_assigned && batch.staff_assigned.some(staff =>
+        staff.toLowerCase().includes(searchLower)
+      ))
+    );
+  }, [batches, searchQuery]);
+
+  // Calculate production stats from real data
+  const productionStats = useMemo(() => {
+    if (!dashboardData) {
+      return {
+        activeBatches: 0,
+        todaysTarget: 0,
+        capacityUtilization: 0,
+        onTimeCompletion: 0,
+        qualityScore: 0,
+        totalOutput: 0,
+        efficiency: 0
+      };
+    }
+
+    return {
+      activeBatches: dashboardData.active_batches || 0,
+      todaysTarget: dashboardData.todays_production_plan?.length || 0,
+      capacityUtilization: Math.round(dashboardData.capacity_utilization || 0),
+      onTimeCompletion: Math.round(dashboardData.on_time_completion_rate || 0),
+      qualityScore: Math.round(dashboardData.average_quality_score || 0),
+      totalOutput: dashboardData.total_output_today || 0,
+      efficiency: Math.round(dashboardData.efficiency_percentage || 0)
+    };
+  }, [dashboardData]);
+
+  // Calculate progress for batches
+  const calculateProgress = (batch: ProductionBatchResponse): number => {
+    if (batch.status === 'completed') return 100;
+    if (batch.status === 'pending') return 0;
+    if (batch.status === 'cancelled' || batch.status === 'failed') return 0;
+
+    // For in-progress batches, calculate based on time elapsed
+    if (batch.actual_start_time && batch.planned_end_time) {
+      const now = new Date();
+      const startTime = new Date(batch.actual_start_time);
+      const endTime = new Date(batch.planned_end_time);
+      const totalDuration = endTime.getTime() - startTime.getTime();
+      const elapsed = now.getTime() - startTime.getTime();
+
+      if (totalDuration > 0) {
+        return Math.min(90, Math.max(10, Math.round((elapsed / totalDuration) * 100)));
+      }
+    }
+
+    // Default progress for in-progress items
+    return 50;
+  };
+
+  // Loading state
+  if (!tenantId || dashboardLoading || batchesLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-64">
+        <LoadingSpinner text="Cargando producción..." />
+      </div>
+    );
+  }
+
+  // Error state
+  if (dashboardError || batchesError) {
+    return (
+      <div className="text-center py-12">
+        <AlertCircle className="mx-auto h-12 w-12 text-red-500 mb-4" />
+        <h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
+          Error al cargar la producción
+        </h3>
+        <p className="text-[var(--text-secondary)] mb-4">
+          {(dashboardError || batchesError)?.message || 'Ha ocurrido un error inesperado'}
+        </p>
+        <Button onClick={() => window.location.reload()}>
+          Reintentar
+        </Button>
+      </div>
+    );
+  }
 
   return (
     <div className="space-y-6">
@@ -147,26 +192,56 @@ const ProductionPage: React.FC = () => {
         title="Gestión de Producción"
         description="Planifica y controla la producción diaria de tu panadería"
         actions={[
-          {
-            id: "export",
-            label: "Exportar",
-            variant: "outline" as const,
-            icon: Download,
-            onClick: () => console.log('Export production orders')
-          },
           {
             id: "new",
             label: "Nueva Orden de Producción",
             variant: "primary" as const,
             icon: Plus,
-            onClick: () => setShowForm(true)
+            onClick: () => setShowCreateModal(true)
           }
         ]}
       />
 
       {/* Production Stats */}
-      <StatsGrid 
-        stats={pagePresets.production(mockProductionStats)}
+      <StatsGrid
+        stats={[
+          {
+            title: 'Lotes Activos',
+            value: productionStats.activeBatches,
+            variant: 'default' as const,
+            icon: Package,
+          },
+          {
+            title: 'Utilización Capacidad',
+            value: `${productionStats.capacityUtilization}%`,
+            variant: productionStats.capacityUtilization >= 80 ? 'success' as const : 'warning' as const,
+            icon: Timer,
+          },
+          {
+            title: 'Completado a Tiempo',
+            value: `${productionStats.onTimeCompletion}%`,
+            variant: productionStats.onTimeCompletion >= 90 ? 'success' as const : 'error' as const,
+            icon: CheckCircle,
+          },
+          {
+            title: 'Puntuación Calidad',
+            value: `${productionStats.qualityScore}%`,
+            variant: productionStats.qualityScore >= 85 ? 'success' as const : 'warning' as const,
+            icon: Package,
+          },
+          {
+            title: 'Producción Hoy',
+            value: formatters.number(productionStats.totalOutput),
+            variant: 'info' as const,
+            icon: ChefHat,
+          },
+          {
+            title: 'Eficiencia',
+            value: `${productionStats.efficiency}%`,
+            variant: productionStats.efficiency >= 75 ? 'success' as const : 'warning' as const,
+            icon: Timer,
+          },
+        ]}
         columns={3}
       />
 
@@ -209,66 +284,64 @@ const ProductionPage: React.FC = () => {
       {/* Production Orders Tab */}
       {activeTab === 'schedule' && (
         <>
-          {/* Simplified Controls */}
+          {/* Search Controls */}
           <Card className="p-4">
             <div className="flex flex-col sm:flex-row gap-4">
               <div className="flex-1">
                 <Input
-                  placeholder="Buscar órdenes por receta, asignado o ID..."
+                  placeholder="Buscar lotes por producto, número de lote o personal..."
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
                   className="w-full"
                 />
               </div>
-              <Button variant="outline" onClick={() => console.log('Export filtered')}>
-                <Download className="w-4 h-4 mr-2" />
-                Exportar
-              </Button>
             </div>
           </Card>
 
-          {/* Production Orders Grid */}
+          {/* Production Batches Grid */}
           <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-            {filteredOrders.map((order) => {
-              const statusConfig = getProductionStatusConfig(order.status, order.priority);
-              
+            {filteredBatches.map((batch) => {
+              const statusConfig = getProductionStatusConfig(batch.status, batch.priority);
+              const progress = calculateProgress(batch);
+
               return (
                 <StatusCard
-                  key={order.id}
-                  id={order.id}
+                  key={batch.id}
+                  id={batch.id}
                   statusIndicator={statusConfig}
-                  title={order.recipeName}
-                  subtitle={`Asignado a: ${order.assignedTo}`}
-                  primaryValue={order.quantity}
+                  title={batch.product_name}
+                  subtitle={`Lote: ${batch.batch_number}`}
+                  primaryValue={batch.planned_quantity}
                   primaryValueLabel="unidades"
                   secondaryInfo={{
-                    label: 'Horario',
-                    value: `${new Date(order.startTime).toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' })} → ${new Date(order.estimatedCompletion).toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' })}`
+                    label: 'Personal',
+                    value: batch.staff_assigned?.join(', ') || 'No asignado'
                   }}
                   progress={{
                     label: 'Progreso',
-                    percentage: order.progress,
+                    percentage: progress,
                     color: statusConfig.color
                   }}
                   actions={[
                     {
-                      label: 'Ver',
+                      label: 'Ver Detalles',
                       icon: Eye,
-                      variant: 'outline',
+                      variant: 'primary',
+                      priority: 'primary',
                       onClick: () => {
-                        setSelectedOrder(order);
+                        setSelectedBatch(batch);
                         setModalMode('view');
-                        setShowForm(true);
+                        setShowBatchModal(true);
                       }
                     },
                     {
                       label: 'Editar',
                       icon: Edit,
-                      variant: 'outline',
+                      priority: 'secondary',
                       onClick: () => {
-                        setSelectedOrder(order);
+                        setSelectedBatch(batch);
                         setModalMode('edit');
-                        setShowForm(true);
+                        setShowBatchModal(true);
                       }
                     }
                   ]}
@@ -278,16 +351,19 @@ const ProductionPage: React.FC = () => {
           </div>
 
           {/* Empty State */}
-          {filteredOrders.length === 0 && (
+          {filteredBatches.length === 0 && (
             <div className="text-center py-12">
               <ChefHat className="mx-auto h-12 w-12 text-[var(--text-tertiary)] mb-4" />
               <h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
-                No se encontraron órdenes de producción
+                No se encontraron lotes de producción
               </h3>
               <p className="text-[var(--text-secondary)] mb-4">
-                Intenta ajustar la búsqueda o crear una nueva orden de producción
+                {batches.length === 0
+                  ? 'No hay lotes de producción activos. Crea el primer lote para comenzar.'
+                  : 'Intenta ajustar la búsqueda o crear un nuevo lote de producción'
+                }
               </p>
-              <Button onClick={() => setShowForm(true)}>
+              <Button onClick={() => setShowCreateModal(true)}>
                 <Plus className="w-4 h-4 mr-2" />
                 Nueva Orden de Producción
               </Button>
@@ -304,20 +380,20 @@ const ProductionPage: React.FC = () => {
         <QualityControl />
       )}
 
-      {/* Production Order Modal */}
-      {showForm && selectedOrder && (
+      {/* Production Batch Modal */}
+      {showBatchModal && selectedBatch && (
         <StatusModal
-          isOpen={showForm}
+          isOpen={showBatchModal}
           onClose={() => {
-            setShowForm(false);
-            setSelectedOrder(null);
+            setShowBatchModal(false);
+            setSelectedBatch(null);
             setModalMode('view');
           }}
           mode={modalMode}
           onModeChange={setModalMode}
-          title={selectedOrder.recipeName}
-          subtitle={`Orden de Producción #${selectedOrder.id}`}
-          statusIndicator={getProductionStatusConfig(selectedOrder.status, selectedOrder.priority)}
+          title={selectedBatch.product_name}
+          subtitle={`Lote de Producción #${selectedBatch.batch_number}`}
+          statusIndicator={getProductionStatusConfig(selectedBatch.status, selectedBatch.priority)}
           size="lg"
           sections={[
             {
@@ -325,24 +401,37 @@ const ProductionPage: React.FC = () => {
               icon: Package,
               fields: [
                 {
-                  label: 'Cantidad',
-                  value: `${selectedOrder.quantity} unidades`,
+                  label: 'Cantidad Planificada',
+                  value: `${selectedBatch.planned_quantity} unidades`,
                   highlight: true
                 },
                 {
-                  label: 'Asignado a',
-                  value: selectedOrder.assignedTo,
+                  label: 'Cantidad Real',
+                  value: selectedBatch.actual_quantity
+                    ? `${selectedBatch.actual_quantity} unidades`
+                    : 'Pendiente',
+                  editable: modalMode === 'edit',
+                  type: 'number'
                 },
                 {
                   label: 'Prioridad',
-                  value: selectedOrder.priority,
-                  type: 'status'
+                  value: selectedBatch.priority,
+                  type: 'select',
+                  editable: modalMode === 'edit',
+                  options: productionEnums.getProductionPriorityOptions()
                 },
                 {
-                  label: 'Progreso',
-                  value: selectedOrder.progress,
-                  type: 'percentage',
-                  highlight: true
+                  label: 'Estado',
+                  value: selectedBatch.status,
+                  type: 'select',
+                  editable: modalMode === 'edit',
+                  options: productionEnums.getProductionStatusOptions()
+                },
+                {
+                  label: 'Personal Asignado',
+                  value: selectedBatch.staff_assigned?.join(', ') || 'No asignado',
+                  editable: modalMode === 'edit',
+                  type: 'text'
                 }
               ]
             },
@@ -351,24 +440,128 @@ const ProductionPage: React.FC = () => {
               icon: Clock,
               fields: [
                 {
-                  label: 'Hora de inicio',
-                  value: selectedOrder.startTime,
+                  label: 'Inicio Planificado',
+                  value: selectedBatch.planned_start_time,
                   type: 'datetime'
                 },
                 {
-                  label: 'Finalización estimada',
-                  value: selectedOrder.estimatedCompletion,
+                  label: 'Fin Planificado',
+                  value: selectedBatch.planned_end_time,
                   type: 'datetime'
+                },
+                {
+                  label: 'Inicio Real',
+                  value: selectedBatch.actual_start_time || 'Pendiente',
+                  type: 'datetime'
+                },
+                {
+                  label: 'Fin Real',
+                  value: selectedBatch.actual_end_time || 'Pendiente',
+                  type: 'datetime'
+                }
+              ]
+            },
+            {
+              title: 'Calidad y Costos',
+              icon: CheckCircle,
+              fields: [
+                {
+                  label: 'Puntuación de Calidad',
+                  value: selectedBatch.quality_score
+                    ? `${selectedBatch.quality_score}/10`
+                    : 'Pendiente'
+                },
+                {
+                  label: 'Rendimiento',
+                  value: selectedBatch.yield_percentage
+                    ? `${selectedBatch.yield_percentage}%`
+                    : 'Calculando...'
+                },
+                {
+                  label: 'Costo Estimado',
+                  value: selectedBatch.estimated_cost || 0,
+                  type: 'currency'
+                },
+                {
+                  label: 'Costo Real',
+                  value: selectedBatch.actual_cost || 0,
+                  type: 'currency'
                 }
               ]
             }
           ]}
-          onEdit={() => {
-            // Handle edit mode
-            console.log('Editing production order:', selectedOrder.id);
+          onSave={async () => {
+            try {
+              // Implementation would depend on specific fields changed
+              console.log('Saving batch changes:', selectedBatch.id);
+              // await updateBatchStatusMutation.mutateAsync({
+              //   batchId: selectedBatch.id,
+              //   updates: selectedBatch
+              // });
+              setShowBatchModal(false);
+              setSelectedBatch(null);
+              setModalMode('view');
+            } catch (error) {
+              console.error('Error saving batch:', error);
+            }
+          }}
+          onFieldChange={(sectionIndex, fieldIndex, value) => {
+            if (!selectedBatch) return;
+
+            const sections = [
+              ['planned_quantity', 'actual_quantity', 'priority', 'status', 'staff_assigned'],
+              ['planned_start_time', 'planned_end_time', 'actual_start_time', 'actual_end_time'],
+              ['quality_score', 'yield_percentage', 'estimated_cost', 'actual_cost']
+            ];
+
+            // Get the field names from modal sections
+            const sectionFields = [
+              { fields: ['planned_quantity', 'actual_quantity', 'priority', 'status', 'staff_assigned'] },
+              { fields: ['planned_start_time', 'planned_end_time', 'actual_start_time', 'actual_end_time'] },
+              { fields: ['quality_score', 'yield_percentage', 'estimated_cost', 'actual_cost'] }
+            ];
+
+            const fieldMapping: Record<string, string> = {
+              'Cantidad Real': 'actual_quantity',
+              'Prioridad': 'priority',
+              'Estado': 'status',
+              'Personal Asignado': 'staff_assigned'
+            };
+
+            // Get section labels to map back to field names
+            const sectionLabels = [
+              ['Cantidad Planificada', 'Cantidad Real', 'Prioridad', 'Estado', 'Personal Asignado'],
+              ['Inicio Planificado', 'Fin Planificado', 'Inicio Real', 'Fin Real'],
+              ['Puntuación de Calidad', 'Rendimiento', 'Costo Estimado', 'Costo Real']
+            ];
+
+            const fieldLabel = sectionLabels[sectionIndex]?.[fieldIndex];
+            const propertyName = fieldMapping[fieldLabel] || sectionFields[sectionIndex]?.fields[fieldIndex];
+
+            if (propertyName) {
+              let processedValue: any = value;
+
+              if (propertyName === 'staff_assigned' && typeof value === 'string') {
+                processedValue = value.split(',').map(s => s.trim()).filter(s => s.length > 0);
+              } else if (propertyName === 'actual_quantity') {
+                processedValue = parseFloat(value as string) || 0;
+              }
+
+              setSelectedBatch({
+                ...selectedBatch,
+                [propertyName]: processedValue
+              });
+            }
           }}
         />
       )}
+
+      {/* Create Production Batch Modal */}
+      <CreateProductionBatchModal
+        isOpen={showCreateModal}
+        onClose={() => setShowCreateModal(false)}
+        onCreateBatch={handleCreateBatch}
+      />
     </div>
   );
 };
diff --git a/frontend/src/pages/app/settings/team/TeamPage.tsx b/frontend/src/pages/app/settings/team/TeamPage.tsx
index a1651580..88a059bf 100644
--- a/frontend/src/pages/app/settings/team/TeamPage.tsx
+++ b/frontend/src/pages/app/settings/team/TeamPage.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useMemo } from 'react';
 import { Users, Plus, Search, Mail, Phone, Shield, Trash2, Crown, X, UserCheck } from 'lucide-react';
-import { Button, Card, Badge, Input, StatusCard, getStatusColor } from '../../../../components/ui';
+import { Button, Card, Badge, Input, StatusCard, getStatusColor, StatsGrid } from '../../../../components/ui';
+import AddTeamMemberModal from '../../../../components/domain/team/AddTeamMemberModal';
 import { PageHeader } from '../../../../components/layout';
 import { useTeamMembers, useAddTeamMember, useRemoveTeamMember, useUpdateMemberRole } from '../../../../api/hooks/tenant';
 import { useAllUsers } from '../../../../api/hooks/user';
@@ -285,55 +286,36 @@ const TeamPage: React.FC = () => {
       />
 
       {/* Team Stats */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <Card className="p-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium text-[var(--text-secondary)]">Total Equipo</p>
-              <p className="text-3xl font-bold text-[var(--text-primary)]">{teamStats.total}</p>
-            </div>
-            <div className="h-12 w-12 bg-[var(--color-info)]/10 rounded-full flex items-center justify-center">
-              <Users className="h-6 w-6 text-[var(--color-info)]" />
-            </div>
-          </div>
-        </Card>
-
-        <Card className="p-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium text-[var(--text-secondary)]">Activos</p>
-              <p className="text-3xl font-bold text-[var(--color-success)]">{teamStats.active}</p>
-            </div>
-            <div className="h-12 w-12 bg-[var(--color-success)]/10 rounded-full flex items-center justify-center">
-              <UserCheck className="h-6 w-6 text-[var(--color-success)]" />
-            </div>
-          </div>
-        </Card>
-
-        <Card className="p-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium text-[var(--text-secondary)]">Administradores</p>
-              <p className="text-3xl font-bold text-[var(--color-primary)]">{teamStats.admins}</p>
-            </div>
-            <div className="h-12 w-12 bg-[var(--color-primary)]/10 rounded-full flex items-center justify-center">
-              <Shield className="h-6 w-6 text-[var(--color-primary)]" />
-            </div>
-          </div>
-        </Card>
-
-        <Card className="p-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium text-[var(--text-secondary)]">Propietarios</p>
-              <p className="text-3xl font-bold text-purple-600">{teamStats.owners}</p>
-            </div>
-            <div className="h-12 w-12 bg-purple-100 rounded-full flex items-center justify-center">
-              <Crown className="h-6 w-6 text-purple-600" />
-            </div>
-          </div>
-        </Card>
-      </div>
+      <StatsGrid
+        stats={[
+          {
+            title: "Total Equipo",
+            value: teamStats.total,
+            icon: Users,
+            variant: "info"
+          },
+          {
+            title: "Activos",
+            value: teamStats.active,
+            icon: UserCheck,
+            variant: "success"
+          },
+          {
+            title: "Administradores",
+            value: teamStats.admins,
+            icon: Shield,
+            variant: "info"
+          },
+          {
+            title: "Propietarios",
+            value: teamStats.owners,
+            icon: Crown,
+            variant: "purple"
+          }
+        ]}
+        columns={4}
+        gap="md"
+      />
 
       {/* Filters and Search */}
       <Card className="p-6">
@@ -368,6 +350,21 @@ const TeamPage: React.FC = () => {
         </div>
       </Card>
 
+      {/* Add Member Button */}
+      {canManageTeam && availableUsers.length > 0 && filteredMembers.length > 0 && (
+        <div className="flex justify-end">
+          <Button
+            onClick={() => setShowAddForm(true)}
+            variant="primary"
+            size="md"
+            className="font-medium px-4 py-2 shadow-sm hover:shadow-md transition-all duration-200"
+          >
+            <Plus className="w-4 h-4 mr-2 flex-shrink-0" />
+            <span>Agregar Miembro</span>
+          </Button>
+        </div>
+      )}
+
       {/* Team Members List - Responsive grid */}
       <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 lg:gap-6">
         {filteredMembers.map((member) => (
@@ -398,124 +395,58 @@ const TeamPage: React.FC = () => {
       </div>
 
       {filteredMembers.length === 0 && (
-        <StatusCard
-          id="empty-state"
-          statusIndicator={{
-            color: getStatusColor('pending'),
-            text: searchTerm || selectedRole !== 'all' ? 'Sin coincidencias' : 'Equipo vacío',
-            icon: Users,
-            isCritical: false,
-            isHighlight: false
-          }}
-          title="No se encontraron miembros"
-          subtitle={searchTerm || selectedRole !== 'all' 
-            ? "No hay miembros que coincidan con los filtros seleccionados"
-            : "Este tenant aún no tiene miembros del equipo"
-          }
-          primaryValue="0"
-          primaryValueLabel="Miembros"
-          actions={canManageTeam && availableUsers.length > 0 ? [{
-            label: 'Agregar Primer Miembro',
-            icon: Plus,
-            onClick: () => setShowAddForm(true),
-            priority: 'primary' as const,
-          }] : []}
-          className="col-span-full"
-        />
-      )}
-
-      {/* Add Member Modal */}
-      {showAddForm && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-          <Card className="p-6 max-w-md w-full mx-4">
-            <div className="flex items-center justify-between mb-4">
-              <h3 className="text-lg font-semibold text-[var(--text-primary)]">Agregar Miembro al Equipo</h3>
-              <Button 
-                size="sm" 
-                variant="ghost" 
-                onClick={() => setShowAddForm(false)}
-              >
-                <X className="w-4 h-4" />
-              </Button>
-            </div>
-            
-            <div className="space-y-4">
-              {/* User Selection */}
-              <div>
-                <label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
-                  Usuario
-                </label>
-                <select
-                  value={selectedUserToAdd}
-                  onChange={(e) => setSelectedUserToAdd(e.target.value)}
-                  className="w-full px-3 py-2 border border-border-secondary rounded-lg bg-bg-primary focus:outline-none focus:ring-2 focus:ring-color-primary focus:ring-opacity-20"
-                  required
-                >
-                  <option value="">Seleccionar usuario...</option>
-                  {availableUsers.map(user => (
-                    <option key={user.id} value={user.id}>
-                      {user.full_name} ({user.email})
-                    </option>
-                  ))}
-                </select>
-                {availableUsers.length === 0 && (
-                  <p className="text-sm text-[var(--text-tertiary)] mt-1">
-                    No hay usuarios disponibles para agregar
-                  </p>
-                )}
-              </div>
-
-              {/* Role Selection */}
-              <div>
-                <label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
-                  Rol
-                </label>
-                <select
-                  value={selectedRoleToAdd}
-                  onChange={(e) => setSelectedRoleToAdd(e.target.value)}
-                  className="w-full px-3 py-2 border border-border-secondary rounded-lg bg-bg-primary focus:outline-none focus:ring-2 focus:ring-color-primary focus:ring-opacity-20"
-                >
-                  <option value={TENANT_ROLES.MEMBER}>Miembro - Acceso estándar</option>
-                  <option value={TENANT_ROLES.ADMIN}>Administrador - Gestión de equipo</option>
-                  <option value={TENANT_ROLES.VIEWER}>Observador - Solo lectura</option>
-                </select>
-              </div>
-
-              {/* Role Description */}
-              <div className="p-3 bg-bg-secondary rounded-lg">
-                <p className="text-xs text-[var(--text-secondary)]">
-                  {selectedRoleToAdd === TENANT_ROLES.ADMIN && 
-                    'Los administradores pueden gestionar miembros del equipo y configuraciones.'}
-                  {selectedRoleToAdd === TENANT_ROLES.MEMBER && 
-                    'Los miembros tienen acceso completo para trabajar con datos y funcionalidades.'}
-                  {selectedRoleToAdd === TENANT_ROLES.VIEWER && 
-                    'Los observadores solo pueden ver datos, sin realizar cambios.'}
-                </p>
-              </div>
-            </div>
-
-            <div className="flex space-x-2 mt-6">
-              <Button 
-                onClick={handleAddMember}
-                disabled={!selectedUserToAdd || addMemberMutation.isPending}
-                className="flex-1"
-              >
-                {addMemberMutation.isPending ? 'Agregando...' : 'Agregar Miembro'}
-              </Button>
-              <Button 
-                variant="outline" 
-                onClick={() => {
-                  setShowAddForm(false);
-                  setSelectedUserToAdd('');
-                  setSelectedRoleToAdd(TENANT_ROLES.MEMBER);
-                }}
-              >
-                Cancelar
-              </Button>
-            </div>
-          </Card>
+        <div className="text-center py-12">
+          <Users className="mx-auto h-12 w-12 text-[var(--text-tertiary)] mb-4" />
+          <h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
+            No se encontraron miembros
+          </h3>
+          <p className="text-[var(--text-secondary)] mb-4">
+            {searchTerm || selectedRole !== 'all' 
+              ? "No hay miembros que coincidan con los filtros seleccionados"
+              : "Este tenant aún no tiene miembros del equipo"
+            }
+          </p>
+          {canManageTeam && availableUsers.length > 0 && (
+            <Button
+              onClick={() => setShowAddForm(true)}
+              variant="primary"
+              size="md"
+              className="font-medium px-6 py-3 shadow-sm hover:shadow-md transition-all duration-200"
+            >
+              <Plus className="w-4 h-4 mr-2 flex-shrink-0" />
+              <span>Agregar Primer Miembro</span>
+            </Button>
+          )}
         </div>
       )}
+
+      {/* Add Member Modal - Using StatusModal */}
+      <AddTeamMemberModal
+        isOpen={showAddForm}
+        onClose={() => {
+          setShowAddForm(false);
+          setSelectedUserToAdd('');
+          setSelectedRoleToAdd(TENANT_ROLES.MEMBER);
+        }}
+        onAddMember={async (userData) => {
+          if (!tenantId) return Promise.reject('No tenant ID available');
+          
+          return addMemberMutation.mutateAsync({
+            tenantId,
+            userId: userData.userId,
+            role: userData.role,
+          }).then(() => {
+            addToast('Miembro agregado exitosamente', { type: 'success' });
+            setShowAddForm(false);
+            setSelectedUserToAdd('');
+            setSelectedRoleToAdd(TENANT_ROLES.MEMBER);
+          }).catch((error) => {
+            addToast('Error al agregar miembro', { type: 'error' });
+            throw error;
+          });
+        }}
+        availableUsers={availableUsers}
+      />
     </div>
   );
 };
diff --git a/frontend/src/utils/enumHelpers.ts b/frontend/src/utils/enumHelpers.ts
index 03ff1e66..f6869b63 100644
--- a/frontend/src/utils/enumHelpers.ts
+++ b/frontend/src/utils/enumHelpers.ts
@@ -13,8 +13,7 @@ import {
   DeliveryStatus,
   QualityRating,
   DeliveryRating,
-  InvoiceStatus,
-  type EnumOption
+  InvoiceStatus
 } from '../api/types/suppliers';
 
 import {
@@ -31,6 +30,13 @@ import {
   SalesChannel
 } from '../api/types/orders';
 
+import {
+  ProductionStatusEnum,
+  ProductionPriorityEnum,
+  ProductionBatchStatus,
+  QualityCheckStatus
+} from '../api/types/production';
+
 /**
  * Generic function to convert enum to select options with i18n translations
  */
@@ -44,7 +50,7 @@ export function enumToSelectOptions<T extends Record<string, string | number>>(
     sortAlphabetically?: boolean;
   }
 ): SelectOption[] {
-  const selectOptions = Object.entries(enumObject).map(([key, value]) => ({
+  const selectOptions = Object.entries(enumObject).map(([_, value]) => ({
     value,
     label: t(`${translationKey}.${value}`),
     ...(options?.includeDescription && options?.descriptionKey && {
@@ -298,6 +304,107 @@ export function useOrderEnums() {
       return t(`sales_channels.${channel}`);
     },
 
+    // Field Labels
+    getFieldLabel: (field: string): string =>
+      t(`labels.${field}`),
+
+    getFieldDescription: (field: string): string =>
+      t(`descriptions.${field}`)
+  };
+}
+
+/**
+ * Hook for production enum utilities
+ */
+export function useProductionEnums() {
+  const { t } = useTranslation('production');
+
+  return {
+    // Production Status
+    getProductionStatusOptions: (): SelectOption[] =>
+      enumToSelectOptions(ProductionStatusEnum, 'production_status', t),
+
+    getProductionStatusLabel: (status: ProductionStatusEnum): string => {
+      if (!status) return 'Estado no definido';
+      const translated = t(`production_status.${status}`);
+      // If translation failed, return a fallback
+      if (translated === `production_status.${status}`) {
+        const fallbacks = {
+          [ProductionStatusEnum.PENDING]: 'Pendiente',
+          [ProductionStatusEnum.IN_PROGRESS]: 'En Proceso',
+          [ProductionStatusEnum.COMPLETED]: 'Completado',
+          [ProductionStatusEnum.CANCELLED]: 'Cancelado',
+          [ProductionStatusEnum.ON_HOLD]: 'En Pausa',
+          [ProductionStatusEnum.QUALITY_CHECK]: 'Control Calidad',
+          [ProductionStatusEnum.FAILED]: 'Fallido'
+        };
+        return fallbacks[status] || status;
+      }
+      return translated;
+    },
+
+    // Production Priority
+    getProductionPriorityOptions: (): SelectOption[] =>
+      enumToSelectOptions(ProductionPriorityEnum, 'production_priority', t),
+
+    getProductionPriorityLabel: (priority: ProductionPriorityEnum): string => {
+      if (!priority) return 'Prioridad no definida';
+      const translated = t(`production_priority.${priority}`);
+      // If translation failed, return a fallback
+      if (translated === `production_priority.${priority}`) {
+        const fallbacks = {
+          [ProductionPriorityEnum.LOW]: 'Baja',
+          [ProductionPriorityEnum.MEDIUM]: 'Media',
+          [ProductionPriorityEnum.HIGH]: 'Alta',
+          [ProductionPriorityEnum.URGENT]: 'Urgente'
+        };
+        return fallbacks[priority] || priority;
+      }
+      return translated;
+    },
+
+    // Production Batch Status
+    getProductionBatchStatusOptions: (): SelectOption[] =>
+      enumToSelectOptions(ProductionBatchStatus, 'batch_status', t),
+
+    getProductionBatchStatusLabel: (status: ProductionBatchStatus): string => {
+      if (!status) return 'Estado no definido';
+      const translated = t(`batch_status.${status}`);
+      // If translation failed, return a fallback
+      if (translated === `batch_status.${status}`) {
+        const fallbacks = {
+          [ProductionBatchStatus.PLANNED]: 'Planificado',
+          [ProductionBatchStatus.IN_PROGRESS]: 'En Proceso',
+          [ProductionBatchStatus.COMPLETED]: 'Completado',
+          [ProductionBatchStatus.CANCELLED]: 'Cancelado',
+          [ProductionBatchStatus.ON_HOLD]: 'En Pausa'
+        };
+        return fallbacks[status] || status;
+      }
+      return translated;
+    },
+
+    // Quality Check Status
+    getQualityCheckStatusOptions: (): SelectOption[] =>
+      enumToSelectOptions(QualityCheckStatus, 'quality_check_status', t),
+
+    getQualityCheckStatusLabel: (status: QualityCheckStatus): string => {
+      if (!status) return 'Estado no definido';
+      const translated = t(`quality_check_status.${status}`);
+      // If translation failed, return a fallback
+      if (translated === `quality_check_status.${status}`) {
+        const fallbacks = {
+          [QualityCheckStatus.PENDING]: 'Pendiente',
+          [QualityCheckStatus.IN_PROGRESS]: 'En Proceso',
+          [QualityCheckStatus.PASSED]: 'Aprobado',
+          [QualityCheckStatus.FAILED]: 'Reprobado',
+          [QualityCheckStatus.REQUIRES_ATTENTION]: 'Requiere Atención'
+        };
+        return fallbacks[status] || status;
+      }
+      return translated;
+    },
+
     // Field Labels
     getFieldLabel: (field: string): string =>
       t(`labels.${field}`),
diff --git a/services/production/app/api/production.py b/services/production/app/api/production.py
index f80eeebf..c79730da 100644
--- a/services/production/app/api/production.py
+++ b/services/production/app/api/production.py
@@ -46,15 +46,20 @@ async def get_dashboard_summary(
 ):
     """Get production dashboard summary using shared auth"""
     try:
+        # Extract tenant from user context for security
+        current_tenant = current_user.get("tenant_id")
+        if str(tenant_id) != current_tenant:
+            raise HTTPException(status_code=403, detail="Access denied to this tenant")
+
         summary = await production_service.get_dashboard_summary(tenant_id)
-        
-        logger.info("Retrieved production dashboard summary", 
+
+        logger.info("Retrieved production dashboard summary",
                    tenant_id=str(tenant_id), user_id=current_user.get("user_id"))
-        
+
         return summary
-        
+
     except Exception as e:
-        logger.error("Error getting production dashboard summary", 
+        logger.error("Error getting production dashboard summary",
                     error=str(e), tenant_id=str(tenant_id))
         raise HTTPException(status_code=500, detail="Failed to get dashboard summary")
 
@@ -68,6 +73,7 @@ async def get_daily_requirements(
 ):
     """Get daily production requirements"""
     try:
+        current_tenant = current_user.get("tenant_id")
         if str(tenant_id) != current_tenant:
             raise HTTPException(status_code=403, detail="Access denied to this tenant")
         
@@ -94,6 +100,7 @@ async def get_production_requirements(
 ):
     """Get production requirements for procurement planning"""
     try:
+        current_tenant = current_user.get("tenant_id")
         if str(tenant_id) != current_tenant:
             raise HTTPException(status_code=403, detail="Access denied to this tenant")
         
@@ -124,6 +131,7 @@ async def create_production_batch(
 ):
     """Create a new production batch"""
     try:
+        current_tenant = current_user.get("tenant_id")
         if str(tenant_id) != current_tenant:
             raise HTTPException(status_code=403, detail="Access denied to this tenant")
         
@@ -151,6 +159,7 @@ async def get_active_batches(
 ):
     """Get currently active production batches"""
     try:
+        current_tenant = current_user.get("tenant_id")
         if str(tenant_id) != current_tenant:
             raise HTTPException(status_code=403, detail="Access denied to this tenant")
         
@@ -185,6 +194,7 @@ async def get_batch_details(
 ):
     """Get detailed information about a production batch"""
     try:
+        current_tenant = current_user.get("tenant_id")
         if str(tenant_id) != current_tenant:
             raise HTTPException(status_code=403, detail="Access denied to this tenant")
         
@@ -218,6 +228,7 @@ async def update_batch_status(
 ):
     """Update production batch status"""
     try:
+        current_tenant = current_user.get("tenant_id")
         if str(tenant_id) != current_tenant:
             raise HTTPException(status_code=403, detail="Access denied to this tenant")
         
@@ -253,6 +264,7 @@ async def get_production_schedule(
 ):
     """Get production schedule for a date range"""
     try:
+        current_tenant = current_user.get("tenant_id")
         if str(tenant_id) != current_tenant:
             raise HTTPException(status_code=403, detail="Access denied to this tenant")
         
@@ -316,6 +328,7 @@ async def get_capacity_status(
 ):
     """Get production capacity status for a specific date"""
     try:
+        current_tenant = current_user.get("tenant_id")
         if str(tenant_id) != current_tenant:
             raise HTTPException(status_code=403, detail="Access denied to this tenant")
         
@@ -353,6 +366,7 @@ async def get_yield_metrics(
 ):
     """Get production yield metrics for analysis"""
     try:
+        current_tenant = current_user.get("tenant_id")
         if str(tenant_id) != current_tenant:
             raise HTTPException(status_code=403, detail="Access denied to this tenant")
         
diff --git a/services/production/app/models/production.py b/services/production/app/models/production.py
index 8a9bb5fc..d316908d 100644
--- a/services/production/app/models/production.py
+++ b/services/production/app/models/production.py
@@ -18,21 +18,21 @@ from shared.database.base import Base
 
 class ProductionStatus(str, enum.Enum):
     """Production batch status enumeration"""
-    PENDING = "pending"
-    IN_PROGRESS = "in_progress"
-    COMPLETED = "completed"
-    CANCELLED = "cancelled"
-    ON_HOLD = "on_hold"
-    QUALITY_CHECK = "quality_check"
-    FAILED = "failed"
+    PENDING = "PENDING"
+    IN_PROGRESS = "IN_PROGRESS"
+    COMPLETED = "COMPLETED"
+    CANCELLED = "CANCELLED"
+    ON_HOLD = "ON_HOLD"
+    QUALITY_CHECK = "QUALITY_CHECK"
+    FAILED = "FAILED"
 
 
 class ProductionPriority(str, enum.Enum):
     """Production priority levels"""
-    LOW = "low"
-    MEDIUM = "medium"
-    HIGH = "high"
-    URGENT = "urgent"
+    LOW = "LOW"
+    MEDIUM = "MEDIUM"
+    HIGH = "HIGH"
+    URGENT = "URGENT"
 
 
 
diff --git a/services/production/app/repositories/base.py b/services/production/app/repositories/base.py
index 76795ccd..16ca5a40 100644
--- a/services/production/app/repositories/base.py
+++ b/services/production/app/repositories/base.py
@@ -23,7 +23,6 @@ class ProductionBaseRepository(BaseRepository):
         # Production data is more dynamic, shorter cache time (5 minutes)
         super().__init__(model, session, cache_ttl)
     
-    @transactional
     async def get_by_tenant_id(self, tenant_id: str, skip: int = 0, limit: int = 100) -> List:
         """Get records by tenant ID"""
         if hasattr(self.model, 'tenant_id'):
@@ -36,7 +35,6 @@ class ProductionBaseRepository(BaseRepository):
             )
         return await self.get_multi(skip=skip, limit=limit)
     
-    @transactional
     async def get_by_status(
         self, 
         tenant_id: str, 
diff --git a/services/production/app/repositories/production_batch_repository.py b/services/production/app/repositories/production_batch_repository.py
index f04170d7..7b193953 100644
--- a/services/production/app/repositories/production_batch_repository.py
+++ b/services/production/app/repositories/production_batch_repository.py
@@ -26,7 +26,6 @@ class ProductionBatchRepository(ProductionBaseRepository, BatchCountProvider):
         # Production batches are dynamic, short cache time (5 minutes)
         super().__init__(ProductionBatch, session, cache_ttl)
     
-    @transactional
     async def create_batch(self, batch_data: Dict[str, Any]) -> ProductionBatch:
         """Create a new production batch with validation"""
         try:
@@ -84,7 +83,6 @@ class ProductionBatchRepository(ProductionBaseRepository, BatchCountProvider):
             logger.error("Error creating production batch", error=str(e))
             raise DatabaseError(f"Failed to create production batch: {str(e)}")
     
-    @transactional
     async def get_active_batches(self, tenant_id: str) -> List[ProductionBatch]:
         """Get active production batches for a tenant"""
         try:
@@ -113,7 +111,6 @@ class ProductionBatchRepository(ProductionBaseRepository, BatchCountProvider):
             logger.error("Error fetching active batches", error=str(e))
             raise DatabaseError(f"Failed to fetch active batches: {str(e)}")
     
-    @transactional
     async def get_batches_by_date_range(
         self, 
         tenant_id: str, 
@@ -152,7 +149,6 @@ class ProductionBatchRepository(ProductionBaseRepository, BatchCountProvider):
             logger.error("Error fetching batches by date range", error=str(e))
             raise DatabaseError(f"Failed to fetch batches by date range: {str(e)}")
     
-    @transactional
     async def get_batches_by_product(
         self, 
         tenant_id: str, 
@@ -182,7 +178,6 @@ class ProductionBatchRepository(ProductionBaseRepository, BatchCountProvider):
             logger.error("Error fetching batches by product", error=str(e))
             raise DatabaseError(f"Failed to fetch batches by product: {str(e)}")
     
-    @transactional
     async def update_batch_status(
         self, 
         batch_id: UUID, 
@@ -240,7 +235,6 @@ class ProductionBatchRepository(ProductionBaseRepository, BatchCountProvider):
             logger.error("Error updating batch status", error=str(e))
             raise DatabaseError(f"Failed to update batch status: {str(e)}")
     
-    @transactional
     async def get_production_metrics(
         self, 
         tenant_id: str, 
@@ -297,7 +291,6 @@ class ProductionBatchRepository(ProductionBaseRepository, BatchCountProvider):
             logger.error("Error calculating production metrics", error=str(e))
             raise DatabaseError(f"Failed to calculate production metrics: {str(e)}")
     
-    @transactional
     async def get_urgent_batches(self, tenant_id: str, hours_ahead: int = 4) -> List[ProductionBatch]:
         """Get batches that need to start within the specified hours"""
         try:
diff --git a/services/production/app/schemas/production.py b/services/production/app/schemas/production.py
index 0fd9dc18..e8741a00 100644
--- a/services/production/app/schemas/production.py
+++ b/services/production/app/schemas/production.py
@@ -14,21 +14,21 @@ from enum import Enum
 
 class ProductionStatusEnum(str, Enum):
     """Production batch status enumeration for API"""
-    PENDING = "pending"
-    IN_PROGRESS = "in_progress"
-    COMPLETED = "completed"
-    CANCELLED = "cancelled"
-    ON_HOLD = "on_hold"
-    QUALITY_CHECK = "quality_check"
-    FAILED = "failed"
+    PENDING = "PENDING"
+    IN_PROGRESS = "IN_PROGRESS"
+    COMPLETED = "COMPLETED"
+    CANCELLED = "CANCELLED"
+    ON_HOLD = "ON_HOLD"
+    QUALITY_CHECK = "QUALITY_CHECK"
+    FAILED = "FAILED"
 
 
 class ProductionPriorityEnum(str, Enum):
     """Production priority levels for API"""
-    LOW = "low"
-    MEDIUM = "medium"
-    HIGH = "high"
-    URGENT = "urgent"
+    LOW = "LOW"
+    MEDIUM = "MEDIUM"
+    HIGH = "HIGH"
+    URGENT = "URGENT"
 
 
 
diff --git a/services/production/app/services/production_alert_service.py b/services/production/app/services/production_alert_service.py
index 0f257f72..e0cf3818 100644
--- a/services/production/app/services/production_alert_service.py
+++ b/services/production/app/services/production_alert_service.py
@@ -49,14 +49,14 @@ class ProductionAlertService(BaseAlertService, AlertServiceMixin):
             max_instances=1
         )
         
-        # Equipment monitoring - every 3 minutes (alerts)
-        self.scheduler.add_job(
-            self.check_equipment_status,
-            CronTrigger(minute='*/3'),
-            id='equipment_check',
-            misfire_grace_time=30,
-            max_instances=1
-        )
+        # Equipment monitoring - disabled (equipment tables not available in production database)
+        # self.scheduler.add_job(
+        #     self.check_equipment_status,
+        #     CronTrigger(minute='*/3'),
+        #     id='equipment_check',
+        #     misfire_grace_time=30,
+        #     max_instances=1
+        # )
         
         # Efficiency recommendations - every 30 minutes (recommendations)
         self.scheduler.add_job(
@@ -127,7 +127,7 @@ class ProductionAlertService(BaseAlertService, AlertServiceMixin):
                     FROM production_batches pb
                     WHERE pb.planned_start_time >= CURRENT_DATE 
                     AND pb.planned_start_time <= CURRENT_DATE + INTERVAL '3 days'
-                    AND pb.status IN ('planned', 'pending', 'in_progress')
+                    AND pb.status IN ('PLANNED', 'PENDING', 'IN_PROGRESS')
                     GROUP BY pb.tenant_id, DATE(pb.planned_start_time)
                     HAVING COUNT(*) > 10  -- Alert if more than 10 batches per day
                     ORDER BY total_planned DESC
@@ -226,15 +226,15 @@ class ProductionAlertService(BaseAlertService, AlertServiceMixin):
                     COALESCE(pb.priority::text, 'medium') as priority_level,
                     1 as affected_orders  -- Default to 1 since we can't count orders
                 FROM production_batches pb
-                WHERE pb.status IN ('in_progress', 'delayed')
+                WHERE pb.status IN ('IN_PROGRESS', 'DELAYED')
                 AND (
-                    (pb.planned_end_time < NOW() AND pb.status = 'in_progress')
-                    OR pb.status = 'delayed'
+                    (pb.planned_end_time < NOW() AND pb.status = 'IN_PROGRESS')
+                    OR pb.status = 'DELAYED'
                 )
                 AND pb.planned_end_time > NOW() - INTERVAL '24 hours'
                 ORDER BY 
-                    CASE COALESCE(pb.priority::text, 'medium') 
-                        WHEN 'urgent' THEN 1 WHEN 'high' THEN 2 ELSE 3 
+                    CASE COALESCE(pb.priority::text, 'MEDIUM')
+                        WHEN 'URGENT' THEN 1 WHEN 'HIGH' THEN 2 ELSE 3 
                     END,
                     delay_minutes DESC
             """
@@ -481,7 +481,7 @@ class ProductionAlertService(BaseAlertService, AlertServiceMixin):
                         AVG(pb.yield_percentage) as avg_yield,
                         EXTRACT(hour FROM pb.actual_start_time) as start_hour
                     FROM production_batches pb
-                    WHERE pb.status = 'completed'
+                    WHERE pb.status = 'COMPLETED'
                     AND pb.actual_completion_time > CURRENT_DATE - INTERVAL '30 days'
                     AND pb.tenant_id = $1
                     GROUP BY pb.tenant_id, pb.product_name, EXTRACT(hour FROM pb.actual_start_time)
diff --git a/services/production/app/services/production_service.py b/services/production/app/services/production_service.py
index 90d4d87d..0cb62a63 100644
--- a/services/production/app/services/production_service.py
+++ b/services/production/app/services/production_service.py
@@ -78,7 +78,6 @@ class ProductionService:
                         error=str(e), tenant_id=str(tenant_id), date=target_date.isoformat())
             raise
     
-    @transactional
     async def create_production_batch(
         self, 
         tenant_id: UUID, 
@@ -129,7 +128,6 @@ class ProductionService:
                         error=str(e), tenant_id=str(tenant_id))
             raise
     
-    @transactional
     async def update_batch_status(
         self, 
         tenant_id: UUID, 
@@ -167,7 +165,6 @@ class ProductionService:
                         error=str(e), batch_id=str(batch_id), tenant_id=str(tenant_id))
             raise
     
-    @transactional
     async def get_dashboard_summary(self, tenant_id: UUID) -> ProductionDashboardSummary:
         """Get production dashboard summary data"""
         try:
@@ -215,7 +212,6 @@ class ProductionService:
                         error=str(e), tenant_id=str(tenant_id))
             raise
     
-    @transactional
     async def get_production_requirements(
         self, 
         tenant_id: UUID,