From 1156984fa6bef58d2cacc906e93cb68c48b2be9c Mon Sep 17 00:00:00 2001
From: makearmy <alex@makearmy.io>
Date: Mon, 6 Oct 2025 22:05:29 -0400
Subject: [PATCH] submission form cleanup

---
 components/details/CO2GalvoDetail.tsx | 74 ++++++++++++++---------
 components/forms/SettingsSubmit.tsx   | 85 ++++++++++++++++++++-------
 components/lists/CO2GalvoList.tsx     |  2 +-
 3 files changed, 112 insertions(+), 49 deletions(-)

diff --git a/components/details/CO2GalvoDetail.tsx b/components/details/CO2GalvoDetail.tsx
index 918b59a9..58ece1d9 100644
--- a/components/details/CO2GalvoDetail.tsx
+++ b/components/details/CO2GalvoDetail.tsx
@@ -92,9 +92,13 @@ export default function CO2GalvoDetail({ id, editable }: { id: string | number;
                 const j = t ? JSON.parse(t) : null;
                 const idVal = j?.data?.id ?? j?.id ?? null;
                 if (alive) setMeId(idVal ? String(idVal) : null);
-            } catch { /* ignore */ }
+            } catch {
+                /* ignore */
+            }
         })();
-        return () => { alive = false; };
+        return () => {
+            alive = false;
+        };
     }, []);
 
     useEffect(() => {
@@ -170,7 +174,9 @@ export default function CO2GalvoDetail({ id, editable }: { id: string | number;
                 if (!dead) setLoading(false);
             }
         })();
-        return () => { dead = true; };
+        return () => {
+            dead = true;
+        };
     }, [id]);
 
     if (loading) return <p className="p-6">Loading setting…</p>;
