@iservice365/layer-common 1.0.7 → 1.0.9

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 1.0.9
+
+### Patch Changes
+
+- 681b0f4: Update dependencies - vuetify
+
+## 1.0.8
+
+### Patch Changes
+
+- 2ba3c2e: Invitation revision - add site support
+
 ## 1.0.7
 
 ### Patch Changes

package/components/Chat/Information.vue

@@ -19,7 +19,7 @@
         </v-col>
 
         <v-col cols="12" class="text-center mb-3" v-if="item">
-          <v-avatar
+          <!-- <v-avatar
             size="48"
             class="mb-1"
             v-if="!item.attachments || !item.attachments.length"
@@ -50,7 +50,33 @@
               v-for="(attachment, index) in item.attachments"
               :key="index"
             >
-              <v-img :src="attachment" cover class="w-100 h-100" />
+              <v-img :src="`/api/public/${attachment}`" cover class="w-100 h-100" />
+            </v-carousel-item>
+          </v-carousel> -->
+          <v-img
+            v-if="item.attachments.length === 1"
+            :src="`/api/public/${item.attachments[0]}`"
+            height="200"
+            cover
+            class="rounded mb-2"
+          />
+          <v-carousel
+            v-else
+            hide-delimiter-background
+            height="200"
+            class="rounded mb-2"
+            show-arrows
+            cycle
+          >
+            <v-carousel-item
+              v-for="(attachment, index) in item.attachments"
+              :key="index"
+            >
+              <v-img
+                :src="`/api/public/${attachment}`"
+                cover
+                class="w-100 h-100"
+              />
             </v-carousel-item>
           </v-carousel>
         </v-col>
@@ -58,7 +84,9 @@
         <v-col cols="12" v-if="item">
           <v-row dense class="my-1">
             <v-col cols="6" class="py-1"><strong>Category:</strong></v-col>
-            <v-col cols="6" class="py-1 text-right text-capitalize">{{ item.category }}</v-col>
+            <v-col cols="6" class="py-1 text-right text-capitalize">{{
+              item.category
+            }}</v-col>
           </v-row>
 
           <v-divider />

package/components/FeedbackDetail.vue

@@ -1,28 +1,39 @@
 <template>
-  <v-row no-gutters class="fill-height" align="stretch">
-    <v-col cols="12" md="3" class="fill-height">
-      <ChatNavigation
-        :title="'Feedbacks'"
-        :items="items"
-        @select="handleSelectFeedback"
-        @search="_getFeedbacks"
-      />
-    </v-col>
-
-    <v-col cols="12" md="6" class="fill-height">
-      <ChatMessage />
-    </v-col>
-
-    <v-col cols="12" md="3" class="fill-height">
-      <ChatInformation
-        :item="feedback"
-        :service-providers="_serviceProviders"
-        @edit="openEditDialog"
-        @mark-complete-request="showCompleteDialog = true"
-        @delete="showDeleteDialog = true"
-      />
-    </v-col>
-  </v-row>
+  <div class="feedback-detail-wrapper">
+    <v-row no-gutters class="fill-height">
+
+      <v-col cols="12" xl="3" lg="4" md="4" class="fill-height">
+        <div class="panel-container border-e">
+          <ChatNavigation
+            :title="'Feedbacks'"
+            :items="items"
+            @select="handleSelectFeedback"
+            @search="_getFeedbacks"
+          />
+        </div>
+      </v-col>
+
+
+      <v-col cols="12" xl="6" lg="5" md="5" class="fill-height">
+        <div class="panel-container border-e">
+          <ChatMessage />
+        </div>
+      </v-col>
+
+      
+      <v-col cols="12" xl="3" lg="3" md="3" class="fill-height">
+        <div class="panel-container">
+          <ChatInformation
+            :item="feedback"
+            :service-providers="_serviceProviders"
+            @edit="openEditDialog"
+            @mark-complete-request="showCompleteDialog = true"
+            @delete="showDeleteDialog = true"
+          />
+        </div>
+      </v-col>
+    </v-row>
+  </div>
 
   <FeedbackForm
     v-model="showCreateDialog"
