@iservice365/layer-common 1.5.5 → 1.5.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 1.5.6
+
+### Patch Changes
+
+- ec81e23: Dashboard static data initial release
+
 ## 1.5.5
 
 ### Patch Changes

package/components/DashboardPlaceholder.vue

@@ -3,7 +3,9 @@
     <!-- Header -->
     <v-row no-gutters class="mb-6">
       <v-col cols="12">
-        <h1 class="text-h4 text-md-h3 font-weight-bold">Dashboard</h1>
+        <h1 class="text-h4 text-md-h3 font-weight-bold">
+          Dashboard{{ currentSiteName ? ` - ${currentSiteName}` : "" }}
+        </h1>
       </v-col>
     </v-row>
 
@@ -208,7 +210,24 @@
                   Feedback Tickets
                 </h3>
               </v-col>
-              <v-col cols="12" md="6" class="d-flex justify-md-end">
+              <v-col
+                cols="12"
+                md="6"
+                class="d-flex flex-column flex-md-row justify-md-end gap-2"
+              >
+                <v-select
+                  v-model="selectedService"
+                  :items="serviceList"
+                  item-title="name"
+                  item-value="_id"
+                  label="Select Service"
+                  density="compact"
+                  hide-details
+                  variant="outlined"
+                  style="max-width: 200px"
+                  clearable
+                  class="pr-4"
+                ></v-select>
                 <v-select
                   v-model="feedbackPeriod"
                   :items="['This Week', 'This Month', 'This Year']"
@@ -353,8 +372,23 @@
               </p>
             </div>
 
-            <!-- Dropdown -->
-            <div class="mb-4">
+            <!-- Dropdowns -->
+            <div class="mb-4 d-flex flex-column gap-2">
+              <!-- Facility/Building selector for Bookings only -->
+              <v-select
+                v-if="pie.id === 1"
+                v-model="selectedBooking"
+                :items="bookingsList"
+                item-title="name"
+                item-value="_id"
+                label="Select Facility"
+                density="compact"
+                hide-details
+                variant="outlined"
+                clearable
+                class="pb-4"
+              ></v-select>
+              <!-- Period selector -->
               <v-select
                 :model-value="pie.period"
                 :items="['This Week', 'This Month', 'This Year']"
@@ -449,14 +483,41 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
 import { useDisplay } from "vuetify";
 
 const display = useDisplay();
+const { getServiceProviderNames } = useServiceProvider();
+const { getAll: getAllBuildings } = useBuilding();
+const { getSiteById } = useSite();
+const route = useRoute();
+
+// Get siteId from route params
+const siteId = computed(() => (route.params.site as string) || "");
+
+// Reactive site data that updates when siteId changes
+const siteData = ref<any>(null);
+
+// Fetch site data whenever siteId changes
+watchEffect(async () => {
+  if (siteId.value) {
+    try {
+      const site = await getSiteById(siteId.value);
+      siteData.value = site;
+    } catch (error) {
+      console.error("Error fetching site:", error);
+      siteData.value = null;
+    }
+  } else {
+    siteData.value = null;
+  }
+});
+
+// Get current site name from fetched site data
+const currentSiteName = computed(() => siteData.value?.name || "");
 
 // Type definitions
