@iservice365/layer-common 1.0.10 → 1.1.0

package/components/Input/DateTimePicker.vue

@@ -1,14 +1,14 @@
 <template>
-    <div>
-        <v-text-field ref="dateTimePickerRef" :model-value="dateTimeFormattedReadOnly" @click="openDatePicker"  placeholder="MM/DD/YYYY, HH:MM AM/PM" :rules="rules">
+    <div class="d-flex flex-column">
+        <v-text-field v-bind="$attrs" ref="dateTimePickerRef" :model-value="dateTimeFormattedReadOnly"
+            placeholder="MM/DD/YYYY, HH:MM AM/PM" :rules="rules" style="z-index: 10" @click="openDatePicker">
             <template #append-inner>
                 <v-icon icon="mdi-calendar" @click.stop="openDatePicker" />
             </template>
         </v-text-field>
         <div class="w-100 d-flex align-end ga-3 hidden-input">
-            <input ref="dateInput" type="datetime-local"  v-model="dateTime"  />
+            <input ref="dateInput" type="datetime-local" v-model="dateTime" />
         </div>
-
     </div>
 </template>
 
@@ -19,30 +19,37 @@ const prop = defineProps({
     rules: {
         type: Array as PropType<Array<any>>,
         default: () => []
-    }
+    },
 })
 
-const dateTime = defineModel<string | null>({ default: null })
+const { formatDateISO8601 } = useUtils()
+const dateTime = defineModel<string | null>({ default: null }) //2025-10-10T13:09 format 
+const dateTimeUTC = defineModel<string | null>('utc', { default: null }) // UTC format
 
 const dateTimeFormattedReadOnly = ref<string | null>(null)
 
 
 
+
 const dateInput = ref<HTMLInputElement | null>(null)
 const dateTimePickerRef = ref<HTMLInputElement | null>(null)
 
+const isInitialLoad = ref(true)
+
 function openDatePicker() {
-    dateInput.value?.showPicker()
+    setTimeout(() => {
+        dateInput.value?.showPicker?.()
+    }, 0)
 }
 
