manufacturing stabilization

client/src/modules/projects/ProjectFormPage.tsx

@@ -22,6 +22,16 @@ export function ProjectFormPage({ mode }: { mode: "create" | "edit" }) {
   const [quoteOptions, setQuoteOptions] = useState<ProjectDocumentOptionDto[]>([]);
   const [orderOptions, setOrderOptions] = useState<ProjectDocumentOptionDto[]>([]);
   const [shipmentOptions, setShipmentOptions] = useState<ProjectShipmentOptionDto[]>([]);
+  const [customerSearchTerm, setCustomerSearchTerm] = useState("");
+  const [ownerSearchTerm, setOwnerSearchTerm] = useState("");
+  const [quoteSearchTerm, setQuoteSearchTerm] = useState("");
+  const [orderSearchTerm, setOrderSearchTerm] = useState("");
+  const [shipmentSearchTerm, setShipmentSearchTerm] = useState("");
+  const [customerPickerOpen, setCustomerPickerOpen] = useState(false);
+  const [ownerPickerOpen, setOwnerPickerOpen] = useState(false);
+  const [quotePickerOpen, setQuotePickerOpen] = useState(false);
+  const [orderPickerOpen, setOrderPickerOpen] = useState(false);
+  const [shipmentPickerOpen, setShipmentPickerOpen] = useState(false);
   const [status, setStatus] = useState(mode === "create" ? "Create a new project." : "Loading project...");
   const [isSaving, setIsSaving] = useState(false);
 
@@ -66,6 +76,11 @@ export function ProjectFormPage({ mode }: { mode: "create" | "edit" }) {
           dueDate: project.dueDate,
           notes: project.notes,
         });
+        setCustomerSearchTerm(project.customerName);
+        setOwnerSearchTerm(project.ownerName ?? "");
+        setQuoteSearchTerm(project.salesQuoteNumber ?? "");
+        setOrderSearchTerm(project.salesOrderNumber ?? "");
+        setShipmentSearchTerm(project.shipmentNumber ?? "");
         setStatus("Project loaded.");
       })
       .catch((error: unknown) => {
@@ -88,6 +103,20 @@ export function ProjectFormPage({ mode }: { mode: "create" | "edit" }) {
     }));
   }
 
