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

package/components/OnlineFormFill.vue

@@ -1,32 +1,32 @@
 <template>
-  <v-card width="100%">
-    <!-- Title bar -->
-    <v-toolbar color="grey-darken-3" style="min-height: 56px">
-      <v-row no-gutters class="fill-height px-6" align="center">
-        <span
-          class="font-weight-bold text-subtitle-1 text-white text-uppercase"
-          style="letter-spacing: 0.5px; line-height: 1.3"
-        >
-          {{ definition.title }}
-        </span>
-        <v-spacer v-if="$slots['title-actions']" />
-        <slot name="title-actions" />
-      </v-row>
-    </v-toolbar>
-
-    <!-- Submission metadata bar (readonly only) -->
+  <v-card class="screen-modal" width="100%">
+    <!-- The title row was a `grey-darken-3` v-toolbar with white uppercase
+         text: the same hardcoded dark slab on both themes. A `v-card-title` on
+         `.screen-modal` is the same row on the card's own surface, so it
+         follows the theme - and the actions slot keeps its place on the right. -->
+    <v-card-title class="d-flex align-center ga-2">
+      <span class="flex-grow-1">{{ definition.title }}</span>
+      <slot name="title-actions" />
+    </v-card-title>
+
+    <!-- Submission metadata bar (readonly only). Shown for an actual
+         submission (submissionStatus) OR a pure template preview that
+         requires payment — a preview has no submission yet, but should
+         still tell the admin the form carries a fee. -->
     <div
-      v-if="readonly && (submissionStatus)"
-      class="px-6 py-2 d-flex align-center ga-4"
-      style="background: #f5f5f5; border-bottom: 1px solid #e0e0e0; flex-wrap: wrap"
+      v-if="readonly && (submissionStatus || requiresPayment)"
+      class="online-form-fill__meta px-6 py-2 d-flex align-center ga-4"
     >
-      <v-chip
+      <!-- `StatusChip` IS the design's status pill: it maps the WORD to a tone
+           through the shared `utils/status.ts`, so "Pending" is the same amber
+           here as on a work order, and it carries `--tone-bg` with the ink so
+           both halves of the measured pair arrive together. The `v-chip` it
+           replaces painted a flat fixed-palette fill under a white label. -->
+      <StatusChip
         v-if="submissionStatus"
-        :color="submissionStatusColor"
-        variant="flat"
-        size="x-small"
+        :status="submissionStatus"
         class="text-capitalize"
-      >{{ submissionStatus }}</v-chip>
+      />
       <span v-if="(initialValues as any).block" class="text-caption text-medium-emphasis">
         Block: <strong>{{ (initialValues as any).block }}</strong>
       </span>
@@ -37,18 +37,21 @@
         Unit: <strong>{{ submissionUnit }}</strong>
       </span>
       <template v-if="requiresPayment">
-        <v-chip
-          v-if="initialManagementValues?.paymentStatus"
-          color="green"
-          variant="flat"
-          size="x-small"
-        >Payment {{ initialManagementValues.paymentStatus }}</v-chip>
-        <v-chip
-          v-else
-          color="orange"
-          variant="flat"
-          size="x-small"
-        >Payment Not Paid</v-chip>
+        <!-- The payment pair is not a status WORD the shared map knows, so the
+             tone is given directly - the same pill, the same measured pair.
+             A preview has no submission to be paid/unpaid yet, so it shows
+             the configured fee instead of a status that doesn't apply. -->
+        <StatusChip
+          v-if="!submissionStatus"
+          tone="info"
+          :label="`Requires Payment: $${paymentAmount}`"
+        />
+        <StatusChip
+          v-else-if="initialManagementValues?.paymentStatus"
+          tone="ok"
+          :label="`Payment ${initialManagementValues.paymentStatus}`"
+        />
+        <StatusChip v-else tone="warn" label="Payment Not Paid" />
         <span
           v-if="initialManagementValues?.paymentOrderId"
           class="text-caption text-medium-emphasis"
@@ -58,17 +61,21 @@
 
     <!-- Scrollable body -->
     <v-card-text
-      style="max-height: 76vh; overflow-y: auto"
-      class="pa-6"
+      style="max-height: 76vh"
+      class="screen-modal__body pa-6"
     >
