Improve the frontend and repository layer

frontend/index.html

@@ -27,4 +27,4 @@
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
-</html>
+</html>

frontend/src/api/hooks/pos.ts

@@ -280,9 +280,7 @@ export const usePOSTransaction = (
     tenant_id: string;
     transaction_id: string;
   },
-  options?: Omit<UseQueryOptions<{
-    transaction: POSTransaction;
-  }, ApiError>, 'queryKey' | 'queryFn'>
+  options?: Omit<UseQueryOptions<POSTransaction, ApiError>, 'queryKey' | 'queryFn'>
 ) => {
   return useQuery({
     queryKey: posKeys.transaction(params.tenant_id, params.transaction_id),
@@ -293,6 +291,40 @@ export const usePOSTransaction = (
   });
 };
 
+/**
+ * Get POS transactions dashboard summary
+ */
+export const usePOSTransactionsDashboard = (
+  params: {
+    tenant_id: string;
+  },
+  options?: Omit<UseQueryOptions<{
+    total_transactions_today: number;
+    total_transactions_this_week: number;
+    total_transactions_this_month: number;
+    revenue_today: number;
+    revenue_this_week: number;
+    revenue_this_month: number;
+    average_transaction_value: number;
+    status_breakdown: Record<string, number>;
+    payment_method_breakdown: Record<string, number>;
+    sync_status: {
+      synced: number;
+      pending: number;
+      failed: number;
+      last_sync_at?: string;
+    };
+  }, ApiError>, 'queryKey' | 'queryFn'>
+) => {
+  return useQuery({
+    queryKey: [...posKeys.transactions(), 'dashboard', params.tenant_id],
+    queryFn: () => posService.getPOSTransactionsDashboard(params),
+    enabled: !!params.tenant_id,
+    staleTime: 30 * 1000, // 30 seconds
+    ...options,
+  });
+};
+
 // ============================================================================
 // SYNC OPERATIONS
 // ============================================================================

frontend/src/api/hooks/settings.ts

@@ -0,0 +1,140 @@
+// frontend/src/api/hooks/settings.ts
+/**
+ * React Query hooks for Tenant Settings
+ * Provides data fetching, caching, and mutation hooks
+ */
+
+import { useQuery, useMutation, useQueryClient, UseQueryOptions } from '@tanstack/react-query';
+import { settingsApi } from '../services/settings';
+import { useToast } from '../../hooks/ui/useToast';
+import type {
+  TenantSettings,
+  TenantSettingsUpdate,
+  SettingsCategory,
+  CategoryResetResponse,
+} from '../types/settings';
+
+// Query keys
+export const settingsKeys = {
+  all: ['settings'] as const,
+  tenant: (tenantId: string) => ['settings', tenantId] as const,
+  category: (tenantId: string, category: SettingsCategory) =>
+    ['settings', tenantId, category] as const,
+};
+
+/**
+ * Hook to fetch all settings for a tenant
+ */
+export const useSettings = (
+  tenantId: string,
+  options?: Omit<UseQueryOptions<TenantSettings, Error>, 'queryKey' | 'queryFn'>
+) => {
+  return useQuery<TenantSettings, Error>({
+    queryKey: settingsKeys.tenant(tenantId),
+    queryFn: () => settingsApi.getSettings(tenantId),
+    staleTime: 5 * 60 * 1000, // 5 minutes
+    ...options,
+  });
+};
+
+/**
+ * Hook to fetch settings for a specific category
+ */
+export const useCategorySettings = (
+  tenantId: string,
+  category: SettingsCategory,
+  options?: Omit<UseQueryOptions<Record<string, any>, Error>, 'queryKey' | 'queryFn'>
+) => {
+  return useQuery<Record<string, any>, Error>({
+    queryKey: settingsKeys.category(tenantId, category),
+    queryFn: () => settingsApi.getCategorySettings(tenantId, category),
+    staleTime: 5 * 60 * 1000, // 5 minutes
+    ...options,
+  });
+};
+
+/**
+ * Hook to update tenant settings
+ */
+export const useUpdateSettings = () => {
+  const queryClient = useQueryClient();
+  const { addToast } = useToast();
+
+  return useMutation<
+    TenantSettings,
+    Error,
+    { tenantId: string; updates: TenantSettingsUpdate }
+  >({
+    mutationFn: ({ tenantId, updates }) => settingsApi.updateSettings(tenantId, updates),
+    onSuccess: (data, variables) => {
+      // Invalidate all settings queries for this tenant
+      queryClient.invalidateQueries({ queryKey: settingsKeys.tenant(variables.tenantId) });
+      addToast('Ajustes guardados correctamente', { type: 'success' });
+    },
+    onError: (error) => {
+      console.error('Failed to update settings:', error);
+      addToast('Error al guardar los ajustes', { type: 'error' });
+    },
+  });
+};
+
+/**
+ * Hook to update a specific category
+ */
+export const useUpdateCategorySettings = () => {
+  const queryClient = useQueryClient();
+  const { addToast } = useToast();
+
+  return useMutation<
+    TenantSettings,
+    Error,
+    { tenantId: string; category: SettingsCategory; settings: Record<string, any> }
+  >({
+    mutationFn: ({ tenantId, category, settings }) =>
+      settingsApi.updateCategorySettings(tenantId, category, settings),
+    onSuccess: (data, variables) => {
+      // Invalidate all settings queries for this tenant
+      queryClient.invalidateQueries({ queryKey: settingsKeys.tenant(variables.tenantId) });
+      // Also invalidate the specific category query
+      queryClient.invalidateQueries({
+        queryKey: settingsKeys.category(variables.tenantId, variables.category),
+      });
+      addToast('Ajustes de categoría guardados correctamente', { type: 'success' });
+    },
+    onError: (error) => {
+      console.error('Failed to update category settings:', error);
+      addToast('Error al guardar los ajustes de categoría', { type: 'error' });
+    },
+  });
+};
+
+/**
+ * Hook to reset a category to defaults
+ */
+export const useResetCategory = () => {
+  const queryClient = useQueryClient();
+  const { addToast } = useToast();
+
+  return useMutation<
+    CategoryResetResponse,
+    Error,
+    { tenantId: string; category: SettingsCategory }
+  >({
+    mutationFn: ({ tenantId, category }) => settingsApi.resetCategory(tenantId, category),
+    onSuccess: (data, variables) => {
+      // Invalidate all settings queries for this tenant
+      queryClient.invalidateQueries({ queryKey: settingsKeys.tenant(variables.tenantId) });
+      // Also invalidate the specific category query
+      queryClient.invalidateQueries({
+        queryKey: settingsKeys.category(variables.tenantId, variables.category),
+      });
+      addToast(`Categoría '${variables.category}' restablecida a valores predeterminados`, {
+        type: 'success',
+      });
+    },
+    onError: (error) => {
+      console.error('Failed to reset category:', error);
+      addToast('Error al restablecer la categoría', { type: 'error' });
+    },
+  });
+};

frontend/src/api/hooks/sustainability.ts

@@ -0,0 +1,123 @@
+/**
+ * React Query hooks for Sustainability API
+ */
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  getSustainabilityMetrics,
+  getSustainabilityWidgetData,
+  getSDGCompliance,
+  getEnvironmentalImpact,
+  exportGrantReport
+} from '../services/sustainability';
+import type {
+  SustainabilityMetrics,
+  SustainabilityWidgetData,
+  SDGCompliance,
+  EnvironmentalImpact,
+  GrantReport
+} from '../types/sustainability';
+
+// Query keys
+export const sustainabilityKeys = {
+  all: ['sustainability'] as const,
+  metrics: (tenantId: string, startDate?: string, endDate?: string) =>
+    ['sustainability', 'metrics', tenantId, startDate, endDate] as const,
+  widget: (tenantId: string, days: number) =>
+    ['sustainability', 'widget', tenantId, days] as const,
+  sdg: (tenantId: string) =>
+    ['sustainability', 'sdg', tenantId] as const,
+  environmental: (tenantId: string, days: number) =>
+    ['sustainability', 'environmental', tenantId, days] as const,
+};
+
+/**
+ * Hook to get comprehensive sustainability metrics
+ */
+export function useSustainabilityMetrics(
+  tenantId: string,
+  startDate?: string,
+  endDate?: string,
+  options?: { enabled?: boolean }
+) {
+  return useQuery({
+    queryKey: sustainabilityKeys.metrics(tenantId, startDate, endDate),
+    queryFn: () => getSustainabilityMetrics(tenantId, startDate, endDate),
+    enabled: options?.enabled !== false && !!tenantId,
+    staleTime: 5 * 60 * 1000, // 5 minutes
+    refetchInterval: 10 * 60 * 1000, // Refetch every 10 minutes
+  });
+}
+
+/**
+ * Hook to get sustainability widget data (simplified metrics)
+ */
+export function useSustainabilityWidget(
+  tenantId: string,
+  days: number = 30,
+  options?: { enabled?: boolean }
+) {
+  return useQuery({
+    queryKey: sustainabilityKeys.widget(tenantId, days),
+    queryFn: () => getSustainabilityWidgetData(tenantId, days),
+    enabled: options?.enabled !== false && !!tenantId,
+    staleTime: 5 * 60 * 1000, // 5 minutes
+    refetchInterval: 10 * 60 * 1000, // Refetch every 10 minutes
+  });
+}
+
+/**
+ * Hook to get SDG 12.3 compliance status
+ */
+export function useSDGCompliance(
+  tenantId: string,
+  options?: { enabled?: boolean }
+) {
+  return useQuery({
+    queryKey: sustainabilityKeys.sdg(tenantId),
+    queryFn: () => getSDGCompliance(tenantId),
+    enabled: options?.enabled !== false && !!tenantId,
+    staleTime: 10 * 60 * 1000, // 10 minutes
+  });
+}
+
+/**
+ * Hook to get environmental impact data
+ */
+export function useEnvironmentalImpact(
+  tenantId: string,
+  days: number = 30,
+  options?: { enabled?: boolean }
+) {
+  return useQuery({
+    queryKey: sustainabilityKeys.environmental(tenantId, days),
+    queryFn: () => getEnvironmentalImpact(tenantId, days),
+    enabled: options?.enabled !== false && !!tenantId,
+    staleTime: 5 * 60 * 1000, // 5 minutes
+  });
+}
+
+/**
+ * Hook to export grant report
+ */
+export function useExportGrantReport() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      tenantId,
+      grantType,
+      startDate,
+      endDate
+    }: {
+      tenantId: string;
+      grantType?: string;
+      startDate?: string;
+      endDate?: string;
+    }) => exportGrantReport(tenantId, grantType, startDate, endDate),
+    onSuccess: () => {
+      // Optionally invalidate related queries
+      queryClient.invalidateQueries({ queryKey: sustainabilityKeys.all });
+    },
+  });
+}

frontend/src/api/services/pos.ts

@@ -250,12 +250,38 @@ export class POSService {
   async getPOSTransaction(params: {
     tenant_id: string;
     transaction_id: string;
-  }): Promise<{
-    transaction: POSTransaction;
-  }> {
+  }): Promise<POSTransaction> {
     const { tenant_id, transaction_id } = params;
     const url = `/tenants/${tenant_id}${this.basePath}/transactions/${transaction_id}`;
-    
+
+    return apiClient.get(url);
+  }
+
+  /**
+   * Get POS transactions dashboard summary
+   */
+  async getPOSTransactionsDashboard(params: {
+    tenant_id: string;
+  }): Promise<{
+    total_transactions_today: number;
+    total_transactions_this_week: number;
+    total_transactions_this_month: number;
+    revenue_today: number;
+    revenue_this_week: number;
+    revenue_this_month: number;
+    average_transaction_value: number;
+    status_breakdown: Record<string, number>;
+    payment_method_breakdown: Record<string, number>;
+    sync_status: {
+      synced: number;
+      pending: number;
+      failed: number;
+      last_sync_at?: string;
+    };
+  }> {
+    const { tenant_id } = params;
+    const url = `/tenants/${tenant_id}${this.basePath}/operations/transactions-dashboard`;
+
     return apiClient.get(url);
   }
 

frontend/src/api/services/settings.ts

@@ -0,0 +1,152 @@
+// frontend/src/api/services/settings.ts
+/**
+ * API service for Tenant Settings
+ * Handles all HTTP requests for tenant operational configuration
+ */
+
+import { apiClient } from '../client/apiClient';
+import type {
+  TenantSettings,
+  TenantSettingsUpdate,
+  SettingsCategory,
+  CategoryResetResponse,
+} from '../types/settings';
+
+export const settingsApi = {
+  /**
+   * Get all settings for a tenant
+   */
+ getSettings: async (tenantId: string): Promise<TenantSettings> => {
+    try {
+      console.log('🔍 Fetching settings for tenant:', tenantId);
+      const response = await apiClient.get<TenantSettings>(`/tenants/${tenantId}/settings`);
+      console.log('📊 Settings API response data:', response);
+      
+      // Validate the response data structure
+      if (!response) {
+        throw new Error('Settings response data is null or undefined');
+      }
+      
+      if (!response.tenant_id) {
+        throw new Error('Settings response missing tenant_id');
+      }
+      
+      if (!response.procurement_settings) {
+        throw new Error('Settings response missing procurement_settings');
+      }
+      
+      console.log('✅ Settings data validation passed');
+      return response;
+    } catch (error) {
+      console.error('❌ Error fetching settings:', error);
+      console.error('Error details:', {
+        message: (error as Error).message,
+        stack: (error as Error).stack,
+        tenantId
+      });
+      throw error;
+    }
+ },
+
+  /**
+   * Update tenant settings (partial update supported)
+   */
+  updateSettings: async (
+    tenantId: string,
+    updates: TenantSettingsUpdate
+  ): Promise<TenantSettings> => {
+    try {
+      console.log('🔍 Updating settings for tenant:', tenantId, 'with updates:', updates);
+      const response = await apiClient.put<TenantSettings>(`/tenants/${tenantId}/settings`, updates);
+      console.log('📊 Settings update response:', response);
+      
+      if (!response) {
+        throw new Error('Settings update response data is null or undefined');
+      }
+      
+      return response;
+    } catch (error) {
+      console.error('❌ Error updating settings:', error);
+      throw error;
+    }
+  },
+
+  /**
+   * Get settings for a specific category
+   */
+  getCategorySettings: async (
+    tenantId: string,
+    category: SettingsCategory
+  ): Promise<Record<string, any>> => {
+    try {
+      console.log('🔍 Fetching category settings for tenant:', tenantId, 'category:', category);
+      const response = await apiClient.get<{ tenant_id: string; category: string; settings: Record<string, any> }>(
+        `/tenants/${tenantId}/settings/${category}`
+      );
+      console.log('📊 Category settings response:', response);
+      
+      if (!response || !response.settings) {
+        throw new Error('Category settings response data is null or undefined');
+      }
+      
+      return response.settings;
+    } catch (error) {
+      console.error('❌ Error fetching category settings:', error);
+      throw error;
+    }
+  },
+
+  /**
+   * Update settings for a specific category
+   */
+  updateCategorySettings: async (
+    tenantId: string,
+    category: SettingsCategory,
+    settings: Record<string, any>
+  ): Promise<TenantSettings> => {
+    try {
+      console.log('🔍 Updating category settings for tenant:', tenantId, 'category:', category, 'settings:', settings);
+      const response = await apiClient.put<TenantSettings>(
+        `/tenants/${tenantId}/settings/${category}`,
+        { settings }
+      );
+      console.log('📊 Category settings update response:', response);
+      
+      if (!response) {
+        throw new Error('Category settings update response data is null or undefined');
+      }
+      
+      return response;
+    } catch (error) {
+      console.error('❌ Error updating category settings:', error);
+      throw error;
+    }
+  },
+
+  /**
+   * Reset a category to default values
+   */
+ resetCategory: async (
+    tenantId: string,
+    category: SettingsCategory
+  ): Promise<CategoryResetResponse> => {
+    try {
+      console.log('🔍 Resetting category for tenant:', tenantId, 'category:', category);
+      const response = await apiClient.post<CategoryResetResponse>(
+        `/tenants/${tenantId}/settings/${category}/reset`
+      );
+      console.log('📊 Category reset response:', response);
+      
+      if (!response) {
+        throw new Error('Category reset response data is null or undefined');
+      }
+      
+      return response;
+    } catch (error) {
+      console.error('❌ Error resetting category:', error);
+      throw error;
+    }
+  },
+};
+
+export default settingsApi;

frontend/src/api/services/sustainability.ts

@@ -0,0 +1,85 @@
+/**
+ * Sustainability API Service
+ * Environmental impact, SDG compliance, and grant reporting
+ */
+
+import apiClient from '../client/apiClient';
+import type {
+  SustainabilityMetrics,
+  SustainabilityWidgetData,
+  SDGCompliance,
+  EnvironmentalImpact,
+  GrantReport
+} from '../types/sustainability';
+
+const BASE_PATH = '/sustainability';
+
+/**
+ * Get comprehensive sustainability metrics
+ */
+export async function getSustainabilityMetrics(
+  tenantId: string,
+  startDate?: string,
+  endDate?: string
+): Promise<SustainabilityMetrics> {
+  const params = new URLSearchParams();
+  if (startDate) params.append('start_date', startDate);
+  if (endDate) params.append('end_date', endDate);
+
+  const queryString = params.toString();
+  const url = `/tenants/${tenantId}${BASE_PATH}/metrics${queryString ? `?${queryString}` : ''}`;
+
+  return await apiClient.get<SustainabilityMetrics>(url);
+}
+
+/**
+ * Get simplified sustainability widget data
+ */
+export async function getSustainabilityWidgetData(
+  tenantId: string,
+  days: number = 30
+): Promise<SustainabilityWidgetData> {
+  return await apiClient.get<SustainabilityWidgetData>(
+    `/tenants/${tenantId}${BASE_PATH}/widget?days=${days}`
+  );
+}
+
+/**
+ * Get SDG 12.3 compliance status
+ */
+export async function getSDGCompliance(tenantId: string): Promise<SDGCompliance> {
+  return await apiClient.get<SDGCompliance>(
+    `/tenants/${tenantId}${BASE_PATH}/sdg-compliance`
+  );
+}
+
+/**
+ * Get environmental impact metrics
+ */
+export async function getEnvironmentalImpact(
+  tenantId: string,
+  days: number = 30
+): Promise<EnvironmentalImpact> {
+  return await apiClient.get<EnvironmentalImpact>(
+    `/tenants/${tenantId}${BASE_PATH}/environmental-impact?days=${days}`
+  );
+}
+
+/**
+ * Export grant application report
+ */
+export async function exportGrantReport(
+  tenantId: string,
+  grantType: string = 'general',
+  startDate?: string,
+  endDate?: string
+): Promise<GrantReport> {
+  const payload: any = { grant_type: grantType, format: 'json' };
+  if (startDate) payload.start_date = startDate;
+  if (endDate) payload.end_date = endDate;
+
+  return await apiClient.post<GrantReport>(
+    `/tenants/${tenantId}${BASE_PATH}/export/grant-report`,
+    payload
+  );
+}

frontend/src/api/types/settings.ts

@@ -0,0 +1,117 @@
+// frontend/src/api/types/settings.ts
+/**
+ * TypeScript types for Tenant Settings
+ * Operational configuration for bakery tenants
+ */
+
+export interface ProcurementSettings {
+  auto_approve_enabled: boolean;
+  auto_approve_threshold_eur: number;
+  auto_approve_min_supplier_score: number;
+  require_approval_new_suppliers: boolean;
+  require_approval_critical_items: boolean;
+  procurement_lead_time_days: number;
+  demand_forecast_days: number;
+  safety_stock_percentage: number;
+  po_approval_reminder_hours: number;
+  po_critical_escalation_hours: number;
+}
+
+export interface InventorySettings {
+  low_stock_threshold: number;
+  reorder_point: number;
+  reorder_quantity: number;
+  expiring_soon_days: number;
+  expiration_warning_days: number;
+  quality_score_threshold: number;
+  temperature_monitoring_enabled: boolean;
+  refrigeration_temp_min: number;
+  refrigeration_temp_max: number;
+  freezer_temp_min: number;
+  freezer_temp_max: number;
+  room_temp_min: number;
+  room_temp_max: number;
+  temp_deviation_alert_minutes: number;
+  critical_temp_deviation_minutes: number;
+}
+
+export interface ProductionSettings {
+  planning_horizon_days: number;
+  minimum_batch_size: number;
+  maximum_batch_size: number;
+  production_buffer_percentage: number;
+  working_hours_per_day: number;
+  max_overtime_hours: number;
+  capacity_utilization_target: number;
+  capacity_warning_threshold: number;
+  quality_check_enabled: boolean;
+  minimum_yield_percentage: number;
+  quality_score_threshold: number;
+  schedule_optimization_enabled: boolean;
+  prep_time_buffer_minutes: number;
+  cleanup_time_buffer_minutes: number;
+  labor_cost_per_hour_eur: number;
+  overhead_cost_percentage: number;
+}
+
+export interface SupplierSettings {
+  default_payment_terms_days: number;
+  default_delivery_days: number;
+  excellent_delivery_rate: number;
+  good_delivery_rate: number;
+  excellent_quality_rate: number;
+  good_quality_rate: number;
+  critical_delivery_delay_hours: number;
+  critical_quality_rejection_rate: number;
+  high_cost_variance_percentage: number;
+}
+
+export interface POSSettings {
+  sync_interval_minutes: number;
+  auto_sync_products: boolean;
+  auto_sync_transactions: boolean;
+}
+
+export interface OrderSettings {
+  max_discount_percentage: number;
+  default_delivery_window_hours: number;
+  dynamic_pricing_enabled: boolean;
+  discount_enabled: boolean;
+  delivery_tracking_enabled: boolean;
+}
+
+export interface TenantSettings {
+  id: string;
+  tenant_id: string;
+  procurement_settings: ProcurementSettings;
+  inventory_settings: InventorySettings;
+  production_settings: ProductionSettings;
+  supplier_settings: SupplierSettings;
+  pos_settings: POSSettings;
+  order_settings: OrderSettings;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface TenantSettingsUpdate {
+  procurement_settings?: Partial<ProcurementSettings>;
+  inventory_settings?: Partial<InventorySettings>;
+  production_settings?: Partial<ProductionSettings>;
+  supplier_settings?: Partial<SupplierSettings>;
+  pos_settings?: Partial<POSSettings>;
+  order_settings?: Partial<OrderSettings>;
+}
+
+export type SettingsCategory =
+  | 'procurement'
+  | 'inventory'
+  | 'production'
+  | 'supplier'
+  | 'pos'
+  | 'order';
+
+export interface CategoryResetResponse {
+  category: string;
+  settings: Record<string, any>;
+  message: string;
+}

frontend/src/api/types/sustainability.ts

@@ -0,0 +1,161 @@
+/**
+ * Sustainability TypeScript Types
+ * Environmental impact, SDG compliance, and grant reporting
+ */
+
+export interface PeriodInfo {
+  start_date: string;
+  end_date: string;
+  days: number;
+}
+
+export interface WasteMetrics {
+  total_waste_kg: number;
+  production_waste_kg: number;
+  expired_waste_kg: number;
+  waste_percentage: number;
+  waste_by_reason: Record<string, number>;
+}
+
+export interface CO2Emissions {
+  kg: number;
+  tons: number;
+  trees_to_offset: number;
+}
+
+export interface WaterFootprint {
+  liters: number;
+  cubic_meters: number;
+}
+
+export interface LandUse {
+  square_meters: number;
+  hectares: number;
+}
+
+export interface HumanEquivalents {
+  car_km_equivalent: number;
+  smartphone_charges: number;
+  showers_equivalent: number;
+  trees_planted: number;
+}
+
+export interface EnvironmentalImpact {
+  co2_emissions: CO2Emissions;
+  water_footprint: WaterFootprint;
+  land_use: LandUse;
+  human_equivalents: HumanEquivalents;
+}
+
+export interface SDG123Metrics {
+  baseline_waste_percentage: number;
+  current_waste_percentage: number;
+  reduction_achieved: number;
+  target_reduction: number;
+  progress_to_target: number;
+  status: 'sdg_compliant' | 'on_track' | 'progressing' | 'baseline';
+  status_label: string;
+  target_waste_percentage: number;
+}
+
+export interface SDGCompliance {
+  sdg_12_3: SDG123Metrics;
+  baseline_period: string;
+  certification_ready: boolean;
+  improvement_areas: string[];
+}
+
+export interface EnvironmentalImpactAvoided {
+  co2_kg: number;
+  water_liters: number;
+}
+
+export interface AvoidedWaste {
+  waste_avoided_kg: number;
+  ai_assisted_batches: number;
+  environmental_impact_avoided: EnvironmentalImpactAvoided;
+  methodology: string;
+}
+
+export interface FinancialImpact {
+  waste_cost_eur: number;
+  cost_per_kg: number;
+  potential_monthly_savings: number;
+  annual_projection: number;
+}
+
+export interface GrantProgramEligibility {
+  eligible: boolean;
+  confidence: 'high' | 'medium' | 'low';
+  requirements_met: boolean;
+}
+
+export interface GrantReadiness {
+  overall_readiness_percentage: number;
+  grant_programs: Record<string, GrantProgramEligibility>;
+  recommended_applications: string[];
+}
+
+export interface SustainabilityMetrics {
+  period: PeriodInfo;
+  waste_metrics: WasteMetrics;
+  environmental_impact: EnvironmentalImpact;
+  sdg_compliance: SDGCompliance;
+  avoided_waste: AvoidedWaste;
+  financial_impact: FinancialImpact;
+  grant_readiness: GrantReadiness;
+}
+
+export interface SustainabilityWidgetData {
+  total_waste_kg: number;
+  waste_reduction_percentage: number;
+  co2_saved_kg: number;
+  water_saved_liters: number;
+  trees_equivalent: number;
+  sdg_status: string;
+  sdg_progress: number;
+  grant_programs_ready: number;
+  financial_savings_eur: number;
+}
+
+// Grant Report Types
+
+export interface BaselineComparison {
+  baseline: number;
+  current: number;
+  improvement: number;
+}
+
+export interface SupportingData {
+  baseline_comparison: BaselineComparison;
+  environmental_benefits: EnvironmentalImpact;
+  financial_benefits: FinancialImpact;
+}
+
+export interface Certifications {
+  sdg_12_3_compliant: boolean;
+  grant_programs_eligible: string[];
+}
+
+export interface ExecutiveSummary {
+  total_waste_reduced_kg: number;
+  waste_reduction_percentage: number;
+  co2_emissions_avoided_kg: number;
+  financial_savings_eur: number;
+  sdg_compliance_status: string;
+}
+
+export interface ReportMetadata {
+  generated_at: string;
+  report_type: string;
+  period: PeriodInfo;
+  tenant_id: string;
+}
+
+export interface GrantReport {
+  report_metadata: ReportMetadata;
+  executive_summary: ExecutiveSummary;
+  detailed_metrics: SustainabilityMetrics;
+  certifications: Certifications;
+  supporting_data: SupportingData;
+}

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

@@ -1,7 +1,7 @@
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card, CardHeader, CardBody } from '../../ui/Card';
-import { Badge } from '../../ui/Badge';
+import { SeverityBadge } from '../../ui/Badge';
 import { Button } from '../../ui/Button';
 import { useNotifications } from '../../../hooks/useNotifications';
 import { useAlertFilters } from '../../../hooks/useAlertFilters';
@@ -18,6 +18,8 @@ import {
   AlertTriangle,
   AlertCircle,
   Clock,
+  ChevronLeft,
+  ChevronRight,
 } from 'lucide-react';
 import AlertFilters from './AlertFilters';
 import AlertGroupHeader from './AlertGroupHeader';
