@7365admin1/layer-common 1.11.26 → 1.11.28

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 1.11.28
+
+### Patch Changes
+
+- 21ced98: Update Site Settings
+
+## 1.11.27
+
+### Patch Changes
+
+- 2797c03: updates and fixes
+
 ## 1.11.26
 
 ### Patch Changes

package/components/AccessCardAddForm.vue

@@ -435,8 +435,6 @@ const prop = defineProps({
 });
 
 const { add: _addCard, updateById: _updateCardById } = useCard();
-const { getAll: _getBuildings } = useBuilding();
-const { getAllUnits: _getUnits } = useBuildingUnit();
 const {
   getDoorAccessLevels: _getDoorAccessLevels,
   getLiftAccessLevels: _getLiftAccessLevels,
@@ -444,6 +442,7 @@ const {
   addPhysicalCard: _addPhysicalCard,
   addNonPhysicalCard: _addNonPhysicalCard,
   bulkPhysicalAccessCard: _bulkPhysicalAccessCard,
+  getBlockLevelUnitList: _getBlockLevelUnitList,
 } = useAccessManagement();
 const { getBySiteId: _getEntryPassSettings } = useSiteEntryPassSettings();
 const { getFileUrl } = useFile();
@@ -570,7 +569,7 @@ const liftAccessLevelItems = ref<{ name: string; no: string }[]>([]);
 const buildingItems = ref<{ name: string; value: string }[]>([]);
 const levelItems = ref<{ name: string; value: string }[]>([]);
 const unitItems = ref<{ name: string; value: string }[]>([]);
-const buildingsData = ref<Record<string, any>[]>([]);
+const blockLevelUnitData = ref<any[]>([]);
 const encryptedAcmUrl = ref("");
 
 const route = useRoute();
@@ -644,28 +643,24 @@ function updateEndDate(startDate: string | null) {
   }
 }
 
