@7365admin1/layer-common 3.2.7 → 3.2.8-staging.200

package/components/AccessManagement.vue

@@ -1,87 +1,77 @@
 <template>
   <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters align="center" justify="space-between">
-        <v-row no-gutters class="ga-2">
-          <v-btn
-            class="text-none"
-            rounded="pill"
-            variant="tonal"
-            size="large"
-            @click="setCard()"
-            v-if="canCreate && canCreateAccessCard"
-          >
-            Add Access Card
-          </v-btn>
-          <v-btn
-            class="text-none"
-            rounded="pill"
-            variant="tonal"
-            size="large"
-            @click="assignDialog = true"
+    <!--
+      The design's title row. Was two `tonal` pills and a floating-label search
+      floating above the card with no page name at all; the search now sits on
+      the card's own toolbar row, where the design puts it. Same models, same
+      handlers, same permission gates.
+    -->
+    <v-col cols="12">
+      <!-- Nav calls this screen "Cards" (under Access Mgmt) - the title matches
+           the navigation, it is not new copy. -->
+      <PageHeader title="Cards">
+        <template #actions>
+          <AppButton
             v-if="canUpdateAccessCard && canAssignAccessCard"
+            variant="ghost"
+            @click="assignDialog = true"
           >
             Assign to Unit
-          </v-btn>
-        </v-row>
-
-        <v-text-field
-          v-model="searchText"
-          placeholder="Search Card, Unit..."
-          variant="outlined"
-          density="comfortable"
-          clearable
-          hide-details
-          class="ml-2"
-          style="max-width: 250px"
-        />
-      </v-row>
+          </AppButton>
+          <AppButton
+            v-if="canCreate && canCreateAccessCard"
+            icon="mdi-plus"
+            @click="setCard()"
+          >
+            Add Access Card
+          </AppButton>
+        </template>
+      </PageHeader>
     </v-col>
     <!-- Available Card Stats -->
     <v-col cols="12" class="mb-2" v-if="canViewAllCards">
       <AccessCardAvailableStats ref="statsRef" :site-id="siteId" />
     </v-col>
 
-    <v-col cols="12" v-if="canViewAllCards">
-      <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="getCards">
-              <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="getCards"
-              />
-            </v-row>
-          </template>
-        </v-toolbar>
-        <v-data-table
-          :headers="headers"
-          :items="items"
-          item-value="_id"
-          items-per-page="10"
-          fixed-header
-          hide-default-footer
-          @click:row="tableRowClickHandler"
-          style="max-height: calc(100vh - (200px))"
+    <!--
+      Was `v-card` + a `grey-lighten-4` `v-toolbar` (a white slab that stayed
+      white in dark mode) + a bare `v-data-table`. `TableMain` is the same three
+      things drawn as the design: same headers, items, page size, refresh,
+      page range, pager and row click.
+    -->
+    <TableMain
+      v-if="canViewAllCards"
+      :headers="headers"
+      :items="items"
+      :loading="loading"
+      :page="page"
+      :pages="pages"
+      :pageRange="pageRange"
+      :items-per-page="10"
+      show-header
+      @refresh="getCards"
+      @update:page="page = $event; getCards()"
+      @row-click="(data: any) => tableRowClickHandler(null, data)"
+    >
+      <template #prepend-additional>
+        <AppField
+          v-model="searchText"
+          search
+          compact
+          placeholder="Search Card, Unit..."
+          klass="app-toolbar__search"
         />
-      </v-card>
-    </v-col>
+      </template>
+
+      <!--
+        A failed request is not a site with no access cards. Without this the
+        table drew its neutral "No data available" for a 500, which reads as
+        "there are no cards here" - a statement the server never made.
+      -->
+      <template v-if="getCardError" #no-data>
+        <DashboardEmptyState error />
+      </template>
+    </TableMain>
 
     <!-- Create Dialog -->
     <v-dialog v-model="createDialog" width="650" persistent>
@@ -144,6 +134,10 @@
   </v-row>
 </template>
 <script setup lang="ts">