@@ -463,3 +474,118 @@ async function submitFeedback(payload: TFeedbackUpdate) {
   }
 }
 </script>
+
+<style scoped>
+.feedback-detail-wrapper {
+  height: calc(100vh - 80px); /* Account for header and padding */
+  max-height: calc(100vh - 80px);
+  overflow: hidden;
+  position: relative;
+  background-color: rgb(var(--v-theme-surface));
+}
+
+.panel-container {
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: rgb(var(--v-theme-surface));
+}
+
+.border-e {
+  border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+
+.fill-height {
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+}
+
+/* Ensure the root row doesn't create scrolling */
+.v-row.fill-height {
+  margin: 0;
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  align-items: stretch;
+}
+
+/* Better column spacing */
+.v-col {
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Ensure responsive behavior */
+@media (max-width: 1280px) {
+  .feedback-detail-wrapper {
+    height: calc(100vh - 72px);
+    max-height: calc(100vh - 72px);
+  }
+}
+
+@media (max-width: 960px) {
+  .feedback-detail-wrapper {
+    height: calc(100vh - 64px); /* Mobile header height */
+    max-height: calc(100vh - 64px);
+  }
+  
+  .border-e {
+    border-right: none;
+    border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  }
+  
+  .v-col {
+    height: auto;
+    min-height: 300px;
+  }
+}
+
+/* Individual component styling */
+:deep(.chat-navigation) {
+  height: 100%;
+  overflow-y: auto;
+  background-color: rgb(var(--v-theme-surface));
+}
+
+:deep(.chat-message) {
+  height: 100%;
+  overflow-y: auto;
+  background-color: rgb(var(--v-theme-surface));
+}
+
+:deep(.chat-information) {
+  height: 100%;
+  overflow-y: auto;
+  background-color: rgb(var(--v-theme-surface));
+  padding: 16px;
+}
+
+/* Smooth scrollbars */
+:deep(*::-webkit-scrollbar) {
+  width: 6px;
+}
+
+:deep(*::-webkit-scrollbar-track) {
+  background: transparent;
+}
+
+:deep(*::-webkit-scrollbar-thumb) {
+  background: rgba(var(--v-border-color), 0.3);
+  border-radius: 3px;
+}
+
+:deep(*::-webkit-scrollbar-thumb:hover) {
+  background: rgba(var(--v-border-color), 0.5);
+}
+
+/* Remove default margins/padding that might cause issues */
+:deep(.v-container) {
+  padding: 0;
+  margin: 0;
+  max-width: none;
+}
+</style>

package/components/FeedbackMain.vue

@@ -424,7 +424,7 @@ async function handleFileAdded(file: File) {
 
     const uploadedId = res?.id;
     if (uploadedId) {
-      const url = `${API_DO_STORAGE_ENDPOINT}/${uploadedId}`;
+      const url = `${uploadedId}`;
       _feedback.value.attachments = _feedback.value.attachments ?? [];
       _feedback.value.attachments.push(url);
     }

package/components/Input/File.vue

@@ -60,7 +60,7 @@
           class="d-flex align-center pa-2 mr-2 mb-2 rounded bg-white border-sm"
         >
           <div class="mr-3">
-            <v-img
+            <!-- <v-img
               v-if="!localErroredImages.includes(file)"
               :src="file"
               width="40"
@@ -76,6 +76,13 @@
               height="40"
               class="rounded"
               cover
+            /> -->
+            <v-img
+              :src="getThumbnail(file)"
+              width="40"
+              height="40"
+              class="rounded"
+              cover
             />
           </div>
 
@@ -166,12 +173,13 @@ function onImageError(file: string) {
 }
 
 function getThumbnail(fileUrl: string): string {
-  if (fileUrl.endsWith(".pdf")) return "mdi-file-pdf-outline";
-  if (fileUrl.match(/\.(doc|docx)$/i))
-    return "/images/file-thumbnails/word.png";
-  if (fileUrl.match(/\.(xls|xlsx)$/i))
-    return "/images/file-thumbnails/excel.png";
-  return "/images/file-thumbnails/file.png";
+  // if (fileUrl.endsWith(".pdf")) return "mdi-file-pdf-outline";
+  // if (fileUrl.match(/\.(doc|docx)$/i))
+  //   return "/images/file-thumbnails/word.png";
+  // if (fileUrl.match(/\.(xls|xlsx)$/i))
+  //   return "/images/file-thumbnails/excel.png";
+  // return "/images/file-thumbnails/file.png";
+  return `/api/public/${fileUrl}`
 }
 
 // Modified to try to display the friendly name

package/components/InvitationForm.vue

@@ -8,7 +8,7 @@
       </v-row>
     </v-toolbar>
     <v-card-text style="max-height: 100vh; overflow-y: auto">
-      <v-form v-model="validForm" :disabled="disable">
+      <v-form v-model="validForm" ref="form" :disabled="disable">
         <v-row no-gutters>
           <v-col cols="12" class="mt-2">
             <v-row no-gutters>
@@ -17,7 +17,8 @@
                 <v-text-field
                   v-model="invite.email"
                   density="comfortable"
-                  :rules="[requiredRule]"
+                  :rules="[requiredRule, emailRule]"
+                  :loading="loading.verifyingEmail"
                 ></v-text-field>
               </v-col>
             </v-row>
@@ -32,6 +33,7 @@
                   density="comfortable"
                   :rules="[requiredRule]"
                   :items="apps"
+                  @update:model-value="handleUpdateApp"
                 ></v-autocomplete>
               </v-col>
             </v-row>
@@ -46,7 +48,24 @@
                   :items="roles"
                   item-title="name"
                   item-value="_id"
+                   :rules="[requiredRule]"
+                  density="comfortable"
+                ></v-autocomplete>
+              </v-col>
+            </v-row>
+          </v-col>
+
+
+          <v-col v-if="hasSite" cols="12">
+            <v-row no-gutters>
+              <InputLabel class="text-capitalize" title="Site" />
+              <v-col cols="12">
+                <v-autocomplete
+                  v-model="invite.site"
+                  :items="sites"
                   density="comfortable"
+                  :rules="[requiredRule]"
+                  @update:model-value="handleUpdateSite"
                 ></v-autocomplete>
               </v-col>
             </v-row>
@@ -101,6 +120,7 @@
             class="text-none"
             size="48"
             :disabled="!validForm"
+            :loading="loading.submittingForm"
             @click="submit"
           >
             Submit
@@ -126,9 +146,9 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
-  type: {
+  app: {
     type: String,
-    default: "app",
+    default: "organization",
   },
   org: {
     type: String,
@@ -156,16 +176,24 @@ const props = defineProps({
 const emit = defineEmits(["cancel", "success", "success:create-more"]);
 
 const validForm = ref(false);
+const form = ref<HTMLFormElement | null>(null)
 const app = computed(() => useRuntimeConfig().public.APP ?? "");
 
+const loading = reactive({
+  submittingForm: false,
+  verifyingEmail: false
+})
+
 const invite = ref<Record<string, any>>({
   email: "",
-  app: "organization",
+  app: "",
   role: "",
   org: "",
+  site: "",
+  siteName: "",
 });
 
-invite.value.app = app.value ?? "organization";
+invite.value.app = props.app;
 invite.value.org = props.org ?? "";
 
 if (props.mode === "edit") {
@@ -177,16 +205,65 @@ if (props.mode === "edit") {
 const { natureOfBusiness } = useLocal();
 
 const apps = computed(() => {
-  const items = natureOfBusiness.slice(1);
+  const items = [];
   items.unshift({ title: "Organization", value: "organization" });
+
+  if (props.app === "security_agency") {
+    items.push({ title: "Security Agency", value: "security_agency" });
+  }
+
+  if (props.app === "cleaning_agency") {
+    items.push({ title: "Cleaning Agency", value: "cleaning_agency" });
+  }
+
+  if (props.app === "property_manager") {
+    items.push({ title: "Property Manager", value: "property_manager" });
+  }
+
+  if (props.app === "mechanical_electrical_services") {
+    items.push({
+      title: "Mechanical & Electrical Services",
+      value: "mechanical_electrical_services",
+    });
+  }
+
   return items;
 });
 
+const hasSite = computed(() => {
+  return natureOfBusiness.map((i) => i.value).includes(invite.value.app);
+});
+
+const sites = ref<Array<Record<string, any>>>([]);
+
+const { getAll: getAllCustomerSite } = useCustomerSite();
+
+const { data: siteData, refresh: refreshSiteData } = await useLazyAsyncData(
+  "get-sites-by-org",
+  async () => await getAllCustomerSite({ org: props.org, limit: 50 }),
+  {  }
+);
+
+watchEffect(() => {
+  if (siteData.value) {
+    sites.value = siteData.value.items.map((i: any) => ({
+      title: i.name,
+      value: i.site,
+    }));
+  }
+});
+
+watchEffect(() => {
+  if (hasSite.value) {
+    refreshSiteData();
+  }
+});
+
 const roles = ref<Array<Record<string, any>>>([]);
 
 const { getRoles } = useRole();
 
-const { data: RolesData } = await useLazyAsyncData(
+const { data: RolesData, refresh: refreshRoles } = await useLazyAsyncData(
   "get-roles-by-type",
   () => getRoles({ org: props.org, type: app.value, limit: 50 }),
   { watch: [app] }
@@ -198,17 +275,17 @@ watchEffect(() => {
   }
 });
 
-watchEffect(() => {
-  if (invite.value.app) {
-    roles.value = [];
-    invite.value.role = "";
-  }
-});
+function handleUpdateApp(value: string){
+  invite.value.role = "";
+  invite.value.site = "";
+  refreshRoles();
+}
+
 
 const createMore = ref(false);
 const disable = ref(false);
 
-const { requiredRule } = useUtils();
+const { requiredRule, emailRule } = useUtils();
 
 const message = ref("");
 
@@ -219,18 +296,28 @@ function resetInvite() {
   message.value = "";
 }
 
+function handleUpdateSite(siteId: string){
+  const obj = sites.value.find( x => x?.value === siteId)
+  invite.value.siteName = obj?.title || ""
+}
+
 const { inviteUser } = useUser();
 
+
 async function submit() {
+  loading.submittingForm = true;
   try {
     await inviteUser(invite.value);
-    emit("success");
 
     if (createMore.value) {
+      form.value?.reset();
       resetInvite();
-    }
+      emit("success", false);
+    } else emit("success", true);
   } catch (error: any) {
     message.value = error.response._data.message;
+  } finally {
+    loading.submittingForm = false;
   }
 }
 

package/components/InvitationMain.vue

@@ -36,7 +36,7 @@
               <local-pagination
                 v-model="page"
                 :length="pages"
-                @update:value="_getVerifications({ search: headerSearch })"
+                @update:value="getVerifications"
               />
             </v-row>
           </template>
@@ -142,7 +142,9 @@
         title="Invite member"
         :org="org"
         @cancel="dialogMember = false"
+        @success="handleSuccess"
         @invited="getVerifications()"
+        :app="props.app"
       />
     </v-dialog>
   </v-row>
@@ -150,6 +152,10 @@
 
 <script setup lang="ts">
 const props = defineProps({
+  app: {
+    type: String,
+    default: "organization",
+  },
   route: {
     type: String,
     default: "index",
@@ -238,7 +244,8 @@ const {
     page: page.value,
     status: props.status,
     search: headerSearch.value,
-    type: "user-invite",
+    type: "user-invite,member-invite",
+    app: props.app
   })
 );
 
@@ -252,7 +259,7 @@ watchEffect(() => {
   }
 });
 
-watch([page, headerSearch], () => {
+watch([headerSearch], () => {
   getVerifications();
 });
 
@@ -282,6 +289,13 @@ async function onConfirmCancel() {
   cancelLoading.value = false;
 }
 
+function handleSuccess(closeForm: boolean) {
+  getVerifications();
+  if (closeForm) {
+    dialogMember.value = false;
+  }
+}
+
 watchEffect(() => {
   if (!props.viewInvitations) {
     useRouter().back();

package/components/TableMain.vue

@@ -4,14 +4,8 @@
     <v-col cols="12" class="mb-2" v-if="canCreate || $slots.actions">
       <v-row no-gutters>
         <slot name="actions">
-          <v-btn
-            v-if="canCreate"
-            class="text-none"
-            rounded="pill"
-            variant="tonal"
-            size="large"
-            @click="emits('create')"
-          >
+          <v-btn v-if="canCreate" class="text-none" rounded="pill" variant="tonal" size="large"
+            @click="emits('create')">
             {{ createLabel }}
           </v-btn>
         </slot>
@@ -20,13 +14,7 @@
 
     <!-- Table Card -->
     <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
-        :loading="loading"
-      >
+      <v-card width="100%" variant="outlined" border="thin" rounded="lg" :loading="loading">
         <!-- Toolbar -->
         <v-toolbar density="compact" color="grey-lighten-4">
           <template #prepend>
@@ -40,27 +28,20 @@
               <span class="mr-2 text-caption text-fontgray">
                 {{ pageRange }}
               </span>
-              <local-pagination
-                v-model="internalPage"
-                :length="pages"
-                @update:value="emits('update:page', internalPage)"
-              />
+              <local-pagination v-model="internalPage" :length="pages"
+                @update:value="emits('update:page', internalPage)" />
             </v-row>
           </template>
+
+          <template v-if="$slots.extension" #extension>
+            <slot name="extension" />
+          </template>
         </v-toolbar>
 
         <!-- Data Table -->
-        <v-data-table
-          :headers="headers"
-          :items="items"
-          :item-value="itemValue"
-          :items-per-page="itemsPerPage"
-          fixed-header
-          hide-default-footer
-          hide-default-header
-          @click:row="(_: any, data: any) => emits('row-click', data)"
-          style="max-height: calc(100vh - (200px))"
-        >
+        <v-data-table :headers="headers" :items="items" :item-value="itemValue" :items-per-page="itemsPerPage"
+          fixed-header hide-default-footer hide-default-header
+          @click:row="(_: any, data: any) => emits('row-click', data)" style="max-height: calc(100vh - (200px))">
           <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
             <slot :name="slotName" v-bind="slotProps" />
           </template>

package/composables/useLocalSetup.ts

@@ -3,7 +3,7 @@ export function useLocalSetup() {
 
   const id = useState<string | null>("memberShipOrgId", () => null);
 
-  const orgNature = useState<string | null>("orgNature", () => null);
+  const orgNature = useState<string>("orgNature", () => "");
 
   return {
     userAppRole,

package/composables/useUser.ts

@@ -5,10 +5,12 @@ export default function useUser() {
     role = "",
     name = "",
     org = "",
+    site="",
+    siteName="",
   } = {}) {
     return useNuxtApp().$api<Record<string, any>>("/api/auth/invite", {
       method: "POST",
-      body: { email, app, role, name, org },
+      body: { email, app, role, name, org, ...(site && {siteId: site}), ...(siteName && {siteName}) },
     });
   }
 
@@ -106,6 +108,12 @@ export default function useUser() {
     });
   }
 
+  function getUserByEmail(email = "") {
+    return useNuxtApp().$api<Record<string, any>>(`/api/users/email/${email}`, {
+      method: "GET"
+    });
+  }
+
   return {
     inviteUser,
     updateName,
@@ -119,5 +127,6 @@ export default function useUser() {
     createUserByInvite,
     getById,
     createUserByVerification,
+    getUserByEmail
   };
 }

package/composables/useVerification.ts

@@ -5,6 +5,7 @@ export default function useVerification() {
     search = "",
     page = 1,
     email = "",
+    app = ""
   } = {}): Promise<{
     items: TMiniVerification[];
     pages: number;
@@ -12,7 +13,7 @@ export default function useVerification() {
   }> {
     return useNuxtApp().$api("/api/verifications", {
       method: "GET",
-      query: { status, search, page, type, email },
+      query: { status, search, page, type, email, app },
     });
   }
 

package/middleware/02.org.ts

@@ -4,12 +4,12 @@ const hexSchema = z
   .string()
   .regex(/^[0-9a-fA-F]{24}$/, "Invalid organization ID");
 
-export default defineNuxtRouteMiddleware(async (to) => {
+export default defineNuxtRouteMiddleware(async (to, from) => {
   if (import.meta.server) return;
 
   const { organization, org } = to.params;
 
-  if (!hexSchema.safeParse(organization ?? org).success) {
+  if (!hexSchema.safeParse(organization || org).success) {
     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.7",
+  "version": "1.0.9",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",
@@ -20,7 +20,7 @@
     "typescript": "^5.8.3",
     "vite-plugin-vuetify": "^2.0.4",
     "vue": "latest",
-    "vuetify": "^3.7.3"
+    "vuetify": "^3.10.4"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
   "dependencies": {

package/plugins/secure-member.client.ts

@@ -6,7 +6,7 @@ export default defineNuxtPlugin(() => {
 
   const { userAppRole, id, orgNature } = useLocalSetup();
 
-  router.afterEach((to) => {
+  router.afterEach(async (to) => {
     const isMember = to.meta?.memberOnly;
 
     if (!isMember) return;
@@ -19,11 +19,12 @@ export default defineNuxtPlugin(() => {
 
     const userId = computed(() => useCookie("user").value ?? "");
 
-    const { data: userMemberData, error: userMemberError } = useLazyAsyncData(
-      "get-member-by-id",
-      () => getByUserType(userId.value, APP, org.value),
-      { watch: [userId] }
-    );
+    const { data: userMemberData, error: userMemberError } =
+      await useLazyAsyncData(
+        "get-member-by-id",
+        () => getByUserType(userId.value, APP, org.value),
+        { watch: [userId] }
+      );
 
     watchEffect(() => {
       if (userMemberError.value) {
@@ -42,7 +43,7 @@ export default defineNuxtPlugin(() => {
       }
     });
 
-    const { data: getOrgByIdReq } = useLazyAsyncData(
+    const { data: getOrgByIdReq } = await useLazyAsyncData(
       "get-org-by-id",
       () => getById(org.value),
       { watch: [org] }
@@ -56,7 +57,7 @@ export default defineNuxtPlugin(() => {
 
     const roleId = computed(() => userMemberData.value?.role ?? "");
 
-    const { data: getRoleByIdReq } = useLazyAsyncData(
+    const { data: getRoleByIdReq } = await useLazyAsyncData(
       "get-role-by-id",
       () => getRoleById(roleId.value),
       { watch: [roleId], immediate: false }

package/types/local.d.ts

@@ -7,6 +7,7 @@ declare type TToken = {
 declare type TNavigationRoute = {
   name: string;
   params?: TKeyValuePair;
+  query?: TKeyValuePair;
 };
 
 declare type TNavigationItem = {