Improve layout and visual spacing across the application

Adjust main content width, header height, and text sizes for better desktop experience and implement responsive spacing for better visual hierarchy.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: cc8ba926-557c-4bf1-a2ea-ceabbcf38824
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/cc8ba926-557c-4bf1-a2ea-ceabbcf38824/sQ6VYZc

client/src/pages/Dashboard.tsx

@@ -138,7 +138,7 @@ export default function Dashboard() {
   const deliveredThisMonth = Array.isArray(allDeliveries) ? allDeliveries.filter((delivery: any) => {
     const deliveryDate = safeDate(delivery.deliveredDate || delivery.createdAt);
     const now = new Date();
-    return deliveryDate.getMonth() === now.getMonth() && 
+    return deliveryDate && deliveryDate.getMonth() === now.getMonth() && 
            deliveryDate.getFullYear() === now.getFullYear() && 
            delivery.status === 'delivered';
   }).length : 0;
@@ -148,7 +148,7 @@ export default function Dashboard() {
     if (delivery.status === 'delivered' && delivery.unit === 'palettes') {
       const deliveryDate = safeDate(delivery.deliveredDate || delivery.createdAt);
       const now = new Date();
-      if (deliveryDate.getMonth() === now.getMonth() && deliveryDate.getFullYear() === now.getFullYear()) {
+      if (deliveryDate && deliveryDate.getMonth() === now.getMonth() && deliveryDate.getFullYear() === now.getFullYear()) {
         return total + (delivery.quantity || 0);
       }
     }
@@ -403,7 +403,7 @@ export default function Dashboard() {
               .slice(0, 3)
               .map((publicity: any) => {
                 const participatingStores = publicity.participations || [];
-                const isCurrentStoreParticipating = selectedStoreId && participatingStores.some((p: any) => p.groupId === parseInt(selectedStoreId));
+                const isCurrentStoreParticipating = selectedStoreId && participatingStores.some((p: any) => p.groupId === parseInt(selectedStoreId.toString()));
                 
                 return (
                   <div key={publicity.id} className="p-4 bg-gray-50 hover:bg-gray-100 transition-colors border-l-3 border-purple-500 space-y-2">
@@ -436,7 +436,7 @@ export default function Dashboard() {
                             <Badge 
                               key={participation.groupId} 
                               className={`text-xs ${
-                                selectedStoreId && participation.groupId === parseInt(selectedStoreId)
+                                selectedStoreId && participation.groupId === parseInt(selectedStoreId.toString())
                                   ? 'bg-green-100 text-green-800 border border-green-300'
                                   : 'bg-gray-100 text-gray-700'
                               }`}

client/src/pages/Deliveries.tsx

@@ -29,6 +29,7 @@ import CreateDeliveryModal from "@/components/modals/CreateDeliveryModal";
 import EditDeliveryModal from "@/components/modals/EditDeliveryModal";
 import OrderDetailModal from "@/components/modals/OrderDetailModal";
 import ConfirmDeleteModal from "@/components/modals/ConfirmDeleteModal";
+import { usePermissions } from "@shared/permissions";
 import type { DeliveryWithRelations } from "@shared/schema";
 
 export default function Deliveries() {
@@ -36,6 +37,7 @@ export default function Deliveries() {
   const { selectedStoreId } = useStore();
   const { toast } = useToast();
   const queryClient = useQueryClient();
+  const permissions = usePermissions(user?.role);
   
   // Redirection pour les employés
   if (user?.role === 'employee') {
@@ -336,11 +338,10 @@ export default function Deliveries() {
             )}
           </div>
         ) : (
-          <div className="flex-1 overflow-y-auto p-6">
-            <div className="bg-white border border-gray-200 shadow-lg overflow-hidden">
-              <div className="overflow-x-auto">
-                <table className="w-full">
-                  <thead className="bg-gray-50 border-b border-gray-200">
+          <div className="bg-white border border-gray-200 shadow-lg overflow-hidden rounded-xl">
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead className="bg-gray-50 border-b border-gray-200">
                     <tr>
                       <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                         Fournisseur
@@ -367,8 +368,8 @@ export default function Deliveries() {
                         Actions
                       </th>
                     </tr>
-                  </thead>
-                  <tbody className="bg-white divide-y divide-gray-200">
+                </thead>
+                <tbody className="bg-white divide-y divide-gray-200">
                     {paginatedDeliveries.map((delivery) => (
                       <tr key={delivery.id} className="hover:bg-gray-50">
                         <td className="px-6 py-4 whitespace-nowrap">
@@ -466,21 +467,20 @@ export default function Deliveries() {
                         </td>
                       </tr>
                     ))}
-                  </tbody>
-                </table>
-              </div>
-              
-              {/* Pagination */}
-              <Pagination
-                currentPage={currentPage}
-                totalPages={totalPages}
-                totalItems={totalItems}
-                itemsPerPage={itemsPerPage}
-                onPageChange={setCurrentPage}
-                onItemsPerPageChange={setItemsPerPage}
-                className="mt-4 p-4 border-t border-gray-200"
-              />
+                </tbody>
+              </table>
             </div>
+            
+            {/* Pagination */}
+            <Pagination
+              currentPage={currentPage}
+              totalPages={totalPages}
+              totalItems={totalItems}
+              itemsPerPage={itemsPerPage}
+              onPageChange={setCurrentPage}
+              onItemsPerPageChange={setItemsPerPage}
+              className="mt-4 p-4 border-t border-gray-200"
+            />
           </div>
         )}
       </div>

client/src/pages/Orders.tsx

@@ -27,6 +27,7 @@ import CreateOrderModal from "@/components/modals/CreateOrderModal";
 import EditOrderModal from "@/components/modals/EditOrderModal";
 import OrderDetailModal from "@/components/modals/OrderDetailModal";
 import ConfirmDeleteModal from "@/components/modals/ConfirmDeleteModal";
+import { usePermissions } from "@shared/permissions";
 import type { OrderWithRelations } from "@shared/schema";
 
 export default function Orders() {
@@ -34,6 +35,7 @@ export default function Orders() {
   const { selectedStoreId } = useStore();
   const { toast } = useToast();
   const queryClient = useQueryClient();
+  const permissions = usePermissions(user?.role);
   
   // Redirection pour les employés
   if (user?.role === 'employee') {
@@ -285,7 +287,7 @@ export default function Orders() {
           <div className="flex items-center justify-center h-64">
             <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
           </div>
-        ) : (console.log('📦 Filtered orders length:', filteredOrders.length) || filteredOrders.length === 0) ? (
+        ) : filteredOrders.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-64 text-gray-500">
             <Package className="w-16 h-16 mb-4 text-gray-300" />
             <h3 className="text-lg font-medium mb-2">Aucune commande trouvée</h3>
@@ -305,11 +307,10 @@ export default function Orders() {
             )}
           </div>
         ) : (
-          <div className="flex-1 overflow-y-auto p-6">
-            <div className="bg-white border border-gray-200 shadow-lg overflow-hidden">
-              <div className="overflow-x-auto">
-                <table className="w-full">
-                  <thead className="bg-gray-50 border-b border-gray-200">
+          <div className="bg-white border border-gray-200 shadow-lg overflow-hidden rounded-xl">
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead className="bg-gray-50 border-b border-gray-200">
                     <tr>
                       <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                         Fournisseur
@@ -330,8 +331,8 @@ export default function Orders() {
                         Actions
                       </th>
                     </tr>
-                  </thead>
-                  <tbody className="bg-white divide-y divide-gray-200">
+                </thead>
+                <tbody className="bg-white divide-y divide-gray-200">
                     {paginatedOrders.map((order) => (
                       <tr key={order.id} className="hover:bg-gray-50">
                         <td className="px-6 py-4 whitespace-nowrap">
@@ -404,21 +405,20 @@ export default function Orders() {
                         </td>
                       </tr>
                     ))}
-                  </tbody>
-                </table>
-              </div>
-              
-              {/* Pagination */}
-              <Pagination
-                currentPage={currentPage}
-                totalPages={totalPages}
-                totalItems={totalItems}
-                itemsPerPage={itemsPerPage}
-                onPageChange={setCurrentPage}
-                onItemsPerPageChange={setItemsPerPage}
-                className="mt-4 p-4 border-t border-gray-200"
-              />
+                </tbody>
+              </table>
             </div>
+            
+            {/* Pagination */}
+            <Pagination
+              currentPage={currentPage}
+              totalPages={totalPages}
+              totalItems={totalItems}
+              itemsPerPage={itemsPerPage}
+              onPageChange={setCurrentPage}
+              onItemsPerPageChange={setItemsPerPage}
+              className="mt-4 p-4 border-t border-gray-200"
+            />
           </div>
         )}
       </div>