+  function restoreSearchTerms() {
+    const selectedCustomer = customerOptions.find((customer) => customer.id === form.customerId);
+    const selectedOwner = ownerOptions.find((owner) => owner.id === form.ownerId);
+    const selectedQuote = quoteOptions.find((quote) => quote.id === form.salesQuoteId);
+    const selectedOrder = orderOptions.find((order) => order.id === form.salesOrderId);
+    const selectedShipment = shipmentOptions.find((shipment) => shipment.id === form.shipmentId);
+
+    setCustomerSearchTerm(selectedCustomer?.name ?? "");
+    setOwnerSearchTerm(selectedOwner?.fullName ?? "");
+    setQuoteSearchTerm(selectedQuote?.documentNumber ?? "");
+    setOrderSearchTerm(selectedOrder?.documentNumber ?? "");
+    setShipmentSearchTerm(selectedShipment?.shipmentNumber ?? "");
+  }
+
   async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
     if (!token) {
@@ -128,10 +157,47 @@ export function ProjectFormPage({ mode }: { mode: "create" | "edit" }) {
           </label>
           <label className="block">
             <span className="mb-2 block text-sm font-semibold text-text">Customer</span>
-            <select value={form.customerId} onChange={(event) => updateField("customerId", event.target.value)} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
-              <option value="">Select customer</option>
-              {customerOptions.map((customer) => <option key={customer.id} value={customer.id}>{customer.name}</option>)}
-            </select>
+            <div className="relative">
+              <input
+                value={customerSearchTerm}
+                onChange={(event) => {
+                  setCustomerSearchTerm(event.target.value);
+                  updateField("customerId", "");
+                  setCustomerPickerOpen(true);
+                }}
+                onFocus={() => setCustomerPickerOpen(true)}
+                onBlur={() => window.setTimeout(() => {
+                  setCustomerPickerOpen(false);
+                  restoreSearchTerms();
+                }, 120)}
+                placeholder="Search customer"
+                className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand"
+              />
+              {customerPickerOpen ? (
+                <div className="absolute z-20 mt-2 max-h-64 w-full overflow-y-auto rounded-2xl border border-line/70 bg-surface shadow-panel">
+                  {customerOptions
+                    .filter((customer) => {
+                      const query = customerSearchTerm.trim().toLowerCase();
+                      if (!query) {
+                        return true;
+                      }
+                      return customer.name.toLowerCase().includes(query) || customer.email.toLowerCase().includes(query);
+                    })
+                    .slice(0, 12)
+                    .map((customer) => (
+                      <button key={customer.id} type="button" onMouseDown={(event) => {
+                        event.preventDefault();
+                        updateField("customerId", customer.id);
+                        setCustomerSearchTerm(customer.name);
+                        setCustomerPickerOpen(false);
+                      }} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition last:border-b-0 hover:bg-page/70">
+                        <div className="font-semibold text-text">{customer.name}</div>
+                        <div className="mt-1 text-xs text-muted">{customer.email}</div>
+                      </button>
+                    ))}
+                </div>
+              ) : null}
+            </div>
           </label>
         </div>
         <div className="grid gap-3 xl:grid-cols-4">
@@ -149,10 +215,55 @@ export function ProjectFormPage({ mode }: { mode: "create" | "edit" }) {
           </label>
           <label className="block">
             <span className="mb-2 block text-sm font-semibold text-text">Owner</span>
-            <select value={form.ownerId ?? ""} onChange={(event) => updateField("ownerId", event.target.value || null)} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
-              <option value="">Unassigned</option>
-              {ownerOptions.map((owner) => <option key={owner.id} value={owner.id}>{owner.fullName}</option>)}
-            </select>
+            <div className="relative">
+              <input
+                value={ownerSearchTerm}
+                onChange={(event) => {
+                  setOwnerSearchTerm(event.target.value);
+                  updateField("ownerId", null);
+                  setOwnerPickerOpen(true);
+                }}
+                onFocus={() => setOwnerPickerOpen(true)}
+                onBlur={() => window.setTimeout(() => {
+                  setOwnerPickerOpen(false);
+                  restoreSearchTerms();
+                }, 120)}
+                placeholder="Search owner"
+                className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand"
+              />
+              {ownerPickerOpen ? (
+                <div className="absolute z-20 mt-2 max-h-64 w-full overflow-y-auto rounded-2xl border border-line/70 bg-surface shadow-panel">
+                  <button type="button" onMouseDown={(event) => {
+                    event.preventDefault();
+                    updateField("ownerId", null);
+                    setOwnerSearchTerm("");
+                    setOwnerPickerOpen(false);
+                  }} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition hover:bg-page/70">
+                    <div className="font-semibold text-text">Unassigned</div>
+                  </button>
+                  {ownerOptions
+                    .filter((owner) => {
+                      const query = ownerSearchTerm.trim().toLowerCase();
+                      if (!query) {
+                        return true;
+                      }
+                      return owner.fullName.toLowerCase().includes(query) || owner.email.toLowerCase().includes(query);
+                    })
+                    .slice(0, 12)
+                    .map((owner) => (
+                      <button key={owner.id} type="button" onMouseDown={(event) => {
+                        event.preventDefault();
+                        updateField("ownerId", owner.id);
+                        setOwnerSearchTerm(owner.fullName);
+                        setOwnerPickerOpen(false);
+                      }} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition last:border-b-0 hover:bg-page/70">
+                        <div className="font-semibold text-text">{owner.fullName}</div>
+                        <div className="mt-1 text-xs text-muted">{owner.email}</div>
+                      </button>
+                    ))}
+                </div>
+              ) : null}
+            </div>
           </label>
           <label className="block">
             <span className="mb-2 block text-sm font-semibold text-text">Due date</span>
@@ -162,24 +273,159 @@ export function ProjectFormPage({ mode }: { mode: "create" | "edit" }) {
         <div className="grid gap-3 xl:grid-cols-3">
           <label className="block">
             <span className="mb-2 block text-sm font-semibold text-text">Quote</span>
-            <select value={form.salesQuoteId ?? ""} onChange={(event) => updateField("salesQuoteId", event.target.value || null)} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
-              <option value="">No linked quote</option>
-              {quoteOptions.map((quote) => <option key={quote.id} value={quote.id}>{quote.documentNumber}</option>)}
-            </select>
+            <div className="relative">
+              <input
+                value={quoteSearchTerm}
+                onChange={(event) => {
+                  setQuoteSearchTerm(event.target.value);
+                  updateField("salesQuoteId", null);
+                  setQuotePickerOpen(true);
+                }}
+                onFocus={() => setQuotePickerOpen(true)}
+                onBlur={() => window.setTimeout(() => {
+                  setQuotePickerOpen(false);
+                  restoreSearchTerms();
+                }, 120)}
+                placeholder="Search quote"
+                className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand"
+              />
+              {quotePickerOpen ? (
+                <div className="absolute z-20 mt-2 max-h-64 w-full overflow-y-auto rounded-2xl border border-line/70 bg-surface shadow-panel">
+                  <button type="button" onMouseDown={(event) => {
+                    event.preventDefault();
+                    updateField("salesQuoteId", null);
+                    setQuoteSearchTerm("");
+                    setQuotePickerOpen(false);
+                  }} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition hover:bg-page/70">
+                    <div className="font-semibold text-text">No linked quote</div>
+                  </button>
+                  {quoteOptions
+                    .filter((quote) => {
+                      const query = quoteSearchTerm.trim().toLowerCase();
+                      if (!query) {
+                        return true;
+                      }
+                      return quote.documentNumber.toLowerCase().includes(query) || quote.customerName.toLowerCase().includes(query) || quote.status.toLowerCase().includes(query);
+                    })
+                    .slice(0, 12)
+                    .map((quote) => (
+                      <button key={quote.id} type="button" onMouseDown={(event) => {
+                        event.preventDefault();
+                        updateField("salesQuoteId", quote.id);
+                        setQuoteSearchTerm(quote.documentNumber);
+                        setQuotePickerOpen(false);
+                      }} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition last:border-b-0 hover:bg-page/70">
+                        <div className="font-semibold text-text">{quote.documentNumber}</div>
+                        <div className="mt-1 text-xs text-muted">{quote.customerName} · {quote.status}</div>
+                      </button>
+                    ))}
+                </div>
+              ) : null}
+            </div>
           </label>
           <label className="block">
             <span className="mb-2 block text-sm font-semibold text-text">Sales order</span>
-            <select value={form.salesOrderId ?? ""} onChange={(event) => updateField("salesOrderId", event.target.value || null)} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
-              <option value="">No linked sales order</option>
-              {orderOptions.map((order) => <option key={order.id} value={order.id}>{order.documentNumber}</option>)}
-            </select>
+            <div className="relative">
+              <input
+                value={orderSearchTerm}
+                onChange={(event) => {
+                  setOrderSearchTerm(event.target.value);
+                  updateField("salesOrderId", null);
+                  setOrderPickerOpen(true);
+                }}
+                onFocus={() => setOrderPickerOpen(true)}
+                onBlur={() => window.setTimeout(() => {
+                  setOrderPickerOpen(false);
+                  restoreSearchTerms();
+                }, 120)}
+                placeholder="Search sales order"
+                className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand"
+              />
+              {orderPickerOpen ? (
+                <div className="absolute z-20 mt-2 max-h-64 w-full overflow-y-auto rounded-2xl border border-line/70 bg-surface shadow-panel">
+                  <button type="button" onMouseDown={(event) => {
+                    event.preventDefault();
+                    updateField("salesOrderId", null);
+                    setOrderSearchTerm("");
+                    setOrderPickerOpen(false);
+                  }} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition hover:bg-page/70">
+                    <div className="font-semibold text-text">No linked sales order</div>
+                  </button>
+                  {orderOptions
+                    .filter((order) => {
+                      const query = orderSearchTerm.trim().toLowerCase();
+                      if (!query) {
+                        return true;
+                      }
+                      return order.documentNumber.toLowerCase().includes(query) || order.customerName.toLowerCase().includes(query) || order.status.toLowerCase().includes(query);
+                    })
+                    .slice(0, 12)
+                    .map((order) => (
+                      <button key={order.id} type="button" onMouseDown={(event) => {
+                        event.preventDefault();
+                        updateField("salesOrderId", order.id);
+                        setOrderSearchTerm(order.documentNumber);
+                        setOrderPickerOpen(false);
+                      }} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition last:border-b-0 hover:bg-page/70">
+                        <div className="font-semibold text-text">{order.documentNumber}</div>
+                        <div className="mt-1 text-xs text-muted">{order.customerName} · {order.status}</div>
+                      </button>
+                    ))}
+                </div>
+              ) : null}
+            </div>
           </label>
           <label className="block">
             <span className="mb-2 block text-sm font-semibold text-text">Shipment</span>
-            <select value={form.shipmentId ?? ""} onChange={(event) => updateField("shipmentId", event.target.value || null)} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
-              <option value="">No linked shipment</option>
-              {shipmentOptions.map((shipment) => <option key={shipment.id} value={shipment.id}>{shipment.shipmentNumber}</option>)}
-            </select>
+            <div className="relative">
+              <input
+                value={shipmentSearchTerm}
+                onChange={(event) => {
+                  setShipmentSearchTerm(event.target.value);
+                  updateField("shipmentId", null);
+                  setShipmentPickerOpen(true);
+                }}
+                onFocus={() => setShipmentPickerOpen(true)}
+                onBlur={() => window.setTimeout(() => {
+                  setShipmentPickerOpen(false);
+                  restoreSearchTerms();
+                }, 120)}
+                placeholder="Search shipment"
+                className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand"
+              />
+              {shipmentPickerOpen ? (
+                <div className="absolute z-20 mt-2 max-h-64 w-full overflow-y-auto rounded-2xl border border-line/70 bg-surface shadow-panel">
+                  <button type="button" onMouseDown={(event) => {
+                    event.preventDefault();
+                    updateField("shipmentId", null);
+                    setShipmentSearchTerm("");
+                    setShipmentPickerOpen(false);
+                  }} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition hover:bg-page/70">
+                    <div className="font-semibold text-text">No linked shipment</div>
+                  </button>
+                  {shipmentOptions
+                    .filter((shipment) => {
+                      const query = shipmentSearchTerm.trim().toLowerCase();
+                      if (!query) {
+                        return true;
+                      }
+                      return shipment.shipmentNumber.toLowerCase().includes(query) || shipment.salesOrderNumber.toLowerCase().includes(query) || shipment.customerName.toLowerCase().includes(query) || shipment.status.toLowerCase().includes(query);
+                    })
+                    .slice(0, 12)
+                    .map((shipment) => (
+                      <button key={shipment.id} type="button" onMouseDown={(event) => {
+                        event.preventDefault();
+                        updateField("shipmentId", shipment.id);
+                        setShipmentSearchTerm(shipment.shipmentNumber);
+                        setShipmentPickerOpen(false);
+                      }} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition last:border-b-0 hover:bg-page/70">
+                        <div className="font-semibold text-text">{shipment.shipmentNumber}</div>
+                        <div className="mt-1 text-xs text-muted">{shipment.salesOrderNumber} · {shipment.status}</div>
+                      </button>
+                    ))}
+                </div>
+              ) : null}
+            </div>
           </label>
         </div>
         <label className="block">