UI changes, attachment page redesign

src/features/campaigns/CampaignFieldsPage.tsx

@@ -10,6 +10,7 @@ import { useCampaignWorkspaceData } from "./hooks/useCampaignWorkspaceData";
 import { asRecord, formatDateTime, getCampaignJson, isAuditLockedVersion, isRecord, versionLockReason } from "./utils/campaignView";
 import { ensureCampaignDraft, getBool, getText, updateNested } from "./utils/draftEditor";
 import { useRegisterCampaignUnsavedChanges } from "./context/UnsavedChangesContext";
+import FieldValueInput from "./components/FieldValueInput";
 
 const fieldTypeOptions = ["string", "integer", "double", "date", "password"];
 
@@ -127,7 +128,7 @@ export default function CampaignFieldsPage({ settings, campaignId }: { settings:
     setLocalError("");
   }
 
-  function setGlobalValue(key: string, value: string) {
+  function setGlobalValue(key: string, value: unknown) {
     patchGlobalValues({ ...globalValues, [key]: value });
   }
 
@@ -226,9 +227,9 @@ export default function CampaignFieldsPage({ settings, campaignId }: { settings:
                         </select>
                       </td>
                       <td><ToggleSwitch label="Required" checked={field.required} disabled={locked} onChange={(checked) => setField(index, { required: checked })} /></td>
-                      <td><input value={valueToText(globalValues[field.name])} disabled={locked || !field.name} placeholder="Optional default" onChange={(event) => setGlobalValue(field.name, event.target.value)} /></td>
+                      <td><FieldValueInput fieldType={field.type} value={globalValues[field.name]} disabled={locked || !field.name} placeholder="Optional default" onChange={(value) => setGlobalValue(field.name, value)} /></td>
                       <td><ToggleSwitch label="Can override" checked={field.can_override} disabled={locked || !field.name} onChange={(checked) => setOverrideAllowed(index, checked)} /></td>
-                      <td className="table-action-cell"><Button variant="danger" disabled={locked} onClick={() => deleteField(index)}>Delete</Button></td>
+                      <td className="table-action-cell"><Button variant="danger" disabled={locked} onClick={() => deleteField(index)}>Remove</Button></td>
                     </tr>
                   ))}
                 </tbody>
@@ -300,9 +301,3 @@ function humanizeFieldName(name: string): string {
   return name.replace(/_/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
 }
 
-function valueToText(value: unknown): string {
-  if (value === undefined || value === null) return "";
-  if (typeof value === "string") return value;
-  if (typeof value === "number" || typeof value === "boolean") return String(value);
-  return JSON.stringify(value);
-}