@7365admin1/layer-common 1.11.1 → 1.11.4

package/components/ManageChecklistMain.vue

@@ -117,20 +117,45 @@
             </v-col>
           </v-row>
         </template>
+        <template #group-header-chips> </template>
         <template #group-header-append="{ group }">
-          <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-row no-gutters align="center" class="ga-2">
+            <v-col v-if="isGroupAnyApproved(group)" cols="auto">
+              <v-chip
+                size="x-small"
+                :color="isGroupComplete(group) ? 'success' : 'warning'"
+                variant="tonal"
+                :prepend-icon="
+                  isGroupComplete(group)
+                    ? 'mdi-check-circle-outline'
+                    : 'mdi-progress-clock'
+                "
+                class="text-none"
+              >
+                {{ isGroupComplete(group) ? "Completed" : "Ongoing" }}
+                <template v-if="getGroupCompletedByName(group)">
+                  · {{ getGroupCompletedByName(group) }}
+                </template>
+              </v-chip>
+            </v-col>
+            <v-col
+              v-if="group.attachments && group.attachments.length > 0"
+              cols="auto"
+            >
+              <v-btn
+                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>
         </template>
       </TableHygiene>
     </v-col>
@@ -328,6 +353,36 @@ function getKey(item: any, set?: number): string {
   return `${item.unit}_${set ?? ""}`;
 }
 
