@7365admin1/layer-common 1.11.36 → 1.11.38

package/components/ScheduleTaskForm.vue

@@ -20,7 +20,7 @@
         </v-row>
       </v-toolbar>
 
-      <v-card-text class="pa-8 flex-grow-1" style="overflow-y: auto">
+      <v-card-text class="pa-4 flex-grow-1" style="overflow-y: auto">
         <v-form ref="formRef" v-model="valid">
           <v-row dense>
             <v-col cols="12">
@@ -52,7 +52,10 @@
                 <div class="text-caption text-medium-emphasis mb-2">
                   {{ selectedDates.length }} date(s) selected
                 </div>
-                <div v-if="selectedDates.length > 0" class="d-flex flex-wrap gap-1">
+                <div
+                  v-if="selectedDates.length > 0"
+                  class="d-flex flex-wrap ga-2"
+                >
                   <v-chip
                     v-for="date in selectedDates"
                     :key="date"
@@ -121,6 +124,108 @@
               </v-select>
             </v-col>
 
+            <v-col v-if="selectedAreas.length > 0" cols="12">
+              <InputLabel title="Units Under Selected Areas" />
+              <v-card variant="outlined" rounded class="mb-4">
+                <v-list density="compact" nav>
+                  <template
+                    v-for="(area, idx) in selectedAreas"
+                    :key="area.value || area._id"
+                  >
+                    <v-divider v-if="idx > 0" />
+
+                    <v-list-item
+                      rounded="0"
+                      class="px-3"
+                      @click="toggleArea(area.value || area._id)"
+                    >
+                      <template #prepend>
+                        <v-icon size="18" color="medium-emphasis">
+                          {{
+                            openAreas.includes(area.value || area._id)
+                              ? "mdi-chevron-down"
+                              : "mdi-chevron-right"
+                          }}
+                        </v-icon>
+                      </template>
+
+                      <v-list-item-title class="text-body-2 font-weight-medium">
+                        {{ area.name }}
+                      </v-list-item-title>
+
+                      <template #append>
+                        <v-progress-circular
+                          v-if="
+                            loadingUnits &&
+                            !(area.value || area._id in fetchedAreaUnits)
+                          "
+                          size="14"
+                          width="2"
+                          indeterminate
+                          color="primary"
+                        />
+                        <v-chip
+                          v-else
+                          size="x-small"
+                          variant="tonal"
+                          color="primary"
+                        >
+                          {{
+                            (fetchedAreaUnits[area.value || area._id] || [])
+                              .length
+                          }}
+                        </v-chip>
+                      </template>
+                    </v-list-item>
+
+                    <v-expand-transition>
+                      <div v-show="openAreas.includes(area.value || area._id)">
+                        <v-card-text class="pt-1 pb-3 px-3">
+                          <div
+                            v-if="
+                              loadingUnits &&
+                              !(area.value || area._id in fetchedAreaUnits)
+                            "
+                            class="d-flex flex-wrap ga-2"
+                          >
+                            <v-skeleton-loader
+                              v-for="n in 4"
+                              :key="n"
+                              type="chip"
+                              width="80"
+                            />
+                          </div>
+
+                          <div
+                            v-else-if="
+                              (fetchedAreaUnits[area.value || area._id] || [])
+                                .length > 0
+                            "
+                            class="d-flex flex-wrap ga-1"
+                          >
+                            <v-chip
+                              v-for="unit in fetchedAreaUnits[
+                                area.value || area._id
+                              ]"
+                              :key="unit.unit"
+                              size="small"
+                              variant="tonal"
+                            >
+                              {{ unit.name }}
+                            </v-chip>
+                          </div>
+
+                          <span v-else class="text-caption text-disabled">
+                            No units configured
+                          </span>
+                        </v-card-text>
+                      </div>
+                    </v-expand-transition>
+                  </template>
+                </v-list>
+              </v-card>
+            </v-col>
+
             <v-col cols="12">
               <InputLabel for="description" title="Task Description" />
               <v-textarea
