group required and optional

app/components/assets/custom-fields-inputs.tsx

@@ -196,6 +196,25 @@ export default function AssetCustomFields({
       );
     },
   };
+  const requiredFields = customFields.filter((field) => field.required);
+  const optionalFields = customFields.filter((field) => !field.required);
+  type JsonifyObject<T> = {
+    [K in keyof T]: T[K] extends Date
+      ? string // Dates are converted to strings in JSON
+      : T[K] extends object
+      ? JsonifyObject<T[K]> // Recursively apply to nested objects
+      : T[K];
+  };
+
+  function convertJsonifiedCustomField(
+    field: JsonifyObject<CustomField>
+  ): CustomField {
+    return {
+      ...field,
+      createdAt: new Date(field.createdAt),
+      updatedAt: new Date(field.updatedAt),
+    };
+  }
 
   return (
     <div className="border-b pb-6">
@@ -208,25 +227,17 @@ export default function AssetCustomFields({
           Manage custom fields
         </Link>
       </div>
-      {customFields.length > 0 ? (
-        customFields.map((field, index) => {
-          const value = customFieldsValues?.find(
-            (cfv) => cfv.customFieldId === field.id
-          )?.value;
-          const displayVal = value
-            ? (getCustomFieldDisplayValue(value) as string)
-            : "";
-          return (
+      <div>
+          <h3 className="mb-4 text-[16px] font-semibold">Required Fields</h3>
+          {requiredFields.map((field, index) => (
             <FormRow
               key={field.id + index}
               rowLabel={field.name}
               subHeading={field.helpText ? <p>{field.helpText}</p> : undefined}
               className="border-b-0"
               required={field.required}
             >
-              {typeof fieldTypeToCompMap[field.type] === "function" ? (
-                fieldTypeToCompMap[field.type]!(field as unknown as CustomField)
-              ) : (
+              {fieldTypeToCompMap[field.type]?.(convertJsonifiedCustomField(field)) ?? (
                 <Input
                   hideLabel
                   placeholder={field.helpText || undefined}
@@ -235,14 +246,42 @@ export default function AssetCustomFields({
                   name={`cf-${field.id}`}
                   error={zo.errors[`cf-${field.id}`]()?.message}
                   disabled={disabled}
-                  defaultValue={displayVal}
+                  defaultValue={getCustomFieldVal(field.id)}
                   className="w-full"
                   required={zodFieldIsRequired(schema.shape[`cf-${field.id}`])}
                 />
               )}
             </FormRow>
-          );
-        })
+          ))}
+      </div>
+      {customFields.length > 0 ? (
+        <div className="mt-6">
+        <h3 className="mb-4 text-[16px] font-semibold">Optional Fields</h3>
+        {optionalFields.map((field, index) => (
+          <FormRow
+            key={field.id + index}
+            rowLabel={field.name}
+            subHeading={field.helpText ? <p>{field.helpText}</p> : undefined}
+            className="border-b-0"
+            required={field.required}
+          >
+            {fieldTypeToCompMap[field.type]?.(convertJsonifiedCustomField(field)) ?? (
+              <Input
+                hideLabel
+                placeholder={field.helpText || undefined}
+                type={field.type.toLowerCase()}
+                label={field.name}
+                name={`cf-${field.id}`}
+                error={zo.errors[`cf-${field.id}`]()?.message}
+                disabled={disabled}
+                defaultValue={getCustomFieldVal(field.id)}
+                className="w-full"
+                required={zodFieldIsRequired(schema.shape[`cf-${field.id}`])}
+              />
+            )}
+          </FormRow>
+        ))}
+      </div>
       ) : (
         <div>
           <div className=" mx-auto max-w-screen-sm rounded-xl border border-gray-300 bg-white px-5 py-10 text-center">