refactor(ui): shared searchable CustomerPicker across offers/invoices/issued-orders

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/admin/pages/InvoiceDetail.tsx

@@ -49,7 +49,7 @@ import useDocumentDraft, { readDraft } from "../hooks/useDocumentDraft";
 import { DRAFT_KEYS } from "../lib/draftKeys";
 import { companySettingsOptions } from "../lib/queries/settings";
 import { invoiceDetailOptions } from "../lib/queries/invoices";
-import { offerCustomersOptions, type Customer } from "../lib/queries/offers";
+import { offerCustomersOptions } from "../lib/queries/offers";
 import { bankAccountsOptions } from "../lib/queries/common";
 import { jsonQuery } from "../lib/apiAdapter";
 import { formatCurrency, formatDate, todayLocalStr } from "../utils/formatters";
@@ -67,6 +67,7 @@ import {
   LoadingState,
   PageEnter,
   RichTextView,
+  CustomerPicker,
   headerActionsSx,
 } from "../ui";
 import {
@@ -606,9 +607,6 @@ export default function InvoiceDetail() {
   const [invoiceNumber, setInvoiceNumber] = useState("");
   const initialSnapshotRef = useRef<string | null>(null);
 
-  const [customerSearch, setCustomerSearch] = useState("");
-  const [showCustomerDropdown, setShowCustomerDropdown] = useState(false);
-
   const companySettings = useQuery(companySettingsOptions()).data;
 
   useEffect(() => {
@@ -900,26 +898,6 @@ export default function InvoiceDetail() {
     return addDaysLocalStr(dueDays, form.issue_date);
   }, [form.issue_date, dueDays]);
 
-  // ─── Create mode: customer filtering ───
-  const filteredCustomers = useMemo(() => {
-    if (!customerSearch) return customers;
-    const q = customerSearch.toLowerCase();
-    return customers.filter(
-      (c) =>
-        (c.name || "").toLowerCase().includes(q) ||
-        (c.company_id || "").includes(customerSearch) ||
-        (c.city || "").toLowerCase().includes(q),
-    );
-  }, [customers, customerSearch]);
-
-  useEffect(() => {
-    const handleClickOutside = () => setShowCustomerDropdown(false);
-    if (showCustomerDropdown) {
-      document.addEventListener("click", handleClickOutside);
-      return () => document.removeEventListener("click", handleClickOutside);
-    }
-  }, [showCustomerDropdown]);
-
   const selectBankAccount = (accountId: string) => {
     const acc = bankAccounts.find((a) => a.id === Number(accountId));
     if (acc) {
@@ -943,15 +921,14 @@ export default function InvoiceDetail() {
     }
   };
 
-  const selectCustomer = (customer: Customer) => {
+  const selectCustomer = (id: number | null) => {
+    const customer = id != null ? customers.find((c) => c.id === id) : null;
     setForm((prev) => ({
       ...prev,
-      customer_id: customer.id,
-      customer_name: customer.name,
+      customer_id: id,
+      customer_name: customer?.name ?? "",
     }));
     setErrors((prev) => ({ ...prev, customer_id: "" }));
-    setCustomerSearch("");
-    setShowCustomerDropdown(false);
   };
 
   // ─── Create mode: items management ───
@@ -1823,115 +1800,13 @@ export default function InvoiceDetail() {
               />
             </Field>
             <Field label="Odběratel" error={errors.customer_id} required>
-              {form.customer_id ? (
-                <Box
-                  sx={{
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 1,
-                    px: 1.5,
-                    py: 1,
-                    border: 1,
-                    borderColor: "divider",
-                    borderRadius: 1,
-                  }}
-                >
-                  <Box component="span" sx={{ flex: 1 }}>
-                    {form.customer_name}
-                  </Box>
-                  <IconButton
-                    size="small"
-                    onClick={() =>
-                      setForm((prev) => ({
-                        ...prev,
-                        customer_id: null,
-                        customer_name: "",
-                      }))
-                    }
-                    title="Odebrat zákazníka"
-                    aria-label="Odebrat zákazníka"
-                  >
-                    <svg
-                      width="14"
-                      height="14"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                    >
-                      <line x1="18" y1="6" x2="6" y2="18" />
-                      <line x1="6" y1="6" x2="18" y2="18" />
-                    </svg>
-                  </IconButton>
-                </Box>
-              ) : (
-                <Box
-                  sx={{ position: "relative" }}
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  <TextField
-                    value={customerSearch}
-                    onChange={(e) => {
-                      setCustomerSearch(e.target.value);
-                      setShowCustomerDropdown(true);
-                    }}
-                    onFocus={() => setShowCustomerDropdown(true)}
-                    placeholder="Hledat zákazníka (název, IČ, město)..."
-                    autoComplete="off"
-                  />
-                  {showCustomerDropdown && (
-                    <Box
-                      sx={{
-                        position: "absolute",
-                        top: "100%",
-                        left: 0,
-                        right: 0,
-                        zIndex: 20,
-                        mt: 0.5,
-                        maxHeight: 280,
-                        overflowY: "auto",
-                        bgcolor: "background.paper",
-                        border: 1,
-                        borderColor: "divider",
-                        borderRadius: 1,
-                        boxShadow: 3,
-                      }}
-                    >
-                      {filteredCustomers.length === 0 ? (
-                        <Box sx={{ px: 1.5, py: 1, color: "text.secondary" }}>
-                          Žádní zákazníci
-                        </Box>
-                      ) : (
-                        filteredCustomers.slice(0, 10).map((c) => (
-                          <Box
-                            key={c.id}
-                            onMouseDown={() => selectCustomer(c)}
-                            sx={{
-                              px: 1.5,
-                              py: 1,
-                              cursor: "pointer",
-                              "&:hover": { bgcolor: "action.hover" },
-                            }}
-                          >
-                            <Box>{c.name}</Box>
-                            {(c.company_id || c.city) && (
-                              <Box
-                                sx={{
-                                  fontSize: "0.8rem",
-                                  color: "text.secondary",
-                                }}
-                              >
-                                {c.company_id && `IČ: ${c.company_id}`}
-                                {c.city && ` · ${c.city}`}
-                              </Box>
-                            )}
-                          </Box>
-                        ))
-                      )}
-                    </Box>
-                  )}
-                </Box>
-              )}
+              <CustomerPicker
+                customers={customers}
+                value={form.customer_id}
+                onChange={selectCustomer}
+                error={errors.customer_id}
+                placeholder="Hledat zákazníka (název, IČ)..."
+              />
             </Field>
             <Field label="Vystavil">
               <TextField