@7365admin1/layer-common 1.11.2 → 1.11.6

package/components/OvernightParkingAvailability.vue

@@ -0,0 +1,272 @@
+<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 isHydrating = ref(true)
+
+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
+   setTimeout(() => {
+      isHydrating.value = false
+    }, 500)
+  })
+
+  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 || isHydrating.value) return
+  handleSave('toggle')  
+}, { immediate: false })
+
+
+async 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
+    await updateOvernightParkingAvailability(props.site, payload)
+    message.value = 'Overnight parking settings updated successfully.'
+    messageColor.value = 'success'
+    messageSnackbar.value = true
+    refreshAvailability()
+  } 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,240 @@
+<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 #extension>
+        <v-row no-gutters class="w-100 d-flex align-center justify-end ga-4 pa-2">
+          <v-select v-model="statusFilter" label="Filter by types" item-title="label" item-value="value"
+            :items="filterOptions" density="compact" clearable max-width="200" hide-details>
+          </v-select>
+        </v-row>
+      </template>
+
+      <template v-slot:item.name="{ item }">
+        <span class="d-flex align-center ga-2">
+          <span>
+            <AvatarMain :name="item?.name" :size="20" :id="item?._id" />
+          </span>
+          <span class="text-capitalize">{{ item?.name }}</span>
+        </span>
+      </template>
+
+      <template v-slot:item.emailContact="{ item }">
+        <span class="d-flex align-center ga-2">
+          <v-icon icon="mdi-email" size="15" />
+          <span class="text-capitalize">{{ item?.email || "N/A" }}</span>
+        </span>
+        <span class="d-flex align-center ga-2">
+          <v-icon icon="mdi-phone" size="15" />
+          <span class="text-capitalize">{{ item?.contact || "N/A" }}</span>
+        </span>
+      </template>
+
+      <template #item.createdAt="{ value }">
+        {{ formatDateDDMMYYYYLocal(value) }}
+      </template>
+
+      <template #item.status="{ value }">
+        <v-chip class="text-capitalize" :color="formatStatus(value).color" density="compact" variant="flat" pill>
+          {{ formatStatus(value).label }}
+        </v-chip>
+      </template>
+
+      <template #item.action="{ item }">
+        <v-menu v-if="item?.status === 'pending'" activator="parent" transition="scale-transition">
+          <template #activator="{ props }">
+            <v-btn variant="flat" density="compact" icon="mdi-dots-vertical" v-bind="props"></v-btn>
+          </template>
+          <v-list>
+            <v-list-item @click="openActionDialog(item, 'approved')">
+              <v-list-item-title>
+                <v-icon class="text-success mr-2 text-subtitle-1">mdi-check</v-icon>Approve</v-list-item-title>
+            </v-list-item>
+            <v-list-item @click="openActionDialog(item, 'rejected')">
+              <v-list-item-title>
+                <v-icon class="text-error mr-2 text-subtitle-1">mdi-close</v-icon>Reject</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </template>
+
+      <template v-if="$slots.footer" #footer>
+        <slot name="footer" />
+      </template>
+    </TableMain>
+
+    <v-dialog v-model="actionDialog.open" max-width="520" persistent>
+      <v-card>
+        <v-card-title class="text-subtitle-1 font-weight-bold pt-4 px-4">
+          {{ actionDialog.action === 'approved' ? 'Approve Request' : 'Reject Request' }}
+        </v-card-title>
+        <v-card-text class="px-4 pb-2">
+          <p class="text-caption text-medium-emphasis mb-3">
+            Add remarks before {{ actionDialog.action === 'approved' ? 'approving' : 'rejecting' }} this request.
+          </p>
+          <v-textarea v-model="remarks" label="Remarks" rows="3" auto-grow :rules="[requiredRule]"
+            :disabled="actionLoading" />
+        </v-card-text>
+        <v-card-actions class="px-4 pb-4">
+          <v-spacer />
+          <v-btn variant="text" :disabled="actionLoading" @click="closeActionDialog">Cancel</v-btn>
+          <v-btn color="primary" variant="flat" :loading="actionLoading" :disabled="!remarks.trim()"
+            @click="confirmAction">
+            Confirm
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import useOvernightParking from "../composables/useOvernightParking";
+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 { requiredRule, standardFormatDate, formatDateDDMMYYYYLocal } = useUtils();
+const { getOvernightParkingRequests, updateOvernightParkingRequest } = useOvernightParking();
+
+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 remarks = ref('')
+const actionLoading = ref(false)
+const actionDialog = reactive<{
+  open: boolean
+  requestId: string
+  action: 'approved' | 'rejected'
+}>({
+  open: false,
+  requestId: '',
+  action: 'approved',
+})
+
+const statusFilter = ref<TOvernightParkingRequestStatus>("pending")
+
+const filterOptions: { label: string; value: TOvernightParkingRequestStatus }[] = [
+  { label: "Pending", value: "pending" },
+  { label: "Approved", value: "approved" },
+  { label: "Rejected", value: "rejected" },
+  { label: "Expired", value: "expired" },
+]
+
+const headers = [
+  { title: "Name", value: "name" },
+  { title: "Email/Contact", value: "emailContact" },
+  { title: "Date Requested", value: "createdAt" },
+  { 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" };
+  }
+}
+
+const { data: overnightParkingRequests, pending: isPendingOvernightParkingRequests, refresh: refreshOvernightParkingRequests } = await useLazyAsyncData<TOvernightParkingRequest[]>(() => getOvernightParkingRequests({ site: props.site, status: statusFilter.value }), { immediate: true })
+
+
+watch(overnightParkingRequests, (data: any) => {
+  // items.value = Array.isArray(data?.items)
+  //   ? data.items
+  //   : Array.isArray(data)
+  //     ? data
+  //     : []
+  pages.value = data?.pages ?? 0;
+  pageRange.value = data?.pageRange ?? "-- - -- of --"
+}, { immediate: true })
+
+
+// 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);
+}
+
+function openActionDialog(item: TOvernightParkingRequest, action: 'approved' | 'rejected') {
+  actionDialog.requestId = item?._id || ''
+  actionDialog.action = action
+  remarks.value = ''
+  actionDialog.open = true
+}
+
+function closeActionDialog() {
+  if (actionLoading.value) return
+  actionDialog.open = false
+}
+
+async function confirmAction() {
+  if (!actionDialog.requestId || !remarks.value.trim()) return
+
+  try {
+    actionLoading.value = true
+    await updateOvernightParkingRequest(actionDialog.requestId, {
+      status: actionDialog.action,
+      remarks: remarks.value.trim(),
+    })
+    actionDialog.open = false
+    await refreshOvernightParkingRequests()
+    refreshOvernightParkingRequests()
+  } finally {
+    actionLoading.value = false
+  }
+}
+
+watch([statusFilter], ([newStatus], [oldStatus]) => {
+  if (newStatus === oldStatus) return
+  refreshOvernightParkingRequests()
+}, { immediate: false })
+</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;