Enable store selection for admins and associate sales with specific stores

Implements store selection and association functionality using useStoreContext hook and updates sale creation and retrieval APIs.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 91318273-c764-4fd4-be04-bdc12c38af32
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0715008c-7244-40f4-befc-26c014852236/d304bad8-e4eb-4558-b9d6-38704ba052e8.jpg

client/src/pages/Dashboard.tsx

@@ -1,18 +1,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 } from "lucide-react";
+import { Package, History, Settings, LogOut, User, Building2 } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
 
-export default function Dashboard() {
+function DashboardContent() {
   const { user, logout } = useAuth();
   const { toast } = useToast();
   const [activeTab, setActiveTab] = useState("new-sale");
+  const { selectedStoreId, setSelectedStoreId, stores, selectedStore, isLoadingStores } = useStoreContext();
 
   const handleLogout = async () => {
     try {
@@ -32,6 +35,7 @@ export default function Dashboard() {
 
   const canAccessAdmin = user?.role === "admin";
   const canDeleteSales = user?.role === "admin" || user?.role === "manager";
+  const isAdmin = user?.role === "admin";
 
   return (
     <div className="min-h-screen bg-gray-50">
@@ -50,6 +54,36 @@ export default function Dashboard() {
             </div>
             
             <div className="flex items-center gap-4">
+              {/* Store Selector for Admin */}
+              {isAdmin && !isLoadingStores && (
+                <div className="flex items-center gap-2">
+                  <Building2 className="h-4 w-4 text-gray-500" />
+                  <Select 
+                    value={selectedStoreId?.toString() || ""} 
+                    onValueChange={(value) => setSelectedStoreId(parseInt(value))}
+                  >
+                    <SelectTrigger className="w-48">
+                      <SelectValue placeholder="Sélectionner un magasin" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {stores.map((store) => (
+                        <SelectItem key={store.id} value={store.id.toString()}>
+                          {store.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
+
+              {/* Current Store Display for Non-Admin */}
+              {!isAdmin && selectedStore && (
+                <div className="flex items-center gap-2 text-sm text-gray-600">
+                  <Building2 className="h-4 w-4" />
+                  <span>{selectedStore.name}</span>
+                </div>
+              )}
+
               <div className="text-right">
                 <p className="text-sm font-medium text-gray-900">
                   {user?.firstName} {user?.lastName}
@@ -67,6 +101,30 @@ export default function Dashboard() {
 
       {/* Main Content */}
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {selectedStore && (
+          <div className="mb-6">
+            <Card>
+              <CardContent className="pt-6">
+                <div className="flex items-center gap-4">
+                  <div className="p-3 bg-blue-100 rounded-lg">
+                    <Building2 className="h-6 w-6 text-blue-600" />
+                  </div>
+                  <div>
+                    <h2 className="text-lg font-semibold text-gray-900">{selectedStore.name}</h2>
+                    <div className="text-sm text-gray-600">
+                      {selectedStore.address && <p>{selectedStore.address}</p>}
+                      <div className="flex gap-4">
+                        {selectedStore.phone && <span>📞 {selectedStore.phone}</span>}
+                        {selectedStore.email && <span>✉️ {selectedStore.email}</span>}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        )}
+
         <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
           <TabsList className="grid w-full grid-cols-3 lg:w-auto lg:grid-cols-auto">
             <TabsTrigger value="new-sale" className="flex items-center gap-2">
@@ -102,4 +160,17 @@ export default function Dashboard() {
       </main>
     </div>
   );
+}
+
+export default function Dashboard() {
+  const { user } = useAuth();
+  
+  return (
+    <StoreProvider 
+      userStoreId={user?.storeId} 
+      isAdmin={user?.role === "admin"}
+    >
+      <DashboardContent />
+    </StoreProvider>
+  );
 }