+function isGroupComplete(group: { set: number; items: any[] }): boolean {
+  return (
+    group.items.length > 0 &&
+    group.items.every(
+      (item: any) =>
+        item.approve === true ||
+        activeActions[getKey(item, group.set)] === "approve"
+    )
+  );
+}
+
+function isGroupAnyApproved(group: { set: number; items: any[] }): boolean {
+  return group.items.some(
+    (item: any) =>
+      item.approve === true ||
+      activeActions[getKey(item, group.set)] === "approve"
+  );
+}
+
+function getGroupCompletedByName(group: {
+  completedByName: string | null;
+  items: any[];
+}): string | null {
+  return (
+    group.completedByName ??
+    group.items.find((item: any) => item.completedByName)?.completedByName ??
+    null
+  );
+}
+
 function isSetFullyApproved(setNumber: number): boolean {
   const group = items.value.find((g: any) => g.set === setNumber);
   if (!group) return false;

package/components/OvernightParkingAvailability.vue

@@ -0,0 +1,267 @@
+<template>
+  <v-form v-model="isInternalFormValid" ref="internalFormRef" :readonly="viewMode">
+    <v-row no-gutters>
+      <v-col cols="12">
+        <v-row no-gutters class="d-flex align-center ga-2 justify-space-between">
+          <InputLabel class="text-capitalize" title="Overnight Parking Approval Hours" />
+          <span class="d-flex ga-2 align-center">
+            <p>Auto Approve Parking?</p>
+            <v-switch v-model="autoApproveOvernightParking" hide-details color="success" size="large" />
+          </span>
+        </v-row>
+        <v-card class="mt-2">
+          <v-card-text>
+            <template v-for="(slot, index) in overnightParkingSlotsArray" :key="slot.day">
+              <v-row no-gutters class="mb-4">
+                <v-col cols="12" class="text-capitalize mb-2 text-subtitle-1 d-flex align-center justify-space-between">
+                  <span class="font-weight-black">{{ slot.day }}</span>
+                  <v-icon :icon="slot?.isEnabled ? 'mdi-check-circle' : 'mdi-check-circle-outline'" size="20"
+                    :class="{ 'cursor-pointer': !viewMode }"
+                    :color="slot.isEnabled ? 'green-darken-2' : 'black-lighten-1'"
+                    @click="!viewMode && toggleEnabled(slot.day)" />
+                </v-col>
+
+                <v-col cols="6" class="pr-2">
+                  <InputLabel title="Start" :required="slot.isEnabled" />
+                  <v-select v-model="slot.startTime" :disabled="!slot.isEnabled" :items="allTimeSlots" item-value="time"
+                    item-title="time" density="comfortable" :rules="slot.isEnabled ? [requiredRule] : []"
+                    @update:model-value="slot.endTime = null" />
+                </v-col>
+
+                <v-col cols="6" class="pl-2">
+                  <InputLabel title="End" :required="slot.isEnabled" />
+                  <v-select v-model="slot.endTime" :disabled="!slot.isEnabled"
+                    :items="generateTimeSlots(0.5, slot.startTime ?? undefined)" item-value="time" item-title="time"
+                    density="comfortable" :rules="slot.isEnabled ? [requiredRule] : []" />
+                </v-col>
+
+                <v-col v-if="!viewMode" cols="12" class="mt-1">
+                  <div class="d-flex align-center ga-1 cursor-pointer text-caption text-medium-emphasis"
+                    @click="applyToOtherDays(slot.day)">
+                    <v-icon icon="mdi-content-copy" size="14" />
+                    <span>Apply to other days</span>
+                  </div>
+                </v-col>
+              </v-row>
+
+              <v-divider v-if="index < overnightParkingSlotsArray.length - 1" class="mb-4" />
+            </template>
+
+            <v-col cols="12" align="end">
+              <v-btn color="primary" class="text-none mt-2" size="large" :loading="loading.updating" variant="flat"
+                text="Save" :disabled="viewMode || !isValid" @click="handleSave('save')" />
+            </v-col>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-form>
+
+  <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" style="z-index: 3000;" />
+
+  <v-dialog v-model="applyDialog.open" max-width="360" persistent>
+    <v-card>
+      <v-card-title class="text-subtitle-1 font-weight-bold pt-4 px-4">Apply to days</v-card-title>
+      <v-card-text class="px-4 pb-2">
+        <p class="text-caption text-medium-emphasis mb-3">
+          Select the days to apply <span class="font-weight-bold text-capitalize">{{ applyDialog.sourceDay }}</span>'s
+          hours to.
+        </p>
+        <v-checkbox v-for="day in applyDialog.targetDays" :key="day.day" v-model="day.selected" :label="day.day"
+          density="compact" hide-details class="text-capitalize" />
+      </v-card-text>
+      <v-card-actions class="px-4 pb-4">
+        <v-spacer />
+        <v-btn variant="text" @click="applyDialog.open = false">Cancel</v-btn>
+        <v-btn color="primary" variant="flat" :disabled="!applyDialog.targetDays.some(d => d.selected)"
+          @click="confirmApply">Apply</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  viewMode: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
+  site: {
+    type: String,
+    default: "",
+    required: false,
+  }
+})
+
+
+const model = ref<TOvernightParkingAvailability>({
+  monday: { isEnabled: false, startTime: null, endTime: null },
+  tuesday: { isEnabled: false, startTime: null, endTime: null },
+  wednesday: { isEnabled: false, startTime: null, endTime: null },
+  thursday: { isEnabled: false, startTime: null, endTime: null },
+  friday: { isEnabled: false, startTime: null, endTime: null },
+  saturday: { isEnabled: false, startTime: null, endTime: null },
+  sunday: { isEnabled: false, startTime: null, endTime: null },
+})
+
+
+const autoApproveOvernightParking = ref(false)
+
+const { requiredRule } = useUtils()
+const { generateTimeSlots, generateTimeSlotsFromStart } = useFacilityUtils()
+const { updateOvernightParkingAvailability, getOvernightParkingAvailability } = useSiteSettings()
+
+type TDay = Exclude<keyof TOvernightParkingAvailability, 'autoApproveOvernightParking'>
+type TOvernightParkingSlot = TOvernightParkingDay & { day: TDay }
+
+const orderedDays: TDay[] = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday']
+
+const allTimeSlots = computed(() => generateTimeSlotsFromStart(0.5))
+
+const isInternalFormValid = ref(false)
+const internalFormRef = ref<InstanceType<typeof import('vuetify/components').VForm>>()
+
+const messageSnackbar = ref(false)
+const message = ref('')
+const messageColor = ref<'success' | 'error'>()
+
+const loading = reactive({
+  updating: false
+})
+
+const applyDialog = reactive({
+  open: false,
+  sourceDay: '' as TDay,
+  targetDays: [] as { day: TDay; selected: boolean }[],
+})
+
+
+
+const { data: availabilityDataReq, refresh: refreshAvailability } = await useLazyAsyncData<TOvernightParkingAvailability>(
+  `overnight-parking-availability-${props.site}`,
+  () => getOvernightParkingAvailability(props.site)
+)
+
+watch(availabilityDataReq, (data) => {
+  if (!data) return
+  orderedDays.forEach((day) => {
+    const slot = overnightParkingSlotsArray.value.find((s) => s.day === day)
+    if (!slot) return
+    slot.isEnabled = data?.[day]?.isEnabled ?? false
+    slot.startTime = data?.[day]?.startTime ?? null
+    slot.endTime = data?.[day]?.endTime ?? null
+  })
+
+  autoApproveOvernightParking.value = data?.autoApproveOvernightParking === true
+}, { immediate: true })
+
+
+const overnightParkingSlotsArray = ref<TOvernightParkingSlot[]>(
+  orderedDays.map((day) => ({
+    day,
+    isEnabled: model.value?.[day]?.isEnabled ?? false,
+    startTime: model.value?.[day]?.startTime ?? null,
+    endTime: model.value?.[day]?.endTime ?? null,
+  }))
+)
+
+watch(overnightParkingSlotsArray, (slots) => {
+  const updated = {} as TOvernightParkingAvailability
+  slots.forEach((slot) => {
+    updated[slot.day] = {
+      isEnabled: slot.isEnabled,
+      startTime: slot.startTime,
+      endTime: slot.endTime,
+    }
+  })
+  model.value = updated
+}, { deep: true })
+
+function toggleEnabled(day: TDay) {
+  const slot = overnightParkingSlotsArray.value.find((s) => s.day === day)
+  if (!slot) return
+  internalFormRef.value?.resetValidation()
+  slot.isEnabled = !slot.isEnabled
+}
+
+function applyToOtherDays(sourceDay: TDay) {
+  applyDialog.sourceDay = sourceDay
+  applyDialog.targetDays = orderedDays
+    .filter((d) => d !== sourceDay)
+    .map((d) => ({ day: d, selected: false }))
+  applyDialog.open = true
+}
+
+function confirmApply() {
+  const source = overnightParkingSlotsArray.value.find((s) => s.day === applyDialog.sourceDay)
+  if (!source) return
+  const selectedDays = applyDialog.targetDays.filter((d) => d.selected).map((d) => d.day)
+  overnightParkingSlotsArray.value.forEach((slot) => {
+    if (selectedDays.includes(slot.day)) {
+      slot.startTime = source.startTime
+      slot.endTime = source.endTime
+      slot.isEnabled = source.isEnabled
+    }
+  })
+  applyDialog.open = false
+  message.value = `Applied ${applyDialog.sourceDay}'s hours to ${selectedDays.join(', ')}.`
+  messageColor.value = 'success'
+  messageSnackbar.value = true
+}
+
+const isValid = computed(() => {
+  const slots = overnightParkingSlotsArray.value
+  const enabledSlots = slots.filter((s) => s.isEnabled)
+  const isAllSlotsValid = slots.every((s) => {
+    if (!s.isEnabled) return true
+    return !!s.startTime?.trim() && !!s.endTime?.trim()
+  })
+  return isAllSlotsValid && enabledSlots.length > 0
+})
+
+watch(autoApproveOvernightParking, (newValue, oldValue) => {
+  if (oldValue === newValue) return
+  handleSave('toggle')  
+})
+
+
+function handleSave(action: 'toggle' | 'save') {
+  if (!isValid.value && action === 'save') {
+    message.value = 'Please fill in all required fields.'
+    messageColor.value = 'error'
+    messageSnackbar.value = true
+    return
+  }
+
+  let payload = {}
+
+  if(action === 'save') {
+    payload = {
+      ...model.value
+    }
+  } else if (action === 'toggle') {
+    payload = {
+      autoApproveOvernightParking: autoApproveOvernightParking.value,
+    }
+  }
+
+  try {
+    loading.updating = true
+    updateOvernightParkingAvailability(props.site, payload)
+    message.value = 'Overnight parking settings updated successfully.'
+    messageColor.value = 'success'
+    messageSnackbar.value = true
+  } catch (error) {
+    message.value = 'Failed to update overnight parking settings. Please try again.'
+    messageColor.value = 'error'
+    messageSnackbar.value = true
+  } finally {
+    loading.updating = false
+  }
+
+}
+
+</script>
+
+<style scoped></style>