-      <v-form v-model="validForm">
+      <!-- `.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. Every `:rules` below is untouched, and no
+           field becomes an `AppField` - AppField carries no rules, and Submit
+           is gated on `validForm`, which only exists because these rules run. -->
+      <v-form v-model="validForm" class="filter-field">
         <template v-for="(block, i) in displayBlocks" :key="i">
 
           <!-- ADDRESS BLOCK -->
           <div
             v-if="block.type === 'address'"
-            class="mb-4 pa-3"
-            style="background: #f5f5f5; border-radius: 6px"
+            class="online-form-fill__panel mb-4 pa-3"
           >
             <v-row no-gutters>
               <v-col cols="5">
@@ -91,7 +98,11 @@
               :key="field.key"
               :cols="field.cols || 6"
             >
-              <InputLabel :title="field.label" />
+              <!-- `required` was never passed, so the design system's own
+                   asterisk never drew: a field the form REFUSES to submit
+                   without looked identical to an optional one. The rule below
+                   is keyed on the same `field.required`. -->
+              <InputLabel :title="field.label" :required="!readonly && !!field.required" />
               <v-text-field
                 v-if="field.fieldType === 'text'"
                 v-model="values[field.key]"
@@ -137,7 +148,7 @@
 
           <!-- SINGLE FULL-WIDTH FIELD -->
           <div v-else-if="block.type === 'field'" class="mb-0">
-            <InputLabel :title="block.field.label" />
+            <InputLabel :title="block.field.label" :required="!readonly && !!block.field.required" />
             <v-text-field
               v-if="block.field.fieldType === 'text'"
               v-model="values[block.field.key]"
@@ -233,20 +244,50 @@
           </div>
 
           <!-- PARAGRAPH (terms / info text) -->
+          <!-- `color: #333` was a near-black on a dark card: the terms text was
+               invisible on the dark theme (measured 1.32:1). `--text` is the
+               design's own ink and `--border` the design's own rule. -->
           <p
             v-else-if="block.type === 'paragraph'"
-            class="text-body-2 mb-3"
-            style="
-              line-height: 1.65;
-              color: #333;
-              text-align: justify;
-              border-left: 3px solid #ddd;
-              padding-left: 10px;
-            "
+            class="online-form-fill__para text-body-2 mb-3"
           >
             {{ resolveText(block.text) }}
           </p>
 
+          <!-- ORDERED LIST -->
+          <div v-else-if="block.type === 'ordered-list'" class="mb-3">
+            <div
+              v-if="block.title"
+              class="text-body-2 font-weight-bold mb-1"
+              style="text-decoration: underline; text-underline-offset: 3px"
+            >{{ block.title }}</div>
+            <ol style="padding-left: 22px; margin: 0">
+              <li
+                v-for="(item, itemIdx) in block.items"
+                :key="itemIdx"
+                class="text-body-2 mb-1"
+                style="line-height: 1.55; color: var(--text)"
+              >{{ item }}</li>
+            </ol>
+          </div>
+
+          <!-- UNORDERED LIST -->
+          <div v-else-if="block.type === 'unordered-list'" class="mb-3">
+            <div
+              v-if="block.title"
+              class="text-body-2 font-weight-bold mb-1"
+              style="text-decoration: underline; text-underline-offset: 3px"
+            >{{ block.title }}</div>
+            <ul style="padding-left: 22px; margin: 0">
+              <li
+                v-for="(item, itemIdx) in block.items"
+                :key="itemIdx"
+                class="text-body-2 mb-1"
+                style="line-height: 1.55; color: var(--text)"
+              >{{ item }}</li>
+            </ul>
+          </div>
+
           <!-- DIVIDER -->
           <v-divider v-else-if="block.type === 'divider'" class="my-4" />
 
@@ -265,6 +306,12 @@
             class="mt-3 mb-5"
           >
             <span class="text-caption text-medium-emphasis d-block mb-1">{{ block.label }}</span>
+            <!-- DELIBERATELY NOT TOKENISED. `detectSigBackground` reads the
+                 saved PNG and decides whether its ink is black or white; this
+                 plate has to match THAT ink, not the current theme. A white
+                 signature on a `--card` plate is invisible on the light theme,
+                 and a black one on the dark theme - which is the whole reason
+                 the detection exists. -->
             <div
               v-if="initialValues[block.key]"
               :style="{
@@ -283,15 +330,14 @@
             </div>
             <div
               v-else