-// Watch for Assign toggle to fetch buildings
+// Watch for Assign toggle to fetch block/level/unit data
 watch(() => card.value.showAssign, async (newVal) => {
   if (newVal) {
     try {
-      const response = await _getBuildings({
-        page: 1,
-        status: "active",
-        site: siteId,
-      });
-      buildingsData.value = response.items || [];
-      buildingItems.value = buildingsData.value.map((building: any) => ({
-        name: building.block,
-        value: building._id,
+      const response = await _getBlockLevelUnitList(siteId);
+      blockLevelUnitData.value = (response as any)?.data || [];
+      buildingItems.value = blockLevelUnitData.value.map((b: any) => ({
+        name: b.block,
+        value: b._id,
       }));
     } catch (error) {
-      console.error("Failed to fetch buildings:", error);
+      console.error("Failed to fetch block/level/unit list:", error);
     }
   } else {
-    // Reset selections when toggled off
     card.value.assignBuilding = "";
     card.value.assignLevel = "";
     card.value.assignUnit = "";
+    blockLevelUnitData.value = [];
     buildingItems.value = [];
     levelItems.value = [];
     unitItems.value = [];
@@ -673,51 +668,35 @@ watch(() => card.value.showAssign, async (newVal) => {
 });
 
 // Watch for building selection to populate levels
-watch(() => card.value.assignBuilding, async (newVal) => {
+watch(() => card.value.assignBuilding, (newVal) => {
+  card.value.assignLevel = "";
+  card.value.assignUnit = "";
+  unitItems.value = [];
+
   if (newVal) {
-    const selectedBuilding = buildingsData.value.find((b: any) => b._id === newVal);
-    if (selectedBuilding && selectedBuilding.levels) {
-      levelItems.value = selectedBuilding.levels.map((level: string) => ({
-        name: level,
-        value: level,
-      }));
-    }
-    // Reset level and unit when building changes
-    card.value.assignLevel = "";
-    card.value.assignUnit = "";
-    unitItems.value = [];
+    const selectedBlock = blockLevelUnitData.value.find((b: any) => b._id === newVal);
+    levelItems.value = selectedBlock?.levels?.map((l: any) => ({
+      name: l.level,
+      value: l._id,
+    })) || [];
   } else {
     levelItems.value = [];
-    card.value.assignLevel = "";
-    card.value.assignUnit = "";
-    unitItems.value = [];
   }
 });
 
-// Watch for level selection to fetch units
-watch(() => card.value.assignLevel, async (newVal) => {
+// Watch for level selection to populate units
+watch(() => card.value.assignLevel, (newVal) => {
+  card.value.assignUnit = "";
+
   if (newVal && card.value.assignBuilding) {
-    try {
-      const response = await _getUnits({
-        page: 1,
-        status: "active",
-        site: siteId,
-        building: card.value.assignBuilding,
-      });
-      const units = response.items || [];
-      // Filter units by selected level
-      const filteredUnits = units.filter((unit: any) => unit.level === newVal);
-      unitItems.value = filteredUnits.map((unit: any) => ({
-        name: unit.name,
-        value: unit._id,
-      }));
-    } catch (error) {
-      console.error("Failed to fetch units:", error);
-    }
-    card.value.assignUnit = "";
+    const selectedBlock = blockLevelUnitData.value.find((b: any) => b._id === card.value.assignBuilding);
+    const selectedLevel = selectedBlock?.levels?.find((l: any) => l._id === newVal);
+    unitItems.value = selectedLevel?.units?.map((u: any) => ({
+      name: u.name,
+      value: u._id,
+    })) || [];
   } else {
     unitItems.value = [];
-    card.value.assignUnit = "";
   }
 });
 

package/components/AccessCardAssignToUnitForm.vue

@@ -68,7 +68,6 @@
               persistent-placeholder
               :rules="[requiredArrayRule]"
               :disabled="!form.level"
-              :loading="unitLoading"
               multiple
               chips
               closable-chips
@@ -209,9 +208,8 @@ const {
   getLiftAccessLevels: _getLiftAccessLevels,
   assignAccessCard: _assignAccessCard,
   getAvailableAccessCards: _getAvailableAccessCards,
+  getBlockLevelUnitList: _getBlockLevelUnitList,
 } = useAccessManagement();
-const { getAll: _getBuildings } = useBuilding();
-const { getAllUnits: _getUnits } = useBuildingUnit();
 const { requiredRule } = useUtils();
 
 const route = useRoute();
@@ -221,7 +219,6 @@ const validForm = ref(false);
 const loading = ref(false);
 const levelsLoading = ref(false);
 const buildingLoading = ref(false);
-const unitLoading = ref(false);
 const availableLoading = ref(false);
 const availableCount = ref<number | null>(null);
 
@@ -245,7 +242,7 @@ 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 blockLevelUnitData = ref<any[]>([]);
 const levelItems = ref<{ name: string; value: string }[]>([]);
 const unitItems = ref<{ name: string; value: string }[]>([]);
 
@@ -303,15 +300,15 @@ onMounted(async () => {
   buildingLoading.value = true;
   levelsLoading.value = true;
 
-  const [buildingsResult, acmResult] = await Promise.allSettled([
-    _getBuildings({ page: 1, status: "active", site: siteId.value }),
+  const [blockLevelResult, acmResult] = await Promise.allSettled([
+    _getBlockLevelUnitList(siteId.value),
     $fetch<{ encrypted: string }>("/api/encrypt-acm-url"),
   ]);
 
-  // Buildings
-  if (buildingsResult.status === "fulfilled") {
-    buildingsData.value = buildingsResult.value.items || [];
-    buildingItems.value = buildingsData.value.map((b: any) => ({
+  // Blocks / Levels / Units
+  if (blockLevelResult.status === "fulfilled") {
+    blockLevelUnitData.value = (blockLevelResult.value as any)?.data || [];
+    buildingItems.value = blockLevelUnitData.value.map((b: any) => ({
       name: b.block,
       value: b._id,
     }));
@@ -345,20 +342,18 @@ onMounted(async () => {
 
 watch(
   () => form.value.building,
-  async (newVal) => {
+  (newVal) => {
     form.value.level = null;
     form.value.units = [];
     levelItems.value = [];
     unitItems.value = [];
 
     if (newVal) {
-      const selectedBuilding = buildingsData.value.find(
-        (b: any) => b._id === newVal
-      );
-      if (selectedBuilding?.levels) {
-        levelItems.value = selectedBuilding.levels.map((level: string) => ({
-          name: level,
-          value: level,
+      const selectedBlock = blockLevelUnitData.value.find((b: any) => b._id === newVal);
+      if (selectedBlock?.levels) {
+        levelItems.value = selectedBlock.levels.map((l: any) => ({
+          name: l.level,
+          value: l._id,
         }));
       }
     }
@@ -367,29 +362,18 @@ watch(
 
 watch(
   () => form.value.level,
-  async (newVal) => {
+  (newVal) => {
     form.value.units = [];
     unitItems.value = [];
 
     if (newVal && form.value.building) {
-      unitLoading.value = true;
-      try {
-        const response = await _getUnits({
-          page: 1,
-          status: "active",
-          site: siteId.value,
-          building: form.value.building,
-        });
-        const units = response.items || [];
-        const filtered = units.filter((u: any) => u.level === newVal);
-        unitItems.value = filtered.map((u: any) => ({
+      const selectedBlock = blockLevelUnitData.value.find((b: any) => b._id === form.value.building);
+      const selectedLevel = selectedBlock?.levels?.find((l: any) => l._id === newVal);
+      if (selectedLevel?.units) {
+        unitItems.value = selectedLevel.units.map((u: any) => ({
           name: u.name,
           value: u._id,
         }));
-      } catch {
-        console.error("Failed to fetch units");
-      } finally {
-        unitLoading.value = false;
       }
     }
   }

package/components/AccessManagement.vue

@@ -152,7 +152,7 @@ const props = defineProps({
     default: () => [
       {
         title: "Block",
-        value: "block.name",
+        value: "block.block",
       },
       {
         title: "Level",

package/components/Input/DatePicker.vue

@@ -21,7 +21,7 @@ const prop = defineProps({
     },
     placeholder: {
         type: String,
-        default: 'MM/DD/YYYY'
+        default: 'DD/MM/YYYY'
     }
 })
 
@@ -47,12 +47,12 @@ function validate() {
 function convertToReadableFormat(dateStr: string): string {
     if (!dateStr) return ""
     const dateObj = new Date(dateStr + "T00:00:00")
-    const options: Intl.DateTimeFormatOptions = {
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit'
-    }
-    return dateObj.toLocaleDateString('en-US', options)
+    if (Number.isNaN(dateObj.getTime())) return ""
+
+    const day = String(dateObj.getDate()).padStart(2, "0")
+    const month = String(dateObj.getMonth() + 1).padStart(2, "0")
+    const year = String(dateObj.getFullYear())
+    return `${day}/${month}/${year}`
 }
 
 function handleInitialDate() {

package/components/InvitationForm.vue

@@ -131,6 +131,13 @@
 </template>
 
 <script setup lang="ts">
+import useCustomerSite from '../composables/useCustomerSite';
+import useLocal from '../composables/useLocal';
+import { useLocalSetup } from '../composables/useLocalSetup';
+import useRole from '../composables/useRole';
+import useUser from '../composables/useUser';
+import useUtils from '../composables/useUtils';
+
 const APP = useRuntimeConfig().public.APP;
 const props = defineProps({
   title: {
@@ -190,6 +197,7 @@ const invite = ref<Record<string, any>>({
   org: "",
   site: "",
   siteName: "",
+  isMemberInvite: false,
 });
 
 invite.value.app = props.app;
@@ -298,9 +306,14 @@ const roles = ref<Array<Record<string, any>>>([]);
 const { getRoles } = useRole();
 
 const { data: RolesData, refresh: refreshRoles } = await useLazyAsyncData(
-  "get-roles-by-type",
-  () => getRoles({ org: props.org, type: app.value, limit: 50 }),
-  { watch: [app] }
+  "get-roles-by-type-" + props.org + "-" + props.app,
+  () =>
+  getRoles({
+    org: props.org,
+    type: props.app,
+    limit: 50,
+  }),
+  { watch: [() => props.app] }
 );
 
 watchEffect(() => {
@@ -309,10 +322,10 @@ watchEffect(() => {
   }
 });
 
-function handleUpdateApp(value: string) {
+async function handleUpdateApp(value: string)  {
   invite.value.role = "";
   invite.value.site = "";
-  refreshRoles();
+  await refreshRoles()
 }
 
 const createMore = ref(false);

package/components/RolePermissionFormCreate.vue

@@ -91,6 +91,9 @@
 </template>
 
 <script setup lang="ts">
+import useRole from '../composables/useRole';
+import useUtils from '../composables/useUtils';
+
 const props = defineProps({
   title: {
     type: String,

package/components/RolePermissionFormPreviewUpdate.vue

@@ -111,6 +111,9 @@
 </template>
 
 <script setup lang="ts">
+import useRole from '../composables/useRole';
+import useUtils from '../composables/useUtils';
+
 const definedModel = defineModel<Array<string>>({
   default: () => [],
 });

package/components/ServiceProviderMain.vue

@@ -327,6 +327,8 @@
 </template>
 
 <script lang="ts" setup>
+import useServiceProvider from '../composables/useServiceProvider';
+
 const props = defineProps({
   orgId: {
     type: String,
@@ -418,7 +420,7 @@ const serviceProvider = ref({
 const {
   getAll: getAllServiceProvider,
   add: addServiceProvider,
-  invite: inviteServiceProvider,
+  createServiceProviderInvite
 } = useServiceProvider();
 
 const { getSiteById } = useSite();
@@ -536,12 +538,15 @@ async function submitServiceProviderInvite() {
   disableServiceProvider.value = true;
   messageServiceProvider.value = "";
   try {
-    await inviteServiceProvider({
-      email: serviceProvider.value.email,
-      orgId: props.orgId,
-      siteId: props.siteId,
-      siteName: site.value?.name ?? "",
-    });
+    const payload = {
+  email: serviceProvider.value.email?.trim(),
+  orgId: props.orgId,
+  siteId: props.siteId,
+  siteName: site.value?.name || props.siteName,
+};
+
+
+await createServiceProviderInvite(payload);
     if (createMoreServiceProvider.value) {
       serviceProvider.value.email = "";
     } else {

package/components/SiteSettings.vue

@@ -5,47 +5,57 @@
       <v-expansion-panel color="primary">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-cog</v-icon>
-          Site Settings
+          Site Information
         </v-expansion-panel-title>
 
         <v-expansion-panel-text>
-          <v-row no-gutters class="d-flex justify-center">
-            <v-col cols="12">
-              <v-row no-gutters>
-                <v-col cols="12">
-                  <span class="text-h4 font-weight-bold"> Site Settings </span>
+          <v-row no-gutters class="d-flex justify-center py-10">
+            <v-form class="w-100">
+              <v-row>
+                <!-- Cover Photo + Preview -->
+                <v-col cols="12" lg="5" class="pt-0">
+                  <InputLabel title="Cover Photo (displayed in resident app)" class="d-block mb-2" />
+                  <InputFileV2 v-model="coverPhoto" accept="image/*" title="Upload cover photo" :height="120" />
+                </v-col>
+                <v-col cols="12" lg="7" class="pl-lg-4 pt-4 pt-lg-0">
+                  <InputLabel title="Preview" class="d-block mb-2" />
+                  <v-img v-if="coverPhotoUrl" :src="coverPhotoUrl" aspect-ratio="16/9" cover rounded="lg"
+                    class="w-100 border" />
+                  <div v-else
+                    class="w-100 d-flex align-center justify-center rounded-lg bg-grey-lighten-4 border border-dashed"
+                    style="aspect-ratio: 16/9">
+                    <span class="text-caption text-medium-emphasis">No cover photo uploaded</span>
+                  </div>
                 </v-col>
 
-                <v-col cols="12">
-                  <v-row no-gutters>
-                    <v-col cols="12" lg="4" class="mt-2">
-                      <NumberSettingField
-                        v-model="blocks"
-                        title="No. of blocks"
-                        type="blocks"
-                        :read-only="!canManageSiteSettings"
-                        :existing-block-number="existingBlockNumber"
-                        :site-id="siteId"
-                        :disabled="existingBlockNumber === blocks"
-                        @success="refreshSiteData"
-                      />
-                    </v-col>
-                  </v-row>
+                <!-- Description + Site Documents -->
+                <v-col cols="12" lg="6" class="mt-2">
+                  <InputLabel title="Description" class="d-block mb-1" />
+                  <v-textarea v-model="description" variant="outlined" density="compact" rows="4" hide-details no-resize
+                    style="height: 119px" />
+                </v-col>
+                <v-col cols="12" lg="6" class="mt-2 pl-lg-2">
+                  <InputLabel title="Site Documents" class="d-block mb-1" />
+                  <InputFileV2 v-model="siteDocuments" :multiple="true" accept="*/*" title="Upload documents"
+                    :height="104" />
+                </v-col>
+
+                <!-- Submit -->
+                <v-col cols="12" class="pt-0 d-flex justify-end">
+                  <v-btn color="primary-button" class="text-none" size="large" variant="flat" text="Save"
+                    :loading="savingSiteInfo" @click="saveSiteInfo" />
+                </v-col>
+
+                <!-- Divider -->
+                <v-col cols="12" class="my-2">
+                  <v-divider />
                 </v-col>
 
                 <v-col cols="12">
                   <v-row no-gutters>
                     <v-col cols="12" lg="4" class="mt-2">
-                      <NumberSettingField
-                        v-model="guardPosts"
-                        title="No. of guard posts"
-                        type="guard_posts"
-                        :read-only="!canManageSiteSettings"
-                        :existing-guard-posts-number="existingGuardPostNumber"
-                        :site-id="siteId"
-                        :disabled="existingGuardPostNumber === guardPosts"
-                        @success="refreshSiteData"
-                      />
+                      <NumberSettingField v-model="blocks" title="No. of blocks" type="blocks" :site-id="siteId"
+                        :disabled="existingBlockNumber === blocks" @success="refreshSiteData" />
                     </v-col>
                   </v-row>
                 </v-col>
@@ -53,135 +63,76 @@
                 <v-col cols="12">
                   <v-row no-gutters>
                     <v-col cols="12" lg="4" class="mt-2">
-                      <v-row no-gutters>
-                        <v-form v-model="gracePeriodValid">
-                          <v-row>
-                            <v-col cols="6">
-                              <InputLabel
-                                class="text-capitalize font-weight-bold"
-                                title="Grace Period"
-                                required
-                              />
-                              <v-text-field
-                                v-model="gracePeriod"
-                                type="number"
-                                density="comfortable"
-                                :readonly="!canManageSiteSettings"
-                                :rules="[requiredRule]"
-                              />
-                            </v-col>
-
-                            <v-col cols="6">
-                              <v-btn
-                                v-if="canManageSiteSettings"
-                                color="primary"
-                                class="text-none mt-6"
-                                size="large"
-                                variant="flat"
-                                :disabled="
-                                  !gracePeriodValid ||
-                                  existingGracePeriodNumber === gracePeriod
-                                "
-                                :loading="gracePeriodLoading"
-                                text="Save"
-                                @click="handleSaveGracePeriod"
-                              />
-                            </v-col>
-                          </v-row>
-                        </v-form>
-                      </v-row>
+                      <NumberSettingField v-model="guardPosts" title="No. of guard posts" type="guard_posts"
+                        :site-id="siteId" :disabled="existingGuardPostNumber === guardPosts"
+                        @success="refreshSiteData" />
                     </v-col>
                   </v-row>
                 </v-col>
               </v-row>
-            </v-col>
+            </v-form>
           </v-row>
         </v-expansion-panel-text>
       </v-expansion-panel>
 
       <!-- ANPR CAMERA -->
-      <v-expansion-panel color="primary">
+      <v-expansion-panel v-if="showAnprCamera" color="primary">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-camera</v-icon>
           ANPR Camera
         </v-expansion-panel-title>
 
         <v-expansion-panel-text>
-          <CameraMain
-            :site="siteId"
-            :read-only="!canManageSiteSettings"
-            :guard-posts="siteData?.metadata?.guardPosts"
-          />
+          <CameraMain :site="siteId" :read-only="!canManageSiteSettings"
+            :guard-posts="siteData?.metadata?.guardPosts" />
         </v-expansion-panel-text>
       </v-expansion-panel>
 
       <!-- CCTV CAMERA -->
-      <v-expansion-panel color="primary">
+      <v-expansion-panel v-if="showCctvCamera" color="primary">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-cctv</v-icon>
           CCTV Camera
         </v-expansion-panel-title>
 
         <v-expansion-panel-text>
-          <CameraMain
-            :site="siteId"
-            type="ip"
-            :read-only="!canManageSiteSettings"
-          />
+          <CameraMain :site="siteId" type="ip" :read-only="!canManageSiteSettings" />
         </v-expansion-panel-text>
       </v-expansion-panel>
 
-      <v-expansion-panel color="primary">
+      <v-expansion-panel v-if="showWorkOrderSettings" color="primary" class="">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-format-list-numbered</v-icon>
           Work Order Settings
         </v-expansion-panel-title>
 
         <v-expansion-panel-text>
-          <v-text-field
-            v-model="prefix"
-            label="Prefix"
-            :disabled="isLoading || !canManageSiteSettings"
-            @input="handleInput"
-          />
-
-          <v-select
-            v-model="noOfDigits"
-            :items="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
-            label="No. of Digits"
-            :disabled="isLoading || !canManageSiteSettings"
-          />
+          <v-text-field v-model="prefix" label="Prefix" :disabled="isLoading || !canManageSiteSettings"
+            @input="handleInput" />
+
+          <v-select v-model="noOfDigits" :items="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" label="No. of Digits"
+            :disabled="isLoading || !canManageSiteSettings" />
 
           <v-text-field v-model="orderNumberPreview" label="Preview" readonly />
 
-          <v-btn
-            v-if="canManageSiteSettings"
-            class="mt-2"
-            :loading="isLoading"
-            @click="save"
-          >
+          <v-btn v-if="canManageSiteSettings" class="mt-2" :loading="isLoading" @click="save">
             Save
           </v-btn>
         </v-expansion-panel-text>
       </v-expansion-panel>
 
-      <v-expansion-panel color="primary">
+      <v-expansion-panel v-if="showDeliveryCompanies" color="primary">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-truck</v-icon>
           Delivery Companies
         </v-expansion-panel-title>
         <v-expansion-panel-text class="">
-          <DeliveryCompany
-            :site="siteId"
-            v-model:initial="deliveryCompanies"
-            @refresh-site="refreshSiteData"
-            @update:companiesValue="handleUpdateCompanies"
-            :read-only="!canManageSiteSettings"
-          />
+          <DeliveryCompany :site="siteId" v-model:initial="deliveryCompanies" @refresh-site="refreshSiteData"
+            @update:companiesValue="handleUpdateCompanies" :read-only="!canManageSiteSettings" />
         </v-expansion-panel-text>
       </v-expansion-panel>
 
-      <v-expansion-panel color="primary">
+      <v-expansion-panel v-if="showResidentVisitors" color="primary">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-car</v-icon>
           Resident Visitors
@@ -190,6 +141,8 @@
           <OvernightParkingAvailability :site="siteId" />
         </v-expansion-panel-text>
       </v-expansion-panel>
+
+      <slot name="panels" :can-manage="canManageSiteSettings" :site-id="siteId" />
     </v-expansion-panels>
 
     <Snackbar v-model="toast.show" :text="toast.message" :color="toast.color" />
@@ -197,14 +150,25 @@
 </template>
 
 <script setup lang="ts">
+import useFile from '../composables/useFile';
+import useSiteSettings from '../composables/useSiteSettings';
+import useUtils from '../composables/useUtils';
+import useWorkOrder from '../composables/useWorkOrder';
+
 const props = defineProps({
   siteId: { type: String, required: true },
   canManageSiteSettings: { type: Boolean, default: false },
+  showAnprCamera: { type: Boolean, default: false },
+  showCctvCamera: { type: Boolean, default: false },
+  showWorkOrderSettings: { type: Boolean, default: false },
+  showDeliveryCompanies: { type: Boolean, default: false },
+  showResidentVisitors: { type: Boolean, default: false },
 });
 
-const openPanels = ref([0]); // default open first
 
-const { getSiteById, updateSitebyId } = useSiteSettings();
+const openPanels = ref([]); // default open first
+
+const { getSiteById, updateSitebyId, updateSiteInformation } = useSiteSettings();
 const { requiredRule } = useUtils();
 const { getFileUrl } = useFile();
 const { getWorkOrderSettings, createWorkOrderSettings } = useWorkOrder();
@@ -228,12 +192,30 @@ const prefix = ref("");
 const noOfDigits = ref(1);
 const isLoading = ref(false);
 
+const coverPhoto = ref<string[]>([]);
+const description = ref<string>("");
+const siteDocuments = ref<string[]>([]);
+const siteDocumentsNames = ref<Record<string, string>>({});
+const savingSiteInfo = ref<boolean>(false);
+
+
+const coverPhotoUrl = computed(() =>
+  coverPhoto.value.length > 0 ? getFileUrl(coverPhoto.value[0]) : "",
+);
+
 const toast = reactive({
   show: false,
   message: "",
   color: "",
 });
 
+function showSnackbar(text: string, color = "success") {
+  toast.message = text;
+  toast.color = color;
+  toast.show = true;
+}
+
+
 const { data: siteData, refresh: refreshSiteData } = await useLazyAsyncData(
   `site-${props.siteId}`,
   () => getSiteById(props.siteId)
@@ -242,24 +224,35 @@ const { data: siteData, refresh: refreshSiteData } = await useLazyAsyncData(
 watch(
   siteData,
   (val: TSite) => {
-    if (!val) return;
-
-    blocks.value = val.metadata?.block || 0;
-    guardPosts.value = val.metadata?.guardPosts || 0;
-    gracePeriod.value = val.metadata?.gracePeriod || 0;
-
-    existingBlockNumber.value = blocks.value;
-    existingGuardPostNumber.value = guardPosts.value;
-    existingGracePeriodNumber.value = gracePeriod.value;
-    deliveryCompanies.value = Array.isArray(val.deliveryCompanyList)
-      ? [...val.deliveryCompanyList]
-      : [];
-
-    uploadedSiteLogo.value = val.metadata?.incidentLogo || "";
+    const siteDataValue = val as any;
+    if (siteDataValue) {
+      blocks.value = siteDataValue.metadata?.block || 0;
+      existingBlockNumber.value = blocks.value;
+
+      guardPosts.value = siteDataValue.metadata?.guardPosts || 0;
+      existingGuardPostNumber.value = guardPosts.value;
+      deliveryCompanies.value = Array.isArray(
+        siteDataValue?.deliveryCompanyList,
+      )
+        ? [...siteDataValue.deliveryCompanyList]
+        : [];
+
+      const info = siteDataValue.siteInformation;
+      if (info) {
+        coverPhoto.value = info.bgImage ? [info.bgImage] : [];
+        description.value = info.description ?? "";
+        const docs: { id: string; name: string }[] = info.docs ?? [];
+        siteDocuments.value = docs.map((d) => d.id);
+        docs.forEach((d) => {
+          siteDocumentsNames.value[d.id] = d.name;
+        });
+      }
+    }
   },
   { immediate: true }
 );
 
+
 async function handleSaveGracePeriod() {
   gracePeriodLoading.value = true;
   try {
@@ -276,6 +269,29 @@ async function handleSaveGracePeriod() {
   }
 }
 
+async function saveSiteInfo() {
+  savingSiteInfo.value = true;
+  try {
+    await updateSiteInformation(props.siteId, {
+      bgImage: coverPhoto.value[0] ?? "",
+      description: description.value,
+      docs: siteDocuments.value.map((id) => ({
+        id,
+        name: siteDocumentsNames.value[id] ?? "",
+      })),
+    });
+    showSnackbar("Site information updated successfully.");
+  } catch (err: any) {
+    const msg =
+      err?.response?._data?.message ??
+      err?.message ??
+      "Failed to update site information.";
+    showSnackbar(msg, "error");
+  } finally {
+    savingSiteInfo.value = false;
+  }
+}
+
 async function handleLogo(action: string) {
   try {
     await updateSitebyId(props.siteId, {
@@ -303,8 +319,8 @@ const { data: workOrderSetting } = await useLazyAsyncData(
 
 watchEffect(() => {
   if (workOrderSetting.value) {
-    prefix.value = workOrderSetting.value.prefix;
-    noOfDigits.value = workOrderSetting.value.noOfDigits;
+    prefix.value = workOrderSetting.value?.prefix;
+    noOfDigits.value = workOrderSetting.value?.noOfDigits;
   }
 });
 

package/components/VisitorManagement.vue

@@ -366,23 +366,25 @@
         />
         <v-menu v-else-if="activeTab === 'overnight-parking'">
           <template #activator="{ props }">
-            <v-avatar class="rounded-xl border-md">
-              <v-icon v-bind="props" icon="mdi-dots-vertical" />
+            <v-avatar v-bind="props" class="rounded-xl border-md">
+              <v-icon icon="mdi-dots-vertical" />
             </v-avatar>
           </template>
 
           <v-card>
             <v-list-item
+              v-if="
+                !overNightParkingListActions[0].disabled ||
+                !['approved', 'rejected'].includes(
+                  item?.overnightParking?.status
+                )
+              "
               @click.stop="
                 openApproveRejectOverNightParkingRequestDialog(
                   item,
                   overNightParkingListActions[0].status
                 )
               "
-              :disabled="
-                item?.overnightParking?.status == 'approved' ||
-                !overNightParkingListActions[0].disabled
-              "
             >
               <template #title>
                 <span class="text-caption">
@@ -392,14 +394,18 @@
             </v-list-item>
             <v-divider />
             <v-list-item
-              v-if="item?.overnightParking?.status !== 'approved'"
+              v-if="
+                !overNightParkingListActions[1].disabled ||
+                !['approved', 'rejected'].includes(
+                  item?.overnightParking?.status
+                )
+              "
               @click="
                 openApproveRejectOverNightParkingRequestDialog(
                   item,
                   overNightParkingListActions[1].status
                 )
               "
-              :disabled="!overNightParkingListActions[1].disabled"
             >
               <template #title>
                 <span class="text-caption">
@@ -407,6 +413,22 @@
                 </span>
               </template>
             </v-list-item>
+            <v-list-item
+              v-if="item?.overnightParking?.remarks"
+              @click="
+                openApproveRejectOverNightParkingRequestDialog(
+                  item,
+                  overNightParkingListActions[2].status,
+                  item?.overnightParking?.remarks
+                )
+              "
+            >
+              <template #title>
+                <span class="text-caption">
+                  {{ overNightParkingListActions[2].text }}
+                </span>
+              </template>
+            </v-list-item>
             <v-divider />
           </v-card>
         </v-menu>
@@ -831,7 +853,7 @@
             />
           </v-row>
         </v-toolbar>
-        <v-card-text class="px-4 pb-2">
+        <v-card-text class="px-4 pb-6">
           <v-row no-gutters justify="center" align-content="center">
             <v-col
               v-if="
@@ -853,16 +875,31 @@
                 outlined
                 rows="3"
                 clearable
+                :hide-details="
+                  approveRejectOvernightParkingRequestDialog.status ===
+                  'remarks'
+                "
+                :readonly="
+                  approveRejectOvernightParkingRequestDialog.status ===
+                  'remarks'
+                "
               />
             </v-col>
           </v-row>
         </v-card-text>
-        <v-toolbar class="pa-0" density="compact">
+        <v-toolbar
+          v-if="approveRejectOvernightParkingRequestDialog.status !== 'remarks'"
+          class="pa-0"
+          density="compact"
+        >
           <v-row no-gutters>
             <v-col cols="6">
               <v-btn
                 text="No"
-                variant="text"
+                color="grey-lighten-3"
+                variant="flat"
+                height="48"
+                tile
                 block
                 :disabled="isApprovingRejectingOvernightParkingRequest"
                 @click="closeApproveRejectOvernightParkingDialog"
@@ -874,7 +911,7 @@
                 color="success"
                 variant="flat"
                 height="48"
-                rounded="0"
+                tile
                 block
                 :disabled="
                   !overNightParkingRequestApproveRejectRemarks ||
@@ -1077,6 +1114,10 @@ const overNightParkingListActions = [
     status: "rejected",
     disabled: props.canUpdateVisitor,
   },
+  {
+    text: "View Remarks",
+    status: "remarks",
+  },
 ];
 const overNightParkingRequestApproveRejectRemarks = ref("");
 const approveRejectOvernightParkingRequestDialog = ref({
@@ -1087,7 +1128,8 @@ const selectedOvernightParkingRequest = ref<Record<string, any>>({});
 
 function openApproveRejectOverNightParkingRequestDialog(
   visitor: Record<string, any>,
-  status: string
+  status: string,
+  remarks?: string
 ) {
   selectedOvernightParkingRequest.value = visitor;
   approveRejectOvernightParkingRequestDialog.value = {
@@ -1095,6 +1137,7 @@ function openApproveRejectOverNightParkingRequestDialog(
     status,
   };
   dialog.approveRejectOvernightParkingRequestDialog = true;
+  overNightParkingRequestApproveRejectRemarks.value = remarks ?? "";
 }
 
 const isApprovingRejectingOvernightParkingRequest = ref(false);

package/composables/useAccessManagement.ts

@@ -279,6 +279,16 @@ export default function useAccessManagement() {
     );
   }
 
+  function getBlockLevelUnitList(siteId: string) {
+    return useNuxtApp().$api<{ message: string; data: any[] }>(
+      `/api/access-management/block-level-unit-list`,
+      {
+        method: "GET",
+        query: { site: siteId },
+      }
+    );
+  }
+
   function signQr(payload: { cardId: string; purpose: string }) {
     return useNuxtApp().$api<{ message: string; data: string }>(
       `/api/access-management/sign-qr`,
@@ -310,5 +320,6 @@ export default function useAccessManagement() {
     generateQrVms,
     createVisitorPass,
     signQr,
+    getBlockLevelUnitList,
   };
 }

package/composables/useFacilityUtils.ts

@@ -69,9 +69,9 @@ function generateTimeSlotsFromStart(
             return slots;
 }
 
-// 11/24/2025, 09:05 format
+// 24/11/2025, 09:05 format
 function toLocalTimeNumeric(utcString: string) {
-  return new Date(utcString).toLocaleString("en-US", {
+  return new Date(utcString).toLocaleString("en-GB", {
     year: "numeric",
     month: "2-digit",
     day: "2-digit",
@@ -137,4 +137,4 @@ return {
     
 }
 
-}
+}

package/composables/useOrg.ts

@@ -116,7 +116,7 @@ export default function useOrg() {
     value: Partial<Pick<TOrg, "name" | "email" | "nature" | "contact">>
   ) {
     return useNuxtApp()
-      .$api<Record<string, any>>("/api/organizations/onboarding-org", {
+      .$api<Record<string, any>>("/api/organizations", {
         method: "POST",
         body: value,
       })
@@ -126,7 +126,7 @@ export default function useOrg() {
         ) as TOrg;
       });
   }
-  
+
   return {
     org,
     getOrgs,

package/composables/useRole.ts

@@ -1,3 +1,5 @@
+import useMember from "./useMember";
+
 export default function useRole() {
   function createRole(
     { name, permissions, type, org } = {} as {

package/composables/useServiceProvider.ts

@@ -128,21 +128,29 @@ export default function useServiceProvider() {
 
   async function createServiceProviderInvite({
     email,
+    orgId,
     siteId,
-    serviceProviderOrgId,
+    siteName,
   }: {
     email: string;
+    orgId: string;
     siteId: string;
-    serviceProviderOrgId: string;
+    siteName: string;
   }) {
     try {
-      await useNuxtApp().$api<Record<string, any>>(
+     const res =  await useNuxtApp().$api<Record<string, any>>(
         "/api/auth/invite/service-provider",
         {
           method: "POST",
-          body: { email, siteId, serviceProviderOrgId },
+           body: {
+      email,
+      orgId,
+      siteId,
+      siteName,
+    },
         }
       );
+       console.log(">>> response:", res);
     } catch (err) {
       console.error("Error creating service provider invite:", err);
     }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "1.11.26",
+  "version": "1.11.28",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {

package/types/customer.d.ts

@@ -35,4 +35,4 @@ declare type TCustomerSite = {
   }
 };
 
-declare type TSiteCategory = "residential" | "commercial" | "industrial" | "institutional" | "mixed_development" | "infrastructure" | "hospitality"
+declare type TSiteCategory = "residential" | "commercial" | "industrial" | "institutional" | "mixed_development" | "infrastructure" | "hospitality"