-function validate(){
+function validate() {
     (dateTimePickerRef.value as any)?.validate()
 }
 
+function convertToReadableFormat(dateStr: string): string {
 
-watch(dateTime, (dateVal) => {
-    if (!dateVal) return dateTimeFormattedReadOnly.value = null
-    const date = new Date(dateVal)
+    if (!dateStr) return "";
+    const date = new Date(dateStr)
     const options: Intl.DateTimeFormatOptions = {
         year: 'numeric',
         month: '2-digit',
@@ -52,9 +59,57 @@ watch(dateTime, (dateVal) => {
         hour12: true
     }
     const formatted = date.toLocaleString('en-US', options)
-    dateTimeFormattedReadOnly.value = formatted
-})
+    return formatted
+}
+
+function handleInitialDate(){
+    const dateDefault = dateTime.value
+    const dateUTC = dateTimeUTC.value
+    if(dateDefault){
+        dateTimeFormattedReadOnly.value = convertToReadableFormat(dateDefault)
+        const localDate = new Date(dateDefault)
+        dateTimeUTC.value = localDate.toISOString()
+    } else if (dateUTC){
+        dateTimeFormattedReadOnly.value = convertToReadableFormat(dateUTC)
+        const localDate = new Date(dateUTC)
+        dateTime.value = formatDateISO8601(localDate)
+    } else {
+        dateTimeFormattedReadOnly.value = null
+    }
+}
+
 
+watch(dateTime, (dateVal) => {
+    if (isInitialLoad.value) return // ignore the first run
+    if (!dateVal) {
+        dateTimeFormattedReadOnly.value = null;
+        dateTimeUTC.value = null
+        return
+    }
+
+    dateTimeFormattedReadOnly.value = convertToReadableFormat(dateVal)
+    const localDate = new Date(dateVal)
+    dateTimeUTC.value = localDate.toISOString()
+
+}, { immediate: false })
+
+
+onMounted(async () => {
+
+    handleInitialDate()
+    await nextTick()
+    isInitialLoad.value = false
+
+    // Wait until Vuetify renders its internal input
+    const nativeInput = dateTimePickerRef.value?.$el?.querySelector('input')
+    if (nativeInput) {
+        nativeInput.addEventListener('click', (e: MouseEvent) => {
+            e.stopPropagation()
+            openDatePicker()
+        })
+    }
+    
+})
 
 
 defineExpose({
@@ -66,6 +121,6 @@ defineExpose({
 .hidden-input {
     opacity: 0;
     height: 0;
-    width: 0;
+    width: 1px;
 }
 </style>

package/components/Input/File.vue

@@ -1,7 +1,15 @@
 <template>
   <div>
     <v-row class="mb-4" align="center" no-gutters>
-      <v-col cols="10" class="pr-2">
+      <v-col
+        cols="10"
+        class="pr-2"
+        v-if="
+          props.createdFrom === 'feedback' && props.attachments.length > 0
+            ? false
+            : true
+        "
+      >
         <div
           class="d-flex align-center justify-center pa-4 rounded-lg border-dashed border border-grey"
           @dragover.prevent
@@ -37,7 +45,15 @@
         </div>
       </v-col>
 
-      <v-col cols="2" class="d-flex justify-center">
+      <v-col
+        cols="2"
+        class="d-flex justify-center"
+        v-if="
+          props.createdFrom === 'feedback' && props.attachments.length > 0
+            ? false
+            : true
+        "
+      >
         <v-btn
           color="primary-button"
           min-width="55"
@@ -90,7 +106,15 @@
             {{ getDisplayName(file) }}
           </div>
 
-          <v-icon size="small" @click.stop="$emit('delete', file)">
+          <v-icon
+            size="small"
+            @click.stop="$emit('delete', file)"
+            v-if="
+              props.createdFrom === 'feedback' && props.attachments.length > 0
+                ? false
+                : true
+            "
+          >
             mdi-trash-can-outline
           </v-icon>
         </v-col>
@@ -104,6 +128,7 @@ const props = defineProps<{
   attachments: string[];
   erroredImages?: string[];
   maxFiles?: number;
+  createdFrom: string;
 }>();
 
 const emit = defineEmits<{
@@ -179,7 +204,7 @@ function getThumbnail(fileUrl: string): string {
   // if (fileUrl.match(/\.(xls|xlsx)$/i))
   //   return "/images/file-thumbnails/excel.png";
   // return "/images/file-thumbnails/file.png";
-  return `/api/public/${fileUrl}`
+  return `/api/public/${fileUrl}`;
 }
 
 // Modified to try to display the friendly name

package/components/Input/FileV2.vue

@@ -0,0 +1,121 @@
+<template>
+    <v-row no-gutters class="w-100 pb-5" @click="resetErrorMessage">
+        <v-file-upload v-model="uploadFiles" density="compact" @update:model-value="handleUpdateValue"
+            :loading="processing" :disabled="processing" :height="height" title="Upload Images" accept="image/*"
+            name="upload_images" class="text-caption w-100" clearable :multiple="multiple">
+            <template v-slot:item="{ props: itemProps, file }">
+                <v-file-upload-item v-bind="itemProps" lines="one" nav>
+                    <template v-slot:prepend>
+                        <v-avatar size="32" rounded></v-avatar>
+                    </template>
+
+                    <template v-slot:clear="{ props: clearProps }">
+                        <v-btn color="primary" @click="handleRemove(file)"></v-btn>
+                    </template>
+                </v-file-upload-item>
+            </template>
+        </v-file-upload>
+        <v-row no-gutters class="w-100" v-if="errorMessage">
+      <p class="text-error w-100 text-center text-subtitle-2">{{ errorMessage }}</p>
+    </v-row>
+    </v-row>
+</template>
+
+<script setup lang="ts">
+
+const prop = defineProps({
+    height: {
+        type: Number || String,
+        default: 68
+    },
+    multiple: {
+        type: Boolean,
+        default: false
+    },
+    maxLength: {
+        type: Number,
+        default: 10
+    }
+
+
+})
+
+const { addFile, deleteFile, getFileUrl, urlToFile } = useFile()
+
+const uploadFiles = ref<File[]>([])
+const filesCollection = defineModel<{ file: File, id: string }[]>({required: true, default: []}) // files collection array
+const showCameraDialog = ref(false)
+const errorMessage = ref('');
+const processing = ref(false)
+
+const video = ref<HTMLVideoElement>()
+const canvas = ref<HTMLCanvasElement>()
+const cameraFacingMode = ref('environment')
+
+
+async function handleRemove(removedFile: File) {
+    const fileKey = (f: File) => `${f.name}_${f.size}_${f.lastModified}`
+    const arr = filesCollection.value
+    const fileId = arr.find(item => fileKey(item.file) === fileKey(removedFile))?.id
+
+    uploadFiles.value = uploadFiles.value.filter(f => fileKey(f) !== fileKey(removedFile))
+    filesCollection.value = arr.filter(item => item.id !== fileId)
+}
+
+async function handleUpdateValue(value: File[]) {
+    await nextTick()
+    const max = prop.maxLength
+    const existingLength = filesCollection.value.length
+    errorMessage.value = ''
+    if ((existingLength + value.length) > max) {
+        value = value.slice(0, (max - existingLength))
+        errorMessage.value = `Max value of allowed image is ${max}`
+    }
+    uploadFiles.value = []
+    processing.value = true
+    // Determine which files are newly added or removed
+    const fileKey = (f: File) => `${f.name}_${f.size}_${f.lastModified}`
+
+    const arr = filesCollection.value
+    const collectionKeys = arr.map(x => fileKey(x.file))
+    const addedFiles = value.filter(f => !collectionKeys.includes(fileKey(f)))
+
+    // Upload new files
+    processing.value = true
+    for (const file of addedFiles) {
+        try {
+            const res = await addFile(file) // expected to return { id, url } or similar
+            if (res?.id) {
+                filesCollection.value.push({ file, id: res?.id })
+            }
+        } catch (err) {
+            console.error("Upload failed", err)
+            errorMessage.value = `Failed to upload ${file.name}`
+        } finally {
+            processing.value = false
+            uploadFiles.value = filesCollection.value.map(x => x.file)
+        }
+    }
+
+}
+
+function resetErrorMessage(){
+    errorMessage.value = '';
+    
+}
+
+onMounted(() => {
+    filesCollection.value = []
+})
+</script>
+
+<style scoped>
+* :deep(.v-file-upload-title) {
+    font-size: 1rem;
+    font-weight: 500;
+}
+
+* :deep(.v-file-upload-items) {
+    min-width: 100%;
+}
+</style>

package/components/InvitationForm.vue

@@ -214,16 +214,16 @@ const apps = computed(() => {
     items.push({ title: "Security Agency", value: _org });
   }
 
-  const _cleaning = "cleaning_agency";
+  const _cleaning = "cleaning_services";
 
   if (props.app === _cleaning || orgNature.value === _cleaning) {
-    items.push({ title: "Cleaning Agency", value: _cleaning });
+    items.push({ title: "Cleaning Services", value: _cleaning });
   }
 
-  const _property = "property_manager";
+  const _property = "property_management_agency";
 
   if (props.app === _property || orgNature.value === _property) {
-    items.push({ title: "Property Manager", value: _property });
+    items.push({ title: "Property Management Agency", value: _property });
   }
 
   const _mechanical = "mechanical_electrical_services";
@@ -247,7 +247,7 @@ const sites = ref<Array<Record<string, any>>>([]);
 const { getAll: getAllCustomerSite } = useCustomerSite();
 
 const { data: siteData, refresh: refreshSiteData } = await useLazyAsyncData(
-  "get-sites-by-org",
+  "get-sites-by-org-" + props.org,
   async () => await getAllCustomerSite({ org: props.org, limit: 50 })
 );
 

package/components/Layout/Header.vue

@@ -1,86 +1,39 @@
 <template>
   <v-app-bar scroll-behavior="elevate" scroll-threshold="200">
-    <v-app-bar-nav-icon
-      v-if="!props.hideNavIcon"
-      @click="drawer = !drawer"
-    ></v-app-bar-nav-icon>
+    <v-app-bar-nav-icon v-if="!props.hideNavIcon" @click="drawer = !drawer"></v-app-bar-nav-icon>
 
     <template #append>
-      <v-btn
-        icon="mdi-theme-light-dark"
-        variant="text"
-        class="mx-2"
-        @click="toggleTheme"
-      />
+      <v-btn icon="mdi-theme-light-dark" variant="text" class="mx-2" @click="toggleTheme" />
 
       <v-menu offset="10px" :close-on-content-click="false">
         <template #activator="{ props }">
           <v-btn fab variant="text" icon v-bind="props" class="mx-2">
-            <v-avatar color="surface-variant" size="42">
-              <v-img
-                v-if="currentUser?.profile"
-                :src="profile"
-                width="42"
-                height="42"
-              />
-
-              <span v-else class="text-h5">{{ getNameInitials(name) }}</span>
-            </v-avatar>
+            <AvatarMain :image-src="currentUser?.profile" :name="name" />
           </v-btn>
         </template>
 
-        <v-card
-          width="350"
-          max-height="600px"
-          elevation="2"
-          rounded="xl"
-          class="pa-4"
-        >
+        <v-card width="350" max-height="600px" elevation="2" rounded="xl" class="pa-4">
           <v-row no-gutters>
             <v-col cols="12">
               <v-row no-gutters justify="center">
-                <v-avatar color="surface-variant" size="75">
-                  <v-img
-                    v-if="currentUser?.profile"
-                    :src="profile"
-                    width="75"
-                    height="75"
-                  />
-
-                  <span v-else class="text-h5">{{
-                    getNameInitials(name)
-                  }}</span>
-                </v-avatar>
+               <AvatarMain :image-src="currentUser?.profile" :name="name" />
               </v-row>
             </v-col>
 
             <v-col cols="12" class="text-center mt-2 mb-4">
-              {{ currentUser?.firstName }} {{ currentUser?.lastName }}
+              {{ name }}
             </v-col>
 
             <v-col cols="12" class="mb-3">
-              <v-btn
-                v-if="APP_NAME.toLowerCase() !== 'account'"
-                block
-                rounded="xl"
-                variant="tonal"
-                size="x-large"
-                class="text-none text-subtitle-1 font-weight-regular"
-                @click="redirect(APP_ACCOUNT, 'home')"
-              >
+              <v-btn v-if="APP_NAME.toLowerCase() !== 'account'" block rounded="xl" variant="tonal" size="x-large"
+                class="text-none text-subtitle-1 font-weight-regular" @click="redirect(APP_ACCOUNT, 'home')">
                 Manage Account
               </v-btn>
             </v-col>
 
             <v-col cols="12">
-              <v-btn
-                block
-                rounded="xl"
-                variant="tonal"
-                size="x-large"
-                class="text-none text-subtitle-1 font-weight-regular"
-                @click="logout()"
-              >
+              <v-btn block rounded="xl" variant="tonal" size="x-large"
+                class="text-none text-subtitle-1 font-weight-regular" @click="logout()">
                 Logout
               </v-btn>
             </v-col>
@@ -133,17 +86,20 @@ function logout() {
 }
 
 const name = computed(() => {
-  let name = "";
-  if (currentUser.value?.firstName) {
-    name = currentUser.value.firstName;
-  }
+  const user = currentUser.value;
+  if(!user) return "";
 
-  if (currentUser.value?.lastName) {
-    name += ` ${currentUser.value.lastName}`;
-  }
+  const first = user?.firstName?.trim() || ""
+  const last = user?.lastName?.trim() || ""
+  const full = [first, last].filter(Boolean).join(" ")
+
+  if(full) return full;
+
+  const alternative = user?.name?.trim();
+  return alternative || ""
+
+})
 
-  return name;
-});
 
 const { getNameInitials } = useUtils();
 </script>

package/components/Layout/NavigationDrawer.vue

@@ -15,6 +15,7 @@
           v-if="navigationItem.children?.length"
           :title="navigationItem.title"
           :icon="navigationItem.icon"
+          :route="navigationItem.route"
           :children="navigationItem.children"
         />
 

package/components/NavigationItem.vue

@@ -1,7 +1,12 @@
 <template>
   <v-list-group v-if="children && children.length">
-    <template #activator="{ props }">
-      <v-list-item v-bind="props" :prepend-icon="icon" class="text-subtitle-2">
+    <template #activator="{ props: groupProps }">
+      <v-list-item
+        v-bind="groupProps"
+        :prepend-icon="icon"
+        class="text-subtitle-2"
+        @click.stop="onParentClick"
+      >
         {{ title }}
       </v-list-item>
     </template>
@@ -17,8 +22,7 @@
   </v-list-group>
 
   <v-list-item
-    v-if="props.route && props.route.name"
-    :key="props.name"
+    v-else-if="props.route && props.route.name"
     :prepend-icon="icon"
     :to="props.route"
     class="text-subtitle-2"
@@ -27,8 +31,7 @@
   </v-list-item>
 
   <v-list-item
-    v-if="props.link"
-    :key="props.name"
+    v-else-if="props.link"
     :prepend-icon="icon"
     :href="props.link"
     class="text-subtitle-2"
@@ -71,4 +74,10 @@ const props = defineProps({
     default: "",
   },
 });
+
+function onParentClick() {
+  if (props.route && props.route.name) {
+    navigateTo(props.route);
+  }
+}
 </script>

package/components/TableMain.vue

@@ -16,7 +16,7 @@
     <v-col cols="12">
       <v-card width="100%" variant="outlined" border="thin" rounded="lg" :loading="loading">
         <!-- Toolbar -->
-        <v-toolbar density="compact" color="grey-lighten-4">
+        <v-toolbar density="compact" color="grey-lighten-4" :extension-height="extensionHeight">
           <template #prepend>
             <v-btn fab icon density="comfortable" @click="emits('refresh')">
               <v-icon>mdi-refresh</v-icon>
@@ -34,18 +34,20 @@
           </template>
 
           <template v-if="$slots.extension" #extension>
-            <slot name="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
+          fixed-header hide-default-footer :hide-default-header="!showHeader"
           @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>
         </v-data-table>
+        <slot  name="footer"/>
       </v-card>
     </v-col>
   </v-row>
@@ -93,6 +95,14 @@ const props = defineProps({
     type: String,
     default: "-- - -- of --",
   },
+  showHeader: {
+    type: Boolean,
+    default: false
+  },
+  extensionHeight: {
+    type: Number,
+    default: 50
+  }
 });
 
 const emits = defineEmits(["create", "refresh", "update:page", "row-click"]);
@@ -105,3 +115,5 @@ watch(
   }
 );
 </script>
+
+<style scoped></style>

package/components/WorkOrder/Create.vue

@@ -10,6 +10,7 @@
       :attachments="displayedAttachments"
       :errored-images="localErroredImages"
       :max-files="maxFiles"
+      :created-from="props.createdFrom"
       @add="handleFileAdded"
       @delete="deleteFile"
       @errored="onImageError"
@@ -22,6 +23,11 @@
       v-model="localWorkOrder.subject"
       class="mb-1"
       dense
+      :readonly="
+        props.createdFrom === 'feedback' && localWorkOrder.subject !== ''
+          ? true
+          : false
+      "
     />
 
     <v-autocomplete
@@ -34,7 +40,16 @@
       variant="outlined"
       density="compact"
       class="mb-2"
-      clearable
+      :clearable="
+        props.createdFrom === 'feedback' && localWorkOrder.category !== ''
+          ? false
+          : true
+      "
+      :readonly="
+        props.createdFrom === 'feedback' && localWorkOrder.category !== ''
+          ? true
+          : false
+      "
     />
 
     <v-checkbox
@@ -86,6 +101,11 @@
       v-model="localWorkOrder.location"
       class="mt-1"
       dense
+      :readonly="
+        props.createdFrom === 'feedback' && localWorkOrder.location !== ''
+          ? true
+          : false
+      "
     />
 
     <v-textarea
@@ -117,6 +137,7 @@
 <script setup lang="ts">
 const props = defineProps<{
   modelValue: boolean;
+  createdFrom: string;
   workOrder: TWorkOrderCreate & { specificLocation?: string };
   isEditMode: boolean;
   loading: boolean;