@7365admin1/layer-common 3.0.18 → 3.0.20

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 3.0.20
+
+### Patch Changes
+
+- ea81bba: add dialog confirm for client and update service provider
+
+## 3.0.19
+
+### Patch Changes
+
+- 96c813f: Update Layer Common version
+
 ## 3.0.18
 
 ### Patch Changes

package/components/BuildingManagement/buildings.vue

@@ -15,8 +15,8 @@
             <v-btn fab icon density="comfortable" @click="getBuildings()">
               <v-icon>mdi-refresh</v-icon>
             </v-btn>
-            <v-text-field v-model="searchInput" autocomplete="off" placeholder="Search" density="compact" hide-details dense clearable
-              class="mx-2" style="width: 200px;" />
+            <v-text-field v-model="searchInput" autocomplete="off" placeholder="Search" density="compact" hide-details
+              dense clearable class="mx-2" style="width: 200px;" />
           </template>
 
           <template #append>
@@ -45,7 +45,7 @@
     <v-dialog v-model="createDialog" width="450" persistent>
       <BuildingForm :site="site" mode="add" :blocks="items" @cancel="createDialog = false" @success="successCreate()"
         @success:create-more="getBuildings()" />
-    </v-dialog> 
+    </v-dialog>
 
     <!-- Edit Dialog -->
     <v-dialog v-model="editDialog" width="450" persistent>
@@ -222,7 +222,10 @@ const site = (useRoute().params.site as string) ?? "";
 const status = (useRoute().params.status as string) ?? "active";
 
 const { debounce } = useUtils();
-const { getAll: _getBuildings, deleteById } = useBuilding();
+const {
+  getAll: _getBuildings,
+  deleteById,
+} = useBuilding();
 
 const searchInput = ref("");
 const headerSearch = ref("");

package/components/BuildingManagement/units.vue

@@ -6,6 +6,13 @@
           v-if="canCreate && canCreateUnit">
           Add Unit
         </v-btn>
+        <v-btn class="text-none ml-2" rounded="pill" variant="tonal" @click="openBulkUploadFilePicker()" size="large"
+          :loading="bulkUploadLoading" v-if="canCreate && canCreateUnit">
+          <v-icon start>mdi-upload</v-icon>
+          Bulk Upload
+        </v-btn>
+        <input ref="bulkUploadFileInput" type="file" accept=".xlsx,.xls,.csv" class="d-none"
+          @change="handleBulkUploadFileChange" />
       </v-row>
     </v-col>
     <v-col cols="12">
@@ -30,8 +37,7 @@
         </v-toolbar>
 
         <v-data-table :headers="props.headers" :items="items" item-value="_id" items-per-page="20" fixed-header
-          hide-default-footer  @click:row="tableRowClickHandler"
-          style="max-height: calc(100vh - (200px))">
+          hide-default-footer @click:row="tableRowClickHandler" style="max-height: calc(100vh - (200px))">
           <template #item.block="{ value, item }">
             {{ value ? `Block ${value}` : "" }}
           </template>
@@ -44,10 +50,10 @@
       <BuildingUnitFormAdd :site="site" @cancel="createDialog = false" @success="successCreate()"
         @success:create-more="getBuildingUnit()" />
     </v-dialog>
-    
-    <v-dialog v-if="canViewUnitDetails"  v-model="dialogPreview":width="smAndUp ? '70svw' : '100%'" persistent>
-       <BuildingUnitFormEdit v-if="selectedBuildingUnit" @cancel="dialogPreview = false" @success="successUpdate()" @delete-unit="openDeleteDialog()"
-        :roomFacility="selectedBuildingUnit" />
+
+    <v-dialog v-if="canViewUnitDetails" v-model="dialogPreview" :width="smAndUp ? '70svw' : '100%'" persistent>
+      <BuildingUnitFormEdit v-if="selectedBuildingUnit" @cancel="dialogPreview = false" @success="successUpdate()"
+        @delete-unit="openDeleteDialog()" :roomFacility="selectedBuildingUnit" />
     </v-dialog>
 
     <v-dialog v-model="dialogDelete" :loading="deleteLoading" width="450" persistent>