@@ -138,18 +243,16 @@
         </v-form>
       </v-card-text>
 
-      <v-divider />
-
-      <v-card-actions class="pa-0">
-        <v-row no-gutters class="fill-width">
+      <v-toolbar class="pa-0" density="compact">
+        <v-row no-gutters>
           <v-col cols="6" class="pa-0">
             <v-btn
               block
               variant="text"
-              class="text-none rounded-0"
-              size="x-large"
+              class="text-none"
+              size="large"
               @click="close"
-              height="56"
+              height="48"
               :disabled="submitting"
             >
               Cancel
@@ -161,7 +264,7 @@
               variant="flat"
               color="primary"
               class="text-none font-weight-bold rounded-0"
-              height="56"
+              height="48"
               @click="submitTask"
               :loading="submitting"
             >
@@ -169,7 +272,7 @@
             </v-btn>
           </v-col>
         </v-row>
-      </v-card-actions>
+      </v-toolbar>
     </v-card>
   </v-dialog>
 
@@ -202,7 +305,7 @@ const props = defineProps({
 const show = defineModel("show", { type: Boolean, default: false });
 const emit = defineEmits(["saved", "close", "refresh"]);
 
-const { getAreas } = useAreas();
+const { getAreas, getAreaById } = useAreas();
 const { createScheduleTask, updateScheduleTask, getScheduleTaskById } =
   useScheduleTask();
 
@@ -215,19 +318,52 @@ const subject = ref("");
 const description = ref("");
 const scheduleTime = ref("08:00");
 const pickerDates = ref<Date[]>([]);
-// Derived from pickerDates — single source of truth, always in sync
 const selectedDates = computed(() =>
   pickerDates.value.map((d) => toLocalISO(d)).sort()
 );
 
 const selectedAreas = ref<any[]>([]);
+const loadingUnits = ref(false);
+const fetchedAreaUnits = ref<Record<string, { name: string; unit: string }[]>>(
+  {}
+);
+const openAreas = ref<string[]>([]);
+
+const selectedAreaIds = computed(() =>
+  selectedAreas.value.map((a: any) => a.value || a._id)
+);
+
+watch(selectedAreaIds, async (ids, prevIds) => {
+  openAreas.value = ids.slice();
+
+  const toFetch = ids.filter(
+    (id) => !prevIds?.includes(id) && !(id in fetchedAreaUnits.value)
+  );
+
+  if (!toFetch.length) return;
+
+  loadingUnits.value = true;
+  try {
+    await Promise.all(
+      toFetch.map(async (id) => {
+        try {
+          const result = await getAreaById(id);
+          fetchedAreaUnits.value[id] = result?.units || [];
+        } catch {
+          fetchedAreaUnits.value[id] = [];
+        }
+      })
+    );
+  } finally {
+    loadingUnits.value = false;
+  }
+});
 
 const message = ref("");
 const messageSnackbar = ref(false);
 const messageColor = ref("success");
 const areasList = ref<any[]>([]);
 
-// Helper function to generate all dates between start and end
 const generateDateRange = (start: Date, end: Date): Date[] => {
   const dates: Date[] = [];
   const current = new Date(start);
@@ -240,7 +376,6 @@ const generateDateRange = (start: Date, end: Date): Date[] => {
   return dates;
 };
 
-// Helper: convert a Date to a local YYYY-MM-DD string (avoids UTC-shift issues)
 const toLocalISO = (d: Date): string => {
   const y = d.getFullYear();
   const m = String(d.getMonth() + 1).padStart(2, "0");
@@ -248,7 +383,6 @@ const toLocalISO = (d: Date): string => {
   return `${y}-${m}-${day}`;
 };
 
-// Remove a single date from the selection via chip close
 const removeDate = (dateISO: string) => {
   pickerDates.value = pickerDates.value.filter(
     (d) => toLocalISO(d) !== dateISO
@@ -261,12 +395,23 @@ const showMessage = (text: string, color: string = "success") => {
   messageSnackbar.value = true;
 };
 
+const toggleArea = (id: string) => {
+  const idx = openAreas.value.indexOf(id);
+  if (idx === -1) {
+    openAreas.value.push(id);
+  } else {
+    openAreas.value.splice(idx, 1);
+  }
+};
+
 const resetForm = () => {
   subject.value = "";
   description.value = "";
   scheduleTime.value = "08:00";
   pickerDates.value = [];
   selectedAreas.value = [];
+  fetchedAreaUnits.value = {};
+  openAreas.value = [];
 };
 
 const setFormFromTask = (task: any) => {
@@ -310,7 +455,8 @@ const setFormFromTask = (task: any) => {
 
 const { data: getAreasReq, pending: loadingAreas } = await useLazyAsyncData(
   `get-areas-${props.site}`,
-  () => getAreas({ site: props.site, limit: 1000, serviceType: props.serviceType }),
+  () =>
+    getAreas({ site: props.site, limit: 1000, serviceType: props.serviceType }),
   {
     watch: [show, () => props.site],
     immediate: false,
@@ -377,7 +523,11 @@ const submitTask = async () => {
         (props.taskData as any)?._id || (props.taskData as any)?.id;
       response = await updateScheduleTask(taskId, payload);
     } else {
-      response = await createScheduleTask({ ...payload, site: props.site, serviceType: props.serviceType });
+      response = await createScheduleTask({
+        ...payload,
+        site: props.site,
+        serviceType: props.serviceType,
+      });
     }
 
     showMessage(

package/components/ScheduleTaskMain.vue

@@ -205,12 +205,14 @@
           <v-toolbar>
             <v-row no-gutters class="fill-height px-6" align="center">
               <span class="font-weight-bold text-h6 text-capitalize">
-                Delete {{ selectedTask?.title || 'Schedule Task' }}
+                Delete {{ selectedTask?.title || "Schedule Task" }}
               </span>
             </v-row>
           </v-toolbar>
           <v-card-text>
-            <span class="text-subtitle-2">Are you sure you want to delete this schedule task?</span>
+            <span class="text-subtitle-2"
+              >Are you sure you want to delete this schedule task?</span
+            >
           </v-card-text>
 
           <v-toolbar class="pa-0" density="compact">
@@ -257,6 +259,7 @@
 
 <script lang="ts" setup>
 import useScheduleTask from "../composables/useScheduleTask";
+import useUtils from "../composables/useUtils";
 
 const props = defineProps({
   orgId: { type: String, required: true },
@@ -271,13 +274,16 @@ const props = defineProps({
 });
 
 const { formatDate, debounce } = useUtils();
-const { getScheduleTasks, getScheduleTaskById, deleteScheduleTask } = useScheduleTask();
+const { getScheduleTasks, getScheduleTaskById, deleteScheduleTask } =
+  useScheduleTask();
 
 const canViewScheduleTasks = computed(() => props.canViewScheduleTasks);
 const canCreateScheduleTask = computed(() => props.canCreateScheduleTask);
 const canUpdateScheduleTask = computed(() => props.canUpdateScheduleTask);
 const canDeleteScheduleTask = computed(() => props.canDeleteScheduleTask);
-const canViewScheduleTaskDetails = computed(() => props.canViewScheduleTaskDetails);
+const canViewScheduleTaskDetails = computed(
+  () => props.canViewScheduleTaskDetails
+);
 
 const page = ref(1);
 const pages = ref(0);

package/components/VehicleForm.vue

@@ -35,34 +35,32 @@
           <v-col v-if="shouldShowField('block')" cols="12">
             <InputLabel class="text-capitalize" title="Block" required />
             <v-select v-model="vehicle.block" :items="blocksArray" item-value="value" item-title="title"
-              @update:model-value="handleChangeBlock" density="comfortable" :rules="[requiredRule]"
-               />
+              @update:model-value="handleChangeBlock" density="comfortable" :rules="[requiredRule]" />
           </v-col>
 
           <v-col v-if="shouldShowField('level')" cols="12">
             <InputLabel class="text-capitalize" title="Level" required />
-            <v-select v-model="vehicle.level" :items="levelsArray" density="comfortable"
-              :disabled="!vehicle.block" @update:model-value="handleChangeLevel"
-              :rules="[requiredRule]" />
+            <v-select v-model="vehicle.level" :items="levelsArray" density="comfortable" :disabled="!vehicle.block"
+              @update:model-value="handleChangeLevel" :rules="[requiredRule]" />
           </v-col>
 
           <v-col v-if="shouldShowField('unit')" cols="12">
             <InputLabel class="text-capitalize" title="Unit" required />
-            <v-select v-model="vehicle.unit" :items="unitsArray" density="comfortable"
-              :disabled="!vehicle.level" :rules="[requiredRule]" />
+            <v-select v-model="vehicle.unit" :items="unitsArray" density="comfortable" :disabled="!vehicle.level"
+              :rules="[requiredRule]" />
           </v-col>
 
           <v-col v-if="shouldShowField('nric')" cols="12">
             <InputLabel class="text-capitalize" title="NRIC" required />
-            <InputNRICNumber v-model="vehicle.nric" density="comfortable" :rules="[requiredRule]" :disabled="disablePrefilledInputs && type !== 'blocklist'" />
+            <InputNRICNumber v-model="vehicle.nric" density="comfortable" :rules="[requiredRule]"
+              :disabled="disablePrefilledInputs && type !== 'blocklist'" />
           </v-col>
 
           <v-col v-if="shouldShowField('name')" cols="12">
             <v-row>
               <v-col cols="12">
                 <InputLabel class="text-capitalize" title="Full Name" required />
-                <v-text-field v-model.trim="vehicle.name" density="comfortable" :rules="[requiredRule]"
-                  />
+                <v-text-field v-model.trim="vehicle.name" density="comfortable" :rules="[requiredRule]" />
               </v-col>
             </v-row>
           </v-col>
@@ -75,42 +73,49 @@
           </v-col>
 
           <v-col v-if="shouldShowField('plateNumber')" cols="12">
-            
-            <!-- <v-text-field v-model="vehicle.plateNumber" density="comfortable" :rules="[requiredRule]" /> -->
-            <template v-for="plate in vehicle.plates" :key="plate.plateNumber">
-              <InputLabel class="text-capitalize" title="Existing Vehicle Numbers" required />
-              <v-text-field v-model="plate.plateNumber" density="comfortable" :rules="[requiredRule]" class="mb-2"
-                readonly disabled>
-                <template #append-inner>
-                  <v-chip size="small" class="ma-0" :color="formatVehicleStatus(plate?.status)?.color as string">{{
-                    formatVehicleStatus(plate?.status)?.label }}</v-chip>
-                </template>
-              </v-text-field>
-            </template>
 
-            <InputLabel class="text-capitalize" title="New Vehicle Numbers" required />
-            <template v-for="(plate, index) in newPlateNumbers" :key="index">
-              <v-row class="" :class="`${index === newPlateNumbers.length - 1 ? 'mb-1' : 'mb-5'}`" no-gutters>
-                <v-col :cols="newPlateNumbers.length > 1 ? '11' : '12'">
-                  <InputVehicleNumber v-model="newPlateNumbers[index]" density="comfortable"
-                    placeholder="New Vehicle Number" :rules="[requiredRule]"  />
-                </v-col>
+            <template v-if="prop.mode === 'add'">
+              <!-- <v-text-field v-model="vehicle.plateNumber" density="comfortable" :rules="[requiredRule]" /> -->
+              <template v-for="plate in vehicle.plates" :key="plate.plateNumber">
+                <InputLabel class="text-capitalize" title="Existing Vehicle Numbers" required />
+                <v-text-field v-model="plate.plateNumber" density="comfortable" :rules="[requiredRule]"
+                  class="mb-2 class-readonly" readonly>
+                  <template #append-inner>
+                    <v-chip size="small" class="ma-0" :color="formatVehicleStatus(plate?.status)?.color as string">{{
+                      formatVehicleStatus(plate?.status)?.label }}</v-chip>
+                  </template>
+                </v-text-field>
+              </template>
 
-                <v-col :cols="newPlateNumbers.length > 1 ? '1' : '0'" class="d-flex align-start">
-                  <v-btn icon="mdi-delete-outline" variant="text" color="error" v-if="newPlateNumbers.length > 1"
-                    @click="removePlate(index)" />
-                </v-col>
-              </v-row>
+              <InputLabel class="text-capitalize" title="New Vehicle Numbers" required />
+              <template v-for="(plate, index) in newPlateNumbers" :key="index">
+                <v-row class="" :class="`${index === newPlateNumbers.length - 1 ? 'mb-1' : 'mb-5'}`" no-gutters>
+                  <v-col :cols="newPlateNumbers.length > 1 ? '11' : '12'">
+                    <InputVehicleNumber v-model="newPlateNumbers[index]" density="comfortable"
+                      placeholder="New Vehicle Number" :rules="[requiredRule]" />
+                  </v-col>
+
+                  <v-col :cols="newPlateNumbers.length > 1 ? '1' : '0'" class="d-flex align-start">
+                    <v-btn icon="mdi-delete-outline" variant="text" color="error" v-if="newPlateNumbers.length > 1"
+                      @click="removePlate(index)" />
+                  </v-col>
+                </v-row>
+
+                <v-btn prepend-icon="mdi-plus" variant="outlined" class="text-none" @click="addPlate">
+                  Add Plate
+                </v-btn>
+              </template>
             </template>
 
-            <v-btn prepend-icon="mdi-plus" variant="outlined" class="text-none" @click="addPlate">
-              Add Plate
-            </v-btn>
+            <template v-else-if="prop.mode === 'edit'">
+              <InputLabel class="text-capitalize" title="Vehicle Number" required />
+              <InputVehicleNumber v-model="vehicle.plateNumber" density="comfortable" :rules="[requiredRule]" />
+            </template>
           </v-col>
 
           <v-col v-if="shouldShowField('remarks')" cols="12">
-            <InputLabel class="text-capitalize" title="Remarks" required />
-            <v-textarea v-model="vehicle.remarks" density="comfortable" :rows="3" no-resize :rules="[requiredRule]" />
+            <InputLabel class="text-capitalize" title="Remarks" />
+            <v-textarea v-model="vehicle.remarks" density="comfortable" :rows="3" no-resize />
           </v-col>
 
           <v-col v-if="shouldShowField('start')" cols="12">
@@ -192,8 +197,7 @@
                 Matching Records for "{{ searchUnitName ?? "-" }}"
               </span>
               <span>
-                <v-btn icon="mdi-close" variant="text"
-                  @click="handleCloseMatchDialog" />
+                <v-btn icon="mdi-close" variant="text" @click="handleCloseMatchDialog" />
               </span>
             </v-row>
           </v-toolbar-title>
@@ -209,7 +213,7 @@
               </v-list-item-title>
 
               <v-list-item-subtitle>
-               NRIC: {{ v.nric || "-" }}
+                NRIC: {{ v.nric || "-" }}
               </v-list-item-subtitle>
 
               <div class="mt-1">
@@ -262,6 +266,10 @@ const prop = defineProps({
   vehicleData: {
     type: Object as PropType<Partial<TVehicle> | null>,
     default: null
+  },
+  plateNumberId: {
+    type: String,
+    default: ''
   }
 });
 
@@ -291,6 +299,7 @@ const vehicle = reactive<Omit<ExceptPartial<TVehicle>, 'type'> & { type: TVehicl
   org: prop.org,
   _id: '',
   peopleId: '',
+  plateNumber: "",
 });
 
 const newPlateNumbers = ref<string[]>(['']);
@@ -520,7 +529,6 @@ async function submit() {
     const { plateNumber, type, category, name, phoneNumber, block, level, unit, nric, remarks, seasonPassType, start, end, site, org, peopleId } = vehicle
 
     let payload: Partial<TVehiclePayload> = {
-      plateNumber: newPlateNumbers.value,
       name,
       phoneNumber,
       type: type === 'seasonpass' ? 'whitelist' : type, // season pass will be created as whitelist type in backend with additional seasonPassType field,
@@ -533,7 +541,16 @@ async function submit() {
         ...payload,
         category,
         site,
-        org
+        org,
+        plateNumber: newPlateNumbers.value
+      }
+    }
+
+    if (prop.mode === 'edit' && prop.plateNumberId) {
+      payload = {
+        ...payload,
+        site: prop.site,
+        plateNumber
       }
     }
 
@@ -564,8 +581,8 @@ async function submit() {
     if (prop.mode === 'add') {
       await addVehicle(payload);
     } else if (prop.mode === 'edit') {
-      const vehicleId = vehicle?._id as string;
-      await updateVehicle(vehicleId, payload);
+      const plateNumberId = prop.plateNumberId as string;
+      await updateVehicle(plateNumberId, payload);
     }
     emit("done");
 
@@ -692,14 +709,14 @@ function selectPeopleRecord(record: TPeople) {
 
 
 async function checkPeopleById() {
-  if (!vehicle.unit) return;
+  if (!vehicle.unit || prop.mode === 'edit') return;
 
   checkingUnit.value = true;
   showMatchingPeopleDialog.value = true;
   // Lock editable fields while we verify if this NRIC has existing records.
   disablePrefilledInputs.value = true;
   try {
-    const res = await getPeopleByUnit(vehicle.unit, { status: 'active', type: 'resident,tenant' }) as TPeople[]| null;
+    const res = await getPeopleByUnit(vehicle.unit, { status: 'active', type: 'resident,tenant' }) as TPeople[] | null;
 
     if (Array.isArray(res) && res.length > 0) {
       matchingPeople.value = res || []
@@ -745,12 +762,24 @@ const resetVehicleDetails = () => {
 
 function handleCloseMatchDialog() {
   showMatchingPeopleDialog.value = false;
-  if(matchingPeople.value.length > 0) {
+  if (matchingPeople.value.length > 0) {
     vehicle.unit = null
   }
 }
 
-
+onMounted(() => {
+  setTimeout(() => {
+    console.log("VehicleForm mounted with props:", prop);
+    if (prop.mode === 'edit' && prop.vehicleData) {
+      // In edit mode, we only want to check for matching people records if there is a pre-filled unit value. If there is no unit value, we can assume that this vehicle record is not linked to any existing people record and skip the check.
+      vehicle.seasonPassType = prop.vehicleData.seasonPassType || '';
+      vehicle.end = prop.vehicleData.end || '';
+      vehicle.start = prop.vehicleData.start || '';
+      vehicle.plateNumber = prop.vehicleData.plates?.find((p) => p._id === prop.plateNumberId)?.plateNumber || '';
+      vehicle.peopleId = prop.vehicleData.peopleId || '';
+    }
+  }, 300);
+})
 
 
 </script>
@@ -758,4 +787,8 @@ function handleCloseMatchDialog() {
 .button-outline-class {
   border: 1px solid rgba(var(--v-theme-primary));
 }
+
+.class-readonly {
+  pointer-events: none;
+}
 </style>