@iservice365/layer-common 1.0.10 → 1.1.0

package/components/WorkOrder/Detail.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="feedback-detail-wrapper">
+    <v-row no-gutters class="fill-height">
+      <v-col cols="12" xl="7" lg="7" md="7" class="fill-height">
+        <div class="panel-container border-e">
+          <ChatMessage :type="'workOrder'" />
+        </div>
+      </v-col>
+      <v-col cols="12" xl="5" lg="5" md="5" class="fill-height">
+        <div class="panel-container">
+          <ChatInformation
+            :item="workOrder"
+            :service-providers="_serviceProviders"
+            :type="'workOrder'"
+            @edit="openEditDialog"
+            @mark-complete-request="showCompleteDialog = true"
+            @delete="showDeleteDialog = true"
+          />
+        </div>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+<script lang="ts" setup>
+const route = useRoute();
+const id = route.params.id;
+
+const {
+  workOrder,
+  workOrders,
+  getWorkOrderById,
+  getWorkOrders: _getWorkOrders,
+} = useWorkOrder();
+
+const { getServiceProviderNames } = useServiceProvider();
+
+const _getWorkOrderById = async () => {
+  try {
+    const data = await getWorkOrderById(id as string);
+    workOrder.value = data;
+  } catch (error) {
+    console.error("Error fetching feedback:", error);
+  }
+};
+
+_getWorkOrderById();
+
+const _serviceProviders = ref<TServiceProviderName[]>([]);
+
+const _getServiceProviderNames = async () => {
+  try {
+    const response = await getServiceProviderNames();
+    if (!response) return;
+
+    _serviceProviders.value = response.items.map((provider) => ({
+      _id: provider._id as string,
+      name: provider.name,
+    }));
+  } catch (error) {
+    console.error("Error fetching service providers:", error);
+  }
+};
+
+_getServiceProviderNames();
+
+const showCreateDialog = ref(false);
+const showCompleteDialog = ref(false);
+const showDeleteDialog = ref(false);
+
+function openEditDialog() {}
+</script>

package/components/WorkOrder/Main.vue

@@ -1,12 +1,12 @@
 <template>
   <v-row align="start" justify="center" class="fill-height">
-    <v-col cols="12" lg="11" md="10">
+    <v-col cols="12" lg="12" md="12">
       <ListView
         :headers="headers"
         :items="items"
         :pages="pages"
         :page-range="pageRange"
-        :loading="loading"
+        :loading="loading || onNextPrevPageLoading"
         :height="'calc(100vh - 175px)'"
         v-model:page="page"
         :selected="selected"
@@ -14,6 +14,8 @@
         @update:selected="onSelectedUpdate"
         @click:create="showCreateDialog = true"
         :length="pages"
+        :clickable-rows="true"
+        @update:pagination="updatePage"
       >
         <template #title>
           <span class="text-h6 font-weight-regular">Work Orders</span>
@@ -47,12 +49,34 @@
             {{ item.status || "No Status" }}
           </v-chip>
         </template>
+        <template #action-table="{ item }">
+          <v-menu
+            v-model="item.menuOpen"
+            :close-on-content-click="false"
+            offset-y
+            width="150"
+          >
+            <template v-slot:activator="{ props }">
+              <v-icon v-bind="props">mdi-dots-horizontal-circle-outline</v-icon>
+            </template>
+            <v-list>
+              <v-list-item @click="onViewWorkOrder(item)">View</v-list-item>
+              <v-list-item @click="editWorkOrder(item)">Edit</v-list-item>
+              <v-list-item
+                @click="confirmDeleteWorkOrder(item)"
+                v-if="canDeleteWorkOrder"
+                >Delete</v-list-item
+              >
+            </v-list>
+          </v-menu>
+        </template>
       </ListView>
     </v-col>
   </v-row>
 
   <WorkOrderCreate
     v-model="showCreateDialog"
+    :created-from="'workOrder'"
     :work-order="_workOrder"
     @update:work-order="(val: TWorkOrderCreate) => (_workOrder = val)"
     :is-edit-mode="isEditMode"
@@ -75,7 +99,7 @@
 import { useTheme } from "vuetify";
 const emit = defineEmits(["click:create", "update:pagination"]);
 
