Add i18 support

frontend/src/pages/app/DashboardPage.tsx

@@ -1,67 +1,82 @@
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { PageHeader } from '../../components/layout';
+import { Button } from '../../components/ui/Button';
+import { Card, CardHeader, CardBody } from '../../components/ui/Card';
 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 { useTenant } from '../../stores/tenant.store';
 import {
   AlertTriangle,
   Clock,
   DollarSign,
   Package,
   TrendingUp,
-  TrendingDown
+  TrendingDown,
+  Plus,
+  Building2
 } from 'lucide-react';
 
 const DashboardPage: React.FC = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { availableTenants } = useTenant();
+
+  const handleAddNewBakery = () => {
+    navigate('/app/onboarding?new=true');
+  };
+
   const criticalStats = [
     {
-      title: 'Ventas Hoy',
+      title: t('dashboard:stats.sales_today', 'Sales Today'),
       value: '€1,247',
       icon: DollarSign,
       variant: 'success' as const,
       trend: {
         value: 12,
         direction: 'up' as const,
-        label: '% vs ayer'
+        label: t('dashboard:trends.vs_yesterday', '% vs yesterday')
       },
-      subtitle: '+€135 más que ayer'
+      subtitle: '+€135 ' + t('dashboard:messages.more_than_yesterday', 'more than yesterday')
     },
     {
-      title: 'Órdenes Pendientes',
+      title: t('dashboard:stats.pending_orders', 'Pending Orders'),
       value: '23',
       icon: Clock,
       variant: 'warning' as const,
       trend: {
         value: 4,
         direction: 'down' as const,
-        label: '% vs ayer'
+        label: t('dashboard:trends.vs_yesterday', '% vs yesterday')
       },
-      subtitle: 'Requieren atención'
+      subtitle: t('dashboard:messages.require_attention', 'Require attention')
     },
     {
-      title: 'Productos Vendidos',
+      title: t('dashboard:stats.products_sold', 'Products Sold'),
       value: '156',
       icon: Package,
       variant: 'info' as const,
       trend: {
         value: 8,
         direction: 'up' as const,
-        label: '% vs ayer'
+        label: t('dashboard:trends.vs_yesterday', '% vs yesterday')
       },
-      subtitle: '+12 unidades más'
+      subtitle: '+12 ' + t('dashboard:messages.more_units', 'more units')
     },
     {
-      title: 'Stock Crítico',
+      title: t('dashboard:stats.stock_alerts', 'Critical Stock'),
       value: '4',
       icon: AlertTriangle,
       variant: 'error' as const,
       trend: {
         value: 100,
         direction: 'up' as const,
-        label: '% vs ayer'
+        label: t('dashboard:trends.vs_yesterday', '% vs yesterday')
       },
-      subtitle: 'Acción requerida'
+      subtitle: t('dashboard:messages.action_required', 'Action required')
     }
   ];
 
@@ -88,20 +103,54 @@ const DashboardPage: React.FC = () => {
   return (
     <div className="space-y-6 p-4 sm:p-6">
       <PageHeader
-        title="Panel de Control"
-        description="Vista general de tu panadería"
+        title={t('dashboard:title', 'Dashboard')}
+        description={t('dashboard:subtitle', 'Overview of your bakery operations')}
       />
 
       {/* Critical Metrics using StatsGrid */}
       <StatsGrid
         stats={criticalStats}
         columns={4}
-        title="Métricas Críticas"
-        description="Los datos más importantes para la gestión diaria de tu panadería"
         gap="lg"
         className="mb-6"
       />
 
+      {/* Quick Actions - Add New Bakery */}
+      {availableTenants && availableTenants.length > 0 && (
+        <Card>
+          <CardHeader>
+            <h3 className="text-lg font-semibold text-[var(--text-primary)]">{t('dashboard:sections.quick_actions', 'Quick Actions')}</h3>
+            <p className="text-sm text-[var(--text-secondary)]">{t('dashboard:messages.manage_organizations', 'Manage your organizations')}</p>
+          </CardHeader>
+          <CardBody>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              <Button
+                onClick={handleAddNewBakery}
+                variant="outline"
+                size="lg"
+                className="h-auto p-6 flex flex-col items-center gap-3 bg-gradient-to-br from-[var(--color-primary)]/5 to-[var(--color-primary)]/10 border-[var(--color-primary)]/20 hover:border-[var(--color-primary)]/40 hover:bg-[var(--color-primary)]/20 transition-all duration-200"
+              >
+                <div className="w-12 h-12 bg-[var(--color-primary)]/10 rounded-lg flex items-center justify-center">
+                  <Plus className="w-6 h-6 text-[var(--color-primary)]" />
+                </div>
+                <div className="text-center">
+                  <div className="font-semibold text-[var(--text-primary)]">{t('dashboard:quick_actions.add_new_bakery', 'Add New Bakery')}</div>
+                  <div className="text-sm text-[var(--text-secondary)] mt-1">{t('dashboard:messages.setup_new_business', 'Set up a new business from scratch')}</div>
+                </div>
+              </Button>
+
+              <div className="flex flex-col items-center justify-center p-6 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-primary)]">
+                <Building2 className="w-8 h-8 text-[var(--text-tertiary)] mb-2" />
+                <div className="text-center">
+                  <div className="text-sm font-medium text-[var(--text-secondary)]">{t('dashboard:messages.active_organizations', 'Active Organizations')}</div>
+                  <div className="text-2xl font-bold text-[var(--color-primary)]">{availableTenants.length}</div>
+                </div>
+              </div>
+            </div>
+          </CardBody>
+        </Card>
+      )}
+
       {/* Full width blocks - one after another */}
       <div className="space-y-6">
         {/* 1. Real-time alerts block */}