-              style="border-bottom: 1px dashed #bbb; height: 56px; background: #fafafa; border-radius: 4px"
+              class="online-form-fill__sig-blank"
             />
           </div>
 
           <!-- ACKNOWLEDGEMENT -->
           <div
             v-else-if="block.type === 'acknowledgement'"
-            class="mb-4 pa-3"
-            style="background: #f9f9f9; border-radius: 6px; border: 1px solid #eee"
+            class="online-form-fill__panel online-form-fill__panel--bordered mb-4 pa-3"
           >
             <span class="text-body-2 font-weight-medium">{{ resolveText(block.text) }}</span>
           </div>
@@ -299,10 +345,10 @@
           <!-- MANAGEMENT USE -->
           <div
             v-else-if="block.type === 'management-use'"
-            class="pa-4 mt-2"
-            :style="approvalMode && selectedAction === 'approved'
-              ? 'background: #e8f5e9; border-radius: 6px; border: 1px solid #a5d6a7'
-              : 'background: #f0f0f0; border-radius: 6px; opacity: 0.75'"
+            class="online-form-fill__panel pa-4 mt-2"
+            :class="approvalMode && selectedAction === 'approved'
+              ? 'online-form-fill__panel--ok'
+              : 'online-form-fill__panel--dim'"
           >
             <v-row no-gutters class="mb-2">
               <span class="text-caption font-weight-bold text-medium-emphasis">
@@ -326,7 +372,7 @@
                 />
                 <div
                   v-else
-                  style="border-bottom: 1px solid #aaa; min-width: 120px; height: 22px; font-size: 13px; padding-top: 2px"
+                  class="online-form-fill__mgmt-line"
                 >{{ managementValues[item] || '' }}</div>
               </div>
             </v-row>
@@ -344,7 +390,7 @@
     <!-- Approval action panel -->
     <div
       v-if="readonly && approvalMode"
-      style="border-top: 1px solid #e0e0e0; padding: 12px 16px; background: #fafafa; display: flex; flex-direction: column; gap: 10px"
+      class="online-form-fill__approve"
     >
       <v-text-field
         v-model="adminRemarks"
@@ -355,35 +401,35 @@
         :error="remarksRequired && adminRemarks.trim().length === 0"
         :error-messages="remarksRequired && adminRemarks.trim().length === 0 ? 'Remarks are required' : ''"
       />
-      <div class="d-flex align-center ga-2 justify-end">
-        <v-btn variant="text" class="text-none" size="small" @click="emit('cancel')">Close</v-btn>
+      <!-- The three verdicts keep their colour coding - it is what tells them
+           apart - but on the theme's own status colours rather than fixed
+           palette entries, so both the tonal and the flat state follow the
+           theme. Confirm was a hardcoded `grey-darken-3` fill and is now the
+           design's primary button, which is what it is. -->
+      <div class="d-flex align-center ga-2 justify-end flex-wrap">
+        <v-btn variant="outlined" class="screen-btn-ghost" @click="emit('cancel')">Close</v-btn>
         <v-btn
           :variant="selectedAction === 'resubmission' ? 'flat' : 'tonal'"
-          color="orange-darken-1"
+          color="warning"
           class="text-none"
-          size="small"
           @click="selectAction('resubmission')"
         >Resubmit</v-btn>
         <v-btn
           :variant="selectedAction === 'rejected' ? 'flat' : 'tonal'"
-          color="red"
+          color="error"
           class="text-none"
-          size="small"
           @click="selectAction('rejected')"
         >Reject</v-btn>
         <v-btn
           :variant="selectedAction === 'approved' ? 'flat' : 'tonal'"
-          color="green"
+          color="success"
           class="text-none"
-          size="small"
           @click="selectAction('approved')"
         >Approve</v-btn>
         <v-btn
           v-if="selectedAction"
           variant="flat"
-          color="grey-darken-3"
-          class="text-none"
-          size="small"
+          class="screen-btn-primary"
           :disabled="!canConfirm"
           :loading="updatingStatus"
           @click="confirmStatusUpdate"
@@ -391,24 +437,25 @@
       </div>
     </div>
 
