Restored to 'f55e6a387855269f0f8c1e4b319f69132cd899ba'

Replit-Restored-To: f55e6a3878

client/src/pages/Dashboard.tsx

@@ -2,27 +2,21 @@ import { useState } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useAuth } from "@/hooks/useAuth";
 import { StoreProvider, useStoreContext } from "@/hooks/useStoreContext";
 import NewSaleForm from "@/components/NewSaleForm";
 import SalesHistory from "@/components/SalesHistory";
 import Administration from "@/components/Administration";
-import { Package, History, Settings, LogOut, User, Building2, Shield, BarChart3, TrendingUp, Users, ShoppingCart } from "lucide-react";
+import { Package, History, Settings, LogOut, User, Building2, Shield } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
-import { useQuery } from "@tanstack/react-query";
 
 function DashboardContent() {
   const { user, logout } = useAuth();
   const { toast } = useToast();
-  const [activeView, setActiveView] = useState("dashboard");
+  const [activeTab, setActiveTab] = useState("new-sale");
   const { selectedStoreId, setSelectedStoreId, stores, selectedStore, isLoadingStores } = useStoreContext();
 
-  // Fetch sales data for dashboard metrics
-  const { data: sales = [] } = useQuery({
-    queryKey: ['/api/sales'],
-    enabled: !!user
-  });
-
   const handleLogout = async () => {
     try {
       await logout();
@@ -43,73 +37,36 @@ function DashboardContent() {
   const canDeleteSales = user?.role === "admin" || user?.role === "manager";
   const isAdmin = user?.role === "admin";
 
-  // Calculate dashboard metrics
-  const todaysSales = sales.filter(sale => {
-    const saleDate = new Date(sale.timestamp).toDateString();
-    const today = new Date().toDateString();
-    return saleDate === today;
-  });
-
-  const totalSales = sales.length;
-  const todaysCount = todaysSales.length;
-  const totalRevenue = sales.reduce((sum, sale) => sum + (sale.quantite * 25), 0); // Estimation
-  const uniqueCustomers = new Set(sales.map(sale => `${sale.nom}_${sale.prenom}`)).size;
-
-  const menuItems = [
-    { id: "dashboard", label: "Tableau de bord", icon: BarChart3 },
-    { id: "new-sale", label: "Nouvelle Vente", icon: Package },
-    { id: "history", label: "Historique", icon: History },
-    ...(canAccessAdmin ? [{ id: "admin", label: "Administration", icon: Settings }] : [])
-  ];
-
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex">
+    <div className="min-h-screen bg-background">
-      {/* Sidebar */}
+      {/* Modern Header */}
-      <div className="w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 flex flex-col">
+      <header className="sticky top-0 z-50 border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        {/* Logo */}
+        <div className="max-w-7xl mx-auto mobile-padding">
-        <div className="p-6 border-b border-gray-200 dark:border-gray-700">
+          <div className="flex justify-between items-center h-14 sm:h-16">
-          <div className="flex items-center gap-3">
+            <div className="flex items-center gap-2 sm:gap-4">
-            <div className="p-2 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg">
+              <div className="relative">
-              <Package className="h-6 w-6 text-white" />
+                <div className="p-1.5 sm:p-2 bg-gradient-to-br from-primary to-purple-600 rounded-lg sm:rounded-xl shadow-sm">
+                  <Package className="h-5 w-5 sm:h-6 sm:w-6 text-white" />
                 </div>
-            <div>
+                <div className="absolute -inset-1 bg-gradient-to-br from-primary to-purple-600 rounded-lg sm:rounded-xl blur opacity-20 -z-10"></div>
-              <h1 className="text-lg font-bold text-gray-900 dark:text-white">RegisFlow</h1>
-              <p className="text-xs text-gray-500">Feux d'artifice</p>
               </div>
+              <div className="min-w-0">
+                <h1 className="text-lg sm:text-xl font-bold gradient-text truncate">RegisFlow</h1>
+                <p className="text-xs sm:text-sm text-muted-foreground hidden sm:block">Registre des ventes des Feux d'artifice</p>
               </div>
             </div>
             
-        {/* Navigation */}
+            <div className="flex items-center gap-2 sm:gap-4">
-        <nav className="flex-1 p-4">
-          <div className="space-y-2">
-            {menuItems.map((item) => (
-              <button
-                key={item.id}
-                onClick={() => setActiveView(item.id)}
-                className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
-                  activeView === item.id
-                    ? "bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400"
-                    : "text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
-                }`}
-              >
-                <item.icon className="h-5 w-5" />
-                {item.label}
-              </button>
-            ))}
-          </div>
-        </nav>
-
-        {/* User Info & Store Selector */}
-        <div className="p-4 border-t border-gray-200 dark:border-gray-700">
               {/* Store Selector for Admin */}
               {isAdmin && !isLoadingStores && (
-            <div className="mb-3">
+                <div className="hidden sm:flex items-center gap-2 sm:gap-3 p-1.5 sm:p-2 bg-muted/50 rounded-lg border border-border/50">
+                  <Building2 className="h-4 w-4 text-muted-foreground" />
                   <Select 
                     value={selectedStoreId?.toString() || ""} 
                     onValueChange={(value) => setSelectedStoreId(parseInt(value))}
                   >
-                <SelectTrigger className="w-full">
+                    <SelectTrigger className="w-32 sm:w-48 border-0 bg-transparent focus:ring-0 text-sm">
-                  <SelectValue placeholder="Sélectionner un magasin" />
+                      <SelectValue placeholder="Magasin" />
                     </SelectTrigger>
                     <SelectContent>
                       {stores.map((store) => (
@@ -124,225 +81,92 @@ function DashboardContent() {
 
               {/* Current Store Display for Non-Admin */}
               {!isAdmin && selectedStore && (
-            <div className="mb-3 flex items-center gap-2 px-3 py-2 bg-gray-50 dark:bg-gray-700 rounded-lg">
+                <div className="hidden sm:flex items-center gap-2 px-2 sm:px-3 py-1.5 sm:py-2 bg-muted/50 rounded-lg border border-border/50">
-              <Building2 className="h-4 w-4 text-blue-600" />
+                  <Building2 className="h-4 w-4 text-primary" />
                   <span className="text-sm font-medium">{selectedStore.name}</span>
                 </div>
               )}
 
-          {/* User Profile */}
+              <div className="flex items-center gap-1 sm:gap-3">
-          <div className="flex items-center gap-3 mb-3">
+                <div className="text-right hidden sm:block">
-            <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
+                  <p className="text-sm font-semibold text-foreground">
-              <User className="h-4 w-4 text-white" />
-            </div>
-            <div className="flex-1 min-w-0">
-              <p className="text-sm font-medium text-gray-900 dark:text-white truncate">
                     {user?.firstName} {user?.lastName}
                   </p>
                   <div className="flex items-center gap-1">
-                {user?.role === 'admin' && <Shield className="h-3 w-3 text-blue-600" />}
+                    {user?.role === 'admin' && <Shield className="h-3 w-3 text-primary" />}
-                <p className="text-xs text-gray-500 capitalize">{user?.role}</p>
+                    <p className="text-xs text-muted-foreground capitalize">{user?.role}</p>
                   </div>
                 </div>
-          </div>
-
                 <Button 
                   variant="outline" 
                   size="sm" 
                   onClick={handleLogout}
-            className="w-full gap-2 justify-start"
+                  className="border-2 hover:bg-destructive hover:text-destructive-foreground hover:border-destructive smooth-transition touch-friendly-button"
                 >
-            <LogOut className="h-4 w-4" />
+                  <LogOut className="h-4 w-4 sm:mr-2" />
-            Déconnexion
+                  <span className="hidden sm:inline">Déconnexion</span>
                 </Button>
               </div>
             </div>
-
-      {/* Main Content */}
-      <div className="flex-1 flex flex-col min-h-0">
-        {/* Top Header */}
-        <header className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 py-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
-                Bonjour {user?.firstName} !
-              </h2>
-              <p className="text-gray-500 dark:text-gray-400">
-                {new Date().toLocaleDateString('fr-FR', { 
-                  weekday: 'long', 
-                  year: 'numeric', 
-                  month: 'long', 
-                  day: 'numeric' 
-                })}
-              </p>
           </div>
-            {selectedStore && (
-              <div className="text-right">
-                <p className="text-sm text-gray-500">Magasin actuel</p>
-                <p className="font-semibold text-gray-900 dark:text-white">{selectedStore.name}</p>
-              </div>
-            )}
         </div>
       </header>
 
-        {/* Content Area */}
+      {/* Main Content */}
-        <main className="flex-1 p-6 overflow-auto">
+      <main className="max-w-7xl mx-auto mobile-padding py-4 sm:py-6 lg:py-8">
-          {activeView === "dashboard" && (
+        <div className="fade-in">
-            <div className="space-y-6">
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="mobile-form-responsive">
-              {/* Metrics Cards */}
+            <TabsList className={`grid w-full ${canAccessAdmin ? 'grid-cols-3' : 'grid-cols-2'} max-w-full sm:max-w-2xl h-12 sm:h-14 bg-muted bg-opacity-50 p-1.5 sm:p-2 rounded-xl sm:rounded-2xl border border-border border-opacity-50`}>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+              <TabsTrigger 
-                <Card className="border-l-4 border-l-blue-500">
+                value="new-sale" 
-                  <CardContent className="p-6">
+                className="h-9 sm:h-10 rounded-lg sm:rounded-xl data-[state=active]:bg-background data-[state=active]:shadow-md smooth-transition font-medium text-xs sm:text-sm"
-                    <div className="flex items-center justify-between">
-                      <div>
-                        <p className="text-sm text-gray-500">Commandes du jour</p>
-                        <p className="text-3xl font-bold text-gray-900 dark:text-white">{todaysCount}</p>
-                        <p className="text-sm text-blue-600">+12% vs hier</p>
-                      </div>
-                      <div className="p-3 bg-blue-100 rounded-full">
-                        <ShoppingCart className="h-6 w-6 text-blue-600" />
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-
-                <Card className="border-l-4 border-l-green-500">
-                  <CardContent className="p-6">
-                    <div className="flex items-center justify-between">
-                      <div>
-                        <p className="text-sm text-gray-500">Ventes totales</p>
-                        <p className="text-3xl font-bold text-gray-900 dark:text-white">{totalSales}</p>
-                        <p className="text-sm text-green-600">Toutes les ventes</p>
-                      </div>
-                      <div className="p-3 bg-green-100 rounded-full">
-                        <TrendingUp className="h-6 w-6 text-green-600" />
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-
-                <Card className="border-l-4 border-l-purple-500">
-                  <CardContent className="p-6">
-                    <div className="flex items-center justify-between">
-                      <div>
-                        <p className="text-sm text-gray-500">Clients uniques</p>
-                        <p className="text-3xl font-bold text-gray-900 dark:text-white">{uniqueCustomers}</p>
-                        <p className="text-sm text-purple-600">Base clients</p>
-                      </div>
-                      <div className="p-3 bg-purple-100 rounded-full">
-                        <Users className="h-6 w-6 text-purple-600" />
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-
-                <Card className="border-l-4 border-l-orange-500">
-                  <CardContent className="p-6">
-                    <div className="flex items-center justify-between">
-                      <div>
-                        <p className="text-sm text-gray-500">Revenus estimés</p>
-                        <p className="text-3xl font-bold text-gray-900 dark:text-white">{totalRevenue.toLocaleString()}€</p>
-                        <p className="text-sm text-orange-600">Estimation</p>
-                      </div>
-                      <div className="p-3 bg-orange-100 rounded-full">
-                        <BarChart3 className="h-6 w-6 text-orange-600" />
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              </div>
-
-              {/* Recent Activity */}
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                <Card>
-                  <CardHeader>
-                    <CardTitle className="flex items-center gap-2">
-                      <History className="h-5 w-5" />
-                      Activités récentes
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="space-y-4">
-                      {sales.slice(0, 5).map((sale) => (
-                        <div key={sale.id} className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
-                          <div className="p-2 bg-blue-100 rounded-full">
-                            <Package className="h-4 w-4 text-blue-600" />
-                          </div>
-                          <div className="flex-1">
-                            <p className="font-medium text-gray-900 dark:text-white">
-                              {sale.nom} {sale.prenom}
-                            </p>
-                            <p className="text-sm text-gray-500">{sale.typeArticle} - {sale.quantite} unité(s)</p>
-                          </div>
-                          <p className="text-sm text-gray-500">
-                            {new Date(sale.timestamp).toLocaleDateString()}
-                          </p>
-                        </div>
-                      ))}
-                    </div>
-                  </CardContent>
-                </Card>
-
-                <Card>
-                  <CardHeader>
-                    <CardTitle className="flex items-center gap-2">
-                      <TrendingUp className="h-5 w-5" />
-                      Actions rapides
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="space-y-3">
-                      <Button 
-                        onClick={() => setActiveView("new-sale")}
-                        className="w-full justify-start gap-3 h-12"
               >
-                        <Package className="h-5 w-5" />
+                <Package className="h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2" />
-                        Nouvelle commande
+                <span className="hidden sm:inline">Nouvelle Vente</span>
-                      </Button>
+                <span className="sm:hidden">Vente</span>
-                      <Button 
+              </TabsTrigger>
-                        onClick={() => setActiveView("history")}
+              <TabsTrigger 
-                        variant="outline"
+                value="history" 
-                        className="w-full justify-start gap-3 h-12"
+                className="h-9 sm:h-10 rounded-lg sm:rounded-xl data-[state=active]:bg-background data-[state=active]:shadow-md smooth-transition font-medium text-xs sm:text-sm"
               >
-                        <History className="h-5 w-5" />
+                <History className="h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2" />
-                        Consulter historique
+                <span className="hidden sm:inline">Historique</span>
-                      </Button>
+                <span className="sm:hidden">Liste</span>
+              </TabsTrigger>
               {canAccessAdmin && (
-                        <Button 
+                <TabsTrigger 
-                          onClick={() => setActiveView("admin")}
+                  value="admin" 
-                          variant="outline"
+                  className="h-9 sm:h-10 rounded-lg sm:rounded-xl data-[state=active]:bg-background data-[state=active]:shadow-md smooth-transition font-medium text-xs sm:text-sm"
-                          className="w-full justify-start gap-3 h-12"
                 >
-                          <Settings className="h-5 w-5" />
+                  <Settings className="h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2" />
-                          Administration
+                  <span className="hidden sm:inline">Administration</span>
-                        </Button>
+                  <span className="sm:hidden">Admin</span>
-                      )}
+                </TabsTrigger>
-                    </div>
-                  </CardContent>
-                </Card>
-              </div>
-            </div>
               )}
+            </TabsList>
 
-          {activeView === "new-sale" && (
+            <TabsContent value="new-sale" className="mt-8">
-            <div className="max-w-4xl">
+              <div className="slide-in-up">
                 <NewSaleForm />
               </div>
-          )}
+            </TabsContent>
 
-          {activeView === "history" && (
+            <TabsContent value="history" className="mt-8">
-            <div>
+              <div className="slide-in-up">
                 <SalesHistory canDelete={canDeleteSales} />
               </div>
-          )}
+            </TabsContent>
 
-          {activeView === "admin" && canAccessAdmin && (
+            {canAccessAdmin && (
-            <div>
+              <TabsContent value="admin" className="mt-8">
+                <div className="slide-in-up">
                   <Administration />
                 </div>
+              </TabsContent>
             )}
-        </main>
+          </Tabs>
         </div>
+      </main>
     </div>
   );
 }