-defineProps({
+const props = defineProps({
   detailRoute: {
     type: String,
     default: "index",
@@ -149,6 +173,7 @@ const headers = [
   { title: "Category", value: "category", align: "start" },
   { title: "Date", value: "createdAt", align: "start" },
   { title: "Status", value: "status", align: "start" },
+  { title: "", value: "action-table", align: "end" },
 ];
 
 const submitting = ref(false);
@@ -176,6 +201,7 @@ const {
 );
 
 const loading = computed(() => getAllReqStatus.value === "pending");
+const onNextPrevPageLoading = ref(false);
 
 watchEffect(() => {
   if (getAllWorkOrderReq.value) {
@@ -184,6 +210,23 @@ watchEffect(() => {
     pageRange.value = getAllWorkOrderReq.value.pageRange;
   }
 });
+
+async function updatePage(pageVal: any) {
+  onNextPrevPageLoading.value = true;
+  page.value = pageVal;
+  const response = await _getWorkOrders({
+    page: page.value,
+    organization: route.params.org as string,
+    site: route.params.site as string,
+  });
+  if (response) {
+    items.value = response.items;
+    pages.value = response.pages;
+    pageRange.value = response.pageRange;
+    onNextPrevPageLoading.value = false;
+  }
+}
+
 function onSelectedUpdate(newSelected: string[]) {
   selected.value = newSelected;
 }
@@ -305,4 +348,20 @@ async function submitWorkOrder() {
     isSubmitting.value = false;
   }
 }
+
+function onViewWorkOrder(item: any) {
+  const route = useRoute();
+  const org = route.params.org;
+  const customer = route.params.customer;
+  const site = route.params.site;
+  const id = item._id;
+  useRouter().push({
+    name: props.detailRoute,
+    params: { org, site, id },
+  });
+}
+
+function editWorkOrder(item: any) {}
+
+function confirmDeleteWorkOrder(item: any) {}
 </script>

package/composables/useCustomerSite.ts

@@ -1,11 +1,20 @@
 export default function useCustomerSite() {
   function add(payload: TCustomerSite) {
-    return useNuxtApp().$api<Record<string, any>>(`/api/customer-sites`, {
+    return useNuxtApp().$api<Record<string, any>>("/api/customer-sites", {
       method: "POST",
       body: payload,
     });
   }
 
+  function addViaInvite(invite: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/customer-sites/invite/${invite}`,
+      {
+        method: "POST",
+      }
+    );
+  }
+
   async function getAll({
     page = 1,
     search = "",
@@ -29,8 +38,19 @@ export default function useCustomerSite() {
     });
   }
 
+  function getBySiteAsServiceProvider(site: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/customer-sites/service-provider/${site}`,
+      {
+        method: "GET",
+      }
+    );
+  }
+
   return {
     add,
     getAll,
+    addViaInvite,
+    getBySiteAsServiceProvider,
   };
 }

package/composables/useFeedback.ts

@@ -10,6 +10,7 @@ export default function useFeedback() {
       _id: "",
       attachments: [],
       category: "",
+      categoryInfo: "",
       subject: "",
       location: "",
       description: "",
@@ -27,6 +28,7 @@ export default function useFeedback() {
         attachments: "",
         completedAt: "",
       },
+      workOrderNo: "",
     })
   );
 

package/composables/useFile.ts

@@ -1,6 +1,6 @@
 export default function useFile() {
   const baseUrl =
-    "https://seven365-storage.sgp1.cdn.digitaloceanspaces.com/dev";
+    "https://iservice365-dev.sgp1.cdn.digitaloceanspaces.com/default";
 
   function addFile(file: File | null) {
     if (!file) {
@@ -23,6 +23,16 @@ export default function useFile() {
     return `${baseUrl}/${id}`;
   }
 
+  async function urlToFile(url: string, filename: string): Promise<File> {
+    const response = await fetch(url)
+    const blob = await response.blob()
+
+    // Try to extract MIME type if possible (e.g. image/png)
+    const mimeType = blob.type || 'image/jpeg'
+
+    return new File([blob], filename, { type: mimeType })
+  }
+
   function deleteFile(attachmentId: string) {
     return useNuxtApp().$api<Record<string, any>>(
       `/api/files/${attachmentId}`,
@@ -35,6 +45,7 @@ export default function useFile() {
   return {
     addFile,
     deleteFile,
+    urlToFile,
     getFileUrl,
   };
 }

package/composables/useUtils.ts

@@ -256,6 +256,7 @@ export default function useUtils() {
 
   const search = useState("search", () => "");
 
+  //returns Oct 16, 2025, 03:45 PM // N/A format
   function formatDate(dateString: string) {
     if (!dateString) return "N/A";
 
@@ -269,6 +270,23 @@ export default function useUtils() {
     });
   }
 
+  // returns 16/10/2025, 15:45 format
+  function UTCToLocalTIme(UTCDateTime: string) {
+  if (!UTCDateTime) return "";
+  const local = new Date(UTCDateTime);
+
+  const formatted = local.toLocaleString("en-GB", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false, // 24-hour format
+  });
+
+  return formatted;
+}
+
   function formatNature(value: string): string {
     if (!value) return "";
     return value
@@ -341,6 +359,7 @@ export default function useUtils() {
   }
 
   function formatCamelCaseToWords(key: string){
+    if(!key) return "";
     return key
       .replace(/([A-Z])/g, ' $1')
       .replace(/^./, str => str.toUpperCase());
@@ -372,6 +391,7 @@ export default function useUtils() {
     getOrigin,
     search,
     formatDate,
+    UTCToLocalTIme,
     formatNature,
     replaceMatch,
     setRouteParams,

package/composables/useWorkOrder.ts

@@ -1,10 +1,12 @@
-export default function useFeedback() {
+export default function useWorkOrder() {
   const workOrders = useState<Array<TWorkOrder>>("workOrders", () => []);
   const page = useState("page", () => 1);
   const pages = useState("pages", () => 0);
   const pageRange = useState("pageRange", () => "-- - -- of --");
   const workOrder = useState<TWorkOrder>("workOrder", () => ({
     _id: "",
+    category: "",
+    categoryInfo: "",
     subject: "",
     description: "",
     createdBy: "",
@@ -49,6 +51,12 @@ export default function useFeedback() {
     }
   }
 
+  function getWorkOrderById(id: string) {
+    return useNuxtApp().$api<TWorkOrder>(`/api/work-orders/${id}`, {
+      method: "GET",
+    });
+  }
+
   function createWorkOrder(payload: TWorkOrderCreate) {
     return useNuxtApp().$api<Record<string, any>>("/api/work-orders", {
       method: "POST",
@@ -64,5 +72,6 @@ export default function useFeedback() {
     pageRange,
     createWorkOrder,
     getWorkOrders,
+    getWorkOrderById,
   };
 }

package/middleware/02.org.ts

@@ -9,7 +9,10 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 
   const { organization, org } = to.params;
 
+  // console.log('org-aut-middleware running', hexSchema.safeParse(organization).success)
+  
   if (!hexSchema.safeParse(organization || org).success) {
+    console.log('[02.org] middleware run')
     return navigateTo(
       { name: "require-organization-membership" },
       { replace: true }

package/package.json

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

package/plugins/secure-member.client.ts

@@ -1,3 +1,9 @@
+import { z } from "zod";
+
+const hexSchema = z
+  .string()
+  .regex(/^[0-9a-fA-F]{24}$/, "Invalid organization ID");
+
 export default defineNuxtPlugin(() => {
   const router = useRouter();
   const { getByUserType } = useMember();
@@ -17,17 +23,24 @@ export default defineNuxtPlugin(() => {
         (to.params.org as string) || (to.params.organization as string) || ""
     );
 
+    console.log('[secure-member-plugin', 'org', org.value)
+
+    if (!hexSchema.safeParse(org.value).success) {
+      return router.replace({ name: "require-organization-membership" });
+    }
+
     const userId = computed(() => useCookie("user").value ?? "");
 
     const { data: userMemberData, error: userMemberError } =
       await useLazyAsyncData(
-        "get-member-by-id",
+        "plugin-get-member-by-id-" + userId.value + "-" + APP + "-" + org.value,
         () => getByUserType(userId.value, APP, org.value),
         { watch: [userId] }
       );
 
     watchEffect(() => {
       if (userMemberError.value) {
+        console.log('running-secure-member-redirect-plugin')
         navigateTo(
           {
             name: "index",
@@ -37,14 +50,17 @@ export default defineNuxtPlugin(() => {
       }
     });
 
+    const roleId = ref("roleId");
+
     watchEffect(() => {
       if (userMemberData.value) {
         id.value = userMemberData.value.org ?? "";
+        roleId.value = userMemberData.value.role ?? "roleId";
       }
     });
 
     const { data: getOrgByIdReq } = await useLazyAsyncData(
-      "get-org-by-id",
+      "plugin-get-org-by-id-" + org.value,
       () => getById(org.value),
       { watch: [org] }
     );
@@ -55,12 +71,10 @@ export default defineNuxtPlugin(() => {
       }
     });
 
-    const roleId = computed(() => userMemberData.value?.role ?? "");
-
     const { data: getRoleByIdReq } = await useLazyAsyncData(
-      "get-role-by-id",
+      "plugin-get-role-by-id-" + roleId.value,
       () => getRoleById(roleId.value),
-      { watch: [roleId], immediate: false }
+      { watch: [roleId] }
     );
 
     watchEffect(() => {

package/plugins/vuetify.ts

@@ -1,5 +1,6 @@
 // import this after install `@mdi/font` package
 import "@mdi/font/css/materialdesignicons.css";
+import { VFileUpload, VFileUploadItem } from 'vuetify/labs/VFileUpload'
 
 import "vuetify/styles";
 import { createVuetify } from "vuetify";
@@ -46,6 +47,10 @@ export default defineNuxtPlugin((app) => {
         },
       },
     },
+    components: {
+      VFileUpload,
+      VFileUploadItem
+    }
   });
 
   app.vueApp.use(vuetify);

package/types/feedback.d.ts

@@ -2,6 +2,7 @@ declare type TFeedback = {
   _id: string;
   attachments?: string[];
   category: string;
+  categoryInfo?: string;
   subject: string;
   location: string;
   description: string;
@@ -19,6 +20,8 @@ declare type TFeedback = {
   serviceProvider?: string;
   assignee?: string;
   createdBy?: string;
+  workOrderNo?: string;
+  workOrderId?: string;
 };
 
 declare type TFeedbackMetadata = {

package/types/work-order.d.ts

@@ -1,6 +1,8 @@
 declare type TWorkOrder = {
   _id: string;
   subject: string;
+  category: string;
+  categoryInfo?: string;
   description: string;
   createdBy: string;
   createdByName?: string;