-type Period = 'This Week' | 'This Month' | 'This Year';
-type CardType = 'guest' | 'pickup' | 'dropoff' | 'contractor' | 'delivery';
+type Period = "This Week" | "This Month" | "This Year";
+type CardType = "guest" | "pickup" | "dropoff" | "contractor" | "delivery";
 
 interface CardPeriods {
   guest: Period;
@@ -477,6 +538,14 @@ const bookingsPeriod = ref<Period>("This Week");
 const buildingPeriod = ref<Period>("This Week");
 const workOrdersPeriod = ref<Period>("This Week");
 
+// Service provider states
+const selectedService = ref<any>(null);
+const serviceList = ref<Array<{ _id: string; name: string }>>([]);
+
+// Booking filter - list of facilities/buildings
+const selectedBooking = ref<any>(null);
+const bookingsList = ref<Array<{ _id: string; name: string }>>([]);
+
 // Individual card periods
 const cardPeriods = ref<CardPeriods>({
   guest: "This Week",
@@ -487,7 +556,7 @@ const cardPeriods = ref<CardPeriods>({
 });
 
 // Data sets for different periods
-const dataByPeriod = {
+const dataByPeriod: Record<string, any> = {
   "This Week": {
     guest: { value: "156", percentage: "12.5 %", chipColor: "success" },
     pickup: { value: "42", percentage: "8.3 %", chipColor: "success" },
@@ -799,60 +868,83 @@ const dataByPeriod = {
   },
 };
 
-// Computed properties for reactive data
-const countCardList = computed(() => [
-  {
-    id: 1,
-    label: "Guest",
-    value: dataByPeriod[cardPeriods.value.guest].guest.value,
-    icon: "mdi-account-multiple",
-    color: "primary",
-    percentage: dataByPeriod[cardPeriods.value.guest].guest.percentage,
-    chipColor: dataByPeriod[cardPeriods.value.guest].guest.chipColor,
-    period: cardPeriods.value.guest,
-  },
-  {
-    id: 2,
-    label: "Pickup",
-    value: dataByPeriod[cardPeriods.value.pickup].pickup.value,
-    icon: "mdi-package",
-    color: "error",
-    percentage: dataByPeriod[cardPeriods.value.pickup].pickup.percentage,
-    chipColor: dataByPeriod[cardPeriods.value.pickup].pickup.chipColor,
-    period: cardPeriods.value.pickup,
-  },
-  {
-    id: 3,
-    label: "Drop-off",
-    value: dataByPeriod[cardPeriods.value.dropoff].dropoff.value,
-    icon: "mdi-package-down",
-    color: "warning",
-    percentage: dataByPeriod[cardPeriods.value.dropoff].dropoff.percentage,
-    chipColor: dataByPeriod[cardPeriods.value.dropoff].dropoff.chipColor,
-    period: cardPeriods.value.dropoff,
-  },
-  {
-    id: 4,
-    label: "Contractor",
-    value: dataByPeriod[cardPeriods.value.contractor].contractor.value,
-    icon: "mdi-hard-hat",
-    color: "success",
-    percentage:
-      dataByPeriod[cardPeriods.value.contractor].contractor.percentage,
-    chipColor: dataByPeriod[cardPeriods.value.contractor].contractor.chipColor,
-    period: cardPeriods.value.contractor,
-  },
-  {
-    id: 5,
-    label: "Delivery",
-    value: dataByPeriod[cardPeriods.value.delivery].delivery.value,
-    icon: "mdi-truck",
-    color: "grey",
-    percentage: dataByPeriod[cardPeriods.value.delivery].delivery.percentage,
-    chipColor: dataByPeriod[cardPeriods.value.delivery].delivery.chipColor,
-    period: cardPeriods.value.delivery,
-  },
-]);
+// Computed properties for reactive data with site-based multiplier
+const countCardList = computed(() => {
+  // Calculate multiplier based on siteId (different sites get different multipliers)
+  const siteHash = siteId.value
+    ? siteId.value.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0)
+    : 0;
+  const siteMultiplier = siteId.value ? 0.6 + (siteHash % 40) / 100 : 1; // Between 0.6 and 1.0
+
+  const applyMultiplier = (value: string) => {
+    const numValue = parseInt(value.replace(/,/g, ""));
+    const newValue = Math.round(numValue * siteMultiplier);
+    return newValue >= 1000 ? newValue.toLocaleString() : newValue.toString();
+  };
+
+  return [
+    {
+      id: 1,
+      label: "Guest",
+      value: applyMultiplier(dataByPeriod[cardPeriods.value.guest].guest.value),
+      icon: "mdi-account-multiple",
+      color: "primary",
+      percentage: dataByPeriod[cardPeriods.value.guest].guest.percentage,
+      chipColor: dataByPeriod[cardPeriods.value.guest].guest.chipColor,
+      period: cardPeriods.value.guest,
+    },
+    {
+      id: 2,
+      label: "Pickup",
+      value: applyMultiplier(
+        dataByPeriod[cardPeriods.value.pickup].pickup.value
+      ),
+      icon: "mdi-package",
+      color: "error",
+      percentage: dataByPeriod[cardPeriods.value.pickup].pickup.percentage,
+      chipColor: dataByPeriod[cardPeriods.value.pickup].pickup.chipColor,
+      period: cardPeriods.value.pickup,
+    },
+    {
+      id: 3,
+      label: "Drop-off",
+      value: applyMultiplier(
+        dataByPeriod[cardPeriods.value.dropoff].dropoff.value
+      ),
+      icon: "mdi-package-down",
+      color: "warning",
+      percentage: dataByPeriod[cardPeriods.value.dropoff].dropoff.percentage,
+      chipColor: dataByPeriod[cardPeriods.value.dropoff].dropoff.chipColor,
+      period: cardPeriods.value.dropoff,
+    },
+    {
+      id: 4,
+      label: "Contractor",
+      value: applyMultiplier(
+        dataByPeriod[cardPeriods.value.contractor].contractor.value
+      ),
+      icon: "mdi-hard-hat",
+      color: "success",
+      percentage:
+        dataByPeriod[cardPeriods.value.contractor].contractor.percentage,
+      chipColor:
+        dataByPeriod[cardPeriods.value.contractor].contractor.chipColor,
+      period: cardPeriods.value.contractor,
+    },
+    {
+      id: 5,
+      label: "Delivery",
+      value: applyMultiplier(
+        dataByPeriod[cardPeriods.value.delivery].delivery.value
+      ),
+      icon: "mdi-truck",
+      color: "grey",
+      percentage: dataByPeriod[cardPeriods.value.delivery].delivery.percentage,
+      chipColor: dataByPeriod[cardPeriods.value.delivery].delivery.chipColor,
+      period: cardPeriods.value.delivery,
+    },
+  ];
+});
 
 // Computed reactive data
 const visitorPoints = computed(
@@ -868,9 +960,34 @@ const visitorLabels = [
   { x: 1100, text: "Sat" },
 ];
 
-const feedbackBars = computed(
-  () => dataByPeriod[feedbackPeriod.value].feedback
-);
+const feedbackBars = computed(() => {
+  const baseFeedback = dataByPeriod[feedbackPeriod.value].feedback;
+
+  // If no service is selected, return the base data
+  if (!selectedService.value) {
+    return baseFeedback;
+  }
+
+  // If a service is selected, multiply values by a consistent factor
+  // Use the service ID to generate a consistent multiplier for that service
+  const serviceHash = selectedService.value
+    .split("")
+    .reduce((acc, char) => acc + char.charCodeAt(0), 0);
+  const multiplier = 0.3 + (serviceHash % 50) / 100; // Between 0.3 and 0.8
+
+  return baseFeedback.map((bar: any) => {
+    const newValue = Math.round(bar.value * multiplier);
+    const newHeight = bar.height * multiplier;
+    const newY = 290 - newHeight;
+
+    return {
+      ...bar,
+      value: newValue,
+      height: newHeight,
+      y: newY,
+    };
+  });
+});
 
 // Function to update individual card periods
 const updateCardPeriod = (cardType: string, period: string) => {
@@ -886,6 +1003,19 @@ const updatePiePeriod = (pieId: number, period: string) => {
   else if (pieId === 3) workOrdersPeriod.value = validPeriod;
 };
 
+// Function to fetch bookings data based on selected facility
+const fetchBookingsData = async () => {
+  if (!selectedBooking.value) {
+    // Reset to base data when no booking selected
+    return;
+  }
+};
+
+// Watch for booking selection changes
+watch(selectedBooking, () => {
+  fetchBookingsData();
+});
+
 // Pie chart data by period
 const pieChartDataByPeriod = {
   "This Week": {
@@ -1070,67 +1200,192 @@ const pieChartDataByPeriod = {
 };
 
 // Computed Pie Charts Data
-const pieChartList = computed(() => [
-  {
-    id: 1,
-    title: "Bookings",
-    total: pieChartDataByPeriod[bookingsPeriod.value].bookings.total,
-    centerValue:
-      pieChartDataByPeriod[bookingsPeriod.value].bookings.centerValue,
-    segments: pieChartDataByPeriod[bookingsPeriod.value].bookings.segments,
-    period: bookingsPeriod.value,
-  },
-  {
-    id: 2,
-    title: "Building Mngm.",
-    total: pieChartDataByPeriod[buildingPeriod.value].building.total,
-    centerValue:
-      pieChartDataByPeriod[buildingPeriod.value].building.centerValue,
-    segments: pieChartDataByPeriod[buildingPeriod.value].building.segments,
-    period: buildingPeriod.value,
-  },
-  {
-    id: 3,
-    title: "Work Orders",
-    total: pieChartDataByPeriod[workOrdersPeriod.value].workOrders.total,
-    centerValue:
-      pieChartDataByPeriod[workOrdersPeriod.value].workOrders.centerValue,
-    segments: pieChartDataByPeriod[workOrdersPeriod.value].workOrders.segments,
-    period: workOrdersPeriod.value,
-  },
-]);
+const pieChartList = computed(() => {
+  // Get base bookings data
+  const baseBookingsData = pieChartDataByPeriod[bookingsPeriod.value].bookings;
+  let bookingsData = { ...baseBookingsData };
+
+  if (selectedBooking.value) {
+    const bookingHash = selectedBooking.value
+      .split("")
+      .reduce((acc, char) => acc + char.charCodeAt(0), 0);
+    const multiplier = 0.35 + (bookingHash % 45) / 100; // Between 0.35 and 0.8
+    const newTotal = Math.round(baseBookingsData.total * multiplier);
+
+    const segmentMultipliers = [
+      0.8 + (bookingHash % 15) / 100, // approved: 0.8-0.95
+      0.4 + (bookingHash % 30) / 100, // rejected: 0.4-0.7
+      0.5 + (bookingHash % 25) / 100, // pending: 0.5-0.75
+    ];
+
+    const newSegments = baseBookingsData.segments.map(
+      (seg: any, idx: number) => {
+        const segMultiplier = segmentMultipliers[idx] || multiplier;
+        const newPercentage = seg.percentage * segMultiplier;
+        return {
+          ...seg,
+          percentage: newPercentage,
+        };
+      }
+    );
+
+    // Normalize percentages to total 100% (make full circle)
+    const totalPercentage = newSegments.reduce(
+      (sum: number, seg: any) => sum + seg.percentage,
+      0
+    );
+    const normalizedSegments = newSegments.map((seg: any) => ({
+      ...seg,
+      percentage: (seg.percentage / totalPercentage) * 100,
+    }));
+
+    // Recalculate rotations based on normalized percentages
+    let currentRotation = -90;
+    const adjustedSegments = normalizedSegments.map((seg: any) => {
+      const segmentWithRotation = {
+        ...seg,
+        rotation: currentRotation,
+      };
+      currentRotation += seg.percentage * 3.6; // 360 degrees / 100 percentage
+      return segmentWithRotation;
+    });
 
-// Facility Bookings Data
-const facilityBookings = [
+    // Calculate new center value based on the largest segment
+    const maxSegment = adjustedSegments.reduce((max: any, seg: any) =>
+      seg.percentage > max.percentage ? seg : max
+    );
+    const newCenterValue = `${Math.round(maxSegment.percentage)}%`;
+
+    bookingsData = {
+      total: newTotal,
+      centerValue: newCenterValue,
+      segments: adjustedSegments,
+    };
+  }
+
+  return [
+    {
+      id: 1,
+      title: "Bookings",
+      total: bookingsData.total,
+      centerValue: bookingsData.centerValue,
+      segments: bookingsData.segments,
+      period: bookingsPeriod.value,
+    },
+    {
+      id: 2,
+      title: "Building Mngm.",
+      total: pieChartDataByPeriod[buildingPeriod.value].building.total,
+      centerValue:
+        pieChartDataByPeriod[buildingPeriod.value].building.centerValue,
+      segments: pieChartDataByPeriod[buildingPeriod.value].building.segments,
+      period: buildingPeriod.value,
+    },
+    {
+      id: 3,
+      title: "Work Orders",
+      total: pieChartDataByPeriod[workOrdersPeriod.value].workOrders.total,
+      centerValue:
+        pieChartDataByPeriod[workOrdersPeriod.value].workOrders.centerValue,
+      segments:
+        pieChartDataByPeriod[workOrdersPeriod.value].workOrders.segments,
+      period: workOrdersPeriod.value,
+    },
+  ];
+});
+
+// Function to fetch feedback data based on selected service
+const fetchFeedbackData = async () => {
+  if (!selectedService.value) {
+    // Reset to base data when no service selected
+    return;
+  }
+};
+
+// Watch for service selection changes
+watch(selectedService, () => {
+  fetchFeedbackData();
+});
+
+// Fetch service providers and buildings/facilities on mount
+onMounted(async () => {
+  try {
+    // Fetch service providers for feedback dropdown
+    const serviceResponse = await getServiceProviderNames({ limit: 100 });
+    if (serviceResponse && serviceResponse.items) {
+      serviceList.value = serviceResponse.items;
+    }
+
+    // Fetch buildings/facilities for bookings dropdown
+    // Using buildings as facilities - you can adjust to use actual facilities API
+    const buildingsResponse = await getAllBuildings({
+      limit: 100,
+      status: "active", // Only show active buildings
+    });
+    if (buildingsResponse && buildingsResponse.items) {
+      bookingsList.value = buildingsResponse.items.map((building: any) => ({
+        _id: building._id,
+        name: building.name || building.block || `Building ${building._id}`,
+      }));
+    }
+  } catch (error) {
+    console.error("Error fetching data:", error);
+  }
+});
+
+// Base Facility Bookings Data
+const baseFacilityBookings = [
   {
     id: 1,
     label: "Approved Bookings",
-    value: "34",
+    value: 34,
     icon: "mdi-calendar-check",
     iconColor: "success",
   },
   {
     id: 2,
     label: "Pending Bookings",
-    value: "97",
+    value: 97,
     icon: "mdi-calendar-clock",
     iconColor: "warning",
   },
   {
     id: 3,
     label: "Cancelled Bookings",
-    value: "28",
+    value: 28,
     icon: "mdi-calendar-remove",
     iconColor: "error",
   },
   {
     id: 4,
     label: "Rejected Bookings",
-    value: "27",
+    value: 27,
     icon: "mdi-calendar-remove",
     iconColor: "error",
   },
 ];
+
+// Computed Facility Bookings - changes based on selected facility
+const facilityBookings = computed(() => {
+  // If no facility is selected, return base data
+  if (!selectedBooking.value) {
+    return baseFacilityBookings.map((booking) => ({
+      ...booking,
+      value: booking.value.toString(),
+    }));
+  }
+
+  // If a facility is selected, multiply values
+  const bookingHash = selectedBooking.value
+    .split("")
+    .reduce((acc, char) => acc + char.charCodeAt(0), 0);
+  const multiplier = 0.35 + (bookingHash % 45) / 100; // Between 0.35 and 0.8
+
+  return baseFacilityBookings.map((booking) => ({
+    ...booking,
+    value: Math.round(booking.value * multiplier).toString(),
+  }));
+});
 </script>
 
 <style scoped>

package/components/DocumentForm.vue

@@ -0,0 +1,101 @@
+<template>
+  <v-card width="100%">
+    <v-toolbar>
+      <v-row no-gutters class="fill-height px-6" align="center">
+        <span class="font-weight-bold text-h5 text-capitalize">
+          {{ prop.mode }} Document
+        </span>
+      </v-row>
+    </v-toolbar>
+    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-0">
+      <v-form v-model="validForm" :disabled="disable">
+        <v-col cols="12" class="px-6">
+          <InputLabel class="text-capitalize" title="Document Attachment" />
+          <InputFileV2
+            v-model="document.attachment"
+            :multiple="false"
+            :max-length="10"
+            title="Upload Images"
+          />
+        </v-col>
+
+        <v-col cols="12">
+          <v-row no-gutters>
+            <v-col cols="12" class="text-center">
+              <span
+                class="text-none text-subtitle-2 font-weight-medium text-error"
+              >
+                {{ message }}
+              </span>
+            </v-col>
+          </v-row>
+        </v-col>
+      </v-form>
+    </v-card-text>
+
+    <v-toolbar density="compact">
+      <v-row no-gutters>
+        <v-col cols="6">
+          <v-btn
+            tile
+            block
+            variant="text"
+            class="text-none"
+            size="48"
+            @click="cancel"
+            :disabled="disable"
+          >
+            Cancel
+          </v-btn>
+        </v-col>
+
+        <v-col cols="6">
+          <v-btn
+            tile
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="48"
+            :disabled="!validForm || disable"
+            @click="submit"
+            :loading="disable"
+          >
+            Submit
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+<script setup lang="ts">
+const prop = defineProps({
+  mode: {
+    type: String,
+    default: "add",
+  },
+  document: {
+    type: Object as PropType<TDocument>,
+    default: () => ({
+      name: "",
+      attachment: "",
+    }),
+  },
+});
+
+const emit = defineEmits(["cancel", "success"]);
+
+const validForm = ref(false);
+const disable = ref(false);
+const message = ref("");
+
+function cancel() {
+  //   createMore.value = false;
+  message.value = "";
+  emit("cancel");
+}
+
+async function submit() {
+  disable.value = true;
+}
+</script>

package/components/DocumentManagement.vue

@@ -0,0 +1,187 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12" class="mb-2">
+      <v-row no-gutters>
+        <v-btn
+          class="text-none"
+          rounded="pill"
+          variant="tonal"
+          size="large"
+          @click="setDocument()"
+          v-if="canCreate && canCreateDocument"
+        >
+          Add Document
+        </v-btn>
+      </v-row>
+    </v-col>
+    <v-col cols="12">
+      <v-card
+        width="100%"
+        variant="outlined"
+        border="thin"
+        rounded="lg"
+        :loading="loading"
+      >
+        <v-toolbar density="compact" color="grey-lighten-4">
+          <template #prepend>
+            <v-btn fab icon density="comfortable" @click="">
+              <v-icon>mdi-refresh</v-icon>
+            </v-btn>
+          </template>
+
+          <template #append>
+            <v-row no-gutters justify="end" align="center">
+              <span class="mr-2 text-caption text-fontgray">
+                {{ pageRange }}
+              </span>
+              <local-pagination
+                v-model="page"
+                :length="pages"
+                @update:value=""
+              />
+            </v-row>
+          </template>
+        </v-toolbar>
+        <v-data-table
+          :headers="headers"
+          :items="items"
+          item-value="_id"
+          items-per-page="10"
+          fixed-header
+          hide-default-footer
+          hide-default-header
+          @click:row="tableRowClickHandler"
+          style="max-height: calc(100vh - (200px))"
+        ></v-data-table>
+      </v-card>
+    </v-col>
+
+    <!-- Create Dialog -->
+    <v-dialog v-model="createDialog" width="450" persistent>
+      <DocumentForm @cancel="createDialog = false" @success="successCreate()" />
+    </v-dialog>
+  </v-row>
+</template>
+<script setup lang="ts">
+definePageMeta({
+  middleware: ["01-auth", "02-org"],
+  memberOnly: true,
+});
+const props = defineProps({
+  headers: {
+    type: Array as PropType<Array<Record<string, any>>>,
+    default: () => [
+      {
+        title: "Name",
+        value: "name",
+      },
+      { title: "Action", value: "action-table" },
+    ],
+  },
+  canCreate: {
+    type: Boolean,
+    default: true,
+  },
+  canUpdate: {
+    type: Boolean,
+    default: true,
+  },
+  canDelete: {
+    type: Boolean,
+    default: true,
+  },
+  canCreateDocument: {
+    type: Boolean,
+    default: true,
+  },
+  canUpdateDocument: {
+    type: Boolean,
+    default: true,
+  },
+  canDeleteDocument: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const { headerSearch } = useLocal();
+const { getAll: _getAllDocuments } = useDocument();
+
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const message = ref("");
+const messageSnackbar = ref(false);
+const messageColor = ref("");
+
+const items = ref<Array<Record<string, any>>>([]);
+
+const {
+  data: getDocumentReq,
+  refresh: getDocuments,
+  status: getAllReqStatus,
+} = useLazyAsyncData(
+  "get-all-documents",
+  () =>
+    _getAllDocuments({
+      page: page.value,
+      search: headerSearch.value,
+    }),
+  {
+    watch: [page, headerSearch],
+  }
+);
+
+const loading = computed(() => getAllReqStatus.value === "pending");
+
+watchEffect(() => {
+  if (getDocumentReq.value) {
+    items.value = getDocumentReq.value.items;
+    pages.value = getDocumentReq.value.pages;
+    pageRange.value = getDocumentReq.value.pageRange;
+  }
+});
+
+const createDialog = ref(false);
+const editDialog = ref(false);
+const previewDialog = ref(false);
+const selectedDocument = ref<TDocument>({
+  _id: "",
+  name: "",
+  attachment: [],
+});
+
+function tableRowClickHandler(_: any, data: any) {
+  selectedDocument.value = data.item as TDocument;
+  previewDialog.value = true;
+}
+
+function setDocument({
+  mode = "create",
+  dialog = true,
+  data = {} as TDocument,
+} = {}) {
+  if (mode === "create") {
+    createDialog.value = dialog;
+  } else if (mode === "edit") {
+    editDialog.value = dialog;
+    selectedDocument.value = data;
+  } else if (mode === "preview") {
+    previewDialog.value = dialog;
+    selectedDocument.value = data;
+  }
+}
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+function successCreate() {
+  createDialog.value = false;
+  getDocuments();
+  showMessage("Document created successfully!", "success");
+}
+</script>

package/components/FeedbackMain.vue

@@ -36,7 +36,7 @@
       >
         <v-toolbar density="compact" color="grey-lighten-4">
           <template #prepend>
-            <v-btn fab icon density="comfortable" @click="updatePage">
+            <v-btn fab icon density="comfortable" @click="updatePage(1)">
               <v-icon>mdi-refresh</v-icon>
             </v-btn>
           </template>
@@ -351,6 +351,7 @@ async function updatePage(pageVal: any) {
   const response = await _getFeedbacks({
     page: page.value,
     site: route.params.site as string,
+    category: props.category,
   });
   if (response) {
     items.value = response.items;

package/components/Input/InputPhoneNumberV2.vue

@@ -3,13 +3,14 @@
         <v-col cols="12" class="d-flex ga-2">
             <v-select v-model="selectedCode" :variant="variant" :items="countries" item-title="code" item-value="code"
                 hide-details class="px-0" :density="density" style="max-width: 95px" :rules="[...props.rules]"
-                @update:model-value="handleUpdateCountry">
+                :readonly="props.readOnly" @update:model-value="handleUpdateCountry">
                 <template v-slot:item="{ props: itemProps, item }">
                     <v-list-item v-bind="itemProps" :title="item.raw.name" :subtitle="item.raw.dial_code" width="300" />
                 </template>
             </v-select>
-            <v-mask-input v-model="phone" :mask="currentMask" :rules="[...props.rules, validatePhone]" :loading="loading"
-                :variant="variant" hint="Enter a valid phone number" hide-details persistent-hint return-masked-value
+            <v-mask-input v-model="input" :mask="currentMask" :rules="[...props.rules, validatePhone]" ref="maskRef" :key="`mask-key-${maskKey}`"
+                :loading="loading" :readonly="props.readOnly" :variant="variant" hint="Enter a valid phone number"
+                hide-details persistent-hint return-masked-value :prefix="phonePrefix || '###'" persistent-placeholder
                 :density="density" :placeholder="placeholder || currentMask"></v-mask-input>
         </v-col>
         <span class="text-error text-caption w-100" v-if="errorMessage && !hideDetails">{{ errorMessage }}</span>
@@ -45,6 +46,10 @@ const props = defineProps({
     loading: {
         type: Boolean,
         default: false
+    },
+    readOnly: {
+        type: Boolean,
+        default: false
     }
 })
 
@@ -60,9 +65,12 @@ type TPhoneMask =
     }
 
 const phone = defineModel({ default: '' })
+const input = ref('')
 const selectedCode = ref('SG')
 const countries = phoneMasks
 const errorMessage = ref('')
+const maskRef = ref()
+const maskKey = ref(0)
 
 const currentMask = computed(() => {
     const country = phoneMasks.find((c: TPhoneMask) => c.code === selectedCode.value)
@@ -72,7 +80,9 @@ const currentMask = computed(() => {
 
 
 
-const validatePhone = (value: string): boolean | string => {
+const validatePhone = (): boolean | string => {
+    if(props.readOnly) return true;
+    const value = phone.value
     if (!value) {
         errorMessage.value = ''
         return true;
@@ -92,23 +102,29 @@ const validatePhone = (value: string): boolean | string => {
 
 
 
-
 function generateMaskFromRegex(regex: string): string {
+    let pattern = regex.replace(/^\^|\$$/g, '');
 
-    let pattern = regex.replace(/^\^|\$$/g, '')
-    pattern = pattern.replace(/\\d\{(\d+)\}/g, (_, count) => '#'.repeat(Number(count)))
-    pattern = pattern.replace(/\\d/g, '#')
+    pattern = pattern.replace(/\(\?:\+?\d+\)\?/g, '');
+    pattern = pattern.replace(/\+?\d{1,4}/, '');
 
-    pattern = pattern.replace(/\\/g, '')
+    pattern = pattern.replace(/\\d\{(\d+)\}/g, (_, count) => '#'.repeat(Number(count)));
 
-    pattern = pattern.replace(/\s\?/g, ' ')
-    pattern = pattern.replace(/\s/g, ' ')
+    pattern = pattern.replace(/\\d/g, '#');
 
-    pattern = pattern.replace(/\(\?:/g, '(')
+    pattern = pattern.replace(/\\/g, '');
+    pattern = pattern.replace(/\(\?:/g, '');
+    pattern = pattern.trim();
 
-    return pattern.trim()
+    return pattern;
 }
 
+const phonePrefix = computed(() => {
+    const country = phoneMasks.find((c: TPhoneMask) => c.code === selectedCode.value)
+    return country?.dial_code || ''
+})
+
+
 function handleUpdateCountry() {
     phone.value = ''
 }
@@ -116,8 +132,32 @@ function handleUpdateCountry() {
 const emit = defineEmits(['update:modelValue'])
 
 watch(phone, (newVal) => {
-  emit('update:modelValue', newVal)
+    emit('update:modelValue', newVal)
+})
+
+watch(input, (newInput) => {
+    const prefix = phonePrefix.value
+
+    if (!newInput) {
+        return
+    }
+
+    phone.value = prefix + newInput
+})
+
+
+onMounted(() => {
+    if (!phone.value) return
+
+    const found = phoneMasks.find((c: any) => phone.value?.startsWith(c?.dial_code))
+    if (found) {
+        selectedCode.value = found.code
+    }
+
+    input.value = phone.value.replace(found?.dial_code || '', '')
+    maskKey.value++
 })
 
 
+
 </script>

package/components/WorkOrder/Main.vue

@@ -7,7 +7,7 @@
           rounded="pill"
           variant="tonal"
           size="large"
-          @click="showCreateDialog = true"
+          @click="(showCreateDialog = true), (isEditMode = false)"
           v-if="canCreateWorkOrder"
         >
           Create Work Order
@@ -35,7 +35,7 @@
       >
         <v-toolbar density="compact" color="grey-lighten-4">
           <template #prepend>
-            <v-btn fab icon density="comfortable" @click="updatePage">
+            <v-btn fab icon density="comfortable" @click="updatePage(1)">
               <v-icon>mdi-refresh</v-icon>
             </v-btn>
           </template>
@@ -258,7 +258,12 @@ const selected = ref<string[]>([]);
 const route = useRoute();
 const { customers } = useCustomer();
 
-const { getWorkOrders: _getWorkOrders, createWorkOrder } = useWorkOrder();
+const {
+  getWorkOrders: _getWorkOrders,
+  createWorkOrder,
+  getWorkOrderById,
+  updateWorkOrder,
+} = useWorkOrder();
 
 const page = ref(1);
 const pages = ref(0);
@@ -294,6 +299,7 @@ async function updatePage(pageVal: any) {
   const response = await _getWorkOrders({
     page: page.value,
     site: route.params.site as string,
+    category: props.category,
   });
   if (response) {
     items.value = response.items;
@@ -412,7 +418,13 @@ async function submitWorkOrder() {
       site: route.params.site as string,
     };
 
-    const res = await createWorkOrder(payload);
+    let res: Record<string, any> = {};
+
+    if (isEditMode.value) {
+      res = await updateWorkOrder(_workOrderId.value as string, payload);
+    } else {
+      res = await createWorkOrder(payload);
+    }
 
     showMessage(res.message, "success");
     showCreateDialog.value = false;
@@ -437,12 +449,32 @@ function onViewWorkOrder(item: any) {
   });
 }
 
-function editWorkOrder(item: any) {}
+async function editWorkOrder(item: any) {
+  try {
+    const _workOrders = await getWorkOrderById(item._id);
+    console.log(_workOrders);
+    _workOrder.value = {
+      attachments: (_workOrders.attachments || []) as string[],
+      category: _workOrders.category || "",
+      subject: _workOrders.subject || "",
+      description: _workOrders.description || "",
+      highPriority: _workOrders.highPriority || false,
+      unit: _workOrders.location || "",
+    };
+    _workOrderId.value = item._id;
+    isEditMode.value = true;
+    showCreateDialog.value = true;
+    dialogPreview.value = false;
+  } catch (error) {
+    showMessage("Failed to load full work order", "error");
+  }
+}
+
+async function _updateWorkOrder() {}
 
 function confirmDeleteWorkOrder(item: any) {}
 
 function tableRowClickHandler(_: any, data: any) {
-  console.log(data.item);
   selectedWorkOrder.value = data.item;
   dialogPreview.value = true;
 }

package/composables/useDocument.ts

@@ -0,0 +1,27 @@
+export default function useDocument() {
+  function getAll({
+    page = 1,
+    search = "",
+    limit = 10,
+    status = "active",
+    site = "",
+  } = {}) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/documents`,
+      {
+        method: "GET",
+        query: {
+          page,
+          search,
+          limit,
+          status,
+          site,
+        },
+      }
+    );
+  }
+
+  return {
+    getAll,
+  };
+}

package/composables/useSiteSettings.ts

@@ -36,7 +36,18 @@ export default function () {
       }
     );
   }
-
+  async function updateSitebyId(
+    siteId: string,
+    payload: { field: string; value: number }
+  ) {
+    return await useNuxtApp().$api<Record<string, any>>(
+      `/api/sites/id/${siteId}`,
+      {
+        method: "PATCH",
+        body: payload,
+      }
+    );
+  }
   async function addCamera(camera: TSiteCamera) {
     return await useNuxtApp().$api<Record<string, any>>(`/api/site-cameras`, {
       method: "POST",
@@ -107,5 +118,6 @@ export default function () {
     setSiteGuardPosts,
     updateSiteCamera,
     deleteSiteCameraById,
+    updateSitebyId,
   };
 }

package/composables/useWorkOrder.ts

@@ -64,6 +64,13 @@ export default function useWorkOrder() {
     });
   }
 
+  function updateWorkOrder(id: string, payload: object) {
+    return useNuxtApp().$api<Record<string, any>>(`/api/work-orders/${id}`, {
+      method: "PUT",
+      body: payload,
+    });
+  }
+
   return {
     workOrders,
     workOrder,
@@ -73,5 +80,6 @@ export default function useWorkOrder() {
     createWorkOrder,
     getWorkOrders,
     getWorkOrderById,
+    updateWorkOrder,
   };
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@iservice365/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "1.5.5",
+  "version": "1.5.6",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",

package/types/document.d.ts

@@ -0,0 +1,5 @@
+declare type TDocument = {
+  _id?: string;
+  name: string;
+  attachment: string[];
+};