@7365admin1/layer-common 3.0.6 → 3.0.8

package/components/OnlineFormFill.vue

@@ -14,6 +14,39 @@
       </v-row>
     </v-toolbar>
 
+    <!-- Submission metadata bar (readonly only) -->
+    <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-chip
+        v-if="submissionStatus"
+        :color="submissionStatusColor"
+        variant="flat"
+        size="x-small"
+        class="text-capitalize"
+      >{{ submissionStatus }}</v-chip>
+      <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>
+        <span
+          v-if="initialManagementValues?.paymentOrderId"
+          class="text-caption text-medium-emphasis"
+        >Order: {{ initialManagementValues.paymentOrderId }}</span>
+      </template>
+    </div>
+
     <!-- Scrollable body -->
     <v-card-text
       style="max-height: 76vh; overflow-y: auto"
@@ -31,12 +64,12 @@
             <v-row no-gutters>
               <v-col cols="5">
                 <span class="text-body-2">
-                  <strong>Date&nbsp;:&nbsp;</strong>{{ todayDate }}
+                  <strong>Date&nbsp;:&nbsp;</strong>{{ (initialValues as any).formDate || submissionDate || todayDate }}
                 </span>
               </v-col>
               <v-col cols="7">
                 <span class="text-body-2">
-                  <strong>To&nbsp;&nbsp;&nbsp;:&nbsp;</strong>{{ resolveText(block.to) }}
+                  <strong>To&nbsp;&nbsp;&nbsp;:&nbsp;</strong>{{ (initialValues as any).formTo || resolveText(block.to) }}
                 </span>
               </v-col>
             </v-row>
@@ -220,12 +253,28 @@
           </div>
           <div
             v-else-if="block.type === 'signature-row' && readonly"
-            class="mt-4 mb-2"
+            class="mt-3 mb-5"
           >
+            <span class="text-caption text-medium-emphasis d-block mb-1">{{ block.label }}</span>
             <div
+              v-if="initialValues[block.key]"
+              style="
+                display: inline-block;
+                border-radius: 8px;
+                background: #111111;
+                padding: 8px;
+                max-width: 100%;
+              "
+            >
+              <img
+                :src="initialValues[block.key]"
+                style="display: block; max-width: 100%; max-height: 130px; object-fit: contain;"
+              />
+            </div>
+            <div
+              v-else
               style="border-bottom: 1px dashed #bbb; height: 56px; background: #fafafa; border-radius: 4px"
             />
-            <span class="text-caption text-medium-emphasis">{{ block.label }}</span>
           </div>
 
           <!-- ACKNOWLEDGEMENT -->
@@ -237,27 +286,38 @@
             <span class="text-body-2 font-weight-medium">{{ resolveText(block.text) }}</span>
           </div>
 
-          <!-- MANAGEMENT USE (read-only, shown at bottom) -->
+          <!-- MANAGEMENT USE -->
           <div
             v-else-if="block.type === 'management-use'"
             class="pa-4 mt-2"
-            style="background: #f0f0f0; border-radius: 6px; opacity: 0.75"
+            :style="approvalMode && selectedAction === 'approved'
+              ? 'background: #e8f5e9; border-radius: 6px; border: 1px solid #a5d6a7'
+              : 'background: #f0f0f0; border-radius: 6px; opacity: 0.75'"
           >
             <v-row no-gutters class="mb-2">
               <span class="text-caption font-weight-bold text-medium-emphasis">
                 FOR MANAGEMENT USE ONLY
               </span>
             </v-row>
-            <v-row no-gutters style="gap: 16px">
+            <v-row no-gutters style="gap: 16px; flex-wrap: wrap">
               <div
                 v-for="(item, idx) in block.items"
                 :key="idx"
-                style="min-width: 160px"
+                style="min-width: 160px; flex: 1"
               >
                 <div class="text-caption text-medium-emphasis mb-1">{{ item }}</div>
-                <div
-                  style="border-bottom: 1px solid #aaa; min-width: 120px; height: 22px"
+                <v-text-field
+                  v-if="approvalMode && selectedAction === 'approved'"
+                  v-model="managementValues[item]"
+                  density="compact"
+                  variant="underlined"
+                  :error="!(managementValues[item] ?? '').trim()"
+                  :error-messages="!(managementValues[item] ?? '').trim() ? 'Required' : ''"
                 />
+                <div
+                  v-else
+                  style="border-bottom: 1px solid #aaa; min-width: 120px; height: 22px; font-size: 13px; padding-top: 2px"
+                >{{ managementValues[item] || '' }}</div>
               </div>
             </v-row>
           </div>
@@ -271,53 +331,70 @@
       </v-form>
     </v-card-text>
 