-    <!-- Normal action bar -->
-    <v-toolbar v-else density="compact">
-      <v-row no-gutters>
-        <template v-if="readonly">
-          <v-col cols="12">
-            <v-btn tile block variant="text" class="text-none" size="48" @click="emit('cancel')">Close</v-btn>
-          </v-col>
-        </template>
-        <template v-else>
-          <v-col cols="6">
-            <v-btn tile block variant="text" class="text-none" size="48" :disabled="submitting" @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="!validForm || submitting" :loading="submitting" @click="submit">Submit</v-btn>
-          </v-col>
-        </template>
-      </v-row>
-    </v-toolbar>
+    <!-- The design's footer: equal-width buttons, ghost then primary, on a
+         bordered strip. Submit was a hardcoded `color="black"` block fill. Its
+         `:disabled="!validForm || submitting"` is untouched - the gate is still
+         the form's own validity. -->
+    <div v-else class="screen-modal__footer">
+      <template v-if="readonly">
+        <v-btn variant="outlined" class="screen-btn-ghost" @click="emit('cancel')">Close</v-btn>
+      </template>
+      <template v-else>
+        <v-btn variant="outlined" class="screen-btn-ghost" :disabled="submitting" @click="emit('cancel')">Cancel</v-btn>
+        <v-btn
+          variant="flat"
+          class="screen-btn-primary"
+          :disabled="!validForm || submitting"
+          :loading="submitting"
+          @click="submit"
+        >Submit</v-btn>
+      </template>
+    </div>
   </v-card>
 </template>
 <script setup lang="ts">
