@7365admin1/layer-common 3.2.1 → 3.2.2-staging.100

package/components/RolePermissionMain.vue

@@ -1,49 +1,46 @@
 <template>
-  <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters>
-        <v-btn
-          class="text-none"
-          rounded="pill"
-          variant="tonal"
-          @click="createDialog = true"
-          size="large"
-          v-if="canCreateRole"
-        >
+  <div>
+    <!--
+      THE DESIGN'S PAGE SCAFFOLD (same shape as Service Providers).
+
+      `Create role` moves from a bare row above the card onto the title line,
+      on the right, where the design puts a screen's primary action. It is the
+      same button under the same `canCreateRole` permission opening the same
+      dialog. The refresh, the range, the pager and the table are unchanged.
+    -->
+    <PageHeader title="Roles and Permissions">
+      <template #actions>
+        <AppButton v-if="canCreateRole" @click="createDialog = true">
           Create role
-        </v-btn>
-      </v-row>
-    </v-col>
-    <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
-        :loading="loading"
-      >
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #prepend>
-            <v-btn fab icon density="comfortable" @click="getRoles()">
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-          </template>
-
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
-                {{ pageRange }}
-              </span>
-              <local-pagination
-                v-model="page"
-                :length="pages"
-                @update:value="getRoles()"
-              />
-            </v-row>
-          </template>
-        </v-toolbar>
-
-        <v-data-table
+        </AppButton>
+      </template>
+    </PageHeader>
+
+    <AppCard class="table-card">
+      <!-- `v-card`'s `:loading` bar, drawn explicitly: a loading screen must
+           still say so now that the card is not a `v-card`. -->
+      <v-progress-linear v-if="loading" indeterminate height="2" />
+
+      <CardToolbar :count="pageRange">
+        <template #left>
+          <AppButton
+            variant="icon"
+            icon="mdi-refresh"
+            aria-label="Refresh"
+            @click="getRoles()"
+          />
+        </template>
+
+        <template #right>
+          <local-pagination
+            v-model="page"
+            :length="pages"
+            @update:value="getRoles()"
+          />
+        </template>
+      </CardToolbar>
+
+      <v-data-table
           :headers="props.headers"
           :items="items"
           item-value="_id"
@@ -58,7 +55,11 @@
             <span class="text-caption font-weight-bold text-capitalize">
               permissions
             </span>
-            <v-chip>{{ getPermissionCount(value) }}</v-chip>
+            <StatusChip
+              :dot="false"
+              tone="info"
+              :label="String(getPermissionCount(value))"
+            />
           </template>
 
           <template #item.action-table="{ item }" v-if="canDeleteRole">
@@ -73,9 +74,8 @@
               </v-list>
             </v-menu>
           </template>
-        </v-data-table>
-      </v-card>
-    </v-col>
+      </v-data-table>
+    </AppCard>
 
     <!-- dialogs -->
     <v-dialog v-model="createDialog" width="500" persistent>
@@ -105,45 +105,93 @@
       />
     </v-dialog>
 
-    <ConfirmDialog
-      v-model="confirmDialog"
-      :loading="deleteLoading"
-      @submit="handleDeleteRole"
-    >
-      <template #title>
-        <span class="font-weight-medium text-h5">Delete Role</span>
-      </template>
-
-      <template #description>
-        <p class="text-subtitle-2">
-          Are you sure you want to delete this role? This action cannot be
-          undone.
-        </p>
-      </template>
+    <v-dialog v-model="confirmDialog" max-width="450">
+      <v-card>
+        <v-toolbar>
+          <v-row no-gutters class="fill-height px-6" align="center">
+            <span class="font-weight-bold text-h6 text-capitalize">
+              Delete Role
+            </span>
+          </v-row>
+        </v-toolbar>
 
