@7365admin1/layer-common 1.10.6 → 1.10.8

package/components/{CheckoutItemMain.vue → EquipmentItemMain.vue}

@@ -10,21 +10,21 @@
         v-model:page="page"
         :pages="pages"
         :pageRange="pageRange"
-        :no-data-text="`No supplies found for ${siteName}.`"
-        @refresh="getCheckoutItemsRefresh"
-        :canCreate="canCreateCheckout"
-        createLabel="Checkout Item"
+        :no-data-text="`No Equipment Items found for ${siteName}.`"
+        @refresh="getEquipmentItemsRefresh"
+        :canCreate="canCreateEquipmentItem"
+        createLabel="Equipment Item"
         @row-click="handleRowClick"
       >
         <template #actions>
           <v-row no-gutters align="center" class="w-100">
-            <v-col cols="auto" v-if="canCreateCheckout">
+            <v-col cols="auto" v-if="canCreateEquipmentItem">
               <v-btn
                 class="text-none"
                 rounded="pill"
                 variant="tonal"
                 size="large"
-                @click="openCheckoutDialog()"
+                @click="openEquipmentItemDialog()"
               >
                 Checkout Item
               </v-btn>
@@ -147,7 +147,7 @@
 
             <v-row no-gutters class="mb-2">
               <v-col cols="5" class="text-subtitle-2 font-weight-bold">
-                Checkout Quantity:
+                Equipment Quantity:
               </v-col>
               <v-col cols="7" class="text-subtitle-2">
                 {{ selectedSupply.qty || "N/A" }}
@@ -177,28 +177,28 @@
     </HygieneUpdateMoreAction>
   </v-dialog>
 
-  <!-- Main Checkout Dialog -->
-  <v-dialog v-model="dialogCheckoutItem" max-width="540" persistent>
+  <!-- Main Equipment Item Dialog -->
+  <v-dialog v-model="dialogEquipmentItem" max-width="540" persistent>
     <v-card>
       <v-card-title class="d-flex align-center pa-4">
-        <span class="text-h6 font-weight-bold">Checkout Item</span>
+        <span class="text-h6 font-weight-bold">Equipment Item</span>
         <v-spacer />
         <v-btn
           icon="mdi-close"
           variant="text"
           size="small"
-          @click="dialogCheckoutItem = false"
+          @click="dialogEquipmentItem = false"
         />
       </v-card-title>
 
       <v-divider />
 
       <v-card-text class="pa-6">
-        <v-form ref="checkoutItemFormRef">
-          <!-- Add Supply Section -->
+        <v-form ref="equipmentItemFormRef">
+          <!-- Add Equipment Section -->
           <v-row no-gutters class="mb-4">
             <v-col cols="12">
-              <InputLabel for="supply" title="Add Supply" class="mb-2" />
+              <InputLabel for="equipment" title="Add Equipment" class="mb-2" />
               <v-autocomplete
                 v-model="selectedSupplyForAdd"
                 :items="supplyItems"
@@ -207,14 +207,14 @@
                 item-value="value"
                 density="comfortable"
                 variant="outlined"
-                placeholder="Select supply"
+                placeholder="Select equipment"
                 @update:model-value="addSupplyToList"
               />
             </v-col>
           </v-row>
 
-          <!-- Selected Supplies List -->
-          <v-row no-gutters v-if="checkoutItems.length > 0" class="mb-4">
+          <!-- Selected Equipment List -->
+          <v-row no-gutters v-if="equipmentItems.length > 0" class="mb-4">
             <v-col cols="12">
               <v-divider class="mb-4" />
 
@@ -223,7 +223,7 @@
               </div>
 
               <v-sheet
-                v-for="(item, index) in checkoutItems"
+                v-for="(item, index) in equipmentItems"
                 :key="index"
                 rounded="lg"
                 variant="outlined"
@@ -234,7 +234,7 @@
                     <div class="text-body-2 font-weight-medium">
                       <span class="text-capitalize">{{ item.supplyName }}</span>
                       - (Available:
-                      <span class="font-weight-bold">{{ item.qty }}</span
+                      <span class="font-weight-bold">{{ item.stockQty }}</span
                       >)
                     </div>
                   </v-col>
@@ -283,7 +283,7 @@
                               >mdi-delete-outline</v-icon
                             >
                           </template>
-                          <v-list-item-title>Remove Supply</v-list-item-title>
+                          <v-list-item-title>Remove Equipment</v-list-item-title>
                         </v-list-item>
                       </v-list>
                     </v-menu>
@@ -342,7 +342,7 @@
               size="large"
               height="56"
               class="text-none font-weight-medium rounded-0"
-              @click="dialogCheckoutItem = false"
+              @click="dialogEquipmentItem = false"
             >
               Cancel
             </v-btn>