@@ -433,6 +480,7 @@ const props = defineProps({
   approvalMode: { type: Boolean, default: false },
   initialManagementValues: { type: Object as PropType<Record<string, string>>, default: () => ({}) },
   formType: { type: String, default: "" },
+  paymentAmount: { type: Number, default: 0 },
   /** Optional custom submit handler. Receives the collected form values.
    *  If omitted the component submits to /api/online-forms automatically. */
   submitFn: {
@@ -586,25 +634,13 @@ function confirmStatusUpdate() {
 
 const requiredRule = (v: any) => (v !== null && v !== undefined && v !== "") || "This field is required";
 
-const submissionStatusColor = computed(() => {
-  switch (props.submissionStatus?.toLowerCase()) {
-    case "approved": return "green";
-    case "pending": return "orange";
-    case "resubmission": return "orange";
-    case "rejected": return "red";
-    default: return "grey";
-  }
-});
-
-const PAYMENT_REQUIRED_FORM_TYPES = new Set([
-  "Application for Electronic Access Card",
-  "Application for Booking of BBQ Pit",
-  "Application for Moving In/Out & Delivery",
-  "Application for Main Entrance RFID Transponder",
-]);
+// The local status -> colour switch this file carried is gone: `StatusChip`
+// maps the word through the shared `utils/status.ts`, which already had
+// approved/pending/rejected and now has resubmission too. One mapping, not a
+// second private copy that could drift from it.
 
 const requiresPayment = computed(() => {
-  if (!PAYMENT_REQUIRED_FORM_TYPES.has(props.formType)) return false;
+  if (props.paymentAmount <= 0) return false;
   if (props.formType === "Application for Main Entrance RFID Transponder") {
     return !!(props.initialValues.reasonLost || props.initialValues.reasonDamaged);
   }
@@ -743,3 +779,74 @@ async function submit() {
   }
 }
 </script>
+
+<style scoped>
+/*
+ * Every surface below was a hardcoded near-white hex - `#f5f5f5`, `#f9f9f9`,
+ * `#f0f0f0`, `#fafafa` - with THEMED text on top of it. On the dark theme that
+ * put the design's near-white ink on a near-white plate: the address strip read
+ * 1.05:1, the acknowledgement 1.08:1 and the management panel 1:1, i.e. text
+ * that was there and could not be seen. `--bg` is the design's own recessed
+ * surface and follows the theme, so the same rows read correctly on both.
+ */
+.online-form-fill__meta {
+  flex-wrap: wrap;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
+}
+
+.online-form-fill__panel {
+  background: var(--bg);
+  border-radius: var(--r-inner);
+}
+
+.online-form-fill__panel--bordered {
+  border: 1px solid var(--border);
+}
+
+/* The approved state of the management panel. `--ok-bg` / `--ok` are the
+   design's own success pair; it was `#e8f5e9` on `#a5d6a7`, the same greens on
+   both themes. */
+.online-form-fill__panel--ok {
+  background: var(--ok-bg);
+  border: 1px solid var(--ok);
+}
+
+.online-form-fill__panel--dim {
+  opacity: 0.75;
+}
+
+.online-form-fill__para {
+  line-height: 1.65;
+  color: var(--text);
+  text-align: justify;
+  border-left: 3px solid var(--border);
+  padding-left: 10px;
+}
+
+/* The ruled line a management entry is written on, and the empty signature
+   plate - both were fixed greys. */
+.online-form-fill__mgmt-line {
+  border-bottom: 1px solid var(--border);
+  min-width: 120px;
+  height: 22px;
+  font-size: var(--fs-cell);
+  padding-top: 2px;
+}
+
+.online-form-fill__sig-blank {
+  border-bottom: 1px dashed var(--border);
+  height: 56px;
+  background: var(--bg);
+  border-radius: var(--r-inner-sm);
+}
+
+.online-form-fill__approve {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px 16px;
+  background: var(--bg);
+  border-top: 1px solid var(--border);
+}
+</style>

package/components/OnlineFormRenderPreview.vue

@@ -5,25 +5,25 @@
     width="560"
     persistent
   >
-    <v-card max-height="85vh" class="d-flex flex-column">
-      <v-toolbar color="grey-darken-3" class="flex-grow-0">
-        <v-toolbar-title class="text-subtitle-1 font-weight-bold text-white text-uppercase">
-          {{ form?.formType }}
-        </v-toolbar-title>
-      </v-toolbar>
+    <!-- The title row was a `grey-darken-3` v-toolbar: the same hardcoded grey
+         slab on both themes, with white text sitting on it. A `v-card-title` on
+         `.screen-modal` is the same row on the card's own surface, so it
+         follows the theme. -->
+    <v-card class="screen-modal d-flex flex-column">
+      <v-card-title class="flex-grow-0">{{ form?.formType }}</v-card-title>
 
-      <v-card-subtitle class="px-6 pt-3 pb-0 text-caption text-medium-emphasis flex-grow-0">
+      <v-card-subtitle class="screen-hint px-6 pb-0 flex-grow-0">
         Form preview — fields are read-only
       </v-card-subtitle>
 
-      <v-card-text class="px-6 py-4 flex-grow-1" style="overflow-y: auto">
+      <v-card-text class="screen-modal__body px-6 py-4 flex-grow-1">
         <template v-for="(input, index) in form?.inputs" :key="index">
           <v-text-field
             v-if="input.dataType === 'Text Input'"
             :label="input.label"
             density="comfortable"
             variant="outlined"
-            class="mb-1"
+            class="filter-field mb-1"
             :hint="input.required ? 'Required' : ''"
             persistent-hint
             readonly
@@ -34,7 +34,7 @@
             density="comfortable"
             variant="outlined"
             rows="3"
-            class="mb-1"
+            class="filter-field mb-1"
             :hint="input.required ? 'Required' : ''"
             persistent-hint
             readonly
@@ -45,7 +45,7 @@
             type="date"
             density="comfortable"
             variant="outlined"
-            class="mb-1"
+            class="filter-field mb-1"
             :hint="input.required ? 'Required' : ''"
             persistent-hint
             readonly
@@ -56,7 +56,7 @@
             :items="input.options || []"
             density="comfortable"
             variant="outlined"
-            class="mb-1"
+            class="filter-field mb-1"
             :hint="input.required ? 'Required' : ''"
             persistent-hint
             readonly
@@ -65,29 +65,24 @@
             v-else-if="input.dataType === 'Checkbox'"
             :label="input.label"
             density="comfortable"
-            class="mb-1"
+            class="filter-field mb-1"
             readonly
           />
         </template>
       </v-card-text>
 
-      <v-toolbar density="compact" class="flex-grow-0">
-        <v-row no-gutters>
-          <v-col cols="12">
-            <v-btn
-              tile
-              block
-              variant="flat"
-              color="black"
-              class="text-none"
-              height="48"
-              @click="$emit('update:modelValue', false)"
-            >
-              Close Preview
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <!-- The design's modal footer. The Close button was a `color="black"`
+           square-cornered block fill - the same black on both themes, and the
+           shape of a primary action for what is only a dismiss. -->
+      <div class="screen-modal__footer flex-grow-0">
+        <v-btn
+          variant="outlined"
+          class="screen-btn-ghost"
+          @click="$emit('update:modelValue', false)"
+        >
+          Close Preview
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 </template>