@7365admin1/layer-common 3.2.7 → 3.2.8-staging.201

package/components/OnlineFormConfigurationForm.vue

@@ -1,181 +1,450 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
-      <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-h5">
-          {{ prop.mode === "edit" ? "Edit" : "Add" }} Online Form
-        </span>
-      </v-row>
-    </v-toolbar>
-
-    <v-card-text style="max-height: 76vh; overflow-y: auto" class="pa-0">
-      <v-form v-model="validForm" :disabled="disable">
-
-        <!-- Form Type -->
-        <v-col cols="12" class="px-6 pt-4 pb-0">
-          <InputLabel title="Form Type" />
-
-          <!-- Add mode: selectable list -->
-          <v-list
-            v-if="prop.mode !== 'edit'"
-            density="compact"
-            lines="one"
-            max-height="220"
-            style="overflow-y: auto; border: 1px solid rgba(0,0,0,0.18); border-radius: 4px;"
-            class="pa-0"
-          >
-            <v-list-item
-              v-if="availableFormTypes.length === 0"
-              disabled
-              title="All forms have already been added for this site"
-              class="text-caption text-medium-emphasis"
-            />
-            <v-list-item
-              v-for="name in availableFormTypes"
-              :key="name"
-              :title="name"
-              :active="selectedFormType === name"
-              active-color="primary"
-              class="text-caption"
-              @click="selectedFormType = name"
-            />
-          </v-list>
-
-          <!-- Edit mode: read-only label -->
-          <v-chip v-else color="primary" variant="tonal" size="small">
-            {{ prop.onlineForm.formType }}
-          </v-chip>
-        </v-col>
-
-        <v-divider class="mt-4" />
-
-        <!-- Status (edit mode only) -->
-        <v-col v-if="prop.mode === 'edit'" cols="12" class="px-6 pt-3 pb-0">
-          <InputLabel title="Status" />
-          <v-select
-            v-model="formStatus"
-            :items="['active', 'inactive']"
-            density="comfortable"
-          />
-        </v-col>
+  <!-- The card wears `.screen-modal` for the 16px corner, the `--card` surface
+       and the modal shadow. Its title row and its Cancel/Create row were both
+       `v-toolbar`s - Vuetify `surface` slabs that stay a visible grey bar on
+       the dark card - and are now a `v-card-title` and the shared
+       `.screen-modal__footer` on the card's own surface. -->
+  <v-card class="screen-modal d-flex flex-column" width="100%">
+    <v-card-title class="flex-grow-0">
+      {{ prop.mode === "edit" ? "Edit" : "New" }} Online Form
+    </v-card-title>
 
-        <!-- Attachment -->
-        <!-- <v-col cols="12" class="px-6 pt-3 pb-4">
-          <InputLabel title="Attachment (Optional)" />
+    <v-card-text class="screen-modal__body flex-grow-1 pa-0">
+      <!-- `.filter-field` is a DESCENDANT selector (`.filter-field .v-field`),
+           so one class on the form gives every input below it the design's
+           40px/10px/13.5px geometry. Not one `AppField` anywhere in here: the
+           Create gate runs off these `:rules`, and AppField carries none. -->
+      <v-form v-model="validForm" class="filter-field">
+        <div class="pa-4 pb-0">
 
-          <div v-if="attachmentId" class="d-flex align-center" style="gap: 8px">
-            <v-card
+          <!-- Form Name -->
+          <div class="mb-3">
+            <!-- Create is gated on this being filled, so the label says so. -->
+            <InputLabel title="Form Name" :required="prop.mode !== 'edit'" />
+            <v-text-field
+              v-if="prop.mode !== 'edit'"
+              v-model="formName"
+              density="compact"
               variant="outlined"
-              border="thin"
-              class="px-3 flex-grow-1 text-caption"
-              height="40"
-              :href="getFileUrl(attachmentId)"
-              target="_blank"
-            >
-              <v-row no-gutters class="fill-height" align="center" style="gap: 6px">
-                <v-icon size="15">mdi-file-document-outline</v-icon>
-                {{ attachmentFileName || "View attachment" }}
-                <v-icon size="13" class="ml-auto">mdi-open-in-new</v-icon>
-              </v-row>
-            </v-card>
+              placeholder="e.g. Renovation Permit Application"
+              :rules="[v => !!v || 'Form name is required']"
+              hide-details="auto"
+            />
+            <v-chip v-else color="primary" variant="tonal" size="small">
+              {{ prop.onlineForm?.formType }}
+            </v-chip>
+          </div>
+
+          <!-- Load template (add mode only) -->
+          <div v-if="prop.mode !== 'edit'" class="mb-4">
             <v-btn
-              icon
-              variant="text"
               size="small"
-              density="comfortable"
-              :disabled="disable"
-              @click="clearAttachment"
+              variant="text"
+              color="primary"
+              class="text-none pa-0"
+              prepend-icon="mdi-file-outline"
+              @click="showTemplatePicker = true"
             >