-      <template #footer>
-        <div class="d-flex justify-center ga-3 w-100">
-          <v-btn
-            variant="text"
-            @click="confirmDialog = false"
-            :disabled="deleteLoading"
-          >
-            Close
-          </v-btn>
-          <v-btn
-            color="primary"
-            variant="flat"
-            @click="handleDeleteRole"
-            :loading="deleteLoading"
-          >
-            Delete Role
-          </v-btn>
-        </div>
-      </template>
-    </ConfirmDialog>
+        <v-card-text>
+          <span v-if="!hasAssignedMembers" class="text-subtitle-2">
+            Are you sure you want to delete this role? This action cannot be
+            undone.
+          </span>
+          <template v-else>
+            <p class="text-subtitle-2 mb-4">
+            There are currently
+            <span class="text-error font-weight-bold">
+              {{ deletionPreview.members.length }}
+              {{ deletionPreview.members.length === 1 ? "user" : "users" }}
+            </span>
+            assigned to this role. Reassign each user before deleting it so
+            they do not lose access.
+          </p>
+
+            <v-row
+              v-for="member in deletionPreview.members"
+              :key="member._id"
+              no-gutters
+              class="mb-3 pa-3 border rounded-lg"
+              align="center"
+            >
+              <v-col cols="12" sm="5" class="text-body-2 mb-2 mb-sm-0">
+                {{ member.name || member.user }}
+              </v-col>
+              <v-col cols="12" sm="7">
+                <v-select
+                  v-model="memberReassignments[member._id]"
+                  :items="deletionPreview.replacementRoles"
+                  item-title="name"
+                  item-value="_id"
+                  label="Reassign role"
+                  density="comfortable"
+                  hide-details
+                />
+              </v-col>
+            </v-row>
+          </template>
+        </v-card-text>
+
+        <v-toolbar class="pa-0" density="compact">
+          <v-row no-gutters>
+            <v-col cols="6" class="pa-0">
+              <v-btn
+                block
+                variant="text"
+                class="text-none"
+                size="large"
+                height="48"
+                @click="closeDeleteDialog"
+                :disabled="deleteLoading"
+              >
+                Cancel
+              </v-btn>
+            </v-col>
+            <v-col cols="6" class="pa-0">
+              <v-btn
+                block
+                variant="flat"
+                color="black"
+                class="text-none font-weight-bold rounded-0"
+                height="48"
+                @click="handleDeleteRole"
+                :loading="deleteLoading"
+                :disabled="hasAssignedMembers && !canConfirmDeletion"
+              >
+                {{ hasAssignedMembers ? "Confirm" : "Delete" }}
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-toolbar>
+      </v-card>
+    </v-dialog>
 
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
-  </v-row>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -367,10 +415,49 @@ async function refreshRolesAfterUpdate(savedPermissions: string[]) {
 const confirmDialog = ref(false);
 const selectedRoleId = ref<string | null>(null);
 const deleteLoading = ref(false);
+const deletionPreview = ref({
+  members: [] as Array<Record<string, any>>,
+  replacementRoles: [] as Array<Record<string, any>>,
+});
+const memberReassignments = ref<Record<string, string>>({});
+
+const hasAssignedMembers = computed(
+  () => deletionPreview.value.members.length > 0
+);
+
+const canConfirmDeletion = computed(() =>
+  deletionPreview.value.members.every(
+    (member) => Boolean(memberReassignments.value[member._id])
+  )
+);
+
+const { getDeletionPreview, deleteWithReassignments } = useRole();
 
-function openDeleteDialog(id: string) {
+async function openDeleteDialog(id: string) {
   selectedRoleId.value = id;
-  confirmDialog.value = true;
+  deletionPreview.value = { members: [], replacementRoles: [] };
+  memberReassignments.value = {};
+  deleteLoading.value = true;
+
+  try {
+    const res = await getDeletionPreview(id);
+    deletionPreview.value = res.data;
+    confirmDialog.value = true;
+  } catch (error: any) {
+    const errorMessage =
+      error?.response?._data?.message || "Failed to load role assignments.";
+    showMessage(errorMessage, "error");
+    selectedRoleId.value = null;
+  } finally {
+    deleteLoading.value = false;
+  }
+}
+
+function closeDeleteDialog() {
+  confirmDialog.value = false;
+  selectedRoleId.value = null;
+  deletionPreview.value = { members: [], replacementRoles: [] };
+  memberReassignments.value = {};
 }
 
 function showMessage(msg: string, color: string) {
@@ -383,17 +470,23 @@ async function handleDeleteRole() {
   if (!selectedRoleId.value) return;
   deleteLoading.value = true;
   try {
-    const res = await deleteRole(selectedRoleId.value);
-
-    confirmDialog.value = false;
+    const reassignments = deletionPreview.value.members.map((member) => ({
+      memberId: member._id,
+      roleId: memberReassignments.value[member._id],
+    }));
+    const res = hasAssignedMembers.value
+      ? await deleteWithReassignments(selectedRoleId.value, reassignments)
+      : await deleteRole(selectedRoleId.value);
+
+    closeDeleteDialog();
     showMessage(res.message, "success");
     getRoles();
   } catch (error: any) {
-    const errorMessage = error?.response?._data?.message;
+    const errorMessage =
+      error?.response?._data?.message || "Failed to delete role.";
     showMessage(errorMessage, "error");
   } finally {
     deleteLoading.value = false;
-    selectedRoleId.value = null;
   }
 }
 </script>

package/components/ScanVisitorQRCode.vue

@@ -60,7 +60,9 @@ const props = defineProps({
 
 const { standardFormatDate } = useUtils();
 
-const { validateVisitorQrCode } = useVisitor();
+const { validateVisitorQrCode, getVisitors } = useVisitor();
+
+const { getPassKeysByPageSearch } = usePassKey();
 
 const emits = defineEmits([
   "closeDialog",
@@ -97,8 +99,6 @@ const handleScanVisitorQRCode = async () => {
         showNotFoundMessage.value = false;
         // Automatically navigate to the scanned URL if it's a valid link
         if (isValidUrl(qrCodeMessage)) {
-          console.log("QR Code value", qrCodeMessage);
-          console.log("Last _id", qrCodeMessage.split("/").pop());
           // get the last _id in the url
           const id = qrCodeMessage.split("/").pop();
           // check if it's a valid mongodb _id
@@ -108,7 +108,6 @@ const handleScanVisitorQRCode = async () => {
               props.site as string,
               id as string
             );
-            console.log("validateVisitorQrCode", response);
             if (response.errorMessage) {
               showNotFoundMessage.value = true;
               errorMessage.value =
@@ -122,9 +121,38 @@ const handleScanVisitorQRCode = async () => {
               emits("openVisitorDataFromScannedQrCodeDialog", response);
             }
           } else {
-            showNotFoundMessage.value = true;
-            errorMessage.value = "Invalid mongodb _id.";
-            showMessage(errorMessage.value, "error");
+            const result: any = await getPassKeysByPageSearch({
+              sites: [props.site as string],
+              search: qrCodeMessage,
+            });
+
+            if (result.items?.length < 1) {
+              showMessage(`Pass or Key ${qrCodeMessage} not found.`, "error");
+              return;
+            }
+
+            const data: any = await getVisitors({
+              site: props.site as string,
+              passOrKey: {
+                keyId: result.items[0]._id,
+                type: result.items[0].passType == "pass-key" ? "key" : "pass",
+              },
+              checkedOut: false,
+            });
+
+            if (data.items?.length < 1) {
+              showMessage(
+                `There are no unchecked-out visitor transactions for the scanned ${
+                  result.items[0].passType == "pass-key" ? "Key" : "Pass"
+                } ${qrCodeMessage}.`,
+                "error"
+              );
+
+              return;
+            }
+
+            closeDialog();
+            emits("openVisitorDataFromScannedQrCodeDialog", data.items[0]);
           }
 
           // window.location.href = qrCodeMessage;

package/components/ScheduleAreaMain.vue

@@ -21,7 +21,7 @@
         <template #extension>
           <v-row no-gutters class="w-100 d-flex flex-column">
             <v-card
-              class="w-100 px-3 d-flex align-center ga-5 py-2"
+              class="w-100 filter-bar d-flex align-center ga-5"
               flat
               :height="60"
             >
@@ -68,20 +68,18 @@
             <v-spacer />
 
             <v-col cols="auto">
-              <v-chip
+              <StatusChip
                 v-if="isScheduleClosed"
-                color="error"
-                variant="tonal"
+                status="Closed"
                 class="text-capitalize mr-2"
               >
-                <v-icon start>mdi-lock</v-icon>
+                <v-icon size="14">mdi-lock</v-icon>
                 Closed – View Only
-              </v-chip>
+              </StatusChip>
               <v-btn
                 v-if="canViewHistory"
-                class="text-none mr-2"
-                size="large"
-                color="primary"
+                class="text-none mr-2 screen-btn-primary"
+                variant="flat"
                 aria-label="History"
                 @click="openHistory"
               >
@@ -89,9 +87,8 @@
               </v-btn>
               <v-btn
                 v-if="canGenerateChecklist"
-                class="text-none"
-                size="large"
-                color="primary"
+                class="text-none screen-btn-primary"
+                variant="flat"
                 aria-label="Generate"
                 @click="_generateChecklist"
                 :loading="submitting"
@@ -114,20 +111,13 @@
             </span>
           </div>
           <div v-else-if="isScheduleClosed">
-            <v-chip
-              size="small"
-              color="error"
-              variant="tonal"
-              class="text-capitalize"
-              >Closed</v-chip
-            >
+            <StatusChip status="Closed" class="text-capitalize" />
           </div>
           <div v-else>
             <v-btn
               v-if="canManageScheduleTasks"
               variant="outlined"
-              size="medium"
-              class="text-capitalize px-4 py-2"
+              class="text-capitalize screen-btn-ghost"
               @click.stop="() => _acceptAreaChecklist(item._id)"
             >
               Accept
@@ -146,14 +136,11 @@
         </template>
 
         <template #item.status="{ value }">
-          <v-chip
+          <StatusChip
             class="text-capitalize"
-            :color="getStatusColor(value)"
-            variant="flat"
-            pill
-          >
-            {{ value || "No Status" }}
-          </v-chip>
+            :status="value"
+            :label="value || 'No Status'"
+          />
         </template>
       </TableMain></v-col
     >
@@ -262,27 +249,6 @@ watchEffect(() => {
   }
 });
 
-const getStatusColor = (status: unknown): string => {
-  if (!status) return "grey";
-
-  const normalized = String(status).toLowerCase();
-
-  switch (normalized) {
-    case "open":
-      return "grey";
-    case "ongoing":
-      return "primary";
-    case "completed":
-    case "accepted":
-      return "success";
-    case "closed":
-    case "rejected":
-      return "error";
-    default:
-      return "secondary";
-  }
-};
-
 function showMessage(msg: string, color: string = "error") {
   message.value = msg;
   messageColor.value = color;

package/components/ScheduleTaskMain.vue

@@ -21,10 +21,8 @@
           <v-row no-gutters align="center" class="w-100">
             <v-col cols="auto" v-if="canCreateScheduleTask">
               <v-btn
-                class="text-none"
-                rounded="pill"
-                variant="tonal"
-                size="large"
+                class="text-none screen-btn-primary"
+                variant="flat"
                 @click="openFormDialog"
               >
                 Create Schedule Task
@@ -33,7 +31,7 @@
 
             <v-spacer />
 
-            <v-col cols="auto">
+            <v-col cols="auto" class="filter-field">
               <v-text-field
                 v-model="searchInput"
                 density="compact"
@@ -49,28 +47,31 @@
 
         <template #item.areas="{ value }">
           <div v-if="value && value.length > 0">
-            <v-chip
+            <StatusChip
               v-for="(area, idx) in value.slice(0, 2)"
               :key="idx"
-              size="small"
               class="mr-1 mb-1"
-            >
-              {{ area.name }}
-            </v-chip>
-            <v-chip v-if="value.length > 2" size="small" class="mb-1">
-              +{{ value.length - 2 }} more
-            </v-chip>
+              :dot="false"
+              tone="neutral"
+              :label="area.name"
+            />
+            <StatusChip
+              v-if="value.length > 2"
+              class="mb-1"
+              :dot="false"
+              tone="neutral"
+              :label="`+${value.length - 2} more`"
+            />
           </div>
           <span v-else>N/A</span>
         </template>
 
         <template #item.status="{ value }">
-          <v-chip
-            :color="value === 'active' ? 'success' : 'default'"
+          <StatusChip
             class="text-capitalize"
-          >
-            {{ value || "N/A" }}
-          </v-chip>
+            :status="value"
+            :label="value || 'N/A'"
+          />
         </template>
       </TableMain>
 
@@ -270,15 +271,11 @@
                     Status:
                   </v-col>
                   <v-col cols="7" class="text-subtitle-2">
-                    <v-chip
-                      :color="
-                        selectedTask.status === 'active' ? 'success' : 'default'
-                      "
-                      size="small"
+                    <StatusChip
                       class="text-capitalize"
-                    >
-                      {{ selectedTask.status || "N/A" }}
-                    </v-chip>
+                      :status="selectedTask.status"
+                      :label="selectedTask.status || 'N/A'"
+                    />
                   </v-col>
                 </v-row>