@7365admin1/layer-common 1.10.9 → 1.11.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 1.11.0
+
+### Minor Changes
+
+- 167c359: realease for ir download latest
+
+## 1.10.10
+
+### Patch Changes
+
+- 276911d: Update Bulletin Board changes
+
 ## 1.10.9
 
 ### Patch Changes

package/components/AccessCardAddForm.vue

@@ -655,7 +655,7 @@ watch(() => card.value.showAssign, async (newVal) => {
       });
       buildingsData.value = response.items || [];
       buildingItems.value = buildingsData.value.map((building: any) => ({
-        name: building.name,
+        name: building.block,
         value: building._id,
       }));
     } catch (error) {

package/components/AccessCardAssignToUnitForm.vue

@@ -22,7 +22,7 @@
               hide-details="auto"
               item-title="name"
               item-value="value"
-              placeholder="Select building..."
+              placeholder="Select block..."
               persistent-placeholder
               :rules="[requiredRule]"
               :loading="buildingLoading"
@@ -98,7 +98,6 @@
             <InputLabel
               class="text-capitalize font-weight-bold"
               title="Access Level"
-              required
             />
             <v-select
               v-model="form.accessLevel"
@@ -107,7 +106,6 @@
               hide-details="auto"
               item-title="name"
               item-value="no"
-              :rules="[requiredRule]"
               :loading="levelsLoading"
               placeholder="Select access level..."
             />
@@ -118,7 +116,6 @@
             <InputLabel
               class="text-capitalize font-weight-bold"
               title="Lift Access Level"
-              required
             />
             <v-select
               v-model="form.liftAccessLevel"
@@ -127,7 +124,6 @@
               hide-details="auto"
               item-title="name"
               item-value="no"
-              :rules="[requiredRule]"
               :loading="levelsLoading"
               placeholder="Select lift access level..."
             />
@@ -245,8 +241,9 @@ const typeItems = [
   { label: "Non Physical Access Card", value: "QRCODE" },
 ];
 
-const accessLevelItems = ref<{ name: string; no: string }[]>([]);
-const liftAccessLevelItems = ref<{ name: string; no: string }[]>([]);
+const NO_SELECTION = { name: "No Selection", no: null };
+const accessLevelItems = ref<{ name: string; no: string | null }[]>([]);
+const liftAccessLevelItems = ref<{ name: string; no: string | null }[]>([]);
 const buildingItems = ref<{ name: string; value: string }[]>([]);
 const buildingsData = ref<Record<string, any>[]>([]);
 const levelItems = ref<{ name: string; value: string }[]>([]);
@@ -268,7 +265,7 @@ function maxQuantityRule(v: number) {
 }
 
 async function fetchAvailableCount() {
-  if (!form.value.accessLevel || !form.value.liftAccessLevel) {
+  if (!form.value.accessLevel && !form.value.liftAccessLevel) {
     availableCount.value = null;
     return;
   }
@@ -315,7 +312,7 @@ onMounted(async () => {
   if (buildingsResult.status === "fulfilled") {
     buildingsData.value = buildingsResult.value.items || [];
     buildingItems.value = buildingsData.value.map((b: any) => ({
-      name: b.name,
+      name: b.block,
       value: b._id,
     }));
   }
@@ -329,8 +326,8 @@ onMounted(async () => {
         _getDoorAccessLevels(acmUrl),
         _getLiftAccessLevels(acmUrl),
       ]);
-      accessLevelItems.value = doorLevels.data ?? [];
-      liftAccessLevelItems.value = liftLevels.data ?? [];
+      accessLevelItems.value = [NO_SELECTION, ...(doorLevels.data ?? [])];
+      liftAccessLevelItems.value = [NO_SELECTION, ...(liftLevels.data ?? [])];
     } catch {
       emit(
         "error",
@@ -423,8 +420,8 @@ async function submit() {
       type: form.value.type,
       site: siteId.value,
       userType: form.value.userType,
-      accessLevel: form.value.accessLevel ?? "",
-      liftAccessLevel: form.value.liftAccessLevel ?? "",
+      accessLevel: form.value.accessLevel,
+      liftAccessLevel: form.value.liftAccessLevel,
     });
     emit("success");
   } catch (error: any) {

package/components/AccessCardQrTagging.vue

@@ -158,7 +158,7 @@
         <qrcode-vue
           v-for="qrCode in qrCodesToGenerate"
           :key="qrCode._id"
-          :value="qrCode.qrData"
+          :value="qrCode.cardNo"
           :size="150"
           :data-card-id="qrCode._id"
         />
@@ -340,7 +340,7 @@ async function generateQrCodes() {
   qrCodesToGenerate.value = filteredCards.map((card) => ({
     _id: card._id,
     cardNo: card.cardNo,
-    qrData: card.qrData,
+    qrData: card.cardNo,
     qrTagCardNo: card.qrTagCardNo ?? "",
   }));
 

package/components/BulletinBoardManagement.vue

@@ -2,7 +2,7 @@
     <v-row no-gutters>
         <TableMain :headers="headers" :items="paginatePlaceholderItem" v-model:search="searchInput"
             :loading="getAnnouncementPending" :page="page" :pages="pages" :pageRange="pageRange"
-            @refresh="getAnnouncementsRefresh" show-header @update:page="handleUpdatePage" @row-click="handleRowClick"
+            @refresh="getAnnouncementsRefresh" :show-header="APP_CONSTANTS.RESIDENT === props.recipients" @update:page="handleUpdatePage" @row-click="handleRowClick"
             @create="handleCreateEvent" :can-create="canCreateBulletinBoard" create-label="Add Announcement">
             <template #extension>
                 <v-row no-gutters class="w-100 d-flex flex-column">
@@ -60,6 +60,8 @@
     </v-row>
 </template>
 <script setup lang="ts">
+import { APP_CONSTANTS } from '../constants/app';
+
 definePageMeta({
     memberOnly: true,
 })
@@ -104,13 +106,21 @@ const { debounce } = useUtils()
 
 
 
-const headers = [
-    { title: "Title", value: "title" },
-    { title: "Date Created", value: "createdAt", align: "start" },
-    { title: "Start Date/End Date", value: "duration", align: "start" },
-    { title: "No Expiration", value: "noExpiration", align: "start" },
-    { title: "", value: "actions" },
-];
+const headers = computed(() => {
+    const arr = [
+        { title: "Title", value: "title", align: "start" },
+    ]
+
+    if (props.recipients === APP_CONSTANTS.RESIDENT) {
+        arr.push({ title: "Date Created", value: "createdAt", align: "start" });
+        arr.push({ title: "Start Date/End Date", value: "duration", align: "start" });
+        arr.push({ title: "No Expiration", value: "noExpiration", align: "start" });
+        arr.push({ title: "", value: "actions", align: "center" });
+    }
+
+    return arr;
+
+});
 const items = ref<TAnnouncement[]>([]);
 const page = ref(1);
 const pages = ref(0);

package/components/Chat/SkeletonLoader.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <!-- Chat Messages Skeleton Loader -->
+    <v-row no-gutters class="chat-content">
+      <v-col
+        v-for="(message, index) in chatSkeletons"
+        :key="index"
+        cols="12"
+        class="d-flex my-2"
+        :class="message.isRight ? 'justify-end' : 'justify-start'"
+      >
+        <v-skeleton-loader
+          class="rounded-lg border"
+          type="article"
+          width="400"
+          boilerplate
+        ></v-skeleton-loader>
+      </v-col>
+    </v-row>
+
+    <v-footer class="pa-0 chat-footer" color="background">
+      <v-row align="center" justify="space-between" no-gutters class="">
+        <v-col cols="9" class="pr-3">
+          <v-skeleton-loader
+            type="paragraph"
+            height="100"
+            class="rounded-lg border"
+          ></v-skeleton-loader>
+        </v-col>
+
+        <v-col cols="3" class="d-flex justify-end">
+          <v-skeleton-loader
+            color="background"
+            type="button"
+            width="150"
+            height="150"
+            class="rounded-lg"
+          ></v-skeleton-loader>
+        </v-col>
+      </v-row>
+    </v-footer>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const chatSkeletons = ref([
+  { isRight: false },
+  { isRight: true },
+  { isRight: false },
+]);
+</script>
+
+<style scoped>
+.chat-content {
+  max-height: calc(100vh - (55px + 98px + 100px));
+  overflow-y: auto;
+}
+
+.chat-footer {
+  position: sticky;
+  bottom: 0;
+  width: 100%;
+  background-color: white;
+  border-top: 1px solid #ddd;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

package/components/DashboardMain.vue

@@ -0,0 +1,176 @@
+<template>
+  <v-row no-gutters class="mb-6">
+    <v-col cols="12">
+      <h1 class="text-h4 text-md-h3 font-weight-bold">
+        Dashboard{{ currentSiteName ? ` - ${currentSiteName}` : "" }}
+      </h1>
+    </v-col>
+  </v-row>
+
+  <v-row>
+    <v-col cols="12">
+      <v-progress-linear
+        v-if="loading"
+        indeterminate
+        color="primary"
+        class="mb-4"
+      />
+    </v-col>
+  </v-row>
+
+  <v-row>
+    <v-col
+      v-for="card in countCardList"
+      :key="card.id"
+      cols="12"
+      sm="6"
+      md="6"
+      lg="4"
+      xl="2"
+    >
+      <v-card flat border class="fill-height" elevation="0" hover>
+        <v-card-text class="pa-4 pa-md-6">
+          <v-row no-gutters align="start">
+            <v-col cols="8">
+              <v-card-subtitle class="text-caption text-uppercase pa-0 mb-2">
+                {{ card.label }}
+              </v-card-subtitle>
+              <v-card-title class="text-h4 text-md-h3 pa-0 mb-3">
+                {{ card.value }}
+              </v-card-title>
+              <v-chip :color="card.chipColor" size="small" variant="flat">
+                <v-icon size="14" start>mdi-trending-up</v-icon>
+                {{ card.percentage }}
+              </v-chip>
+            </v-col>
+            <v-col cols="4" class="d-flex justify-end">
+              <v-avatar :color="card.color" size="56" rounded="lg">
+                <v-icon :icon="card.icon" color="white" size="28"></v-icon>
+              </v-avatar>
+            </v-col>
+          </v-row>
+          <v-row no-gutters class="mt-4">
+            <v-col cols="12">
+              <v-select
+                :model-value="card.period"
+                :items="periodOptions"
+                density="compact"
+                hide-details
+                variant="outlined"
+                rounded="lg"
+                :disabled="loading"
+                @update:model-value="onUpdateCardPeriod(card.key, $event)"
+              ></v-select>
+            </v-col>
+          </v-row>
+        </v-card-text>
+      </v-card>
+    </v-col>
+  </v-row>
+
+  <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+</template>
+
+<script setup lang="ts">
+
+const props = defineProps({
+  orgId: {
+    type: String,
+    default: "",
+  },
+  site: {
+    type: String,
+    default: "",
+  },
+  dashboardData: {
+    type: Object as () => Record<string, any>,
+    default: () => ({}),
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  cardPeriods: {
+    type: Object as () => TPeriodState,
+    required: true,
+  },
+  currentSiteName: {
+    type: String,
+    default: "",
+  },  cardValues: {
+    type: Array as () => TDashboardCardValue[],
+    required: true,
+  },
+})
+
+const emit = defineEmits<{
+  updatePeriod: [payload: { key: string; period: string }];
+}>();
+
+const periodOptions = ["Today", "This Week", "This Month"];
+
+const periodValue: Record<string, TDashboardValues> = {
+  Today: "today",
+  "This Week": "thisWeek",
+  "This Month": "thisMonth",
+};
+
+const datePeriod: Record<TDashboardValues, string> = {
+  today: "Today",
+  thisWeek: "This Week",
+  thisMonth: "This Month",
+};
+
+const message = ref("");
+const messageSnackbar = ref(false);
+const messageColor = ref("");
+
+const countCardList = computed(() => {
+  const fetchedData = props.dashboardData || {};
+  const hasFetchedData = fetchedData && Object.keys(fetchedData).length > 0;
+
+  const sourceCards = hasFetchedData
+    ? buildCardsFromFetchedData(fetchedData)
+    : [];
+
+  return sourceCards.map((card: any, idx: number) => {
+    const periodKey = card.periodKey as keyof TPeriodState;
+    const apiPeriod = props.cardPeriods[periodKey] || "today";
+    const displayPeriod = datePeriod[apiPeriod] || "Today";
+
+    return {
+      id: idx + 1,
+      key: card.key,
+      label: card.title || `Card ${idx + 1}`,
+      value:
+        card.value >= 1000
+          ? card.value.toLocaleString()
+          : card.value.toString(),
+      icon: card.icon,
+      color: card.color,
+      percentage: `${Number(card.percentage) > 0 ? "+" : ""}${
+        card.percentage
+      }%`,
+      chipColor: card.isPositive ? "success" : "error",
+      period: displayPeriod,
+    };
+  });
+});
+
+function buildCardsFromFetchedData(data: Record<string, any>) {
+  return props.cardValues.map((mapping) => ({
+    key: mapping.key,
+    periodKey: mapping.periodKey,
+    title: mapping.title,
+    value: data[mapping.key]?.count ?? 0,
+    percentage: data[mapping.key]?.percentage ?? 0,
+    icon: mapping.icon,
+    color: mapping.color,
+    isPositive: (data[mapping.key]?.percentage ?? 0) >= 0,
+  }));
+}
+
+function onUpdateCardPeriod(cardKey: string, period: string) {
+  emit("updatePeriod", { key: cardKey, period });
+}
+</script>

package/components/DeliveryCompany.vue

@@ -0,0 +1,240 @@
+<template>
+    <v-row no-gutters class="pa-3">
+        <v-col cols="12">
+            <v-card width="100%" variant="outlined" border="thin" rounded="lg" max-width="700" max-height="500"
+                style="overflow-y: auto;">
+                <v-toolbar density="compact" color="grey-lighten-4 pl-2 pr-4">
+                    <v-row v-if="!hideTitle" no-gutters class="px-3 font-weight-bold">
+                        Delivery Companies
+                    </v-row>
+
+                    <template #append>
+                        <v-btn v-if="!props.readOnly" variant="flat" color="primary" class="text-none"
+                            @click="handleAdd">
+                            Add
+                        </v-btn>
+                    </template>
+                </v-toolbar>
+
+                <v-card-text class="pa-0" style="min-height: 100px;">
+                    <template v-if="companies.length > 0">
+                        <draggable :list="companies" item-key="index" class="drag-area"
+                            :disabled="editingIndex !== null">
+                            <v-list-item v-for="(item, index) in companies" :key="index" class="mt-1">
+                                <v-row class="d-flex justify-space-between align-center" no-gutters>
+                                    <span class="d-flex align-center">
+                                        <v-btn icon="mdi-drag" class="drag-handle text-grey mr-2" flat
+                                            density="compact" />
+
+                                        <div v-if="editingIndex === index" class="w-full">
+                                            <v-text-field v-model="editedValue" class="text-subtitle-2"
+                                                prepend-icon="mdi-truck" style="min-width: 300px;" density="compact"
+                                                hide-details autofocus />
+                                        </div>
+
+                                        <div v-else>
+                                            <span>
+                                                <v-icon icon="mdi-truck" class="text-h6 mr-2" />
+                                            </span>
+                                            {{ item }}
+                                        </div>
+                                    </span>
+
+                                    <span class="d-flex align-center ga-2">
+                                        <template v-if="editingIndex === index">
+                                            <v-btn icon="mdi-check" color="green" density="compact"
+                                                @click="saveEdit(index)" />
+                                            <v-btn icon="mdi-close" color="grey" density="compact"
+                                                @click="cancelEdit" />
+                                        </template>
+
+                                        <template v-else>
+                                            <v-btn v-if="!props.readOnly" flat icon="mdi-pencil" class="text-grey"
+                                                density="compact" @click="startEdit(index)" />
+                                            <v-btn v-if="!props.readOnly" flat icon="mdi-trash-outline" class="text-red"
+                                                density="compact" @click="handleRemove(index)" />
+                                        </template>
+                                    </span>
+                                </v-row>
+                            </v-list-item>
+                        </draggable>
+                    </template>
+
+                    <div v-else class="text-center py-5">
+                        No delivery companies added yet.
+                    </div>
+                </v-card-text>
+            </v-card>
+        </v-col>
+
+        <v-dialog v-model="dialog.add" persistent width="450">
+            <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">
+                            Add Delivery Company
+                        </span>
+                    </v-row>
+                </v-toolbar>
+
+                <v-card-text>
+                    <v-text-field v-model="editedValue" placeholder="Company Name" autofocus />
+                </v-card-text>
+
+                <v-toolbar>
+                    <v-row no-gutters justify="end" align="center" class="px-5">
+                        <v-btn variant="text" text="Cancel" @click="dialog.add = false" />
+                        <v-btn variant="flat" color="primary" class="text-none ml-2"
+                            @click="saveEdit(companies.length)">
+                            Add
+                        </v-btn>
+                    </v-row>
+                </v-toolbar>
+            </v-card>
+        </v-dialog>
+
+        <Snackbar v-model="toast.show" :text="toast.message" :color="toast.color" />
+
+        <v-dialog v-model="dialog.delete" persistent width="450">
+            <CardDeleteConfirmation
+                :prompt-title="`Are you sure you want to delete this ${companies?.[deleteIndex!]}?`"
+                @close="dialog.delete = false"
+                @delete="removeCompany(deleteIndex!)"
+            />
+        </v-dialog>
+    </v-row>
+</template>
+
+<script setup lang="ts">
+import useSiteSettings from '../composables/useSiteSettings'
+
+const props = defineProps<{
+    site: string
+    readOnly?: boolean
+    hideTitle?: boolean
+}>()
+
+const emit = defineEmits<{
+    (e: 'update:companiesValue', value: string[]): void
+    (e: 'refresh-site'): void
+}>()
+
+const { updateSitebyId } = useSiteSettings()
+
+const initialCompanies = defineModel<string[]>('initial', {
+    type: Array,
+    default: []
+})
+
+const dialog = reactive({
+    add: false,
+    delete: false,
+})
+
+const toast = reactive({
+    show: false,
+    message: '',
+    color: 'success',
+})
+
+const companies = ref<string[]>([])
+const editingIndex = ref<number | null>(null)
+const editedValue = ref('')
+const isHydrating = ref(true)
+const deleteIndex = ref<number | null>(null)
+
+
+
+watch(
+    companies,
+    async (newVal) => {
+        await persistCompanies()
+    },
+    { deep: true, immediate: false }
+)
+
+const startEdit = (index: number) => {
+    editingIndex.value = index
+    editedValue.value = companies.value[index] || ''
+}
+
+const saveEdit = async (index: number) => {
+    const value = editedValue.value.trim()
+    if (!value) return
+
+    const updated = [...companies.value]
+
+    if (index >= updated.length) {
+        updated.push(value)
+    } else {
+        updated[index] = value
+    }
+
+    companies.value = updated
+    editingIndex.value = null
+    editedValue.value = ''
+    dialog.add = false
+}
+
+const cancelEdit = () => {
+    editingIndex.value = null
+    editedValue.value = ''
+}
+
+const handleAdd = () => {
+    dialog.add = true
+    editedValue.value = ''
+    editingIndex.value = null
+}
+
+const removeCompany = async (index: number) => {
+    const updated = [...companies.value]
+    updated.splice(index, 1)
+    companies.value = updated
+    dialog.delete = false
+}
+
+const handleRemove = async (index: number) => {
+   deleteIndex.value = index;
+   dialog.delete = true;
+}
+
+const persistCompanies = async () => {
+    try {
+        const isSame =
+            companies.value.length === initialCompanies.value.length &&
+            companies.value.every((c, i) => c === initialCompanies.value[i]);
+        if (isSame) return
+
+
+        await updateSitebyId(props.site, {
+            deliveryCompanyList: companies.value,
+        })
+
+        toast.message = 'Delivery companies updated successfully!'
+        toast.color = 'success'
+        toast.show = true
+        emit('refresh-site')
+    } catch (error) {
+        console.error('Failed to update delivery companies:', error)
+        toast.message = 'Failed to update delivery companies. Please try again.'
+        toast.color = 'error'
+        toast.show = true
+    }
+}
+
+watch(initialCompanies, (val) => {
+    companies.value = Array.isArray(val) ? [...val] : []
+    isHydrating.value = false
+}, { immediate: true })
+</script>
+
+<style scoped>
+.drag-area {
+    cursor: grab;
+}
+
+.drag-handle {
+    cursor: grab;
+}
+</style>