Adapt layout and sidebar for responsive mobile experience

Introduce a `useResponsive` hook, implement mobile-first sidebar behavior with a toggleable menu, and adjust layout for various screen sizes, along with minor type and deposit value handling in `CustomerOrderForm`.

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/f2TM8xQ

client/src/components/CustomerOrderForm.tsx

@@ -99,7 +99,7 @@ export function CustomerOrderForm({
       quantity: order?.quantity || 1,
       supplierId: order?.supplierId || undefined,
       status: "En attente de Commande", // Statut fixe
-      deposit: order?.deposit || 0,
+      deposit: Number(order?.deposit) || 0,
       isPromotionalPrice: order?.isPromotionalPrice || false,
       customerNotified: order?.customerNotified || false,
       groupId: getDefaultGroupId(), // ✅ PRIORITÉ CORRECTE APPLIQUÉE
@@ -125,7 +125,7 @@ export function CustomerOrderForm({
       selectedStoreId,
       userHasGroups: !!user?.userGroups,
       userGroupsLength: user?.userGroups?.length,
-      userGroups: user?.userGroups?.map(ug => ({
+      userGroups: user?.userGroups?.map((ug: any) => ({
         groupId: ug.groupId || ug.group?.id, 
         groupName: ug.group?.name,
         fullGroupData: ug
@@ -156,7 +156,7 @@ export function CustomerOrderForm({
       contactNumber: data.contactNumber || '', 
       productName: data.productName || '',
       quantity: data.quantity,
-      groupId: typeof groupId === 'number' ? groupId : parseInt(groupId.toString()),
+      groupId: typeof groupId === 'number' ? groupId : parseInt(groupId?.toString() || '1'),
       isPickup: false,
       notes: data.notes,
       deposit: data.deposit || 0,
@@ -173,7 +173,7 @@ export function CustomerOrderForm({
   // Get available groups for the user
   const availableGroups = user?.role === 'admin' 
     ? groups 
-    : user?.userGroups?.map(ug => ug.group) || [];
+    : user?.userGroups?.map((ug: any) => ug.group) || [];
 
   // Auto-select group for users respecting admin store selection
   const currentGroupId = form.getValues('groupId');