@7365admin1/layer-common 3.0.6 → 3.0.7

package/components/OnlineFormFill.vue

@@ -14,6 +14,21 @@
       </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>
+    </div>
+
     <!-- Scrollable body -->
     <v-card-text
       style="max-height: 76vh; overflow-y: auto"
@@ -31,12 +46,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 +235,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 +268,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 +313,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 +398,12 @@ 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: () => ({}) },
   /** Optional custom submit handler. Receives the collected form values.
    *  If omitted the component submits to /api/online-forms automatically. */
   submitFn: {
@@ -347,7 +412,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 +426,85 @@ 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";
+  }
+});
+
 // Today's date formatted DD MMM YYYY
 const todayDate = computed(() => {
   const d = new Date();
@@ -390,7 +532,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 +563,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/VehicleManagement.vue

@@ -18,7 +18,8 @@
         {{ value ? `Blk ${value}` : "" }}
       </template>
       <template #item.nric="{ value }">
-       {{ maskNRIC(value) }}
+        <span v-if="value" v-tooltip:top="value">{{ maskNRIC(value) }}</span>
+        <span v-else>{{ maskNRIC(value) }}</span>
       </template>
 
       <template #item.plates="{ value, item }">
@@ -59,7 +60,10 @@
             <template v-for="(label, key) in formattedFields" :key="key">
 
               <v-col v-if="key === 'nric' && selectedVehicleObject['nric']" cols="12">
-                <span class="d-flex ga-3 align-center"><strong>{{ label }}:</strong> {{ maskNRIC(selectedVehicleObject[key]) }}</span>
+                <span class="d-flex ga-3 align-center">
+                  <strong>{{ label }}:</strong>
+                  <span v-tooltip:top="selectedVehicleObject[key]">{{ maskNRIC(selectedVehicleObject[key]) }}</span>
+                </span>
               </v-col>
 
               <v-col v-else-if="key === 'plates'" class="d-flex flex-column ga-2">

package/components/VisitorManagement.vue

@@ -343,7 +343,7 @@
               <span v-else-if="
                 key === 'nric' && selectedVisitorObject['nric']" class="d-flex align-center">
                 <strong>{{ label }}:</strong>
-                <span class="ml-2">{{ maskNRIC(selectedVisitorObject[key]) }}</span>
+                <span v-tooltip:top="selectedVisitorObject[key]" class="ml-2">{{ maskNRIC(selectedVisitorObject[key]) }}</span>
               </span>
               <span v-else-if="key === 'attachments' && selectedVisitorObject?.[key]?.length > 0"
                 class="d-flex flex-column">

package/composables/useDashboard.ts

@@ -17,12 +17,16 @@ export default function () {
 
   function getDashboardHygieneWeeklyActivity(
     site = "",
-    serviceType: TServiceType = "cleaning_services"
+    serviceType: TServiceType = "cleaning_services",
+    period?: TDashboardValues
   ) {
     return useNuxtApp().$api<THygieneWeeklyActivityItem[]>(
       `/api/dashboard/serviceType/${serviceType}/site/${site}/weekly-activity`,
       {
         method: "GET",
+        query: {
+          period,
+        },
       }
     );
   }
@@ -80,11 +84,31 @@ export default function () {
     );
   }
 
+  function getDashboardPropertyManagement(
+    site = "",
+    period: TDashboardValues = "today",
+    type = "",
+    facility = ""
+  ) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/dashboard/serviceType/property_management_agency/site/${site}`,
+      {
+        method: "GET",
+        query: {
+          period,
+          ...(type ? { type } : {}),
+          ...(facility ? { facility } : {}),
+        },
+      }
+    );
+  }
+
   return {
     getDashboardHygiene,
     getDashboardHygieneWeeklyActivity,
     getDashboardHygieneTaskSchedule,
     getDashboardHygieneAttendance,
     getDashboardHygieneFeedbacks,
+    getDashboardPropertyManagement,
   };
 }

package/composables/useOnlineForm.ts

@@ -46,22 +46,32 @@ export default function useOnlineForm() {
       query: { id },
     });
   }
+  function getFormEntryById(id: string) {
+    return useNuxtApp().$api<Record<string, any>>(`/api/form-entries/id/${id}`, {
+      method: "GET",
+    });
+  }
+  function updateFormEntryById(id: string, value: any) {
+    return useNuxtApp().$api<Record<string, any>>(`/api/form-entries/id/${id}`, {
+      method: "PUT",
+      body: value,
+    });
+  }
   function getAllBySiteId(
     siteId: string,
-    { page = 1, search = "", limit = 10, status = "active" }
+    { page = 1, search = "", limit = 10, status = "", org = "" } = {}
   ) {
-    return useNuxtApp().$api<Record<string, any>>(
-      `/api/online-forms/site/${siteId}`,
-      {
-        method: "GET",
-        query: {
-          page,
-          search,
-          limit,
-          status,
-        },
-      }
-    );
+    return useNuxtApp().$api<Record<string, any>>(`/api/form-entries`, {
+      method: "GET",
+      query: {
+        page,
+        search,
+        limit,
+        status,
+        org,
+        site: siteId,
+      },
+    });
   }
   return {
     getAll,
@@ -70,5 +80,7 @@ export default function useOnlineForm() {
     updateOnlineFormById,
     deleteOnlineFormById,
     getAllBySiteId,
+    getFormEntryById,
+    updateFormEntryById,
   };
 }

package/composables/useOnlineFormPages.ts

@@ -17,7 +17,7 @@ export type FormBlock =
   | { type: "address"; to: string }
   | { type: "row"; fields: FormFieldDef[] }
   | { type: "field"; field: FormFieldDef }
-  | { type: "checkbox-group"; title?: string; items: CheckboxItemDef[] }
+  | { type: "checkbox-group"; title?: string; single?: boolean; items: CheckboxItemDef[] }
   | { type: "paragraph"; text: string }
   | { type: "section-header"; text: string }
   | { type: "divider" }
@@ -506,7 +506,7 @@ const formPages: Record<string, FormDefinition> = {
   },
 
   "Application for Booking of Rooftop Bar/Dining": {
-    title: "APPLICATION FOR BOOKING OF ROOFTOP BAR/DINNING",
+    title: "APPLICATION FOR BOOKING OF ROOFTOP BAR/DINING",
     blocks: [
       { type: "address", to: "{siteName}" },
       { type: "row", fields: [

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {

package/types/dashboard.d.ts

@@ -30,6 +30,7 @@ declare type TDashboardMetric = {
   outOfStock?: number;
   completed?: number;
   total?: number;
+  items?: { name: string; qty: number }[];
 };
 
 declare type THygieneDashboardData = {
@@ -74,4 +75,3 @@ declare type THygienePaginatedResponse<T> = {
   pages: number;
   pageRange: string;
 };
-