@7365admin1/layer-common 1.11.40 → 1.11.42

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @iservice365/layer-common
 
+## 1.11.42
+
+### Patch Changes
+
+- e11278e: updates and fixes
+
+## 1.11.41
+
+### Patch Changes
+
+- bc096ed: Fix navigation not get children item
+- 5031c18: Update Vehicle Management
+
 ## 1.11.40
 
 ### Patch Changes

package/components/AccessCardPreviewDialog.vue

@@ -5,6 +5,96 @@
     :site-id="siteId"
   />
 
+  <!-- Assign to Person Dialog -->
+  <v-dialog :model-value="showAssignForm" width="420" persistent>
+    <v-card width="100%">
+      <v-toolbar density="compact" color="surface">
+        <v-row no-gutters class="fill-height px-4" align="center">
+          <span class="font-weight-bold">Assign Card to Person</span>
+        </v-row>
+      </v-toolbar>
+
+      <v-card-text class="pa-4">
+        <div class="text-caption text-grey mb-4">
+          Card: <strong class="text-body-2 text-black">{{ selectedCardInUnit?.cardNo }}</strong>
+        </div>
+
+        <!-- Person Type Filter -->
+        <div class="text-caption font-weight-bold mb-1 text-uppercase text-grey-darken-1">Person Type</div>
+        <v-btn-toggle
+          v-model="assignPersonType"
+          color="primary"
+          density="compact"
+          variant="outlined"
+          rounded="pill"
+          class="mb-4"
+        >
+          <v-btn value="" size="small" class="text-none px-3">All</v-btn>
+          <v-btn value="owner" size="small" class="text-none px-3">Unit Owner</v-btn>
+          <v-btn value="resident" size="small" class="text-none px-3">Resident</v-btn>
+          <v-btn value="tenant" size="small" class="text-none px-3">Tenant</v-btn>
+        </v-btn-toggle>
+
+        <!-- Person Selector -->
+        <div class="text-caption font-weight-bold mb-1 text-uppercase text-grey-darken-1">
+          Person <span class="text-error">*</span>
+        </div>
+        <v-autocomplete
+          v-model="assignPerson"
+          :items="filteredPeopleItems"
+          density="compact"
+          item-title="name"
+          item-value="_id"
+          hide-details="auto"
+          placeholder="Select person..."
+          persistent-placeholder
+          :loading="peopleLoading"
+          return-object
+          no-data-text="No residents or tenants found for this unit"
+        >
+          <template #item="{ props: itemProps, item }">
+            <v-list-item v-bind="itemProps" :subtitle="personTypeLabel(item.raw)" />
+          </template>
+          <template #selection="{ item }">
+            <span>{{ item.raw.name }}</span>
+            <v-chip size="x-small" class="ml-2" color="grey" variant="tonal">
+              {{ personTypeLabel(item.raw) }}
+            </v-chip>
+          </template>
+        </v-autocomplete>
+      </v-card-text>
+
+      <v-toolbar density="compact">
+        <v-row no-gutters>
+          <v-col cols="6" class="pa-0">
+            <v-btn
+              block
+              variant="text"
+              class="text-none"
+              height="48"
+              @click="cancelAssign"
+            >
+              Cancel
+            </v-btn>
+          </v-col>
+          <v-col cols="6" class="pa-0">
+            <v-btn
+              block
+              variant="flat"
+              color="black"
+              class="text-none"
+              height="48"
+              :disabled="!assignPerson"
+              @click="confirmAssign"
+            >
+              Assign
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-toolbar>
+    </v-card>
+  </v-dialog>
+
   <v-dialog :model-value="modelValue" width="450" persistent>
     <v-card width="100%">
       <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
@@ -211,6 +301,14 @@
                 </v-btn>
               </template>
               <v-list class="pa-0">
+                <v-list-item
+                  v-if="canAssignToPerson && isSelectedCardAvailable"
+                  @click="openAssignForm"
+                >
+                  <v-list-item-title class="text-subtitle-2">
+                    Assign to Person
+                  </v-list-item-title>
+                </v-list-item>
                 <v-list-item
                   :disabled="!isSelectedCardAssignedPhysical"
                   @click="emit('replace')"
