@7365admin1/layer-common 1.10.5 → 1.10.7

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,236 @@
 
         <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.isScheduleTask"
+                    size="x-small"
+                    color="info"
+                    variant="tonal"
+                    prepend-icon="mdi-calendar-clock"
+                    class="text-none"
+                  >
+                    Schedule Task
+                  </v-chip>
+                  <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"
+                          :loading="!!loadingActions[getKey(item, group.set)]"
+                          :disabled="!!loadingActions[getKey(item, group.set)]"
+                          @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 +358,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">
@@ -351,12 +460,14 @@ const emits = defineEmits([
 
 defineExpose({
   revertSetApprovals,
+  stopLoadingAction,
 });
 
 const internalPage = ref(props.page);
 const selected = shallowRef<any[]>(props.selected);
 const activeActions = reactive<Record<string, "approve" | "reject">>({});
 const persistedActions = reactive<Record<string, "approve" | "reject">>({});
+const loadingActions = reactive<Record<string, boolean>>({});
 const completedSets = ref<Set<number>>(new Set());
 const itemOrderMap = new Map<string, number>();
 
@@ -400,6 +511,7 @@ const groupedItems = computed(() => {
 
     return {
       set: item.set,
+      isScheduleTask: item.isScheduleTask ?? false,
       completedByName: item.completedByName ?? null,
       attachments:
         (item.attachment as string[] | undefined) ??
@@ -431,6 +543,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 +582,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 +612,14 @@ watch(
     internalPage.value = val;
 
     itemOrderMap.clear();
-  },
+  }
 );
 
 watch(
   () => props.selected,
   (val) => {
     selected.value = val;
-  },
+  }
 );
 
 watch(selected, (val) => {
@@ -492,7 +632,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 +651,7 @@ watch(
       });
     });
   },
-  { immediate: true },
+  { immediate: true }
 );
 
 function getKey(item: any, set?: number): string {
@@ -530,7 +670,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 +680,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);
 
@@ -584,6 +724,13 @@ function handleActionClick(
         return;
       }
     }
+
+    // Non-completing approve: undo optimistic check and show loading instead
+    if (!isPersisted) {
+      delete activeActions[key];
+      loadingActions[key] = true;
+    }
+
     console.debug("TableHygiene: emitting action-click (approve immediate)", {
       item: { ...item, set },
       action,
@@ -592,6 +739,10 @@ function handleActionClick(
   }
 }
 
+function stopLoadingAction(key: string): void {
+  delete loadingActions[key];
+}
+
 function revertSetApprovals(setNumber: number): void {
   const group = groupedItems.value.find((g) => g.set === setNumber);
   if (group) {
@@ -611,7 +762,8 @@ watch(
   () => props.items,
   () => {
     completedSets.value.clear();
+    Object.keys(loadingActions).forEach((k) => delete loadingActions[k]);
   },
-  { deep: true },
+  { deep: true }
 );
 </script>

package/components/UnitPersonCard.vue

@@ -0,0 +1,63 @@
+<template>
+  <v-card-text>
+    <v-row>
+      <v-col cols="12" md="4" class="mt-2">
+        <InputLabel class="font-weight-bold" title="Name" />
+        <v-text-field :model-value="person.name" density="compact" :readonly="readOnly" :class="{'no-pointer': readOnly}"/>
+      </v-col>
+
+      <v-col cols="12" md="4" class="mt-2">
+        <InputLabel class="font-weight-bold" title="Email Address" />
+        <v-text-field :model-value="person.email" density="compact" :readonly="readOnly" :class="{'no-pointer': readOnly}"/>
+      </v-col>
+
+      <v-col cols="12" md="4" class="mt-2">
+        <InputLabel class="font-weight-bold" title="NRIC" />
+        <v-text-field :model-value="person.nric" density="compact" :readonly="readOnly" :class="{'no-pointer': readOnly}"/>
+      </v-col>
+
+      <v-col cols="12" md="4" class="mt-2">
+        <InputLabel class="font-weight-bold" title="Mobile Number" />
+        <v-text-field :model-value="person.contact" density="compact" :readonly="readOnly" :class="{'no-pointer': readOnly}"/>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12" md="4" class="mt-2">
+        <InputLabel class="font-weight-bold" title="Other Documents and Files" :viewMode="readOnly" />
+
+        <p
+          v-if="!person.files?.length"
+          class="text-blue-darken-2 font-weight-thin text-caption ml-2 mt-5"
+        >
+          **No documents to display**
+        </p>
+
+        <InputFileV2
+          v-if="person.files?.length"
+          :files="person.files"
+          :viewMode="true"
+        />
+      </v-col>
+    </v-row>
+  </v-card-text>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  person: {
+    type: Object as PropType<TPeople>,
+    required: true,
+  },
+  readOnly: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.no-pointer {
+  pointer-events: none;
+}
+</style>

package/components/VehicleAddSelection.vue

@@ -40,7 +40,7 @@ const prop = defineProps({
 
 const emit = defineEmits(['cancel', 'select']);
 
-const selection = computed<{label: string, value: TVehicleType}[]>(() => {
+const selection = computed<{label: string, value: TVehicleType | 'seasonpass'}[]>(() => {
   return [
     { label: "Whitelist", value: "whitelist" },
     { label: "Season Pass", value: "seasonpass" },
@@ -52,7 +52,7 @@ function cancel() {
   emit("cancel");
 }
 
-function select(value: string) {
+function select(value: TVehicleType | 'seasonpass') {
   emit("select", value);
 }
 </script>