From 87310ced5fb62656da3b1b7290b8aad4568fe34c Mon Sep 17 00:00:00 2001
From: Urtzi Alfaro <urtzialfaro@MacBook-Pro-de-Urtzi.local>
Date: Tue, 23 Sep 2025 22:11:34 +0200
Subject: [PATCH] Add improved production UI 4

---
 .../hooks/subscription.ts}                    |   38 +-
 frontend/src/api/services/subscription.ts     |  143 ++-
 frontend/src/api/types/subscription.ts        |   36 +-
 .../auth/SubscriptionErrorHandler.tsx         |   25 +-
 .../analytics/ProductionCostAnalytics.tsx     |  491 ++++++++
 .../domain/analytics/ReportsTable.tsx         |    2 +-
 .../src/components/domain/analytics/index.ts  |    1 +
 frontend/src/components/ui/Button/Button.tsx  |   24 +-
 .../components/ui/DatePicker/DatePicker.tsx   |    2 +-
 frontend/src/components/ui/Table/Table.tsx    |    2 +-
 frontend/src/hooks/index.ts                   |    2 +-
 .../src/hooks/useSubscriptionAwareRoutes.ts   |    2 +-
 frontend/src/pages/app/DashboardPage.tsx      |   14 -
 .../app/analytics/ProductionAnalyticsPage.tsx | 1032 +++++++++++++++--
 .../analytics/forecasting/ForecastingPage.tsx |  111 +-
 .../operations/maquinaria/MaquinariaPage.tsx  |   25 +-
 .../app/settings/profile/ProfilePage.tsx      |    4 +-
 17 files changed, 1658 insertions(+), 296 deletions(-)
 rename frontend/src/{hooks/useSubscription.ts => api/hooks/subscription.ts} (82%)
 create mode 100644 frontend/src/components/domain/analytics/ProductionCostAnalytics.tsx

diff --git a/frontend/src/hooks/useSubscription.ts b/frontend/src/api/hooks/subscription.ts
similarity index 82%
rename from frontend/src/hooks/useSubscription.ts
rename to frontend/src/api/hooks/subscription.ts
index c9516f45..3581b26a 100644
--- a/frontend/src/hooks/useSubscription.ts
+++ b/frontend/src/api/hooks/subscription.ts
@@ -3,9 +3,15 @@
  */
 
 import { useState, useEffect, useCallback } from 'react';