@@ -356,9 +356,9 @@
               height="56"
               class="text-none font-weight-bold rounded-0"
               :loading="submitting"
-              @click="_checkoutItem()"
+              @click="_equipmentItem()"
             >
-              Checkout Item
+              Equipment Item
             </v-btn>
           </v-col>
         </v-row>
@@ -374,7 +374,7 @@
         <div>
           <div class="text-h6 font-weight-bold">Item Photos</div>
           <div class="text-caption text-medium-emphasis">
-            {{ checkoutItems[activePhotoIndex ?? 0]?.supplyName || "Item" }}
+            {{ equipmentItems[activePhotoIndex ?? 0]?.supplyName || "Item" }}
           </div>
         </div>
 
@@ -438,16 +438,17 @@
 </template>
 
 <script setup lang="ts">
-import useCheckout from "../composables/useCheckout";
-import { useCheckoutPermission } from "../composables/useCheckoutPermission";
+import useEquipmentItem from "../composables/useEquipmentItem";
+import { useEquipmentItemPermission } from "../composables/useEquipmentItemPermission";
 import useSupply from "../composables/useSupply";
+import useUtils from "../composables/useUtils";
 
 const props = defineProps({
   orgId: { type: String, default: "" },
   site: { type: String, default: "" },
 });
 
-const { canCreateCheckout } = useCheckoutPermission();
+const { canCreateEquipmentItem } = useEquipmentItemPermission();
 
 const items = ref<Array<Record<string, any>>>([]);
 const siteName = ref<string>("");
@@ -462,10 +463,10 @@ const headers = [
 ];
 
 const {
-  getCheckoutItems,
-  getCheckoutItemById,
-  checkoutItems: checkoutItemApi,
-} = useCheckout();
+  getEquipmentItems,
+  getEquipmentItemById,
+  equipmentItems: equipmentItemApi,
+} = useEquipmentItem();
 const { debounce, requiredRule, formatDate } = useUtils();
 
 const searchInput = ref("");
@@ -475,16 +476,16 @@ const page = ref(1);
 const pages = ref(0);
 const pageRange = ref("-- - -- of --");
 