-              <v-icon size="17">mdi-close</v-icon>
+              Start from existing template
             </v-btn>
           </div>
 
-          <div
-            v-else
-            class="upload-drop-zone"
-            :class="{ 'drag-over': isDragOver, 'is-uploading': isUploading }"
-            @dragover.prevent="isDragOver = true"
-            @dragleave.prevent="isDragOver = false"
-            @drop.prevent="handleDrop"
-            @click="fileInputRef?.click()"
-          >
-            <v-progress-circular
-              v-if="isUploading"
-              indeterminate
-              size="24"
-              width="2"
-              color="primary"
-              class="mb-1"
+          <!-- Status (edit mode) -->
+          <div v-if="prop.mode === 'edit'" class="mb-3">
+            <InputLabel title="Status" />
+            <v-select
+              v-model="formStatus"
+              :items="['active', 'inactive']"
+              density="compact"
+              variant="outlined"
+              hide-details
             />
-            <v-icon
-              v-else
-              size="26"
-              :color="isDragOver ? 'primary' : undefined"
-              class="mb-1 text-medium-emphasis"
-            >
-              mdi-cloud-upload-outline
-            </v-icon>
-            <span class="text-caption text-medium-emphasis">
-              {{ isUploading ? "Uploading…" : "Drop file here or click to browse" }}
-            </span>
-            <input
-              ref="fileInputRef"
-              type="file"
-              accept=".pdf,application/pdf,image/*"
-              style="display: none"
-              @change="handleFileInputChange"
+          </div>
+
+          <!-- Payment -->
+          <v-divider class="mb-3" />
+          <div class="d-flex align-center ga-3 mb-1">
+            <span class="text-body-2 font-weight-medium">Requires Payment</span>
+            <v-switch
+              v-model="requiresPayment"
+              density="compact"
+              hide-details
+              color="primary"
+              inset
             />
           </div>
+          <v-text-field
+            v-if="requiresPayment"
+            v-model.number="paymentAmount"
+            density="compact"
+            variant="outlined"
+            type="number"
+            min="1"
+            label="Payment Amount (SGD)"
+            prefix="$"
+            class="mb-3"
+            hide-details="auto"
+            :rules="requiresPayment ? [v => (v > 0) || 'Amount must be greater than 0'] : []"
+          />
 
