npm - @7365admin1/layer-common - Versions diffs - 4.0.1 → 4.0.2 - Mend

@7365admin1/layer-common 4.0.1 → 4.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/CHANGELOG.md +101 -0
package/components/CameraForm.vue +2 -5
package/components/CameraMain.vue +3 -6
package/components/ClientDetailForm.vue +65 -5
package/components/ClientMain.vue +201 -59
package/components/HidAccessLogDashboard.vue +114 -34
package/components/HidReaderManagement.vue +34 -11
package/components/HidReaderUserRoster.vue +376 -0
package/components/HidUserEnrollment.vue +6 -0
package/components/HidUserMapping.vue +583 -0
package/components/MemberMain.vue +12 -2
package/components/RolePermissionMain.vue +2 -1
package/composables/useConsoleTier.ts +73 -0
package/composables/useHidAmico.ts +18 -1
package/composables/useHidNavigation.ts +8 -1
package/composables/useMember.ts +0 -5
package/package.json +1 -1
package/pages/[org]/[site]/access-mgmt/hid-user-mapping/index.vue +23 -0
package/pages/[org]/[site]/access-mgmt/hid-users/index.vue +1 -1
package/utils/client-subscription.test.ts +95 -0
package/utils/console-tier.test.ts +87 -0
package/utils/console-tier.ts +67 -0
package/utils/data.test.ts +84 -0
package/utils/data.ts +92 -0

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,106 @@
 # @iservice365/layer-common
+## 4.0.2
+### Patch Changes
+- ce3ece5: Suspend and reactivate a client from the staff console, owner-only, and fix
+  four controls on the console screens that failed without saying so.
+  ## Suspend / reactivate (owner decision 4 and 9)
+  `ClientMain.vue` already called `PATCH /api/organizations/:id/status`. The
+  backend for it merged as `iservice365-core` #1884 and is now owner-gated
+  (`requirePlatformOwner`), so the screen has to know which tier it is drawing
+  for - and it had no way to tell the owner from ordinary Seven365 staff.
+  `utils/console-tier.ts` + `composables/useConsoleTier.ts` mirror the server's
+  own rule from two endpoints the console already calls, unprojected:
+      GET /api/members/user/:user/app/admin    the Seven365 staff membership
+      GET /api/roles/id/:role                  that membership's role document
+      owner  = member.type === "admin" && role.type === "admin" && role.default === true
+      staff  = member.type === "admin" && role.type === "admin"
+  `role.default` is the marker because it is the only property of a platform
+  staff role no API caller can set - `role.controller.ts` validates create and
+  update with Joi object schemas that do not list it, `role.repo.ts` never writes
+  it, `MRole` defaults it to `false`, and only `user.service.ts
+createDefaultUser()` sets it at API boot. A role NAME proves nothing: staging
+  carries an ordinary organisation role merely named "Super Admin".
+  **This decides what is DRAWN, and nothing else.** The server re-decides on
+  every call from the session id, so a browser that flips the flag gets a visible
+  button and a 401. Anything the front end cannot positively prove is `none` -
+  it fails closed.
+  The suspend confirmation now says what actually happens in the owner's terms:
+  everyone who belongs to the client is blocked from signing in - staff,
+  residents and guards - nothing is deleted, and it is reversible. Reactivating
+  confirms without a warning. After either, the list re-reads and the row moves
+  to the tab matching its new status; the state shown comes from the existing
+  `utils/client-subscription.ts` derivation, not a second copy of the rule.
+  ## Four controls that failed silently
+  - **`ClientMain.vue` - the row menu had no background.** It teleports to
+    `<body>`, which is outside the element Vuetify puts `v-theme--light` /
+    `v-theme--dark` on, and every token in `tokens.css` is declared under
+    `[class*="v-theme--"]`. `background: var(--card)` therefore resolved to
+    nothing: measured `rgba(0, 0, 0, 0)` in both themes, with the table's own
+    text showing through the menu items. Its border, ink and hover were dead for
+    the same reason. The menu now names its theme on itself.
+  - **`ClientMain.vue` - a refused suspend said nothing.** Both handlers ended in
+    `console.error`, so pressing Suspend looked exactly like pressing nothing -
+    which is what an ordinary staff member now gets from the owner-gated
+    endpoint. The refusal is shown on the dialog, which stays open.
+  - **`ClientDetailForm.vue` - a failed save and a failed load both drew as
+    normal.** `handleSubmit` swallowed the error into `console.error`; the two
+    loaders had no `catch` at all, so a failed request rejected inside the
+    watcher and the drawer drew every field blank and an empty site table - an
+    error shown as "this client has nothing in it". Both now say so. An
+    organisation with no service application says that too, instead of an empty
+    list.
+  - **`MemberMain.vue` - two error paths.** A refused role change set the
+    snackbar's text but never opened it, so it said nothing at all; a failed
+    status change with no `message` on the error drew an empty red snackbar.
+  No endpoint, request shape or response shape changed, and nothing new is called
+  that did not already exist.
+- 6d654d6: Remove a duplicate `:site` attribute on `HidReaderManagement.vue`.
+  `HidReaderForm` was given `:site` twice - `props.site` and then a bare `site`, which is
+  not a name that exists in that component's scope. Vite's Vue plugin treats a duplicate
+  attribute as a compile error, so every consuming application's `nuxt build` failed on
+  this file. The layer's own playground build does not import the component, which is why
+  it was not caught at publish time.
+- c4683d1: Promo codes can be edited, turned off and removed from the staff console.
+  `usePromoCode()` gains `getById`, `update`, `updateStatus` and `remove`, matching the
+  `PUT /api/promo-codes/:id`, `PATCH /api/promo-codes/:id/status` and
+  `DELETE /api/promo-codes/:id` endpoints. `update` never sends `code`, which the server
+  treats as immutable because subscriptions and invoices quote a code by its text.
+  `utils/promo-code-form.ts` holds the editor's rules - loading a record into the form,
+  building the request body, and refusing what the API refuses, in wording a person can
+  act on.
+- 780112d: Stop the Roles & Permissions screen firing an id-less request on every visit, and
+  remove a dead, malformed member-lookup function.
+  `RolePermissionMain.vue` fetched a role by id as soon as the component mounted,
+  before any role had been picked, sending `GET /api/roles/id` with no id on the
+  end. The real fetch already runs correctly once a row is clicked (a `watchEffect`
+  handles that); the mount-time fetch was just extra noise hitting the API for
+  nothing. It now waits for a real id (`immediate: false`).
+  Also removes `useMember.getByMemberId`, which built the malformed path
+  `/api//user/${user}` and had no caller anywhere in this package or the 11 web
+  apps.
 ## 4.0.1
 ### Patch Changes