-const selectedCheckoutItemId = ref("");
+const selectedEquipmentItemId = ref("");
 
 const {
-  data: getCheckoutItemsReq,
-  refresh: getCheckoutItemsRefresh,
+  data: getEquipmentItemsReq,
+  refresh: getEquipmentItemsRefresh,
   pending: loading,
 } = await useLazyAsyncData(
-  "get-all-checkout-items",
+  "get-all-equipment-items",
   () =>
-    getCheckoutItems({
+    getEquipmentItems({
       page: page.value,
       search: searchInput.value,
       site: props.site,
@@ -495,14 +496,14 @@ const {
 );
 
 watchEffect(() => {
-  if (getCheckoutItemsReq.value) {
-    items.value = getCheckoutItemsReq.value.items;
-    pages.value = getCheckoutItemsReq.value.pages;
-    pageRange.value = getCheckoutItemsReq.value.pageRange;
+  if (getEquipmentItemsReq.value) {
+    items.value = getEquipmentItemsReq.value.items;
+    pages.value = getEquipmentItemsReq.value.pages;
+    pageRange.value = getEquipmentItemsReq.value.pageRange;
   }
 });
 
-const debounceSearch = debounce(getCheckoutItemsRefresh, 500);
+const debounceSearch = debounce(getEquipmentItemsRefresh, 500);
 watch(
   [searchInput, endDate, startDate],
   ([]) => {
@@ -511,35 +512,35 @@ watch(
   { immediate: false, deep: true }
 );
 
-const { data: getCheckoutItemByIdReq, refresh: getCheckoutItemByIdRefresh } =
-  await useLazyAsyncData(
-    "get-checkout-item-by-id",
-    () => getCheckoutItemById(selectedCheckoutItemId.value),
+const { data: getEquipmentItemByIdReq, refresh: getEquipmentItemByIdRefresh } =
+  await useLazyAsyncData<any>(
+    "get-equipment-item-by-id",
+    () => getEquipmentItemById(selectedEquipmentItemId.value),
     {
       immediate: false,
     }
   );
 
 watchEffect(() => {
-  if (getCheckoutItemByIdReq.value) {
+  if (getEquipmentItemByIdReq.value) {
     selectedSupply.value = {
-      _id: getCheckoutItemByIdReq.value._id,
-      supplyName: getCheckoutItemByIdReq.value.supplyName || "N/A",
-      qty: getCheckoutItemByIdReq.value.qty || 0,
+      _id: getEquipmentItemByIdReq.value._id,
+      supplyName: getEquipmentItemByIdReq.value.supplyName || "N/A",
+      qty: getEquipmentItemByIdReq.value.qty || 0,
       unitOfMeasurement:
-        getCheckoutItemByIdReq.value.supply?.unitOfMeasurement || "N/A",
-      status: getCheckoutItemByIdReq.value.status || "N/A",
-      site: getCheckoutItemByIdReq.value.site || "N/A",
+        getEquipmentItemByIdReq.value.supply?.unitOfMeasurement || "N/A",
+      status: getEquipmentItemByIdReq.value.status || "N/A",
+      site: getEquipmentItemByIdReq.value.site || "N/A",
       supply:
-        getCheckoutItemByIdReq.value.supply ||
-        getCheckoutItemByIdReq.value.supply?._id ||
+        getEquipmentItemByIdReq.value.supply ||
+        getEquipmentItemByIdReq.value.supply?._id ||
         "N/A",
-      attachment: Array.isArray(getCheckoutItemByIdReq.value.attachment)
-        ? [...getCheckoutItemByIdReq.value.attachment]
+      attachment: Array.isArray(getEquipmentItemByIdReq.value.attachment)
+        ? [...getEquipmentItemByIdReq.value.attachment]
         : [],
       stockQty:
-        getCheckoutItemByIdReq.value.stockQty ||
-        getCheckoutItemByIdReq.value.supply?.stockQty ||
+        getEquipmentItemByIdReq.value.stockQty ||
+        getEquipmentItemByIdReq.value.supply?.stockQty ||
         "N/A",
     };
   }
@@ -548,7 +549,7 @@ watchEffect(() => {
 const { getSupplies } = useSupply();
 
 const { data: getSuppliesReq } = await useLazyAsyncData(
-  "get-supplies-for-checkout-item",
+  "get-supplies-for-equipment-item",
   () =>
     getSupplies({
       site: props.site,
@@ -562,13 +563,14 @@ watchEffect(() => {
     supplyItems.value = getSuppliesReq.value.items.map((item: any) => ({
       name: item.name,
       value: item._id,
+      stockQty: item.qty ?? 0,
     }));
   }
 });
 
-const supplyItems = ref<Array<{ name: string; value: string }>>([]);
+const supplyItems = ref<Array<{ name: string; value: string; stockQty: number }>>([]);
 const selectedSupplyForAdd = ref<string>("");
-const checkoutItems = ref<TCheckoutItem[]>([]);
+const equipmentItems = ref<TEquipmentItem[]>([]);
 
 const selectedSupply = ref<Record<string, any>>({});
 const message = ref("");
@@ -576,7 +578,7 @@ const messageSnackbar = ref(false);
 const messageColor = ref("");
 
 const dialogShowMoreActions = ref(false);
-const dialogCheckoutItem = ref(false);
+const dialogEquipmentItem = ref(false);
 const dialogPhotoForItem = ref(false);
 const activePhotoIndex = ref<number | null>(null);
 
@@ -586,28 +588,29 @@ function showMessage(msg: string, color: string = "error") {
   messageSnackbar.value = true;
 }
 
-function openCheckoutDialog() {
-  checkoutItems.value = [];
+function openEquipmentItemDialog() {
+  equipmentItems.value = [];
   selectedSupplyForAdd.value = "";
-  dialogCheckoutItem.value = true;
+  dialogEquipmentItem.value = true;
 }
 
 function addSupplyToList(supplyId: string) {
   if (!supplyId) return;
 
-  const exists = checkoutItems.value.find((item) => item.supply === supplyId);
+  const exists = equipmentItems.value.find((item) => item.supply === supplyId);
   if (exists) {
-    showMessage("Supply already added.");
+    showMessage("Equipment already added.");
     selectedSupplyForAdd.value = "";
     return;
   }
 
   const supply = supplyItems.value.find((s) => s.value === supplyId);
   if (supply) {
-    checkoutItems.value.push({
+    equipmentItems.value.push({
       supply: supplyId,
       supplyName: supply.name,
       qty: 1,
+      stockQty: supply.stockQty,
       photos: [],
       photoIds: [],
     });
@@ -616,7 +619,7 @@ function addSupplyToList(supplyId: string) {
 }
 
 function removeSupplyFromList(index: number) {
-  checkoutItems.value.splice(index, 1);
+  equipmentItems.value.splice(index, 1);
 }
 
 function openPhotoDialog(index: number) {
@@ -627,25 +630,25 @@ function openPhotoDialog(index: number) {
 async function handleRowClick(data: any) {
   message.value = "";
 
-  selectedCheckoutItemId.value = data?.item?._id;
+  selectedEquipmentItemId.value = data?.item?._id;
 
-  if (selectedCheckoutItemId.value) {
-    await getCheckoutItemByIdRefresh();
+  if (selectedEquipmentItemId.value) {
+    await getEquipmentItemByIdRefresh();
   }
 
   dialogShowMoreActions.value = true;
 }
 
-async function _checkoutItem() {
+async function _equipmentItem() {
   submitting.value = true;
   try {
-    if (!checkoutItems.value.length) {
-      showMessage("Add at least one supply.");
+    if (!equipmentItems.value.length) {
+      showMessage("Add at least one equipment.");
       submitting.value = false;
       return;
     }
 
-    const items = checkoutItems.value.map((item) => ({
+    const items = equipmentItems.value.map((item) => ({
       supply: item.supply,
       qty: item.qty,
       ...(item.photoIds && item.photoIds.length
@@ -653,16 +656,16 @@ async function _checkoutItem() {
         : {}),
     }));
 
-    await checkoutItemApi(props.site, { items });
+    await equipmentItemApi(props.site, { items });
 
     showMessage(
-      `Checked out ${checkoutItems.value.length} item(s).`,
+      `Checked out ${equipmentItems.value.length} item(s).`,
       "success"
     );
-    dialogCheckoutItem.value = false;
-    checkoutItems.value = [];
+    dialogEquipmentItem.value = false;
+    equipmentItems.value = [];
 
-    await getCheckoutItemsRefresh();
+    await getEquipmentItemsRefresh();
   } catch (error: any) {
     console.error(error);
     showMessage(error?.data?.message, "error");
@@ -682,22 +685,22 @@ function viewAttachment(attachmentId: string) {
 const currentPhotos = computed({
   get() {
     if (activePhotoIndex.value === null) return [];
-    return checkoutItems.value[activePhotoIndex.value]?.photos || [];
+    return equipmentItems.value[activePhotoIndex.value]?.photos || [];
   },
   set(val) {
     if (activePhotoIndex.value === null) return;
-    checkoutItems.value[activePhotoIndex.value].photos = val || [];
+    equipmentItems.value[activePhotoIndex.value].photos = val || [];
   },
 });
 
 const currentPhotoIds = computed({
   get() {
     if (activePhotoIndex.value === null) return [];
-    return checkoutItems.value[activePhotoIndex.value]?.photoIds || [];
+    return equipmentItems.value[activePhotoIndex.value]?.photoIds || [];
   },
   set(val) {
     if (activePhotoIndex.value === null) return;
-    checkoutItems.value[activePhotoIndex.value].photoIds = val || [];
+    equipmentItems.value[activePhotoIndex.value].photoIds = val || [];
   },
 });
 </script>

package/components/{SupplyManagement.vue → EquipmentManagement.vue}

@@ -10,10 +10,10 @@
         v-model:page="page"
         :pages="pages"
         :pageRange="pageRange"
-        :no-data-text="`No supplies found.`"
+        :no-data-text="`No equipments found.`"
         @refresh="updatePage"
         :canCreate="true"
-        createLabel="Add Supply"
+        createLabel="Add Equipment"
         @row-click="tableRowClickHandler"
       >
         <template #actions>
@@ -25,7 +25,7 @@
                 variant="tonal"
                 size="large"
               >
-                Add Supply
+                Add Equipment
               </v-btn>
             </v-col>
 

package/components/Input/DateTimePicker.vue

@@ -22,7 +22,7 @@ const prop = defineProps({
     },
     placeholder: {
         type: String,
-        default: 'MM/DD/YYYY, HH:MM AM/PM'
+        default: 'DD/MM/YYYY, HH:MM AM/PM'
     }
 })
 
@@ -53,17 +53,23 @@ function validate() {
 function convertToReadableFormat(dateStr: string): string {
 
     if (!dateStr) return "";
+
     const date = new Date(dateStr)
-    const options: Intl.DateTimeFormatOptions = {
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit',
-        hour: '2-digit',
-        minute: '2-digit',
-        hour12: true
-    }
-    const formatted = date.toLocaleString('en-US', options)
-    return formatted
+
+    const day = String(date.getDate()).padStart(2, '0')
+    const month = String(date.getMonth() + 1).padStart(2, '0')
+    const year = date.getFullYear()
+
+    let hours = date.getHours()
+    const minutes = String(date.getMinutes()).padStart(2, '0')
+
+    const ampm = hours >= 12 ? 'PM' : 'AM'
+    hours = hours % 12
+    hours = hours ? hours : 12
+
+    const formattedTime = `${String(hours).padStart(2, '0')}:${minutes} ${ampm}`
+
+    return `${day}/${month}/${year}, ${formattedTime}`
 }
 
 function handleInitialDate(){

package/components/Input/InputPhoneNumberV2.vue

@@ -141,6 +141,14 @@ watch(input, (newInput) => {
   else phone.value = prefix + newInput
 })
 
+watch(
+  () => props.modelValue,
+  (val) => {
+    phone.value = val || ''
+  },
+  { immediate: true }
+)
+
 
 watch(phone, (newVal) => {
   const prefix = phonePrefix.value