@@ -88,6 +94,67 @@
       </v-card>
     </v-dialog>
 
+    <v-dialog v-model="bulkUploadSkippedDialog" :width="smAndUp ? '720' : '100%'" persistent>
+      <v-card width="100%">
+        <v-toolbar density="compact" class="pl-4">
+          <span class="font-weight-medium text-h5">Skipped Rows</span>
+        </v-toolbar>
+
+        <v-card-text style="max-height: 70vh; overflow-y: auto">
+          <p class="text-subtitle-2 mb-4">
+            Some rows were not imported. Review the details below and update the sheet if needed.
+          </p>
+
+          <v-alert v-if="bulkUploadSkippedSummary.length" type="warning" variant="tonal" density="compact"
+            class="mb-4">
+            {{ bulkUploadSkippedSummary.length }} row(s) skipped during bulk upload.
+          </v-alert>
+
+          <!-- <v-list v-if="bulkUploadSkippedSummary.length" density="compact" class="pa-0 mb-4">
+            <v-list-item v-for="(item, index) in bulkUploadSkippedSummary" :key="`summary-${index}`"
+              class="px-0">
+              <v-list-item-title class="text-subtitle-2">
+                Row {{ item.rowNumber ?? item.row ?? "N/A" }}
+              </v-list-item-title>
+              <v-list-item-subtitle class="text-wrap">
+                {{ formatSkippedSummaryReason(item) }}
+              </v-list-item-subtitle>
+            </v-list-item>
+          </v-list> -->
+
+          <template v-if="bulkUploadSkippedErrors.length">
+            <!-- <v-divider class="mb-4" /> -->
+            <p class="text-subtitle-2 mb-2">Details</p>
+            <v-table density="compact">
+              <thead>
+                <tr>
+                  <th class="text-left">Row</th>
+                  <th class="text-left">Block</th>
+                  <th class="text-left">Building</th>
+                  <th class="text-left">Reason</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(item, index) in bulkUploadSkippedErrors" :key="`error-${index}`">
+                  <td>{{ item.row ?? "N/A" }}</td>
+                  <td>{{ item.block ?? "N/A" }}</td>
+                  <td>{{ item.name ?? "N/A" }}</td>
+                  <td>{{ item.reason ?? "Skipped" }}</td>
+                </tr>
+              </tbody>
+            </v-table>
+          </template>
+        </v-card-text>
+
+        <v-toolbar density="compact">
+          <v-btn tile block size="48" color="black" variant="flat" class="text-none"
+            @click="bulkUploadSkippedDialog = false">
+            Close
+          </v-btn>
+        </v-toolbar>
+      </v-card>
+    </v-dialog>
+
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-row>
 </template>