-    <!-- Action bar -->
-    <v-toolbar density="compact">
+    <!-- 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"
+    >
+      <v-text-field
+        v-model="adminRemarks"
+        label="Remarks"
+        density="compact"
+        variant="outlined"
+        :hide-details="adminRemarks.trim().length > 0"
+        :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>
+        <v-btn
+          :variant="selectedAction === 'resubmission' ? 'flat' : 'tonal'"
+          color="orange-darken-1"
+          class="text-none"
+          size="small"
+          @click="selectAction('resubmission')"
+        >Resubmit</v-btn>
+        <v-btn
+          :variant="selectedAction === 'rejected' ? 'flat' : 'tonal'"
+          color="red"
+          class="text-none"
+          size="small"
+          @click="selectAction('rejected')"
+        >Reject</v-btn>
+        <v-btn
+          :variant="selectedAction === 'approved' ? 'flat' : 'tonal'"
+          color="green"
+          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"
+          :disabled="!canConfirm"
+          :loading="updatingStatus"
+          @click="confirmStatusUpdate"
+        >Confirm</v-btn>
+      </div>
+    </div>
+
+    <!-- Normal action bar -->
+    <v-toolbar v-else density="compact">
       <v-row no-gutters>
-        <!-- Readonly: single Close button -->
         <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-btn tile block variant="text" class="text-none" size="48" @click="emit('cancel')">Close</v-btn>
           </v-col>
         </template>
-        <!-- Interactive: Cancel + Submit -->
         <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-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-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>