-          <span v-if="attachmentError" class="text-caption text-error d-block mt-1">
-            {{ attachmentError }}
+          <v-divider class="mb-4" />
+        </div>
+
+        <!-- Block Builder -->
+        <div class="px-4 pb-4">
+          <div class="d-flex align-center justify-space-between mb-3">
+            <span class="text-subtitle-2 font-weight-bold">Form Blocks</span>
+            <v-menu :close-on-content-click="true">
+              <template #activator="{ props: menuProps }">
+                <!-- The design's primary button. `tonal` painted Vuetify's own
+                     wash over the accent; `.screen-btn-primary` is the 40px
+                     accent fill the rest of the layer uses. -->
+                <v-btn
+                  v-bind="menuProps"
+                  variant="flat"
+                  class="screen-btn-primary"
+                  prepend-icon="mdi-plus"
+                >
+                  Add Block
+                </v-btn>
+              </template>
+              <v-list density="compact" min-width="220">
+                <v-list-subheader>Content</v-list-subheader>
+                <v-list-item title="Section Heading" prepend-icon="mdi-format-header-1" @click="addBlock('section-header')" />
+                <v-list-item title="Paragraph" prepend-icon="mdi-text" @click="addBlock('paragraph')" />
+                <v-list-item title="Numbered List" prepend-icon="mdi-format-list-numbered" @click="addBlock('ordered-list')" />
+                <v-list-item title="Bullet List" prepend-icon="mdi-format-list-bulleted" @click="addBlock('unordered-list')" />
+                <v-list-item title="Divider" prepend-icon="mdi-minus" @click="addBlock('divider')" />
+                <v-divider />
+                <v-list-subheader>Input Fields</v-list-subheader>
+                <v-list-item title="Text / Number / Date Field" prepend-icon="mdi-form-textbox" @click="addBlock('field')" />
+                <v-list-item title="Dropdown (Select)" prepend-icon="mdi-chevron-down-box-outline" @click="addBlock('field-select')" />
+                <v-list-item title="Checkbox Group" prepend-icon="mdi-checkbox-multiple-outline" @click="addBlock('checkbox-group')" />
+                <v-list-item title="Signature" prepend-icon="mdi-draw" @click="addBlock('signature-row')" />
+              </v-list>
+            </v-menu>
+          </div>
+
+          <!-- Empty state. The dashed edge was a hardcoded `#e0e0e0` - the same
+               near-white line on the dark card, where it read as a bright box
+               around nothing. `--border` is the design's own and follows the
+               theme; the dashed treatment stays, because this is a drop target
+               and not a card. -->
+          <div
+            v-if="blocks.length === 0"
+            class="online-form-config__empty"
+          >
+            No blocks yet. Click "Add Block" to start building your form.
+          </div>
+
+          <!-- Block list -->
+          <div
+            v-for="(block, idx) in blocks"
+            :key="block._uid"
+            class="mb-2"
+          >
+            <v-card class="screen-card" flat>
+              <!-- Header row -->
+              <div class="d-flex align-center px-3 py-2 ga-2">
+                <!-- MEASURED, and the colour coding is deliberately GONE.
+                     `blockTypeColor` painted eight fixed Vuetify palette fills
+                     - teal, purple, orange, indigo - the SAME on both themes,
+                     with white 10px text on them: "Heading" read 4.37:1 and
+                     "Field" 3.67:1, identically light and dark, which is the
+                     tell that nothing about them followed the theme. The
+                     design has one tag, and it is neutral; the tag already
+                     PRINTS the block type, so the eight colours told the user
+                     nothing the word did not. Deleting the map is the fix, not
+                     re-tinting it. -->
+                <StatusChip
+                  :label="blockTypeLabel(block.type)"
+                  tone="neutral"
+                  :dot="false"
+                  class="online-form-config__tag"
+                />
+                <span
+                  class="text-caption text-medium-emphasis flex-grow-1"
+                  style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
+                >
+                  {{ blockSummary(block) }}
+                </span>
+                <div class="d-flex align-center" style="gap: 2px; flex-shrink: 0">
+                  <v-btn icon size="x-small" variant="text" :disabled="idx === 0" @click="moveBlock(idx, -1)">
+                    <v-icon size="15">mdi-arrow-up</v-icon>
+                  </v-btn>
+                  <v-btn icon size="x-small" variant="text" :disabled="idx === blocks.length - 1" @click="moveBlock(idx, 1)">
+                    <v-icon size="15">mdi-arrow-down</v-icon>
+                  </v-btn>
+                  <v-btn icon size="x-small" variant="text" :color="editingIdx === idx ? 'primary' : undefined" @click="toggleEdit(idx)">
+                    <v-icon size="15">mdi-pencil</v-icon>
+                  </v-btn>
+                  <v-btn icon size="x-small" variant="text" color="error" @click="deleteBlock(idx)">
+                    <v-icon size="15">mdi-delete</v-icon>
+                  </v-btn>
+                </div>
+              </div>
+
+              <!-- Inline editor -->
+              <div v-if="editingIdx === idx">
+                <v-divider />
+                <div class="pa-3">
+
+                  <!-- section-header -->
+                  <template v-if="block.type === 'section-header'">
+                    <v-text-field v-model="block.text" label="Heading Text" density="compact" variant="outlined" hide-details />
+                  </template>
+
+                  <!-- paragraph -->
+                  <template v-else-if="block.type === 'paragraph'">
+                    <v-textarea v-model="block.text" label="Paragraph Text" density="compact" variant="outlined" rows="3" auto-grow hide-details />
+                  </template>
+
+                  <!-- ordered-list / unordered-list -->
+                  <template v-else-if="block.type === 'ordered-list' || block.type === 'unordered-list'">
+                    <v-text-field v-model="block.title" label="Section Title (optional)" density="compact" variant="outlined" class="mb-3" hide-details />
+                    <div class="text-caption font-weight-medium mb-2">Items:</div>
+                    <div
+                      v-for="(item, itemIdx) in block.items"
+                      :key="itemIdx"
+                      class="d-flex align-center ga-2 mb-2"
+                    >
+                      <span class="text-caption text-medium-emphasis" style="min-width: 20px; text-align: right">
+                        {{ block.type === 'ordered-list' ? `${itemIdx + 1}.` : '•' }}
+                      </span>
+                      <v-text-field
+                        :model-value="item"
+                        @update:model-value="block.items[itemIdx] = $event"
+                        density="compact"
+                        variant="outlined"
+                        hide-details
+                        class="flex-grow-1"
+                      />
+                      <v-btn icon size="x-small" variant="text" color="error" @click="block.items.splice(itemIdx, 1)">
+                        <v-icon size="13">mdi-close</v-icon>
+                      </v-btn>
+                    </div>
+                    <v-btn size="x-small" variant="text" color="primary" class="text-none" prepend-icon="mdi-plus" @click="block.items.push('')">
+                      Add item
+                    </v-btn>
+                  </template>
+
+                  <!-- divider -->
+                  <template v-else-if="block.type === 'divider'">
+                    <span class="text-caption text-medium-emphasis">Horizontal divider — no settings needed.</span>
+                  </template>
+
+                  <!-- field -->
+                  <template v-else-if="block.type === 'field'">
+                    <v-row dense>
+                      <v-col cols="12">
+                        <v-text-field
+                          v-model="block.field.label"
+                          label="Field Label"
+                          density="compact"
+                          variant="outlined"
+                          hide-details
+                          @update:model-value="onLabelChange(block, $event)"
+                        />
+                      </v-col>
+                      <v-col cols="7">
+                        <v-text-field
+                          v-model="block.field.key"
+                          label="Field Key"
+                          density="compact"
+                          variant="outlined"
+                          hint="Auto-generated · editable"
+                          persistent-hint
+                        />
+                      </v-col>
+                      <v-col cols="5">
+                        <v-select
+                          v-model="block.field.fieldType"
+                          :items="fieldTypeOptions"
+                          label="Type"
+                          density="compact"
+                          variant="outlined"
+                          hide-details
+                          @update:model-value="onFieldTypeChange(block, $event)"
+                        />
+                      </v-col>
+                      <v-col cols="12">
+                        <v-switch
+                          v-model="block.field.required"
+                          label="Required"
+                          density="compact"
+                          hide-details
+                          color="primary"
+                          inset
+                        />
+                      </v-col>
+                      <!-- Options for select type -->
+                      <v-col v-if="block.field.fieldType === 'select'" cols="12">
+                        <div class="text-caption font-weight-medium mb-2">Dropdown Options:</div>
+                        <div
+                          v-for="(opt, optIdx) in (block.field.options ?? [])"
+                          :key="optIdx"
+                          class="d-flex align-center ga-2 mb-2"
+                        >
+                          <v-text-field
+                            :model-value="opt"
+                            @update:model-value="block.field.options[optIdx] = $event"
+                            density="compact"
+                            variant="outlined"
+                            hide-details
+                            class="flex-grow-1"
+                            :label="`Option ${optIdx + 1}`"
+                          />
+                          <v-btn icon size="x-small" variant="text" color="error" @click="block.field.options.splice(optIdx, 1)">
+                            <v-icon size="13">mdi-close</v-icon>
+                          </v-btn>
+                        </div>
+                        <v-btn size="x-small" variant="text" color="primary" class="text-none" prepend-icon="mdi-plus" @click="(block.field.options ??= []).push('')">
+                          Add option
+                        </v-btn>
+                      </v-col>
+                    </v-row>
+                  </template>
+
+                  <!-- checkbox-group -->
+                  <template v-else-if="block.type === 'checkbox-group'">
+                    <v-text-field v-model="block.title" label="Section Title (optional)" density="compact" variant="outlined" class="mb-3" hide-details />
+                    <v-switch v-model="block.single" label="Single selection (radio behavior)" density="compact" hide-details color="primary" inset class="mb-3" />
+                    <div class="text-caption font-weight-medium mb-2">Checkboxes:</div>
+                    <div
+                      v-for="(item, itemIdx) in block.items"
+                      :key="itemIdx"
+                      class="d-flex align-center ga-2 mb-2"
+                    >
+                      <v-text-field
+                        v-model="item.label"
+                        density="compact"
+                        variant="outlined"
+                        hide-details
+                        label="Label"
+                        class="flex-grow-1"
+                        @update:model-value="onCheckboxLabelChange(item, $event)"
+                      />
+                      <v-text-field
+                        v-model="item.key"
+                        density="compact"
+                        variant="outlined"
+                        hide-details
+                        label="Key"
+                        style="max-width: 130px"
+                      />
+                      <v-btn icon size="x-small" variant="text" color="error" @click="block.items.splice(itemIdx, 1)">
+                        <v-icon size="13">mdi-close</v-icon>
+                      </v-btn>
+                    </div>
+                    <v-btn size="x-small" variant="text" color="primary" class="text-none" prepend-icon="mdi-plus" @click="addCheckboxItem(block)">
+                      Add checkbox
+                    </v-btn>
+                  </template>
+
+                  <!-- signature-row -->
+                  <template v-else-if="block.type === 'signature-row'">
+                    <v-row dense>
+                      <v-col cols="12">
+                        <v-text-field
+                          v-model="block.label"
+                          label="Signature Label"
+                          density="compact"
+                          variant="outlined"
+                          hide-details
+                          @update:model-value="onSignatureLabelChange(block, $event)"
+                        />
+                      </v-col>
+                      <v-col cols="12">
+                        <v-text-field
+                          v-model="block.key"
+                          label="Key"
+                          density="compact"
+                          variant="outlined"
+                          hint="Unique identifier"
+                          persistent-hint
+                        />
+                      </v-col>
+                    </v-row>
+                  </template>
+
+                </div>
+              </div>
+            </v-card>
+          </div>
+        </div>
+
+        <!-- At least one fillable block is required — a form with only
+             headings/paragraphs/dividers has nothing for a resident to
+             actually submit. -->
+        <div v-if="blocks.length > 0 && !hasFillableBlock" class="px-4 pb-3">
+          <span class="text-caption text-error">
+            Add at least one Field, Checkbox Group, or Signature block before saving.
           </span>