-import { subscriptionService } from '../api';
-import { useCurrentTenant } from '../stores';
-import { useAuthUser } from '../stores/auth.store';
+import { subscriptionService } from '../services/subscription';
+import { 
+  SUBSCRIPTION_PLANS, 
+  ANALYTICS_LEVELS, 
+  AnalyticsLevel, 
+  SubscriptionPlanKey 
+} from '../types/subscription';
+import { useCurrentTenant } from '../../stores';
+import { useAuthUser } from '../../stores/auth.store';
 
 export interface SubscriptionFeature {
   hasFeature: boolean;
@@ -95,15 +101,15 @@ export const useSubscription = () => {
   const getAnalyticsAccess = useCallback((): { hasAccess: boolean; level: string; reason?: string } => {
     const { plan } = subscriptionInfo;
 
-    switch (plan) {
-      case 'starter':
-        return { hasAccess: true, level: 'basic' };
-      case 'professional':
-        return { hasAccess: true, level: 'advanced' };
-      case 'enterprise':
-        return { hasAccess: true, level: 'predictive' };
-      default:
-        return { hasAccess: false, level: 'none', reason: 'No valid subscription plan' };
+    // Convert plan to typed plan key if it matches our known plans
+    let planKey: keyof typeof SUBSCRIPTION_PLANS | undefined;
+    if (plan === SUBSCRIPTION_PLANS.STARTER) planKey = SUBSCRIPTION_PLANS.STARTER;
+    else if (plan === SUBSCRIPTION_PLANS.PROFESSIONAL) planKey = SUBSCRIPTION_PLANS.PROFESSIONAL;
+    else if (plan === SUBSCRIPTION_PLANS.ENTERPRISE) planKey = SUBSCRIPTION_PLANS.ENTERPRISE;
+
+    if (planKey) {
+      const analyticsLevel = subscriptionService.getAnalyticsLevelForPlan(planKey);
+      return { hasAccess: true, level: analyticsLevel };
     }
   }, [subscriptionInfo.plan]);
 
@@ -113,13 +119,7 @@ export const useSubscription = () => {
 
     if (!hasAccess) return false;
 
-    const levelHierarchy = {
-      'basic': 1,
-      'advanced': 2,
-      'predictive': 3
-    };
-
-    return levelHierarchy[level as keyof typeof levelHierarchy] >= levelHierarchy[requiredLevel];
+    return subscriptionService.doesAnalyticsLevelMeetMinimum(level as any, requiredLevel);
   }, [getAnalyticsAccess]);
 
   // Check if user can access forecasting features
diff --git a/frontend/src/api/services/subscription.ts b/frontend/src/api/services/subscription.ts
index 1793c351..eb7e1e57 100644
--- a/frontend/src/api/services/subscription.ts
+++ b/frontend/src/api/services/subscription.ts
@@ -1,6 +1,3 @@
-/**
- * Subscription Service - Mirror backend subscription endpoints
- */
 import { apiClient } from '../client';
 import {
   SubscriptionLimits,
@@ -9,9 +6,27 @@ import {
   UsageSummary,
   AvailablePlans,
   PlanUpgradeValidation,
-  PlanUpgradeResult
+  PlanUpgradeResult,
+  SUBSCRIPTION_PLANS,
+  ANALYTICS_LEVELS,
+  AnalyticsLevel,
+  SubscriptionPlanKey,
+  PLAN_HIERARCHY,
+  ANALYTICS_HIERARCHY
 } from '../types/subscription';
 
+// Map plan keys to analytics levels based on backend data
+const PLAN_TO_ANALYTICS_LEVEL: Record<SubscriptionPlanKey, AnalyticsLevel> = {
+  [SUBSCRIPTION_PLANS.STARTER]: ANALYTICS_LEVELS.BASIC,
+  [SUBSCRIPTION_PLANS.PROFESSIONAL]: ANALYTICS_LEVELS.ADVANCED,
+  [SUBSCRIPTION_PLANS.ENTERPRISE]: ANALYTICS_LEVELS.PREDICTIVE
+};
+
+// Cache for available plans
+let cachedPlans: AvailablePlans | null = null;
+let lastFetchTime: number | null = null;
+const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
+
 export class SubscriptionService {
   private readonly baseUrl = '/subscriptions';
 
@@ -106,13 +121,119 @@ export class SubscriptionService {
     }).format(amount);
   }
 
-  getPlanDisplayInfo(planKey: string): { name: string; color: string } {
-    const planInfo = {
-      starter: { name: 'Starter', color: 'blue' },
-      professional: { name: 'Professional', color: 'purple' },
-      enterprise: { name: 'Enterprise', color: 'amber' }
-    };
-    return planInfo[planKey as keyof typeof planInfo] || { name: 'Desconocido', color: 'gray' };
+  /**
+   * Fetch available subscription plans from the backend
+   */
+  async fetchAvailablePlans(): Promise<AvailablePlans> {
+    const now = Date.now();
+    
+    // Return cached data if it's still valid
+    if (cachedPlans && lastFetchTime && (now - lastFetchTime) < CACHE_DURATION) {
+      return cachedPlans;
+    }
+    
+    try {
+      const plans = await apiClient.get<AvailablePlans>('/subscriptions/plans');
+      cachedPlans = plans;
+      lastFetchTime = now;
+      return plans;
+    } catch (error) {
+      console.error('Failed to fetch subscription plans:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Get plan display information
+   */
+  async getPlanDisplayInfo(planKey: string) {
+    try {
+      const plans = await this.fetchAvailablePlans();
+      const plan = plans.plans[planKey];
+      
+      if (plan) {
+        return {
+          name: plan.name,
+          color: this.getPlanColor(planKey),
+          description: plan.description,
+          monthlyPrice: plan.monthly_price
+        };
+      }
+      
+      return { name: 'Desconocido', color: 'gray', description: '', monthlyPrice: 0 };
+    } catch (error) {
+      console.error('Failed to get plan display info:', error);
+      return { name: 'Desconocido', color: 'gray', description: '', monthlyPrice: 0 };
+    }
+  }
+
+  /**
+   * Get plan color based on plan key
+   */
+  getPlanColor(planKey: string): string {
+    switch (planKey) {
+      case SUBSCRIPTION_PLANS.STARTER:
+        return 'blue';
+      case SUBSCRIPTION_PLANS.PROFESSIONAL:
+        return 'purple';
+      case SUBSCRIPTION_PLANS.ENTERPRISE:
+        return 'amber';
+      default:
+        return 'gray';
+    }
+  }
+
+  /**
+   * Check if a plan meets minimum requirements
+   */
+  doesPlanMeetMinimum(plan: SubscriptionPlanKey, minimumRequired: SubscriptionPlanKey): boolean {
+    return PLAN_HIERARCHY[plan] >= PLAN_HIERARCHY[minimumRequired];
+  }
+
+  /**
+   * Get analytics level for a plan
+   */
+  getAnalyticsLevelForPlan(plan: SubscriptionPlanKey): AnalyticsLevel {
+    return PLAN_TO_ANALYTICS_LEVEL[plan] || ANALYTICS_LEVELS.NONE;
+  }
+
+  /**
+   * Check if analytics level meets minimum requirements
+   */
+  doesAnalyticsLevelMeetMinimum(level: AnalyticsLevel, minimumRequired: AnalyticsLevel): boolean {
+    return ANALYTICS_HIERARCHY[level] >= ANALYTICS_HIERARCHY[minimumRequired];
+  }
+
+  /**
+   * Get plan features
+   */
+  async getPlanFeatures(planKey: string) {
+    try {
+      const plans = await this.fetchAvailablePlans();
+      const plan = plans.plans[planKey];
+      
+      if (plan) {
+        return plan.features || {};
+      }
+      
+      return {};
+    } catch (error) {
+      console.error('Failed to get plan features:', error);
+      return {};
+    }
+  }
+
+  /**
+   * Check if a plan has a specific feature
+   */
+  async planHasFeature(planKey: string, featureName: string) {
+    try {
+      const features = await this.getPlanFeatures(planKey);
+      return featureName in features;
+    } catch (error) {
+      console.error('Failed to check plan feature:', error);
+      return false;
+    }
   }
 }
 
diff --git a/frontend/src/api/types/subscription.ts b/frontend/src/api/types/subscription.ts
index 06362ae4..971e5e67 100644
--- a/frontend/src/api/types/subscription.ts
+++ b/frontend/src/api/types/subscription.ts
@@ -94,4 +94,38 @@ export interface PlanUpgradeValidation {
 export interface PlanUpgradeResult {
   success: boolean;
   message: string;
-}
\ No newline at end of file
+}
+
+// Analytics access levels
+export const ANALYTICS_LEVELS = {
+  NONE: 'none',
+  BASIC: 'basic',
+  ADVANCED: 'advanced',
+  PREDICTIVE: 'predictive'
+} as const;
+
+export type AnalyticsLevel = typeof ANALYTICS_LEVELS[keyof typeof ANALYTICS_LEVELS];
+
+// Plan keys
+export const SUBSCRIPTION_PLANS = {
+  STARTER: 'starter',
+  PROFESSIONAL: 'professional',
+  ENTERPRISE: 'enterprise'
+} as const;
+
+export type SubscriptionPlanKey = typeof SUBSCRIPTION_PLANS[keyof typeof SUBSCRIPTION_PLANS];
+
+// Plan hierarchy for comparison
+export const PLAN_HIERARCHY: Record<SubscriptionPlanKey, number> = {
+  [SUBSCRIPTION_PLANS.STARTER]: 1,
+  [SUBSCRIPTION_PLANS.PROFESSIONAL]: 2,
+  [SUBSCRIPTION_PLANS.ENTERPRISE]: 3
+};
+
+// Analytics level hierarchy
+export const ANALYTICS_HIERARCHY: Record<AnalyticsLevel, number> = {
+  [ANALYTICS_LEVELS.NONE]: 0,
+  [ANALYTICS_LEVELS.BASIC]: 1,
+  [ANALYTICS_LEVELS.ADVANCED]: 2,
+  [ANALYTICS_LEVELS.PREDICTIVE]: 3
+};
\ No newline at end of file
diff --git a/frontend/src/components/auth/SubscriptionErrorHandler.tsx b/frontend/src/components/auth/SubscriptionErrorHandler.tsx
index 971778d4..dde263c0 100644
--- a/frontend/src/components/auth/SubscriptionErrorHandler.tsx
+++ b/frontend/src/components/auth/SubscriptionErrorHandler.tsx
@@ -5,6 +5,11 @@
 import React from 'react';
 import { Modal, Button, Card } from '../ui';
 import { Crown, Lock, ArrowRight, AlertTriangle } from 'lucide-react';
+import { 
+  SUBSCRIPTION_PLANS, 
+  ANALYTICS_LEVELS
+} from '../../api/types/subscription';
+import { subscriptionService } from '../../api/services/subscription';
 
 interface SubscriptionError {
   error: string;
@@ -44,29 +49,29 @@ const SubscriptionErrorHandler: React.FC<SubscriptionErrorHandlerProps> = ({
 
   const getLevelDisplayName = (level: string) => {
     const levelNames: Record<string, string> = {
-      basic: 'Básico',
-      advanced: 'Avanzado',
-      predictive: 'Predictivo'
+      [ANALYTICS_LEVELS.BASIC]: 'Básico',
+      [ANALYTICS_LEVELS.ADVANCED]: 'Avanzado',
+      [ANALYTICS_LEVELS.PREDICTIVE]: 'Predictivo'
     };
     return levelNames[level] || level;
   };
 
   const getRequiredPlan = (level: string) => {
     switch (level) {
-      case 'advanced':
-        return 'Professional';
-      case 'predictive':
-        return 'Enterprise';
+      case ANALYTICS_LEVELS.ADVANCED:
+        return SUBSCRIPTION_PLANS.PROFESSIONAL;
+      case ANALYTICS_LEVELS.PREDICTIVE:
+        return SUBSCRIPTION_PLANS.ENTERPRISE;
       default:
-        return 'Professional';
+        return SUBSCRIPTION_PLANS.PROFESSIONAL;
     }
   };
 
   const getPlanColor = (plan: string) => {
     switch (plan.toLowerCase()) {
-      case 'professional':
+      case SUBSCRIPTION_PLANS.PROFESSIONAL:
         return 'bg-gradient-to-br from-purple-500 to-indigo-600';
-      case 'enterprise':
+      case SUBSCRIPTION_PLANS.ENTERPRISE:
         return 'bg-gradient-to-br from-yellow-400 to-orange-500';
       default:
         return 'bg-gradient-to-br from-blue-500 to-cyan-600';
diff --git a/frontend/src/components/domain/analytics/ProductionCostAnalytics.tsx b/frontend/src/components/domain/analytics/ProductionCostAnalytics.tsx
new file mode 100644
index 00000000..f33f8e94
--- /dev/null
+++ b/frontend/src/components/domain/analytics/ProductionCostAnalytics.tsx
@@ -0,0 +1,491 @@
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card, CardHeader, CardBody } from '../../ui/Card';
+import { StatsGrid } from '../../ui/Stats';
+import { Badge } from '../../ui/Badge';
+import { Button } from '../../ui/Button';
+import { Select } from '../../ui/Select';
+import {
+  Euro,
+  TrendingUp,
+  AlertTriangle,
+  Target,
+  Clock,
+  Activity,
+  Zap,
+  Download
+} from 'lucide-react';
+import { useCurrentTenant } from '../../../stores/tenant.store';
+import { useProductionDashboard } from '../../../api';
+
+export interface ProductionCostData {
+  totalCost: number;
+  laborCost: number;
+  materialCost: number;
+  overheadCost: number;
+  energyCost: number;
+  costPerUnit: number;
+  budget: number;
+  variance: number;
+  trend: {
+    direction: 'up' | 'down' | 'stable';
+    percentage: number;
+  };
+  costHistory: Array<{
+    date: string;
+    totalCost: number;
+    laborCost: number;
+    materialCost: number;
+    overheadCost: number;
+    energyCost: number;
+  }>;
+}
+
+export interface ProductionCostAnalyticsProps {
+  className?: string;
+  data?: ProductionCostData;
+  timeRange?: 'day' | 'week' | 'month' | 'quarter' | 'year';
+  onTimeRangeChange?: (range: 'day' | 'week' | 'month' | 'quarter' | 'year') => void;
+  onViewDetails?: () => void;
+  onOptimize?: () => void;
+  onExport?: () => void;
+}
+
+const ProductionCostAnalytics: React.FC<ProductionCostAnalyticsProps> = ({
+  className,
+  data,
+  timeRange = 'month',
+  onTimeRangeChange,
+  onViewDetails,
+  onOptimize,
+  onExport
+}) => {
+  const { t } = useTranslation();
+  const currentTenant = useCurrentTenant();
+  const tenantId = currentTenant?.id || '';
+
+  const {
+    data: dashboardData,
+    isLoading,
+    error
+  } = useProductionDashboard(tenantId);
+
+  const [selectedTimeRange, setSelectedTimeRange] = useState<'day' | 'week' | 'month' | 'quarter' | 'year'>(timeRange);
+
+  const costData = useMemo((): ProductionCostData => {
+    if (data) return data;
+
+    // Calculate from dashboard data if available
+    if (dashboardData) {
+      const mockData: ProductionCostData = {
+        totalCost: 2840.50,
+        laborCost: 1200.00,
+        materialCost: 1450.00,
+        overheadCost: 190.50,
+        energyCost: 95.25,
+        costPerUnit: 14.20,
+        budget: 3000.00,
+        variance: -159.50,
+        trend: {
+          direction: 'down',
+          percentage: 5.3
+        },
+        costHistory: [
+          { date: '2024-01-16', totalCost: 2750.20, laborCost: 1150.00, materialCost: 1420.00, overheadCost: 180.20, energyCost: 90.00 },
+          { date: '2024-01-17', totalCost: 2780.80, laborCost: 1180.00, materialCost: 1430.00, overheadCost: 180.80, energyCost: 90.00 },
+          { date: '2024-01-18', totalCost: 2720.10, laborCost: 1120.00, materialCost: 1410.00, overheadCost: 190.10, energyCost: 100.00 },
+          { date: '2024-01-19', totalCost: 2810.60, laborCost: 1220.00, materialCost: 1440.00, overheadCost: 190.60, energyCost: 95.00 },
+          { date: '2024-01-20', totalCost: 2800.40, laborCost: 1210.00, materialCost: 1440.00, overheadCost: 180.40, energyCost: 90.00 },
+          { date: '2024-01-21', totalCost: 2790.30, laborCost: 1190.00, materialCost: 1430.00, overheadCost: 180.30, energyCost: 90.00 },
+          { date: '2024-01-22', totalCost: 2840.50, laborCost: 1200.00, materialCost: 1450.00, overheadCost: 190.50, energyCost: 95.25 }
+        ]
+      };
+      return mockData;
+    }
+
+    // Default mock data
+    return {
+      totalCost: 2840.50,
+      laborCost: 1200.00,
+      materialCost: 1450.00,
+      overheadCost: 190.50,
+      energyCost: 95.25,
+      costPerUnit: 14.20,
+      budget: 3000.00,
+      variance: -159.50,
+      trend: {
+        direction: 'down',
+        percentage: 5.3
+      },
+      costHistory: [
+        { date: '2024-01-16', totalCost: 2750.20, laborCost: 1150.00, materialCost: 1420.00, overheadCost: 180.20, energyCost: 90.00 },
+        { date: '2024-01-17', totalCost: 2780.80, laborCost: 1180.00, materialCost: 1430.00, overheadCost: 180.80, energyCost: 90.00 },
+        { date: '2024-01-18', totalCost: 2720.10, laborCost: 1120.00, materialCost: 1410.00, overheadCost: 190.10, energyCost: 100.00 },
+        { date: '2024-01-19', totalCost: 2810.60, laborCost: 1220.00, materialCost: 1440.00, overheadCost: 190.60, energyCost: 95.00 },
+        { date: '2024-01-20', totalCost: 2800.40, laborCost: 1210.00, materialCost: 1440.00, overheadCost: 180.40, energyCost: 90.00 },
+        { date: '2024-01-21', totalCost: 2790.30, laborCost: 1190.00, materialCost: 1430.00, overheadCost: 180.30, energyCost: 90.00 },
+        { date: '2024-01-22', totalCost: 2840.50, laborCost: 1200.00, materialCost: 1450.00, overheadCost: 190.50, energyCost: 95.25 }
+      ]
+    };
+  }, [data, dashboardData]);
+
+  const formatCurrency = (amount: number) => {
+    return new Intl.NumberFormat('es-ES', {
+      style: 'currency',
+      currency: 'EUR',
+      minimumFractionDigits: 2
+    }).format(amount);
+  };
+
+  const getVarianceColor = (variance: number) => {
+    if (variance > 0) return 'text-red-600';
+    if (variance < -50) return 'text-green-600';
+    return 'text-yellow-600';
+  };
+
+  const getBudgetStatus = () => {
+    const percentage = (costData.totalCost / costData.budget) * 100;
+    if (percentage > 100) return { color: 'error', label: t('production.cost.over_budget', 'Over Budget') };
+    if (percentage > 90) return { color: 'warning', label: t('production.cost.near_budget', 'Near Budget') };
+    return { color: 'success', label: t('production.cost.on_budget', 'On Budget') };
+  };
+
+  const budgetStatus = getBudgetStatus();
+
+  const handleTimeRangeChange = (range: string) => {
+    const newRange = range as 'day' | 'week' | 'month' | 'quarter' | 'year';
+    setSelectedTimeRange(newRange);
+    onTimeRangeChange?.(newRange);
+  };
+
+  if (isLoading) {
+    return (
+      <Card className={className}>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <h3 className="text-lg font-semibold text-[var(--text-primary)]">
+              {t('production.cost.analytics.title', 'Cost Analytics')}
+            </h3>
+            <div className="flex items-center space-x-2">
+              <Select
+                value={selectedTimeRange}
+                onChange={handleTimeRangeChange}
+                options={[
+                  { value: 'day', label: t('common.time_range.day', 'Today') },
+                  { value: 'week', label: t('common.time_range.week', 'This Week') },
+                  { value: 'month', label: t('common.time_range.month', 'This Month') },
+                  { value: 'quarter', label: t('common.time_range.quarter', 'This Quarter') },
+                  { value: 'year', label: t('common.time_range.year', 'This Year') }
+                ]}
+              />
+              <Button variant="outline" size="sm">
+                <Download className="w-4 h-4" />
+              </Button>
+            </div>
+          </div>
+        </CardHeader>
+        <CardBody>
+          <div className="animate-pulse space-y-4">
+            <div className="h-20 bg-[var(--bg-secondary)] rounded"></div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="h-16 bg-[var(--bg-secondary)] rounded"></div>
+              <div className="h-16 bg-[var(--bg-secondary)] rounded"></div>
+            </div>
+          </div>
+        </CardBody>
+      </Card>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card className={className}>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <h3 className="text-lg font-semibold text-[var(--text-primary)]">
+              {t('production.cost.analytics.title', 'Cost Analytics')}
+            </h3>
+            <div className="flex items-center space-x-2">
+              <Select
+                value={selectedTimeRange}
+                onChange={handleTimeRangeChange}
+                options={[
+                  { value: 'day', label: t('common.time_range.day', 'Today') },
+                  { value: 'week', label: t('common.time_range.week', 'This Week') },
+                  { value: 'month', label: t('common.time_range.month', 'This Month') },
+                  { value: 'quarter', label: t('common.time_range.quarter', 'This Quarter') },
+                  { value: 'year', label: t('common.time_range.year', 'This Year') }
+                ]}
+              />
+              <Button variant="outline" size="sm">
+                <Download className="w-4 h-4" />
+              </Button>
+            </div>
+          </div>
+        </CardHeader>
+        <CardBody className="text-center py-8">
+          <AlertTriangle className="w-12 h-12 text-red-500 mx-auto mb-4" />
+          <p className="text-[var(--text-secondary)]">
+            {t('production.cost.error', 'Error loading cost data')}
+          </p>
+        </CardBody>
+      </Card>
+    );
+  }
+
+  const costStats = [
+    {
+      title: t('production.cost.total_cost', 'Total Cost'),
+      value: formatCurrency(costData.totalCost),
+      icon: Euro,
+      variant: budgetStatus.color as 'success' | 'warning' | 'error',
+      trend: {
+        value: costData.trend.percentage,
+        direction: costData.trend.direction === 'up' ? 'up' as const : 'down' as const,
+        label: t('production.cost.vs_last_period', 'vs last period')
+      },
+      subtitle: `${formatCurrency(Math.abs(costData.variance))} ${costData.variance > 0 ? t('common.over', 'over') : t('common.under', 'under')} ${t('common.budget', 'budget')}`
+    },
+    {
+      title: t('production.cost.cost_per_unit', 'Cost per Unit'),
+      value: formatCurrency(costData.costPerUnit),
+      icon: Target,
+      variant: 'info' as const,
+      subtitle: t('production.cost.average', 'Average for selected period')
+    },
+    {
+      title: t('production.cost.labor_cost', 'Labor Cost'),
+      value: formatCurrency(costData.laborCost),
+      icon: Clock,
+      variant: 'default' as const,
+      subtitle: `${((costData.laborCost / costData.totalCost) * 100).toFixed(1)}% of total`
+    },
+    {
+      title: t('production.cost.material_cost', 'Material Cost'),
+      value: formatCurrency(costData.materialCost),
+      icon: Activity,
+      variant: 'default' as const,
+      subtitle: `${((costData.materialCost / costData.totalCost) * 100).toFixed(1)}% of total`
+    }
+  ];
+
+  const costBreakdown = [
+    {
+      label: t('production.cost.labor', 'Labor'),
+      amount: costData.laborCost,
+      percentage: (costData.laborCost / costData.totalCost) * 100,
+      icon: Clock,
+      color: 'bg-blue-500'
+    },
+    {
+      label: t('production.cost.materials', 'Materials'),
+      amount: costData.materialCost,
+      percentage: (costData.materialCost / costData.totalCost) * 100,
+      icon: Activity,
+      color: 'bg-green-500'
+    },
+    {
+      label: t('production.cost.overhead', 'Overhead'),
+      amount: costData.overheadCost,
+      percentage: (costData.overheadCost / costData.totalCost) * 100,
+      icon: Euro,
+      color: 'bg-orange-500'
+    },
+    {
+      label: t('production.cost.energy', 'Energy'),
+      amount: costData.energyCost,
+      percentage: (costData.energyCost / costData.totalCost) * 100,
+      icon: Zap,
+      color: 'bg-yellow-500'
+    }
+  ];
+
+  // Create a simple bar chart visualization for cost history
+  const renderCostChart = () => {
+    if (!costData.costHistory || costData.costHistory.length === 0) return null;
+
+    // Find the maximum value for scaling
+    const maxValue = Math.max(...costData.costHistory.map(item => item.totalCost));
+    
+    return (
+      <div className="space-y-2">
+        <div className="flex justify-between text-sm">
+          <span className="text-[var(--text-secondary)]">{formatCurrency(0)}</span>
+          <span className="text-[var(--text-secondary)]">{formatCurrency(maxValue)}</span>
+        </div>
+        <div className="flex items-end h-32 gap-1">
+          {costData.costHistory.map((item, index) => {
+            const height = (item.totalCost / maxValue) * 100;
+            return (
+              <div 
+                key={index} 
+                className="flex-1 flex flex-col items-center group relative"
+                style={{ height: '100%' }}
+              >
+                <div 
+                  className="w-full bg-gradient-to-t from-[var(--color-primary)] to-[var(--color-primary)]/70 rounded-t hover:opacity-90 transition-all duration-200"
+                  style={{ height: `${height}%` }}
+                ></div>
+                <div className="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-[var(--bg-tertiary)] px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
+                  {new Date(item.date).toLocaleDateString('es-ES')}<br/>{formatCurrency(item.totalCost)}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+          <div>
+            <h3 className="text-lg font-semibold text-[var(--text-primary)]">
+              {t('production.cost.analytics.title', 'Cost Analytics')}
+            </h3>
+            <p className="text-sm text-[var(--text-secondary)]">
+              {t('production.cost.analytics.subtitle', 'Detailed cost breakdown and trends')}
+            </p>
+          </div>
+          
+          <div className="flex items-center space-x-2">
+            <Select
+              value={selectedTimeRange}
+              onChange={handleTimeRangeChange}
+              options={[
+                { value: 'day', label: t('common.time_range.day', 'Today') },
+                { value: 'week', label: t('common.time_range.week', 'This Week') },
+                { value: 'month', label: t('common.time_range.month', 'This Month') },
+                { value: 'quarter', label: t('common.time_range.quarter', 'This Quarter') },
+                { value: 'year', label: t('common.time_range.year', 'This Year') }
+              ]}
+            />
+            <Button 
+              variant="outline" 
+              size="sm"
+              onClick={onExport}
+              disabled={!onExport}
+            >
+              <Download className="w-4 h-4 mr-1" />
+              {t('common.export', 'Export')}
+            </Button>
+          </div>
+        </div>
+        
+        <div className="flex items-center justify-between mt-4 pt-4 border-t border-[var(--border-primary)]">
+          <div className="flex items-center space-x-3">
+            <Badge variant={budgetStatus.color as 'success' | 'warning' | 'error' | 'default' | 'info'}>
+              {budgetStatus.label}
+            </Badge>
+          </div>
+          <div className="text-sm text-[var(--text-secondary)]">
+            {t('production.cost.last_updated', 'Updated today')}
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardBody className="space-y-8">
+        {/* Key Metrics */}
+        <StatsGrid
+          stats={costStats}
+          columns={2}
+          gap="md"
+        />
+
+        {/* Cost Trend Chart */}
+        <div>
+          <h4 className="text-sm font-medium text-[var(--text-primary)] mb-4 flex items-center">
+            <TrendingUp className="w-4 h-4 mr-2" />
+            {t('production.cost.trend', 'Cost Trend')}
+          </h4>
+          {renderCostChart()}
+          <div className="mt-2 text-xs text-[var(--text-tertiary)] text-center">
+            {t('production.cost.trend_description', 'Total cost trend over time')}
+          </div>
+        </div>
+
+        {/* Cost Breakdown */}
+        <div>
+          <h4 className="text-sm font-medium text-[var(--text-primary)] mb-4 flex items-center">
+            <Euro className="w-4 h-4 mr-2" />
+            {t('production.cost.breakdown', 'Cost Breakdown')}
+          </h4>
+          <div className="space-y-3">
+            {costBreakdown.map((item, index) => {
+              const Icon = item.icon;
+              return (
+                <div key={index} className="flex items-center justify-between">
+                  <div className="flex items-center space-x-3">
+                    <div className={`w-3 h-3 rounded-full ${item.color}`}></div>
+                    <Icon className="w-4 h-4 text-[var(--text-tertiary)]" />
+                    <span className="text-sm text-[var(--text-primary)]">
+                      {item.label}
+                    </span>
+                  </div>
+                  <div className="flex items-center space-x-3">
+                    <span className="text-sm font-medium text-[var(--text-primary)]">
+                      {formatCurrency(item.amount)}
+                    </span>
+                    <span className="text-xs text-[var(--text-tertiary)] w-10 text-right">
+                      {item.percentage.toFixed(1)}%
+                    </span>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Budget Progress */}
+        <div>
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-sm font-medium text-[var(--text-primary)]">
+              {t('production.cost.budget_usage', 'Budget Usage')}
+            </span>
+            <span className="text-sm text-[var(--text-secondary)]">
+              {formatCurrency(costData.totalCost)} / {formatCurrency(costData.budget)}
+            </span>
+          </div>
+          <div className="w-full bg-[var(--bg-secondary)] rounded-full h-2.5">
+            <div
+              className={`h-2.5 rounded-full transition-all duration-300 ${costData.totalCost > costData.budget ? 'bg-red-500' : costData.totalCost > costData.budget * 0.9 ? 'bg-yellow-500' : 'bg-green-500'}`}
+              style={{
+                width: `${Math.min(100, (costData.totalCost / costData.budget) * 100)}%`
+              }}
+            ></div>
+          </div>
+          <div className="flex items-center justify-between mt-2">
+            <span className={`text-xs font-medium ${getVarianceColor(costData.variance)}`}>
+              {costData.variance > 0 ? '+' : ''}{formatCurrency(costData.variance)}
+            </span>
+            <span className="text-xs text-[var(--text-tertiary)]">
+              {((costData.totalCost / costData.budget) * 100).toFixed(1)}% {t('common.used', 'used')}
+            </span>
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3 pt-4 border-t border-[var(--border-primary)]">
+          <Button
+            variant="outline"
+            onClick={onViewDetails}
+            className="flex-1"
+          >
+            {t('production.cost.view_details', 'View Detailed Report')}
+          </Button>
+          <Button
+            variant="primary"
+            onClick={onOptimize}
+            className="flex-1"
+          >
+            {t('production.cost.optimize', 'Optimize Costs')}
+          </Button>
+        </div>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default ProductionCostAnalytics;
\ No newline at end of file
diff --git a/frontend/src/components/domain/analytics/ReportsTable.tsx b/frontend/src/components/domain/analytics/ReportsTable.tsx
index 68ac0457..99874b4c 100644
--- a/frontend/src/components/domain/analytics/ReportsTable.tsx
+++ b/frontend/src/components/domain/analytics/ReportsTable.tsx
@@ -63,7 +63,7 @@ export const ReportsTable: React.FC<ReportsTableProps> = ({
   const [reportToShare, setReportToShare] = useState<AnalyticsReport | null>(null);
 
   const filteredAndSortedReports = useMemo(() => {
-    let filtered = reports.filter(report => {
+    const filtered = reports.filter(report => {
       const matchesSearch = !searchTerm || 
         report.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
         report.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
diff --git a/frontend/src/components/domain/analytics/index.ts b/frontend/src/components/domain/analytics/index.ts
index be953472..4cb77ad8 100644
--- a/frontend/src/components/domain/analytics/index.ts
+++ b/frontend/src/components/domain/analytics/index.ts
@@ -4,6 +4,7 @@ export { default as ChartWidget } from './ChartWidget';
 export { default as ReportsTable } from './ReportsTable';
 export { default as FilterPanel } from './FilterPanel';
 export { default as ExportOptions } from './ExportOptions';
+export { default as ProductionCostAnalytics } from './ProductionCostAnalytics';
 
 // Types
 export * from './types';
\ No newline at end of file
diff --git a/frontend/src/components/ui/Button/Button.tsx b/frontend/src/components/ui/Button/Button.tsx
index b8466446..881c6a5a 100644
--- a/frontend/src/components/ui/Button/Button.tsx
+++ b/frontend/src/components/ui/Button/Button.tsx
@@ -25,11 +25,11 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
   ...props
 }, ref) => {
   const baseClasses = [
-    'inline-flex items-center justify-center font-semibold tracking-wide',
+    'inline-flex items-center justify-center font-medium',
     'transition-all duration-200 ease-in-out',
     'focus:outline-none focus:ring-2 focus:ring-offset-2',
     'disabled:opacity-50 disabled:cursor-not-allowed',
-    'border rounded-xl shadow-sm',
+    'border rounded-md shadow-sm',
     'hover:shadow-md active:shadow-sm'
   ];
 
@@ -53,10 +53,10 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
       'active:bg-[var(--color-primary-dark)] active:border-[var(--color-primary-dark)]'
     ],
     ghost: [
-      'bg-transparent text-[var(--color-primary)] border-transparent',
-      'hover:bg-[var(--color-primary)]/10 hover:text-[var(--color-primary-dark)]',
+      'bg-transparent text-[var(--text-primary)] border-transparent',
+      'hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-primary)]',
       'focus:ring-[var(--color-primary)]/20',
-      'active:bg-[var(--color-primary)]/20'
+      'active:bg-[var(--bg-secondary)]'
     ],
     danger: [
       'bg-[var(--color-error)] text-[var(--text-inverse)] border-[var(--color-error)]',
@@ -79,11 +79,11 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
   };
 
   const sizeClasses = {
-    xs: 'px-3 py-1.5 text-xs gap-1.5 min-h-7',
-    sm: 'px-4 py-2 text-sm gap-2 min-h-9 sm:min-h-10',
-    md: 'px-6 py-3 text-sm gap-2.5 min-h-11 sm:min-h-12',
-    lg: 'px-8 py-3.5 text-base gap-3 min-h-13 sm:min-h-14',
-    xl: 'px-10 py-4 text-lg gap-3.5 min-h-15 sm:min-h-16'
+    xs: 'px-2 py-1 text-xs gap-1 min-h-[1.75rem]',
+    sm: 'px-3 py-1.5 text-sm gap-1.5 min-h-[2.25rem]',
+    md: 'px-4 py-2 text-sm gap-2 min-h-[2.75rem]',
+    lg: 'px-5 py-2.5 text-base gap-2.5 min-h-[3.25rem]',
+    xl: 'px-6 py-3 text-lg gap-3 min-h-[3.75rem]'
   };
 
   const loadingSpinner = (
@@ -129,13 +129,13 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
     >
       {isLoading && loadingSpinner}
       {!isLoading && leftIcon && (
-        <span className="flex-shrink-0 w-5 h-5 flex items-center justify-center">{leftIcon}</span>
+        <span className="flex-shrink-0 w-4 h-4 flex items-center justify-center">{leftIcon}</span>
       )}
       <span className="relative">
         {isLoading && loadingText ? loadingText : children}
       </span>
       {!isLoading && rightIcon && (
-        <span className="flex-shrink-0 w-5 h-5 flex items-center justify-center">{rightIcon}</span>
+        <span className="flex-shrink-0 w-4 h-4 flex items-center justify-center">{rightIcon}</span>
       )}
     </button>
   );
diff --git a/frontend/src/components/ui/DatePicker/DatePicker.tsx b/frontend/src/components/ui/DatePicker/DatePicker.tsx
index 6444cddc..7adb3971 100644
--- a/frontend/src/components/ui/DatePicker/DatePicker.tsx
+++ b/frontend/src/components/ui/DatePicker/DatePicker.tsx
@@ -232,7 +232,7 @@ const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(({
   const handleDateSelect = (date: Date) => {
     if (isDateDisabled(date)) return;
 
-    let newDate = new Date(date);
+    const newDate = new Date(date);
     
     // Preserve time if time is shown and a previous value exists
     if (showTime && currentValue) {
diff --git a/frontend/src/components/ui/Table/Table.tsx b/frontend/src/components/ui/Table/Table.tsx
index 9f77183d..16c8ea14 100644
--- a/frontend/src/components/ui/Table/Table.tsx
+++ b/frontend/src/components/ui/Table/Table.tsx
@@ -531,7 +531,7 @@ const TablePagination: React.FC<TablePaginationProps> = ({
     const buttons = [];
     const maxVisible = 7;
     let startPage = Math.max(1, current - Math.floor(maxVisible / 2));
-    let endPage = Math.min(totalPages, startPage + maxVisible - 1);
+    const endPage = Math.min(totalPages, startPage + maxVisible - 1);
 
     if (endPage - startPage + 1 < maxVisible) {
       startPage = Math.max(1, endPage - maxVisible + 1);
diff --git a/frontend/src/hooks/index.ts b/frontend/src/hooks/index.ts
index b2e95938..5ee01471 100644
--- a/frontend/src/hooks/index.ts
+++ b/frontend/src/hooks/index.ts
@@ -1,5 +1,5 @@
 // Export commonly used hooks
 export { default as useLocalStorage } from './useLocalStorage';
 export { default as useDebounce } from './useDebounce';
-export { default as useSubscription } from './useSubscription';
+export { default as useSubscription } from '../api/hooks/subscription';
 export { useTenantId, useTenantInfo, useRequiredTenant } from './useTenantId';
\ No newline at end of file
diff --git a/frontend/src/hooks/useSubscriptionAwareRoutes.ts b/frontend/src/hooks/useSubscriptionAwareRoutes.ts
index bd9656f3..394b1715 100644
--- a/frontend/src/hooks/useSubscriptionAwareRoutes.ts
+++ b/frontend/src/hooks/useSubscriptionAwareRoutes.ts
@@ -4,7 +4,7 @@
 
 import { useMemo } from 'react';
 import { RouteConfig } from '../router/routes.config';
-import { useSubscription } from './useSubscription';
+import { useSubscription } from '../api/hooks/subscription';
 
 export const useSubscriptionAwareRoutes = (routes: RouteConfig[]) => {
   const { subscriptionInfo, canAccessAnalytics } = useSubscription();
diff --git a/frontend/src/pages/app/DashboardPage.tsx b/frontend/src/pages/app/DashboardPage.tsx
index 1cf9eff3..08b2c3cc 100644
--- a/frontend/src/pages/app/DashboardPage.tsx
+++ b/frontend/src/pages/app/DashboardPage.tsx
@@ -8,17 +8,12 @@ import StatsGrid from '../../components/ui/Stats/StatsGrid';
 import RealTimeAlerts from '../../components/domain/dashboard/RealTimeAlerts';
 import ProcurementPlansToday from '../../components/domain/dashboard/ProcurementPlansToday';
 import ProductionPlansToday from '../../components/domain/dashboard/ProductionPlansToday';
-import ProductionCostMonitor from '../../components/domain/dashboard/ProductionCostMonitor';
-import EquipmentStatusWidget from '../../components/domain/dashboard/EquipmentStatusWidget';
-import AIInsightsWidget from '../../components/domain/dashboard/AIInsightsWidget';
 import { useTenant } from '../../stores/tenant.store';
 import {
   AlertTriangle,
   Clock,
   Euro,
   Package,
-  TrendingUp,
-  TrendingDown,
   Plus,
   Building2
 } from 'lucide-react';
@@ -173,15 +168,6 @@ const DashboardPage: React.FC = () => {
           onViewDetails={handleViewDetails}
           onViewAllPlans={handleViewAllPlans}
         />
-
-        {/* 4. Production Cost Monitor */}
-        <ProductionCostMonitor />
-
-        {/* 5. Equipment Status Widget */}
-        <EquipmentStatusWidget />
-
-        {/* 6. AI Insights Widget */}
-        <AIInsightsWidget />
       </div>
     </div>
   );
diff --git a/frontend/src/pages/app/analytics/ProductionAnalyticsPage.tsx b/frontend/src/pages/app/analytics/ProductionAnalyticsPage.tsx
index 64b1f170..64b6db97 100644
--- a/frontend/src/pages/app/analytics/ProductionAnalyticsPage.tsx
+++ b/frontend/src/pages/app/analytics/ProductionAnalyticsPage.tsx
@@ -1,107 +1,938 @@
 import React, { useState } from 'react';
-import { TrendingUp, DollarSign, Activity, AlertTriangle, Settings } from 'lucide-react';
+import { TrendingUp, DollarSign, Activity, AlertTriangle, Settings, CheckCircle, Wrench, Zap, Thermometer, Eye, Clock, CalendarClock, WrenchIcon, BarChart3, Bell, History, Lock } from 'lucide-react';
 import { Card, StatsGrid, Button } from '../../../components/ui';
 import { PageHeader } from '../../../components/layout';
-import { QualityDashboard, EquipmentManager } from '../../../components/domain/production';
+import { QualityDashboard } from '../../../components/domain/production';
+import ProductionCostAnalytics from '../../../components/domain/analytics/ProductionCostAnalytics';
+import AIInsightsWidget from '../../../components/domain/dashboard/AIInsightsWidget';
+import EquipmentStatusWidget from '../../../components/domain/dashboard/EquipmentStatusWidget';
+import { Badge } from '../../../components/ui/Badge';
+import { useSubscription } from '../../../api/hooks/subscription';
+import { useCurrentTenant } from '../../../stores/tenant.store';
 
-// Production Cost Monitor Component (placeholder)
-const ProductionCostMonitor: React.FC = () => {
-  return (
-    <Card className="p-6">
-      <div className="flex items-center justify-between mb-4">
-        <h3 className="text-lg font-semibold text-[var(--text-primary)]">Monitor de Costos de Producción</h3>
-        <DollarSign className="w-5 h-5 text-[var(--color-primary)]" />
-      </div>
-      <div className="space-y-4">
-        <div className="grid grid-cols-2 gap-4">
-          <div className="p-4 bg-[var(--surface-secondary)] rounded-lg">
-            <p className="text-sm text-[var(--text-secondary)]">Costo por unidad</p>
-            <p className="text-2xl font-bold text-[var(--text-primary)]">€2.45</p>
-            <p className="text-xs text-green-600">-8% vs mes anterior</p>
-          </div>
-          <div className="p-4 bg-[var(--surface-secondary)] rounded-lg">
-            <p className="text-sm text-[var(--text-secondary)]">Eficiencia de costos</p>
-            <p className="text-2xl font-bold text-[var(--text-primary)]">92%</p>
-            <p className="text-xs text-green-600">+3% vs objetivo</p>
-          </div>
-        </div>
-        <div className="h-64 bg-[var(--surface-secondary)] rounded-lg flex items-center justify-center">
-          <p className="text-[var(--text-secondary)]">Gráfico de tendencias de costos</p>
-        </div>
-      </div>
-    </Card>
-  );
+// Mock data for equipment (from MaquinariaPage)
+const MOCK_EQUIPMENT = [
+  {
+    id: '1',
+    name: 'Horno Principal #1',
+    type: 'oven',
+    model: 'Miwe Condo CO 4.1212',
+    serialNumber: 'MCO-2021-001',
+    location: 'Área de Horneado - Zona A',
+    status: 'operational',
+    installDate: '2021-03-15',
+    lastMaintenance: '2024-01-15',
+    nextMaintenance: '2024-04-15',
+    maintenanceInterval: 90,
+    temperature: 220,
+    targetTemperature: 220,
+    efficiency: 92,
+    uptime: 98.5,
+    energyUsage: 45.2,
+    utilizationToday: 87,
+    alerts: [],
+    maintenanceHistory: [
+      {
+        id: '1',
+        date: '2024-01-15',
+        type: 'preventive',
+        description: 'Limpieza general y calibración de termostatos',
+        technician: 'Juan Pérez',
+        cost: 150,
+        downtime: 2,
+        partsUsed: ['Filtros de aire', 'Sellos de puerta']
+      }
+    ],
+    specifications: {
+      power: 45,
+      capacity: 24,
+      dimensions: { width: 200, height: 180, depth: 120 },
+      weight: 850
+    }
+  },
+  {
+    id: '2',
+    name: 'Batidora Industrial #2',
+    type: 'mixer',
+    model: 'Hobart HL800',
+    serialNumber: 'HHL-2020-002',
+    location: 'Área de Preparación - Zona B',
+    status: 'warning',
+    installDate: '2020-08-10',
+    lastMaintenance: '2024-01-20',
+    nextMaintenance: '2024-02-20',
+    maintenanceInterval: 30,
+    efficiency: 88,
+    uptime: 94.2,
+    energyUsage: 12.8,
+    utilizationToday: 76,
+    alerts: [
+      {
+        id: '1',
+        type: 'warning',
+        message: 'Vibración inusual detectada en el motor',
+        timestamp: '2024-01-23T10:30:00Z',
+        acknowledged: false
+      },
+      {
+        id: '2',
+        type: 'info',
+        message: 'Mantenimiento programado en 5 días',
+        timestamp: '2024-01-23T08:00:00Z',
+        acknowledged: true
+      }
+    ],
+    maintenanceHistory: [
+      {
+        id: '1',
+        date: '2024-01-20',
+        type: 'corrective',
+        description: 'Reemplazo de correas de transmisión',
+        technician: 'María González',
+        cost: 85,
+        downtime: 4,
+        partsUsed: ['Correa tipo V', 'Rodamientos']
+      }
+    ],
+    specifications: {
+      power: 15,
+      capacity: 80,
+      dimensions: { width: 120, height: 150, depth: 80 },
+      weight: 320
+    }
+  },
+  {
+    id: '3',
+    name: 'Cámara de Fermentación #1',
+    type: 'proofer',
+    model: 'Bongard EUROPA 16.18',
+    serialNumber: 'BEU-2022-001',
+    location: 'Área de Fermentación',
+    status: 'maintenance',
+    installDate: '2022-06-20',
+    lastMaintenance: '2024-01-23',
+    nextMaintenance: '2024-01-24',
+    maintenanceInterval: 60,
+    temperature: 32,
+    targetTemperature: 35,
+    efficiency: 0,
+    uptime: 85.1,
+    energyUsage: 0,
+    utilizationToday: 0,
+    alerts: [
+      {
+        id: '1',
+        type: 'info',
+        message: 'En mantenimiento programado',
+        timestamp: '2024-01-23T06:00:00Z',
+        acknowledged: true
+      }
+    ],
+    maintenanceHistory: [
+      {
+        id: '1',
+        date: '2024-01-23',
+        type: 'preventive',
+        description: 'Mantenimiento programado - sistema de humidificación',
+        technician: 'Carlos Rodríguez',
+        cost: 200,
+        downtime: 8,
+        partsUsed: ['Sensor de humedad', 'Válvulas']
+      }
+    ],
+    specifications: {
+      power: 8,
+      capacity: 16,
+      dimensions: { width: 180, height: 200, depth: 100 },
+      weight: 450
+    }
+  }
+];
+
+// Mock chart data for equipment analytics (from MaquinariaPage)
+const MOCK_CHART_DATA = [
+  {
+    id: 'efficiency',
+    name: 'Eficiencia',
+    type: 'bar' as const,
+    visible: true,
+    color: '#10B981',
+    data: [
+      { x: 1, y: 92, label: 'Horno Principal #1' },
+      { x: 2, y: 88, label: 'Batidora Industrial #2' },
+      { x: 3, y: 0, label: 'Cámara de Fermentación #1' }
+    ]
+  },
+  {
+    id: 'uptime',
+    name: 'Tiempo de Actividad',
+    type: 'line' as const,
+    visible: true,
+    color: '#3B82F6',
+    data: [
+      { x: 1, y: 98.5, label: 'Horno Principal #1' },
+      { x: 2, y: 94.2, label: 'Batidora Industrial #2' },
+      { x: 3, y: 85.1, label: 'Cámara de Fermentación #1' }
+    ]
+  },
+  {
+    id: 'energy',
+    name: 'Consumo Energético',
+    type: 'area' as const,
+    visible: true,
+    color: '#F59E0B',
+    data: [
+      { x: 1, y: 45.2, label: 'Horno Principal #1' },
+      { x: 2, y: 12.8, label: 'Batidora Industrial #2' },
+      { x: 3, y: 0, label: 'Cámara de Fermentación #1' }
+    ]
+  }
+];
+
+const MOCK_MAINTENANCE_CHART_DATA = [
+  {
+    id: 'costs',
+    name: 'Costos de Mantenimiento',
+    type: 'bar' as const,
+    visible: true,
+    color: '#8B5CF6',
+    data: [
+      { x: 1, y: 150, label: 'Horno Principal #1' },
+      { x: 2, y: 85, label: 'Batidora Industrial #2' },
+      { x: 3, y: 200, label: 'Cámara de Fermentación #1' }
+    ]
+  },
+  {
+    id: 'downtime',
+    name: 'Tiempo de Inactividad',
+    type: 'line' as const,
+    visible: true,
+    color: '#EF4444',
+    data: [
+      { x: 1, y: 2, label: 'Horno Principal #1' },
+      { x: 2, y: 4, label: 'Batidora Industrial #2' },
+      { x: 3, y: 8, label: 'Cámara de Fermentación #1' }
+    ]
+  }
+];
+
+const MOCK_STATUS_CHART_DATA = [
+  {
+    id: 'status',
+    name: 'Estado de Equipos',
+    type: 'pie' as const,
+    visible: true,
+    color: '#10B981',
+    data: [
+      { x: 'Operativo', y: 1, label: 'Operativo' },
+      { x: 'Advertencia', y: 1, label: 'Advertencia' },
+      { x: 'Mantenimiento', y: 1, label: 'Mantenimiento' }
+    ]
+  }
+];
+
+// Import statement is at the top of the file - already included
+
+// The enhanced ProductionCostMonitor is now imported from the components directory
+
+
+
+// Helper functions for equipment status
+const getStatusConfig = (status: string) => {
+  const configs = {
+    operational: { color: '#10B981', text: 'Operativo', icon: CheckCircle },
+    warning: { color: '#F59E0B', text: 'Advertencia', icon: AlertTriangle },
+    maintenance: { color: '#3B82F6', text: 'Mantenimiento', icon: Wrench },
+    down: { color: '#EF4444', text: 'Fuera de Servicio', icon: AlertTriangle }
+  };
+  return configs[status as keyof typeof configs] || { color: '#6B7280', text: 'Desconocido', icon: Settings };
 };
 
-// AI Insights Component (placeholder)
-const AIInsights: React.FC = () => {
-  return (
-    <Card className="p-6">
-      <div className="flex items-center justify-between mb-4">
-        <h3 className="text-lg font-semibold text-[var(--text-primary)]">Insights de IA</h3>
-        <Activity className="w-5 h-5 text-[var(--color-primary)]" />
-      </div>
-      <div className="space-y-4">
-        <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
-          <div className="flex items-start gap-3">
-            <TrendingUp className="w-5 h-5 text-blue-600 mt-0.5" />
-            <div>
-              <h4 className="font-medium text-blue-900">Optimización de Producción</h4>
-              <p className="text-sm text-blue-700">Se detectó que producir croissants los martes reduce costos en 15%</p>
-            </div>
-          </div>
-        </div>
-        <div className="p-4 bg-amber-50 border border-amber-200 rounded-lg">
-          <div className="flex items-start gap-3">
-            <AlertTriangle className="w-5 h-5 text-amber-600 mt-0.5" />
-            <div>
-              <h4 className="font-medium text-amber-900">Predicción de Demanda</h4>
-              <p className="text-sm text-amber-700">Aumento del 25% en demanda de pan integral previsto para el fin de semana</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Card>
-  );
+const getTypeIcon = (type: string) => {
+  const icons = {
+    oven: Thermometer,
+    mixer: Activity,
+    proofer: Settings,
+    freezer: Zap,
+    packaging: Settings,
+    other: Settings
+  };
+  return icons[type as keyof typeof icons] || Settings;
 };
 
-// Equipment Status Component (placeholder)
-const EquipmentStatus: React.FC = () => {
+const getStatusColor = (status: string): string => {
+  const statusColors: { [key: string]: string } = {
+    operational: '#10B981', // green-500
+    warning: '#F59E0B', // amber-500
+    maintenance: '#3B82F6', // blue-500
+    down: '#EF4444' // red-500
+  };
+  return statusColors[status] || '#6B7280'; // gray-500 as default
+};
+
+// Equipment Analytics Component (from MaquinariaPage)
+const EquipmentAnalytics: React.FC = () => {
+  const [activeTab, setActiveTab] = useState('overview');
+  const [searchTerm, setSearchTerm] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+
+  // Filter equipment based on search and status
+  const filteredEquipment = MOCK_EQUIPMENT.filter(eq => {
+    const matchesSearch = !searchTerm ||
+      eq.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      eq.location.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      eq.type.toLowerCase().includes(searchTerm.toLowerCase());
+
+    const matchesStatus = statusFilter === 'all' || eq.status === statusFilter;
+
+    return matchesSearch && matchesStatus;
+  });
+
+  // Calculate equipment stats
+  const equipmentStats = {
+    total: MOCK_EQUIPMENT.length,
+    operational: MOCK_EQUIPMENT.filter(e => e.status === 'operational').length,
+    warning: MOCK_EQUIPMENT.filter(e => e.status === 'warning').length,
+    maintenance: MOCK_EQUIPMENT.filter(e => e.status === 'maintenance').length,
+    down: MOCK_EQUIPMENT.filter(e => e.status === 'down').length,
+    avgEfficiency: MOCK_EQUIPMENT.reduce((sum, e) => sum + e.efficiency, 0) / MOCK_EQUIPMENT.length,
+    avgUptime: MOCK_EQUIPMENT.reduce((sum, e) => sum + e.uptime, 0) / MOCK_EQUIPMENT.length,
+    totalAlerts: MOCK_EQUIPMENT.reduce((sum, e) => sum + e.alerts.filter(a => !a.acknowledged).length, 0)
+  };
+
   return (
-    <Card className="p-6">
-      <div className="flex items-center justify-between mb-4">
-        <h3 className="text-lg font-semibold text-[var(--text-primary)]">Estado de Equipos</h3>
-        <Settings className="w-5 h-5 text-[var(--color-primary)]" />
-      </div>
-      <div className="space-y-3">
-        <div className="flex items-center justify-between p-3 bg-green-50 border border-green-200 rounded-lg">
-          <div>
-            <p className="font-medium text-green-900">Horno Principal</p>
-            <p className="text-sm text-green-700">Funcionando óptimamente</p>
-          </div>
-          <div className="w-3 h-3 bg-green-500 rounded-full"></div>
+    <div className="space-y-6">
+      {/* Stats Grid */}
+      <StatsGrid
+        stats={[
+          {
+            title: 'Total Equipos',
+            value: equipmentStats.total,
+            icon: Settings,
+            variant: 'default' as const
+          },
+          {
+            title: 'Operativo',
+            value: equipmentStats.operational,
+            icon: CheckCircle,
+            variant: 'success' as const,
+            subtitle: `${((equipmentStats.operational / equipmentStats.total) * 100).toFixed(1)}%`
+          },
+          {
+            title: 'Eficiencia Promedio',
+            value: `${equipmentStats.avgEfficiency.toFixed(1)}%`,
+            icon: TrendingUp,
+            variant: equipmentStats.avgEfficiency >= 90 ? 'success' as const : 'warning' as const
+          },
+          {
+            title: 'Alertas Activas',
+            value: equipmentStats.totalAlerts,
+            icon: Bell,
+            variant: equipmentStats.totalAlerts === 0 ? 'success' as const : 'error' as const
+          }
+        ]}
+        columns={4}
+      />
+
+      {/* Tabs for different views */}
+      <Card className="p-0">
+        <div className="border-b border-[var(--border-primary)]">
+          <nav className="-mb-px flex space-x-8 px-6 pt-4">
+            <button
+              onClick={() => setActiveTab('overview')}
+              className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                activeTab === 'overview'
+                  ? 'border-orange-500 text-[var(--color-primary)]'
+                  : 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
+              }`}
+            >
+              <BarChart3 className="w-4 h-4 inline mr-2" />
+              Resumen
+            </button>
+            <button
+              onClick={() => setActiveTab('maintenance')}
+              className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                activeTab === 'maintenance'
+                  ? 'border-orange-500 text-[var(--color-primary)]'
+                  : 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
+              }`}
+            >
+              <CalendarClock className="w-4 h-4 inline mr-2" />
+              Mantenimiento
+            </button>
+            <button
+              onClick={() => setActiveTab('status')}
+              className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                activeTab === 'status'
+                  ? 'border-orange-500 text-[var(--color-primary)]'
+                  : 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
+              }`}
+            >
+              <WrenchIcon className="w-4 h-4 inline mr-2" />
+              Estado
+            </button>
+          </nav>
         </div>
-        <div className="flex items-center justify-between p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
-          <div>
-            <p className="font-medium text-yellow-900">Mezcladora #2</p>
-            <p className="text-sm text-yellow-700">Mantenimiento requerido en 3 días</p>
-          </div>
-          <div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
+
+        <div className="p-6">
+          {/* Overview Tab */}
+          {activeTab === 'overview' && (
+            <div className="space-y-6">
+              {/* Charts for Equipment Analytics */}
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <Card className="p-4">
+                  <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Eficiencia y Tiempo de Actividad</h3>
+                  <div className="h-64">
+                    <canvas ref={(canvas) => {
+                      if (canvas) {
+                        const ctx = canvas.getContext('2d');
+                        if (ctx) {
+                          // Set canvas size
+                          canvas.width = canvas.clientWidth;
+                          canvas.height = canvas.clientHeight;
+                          
+                          // Clear canvas
+                          ctx.clearRect(0, 0, canvas.width, canvas.height);
+                          
+                          // Draw simple bar chart for efficiency
+                          const padding = 40;
+                          const chartWidth = canvas.width - 2 * padding;
+                          const chartHeight = canvas.height - 2 * padding;
+                          
+                          // Get max value for scaling
+                          const maxValue = Math.max(...MOCK_CHART_DATA[0].data.map(d => d.y));
+                          
+                          // Draw bars
+                          MOCK_CHART_DATA[0].data.forEach((point, index) => {
+                            const barWidth = chartWidth / MOCK_CHART_DATA[0].data.length - 10;
+                            const x = padding + index * (chartWidth / MOCK_CHART_DATA[0].data.length) + 5;
+                            const barHeight = (point.y / maxValue) * chartHeight;
+                            const y = padding + chartHeight - barHeight;
+                            
+                            // Bar
+                            ctx.fillStyle = MOCK_CHART_DATA[0].color;
+                            ctx.fillRect(x, y, barWidth, barHeight);
+                            
+                            // Label
+                            ctx.fillStyle = '#374151';
+                            ctx.font = '12px sans-serif';
+                            ctx.textAlign = 'center';
+                            ctx.fillText(point.label, x + barWidth / 2, canvas.height - 10);
+                            ctx.fillText(point.y.toString(), x + barWidth / 2, y - 5);
+                          });
+                          
+                          // Axes
+                          ctx.strokeStyle = '#374151';
+                          ctx.lineWidth = 2;
+                          ctx.beginPath();
+                          ctx.moveTo(padding, padding);
+                          ctx.lineTo(padding, padding + chartHeight);
+                          ctx.lineTo(padding + chartWidth, padding + chartHeight);
+                          ctx.stroke();
+                        }
+                      }
+                    }} className="w-full h-full" />
+                  </div>
+                </Card>
+                
+                <Card className="p-4">
+                  <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Estado de Equipos</h3>
+                  <div className="h-64">
+                    <canvas ref={(canvas) => {
+                      if (canvas) {
+                        const ctx = canvas.getContext('2d');
+                        if (ctx) {
+                          // Set canvas size
+                          canvas.width = canvas.clientWidth;
+                          canvas.height = canvas.clientHeight;
+                          
+                          // Clear canvas
+                          ctx.clearRect(0, 0, canvas.width, canvas.height);
+                          
+                          // Draw pie chart for status distribution
+                          const centerX = canvas.width / 2;
+                          const centerY = canvas.height / 2;
+                          const radius = Math.min(canvas.width, canvas.height) / 3;
+                          
+                          const total = MOCK_STATUS_CHART_DATA[0].data.reduce((sum, point) => sum + point.y, 0);
+                          let startAngle = -Math.PI / 2;
+                          
+                          const colors = ['#10B981', '#F59E0B', '#3B82F6'];
+                          
+                          MOCK_STATUS_CHART_DATA[0].data.forEach((point, index) => {
+                            const sliceAngle = (point.y / total) * 2 * Math.PI;
+                            const color = colors[index];
+                            
+                            ctx.fillStyle = color;
+                            ctx.beginPath();
+                            ctx.moveTo(centerX, centerY);
+                            ctx.arc(centerX, centerY, radius, startAngle, startAngle + sliceAngle);
+                            ctx.closePath();
+                            ctx.fill();
+                            
+                            // Draw slice border
+                            ctx.strokeStyle = '#ffffff';
+                            ctx.lineWidth = 2;
+                            ctx.stroke();
+                            
+                            // Draw labels
+                            const labelAngle = startAngle + sliceAngle / 2;
+                            const labelX = centerX + Math.cos(labelAngle) * (radius + 30);
+                            const labelY = centerY + Math.sin(labelAngle) * (radius + 30);
+                            
+                            ctx.fillStyle = '#374151';
+                            ctx.font = '12px sans-serif';
+                            ctx.textAlign = 'center';
+                            ctx.fillText(point.x, labelX, labelY);
+                            
+                            const percentage = ((point.y / total) * 100).toFixed(1);
+                            ctx.fillText(`${percentage}%`, labelX, labelY + 15);
+                            
+                            startAngle += sliceAngle;
+                          });
+                        }
+                      }
+                    }} className="w-full h-full" />
+                  </div>
+                </Card>
+              </div>
+
+              {/* Controls */}
+              <Card className="p-4">
+                <div className="flex flex-col sm:flex-row gap-4">
+                  <div className="flex-1">
+                    <div className="relative">
+                      <Settings className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-[var(--text-tertiary)]" />
+                      <input
+                        placeholder="Buscar equipos..."
+                        value={searchTerm}
+                        onChange={(e) => setSearchTerm(e.target.value)}
+                        className="w-full pl-10 pr-4 py-2 border border-[var(--border-primary)] rounded-md bg-[var(--bg-primary)] text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent"
+                      />
+                    </div>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Wrench className="w-4 h-4 text-[var(--text-tertiary)]" />
+                    <select
+                      value={statusFilter}
+                      onChange={(e) => setStatusFilter(e.target.value)}
+                      className="px-3 py-2 border border-[var(--border-primary)] rounded-md bg-[var(--bg-primary)] text-[var(--text-primary)]"
+                    >
+                      <option value="all">Todos los estados</option>
+                      <option value="operational">Operativo</option>
+                      <option value="warning">Advertencia</option>
+                      <option value="maintenance">Mantenimiento</option>
+                      <option value="down">Fuera de Servicio</option>
+                    </select>
+                  </div>
+                </div>
+              </Card>
+
+              {/* Equipment Grid */}
+              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                {filteredEquipment.map((equipment) => {
+                  const statusConfig = getStatusConfig(equipment.status);
+                  const TypeIcon = getTypeIcon(equipment.type);
+
+                  return (
+                    <Card key={equipment.id} className="p-4">
+                      <div className="flex items-start justify-between">
+                        <div className="flex items-center space-x-3">
+                          <div 
+                            className="w-3 h-3 rounded-full"
+                            style={{ backgroundColor: statusConfig.color }}
+                          />
+                          <div>
+                            <h3 className="font-semibold text-[var(--text-primary)]">{equipment.name}</h3>
+                            <p className="text-sm text-[var(--text-secondary)]">{equipment.location}</p>
+                          </div>
+                        </div>
+                        <TypeIcon className="w-5 h-5 text-[var(--text-tertiary)]" />
+                      </div>
+                      
+                      <div className="mt-4 grid grid-cols-2 gap-3">
+                        <div>
+                          <p className="text-xs text-[var(--text-secondary)]">Eficiencia</p>
+                          <p className="font-semibold text-[var(--text-primary)]">{equipment.efficiency}%</p>
+                        </div>
+                        <div>
+                          <p className="text-xs text-[var(--text-secondary)]">Tiempo Activo</p>
+                          <p className="font-semibold text-[var(--text-primary)]">{equipment.uptime.toFixed(1)}%</p>
+                        </div>
+                        <div>
+                          <p className="text-xs text-[var(--text-secondary)]">Consumo</p>
+                          <p className="font-semibold text-[var(--text-primary)]">{equipment.energyUsage} kW</p>
+                        </div>
+                        <div>
+                          <p className="text-xs text-[var(--text-secondary)]">Utilización Hoy</p>
+                          <p className="font-semibold text-[var(--text-primary)]">{equipment.utilizationToday}%</p>
+                        </div>
+                      </div>
+                      
+                      <div className="mt-4 flex justify-between">
+                        <Badge 
+                          variant={equipment.status === 'operational' ? 'success' : 
+                                 equipment.status === 'warning' ? 'warning' : 
+                                 equipment.status === 'maintenance' ? 'info' : 'error'}
+                        >
+                          {statusConfig.text}
+                        </Badge>
+                        <Button variant="outline" size="sm">
+                          <Eye className="w-4 h-4 mr-1" />
+                          Ver
+                        </Button>
+                      </div>
+                    </Card>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {/* Maintenance Tab */}
+          {activeTab === 'maintenance' && (
+            <div className="space-y-6">
+              {/* Maintenance Charts */}
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <Card className="p-4">
+                  <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Costos de Mantenimiento</h3>
+                  <div className="h-64">
+                    <canvas ref={(canvas) => {
+                      if (canvas) {
+                        const ctx = canvas.getContext('2d');
+                        if (ctx) {
+                          // Set canvas size
+                          canvas.width = canvas.clientWidth;
+                          canvas.height = canvas.clientHeight;
+                          
+                          // Clear canvas
+                          ctx.clearRect(0, 0, canvas.width, canvas.height);
+                          
+                          // Draw bar chart for maintenance costs
+                          const padding = 40;
+                          const chartWidth = canvas.width - 2 * padding;
+                          const chartHeight = canvas.height - 2 * padding;
+                          
+                          // Get max value for scaling
+                          const maxValue = Math.max(...MOCK_MAINTENANCE_CHART_DATA[0].data.map(d => d.y));
+                          
+                          // Draw bars
+                          MOCK_MAINTENANCE_CHART_DATA[0].data.forEach((point, index) => {
+                            const barWidth = chartWidth / MOCK_MAINTENANCE_CHART_DATA[0].data.length - 10;
+                            const x = padding + index * (chartWidth / MOCK_MAINTENANCE_CHART_DATA[0].data.length) + 5;
+                            const barHeight = (point.y / maxValue) * chartHeight;
+                            const y = padding + chartHeight - barHeight;
+                            
+                            // Bar
+                            ctx.fillStyle = MOCK_MAINTENANCE_CHART_DATA[0].color;
+                            ctx.fillRect(x, y, barWidth, barHeight);
+                            
+                            // Label
+                            ctx.fillStyle = '#374151';
+                            ctx.font = '12px sans-serif';
+                            ctx.textAlign = 'center';
+                            ctx.fillText(point.label, x + barWidth / 2, canvas.height - 10);
+                            ctx.fillText(`€${point.y}`, x + barWidth / 2, y - 5);
+                          });
+                          
+                          // Axes
+                          ctx.strokeStyle = '#374151';
+                          ctx.lineWidth = 2;
+                          ctx.beginPath();
+                          ctx.moveTo(padding, padding);
+                          ctx.lineTo(padding, padding + chartHeight);
+                          ctx.lineTo(padding + chartWidth, padding + chartHeight);
+                          ctx.stroke();
+                        }
+                      }
+                    }} className="w-full h-full" />
+                  </div>
+                </Card>
+                
+                <Card className="p-4">
+                  <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Tiempo de Inactividad</h3>
+                  <div className="h-64">
+                    <canvas ref={(canvas) => {
+                      if (canvas) {
+                        const ctx = canvas.getContext('2d');
+                        if (ctx) {
+                          // Set canvas size
+                          canvas.width = canvas.clientWidth;
+                          canvas.height = canvas.clientHeight;
+                          
+                          // Clear canvas
+                          ctx.clearRect(0, 0, canvas.width, canvas.height);
+                          
+                          // Draw line chart for downtime
+                          const padding = 40;
+                          const chartWidth = canvas.width - 2 * padding;
+                          const chartHeight = canvas.height - 2 * padding;
+                          
+                          // Get max value for scaling
+                          const maxValue = Math.max(...MOCK_MAINTENANCE_CHART_DATA[1].data.map(d => d.y));
+                          
+                          // Draw line
+                          ctx.strokeStyle = MOCK_MAINTENANCE_CHART_DATA[1].color;
+                          ctx.lineWidth = 2;
+                          ctx.beginPath();
+                          
+                          MOCK_MAINTENANCE_CHART_DATA[1].data.forEach((point, index) => {
+                            const x = padding + (index * chartWidth) / (MOCK_MAINTENANCE_CHART_DATA[1].data.length - 1);
+                            const y = padding + chartHeight - ((point.y / maxValue) * chartHeight);
+                            
+                            if (index === 0) {
+                              ctx.moveTo(x, y);
+                            } else {
+                              ctx.lineTo(x, y);
+                            }
+                            
+                            // Draw points
+                            ctx.fillStyle = MOCK_MAINTENANCE_CHART_DATA[1].color;
+                            ctx.beginPath();
+                            ctx.arc(x, y, 4, 0, 2 * Math.PI);
+                            ctx.fill();
+                            
+                            // Labels
+                            ctx.fillStyle = '#374151';
+                            ctx.font = '12px sans-serif';
+                            ctx.textAlign = 'center';
+                            ctx.fillText(point.label, x, canvas.height - 10);
+                            ctx.fillText(`${point.y}h`, x, y - 10);
+                          });
+                          
+                          ctx.stroke();
+                          
+                          // Axes
+                          ctx.strokeStyle = '#374151';
+                          ctx.lineWidth = 2;
+                          ctx.beginPath();
+                          ctx.moveTo(padding, padding);
+                          ctx.lineTo(padding, padding + chartHeight);
+                          ctx.lineTo(padding + chartWidth, padding + chartHeight);
+                          ctx.stroke();
+                        }
+                      }
+                    }} className="w-full h-full" />
+                  </div>
+                </Card>
+              </div>
+
+              {/* Maintenance Schedule */}
+              <Card className="p-4">
+                <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Programación de Mantenimiento</h3>
+                <div className="space-y-4">
+                  {MOCK_EQUIPMENT.map((equipment) => {
+                    const nextMaintenanceDate = new Date(equipment.nextMaintenance);
+                    const daysUntilMaintenance = Math.ceil((nextMaintenanceDate.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24));
+                    const isOverdue = daysUntilMaintenance < 0;
+                    
+                    return (
+                      <div key={equipment.id} className="p-4 bg-[var(--bg-secondary)] rounded-lg border-l-4 border-blue-500">
+                        <div className="flex items-center justify-between">
+                          <div>
+                            <h4 className="font-semibold text-[var(--text-primary)]">{equipment.name}</h4>
+                            <p className="text-sm text-[var(--text-secondary)]">{equipment.model}</p>
+                          </div>
+                          <div className="text-right">
+                            <p className={`font-medium ${isOverdue ? 'text-red-500' : 'text-[var(--text-primary)]'}`}>
+                              {isOverdue ? 'Atrasado' : 'Programado'}
+                            </p>
+                            <p className="text-sm text-[var(--text-secondary)]">
+                              {nextMaintenanceDate.toLocaleDateString('es-ES')}
+                            </p>
+                          </div>
+                        </div>
+                        <div className="mt-3 flex items-center justify-between">
+                          <div className="text-sm">
+                            <span className="text-[var(--text-secondary)]">Técnico: </span>
+                            <span className="text-[var(--text-primary)]">Juan Pérez</span>
+                          </div>
+                          <Button 
+                            variant="outline" 
+                            size="sm"
+                          >
+                            <CalendarClock className="w-4 h-4 mr-2" />
+                            Reagendar
+                          </Button>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </Card>
+            </div>
+          )}
+
+          {/* Status Tab */}
+          {activeTab === 'status' && (
+            <div className="space-y-6">
+              {/* Status Overview */}
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                <Card className="p-4 text-center">
+                  <div className="text-3xl font-bold text-green-500">{equipmentStats.operational}</div>
+                  <div className="text-sm text-[var(--text-secondary)]">Operativo</div>
+                </Card>
+                <Card className="p-4 text-center">
+                  <div className="text-3xl font-bold text-yellow-500">{equipmentStats.warning}</div>
+                  <div className="text-sm text-[var(--text-secondary)]">Advertencia</div>
+                </Card>
+                <Card className="p-4 text-center">
+                  <div className="text-3xl font-bold text-blue-500">{equipmentStats.maintenance}</div>
+                  <div className="text-sm text-[var(--text-secondary)]">Mantenimiento</div>
+                </Card>
+                <Card className="p-4 text-center">
+                  <div className="text-3xl font-bold text-red-500">{equipmentStats.down}</div>
+                  <div className="text-sm text-[var(--text-secondary)]">Fuera de Servicio</div>
+                </Card>
+              </div>
+
+              {/* Active Alerts */}
+              <Card className="p-4">
+                <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Alertas Activas</h3>
+                <div className="space-y-3">
+                  {MOCK_EQUIPMENT.flatMap(eq => 
+                    eq.alerts.filter(a => !a.acknowledged).map(alert => (
+                      <div 
+                        key={`${eq.id}-${alert.id}`} 
+                        className={`p-3 rounded border-l-4 ${
+                          alert.type === 'critical' ? 'bg-red-50 border-red-500 dark:bg-red-900/20' :
+                          alert.type === 'warning' ? 'bg-orange-50 border-orange-500 dark:bg-orange-900/20' :
+                          'bg-blue-50 border-blue-500 dark:bg-blue-900/20'
+                        }`}
+                      >
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center space-x-2">
+                            <AlertTriangle className={`w-4 h-4 ${
+                              alert.type === 'critical' ? 'text-red-500' :
+                              alert.type === 'warning' ? 'text-orange-500' : 'text-blue-500'
+                            }`} />
+                            <span className="font-medium text-[var(--text-primary)]">{eq.name}</span>
+                          </div>
+                          <span className="text-xs text-[var(--text-secondary)]">
+                            {new Date(alert.timestamp).toLocaleString('es-ES')}
+                          </span>
+                        </div>
+                        <p className="text-[var(--text-secondary)] mt-2">{alert.message}</p>
+                        <div className="flex justify-end mt-3">
+                          <Button 
+                            variant="outline" 
+                            size="sm"
+                          >
+                            Acknowledge
+                          </Button>
+                        </div>
+                      </div>
+                    ))
+                  )}
+                  
+                  {MOCK_EQUIPMENT.flatMap(eq => eq.alerts.filter(a => !a.acknowledged)).length === 0 && (
+                    <div className="text-center py-8">
+                      <CheckCircle className="mx-auto h-12 w-12 text-green-500" />
+                      <h3 className="mt-2 text-lg font-medium text-[var(--text-primary)]">No hay alertas activas</h3>
+                      <p className="mt-1 text-[var(--text-secondary)]">Todos los equipos están funcionando correctamente</p>
+                    </div>
+                  )}
+                </div>
+              </Card>
+
+              {/* Equipment Status Details */}
+              <Card className="p-4">
+                <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Detalles de Estado de Equipos</h3>
+                <div className="space-y-4">
+                  {MOCK_EQUIPMENT.map((equipment) => {
+                    const statusConfig = getStatusConfig(equipment.status);
+                    
+                    return (
+                      <div key={equipment.id} className="p-4 bg-[var(--bg-secondary)] rounded-lg">
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center space-x-3">
+                            <div 
+                              className="w-3 h-3 rounded-full"
+                              style={{ backgroundColor: statusConfig.color }}
+                            />
+                            <div>
+                              <h4 className="font-semibold text-[var(--text-primary)]">{equipment.name}</h4>
+                              <p className="text-sm text-[var(--text-secondary)]">{equipment.model}</p>
+                            </div>
+                          </div>
+                          <Badge 
+                            variant={equipment.status === 'operational' ? 'success' : 
+                                   equipment.status === 'warning' ? 'warning' : 
+                                   equipment.status === 'maintenance' ? 'info' : 'error'}
+                          >
+                            {statusConfig.text}
+                          </Badge>
+                        </div>
+                        
+                        <div className="mt-4 grid grid-cols-2 md:grid-cols-4 gap-4">
+                          <div className="text-center">
+                            <div className="text-lg font-bold text-[var(--text-primary)]">{equipment.efficiency}%</div>
+                            <div className="text-xs text-[var(--text-secondary)]">Eficiencia</div>
+                          </div>
+                          <div className="text-center">
+                            <div className="text-lg font-bold text-[var(--text-primary)]">{equipment.uptime.toFixed(1)}%</div>
+                            <div className="text-xs text-[var(--text-secondary)]">Tiempo de Actividad</div>
+                          </div>
+                          <div className="text-center">
+                            <div className="text-lg font-bold text-[var(--text-primary)]">{equipment.energyUsage} kW</div>
+                            <div className="text-xs text-[var(--text-secondary)]">Consumo Energético</div>
+                          </div>
+                          <div className="text-center">
+                            <div className="text-lg font-bold text-[var(--text-primary)]">{equipment.utilizationToday}%</div>
+                            <div className="text-xs text-[var(--text-secondary)]">Utilización Hoy</div>
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </Card>
+            </div>
+          )}
         </div>
-        <div className="flex items-center justify-between p-3 bg-green-50 border border-green-200 rounded-lg">
-          <div>
-            <p className="font-medium text-green-900">Refrigerador</p>
-            <p className="text-sm text-green-700">Temperatura estable</p>
-          </div>
-          <div className="w-3 h-3 bg-green-500 rounded-full"></div>
-        </div>
-      </div>
-    </Card>
+      </Card>
+    </div>
   );
 };
 
 const ProductionAnalyticsPage: React.FC = () => {
   const [activeTab, setActiveTab] = useState('overview');
+  const { canAccessAnalytics } = useSubscription();
+  const currentTenant = useCurrentTenant();
+  const tenantId = currentTenant?.id || '';
+  
+  // Check if user has access to advanced analytics (professional/enterprise)
+  const hasAdvancedAccess = canAccessAnalytics('advanced');
+
+  // If user doesn't have access to advanced analytics, show upgrade message
+  if (!hasAdvancedAccess) {
+    return (
+      <div className="space-y-6">
+        <PageHeader
+          title="Análisis de Producción"
+          description="Análisis avanzado y insights para profesionales y empresas"
+        />
+        
+        <Card className="p-8 text-center">
+          <Lock className="mx-auto h-12 w-12 text-[var(--text-tertiary)] mb-4" />
+          <h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
+            Contenido exclusivo para planes Professional y Enterprise
+          </h3>
+          <p className="text-[var(--text-secondary)] mb-4">
+            El análisis avanzado de producción está disponible solo para usuarios con planes Professional o Enterprise.
+            Actualiza tu plan para acceder a todas las funcionalidades.
+          </p>
+          <Button 
+            variant="primary" 
+            size="md"
+            onClick={() => window.location.hash = '#/app/settings/profile'}
+          >
+            Actualizar Plan
+          </Button>
+        </Card>
+      </div>
+    );
+  }
 
   return (
     <div className="space-y-6">
@@ -175,14 +1006,14 @@ const ProductionAnalyticsPage: React.FC = () => {
             IA Insights
           </button>
           <button
-            onClick={() => setActiveTab('equipment')}
+            onClick={() => setActiveTab('maquinaria')}
             className={`py-2 px-1 border-b-2 font-medium text-sm ${
-              activeTab === 'equipment'
+              activeTab === 'maquinaria'
                 ? 'border-orange-500 text-[var(--color-primary)]'
                 : 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
             }`}
           >
-            Equipos
+            Maquinaria
           </button>
           <button
             onClick={() => setActiveTab('quality')}
@@ -200,9 +1031,9 @@ const ProductionAnalyticsPage: React.FC = () => {
       {/* Tab Content */}
       {activeTab === 'overview' && (
         <div className="grid gap-6 lg:grid-cols-2">
-          <ProductionCostMonitor />
-          <AIInsights />
-          <EquipmentStatus />
+          <ProductionCostAnalytics />
+          <AIInsightsWidget />
+          <EquipmentStatusWidget />
           <Card className="p-6">
             <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Resumen de Calidad</h3>
             <div className="space-y-3">
@@ -224,22 +1055,19 @@ const ProductionAnalyticsPage: React.FC = () => {
       )}
 
       {activeTab === 'costs' && (
-        <div className="grid gap-6">
-          <ProductionCostMonitor />
+        <div className="space-y-6">
+          <ProductionCostAnalytics />
         </div>
       )}
 
       {activeTab === 'ai-insights' && (
         <div className="grid gap-6">
-          <AIInsights />
+          <AIInsightsWidget />
         </div>
       )}
 
-      {activeTab === 'equipment' && (
-        <div className="grid gap-6">
-          <EquipmentStatus />
-          <EquipmentManager />
-        </div>
+      {activeTab === 'maquinaria' && (
+        <EquipmentAnalytics />
       )}
 
       {activeTab === 'quality' && (
diff --git a/frontend/src/pages/app/analytics/forecasting/ForecastingPage.tsx b/frontend/src/pages/app/analytics/forecasting/ForecastingPage.tsx
index 1f051cf9..f8f92898 100644
--- a/frontend/src/pages/app/analytics/forecasting/ForecastingPage.tsx
+++ b/frontend/src/pages/app/analytics/forecasting/ForecastingPage.tsx
@@ -1,10 +1,9 @@
 import React, { useState, useMemo } from 'react';
-import { Calendar, TrendingUp, AlertTriangle, BarChart3, Download, Settings, Loader, Zap, Brain, Target, CloudRain, Sun, Thermometer, Package, Activity, Clock } from 'lucide-react';
-import { Button, Card, Badge, Table, StatsGrid, StatusCard, getStatusColor } from '../../../../components/ui';
-import type { TableColumn } from '../../../../components/ui';
+import { Calendar, TrendingUp, AlertTriangle, BarChart3, Settings, Loader, Zap, Brain, Target, Activity } from 'lucide-react';
+import { Button, Card, Badge, StatsGrid, StatusCard, getStatusColor } from '../../../../components/ui';
 import { PageHeader } from '../../../../components/layout';
 import { LoadingSpinner } from '../../../../components/shared';
-import { DemandChart, ForecastTable } from '../../../../components/domain/forecasting';
+import { DemandChart } from '../../../../components/domain/forecasting';
 import { useTenantForecasts, useCreateSingleForecast } from '../../../../api/hooks/forecasting';
 import { useIngredients } from '../../../../api/hooks/inventory';
 import { useModels } from '../../../../api/hooks/training';
@@ -16,7 +15,6 @@ import { formatters } from '../../../../components/ui/Stats/StatsPresets';
 const ForecastingPage: React.FC = () => {
   const [selectedProduct, setSelectedProduct] = useState('');
   const [forecastPeriod, setForecastPeriod] = useState('7');
-  const [viewMode, setViewMode] = useState<'chart' | 'table'>('chart');
   const [isGenerating, setIsGenerating] = useState(false);
   const [hasGeneratedForecast, setHasGeneratedForecast] = useState(false);
   const [currentForecastData, setCurrentForecastData] = useState<ForecastResponse[]>([]);
@@ -132,63 +130,8 @@ const ForecastingPage: React.FC = () => {
     }
   };
 
-  // Transform forecast data for table display - only real data
-  const transformForecastsForTable = (forecasts: ForecastResponse[]) => {
-    return forecasts.map(forecast => ({
-      id: forecast.id,
-      product: forecast.inventory_product_id,
-      forecastDate: forecast.forecast_date,
-      forecastDemand: forecast.predicted_demand,
-      confidence: Math.round(forecast.confidence_level * 100),
-      confidenceRange: `${forecast.confidence_lower?.toFixed(1) || 'N/A'} - ${forecast.confidence_upper?.toFixed(1) || 'N/A'}`,
-      algorithm: forecast.algorithm,
-    }));
-  };
-
-
-
-
-  const forecastColumns: TableColumn[] = [
-    {
-      key: 'product',
-      title: 'Producto ID',
-      dataIndex: 'product',
-    },
-    {
-      key: 'forecastDate',
-      title: 'Fecha',
-      dataIndex: 'forecastDate',
-      render: (value) => new Date(value).toLocaleDateString('es-ES'),
-    },
-    {
-      key: 'forecastDemand',
-      title: 'Demanda Prevista',
-      dataIndex: 'forecastDemand',
-      render: (value) => (
-        <span className="font-medium text-[var(--color-info)]">{value?.toFixed(2) || 'N/A'}</span>
-      ),
-    },
-    {
-      key: 'confidence',
-      title: 'Confianza',
-      dataIndex: 'confidence',
-      render: (value) => `${value}%`,
-    },
-    {
-      key: 'confidenceRange',
-      title: 'Rango de Confianza',
-      dataIndex: 'confidenceRange',
-    },
-    {
-      key: 'algorithm',
-      title: 'Algoritmo',
-      dataIndex: 'algorithm',
-    },
-  ];
-
   // Use either current forecast data or fetched data
   const forecasts = currentForecastData.length > 0 ? currentForecastData : (forecastsData?.forecasts || []);
-  const transformedForecasts = transformForecastsForTable(forecasts);
   const isLoading = forecastsLoading || ingredientsLoading || modelsLoading || isGenerating;
   const hasError = forecastsError || ingredientsError || modelsError;
 
@@ -467,47 +410,19 @@ const ForecastingPage: React.FC = () => {
                   {products.find(p => p.id === selectedProduct)?.name} • {forecastPeriod} días
                 </p>
               </div>
-              <div className="flex items-center space-x-3">
-                <div className="flex rounded-lg border border-[var(--border-secondary)] overflow-hidden">
-                  <Button
-                    variant={viewMode === 'chart' ? 'primary' : 'outline'}
-                    onClick={() => setViewMode('chart')}
-                    size="sm"
-                  >
-                    <BarChart3 className="w-4 h-4 mr-1" />
-                    Gráfico
-                  </Button>
-                  <Button
-                    variant={viewMode === 'table' ? 'primary' : 'outline'}
-                    onClick={() => setViewMode('table')}
-                    size="sm"
-                  >
-                    <Package className="w-4 h-4 mr-1" />
-                    Tabla
-                  </Button>
-                </div>
-                <Button variant="outline" size="sm">
-                  <Download className="w-4 h-4 mr-2" />
-                  Exportar
-                </Button>
-              </div>
             </div>
 
-            {/* Chart or Table */}
+            {/* Chart View */}
             <div className="min-h-96">
-              {viewMode === 'chart' ? (
-                <DemandChart
-                  data={forecasts}
-                  product={selectedProduct}
-                  period={forecastPeriod}
-                  loading={isLoading}
-                  error={hasError ? 'Error al cargar las predicciones' : null}
-                  height={400}
-                  title=""
-                />
-              ) : (
-                <ForecastTable forecasts={transformedForecasts} />
-              )}
+              <DemandChart
+                data={forecasts}
+                product={selectedProduct}
+                period={forecastPeriod}
+                loading={isLoading}
+                error={hasError ? 'Error al cargar las predicciones' : null}
+                height={400}
+                title=""
+              />
             </div>
           </Card>
 
diff --git a/frontend/src/pages/app/operations/maquinaria/MaquinariaPage.tsx b/frontend/src/pages/app/operations/maquinaria/MaquinariaPage.tsx
index d90ae82a..1e189bf7 100644
--- a/frontend/src/pages/app/operations/maquinaria/MaquinariaPage.tsx
+++ b/frontend/src/pages/app/operations/maquinaria/MaquinariaPage.tsx
@@ -1,7 +1,8 @@
 import React, { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Plus, AlertTriangle, Settings, CheckCircle, Eye, Clock, Zap, Wrench, Thermometer, Activity, Search, Filter, Download, TrendingUp, Bell, History, Calendar, Edit, Trash2 } from 'lucide-react';
+import { Plus, AlertTriangle, Settings, CheckCircle, Eye, Wrench, Thermometer, Activity, Search, Filter, Bell, History, Calendar, Edit, Trash2 } from 'lucide-react';
 import { Button, Input, Card, StatsGrid, StatusCard, getStatusColor } from '../../../../components/ui';
+import { Badge } from '../../../../components/ui/Badge';
 import { LoadingSpinner } from '../../../../components/shared';
 import { PageHeader } from '../../../../components/layout';
 import { useCurrentTenant } from '../../../../stores/tenant.store';
@@ -200,8 +201,6 @@ const MaquinariaPage: React.FC = () => {
     const warning = MOCK_EQUIPMENT.filter(e => e.status === 'warning').length;
     const maintenance = MOCK_EQUIPMENT.filter(e => e.status === 'maintenance').length;
     const down = MOCK_EQUIPMENT.filter(e => e.status === 'down').length;
-    const avgEfficiency = MOCK_EQUIPMENT.reduce((sum, e) => sum + e.efficiency, 0) / total;
-    const avgUptime = MOCK_EQUIPMENT.reduce((sum, e) => sum + e.uptime, 0) / total;
     const totalAlerts = MOCK_EQUIPMENT.reduce((sum, e) => sum + e.alerts.filter(a => !a.acknowledged).length, 0);
 
     return {
@@ -210,8 +209,6 @@ const MaquinariaPage: React.FC = () => {
       warning,
       maintenance,
       down,
-      avgEfficiency,
-      avgUptime,
       totalAlerts
     };
   }, [MOCK_EQUIPMENT]);
@@ -231,23 +228,13 @@ const MaquinariaPage: React.FC = () => {
       oven: Thermometer,
       mixer: Activity,
       proofer: Settings,
-      freezer: Zap,
+      freezer: Settings,
       packaging: Settings,
       other: Settings
     };
     return icons[type];
   };
 
-  const getStatusColor = (status: string): string => {
-    const statusColors: { [key: string]: string } = {
-      operational: '#10B981', // green-500
-      warning: '#F59E0B', // amber-500
-      maintenance: '#3B82F6', // blue-500
-      down: '#EF4444' // red-500
-    };
-    return statusColors[status] || '#6B7280'; // gray-500 as default
-  };
-
   const stats = [
     {
       title: t('labels.total_equipment'),
@@ -262,12 +249,6 @@ const MaquinariaPage: React.FC = () => {
       variant: 'success' as const,
       subtitle: `${((equipmentStats.operational / equipmentStats.total) * 100).toFixed(1)}%`
     },
-    {
-      title: t('labels.avg_efficiency'),
-      value: `${equipmentStats.avgEfficiency.toFixed(1)}%`,
-      icon: TrendingUp,
-      variant: equipmentStats.avgEfficiency >= 90 ? 'success' as const : 'warning' as const
-    },
     {
       title: t('labels.active_alerts'),
       value: equipmentStats.totalAlerts,
diff --git a/frontend/src/pages/app/settings/profile/ProfilePage.tsx b/frontend/src/pages/app/settings/profile/ProfilePage.tsx
index 1a2ff92b..2d529c99 100644
--- a/frontend/src/pages/app/settings/profile/ProfilePage.tsx
+++ b/frontend/src/pages/app/settings/profile/ProfilePage.tsx
@@ -264,7 +264,7 @@ const ProfilePage: React.FC = () => {
 
   // Subscription handlers
   const loadSubscriptionData = async () => {
-    let tenantId = currentTenant?.id || user?.tenant_id;
+    const tenantId = currentTenant?.id || user?.tenant_id;
 
     if (!tenantId) {
       addToast('No se encontró información del tenant', 'error');
@@ -294,7 +294,7 @@ const ProfilePage: React.FC = () => {
   };
 
   const handleUpgradeConfirm = async () => {
-    let tenantId = currentTenant?.id || user?.tenant_id;
+    const tenantId = currentTenant?.id || user?.tenant_id;
 
     if (!tenantId || !selectedPlan) {
       addToast('Información de tenant no disponible', 'error');