@7365admin1/layer-common 3.2.2-staging.82 → 3.2.2-staging.84

package/components/FormDialog.vue

@@ -1,31 +1,35 @@
+<!--
+  PHASE 3 - THE MODAL.
+
+  520px, 16px radius and the design's overlay and shadow, with the BODY as the
+  only thing that scrolls so the footer never leaves the screen. Same dialog,
+  same slots, same close behaviour, same `persistent`.
+
+  The two `theme.name.value === ...` branches are gone, and that is a fix, not
+  a preference: they hard-coded `bg-white` and Vuetify's `grey-darken-4`, so
+  the card was painted by a literal colour instead of by the theme it is in.
+  `--card` is that surface in each theme.
+-->
 <template>
-  <v-dialog v-model="model" max-width="600" persistent>
-    <v-card
-      class="px-3 d-flex flex-column"
-      :class="`${theme.name.value === 'light' ? 'bg-white' : ''} ${
-        mdAndUp ? 'rounded-xl' : ''
-      }`"
-      :style="{ border: 'none', boxShadow: 'none' }"
-    >
+  <v-dialog v-model="model" :max-width="520" persistent class="form-dialog">
+    <v-card class="d-flex flex-column form-dialog__card" :style="{ border: 'none' }">
       <v-toolbar
-        :color="theme.name.value === 'dark' ? 'grey-darken-4' : 'white'"
-        class="flex-shrink-0 mb-3"
+        color="transparent"
+        class="flex-shrink-0 form-dialog__head"
         style="position: sticky; top: 0; z-index: 10"
       >
         <slot name="title">
-          <span class="text-h6 font-weight-medium pt-1 text-capitalize">
-            Dialog
-          </span>
+          <span class="form-dialog__title"> Dialog </span>
         </slot>
         <v-spacer />
-        <v-btn icon="mdi-close" @click="closeDialog" />
+        <v-btn icon="mdi-close" variant="text" @click="closeDialog" />
       </v-toolbar>
 
-      <v-sheet class="flex-grow-1 overflow-y-auto px-3">
+      <v-sheet class="flex-grow-1 overflow-y-auto px-4 form-dialog__body">
         <slot />
       </v-sheet>
 
-      <v-sheet class="flex-shrink-0 px-3 py-2">
+      <v-sheet class="flex-shrink-0 px-4 py-3 form-dialog__footer">
         <slot name="footer" />
       </v-sheet>
     </v-card>
@@ -33,11 +37,6 @@
 </template>
 
 <script setup lang="ts">
-import { useTheme, useDisplay } from "vuetify";
-
-const theme = useTheme().global;
-const { mdAndUp } = useDisplay();
-
 const props = defineProps<{
   modelValue: boolean;
 }>();
@@ -62,4 +61,44 @@ function closeDialog() {
 :deep(.v-dialog .v-overlay__content) {
   margin: auto;
 }
+
+.form-dialog__card {
+  font-family: var(--font-sans);
+  background: var(--card);
+  /* `!important` because Vuetify's own `.v-overlay__content > .v-card` rule is
+     more specific than a class on the card, and it is what keeps the dialog at
+     its factory 4px. */
+  border-radius: var(--r-modal) !important;
+  box-shadow: var(--shadow-modal);
+  /* Never taller than the screen it has to fit inside; the body is what
+     scrolls, so the Cancel/Submit footer cannot be pushed out of view. */
+  max-height: calc(100vh - 32px);
+  overflow: hidden;
+}
+
+.form-dialog__head {
+  border-bottom: 1px solid var(--border);
+}
+
+.form-dialog__title {
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  color: var(--text);
+  text-transform: capitalize;
+}
+
+.form-dialog__body,
+.form-dialog__footer {
+  background: var(--card);
+}
+
+.form-dialog__footer {
+  border-top: 1px solid var(--border);
+}
+
+@media (max-width: 599.98px) {
+  .form-dialog__card {
+    max-height: calc(100dvh - 32px);
+  }
+}
 </style>

package/components/RolePermissionMain.vue

@@ -105,42 +105,90 @@
       />
     </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>
-
-      <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-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>
+
+        <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>
@@ -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])
+  )
+);
 
-function openDeleteDialog(id: string) {
+const { getDeletionPreview, deleteWithReassignments } = useRole();
+
+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/StatusChip.vue

@@ -0,0 +1,64 @@
+<!--
+  THE STATUS CHIP.
+
+  A pill in the tone the design assigns to the status WORD, with the 6px
+  leading dot. The word -> tone mapping is `utils/status.ts` and is shared, so
+  "Open" is the same green on a work order and on a Daily Occurrence Book, and
+  a status the design never named comes out neutral rather than guessed.
+
+  Colour only. The chip prints the label it is given; it does not decide, map,
+  translate or shorten a status.
+-->
+<template>
+  <span class="status-chip" :class="[toneClass, { 'status-chip--plain': !dot }]">
+    <span v-if="dot" class="status-chip__dot" />
+    {{ label ?? status }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { statusToneClass } from "../utils/status";
+
+const props = defineProps({
+  /** The status word - what decides the colour. */
+  status: { type: String, default: "" },
+  /** What to PRINT, when that differs from the word being matched on. */
+  label: { type: String, default: undefined },
+  /** The design's tag chips (pass IDs, role names) carry no leading dot. */
+  dot: { type: Boolean, default: true },
+});
+
+const toneClass = computed(() => statusToneClass(props.status));
+</script>
+
+<style scoped>
+.status-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: var(--r-pill);
+  font-family: var(--font-sans);
+  font-size: var(--fs-chip-lg);
+  font-weight: var(--fw-chip);
+  line-height: 1.4;
+  white-space: nowrap;
+  /* `--tone-bg` is set alongside the colour by the `.tone-*` class - see
+     assets/css/tokens.css - so one class carries both halves of the pair the
+     contrast was measured on. */
+  background: var(--tone-bg);
+}
+
+.status-chip--plain {
+  border-radius: var(--r-tag);
+  font-size: var(--fs-chip);
+}
+
+.status-chip__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--r-pill);
+  background: currentColor;
+  flex: 0 0 6px;
+}
+</style>

package/components/TableMain.vue

@@ -1,3 +1,18 @@
+<!--
+  PHASE 3 - THE STANDARD TABLE CARD.
+
+  The redesign is, more than anything else, a table card: toolbar row (refresh,
+  optional in-card search, pagination) -> uppercase header row -> rows. This is
+  the shared one, so this file is where that pattern is drawn once.
+
+  VISUAL ONLY, and that matters more here than anywhere. Every column, filter,
+  sort, action, slot, prop, emit and page still behaves exactly as it did:
+  the headers are the caller's, the items are the caller's, every slot is still
+  forwarded to `v-data-table` untouched, and no prop's default has changed. The
+  empty state is the same wording `v-data-table` already showed, with the icon
+  the design draws above it - and it is only supplied when the caller has NOT
+  passed its own `no-data` slot.
+-->
 <template>
   <v-row no-gutters>
     <!-- Top Actions -->
@@ -5,13 +20,17 @@
       <v-row no-gutters>
         <slot name="actions">
           <v-col cols="12">
-            <v-row no-gutters class="ga-2">
+            <v-row no-gutters class="ga-2 align-center table-card__actions">
+              <!--
+                The design's primary button: the accent fill that may carry a
+                white label (`--accent-strong`; white on `--accent` is 3.23:1),
+                40px, 10px radius, leading icon. Same click, same label.
+              -->
               <v-btn
                 v-if="canCreate"
-                class="text-none"
-                rounded="pill"
-                variant="tonal"
-                size="large"
+                class="text-none table-card__primary"
+                variant="flat"
+                prepend-icon="mdi-plus"
                 @click="emits('create')"
               >
                 {{ createLabel }}
@@ -25,14 +44,14 @@
                 max-width="300"
                 append-inner-icon="mdi-magnify"
                 hide-details
+                class="table-card__search"
               />
+              <!-- Ghost/secondary, as the design specifies for Scan QR Code. -->
               <v-btn
                 v-if="canScanVisitorQRCode"
                 text="Scan QR Code"
-                class="text-none ml-2"
-                rounded="pill"
-                variant="tonal"
-                size="large"
+                class="text-none ml-2 table-card__ghost"
+                variant="outlined"
                 @click="emits('scan')"
               />
             </v-row>
@@ -45,19 +64,19 @@
     <v-col cols="12">
       <v-card
         width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
+        variant="flat"
+        class="table-card"
         :loading="loading"
       >
         <!-- Toolbar -->
         <v-toolbar
           density="compact"
-          color="grey-lighten-4"
+          color="transparent"
+          class="table-card__toolbar"
           :extension-height="extensionHeight"
         >
           <template #prepend>
-            <v-btn fab icon density="comfortable" @click="emits('refresh')">
+            <v-btn fab icon density="comfortable" variant="text" @click="emits('refresh')">
               <v-icon>mdi-refresh</v-icon>
             </v-btn>
             <slot name="prepend-additional" />
@@ -65,7 +84,7 @@
 
           <template #append>
             <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
+              <span class="mr-2 table-card__range">
                 {{ pageRange }}
               </span>
               <local-pagination
@@ -96,6 +115,18 @@
           <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
             <slot :name="slotName" v-bind="slotProps" />
           </template>
+
+          <!--
+            The design's empty state. Same sentence the table already showed;
+            only supplied when the caller has not passed its own, so nobody's
+            existing empty state is replaced.
+          -->
+          <template v-if="!$slots['no-data']" #no-data>
+            <div class="table-card__empty">
+              <v-icon icon="mdi-magnify-close" size="32" />
+              <span>No data available</span>
+            </div>
+          </template>
         </v-data-table>
         <slot name="footer" />
       </v-card>
@@ -187,7 +218,134 @@ watch(
 </script>
 
 <style scoped>
-.v-data-table :deep(thead th) {
-  font-weight: bold !important;
+/* ------------------------------------------------------------------ */
+/* The card.                                                           */
+/* ------------------------------------------------------------------ */
+
+.table-card {
+  font-family: var(--font-sans);
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-card);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+/**
+ * The toolbar was `color="grey-lighten-4"` - a literal Vuetify grey, which is
+ * a near-white bar sitting on a #1c1e24 card in dark mode. It is the card's
+ * own surface now, with the design's rule under it.
+ */
+.table-card__toolbar {
+  border-bottom: 1px solid var(--border);
+}
+
+.table-card__range {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ------------------------------------------------------------------ */
+/* The header row and the rows under it.                               */
+/* ------------------------------------------------------------------ */
+
+.table-card :deep(thead th) {
+  background: var(--thead) !important;
+  color: var(--muted) !important;
+  font-size: var(--fs-table-head) !important;
+  font-weight: var(--fw-table-head) !important;
+  letter-spacing: var(--ls-table-head);
+  text-transform: uppercase;
+  padding: 10px var(--cellpad-x) !important;
+  height: auto !important;
+  border-bottom: 1px solid var(--border) !important;
+  white-space: nowrap;
+}
+
+.table-card :deep(tbody td) {
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+  color: var(--text);
+  padding: var(--cellpad) var(--cellpad-x) !important;
+  height: auto !important;
+  font-variant-numeric: tabular-nums;
+}
+
+.table-card :deep(tbody tr:hover > td) {
+  background: var(--hover);
+}
+
+/* ------------------------------------------------------------------ */
+/* Empty state, in-card search, buttons and in-card tabs.              */
+/* ------------------------------------------------------------------ */
+
+.table-card__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 52px 16px;
+  font-size: var(--fs-cell);
+  color: var(--muted);
+}
+
+.table-card__empty :deep(.v-icon) {
+  color: var(--muted);
+}
+
+/* The in-card variant: 34px, 10px radius, as drawn. */
+.table-card__search :deep(.v-field) {
+  border-radius: var(--r-inner);
+  font-size: var(--fs-cell);
+}
+
+.table-card__primary {
+  height: var(--btn-h);
+  border-radius: var(--r-inner);
+  padding: 0 16px;
+  font-size: var(--fs-btn);
+  font-weight: var(--fw-btn-strong);
+  letter-spacing: 0;
+  background: var(--accent-strong);
+  color: var(--on-accent-strong);
+}
+
+.table-card__ghost {
+  height: var(--btn-h);
+  border-radius: var(--r-inner);
+  padding: 0 16px;
+  font-size: var(--fs-btn);
+  font-weight: var(--fw-btn);
+  letter-spacing: 0;
+  color: var(--text2);
+  border-color: var(--border);
+  background: var(--card);
+}
+
+/**
+ * Tabs that a screen puts in this card's extension slot: 13px, the active one
+ * at 800 in `--accent-text` over a 2px accent underline. Tabs elsewhere in the
+ * product are their own screens' and are restyled with them.
+ */
+.table-card :deep(.v-tab) {
+  font-size: var(--fs-nav);
+  font-weight: var(--fw-cell);
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--muted);
+  min-width: 0;
+}
+
+.table-card :deep(.v-tab.v-tab--selected) {
+  font-weight: var(--fw-table-head);
+  color: var(--accent-text);
+}
+
+.table-card :deep(.v-tab .v-tab__slider) {
+  height: 2px;
+  background: var(--accent);
 }
 </style>

package/composables/useRole.ts

@@ -68,6 +68,26 @@ export default function useRole() {
     });
   }
 
+  function getDeletionPreview(_id: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/roles/${_id}/deletion-preview`,
+      { method: "GET" }
+    );
+  }
+
+  function deleteWithReassignments(
+    _id: string,
+    reassignments: Array<{ memberId: string; roleId: string }>
+  ) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/roles/${_id}/delete-with-reassignments`,
+      {
+        method: "PUT",
+        body: { reassignments },
+      }
+    );
+  }
+
   const role = useState<TRole>("userRole", () => {
     return {
       _id: "",
@@ -103,6 +123,8 @@ export default function useRole() {
     updateRoleById,
     updateRoleFieldById,
     deleteRole,
+    getDeletionPreview,
+    deleteWithReassignments,
     updatePermissionById,
     getRoleByUserId,
   };

package/package.json

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