@@ -339,6 +416,13 @@ const props = defineProps({
   orgId: { type: String, required: true },
   siteName: { type: String, default: "" },
   readonly: { type: Boolean, default: false },
+  initialValues: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+  submissionDate: { type: String, default: "" },
+  submissionStatus: { type: String, default: "" },
+  submissionUnit: { type: String, default: "" },
+  approvalMode: { type: Boolean, default: false },
+  initialManagementValues: { type: Object as PropType<Record<string, string>>, default: () => ({}) },
+  formType: { type: String, default: "" },
   /** Optional custom submit handler. Receives the collected form values.
    *  If omitted the component submits to /api/online-forms automatically. */
   submitFn: {
@@ -347,7 +431,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["cancel", "success"]);
+const emit = defineEmits(["cancel", "success", "update-status"]);
 
 function resolveText(text: string): string {
   return text.replace(/\{siteName\}/g, props.siteName || "the Management");
@@ -361,8 +445,100 @@ const submitting = ref(false);
 const message = ref("");
 const values = ref<Record<string, any>>({});
 
+const selectedAction = ref("");
+const adminRemarks = ref("");
+const updatingStatus = ref(false);
+const managementValues = ref<Record<string, string>>({});
+
+const managementUseItems = computed<string[]>(() => {
+  const result: string[] = [];
+  for (const block of props.definition.blocks) {
+    if (block.type === "management-use") result.push(...block.items);
+  }
+  return result;
+});
+
+// Load previously saved management values (saved keys have colons stripped; remap to match item labels)
+watch(() => props.initialManagementValues, (saved) => {
+  if (!saved || !Object.keys(saved).length) return;
+  const loaded: Record<string, string> = {};
+  for (const item of managementUseItems.value) {
+    const stripped = item.replace(/:+\s*$/, "").trim();
+    const value = saved[stripped] ?? saved[item] ?? "";
+    if (value) loaded[item] = value;
+  }
+  managementValues.value = { ...loaded, ...managementValues.value };
+}, { immediate: true });
+
+const remarksRequired = computed(() => !!selectedAction.value);
+
+const managementComplete = computed(() => {
+  if (selectedAction.value !== "approved") return true;
+  return managementUseItems.value.every(item => (managementValues.value[item] ?? "").trim().length > 0);
+});
+
+const canConfirm = computed(() =>
+  !!selectedAction.value &&
+  adminRemarks.value.trim().length > 0 &&
+  managementComplete.value
+);
+
+function prePopulateManagement() {
+  const today = new Date().toLocaleDateString("en-SG", { day: "2-digit", month: "short", year: "numeric" });
+  const userName = currentUser.value?.name ?? "";
+  for (const item of managementUseItems.value) {
+    if (managementValues.value[item]) continue;
+    const lower = item.toLowerCase();
+    if (lower.includes("by:") || lower.endsWith(" by")) {
+      managementValues.value[item] = userName;
+    } else if (lower.includes("date")) {
+      managementValues.value[item] = today;
+    }
+  }
+}
+
+function selectAction(action: string) {
+  selectedAction.value = selectedAction.value === action ? "" : action;
+  if (selectedAction.value === "approved") prePopulateManagement();
+}
+
+function confirmStatusUpdate() {
+  if (!canConfirm.value) return;
+  updatingStatus.value = true;
+  emit("update-status", {
+    status: selectedAction.value,
+    remarks: adminRemarks.value,
+    managementValues: managementValues.value,
+  });
+}
+
 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",
+]);
+
+const requiresPayment = computed(() => {
+  if (!PAYMENT_REQUIRED_FORM_TYPES.has(props.formType)) return false;
+  if (props.formType === "Application for Main Entrance RFID Transponder") {
+    return !!(props.initialValues.reasonLost || props.initialValues.reasonDamaged);
+  }
+  return true;
+});
+
 // Today's date formatted DD MMM YYYY
 const todayDate = computed(() => {
   const d = new Date();
@@ -390,7 +566,7 @@ function initValues(def: FormDefinition) {
   return init;
 }
 
-values.value = initValues(props.definition);
+values.value = { ...initValues(props.definition), ...props.initialValues };
 
 const NAME_LABELS = new Set([
   "name",
@@ -421,7 +597,7 @@ function prePopulate(u: any) {
   }
 }
 
-watch(currentUser, (u) => { if (u) prePopulate(u); }, { immediate: true });
+watch(currentUser, (u) => { if (u && !props.readonly) prePopulate(u); }, { immediate: true });
 
 async function submit() {
   submitting.value = true;

package/components/PassInformation.vue

@@ -27,6 +27,8 @@
           persistent-hint
           small-chips
           :clearable="props.clearable"
+          @click="fetchPasses"
+          :loading="isPassListLoading"
         >
           <template v-slot:chip="{ props, item }">
             <v-chip
@@ -56,6 +58,8 @@
             persistent-hint
             small-chips
             :clearable="props.clearable"
+            @click="fetchKeys"
+            :loading="isKeyListLoading"
           >
             <template v-slot:chip="{ props, item }">
               <v-chip
@@ -83,6 +87,7 @@
       </v-card-text>
     </v-card>
   </v-row>
+  <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
 </template>
 
 <script setup lang="ts">
@@ -90,6 +95,7 @@ import type { PropType } from "vue";
 import type { ValidationRule } from "vuetify/lib/types.mjs";
 import usePassKey from "../composables/usePassKey";
 import useKey from "../composables/useKey";
+import { string } from "zod/v4";
 
 const props = defineProps({
   passRules: {
@@ -112,6 +118,10 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  passKeys: {
+    type: Array,
+    default: [],
+  },
   hideKeys: {
     type: Boolean,
     default: false,
@@ -158,43 +168,72 @@ const passTypesComputed = computed(() => {
   }
 });
 
-const {
-  data: passesData,
-  refresh: refreshPassesData,
-  pending: fetchPassesPending,
-} = await useLazyAsyncData("get-pass-keys", () => {
-  return getPassKeysByPageSearch({
-    search: passInput.value,
-    page: 1,
-    limit: 500,
-    passTypes: passTypesComputed.value,
-    sites: [props.site],
-    statuses: ["Available"],
-  });
-});
+const message = ref("");
+const messageColor = ref("");
+const messageSnackbar = ref(false);
 
-watch(passesData, (data: any) => {
-  passItems.value = data?.items || [];
-});
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
 
-const {
-  data: keysData,
-  refresh: refreshKeysData,
-  pending: fetchKeysPending,
-} = await useLazyAsyncData("get-keys", () => {
-  return getPassKeysByPageSearch({
-    search: keyInput.value,
-    statuses: ["Available"],
-    passTypes: ["pass-key"],
-    page: 1,
-    limit: 500,
-    sites: [props.site],
-  });
-});
+const isPassListLoading = ref(false);
 
-watch(keysData, (data: any) => {
-  keyItems.value = data?.items || [];
-});
+async function fetchPasses() {
+  // load pass list
+  passItems.value = [];
+  isPassListLoading.value = true;
+  try {
+    const result = await getPassKeysByPageSearch({
+      page: 1,
+      sites: [props.site],
+      limit: 10000,
+      passTypes: passTypesComputed.value,
+      statuses: ["Available"],
+      sortBy: { column: "prefixAndName", order: "1" },
+    });
+    passItems.value = result?.items;
+  } catch (error) {
+    showMessage(errorConverter(error as string), "error");
+  } finally {
+    isPassListLoading.value = false;
+  }
+}
+
+const isKeyListLoading = ref(false);
+
+async function fetchKeys() {
+  keyItems.value = [];
+  isKeyListLoading.value = true;
+  try {
+    const keys: any = await getPassKeysByPageSearch({
+      page: 1,
+      sites: [props.site],
+      limit: 10000,
+      passTypes: ["pass-key"],
+      statuses: ["Available"],
+      sortBy: { column: "prefixAndName", order: "1" },
+    });
+    const selectedKeys = keyItems.value.filter((item: any) => {
+      if (Array.isArray(props?.passKeys) && props.passKeys.length) {
+        return props.passKeys.includes(item._id);
+      }
+      return false;
+    });
+    const filteredArray = keys.items.filter((item: any) => {
+      if (Array.isArray(props?.passKeys) && props.passKeys.length) {
+        return !props.passKeys.includes(item._id);
+      }
+      return true;
+    });
+    keyItems.value = [...selectedKeys, ...filteredArray];
+  } catch (error) {
+    showMessage(errorConverter(error as string), "error");
+  } finally {
+    isKeyListLoading.value = false;
+  }
+}
 
 watch(selectedPass, (newVal) => {
   pass.value = [{ keyId: newVal }];