Refactor Establishments module and add multi-language support

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;