@@ -270,6 +368,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  canAssignToPerson: {
+    type: Boolean,
+    default: true,
+  },
   isSelectedCardAssignedPhysical: {
     type: Boolean,
     default: false,
@@ -289,9 +391,26 @@ const emit = defineEmits<{
   "update:selectedCardInUnit": [value: Record<string, any> | null];
   replace: [];
   delete: [];
+  "assign-to-person": [{ card: Record<string, any> | null; person: Record<string, any> | null }];
 }>();
 
+const { getPeopleByUnit: _getPeopleByUnit } = usePeople();
+
 const historyDialog = ref(false);
+const showAssignForm = ref(false);
+const assignPersonType = ref<string>("");
+const assignPerson = ref<Record<string, any> | null>(null);
+const peopleItems = ref<Record<string, any>[]>([]);
+const peopleLoading = ref(false);
+
+const isSelectedCardAvailable = computed(() => {
+  if (!props.selectedCardInUnit?._id) return false;
+  const id = props.selectedCardInUnit._id;
+  return [
+    ...(props.unit?.available?.physical ?? []),
+    ...(props.unit?.available?.non_physical ?? []),
+  ].some((c) => c._id === id);
+});
 
 const isSelectedCardDeletable = computed(() => {
   if (!props.selectedCardInUnit?._id) return false;
@@ -304,6 +423,51 @@ const isSelectedCardDeletable = computed(() => {
   ].some((c) => c._id === id);
 });
 
+const filteredPeopleItems = computed(() => {
+  if (!assignPersonType.value) return peopleItems.value;
+  if (assignPersonType.value === "owner") return peopleItems.value.filter((p) => p.isOwner);
+  return peopleItems.value.filter((p) => p.type === assignPersonType.value && !p.isOwner);
+});
+
+const personTypeLabel = (person: Record<string, any>) => {
+  if (person.isOwner) return "Unit Owner";
+  if (person.type === "resident") return "Resident";
+  if (person.type === "tenant") return "Tenant";
+  return person.type ?? "";
+};
+
+async function openAssignForm() {
+  showAssignForm.value = true;
+  assignPerson.value = null;
+  assignPersonType.value = "";
+  peopleItems.value = [];
+
+  if (!props.unit?._id) return;
+  peopleLoading.value = true;
+  try {
+    const res = await _getPeopleByUnit(props.unit._id);
+    peopleItems.value = res?.data ?? [];
+  } catch {
+    peopleItems.value = [];
+  } finally {
+    peopleLoading.value = false;
+  }
+}
+
+function cancelAssign() {
+  showAssignForm.value = false;
+  assignPerson.value = null;
+  assignPersonType.value = "";
+}
+
+function confirmAssign() {
+  emit("assign-to-person", {
+    card: props.selectedCardInUnit,
+    person: assignPerson.value,
+  });
+  cancelAssign();
+}
+
 function toggleCard(card: Record<string, any>) {
   emit(
     "update:selectedCardInUnit",

package/components/AttachmentsViewer.vue

@@ -6,7 +6,8 @@
 
                 <!-- Loading Skeleton -->
                 <template v-if="loading && files?.length > 0">
-                    <v-card v-for="(file, index) in files" :key="index" height="50px" flat border="sm black" class="mb-2">
+                    <v-card v-for="(file, index) in files" :key="index" height="50px" flat border="sm black"
+                        class="mb-2">
                         <v-skeleton-loader type="list-item" class="mb-2" />
                     </v-card>
                 </template>
@@ -56,7 +57,7 @@
                                     </template>
                                     <v-list-item-title class="text-body-2">{{ item.file.name }}</v-list-item-title>
                                     <v-list-item-subtitle class="text-caption">{{ item.mimeType
-                                    }}</v-list-item-subtitle>
+                                        }}</v-list-item-subtitle>
                                     <template #append>
                                         <v-icon size="16" color="grey-lighten-1">mdi-eye-outline</v-icon>
                                     </template>
@@ -81,7 +82,7 @@
                                     </template>
                                     <v-list-item-title class="text-body-2">{{ item.file.name }}</v-list-item-title>
                                     <v-list-item-subtitle class="text-caption">{{ item.mimeType
-                                    }}</v-list-item-subtitle>
+                                        }}</v-list-item-subtitle>
                                     <template #append>
                                         <v-icon size="16" color="grey-lighten-1">mdi-open-in-new</v-icon>
                                     </template>