@@ -61,6 +63,10 @@ const RealTimeAlerts: React.FC<RealTimeAlertsProps> = ({
   const [showBulkActions, setShowBulkActions] = useState(false);
   const [showAnalyticsPanel, setShowAnalyticsPanel] = useState(false);
 
+  // Pagination state
+  const ALERTS_PER_PAGE = 3;
+  const [currentPage, setCurrentPage] = useState(1);
+
   const {
     notifications,
     isConnected,
@@ -121,6 +127,32 @@ const RealTimeAlerts: React.FC<RealTimeAlertsProps> = ({
     );
   }, [groupedAlerts, isGroupCollapsed]);
 
+  // Reset pagination when filters change
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [filters, groupingMode]);
+
+  // Pagination calculations
+  const totalAlerts = flatAlerts.length;
+  const totalPages = Math.ceil(totalAlerts / ALERTS_PER_PAGE);
+  const startIndex = (currentPage - 1) * ALERTS_PER_PAGE;
+  const endIndex = startIndex + ALERTS_PER_PAGE;
+
+  // Paginated alerts - slice the flat alerts for current page
+  const paginatedAlerts = useMemo(() => {
+    const alertsToShow = flatAlerts.slice(startIndex, endIndex);
+    const alertIds = new Set(alertsToShow.map(a => a.id));
+
+    // Filter groups to only show alerts on current page
+    return groupedAlerts
+      .map(group => ({
+        ...group,
+        alerts: group.alerts.filter(alert => alertIds.has(alert.id)),
+        count: group.alerts.filter(alert => alertIds.has(alert.id)).length,
+      }))
+      .filter(group => group.alerts.length > 0);
+  }, [groupedAlerts, flatAlerts, startIndex, endIndex]);
+
   const { focusedIndex } = useKeyboardNavigation(
     flatAlerts.length,
     {
@@ -296,22 +328,18 @@ const RealTimeAlerts: React.FC<RealTimeAlertsProps> = ({
             {/* Alert count badges */}
             <div className="flex items-center gap-2">
               {urgentCount > 0 && (
-                <Badge
-                  variant="error"
+                <SeverityBadge
+                  severity="high"
+                  count={urgentCount}
                   size="sm"
-                  icon={<AlertTriangle className="w-4 h-4" />}
-                >
-                  {urgentCount} Alto
-                </Badge>
+                />
               )}
               {highCount > 0 && (
-                <Badge
-                  variant="warning"
+                <SeverityBadge
+                  severity="medium"
+                  count={highCount}
                   size="sm"
-                  icon={<AlertCircle className="w-4 h-4" />}
-                >
-                  {highCount} Medio
-                </Badge>
+                />
               )}
             </div>
 
@@ -402,7 +430,7 @@ const RealTimeAlerts: React.FC<RealTimeAlertsProps> = ({
           </div>
         ) : (
           <div className="space-y-3 p-4">
-            {groupedAlerts.map((group) => (
+            {paginatedAlerts.map((group) => (
               <div key={group.id}>
                 {(group.count > 1 || groupingMode !== 'none') && (
                   <div className="mb-3">
@@ -448,24 +476,58 @@ const RealTimeAlerts: React.FC<RealTimeAlertsProps> = ({
               backgroundColor: 'var(--bg-secondary)/50',
             }}
           >
-            <div className="flex items-center justify-between text-sm" style={{ color: 'var(--text-secondary)' }}>
-              <span className="font-medium">
-                Mostrando <span className="font-bold text-[var(--text-primary)]">{filteredNotifications.length}</span> de <span className="font-bold text-[var(--text-primary)]">{notifications.length}</span> alertas
-              </span>
-              <div className="flex items-center gap-4">
-                {stats.unread > 0 && (
-                  <span className="flex items-center gap-1.5">
-                    <span className="w-2 h-2 rounded-full bg-[var(--color-info)] animate-pulse" />
-                    <span className="font-semibold text-[var(--text-primary)]">{stats.unread}</span> sin leer
-                  </span>
-                )}
-                {stats.snoozed > 0 && (
-                  <span className="flex items-center gap-1.5">
-                    <Clock className="w-3.5 h-3.5" />
-                    <span className="font-semibold text-[var(--text-primary)]">{stats.snoozed}</span> pospuestas
-                  </span>
-                )}
+            <div className="flex flex-col gap-3">
+              {/* Stats row */}
+              <div className="flex items-center justify-between text-sm" style={{ color: 'var(--text-secondary)' }}>
+                <span className="font-medium">
+                  Mostrando <span className="font-bold text-[var(--text-primary)]">{startIndex + 1}-{Math.min(endIndex, totalAlerts)}</span> de <span className="font-bold text-[var(--text-primary)]">{totalAlerts}</span> alertas
+                </span>
+                <div className="flex items-center gap-4">
+                  {stats.unread > 0 && (
+                    <span className="flex items-center gap-1.5">
+                      <span className="w-2 h-2 rounded-full bg-[var(--color-info)] animate-pulse" />
+                      <span className="font-semibold text-[var(--text-primary)]">{stats.unread}</span> sin leer
+                    </span>
+                  )}
+                  {stats.snoozed > 0 && (
+                    <span className="flex items-center gap-1.5">
+                      <Clock className="w-3.5 h-3.5" />
+                      <span className="font-semibold text-[var(--text-primary)]">{stats.snoozed}</span> pospuestas
+                    </span>
+                  )}
+                </div>
               </div>
+
+              {/* Pagination controls */}
+              {totalPages > 1 && (
+                <div className="flex items-center justify-center gap-2">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
+                    disabled={currentPage === 1}
+                    className="h-8 px-3"
+                    aria-label="Previous page"
+                  >
+                    <ChevronLeft className="w-4 h-4" />
+                  </Button>
+
+                  <span className="text-sm font-medium px-3" style={{ color: 'var(--text-primary)' }}>
+                    Página <span className="font-bold">{currentPage}</span> de <span className="font-bold">{totalPages}</span>
+                  </span>
+
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
+                    disabled={currentPage === totalPages}
+                    className="h-8 px-3"
+                    aria-label="Next page"
+                  >
+                    <ChevronRight className="w-4 h-4" />
+                  </Button>
+                </div>
+              )}
             </div>
           </div>
         )}

frontend/src/components/domain/pos/CreatePOSConfigModal.tsx

@@ -31,6 +31,15 @@ export const CreatePOSConfigModal: React.FC<CreatePOSConfigModalProps> = ({
   const [selectedProvider, setSelectedProvider] = useState<POSSystem | ''>('');
   const { addToast } = useToast();
 
+  // Initialize selectedProvider in edit mode
+  React.useEffect(() => {
+    if (mode === 'edit' && existingConfig) {
+      setSelectedProvider(existingConfig.pos_system as POSSystem);
+    } else {
+      setSelectedProvider('');
+    }
+  }, [mode, existingConfig]);
+
   // Supported POS providers configuration
   const supportedProviders: POSProviderConfig[] = [
     {
@@ -160,7 +169,7 @@ export const CreatePOSConfigModal: React.FC<CreatePOSConfigModalProps> = ({
       const credentialFields: AddModalField[] = provider.required_fields.map(field => ({
         label: field.label,
         name: `credential_${field.field}`,
-        type: field.type === 'select' ? 'select' : (field.type === 'password' ? 'text' : field.type),
+        type: field.type === 'select' ? 'select' : 'text', // Map password/url to text
         required: field.required,
         placeholder: field.placeholder || `Ingresa ${field.label}`,
         helpText: field.help_text,
@@ -245,20 +254,33 @@ export const CreatePOSConfigModal: React.FC<CreatePOSConfigModalProps> = ({
         return;
       }
 
-      // Extract credentials
+      // Extract credentials and separate top-level fields
       const credentials: Record<string, any> = {};
+      let environment: string | undefined;
+      let location_id: string | undefined;
+
       provider.required_fields.forEach(field => {
         const credKey = `credential_${field.field}`;
         if (formData[credKey]) {
-          credentials[field.field] = formData[credKey];
+          const value = formData[credKey];
+
+          // Extract environment and location_id to top level, but keep in credentials too
+          if (field.field === 'environment') {
+            environment = value;
+          } else if (field.field === 'location_id') {
+            location_id = value;
+          }
+
+          credentials[field.field] = value;
         }
       });
 
-      // Build request payload
-      const payload = {
+      // Build request payload with correct field names
+      const payload: any = {
         tenant_id: tenantId,
-        provider: formData.provider,
-        config_name: formData.config_name,
+        pos_system: formData.provider as POSSystem,           // FIXED: was 'provider'
+        provider_name: formData.config_name as string,        // FIXED: was 'config_name'
+        environment: (environment || 'sandbox') as POSEnvironment, // FIXED: extract from credentials
         credentials,
         sync_settings: {
           auto_sync_enabled: formData.auto_sync_enabled === 'true' || formData.auto_sync_enabled === true,
@@ -266,7 +288,8 @@ export const CreatePOSConfigModal: React.FC<CreatePOSConfigModalProps> = ({
           sync_sales: formData.sync_sales === 'true' || formData.sync_sales === true,
           sync_inventory: formData.sync_inventory === 'true' || formData.sync_inventory === true,
           sync_customers: false
-        }
+        },
+        ...(location_id && { location_id })     // FIXED: add location_id if present
       };
 
       // Create or update configuration
@@ -292,6 +315,13 @@ export const CreatePOSConfigModal: React.FC<CreatePOSConfigModalProps> = ({
     }
   };
 
+  // Handle field changes to update selectedProvider dynamically
+  const handleFieldChange = (fieldName: string, value: any) => {
+    if (fieldName === 'provider') {
+      setSelectedProvider(value as POSSystem | '');
+    }
+  };
+
   return (
     <AddModal
       isOpen={isOpen}
@@ -318,6 +348,7 @@ export const CreatePOSConfigModal: React.FC<CreatePOSConfigModalProps> = ({
           addToast(firstError, { type: 'error' });
         }
       }}
+      onFieldChange={handleFieldChange}
     />
   );
 };

frontend/src/components/domain/sustainability/SustainabilityWidget.tsx

@@ -0,0 +1,250 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Leaf,
+  Droplets,
+  TreeDeciduous,
+  TrendingDown,
+  Award,
+  FileText,
+  ChevronRight,
+  Download,
+  Info
+} from 'lucide-react';
+import Card from '../../ui/Card/Card';
+import { Button, Badge } from '../../ui';
+import { useSustainabilityWidget } from '../../../api/hooks/sustainability';
+import { useCurrentTenant } from '../../../stores/tenant.store';
+
+interface SustainabilityWidgetProps {
+  days?: number;
+  onViewDetails?: () => void;
+  onExportReport?: () => void;
+}
+
+export const SustainabilityWidget: React.FC<SustainabilityWidgetProps> = ({
+  days = 30,
+  onViewDetails,
+  onExportReport
+}) => {
+  const { t } = useTranslation(['sustainability', 'common']);
+  const currentTenant = useCurrentTenant();
+  const tenantId = currentTenant?.id || '';
+
+  const { data, isLoading, error } = useSustainabilityWidget(tenantId, days, {
+    enabled: !!tenantId
+  });
+
+  const getSDGStatusColor = (status: string) => {
+    switch (status) {
+      case 'sdg_compliant':
+        return 'bg-green-500/10 text-green-600 border-green-500/20';
+      case 'on_track':
+        return 'bg-blue-500/10 text-blue-600 border-blue-500/20';
+      case 'progressing':
+        return 'bg-yellow-500/10 text-yellow-600 border-yellow-500/20';
+      default:
+        return 'bg-gray-500/10 text-gray-600 border-gray-500/20';
+    }
+  };
+
+  const getSDGStatusLabel = (status: string) => {
+    const labels: Record<string, string> = {
+      sdg_compliant: t('sustainability:sdg.status.compliant', 'SDG Compliant'),
+      on_track: t('sustainability:sdg.status.on_track', 'On Track'),
+      progressing: t('sustainability:sdg.status.progressing', 'Progressing'),
+      baseline: t('sustainability:sdg.status.baseline', 'Baseline')
+    };
+    return labels[status] || status;
+  };
+
+  if (isLoading) {
+    return (
+      <Card className="p-6">
+        <div className="animate-pulse space-y-4">
+          <div className="h-6 bg-[var(--bg-secondary)] rounded w-1/3"></div>
+          <div className="h-32 bg-[var(--bg-secondary)] rounded"></div>
+        </div>
+      </Card>
+    );
+  }
+
+  if (error || !data) {
+    return (
+      <Card className="p-6">
+        <div className="text-center py-8">
+          <Leaf className="w-12 h-12 mx-auto mb-3 text-[var(--text-secondary)] opacity-50" />
+          <p className="text-sm text-[var(--text-secondary)]">
+            {t('sustainability:errors.load_failed', 'Unable to load sustainability metrics')}
+          </p>
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="overflow-hidden">
+      {/* Header */}
+      <div className="p-6 pb-4 border-b border-[var(--border-primary)] bg-gradient-to-r from-green-50/50 to-blue-50/50 dark:from-green-900/10 dark:to-blue-900/10">
+        <div className="flex items-start justify-between">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-green-500/10 rounded-lg">
+              <Leaf className="w-6 h-6 text-green-600 dark:text-green-400" />
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold text-[var(--text-primary)]">
+                {t('sustainability:widget.title', 'Sustainability Impact')}
+              </h3>
+              <p className="text-sm text-[var(--text-secondary)]">
+                {t('sustainability:widget.subtitle', 'Environmental & SDG 12.3 Compliance')}
+              </p>
+            </div>
+          </div>
+          <div className={`px-3 py-1 rounded-full border text-xs font-medium ${getSDGStatusColor(data.sdg_status)}`}>
+            {getSDGStatusLabel(data.sdg_status)}
+          </div>
+        </div>
+      </div>
+
+      {/* SDG Progress Bar */}
+      <div className="p-6 pb-4 border-b border-[var(--border-primary)]">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-sm font-medium text-[var(--text-primary)]">
+            {t('sustainability:sdg.progress_label', 'SDG 12.3 Target Progress')}
+          </span>
+          <span className="text-sm font-bold text-[var(--color-primary)]">
+            {Math.round(data.sdg_progress)}%
+          </span>
+        </div>
+        <div className="w-full bg-[var(--bg-secondary)] rounded-full h-3 overflow-hidden">
+          <div
+            className="h-full bg-gradient-to-r from-green-500 to-emerald-600 rounded-full transition-all duration-500 relative overflow-hidden"
+            style={{ width: `${Math.min(data.sdg_progress, 100)}%` }}
+          >
+            <div className="absolute inset-0 bg-white/20 animate-pulse"></div>
+          </div>
+        </div>
+        <p className="text-xs text-[var(--text-secondary)] mt-2">
+          {t('sustainability:sdg.target_note', 'Target: 50% food waste reduction by 2030')}
+        </p>
+      </div>
+
+      {/* Key Metrics Grid */}
+      <div className="p-6 grid grid-cols-2 gap-4">
+        {/* Waste Reduction */}
+        <div className="p-4 bg-[var(--bg-secondary)] rounded-lg">
+          <div className="flex items-center gap-2 mb-2">
+            <TrendingDown className="w-4 h-4 text-green-600 dark:text-green-400" />
+            <span className="text-xs font-medium text-[var(--text-secondary)]">
+              {t('sustainability:metrics.waste_reduction', 'Waste Reduction')}
+            </span>
+          </div>
+          <div className="text-2xl font-bold text-[var(--text-primary)]">
+            {Math.abs(data.waste_reduction_percentage).toFixed(1)}%
+          </div>
+          <p className="text-xs text-[var(--text-secondary)] mt-1">
+            {data.total_waste_kg.toFixed(0)} kg {t('common:saved', 'saved')}
+          </p>
+        </div>
+
+        {/* CO2 Impact */}
+        <div className="p-4 bg-[var(--bg-secondary)] rounded-lg">
+          <div className="flex items-center gap-2 mb-2">
+            <Leaf className="w-4 h-4 text-blue-600 dark:text-blue-400" />
+            <span className="text-xs font-medium text-[var(--text-secondary)]">
+              {t('sustainability:metrics.co2_avoided', 'CO₂ Avoided')}
+            </span>
+          </div>
+          <div className="text-2xl font-bold text-[var(--text-primary)]">
+            {data.co2_saved_kg.toFixed(0)} kg
+          </div>
+          <p className="text-xs text-[var(--text-secondary)] mt-1">
+            ≈ {data.trees_equivalent.toFixed(1)} {t('sustainability:metrics.trees', 'trees')}
+          </p>
+        </div>
+
+        {/* Water Saved */}
+        <div className="p-4 bg-[var(--bg-secondary)] rounded-lg">
+          <div className="flex items-center gap-2 mb-2">
+            <Droplets className="w-4 h-4 text-cyan-600 dark:text-cyan-400" />
+            <span className="text-xs font-medium text-[var(--text-secondary)]">
+              {t('sustainability:metrics.water_saved', 'Water Saved')}
+            </span>
+          </div>
+          <div className="text-2xl font-bold text-[var(--text-primary)]">
+            {(data.water_saved_liters / 1000).toFixed(1)} m³
+          </div>
+          <p className="text-xs text-[var(--text-secondary)] mt-1">
+            {data.water_saved_liters.toFixed(0)} {t('common:liters', 'liters')}
+          </p>
+        </div>
+
+        {/* Grant Programs */}
+        <div className="p-4 bg-[var(--bg-secondary)] rounded-lg">
+          <div className="flex items-center gap-2 mb-2">
+            <Award className="w-4 h-4 text-amber-600 dark:text-amber-400" />
+            <span className="text-xs font-medium text-[var(--text-secondary)]">
+              {t('sustainability:metrics.grants_eligible', 'Grants Eligible')}
+            </span>
+          </div>
+          <div className="text-2xl font-bold text-[var(--text-primary)]">
+            {data.grant_programs_ready}
+          </div>
+          <p className="text-xs text-[var(--text-secondary)] mt-1">
+            {t('sustainability:metrics.programs', 'programs')}
+          </p>
+        </div>
+      </div>
+
+      {/* Financial Impact */}
+      <div className="px-6 pb-4">
+        <div className="p-4 bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 rounded-lg border border-green-200 dark:border-green-800">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-xs font-medium text-green-700 dark:text-green-400 mb-1">
+                {t('sustainability:financial.potential_savings', 'Potential Monthly Savings')}
+              </p>
+              <p className="text-2xl font-bold text-green-600 dark:text-green-400">
+                €{data.financial_savings_eur.toFixed(2)}
+              </p>
+            </div>
+            <TreeDeciduous className="w-10 h-10 text-green-600/30 dark:text-green-400/30" />
+          </div>
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="p-6 pt-4 border-t border-[var(--border-primary)] bg-[var(--bg-secondary)]/30">
+        <div className="flex items-center gap-2">
+          {onViewDetails && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onViewDetails}
+              className="flex-1"
+            >
+              <Info className="w-4 h-4 mr-1" />
+              {t('sustainability:actions.view_details', 'View Details')}
+            </Button>
+          )}
+          {onExportReport && (
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={onExportReport}
+              className="flex-1"
+            >
+              <Download className="w-4 h-4 mr-1" />
+              {t('sustainability:actions.export_report', 'Export Report')}
+            </Button>
+          )}
+        </div>
+        <p className="text-xs text-[var(--text-secondary)] text-center mt-3">
+          {t('sustainability:widget.footer', 'Aligned with UN SDG 12.3 & EU Green Deal')}
+        </p>
+      </div>
+    </Card>
+  );
+};
+
+export default SustainabilityWidget;

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

@@ -7,7 +7,7 @@ import { useTheme } from '../../../contexts/ThemeContext';
 import { useNotifications } from '../../../hooks/useNotifications';
 import { useHasAccess } from '../../../hooks/useAccessControl';
 import { Button } from '../../ui';
-import { Badge } from '../../ui';
+import { CountBadge } from '../../ui';
 import { TenantSwitcher } from '../../ui/TenantSwitcher';
 import { ThemeToggle } from '../../ui/ThemeToggle';
 import { NotificationPanel } from '../../ui/NotificationPanel/NotificationPanel';
@@ -258,13 +258,13 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
                   unreadCount > 0 && "text-[var(--color-warning)]"
                 )} />
                 {unreadCount > 0 && (
-                  <Badge
+                  <CountBadge
+                    count={unreadCount}
+                    max={99}
                     variant="error"
                     size="sm"
-                    className="absolute -top-1 -right-1 min-w-[18px] h-[18px] text-xs flex items-center justify-center"
-                  >
-                    {unreadCount > 99 ? '99+' : unreadCount}
-                  </Badge>
+                    overlay
+                  />
                 )}
               </Button>
 

frontend/src/components/ui/AddModal/AddModal.tsx

@@ -257,6 +257,9 @@ export interface AddModalProps {
   // Validation
   validationErrors?: Record<string, string>;
   onValidationError?: (errors: Record<string, string>) => void;
+
+  // Field change callback for dynamic form behavior
+  onFieldChange?: (fieldName: string, value: any) => void;
 }
 
 /**
@@ -285,6 +288,7 @@ export const AddModal: React.FC<AddModalProps> = ({
   initialData = EMPTY_INITIAL_DATA,
   validationErrors = EMPTY_VALIDATION_ERRORS,
   onValidationError,
+  onFieldChange,
 }) => {
   const [formData, setFormData] = useState<Record<string, any>>({});
   const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
@@ -356,6 +360,9 @@ export const AddModal: React.FC<AddModalProps> = ({
         onValidationError?.(newErrors);
       }
     }
+
+    // Notify parent component of field change
+    onFieldChange?.(fieldName, value);
   };
 
   const findFieldByName = (fieldName: string): AddModalField | undefined => {

frontend/src/components/ui/Badge/Badge.tsx

@@ -1,35 +1,57 @@
-import React, { forwardRef, HTMLAttributes, useMemo } from 'react';
+import React, { forwardRef, HTMLAttributes } from 'react';
 import { clsx } from 'clsx';
 
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * Visual style variant
+   * @default 'default'
+   */
   variant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'outline';
-  size?: 'xs' | 'sm' | 'md' | 'lg';
-  shape?: 'rounded' | 'pill' | 'square';
-  dot?: boolean;
-  count?: number;
-  showZero?: boolean;
-  max?: number;
-  offset?: [number, number];
-  status?: 'default' | 'error' | 'success' | 'warning' | 'processing';
-  text?: string;
-  color?: string;
+
+  /**
+   * Size variant
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg';
+
+  /**
+   * Optional icon to display before the text
+   */
   icon?: React.ReactNode;
+
+  /**
+   * Whether the badge is closable
+   * @default false
+   */
   closable?: boolean;
-  onClose?: (e: React.MouseEvent<HTMLElement>) => void;
+
+  /**
+   * Callback when close button is clicked
+   */
+  onClose?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
-const Badge = forwardRef<HTMLSpanElement, BadgeProps>(({
+/**
+ * Badge - Simple label/tag component for displaying status, categories, or labels
+ *
+ * Features:
+ * - Theme-aware with CSS custom properties
+ * - Multiple semantic variants (success, warning, error, info)
+ * - Three size options (sm, md, lg)
+ * - Optional icon support
+ * - Optional close button
+ * - Accessible with proper ARIA labels
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="success">Active</Badge>
+ * <Badge variant="warning" icon={<AlertCircle />}>Warning</Badge>
+ * <Badge variant="error" closable onClose={handleClose}>Error</Badge>
+ * ```
+ */
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(({
   variant = 'default',
   size = 'md',
-  shape = 'rounded',
-  dot = false,
-  count,
-  showZero = false,
-  max = 99,
-  offset,
-  status,
-  text,
-  color,
   icon,
   closable = false,
   onClose,
@@ -37,201 +59,138 @@ const Badge = forwardRef<HTMLSpanElement, BadgeProps>(({
   children,
   ...props
 }, ref) => {
-  const hasChildren = children !== undefined;
-  const isStandalone = !hasChildren;
-  
-  // Calculate display count
-  const displayCount = useMemo(() => {
-    if (count === undefined || dot) return undefined;
-    if (count === 0 && !showZero) return undefined;
-    if (count > max) return `${max}+`;
-    return count.toString();
-  }, [count, dot, showZero, max]);
-
+  // Base classes for all badges
   const baseClasses = [
-    'inline-flex items-center justify-center font-medium',
+    'inline-flex items-center justify-center',
+    'font-medium whitespace-nowrap',
+    'border',
     'transition-all duration-200 ease-in-out',
-    'whitespace-nowrap',
   ];
 
-  // Variant styling using CSS custom properties
-  const variantStyles: Record<string, React.CSSProperties> = {
-    default: {},
-    primary: {
-      backgroundColor: 'var(--color-primary)',
-      color: 'white',
-      borderColor: 'var(--color-primary)',
-    },
-    secondary: {
-      backgroundColor: 'var(--color-secondary)',
-      color: 'white',
-      borderColor: 'var(--color-secondary)',
-    },
-    success: {
-      backgroundColor: 'var(--color-success)',
-      color: 'white',
-      borderColor: 'var(--color-success)',
-    },
-    warning: {
-      backgroundColor: 'var(--color-warning)',
-      color: 'white',
-      borderColor: 'var(--color-warning)',
-    },
-    error: {
-      backgroundColor: 'var(--color-error)',
-      color: 'white',
-      borderColor: 'var(--color-error)',
-    },
-    info: {
-      backgroundColor: 'var(--color-info)',
-      color: 'white',
-      borderColor: 'var(--color-info)',
-    },
-    outline: {},
-  };
-
+  // Variant-specific classes using CSS custom properties
   const variantClasses = {
     default: [
-      'bg-[var(--bg-tertiary)] text-[var(--text-primary)] border border-[var(--border-primary)]',
+      'bg-[var(--bg-tertiary)]',
+      'text-[var(--text-primary)]',
+      'border-[var(--border-primary)]',
+    ],
+    primary: [
+      'bg-[var(--color-primary)]',
+      'text-white',
+      'border-[var(--color-primary)]',
+    ],
+    secondary: [
+      'bg-[var(--color-secondary)]',
+      'text-white',
+      'border-[var(--color-secondary)]',
+    ],
+    success: [
+      'bg-[var(--color-success)]',
+      'text-white',
+      'border-[var(--color-success)]',
+    ],
+    warning: [
+      'bg-[var(--color-warning)]',
+      'text-white',
+      'border-[var(--color-warning)]',
+    ],
+    error: [
+      'bg-[var(--color-error)]',
+      'text-white',
+      'border-[var(--color-error)]',
+    ],
+    info: [
+      'bg-[var(--color-info)]',
+      'text-white',
+      'border-[var(--color-info)]',
     ],
-    primary: [],
-    secondary: [],
-    success: [],
-    warning: [],
-    error: [],
-    info: [],
     outline: [
-      'bg-transparent border border-current',
+      'bg-transparent',
+      'text-[var(--text-primary)]',
+      'border-[var(--border-secondary)]',
     ],
   };
 
+  // Size-specific classes
   const sizeClasses = {
-    xs: isStandalone ? 'px-1.5 py-0.5 text-xs min-h-4' : 'w-4 h-4 text-xs',
-    sm: isStandalone ? 'px-3 py-1.5 text-sm min-h-6 font-medium' : 'w-5 h-5 text-xs',
-    md: isStandalone ? 'px-3 py-1.5 text-sm min-h-7 font-semibold' : 'w-6 h-6 text-sm',
-    lg: isStandalone ? 'px-4 py-2 text-base min-h-8 font-semibold' : 'w-7 h-7 text-sm',
+    sm: [
+      'px-2 py-0.5',
+      'text-xs',
+      'gap-1',
+      'rounded-md',
+      'min-h-5',
+    ],
+    md: [
+      'px-3 py-1',
+      'text-sm',
+      'gap-1.5',
+      'rounded-lg',
+      'min-h-6',
+    ],
+    lg: [
+      'px-4 py-1.5',
+      'text-base',
+      'gap-2',
+      'rounded-lg',
+      'min-h-8',
+    ],
   };
 
-  const shapeClasses = {
-    rounded: 'rounded-lg',
-    pill: 'rounded-full',
-    square: 'rounded-none',
+  // Icon size based on badge size
+  const iconSizeClasses = {
+    sm: 'w-3 h-3',
+    md: 'w-4 h-4',
+    lg: 'w-5 h-5',
   };
 
-  const statusClasses = {
-    default: 'bg-text-tertiary',
-    error: 'bg-color-error',
-    success: 'bg-color-success animate-pulse',
-    warning: 'bg-color-warning',
-    processing: 'bg-color-info animate-pulse',
-  };
-
-  // Dot badge (status indicator)
-  if (dot || status) {
-    const dotClasses = clsx(
-      'w-2 h-2 rounded-full',
-      status ? statusClasses[status] : 'bg-color-primary'
-    );
-
-    if (hasChildren) {
-      return (
-        <span className="relative inline-flex" ref={ref}>
-          {children}
-          <span
-            className={clsx(
-              dotClasses,
-              'absolute -top-0.5 -right-0.5 ring-2 ring-bg-primary',
-              className
-            )}
-            style={offset ? {
-              transform: `translate(${offset[0]}px, ${offset[1]}px)`,
-            } : undefined}
-            {...props}
-          />
-        </span>
-      );
-    }
-
-    return (
-      <span
-        ref={ref}
-        className={clsx(dotClasses, className)}
-        {...props}
-      />
-    );
-  }
-
-  // Count badge
-  if (count !== undefined && hasChildren) {
-    if (displayCount === undefined) {
-      return <>{children}</>;
-    }
-
-    return (
-      <span className="relative inline-flex" ref={ref}>
-        {children}
-        <span
-          className={clsx(
-            'absolute -top-2 -right-2 flex items-center justify-center',
-            'min-w-5 h-5 px-1 text-xs font-medium',
-            'bg-color-error text-text-inverse rounded-full',
-            'ring-2 ring-bg-primary',
-            className
-          )}
-          style={offset ? {
-            transform: `translate(${offset[0]}px, ${offset[1]}px)`,
-          } : undefined}
-          {...props}
-        >
-          {displayCount}
-        </span>
-      </span>
-    );
-  }
-
-  // Standalone badge
   const classes = clsx(
     baseClasses,
     variantClasses[variant],
     sizeClasses[size],
-    shapeClasses[shape],
-    'border', // Always include border
     {
-      'gap-2': icon || closable,
-      'pr-2': closable,
+      'pr-1.5': closable && size === 'sm',
+      'pr-2': closable && size === 'md',
+      'pr-2.5': closable && size === 'lg',
     },
     className
   );
 
-  // Merge custom style with variant style
-  const customStyle = color
-    ? {
-        backgroundColor: color,
-        borderColor: color,
-        color: getContrastColor(color),
-      }
-    : variantStyles[variant] || {};
-
   return (
     <span
       ref={ref}
       className={classes}
-      style={customStyle}
+      role="status"
+      aria-label={typeof children === 'string' ? children : undefined}
       {...props}
     >
       {icon && (
-        <span className="flex-shrink-0 flex items-center">{icon}</span>
+        <span className={clsx('flex-shrink-0', iconSizeClasses[size])} aria-hidden="true">
+          {icon}
+        </span>
       )}
-      <span className="whitespace-nowrap">{text || displayCount || children}</span>
+
+      <span className="flex-1">{children}</span>
+
       {closable && onClose && (
         <button
           type="button"
-          className="flex-shrink-0 ml-1 hover:bg-black/10 rounded-full p-0.5 transition-colors duration-150"
           onClick={onClose}
-          aria-label="Cerrar"
+          className={clsx(
+            'flex-shrink-0 ml-1',
+            'rounded-full',
+            'hover:bg-black/10 dark:hover:bg-white/10',
+            'transition-colors duration-150',
+            'focus:outline-none focus:ring-2 focus:ring-offset-1',
+            'focus:ring-[var(--border-focus)]',
+            {
+              'p-0.5': size === 'sm',
+              'p-1': size === 'md' || size === 'lg',
+            }
+          )}
+          aria-label="Close"
         >
           <svg
-            className="w-3 h-3"
+            className={iconSizeClasses[size]}
             fill="none"
             strokeLinecap="round"
             strokeLinejoin="round"
@@ -247,23 +206,6 @@ const Badge = forwardRef<HTMLSpanElement, BadgeProps>(({
   );
 });
 
-// Helper function to determine contrast color
-function getContrastColor(hexColor: string): string {
-  // Remove # if present
-  const color = hexColor.replace('#', '');
-  
-  // Convert to RGB
-  const r = parseInt(color.substr(0, 2), 16);
-  const g = parseInt(color.substr(2, 2), 16);
-  const b = parseInt(color.substr(4, 2), 16);
-  
-  // Calculate relative luminance
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-  
-  // Return black for light colors, white for dark colors
-  return luminance > 0.5 ? '#000000' : '#ffffff';
-}
-
 Badge.displayName = 'Badge';
 
-export default Badge;
+export default Badge;

frontend/src/components/ui/Badge/CountBadge.tsx

@@ -0,0 +1,194 @@
+import React, { forwardRef, HTMLAttributes } from 'react';
+import { clsx } from 'clsx';
+
+export interface CountBadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+  /**
+   * The count to display
+   */
+  count: number;
+
+  /**
+   * Maximum count to display before showing "99+"
+   * @default 99
+   */
+  max?: number;
+
+  /**
+   * Whether to show zero counts
+   * @default false
+   */
+  showZero?: boolean;
+
+  /**
+   * Visual style variant
+   * @default 'error'
+   */
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+
+  /**
+   * Size variant
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg';
+
+  /**
+   * Position offset when used as overlay [x, y]
+   * @example [4, -4] moves badge 4px right and 4px up
+   */
+  offset?: [number, number];
+
+  /**
+   * Whether this badge is positioned as an overlay
+   * @default false
+   */
+  overlay?: boolean;
+}
+
+/**
+ * CountBadge - Displays numerical counts, typically for notifications
+ *
+ * Features:
+ * - Automatic max count display (99+)
+ * - Optional zero count hiding
+ * - Overlay mode for positioning over other elements
+ * - Multiple semantic variants
+ * - Responsive sizing
+ * - Accessible with proper ARIA labels
+ *
+ * @example
+ * ```tsx
+ * // Standalone count badge
+ * <CountBadge count={5} />
+ *
+ * // As overlay on an icon
+ * <div className="relative">
+ *   <Bell />
+ *   <CountBadge count={12} overlay />
+ * </div>
+ *
+ * // With custom positioning
+ * <CountBadge count={99} overlay offset={[2, -2]} />
+ * ```
+ */
+export const CountBadge = forwardRef<HTMLSpanElement, CountBadgeProps>(({
+  count,
+  max = 99,
+  showZero = false,
+  variant = 'error',
+  size = 'md',
+  offset,
+  overlay = false,
+  className,
+  style,
+  ...props
+}, ref) => {
+  // Don't render if count is 0 and showZero is false
+  if (count === 0 && !showZero) {
+    return null;
+  }
+
+  // Format the display count
+  const displayCount = count > max ? `${max}+` : count.toString();
+
+  // Base classes for all count badges
+  const baseClasses = [
+    'inline-flex items-center justify-center',
+    'font-semibold tabular-nums',
+    'whitespace-nowrap',
+    'rounded-full',
+    'transition-all duration-200 ease-in-out',
+  ];
+
+  // Overlay-specific classes
+  const overlayClasses = overlay ? [
+    'absolute',
+    'ring-2 ring-[var(--bg-primary)]',
+  ] : [];
+
+  // Variant-specific classes using CSS custom properties
+  const variantClasses = {
+    primary: [
+      'bg-[var(--color-primary)]',
+      'text-white',
+    ],
+    secondary: [
+      'bg-[var(--color-secondary)]',
+      'text-white',
+    ],
+    success: [
+      'bg-[var(--color-success)]',
+      'text-white',
+    ],
+    warning: [
+      'bg-[var(--color-warning)]',
+      'text-white',
+    ],
+    error: [
+      'bg-[var(--color-error)]',
+      'text-white',
+    ],
+    info: [
+      'bg-[var(--color-info)]',
+      'text-white',
+    ],
+  };
+
+  // Size-specific classes
+  const sizeClasses = {
+    sm: [
+      'min-w-4 h-4',
+      'text-xs',
+      'px-1',
+    ],
+    md: [
+      'min-w-5 h-5',
+      'text-xs',
+      'px-1.5',
+    ],
+    lg: [
+      'min-w-6 h-6',
+      'text-sm',
+      'px-2',
+    ],
+  };
+
+  // Overlay positioning classes
+  const overlayPositionClasses = overlay ? [
+    '-top-1',
+    '-right-1',
+  ] : [];
+
+  const classes = clsx(
+    baseClasses,
+    overlayClasses,
+    variantClasses[variant],
+    sizeClasses[size],
+    overlayPositionClasses,
+    className
+  );
+
+  // Calculate offset style if provided
+  const offsetStyle = offset && overlay ? {
+    transform: `translate(${offset[0]}px, ${offset[1]}px)`,
+  } : undefined;
+
+  return (
+    <span
+      ref={ref}
+      className={classes}
+      style={{
+        ...style,
+        ...offsetStyle,
+      }}
+      role="status"
+      aria-label={`${count} notification${count !== 1 ? 's' : ''}`}
+      {...props}
+    >
+      {displayCount}
+    </span>
+  );
+});
+
+CountBadge.displayName = 'CountBadge';
+
+export default CountBadge;

frontend/src/components/ui/Badge/SeverityBadge.tsx

@@ -0,0 +1,169 @@
+import React, { forwardRef, HTMLAttributes } from 'react';
+import { clsx } from 'clsx';
+import { AlertTriangle, AlertCircle, Info } from 'lucide-react';
+
+export type SeverityLevel = 'high' | 'medium' | 'low';
+
+export interface SeverityBadgeProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /**
+   * Severity level determining color and icon
+   * @default 'medium'
+   */
+  severity: SeverityLevel;
+
+  /**
+   * Count to display
+   */
+  count: number;
+
+  /**
+   * Label text to display
+   * @default Auto-generated from severity ('ALTO', 'MEDIO', 'BAJO')
+   */
+  label?: string;
+
+  /**
+   * Size variant
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg';
+
+  /**
+   * Whether to show the icon
+   * @default true
+   */
+  showIcon?: boolean;
+}
+
+/**
+ * SeverityBadge - Displays alert severity with icon, count, and label
+ *
+ * Matches the reference design showing badges like "9 ALTO" and "19 MEDIO"
+ *
+ * Features:
+ * - Severity-based color coding (high=red, medium=yellow, low=blue)
+ * - Icon + count + label layout
+ * - Consistent sizing and spacing
+ * - Accessible with proper ARIA labels
+ * - Theme-aware with CSS custom properties
+ *
+ * @example
+ * ```tsx
+ * <SeverityBadge severity="high" count={9} />
+ * <SeverityBadge severity="medium" count={19} />
+ * <SeverityBadge severity="low" count={3} label="BAJO" />
+ * ```
+ */
+export const SeverityBadge = forwardRef<HTMLDivElement, SeverityBadgeProps>(({
+  severity,
+  count,
+  label,
+  size = 'md',
+  showIcon = true,
+  className,
+  ...props
+}, ref) => {
+  // Default labels based on severity
+  const defaultLabels: Record<SeverityLevel, string> = {
+    high: 'ALTO',
+    medium: 'MEDIO',
+    low: 'BAJO',
+  };
+
+  const displayLabel = label || defaultLabels[severity];
+
+  // Icons for each severity level
+  const severityIcons: Record<SeverityLevel, React.ElementType> = {
+    high: AlertTriangle,
+    medium: AlertCircle,
+    low: Info,
+  };
+
+  const Icon = severityIcons[severity];
+
+  // Base classes
+  const baseClasses = [
+    'inline-flex items-center',
+    'rounded-full',
+    'font-semibold',
+    'border-2',
+    'transition-all duration-200 ease-in-out',
+  ];
+
+  // Severity-specific classes using CSS custom properties
+  const severityClasses = {
+    high: [
+      'bg-[var(--color-error-100)]',
+      'text-[var(--color-error-700)]',
+      'border-[var(--color-error-300)]',
+    ],
+    medium: [
+      'bg-[var(--color-warning-100)]',
+      'text-[var(--color-warning-700)]',
+      'border-[var(--color-warning-300)]',
+    ],
+    low: [
+      'bg-[var(--color-info-100)]',
+      'text-[var(--color-info-700)]',
+      'border-[var(--color-info-300)]',
+    ],
+  };
+
+  // Size-specific classes
+  const sizeClasses = {
+    sm: {
+      container: 'gap-1.5 px-2.5 py-1',
+      text: 'text-xs',
+      icon: 'w-3.5 h-3.5',
+    },
+    md: {
+      container: 'gap-2 px-3 py-1.5',
+      text: 'text-sm',
+      icon: 'w-4 h-4',
+    },
+    lg: {
+      container: 'gap-2.5 px-4 py-2',
+      text: 'text-base',
+      icon: 'w-5 h-5',
+    },
+  };
+
+  const classes = clsx(
+    baseClasses,
+    severityClasses[severity],
+    sizeClasses[size].container,
+    className
+  );
+
+  // Accessibility label
+  const ariaLabel = `${count} ${displayLabel.toLowerCase()} severity alert${count !== 1 ? 's' : ''}`;
+
+  return (
+    <div
+      ref={ref}
+      className={classes}
+      role="status"
+      aria-label={ariaLabel}
+      {...props}
+    >
+      {showIcon && (
+        <Icon
+          className={clsx('flex-shrink-0', sizeClasses[size].icon)}
+          aria-hidden="true"
+        />
+      )}
+
+      <span className={clsx('font-bold tabular-nums', sizeClasses[size].text)}>
+        {count}
+      </span>
+
+      <span className={clsx('uppercase tracking-wide', sizeClasses[size].text)}>
+        {displayLabel}
+      </span>
+    </div>
+  );
+});
+
+SeverityBadge.displayName = 'SeverityBadge';
+
+export default SeverityBadge;

frontend/src/components/ui/Badge/StatusDot.tsx

@@ -0,0 +1,179 @@
+import React, { forwardRef, HTMLAttributes } from 'react';
+import { clsx } from 'clsx';
+
+export interface StatusDotProps extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * Status variant determining color and animation
+   * @default 'default'
+   */
+  status?: 'default' | 'success' | 'error' | 'warning' | 'info' | 'processing';
+
+  /**
+   * Size of the status dot
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg';
+
+  /**
+   * Whether to show a pulse animation
+   * @default false (true for 'processing' and 'success' status)
+   */
+  pulse?: boolean;
+
+  /**
+   * Position offset when used as overlay [x, y]
+   * @example [4, -4] moves dot 4px right and 4px up
+   */
+  offset?: [number, number];
+
+  /**
+   * Whether this dot is positioned as an overlay
+   * @default false
+   */
+  overlay?: boolean;
+
+  /**
+   * Optional text label to display next to the dot
+   */
+  label?: string;
+}
+
+/**
+ * StatusDot - Displays status indicators as colored dots
+ *
+ * Features:
+ * - Multiple status variants (online/offline/busy/processing)
+ * - Optional pulse animation
+ * - Standalone or overlay mode
+ * - Optional text label
+ * - Responsive sizing
+ * - Accessible with proper ARIA labels
+ *
+ * @example
+ * ```tsx
+ * // Standalone status dot
+ * <StatusDot status="success" />
+ *
+ * // With label
+ * <StatusDot status="success" label="Online" />
+ *
+ * // As overlay on avatar
+ * <div className="relative">
+ *   <Avatar />
+ *   <StatusDot status="success" overlay />
+ * </div>
+ *
+ * // With pulse animation
+ * <StatusDot status="processing" pulse />
+ * ```
+ */
+export const StatusDot = forwardRef<HTMLSpanElement, StatusDotProps>(({
+  status = 'default',
+  size = 'md',
+  pulse = status === 'processing' || status === 'success',
+  offset,
+  overlay = false,
+  label,
+  className,
+  style,
+  ...props
+}, ref) => {
+  // Base container classes
+  const containerClasses = label ? [
+    'inline-flex items-center gap-2',
+  ] : [];
+
+  // Base dot classes
+  const baseDotClasses = [
+    'rounded-full',
+    'transition-all duration-200 ease-in-out',
+  ];
+
+  // Overlay-specific classes
+  const overlayClasses = overlay ? [
+    'absolute',
+    'ring-2 ring-[var(--bg-primary)]',
+    'bottom-0',
+    'right-0',
+  ] : [];
+
+  // Status-specific classes using CSS custom properties
+  const statusClasses = {
+    default: 'bg-[var(--text-tertiary)]',
+    success: 'bg-[var(--color-success)]',
+    error: 'bg-[var(--color-error)]',
+    warning: 'bg-[var(--color-warning)]',
+    info: 'bg-[var(--color-info)]',
+    processing: 'bg-[var(--color-info)]',
+  };
+
+  // Size-specific classes
+  const sizeClasses = {
+    sm: 'w-2 h-2',
+    md: 'w-2.5 h-2.5',
+    lg: 'w-3 h-3',
+  };
+
+  // Pulse animation classes
+  const pulseClasses = pulse ? 'animate-pulse' : '';
+
+  const dotClasses = clsx(
+    baseDotClasses,
+    overlayClasses,
+    statusClasses[status],
+    sizeClasses[size],
+    pulseClasses,
+  );
+
+  // Calculate offset style if provided
+  const offsetStyle = offset && overlay ? {
+    transform: `translate(${offset[0]}px, ${offset[1]}px)`,
+  } : undefined;
+
+  // Status labels for accessibility
+  const statusLabels = {
+    default: 'Default',
+    success: 'Online',
+    error: 'Offline',
+    warning: 'Away',
+    info: 'Busy',
+    processing: 'Processing',
+  };
+
+  const ariaLabel = label || statusLabels[status];
+
+  // If there's a label, render as a container with dot + text
+  if (label && !overlay) {
+    return (
+      <span
+        ref={ref}
+        className={clsx(containerClasses, className)}
+        role="status"
+        aria-label={ariaLabel}
+        {...props}
+      >
+        <span className={dotClasses} aria-hidden="true" />
+        <span className="text-sm text-[var(--text-secondary)]">{label}</span>
+      </span>
+    );
+  }
+
+  // Otherwise, render just the dot
+  return (
+    <span
+      ref={ref}
+      className={clsx(dotClasses, className)}
+      style={{
+        ...style,
+        ...offsetStyle,
+      }}
+      role="status"
+      aria-label={ariaLabel}
+      {...props}
+    />
+  );
+});
+
+StatusDot.displayName = 'StatusDot';
+
+export default StatusDot;

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

@@ -1,3 +1,24 @@
-export { default } from './Badge';
-export { default as Badge } from './Badge';
-export type { BadgeProps } from './Badge';
+/**
+ * Badge Components
+ *
+ * A collection of badge components for different use cases:
+ * - Badge: Simple label/tag badges for status, categories, or labels
+ * - CountBadge: Notification count badges with overlay support
+ * - StatusDot: Status indicator dots (online/offline/busy)
+ * - SeverityBadge: Alert severity badges with icon + count + label
+ */
+
+export { Badge } from './Badge';
+export type { BadgeProps } from './Badge';
+
+export { CountBadge } from './CountBadge';
+export type { CountBadgeProps } from './CountBadge';
+
+export { StatusDot } from './StatusDot';
+export type { StatusDotProps } from './StatusDot';
+
+export { SeverityBadge } from './SeverityBadge';
+export type { SeverityBadgeProps, SeverityLevel } from './SeverityBadge';
+
+// Default export for convenience
+export { Badge as default } from './Badge';

frontend/src/components/ui/StatusCard/StatusCard.tsx

@@ -120,7 +120,7 @@ export const StatusCard: React.FC<StatusCardProps> = ({
   return (
     <Card
       className={`
-        p-4 sm:p-6 transition-all duration-200 border-l-4 hover:shadow-lg
+        p-5 sm:p-6 transition-all duration-200 border-l-4 hover:shadow-lg
         ${hasInteraction ? 'hover:shadow-xl cursor-pointer hover:scale-[1.01]' : ''}
         ${statusIndicator.isCritical
           ? 'ring-2 ring-red-200 shadow-md border-l-6 sm:border-l-8'
@@ -140,39 +140,47 @@ export const StatusCard: React.FC<StatusCardProps> = ({
       }}
       onClick={onClick}
     >
-      <div className="space-y-4 sm:space-y-5">
+      <div className="space-y-4">
         {/* Header with status indicator */}
-        <div className="flex items-start justify-between">
-          <div className="flex items-start gap-4 flex-1">
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex items-start gap-3 flex-1 min-w-0">
             <div
-              className={`flex-shrink-0 p-2 sm:p-3 rounded-xl shadow-sm ${
+              className={`flex-shrink-0 p-2.5 sm:p-3 rounded-lg shadow-sm ${
                 statusIndicator.isCritical ? 'ring-2 ring-white' : ''
               }`}
               style={{ backgroundColor: `${statusIndicator.color}20` }}
             >
               {StatusIcon && (
                 <StatusIcon
-                  className="w-4 h-4 sm:w-5 sm:h-5"
+                  className="w-5 h-5 sm:w-6 sm:h-6"
                   style={{ color: statusIndicator.color }}
                 />
               )}
             </div>
             <div className="flex-1 min-w-0">
               <div
-                className={`font-semibold text-[var(--text-primary)] text-base sm:text-lg leading-tight mb-1 ${overflowClasses.truncate}`}
+                className={`font-semibold text-[var(--text-primary)] text-base sm:text-lg leading-tight mb-2 ${overflowClasses.truncate}`}
                 title={title}
               >
                 {truncationEngine.title(title)}
               </div>
-              <div className="flex items-center gap-2 mb-1">
+              {subtitle && (
                 <div
-                  className={`inline-flex items-center px-2 sm:px-3 py-1 sm:py-1.5 rounded-full text-xs font-semibold transition-all ${
+                  className={`text-sm text-[var(--text-secondary)] mb-2 ${overflowClasses.truncate}`}
+                  title={subtitle}
+                >
+                  {truncationEngine.subtitle(subtitle)}
+                </div>
+              )}
+              <div className="flex items-center gap-2">
+                <div
+                  className={`inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium transition-all ${
                     statusIndicator.isCritical
                       ? 'bg-red-100 text-red-800 ring-2 ring-red-300 shadow-sm animate-pulse'
                       : statusIndicator.isHighlight
                       ? 'bg-yellow-100 text-yellow-800 ring-1 ring-yellow-300 shadow-sm'
                       : 'ring-1 shadow-sm'
-                  } max-w-[120px] sm:max-w-[150px]`}
+                  } max-w-[140px] sm:max-w-[160px]`}
                   style={{
                     backgroundColor: statusIndicator.isCritical || statusIndicator.isHighlight
                       ? undefined
@@ -184,39 +192,31 @@ export const StatusCard: React.FC<StatusCardProps> = ({
                   }}
                 >
                   {statusIndicator.isCritical && (
-                    <span className="mr-1 text-sm flex-shrink-0">🚨</span>
+                    <span className="mr-1.5 text-sm flex-shrink-0">🚨</span>
                   )}
                   {statusIndicator.isHighlight && (
-                    <span className="mr-1 flex-shrink-0">⚠️</span>
+                    <span className="mr-1.5 flex-shrink-0">⚠️</span>
                   )}
                   <span
                     className={`${overflowClasses.truncate} flex-1`}
                     title={statusIndicator.text}
                   >
-                    {safeText(statusIndicator.text, statusIndicator.text, isMobile ? 12 : 15)}
+                    {safeText(statusIndicator.text, statusIndicator.text, isMobile ? 14 : 18)}
                   </span>
                 </div>
               </div>
-              {subtitle && (
-                <div
-                  className={`text-sm text-[var(--text-secondary)] ${overflowClasses.truncate}`}
-                  title={subtitle}
-                >
-                  {truncationEngine.subtitle(subtitle)}
-                </div>
-              )}
             </div>
           </div>
-          <div className="text-right flex-shrink-0 ml-4 min-w-0 max-w-[120px] sm:max-w-[150px]">
+          <div className="text-right flex-shrink-0 min-w-0 max-w-[130px] sm:max-w-[160px]">
             <div
-              className={`text-2xl sm:text-3xl font-bold text-[var(--text-primary)] leading-none ${overflowClasses.truncate}`}
+              className={`text-2xl sm:text-3xl font-bold text-[var(--text-primary)] leading-none mb-1 ${overflowClasses.truncate}`}
               title={primaryValue?.toString()}
             >
-              {safeText(primaryValue?.toString(), '0', isMobile ? 10 : 15)}
+              {safeText(primaryValue?.toString(), '0', isMobile ? 12 : 18)}
             </div>
             {primaryValueLabel && (
               <div
-                className={`text-xs text-[var(--text-tertiary)] uppercase tracking-wide mt-1 ${overflowClasses.truncate}`}
+                className={`text-xs text-[var(--text-tertiary)] uppercase tracking-wide ${overflowClasses.truncate}`}
                 title={primaryValueLabel}
               >
                 {truncationEngine.primaryValueLabel(primaryValueLabel)}
@@ -284,9 +284,9 @@ export const StatusCard: React.FC<StatusCardProps> = ({
 
         {/* Simplified Action System - Mobile optimized */}
         {actions.length > 0 && (
-          <div className="pt-3 sm:pt-4 border-t border-[var(--border-primary)]">
+          <div className="pt-4 border-t border-[var(--border-primary)]">
             {/* All actions in a clean horizontal layout */}
-            <div className="flex items-center justify-between gap-2 flex-wrap">
+            <div className="flex items-center justify-between gap-3 flex-wrap">
 
               {/* Primary action as a subtle text button */}
               {primaryActions.length > 0 && (
@@ -299,8 +299,8 @@ export const StatusCard: React.FC<StatusCardProps> = ({
                   }}
                   disabled={primaryActions[0].disabled}
                   className={`
-                    flex items-center gap-1 sm:gap-2 px-2 sm:px-3 py-1.5 sm:py-2 text-xs sm:text-sm font-medium rounded-lg
-                    transition-all duration-200 hover:scale-105 active:scale-95 flex-shrink-0 max-w-[120px] sm:max-w-[150px]
+                    flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg
+                    transition-all duration-200 hover:scale-105 active:scale-95 flex-shrink-0 max-w-[140px] sm:max-w-[160px]
                     ${primaryActions[0].disabled
                       ? 'opacity-50 cursor-not-allowed'
                       : primaryActions[0].destructive
@@ -310,7 +310,7 @@ export const StatusCard: React.FC<StatusCardProps> = ({
                   `}
                   title={primaryActions[0].label}
                 >
-                  {primaryActions[0].icon && React.createElement(primaryActions[0].icon, { className: "w-3 h-3 sm:w-4 sm:h-4 flex-shrink-0" })}
+                  {primaryActions[0].icon && React.createElement(primaryActions[0].icon, { className: "w-4 h-4 flex-shrink-0" })}
                   <span className={`${overflowClasses.truncate} flex-1`}>
                     {truncationEngine.actionLabel(primaryActions[0].label)}
                   </span>
@@ -318,7 +318,7 @@ export const StatusCard: React.FC<StatusCardProps> = ({
               )}
 
               {/* Action icons for secondary actions */}
-              <div className="flex items-center gap-1">
+              <div className="flex items-center gap-2">
                 {secondaryActions.map((action, index) => (
                   <button
                     key={`action-${index}`}
@@ -331,16 +331,16 @@ export const StatusCard: React.FC<StatusCardProps> = ({
                     disabled={action.disabled}
                     title={action.label}
                     className={`
-                      p-1.5 sm:p-2 rounded-lg transition-all duration-200 hover:scale-110 active:scale-95
+                      p-2 rounded-lg transition-all duration-200 hover:scale-110 active:scale-95 hover:shadow-sm
                       ${action.disabled
                         ? 'opacity-50 cursor-not-allowed'
                         : action.destructive
                           ? 'text-red-500 hover:bg-red-50 hover:text-red-600'
-                          : 'text-[var(--text-tertiary)] hover:text-[var(--text-primary)] hover:bg-[var(--surface-secondary)]'
+                          : 'text-[var(--text-tertiary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]'
                       }
                     `}
                   >
-                    {action.icon && React.createElement(action.icon, { className: "w-3 h-3 sm:w-4 sm:h-4" })}
+                    {action.icon && React.createElement(action.icon, { className: "w-4 h-4" })}
                   </button>
                 ))}
 
@@ -357,7 +357,7 @@ export const StatusCard: React.FC<StatusCardProps> = ({
                     disabled={action.disabled}
                     title={action.label}
                     className={`
-                      p-1.5 sm:p-2 rounded-lg transition-all duration-200 hover:scale-110 active:scale-95
+                      p-2 rounded-lg transition-all duration-200 hover:scale-110 active:scale-95 hover:shadow-sm
                       ${action.disabled
                         ? 'opacity-50 cursor-not-allowed'
                         : action.destructive
@@ -366,7 +366,7 @@ export const StatusCard: React.FC<StatusCardProps> = ({
                       }
                     `}
                   >
-                    {action.icon && React.createElement(action.icon, { className: "w-3 h-3 sm:w-4 sm:h-4" })}
+                    {action.icon && React.createElement(action.icon, { className: "w-4 h-4" })}
                   </button>
                 ))}
               </div>

frontend/src/components/ui/index.ts

@@ -5,7 +5,7 @@ export { default as Textarea } from './Textarea/Textarea';
 export { default as Card, CardHeader, CardBody, CardFooter } from './Card';
 export { default as Modal, ModalHeader, ModalBody, ModalFooter } from './Modal';
 export { default as Table } from './Table';
-export { default as Badge } from './Badge';
+export { Badge, CountBadge, StatusDot, SeverityBadge } from './Badge';
 export { default as Avatar } from './Avatar';
 export { default as Tooltip } from './Tooltip';
 export { default as Select } from './Select';
@@ -35,7 +35,7 @@ export type { TextareaProps } from './Textarea';
 export type { CardProps, CardHeaderProps, CardBodyProps, CardFooterProps } from './Card';
 export type { ModalProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps } from './Modal';
 export type { TableProps, TableColumn, TableRow } from './Table';
-export type { BadgeProps } from './Badge';
+export type { BadgeProps, CountBadgeProps, StatusDotProps, SeverityBadgeProps, SeverityLevel } from './Badge';
 export type { AvatarProps } from './Avatar';
 export type { TooltipProps } from './Tooltip';
 export type { SelectProps, SelectOption } from './Select';

frontend/src/locales/en/ajustes.json

@@ -0,0 +1,131 @@
+{
+  "title": "Settings",
+  "description": "Configure your bakery's operational parameters",
+  "save_all": "Save Changes",
+  "reset_all": "Reset All",
+  "unsaved_changes": "You have unsaved changes",
+  "discard": "Discard",
+  "save": "Save",
+  "loading": "Loading settings...",
+  "saving": "Saving...",
+  "procurement": {
+    "title": "Procurement and Sourcing",
+    "auto_approval": "Purchase Order Auto-Approval",
+    "auto_approve_enabled": "Enable purchase order auto-approval",
+    "auto_approve_threshold": "Auto-Approval Threshold (EUR)",
+    "min_supplier_score": "Minimum Supplier Score",
+    "require_approval_new_suppliers": "Require approval for new suppliers",
+    "require_approval_critical_items": "Require approval for critical items",
+    "planning": "Planning and Forecasting",
+    "lead_time_days": "Lead Time (days)",
+    "demand_forecast_days": "Demand Forecast Days",
+    "safety_stock_percentage": "Safety Stock (%)",
+    "workflow": "Approval Workflow",
+    "approval_reminder_hours": "Approval Reminder (hours)",
+    "critical_escalation_hours": "Critical Escalation (hours)"
+  },
+  "inventory": {
+    "title": "Inventory Management",
+    "stock_control": "Stock Control",
+    "low_stock_threshold": "Low Stock Threshold",
+    "reorder_point": "Reorder Point",
+    "reorder_quantity": "Reorder Quantity",
+    "expiration": "Expiration Management",
+    "expiring_soon_days": "Days for 'Expiring Soon'",
+    "expiration_warning_days": "Expiration Warning Days",
+    "quality_score_threshold": "Quality Threshold (0-10)",
+    "temperature": "Temperature Monitoring",
+    "temperature_monitoring_enabled": "Enable temperature monitoring",
+    "refrigeration": "Refrigeration (°C)",
+    "refrigeration_temp_min": "Minimum Temperature",
+    "refrigeration_temp_max": "Maximum Temperature",
+    "freezer": "Freezer (°C)",
+    "freezer_temp_min": "Minimum Temperature",
+    "freezer_temp_max": "Maximum Temperature",
+    "room_temp": "Room Temperature (°C)",
+    "room_temp_min": "Minimum Temperature",
+    "room_temp_max": "Maximum Temperature",
+    "temp_alerts": "Deviation Alerts",
+    "temp_deviation_alert_minutes": "Normal Deviation (minutes)",
+    "critical_temp_deviation_minutes": "Critical Deviation (minutes)"
+  },
+  "production": {
+    "title": "Production",
+    "planning": "Planning and Batches",
+    "planning_horizon_days": "Planning Horizon (days)",
+    "minimum_batch_size": "Minimum Batch Size",
+    "maximum_batch_size": "Maximum Batch Size",
+    "production_buffer_percentage": "Production Buffer (%)",
+    "schedule_optimization_enabled": "Enable schedule optimization",
+    "capacity": "Capacity and Working Hours",
+    "working_hours_per_day": "Working Hours per Day",
+    "max_overtime_hours": "Maximum Overtime Hours",
+    "capacity_utilization_target": "Capacity Utilization Target",
+    "capacity_warning_threshold": "Capacity Warning Threshold",
+    "quality": "Quality Control",
+    "quality_check_enabled": "Enable quality checks",
+    "minimum_yield_percentage": "Minimum Yield (%)",
+    "quality_score_threshold": "Quality Score Threshold (0-10)",
+    "time_buffers": "Time Buffers",
+    "prep_time_buffer_minutes": "Prep Time Buffer (minutes)",
+    "cleanup_time_buffer_minutes": "Cleanup Time Buffer (minutes)",
+    "costs": "Costs",
+    "labor_cost_per_hour": "Labor Cost per Hour (EUR)",
+    "overhead_cost_percentage": "Overhead Cost Percentage (%)"
+  },
+  "supplier": {
+    "title": "Supplier Management",
+    "default_terms": "Default Terms",
+    "default_payment_terms_days": "Default Payment Terms (days)",
+    "default_delivery_days": "Default Delivery Days",
+    "delivery_performance": "Performance Thresholds - Delivery",
+    "excellent_delivery_rate": "Excellent Delivery Rate (%)",
+    "good_delivery_rate": "Good Delivery Rate (%)",
+    "quality_performance": "Performance Thresholds - Quality",
+    "excellent_quality_rate": "Excellent Quality Rate (%)",
+    "good_quality_rate": "Good Quality Rate (%)",
+    "critical_alerts": "Critical Alerts",
+    "critical_delivery_delay_hours": "Critical Delivery Delay (hours)",
+    "critical_quality_rejection_rate": "Critical Quality Rejection Rate (%)",
+    "high_cost_variance_percentage": "High Cost Variance (%)",
+    "info": "These thresholds are used to automatically evaluate supplier performance. Suppliers performing below 'good' thresholds will receive automatic alerts."
+  },
+  "pos": {
+    "title": "Point of Sale (POS)",
+    "sync": "Synchronization",
+    "sync_interval_minutes": "Sync Interval (minutes)",
+    "sync_interval_help": "Frequency at which POS syncs with central system",
+    "auto_sync_products": "Automatic product synchronization",
+    "auto_sync_transactions": "Automatic transaction synchronization",
+    "info": "These settings control how information syncs between the central system and point of sale terminals.",
+    "info_details": [
+      "A shorter interval keeps data more current but uses more resources",
+      "Automatic synchronization ensures changes reflect immediately",
+      "Disabling automatic sync requires manual synchronization"
+    ]
+  },
+  "order": {
+    "title": "Orders and Business Rules",
+    "pricing": "Discounts and Pricing",
+    "max_discount_percentage": "Maximum Discount (%)",
+    "max_discount_help": "Maximum discount percentage allowed on orders",
+    "discount_enabled": "Enable order discounts",
+    "dynamic_pricing_enabled": "Enable dynamic pricing",
+    "delivery": "Delivery Configuration",
+    "default_delivery_window_hours": "Default Delivery Window (hours)",
+    "default_delivery_window_help": "Default time for order delivery",
+    "delivery_tracking_enabled": "Enable delivery tracking",
+    "info": "These settings control the business rules applied to orders.",
+    "info_details": {
+      "dynamic_pricing": "Automatically adjusts prices based on demand, inventory, and other factors",
+      "discounts": "Allows applying discounts to products and orders within the set limit",
+      "delivery_tracking": "Enables customers to track their orders in real-time"
+    }
+  },
+  "messages": {
+    "save_success": "Settings saved successfully",
+    "save_error": "Error saving settings",
+    "load_error": "Error loading settings",
+    "validation_error": "Validation error"
+  }
+}

frontend/src/locales/en/landing.json

@@ -260,6 +260,50 @@
     "subtitle": "No hidden costs, no long commitments. Start free and scale as you grow.",
     "compare_link": "View complete feature comparison"
   },
+  "sustainability": {
+    "badge": "UN SDG 12.3 & EU Green Deal Aligned",
+    "title_main": "Not Just Reduce Waste",
+    "title_accent": "Prove It to the World",
+    "subtitle": "The only AI platform with built-in UN SDG 12.3 compliance tracking. Reduce waste, save money, and qualify for EU sustainability grants—all with verifiable environmental impact metrics.",
+    "metrics": {
+      "co2_avoided": "CO₂ Avoided Monthly",
+      "co2_equivalent": "Equivalent to 43 trees planted",
+      "water_saved": "Water Saved Monthly",
+      "water_equivalent": "Equivalent to 4,500 showers",
+      "grants_eligible": "Grant Programs Eligible",
+      "grants_value": "Up to €50,000 in funding"
+    },
+    "sdg": {
+      "title": "UN SDG 12.3 Compliance",
+      "subtitle": "Halve food waste by 2030",
+      "description": "Real-time tracking toward the UN Sustainable Development Goal 12.3 target. Our AI helps you achieve 50% waste reduction with verifiable, auditable data for grant applications and certifications.",
+      "progress_label": "Progress to Target",
+      "baseline": "Baseline",
+      "current": "Current",
+      "target": "Target 2030",
+      "features": {
+        "tracking": "Automated waste baseline and progress tracking",
+        "export": "One-click grant application report export",
+        "certification": "Certification-ready environmental impact data"
+      }
+    },
+    "grants": {
+      "eu_horizon": "EU Horizon Europe",
+      "eu_horizon_req": "Requires 30% reduction",
+      "farm_to_fork": "Farm to Fork",
+      "farm_to_fork_req": "Requires 20% reduction",
+      "circular_economy": "Circular Economy",
+      "circular_economy_req": "Requires 15% reduction",
+      "un_sdg": "UN SDG Certified",
+      "un_sdg_req": "Requires 50% reduction",
+      "eligible": "Eligible",
+      "on_track": "On Track"
+    },
+    "differentiator": {
+      "title": "The Only AI Platform",
+      "description": "With built-in UN SDG 12.3 tracking, real-time environmental impact calculations, and one-click grant application exports. Not just reduce waste—prove it."
+    }
+  },
   "final_cta": {
     "scarcity_badge": "12 spots remaining of the 20 pilot program",
     "title": "Be Among the First 20 Bakeries",

frontend/src/locales/en/sustainability.json

@@ -0,0 +1,93 @@
+{
+  "widget": {
+    "title": "Sustainability Impact",
+    "subtitle": "Environmental & SDG 12.3 Compliance",
+    "footer": "Aligned with UN SDG 12.3 & EU Green Deal"
+  },
+  "sdg": {
+    "progress_label": "SDG 12.3 Target Progress",
+    "target_note": "Target: 50% food waste reduction by 2030",
+    "status": {
+      "compliant": "SDG 12.3 Compliant",
+      "on_track": "On Track to Compliance",
+      "progressing": "Making Progress",
+      "baseline": "Establishing Baseline"
+    }
+  },
+  "metrics": {
+    "waste_reduction": "Waste Reduction",
+    "co2_avoided": "CO₂ Avoided",
+    "water_saved": "Water Saved",
+    "grants_eligible": "Grants Eligible",
+    "trees": "trees",
+    "programs": "programs"
+  },
+  "financial": {
+    "potential_savings": "Potential Monthly Savings"
+  },
+  "actions": {
+    "view_details": "View Details",
+    "export_report": "Export Report"
+  },
+  "errors": {
+    "load_failed": "Unable to load sustainability metrics"
+  },
+  "dashboard": {
+    "title": "Sustainability Dashboard",
+    "description": "Environmental Impact & Grant Readiness"
+  },
+  "environmental": {
+    "co2_emissions": "CO₂ Emissions",
+    "water_footprint": "Water Footprint",
+    "land_use": "Land Use",
+    "equivalents": {
+      "car_km": "Car kilometers equivalent",
+      "showers": "Showers equivalent",
+      "phones": "Smartphone charges",
+      "trees_planted": "Trees to plant"
+    }
+  },
+  "grants": {
+    "title": "Grant Program Eligibility",
+    "overall_readiness": "Overall Readiness",
+    "programs": {
+      "eu_horizon_europe": "EU Horizon Europe",
+      "eu_farm_to_fork": "EU Farm to Fork",
+      "national_circular_economy": "Circular Economy Grants",
+      "un_sdg_certified": "UN SDG Certification"
+    },
+    "confidence": {
+      "high": "High Confidence",
+      "medium": "Medium Confidence",
+      "low": "Low Confidence"
+    },
+    "status": {
+      "eligible": "Eligible",
+      "not_eligible": "Not Eligible",
+      "requirements_met": "Requirements Met"
+    }
+  },
+  "waste": {
+    "total_waste": "Total Food Waste",
+    "production_waste": "Production Waste",
+    "inventory_waste": "Inventory Waste",
+    "by_reason": {
+      "production_defects": "Production Defects",
+      "expired_inventory": "Expired Inventory",
+      "damaged_inventory": "Damaged Inventory",
+      "overproduction": "Overproduction"
+    }
+  },
+  "report": {
+    "title": "Sustainability Report",
+    "export_success": "Report exported successfully",
+    "export_error": "Failed to export report",
+    "types": {
+      "general": "General Sustainability Report",
+      "eu_horizon": "EU Horizon Europe Format",
+      "farm_to_fork": "Farm to Fork Report",
+      "circular_economy": "Circular Economy Report",
+      "un_sdg": "UN SDG Certification Report"
+    }
+  }
+}

frontend/src/locales/es/ajustes.json

@@ -0,0 +1,131 @@
+{
+  "title": "Ajustes",
+  "description": "Configura los parámetros operativos de tu panadería",
+  "save_all": "Guardar Cambios",
+  "reset_all": "Restablecer Todo",
+  "unsaved_changes": "Tienes cambios sin guardar",
+  "discard": "Descartar",
+  "save": "Guardar",
+  "loading": "Cargando ajustes...",
+  "saving": "Guardando...",
+  "procurement": {
+    "title": "Compras y Aprovisionamiento",
+    "auto_approval": "Auto-Aprobación de Órdenes de Compra",
+    "auto_approve_enabled": "Habilitar auto-aprobación de órdenes de compra",
+    "auto_approve_threshold": "Umbral de Auto-Aprobación (EUR)",
+    "min_supplier_score": "Puntuación Mínima de Proveedor",
+    "require_approval_new_suppliers": "Requiere aprobación para nuevos proveedores",
+    "require_approval_critical_items": "Requiere aprobación para artículos críticos",
+    "planning": "Planificación y Previsión",
+    "lead_time_days": "Tiempo de Entrega (días)",
+    "demand_forecast_days": "Días de Previsión de Demanda",
+    "safety_stock_percentage": "Stock de Seguridad (%)",
+    "workflow": "Flujo de Aprobación",
+    "approval_reminder_hours": "Recordatorio de Aprobación (horas)",
+    "critical_escalation_hours": "Escalación Crítica (horas)"
+  },
+  "inventory": {
+    "title": "Gestión de Inventario",
+    "stock_control": "Control de Stock",
+    "low_stock_threshold": "Umbral de Stock Bajo",
+    "reorder_point": "Punto de Reorden",
+    "reorder_quantity": "Cantidad de Reorden",
+    "expiration": "Gestión de Caducidad",
+    "expiring_soon_days": "Días para 'Próximo a Caducar'",
+    "expiration_warning_days": "Días para Alerta de Caducidad",
+    "quality_score_threshold": "Umbral de Calidad (0-10)",
+    "temperature": "Monitorización de Temperatura",
+    "temperature_monitoring_enabled": "Habilitar monitorización de temperatura",
+    "refrigeration": "Refrigeración (°C)",
+    "refrigeration_temp_min": "Temperatura Mínima",
+    "refrigeration_temp_max": "Temperatura Máxima",
+    "freezer": "Congelador (°C)",
+    "freezer_temp_min": "Temperatura Mínima",
+    "freezer_temp_max": "Temperatura Máxima",
+    "room_temp": "Temperatura Ambiente (°C)",
+    "room_temp_min": "Temperatura Mínima",
+    "room_temp_max": "Temperatura Máxima",
+    "temp_alerts": "Alertas de Desviación",
+    "temp_deviation_alert_minutes": "Desviación Normal (minutos)",
+    "critical_temp_deviation_minutes": "Desviación Crítica (minutos)"
+  },
+  "production": {
+    "title": "Producción",
+    "planning": "Planificación y Lotes",
+    "planning_horizon_days": "Horizonte de Planificación (días)",
+    "minimum_batch_size": "Tamaño Mínimo de Lote",
+    "maximum_batch_size": "Tamaño Máximo de Lote",
+    "production_buffer_percentage": "Buffer de Producción (%)",
+    "schedule_optimization_enabled": "Habilitar optimización de horarios",
+    "capacity": "Capacidad y Jornada Laboral",
+    "working_hours_per_day": "Horas de Trabajo por Día",
+    "max_overtime_hours": "Máximo Horas Extra",
+    "capacity_utilization_target": "Objetivo Utilización Capacidad",
+    "capacity_warning_threshold": "Umbral de Alerta de Capacidad",
+    "quality": "Control de Calidad",
+    "quality_check_enabled": "Habilitar verificación de calidad",
+    "minimum_yield_percentage": "Rendimiento Mínimo (%)",
+    "quality_score_threshold": "Umbral de Puntuación de Calidad (0-10)",
+    "time_buffers": "Tiempos de Preparación",
+    "prep_time_buffer_minutes": "Tiempo de Preparación (minutos)",
+    "cleanup_time_buffer_minutes": "Tiempo de Limpieza (minutos)",
+    "costs": "Costes",
+    "labor_cost_per_hour": "Coste Laboral por Hora (EUR)",
+    "overhead_cost_percentage": "Porcentaje de Gastos Generales (%)"
+  },
+  "supplier": {
+    "title": "Gestión de Proveedores",
+    "default_terms": "Términos Predeterminados",
+    "default_payment_terms_days": "Plazo de Pago Predeterminado (días)",
+    "default_delivery_days": "Días de Entrega Predeterminados",
+    "delivery_performance": "Umbrales de Rendimiento - Entregas",
+    "excellent_delivery_rate": "Tasa de Entrega Excelente (%)",
+    "good_delivery_rate": "Tasa de Entrega Buena (%)",
+    "quality_performance": "Umbrales de Rendimiento - Calidad",
+    "excellent_quality_rate": "Tasa de Calidad Excelente (%)",
+    "good_quality_rate": "Tasa de Calidad Buena (%)",
+    "critical_alerts": "Alertas Críticas",
+    "critical_delivery_delay_hours": "Retraso de Entrega Crítico (horas)",
+    "critical_quality_rejection_rate": "Tasa de Rechazo de Calidad Crítica (%)",
+    "high_cost_variance_percentage": "Varianza de Coste Alta (%)",
+    "info": "Estos umbrales se utilizan para evaluar automáticamente el rendimiento de los proveedores. Los proveedores con rendimiento por debajo de los umbrales 'buenos' recibirán alertas automáticas."
+  },
+  "pos": {
+    "title": "Punto de Venta (POS)",
+    "sync": "Sincronización",
+    "sync_interval_minutes": "Intervalo de Sincronización (minutos)",
+    "sync_interval_help": "Frecuencia con la que se sincroniza el POS con el sistema central",
+    "auto_sync_products": "Sincronización automática de productos",
+    "auto_sync_transactions": "Sincronización automática de transacciones",
+    "info": "Estos ajustes controlan cómo se sincroniza la información entre el sistema central y los terminales de punto de venta.",
+    "info_details": [
+      "Un intervalo más corto mantiene los datos más actualizados pero consume más recursos",
+      "La sincronización automática garantiza que los cambios se reflejen inmediatamente",
+      "Desactivar la sincronización automática requiere sincronización manual"
+    ]
+  },
+  "order": {
+    "title": "Pedidos y Reglas de Negocio",
+    "pricing": "Descuentos y Precios",
+    "max_discount_percentage": "Descuento Máximo (%)",
+    "max_discount_help": "Porcentaje máximo de descuento permitido en pedidos",
+    "discount_enabled": "Habilitar descuentos en pedidos",
+    "dynamic_pricing_enabled": "Habilitar precios dinámicos",
+    "delivery": "Configuración de Entrega",
+    "default_delivery_window_hours": "Ventana de Entrega Predeterminada (horas)",
+    "default_delivery_window_help": "Tiempo predeterminado para la entrega de pedidos",
+    "delivery_tracking_enabled": "Habilitar seguimiento de entregas",
+    "info": "Estos ajustes controlan las reglas de negocio que se aplican a los pedidos.",
+    "info_details": {
+      "dynamic_pricing": "Ajusta automáticamente los precios según demanda, inventario y otros factores",
+      "discounts": "Permite aplicar descuentos a productos y pedidos dentro del límite establecido",
+      "delivery_tracking": "Permite a los clientes rastrear sus pedidos en tiempo real"
+    }
+  },
+  "messages": {
+    "save_success": "Ajustes guardados correctamente",
+    "save_error": "Error al guardar ajustes",
+    "load_error": "Error al cargar los ajustes",
+    "validation_error": "Error de validación"
+  }
+}

frontend/src/locales/es/landing.json

@@ -260,6 +260,50 @@
     "subtitle": "Sin costos ocultos, sin compromisos largos. Comienza gratis y escala según crezcas.",
     "compare_link": "Ver comparación completa de características"
   },
+  "sustainability": {
+    "badge": "Alineado con ODS 12.3 de la ONU y Pacto Verde Europeo",
+    "title_main": "No Solo Reduce Desperdicios",
+    "title_accent": "Demuéstralo al Mundo",
+    "subtitle": "La única plataforma de IA con seguimiento integrado del cumplimiento del ODS 12.3 de la ONU. Reduce desperdicios, ahorra dinero y califica para ayudas europeas de sostenibilidad—todo con métricas verificables de impacto ambiental.",
+    "metrics": {
+      "co2_avoided": "CO₂ Evitado Mensualmente",
+      "co2_equivalent": "Equivalente a plantar 43 árboles",
+      "water_saved": "Agua Ahorrada Mensualmente",
+      "water_equivalent": "Equivalente a 4,500 duchas",
+      "grants_eligible": "Programas de Ayudas Elegibles",
+      "grants_value": "Hasta €50,000 en financiación"
+    },
+    "sdg": {
+      "title": "Cumplimiento ODS 12.3 de la ONU",
+      "subtitle": "Reducir a la mitad el desperdicio alimentario para 2030",
+      "description": "Seguimiento en tiempo real hacia el objetivo de Desarrollo Sostenible 12.3 de la ONU. Nuestra IA te ayuda a lograr una reducción del 50% en desperdicios con datos verificables y auditables para solicitudes de ayudas y certificaciones.",
+      "progress_label": "Progreso hacia el Objetivo",
+      "baseline": "Línea Base",
+      "current": "Actual",
+      "target": "Objetivo 2030",
+      "features": {
+        "tracking": "Seguimiento automático de línea base y progreso de desperdicios",
+        "export": "Exportación de informes para solicitudes de ayudas con un clic",
+        "certification": "Datos de impacto ambiental listos para certificación"
+      }
+    },
+    "grants": {
+      "eu_horizon": "Horizonte Europa UE",
+      "eu_horizon_req": "Requiere reducción del 30%",
+      "farm_to_fork": "De la Granja a la Mesa",
+      "farm_to_fork_req": "Requiere reducción del 20%",
+      "circular_economy": "Economía Circular",
+      "circular_economy_req": "Requiere reducción del 15%",
+      "un_sdg": "Certificado ODS ONU",
+      "un_sdg_req": "Requiere reducción del 50%",
+      "eligible": "Elegible",
+      "on_track": "En Camino"
+    },
+    "differentiator": {
+      "title": "La Única Plataforma de IA",
+      "description": "Con seguimiento integrado del ODS 12.3 de la ONU, cálculos de impacto ambiental en tiempo real y exportación de solicitudes de ayudas con un clic. No solo reduce desperdicios—demuéstralo."
+    }
+  },
   "final_cta": {
     "scarcity_badge": "Quedan 12 plazas de las 20 del programa piloto",
     "title": "Sé de las Primeras 20 Panaderías",

frontend/src/locales/es/sustainability.json

@@ -0,0 +1,93 @@
+{
+  "widget": {
+    "title": "Impacto en Sostenibilidad",
+    "subtitle": "Ambiental y Cumplimiento ODS 12.3",
+    "footer": "Alineado con ODS 12.3 de la ONU y Pacto Verde Europeo"
+  },
+  "sdg": {
+    "progress_label": "Progreso Objetivo ODS 12.3",
+    "target_note": "Objetivo: 50% de reducción de desperdicio alimentario para 2030",
+    "status": {
+      "compliant": "Cumple ODS 12.3",
+      "on_track": "En Camino al Cumplimiento",
+      "progressing": "Avanzando",
+      "baseline": "Estableciendo Línea Base"
+    }
+  },
+  "metrics": {
+    "waste_reduction": "Reducción de Desperdicio",
+    "co2_avoided": "CO₂ Evitado",
+    "water_saved": "Agua Ahorrada",
+    "grants_eligible": "Subvenciones Elegibles",
+    "trees": "árboles",
+    "programs": "programas"
+  },
+  "financial": {
+    "potential_savings": "Ahorro Potencial Mensual"
+  },
+  "actions": {
+    "view_details": "Ver Detalles",
+    "export_report": "Exportar Informe"
+  },
+  "errors": {
+    "load_failed": "No se pudieron cargar las métricas de sostenibilidad"
+  },
+  "dashboard": {
+    "title": "Panel de Sostenibilidad",
+    "description": "Impacto Ambiental y Preparación para Subvenciones"
+  },
+  "environmental": {
+    "co2_emissions": "Emisiones de CO₂",
+    "water_footprint": "Huella Hídrica",
+    "land_use": "Uso de Suelo",
+    "equivalents": {
+      "car_km": "Kilómetros en coche equivalentes",
+      "showers": "Duchas equivalentes",
+      "phones": "Cargas de smartphone",
+      "trees_planted": "Árboles a plantar"
+    }
+  },
+  "grants": {
+    "title": "Elegibilidad para Subvenciones",
+    "overall_readiness": "Preparación General",
+    "programs": {
+      "eu_horizon_europe": "Horizonte Europa UE",
+      "eu_farm_to_fork": "De la Granja a la Mesa UE",
+      "national_circular_economy": "Subvenciones Economía Circular",
+      "un_sdg_certified": "Certificación ODS ONU"
+    },
+    "confidence": {
+      "high": "Alta Confianza",
+      "medium": "Confianza Media",
+      "low": "Baja Confianza"
+    },
+    "status": {
+      "eligible": "Elegible",
+      "not_eligible": "No Elegible",
+      "requirements_met": "Requisitos Cumplidos"
+    }
+  },
+  "waste": {
+    "total_waste": "Desperdicio Alimentario Total",
+    "production_waste": "Desperdicio de Producción",
+    "inventory_waste": "Desperdicio de Inventario",
+    "by_reason": {
+      "production_defects": "Defectos de Producción",
+      "expired_inventory": "Inventario Caducado",
+      "damaged_inventory": "Inventario Dañado",
+      "overproduction": "Sobreproducción"
+    }
+  },
+  "report": {
+    "title": "Informe de Sostenibilidad",
+    "export_success": "Informe exportado correctamente",
+    "export_error": "Error al exportar el informe",
+    "types": {
+      "general": "Informe General de Sostenibilidad",
+      "eu_horizon": "Formato Horizonte Europa",
+      "farm_to_fork": "Informe De la Granja a la Mesa",
+      "circular_economy": "Informe Economía Circular",
+      "un_sdg": "Informe Certificación ODS ONU"
+    }
+  }
+}

frontend/src/locales/eu/ajustes.json

@@ -0,0 +1,131 @@
+{
+  "title": "Ezarpenak",
+  "description": "Konfiguratu zure okindegiko parametro operatiboak",
+  "save_all": "Gorde Aldaketak",
+  "reset_all": "Berrezarri Dena",
+  "unsaved_changes": "Gorde gabeko aldaketak dituzu",
+  "discard": "Baztertu",
+  "save": "Gorde",
+  "loading": "Ezarpenak kargatzen...",
+  "saving": "Gordetzen...",
+  "procurement": {
+    "title": "Erosketak eta Hornidura",
+    "auto_approval": "Erosketa Aginduen Auto-Onespena",
+    "auto_approve_enabled": "Gaitu erosketa aginduen auto-onespena",
+    "auto_approve_threshold": "Auto-Onespen Atalasea (EUR)",
+    "min_supplier_score": "Hornitzailearen Gutxieneko Puntuazioa",
+    "require_approval_new_suppliers": "Eskatu onespena hornitzaile berrientzat",
+    "require_approval_critical_items": "Eskatu onespena elementu kritikoetarako",
+    "planning": "Plangintza eta Aurreikuspena",
+    "lead_time_days": "Entregatzeko Denbora (egunak)",
+    "demand_forecast_days": "Eskariaren Aurreikuspen Egunak",
+    "safety_stock_percentage": "Segurtasun Stocka (%)",
+    "workflow": "Onespen Fluxua",
+    "approval_reminder_hours": "Onespen Gogorarazpena (orduak)",
+    "critical_escalation_hours": "Eskalazio Kritikoa (orduak)"
+  },
+  "inventory": {
+    "title": "Inbentarioaren Kudeaketa",
+    "stock_control": "Stock Kontrola",
+    "low_stock_threshold": "Stock Baxuaren Atalasea",
+    "reorder_point": "Berreskaera Puntua",
+    "reorder_quantity": "Berreskaera Kantitatea",
+    "expiration": "Iraungitze Kudeaketa",
+    "expiring_soon_days": "Egunak 'Laster Iraungitzen'",
+    "expiration_warning_days": "Iraungitze Abisu Egunak",
+    "quality_score_threshold": "Kalitate Atalasea (0-10)",
+    "temperature": "Tenperaturaren Monitorizazioa",
+    "temperature_monitoring_enabled": "Gaitu tenperaturaren monitorizazioa",
+    "refrigeration": "Hozkailua (°C)",
+    "refrigeration_temp_min": "Gutxieneko Tenperatura",
+    "refrigeration_temp_max": "Gehienezko Tenperatura",
+    "freezer": "Izozkailua (°C)",
+    "freezer_temp_min": "Gutxieneko Tenperatura",
+    "freezer_temp_max": "Gehienezko Tenperatura",
+    "room_temp": "Gela Tenperatura (°C)",
+    "room_temp_min": "Gutxieneko Tenperatura",
+    "room_temp_max": "Gehienezko Tenperatura",
+    "temp_alerts": "Desbideratze Alertak",
+    "temp_deviation_alert_minutes": "Desbideratze Normala (minutuak)",
+    "critical_temp_deviation_minutes": "Desbideratze Kritikoa (minutuak)"
+  },
+  "production": {
+    "title": "Ekoizpena",
+    "planning": "Plangintza eta Loteak",
+    "planning_horizon_days": "Plangintza Horizontea (egunak)",
+    "minimum_batch_size": "Gutxieneko Lote Tamaina",
+    "maximum_batch_size": "Gehienezko Lote Tamaina",
+    "production_buffer_percentage": "Ekoizpen Bufferra (%)",
+    "schedule_optimization_enabled": "Gaitu ordutegi optimizazioa",
+    "capacity": "Gaitasuna eta Lan Orduak",
+    "working_hours_per_day": "Eguneko Lan Orduak",
+    "max_overtime_hours": "Gehienezko Ordu Gehigarriak",
+    "capacity_utilization_target": "Gaitasun Erabilera Helburua",
+    "capacity_warning_threshold": "Gaitasun Alerta Atalasea",
+    "quality": "Kalitate Kontrola",
+    "quality_check_enabled": "Gaitu kalitate egiaztapena",
+    "minimum_yield_percentage": "Gutxieneko Etekina (%)",
+    "quality_score_threshold": "Kalitate Puntuazioaren Atalasea (0-10)",
+    "time_buffers": "Prestaketa Denborak",
+    "prep_time_buffer_minutes": "Prestaketa Denbora (minutuak)",
+    "cleanup_time_buffer_minutes": "Garbiketa Denbora (minutuak)",
+    "costs": "Kostuak",
+    "labor_cost_per_hour": "Lan Kostua Orduko (EUR)",
+    "overhead_cost_percentage": "Gastu Orokorren Ehunekoa (%)"
+  },
+  "supplier": {
+    "title": "Hornitzaileen Kudeaketa",
+    "default_terms": "Baldintza Lehenetsiak",
+    "default_payment_terms_days": "Ordainketa Epea Lehenetsia (egunak)",
+    "default_delivery_days": "Entrega Egun Lehenetsiak",
+    "delivery_performance": "Errendimendu Atalaseak - Entregak",
+    "excellent_delivery_rate": "Entrega Tasa Bikaina (%)",
+    "good_delivery_rate": "Entrega Tasa Ona (%)",
+    "quality_performance": "Errendimendu Atalaseak - Kalitatea",
+    "excellent_quality_rate": "Kalitate Tasa Bikaina (%)",
+    "good_quality_rate": "Kalitate Tasa Ona (%)",
+    "critical_alerts": "Alerta Kritikoak",
+    "critical_delivery_delay_hours": "Entrega Atzerapen Kritikoa (orduak)",
+    "critical_quality_rejection_rate": "Kalitate Baztertze Tasa Kritikoa (%)",
+    "high_cost_variance_percentage": "Kostu Bariantza Altua (%)",
+    "info": "Atalase hauek hornitzaileen errendimendua automatikoki ebaluatzeko erabiltzen dira. 'On' atalaseen azpitik dauden hornitzaileek alerta automatikoak jasoko dituzte."
+  },
+  "pos": {
+    "title": "Salmenta Puntua (POS)",
+    "sync": "Sinkronizazioa",
+    "sync_interval_minutes": "Sinkronizazio Tartea (minutuak)",
+    "sync_interval_help": "POS sistema zentralarekin sinkronizatzen den maiztasuna",
+    "auto_sync_products": "Produktuen sinkronizazio automatikoa",
+    "auto_sync_transactions": "Transakzioen sinkronizazio automatikoa",
+    "info": "Ezarpen hauek sistema zentralaren eta salmenta puntuko terminalen arteko informazioaren sinkronizazioa kontrolatzen dute.",
+    "info_details": [
+      "Tarte laburragoak datuak eguneratuago mantentzen ditu baina baliabide gehiago kontsumitzen ditu",
+      "Sinkronizazio automatikoak aldaketak berehala islatzen direla bermatzen du",
+      "Sinkronizazio automatikoa desgaitzeak eskuzko sinkronizazioa behar du"
+    ]
+  },
+  "order": {
+    "title": "Eskaerak eta Negozio Arauak",
+    "pricing": "Deskontuak eta Prezioak",
+    "max_discount_percentage": "Gehienezko Deskontua (%)",
+    "max_discount_help": "Eskaeretan onartutako gehienezko deskontu ehunekoa",
+    "discount_enabled": "Gaitu eskaeren deskontuak",
+    "dynamic_pricing_enabled": "Gaitu prezio dinamikoak",
+    "delivery": "Entrega Konfigurazioa",
+    "default_delivery_window_hours": "Entrega Leiho Lehenetsia (orduak)",
+    "default_delivery_window_help": "Eskaeren entregarako denbora lehenetsia",
+    "delivery_tracking_enabled": "Gaitu entregaren jarraipena",
+    "info": "Ezarpen hauek eskaerei aplikatzen zaizkien negozio arauak kontrolatzen dituzte.",
+    "info_details": {
+      "dynamic_pricing": "Prezioak automatikoki doitzen ditu eskariari, inbentarioari eta beste faktore batzuei jarraituz",
+      "discounts": "Produktu eta eskaerei deskontuak aplikatzea ahalbidetzen du ezarritako mugan",
+      "delivery_tracking": "Bezeroei beren eskaerak denbora errealean jarraitzeko aukera ematen die"
+    }
+  },
+  "messages": {
+    "save_success": "Ezarpenak ondo gorde dira",
+    "save_error": "Errorea ezarpenak gordetzean",
+    "load_error": "Errorea ezarpenak kargatzean",
+    "validation_error": "Balidazio errorea"
+  }
+}

frontend/src/locales/eu/landing.json

@@ -260,6 +260,50 @@
     "subtitle": "Ezkutuko kosturik gabe, konpromiso luzerik gabe. Hasi doan eta handitu zure hazkundea",
     "compare_link": "Ikusi ezaugarrien konparazio osoa"
   },
+  "sustainability": {
+    "badge": "NBEren GIH 12.3 eta EBren Itun Berdearekin Lerrokatuta",
+    "title_main": "Ez Bakarrik Hondakinak Murriztu",
+    "title_accent": "Frogatu Munduari",
+    "subtitle": "AA plataforma bakarra NBEren GIH 12.3 betetze jarraipen integratua duena. Murriztu hondakinak, aurreztu dirua eta kualifikatu EBko iraunkortasun laguntzarako—ingurumen eraginaren metrika egiaztagarriekin.",
+    "metrics": {
+      "co2_avoided": "CO₂ Saihestu Hilero",
+      "co2_equivalent": "43 zuhaitz landatzeko baliokidea",
+      "water_saved": "Ura Aurreztua Hilero",
+      "water_equivalent": "4,500 dutxaren baliokidea",
+      "grants_eligible": "Laguntza Programa Kualifikatuak",
+      "grants_value": "€50,000ra arte finantzaketan"
+    },
+    "sdg": {
+      "title": "NBEren GIH 12.3 Betetzea",
+      "subtitle": "Elikagai hondakinak erdira murriztea 2030erako",
+      "description": "Denbora errealeko jarraipena NBEren Garapen Iraunkorreko 12.3 helbururantz. Gure AA-k laguntzen dizu %50eko murrizketa lortzeko datu egiaztagarri eta audita daitekeenekin laguntza eskaera eta ziurtagirietarako.",
+      "progress_label": "Helbururantz Aurrerapena",
+      "baseline": "Oinarri Lerroa",
+      "current": "Oraingoa",
+      "target": "2030 Helburua",
+      "features": {
+        "tracking": "Hondakinen oinarri lerro eta aurrerapen jarraipen automatikoa",
+        "export": "Klik batean laguntza eskaera txostenen esportazioa",
+        "certification": "Ziurtagirirako prest ingurumen eraginaren datuak"
+      }
+    },
+    "grants": {
+      "eu_horizon": "EBko Horizonte Europa",
+      "eu_horizon_req": "%30eko murrizketa behar du",
+      "farm_to_fork": "Baratzatik Mahairako",
+      "farm_to_fork_req": "%20ko murrizketa behar du",
+      "circular_economy": "Ekonomia Zirkularra",
+      "circular_economy_req": "%15eko murrizketa behar du",
+      "un_sdg": "NBEren GIH Ziurtagiria",
+      "un_sdg_req": "%50eko murrizketa behar du",
+      "eligible": "Kualifikatua",
+      "on_track": "Bidean"
+    },
+    "differentiator": {
+      "title": "AA Plataforma Bakarra",
+      "description": "NBEren GIH 12.3 jarraipen integratua, ingurumen eraginaren denbora errealeko kalkuluak eta klik batean laguntza eskaerak esportatzeko aukerarekin. Ez bakarrik hondakinak murriztu—frogatu."
+    }
+  },
   "final_cta": {
     "scarcity_badge": "12 leku geratzen dira pilotu programako 20tik",
     "title": "Izan Lehenengo 20 Okindegien Artean",

frontend/src/locales/eu/sustainability.json

@@ -0,0 +1,93 @@
+{
+  "widget": {
+    "title": "Iraunkortasun Eragina",
+    "subtitle": "Ingurumen eta GIH 12.3 Betetze",
+    "footer": "NBEren GIH 12.3 eta EBren Itun Berdearekin lerrokatuta"
+  },
+  "sdg": {
+    "progress_label": "GIH 12.3 Helburu Aurrerapena",
+    "target_note": "Helburua: %50 elikagai-hondakinak murriztea 2030erako",
+    "status": {
+      "compliant": "GIH 12.3 Betetzen",
+      "on_track": "Betetze Bidean",
+      "progressing": "Aurrera Egiten",
+      "baseline": "Oinarri Lerroa Ezartzen"
+    }
+  },
+  "metrics": {
+    "waste_reduction": "Hondakin Murrizketa",
+    "co2_avoided": "CO₂ Saihestua",
+    "water_saved": "Ura Aurreztua",
+    "grants_eligible": "Diru-laguntzak Eskuragarri",
+    "trees": "zuhaitzak",
+    "programs": "programak"
+  },
+  "financial": {
+    "potential_savings": "Hileko Aurrezpen Potentziala"
+  },
+  "actions": {
+    "view_details": "Xehetasunak Ikusi",
+    "export_report": "Txostena Esportatu"
+  },
+  "errors": {
+    "load_failed": "Ezin izan dira iraunkortasun metrikak kargatu"
+  },
+  "dashboard": {
+    "title": "Iraunkortasun Panela",
+    "description": "Ingurumen Eragina eta Diru-laguntzak Prest"
+  },
+  "environmental": {
+    "co2_emissions": "CO₂ Isuriak",
+    "water_footprint": "Ur Aztarna",
+    "land_use": "Lur Erabilera",
+    "equivalents": {
+      "car_km": "Autoan kilometro baliokideak",
+      "showers": "Dutxa baliokideak",
+      "phones": "Smartphone kargak",
+      "trees_planted": "Landatu beharreko zuhaitzak"
+    }
+  },
+  "grants": {
+    "title": "Diru-laguntzetarako Gaitasuna",
+    "overall_readiness": "Prestutasun Orokorra",
+    "programs": {
+      "eu_horizon_europe": "EB Horizonte Europa",
+      "eu_farm_to_fork": "EB Baratzatik Mahairako",
+      "national_circular_economy": "Ekonomia Zirkularreko Diru-laguntzak",
+      "un_sdg_certified": "NBE GIH Ziurtagiria"
+    },
+    "confidence": {
+      "high": "Konfiantza Handia",
+      "medium": "Konfiantza Ertaina",
+      "low": "Konfiantza Txikia"
+    },
+    "status": {
+      "eligible": "Eskuragarri",
+      "not_eligible": "Ez Dago Eskuragarri",
+      "requirements_met": "Eskakizunak Betetzen"
+    }
+  },
+  "waste": {
+    "total_waste": "Elikagai-hondakin Guztira",
+    "production_waste": "Ekoizpen Hondakinak",
+    "inventory_waste": "Inbentario Hondakinak",
+    "by_reason": {
+      "production_defects": "Ekoizpen Akatsak",
+      "expired_inventory": "Iraungi den Inbentarioa",
+      "damaged_inventory": "Kaltetutako Inbentarioa",
+      "overproduction": "Gehiegizko Ekoizpena"
+    }
+  },
+  "report": {
+    "title": "Iraunkortasun Txostena",
+    "export_success": "Txostena ongi esportatu da",
+    "export_error": "Errorea txostena esportatzean",
+    "types": {
+      "general": "Iraunkortasun Txosten Orokorra",
+      "eu_horizon": "Horizonte Europa Formatua",
+      "farm_to_fork": "Baratzatik Mahairako Txostena",
+      "circular_economy": "Ekonomia Zirkularreko Txostena",
+      "un_sdg": "NBE GIH Ziurtagiri Txostena"
+    }
+  }
+}

frontend/src/pages/app/DashboardPage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { PageHeader } from '../../components/layout';
@@ -6,15 +6,29 @@ import StatsGrid from '../../components/ui/Stats/StatsGrid';
 import RealTimeAlerts from '../../components/domain/dashboard/RealTimeAlerts';
 import PendingPOApprovals from '../../components/domain/dashboard/PendingPOApprovals';
 import TodayProduction from '../../components/domain/dashboard/TodayProduction';
+import SustainabilityWidget from '../../components/domain/sustainability/SustainabilityWidget';
+import { EditViewModal } from '../../components/ui';
 import { useTenant } from '../../stores/tenant.store';
 import { useDemoTour, shouldStartTour, clearTourStartPending } from '../../features/demo-onboarding';
 import { useDashboardStats } from '../../api/hooks/dashboard';
+import { usePurchaseOrder, useApprovePurchaseOrder, useRejectPurchaseOrder } from '../../api/hooks/purchase-orders';
+import { useBatchDetails, useUpdateBatchStatus } from '../../api/hooks/production';
+import { ProductionStatusEnum } from '../../api';
 import {
   AlertTriangle,
   Clock,
   Euro,
-  Package
+  Package,
+  FileText,
+  Building2,
+  Calendar,
+  CheckCircle,
+  X,
+  ShoppingCart,
+  Factory,
+  Timer
 } from 'lucide-react';
+import toast from 'react-hot-toast';
 
 const DashboardPage: React.FC = () => {
   const { t } = useTranslation();
@@ -23,6 +37,13 @@ const DashboardPage: React.FC = () => {
   const { startTour } = useDemoTour();
   const isDemoMode = localStorage.getItem('demo_mode') === 'true';
 
+  // Modal state management
+  const [selectedPOId, setSelectedPOId] = useState<string | null>(null);
+  const [selectedBatchId, setSelectedBatchId] = useState<string | null>(null);
+  const [showPOModal, setShowPOModal] = useState(false);
+  const [showBatchModal, setShowBatchModal] = useState(false);
+  const [approvalNotes, setApprovalNotes] = useState('');
+
   // Fetch real dashboard statistics
   const { data: dashboardStats, isLoading: isLoadingStats, error: statsError } = useDashboardStats(
     currentTenant?.id || '',
@@ -31,6 +52,29 @@ const DashboardPage: React.FC = () => {
     }
   );
 
+  // Fetch PO details when modal is open
+  const { data: poDetails, isLoading: isLoadingPO } = usePurchaseOrder(
+    currentTenant?.id || '',
+    selectedPOId || '',
+    {
+      enabled: !!currentTenant?.id && !!selectedPOId && showPOModal
+    }
+  );
+
+  // Fetch Production batch details when modal is open
+  const { data: batchDetails, isLoading: isLoadingBatch } = useBatchDetails(
+    currentTenant?.id || '',
+    selectedBatchId || '',
+    {
+      enabled: !!currentTenant?.id && !!selectedBatchId && showBatchModal
+    }
+  );
+
+  // Mutations
+  const approvePOMutation = useApprovePurchaseOrder();
+  const rejectPOMutation = useRejectPurchaseOrder();
+  const updateBatchStatusMutation = useUpdateBatchStatus();
+
   useEffect(() => {
     console.log('[Dashboard] Demo mode:', isDemoMode);
     console.log('[Dashboard] Should start tour:', shouldStartTour());
@@ -61,29 +105,70 @@ const DashboardPage: React.FC = () => {
     navigate('/app/operations/procurement');
   };
 
-  const handleStartBatch = (batchId: string) => {
-    console.log('Starting production batch:', batchId);
+  const handleStartBatch = async (batchId: string) => {
+    try {
+      await updateBatchStatusMutation.mutateAsync({
+        tenantId: currentTenant?.id || '',
+        batchId,
+        statusUpdate: { status: ProductionStatusEnum.IN_PROGRESS }
+      });
+      toast.success('Lote iniciado');
+    } catch (error) {
+      console.error('Error starting batch:', error);
+      toast.error('Error al iniciar lote');
+    }
   };
 
-  const handlePauseBatch = (batchId: string) => {
-    console.log('Pausing production batch:', batchId);
+  const handlePauseBatch = async (batchId: string) => {
+    try {
+      await updateBatchStatusMutation.mutateAsync({
+        tenantId: currentTenant?.id || '',
+        batchId,
+        statusUpdate: { status: ProductionStatusEnum.ON_HOLD }
+      });
+      toast.success('Lote pausado');
+    } catch (error) {
+      console.error('Error pausing batch:', error);
+      toast.error('Error al pausar lote');
+    }
   };
 
-  const handleViewDetails = (id: string) => {
-    console.log('Viewing details for:', id);
+  const handleViewDetails = (batchId: string) => {
+    setSelectedBatchId(batchId);
+    setShowBatchModal(true);
   };
 
-  const handleApprovePO = (poId: string) => {
-    console.log('Approved PO:', poId);
+  const handleApprovePO = async (poId: string) => {
+    try {
+      await approvePOMutation.mutateAsync({
+        tenantId: currentTenant?.id || '',
+        poId,
+        notes: 'Aprobado desde el dashboard'
+      });
+      toast.success('Orden aprobada');
+    } catch (error) {
+      console.error('Error approving PO:', error);
+      toast.error('Error al aprobar orden');
+    }
   };
 
-  const handleRejectPO = (poId: string) => {
-    console.log('Rejected PO:', poId);
+  const handleRejectPO = async (poId: string) => {
+    try {
+      await rejectPOMutation.mutateAsync({
+        tenantId: currentTenant?.id || '',
+        poId,
+        reason: 'Rechazado desde el dashboard'
+      });
+      toast.success('Orden rechazada');
+    } catch (error) {
+      console.error('Error rejecting PO:', error);
+      toast.error('Error al rechazar orden');
+    }
   };
 
   const handleViewPODetails = (poId: string) => {
-    console.log('Viewing PO details:', poId);
-    navigate(`/app/suppliers/purchase-orders/${poId}`);
+    setSelectedPOId(poId);
+    setShowPOModal(true);
   };
 
   const handleViewAllPOs = () => {
@@ -178,6 +263,114 @@ const DashboardPage: React.FC = () => {
     ];
   }, [dashboardStats, t]);
 
+  // Helper function to build PO detail sections (reused from ProcurementPage)
+  const buildPODetailsSections = (po: any) => {
+    if (!po) return [];
+
+    const getPOStatusConfig = (status: string) => {
+      const normalizedStatus = status?.toUpperCase().replace(/_/g, '_');
+      const configs: Record<string, any> = {
+        PENDING_APPROVAL: { text: 'Pendiente de Aprobación', color: 'var(--color-warning)' },
+        APPROVED: { text: 'Aprobado', color: 'var(--color-success)' },
+        SENT_TO_SUPPLIER: { text: 'Enviado al Proveedor', color: 'var(--color-info)' },
+        CONFIRMED: { text: 'Confirmado', color: 'var(--color-success)' },
+        RECEIVED: { text: 'Recibido', color: 'var(--color-success)' },
+        COMPLETED: { text: 'Completado', color: 'var(--color-success)' },
+        CANCELLED: { text: 'Cancelado', color: 'var(--color-error)' },
+      };
+      return configs[normalizedStatus] || { text: status, color: 'var(--color-info)' };
+    };
+
+    const statusConfig = getPOStatusConfig(po.status);
+
+    return [
+      {
+        title: 'Información General',
+        icon: FileText,
+        fields: [
+          { label: 'Número de Orden', value: po.po_number, type: 'text' as const },
+          { label: 'Estado', value: statusConfig.text, type: 'status' as const },
+          { label: 'Prioridad', value: po.priority === 'urgent' ? 'Urgente' : po.priority === 'high' ? 'Alta' : po.priority === 'low' ? 'Baja' : 'Normal', type: 'text' as const },
+          { label: 'Fecha de Creación', value: new Date(po.created_at).toLocaleDateString('es-ES', { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' }), type: 'text' as const }
+        ]
+      },
+      {
+        title: 'Información del Proveedor',
+        icon: Building2,
+        fields: [
+          { label: 'Proveedor', value: po.supplier?.name || po.supplier_name || 'N/A', type: 'text' as const },
+          { label: 'Email', value: po.supplier?.contact_email || 'N/A', type: 'text' as const },
+          { label: 'Teléfono', value: po.supplier?.contact_phone || 'N/A', type: 'text' as const }
+        ]
+      },
+      {
+        title: 'Resumen Financiero',
+        icon: Euro,
+        fields: [
+          { label: 'Subtotal', value: `€${(typeof po.subtotal === 'string' ? parseFloat(po.subtotal) : po.subtotal || 0).toFixed(2)}`, type: 'text' as const },
+          { label: 'Impuestos', value: `€${(typeof po.tax_amount === 'string' ? parseFloat(po.tax_amount) : po.tax_amount || 0).toFixed(2)}`, type: 'text' as const },
+          { label: 'TOTAL', value: `€${(typeof po.total_amount === 'string' ? parseFloat(po.total_amount) : po.total_amount || 0).toFixed(2)}`, type: 'text' as const, highlight: true }
+        ]
+      },
+      {
+        title: 'Entrega',
+        icon: Calendar,
+        fields: [
+          { label: 'Fecha Requerida', value: po.required_delivery_date ? new Date(po.required_delivery_date).toLocaleDateString('es-ES', { year: 'numeric', month: 'long', day: 'numeric' }) : 'No especificada', type: 'text' as const },
+          { label: 'Fecha Esperada', value: po.expected_delivery_date ? new Date(po.expected_delivery_date).toLocaleDateString('es-ES', { year: 'numeric', month: 'long', day: 'numeric' }) : 'No especificada', type: 'text' as const }
+        ]
+      }
+    ];
+  };
+
+  // Helper function to build Production batch detail sections
+  const buildBatchDetailsSections = (batch: any) => {
+    if (!batch) return [];
+
+    return [
+      {
+        title: 'Información General',
+        icon: Package,
+        fields: [
+          { label: 'Producto', value: batch.product_name, type: 'text' as const, highlight: true },
+          { label: 'Número de Lote', value: batch.batch_number, type: 'text' as const },
+          { label: 'Cantidad Planificada', value: `${batch.planned_quantity} unidades`, type: 'text' as const },
+          { label: 'Cantidad Real', value: batch.actual_quantity ? `${batch.actual_quantity} unidades` : 'Pendiente', type: 'text' as const },
+          { label: 'Estado', value: batch.status, type: 'text' as const },
+          { label: 'Prioridad', value: batch.priority, type: 'text' as const }
+        ]
+      },
+      {
+        title: 'Cronograma',
+        icon: Clock,
+        fields: [
+          { label: 'Inicio Planificado', value: batch.planned_start_time ? new Date(batch.planned_start_time).toLocaleString('es-ES') : 'No especificado', type: 'text' as const },
+          { label: 'Fin Planificado', value: batch.planned_end_time ? new Date(batch.planned_end_time).toLocaleString('es-ES') : 'No especificado', type: 'text' as const },
+          { label: 'Inicio Real', value: batch.actual_start_time ? new Date(batch.actual_start_time).toLocaleString('es-ES') : 'Pendiente', type: 'text' as const },
+          { label: 'Fin Real', value: batch.actual_end_time ? new Date(batch.actual_end_time).toLocaleString('es-ES') : 'Pendiente', type: 'text' as const }
+        ]
+      },
+      {
+        title: 'Producción',
+        icon: Factory,
+        fields: [
+          { label: 'Personal Asignado', value: batch.staff_assigned?.join(', ') || 'No asignado', type: 'text' as const },
+          { label: 'Estación', value: batch.station_id || 'No asignada', type: 'text' as const },
+          { label: 'Duración Planificada', value: batch.planned_duration_minutes ? `${batch.planned_duration_minutes} minutos` : 'No especificada', type: 'text' as const }
+        ]
+      },
+      {
+        title: 'Calidad y Costos',
+        icon: CheckCircle,
+        fields: [
+          { label: 'Puntuación de Calidad', value: batch.quality_score ? `${batch.quality_score}/10` : 'Pendiente', type: 'text' as const },
+          { label: 'Rendimiento', value: batch.yield_percentage ? `${batch.yield_percentage}%` : 'Calculando...', type: 'text' as const },
+          { label: 'Costo Estimado', value: batch.estimated_cost ? `€${batch.estimated_cost}` : '€0.00', type: 'text' as const },
+          { label: 'Costo Real', value: batch.actual_cost ? `€${batch.actual_cost}` : '€0.00', type: 'text' as const }
+        ]
+      }
+    ];
+  };
 
   return (
     <div className="space-y-6 p-4 sm:p-6">
@@ -213,14 +406,26 @@ const DashboardPage: React.FC = () => {
         )}
       </div>
 
-      {/* Dashboard Content - Four Main Sections */}
+      {/* Dashboard Content - Main Sections */}
       <div className="space-y-6">
         {/* 1. Real-time Alerts */}
         <div data-tour="real-time-alerts">
           <RealTimeAlerts />
         </div>
 
-        {/* 2. Pending PO Approvals - What purchase orders need approval? */}
+        {/* 2. Sustainability Impact - NEW! */}
+        <div data-tour="sustainability-widget">
+          <SustainabilityWidget
+            days={30}
+            onViewDetails={() => navigate('/app/analytics/sustainability')}
+            onExportReport={() => {
+              // TODO: Implement export modal
+              console.log('Export sustainability report');
+            }}
+          />
+        </div>
+
+        {/* 3. Pending PO Approvals - What purchase orders need approval? */}
         <div data-tour="pending-po-approvals">
           <PendingPOApprovals
             onApprovePO={handleApprovePO}
@@ -231,7 +436,7 @@ const DashboardPage: React.FC = () => {
           />
         </div>
 
-        {/* 3. Today's Production - What needs to be produced today? */}
+        {/* 4. Today's Production - What needs to be produced today? */}
         <div data-tour="today-production">
           <TodayProduction
             onStartBatch={handleStartBatch}
@@ -242,6 +447,150 @@ const DashboardPage: React.FC = () => {
           />
         </div>
       </div>
+
+      {/* Purchase Order Details Modal */}
+      {showPOModal && poDetails && (
+        <EditViewModal
+          isOpen={showPOModal}
+          onClose={() => {
+            setShowPOModal(false);
+            setSelectedPOId(null);
+          }}
+          title={`Orden de Compra: ${poDetails.po_number}`}
+          subtitle={`Proveedor: ${poDetails.supplier?.name || poDetails.supplier_name || 'N/A'}`}
+          mode="view"
+          sections={buildPODetailsSections(poDetails)}
+          loading={isLoadingPO}
+          statusIndicator={{
+            color: poDetails.status === 'PENDING_APPROVAL' ? 'var(--color-warning)' :
+                   poDetails.status === 'APPROVED' ? 'var(--color-success)' :
+                   'var(--color-info)',
+            text: poDetails.status === 'PENDING_APPROVAL' ? 'Pendiente de Aprobación' :
+                  poDetails.status === 'APPROVED' ? 'Aprobado' :
+                  poDetails.status || 'N/A',
+            icon: ShoppingCart
+          }}
+          actions={
+            poDetails.status === 'PENDING_APPROVAL' ? [
+              {
+                label: 'Aprobar',
+                onClick: async () => {
+                  try {
+                    await approvePOMutation.mutateAsync({
+                      tenantId: currentTenant?.id || '',
+                      poId: poDetails.id,
+                      notes: 'Aprobado desde el dashboard'
+                    });
+                    toast.success('Orden aprobada');
+                    setShowPOModal(false);
+                    setSelectedPOId(null);
+                  } catch (error) {
+                    console.error('Error approving PO:', error);
+                    toast.error('Error al aprobar orden');
+                  }
+                },
+                variant: 'primary' as const,
+                icon: CheckCircle
+              },
+              {
+                label: 'Rechazar',
+                onClick: async () => {
+                  try {
+                    await rejectPOMutation.mutateAsync({
+                      tenantId: currentTenant?.id || '',
+                      poId: poDetails.id,
+                      reason: 'Rechazado desde el dashboard'
+                    });
+                    toast.success('Orden rechazada');
+                    setShowPOModal(false);
+                    setSelectedPOId(null);
+                  } catch (error) {
+                    console.error('Error rejecting PO:', error);
+                    toast.error('Error al rechazar orden');
+                  }
+                },
+                variant: 'outline' as const,
+                icon: X
+              }
+            ] : undefined
+          }
+        />
+      )}
+
+      {/* Production Batch Details Modal */}
+      {showBatchModal && batchDetails && (
+        <EditViewModal
+          isOpen={showBatchModal}
+          onClose={() => {
+            setShowBatchModal(false);
+            setSelectedBatchId(null);
+          }}
+          title={batchDetails.product_name}
+          subtitle={`Lote #${batchDetails.batch_number}`}
+          mode="view"
+          sections={buildBatchDetailsSections(batchDetails)}
+          loading={isLoadingBatch}
+          statusIndicator={{
+            color: batchDetails.status === 'PENDING' ? 'var(--color-warning)' :
+                   batchDetails.status === 'IN_PROGRESS' ? 'var(--color-info)' :
+                   batchDetails.status === 'COMPLETED' ? 'var(--color-success)' :
+                   batchDetails.status === 'FAILED' ? 'var(--color-error)' :
+                   'var(--color-info)',
+            text: batchDetails.status === 'PENDING' ? 'Pendiente' :
+                  batchDetails.status === 'IN_PROGRESS' ? 'En Progreso' :
+                  batchDetails.status === 'COMPLETED' ? 'Completado' :
+                  batchDetails.status === 'FAILED' ? 'Fallido' :
+                  batchDetails.status === 'ON_HOLD' ? 'Pausado' :
+                  batchDetails.status || 'N/A',
+            icon: Factory
+          }}
+          actions={
+            batchDetails.status === 'PENDING' ? [
+              {
+                label: 'Iniciar Lote',
+                onClick: async () => {
+                  try {
+                    await updateBatchStatusMutation.mutateAsync({
+                      tenantId: currentTenant?.id || '',
+                      batchId: batchDetails.id,
+                      statusUpdate: { status: ProductionStatusEnum.IN_PROGRESS }
+                    });
+                    toast.success('Lote iniciado');
+                    setShowBatchModal(false);
+                    setSelectedBatchId(null);
+                  } catch (error) {
+                    console.error('Error starting batch:', error);
+                    toast.error('Error al iniciar lote');
+                  }
+                },
+                variant: 'primary' as const,
+                icon: CheckCircle
+              }
+            ] : batchDetails.status === 'IN_PROGRESS' ? [
+              {
+                label: 'Pausar Lote',
+                onClick: async () => {
+                  try {
+                    await updateBatchStatusMutation.mutateAsync({
+                      tenantId: currentTenant?.id || '',
+                      batchId: batchDetails.id,
+                      statusUpdate: { status: ProductionStatusEnum.ON_HOLD }
+                    });
+                    toast.success('Lote pausado');
+                    setShowBatchModal(false);
+                    setSelectedBatchId(null);
+                  } catch (error) {
+                    console.error('Error pausing batch:', error);
+                    toast.error('Error al pausar lote');
+                  }
+                },
+                variant: 'outline' as const,
+                icon: X
+              }
+            ] : undefined
+          }
+        />
+      )}
     </div>
   );
 };

frontend/src/pages/app/analytics/ProcurementAnalyticsPage.tsx

@@ -20,7 +20,7 @@ import { useProcurementDashboard } from '../../../api/hooks/orders';
 import { formatters } from '../../../components/ui/Stats/StatsPresets';
 
 const ProcurementAnalyticsPage: React.FC = () => {
-  const { canAccessAnalytics } = useSubscription();
+  const { canAccessAnalytics, subscriptionInfo } = useSubscription();
   const currentTenant = useCurrentTenant();
   const tenantId = currentTenant?.id || '';
 
@@ -31,6 +31,24 @@ const ProcurementAnalyticsPage: React.FC = () => {
   // Check if user has access to advanced analytics (professional/enterprise)
   const hasAdvancedAccess = canAccessAnalytics('advanced');
 
+  // Show loading state while subscription data is being fetched
+  if (subscriptionInfo.loading) {
+    return (
+      <div className="space-y-6">
+        <PageHeader
+          title="Analítica de Compras"
+          description="Insights avanzados sobre planificación de compras y gestión de proveedores"
+        />
+        <Card className="p-8 text-center">
+          <div className="flex flex-col items-center gap-4">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[var(--color-primary)]"></div>
+            <p className="text-[var(--text-secondary)]">Cargando información de suscripción...</p>
+          </div>
+        </Card>
+      </div>
+    );
+  }
+
   // If user doesn't have access to advanced analytics, show upgrade message
   if (!hasAdvancedAccess) {
     return (

frontend/src/pages/app/analytics/ProductionAnalyticsPage.tsx

@@ -38,7 +38,7 @@ import {
 
 const ProductionAnalyticsPage: React.FC = () => {
   const { t } = useTranslation('production');
-  const { canAccessAnalytics } = useSubscription();
+  const { canAccessAnalytics, subscriptionInfo } = useSubscription();
   const currentTenant = useCurrentTenant();
   const tenantId = currentTenant?.id || '';
 
@@ -49,6 +49,24 @@ const ProductionAnalyticsPage: React.FC = () => {
   // Check if user has access to advanced analytics (professional/enterprise)
   const hasAdvancedAccess = canAccessAnalytics('advanced');
 
+  // Show loading state while subscription data is being fetched
+  if (subscriptionInfo.loading) {
+    return (
+      <div className="space-y-6">
+        <PageHeader
+          title={t('analytics.production_analytics')}
+          description={t('analytics.advanced_insights_professionals_enterprises')}
+        />
+        <Card className="p-8 text-center">
+          <div className="flex flex-col items-center gap-4">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[var(--color-primary)]"></div>
+            <p className="text-[var(--text-secondary)]">{t('common.loading') || 'Cargando información de suscripción...'}</p>
+          </div>
+        </Card>
+      </div>
+    );
+  }
+
   // If user doesn't have access to advanced analytics, show upgrade message
   if (!hasAdvancedAccess) {
     return (
@@ -177,87 +195,57 @@ const ProductionAnalyticsPage: React.FC = () => {
       <div className="min-h-screen">
         {/* Overview Tab - Mixed Dashboard */}
         {activeTab === 'overview' && (
-          <div className="grid gap-6 lg:grid-cols-2 xl:grid-cols-3">
-            <div className="lg:col-span-2 xl:col-span-2">
-              <LiveBatchTrackerWidget />
-            </div>
-            <div>
-              <OnTimeCompletionWidget />
-            </div>
-            <div>
-              <QualityScoreTrendsWidget />
-            </div>
-            <div>
-              <WasteDefectTrackerWidget />
-            </div>
-            <div className="lg:col-span-2 xl:col-span-1">
-              <CapacityUtilizationWidget />
-            </div>
+          <div className="grid gap-6">
+            <LiveBatchTrackerWidget />
+            <OnTimeCompletionWidget />
+            <QualityScoreTrendsWidget />
+            <WasteDefectTrackerWidget />
+            <CapacityUtilizationWidget />
           </div>
         )}
 
         {/* Bakery Operations Tab */}
         {activeTab === 'operations' && (
           <div className="grid gap-6">
-            <div className="grid gap-6 lg:grid-cols-2">
-              <TodaysScheduleSummaryWidget />
-              <OnTimeCompletionWidget />
-            </div>
-            <div>
-              <LiveBatchTrackerWidget />
-            </div>
-            <div>
-              <CapacityUtilizationWidget />
-            </div>
+            <TodaysScheduleSummaryWidget />
+            <OnTimeCompletionWidget />
+            <LiveBatchTrackerWidget />
+            <CapacityUtilizationWidget />
           </div>
         )}
 
         {/* Cost & Efficiency Tab */}
         {activeTab === 'cost-efficiency' && (
           <div className="grid gap-6">
-            <div className="grid gap-6 lg:grid-cols-2">
-              <CostPerUnitWidget />
-              <WasteDefectTrackerWidget />
-            </div>
-            <div>
-              <YieldPerformanceWidget />
-            </div>
+            <CostPerUnitWidget />
+            <WasteDefectTrackerWidget />
+            <YieldPerformanceWidget />
           </div>
         )}
 
         {/* Quality Assurance Tab */}
         {activeTab === 'quality' && (
           <div className="grid gap-6">
-            <div className="grid gap-6 lg:grid-cols-2">
-              <QualityScoreTrendsWidget />
-              <WasteDefectTrackerWidget />
-            </div>
-            <div>
-              <TopDefectTypesWidget />
-            </div>
+            <QualityScoreTrendsWidget />
+            <WasteDefectTrackerWidget />
+            <TopDefectTypesWidget />
           </div>
         )}
 
         {/* Equipment & Maintenance Tab */}
         {activeTab === 'equipment' && (
           <div className="grid gap-6">
-            <div className="grid gap-6 lg:grid-cols-2">
-              <EquipmentStatusWidget />
-              <MaintenanceScheduleWidget />
-            </div>
-            <div>
-              <EquipmentEfficiencyWidget />
-            </div>
+            <EquipmentStatusWidget />
+            <MaintenanceScheduleWidget />
+            <EquipmentEfficiencyWidget />
           </div>
         )}
 
         {/* AI Insights Tab */}
         {activeTab === 'ai-insights' && (
           <div className="grid gap-6">
-            <div className="grid gap-6 lg:grid-cols-2">
-              <AIInsightsWidget />
-              <PredictiveMaintenanceWidget />
-            </div>
+            <AIInsightsWidget />
+            <PredictiveMaintenanceWidget />
           </div>
         )}
       </div>

frontend/src/pages/app/database/ajustes/AjustesPage.tsx

@@ -0,0 +1,299 @@
+import React, { useState } from 'react';
+import { Settings, Save, RotateCcw, AlertCircle, Loader } from 'lucide-react';
+import { Button, Card } from '../../../../components/ui';
+import { PageHeader } from '../../../../components/layout';
+import { useToast } from '../../../../hooks/ui/useToast';
+import { useSettings, useUpdateSettings } from '../../../../api/hooks/settings';
+import { useCurrentTenant } from '../../../../stores/tenant.store';
+import type {
+  TenantSettings,
+  ProcurementSettings,
+  InventorySettings,
+  ProductionSettings,
+  SupplierSettings,
+  POSSettings,
+  OrderSettings,
+} from '../../../../api/types/settings';
+import ProcurementSettingsCard from './cards/ProcurementSettingsCard';
+import InventorySettingsCard from './cards/InventorySettingsCard';
+import ProductionSettingsCard from './cards/ProductionSettingsCard';
+import SupplierSettingsCard from './cards/SupplierSettingsCard';
+import POSSettingsCard from './cards/POSSettingsCard';
+import OrderSettingsCard from './cards/OrderSettingsCard';
+
+const AjustesPage: React.FC = () => {
+  const { addToast } = useToast();
+  const currentTenant = useCurrentTenant();
+  const tenantId = currentTenant?.id || '';
+
+  const { data: settings, isLoading, error, isFetching } = useSettings(tenantId, {
+    enabled: !!tenantId,
+    retry: 2,
+    staleTime: 5 * 60 * 100,
+  });
+  
+  // Debug logging
+  React.useEffect(() => {
+    console.log('🔍 AjustesPage - tenantId:', tenantId);
+    console.log('🔍 AjustesPage - settings:', settings);
+    console.log('🔍 AjustesPage - isLoading:', isLoading);
+    console.log('🔍 AjustesPage - isFetching:', isFetching);
+    console.log('🔍 AjustesPage - error:', error);
+  }, [tenantId, settings, isLoading, isFetching, error]);
+  const updateSettingsMutation = useUpdateSettings();
+
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+
+  // Local state for each category
+  const [procurementSettings, setProcurementSettings] = useState<ProcurementSettings | null>(null);
+  const [inventorySettings, setInventorySettings] = useState<InventorySettings | null>(null);
+  const [productionSettings, setProductionSettings] = useState<ProductionSettings | null>(null);
+  const [supplierSettings, setSupplierSettings] = useState<SupplierSettings | null>(null);
+  const [posSettings, setPosSettings] = useState<POSSettings | null>(null);
+  const [orderSettings, setOrderSettings] = useState<OrderSettings | null>(null);
+
+  // Load settings into local state when data is fetched
+  React.useEffect(() => {
+    if (settings) {
+      setProcurementSettings(settings.procurement_settings);
+      setInventorySettings(settings.inventory_settings);
+      setProductionSettings(settings.production_settings);
+      setSupplierSettings(settings.supplier_settings);
+      setPosSettings(settings.pos_settings);
+      setOrderSettings(settings.order_settings);
+      setHasUnsavedChanges(false);
+    }
+  }, [settings]);
+
+  const handleSaveAll = async () => {
+    if (!tenantId || !procurementSettings || !inventorySettings || !productionSettings ||
+        !supplierSettings || !posSettings || !orderSettings) {
+      return;
+    }
+
+    setIsSaving(true);
+
+    try {
+      await updateSettingsMutation.mutateAsync({
+        tenantId,
+        updates: {
+          procurement_settings: procurementSettings,
+          inventory_settings: inventorySettings,
+          production_settings: productionSettings,
+          supplier_settings: supplierSettings,
+          pos_settings: posSettings,
+          order_settings: orderSettings,
+        },
+      });
+
+      setHasUnsavedChanges(false);
+      addToast('Ajustes guardados correctamente', { type: 'success' });
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Error desconocido';
+      addToast(`Error al guardar ajustes: ${errorMessage}`, { type: 'error' });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleResetAll = () => {
+    if (settings) {
+      setProcurementSettings(settings.procurement_settings);
+      setInventorySettings(settings.inventory_settings);
+      setProductionSettings(settings.production_settings);
+      setSupplierSettings(settings.supplier_settings);
+      setPosSettings(settings.pos_settings);
+      setOrderSettings(settings.order_settings);
+      setHasUnsavedChanges(false);
+    }
+  };
+
+  const handleCategoryChange = (category: string) => {
+    setHasUnsavedChanges(true);
+  };
+
+  if (isLoading || !currentTenant) {
+    return (
+      <div className="p-6 space-y-6">
+        <PageHeader
+          title="Ajustes"
+          description="Configura los parámetros operativos de tu panadería"
+        />
+        <div className="flex items-center justify-center h-64">
+          <Loader className="w-8 h-8 animate-spin text-[var(--color-primary)]" />
+          <span className="ml-2 text-[var(--text-secondary)]">Cargando ajustes...</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-6 space-y-6">
+        <PageHeader
+          title="Ajustes"
+          description="Error al cargar los ajustes"
+        />
+        <Card className="p-6">
+          <div className="text-red-600">
+            Error al cargar los ajustes: {error.message || 'Error desconocido'}
+          </div>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 space-y-6 pb-32">
+      <PageHeader
+        title="Ajustes"
+        description="Configura los parámetros operativos de tu panadería"
+      />
+
+      {/* Top Action Bar */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2 text-sm">
+          <Settings className="w-4 h-4 text-[var(--color-primary)]" />
+          <span className="text-[var(--text-secondary)]">
+            Ajusta los parámetros según las necesidades de tu negocio
+          </span>
+        </div>
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleResetAll}
+            disabled={!hasUnsavedChanges || isSaving}
+          >
+            <RotateCcw className="w-4 h-4" />
+            Restablecer Todo
+          </Button>
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={handleSaveAll}
+            isLoading={isSaving}
+            disabled={!hasUnsavedChanges}
+            loadingText="Guardando..."
+          >
+            <Save className="w-4 h-4" />
+            Guardar Cambios
+          </Button>
+        </div>
+      </div>
+
+      {/* Settings Categories */}
+      <div className="space-y-6">
+        {/* Procurement Settings */}
+        {procurementSettings && (
+          <ProcurementSettingsCard
+            settings={procurementSettings}
+            onChange={(newSettings) => {
+              setProcurementSettings(newSettings);
+              handleCategoryChange('procurement');
+            }}
+            disabled={isSaving}
+          />
+        )}
+
+        {/* Inventory Settings */}
+        {inventorySettings && (
+          <InventorySettingsCard
+            settings={inventorySettings}
+            onChange={(newSettings) => {
+              setInventorySettings(newSettings);
+              handleCategoryChange('inventory');
+            }}
+            disabled={isSaving}
+          />
+        )}
+
+        {/* Production Settings */}
+        {productionSettings && (
+          <ProductionSettingsCard
+            settings={productionSettings}
+            onChange={(newSettings) => {
+              setProductionSettings(newSettings);
+              handleCategoryChange('production');
+            }}
+            disabled={isSaving}
+          />
+        )}
+
+        {/* Supplier Settings */}
+        {supplierSettings && (
+          <SupplierSettingsCard
+            settings={supplierSettings}
+            onChange={(newSettings) => {
+              setSupplierSettings(newSettings);
+              handleCategoryChange('supplier');
+            }}
+            disabled={isSaving}
+          />
+        )}
+
+        {/* POS Settings */}
+        {posSettings && (
+          <POSSettingsCard
+            settings={posSettings}
+            onChange={(newSettings) => {
+              setPosSettings(newSettings);
+              handleCategoryChange('pos');
+            }}
+            disabled={isSaving}
+          />
+        )}
+
+        {/* Order Settings */}
+        {orderSettings && (
+          <OrderSettingsCard
+            settings={orderSettings}
+            onChange={(newSettings) => {
+              setOrderSettings(newSettings);
+              handleCategoryChange('order');
+            }}
+            disabled={isSaving}
+          />
+        )}
+      </div>
+
+      {/* Floating Save Banner */}
+      {hasUnsavedChanges && (
+        <div className="fixed bottom-6 right-6 z-50">
+          <Card className="p-4 shadow-lg border-2 border-[var(--color-primary)]">
+            <div className="flex items-center gap-3">
+              <div className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
+                <AlertCircle className="w-4 h-4 text-yellow-500" />
+                Tienes cambios sin guardar
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleResetAll}
+                  disabled={isSaving}
+                >
+                  <RotateCcw className="w-4 h-4" />
+                  Descartar
+                </Button>
+                <Button
+                  variant="primary"
+                  size="sm"
+                  onClick={handleSaveAll}
+                  isLoading={isSaving}
+                  loadingText="Guardando..."
+                >
+                  <Save className="w-4 h-4" />
+                  Guardar
+                </Button>
+              </div>
+            </div>
+          </Card>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AjustesPage;

frontend/src/pages/app/database/ajustes/cards/InventorySettingsCard.tsx

@@ -0,0 +1,280 @@
+import React from 'react';
+import { Package, AlertCircle, Thermometer, Clock } from 'lucide-react';
+import { Card, Input } from '../../../../../components/ui';
+import type { InventorySettings } from '../../../../../api/types/settings';
+
+interface InventorySettingsCardProps {
+  settings: InventorySettings;
+  onChange: (settings: InventorySettings) => void;
+  disabled?: boolean;
+}
+
+const InventorySettingsCard: React.FC<InventorySettingsCardProps> = ({
+  settings,
+  onChange,
+  disabled = false,
+}) => {
+  const handleChange = (field: keyof InventorySettings) => (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const value = e.target.type === 'checkbox' ? e.target.checked :
+                  e.target.type === 'number' ? parseFloat(e.target.value) :
+                  e.target.value;
+    onChange({ ...settings, [field]: value });
+  };
+
+  return (
+    <Card className="p-6">
+      <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-6 flex items-center">
+        <Package className="w-5 h-5 mr-2 text-[var(--color-primary)]" />
+        Gestión de Inventario
+      </h3>
+
+      <div className="space-y-6">
+        {/* Stock Management */}
+        <div>
+          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
+            <Package className="w-4 h-4 mr-2" />
+            Control de Stock
+          </h4>
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pl-6">
+            <Input
+              type="number"
+              label="Umbral de Stock Bajo"
+              value={settings.low_stock_threshold}
+              onChange={handleChange('low_stock_threshold')}
+              disabled={disabled}
+              min={1}
+              max={1000}
+              step={1}
+              placeholder="10"
+            />
+
+            <Input
+              type="number"
+              label="Punto de Reorden"
+              value={settings.reorder_point}
+              onChange={handleChange('reorder_point')}
+              disabled={disabled}
+              min={1}
+              max={1000}
+              step={1}
+              placeholder="20"
+            />
+
+            <Input
+              type="number"
+              label="Cantidad de Reorden"
+              value={settings.reorder_quantity}
+              onChange={handleChange('reorder_quantity')}
+              disabled={disabled}
+              min={1}
+              max={1000}
+              step={1}
+              placeholder="50"
+            />
+          </div>
+        </div>
+
+        {/* Expiration Management */}
+        <div>
+          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
+            <Clock className="w-4 h-4 mr-2" />
+            Gestión de Caducidad
+          </h4>
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pl-6">
+            <Input
+              type="number"
+              label="Días para 'Próximo a Caducar'"
+              value={settings.expiring_soon_days}
+              onChange={handleChange('expiring_soon_days')}
+              disabled={disabled}
+              min={1}
+              max={30}
+              step={1}
+              placeholder="7"
+            />
+
+            <Input
+              type="number"
+              label="Días para Alerta de Caducidad"
+              value={settings.expiration_warning_days}
+              onChange={handleChange('expiration_warning_days')}
+              disabled={disabled}
+              min={1}
+              max={14}
+              step={1}
+              placeholder="3"
+            />
+
+            <Input
+              type="number"
+              label="Umbral de Calidad (0-10)"
+              value={settings.quality_score_threshold}
+              onChange={handleChange('quality_score_threshold')}
+              disabled={disabled}
+              min={0}
+              max={10}
+              step={0.1}
+              placeholder="8.0"
+            />
+          </div>
+        </div>
+
+        {/* Temperature Monitoring */}
+        <div>
+          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
+            <Thermometer className="w-4 h-4 mr-2" />
+            Monitorización de Temperatura
+          </h4>
+          <div className="space-y-4 pl-6">
+            <div className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                id="temperature_monitoring_enabled"
+                checked={settings.temperature_monitoring_enabled}
+                onChange={handleChange('temperature_monitoring_enabled')}
+                disabled={disabled}
+                className="rounded border-[var(--border-primary)]"
+              />
+              <label htmlFor="temperature_monitoring_enabled" className="text-sm text-[var(--text-secondary)]">
+                Habilitar monitorización de temperatura
+              </label>
+            </div>
+
+            {settings.temperature_monitoring_enabled && (
+              <>
+                {/* Refrigeration */}
+                <div>
+                  <label className="block text-xs font-medium text-[var(--text-tertiary)] mb-2">
+                    Refrigeración (°C)
+                  </label>
+                  <div className="grid grid-cols-2 gap-4">
+                    <Input
+                      type="number"
+                      label="Temperatura Mínima"
+                      value={settings.refrigeration_temp_min}
+                      onChange={handleChange('refrigeration_temp_min')}
+                      disabled={disabled}
+                      min={-5}
+                      max={10}
+                      step={0.5}
+                      placeholder="1.0"
+                    />
+                    <Input
+                      type="number"
+                      label="Temperatura Máxima"
+                      value={settings.refrigeration_temp_max}
+                      onChange={handleChange('refrigeration_temp_max')}
+                      disabled={disabled}
+                      min={-5}
+                      max={10}
+                      step={0.5}
+                      placeholder="4.0"
+                    />
+                  </div>
+                </div>
+
+                {/* Freezer */}
+                <div>
+                  <label className="block text-xs font-medium text-[var(--text-tertiary)] mb-2">
+                    Congelador (°C)
+                  </label>
+                  <div className="grid grid-cols-2 gap-4">
+                    <Input
+                      type="number"
+                      label="Temperatura Mínima"
+                      value={settings.freezer_temp_min}
+                      onChange={handleChange('freezer_temp_min')}
+                      disabled={disabled}
+                      min={-30}
+                      max={0}
+                      step={1}
+                      placeholder="-20.0"
+                    />
+                    <Input
+                      type="number"
+                      label="Temperatura Máxima"
+                      value={settings.freezer_temp_max}
+                      onChange={handleChange('freezer_temp_max')}
+                      disabled={disabled}
+                      min={-30}
+                      max={0}
+                      step={1}
+                      placeholder="-15.0"
+                    />
+                  </div>
+                </div>
+
+                {/* Room Temperature */}
+                <div>
+                  <label className="block text-xs font-medium text-[var(--text-tertiary)] mb-2">
+                    Temperatura Ambiente (°C)
+                  </label>
+                  <div className="grid grid-cols-2 gap-4">
+                    <Input
+                      type="number"
+                      label="Temperatura Mínima"
+                      value={settings.room_temp_min}
+                      onChange={handleChange('room_temp_min')}
+                      disabled={disabled}
+                      min={10}
+                      max={35}
+                      step={1}
+                      placeholder="18.0"
+                    />
+                    <Input
+                      type="number"
+                      label="Temperatura Máxima"
+                      value={settings.room_temp_max}
+                      onChange={handleChange('room_temp_max')}
+                      disabled={disabled}
+                      min={10}
+                      max={35}
+                      step={1}
+                      placeholder="25.0"
+                    />
+                  </div>
+                </div>
+
+                {/* Alert Timing */}
+                <div>
+                  <h5 className="text-xs font-medium text-[var(--text-tertiary)] mb-2 flex items-center">
+                    <AlertCircle className="w-3 h-3 mr-1" />
+                    Alertas de Desviación
+                  </h5>
+                  <div className="grid grid-cols-2 gap-4">
+                    <Input
+                      type="number"
+                      label="Desviación Normal (minutos)"
+                      value={settings.temp_deviation_alert_minutes}
+                      onChange={handleChange('temp_deviation_alert_minutes')}
+                      disabled={disabled}
+                      min={1}
+                      max={60}
+                      step={1}
+                      placeholder="15"
+                    />
+                    <Input
+                      type="number"
+                      label="Desviación Crítica (minutos)"
+                      value={settings.critical_temp_deviation_minutes}
+                      onChange={handleChange('critical_temp_deviation_minutes')}
+                      disabled={disabled}
+                      min={1}
+                      max={30}
+                      step={1}
+                      placeholder="5"
+                    />
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default InventorySettingsCard;

frontend/src/pages/app/database/ajustes/cards/OrderSettingsCard.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import { ShoppingBag, Tag, Clock, TrendingUp, MapPin } from 'lucide-react';
+import { Card, Input } from '../../../../../components/ui';
+import type { OrderSettings } from '../../../../../api/types/settings';
+
+interface OrderSettingsCardProps {
+  settings: OrderSettings;
+  onChange: (settings: OrderSettings) => void;
+  disabled?: boolean;
+}
+
+const OrderSettingsCard: React.FC<OrderSettingsCardProps> = ({
+  settings,
+  onChange,
+  disabled = false,
+}) => {
+  const handleChange = (field: keyof OrderSettings) => (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const value = e.target.type === 'checkbox' ? e.target.checked :
+                  e.target.type === 'number' ? parseFloat(e.target.value) :
+                  e.target.value;
+    onChange({ ...settings, [field]: value });
+  };
+
+  return (
+    <Card className="p-6">
+      <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-6 flex items-center">
+        <ShoppingBag className="w-5 h-5 mr-2 text-[var(--color-primary)]" />
+        Pedidos y Reglas de Negocio
+      </h3>
+
+      <div className="space-y-6">
+        {/* Discount & Pricing */}
+        <div>
+          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
+            <Tag className="w-4 h-4 mr-2" />
+            Descuentos y Precios
+          </h4>
+          <div className="space-y-4 pl-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <Input
+                type="number"
+                label="Descuento Máximo (%)"
+                value={settings.max_discount_percentage}
+                onChange={handleChange('max_discount_percentage')}
+                disabled={disabled}
+                min={0}
+                max={100}
+                step={1}
+                placeholder="50.0"
+                helperText="Porcentaje máximo de descuento permitido en pedidos"
+              />
+            </div>
+
+            <div className="space-y-3">
+              <div className="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  id="discount_enabled"
+                  checked={settings.discount_enabled}
+                  onChange={handleChange('discount_enabled')}
+                  disabled={disabled}
+                  className="rounded border-[var(--border-primary)]"
+                />
+                <label htmlFor="discount_enabled" className="text-sm text-[var(--text-secondary)]">
+                  Habilitar descuentos en pedidos
+                </label>
+              </div>
+
+              <div className="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  id="dynamic_pricing_enabled"
+                  checked={settings.dynamic_pricing_enabled}
+                  onChange={handleChange('dynamic_pricing_enabled')}
+                  disabled={disabled}
+                  className="rounded border-[var(--border-primary)]"
+                />
+                <label htmlFor="dynamic_pricing_enabled" className="text-sm text-[var(--text-secondary)]">
+                  Habilitar precios dinámicos
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Delivery Settings */}
+        <div>
+          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
+            <MapPin className="w-4 h-4 mr-2" />
+            Configuración de Entrega
+          </h4>
+          <div className="space-y-4 pl-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <Input
+                type="number"
+                label="Ventana de Entrega Predeterminada (horas)"
+                value={settings.default_delivery_window_hours}
+                onChange={handleChange('default_delivery_window_hours')}
+                disabled={disabled}
+                min={1}
+                max={168}
+                step={1}
+                placeholder="48"
+                helperText="Tiempo predeterminado para la entrega de pedidos"
+              />
+            </div>
+
+            <div className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                id="delivery_tracking_enabled"
+                checked={settings.delivery_tracking_enabled}
+                onChange={handleChange('delivery_tracking_enabled')}
+                disabled={disabled}
+                className="rounded border-[var(--border-primary)]"
+              />
+              <label htmlFor="delivery_tracking_enabled" className="text-sm text-[var(--text-secondary)]">
+                Habilitar seguimiento de entregas
+              </label>
+            </div>
+          </div>
+        </div>
+
+        {/* Info Box */}
+        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+          <div className="flex items-start gap-3">
+            <TrendingUp className="w-5 h-5 text-blue-600 mt-0.5" />
+            <div className="flex-1">
+              <h5 className="text-sm font-semibold text-blue-900 mb-1">
+                Reglas de Negocio
+              </h5>
+              <p className="text-xs text-blue-700 mb-2">
+                Estos ajustes controlan las reglas de negocio que se aplican a los pedidos.
+              </p>
+              <ul className="text-xs text-blue-700 space-y-1 list-disc list-inside">
+                <li><strong>Precios dinámicos:</strong> Ajusta automáticamente los precios según demanda, inventario y otros factores</li>
+                <li><strong>Descuentos:</strong> Permite aplicar descuentos a productos y pedidos dentro del límite establecido</li>
+                <li><strong>Seguimiento de entregas:</strong> Permite a los clientes rastrear sus pedidos en tiempo real</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default OrderSettingsCard;

frontend/src/pages/app/database/ajustes/cards/POSSettingsCard.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { Smartphone, RefreshCw, Clock } from 'lucide-react';
+import { Card, Input } from '../../../../../components/ui';
+import type { POSSettings } from '../../../../../api/types/settings';
+
+interface POSSettingsCardProps {
+  settings: POSSettings;
+  onChange: (settings: POSSettings) => void;
+  disabled?: boolean;
+}
+
+const POSSettingsCard: React.FC<POSSettingsCardProps> = ({
+  settings,
+  onChange,
+  disabled = false,
+}) => {
+  const handleChange = (field: keyof POSSettings) => (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const value = e.target.type === 'checkbox' ? e.target.checked :
+                  e.target.type === 'number' ? parseInt(e.target.value, 10) :
+                  e.target.value;
+    onChange({ ...settings, [field]: value });
+  };
+
+  return (
+    <Card className="p-6">
+      <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-6 flex items-center">
+        <Smartphone className="w-5 h-5 mr-2 text-[var(--color-primary)]" />
+        Punto de Venta (POS)
+      </h3>
+
+      <div className="space-y-6">
+        {/* Sync Settings */}
+        <div>
+          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
+            <RefreshCw className="w-4 h-4 mr-2" />
+            Sincronización
+          </h4>
+          <div className="space-y-4 pl-6">
+            <Input
+              type="number"
+              label="Intervalo de Sincronización (minutos)"
+              value={settings.sync_interval_minutes}
+              onChange={handleChange('sync_interval_minutes')}
+              disabled={disabled}
+              min={1}
+              max={60}
+              step={1}
+              placeholder="5"
+              helperText="Frecuencia con la que se sincroniza el POS con el sistema central"
+            />
+
+            <div className="space-y-3">
+              <div className="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  id="auto_sync_products"
+                  checked={settings.auto_sync_products}
+                  onChange={handleChange('auto_sync_products')}
+                  disabled={disabled}
+                  className="rounded border-[var(--border-primary)]"
+                />
+                <label htmlFor="auto_sync_products" className="text-sm text-[var(--text-secondary)]">
+                  Sincronización automática de productos
+                </label>
+              </div>
+
+              <div className="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  id="auto_sync_transactions"
+                  checked={settings.auto_sync_transactions}
+                  onChange={handleChange('auto_sync_transactions')}
+                  disabled={disabled}
+                  className="rounded border-[var(--border-primary)]"
+                />
+                <label htmlFor="auto_sync_transactions" className="text-sm text-[var(--text-secondary)]">
+                  Sincronización automática de transacciones
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Info Box */}
+        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+          <div className="flex items-start gap-3">
+            <Smartphone className="w-5 h-5 text-blue-600 mt-0.5" />
+            <div className="flex-1">
+              <h5 className="text-sm font-semibold text-blue-900 mb-1">
+                Integración POS
+              </h5>
+              <p className="text-xs text-blue-700 mb-2">
+                Estos ajustes controlan cómo se sincroniza la información entre el sistema central
+                y los terminales de punto de venta.
+              </p>
+              <ul className="text-xs text-blue-700 space-y-1 list-disc list-inside">
+                <li>Un intervalo más corto mantiene los datos más actualizados pero consume más recursos</li>
+                <li>La sincronización automática garantiza que los cambios se reflejen inmediatamente</li>
+                <li>Desactivar la sincronización automática requiere sincronización manual</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default POSSettingsCard;

frontend/src/pages/app/database/ajustes/cards/ProcurementSettingsCard.tsx

@@ -0,0 +1,191 @@
+import React from 'react';
+import { ShoppingCart, TrendingUp, Clock, AlertTriangle } from 'lucide-react';
+import { Card, Input } from '../../../../../components/ui';
+import type { ProcurementSettings } from '../../../../../api/types/settings';
+
+interface ProcurementSettingsCardProps {
+  settings: ProcurementSettings;
+  onChange: (settings: ProcurementSettings) => void;
+  disabled?: boolean;
+}
+
+const ProcurementSettingsCard: React.FC<ProcurementSettingsCardProps> = ({
+  settings,
+  onChange,
+  disabled = false,
+}) => {
+  const handleChange = (field: keyof ProcurementSettings) => (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const value = e.target.type === 'checkbox' ? e.target.checked :
+                  e.target.type === 'number' ? parseFloat(e.target.value) :
+                  e.target.value;
+    onChange({ ...settings, [field]: value });
+  };
+
+  return (
+    <Card className="p-6">
+      <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-6 flex items-center">
+        <ShoppingCart className="w-5 h-5 mr-2 text-[var(--color-primary)]" />
+        Compras y Aprovisionamiento
+      </h3>
+
+      <div className="space-y-6">
+        {/* Auto-Approval Settings */}
+        <div>
+          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
+            <TrendingUp className="w-4 h-4 mr-2" />
+            Auto-Aprobación de Órdenes de Compra
+          </h4>
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pl-6">
+            <div className="flex items-center gap-2 md:col-span-2 xl:col-span-3">
+              <input
+                type="checkbox"
+                id="auto_approve_enabled"
+                checked={settings.auto_approve_enabled}
+                onChange={handleChange('auto_approve_enabled')}
+                disabled={disabled}
+                className="rounded border-[var(--border-primary)]"
+              />
+              <label htmlFor="auto_approve_enabled" className="text-sm text-[var(--text-secondary)]">
+                Habilitar auto-aprobación de órdenes de compra
+              </label>
+            </div>
+
+            <Input
+              type="number"
+              label="Umbral de Auto-Aprobación (EUR)"
+              value={settings.auto_approve_threshold_eur}
+              onChange={handleChange('auto_approve_threshold_eur')}
+              disabled={disabled || !settings.auto_approve_enabled}
+              min={0}
+              max={10000}
+              step={50}
+              placeholder="500.0"
+            />
+
+            <Input
+              type="number"
+              label="Puntuación Mínima de Proveedor"
+              value={settings.auto_approve_min_supplier_score}
+              onChange={handleChange('auto_approve_min_supplier_score')}
+              disabled={disabled || !settings.auto_approve_enabled}
+              min={0}
+              max={1}
+              step={0.01}
+              placeholder="0.80"
+            />
+
+            <div className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                id="require_approval_new_suppliers"
+                checked={settings.require_approval_new_suppliers}
+                onChange={handleChange('require_approval_new_suppliers')}
+                disabled={disabled}
+                className="rounded border-[var(--border-primary)]"
+              />
+              <label htmlFor="require_approval_new_suppliers" className="text-sm text-[var(--text-secondary)]">
+                Requiere aprobación para nuevos proveedores
+              </label>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                id="require_approval_critical_items"
+                checked={settings.require_approval_critical_items}
+                onChange={handleChange('require_approval_critical_items')}
+                disabled={disabled}
+                className="rounded border-[var(--border-primary)]"
+              />
+              <label htmlFor="require_approval_critical_items" className="text-sm text-[var(--text-secondary)]">
+                Requiere aprobación para artículos críticos
+              </label>
+            </div>
+          </div>
+        </div>
+
+        {/* Planning & Forecasting */}
+        <div>
+          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
+            <Clock className="w-4 h-4 mr-2" />
+            Planificación y Previsión
+          </h4>
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pl-6">
+            <Input
+              type="number"
+              label="Tiempo de Entrega (días)"
+              value={settings.procurement_lead_time_days}
+              onChange={handleChange('procurement_lead_time_days')}
+              disabled={disabled}
+              min={1}
+              max={30}
+              step={1}
+              placeholder="3"
+            />
+
+            <Input
+              type="number"
+              label="Días de Previsión de Demanda"
+              value={settings.demand_forecast_days}
+              onChange={handleChange('demand_forecast_days')}
+              disabled={disabled}
+              min={1}
+              max={90}
+              step={1}
+              placeholder="14"
+            />
+
+            <Input
+              type="number"
+              label="Stock de Seguridad (%)"
+              value={settings.safety_stock_percentage}
+              onChange={handleChange('safety_stock_percentage')}
+              disabled={disabled}
+              min={0}
+              max={100}
+              step={5}
+              placeholder="20.0"
+            />
+          </div>
+        </div>
+
+        {/* Approval Workflow */}
+        <div>
+          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
+            <AlertTriangle className="w-4 h-4 mr-2" />
+            Flujo de Aprobación
+          </h4>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pl-6">
+            <Input
+              type="number"
+              label="Recordatorio de Aprobación (horas)"
+              value={settings.po_approval_reminder_hours}
+              onChange={handleChange('po_approval_reminder_hours')}
+              disabled={disabled}
+              min={1}
+              max={168}
+              step={1}
+              placeholder="24"
+            />
+
+            <Input
+              type="number"
+              label="Escalación Crítica (horas)"
+              value={settings.po_critical_escalation_hours}
+              onChange={handleChange('po_critical_escalation_hours')}
+              disabled={disabled}
+              min={1}
+              max={72}
+              step={1}
+              placeholder="12"
+            />
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default ProcurementSettingsCard;

frontend/src/pages/app/database/ajustes/cards/ProductionSettingsCard.tsx

@@ -0,0 +1,281 @@
+import React from 'react';
+import { Factory, Calendar, TrendingUp, Clock, DollarSign } from 'lucide-react';
+import { Card, Input } from '../../../../../components/ui';
+import type { ProductionSettings } from '../../../../../api/types/settings';
+
+interface ProductionSettingsCardProps {
+  settings: ProductionSettings;
+  onChange: (settings: ProductionSettings) => void;
+  disabled?: boolean;
+}
+
+const ProductionSettingsCard: React.FC<ProductionSettingsCardProps> = ({
+  settings,
+  onChange,
+  disabled = false,
+}) => {
+  const handleChange = (field: keyof ProductionSettings) => (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const value = e.target.type === 'checkbox' ? e.target.checked :
+                  e.target.type === 'number' ? parseFloat(e.target.value) :
+                  e.target.value;
+    onChange({ ...settings, [field]: value });
+  };
+
+  return (
+    <Card className="p-6">
+      <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-6 flex items-center">
+        <Factory className="w-5 h-5 mr-2 text-[var(--color-primary)]" />
+        Producción
+      </h3>
+
+      <div className="space-y-6">
+        {/* Planning & Batch Size */}
+        <div>
+          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
+            <Calendar className="w-4 h-4 mr-2" />
+            Planificación y Lotes
+          </h4>
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pl-6">
+            <Input
+              type="number"
+              label="Horizonte de Planificación (días)"
+              value={settings.planning_horizon_days}
+              onChange={handleChange('planning_horizon_days')}
+              disabled={disabled}
+              min={1}
+              max={30}
+              step={1}
+              placeholder="7"
+            />
+
+            <Input
+              type="number"
+              label="Tamaño Mínimo de Lote"
+              value={settings.minimum_batch_size}
+              onChange={handleChange('minimum_batch_size')}
+              disabled={disabled}
+              min={0.1}
+              max={100}
+              step={0.1}
+              placeholder="1.0"
+            />
+
+            <Input
+              type="number"
+              label="Tamaño Máximo de Lote"
+              value={settings.maximum_batch_size}
+              onChange={handleChange('maximum_batch_size')}
+              disabled={disabled}
+              min={1}
+              max={1000}
+              step={1}
+              placeholder="100.0"
+            />
+
+            <Input
+              type="number"
+              label="Buffer de Producción (%)"
+              value={settings.production_buffer_percentage}
+              onChange={handleChange('production_buffer_percentage')}
+              disabled={disabled}
+              min={0}
+              max={50}
+              step={1}
+              placeholder="10.0"
+            />
+
+            <div className="flex items-center gap-2 md:col-span-2 xl:col-span-2">
+              <input
+                type="checkbox"
+                id="schedule_optimization_enabled"
+                checked={settings.schedule_optimization_enabled}
+                onChange={handleChange('schedule_optimization_enabled')}
+                disabled={disabled}
+                className="rounded border-[var(--border-primary)]"
+              />
+              <label htmlFor="schedule_optimization_enabled" className="text-sm text-[var(--text-secondary)]">
+                Habilitar optimización de horarios
+              </label>
+            </div>
+          </div>
+        </div>
+
+        {/* Capacity & Working Hours */}
+        <div>
+          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
+            <Clock className="w-4 h-4 mr-2" />
+            Capacidad y Jornada Laboral
+          </h4>
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pl-6">
+            <Input
+              type="number"
+              label="Horas de Trabajo por Día"
+              value={settings.working_hours_per_day}
+              onChange={handleChange('working_hours_per_day')}
+              disabled={disabled}
+              min={1}
+              max={24}
+              step={1}
+              placeholder="12"
+            />
+
+            <Input
+              type="number"
+              label="Máximo Horas Extra"
+              value={settings.max_overtime_hours}
+              onChange={handleChange('max_overtime_hours')}
+              disabled={disabled}
+              min={0}
+              max={12}
+              step={1}
+              placeholder="4"
+            />
+
+            <Input
+              type="number"
+              label="Objetivo Utilización Capacidad"
+              value={settings.capacity_utilization_target}
+              onChange={handleChange('capacity_utilization_target')}
+              disabled={disabled}
+              min={0.5}
+              max={1}
+              step={0.01}
+              placeholder="0.85"
+            />
+
+            <Input
+              type="number"
+              label="Umbral de Alerta de Capacidad"
+              value={settings.capacity_warning_threshold}
+              onChange={handleChange('capacity_warning_threshold')}
+              disabled={disabled}
+              min={0.7}
+              max={1}
+              step={0.01}
+              placeholder="0.95"
+            />
+          </div>
+        </div>
+
+        {/* Quality Control */}
+        <div>
+          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
+            <TrendingUp className="w-4 h-4 mr-2" />
+            Control de Calidad
+          </h4>
+          <div className="space-y-4 pl-6">
+            <div className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                id="quality_check_enabled"
+                checked={settings.quality_check_enabled}
+                onChange={handleChange('quality_check_enabled')}
+                disabled={disabled}
+                className="rounded border-[var(--border-primary)]"
+              />
+              <label htmlFor="quality_check_enabled" className="text-sm text-[var(--text-secondary)]">
+                Habilitar verificación de calidad
+              </label>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <Input
+                type="number"
+                label="Rendimiento Mínimo (%)"
+                value={settings.minimum_yield_percentage}
+                onChange={handleChange('minimum_yield_percentage')}
+                disabled={disabled || !settings.quality_check_enabled}
+                min={50}
+                max={100}
+                step={1}
+                placeholder="85.0"
+              />
+
+              <Input
+                type="number"
+                label="Umbral de Puntuación de Calidad (0-10)"
+                value={settings.quality_score_threshold}
+                onChange={handleChange('quality_score_threshold')}
+                disabled={disabled || !settings.quality_check_enabled}
+                min={0}
+                max={10}
+                step={0.1}
+                placeholder="8.0"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Time Buffers */}
+        <div>
+          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
+            <Clock className="w-4 h-4 mr-2" />
+            Tiempos de Preparación
+          </h4>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pl-6">
+            <Input
+              type="number"
+              label="Tiempo de Preparación (minutos)"
+              value={settings.prep_time_buffer_minutes}
+              onChange={handleChange('prep_time_buffer_minutes')}
+              disabled={disabled}
+              min={0}
+              max={120}
+              step={5}
+              placeholder="30"
+            />
+
+            <Input
+              type="number"
+              label="Tiempo de Limpieza (minutos)"
+              value={settings.cleanup_time_buffer_minutes}
+              onChange={handleChange('cleanup_time_buffer_minutes')}
+              disabled={disabled}
+              min={0}
+              max={120}
+              step={5}
+              placeholder="15"
+            />
+          </div>
+        </div>
+
+        {/* Cost Settings */}
+        <div>
+          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
+            <DollarSign className="w-4 h-4 mr-2" />
+            Costes
+          </h4>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pl-6">
+            <Input
+              type="number"
+              label="Coste Laboral por Hora (EUR)"
+              value={settings.labor_cost_per_hour_eur}
+              onChange={handleChange('labor_cost_per_hour_eur')}
+              disabled={disabled}
+              min={5}
+              max={100}
+              step={0.5}
+              placeholder="15.0"
+            />
+
+            <Input
+              type="number"
+              label="Porcentaje de Gastos Generales (%)"
+              value={settings.overhead_cost_percentage}
+              onChange={handleChange('overhead_cost_percentage')}
+              disabled={disabled}
+              min={0}
+              max={50}
+              step={1}
+              placeholder="20.0"
+            />
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default ProductionSettingsCard;

frontend/src/pages/app/database/ajustes/cards/SupplierSettingsCard.tsx

@@ -0,0 +1,196 @@
+import React from 'react';
+import { Truck, Calendar, TrendingUp, AlertTriangle, DollarSign } from 'lucide-react';
+import { Card, Input } from '../../../../../components/ui';
+import type { SupplierSettings } from '../../../../../api/types/settings';
+
+interface SupplierSettingsCardProps {
+  settings: SupplierSettings;
+  onChange: (settings: SupplierSettings) => void;
+  disabled?: boolean;
+}
+
+const SupplierSettingsCard: React.FC<SupplierSettingsCardProps> = ({
+  settings,
+  onChange,
+  disabled = false,
+}) => {
+  const handleChange = (field: keyof SupplierSettings) => (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const value = e.target.type === 'number' ? parseFloat(e.target.value) : e.target.value;
+    onChange({ ...settings, [field]: value });
+  };
+
+  return (
+    <Card className="p-6">
+      <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-6 flex items-center">
+        <Truck className="w-5 h-5 mr-2 text-[var(--color-primary)]" />
+        Gestión de Proveedores
+      </h3>
+
+      <div className="space-y-6">
+        {/* Default Terms */}
+        <div>
+          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
+            <Calendar className="w-4 h-4 mr-2" />
+            Términos Predeterminados
+          </h4>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pl-6">
+            <Input
+              type="number"
+              label="Plazo de Pago Predeterminado (días)"
+              value={settings.default_payment_terms_days}
+              onChange={handleChange('default_payment_terms_days')}
+              disabled={disabled}
+              min={1}
+              max={90}
+              step={1}
+              placeholder="30"
+            />
+
+            <Input
+              type="number"
+              label="Días de Entrega Predeterminados"
+              value={settings.default_delivery_days}
+              onChange={handleChange('default_delivery_days')}
+              disabled={disabled}
+              min={1}
+              max={30}
+              step={1}
+              placeholder="3"
+            />
+          </div>
+        </div>
+
+        {/* Performance Thresholds - Delivery */}
+        <div>
+          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
+            <TrendingUp className="w-4 h-4 mr-2" />
+            Umbrales de Rendimiento - Entregas
+          </h4>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pl-6">
+            <Input
+              type="number"
+              label="Tasa de Entrega Excelente (%)"
+              value={settings.excellent_delivery_rate}
+              onChange={handleChange('excellent_delivery_rate')}
+              disabled={disabled}
+              min={90}
+              max={100}
+              step={0.5}
+              placeholder="95.0"
+            />
+
+            <Input
+              type="number"
+              label="Tasa de Entrega Buena (%)"
+              value={settings.good_delivery_rate}
+              onChange={handleChange('good_delivery_rate')}
+              disabled={disabled}
+              min={80}
+              max={99}
+              step={0.5}
+              placeholder="90.0"
+            />
+          </div>
+        </div>
+
+        {/* Performance Thresholds - Quality */}
+        <div>
+          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
+            <TrendingUp className="w-4 h-4 mr-2" />
+            Umbrales de Rendimiento - Calidad
+          </h4>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pl-6">
+            <Input
+              type="number"
+              label="Tasa de Calidad Excelente (%)"
+              value={settings.excellent_quality_rate}
+              onChange={handleChange('excellent_quality_rate')}
+              disabled={disabled}
+              min={90}
+              max={100}
+              step={0.5}
+              placeholder="98.0"
+            />
+
+            <Input
+              type="number"
+              label="Tasa de Calidad Buena (%)"
+              value={settings.good_quality_rate}
+              onChange={handleChange('good_quality_rate')}
+              disabled={disabled}
+              min={80}
+              max={99}
+              step={0.5}
+              placeholder="95.0"
+            />
+          </div>
+        </div>
+
+        {/* Critical Alerts */}
+        <div>
+          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
+            <AlertTriangle className="w-4 h-4 mr-2" />
+            Alertas Críticas
+          </h4>
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pl-6">
+            <Input
+              type="number"
+              label="Retraso de Entrega Crítico (horas)"
+              value={settings.critical_delivery_delay_hours}
+              onChange={handleChange('critical_delivery_delay_hours')}
+              disabled={disabled}
+              min={1}
+              max={168}
+              step={1}
+              placeholder="24"
+            />
+
+            <Input
+              type="number"
+              label="Tasa de Rechazo de Calidad Crítica (%)"
+              value={settings.critical_quality_rejection_rate}
+              onChange={handleChange('critical_quality_rejection_rate')}
+              disabled={disabled}
+              min={0}
+              max={50}
+              step={0.5}
+              placeholder="10.0"
+            />
+
+            <Input
+              type="number"
+              label="Varianza de Coste Alta (%)"
+              value={settings.high_cost_variance_percentage}
+              onChange={handleChange('high_cost_variance_percentage')}
+              disabled={disabled}
+              min={0}
+              max={100}
+              step={1}
+              placeholder="15.0"
+            />
+          </div>
+        </div>
+
+        {/* Info Box */}
+        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+          <div className="flex items-start gap-3">
+            <TrendingUp className="w-5 h-5 text-blue-600 mt-0.5" />
+            <div className="flex-1">
+              <h5 className="text-sm font-semibold text-blue-900 mb-1">
+                Evaluación de Proveedores
+              </h5>
+              <p className="text-xs text-blue-700">
+                Estos umbrales se utilizan para evaluar automáticamente el rendimiento de los proveedores.
+                Los proveedores con rendimiento por debajo de los umbrales "buenos" recibirán alertas automáticas.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default SupplierSettingsCard;

frontend/src/pages/app/operations/pos/POSPage.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useMemo } from 'react';
-import { Plus, Minus, ShoppingCart, CreditCard, Banknote, Calculator, User, Receipt, Package, Euro, TrendingUp, Clock, ToggleLeft, ToggleRight, Settings, Zap, Wifi, WifiOff, AlertCircle, CheckCircle, Loader, Trash2, ChevronDown, ChevronUp } from 'lucide-react';
-import { Button, Card, StatsGrid, StatusCard, getStatusColor } from '../../../../components/ui';
+import { Plus, Minus, ShoppingCart, CreditCard, Banknote, Calculator, User, Receipt, Package, Euro, TrendingUp, Clock, ToggleLeft, ToggleRight, Settings, Zap, Wifi, WifiOff, AlertCircle, CheckCircle, Loader, Trash2, X, ChevronRight, ChevronLeft } from 'lucide-react';
+import { Button, Card, StatusCard, getStatusColor, Badge } from '../../../../components/ui';
 import { PageHeader } from '../../../../components/layout';
 import { LoadingSpinner } from '../../../../components/ui';
 import { formatters } from '../../../../components/ui/Stats/StatsPresets';
@@ -8,7 +8,7 @@ import { useIngredients } from '../../../../api/hooks/inventory';
 import { useTenantId } from '../../../../hooks/useTenantId';
 import { ProductType, ProductCategory, IngredientResponse } from '../../../../api/types/inventory';
 import { useToast } from '../../../../hooks/ui/useToast';
-import { usePOSConfigurationData, usePOSConfigurationManager } from '../../../../api/hooks/pos';
+import { usePOSConfigurationData, usePOSConfigurationManager, usePOSTransactions, usePOSTransactionsDashboard, usePOSTransaction } from '../../../../api/hooks/pos';
 import { POSConfiguration } from '../../../../api/types/pos';
 import { posService } from '../../../../api/services/pos';
 import { bakeryColors } from '../../../../styles/colors';
@@ -28,11 +28,515 @@ interface CartItem {
   stock: number;
 }
 
+// Transactions Section Component
+const TransactionsSection: React.FC<{ tenantId: string }> = ({ tenantId }) => {
+  const [page, setPage] = useState(0);
+  const [selectedTransactionId, setSelectedTransactionId] = useState<string | null>(null);
+  const [showDetailModal, setShowDetailModal] = useState(false);
+  const limit = 10;
+
+  // Fetch transactions
+  const { data: transactionsData, isLoading: transactionsLoading } = usePOSTransactions({
+    tenant_id: tenantId,
+    limit,
+    offset: page * limit,
+  });
+
+  // Fetch dashboard summary
+  const { data: dashboardData, isLoading: dashboardLoading } = usePOSTransactionsDashboard({
+    tenant_id: tenantId,
+  });
+
+  // Fetch selected transaction details
+  const { data: selectedTransaction, isLoading: detailLoading } = usePOSTransaction(
+    {
+      tenant_id: tenantId,
+      transaction_id: selectedTransactionId || '',
+    },
+    {
+      enabled: !!selectedTransactionId,
+    }
+  );
+
+  const handleViewDetails = (transactionId: string) => {
+    setSelectedTransactionId(transactionId);
+    setShowDetailModal(true);
+  };
+
+  const handleCloseDetail = () => {
+    setShowDetailModal(false);
+    setSelectedTransactionId(null);
+  };
+
+  if (transactionsLoading || dashboardLoading) {
+    return (
+      <Card className="p-6">
+        <div className="flex items-center justify-center h-32">
+          <LoadingSpinner text="Cargando transacciones..." />
+        </div>
+      </Card>
+    );
+  }
+
+  const transactions = transactionsData?.transactions || [];
+  const summary = transactionsData?.summary;
+  const dashboard = dashboardData;
+
+  return (
+    <>
+      {/* Dashboard Stats */}
+      {dashboard && (
+        <Card className="p-6">
+          <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4 flex items-center">
+            <Receipt className="w-5 h-5 mr-2 text-blue-500" />
+            Resumen de Transacciones
+          </h3>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="p-4 bg-[var(--bg-secondary)] rounded-lg">
+              <div className="text-sm text-[var(--text-secondary)] mb-1">Hoy</div>
+              <div className="text-2xl font-bold text-[var(--text-primary)]">{dashboard.total_transactions_today}</div>
+              <div className="text-sm text-[var(--text-tertiary)] mt-1">
+                {formatters.currency(dashboard.revenue_today)}
+              </div>
+            </div>
+            <div className="p-4 bg-[var(--bg-secondary)] rounded-lg">
+              <div className="text-sm text-[var(--text-secondary)] mb-1">Esta Semana</div>
+              <div className="text-2xl font-bold text-[var(--text-primary)]">{dashboard.total_transactions_this_week}</div>
+              <div className="text-sm text-[var(--text-tertiary)] mt-1">
+                {formatters.currency(dashboard.revenue_this_week)}
+              </div>
+            </div>
+            <div className="p-4 bg-[var(--bg-secondary)] rounded-lg">
+              <div className="text-sm text-[var(--text-secondary)] mb-1">Este Mes</div>
+              <div className="text-2xl font-bold text-[var(--text-primary)]">{dashboard.total_transactions_this_month}</div>
+              <div className="text-sm text-[var(--text-tertiary)] mt-1">
+                {formatters.currency(dashboard.revenue_this_month)}
+              </div>
+            </div>
+          </div>
+        </Card>
+      )}
+
+      {/* Transactions List */}
+      <Card className="p-6">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-lg font-semibold text-[var(--text-primary)] flex items-center">
+            <Receipt className="w-5 h-5 mr-2 text-green-500" />
+            Transacciones Recientes
+          </h3>
+          {summary && (
+            <div className="flex items-center gap-4 text-sm text-[var(--text-secondary)]">
+              <div className="flex items-center gap-1">
+                <CheckCircle className="w-4 h-4 text-green-500" />
+                <span>{summary.sync_status.synced} sincronizadas</span>
+              </div>
+              <div className="flex items-center gap-1">
+                <Clock className="w-4 h-4 text-yellow-500" />
+                <span>{summary.sync_status.pending} pendientes</span>
+              </div>
+              {summary.sync_status.failed > 0 && (
+                <div className="flex items-center gap-1">
+                  <AlertCircle className="w-4 h-4 text-red-500" />
+                  <span>{summary.sync_status.failed} fallidas</span>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {transactions.length === 0 ? (
+          <div className="text-center py-12">
+            <Receipt className="mx-auto h-12 w-12 text-[var(--text-tertiary)] mb-4 opacity-30" />
+            <h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
+              No hay transacciones
+            </h3>
+            <p className="text-[var(--text-secondary)]">
+              Las transacciones sincronizadas desde tus sistemas POS aparecerán aquí
+            </p>
+          </div>
+        ) : (
+          <>
+            {/* Desktop Table View - Hidden on mobile */}
+            <div className="hidden md:block overflow-x-auto">
+              <table className="w-full">
+                <thead className="bg-[var(--bg-secondary)]">
+                  <tr>
+                    <th className="px-4 py-3 text-left text-sm font-semibold text-[var(--text-primary)]">ID Transacción</th>
+                    <th className="px-4 py-3 text-left text-sm font-semibold text-[var(--text-primary)]">Fecha</th>
+                    <th className="px-4 py-3 text-left text-sm font-semibold text-[var(--text-primary)]">Total</th>
+                    <th className="px-4 py-3 text-left text-sm font-semibold text-[var(--text-primary)]">Método Pago</th>
+                    <th className="px-4 py-3 text-left text-sm font-semibold text-[var(--text-primary)]">Estado</th>
+                    <th className="px-4 py-3 text-left text-sm font-semibold text-[var(--text-primary)]">Sync</th>
+                    <th className="px-4 py-3 text-left text-sm font-semibold text-[var(--text-primary)]">Acciones</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-[var(--border-primary)]">
+                  {transactions.map((transaction) => (
+                    <tr key={transaction.id} className="hover:bg-[var(--bg-secondary)] transition-colors">
+                      <td className="px-4 py-3 text-sm text-[var(--text-primary)] font-mono">
+                        {transaction.external_transaction_id}
+                      </td>
+                      <td className="px-4 py-3 text-sm text-[var(--text-secondary)]">
+                        {new Date(transaction.transaction_date).toLocaleString('es-ES', {
+                          month: 'short',
+                          day: 'numeric',
+                          hour: '2-digit',
+                          minute: '2-digit',
+                        })}
+                      </td>
+                      <td className="px-4 py-3 text-sm font-semibold text-[var(--text-primary)]">
+                        {formatters.currency(transaction.total_amount)}
+                      </td>
+                      <td className="px-4 py-3 text-sm text-[var(--text-secondary)] capitalize">
+                        {transaction.payment_method || 'N/A'}
+                      </td>
+                      <td className="px-4 py-3">
+                        <Badge
+                          variant={
+                            transaction.status === 'completed' ? 'success' :
+                            transaction.status === 'pending' ? 'warning' :
+                            'error'
+                          }
+                          size="sm"
+                        >
+                          {transaction.status}
+                        </Badge>
+                      </td>
+                      <td className="px-4 py-3">
+                        {transaction.is_synced_to_sales ? (
+                          <CheckCircle className="w-5 h-5 text-green-500" />
+                        ) : (
+                          <Clock className="w-5 h-5 text-yellow-500" />
+                        )}
+                      </td>
+                      <td className="px-4 py-3">
+                        <button
+                          onClick={() => handleViewDetails(transaction.id)}
+                          className="text-sm text-blue-600 hover:text-blue-800 font-medium"
+                        >
+                          Ver detalles
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            {/* Mobile Card View - Hidden on desktop */}
+            <div className="md:hidden space-y-4">
+              {transactions.map((transaction) => (
+                <div
+                  key={transaction.id}
+                  className="bg-[var(--bg-secondary)] rounded-lg p-4 border border-[var(--border-primary)] hover:border-[var(--border-secondary)] transition-colors cursor-pointer"
+                  onClick={() => handleViewDetails(transaction.id)}
+                >
+                  {/* Header Row */}
+                  <div className="flex items-start justify-between mb-3">
+                    <div className="flex-1">
+                      <div className="text-xs font-mono text-[var(--text-tertiary)] mb-1">
+                        {transaction.external_transaction_id}
+                      </div>
+                      <div className="text-sm text-[var(--text-secondary)]">
+                        {new Date(transaction.transaction_date).toLocaleString('es-ES', {
+                          month: 'short',
+                          day: 'numeric',
+                          hour: '2-digit',
+                          minute: '2-digit',
+                        })}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      {transaction.is_synced_to_sales ? (
+                        <CheckCircle className="w-5 h-5 text-green-500" />
+                      ) : (
+                        <Clock className="w-5 h-5 text-yellow-500" />
+                      )}
+                      <Badge
+                        variant={
+                          transaction.status === 'completed' ? 'success' :
+                          transaction.status === 'pending' ? 'warning' :
+                          'error'
+                        }
+                        size="sm"
+                      >
+                        {transaction.status}
+                      </Badge>
+                    </div>
+                  </div>
+
+                  {/* Amount and Payment */}
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <div className="text-2xl font-bold text-[var(--text-primary)]">
+                        {formatters.currency(transaction.total_amount)}
+                      </div>
+                      <div className="text-sm text-[var(--text-secondary)] capitalize mt-1">
+                        {transaction.payment_method || 'N/A'}
+                      </div>
+                    </div>
+                    <ChevronRight className="w-5 h-5 text-[var(--text-tertiary)]" />
+                  </div>
+
+                  {/* Items Count */}
+                  {transaction.items && transaction.items.length > 0 && (
+                    <div className="mt-3 pt-3 border-t border-[var(--border-primary)] text-xs text-[var(--text-secondary)]">
+                      {transaction.items.length} {transaction.items.length === 1 ? 'artículo' : 'artículos'}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+
+            {/* Pagination */}
+            {transactionsData && (transactionsData.has_more || page > 0) && (
+              <div className="mt-6 flex items-center justify-between">
+                <Button
+                  onClick={() => setPage(Math.max(0, page - 1))}
+                  disabled={page === 0}
+                  variant="secondary"
+                  className="flex items-center gap-2"
+                >
+                  <ChevronLeft className="w-4 h-4" />
+                  <span className="hidden sm:inline">Anterior</span>
+                </Button>
+                <span className="text-sm text-[var(--text-secondary)]">
+                  Página {page + 1}
+                </span>
+                <Button
+                  onClick={() => setPage(page + 1)}
+                  disabled={!transactionsData.has_more}
+                  variant="secondary"
+                  className="flex items-center gap-2"
+                >
+                  <span className="hidden sm:inline">Siguiente</span>
+                  <ChevronRight className="w-4 h-4" />
+                </Button>
+              </div>
+            )}
+          </>
+        )}
+      </Card>
+
+      {/* Transaction Detail Modal */}
+      {showDetailModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+          <div className="bg-[var(--bg-primary)] rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+            {/* Modal Header */}
+            <div className="sticky top-0 bg-[var(--bg-primary)] border-b border-[var(--border-primary)] px-6 py-4 flex items-center justify-between">
+              <h2 className="text-xl font-semibold text-[var(--text-primary)]">
+                Detalles de Transacción
+              </h2>
+              <button
+                onClick={handleCloseDetail}
+                className="text-[var(--text-tertiary)] hover:text-[var(--text-primary)] transition-colors"
+              >
+                <X className="w-6 h-6" />
+              </button>
+            </div>
+
+            {/* Modal Content */}
+            <div className="p-6">
+              {detailLoading ? (
+                <div className="flex items-center justify-center py-12">
+                  <LoadingSpinner text="Cargando detalles..." />
+                </div>
+              ) : selectedTransaction ? (
+                <div className="space-y-6">
+                  {/* Transaction Header */}
+                  <div className="bg-[var(--bg-secondary)] rounded-lg p-4">
+                    <div className="flex items-start justify-between mb-4">
+                      <div>
+                        <div className="text-sm text-[var(--text-secondary)] mb-1">ID Transacción</div>
+                        <div className="font-mono text-lg text-[var(--text-primary)]">
+                          {selectedTransaction.external_transaction_id}
+                        </div>
+                      </div>
+                      <Badge
+                        variant={
+                          selectedTransaction.status === 'completed' ? 'success' :
+                          selectedTransaction.status === 'pending' ? 'warning' :
+                          'error'
+                        }
+                        size="md"
+                      >
+                        {selectedTransaction.status}
+                      </Badge>
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-4">
+                      <div>
+                        <div className="text-sm text-[var(--text-secondary)] mb-1">Fecha</div>
+                        <div className="text-sm text-[var(--text-primary)]">
+                          {new Date(selectedTransaction.transaction_date).toLocaleString('es-ES', {
+                            weekday: 'short',
+                            year: 'numeric',
+                            month: 'short',
+                            day: 'numeric',
+                            hour: '2-digit',
+                            minute: '2-digit',
+                          })}
+                        </div>
+                      </div>
+                      <div>
+                        <div className="text-sm text-[var(--text-secondary)] mb-1">Sistema POS</div>
+                        <div className="text-sm text-[var(--text-primary)] capitalize">
+                          {selectedTransaction.pos_system}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Payment Information */}
+                  <div>
+                    <h3 className="text-sm font-semibold text-[var(--text-primary)] mb-3">Información de Pago</h3>
+                    <div className="bg-[var(--bg-secondary)] rounded-lg p-4 space-y-3">
+                      <div className="flex items-center justify-between">
+                        <span className="text-sm text-[var(--text-secondary)]">Método de pago</span>
+                        <span className="text-sm font-medium text-[var(--text-primary)] capitalize">
+                          {selectedTransaction.payment_method || 'N/A'}
+                        </span>
+                      </div>
+                      <div className="flex items-center justify-between">
+                        <span className="text-sm text-[var(--text-secondary)]">Subtotal</span>
+                        <span className="text-sm text-[var(--text-primary)]">
+                          {formatters.currency(selectedTransaction.subtotal)}
+                        </span>
+                      </div>
+                      <div className="flex items-center justify-between">
+                        <span className="text-sm text-[var(--text-secondary)]">Impuestos</span>
+                        <span className="text-sm text-[var(--text-primary)]">
+                          {formatters.currency(selectedTransaction.tax_amount)}
+                        </span>
+                      </div>
+                      {selectedTransaction.discount_amount && parseFloat(String(selectedTransaction.discount_amount)) > 0 && (
+                        <div className="flex items-center justify-between">
+                          <span className="text-sm text-[var(--text-secondary)]">Descuento</span>
+                          <span className="text-sm text-green-600">
+                            -{formatters.currency(selectedTransaction.discount_amount)}
+                          </span>
+                        </div>
+                      )}
+                      {selectedTransaction.tip_amount && parseFloat(String(selectedTransaction.tip_amount)) > 0 && (
+                        <div className="flex items-center justify-between">
+                          <span className="text-sm text-[var(--text-secondary)]">Propina</span>
+                          <span className="text-sm text-[var(--text-primary)]">
+                            {formatters.currency(selectedTransaction.tip_amount)}
+                          </span>
+                        </div>
+                      )}
+                      <div className="pt-3 border-t border-[var(--border-primary)] flex items-center justify-between">
+                        <span className="font-semibold text-[var(--text-primary)]">Total</span>
+                        <span className="text-xl font-bold text-[var(--text-primary)]">
+                          {formatters.currency(selectedTransaction.total_amount)}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Transaction Items */}
+                  {selectedTransaction.items && selectedTransaction.items.length > 0 && (
+                    <div>
+                      <h3 className="text-sm font-semibold text-[var(--text-primary)] mb-3">
+                        Artículos ({selectedTransaction.items.length})
+                      </h3>
+                      <div className="space-y-2">
+                        {selectedTransaction.items.map((item) => (
+                          <div
+                            key={item.id}
+                            className="bg-[var(--bg-secondary)] rounded-lg p-4 flex items-center justify-between"
+                          >
+                            <div className="flex-1">
+                              <div className="font-medium text-[var(--text-primary)]">
+                                {item.product_name}
+                              </div>
+                              {item.sku && (
+                                <div className="text-xs text-[var(--text-tertiary)] font-mono mt-1">
+                                  SKU: {item.sku}
+                                </div>
+                              )}
+                              <div className="text-sm text-[var(--text-secondary)] mt-1">
+                                {item.quantity} × {formatters.currency(item.unit_price)}
+                              </div>
+                            </div>
+                            <div className="text-right">
+                              <div className="font-semibold text-[var(--text-primary)]">
+                                {formatters.currency(item.total_price)}
+                              </div>
+                              {item.is_synced_to_sales ? (
+                                <div className="text-xs text-green-600 mt-1 flex items-center justify-end gap-1">
+                                  <CheckCircle className="w-3 h-3" />
+                                  Sincronizado
+                                </div>
+                              ) : (
+                                <div className="text-xs text-yellow-600 mt-1 flex items-center justify-end gap-1">
+                                  <Clock className="w-3 h-3" />
+                                  Pendiente
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Sync Status */}
+                  <div className="bg-[var(--bg-secondary)] rounded-lg p-4">
+                    <div className="flex items-center gap-2 mb-2">
+                      {selectedTransaction.is_synced_to_sales ? (
+                        <CheckCircle className="w-5 h-5 text-green-500" />
+                      ) : (
+                        <Clock className="w-5 h-5 text-yellow-500" />
+                      )}
+                      <span className="font-medium text-[var(--text-primary)]">
+                        Estado de Sincronización
+                      </span>
+                    </div>
+                    <div className="text-sm text-[var(--text-secondary)]">
+                      {selectedTransaction.is_synced_to_sales ? (
+                        <>
+                          Sincronizado exitosamente
+                          {selectedTransaction.sync_completed_at && (
+                            <span className="block mt-1">
+                              {new Date(selectedTransaction.sync_completed_at).toLocaleString('es-ES')}
+                            </span>
+                          )}
+                        </>
+                      ) : (
+                        'Pendiente de sincronización con sistema de ventas'
+                      )}
+                    </div>
+                    {selectedTransaction.sync_error && (
+                      <div className="mt-2 text-sm text-red-600">
+                        Error: {selectedTransaction.sync_error}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ) : (
+                <div className="text-center py-12 text-[var(--text-secondary)]">
+                  No se encontraron detalles de la transacción
+                </div>
+              )}
+            </div>
+
+            {/* Modal Footer */}
+            <div className="sticky bottom-0 bg-[var(--bg-primary)] border-t border-[var(--border-primary)] px-6 py-4">
+              <Button onClick={handleCloseDetail} variant="secondary" className="w-full sm:w-auto">
+                Cerrar
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
 const POSPage: React.FC = () => {
   const [cart, setCart] = useState<CartItem[]>([]);
   const [selectedCategory, setSelectedCategory] = useState('all');
-  const [posMode, setPosMode] = useState<'manual' | 'automatic'>('manual');
-  const [showPOSConfig, setShowPOSConfig] = useState(false);
   const [showStats, setShowStats] = useState(false);
 
   // POS Configuration State
@@ -48,6 +552,19 @@ const POSPage: React.FC = () => {
   const posData = usePOSConfigurationData(tenantId);
   const posManager = usePOSConfigurationManager(tenantId);
 
+  // Set initial POS mode based on whether there are configured integrations
+  // Default to 'automatic' if POS configurations exist, otherwise 'manual'
+  const [posMode, setPosMode] = useState<'manual' | 'automatic'>(() => {
+    return posData.configurations.length > 0 ? 'automatic' : 'manual';
+  });
+
+  // Update posMode when configurations change (e.g., when first config is added)
+  React.useEffect(() => {
+    if (!posData.isLoading && posData.configurations.length > 0 && posMode === 'manual') {
+      setPosMode('automatic');
+    }
+  }, [posData.configurations.length, posData.isLoading]);
+
   // Fetch finished products from API
   const {
     data: ingredientsData,
@@ -59,7 +576,7 @@ const POSPage: React.FC = () => {
   });
 
   // Filter for finished products and convert to POS format
-  const products = useMemo(() => {
+ const products = useMemo(() => {
     if (!ingredientsData) return [];
 
     return ingredientsData
@@ -68,7 +585,7 @@ const POSPage: React.FC = () => {
         id: ingredient.id,
         name: ingredient.name,
         price: Number(ingredient.average_cost) || 0,
-        category: ingredient.category.toLowerCase(),
+        category: ingredient.category?.toLowerCase() || 'uncategorized',
         stock: Number(ingredient.current_stock) || 0,
         ingredient: ingredient
       }))
@@ -248,64 +765,6 @@ const POSPage: React.FC = () => {
     addToast('Venta procesada exitosamente', { type: 'success' });
   };
 
-  // Calculate stats for the POS dashboard
-  const posStats = useMemo(() => {
-    const totalProducts = products.length;
-    const totalStock = products.reduce((sum, product) => sum + product.stock, 0);
-    const cartValue = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
-    const cartItems = cart.reduce((sum, item) => sum + item.quantity, 0);
-    const lowStockProducts = products.filter(product => product.stock <= 5).length;
-    const avgProductPrice = totalProducts > 0 ? products.reduce((sum, product) => sum + product.price, 0) / totalProducts : 0;
-
-    return {
-      totalProducts,
-      totalStock,
-      cartValue,
-      cartItems,
-      lowStockProducts,
-      avgProductPrice
-    };
-  }, [products, cart]);
-
-  const stats = [
-    {
-      title: 'Productos Disponibles',
-      value: posStats.totalProducts,
-      variant: 'default' as const,
-      icon: Package,
-    },
-    {
-      title: 'Stock Total',
-      value: posStats.totalStock,
-      variant: 'info' as const,
-      icon: Package,
-    },
-    {
-      title: 'Artículos en Carrito',
-      value: posStats.cartItems,
-      variant: 'success' as const,
-      icon: ShoppingCart,
-    },
-    {
-      title: 'Valor del Carrito',
-      value: formatters.currency(posStats.cartValue),
-      variant: 'success' as const,
-      icon: Euro,
-    },
-    {
-      title: 'Stock Bajo',
-      value: posStats.lowStockProducts,
-      variant: 'warning' as const,
-      icon: Clock,
-    },
-    {
-      title: 'Precio Promedio',
-      value: formatters.currency(posStats.avgProductPrice),
-      variant: 'info' as const,
-      icon: TrendingUp,
-    },
-  ];
-
   // Loading and error states
   if (productsLoading || !tenantId) {
     return (
@@ -371,47 +830,12 @@ const POSPage: React.FC = () => {
                 Automático
               </span>
             </div>
-            {posMode === 'automatic' && (
-              <Button
-                variant="outline"
-                onClick={() => setShowPOSConfig(!showPOSConfig)}
-                className="flex items-center gap-2"
-              >
-                <Settings className="w-4 h-4" />
-                Configurar POS
-              </Button>
-            )}
           </div>
         </div>
       </Card>
 
       {posMode === 'manual' ? (
         <>
-          {/* Collapsible Stats Grid */}
-          <Card className="p-4">
-            <button
-              onClick={() => setShowStats(!showStats)}
-              className="w-full flex items-center justify-between text-left"
-            >
-              <div className="flex items-center gap-2">
-                <TrendingUp className="w-5 h-5 text-[var(--color-primary)]" />
-                <span className="font-semibold text-[var(--text-primary)]">
-                  Estadísticas del POS
-                </span>
-              </div>
-              {showStats ? (
-                <ChevronUp className="w-5 h-5 text-[var(--text-tertiary)]" />
-              ) : (
-                <ChevronDown className="w-5 h-5 text-[var(--text-tertiary)]" />
-              )}
-            </button>
-            {showStats && (
-              <div className="mt-4 pt-4 border-t border-[var(--border-primary)]">
-                <StatsGrid stats={stats} columns={3} />
-              </div>
-            )}
-          </Card>
-
           {/* Main 2-Column Layout */}
           <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
             {/* Left Column: Products (2/3 width on desktop) */}
@@ -601,6 +1025,11 @@ const POSPage: React.FC = () => {
               </div>
             )}
           </Card>
+
+          {/* Transactions Section - Only show if there are configurations */}
+          {posData.configurations.length > 0 && (
+            <TransactionsSection tenantId={tenantId} />
+          )}
         </div>
       )}
 

frontend/src/pages/public/LandingPage.tsx

@@ -25,7 +25,14 @@ import {
   Settings,
   Brain,
   Store,
-  Network
+  Network,
+  Leaf,
+  Droplets,
+  TreeDeciduous,
+  Target,
+  CheckCircle2,
+  Sparkles,
+  Recycle
 } from 'lucide-react';
 
 const LandingPage: React.FC = () => {
@@ -574,6 +581,187 @@ const LandingPage: React.FC = () => {
         </div>
       </section>
 
+      {/* Sustainability & SDG Compliance Section */}
+      <section className="py-24 bg-gradient-to-b from-green-50 to-white dark:from-green-950/20 dark:to-[var(--bg-secondary)]">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <div className="inline-flex items-center gap-2 px-4 py-2 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full text-sm font-semibold mb-6">
+              <Leaf className="w-4 h-4" />
+              {t('landing:sustainability.badge', 'UN SDG 12.3 & EU Green Deal Aligned')}
+            </div>
+            <h2 className="text-3xl lg:text-5xl font-extrabold text-[var(--text-primary)]">
+              {t('landing:sustainability.title_main', 'Not Just Reduce Waste')}
+              <span className="block text-transparent bg-clip-text bg-gradient-to-r from-green-600 to-emerald-600 mt-2">
+                {t('landing:sustainability.title_accent', 'Prove It to the World')}
+              </span>
+            </h2>
+            <p className="mt-6 text-lg text-[var(--text-secondary)] max-w-3xl mx-auto">
+              {t('landing:sustainability.subtitle', 'The only AI platform with built-in UN SDG 12.3 compliance tracking. Reduce waste, save money, and qualify for EU sustainability grants—all with verifiable environmental impact metrics.')}
+            </p>
+          </div>
+
+          {/* Environmental Impact Cards */}
+          <div className="grid md:grid-cols-3 gap-8 mb-16">
+            {/* CO2 Savings */}
+            <div className="bg-white dark:bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg border-2 border-green-200 dark:border-green-900/50 hover:border-green-400 dark:hover:border-green-600 transition-all duration-300">
+              <div className="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center mb-6 mx-auto">
+                <TreeDeciduous className="w-8 h-8 text-white" />
+              </div>
+              <div className="text-center">
+                <div className="text-4xl font-bold text-green-600 dark:text-green-400 mb-2">855 kg</div>
+                <div className="text-sm font-semibold text-[var(--text-primary)] mb-2">{t('landing:sustainability.metrics.co2_avoided', 'CO₂ Avoided Monthly')}</div>
+                <div className="text-xs text-[var(--text-secondary)]">{t('landing:sustainability.metrics.co2_equivalent', 'Equivalent to 43 trees planted')}</div>
+              </div>
+            </div>
+
+            {/* Water Savings */}
+            <div className="bg-white dark:bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg border-2 border-blue-200 dark:border-blue-900/50 hover:border-blue-400 dark:hover:border-blue-600 transition-all duration-300">
+              <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-2xl flex items-center justify-center mb-6 mx-auto">
+                <Droplets className="w-8 h-8 text-white" />
+              </div>
+              <div className="text-center">
+                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-2">675k L</div>
+                <div className="text-sm font-semibold text-[var(--text-primary)] mb-2">{t('landing:sustainability.metrics.water_saved', 'Water Saved Monthly')}</div>
+                <div className="text-xs text-[var(--text-secondary)]">{t('landing:sustainability.metrics.water_equivalent', 'Equivalent to 4,500 showers')}</div>
+              </div>
+            </div>
+
+            {/* Grant Eligibility */}
+            <div className="bg-white dark:bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg border-2 border-amber-200 dark:border-amber-900/50 hover:border-amber-400 dark:hover:border-amber-600 transition-all duration-300">
+              <div className="w-16 h-16 bg-gradient-to-br from-amber-500 to-orange-600 rounded-2xl flex items-center justify-center mb-6 mx-auto">
+                <Award className="w-8 h-8 text-white" />
+              </div>
+              <div className="text-center">
+                <div className="text-4xl font-bold text-amber-600 dark:text-amber-400 mb-2">3+</div>
+                <div className="text-sm font-semibold text-[var(--text-primary)] mb-2">{t('landing:sustainability.metrics.grants_eligible', 'Grant Programs Eligible')}</div>
+                <div className="text-xs text-[var(--text-secondary)]">{t('landing:sustainability.metrics.grants_value', 'Up to €50,000 in funding')}</div>
+              </div>
+            </div>
+          </div>
+
+          {/* SDG Progress Visualization */}
+          <div className="bg-gradient-to-r from-green-500/10 to-emerald-500/10 dark:from-green-900/20 dark:to-emerald-900/20 rounded-2xl p-10 border border-green-300 dark:border-green-800">
+            <div className="flex flex-col lg:flex-row items-center gap-8">
+              <div className="flex-1">
+                <div className="flex items-center gap-3 mb-4">
+                  <div className="w-12 h-12 bg-green-600 rounded-xl flex items-center justify-center">
+                    <Target className="w-6 h-6 text-white" />
+                  </div>
+                  <div>
+                    <h3 className="text-2xl font-bold text-[var(--text-primary)]">{t('landing:sustainability.sdg.title', 'UN SDG 12.3 Compliance')}</h3>
+                    <p className="text-sm text-[var(--text-secondary)]">{t('landing:sustainability.sdg.subtitle', 'Halve food waste by 2030')}</p>
+                  </div>
+                </div>
+                <p className="text-[var(--text-secondary)] mb-6">
+                  {t('landing:sustainability.sdg.description', 'Real-time tracking toward the UN Sustainable Development Goal 12.3 target. Our AI helps you achieve 50% waste reduction with verifiable, auditable data for grant applications and certifications.')}
+                </p>
+                <div className="space-y-4">
+                  <div className="flex items-center gap-3">
+                    <CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0" />
+                    <span className="text-sm text-[var(--text-secondary)]">{t('landing:sustainability.sdg.features.tracking', 'Automated waste baseline and progress tracking')}</span>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0" />
+                    <span className="text-sm text-[var(--text-secondary)]">{t('landing:sustainability.sdg.features.export', 'One-click grant application report export')}</span>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0" />
+                    <span className="text-sm text-[var(--text-secondary)]">{t('landing:sustainability.sdg.features.certification', 'Certification-ready environmental impact data')}</span>
+                  </div>
+                </div>
+              </div>
+              <div className="flex-1 w-full">
+                <div className="bg-white dark:bg-[var(--bg-primary)] rounded-xl p-6 shadow-lg">
+                  <div className="flex justify-between items-center mb-3">
+                    <span className="text-sm font-semibold text-[var(--text-primary)]">{t('landing:sustainability.sdg.progress_label', 'Progress to Target')}</span>
+                    <span className="text-2xl font-bold text-green-600">65%</span>
+                  </div>
+                  <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-6 overflow-hidden">
+                    <div className="bg-gradient-to-r from-green-500 to-emerald-500 h-6 rounded-full flex items-center justify-end pr-3" style={{ width: '65%' }}>
+                      <TrendingUp className="w-4 h-4 text-white" />
+                    </div>
+                  </div>
+                  <div className="mt-4 grid grid-cols-3 gap-4 text-center">
+                    <div>
+                      <div className="text-xs text-[var(--text-secondary)] mb-1">{t('landing:sustainability.sdg.baseline', 'Baseline')}</div>
+                      <div className="text-lg font-bold text-[var(--text-primary)]">25%</div>
+                    </div>
+                    <div>
+                      <div className="text-xs text-[var(--text-secondary)] mb-1">{t('landing:sustainability.sdg.current', 'Current')}</div>
+                      <div className="text-lg font-bold text-green-600">16.25%</div>
+                    </div>
+                    <div>
+                      <div className="text-xs text-[var(--text-secondary)] mb-1">{t('landing:sustainability.sdg.target', 'Target 2030')}</div>
+                      <div className="text-lg font-bold text-[var(--text-primary)]">12.5%</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Grant Programs Grid */}
+          <div className="mt-16 grid md:grid-cols-4 gap-6">
+            <div className="bg-white dark:bg-[var(--bg-primary)] rounded-xl p-6 border border-[var(--border-primary)] hover:border-green-500 transition-all duration-300 text-center">
+              <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mx-auto mb-4">
+                <Award className="w-6 h-6 text-blue-600" />
+              </div>
+              <h4 className="font-bold text-[var(--text-primary)] mb-2">{t('landing:sustainability.grants.eu_horizon', 'EU Horizon Europe')}</h4>
+              <p className="text-xs text-[var(--text-secondary)] mb-2">{t('landing:sustainability.grants.eu_horizon_req', 'Requires 30% reduction')}</p>
+              <div className="inline-flex items-center gap-1 px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full text-xs font-semibold">
+                <CheckCircle2 className="w-3 h-3" />
+                {t('landing:sustainability.grants.eligible', 'Eligible')}
+              </div>
+            </div>
+
+            <div className="bg-white dark:bg-[var(--bg-primary)] rounded-xl p-6 border border-[var(--border-primary)] hover:border-green-500 transition-all duration-300 text-center">
+              <div className="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center mx-auto mb-4">
+                <Leaf className="w-6 h-6 text-green-600" />
+              </div>
+              <h4 className="font-bold text-[var(--text-primary)] mb-2">{t('landing:sustainability.grants.farm_to_fork', 'Farm to Fork')}</h4>
+              <p className="text-xs text-[var(--text-secondary)] mb-2">{t('landing:sustainability.grants.farm_to_fork_req', 'Requires 20% reduction')}</p>
+              <div className="inline-flex items-center gap-1 px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full text-xs font-semibold">
+                <CheckCircle2 className="w-3 h-3" />
+                {t('landing:sustainability.grants.eligible', 'Eligible')}
+              </div>
+            </div>
+
+            <div className="bg-white dark:bg-[var(--bg-primary)] rounded-xl p-6 border border-[var(--border-primary)] hover:border-green-500 transition-all duration-300 text-center">
+              <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mx-auto mb-4">
+                <Recycle className="w-6 h-6 text-purple-600" />
+              </div>
+              <h4 className="font-bold text-[var(--text-primary)] mb-2">{t('landing:sustainability.grants.circular_economy', 'Circular Economy')}</h4>
+              <p className="text-xs text-[var(--text-secondary)] mb-2">{t('landing:sustainability.grants.circular_economy_req', 'Requires 15% reduction')}</p>
+              <div className="inline-flex items-center gap-1 px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full text-xs font-semibold">
+                <CheckCircle2 className="w-3 h-3" />
+                {t('landing:sustainability.grants.eligible', 'Eligible')}
+              </div>
+            </div>
+
+            <div className="bg-white dark:bg-[var(--bg-primary)] rounded-xl p-6 border border-[var(--border-primary)] hover:border-amber-500 transition-all duration-300 text-center">
+              <div className="w-12 h-12 bg-amber-100 dark:bg-amber-900/30 rounded-lg flex items-center justify-center mx-auto mb-4">
+                <Target className="w-6 h-6 text-amber-600" />
+              </div>
+              <h4 className="font-bold text-[var(--text-primary)] mb-2">{t('landing:sustainability.grants.un_sdg', 'UN SDG Certified')}</h4>
+              <p className="text-xs text-[var(--text-secondary)] mb-2">{t('landing:sustainability.grants.un_sdg_req', 'Requires 50% reduction')}</p>
+              <div className="inline-flex items-center gap-1 px-3 py-1 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-full text-xs font-semibold">
+                <TrendingUp className="w-3 h-3" />
+                {t('landing:sustainability.grants.on_track', 'On Track')}
+              </div>
+            </div>
+          </div>
+
+          {/* Unique Differentiator Callout */}
+          <div className="mt-16 text-center">
+            <div className="inline-flex flex-col items-center gap-4 bg-gradient-to-r from-green-600 to-emerald-600 text-white rounded-2xl px-12 py-8">
+              <Sparkles className="w-12 h-12" />
+              <h3 className="text-2xl font-bold">{t('landing:sustainability.differentiator.title', 'The Only AI Platform')}</h3>
+              <p className="text-lg max-w-2xl">{t('landing:sustainability.differentiator.description', 'With built-in UN SDG 12.3 tracking, real-time environmental impact calculations, and one-click grant application exports. Not just reduce waste—prove it.')}</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
       {/* Benefits Section - Problem/Solution Focus */}
       <section id="benefits" className="py-24 bg-[var(--bg-primary)]">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

frontend/src/router/AppRouter.tsx

@@ -48,6 +48,7 @@ const CommunicationPreferencesPage = React.lazy(() => import('../pages/app/setti
 const SubscriptionPage = React.lazy(() => import('../pages/app/settings/subscription/SubscriptionPage'));
 const PrivacySettingsPage = React.lazy(() => import('../pages/app/settings/privacy/PrivacySettingsPage'));
 const InformationPage = React.lazy(() => import('../pages/app/database/information/InformationPage'));
+const AjustesPage = React.lazy(() => import('../pages/app/database/ajustes/AjustesPage'));
 const TeamPage = React.lazy(() => import('../pages/app/settings/team/TeamPage'));
 const OrganizationsPage = React.lazy(() => import('../pages/app/settings/organizations/OrganizationsPage'));
 
@@ -206,6 +207,16 @@ export const AppRouter: React.FC = () => {
             </ProtectedRoute>
           }
         />
+        <Route
+          path="/app/database/ajustes"
+          element={
+            <ProtectedRoute>
+              <AppShell>
+                <AjustesPage />
+              </AppShell>
+            </ProtectedRoute>
+          }
+        />
         <Route
           path="/app/database/team"
           element={

frontend/src/router/routes.config.ts

@@ -140,6 +140,7 @@ export const ROUTES = {
   SETTINGS_INTEGRATIONS: '/settings/integrations',
   SETTINGS_BILLING: '/settings/billing',
   SETTINGS_BAKERY_CONFIG: '/app/database/information',
+  SETTINGS_BAKERY_AJUSTES: '/app/database/ajustes',
   SETTINGS_TEAM: '/app/database/team',
   QUALITY_TEMPLATES: '/app/database/quality-templates',
 
@@ -392,6 +393,17 @@ export const routesConfig: RouteConfig[] = [
         showInNavigation: true,
         showInBreadcrumbs: true,
       },
+      {
+        path: '/app/database/ajustes',
+        name: 'Ajustes',
+        component: 'AjustesPage',
+        title: 'Ajustes',
+        icon: 'settings',
+        requiresAuth: true,
+        requiredRoles: ROLE_COMBINATIONS.ADMIN_ACCESS,
+        showInNavigation: true,
+        showInBreadcrumbs: true,
+      },
       {
         path: '/app/database/suppliers',
         name: 'Suppliers',

frontend/tailwind.config.js

@@ -102,21 +102,10 @@ export default {
     {
       pattern: /^(bg-gradient-to|from|via|to)-(r|l|t|b|tr|tl|br|bl|amber|orange|gray)-(50|100|200|300|400|500|600|700|800|900)$/,
     },
-    // Include CSS variable-based utility classes
-    {
-      pattern: /^(bg|text|border)-color-(primary|secondary|success|warning|error|info|accent)(-light|-dark)?$/,
-    },
-    {
-      pattern: /^(bg|text|border)-(text|background|border)-(primary|secondary|tertiary)$/,
-    },
     // Include semantic color classes
     {
       pattern: /^(bg|text|border)-(primary|secondary)-(50|100|200|300|400|500|600|700|800|900)$/,
     },
-    // Include ring and shadow variants
-    {
-      pattern: /^ring-color-(primary|secondary)(\/(10|20|30|40|50))?$/,
-    }
   ],
   theme: {
     extend: {
@@ -192,4 +181,4 @@ export default {
     require('@tailwindcss/typography'),
     require('@tailwindcss/aspect-ratio'),
   ],
-}
+}

frontend/vite.config.ts

@@ -42,6 +42,7 @@ export default defineConfig({
     outDir: 'dist',
     sourcemap: true,
     rollupOptions: {
+      external: ['/runtime-config.js'], // Externalize runtime config to avoid bundling
       output: {
         manualChunks: {
           vendor: ['react', 'react-dom', 'react-router-dom'],