package/components/CameraForm.vue CHANGED Viewed

@@ -130,6 +130,7 @@
 <script setup lang="ts">
 import useSiteSettings from "../composables/useSiteSettings";
+import { cameraErrorConverter } from "../utils/data";
 const prop = defineProps({
   title: {
@@ -298,11 +299,7 @@ async function submit() {
     emit("success", `${prop.title} added successfully!`);
   } catch (error: any) {
-    console.log(
-      "error",
-      error.response?._data?.message || "Failed to add camera"
-    );
-    emit("error", error.response?._data?.message || "Failed to add camera");
+    emit("error", cameraErrorConverter(error, prop.type));
   } finally {
     disable.value = false;
   }

package/components/CameraMain.vue CHANGED Viewed

@@ -248,6 +248,7 @@
 <script setup lang="ts">
 import type { PropType } from "vue";
 import useSiteSettings from "../composables/useSiteSettings";
+import { cameraErrorConverter } from "../utils/data";
 const events = defineEmits(["update:value", "row-click"]);
@@ -363,8 +364,7 @@ function openDialogDelete() {
 }
 function handleError(msg: string) {
-  const text = prop.type === "ip" ? "CCTV camera already exist" : msg;
-  showMessage(text, "error");
+  showMessage(msg, "error");
 }
 function handleSuccess() {
@@ -416,10 +416,7 @@ async function submitDelete() {
     await getCameraRefresh();
     dialogDelete.value = false;
   } catch (error: any) {
-    showMessage(
-      error?.response?._data?.message || "Failed to delete camera.",
-      "error"
-    );
+    showMessage(cameraErrorConverter(error, prop.type), "error");
   }
 }
 </script>

package/components/ClientDetailForm.vue CHANGED Viewed

@@ -9,10 +9,15 @@
       <div class="actions">
         <button class="btn-cancel" @click="$emit('cancel')">Cancel</button>
-        <button class="btn-submit" @click="handleSubmit">Submit</button>
+        <button class="btn-submit" :disabled="saving" @click="handleSubmit">
+          {{ saving ? 'Saving...' : 'Submit' }}
+        </button>
       </div>
     </div>
+    <p v-if="loadError" class="form-error" role="alert">{{ loadError }}</p>
+    <p v-else-if="formError" class="form-error" role="alert">{{ formError }}</p>
     <!-- ===== CLIENT INFORMATION ===== -->
     <section class="section">
       <h3>Client Information</h3>
@@ -133,7 +138,12 @@
     <!-- ===== INCLUDED APPLICATION ===== -->
     <section class="section">
       <h3>Included Application</h3>
-      <ul class="app-list">
+      <!-- A plain organisation has no service application of its own, so the
+           list is legitimately empty. An empty <ul> reads as a broken box. -->
+      <p v-if="form.includedApps.length === 0" class="app-none">
+        No service application recorded for this client.
+      </p>
+      <ul v-else class="app-list">
         <li v-for="(app, idx) in form.includedApps" :key="idx">{{ app }}</li>
       </ul>
     </section>
@@ -266,6 +276,10 @@ const errors = reactive({
 const phonePrefix = ref('+65')
 const phoneNumber = ref('')
+const saving     = ref(false)
+const loadError  = ref('')
+const formError  = ref('')
 /* ── FORM STATE ── */
 const form = reactive({
   name: '',
@@ -348,6 +362,9 @@ async function handleSubmit() {
   form.phone = `${phonePrefix.value} ${phoneNumber.value}`
+  saving.value = true
+  formError.value = ''
   try {
     if (userId.value) {
       await userApi.updateUserFieldById(userId.value, 'name', form.name)
@@ -359,8 +376,16 @@ async function handleSubmit() {
     })
     emit('submit', { ...form })
-  } catch (error) {
-    console.error(error)
+  } catch (error: any) {
+    // A failed save used to reach `console.error` and nothing else, so Submit
+    // looked exactly like a button that did nothing - the screen stayed put
+    // with the typed values still in it, which reads as "not saved yet".
+    formError.value =
+      error?.response?._data?.message ??
+      error?.data?.message ??
+      'Could not save this client. Nothing was changed.'
+  } finally {
+    saving.value = false
   }
 }
 const userId = ref('')
@@ -419,7 +444,19 @@ watch(
   async client => {
     if (!client?._id) return
-    await Promise.all([loadOrganization(), loadSites()])
+    loadError.value = ''
+    try {
+      await Promise.all([loadOrganization(), loadSites()])
+    } catch (error: any) {
+      // Neither loader caught anything, so a failed request rejected inside
+      // this watcher and the drawer drew every field blank and an empty site
+      // table - an error shown as "this client has nothing in it".
+      loadError.value =
+        error?.response?._data?.message ??
+        error?.data?.message ??
+        'Could not load this client. Nothing here has been saved or changed.'
+    }
   },
   {
     immediate: true
@@ -654,6 +691,29 @@ watch(
   color: var(--err);
 }
+/* A failed load or a failed save, said once at the top of the form where the
+   reader already is. `--err-bg` fill + `--err` ink, the design's error pair. */
+.form-error {
+  margin: 0 28px 18px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: var(--err-bg);
+  color: var(--err);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.45;
+}
+.btn-submit:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+/* `--text2` is the reading token for secondary copy; `--muted` measures below
+   AA at this size. */
+.app-none {
+  font-size: 13.5px;
+  color: var(--text2);
+}
 /*
  * MEASURED at 360: the form overflowed the viewport by 147px in both themes.
  * Its two-column grid, its 28px side padding and its header row are all fixed,

package/components/ClientMain.vue CHANGED Viewed

@@ -56,7 +56,15 @@
       <div class="table-card">
         <!-- Toolbar row -->
-        <div v-if="savedNote" class="saved-note" role="status">
+        <!-- Confirmations AND failures. A suspend that the server refused used
+             to reach `console.error` and nothing else, so the control read as
+             one that quietly did nothing. -->
+        <div
+          v-if="savedNote"
+          class="saved-note"
+          :class="{ 'saved-note-error': noteIsError }"
+          :role="noteIsError ? 'alert' : 'status'"
+        >
           {{ savedNote }}
           <button class="saved-note-close" @click="savedNote = ''">&times;</button>
         </div>
@@ -266,27 +274,74 @@
       </div>
     </div>
-    <!-- ===== SUSPEND CONFIRMATION DIALOG ===== -->
-    <div v-if="confirmSuspendItem" class="overlay" @click.self="cancelSuspend">
+    <!--
+      SUSPEND / REACTIVATE CONFIRMATION.
+      One dialog for both directions, because one endpoint serves both. The
+      suspend wording says what actually happens in the owner's own terms
+      (owner decision 4) rather than "are you sure": the people who lose access
+      are not only the client's office staff, and the two things a person most
+      needs to know before pressing it are that nothing is deleted and that it
+      can be undone. Reactivating needs no warning, but it still confirms - it
+      is a real change to who can sign in.
+    -->
+    <div v-if="confirmItem" class="overlay" @click.self="cancelConfirm">
       <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>
+        <template v-if="confirmAction === 'suspended'">
+          <h3 class="confirm-title">Suspend {{ confirmItem?.name }}?</h3>
+          <p class="confirm-text">
+            Everyone who belongs to this client will be blocked from signing in
+            &mdash; their staff, their residents and their guards.
+          </p>
+          <p class="confirm-text">
+            Nothing is deleted. All of their data is kept.
+          </p>
+          <p class="confirm-text">
+            You can reactivate them at any time and they get straight back in.
+          </p>
+        </template>
+        <template v-else>
+          <h3 class="confirm-title">Reactivate {{ confirmItem?.name }}?</h3>
+          <p class="confirm-text">
+            Their staff, residents and guards will be able to sign in again.
+          </p>
+        </template>
+        <p v-if="confirmError" class="confirm-error" role="alert">{{ confirmError }}</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 class="btn-cancel" :disabled="confirmLoading" @click="cancelConfirm">Cancel</button>
+          <button
+            :class="confirmAction === 'suspended' ? 'btn-confirm-danger' : 'btn-confirm'"
+            :disabled="confirmLoading"
+            @click="runConfirm"
+          >
+            <span v-if="confirmLoading" class="spinner spinner-light" />
+            <span v-else>{{ confirmAction === 'suspended' ? 'Suspend' : 'Reactivate' }}</span>
           </button>
         </div>
       </div>
     </div>
+    <!--
+      THE ROW MENU CARRIES ITS OWN THEME CLASS.
+      It teleports to `<body>`, which is OUTSIDE the `v-application` element
+      Vuetify puts `v-theme--light` / `v-theme--dark` on - and every design
+      token in `tokens.css` is declared under `[class*="v-theme--"]`. So
+      `background: var(--card)` resolved to NOTHING and the menu drew with a
+      fully transparent background: measured `rgba(0, 0, 0, 0)` in both themes,
+      with the table's own text showing straight through the menu items. Its
+      border, ink and hover were dead for the same reason. Naming the theme on
+      the element itself brings all of them back without moving the teleport,
+      which is what keeps the menu clear of the table's `overflow`.
+    -->
     <Teleport to="body">
       <div
         v-if="openMenuId"
         class="dropdown"
+        :class="`v-theme--${currentTheme}`"
         :style="{ top: menuPos.top + 'px', left: menuPos.left + 'px' }"
       >
         <button class="dd-item" @click="viewClient(activeMenuItem)">
@@ -295,20 +350,29 @@
         <button class="dd-item" @click="openSubscription(activeMenuItem)">
           {{ activeMenuItem?.sub?.state === 'none' ? 'Set up subscription' : 'Edit subscription' }}
         </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>
+        <!--
+          OWNER ONLY (owner decision 9). Ordinary Seven365 staff may view
+          clients and set up subscriptions; only the owner may stop a client's
+          people signing in. The server decides this again on every call -
+          `requirePlatformOwner` reads the session, not anything the browser
+          sends - so this hides a control it does not guard.
+        -->
+        <template v-if="isOwner">
+          <button
+            v-if="activeMenuItem?.status === 'suspended'"
+            class="dd-item"
+            @click="askConfirm(activeMenuItem, 'active')"
+          >
+            Reactivate
+          </button>
+          <button
+            v-else
+            class="dd-item danger"
+            @click="askConfirm(activeMenuItem, 'suspended')"
+          >
+            Suspend
+          </button>
+        </template>
       </div>
     </Teleport>
   </div>
@@ -319,6 +383,8 @@ import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import useOrg from '../composables/useOrg'
 import useVerification from '../composables/useVerification'
 import useRole from '../composables/useRole'
+import useConsoleTier from '../composables/useConsoleTier'
+import useThemePreference from '../composables/useThemePreference'
 import useUtils from '../composables/useUtils'
 import InvitationClientForm from './InvitationClientForm.vue'
 import ClientDetailForm from './ClientDetailForm.vue'
@@ -335,6 +401,10 @@ const { getOrganizationsWithSubscription, updateStatus } = useOrg()
 const { getVerifications, cancelUserInvitation } = useVerification()
 const { getCustomerSites: getCustomerSitesByOrgId } = useCustomerSite()
 const { getRoleById } = useRole()
+// Owner decision 9. Only decides what is DRAWN - see `utils/console-tier.ts`.
+const { isOwner, load: loadConsoleTier } = useConsoleTier()
+// Only for the teleported menu - see the comment above the Teleport.
+const { current: currentTheme } = useThemePreference()
 // The same helper the admin app's Organizations list uses to print a nature,
 // so both screens say the value the same way while both exist.
 const { formatNature } = useUtils()
@@ -378,9 +448,12 @@ const selectedClient  = ref<any>(null)
 const subscriptionClient = ref<any>(null)
 const savedNote          = ref('')
-/* suspend confirmation */
-const confirmSuspendItem    = ref<any>(null)
-const confirmSuspendLoading = ref(false)
+/* suspend / reactivate confirmation */
+const confirmItem    = ref<any>(null)
+const confirmAction  = ref<'active' | 'suspended'>('suspended')
+const confirmLoading = ref(false)
+const confirmError   = ref('')
+const noteIsError    = ref(false)
 /* ── COMPUTED ── */
 const pageRange = computed(() => {
@@ -409,37 +482,35 @@ function parseTotalItems(pageRangeStr: string, fallback: number): number {
   return match ? Number(match[1]) : fallback
 }
-async function suspendClient(item: any) {
-  try {
-    await updateStatus(item._id, "suspended")
-    closeMenu()
-    await fetchData()
-  } catch (err) {
-    console.error(err)
-  }
+/**
+ * Say what went wrong, in the words the API used where it gave any.
+ *
+ * `updateStatus` is owner-gated on the server, so the refusal an ordinary
+ * staff member gets here is a real, expected answer - not a crash. It used to
+ * land in `console.error`, which meant pressing Suspend looked exactly like
+ * pressing nothing.
+ */
+function apiMessage(err: any, fallback: string) {
+  return err?.response?._data?.message ?? err?.data?.message ?? fallback
 }
-async function activateClient(item: any) {
-  try {
-    await updateStatus(item._id, "active")
-    closeMenu()
-    await fetchData()
-  } catch (err) {
-    console.error(err)
-  }
+function showNote(text: string, isError = false) {
+  savedNote.value  = text
+  noteIsError.value = isError
 }
 /* ── SUBSCRIPTION ── */
 function openSubscription(item: any) {
   if (!item?._id) return
   savedNote.value = ''
+  noteIsError.value = false
   subscriptionClient.value = item
   closeMenu()
 }
 async function onSubscriptionSaved(message: string) {
   subscriptionClient.value = null
-  savedNote.value = message
+  showNote(message)
   // The list derives every subscription state from the record itself, so
   // re-reading it is all that is needed for the row to tell the truth again.
   await fetchData()
@@ -453,25 +524,57 @@ async function onSubscriptionSaved(message: string) {
   }
 }
-/* ── SUSPEND CONFIRMATION ── */
-function askSuspend(item: any) {
-  confirmSuspendItem.value = item
+/* ── SUSPEND / REACTIVATE CONFIRMATION ── */
+function askConfirm(item: any, action: 'active' | 'suspended') {
+  if (!item?._id) return
+  confirmItem.value   = item
+  confirmAction.value = action
+  confirmError.value  = ''
   closeMenu()
 }
-function cancelSuspend() {
-  if (confirmSuspendLoading.value) return
-  confirmSuspendItem.value = null
+function cancelConfirm() {
+  if (confirmLoading.value) return
+  confirmItem.value  = null
+  confirmError.value = ''
 }
-async function confirmSuspend() {
-  if (!confirmSuspendItem.value) return
-  confirmSuspendLoading.value = true
+async function runConfirm() {
+  const item   = confirmItem.value
+  const action = confirmAction.value
+  if (!item?._id) return
+  confirmLoading.value = true
+  confirmError.value   = ''
   try {
-    await suspendClient(confirmSuspendItem.value)
-    confirmSuspendItem.value = null
+    await updateStatus(item._id, action)
+    confirmItem.value = null
+    // The row's state is derived from the record, never held here, so
+    // re-reading the list is the whole update - `describeClientSubscription`
+    // then reports "Suspended" from the subscription status the endpoint
+    // writes alongside the organisation's. The client also moves to the tab
+    // that matches its new status, which is why it leaves this one.
+    await fetchData()
+    showNote(
+      action === 'suspended'
+        ? `${item.name} is suspended. Their staff, residents and guards can no longer sign in, and all their data is kept.`
+        : `${item.name} is active again. Their staff, residents and guards can sign in.`,
+    )
+  } catch (err: any) {
+    // Stays on the dialog. Closing it and dropping a banner would read as
+    // "done, with a note"; the action did not happen and the person is still
+    // standing in front of the decision.
+    confirmError.value = apiMessage(
+      err,
+      action === 'suspended'
+        ? 'Could not suspend this client. Only the Seven365 owner may suspend a client.'
+        : 'Could not reactivate this client. Only the Seven365 owner may reactivate a client.',
+    )
   } finally {
-    confirmSuspendLoading.value = false
+    confirmLoading.value = false
   }
 }
@@ -574,8 +677,8 @@ function cancelView() {
 }
 async function submitClient() {
-  // await update API
+  // `ClientDetailForm` has already saved by the time it emits - this closes the
+  // drawer and re-reads the row so the list shows what was saved.
   viewMode.value = 'table'
   fetchData()
 }
@@ -672,6 +775,9 @@ async function cancelInvite(item: any) {
 }
 onMounted(() => {
+  // Not awaited: the list is the screen, and the tier only adds or removes two
+  // menu items on a menu nobody has opened yet.
+  loadConsoleTier()
   fetchData()
   document.addEventListener('click', handleOutsideClick)
   document.addEventListener('scroll', closeMenu, true)
@@ -1170,4 +1276,40 @@ tbody td { vertical-align: middle; }
 }
 .btn-confirm-danger:hover:not(:disabled) { background: var(--err); }
 .btn-confirm-danger:disabled { opacity: 0.7; cursor: not-allowed; }
+/* Reactivating is an ordinary action, so it is not dressed as a destructive
+   one. Same box as the danger button so the dialog does not jump between the
+   two directions. */
+.btn-confirm {
+  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: var(--accent-strong);
+  color: var(--on-accent-strong);
+  cursor: pointer;
+}
+.btn-confirm:disabled { opacity: 0.7; cursor: not-allowed; }
+.btn-cancel:disabled { opacity: 0.7; cursor: not-allowed; }
+/* The refusal, on the dialog it belongs to. `--err` on `--err-bg`, not a bare
+   red on the card. */
+.confirm-error {
+  margin-bottom: 16px;
+  padding: 9px 12px;
+  border-radius: 8px;
+  background: var(--err-bg);
+  color: var(--err);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.45;
+}
+.saved-note-error {
+  background: var(--err-bg);
+  color: var(--err);
+}
 </style>