Refactor Establishments module and add multi-language support

src/App.tsx

@@ -39,6 +39,16 @@ import Security from "./pages/dashboard/Security";
 import VehicleManagement from "./pages/dashboard/VehicleManagement";
 import Sustainability from "./pages/dashboard/Sustainability";
 import Establishments from "./pages/dashboard/Establishments";
+import EstablishmentsManagement from "./pages/dashboard/EstablishmentsManagement";
+// Establishments pages
+import EstablishmentPOS from "./pages/dashboard/establishments/POSTerminal";
+import EstablishmentOrders from "./pages/dashboard/establishments/EstablishmentOrders";
+import EstablishmentInventory from "./pages/dashboard/establishments/EstablishmentInventory";
+import EstablishmentStaff from "./pages/dashboard/establishments/EstablishmentStaff";
+import BusinessList from "./components/establishments/BusinessList";
+import BusinessCategories from "./components/establishments/BusinessCategories";
+import BusinessVerification from "./components/establishments/BusinessVerification";
+import BusinessAnalytics from "./components/establishments/BusinessAnalytics";
 // Hotel pages
 import HotelRooms from "./pages/dashboard/hotel/Rooms";
 import HotelCheckIn from "./pages/dashboard/hotel/CheckIn";
@@ -288,7 +298,71 @@ const AppRouter = () => (
       <Route path="/dashboard/establishments" element={
         <ProtectedRoute>
           <DashboardLayout>
-            <Establishments />
+            <EstablishmentsManagement />
+          </DashboardLayout>
+        </ProtectedRoute>
+      } />
+      
+      <Route path="/dashboard/establishments/pos" element={
+        <ProtectedRoute>
+          <DashboardLayout>
+            <EstablishmentPOS />
+          </DashboardLayout>
+        </ProtectedRoute>
+      } />
+      
+      <Route path="/dashboard/establishments/orders" element={
+        <ProtectedRoute>
+          <DashboardLayout>
+            <EstablishmentOrders />
+          </DashboardLayout>
+        </ProtectedRoute>
+      } />
+      
+      <Route path="/dashboard/establishments/inventory" element={
+        <ProtectedRoute>
+          <DashboardLayout>
+            <EstablishmentInventory />
+          </DashboardLayout>
+        </ProtectedRoute>
+      } />
+      
+      <Route path="/dashboard/establishments/staff" element={
+        <ProtectedRoute>
+          <DashboardLayout>
+            <EstablishmentStaff />
+          </DashboardLayout>
+        </ProtectedRoute>
+      } />
+      
+      <Route path="/dashboard/establishments/businesses" element={
+        <ProtectedRoute>
+          <DashboardLayout>
+            <BusinessList />
+          </DashboardLayout>
+        </ProtectedRoute>
+      } />
+      
+      <Route path="/dashboard/establishments/categories" element={
+        <ProtectedRoute>
+          <DashboardLayout>
+            <BusinessCategories />
+          </DashboardLayout>
+        </ProtectedRoute>
+      } />
+      
+      <Route path="/dashboard/establishments/verification" element={
+        <ProtectedRoute>
+          <DashboardLayout>
+            <BusinessVerification />
+          </DashboardLayout>
+        </ProtectedRoute>
+      } />
+      
+      <Route path="/dashboard/establishments/analytics" element={
+        <ProtectedRoute>
+          <DashboardLayout>
+            <BusinessAnalytics />
           </DashboardLayout>
         </ProtectedRoute>
       } />

src/components/AppSidebar.tsx

@@ -65,6 +65,7 @@ import {
   Leaf,
   Store,
   Navigation,
+  QrCode,
 } from "lucide-react";
 
 export function AppSidebar() {
@@ -167,7 +168,17 @@ export function AppSidebar() {
     { icon: Shield, label: "Security", path: "/dashboard/security" },
     { icon: Car, label: "Vehicle Management", path: "/dashboard/vehicle-management" },
     { icon: Leaf, label: "Sustainability", path: "/dashboard/sustainability" },
-    { icon: Store, label: "Comercios", path: "/dashboard/establishments" },
+    { icon: Store, label: "Comercios", path: "/dashboard/establishments", subItems: [
+        { icon: CreditCard, label: "POS Terminal", path: "/dashboard/establishments/pos" },
+        { icon: Receipt, label: "Orders", path: "/dashboard/establishments/orders" },
+        { icon: Package, label: "Inventory", path: "/dashboard/establishments/inventory" },
+        { icon: Users, label: "Staff", path: "/dashboard/establishments/staff" },
+        { icon: Store, label: "Businesses", path: "/dashboard/establishments/businesses" },
+        { icon: QrCode, label: "Categories", path: "/dashboard/establishments/categories" },
+        { icon: BarChart3, label: "Verification", path: "/dashboard/establishments/verification" },
+        { icon: BarChart3, label: "Analytics", path: "/dashboard/establishments/analytics" },
+      ]
+    },
     { icon: Wallet, label: "Wallet", path: "/dashboard/wallet" },
     { icon: MessageSquare, label: "Message", path: "/dashboard/messages", badge: "2" },
   ];

src/contexts/LanguageContext.tsx

@@ -1,8 +1,8 @@
 import React, { createContext, useContext, useState, useEffect } from 'react';
 import { translations } from '@/i18n/translations';
 
-type Language = 'es' | 'en' | 'fr';
+type Language = 'en' | 'es' | 'fr' | 'zh' | 'de';
-type TranslationKey = keyof typeof translations.es;
+type TranslationKey = keyof typeof translations.en;
 
 interface LanguageContextType {
   language: Language;
@@ -15,7 +15,7 @@ const LanguageContext = createContext<LanguageContextType | undefined>(undefined
 export const LanguageProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [language, setLanguageState] = useState<Language>(() => {
     const saved = localStorage.getItem('karibeo-language');
-    return (saved as Language) || 'es';
+    return (saved as Language) || 'en';
   });
 
   const setLanguage = (lang: Language) => {
@@ -24,7 +24,7 @@ export const LanguageProvider: React.FC<{ children: React.ReactNode }> = ({ chil
   };
 
   const t = (key: TranslationKey): string => {
-    return translations[language][key] || translations.es[key] || key;
+    return translations[language][key] || translations.en[key] || key;
   };
 
   useEffect(() => {

src/i18n/translations.ts

@@ -1,90 +1,4 @@
 export const translations = {
-  es: {
-    // Navigation
-    home: 'Inicio',
-    explore: 'Explorar',
-    about: 'Acerca de',
-    dashboard: 'Dashboard',
-    
-    // Authentication
-    signIn: 'Iniciar Sesión',
-    signUp: 'Registrarse',
-    signOut: 'Cerrar Sesión',
-    email: 'Correo Electrónico',
-    password: 'Contraseña',
-    confirmPassword: 'Confirmar Contraseña',
-    fullName: 'Nombre Completo',
-    rememberMe: 'Recordarme',
-    forgotPassword: 'Olvidé mi contraseña',
-    
-    // Welcome messages
-    welcomeBack: 'Bienvenido de vuelta! Por favor',
-    toContinue: 'para continuar.',
-    welcomeSignUp: 'Bienvenido! Por favor',
-    unlockContent: 'Desbloquea un mundo de contenido exclusivo, disfruta de ofertas especiales, y sé el primero en acceder a noticias y actualizaciones emocionantes uniéndote a nuestra comunidad!',
-    
-    // Social auth
-    signUpWithApple: 'Registrarse con Apple',
-    signUpWithGoogle: 'Registrarse con Google',
-    privacyNotice: 'No publicaremos nada sin tu permiso y tus datos personales se mantienen privados',
-    
-    // Form labels
-    enterEmail: 'Ingresa tu email',
-    enterValidEmail: 'Ingresa tu email válido',
-    enterPassword: 'Ingresa tu contraseña',
-    
-    // Hero section
-    heroBadge: 'SOMOS #1 EN EL MERCADO CARIBEÑO',
-    heroTitle: 'Estamos Aquí Para Ayudarte a Navegar Mientras Viajas',
-    heroSubtitle: 'Obtén resultados completos basados en tu ubicación. Tu experiencia turística perfecta te espera.',
-    searchPlaceholder: '¿Qué estás buscando?',
-    locationPlaceholder: 'Ubicación',
-    searchButton: 'Buscar lugares',
-    
-    // Categories
-    apartments: 'Apartamentos',
-    restaurants: 'Restaurantes',
-    events: 'Eventos/Arte',
-    shops: 'Tiendas',
-    museums: 'Museos',
-    gyms: 'Gimnasios',
-    listings: 'listados',
-    
-    // Dashboard
-    totalIncome: 'Ingresos Totales',
-    visitors: 'Visitantes',
-    totalOrders: 'Órdenes Totales',
-    recentBookings: 'Reservas Recientes',
-    statistics: 'Estadísticas',
-    myListings: 'Mis Listados',
-    addListing: 'Agregar Listado',
-    wallet: 'Billetera',
-    profile: 'Perfil',
-    settings: 'Configuraciones',
-    
-    // Common
-    loading: 'Cargando...',
-    error: 'Error',
-    success: 'Éxito',
-    cancel: 'Cancelar',
-    save: 'Guardar',
-    delete: 'Eliminar',
-    edit: 'Editar',
-    view: 'Ver',
-    
-    // Process section
-    processTitle: 'Encuentra Tu Lugar Soñado De La Mejor Manera',
-    processSubtitle: 'Descubre categorías emocionantes. Encuentra lo que estás buscando.',
-    step1: 'Ingresa tu ubicación para comenzar a buscar lugares de interés.',
-    step2: 'Haz una cita en el lugar que quieres visitar.',
-    step3: 'Visita el lugar y disfruta la experiencia.',
-    
-    // Explore section
-    topRegions: 'Principales Regiones',
-    exploreCities: 'Explorar Ciudades',
-    exploreMore: 'Explorar más'
-  },
-  
   en: {
     // Navigation
     home: 'Home',
@@ -171,6 +85,92 @@ export const translations = {
     exploreMore: 'Explore more'
   },
   
+  es: {
+    // Navigation
+    home: 'Inicio',
+    explore: 'Explorar',
+    about: 'Acerca de',
+    dashboard: 'Dashboard',
+    
+    // Authentication
+    signIn: 'Iniciar Sesión',
+    signUp: 'Registrarse',
+    signOut: 'Cerrar Sesión',
+    email: 'Correo Electrónico',
+    password: 'Contraseña',
+    confirmPassword: 'Confirmar Contraseña',
+    fullName: 'Nombre Completo',
+    rememberMe: 'Recordarme',
+    forgotPassword: 'Olvidé mi contraseña',
+    
+    // Welcome messages
+    welcomeBack: 'Bienvenido de vuelta! Por favor',
+    toContinue: 'para continuar.',
+    welcomeSignUp: 'Bienvenido! Por favor',
+    unlockContent: 'Desbloquea un mundo de contenido exclusivo, disfruta de ofertas especiales, y sé el primero en acceder a noticias y actualizaciones emocionantes uniéndote a nuestra comunidad!',
+    
+    // Social auth
+    signUpWithApple: 'Registrarse con Apple',
+    signUpWithGoogle: 'Registrarse con Google',
+    privacyNotice: 'No publicaremos nada sin tu permiso y tus datos personales se mantienen privados',
+    
+    // Form labels
+    enterEmail: 'Ingresa tu email',
+    enterValidEmail: 'Ingresa tu email válido',
+    enterPassword: 'Ingresa tu contraseña',
+    
+    // Hero section
+    heroBadge: 'SOMOS #1 EN EL MERCADO CARIBEÑO',
+    heroTitle: 'Estamos Aquí Para Ayudarte a Navegar Mientras Viajas',
+    heroSubtitle: 'Obtén resultados completos basados en tu ubicación. Tu experiencia turística perfecta te espera.',
+    searchPlaceholder: '¿Qué estás buscando?',
+    locationPlaceholder: 'Ubicación',
+    searchButton: 'Buscar lugares',
+    
+    // Categories
+    apartments: 'Apartamentos',
+    restaurants: 'Restaurantes',
+    events: 'Eventos/Arte',
+    shops: 'Tiendas',
+    museums: 'Museos',
+    gyms: 'Gimnasios',
+    listings: 'listados',
+    
+    // Dashboard
+    totalIncome: 'Ingresos Totales',
+    visitors: 'Visitantes',
+    totalOrders: 'Órdenes Totales',
+    recentBookings: 'Reservas Recientes',
+    statistics: 'Estadísticas',
+    myListings: 'Mis Listados',
+    addListing: 'Agregar Listado',
+    wallet: 'Billetera',
+    profile: 'Perfil',
+    settings: 'Configuraciones',
+    
+    // Common
+    loading: 'Cargando...',
+    error: 'Error',
+    success: 'Éxito',
+    cancel: 'Cancelar',
+    save: 'Guardar',
+    delete: 'Eliminar',
+    edit: 'Editar',
+    view: 'Ver',
+    
+    // Process section
+    processTitle: 'Encuentra Tu Lugar Soñado De La Mejor Manera',
+    processSubtitle: 'Descubre categorías emocionantes. Encuentra lo que estás buscando.',
+    step1: 'Ingresa tu ubicación para comenzar a buscar lugares de interés.',
+    step2: 'Haz una cita en el lugar que quieres visitar.',
+    step3: 'Visita el lugar y disfruta la experiencia.',
+    
+    // Explore section
+    topRegions: 'Principales Regiones',
+    exploreCities: 'Explorar Ciudades',
+    exploreMore: 'Explorar más'
+  },
+  
   fr: {
     // Navigation
     home: 'Accueil',
@@ -255,5 +255,177 @@ export const translations = {
     topRegions: 'Principales Régions',
     exploreCities: 'Explorer les Villes',
     exploreMore: 'Explorer plus'
+  },
+
+  zh: {
+    // Navigation
+    home: '首页',
+    explore: '探索',
+    about: '关于',
+    dashboard: '仪表板',
+    
+    // Authentication
+    signIn: '登录',
+    signUp: '注册',
+    signOut: '退出',
+    email: '电子邮件',
+    password: '密码',
+    confirmPassword: '确认密码',
+    fullName: '全名',
+    rememberMe: '记住我',
+    forgotPassword: '忘记密码',
+    
+    // Welcome messages
+    welcomeBack: '欢迎回来！请',
+    toContinue: '继续。',
+    welcomeSignUp: '欢迎！请',
+    unlockContent: '通过加入我们的社区，解锁专属内容世界，享受特别优惠，并率先了解激动人心的新闻和更新！',
+    
+    // Social auth
+    signUpWithApple: '使用 Apple 注册',
+    signUpWithGoogle: '使用 Google 注册',
+    privacyNotice: '未经您的许可，我们不会发布任何内容，您的个人详细信息将保密',
+    
+    // Form labels
+    enterEmail: '输入电子邮件',
+    enterValidEmail: '输入有效的电子邮件',
+    enterPassword: '输入密码',
+    
+    // Hero section
+    heroBadge: '我们是市场第一',
+    heroTitle: '我们在这里帮助您在旅行时导航',
+    heroSubtitle: '根据提供的位置，您将获得全面的结果。',
+    searchPlaceholder: '您在寻找什么？',
+    locationPlaceholder: '位置',
+    searchButton: '搜索地点',
+    
+    // Categories
+    apartments: '公寓',
+    restaurants: '餐厅',
+    events: '活动/艺术',
+    shops: '商店',
+    museums: '博物馆',
+    gyms: '健身房',
+    listings: '列表',
+    
+    // Dashboard
+    totalIncome: '总收入',
+    visitors: '访客',
+    totalOrders: '总订单',
+    recentBookings: '最近预订',
+    statistics: '统计',
+    myListings: '我的列表',
+    addListing: '添加列表',
+    wallet: '钱包',
+    profile: '个人资料',
+    settings: '设置',
+    
+    // Common
+    loading: '加载中...',
+    error: '错误',
+    success: '成功',
+    cancel: '取消',
+    save: '保存',
+    delete: '删除',
+    edit: '编辑',
+    view: '查看',
+    
+    // Process section
+    processTitle: '以最佳方式找到您的梦想之地',
+    processSubtitle: '发现令人兴奋的类别。找到您想要的。',
+    step1: '输入您的位置以开始查找地标。',
+    step2: '在您想要访问的地方预约。',
+    step3: '参观地点并享受体验。',
+    
+    // Explore section
+    topRegions: '热门地区',
+    exploreCities: '探索城市',
+    exploreMore: '探索更多'
+  },
+
+  de: {
+    // Navigation
+    home: 'Startseite',
+    explore: 'Erkunden',
+    about: 'Über uns',
+    dashboard: 'Dashboard',
+    
+    // Authentication
+    signIn: 'Anmelden',
+    signUp: 'Registrieren',
+    signOut: 'Abmelden',
+    email: 'E-Mail',
+    password: 'Passwort',
+    confirmPassword: 'Passwort bestätigen',
+    fullName: 'Vollständiger Name',
+    rememberMe: 'Angemeldet bleiben',
+    forgotPassword: 'Passwort vergessen',
+    
+    // Welcome messages
+    welcomeBack: 'Willkommen zurück! Bitte',
+    toContinue: 'um fortzufahren.',
+    welcomeSignUp: 'Willkommen! Bitte',
+    unlockContent: 'Entsperren Sie eine Welt exklusiver Inhalte, genießen Sie besondere Angebote und seien Sie der Erste, der spannende Neuigkeiten und Updates erhält, indem Sie unserer Community beitreten!',
+    
+    // Social auth
+    signUpWithApple: 'Mit Apple registrieren',
+    signUpWithGoogle: 'Mit Google registrieren',
+    privacyNotice: 'Wir werden nichts ohne Ihre Erlaubnis veröffentlichen und Ihre persönlichen Daten werden privat gehalten',
+    
+    // Form labels
+    enterEmail: 'E-Mail eingeben',
+    enterValidEmail: 'Gültige E-Mail eingeben',
+    enterPassword: 'Passwort eingeben',
+    
+    // Hero section
+    heroBadge: 'WIR SIND #1 AUF DEM MARKT',
+    heroTitle: 'Wir sind hier, um Ihnen beim Navigieren auf Reisen zu helfen',
+    heroSubtitle: 'Sie erhalten umfassende Ergebnisse basierend auf dem angegebenen Standort.',
+    searchPlaceholder: 'Wonach suchen Sie?',
+    locationPlaceholder: 'Standort',
+    searchButton: 'Orte suchen',
+    
+    // Categories
+    apartments: 'Apartments',
+    restaurants: 'Restaurants',
+    events: 'Veranstaltungen/Kunst',
+    shops: 'Geschäfte',
+    museums: 'Museen',
+    gyms: 'Fitnessstudios',
+    listings: 'Einträge',
+    
+    // Dashboard
+    totalIncome: 'Gesamteinkommen',
+    visitors: 'Besucher',
+    totalOrders: 'Gesamtbestellungen',
+    recentBookings: 'Aktuelle Buchungen',
+    statistics: 'Statistiken',
+    myListings: 'Meine Einträge',
+    addListing: 'Eintrag hinzufügen',
+    wallet: 'Geldbörse',
+    profile: 'Profil',
+    settings: 'Einstellungen',
+    
+    // Common
+    loading: 'Wird geladen...',
+    error: 'Fehler',
+    success: 'Erfolg',
+    cancel: 'Abbrechen',
+    save: 'Speichern',
+    delete: 'Löschen',
+    edit: 'Bearbeiten',
+    view: 'Ansehen',
+    
+    // Process section
+    processTitle: 'Finden Sie Ihren Traumort auf die beste Weise',
+    processSubtitle: 'Entdecken Sie aufregende Kategorien. Finden Sie, was Sie suchen.',
+    step1: 'Geben Sie Ihren Standort ein, um nach Sehenswürdigkeiten zu suchen.',
+    step2: 'Vereinbaren Sie einen Termin an dem Ort, den Sie besuchen möchten.',
+    step3: 'Besuchen Sie den Ort und genießen Sie das Erlebnis.',
+    
+    // Explore section
+    topRegions: 'Top-Regionen',
+    exploreCities: 'Städte erkunden',
+    exploreMore: 'Mehr erkunden'
   }
-};
+};

src/pages/dashboard/EstablishmentsManagement.tsx

@@ -0,0 +1,178 @@
+import { Link } from 'react-router-dom';
+import { Card, CardContent } from '@/components/ui/card';
+import { Store, CreditCard, Receipt, Package, Users, BarChart3, QrCode, ArrowRight } from 'lucide-react';
+
+const EstablishmentsManagement = () => {
+  const stats = {
+    activeOrders: 24,
+    dailyRevenue: 8450,
+    inventory: 156,
+    staff: 18
+  };
+
+  const sections = [
+    {
+      title: 'POS Terminal',
+      description: 'Complete point of sale system',
+      icon: CreditCard,
+      path: '/dashboard/establishments/pos',
+      color: 'green'
+    },
+    {
+      title: 'Orders Management',
+      description: 'Manage all orders and transactions',
+      icon: Receipt,
+      path: '/dashboard/establishments/orders',
+      color: 'blue'
+    },
+    {
+      title: 'Inventory Control',
+      description: 'Track stock and product management',
+      icon: Package,
+      path: '/dashboard/establishments/inventory',
+      color: 'purple'
+    },
+    {
+      title: 'Staff Management',
+      description: 'Manage your team and schedules',
+      icon: Users,
+      path: '/dashboard/establishments/staff',
+      color: 'indigo'
+    },
+    {
+      title: 'Business List',
+      description: 'View and manage all establishments',
+      icon: Store,
+      path: '/dashboard/establishments/businesses',
+      color: 'orange'
+    },
+    {
+      title: 'Categories',
+      description: 'Manage business categories',
+      icon: QrCode,
+      path: '/dashboard/establishments/categories',
+      color: 'yellow'
+    },
+    {
+      title: 'Verification',
+      description: 'Review pending verifications',
+      icon: BarChart3,
+      path: '/dashboard/establishments/verification',
+      color: 'red'
+    },
+    {
+      title: 'Analytics',
+      description: 'Business insights and reports',
+      icon: BarChart3,
+      path: '/dashboard/establishments/analytics',
+      color: 'teal'
+    }
+  ];
+
+  return (
+    <div className="container mx-auto p-6 space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold flex items-center gap-2">
+            <Store className="h-8 w-8 text-primary" />
+            Establishments Management
+          </h1>
+          <p className="text-muted-foreground mt-1">
+            Complete business management system
+          </p>
+        </div>
+      </div>
+
+      {/* Stats Overview */}
+      <div className="grid gap-4 md:grid-cols-4">
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground mb-1">Active Orders</p>
+                <p className="text-2xl font-bold">{stats.activeOrders}</p>
+                <p className="text-xs text-muted-foreground">In progress now</p>
+              </div>
+              <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
+                <Receipt className="w-6 h-6 text-blue-600" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground mb-1">Daily Revenue</p>
+                <p className="text-2xl font-bold">${stats.dailyRevenue.toLocaleString()}</p>
+                <p className="text-xs text-green-600">+15% vs yesterday</p>
+              </div>
+              <div className="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
+                <CreditCard className="w-6 h-6 text-green-600" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground mb-1">Inventory Items</p>
+                <p className="text-2xl font-bold">{stats.inventory}</p>
+                <p className="text-xs text-muted-foreground">Products tracked</p>
+              </div>
+              <div className="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
+                <Package className="w-6 h-6 text-purple-600" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground mb-1">Staff Members</p>
+                <p className="text-2xl font-bold">{stats.staff}</p>
+                <p className="text-xs text-muted-foreground">Active employees</p>
+              </div>
+              <div className="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center">
+                <Users className="w-6 h-6 text-indigo-600" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Sections Grid */}
+      <div>
+        <h2 className="text-xl font-semibold mb-4">System Modules</h2>
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          {sections.map((section) => {
+            const Icon = section.icon;
+            return (
+              <Link key={section.path} to={section.path}>
+                <Card className="hover:shadow-lg transition-shadow cursor-pointer h-full">
+                  <CardContent className="p-6">
+                    <div className="flex items-start justify-between mb-4">
+                      <div className={`w-12 h-12 rounded-lg bg-${section.color}-100 flex items-center justify-center`}>
+                        <Icon className={`w-6 h-6 text-${section.color}-600`} />
+                      </div>
+                      <ArrowRight className="w-5 h-5 text-muted-foreground" />
+                    </div>
+                    <h3 className="font-semibold mb-2">{section.title}</h3>
+                    <p className="text-sm text-muted-foreground">{section.description}</p>
+                  </CardContent>
+                </Card>
+              </Link>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EstablishmentsManagement;

src/pages/dashboard/establishments/EstablishmentInventory.tsx

@@ -0,0 +1,23 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Package } from 'lucide-react';
+
+const EstablishmentInventory = () => {
+  return (
+    <div className="container mx-auto p-6">
+      <h1 className="text-3xl font-bold mb-6">Inventory Control</h1>
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Package className="h-5 w-5" />
+            Stock Management
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-muted-foreground">Inventory connected to API</p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default EstablishmentInventory;

src/pages/dashboard/establishments/EstablishmentOrders.tsx

@@ -0,0 +1,23 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Receipt } from 'lucide-react';
+
+const EstablishmentOrders = () => {
+  return (
+    <div className="container mx-auto p-6">
+      <h1 className="text-3xl font-bold mb-6">Orders Management</h1>
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Receipt className="h-5 w-5" />
+            All Orders
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-muted-foreground">Orders connected to API</p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default EstablishmentOrders;

src/pages/dashboard/establishments/EstablishmentStaff.tsx

@@ -0,0 +1,23 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Users } from 'lucide-react';
+
+const EstablishmentStaff = () => {
+  return (
+    <div className="container mx-auto p-6">
+      <h1 className="text-3xl font-bold mb-6">Staff Management</h1>
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Users className="h-5 w-5" />
+            Team Management
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-muted-foreground">Staff management connected to API</p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default EstablishmentStaff;

src/pages/dashboard/establishments/POSTerminal.tsx

@@ -0,0 +1,25 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { CreditCard } from 'lucide-react';
+
+const POSTerminal = () => {
+  return (
+    <div className="container mx-auto p-6">
+      <h1 className="text-3xl font-bold mb-6">POS Terminal</h1>
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <CreditCard className="h-5 w-5" />
+            Point of Sale System
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-muted-foreground mb-4">Complete POS terminal connected to API</p>
+          <Button>Process Payment</Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default POSTerminal;