-        </v-col> -->
+        </div>
 
-        <v-col v-if="message" cols="12" class="px-6">
+        <!-- Error -->
+        <div v-if="message" class="px-4 pb-3">
           <span class="text-caption text-error">{{ message }}</span>
-        </v-col>
+        </div>
       </v-form>
     </v-card-text>
 
-    <v-toolbar density="compact">
-      <v-row no-gutters>
-        <v-col cols="6">
-          <v-btn
-            tile
-            block
-            variant="text"
-            class="text-none"
-            size="48"
-            @click="emit('cancel')"
-          >
-            Cancel
-          </v-btn>
-        </v-col>
-        <v-col cols="6">
-          <v-btn
-            tile
-            block
-            variant="flat"
-            color="black"
-            class="text-none"
-            size="48"
-            :disabled="!canSubmit || disable"
-            :loading="disable"
-            @click="submit"
-          >
-            {{ prop.mode === "edit" ? "Update" : "Submit" }}
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-toolbar>
+    <!-- The design's footer: two equal-width buttons, ghost then primary. The
+         confirming button was a hardcoded `color="black"` fill, the same black
+         on both themes. `loading` keeps it a `v-btn` - AppButton has no
+         in-flight state. `:disabled` is unchanged, so the submit gate is
+         exactly the gate it was. -->
+    <div class="screen-modal__footer flex-grow-0">
+      <v-btn variant="outlined" class="screen-btn-ghost" @click="emit('cancel')">Cancel</v-btn>
+      <v-btn
+        variant="flat"
+        class="screen-btn-primary"
+        :disabled="!canSubmit || loading"
+        :loading="loading"
+        @click="submit"
+      >
+        {{ prop.mode === "edit" ? "Update" : "Create Form" }}
+      </v-btn>
+    </div>
+
+    <!-- Template picker dialog -->
+    <v-dialog v-model="showTemplatePicker" width="520" scrollable>
+      <v-card class="screen-modal">
+        <v-card-title>Load Template</v-card-title>
+        <div class="screen-hint px-6 pb-2" style="white-space: normal">
+          Select a template to pre-populate form blocks. You can customise them after loading.
+        </div>
+        <v-card-text class="screen-modal__body pa-0" style="max-height: 55vh">
+          <!-- `bg-color="transparent"` so the list sits on the card's own
+               surface rather than Vuetify's `surface` slab. -->
+          <v-list density="compact" bg-color="transparent">
+            <v-list-item
+              v-if="sortedTemplateNames.length === 0"
+              disabled
+              title="All templates have already been added for this site"
+            />
+            <v-list-item
+              v-for="name in sortedTemplateNames"
+              :key="name"
+              :title="name"
+              @click="loadTemplate(name)"
+            />
+          </v-list>
+        </v-card-text>
+        <div class="screen-modal__footer">
+          <v-btn variant="outlined" class="screen-btn-ghost" @click="showTemplatePicker = false">Close</v-btn>
+        </div>
+      </v-card>
+    </v-dialog>
   </v-card>
 </template>
