@7365admin1/layer-common 1.10.4 → 1.10.6

package/components/CleaningScheduleMain.vue

@@ -57,10 +57,9 @@
           }}
         </template>
         <template #item.closeIn="{ item }">
-          <!-- <v-chip class="text-capitalize">{{ value || "No Status" }}</v-chip> -->
-          <v-chip class="text-capitalize" variant="flat" color="primary">{{
-            remainingTime[item._id] || "No Status"
-          }}</v-chip>
+          <v-chip class="text-capitalize" variant="flat" color="primary" pill>
+            {{ remainingTime[item._id] || "No Status" }}
+          </v-chip>
         </template>
         <template #item.status="{ value }">
           <v-chip
@@ -129,7 +128,8 @@ const headers = [
   { title: "Completion Date", value: "completionDate" },
   { title: "", value: "download" },
 ];
-const remainingTime = ref({} as any);
+const remainingTime = ref({} as Record<string, string>);
+const remainingSeconds = ref({} as Record<string, number>);
 const downloadingId = ref<string | null>(null);
 
 const { getCleaningSchedules, downloadChecklistPdf } = useCleaningSchedules();
@@ -148,11 +148,22 @@ const getStatusColor = (status: unknown): string => {
     case "completed":
     case "accepted":
       return "success";
+    case "closed":
+    case "rejected":
+      return "error";
     default:
       return "secondary";
   }
 };
 
+const getCloseInColor = (id: string): string => {
+  const secs = remainingSeconds.value[id];
+  if (secs === undefined) return "primary";
+  if (secs <= 0) return "error";
+  if (secs < 3 * 3600) return "warning";
+  return "primary";
+};
+
 const {
   canDownloadSchedule,
   canViewSchedules,
@@ -205,11 +216,11 @@ const formatTime = (seconds: number) => {
 };
 
 const updateRemainingTime = () => {
-  console.log(items.value);
   items.value.forEach((item) => {
     const itemId = item._id as string;
     const _time = calculateRemainingTime(item.date as string);
-    remainingTime.value[itemId] = _time < 0 ? "00h 00m" : formatTime(_time);
+    remainingSeconds.value[itemId] = _time;
+    remainingTime.value[itemId] = _time <= 0 ? "00h 00m" : formatTime(_time);
   });
 };
 

package/components/IncidentReport/affectedEntities.vue

@@ -76,6 +76,26 @@
         style="max-height: calc(100vh - (200px))"
         class="border mt-5"
       >
+        <template #header.nric>
+          <div class="d-flex align-center">
+            NRIC
+            <v-icon
+              class="cursor-pointer ml-1"
+              size="18"
+              color="blue"
+              @click="isShowNRIC = !isShowNRIC"
+            >
+              {{ isShowNRIC ? "mdi-eye-off-outline" : "mdi-eye-outline" }}
+            </v-icon>
+          </div>
+        </template>
+        <template #item.nric="{ value }">
+          <tr>
+            {{
+              maskedNric(value)
+            }}
+          </tr>
+        </template>
       </v-data-table>
     </v-col>
 
@@ -142,6 +162,7 @@ const injuredTableHeader = [
     value: "contact",
   },
 ];
