Merge pull request #532 from R0m1k3/1.1

feat: add mobile tasks page with creation/edit form and new layout co…

client/src/components/Layout.tsx

@@ -137,13 +137,12 @@ export default function Layout({ children }: LayoutProps) {
         <main className={`flex-1 flex flex-col h-full ${
           // Ajustement des marges selon le mode
           isMobile
-              ? 'ml-0' 
+            ? 'ml-0'
-              : (isTablet && !sidebarCollapsed) ? 'ml-48' : 'ml-0'
+            : (isTablet && !sidebarCollapsed) ? 'ml-48' : 'ml-0'
-        }`}>
-          {/* Header with mobile menu and store selector */}
-          <header className={`h-16 bg-white border-b border-gray-200 flex items-center justify-between ${
-            isMobileOrTablet ? 'px-3' : 'px-6'
           }`}>
+          {/* Header with mobile menu and store selector */}
+          <header className={`h-16 bg-white border-b border-gray-200 flex items-center justify-between ${isMobileOrTablet ? 'px-3' : 'px-6'
+            }`}>
             <div className="flex items-center gap-2 sm:gap-4 min-w-0 flex-1">
               {/* Mobile menu button (only in normal mode) */}
               {isMobile && (
@@ -159,9 +158,8 @@ export default function Layout({ children }: LayoutProps) {
               )}
 
               {/* Weather and Date widgets - responsive */}
-              <div className={`flex items-center ${
+              <div className={`flex items-center ${isMobile ? 'gap-1' : 'gap-3'
-                isMobile ? 'gap-1' : 'gap-3'
+                } min-w-0`}>
-              } min-w-0`}>
                 <WeatherWidget />
                 {!isMobile && <DateWidget />}
               </div>
@@ -183,13 +181,15 @@ export default function Layout({ children }: LayoutProps) {
 
                     // Invalider toutes les variantes de queryKey pour changement magasin
                     console.log('🧹 Invalidating data caches for store change');
-                    queryClient.invalidateQueries({ predicate: (query) => {
+                    queryClient.invalidateQueries({
-                      const key = query.queryKey;
+                      predicate: (query) => {
-                      return Boolean(key[0]?.toString().includes('/api/orders') || 
+                        const key = query.queryKey;
-                             key[0]?.toString().includes('/api/deliveries') || 
+                        return Boolean(key[0]?.toString().includes('/api/orders') ||
-                             key[0]?.toString().includes('/api/stats/monthly') ||
+                          key[0]?.toString().includes('/api/deliveries') ||
-                             key[0]?.toString().includes('/api/tasks'));
+                          key[0]?.toString().includes('/api/stats/monthly') ||
-                    }});
+                          key[0]?.toString().includes('/api/tasks'));
+                      }
+                    });
 
                     // Sauvegarder dans localStorage et mettre à jour l'état
                     if (newStoreId) {
@@ -202,11 +202,10 @@ export default function Layout({ children }: LayoutProps) {
                     setSelectedStoreId(newStoreId);
                   }}
                 >
-                  <SelectTrigger className={`border border-gray-300 min-h-[44px] ${
+                  <SelectTrigger className={`border border-gray-300 min-h-[44px] ${isMobile ? 'w-28 text-xs' :
-                    isMobile ? 'w-28 text-xs' : 
+                      isTablet ? 'w-40 text-sm' :
-                    isTablet ? 'w-40 text-sm' : 
+                        'w-64 text-sm'
-                    'w-64 text-sm'
+                    }`} data-testid="select-store">
-                  }`} data-testid="select-store">
                     <SelectValue placeholder="Magasin" />
                   </SelectTrigger>
                   <SelectContent>
@@ -257,9 +256,8 @@ export default function Layout({ children }: LayoutProps) {
             </div>
           )}
 
-          <div className={`flex-1 bg-gray-50 h-full overflow-y-auto ${
+          <div className={`flex-1 bg-gray-50 h-full overflow-y-auto overflow-x-hidden ${isMobileOrTablet ? 'p-3' : 'p-6'
-              isMobileOrTablet ? 'p-3' : 'p-6'
+            }`} style={{ maxWidth: '100%' }}>
-          }`}>
             {children}
           </div>
         </main>

client/src/pages/mobile/TasksPage.tsx

@@ -367,9 +367,17 @@ export default function MobileTasksPage() {
     }
 
     return (
-        <div className="min-h-screen bg-gray-50 pb-24 overflow-hidden" style={{ maxWidth: '100vw' }}>
+        <div
+            className="min-h-screen bg-gray-50 pb-24"
+            style={{
+                width: '100%',
+                maxWidth: '100vw',
+                overflowX: 'hidden',
+                boxSizing: 'border-box'
+            }}
+        >
             {/* Header */}
-            <div className="bg-white border-b sticky top-0 z-40">
+            <div className="bg-white border-b sticky top-0 z-40" style={{ width: '100%', boxSizing: 'border-box' }}>
                 <div className="px-3 py-3">
                     <div className="flex items-center justify-between mb-3">
                         <div className="flex items-center gap-2">