feat: add mobile-optimized customer orders page with creation form and article lookup integration

client/src/components/CustomerOrderForm.tsx

@@ -3,8 +3,8 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { useQuery } from "@tanstack/react-query";
 import { useAuthUnified } from "@/hooks/useAuthUnified";
-import { useState, useEffect, useRef } from "react";
+import { useState, useRef } from "react";
-import { Loader2 } from "lucide-react";
+import { Loader2, Search } from "lucide-react";
 import {
   Form,
   FormControl,
@@ -156,17 +156,9 @@ export function CustomerOrderForm({
     form.setValue('groupId', userGroupId);
   }
 
-  // Lookup API ffnancy par gencode ou référence
+  // Lookup API ffnancy par gencode ou référence (déclenché manuellement)
   const [articleLookupLoading, setArticleLookupLoading] = useState(false);
   const [articleNotFound, setArticleNotFound] = useState(false);
-  // Flag pour éviter que le remplissage auto de productReference ne redéclenche une recherche
-  const autoFilledRef = useRef(false);
-  // En mode édition, ignorer les watchers au premier rendu (valeurs déjà remplies)
-  const initialGencodeSkipRef = useRef(!!order);
-  const initialRefSkipRef = useRef(!!order);
-  const lookupDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const gencodeValue = form.watch("gencode");
-  const referenceValue = form.watch("productReference");
 
   const fetchAndFillArticle = async (params: URLSearchParams) => {
     setArticleLookupLoading(true);
@@ -179,7 +171,6 @@ export function CustomerOrderForm({
       if (!article) { setArticleNotFound(true); return; }
 
       setArticleNotFound(false);
-      autoFilledRef.current = true; // bloquer le watcher référence
       form.setValue("productName", article.libelle1, { shouldValidate: true });
       if (article.gtin) form.setValue("gencode", article.gtin, { shouldValidate: true });
       if (article.ref_fou_principale) form.setValue("productReference", article.ref_fou_principale, { shouldValidate: true });
@@ -212,27 +203,15 @@ export function CustomerOrderForm({
     }
   };
 
-  useEffect(() => {
+  const handleSearchByGencode = () => {
-    if (initialGencodeSkipRef.current) { initialGencodeSkipRef.current = false; return; }
+    const val = form.getValues("gencode");
-    if (!gencodeValue || gencodeValue.length < 8) { setArticleNotFound(false); return; }
+    if (val) fetchAndFillArticle(new URLSearchParams({ ean: val }));
-    if (lookupDebounceRef.current) clearTimeout(lookupDebounceRef.current);
+  };
-    lookupDebounceRef.current = setTimeout(() => {
-      fetchAndFillArticle(new URLSearchParams({ ean: gencodeValue }));
-    }, 600);
-    return () => { if (lookupDebounceRef.current) clearTimeout(lookupDebounceRef.current); };
-  }, [gencodeValue]);
 
-  useEffect(() => {
+  const handleSearchByReference = () => {
-    // Si la valeur a été remplie automatiquement, on ignore ce cycle
+    const val = form.getValues("productReference");
-    if (autoFilledRef.current) { autoFilledRef.current = false; return; }
+    if (val) fetchAndFillArticle(new URLSearchParams({ codein: val }));
-    if (initialRefSkipRef.current) { initialRefSkipRef.current = false; return; }
+  };
-    if (!referenceValue || referenceValue.length < 3) { setArticleNotFound(false); return; }
-    if (lookupDebounceRef.current) clearTimeout(lookupDebounceRef.current);
-    lookupDebounceRef.current = setTimeout(() => {
-      fetchAndFillArticle(new URLSearchParams({ codein: referenceValue }));
-    }, 600);
-    return () => { if (lookupDebounceRef.current) clearTimeout(lookupDebounceRef.current); };
-  }, [referenceValue]);
 
   return (
     <Form {...form}>
@@ -337,9 +316,18 @@ export function CustomerOrderForm({
                 <FormItem>
                   <FormLabel>Référence (optionnel)</FormLabel>
                   <FormControl>
-                    <div className="relative">
+                    <div className="flex gap-2">
-                      <Input placeholder="REF-123456" {...field} className={articleLookupLoading ? "pr-8" : ""} />
+                      <Input placeholder="REF-123456" {...field} />
-                      {articleLookupLoading && <Loader2 className="absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 animate-spin text-blue-500" />}
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={handleSearchByReference}
+                        disabled={articleLookupLoading}
+                        className="shrink-0"
+                      >
+                        {articleLookupLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Search className="w-4 h-4" />}
+                      </Button>
                     </div>
                   </FormControl>
                   <FormMessage />
@@ -354,9 +342,18 @@ export function CustomerOrderForm({
                 <FormItem>
                   <FormLabel>Gencode (obligatoire)</FormLabel>
                   <FormControl>
-                    <div className="relative">
+                    <div className="flex gap-2">
-                      <Input placeholder="Code à barres" {...field} className={articleLookupLoading ? "pr-8" : ""} />
+                      <Input placeholder="Code à barres" {...field} />
-                      {articleLookupLoading && <Loader2 className="absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 animate-spin text-blue-500" />}
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={handleSearchByGencode}
+                        disabled={articleLookupLoading}
+                        className="shrink-0"
+                      >
+                        {articleLookupLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Search className="w-4 h-4" />}
+                      </Button>
                     </div>
                   </FormControl>
                   <FormMessage />

client/src/pages/mobile/CustomerOrdersPage.tsx

@@ -23,7 +23,8 @@ import {
     X,
     Filter,
     Loader2,
-    MessageSquare
+    MessageSquare,
+    Search
 } from "lucide-react";
 import { format } from "date-fns";
 import { fr } from "date-fns/locale";
@@ -183,13 +184,9 @@ export default function MobileCustomerOrdersPage() {
         }
     });
 
-    // Lookup API ffnancy par gencode ou référence
+    // Lookup API ffnancy par gencode ou référence (déclenché manuellement)
     const [articleLookupLoading, setArticleLookupLoading] = useState(false);
     const [articleNotFound, setArticleNotFound] = useState(false);
-    const autoFilledRef = useRef(false);
-    const lookupDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-    const gencodeValue = form.watch("gencode");
-    const referenceValue = form.watch("productReference");
 
     const fetchAndFillArticle = async (params: URLSearchParams) => {
         setArticleLookupLoading(true);
@@ -202,7 +199,6 @@ export default function MobileCustomerOrdersPage() {
             if (!article) { setArticleNotFound(true); return; }
 
             setArticleNotFound(false);
-            autoFilledRef.current = true;
             form.setValue("productName", article.libelle1, { shouldValidate: true });
             if (article.gtin) form.setValue("gencode", article.gtin, { shouldValidate: true });
             if (article.ref_fou_principale) form.setValue("productReference", article.ref_fou_principale, { shouldValidate: true });
@@ -234,24 +230,15 @@ export default function MobileCustomerOrdersPage() {
         }
     };
 
-    useEffect(() => {
+    const handleSearchByGencode = () => {
-        if (!gencodeValue || gencodeValue.length < 8) { setArticleNotFound(false); return; }
+        const val = form.getValues("gencode");
-        if (lookupDebounceRef.current) clearTimeout(lookupDebounceRef.current);
+        if (val) fetchAndFillArticle(new URLSearchParams({ ean: val }));
-        lookupDebounceRef.current = setTimeout(() => {
+    };
-            fetchAndFillArticle(new URLSearchParams({ ean: gencodeValue }));
-        }, 600);
-        return () => { if (lookupDebounceRef.current) clearTimeout(lookupDebounceRef.current); };
-    }, [gencodeValue]);
 
-    useEffect(() => {
+    const handleSearchByReference = () => {
-        if (autoFilledRef.current) { autoFilledRef.current = false; return; }
+        const val = form.getValues("productReference");
-        if (!referenceValue || referenceValue.length < 3) { setArticleNotFound(false); return; }
+        if (val) fetchAndFillArticle(new URLSearchParams({ codein: val }));
-        if (lookupDebounceRef.current) clearTimeout(lookupDebounceRef.current);
+    };
-        lookupDebounceRef.current = setTimeout(() => {
-            fetchAndFillArticle(new URLSearchParams({ codein: referenceValue }));
-        }, 600);
-        return () => { if (lookupDebounceRef.current) clearTimeout(lookupDebounceRef.current); };
-    }, [referenceValue]);
 
     const onSubmit = (data: any) => {
         // Validation basique groupe
@@ -483,9 +470,11 @@ export default function MobileCustomerOrdersPage() {
                                         <FormItem>
                                             <FormLabel>Référence (Optionnel)</FormLabel>
                                             <FormControl>
-                                                <div className="relative">
+                                                <div className="flex gap-2">
-                                                    <Input placeholder="REF-123..." {...field} className={articleLookupLoading ? "pr-8" : ""} />
+                                                    <Input placeholder="REF-123..." {...field} />
-                                                    {articleLookupLoading && <Loader2 className="absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 animate-spin text-blue-500" />}
+                                                    <Button type="button" variant="outline" size="sm" onClick={handleSearchByReference} disabled={articleLookupLoading} className="shrink-0">
+                                                        {articleLookupLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Search className="w-4 h-4" />}
+                                                    </Button>
                                                 </div>
                                             </FormControl>
                                         </FormItem>
@@ -550,9 +539,11 @@ export default function MobileCustomerOrdersPage() {
                                         <FormItem>
                                             <FormLabel>Gencode (Scanner si dispo)</FormLabel>
                                             <FormControl>
-                                                <div className="relative">
+                                                <div className="flex gap-2">
-                                                    <Input placeholder="EAN13" {...field} className={articleLookupLoading ? "pr-8" : ""} />
+                                                    <Input placeholder="EAN13" {...field} />
-                                                    {articleLookupLoading && <Loader2 className="absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 animate-spin text-blue-500" />}
+                                                    <Button type="button" variant="outline" size="sm" onClick={handleSearchByGencode} disabled={articleLookupLoading} className="shrink-0">
+                                                        {articleLookupLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Search className="w-4 h-4" />}
+                                                    </Button>
                                                 </div>
                                             </FormControl>
                                         </FormItem>