+// Relative import, never Nuxt auto-import: this layer's `utils/` are auto-imported
+// into the consuming apps but not reliably into the layer's own components.
+import { readListPage } from "../utils/list-page";
+
 definePageMeta({
   middleware: ["01-auth", "02-org"],
   memberOnly: true,
@@ -281,6 +275,7 @@ const {
   data: getCardReq,
   refresh: getCards,
   status: getAllReqStatus,
+  error: getCardError,
 } = useLazyAsyncData(
   "get-all-cards",
   () =>
@@ -307,21 +302,27 @@ watch(searchText, (val) => {
 
 const loading = computed(() => getAllReqStatus.value === "pending");
 
+// This endpoint answers with a NESTED envelope - `{ data: { items, pages,
+// pageRange } }` - so the page totals are read off `reply.data`, through the
+// one helper that knows how a paginated reply is shaped. The totals are the
+// server's count of the WHOLE list; they are never re-derived from the rows on
+// this page. Applying it unconditionally matters: when a later request fails,
+// the reply goes null and the header falls back to the placeholder instead of
+// keeping the previous page's total on screen as if it were still true.
 watchEffect(() => {
-  if (getCardReq.value?.data) {
-    items.value = getCardReq.value.data.items.map((item: any) => ({
-      ...item,
-      cardCounts: {
-        ...item.cardCounts,
-        available: {
-          ...item.cardCounts?.available,
-          physical: (item.available?.physical ?? []).filter((c: any) => !c.damage).length,
-        },
+  const listPage = readListPage<Record<string, any>>(getCardReq.value?.data);
+  items.value = listPage.items.map((item: any) => ({
+    ...item,
+    cardCounts: {
+      ...item.cardCounts,
+      available: {
+        ...item.cardCounts?.available,
+        physical: (item.available?.physical ?? []).filter((c: any) => !c.damage).length,
       },
-    }));
-    pages.value = getCardReq.value.data.pages;
-    pageRange.value = getCardReq.value.data.pageRange;
-  }
+    },
+  }));
+  pages.value = listPage.pages;
+  pageRange.value = listPage.pageRange;
 });
 
 function setCard({ mode = "create", dialog = true, data = {} as TCard } = {}) {

package/components/AddEqupmentForm.vue

@@ -1,15 +1,11 @@
 <template>
   <v-dialog v-model="showDialog" 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">
-            {{ prop.mode === "edit" ? "Edit Equipment" : "Add New Equipment" }}
-          </span>
-        </v-row>
-      </v-toolbar>
+    <v-card class="screen-modal">
+      <v-card-title class="text-capitalize">
+        {{ prop.mode === "edit" ? "Edit Equipment" : "Add New Equipment" }}
+      </v-card-title>
 
-      <v-card-text class="pa-4">
+      <v-card-text class="screen-modal__body pa-4">
         <v-form ref="formRef" v-model="valid">
           <v-row no-gutters class="pa-0">
             <v-col cols="12" class="pa-0 mb-2">
@@ -39,7 +35,7 @@
                 variant="outlined"
                 placeholder="Enter equipment name"
                 hide-details="auto"
-                class="mb-0"
+                class="mb-0 filter-field"
               />
             </v-col>
 
@@ -58,35 +54,35 @@
                 variant="outlined"
                 placeholder="Select unitOfMeasurement"
                 hide-details="auto"
-                class="mb-0"
+                class="mb-0 filter-field"
               />
             </v-col>
           </v-row>
         </v-form>
       </v-card-text>
 
-      <v-toolbar class="pa-0" density="compact">
+      <!-- Was a `v-toolbar` footer: a grey slab holding a bare-text Cancel and
+           a `rounded-0`, `color="black"` primary - a square black button that
+           ignored the theme. Same two buttons on the card's own surface, with
+           the design's radius and accent fill. -->
+      <v-card-actions class="screen-modal__footer">
         <v-row no-gutters>
-          <v-col cols="6" class="pa-0">
+          <v-col cols="6" class="pr-2">
             <v-btn
               block
-              variant="text"
-              class="text-none"
-              size="large"
+              variant="outlined"
+              class="text-none screen-btn-ghost"
               @click="close"
-              height="48"
             >
               Cancel
             </v-btn>
           </v-col>
 
-          <v-col cols="6" class="pa-0">
+          <v-col cols="6" class="pl-2">
             <v-btn
               block
               variant="flat"
-              color="black"
-              class="text-none font-weight-bold rounded-0"
-              height="48"
+              class="text-none screen-btn-primary"
               :loading="submitting"
               @click="submit"
             >
@@ -94,7 +90,7 @@
             </v-btn>
           </v-col>
         </v-row>
-      </v-toolbar>
+      </v-card-actions>
     </v-card>
   </v-dialog>
 </template>

package/components/AddPassKeyToVisitor.vue

@@ -1,24 +1,21 @@
 <template>
-  <v-card width="100%" :loading="processing">
-    <v-toolbar>
-      <v-row
-        no-gutters
-        class="fill-height px-6 d-flex justify-space-between align-center"
-        align="center"
-      >
-        <span class="font-weight-bold text-subtitle-1"
-          >{{ isEditMode ? "Edit" : "Assign" }} Pass &amp; Keys</span
-        >
-        <ButtonClose @click="emit('close')" />
-      </v-row>
-    </v-toolbar>
-
-    <v-card-text>
-      <v-row no-gutters class="ga-1">
+  <v-card width="100%" class="screen-modal passkey" :loading="processing">
+    <div class="passkey__head">
+      <v-card-title>{{ isEditMode ? "Edit" : "Assign" }} Pass &amp; Keys</v-card-title>
+      <AppButton
+        variant="icon"
+        icon="mdi-close"
+        aria-label="Close"
+        @click="emit('close')"
+      />
+    </div>
+
+    <div class="screen-modal__body passkey__body">
+      <!-- `.filter-field` is the design's input, and it is a descendant
+           selector, so both autocompletes get it from this one class. -->
+      <v-row no-gutters class="ga-1 filter-field">
         <v-col cols="12">
-          <span class="text-subtitle-2 text-medium-emphasis">
-            Name: {{ prop.visitor.name }}
-          </span>
+          <span class="passkey__name">Name: {{ prop.visitor.name }}</span>
         </v-col>
 
         <!-- Pass section -->
@@ -27,15 +24,11 @@
 
           <!-- Existing pass -->
           <div v-if="existingPass" class="d-flex align-center ga-2 mb-2">
-            <v-chip
-              prepend-icon="mdi-card-bulleted-outline"
-              color="blue"
-              variant="tonal"
-              size="small"
-            >
+            <StatusChip tone="info" :dot="false">
+              <v-icon icon="mdi-card-bulleted-outline" size="13" />
               {{ existingPass.prefixAndName }}
-            </v-chip>
-            <span class="text-caption text-medium-emphasis">(current)</span>
+            </StatusChip>
+            <span class="passkey__current">(current)</span>
           </div>
 
           <!-- New pass selector -->
@@ -79,21 +72,26 @@
             v-if="existingKeys.length > 0"
             class="d-flex flex-wrap ga-1 mb-2"
           >
-            <v-chip
+            <!-- The design's tag chip, keeping the remove control the product
+                 already had: the tone and the shape are the shared ones, only
+                 the close button is drawn inside rather than by Vuetify. -->
+            <StatusChip
               v-for="key in existingKeys.filter((k) => k.status != 'Removed')"
               :key="key.keyId"
-              prepend-icon="mdi-key"
-              color="orange"
-              variant="tonal"
-              size="small"
-              closable
-              @click:close="removeExistingKey(key)"
+              tone="warn"
+              :dot="false"
             >
+              <v-icon icon="mdi-key" size="13" />
               {{ key.prefixAndName }}
-            </v-chip>
-            <span class="text-caption text-medium-emphasis align-self-center">
-              (current)
-            </span>
+              <button
+                class="passkey__remove"
+                :aria-label="`Remove ${key.prefixAndName}`"
+                @click="removeExistingKey(key)"
+              >
+                <v-icon icon="mdi-close-circle" size="14" />
+              </button>
+            </StatusChip>
+            <span class="passkey__current align-self-center">(current)</span>
           </div>
 
           <!-- New keys selector -->
@@ -132,41 +130,16 @@
       </v-row>
 
       <v-row v-if="errorMessage" no-gutters class="mt-2">
-        <p class="text-error text-subtitle-2 w-100 text-center">
-          {{ errorMessage }}
-        </p>
-      </v-row>
-    </v-card-text>
-
-    <v-toolbar density="compact">
-      <v-row no-gutters>
-        <v-col cols="6">
-          <v-btn
-            tile
-            block
-            variant="text"
-            class="text-none"
-            size="48"
-            text="Cancel"
-            @click="emit('close')"
-          />
-        </v-col>
-        <v-col cols="6">
-          <v-btn
-            tile
-            block
-            variant="flat"
-            color="black"
-            class="text-none"
-            size="48"
-            :text="isEditMode ? 'Save' : 'Assign'"
-            :disabled="!canSubmit"
-            :loading="processing"
-            @click="handleSubmit"
-          />
-        </v-col>
+        <p class="passkey__error">{{ errorMessage }}</p>
       </v-row>
-    </v-toolbar>
+    </div>
+
+    <div class="passkey__footer">
+      <AppButton variant="ghost" @click="emit('close')">Cancel</AppButton>
+      <AppButton :disabled="!canSubmit" @click="handleSubmit">
+        {{ isEditMode ? "Save" : "Assign" }}
+      </AppButton>
+    </div>
   </v-card>
 </template>
 
@@ -448,4 +421,53 @@ async function handleSubmit() {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.passkey__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 12px;
+}
+
+.passkey__body {
+  padding: 4px 20px 0;
+}
+
+.passkey__name,
+.passkey__current {
+  font-size: var(--fs-cell);
+  color: var(--text2);
+}
+
+.passkey__error {
+  width: 100%;
+  margin: 0;
+  text-align: center;
+  font-size: var(--fs-cell);
+  color: var(--err);
+}
+
+/* The chip's own remove control - `currentColor`, so it stays on whatever
+   tone the chip carries rather than picking a second colour. */
+.passkey__remove {
+  display: inline-flex;
+  margin-left: 2px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.75;
+}
+
+.passkey__remove:hover {
+  opacity: 1;
+}
+
+.passkey__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px 20px;
+}
+</style>

package/components/AppButton.vue

@@ -0,0 +1,62 @@
+<!--
+  THE BUTTON.
+
+  A `<button>`, not a restyled `v-btn`. Vuetify's button carries an overlay
+  layer, a ripple, a min-width, uppercase letter-spacing and its own height
+  scale, all at a specificity a class has to out-shout one declaration at a
+  time - which is why the product's primary buttons still read as Vuetify grey
+  under a correct token set.
+
+  Variants, straight from the handoff:
+    primary  40px pill-radius accent fill, 13.5px/800, white label
+    ghost    40px, 1px border, card fill, 13.5px/700 in `--text2` - the SAME
+             box as primary; the handoff differs only in fill, border and weight
+    icon     32px transparent square, 8px radius
+    row      30px bordered square - the `more_vert` at the end of a table row
+
+  Two more the handoff does NOT draw, added as NEW design on the owner's
+  ruling of 2026-08-14 - see `assets/css/primitives.css` for why check-out is
+  tonal and not solid red:
+    ok       40px solid `--ok` fill, white label - CHECK IN
+    err      40px tonal `--err` fill, `--err` label, `--err` edge - CHECK OUT
+-->
+<template>
+  <component
+    :is="to ? resolveLink : 'button'"
+    :to="to || undefined"
+    :type="to ? undefined : type"
+    :disabled="disabled || undefined"
+    class="app-btn"
+    :class="variant === 'primary' ? '' : `app-btn--${variant}`"
+  >
+    <v-icon v-if="icon" :icon="icon" :size="iconSize" />
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { resolveComponent } from "vue";
+
+const props = defineProps({
+  variant: {
+    type: String as PropType<"primary" | "ghost" | "icon" | "row" | "ok" | "err">,
+    default: "primary",
+  },
+  icon: { type: String, default: "" },
+  type: { type: String, default: "button" },
+  disabled: { type: Boolean, default: false },
+  /** Given, the button routes - same `to` a `v-btn` would have taken. */
+  to: { type: [String, Object] as PropType<any>, default: undefined },
+});
+
+const resolveLink = resolveComponent("NuxtLink");
+
+const iconSize = computed(() => {
+  if (props.variant === "primary") return 18;
+  if (props.variant === "row") return 17;
+  /* The check-in tick and the check-out cross are drawn at 16px - a glyph, not
+     a second focal point beside a two-word label. */
+  if (props.variant === "ok" || props.variant === "err") return 16;
+  return 18;
+});
+</script>

package/components/AppCard.vue

@@ -0,0 +1,20 @@
+<!--
+  THE CARD.
+
+  14px radius, a 1px `--border` rule and the design's one-pixel shadow, on
+  `--card`. A plain element rather than a `v-card`, because `v-card` brings its
+  own elevation, radius and surface colour at a specificity that a class has to
+  fight - which is why the radius kept coming back as 4px in Phase 3.
+-->
+<template>
+  <div class="app-card" :class="{ 'app-card--flush': flush }">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  /** Let content (a menu, a dropdown) escape the card's rounded corners. */
+  flush: { type: Boolean, default: false },
+});
+</script>

package/components/AppDateField.vue

@@ -0,0 +1,49 @@
+<!--
+  THE DATE FIELD.
+
+  The same 40px box with a calendar glyph, as the handoff draws the two date
+  ends of a filter row. `<input type="date">` - the browser's own picker, which
+  is the one a phone user already knows and the one that is localised, keyboard
+  accessible and free.
+-->
+<template>
+  <label v-bind="rootAttrs" class="app-field" :class="{ 'app-field--compact': compact }">
+    <v-icon class="app-field__icon" icon="mdi-calendar-month-outline" size="17" />
+    <span v-if="label" class="app-field__label">{{ label }}</span>
+    <input
+      class="app-field__input"
+      v-bind="inputAttrs"
+      type="date"
+      :value="model"
+      :min="min || undefined"
+      :max="max || undefined"
+      :disabled="disabled"
+      @input="model = ($event.target as HTMLInputElement).value"
+    />
+  </label>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+
+/** Same split as `AppField`, and for the same reason: the root is a `<label>`,
+    so an `aria-label` left to fall through would never reach the input. */
+defineOptions({ inheritAttrs: false });
+
+const attrs = useAttrs();
+const rootAttrs = computed(() => ({ class: attrs.class, style: attrs.style }));
+const inputAttrs = computed(() => {
+  const { class: _c, style: _s, ...rest } = attrs;
+  return rest;
+});
+
+const model = defineModel({ type: String, default: "" });
+
+defineProps({
+  label: { type: String, default: "" },
+  min: { type: String, default: "" },
+  max: { type: String, default: "" },
+  compact: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+});
+</script>