+
 const damagePropertyTableHeader = [
   {
     title: "Description",
@@ -164,4 +185,12 @@ const damagePropertyTableHeader = [
     value: "action",
   },
 ];
+
+const isShowNRIC = ref(false);
+
+const maskedNric = (nric: string) => {
+  if (!nric) return "";
+  if (isShowNRIC.value) return nric;
+  return nric[0] + "*".repeat(nric.length - 5) + nric.slice(-4);
+};
 </script>

package/components/Input/InputPhoneNumberV2.vue

@@ -13,6 +13,7 @@
         style="max-width: 95px"
         :rules="[...props.rules]"
         :readonly="props.readOnly"
+        :disabled="props.disabled"
         @update:model-value="handleUpdateCountry"
       >
         <template v-slot:item="{ props: itemProps, item }">
@@ -40,6 +41,7 @@
         :prefix="phonePrefix || ''"
         persistent-placeholder
         :density="density"
+        :disabled="props.disabled"
         :placeholder="placeholder || currentMask"
       />
     </v-col>
@@ -64,6 +66,7 @@ const props = defineProps({
   hideDetails: { type: Boolean, default: false },
   loading: { type: Boolean, default: false },
   readOnly: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
 })
 
 const emit = defineEmits(['update:modelValue'])

package/components/PlateNumberDisplay.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="d-flex align-center ga-2 flex-wrap">
+    <span v-if="formatted">
+      {{ formatted }}
+    </span>
+
+    <v-chip
+      v-if="extraCount > 0 && !showAll"
+      density="comfortable"
+      size="small"
+    >
+      + {{ extraCount }}
+    </v-chip>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  plateNumbers: {
+    type: Array as PropType<string[]>,
+    default: () => []
+  },
+  defaultValue: {
+    type: String,
+    default: ""
+  },
+  showAll: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const formatted = computed(() => {
+  if (!props.plateNumbers?.length) return props.defaultValue || ""
+
+  if (props.showAll) {
+    return props.plateNumbers.map((v: any) => v?.plateNumber || "").join(", ")
+  }
+
+  const firstTwo = props.plateNumbers
+    .slice(0, 2)
+    .map((v: any) => v?.plateNumber || "")
+
+  return firstTwo.join(", ")
+})
+
+const extraCount = computed(() => {
+  if (!props.plateNumbers) return 0
+  return props.plateNumbers.length > 2
+    ? props.plateNumbers.length - 2
+    : 0
+})
+</script>

package/components/ScheduleAreaMain.vue

@@ -243,6 +243,9 @@ const getStatusColor = (status: unknown): string => {
     case "completed":
     case "accepted":
       return "success";
+    case "closed":
+    case "rejected":
+      return "error";
     default:
       return "secondary";
   }

package/components/TableHygiene.vue

@@ -1,6 +1,5 @@
 <template>
   <v-row no-gutters>
-    <!-- Top Actions -->
     <v-col cols="12" class="mb-2" v-if="canCreate || $slots.actions">
       <v-row no-gutters>
         <slot name="actions">
@@ -18,7 +17,6 @@
       </v-row>
     </v-col>
 
-    <!-- List Card -->
     <v-col cols="12">
       <v-card
         width="100%"
@@ -27,7 +25,6 @@
         rounded="lg"
         :loading="loading"
       >
-        <!-- Toolbar -->
         <v-toolbar
           density="compact"
           color="grey-lighten-4"
@@ -40,7 +37,10 @@
             <slot name="prepend-additional" />
           </template>
 
-          <v-toolbar-title v-if="title" class="text-subtitle-1 font-weight-medium">
+          <v-toolbar-title
+            v-if="title"
+            class="text-subtitle-1 font-weight-medium"
+          >
             {{ title }}
           </v-toolbar-title>
 
@@ -64,126 +64,224 @@
 
         <v-divider />
 
-        <!-- List Items -->
-        <v-list
-          :style="`max-height: calc(100vh - (${offset}px)); overflow-y: auto;`"
+        <v-sheet
+          :max-height="`calc(100vh - (${offset}px))`"
+          class="overflow-y-auto"
         >
-          <v-list-item
+          <v-row
             v-if="groupedItems.length === 0"
-            class="py-6 text-center text-medium-emphasis"
+            no-gutters
+            justify="center"
+            class="py-10"
           >
-            {{ noDataText }}
-          </v-list-item>
+            <v-col
+              cols="auto"
+              class="text-center text-medium-emphasis text-body-2"
+            >
+              {{ noDataText }}
+            </v-col>
+          </v-row>
 
           <template
             v-for="(group, groupIndex) in groupedItems"
             :key="`group-${groupIndex}`"
           >
-            <div
-              v-if="group.set !== undefined"
-              class="d-flex align-center justify-space-between px-4 py-1 text-caption text-medium-emphasis"
-              style="min-height: 32px"
-            >
-              <span>Set {{ group.set }}</span>
-              <div class="d-flex align-center ga-2">
-                <span v-if="group.completedByName">
-                  Completed by: {{ group.completedByName }}
-                </span>
-                <v-btn
-                  v-if="group.attachments && group.attachments.length > 0"
-                  size="x-small"
-                  variant="tonal"
-                  color="primary"
-                  class="text-none"
-                  prepend-icon="mdi-paperclip"
-                  @click.stop="
-                    openAttachmentDialog(group.set, group.attachments)
-                  "
-                >
-                  View Attachment ({{ group.attachments.length }})
-                </v-btn>
-              </div>
-            </div>
-
-            <v-list-item
+            <v-sheet color="grey-lighten-4" border="b t">
+              <v-row no-gutters align="center" class="px-4 py-2">
+                <v-col cols="auto" class="d-flex align-center ga-2">
+                  <span
+                    class="text-caption font-weight-bold text-medium-emphasis text-uppercase"
+                  >
+                    Set {{ group.set }}
+                  </span>
+                  <v-chip
+                    v-if="group.completedByName && isGroupComplete(group)"
+                    size="x-small"
+                    color="success"
+                    variant="tonal"
+                    prepend-icon="mdi-check-circle-outline"
+                    class="text-none"
+                  >
+                    Completed · {{ group.completedByName }}
+                  </v-chip>
+                  <v-chip
+                    v-else-if="
+                      group.completedByName && isGroupInProgress(group)
+                    "
+                    size="x-small"
+                    color="warning"
+                    variant="tonal"
+                    prepend-icon="mdi-progress-clock"
+                    class="text-none"
+                  >
+                    Ongoing · {{ group.completedByName }}
+                  </v-chip>
+                </v-col>
+                <v-spacer />
+                <v-col cols="auto">
+                  <v-btn
+                    v-if="group.attachments && group.attachments.length > 0"
+                    size="x-small"
+                    variant="tonal"
+                    color="primary"
+                    class="text-none"
+                    prepend-icon="mdi-paperclip"
+                    @click.stop="
+                      openAttachmentDialog(group.set, group.attachments)
+                    "
+                  >
+                    {{ group.attachments.length }} attachment{{
+                      group.attachments.length > 1 ? "s" : ""
+                    }}
+                  </v-btn>
+                </v-col>
+              </v-row>
+            </v-sheet>
+
+            <v-sheet
               v-for="item in group.items"
               :key="item[itemValue]"
-              class="py-3"
-              :class="
-                isItemSelected(item, group.set)
-                  ? ['bg-grey-lighten-4', 'rounded']
-                  : []
+              :color="
+                isItemSelected(item, group.set) ? 'grey-lighten-4' : 'white'
               "
+              border="b"
             >
-              <slot name="list-item" :item="item">
-                <v-list-item-title v-if="headers[0]">
-                  {{ getItemValue(item, headers[0].value) }}
-                </v-list-item-title>
-
-                <v-list-item-subtitle
-                  v-if="headers[1]"
-                  class="mb-1 text-high-emphasis opacity-100"
-                >
-                  {{ getItemValue(item, headers[1].value) || "N/A" }}
-                </v-list-item-subtitle>
-
-                <v-list-item-subtitle
-                  v-if="headers[2]"
-                  class="text-high-emphasis"
-                >
-                  {{ getItemValue(item, headers[2].value) || "N/A" }}
-                </v-list-item-subtitle>
-              </slot>
-
-              <template v-slot:append>
-                <slot
-                  name="list-item-append"
-                  :item="item"
-                  :isSelected="isItemSelected(item, group.set)"
-                >
-                  <v-list-item-action class="d-flex flex-row ga-2">
-                    <template v-if="canManageScheduleTasks">
-                      <v-btn
-                        icon="mdi-close"
-                        size="small"
-                        :variant="
-                          activeActions[getKey(item, group.set)] === 'reject'
-                            ? 'flat'
-                            : 'text'
-                        "
-                        color="error"
-                        @click.stop="
-                          handleActionClick(item, group.set, 'reject')
-                        "
-                      />
-
-                      <v-btn
-                        icon="mdi-check"
-                        size="small"
-                        :variant="
-                          activeActions[getKey(item, group.set)] === 'approve'
-                            ? 'flat'
-                            : 'text'
-                        "
-                        color="success"
-                        @click.stop="
-                          handleActionClick(item, group.set, 'approve')
+              <v-row no-gutters align="center" class="px-4 py-2">
+                <v-col cols="auto" class="mr-3">
+                  <v-icon
+                    size="20"
+                    :color="
+                      activeActions[getKey(item, group.set)] === 'approve'
+                        ? 'success'
+                        : activeActions[getKey(item, group.set)] === 'reject'
+                        ? 'error'
+                        : 'grey-lighten-2'
+                    "
+                  >
+                    {{
+                      activeActions[getKey(item, group.set)] === "approve"
+                        ? "mdi-check-circle"
+                        : activeActions[getKey(item, group.set)] === "reject"
+                        ? "mdi-close-circle"
+                        : "mdi-circle-outline"
+                    }}
+                  </v-icon>
+                </v-col>
+                <v-col>
+                  <slot name="list-item" :item="item">
+                    <v-row no-gutters align-center>
+                      <v-col cols="12">
+                        <span
+                          class="text-body-2 font-weight-medium"
+                          :class="
+                            activeActions[getKey(item, group.set)] === 'approve'
+                              ? 'text-decoration-line-through text-medium-emphasis'
+                              : ''
+                          "
+                        >
+                          {{ getItemValue(item, headers[0].value) }}
+                        </span>
+                      </v-col>
+                      <v-col
+                        v-if="
+                          item.timestamp ||
+                          (headers[1] &&
+                            getItemValue(item, headers[1].value)) ||
+                          (headers[2] && getItemValue(item, headers[2].value))
                         "
-                      />
-                    </template>
-                  </v-list-item-action>
-                </slot>
-              </template>
-            </v-list-item>
+                        cols="12"
+                      >
+                        <v-row
+                          no-gutters
+                          align="center"
+                          class="ga-3 flex-wrap mt-1"
+                        >
+                          <v-col
+                            v-if="item.timestamp"
+                            cols="auto"
+                            class="d-flex align-center ga-1 text-caption text-medium-emphasis pa-0"
+                          >
+                            <v-icon size="11">mdi-clock-outline</v-icon>
+                            {{ formatTimestamp(item.timestamp) }}
+                          </v-col>
+                          <v-col
+                            v-if="
+                              headers[1] && getItemValue(item, headers[1].value)
+                            "
+                            cols="auto"
+                            class="text-caption text-medium-emphasis pa-0"
+                          >
+                            {{ getItemValue(item, headers[1].value) }}
+                          </v-col>
+                          <v-col
+                            v-if="
+                              headers[2] && getItemValue(item, headers[2].value)
+                            "
+                            cols="auto"
+                            class="text-caption text-medium-emphasis pa-0"
+                          >
+                            {{ getItemValue(item, headers[2].value) }}
+                          </v-col>
+                        </v-row>
+                      </v-col>
+                    </v-row>
+                  </slot>
+                </v-col>
+
+                <v-col cols="auto">
+                  <slot
+                    name="list-item-append"
+                    :item="item"
+                    :isSelected="isItemSelected(item, group.set)"
+                  >
+                    <v-row
+                      v-if="canManageScheduleTasks"
+                      no-gutters
+                      align="center"
+                    >
+                      <v-col cols="auto">
+                        <v-btn
+                          icon="mdi-close"
+                          size="small"
+                          :variant="
+                            activeActions[getKey(item, group.set)] === 'reject'
+                              ? 'flat'
+                              : 'text'
+                          "
+                          color="error"
+                          @click.stop="
+                            handleActionClick(item, group.set, 'reject')
+                          "
+                        />
+                      </v-col>
+                      <v-col cols="auto">
+                        <v-btn
+                          icon="mdi-check"
+                          size="small"
+                          :variant="
+                            activeActions[getKey(item, group.set)] === 'approve'
+                              ? 'flat'
+                              : 'text'
+                          "
+                          color="success"
+                          @click.stop="
+                            handleActionClick(item, group.set, 'approve')
+                          "
+                        />
+                      </v-col>
+                    </v-row>
+                  </slot>
+                </v-col>
+              </v-row>
+            </v-sheet>
           </template>
-        </v-list>
+        </v-sheet>
 
         <slot name="footer" />
       </v-card>
     </v-col>
   </v-row>
 
-  <!-- Attachment Preview Dialog -->
   <v-dialog v-model="showAttachmentDialog" max-width="700" scrollable>
     <v-card>
       <v-card-title class="d-flex align-center pa-4">
@@ -248,7 +346,6 @@
     </v-card>
   </v-dialog>
 
-  <!-- Full Image Lightbox -->
   <v-dialog v-model="showLightbox" max-width="900">
     <v-card>
       <v-card-actions class="pa-2 justify-end">
@@ -431,6 +528,34 @@ const allItemsApproved = computed(() => {
   );
 });
 