@@ -103,7 +170,7 @@ const props = defineProps({
         title: "Unit Name",
         value: "name",
       },
-       {
+      {
         title: "Level",
         value: "level.name",
       },
@@ -115,7 +182,7 @@ const props = defineProps({
         title: "Block Name",
         value: "buildingName",
       },
-     
+
       // {
       //   title: "Type",
       //   value: "type",
@@ -162,6 +229,8 @@ const { debounce, formatDateDDMMYYYYLocal, toOrdinal } = useUtils();
 
 const { getAll, deleteById } = useBuildingUnit();
 
+const { uploadSpreadsheetBuilding } = useBuilding();
+
 const searchInput = ref("");
 const headerSearch = ref("");
 const page = ref(1);
@@ -243,6 +312,12 @@ function openEditDialog() {
 
 const dialogDelete = ref(false);
 const deleteLoading = ref(false);
+const bulkUploadFile = ref<File | null>(null);
+const bulkUploadFileInput = ref<HTMLInputElement | null>(null);
+const bulkUploadLoading = ref(false);
+const bulkUploadSkippedDialog = ref(false);
+const bulkUploadSkippedErrors = ref<Array<Record<string, any>>>([]);
+const bulkUploadSkippedSummary = ref<Array<Record<string, any>>>([]);
 
 function openDeleteDialog() {
   dialogDelete.value = true;
@@ -272,6 +347,109 @@ async function handleDeleteBuildingUnit() {
   }
 }
 
+function openBulkUploadFilePicker() {
+  if (bulkUploadLoading.value) {
+    return;
+  }
+
+  bulkUploadFile.value = null;
+  bulkUploadSkippedErrors.value = [];
+  bulkUploadSkippedSummary.value = [];
+  bulkUploadSkippedDialog.value = false;
+  if (bulkUploadFileInput.value) {
+    bulkUploadFileInput.value.value = "";
+    bulkUploadFileInput.value.click();
+  }
+}
+
+function formatSkippedSummaryReason(item: Record<string, any>) {
+  if (Array.isArray(item.errors) && item.errors.length) {
+    return item.errors.join(", ");
+  }
+
+  return item.reason ?? "Skipped";
+}
+
+function getSkippedRowsCount(result: Record<string, any> | null | undefined) {
+  if (typeof result?.skippedRows === "number") {
+    return result.skippedRows;
+  }
+
+  if (Array.isArray(result?.skippedRows)) {
+    return result.skippedRows.length;
+  }
+
+  return 0;
+}
+
+function getBulkUploadSkippedErrors(result: Record<string, any> | null | undefined) {
+  if (Array.isArray(result?.skippedErrors)) {
+    return result.skippedErrors;
+  }
+
+  if (Array.isArray(result?.skippedRows)) {
+    return result.skippedRows;
+  }
+
+  return [];
+}
+
+function getBulkUploadSkippedSummary(result: Record<string, any> | null | undefined) {
+  if (Array.isArray(result?.skippedItemsSummary)) {
+    return result.skippedItemsSummary;
+  }
+
+  if (Array.isArray(result?.skippedRows)) {
+    return result.skippedRows.map((item: Record<string, any>) => ({
+      rowNumber: item.row,
+      reason: item.reason,
+      block: item.block,
+      name: item.name,
+      data: item,
+    }));
+  }
+
+  return [];
+}
+
+async function handleBulkUploadFileChange(event: Event) {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0] ?? null;
+
+  if (!file) {
+    return;
+  }
+
+  bulkUploadFile.value = file;
+  bulkUploadLoading.value = true;
+
+  try {
+    const result = await uploadSpreadsheetBuilding({
+      site,
+      file,
+    });
+    await getBuildingUnit();
+    bulkUploadSkippedErrors.value = getBulkUploadSkippedErrors(result);
+    bulkUploadSkippedSummary.value = getBulkUploadSkippedSummary(result);
+    bulkUploadSkippedDialog.value =
+      bulkUploadSkippedErrors.value.length > 0 ||
+      bulkUploadSkippedSummary.value.length > 0;
+    showMessage(
+      `Bulk upload completed. Inserted ${result?.insertedUnits ?? 0} unit(s). Skipped ${getSkippedRowsCount(result)} row(s).`,
+      "success"
+    );
+  } catch (error: any) {
+    showMessage(
+      error?.response?._data?.message || "Failed to upload spreadsheet.",
+      "error"
+    );
+  } finally {
+    bulkUploadLoading.value = false;
+    bulkUploadFile.value = null;
+    input.value = "";
+  }
+}
+
 function setBuilding({
   mode = "create",
   dialog = true,
@@ -290,7 +468,7 @@ function setBuilding({
 </script>
 
 <style scoped>
-  .v-data-table :deep(thead th) {
+.v-data-table :deep(thead th) {
   font-weight: bold !important;
 }
 </style>

package/components/CleaningScheduleMain.vue

@@ -26,11 +26,15 @@
                 v-model:utc="startDate"
                 density="compact"
                 hide-details
+                :date-only="true"
+                placeholder="Start Date"
               />
               <InputDateTimePicker
                 v-model:utc="endDate"
                 density="compact"
                 hide-details
+                :date-only="true"
+                placeholder="End Date"
               />
               <v-select
                 v-model="status"

package/components/ClientMain.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page-wrap">
 
-    <!-- ===== TABLE VIEW: topbar + table đi chung 1 khối ===== -->
+    <!-- ===== TABLE VIEW ===== -->
     <template v-if="viewMode === 'table'">
 
       <!-- ===== TOP BAR ===== -->
@@ -24,7 +24,7 @@
             </svg>
           </div>
 
-          <!-- Filters: chỉ hiện ở active/suspended -->
+          <!-- Filters -->
           <div v-if="tab !== 'pending'" class="filter-wrap">
             <div class="filter-field">
               <label>Filter by status</label>
@@ -104,7 +104,7 @@
         <div v-if="loading" class="loading-bar"><div class="loading-bar-fill" /></div>
 
         <!-- TABLE: active / suspended -->
-        <div v-if="tab !== 'pending'" class="table-scroll">
+        <div v-if="tab !== 'pending'" ref="tableScrollEl" class="table-scroll" @scroll="closeMenu">
           <table>
             <thead>
               <tr>
@@ -156,32 +156,9 @@
                 </td>
                 <td>
                   <div class="action-wrap">
-                    <button class="dots-btn" @click.stop="toggleMenu(item._id)">
+                    <button class="dots-btn" @click.stop="toggleMenu(item._id, $event)">
                       <span /><span /><span />
                     </button>
-                    <div v-if="openMenuId === item._id" class="dropdown">
-                      <button
-                        class="dd-item"
-                        @click="viewClient(item)"
-                      >
-                        View Organization
-                      </button>
-                      <button
-                        v-if="item.status === 'suspended'"
-                        class="dd-item"
-                        @click="activateClient(item)"
-                      >
-                        Activate
-                      </button>
-
-                      <button
-                        v-else
-                        class="dd-item danger"
-                        @click="suspendClient(item)"
-                      >
-                        Suspend
-                      </button>
-                    </div>
                   </div>
                 </td>
               </tr>
@@ -228,7 +205,6 @@
 
     </template>
 
-    <!-- ===== DETAIL VIEW: chiếm toàn bộ page-wrap, không còn topbar/table ===== -->
     <div v-else-if="viewMode === 'detail'" class="client-detail">
       <ClientDetailForm
         :client="selectedClient"
@@ -237,17 +213,59 @@
       />
     </div>
 
-    <!-- ===== DIALOG (luôn nằm ngoài, có thể mở ở bất kỳ view nào) ===== -->
     <div v-if="dialog" class="overlay" @click.self="dialog = false">
       <div class="dialog-box">
         <InvitationClientForm title="Invite Client" @success="handleSuccess" @cancel="dialog = false" />
       </div>
     </div>
+
+    <!-- ===== SUSPEND CONFIRMATION DIALOG ===== -->
+    <div v-if="confirmSuspendItem" class="overlay" @click.self="cancelSuspend">
+      <div class="confirm-box">
+        <h3 class="confirm-title">Suspend account</h3>
+        <p class="confirm-text">
+          Are you sure you want to suspend <strong>{{ confirmSuspendItem?.name }}</strong>'s account?
+        </p>
+        <div class="confirm-actions">
+          <button class="btn-cancel" @click="cancelSuspend">Cancel</button>
+          <button class="btn-confirm-danger" :disabled="confirmSuspendLoading" @click="confirmSuspend">
+            <span v-if="confirmSuspendLoading" class="spinner spinner-light" />
+            <span v-else>Suspend</span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <Teleport to="body">
+      <div
+        v-if="openMenuId"
+        class="dropdown"
+        :style="{ top: menuPos.top + 'px', left: menuPos.left + 'px' }"
+      >
+        <button class="dd-item" @click="viewClient(activeMenuItem)">
+          View Organization
+        </button>
+        <button
+          v-if="activeMenuItem?.status === 'suspended'"
+          class="dd-item"
+          @click="activateClient(activeMenuItem)"
+        >
+          Activate
+        </button>
+        <button
+          v-else
+          class="dd-item danger"
+          @click="askSuspend(activeMenuItem)"
+        >
+          Suspend
+        </button>
+      </div>
+    </Teleport>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import useOrg from '../composables/useOrg'
 import useVerification from '../composables/useVerification'
 import useRole from '../composables/useRole'
@@ -283,6 +301,9 @@ const APP_LIST = [
 const tab             = ref<TabStatus>('active')
 const dialog          = ref(false)
 const openMenuId      = ref<string | null>(null)
+const menuPos         = ref({ top: 0, left: 0 })
+const tableScrollEl   = ref<HTMLElement | null>(null)
+
 // filterStatus
 const filterStatus    = ref<'active' | 'suspended'>('active')
 const filterPlan      = ref('')   // '' = All | any APP_LIST value
@@ -300,6 +321,10 @@ const roleCache       = ref<Record<string, string>>({})
 const viewMode        = ref<'table' | 'detail'>('table')
 const selectedClient  = ref<any>(null)
 
+/* suspend confirmation */
+const confirmSuspendItem    = ref<any>(null)
+const confirmSuspendLoading = ref(false)
+
 /* ── COMPUTED ── */
 const pageRange = computed(() => {
   if (!totalItems.value) return '0-0 of 0'
@@ -308,6 +333,10 @@ const pageRange = computed(() => {
   return `${start}-${end} of ${totalItems.value}`
 })
 
+const activeMenuItem = computed(() =>
+  items.value.find(i => i._id === openMenuId.value) ?? null
+)
+
 /* ── HELPERS ── */
 function formatDate(date?: string | Date) {
   if (date == null || date === '') return '-'
@@ -358,6 +387,28 @@ async function activateClient(item: any) {
   }
 }
 
+/* ── SUSPEND CONFIRMATION ── */
+function askSuspend(item: any) {
+  confirmSuspendItem.value = item
+  closeMenu()
+}
+
+function cancelSuspend() {
+  if (confirmSuspendLoading.value) return
+  confirmSuspendItem.value = null
+}
+
+async function confirmSuspend() {
+  if (!confirmSuspendItem.value) return
+  confirmSuspendLoading.value = true
+  try {
+    await suspendClient(confirmSuspendItem.value)
+    confirmSuspendItem.value = null
+  } finally {
+    confirmSuspendLoading.value = false
+  }
+}
+
 async function fetchOrgs(status: 'active' | 'suspended') {
   loading.value = true
 
@@ -484,7 +535,6 @@ async function handleUpdatePage(p: number) {
 
 async function onTabChange(value: TabStatus) {
   tab.value  = value
-  // sync filterStatus ( active/suspended)
   if (value !== 'pending') filterStatus.value = value
   page.value = 1
   await fetchData()
@@ -509,14 +559,44 @@ function handleFilterChange() {
   fetchData()
 }
 
-/* ── MENU ── */
-function toggleMenu(id: string) {
-  openMenuId.value = openMenuId.value === id ? null : id
+const DROPDOWN_WIDTH = 130
+
+function toggleMenu(id: string, event: MouseEvent) {
+  if (openMenuId.value === id) {
+    closeMenu()
+    return
+  }
+  const btn = event.currentTarget as HTMLElement
+  const rect = btn.getBoundingClientRect()
+
+  let left = rect.right - DROPDOWN_WIDTH
+  if (left < 8) left = 8
+  if (left + DROPDOWN_WIDTH > window.innerWidth - 8) {
+    left = window.innerWidth - DROPDOWN_WIDTH - 8
+  }
+
+  menuPos.value = {
+    top: rect.bottom + 4,
+    left,
+  }
+  openMenuId.value = id
 }
+
 function closeMenu() {
   openMenuId.value = null
 }
 
+function handleOutsideClick(e: MouseEvent) {
+  const target = e.target as HTMLElement
+  if (!target.closest('.dropdown') && !target.closest('.dots-btn')) {
+    closeMenu()
+  }
+}
+
+function handleWindowResize() {
+  closeMenu()
+}
+
 /* ── DIALOG ── */
 function openInviteDialog() { dialog.value = true }
 function handleSuccess()    { dialog.value = false; fetchData() }
@@ -532,7 +612,18 @@ async function cancelInvite(item: any) {
   }
 }
 
-onMounted(() => fetchData())
+onMounted(() => {
+  fetchData()
+  document.addEventListener('click', handleOutsideClick)
+  document.addEventListener('scroll', closeMenu, true)
+  window.addEventListener('resize', handleWindowResize)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleOutsideClick)
+  document.removeEventListener('scroll', closeMenu, true)
+  window.removeEventListener('resize', handleWindowResize)
+})
 </script>
 
 <style scoped>
@@ -823,15 +914,13 @@ tbody td { padding: 14px 16px; vertical-align: middle; }
 .dots-btn span { display: block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
 
 .dropdown {
-  position: absolute;
-  right: 0;
-  top: calc(100% + 4px);
+  position: fixed;
   background: #fff;
   border: 1px solid #E5E7EB;
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.08);
   min-width: 130px;
-  z-index: 50;
+  z-index: 1100;
   overflow: hidden;
 }
 .dd-item {
@@ -874,6 +963,10 @@ tbody td { padding: 14px 16px; vertical-align: middle; }
   border-radius: 50%;
   animation: spin 0.7s linear infinite;
 }
+.spinner-light {
+  border: 1.5px solid rgba(255,255,255,0.5);
+  border-top-color: #fff;
+}
 
 .client-detail {
   margin: 12px 0 0 0;
@@ -896,4 +989,61 @@ tbody td { padding: 14px 16px; vertical-align: middle; }
   box-shadow: 0 16px 48px rgba(0,0,0,0.12);
   overflow: hidden;
 }
+
+/* ===== SUSPEND CONFIRMATION DIALOG ===== */
+.confirm-box {
+  background: #fff;
+  border-radius: 12px;
+  max-width: 380px;
+  width: 90%;
+  box-shadow: 0 16px 48px rgba(0,0,0,0.12);
+  padding: 24px;
+}
+.confirm-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #111827;
+  margin-bottom: 8px;
+}
+.confirm-text {
+  font-size: 13.5px;
+  color: #4B5563;
+  line-height: 1.5;
+  margin-bottom: 20px;
+}
+.confirm-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+.btn-cancel {
+  padding: 8px 16px;
+  font-size: 13px;
+  font-weight: 500;
+  border: 1px solid #D1D5DB;
+  border-radius: 8px;
+  background: #fff;
+  color: #374151;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.btn-cancel:hover { background: #F9FAFB; }
+.btn-confirm-danger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-width: 78px;
+  padding: 8px 16px;
+  font-size: 13px;
+  font-weight: 500;
+  border: none;
+  border-radius: 8px;
+  background: #DC2626;
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.btn-confirm-danger:hover:not(:disabled) { background: #B91C1C; }
+.btn-confirm-danger:disabled { opacity: 0.7; cursor: not-allowed; }
 </style>

package/components/DashboardMain.vue

@@ -824,13 +824,7 @@
         <div class="dashboard-card dashboard-panel figma-panel">
           <div class="figma-panel-header">
             <h2>Today's Attentions</h2>
-            <button
-              class="figma-panel-action"
-              type="button"
-              @click="goToDashboardRoute('incident-reports')"
-            >
-              View All
-            </button>
+        
           </div>
           <div class="figma-panel-body">
             <div v-if="todayAttentions.length" class="figma-list">