@@ -200,26 +201,54 @@ watchEffect(async () => {
     for (const item of (props.files || [])) {
         // Handle building files format: { id, name }
         if (item.id && item.name && !item.file) {
+            let file: File = new File([], item.name);
             let mimeType = 'application/octet-stream';
+
             try {
-                const fileMeta = await getFileById(item.id) as any;
-                const apiMimeType = fileMeta?.data?.mimeType || fileMeta?.mimeType;
-                // Use API mime type only if it's not generic
-                if (apiMimeType && apiMimeType !== 'application/octet-stream') {
-                    mimeType = apiMimeType;
-                } else {
-                    // Fallback to filename-based detection
+                // Try to get the actual file with proper MIME type detection from blob
+                const fileUrl = getFileUrl(item.id);
+                file = await urlToFile(fileUrl, item.name);
+                mimeType = file.type || 'application/octet-stream';
+
+                // If blob detection returned generic type, try API metadata or filename
+                if (mimeType === 'application/octet-stream') {
+                    try {
+                        const fileMeta = await getFileById(item.id) as any;
+                        const apiMimeType = fileMeta?.data?.mimeType || fileMeta?.mimeType;
+                        if (apiMimeType && apiMimeType !== 'application/octet-stream') {
+                            mimeType = apiMimeType;
+                        } else {
+                            const ext = item.name?.split('.').pop()?.toLowerCase();
+                            mimeType = inferMimeType(ext);
+                        }
+                    } catch {
+                        // Fallback to filename-based detection
+                        const ext = item.name?.split('.').pop()?.toLowerCase();
+                        mimeType = inferMimeType(ext);
+                    }
+                }
+            } catch {
+                // Fallback: try API metadata
+                try {
+                    const fileMeta = await getFileById(item.id) as any;
+                    const apiMimeType = fileMeta?.data?.mimeType || fileMeta?.mimeType;
+                    if (apiMimeType && apiMimeType !== 'application/octet-stream') {
+                        mimeType = apiMimeType;
+                    } else {
+                        // Fallback to filename-based detection
+                        const ext = item.name?.split('.').pop()?.toLowerCase();
+                        mimeType = inferMimeType(ext);
+                    }
+                } catch {
+                    // Final fallback: infer from filename
                     const ext = item.name?.split('.').pop()?.toLowerCase();
                     mimeType = inferMimeType(ext);
                 }
-            } catch {
-                // Fallback: infer MIME type from file name
-                const ext = item.name?.split('.').pop()?.toLowerCase();
-                mimeType = inferMimeType(ext);
             }
+
             processedFiles.push({
                 _id: item.id,
-                file: new File([], item.name, { type: mimeType }),
+                file,
                 preview: item.preview ?? false,
                 mimeType
             });

package/components/BulletinBoardForm.vue

@@ -52,12 +52,12 @@
 
                     <v-col cols="12">
                         <InputLabel class="text-capitalize" title="Start Date" required />
-                        <InputDateTimePicker v-model:utc="bulletinForm.startDate" :rules="[validStartDateRule]" />
+                        <InputDateTimePicker v-model:utc="bulletinForm.startDate" :rules="[validStartDateRule]"/>
                     </v-col>
 
                     <v-col cols="12" v-if="!bulletinForm.noExpiration">
                         <InputLabel class="text-capitalize" title="End Date" required />
-                        <InputDateTimePicker v-model:utc="bulletinForm.endDate" :rules="[validExpiryDateRule]" />
+                        <InputDateTimePicker v-model:utc="bulletinForm.endDate" :rules="[validExpiryDateRule]" :min="today" />
                     </v-col>
 
                     <v-col cols="12">
@@ -103,6 +103,15 @@
 </template>
 
 <script setup lang="ts">
+const today = computed(() => {
+    const d = new Date()
+    const yyyy = d.getFullYear()
+    const mm = String(d.getMonth() + 1).padStart(2, '0')
+    const dd = String(d.getDate()).padStart(2, '0')
+    console.log('${yyyy}-${mm}-${dd}',`${yyyy}-${mm}-${dd}`)
+    return `${yyyy}-${mm}-${dd}`
+})
+
 const prop = defineProps({
     siteId: {
         type: String,

package/components/BulletinBoardManagement.vue

@@ -214,6 +214,7 @@ function eventStatusFormat(status: any) {
 
 const tabOptions = [
     { name: "Active", status: "active" },
+    { name: "Upcoming", status: "upcoming" },
     { name: "Expired", status: "expired" },
 ];
 
@@ -332,7 +333,7 @@ watch([searchInput], ([search]) => {
 
 onMounted(() => {
     const statusQuery = (useRoute()?.query?.status)
-    status.value = (statusQuery === "active" || statusQuery === "expired") ? statusQuery : "active"
+    status.value = (statusQuery === "active" || statusQuery === "upcoming" || statusQuery === "expired") ? statusQuery : "active"
 })
 
 </script>

package/components/ClientMain.vue

@@ -34,8 +34,7 @@
 
         <!-- ACTIONS -->
         <template #actions>
-          <v-btn v-if="tab !== 'suspended'" class="text-none" rounded="pill" variant="tonal" size="large"
-            @click="openInviteDialog">
+          <v-btn class="text-none" rounded="pill" variant="tonal" size="large" @click="openInviteDialog">
             Invite Client
           </v-btn>
         </template>
@@ -71,7 +70,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref } from 'vue'
 import useOrg from '../composables/useOrg'
 import useVerification from '../composables/useVerification'
 import useRole from '../composables/useRole'
@@ -82,7 +81,7 @@ import useSubscription from '../composables/useSubscription'
 const tab = ref<'active' | 'suspended' | 'pending'>('active')
 const dialog = ref(false)
 
-const { getAll } = useOrg()
+const { getAllV2 } = useOrg()
 const { getVerifications, cancelUserInvitation } = useVerification()
 const { getCustomerSites: getCustomerSitesByOrgId } = useCustomerSite()
 const { getByOrgId: getSubscriptionByOrgId } = useSubscription()
@@ -112,6 +111,7 @@ const APP_LIST = [
 /* ================= HEADERS ================= */
 const orgHeaders = [
   { title: 'Organization Name', key: 'name' },
+  { title: 'Email', key: 'email' },
   { title: 'Sites', key: 'sites' },
   { title: 'Plan Type', key: 'planType' },
   { title: 'Billing Cycle', key: 'billingCycle' },
@@ -143,9 +143,22 @@ const pageRange = computed(() => {
 })
 
 /* ================= HELPERS ================= */
-function formatDate(date?: string) {
-  if (!date) return '-'
-  return new Date(date).toLocaleDateString('en-US')
+function formatDate(date?: string | Date) {
+  if (date == null || date === '') return '-'
+  const d = typeof date === 'object' && date instanceof Date ? date : new Date(date as string)
+  if (Number.isNaN(d.getTime())) return '-'
+  return d.toLocaleDateString('en-US')
+}
+
+/** Subscription document không luôn có `paidType`; fallback theo type/description. */
+function planTypeLabel(sub: Record<string, any>) {
+  if (!sub) return '-'
+  if (sub.paidType) return String(sub.paidType)
+  if (sub.type === 'organization') return 'Organization'
+  if (sub.type === 'affiliate') return 'Affiliate'
+  const desc = String(sub.description || '').trim()
+  if (desc) return desc.length > 48 ? `${desc.slice(0, 45)}…` : desc
+  return '-'
 }
 
 async function resolveRoleName(id: string) {
@@ -159,10 +172,11 @@ async function resolveRoleName(id: string) {
 const limit = ref(10)
 /* ================= FETCH ================= */
 async function fetchActive() {
-  const res = await getAll({
+  const res = await getAllV2({
     page: page.value,
     search: search.value,
     limit: limit.value,
+    status: 'active',
   })
 
   const orgs = res?.data?.items || res?.items || []
@@ -189,7 +203,7 @@ async function fetchActive() {
         const subscription = subRes?.data || subRes
 
         if (subscription) {
-          planType = subscription?.paidType || '-'
+          planType = planTypeLabel(subscription)
           billingCycle = subscription?.billingCycle || '-'
           subscriptionStart = formatDate(subscription?.createdAt)
           subscriptionEnd = formatDate(subscription?.nextBillingDate)
@@ -207,6 +221,7 @@ async function fetchActive() {
         subscriptionStart,
         subscriptionEnd,
         status: org?.status || 'active',
+        actions: '—',
       }
     })
   )
@@ -225,10 +240,11 @@ async function fetchActive() {
 }
 
 async function fetchSuspended() {
-  const res = await getAll({
+  const res = await getAllV2({
     page: page.value,
     search: search.value,
-    // status: 'suspended',
+    limit: limit.value,
+    status: 'suspended',
   })
   const orgs = res?.data?.items || res?.items || []
 
@@ -252,7 +268,7 @@ async function fetchSuspended() {
         const subRes = await getSubscriptionByOrgId(org._id)
         const subscription = subRes?.data || subRes
         if (subscription) {
-          planType = subscription?.paidType || '-'
+          planType = planTypeLabel(subscription)
           billingCycle = subscription?.billingCycle || '-'
           subscriptionStart = formatDate(subscription?.createdAt)
           subscriptionEnd = formatDate(subscription?.nextBillingDate)
@@ -262,7 +278,7 @@ async function fetchSuspended() {
       }
 
       return {
-        _id: org._id,
+        _id: `${org._id}-${page.value}`,
         ...org,
         sites: `${sitesCount} Sites`,
         planType,
@@ -270,17 +286,17 @@ async function fetchSuspended() {
         subscriptionStart,
         subscriptionEnd,
         status: org?.status || 'suspended',
+        actions: '—',
       }
     })
   )
 
+  items.value = []
+  await nextTick()
   items.value = [...mapped]
-
-pages.value = res?.pages || 1
-
-const match = res?.pageRange?.match(/of\s+(\d+)/i)
-
-totalItems.value = match ? Number(match[1]) : mapped.length
+  pages.value = res?.pages || 1
+  const match = res?.pageRange?.match(/of\s+(\d+)/i)
+  totalItems.value = match ? Number(match[1]) : mapped.length
 }
 
 async function fetchPending() {
@@ -322,9 +338,7 @@ async function fetchData() {
       await fetchActive()
     }
     else if (tab.value === 'suspended') {
-      items.value = []
-      pages.value = 1
-      totalItems.value = 0
+      await fetchSuspended()
     }
     else {
       await fetchPending()

package/components/Input/DateTimePicker.vue

@@ -7,7 +7,7 @@
             </template>
         </v-text-field>
         <div class="w-100 d-flex align-end ga-3 hidden-input">
-            <input ref="dateInput" :type="inputType" v-model="dateTime" />
+            <input ref="dateInput" :type="inputType" v-model="dateTime" :min="minValue" />
         </div>
     </div>
 </template>
@@ -27,6 +27,10 @@ const prop = defineProps({
     dateOnly: {
         type: Boolean,
         default: false
+    },
+    min: {
+        type: String,
+        default: undefined
     }
 })
 
@@ -36,6 +40,15 @@ const dateTimeUTC = defineModel<string | null>('utc', { default: null }) // UTC
 
 const dateTimeFormattedReadOnly = ref<string | null>(null)
 const inputType = computed(() => (prop.dateOnly ? 'date' : 'datetime-local'))
+
+
+const minValue = computed(() => {
+    if (!prop.min) return undefined
+    if (/^\d{4}-\d{2}-\d{2}$/.test(prop.min)) {
+        return prop.dateOnly ? prop.min : `${prop.min}T00:00`
+    }
+    return prop.min
+})
 const inputPlaceholder = computed(() => (
     prop.placeholder || (prop.dateOnly ? 'MM/DD/YYYY' : 'DD/MM/YYYY, HH:MM AM/PM')
 ))