+function formatTimestamp(ts: string): string {
+  if (!ts) return "";
+  const date = new Date(ts);
+  return date.toLocaleString("en-SG", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: true,
+  });
+}
+
+function isGroupComplete(group: { items: any[] }): boolean {
+  return (
+    group.items.length > 0 &&
+    group.items.every((item: any) => item.approve === true)
+  );
+}
+
+function isGroupInProgress(group: { items: any[] }): boolean {
+  return (
+    group.items.some(
+      (item: any) => item.approve === true || item.reject === true
+    ) && !isGroupComplete(group)
+  );
+}
+
 function isSetFullyApproved(setNumber: number): boolean {
   const group = groupedItems.value.find((g) => g.set === setNumber);
   if (!group) return false;
@@ -442,7 +567,7 @@ function isSetFullyApproved(setNumber: number): boolean {
 }
 
 function getNewApprovedItemsForSet(
-  setNumber: number,
+  setNumber: number
 ): Array<{ key: string; item: any; action: "approve" }> {
   const group = groupedItems.value.find((g) => g.set === setNumber);
   if (!group) return [];
@@ -472,14 +597,14 @@ watch(
     internalPage.value = val;
 
     itemOrderMap.clear();
-  },
+  }
 );
 
 watch(
   () => props.selected,
   (val) => {
     selected.value = val;
-  },
+  }
 );
 
 watch(selected, (val) => {
@@ -492,7 +617,7 @@ watch(
     if (!items || !Array.isArray(items)) return;
 
     Object.keys(persistedActions).forEach(
-      (key) => delete persistedActions[key],
+      (key) => delete persistedActions[key]
     );
 
     items.forEach((group: any) => {
@@ -511,7 +636,7 @@ watch(
       });
     });
   },
-  { immediate: true },
+  { immediate: true }
 );
 
 function getKey(item: any, set?: number): string {
@@ -530,7 +655,7 @@ function isItemSelected(item: any, set?: number): boolean {
 
   if (typeof selected.value[0] === "object" && "unit" in selected.value[0]) {
     return selected.value.some(
-      (s: any) => s.unit === item[props.itemValue] && s.set === set,
+      (s: any) => s.unit === item[props.itemValue] && s.set === set
     );
   }
 
@@ -540,7 +665,7 @@ function isItemSelected(item: any, set?: number): boolean {
 function handleActionClick(
   item: any,
   set: number | undefined,
-  action: "approve" | "reject",
+  action: "approve" | "reject"
 ): void {
   const key = getKey(item, set);
 
@@ -612,6 +737,6 @@ watch(
   () => {
     completedSets.value.clear();
   },
-  { deep: true },
+  { deep: true }
 );
 </script>