+
 <script setup lang="ts">
-import useFile from "../composables/useFile";
 import useOnlineFormConfiguration from "../composables/useOnlineFormConfiguration";
 import useOnlineFormPages from "../composables/useOnlineFormPages";
 
+type AnyBlock = Record<string, any>;
+
 const prop = defineProps({
   mode: { type: String, default: "add" },
   onlineForm: {
@@ -188,139 +457,358 @@ const emit = defineEmits(["cancel", "success"]);
 
 const { formPages } = useOnlineFormPages();
 const { create: _add, updateById: _update, getAll: _getAll } = useOnlineFormConfiguration();
-const { addFile, getFileUrl } = useFile();
 
 const route = useRoute();
 const siteId = route.params.site as string;
 const orgId = route.params.org as string;
 
-// --- form type selection (add mode) ---
-const selectedFormType = ref("");
+// ── Form-level settings ──────────────────────────────────────────────────────
+const formName = ref("");
+const formStatus = ref<string>(prop.onlineForm?.status || "active");
+const requiresPayment = ref(false);
+const paymentAmount = ref<number>(0);
+const validForm = ref(false);
+const loading = ref(false);
+const message = ref("");
+
+// ── Blocks ───────────────────────────────────────────────────────────────────
+let _uid = 0;
+function nextUid() { return `b${++_uid}`; }
+
+const blocks = ref<AnyBlock[]>([]);
+const editingIdx = ref<number | null>(null);
 
-const { data: existingFormsData } = useLazyAsyncData(
-  `online-form-config-existing-${siteId}`,
-  () => _getAll({ site: siteId, org: orgId, status: "active", limit: 100 })
+// ── Template picker ───────────────────────────────────────────────────────────
+const showTemplatePicker = ref(false);
+const existingFormTypes = ref<string[]>([]);
+const sortedTemplateNames = computed(() =>
+  Object.keys(formPages)
+    .filter((name) => !existingFormTypes.value.includes(name))
+    .sort((a, b) => a.localeCompare(b))
 );
 
-const availableFormTypes = computed(() => {
-  const existing = new Set(
-    existingFormsData.value?.items?.map((f: any) => f.formType) ?? []
-  );
-  return Object.keys(formPages)
-    .filter((name) => !existing.has(name))
-    .sort((a, b) => a.localeCompare(b));
+async function loadExistingFormTypes() {
+  try {
+    const res = await _getAll({ status: "active", org: orgId, site: siteId, limit: 100 });
+    existingFormTypes.value = (res?.items ?? []).map((c: any) => c.formType);
+  } catch (error) {
+    console.error("Failed to load existing form types for template filtering", error);
+  }
+}
+
+// ── Init ──────────────────────────────────────────────────────────────────────
+onMounted(() => {
+  if (prop.mode === "edit") {
+    if (prop.onlineForm?.fields?.blocks) {
+      try {
+        const parsed = JSON.parse(prop.onlineForm.fields.blocks);
+        blocks.value = (parsed as any[]).map((b) => ({ ...b, _uid: nextUid() }));
+      } catch {}
+    }
+    const pa = Number(prop.onlineForm?.fields?.paymentAmount ?? 0);
+    if (pa > 0) { requiresPayment.value = true; paymentAmount.value = pa; }
+  } else {
+    loadExistingFormTypes();
+  }
 });
 
-// --- status (edit mode) ---
-const formStatus = ref<string>(prop.onlineForm?.status || "active");
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function labelToKey(label: string): string {
+  const words = label
+    .replace(/[^a-zA-Z0-9 ]/g, "")
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean);
+  if (!words.length) return "";
+  return (
+    words[0].toLowerCase() +
+    words
+      .slice(1)
+      .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
+      .join("")
+  );
+}
 
-// --- attachment ---
-const attachmentId = ref<string>(prop.onlineForm?.attachment || prop.onlineForm?.fields?.attachment || "");
-const attachmentFileName = ref("");
-const attachmentError = ref("");
-const isDragOver = ref(false);
-const isUploading = ref(false);
-const fileInputRef = ref<HTMLInputElement | null>(null);
-
-function handleDrop(e: DragEvent) {
-  isDragOver.value = false;
-  const file = e.dataTransfer?.files[0];
-  if (file) uploadAttachment(file);
+/**
+ * Every field key currently in use across the form, so a newly-generated key
+ * never collides with a sibling's — otherwise two fields left blank (or given
+ * the same label) end up bound to the same value in the resident app, and
+ * filling one silently fills the other.
+ */
+function collectUsedKeys(excludeRef?: any): Set<string> {
+  const keys = new Set<string>();
+  for (const b of blocks.value) {
+    if (b.type === "field" && b.field && b.field !== excludeRef && b.field.key) {
+      keys.add(b.field.key);
+    }
+    if (b.type === "checkbox-group" && Array.isArray(b.items)) {
+      for (const item of b.items) {
+        if (item !== excludeRef && item?.key) keys.add(item.key);
+      }
+    }
+    if (b.type === "signature-row" && b !== excludeRef && b.key) {
+      keys.add(b.key);
+    }
+  }
+  return keys;
 }
 
-function handleFileInputChange(e: Event) {
-  const file = (e.target as HTMLInputElement).files?.[0];
-  if (file) uploadAttachment(file);
+/** `base` (or "field" when blank) made unique against `used` via a numeric suffix. */
+function uniqueKey(base: string, used: Set<string>): string {
+  const root = base || "field";
+  if (!used.has(root)) return root;
+  let i = 2;
+  while (used.has(`${root}${i}`)) i++;
+  return `${root}${i}`;
 }
 
-async function uploadAttachment(file: File) {
-  isUploading.value = true;
-  attachmentError.value = "";
-  try {
-    const res = await addFile(file);
-    attachmentId.value = res.id;
-    attachmentFileName.value = file.name;
-  } catch (e: any) {
-    attachmentError.value = e?.message || "Upload failed. Please try again.";
-  } finally {
-    isUploading.value = false;
+const fieldTypeOptions = [
+  { title: "Text", value: "text" },
+  { title: "Textarea (multi-line)", value: "textarea" },
+  { title: "Number", value: "number" },
+  { title: "Date", value: "date" },
+  { title: "Dropdown (Select)", value: "select" },
+];
+
+function blockTypeLabel(type: string): string {
+  const map: Record<string, string> = {
+    "section-header": "Heading",
+    paragraph: "Paragraph",
+    "ordered-list": "Numbered List",
+    "unordered-list": "Bullet List",
+    divider: "Divider",
+    field: "Field",
+    "checkbox-group": "Checkboxes",
+    "signature-row": "Signature",
+  };
+  return map[type] ?? type;
+}
+
+function blockSummary(block: AnyBlock): string {
+  switch (block.type) {
+    case "section-header":
+    case "paragraph":
+      return (block.text ?? "").slice(0, 70) || "(empty)";
+    case "ordered-list":
+    case "unordered-list":
+      return block.title || `${block.items?.length ?? 0} item${block.items?.length === 1 ? "" : "s"}`;
+    case "divider":
+      return "──────────────";
+    case "field":
+      return block.field?.label
+        ? `${block.field.label} · ${block.field.fieldType}`
+        : "(no label)";
+    case "checkbox-group":
+      return block.title || `${block.items?.length ?? 0} checkbox${block.items?.length === 1 ? "" : "es"}`;
+    case "signature-row":
+      return block.label || "(no label)";
+    default:
+      return "";
   }
 }
 
-function clearAttachment() {
-  attachmentId.value = "";
-  attachmentFileName.value = "";
-  attachmentError.value = "";
-  if (fileInputRef.value) fileInputRef.value.value = "";
+// ── Block operations ──────────────────────────────────────────────────────────
+function toggleEdit(idx: number) {
+  editingIdx.value = editingIdx.value === idx ? null : idx;
 }
 
-// --- submit ---
-const validForm = ref(false);
-const disable = ref(false);
-const message = ref("");
+function moveBlock(idx: number, dir: -1 | 1) {
+  const target = idx + dir;
+  if (target < 0 || target >= blocks.value.length) return;
+  const copy = [...blocks.value];
+  [copy[idx], copy[target]] = [copy[target], copy[idx]];
+  blocks.value = copy;
+  editingIdx.value = null;
+}
+
+function deleteBlock(idx: number) {
+  blocks.value.splice(idx, 1);
+  if (editingIdx.value === idx) editingIdx.value = null;
+  else if (editingIdx.value !== null && editingIdx.value > idx) editingIdx.value--;
+}
+
+function addBlock(type: string) {
+  let b: AnyBlock;
+  switch (type) {
+    case "section-header":
+      b = { _uid: nextUid(), type: "section-header", text: "" };
+      break;
+    case "paragraph":
+      b = { _uid: nextUid(), type: "paragraph", text: "" };
+      break;
+    case "ordered-list":
+      b = { _uid: nextUid(), type: "ordered-list", title: "", items: [""] };
+      break;
+    case "unordered-list":
+      b = { _uid: nextUid(), type: "unordered-list", title: "", items: [""] };
+      break;
+    case "divider":
+      b = { _uid: nextUid(), type: "divider" };
+      break;
+    case "field": {
+      const uid = nextUid();
+      b = { _uid: uid, type: "field", field: { key: uniqueKey(`field${uid}`, collectUsedKeys()), label: "", fieldType: "text", required: false } };
+      break;
+    }
+    case "field-select": {
+      const uid = nextUid();
+      b = { _uid: uid, type: "field", field: { key: uniqueKey(`field${uid}`, collectUsedKeys()), label: "", fieldType: "select", required: false, options: [] } };
+      break;
+    }
+    case "checkbox-group": {
+      const uid = nextUid();
+      b = { _uid: uid, type: "checkbox-group", title: "", single: false, items: [{ key: uniqueKey(`item${uid}`, collectUsedKeys()), label: "" }] };
+      break;
+    }
+    case "signature-row": {
+      const uid = nextUid();
+      b = { _uid: uid, type: "signature-row", label: "", key: uniqueKey(`signature${uid}`, collectUsedKeys()) };
+      break;
+    }
+    default:
+      return;
+  }
+  blocks.value.push(b);
+  editingIdx.value = blocks.value.length - 1;
+}
+
+// Auto-generate key from label (field blocks)
+function onLabelChange(block: AnyBlock, newLabel: string) {
+  if (!block._keyEdited) {
+    block.field.key = uniqueKey(labelToKey(newLabel), collectUsedKeys(block.field));
+  }
+}
+
+function onFieldTypeChange(block: AnyBlock, newType: string) {
+  if (newType === "select" && !block.field.options) block.field.options = [];
+}
+
+// Auto-generate key from label (checkbox items)
+function onCheckboxLabelChange(item: AnyBlock, newLabel: string) {
+  if (!item._keyEdited) item.key = uniqueKey(labelToKey(newLabel), collectUsedKeys(item));
+}
+
+function addCheckboxItem(block: AnyBlock) {
+  block.items.push({ key: uniqueKey(`item${nextUid()}`, collectUsedKeys()), label: "" });
+}
 
-const canSubmit = computed(() =>
-  prop.mode === "edit" ? true : selectedFormType.value !== ""
+// Auto-generate key from label (signature-row)
+function onSignatureLabelChange(block: AnyBlock, newLabel: string) {
+  block.key = uniqueKey(labelToKey(newLabel), collectUsedKeys(block));
+}
+
+// ── Template loading ──────────────────────────────────────────────────────────
+function loadTemplate(name: string) {
+  const def = formPages[name];
+  if (!def) return;
+  formName.value = name;
+  blocks.value = def.blocks.map((b) => ({
+    ...JSON.parse(JSON.stringify(b)),
+    _uid: nextUid(),
+  }));
+  showTemplatePicker.value = false;
+  editingIdx.value = null;
+}
+
+// ── Computed ──────────────────────────────────────────────────────────────────
+// Only these block types actually collect something from the resident — a
+// form built entirely out of headings/paragraphs/dividers has nothing to
+// submit, so it isn't a usable form yet.
+const FILLABLE_BLOCK_TYPES = ["field", "checkbox-group", "signature-row"];
+const hasFillableBlock = computed(() =>
+  blocks.value.some((b) => FILLABLE_BLOCK_TYPES.includes(b.type)),
 );
 
-function buildFields(formType: string): Record<string, string> {
-  const def = formPages[formType];
-  const fields: Record<string, string> = {};
-  if (def) fields.blocks = JSON.stringify(def.blocks);
-  if (attachmentId.value) fields.attachment = attachmentId.value;
+const canSubmit = computed(() => {
+  const nameOk = prop.mode === "edit" || !!formName.value.trim();
+  const payOk = !requiresPayment.value || paymentAmount.value > 0;
+  return nameOk && payOk && hasFillableBlock.value && !loading.value;
+});
+
+// ── Payload builder ───────────────────────────────────────────────────────────
+function buildCleanBlocks(): Record<string, any>[] {
+  return blocks.value.map((b) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { _uid, _keyEdited, ...rest } = b;
+    if (rest.field) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { _keyEdited: _fke, ...fieldRest } = rest.field;
+      rest.field = fieldRest;
+    }
+    if (Array.isArray(rest.items)) {
+      rest.items = rest.items.map((item: any) => {
+        if (item && typeof item === "object") {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { _keyEdited: _ike, ...itemRest } = item;
+          return itemRest;
+        }
+        return item;
+      });
+    }
+    return rest;
+  });
+}
+
+function buildFields(): Record<string, string> {
+  const fields: Record<string, string> = {
+    blocks: JSON.stringify(buildCleanBlocks()),
+  };
+  if (requiresPayment.value && paymentAmount.value > 0) {
+    fields.paymentAmount = String(paymentAmount.value);
+  }
   return fields;
 }
 
+// ── Submit ────────────────────────────────────────────────────────────────────
 async function submit() {
-  disable.value = true;
   message.value = "";
+  loading.value = true;
   try {
     if (prop.mode === "add") {
+      const name = formName.value.trim();
       await _add({
-        formType: selectedFormType.value,
-        fields: buildFields(selectedFormType.value),
+        formType: name,
+        fields: buildFields(),
         status: "active",
         org: orgId,
         site: siteId,
       });
     } else {
-      const formType = prop.onlineForm.formType as string;
-      await _update(prop.onlineForm._id ?? "", {
+      const formType = prop.onlineForm?.formType as string;
+      await _update(prop.onlineForm?._id ?? "", {
         formType,
-        fields: buildFields(formType),
+        fields: buildFields(),
         status: formStatus.value,
       });
     }
     emit("success");
   } catch (error: any) {
-    message.value = error?.response?._data?.message || "Failed to save form";
+    message.value = error?.response?._data?.message || "Failed to save form. Please try again.";
   } finally {
-    disable.value = false;
+    loading.value = false;
   }
 }
 </script>
 
 <style scoped>
-.upload-drop-zone {
-  border: 2px dashed rgba(0, 0, 0, 0.2);
-  border-radius: 8px;
-  padding: 18px 12px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  min-height: 80px;
-  transition: border-color 0.2s, background-color 0.2s;
-  user-select: none;
+/* The block builder's drop target. Same copy, same dashed treatment, on the
+   design's own border colour and secondary ink so it follows the theme. */
+.online-form-config__empty {
+  padding: 32px 16px;
+  text-align: center;
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--muted);
+  border: 2px dashed var(--border);
+  border-radius: var(--r-inner);
 }
-.upload-drop-zone:hover,
-.upload-drop-zone.drag-over {
-  border-color: rgb(var(--v-theme-primary));
-  background-color: rgba(var(--v-theme-primary), 0.04);
-}
-.upload-drop-zone.is-uploading {
-  pointer-events: none;
-  opacity: 0.65;
+
+/* The tags sit in a column, so they keep the fixed width the `v-chip` had -
+   otherwise "Divider" and "Numbered List" start their summaries at different
+   x positions down the list. */
+.online-form-config__tag {
+  min-width: 110px;
+  justify-content: center;
+  flex-shrink: 0;
 }
 </style>