package/components/OvernightParkingManagement.vue

@@ -0,0 +1,130 @@
+<template>
+  <v-row no-gutters>
+    <TableMain
+      :headers="headers"
+      :items="items"
+      :loading="loading"
+      :page="page"
+      :pages="pages"
+      :pageRange="pageRange"
+      :createLabel="createLabel"
+      :show-header="true"
+      :extension-height="extensionHeight"
+      :offset="offset"
+      v-model:search="searchInput"
+      @refresh="emits('refresh')"
+      @create="emits('create')"
+      @row-click="handleRowClick"
+      @update:page="handleUpdatePage"
+    >
+
+      <template #item.dateRequested="{ value }">
+        {{ formatDateDDMMYYYYLocal(value) }}
+      </template>
+
+      <template #item.status="{ value }">
+        <v-chip
+          class="text-capitalize"
+          :color="formatStatus(value).color"
+          variant="flat"
+          pill
+        >
+          {{ formatStatus(value).label }}
+        </v-chip>
+      </template>
+
+      <template #item.start="{ value }">
+        {{ formatTimeValue(value) }}
+      </template>
+
+      <template #item.end="{ value }">
+        {{ formatTimeValue(value) }}
+      </template>
+
+      <template #item.action="{ item }">
+        <v-btn v-if="item.status === 'pending'" color="success" density="compact">Approve</v-btn>
+      </template>
+
+      <template v-if="$slots.footer" #footer>
+        <slot name="footer" />
+      </template>
+    </TableMain>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import useUtils from "../composables/useUtils";
+
+const props = defineProps({
+  site: {
+    type: String,
+    default: "",
+    required: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+
+
+});
+
+const emits = defineEmits(["refresh", "create", "row-click", "update:page"]);
+
+const searchInput = defineModel<string>("search", { default: "" });
+
+const { standardFormatDate, formatDateDDMMYYYYLocal } = useUtils();
+
+const items = ref<TOvernightParkingRequest[]>([])
+const page = ref(1)
+const pages = ref(1)
+const pageRange = ref("-- - -- of --");
+const extensionHeight = ref(0)
+const offset = ref(0)
+const createLabel = "New Overnight Parking Request"
+
+const headers = [
+  { title: "Name", value: "name" },
+  { title: "Plate Number", value: "plateNumber" },
+  { title: "Date Requested", value: "dateTime" },
+  { title: "Invited By", value: "invitedBy" },
+  { title: "Status", value: "status" },
+  { title: "Action", value: "action" },
+];
+
+function formatStatus(status: TOvernightParkingRequest["status"]) {
+  switch (String(status || "").toLowerCase()) {
+    case "approved":
+      return { color: "success", label: "Approved" };
+    case "expired":
+      return { color: "grey", label: "Expired" };
+    case "rejected":
+      return { color: "error", label: "Rejected" };
+    case "pending":
+      return { color: "warning", label: "Pending" };
+    default:
+      return { color: "secondary", label: status || "N/A" };
+  }
+}
+
+
+function formatTimeValue(value: TOvernightParkingRequest["start"] | TOvernightParkingRequest["end"]) {
+  if (!value) return "N/A";
+
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return String(value);
+
+  return date.toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+function handleRowClick(data: { item?: TOvernightParkingRequest }) {
+  emits("row-click", data);
+}
+
+function handleUpdatePage(value: number) {
+  emits("update:page", value);
+}
+</script>

package/components/Signature.vue

@@ -1,11 +1,12 @@
 <template>
-  <v-dialog max-width="700" v-model="isDialogVisible" persistent>
+  <v-dialog v-model="dialogModel" max-width="700" persistent>
     <v-card>
       <v-toolbar>
-        <v-toolbar-title>Signature </v-toolbar-title>
+        <v-toolbar-title>Signature</v-toolbar-title>
         <v-spacer />
-        <v-btn icon="mdi-close" @click="hideModal"></v-btn>
+        <v-btn icon="mdi-close" @click="hideModal" />
       </v-toolbar>
+
       <v-card-text>
         <v-row no-gutters>
           <v-col cols="12">
@@ -16,8 +17,8 @@
             <NuxtSignaturePad
               ref="signature"
               :options="state.option"
-              :width="'100%'"
-              :height="'400px'"
+              width="100%"
+              height="400px"
               :disabled="state.disabled"
               class="border"
             />
@@ -29,10 +30,9 @@
                 <v-btn
                   text="clear"
                   color="warning"
-                  type="submit"
                   class="my-4 w-100 rounded-lg"
                   height="40px"
-                  @click="clear()"
+                  @click="clear"
                 />
               </v-col>
 
@@ -40,12 +40,11 @@
                 <v-btn
                   text="submit"
                   color="#1867C0"
-                  type="submit"
                   class="my-4 w-100 rounded-lg"
                   height="40px"
                   :loading="loading"
-                  @click="submit"
                   :disabled="loading"
+                  @click="submit"
                 />
               </v-col>
             </v-row>
@@ -58,8 +57,6 @@
 
 <script setup lang="ts">
 const loading = ref(false);
-// const { isValid } = useAudit();
-// const { uiRequiredInput, uiSetSnackbar } = useUtils();
 
 const message = ref("");
 const messageColor = ref("");
@@ -71,7 +68,8 @@ function showMessage(msg: string, color: string) {
   messageSnackbar.value = true;
 }
 
-const signature = ref(null);
+const signature = ref<any>(null);
+
 const state = ref({
   count: 0,
   option: {
@@ -85,40 +83,50 @@ const emit = defineEmits<{
   (event: "onSubmit", payload: string): void;
   (event: "onCloseDialog"): void;
 }>();
-let props = defineProps({
+
+const props = defineProps({
   isShowDialog: {
     type: Boolean,
     default: false,
   },
 });
 
-const isDialogVisible = computed(() => props.isShowDialog);
+const dialogModel = computed({
+  get: () => props.isShowDialog,
+  set: (value: boolean) => {
+    if (!value) emit("onCloseDialog");
+  },
+});
 
 const hideModal = () => {
   emit("onCloseDialog");
 };
+
 const file = ref<File | null>(null);
 const { addFile } = useFile();
+
 const submit = async () => {
   try {
+    if (!signature.value) {
+      showMessage("Signature pad is not ready.", "error");
+      return;
+    }
+
     loading.value = true;
-    const base64 = signature.value.saveSignature();
-    const blob = await (await fetch(base64)).blob();
 
-    file.value = new File([blob], "signature.jpg", { type: "image/jpeg" });
+    const base64 = signature.value.saveSignature?.();
+    if (!base64) {
+      showMessage("Please provide a signature first.", "warning");
+      return;
+    }
 
-    const uploadItem = {
-      data: file.value,
-      name: file.value.name,
-      url: URL.createObjectURL(file.value),
-      progress: 0,
-      type: file.value.type,
-    };
+    const blob = await (await fetch(base64)).blob();
+    file.value = new File([blob], "signature.jpg", { type: "image/jpeg" });
 
-    const response = await addFile(uploadItem.data);
+    const response = await addFile(file.value);
 
-    if (response && response.length > 0) {
-      emit("onSubmit", response[0]._id);
+    if (response && response.id) {
+      emit("onSubmit", response.id);
     }
   } catch (error) {
     showMessage("Error uploading signature. Please try again.", "error");
@@ -128,6 +136,6 @@ const submit = async () => {
 };
 
 const clear = () => {
-  signature.value.clearCanvas();
+  signature.value?.clearCanvas?.();
 };
 </script>

package/components/UnitMain.vue

@@ -211,10 +211,12 @@
 <script setup lang="ts">
 import { useUnitPermission } from "../composables/useUnitPermission";
 import useUnits from "../composables/useUnits";
+import useUtils from "../composables/useUtils";
 
 const props = defineProps({
   orgId: { type: String, default: "" },
   site: { type: String, default: "" },
+  serviceType: { type: String, default: "", required: true },
 });
 
 const items = ref<Array<Record<string, any>>>([]);
@@ -252,6 +254,7 @@ const {
       page: page.value,
       search: searchInput.value,
       site: props.site,
+      serviceType: props.serviceType,
     }),
   {
     watch: [page, () => props.site],
@@ -389,7 +392,7 @@ async function _createUnit(name: string) {
       if (!id) throw new Error("Invalid unit id for update");
       response = await updateUnit(id, name);
     } else {
-      response = await createUnit(name, props.site);
+      response = await createUnit(name, props.site, props.serviceType);
     }
     showMessage(response?.message, "success");
     dialogShowForm.value = false;

package/components/VehicleForm.vue

@@ -622,15 +622,16 @@ function validStartDateRule(value: string) {
   return true;
 }
 
-function validExpiryDateRule(value: string) {
+function validExpiryDateRule() {
   const startDateISO = vehicle.start;
+  const endDateISO = vehicle.end;
 
-  if (!value && startDateISO) {
+  if (!endDateISO && startDateISO) {
     return 'Expiry Date is required';
   }
 
-  if (value && startDateISO) {
-    const expiry = new Date(value);
+  if (endDateISO && startDateISO) {
+    const expiry = new Date(endDateISO);
     const start = new Date(startDateISO as string);
     return expiry > start || 'Expiry date must be later than start date';
   }