@@ -197,9 +203,16 @@ export default function CO2GalvoDetail({ id, editable }: { id: string | number;
     const isMine = meId && ownerId ? meId === ownerId : false;
 
     // Small field renderer (label on top, value below)
-    const Field = ({ label, value, suffix }: { label: string; value: React.ReactNode | string | number | null | undefined; suffix?: string }) => {
-        const primitive =
-        typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+    const Field = ({
+        label,
+        value,
+        suffix,
+    }: {
+        label: string;
+        value: React.ReactNode | string | number | null | undefined;
+        suffix?: string;
+    }) => {
+        const primitive = typeof value === "string" || typeof value === "number" || typeof value === "boolean";
         const isEmpty = value == null || value === "" || (typeof value === "number" && isNaN(value as number));
 
         return (
@@ -240,10 +253,19 @@ export default function CO2GalvoDetail({ id, editable }: { id: string | number;
     };
     const DITHER_LABEL = (v: string | undefined) => (v ? v.charAt(0).toUpperCase() + v.slice(1) : "—");
 
+    const asNumOrNull = (v: any): number | null => {
+        if (typeof v === "number") return Number.isFinite(v) ? v : null;
+        if (typeof v === "string" && v.trim() !== "") {
+            const n = Number(v);
+            return Number.isFinite(n) ? n : null;
+        }
+        // treat booleans/objects as null for numeric-only display
+        return null;
+    };
+
     // ----- EDIT MODE -----
     if (editMode && rec) {
-        const toId = (v: any) =>
-        v == null ? "" : typeof v === "object" ? (v.id ?? v.submission_id ?? "") : String(v);
+        const toId = (v: any) => (v == null ? "" : typeof v === "object" ? (v.id ?? v.submission_id ?? "") : String(v));
 
         const initialValues = {
             submission_id: rec.submission_id,
@@ -307,9 +329,7 @@ export default function CO2GalvoDetail({ id, editable }: { id: string | number;
         <div className="grid gap-3">
         <Field label="Owner" value={ownerLabel(rec.owner)} />
         <Field label="Uploader" value={rec.uploader || "—"} />
-        {rec.setting_notes ? (
-            <Field label="Notes" value={<p className="whitespace-pre-wrap">{rec.setting_notes}</p>} />
-        ) : null}
+        {rec.setting_notes ? <Field label="Notes" value={<p className="whitespace-pre-wrap">{rec.setting_notes}</p>} /> : null}
         </div>
 
         {/* Images (side-by-side thumbnails) */}
@@ -356,11 +376,7 @@ export default function CO2GalvoDetail({ id, editable }: { id: string | number;
         <Field label="Beam Expander" value={optLabel(rec.lens_exp)} suffix="x" />
         <Field
         label="Scan Lens"
-        value={
-            rec.lens
-            ? `${rec.lens.field_size ?? "—"}${rec.lens.focal_length ? ` / ${rec.lens.focal_length}` : ""}`
-            : "—"
-        }
+        value={rec.lens ? `${rec.lens.field_size ?? "—"}${rec.lens.focal_length ? ` / ${rec.lens.focal_length}` : ""}` : "—"}
         />
         <Field label="Focus" value={rec.focus ?? "—"} suffix="mm" />
         <Field label="Repeat All" value={rec.repeat_all ?? "—"} />
@@ -396,9 +412,9 @@ export default function CO2GalvoDetail({ id, editable }: { id: string | number;
                     <Field label="Speed" value={r.speed ?? "—"} suffix="mm/s" />
                     <Field label="Interval" value={r.interval ?? "—"} suffix="mm" />
                     <Field label="Angle" value={r.angle ?? "—"} suffix="°" />
-                    <Field label="Pass" value={r.pass ?? "—"} />
+                    <Field label="Passes" value={r.pass ?? "—"} />
                     <Field label="Frequency" value={r.frequency ?? "—"} suffix="kHz" />
-                    <Field label="Pulse" value={r.pulse ?? "—"} suffix="ns" />
+                    {/* Pulse removed for CO2 */}
                     </div>
 
                     <div className="grid sm:grid-cols-2 gap-2 items-center">
@@ -425,31 +441,35 @@ export default function CO2GalvoDetail({ id, editable }: { id: string | number;
             {rec.line_settings!.map((r: any, i: number) => {
                 const perfEnabled = !!r.perf;
                 const wobbleEnabled = !!r.wobble;
+                const cutVal = asNumOrNull(r.cut);
+                const skipVal = asNumOrNull(r.skip);
+                const stepVal = asNumOrNull(r.step);
+                const sizeVal = asNumOrNull(r.size);
+
                 return (
                     <div key={i} className="border rounded p-3 space-y-2">
                     <div className="font-medium">{r.name || `Line ${i + 1}`}</div>
 
-                    {/* Base fields – match form order */}
+                    {/* Base fields – match form order (Pulse removed) */}
                     <div className="grid sm:grid-cols-2 gap-2">
                     <Field label="Frequency" value={r.frequency ?? "—"} suffix="kHz" />
-                    <Field label="Pulse" value={r.pulse ?? "—"} suffix="ns" />
                     <Field label="Power" value={r.power ?? "—"} suffix="%" />
                     <Field label="Speed" value={r.speed ?? "—"} suffix="mm/s" />
-                    <Field label="Pass" value={r.pass ?? "—"} />
+                    <Field label="Passes" value={r.pass ?? "—"} />
                     </div>
 
                     {/* Perforation row */}
                     <div className="grid sm:grid-cols-3 gap-2 items-center">
                     <Field label="Perforation Mode" value={yesNo(perfEnabled)} />
-                    {perfEnabled && <Field label="Cut" value={r.cut ?? "—"} suffix="mm" />}
-                    {perfEnabled && <Field label="Skip" value={r.skip ?? "—"} suffix="mm" />}
+                    {perfEnabled && <Field label="Cut" value={cutVal ?? "—"} suffix="mm" />}
+                    {perfEnabled && <Field label="Skip" value={skipVal ?? "—"} suffix="mm" />}
                     </div>
 
                     {/* Wobble row */}
                     <div className="grid sm:grid-cols-3 gap-2 items-center">
                     <Field label="Wobble" value={yesNo(wobbleEnabled)} />
-                    {wobbleEnabled && <Field label="Step" value={r.step ?? "—"} suffix="mm" />}
-                    {wobbleEnabled && <Field label="Size" value={r.size ?? "—"} suffix="mm" />}
+                    {wobbleEnabled && <Field label="Step" value={stepVal ?? "—"} suffix="mm" />}
+                    {wobbleEnabled && <Field label="Size" value={sizeVal ?? "—"} suffix="mm" />}
                     </div>
 
                     {/* Simple toggle */}
@@ -478,9 +498,9 @@ export default function CO2GalvoDetail({ id, editable }: { id: string | number;
                     <Field label="Power" value={r.power ?? "—"} suffix="%" />
                     <Field label="Speed" value={r.speed ?? "—"} suffix="mm/s" />
                     <Field label="Interval" value={r.interval ?? "—"} suffix="mm" />
-                    <Field label="Pass" value={r.pass ?? "—"} />
+                    <Field label="Passes" value={r.pass ?? "—"} />
                     <Field label="Frequency" value={r.frequency ?? "—"} suffix="kHz" />
-                    <Field label="Pulse" value={r.pulse ?? "—"} suffix="ns" />
+                    {/* Pulse removed for CO2 */}
                     {isHalftone && <Field label="Halftone Cell" value={r.halftone_cell ?? "—"} />}
                     {isHalftone && <Field label="Halftone Angle" value={r.halftone_angle ?? "—"} />}
                     <Field label="Dot Width Adjustment" value={r.dot ?? "—"} suffix="mm" />
diff --git a/components/forms/SettingsSubmit.tsx b/components/forms/SettingsSubmit.tsx
index 2b163c17..9a5653ea 100644
--- a/components/forms/SettingsSubmit.tsx
+++ b/components/forms/SettingsSubmit.tsx
@@ -81,7 +81,9 @@ export default function SettingsSubmit({ mode = "create", submissionId, initialV
         if (alive) setMe(null);
       }
     })();
-    return () => { alive = false; };
+    return () => {
+      alive = false;
+    };
   }, []);
 
   // Options loaders (Directus reads)
@@ -92,7 +94,8 @@ export default function SettingsSubmit({ mode = "create", submissionId, initialV
 
       (async () => {
         let url = "";
-        let map = (rows: any[]) => rows.map((r) => ({ id: String(r.id ?? r.submission_id), label: String(r.name ?? r.model ?? r.opacity ?? r.id) }));
+        let map = (rows: any[]) =>
+        rows.map((r) => ({ id: String(r.id ?? r.submission_id), label: String(r.name ?? r.model ?? r.opacity ?? r.id) }));
 
         if (path === "material") url = `${API}/items/material?fields=id,name&limit=1000&sort=name`;
         else if (path === "material_coating") url = `${API}/items/material_coating?fields=id,name&limit=1000&sort=name`;
@@ -129,7 +132,10 @@ export default function SettingsSubmit({ mode = "create", submissionId, initialV
           map = (rows) =>
           rows
           .slice()
-          .sort((a, b) => (parseFloat(a.focal_length ?? "99999") || 99999) - (parseFloat(b.focal_length ?? "99999") || 99999))
+          .sort(
+            (a, b) =>
+            (parseFloat(a.focal_length ?? "99999") || 99999) - (parseFloat(b.focal_length ?? "99999") || 99999)
+          )
           .map((r) => {
             const fs = r.field_size ? `${r.field_size} mm` : "";
             const fl = r.focal_length ? `${r.focal_length} mm` : "";
@@ -158,7 +164,9 @@ export default function SettingsSubmit({ mode = "create", submissionId, initialV
         if (live) setOpts(list);
       })().catch(() => live && setOpts([]));
 
-        return () => { live = false; };
+        return () => {
+          live = false;
+        };
     }, [path, includeId]);
 
     return { opts };
@@ -172,7 +180,16 @@ export default function SettingsSubmit({ mode = "create", submissionId, initialV
   ];
   const RASTER_TYPES = FILL_TYPES;
   const RASTER_DITHER: Opt[] = [
-    "threshold", "ordered", "atkinson", "dither", "stucki", "jarvis", "newsprint", "halftone", "sketch", "grayscale",
+    "threshold",
+    "ordered",
+    "atkinson",
+    "dither",
+    "stucki",
+    "jarvis",
+    "newsprint",
+    "halftone",
+    "sketch",
+    "grayscale",
   ].map((x) => ({ id: x, label: x[0].toUpperCase() + x.slice(1) }));
 
   // react-hook-form
@@ -281,9 +298,15 @@ export default function SettingsSubmit({ mode = "create", submissionId, initialV
   }, [
     isEdit,
     initialValues,
-    mats.opts, coats.opts, colors.opts, opacs.opts,
-    soft.opts, srcs.opts,
-    conf.opts, apt.opts, exp.opts,
+    mats.opts,
+    coats.opts,
+    colors.opts,
+    opacs.opts,
+    soft.opts,
+    srcs.opts,
+    conf.opts,
+    apt.opts,
+    exp.opts,
     lens.opts,
     setValue,
   ]);
@@ -291,7 +314,8 @@ export default function SettingsSubmit({ mode = "create", submissionId, initialV
   // Image files
   const [photoFile, setPhotoFile] = useState<File | null>(null);
   const [screenFile, setScreenFile] = useState<File | null>(null);
-  const onPick = (setter: (f: File | null) => void) => (e: React.ChangeEvent<HTMLInputElement>) => setter(e.target.files?.[0] ?? null);
+  const onPick = (setter: (f: File | null) => void) => (e: React.ChangeEvent<HTMLInputElement>) =>
+  setter(e.target.files?.[0] ?? null);
 
   const onSubmit = async (values: any) => {
     setSubmitErr(null);
@@ -354,7 +378,9 @@ export default function SettingsSubmit({ mode = "create", submissionId, initialV
     {/* Hide local H1 in edit mode to avoid duplicate page title */}
     {!isEdit && <h1 className="text-xl font-semibold">Submit CO₂ Galvo Setting</h1>}
     {meLabel ? <p className="text-sm text-muted-foreground">Submitting as {meLabel}</p> : null}
-    {submitErr ? <div className="border border-red-500 bg-red-50 text-red-700 rounded px-3 py-2 text-sm">{submitErr}</div> : null}
+    {submitErr ? (
+      <div className="border border-red-500 bg-red-50 text-red-700 rounded px-3 py-2 text-sm">{submitErr}</div>
+    ) : null}
     </header>
 
     <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
@@ -441,11 +467,11 @@ export default function SettingsSubmit({ mode = "create", submissionId, initialV
         <Text label="Name" name={`fill_settings.${i}.name`} register={register} />
         <Select label="Type" name={`fill_settings.${i}.type`} register={register} options={FILL_TYPES} />
         <Number label="Frequency (kHz)" name={`fill_settings.${i}.frequency`} register={register} step="0.1" />
-        <Number label="Pulse (ns)" name={`fill_settings.${i}.pulse`} register={register} step="0.1" />
+        {/* Pulse removed for CO2 */}
         <Number label="Power (%)" name={`fill_settings.${i}.power`} register={register} step="0.1" />
         <Number label="Speed (mm/s)" name={`fill_settings.${i}.speed`} register={register} step="0.1" />
         <Number label="Interval (mm)" name={`fill_settings.${i}.interval`} register={register} step="0.001" />
-        <Number label="Pass" name={`fill_settings.${i}.pass`} register={register} step="1" />
+        <Number label="Passes" name={`fill_settings.${i}.pass`} register={register} step="1" />
         <Number label="Angle (°)" name={`fill_settings.${i}.angle`} register={register} step="1" />
         </div>
 
@@ -453,7 +479,12 @@ export default function SettingsSubmit({ mode = "create", submissionId, initialV
         <div className="grid md:grid-cols-2 gap-3 items-center">
         <Check label="Auto Rotate" name={`fill_settings.${i}.auto`} register={register} />
         {autoRotate && (
-          <Number label="Auto Rotate Increment (°)" name={`fill_settings.${i}.increment`} register={register} step="0.001" />
+          <Number
+          label="Auto Rotate Increment (°)"
+          name={`fill_settings.${i}.increment`}
+          register={register}
+          step="0.001"
+          />
         )}
         </div>
 
@@ -483,10 +514,10 @@ export default function SettingsSubmit({ mode = "create", submissionId, initialV
         <div className="grid md:grid-cols-4 gap-3">
         <Text label="Name" name={`line_settings.${i}.name`} register={register} />
         <Number label="Frequency (kHz)" name={`line_settings.${i}.frequency`} register={register} step="0.1" />
-        <Number label="Pulse (ns)" name={`line_settings.${i}.pulse`} register={register} step="0.1" />
+        {/* Pulse removed for CO2 */}
         <Number label="Power (%)" name={`line_settings.${i}.power`} register={register} step="0.1" />
         <Number label="Speed (mm/s)" name={`line_settings.${i}.speed`} register={register} step="0.1" />
-        <Number label="Pass" name={`line_settings.${i}.pass`} register={register} step="1" />
+        <Number label="Passes" name={`line_settings.${i}.pass`} register={register} step="1" />
         </div>
 
         {/* Perforation row */}
@@ -527,7 +558,7 @@ export default function SettingsSubmit({ mode = "create", submissionId, initialV
         <div className="grid md:grid-cols-4 gap-3">
         <Text label="Name" name={`raster_settings.${i}.name`} register={register} />
         <Number label="Frequency (kHz)" name={`raster_settings.${i}.frequency`} register={register} step="0.1" />
-        <Number label="Pulse (ns)" name={`raster_settings.${i}.pulse`} register={register} step="0.1" />
+        {/* Pulse removed for CO2 */}
         <Select label="Type" name={`raster_settings.${i}.type`} register={register} options={RASTER_TYPES} />
         <Select label="Dither" name={`raster_settings.${i}.dither`} register={register} options={RASTER_DITHER} />
         <Number label="Power (%)" name={`raster_settings.${i}.power`} register={register} step="0.1" />
@@ -535,7 +566,7 @@ export default function SettingsSubmit({ mode = "create", submissionId, initialV
         <Number label="Interval (mm)" name={`raster_settings.${i}.interval`} register={register} step="0.001" />
         {/* allow two decimals */}
         <Number label="Dot Width Adjustment (mm)" name={`raster_settings.${i}.dot`} register={register} step="0.01" />
-        <Number label="Pass" name={`raster_settings.${i}.pass`} register={register} step="1" />
+        <Number label="Passes" name={`raster_settings.${i}.pass`} register={register} step="1" />
         </div>
 
         {/* Halftone row */}
@@ -573,7 +604,13 @@ function Select({
   register,
   options,
   required,
-}: { label: string; name: string; register: UseFormRegister<any>; options: Opt[]; required?: boolean }) {
+}: {
+  label: string;
+  name: string;
+  register: UseFormRegister<any>;
+  options: Opt[];
+  required?: boolean;
+}) {
   return (
     <div>
     <label className="block text-sm mb-1">
@@ -582,7 +619,9 @@ function Select({
     <select className="w-full border rounded px-2 py-1" {...register(name, { required })}>
     <option value="">—</option>
     {options.map((o) => (
-      <option key={o.id} value={o.id}>{o.label}</option>
+      <option key={o.id} value={o.id}>
+      {o.label}
+      </option>
     ))}
     </select>
     </div>
@@ -616,7 +655,9 @@ function Repeater({ title, fields, onAdd, onRemove, render }: any) {
     <fieldset className="border rounded p-3 space-y-3">
     <div className="flex items-center justify-between">
     <legend className="font-semibold">{title}</legend>
-    <button type="button" className="px-2 py-1 border rounded" onClick={onAdd}>+ Add</button>
+    <button type="button" className="px-2 py-1 border rounded" onClick={onAdd}>
+    + Add
+    </button>
     </div>
 
     <div className="space-y-3">
@@ -624,7 +665,9 @@ function Repeater({ title, fields, onAdd, onRemove, render }: any) {
       <div key={i} className="rounded-lg border bg-muted/20 p-3 space-y-3">
       {render(i)}
       <div className="pt-1">
-      <button type="button" className="px-2 py-1 border rounded" onClick={() => onRemove(i)}>Remove</button>
+      <button type="button" className="px-2 py-1 border rounded" onClick={() => onRemove(i)}>
+      Remove
+      </button>
       </div>
       </div>
     ))}
diff --git a/components/lists/CO2GalvoList.tsx b/components/lists/CO2GalvoList.tsx
index 85e13f45..5caec5f5 100644
--- a/components/lists/CO2GalvoList.tsx
+++ b/components/lists/CO2GalvoList.tsx
@@ -82,7 +82,7 @@ export default function CO2GalvoList({
                 const fields = [
                     "submission_id",
                     "setting_title",
-                    "owner",
+                    // IMPORTANT: request the expanded relation only (do NOT include bare 'owner' id)
                     "owner.id",
                     "owner.username",
                     "uploader",