karibeo_backend_admin/src/pages/dashboard/EstablishmentsManagement.tsx

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;