@7365admin1/layer-common 3.2.2-staging.101 → 3.2.2-staging.102

package/components/SubscriptionPlanTable.vue

@@ -1,80 +1,82 @@
 <template>
   <v-container fluid class="pa-6">
-    <!-- Header: Title & Create Button -->
-    <div class="d-flex align-center justify-space-between mb-6">
-      <h1 class="text-h5 font-weight-bold text-primary">
-        Subscription Plans
-      </h1>
-
-      <v-btn
-        color="secondary"
-        rounded="pill"
-        elevation="0"
-        @click="openCreateModal"
-      >
-        Create Plan
-      </v-btn>
-    </div>
+    <!--
+      THE DESIGN'S TITLE ROW. Was a hand-rolled flex row with a `text-h5`
+      heading and a pill button; it is the same title and the same button on
+      the same line, drawn by the shared `PageHeader` at 22px/800 so this
+      screen's heading matches every other screen's.
+    -->
+    <PageHeader title="Subscription Plans">
+      <template #actions>
+        <v-btn
+          class="text-none screen-btn-primary"
+          variant="flat"
+          @click="openCreateModal"
+        >
+          Create Plan
+        </v-btn>
+      </template>
+    </PageHeader>
 
     <!-- Search & Filters Bar -->
+    <!--
+      The primitives carry these exactly: the search is a string ref, and both
+      filters are string refs over `{ title, value }` options whose values are
+      already strings, so `AppSelect`'s native branch emits the same string
+      this screen has always stored ("all", "monthly", ...). No filter's
+      meaning, order or default changed.
+    -->
     <v-row class="mb-2" density="compact">
       <!-- Search Input -->
       <v-col cols="12" sm="4" md="3">
-        <v-text-field
-          v-model="search"
-          placeholder="Search Plan"
-          prepend-inner-icon="mdi-magnify"
-          variant="outlined"
-          density="compact"
-          hide-details
-          clearable
-        />
+        <AppField v-model="search" search placeholder="Search Plan" />
       </v-col>
 
       <!-- Filter by Category -->
       <v-col cols="12" sm="4" md="3">
-        <v-select
+        <AppSelect
           v-model="categoryFilter"
           :items="categoryOptions"
           label="Filter by category"
-          variant="outlined"
-          density="compact"
-          hide-details
         />
       </v-col>
 
       <!-- Filter by Billing Cycle -->
       <v-col cols="12" sm="4" md="3">
-        <v-select
+        <AppSelect
           v-model="billingFilter"
           :items="billingOptions"
           label="Filter by billing cycle"
-          variant="outlined"
-          density="compact"
-          hide-details
         />
       </v-col>
     </v-row>
 
     <!-- Main Table Card -->
-    <v-card variant="outlined" class="mt-4">
-      <!-- Status Tabs & Actions Bar -->
-      <div class="d-flex align-center justify-space-between bg-grey-lighten-4 border-b">
-        <v-tabs v-model="activeTab" color="primary" density="compact">
-          <v-tab value="active" class="text-none font-weight-bold">Active</v-tab>
-          <v-tab value="deactive" class="text-none font-weight-bold">Deactive</v-tab>
-        </v-tabs>
-
-        <div class="pa-2">
+    <AppCard class="table-card mt-4">
+      <!--
+        The tabs and the refresh were a hand-built `bg-grey-lighten-4` strip -
+        a hard-coded light grey that stayed light in the dark theme. They are
+        the card's own toolbar row now, which is where the design draws tabs,
+        and it follows the theme because it is tokenised.
+      -->
+      <CardToolbar>
+        <template #tabs>
+          <v-tabs v-model="activeTab" color="primary" density="compact">
+            <v-tab value="active" class="text-none font-weight-bold">Active</v-tab>
+            <v-tab value="deactive" class="text-none font-weight-bold">Deactive</v-tab>
+          </v-tabs>
+        </template>
+
+        <template #right>
           <v-btn
             icon="mdi-refresh"
             variant="text"
             density="comfortable"
-            title="Refresh"
+            aria-label="Refresh"
             @click="refresh"
           />
-        </div>
-      </div>
+        </template>
+      </CardToolbar>
 
       <!-- Table View -->
       <v-data-table
@@ -107,22 +109,21 @@
         </template>
 
         <!-- Applications Badge -->
+        <!-- A count, not a status word, so it takes the design's neutral tag
+             shape (no leading dot) rather than a colour it has not earned. -->
         <template #item.applicationIds="{ item }">
-          <v-chip size="small" variant="tonal" color="grey-darken-2">
+          <StatusChip tone="neutral" :dot="false">
             {{ item.applicationIds.length }} Application{{ item.applicationIds.length > 1 ? 's' : '' }}
-          </v-chip>
+          </StatusChip>
         </template>
 
         <!-- Status Badge -->
+        <!-- The shared word -> tone map: "Active" is `ok` (was Vuetify
+             `success`) and "Deactive" is unmapped, so it comes out neutral -
+             which is the grey it already was. Same two words, same two
+             meanings. -->
         <template #item.status="{ item }">
-          <v-chip
-            size="small"
-            :color="item.status === 'active' ? 'success' : 'grey'"
-            variant="flat"
-            class="text-caption font-weight-bold"
-          >
-            {{ item.status === 'active' ? 'Active' : 'Deactive' }}
-          </v-chip>
+          <StatusChip :status="item.status === 'active' ? 'Active' : 'Deactive'" />
         </template>
 
         <!-- Actions -->
@@ -166,13 +167,15 @@
         </template>
 
         <!-- Empty State -->
+        <!-- Same sentence, in the shared empty block the design draws it in. -->
         <template #no-data>
-          <div class="py-8 text-center text-grey-darken-1">
-            No plans found.
+          <div class="table-card__empty">
+            <v-icon icon="mdi-magnify-close" size="32" />
+            <span>No plans found.</span>
           </div>
         </template>
       </v-data-table>
-    </v-card>
+    </AppCard>
 
     <!-- Create / Edit Dialog -->
     <v-dialog v-model="showModal" max-width="600px" persistent>

package/components/TableListSecondary.vue

@@ -1,55 +1,46 @@
-<template>
-  <v-card width="100%" variant="outlined" border="thin" rounded="lg">
-    <v-toolbar density="compact" class="px-3 border-b-sm" color="transparent">
-      <template #prepend>
-        <slot name="title">Title</slot>
-      </template>
+<!--
+  THE SECOND LIST CARD - the one `ListView` and `WorkOrder/ListView` draw.
 
-      <template #append>
-        <v-row no-gutters justify="end" align="center">
-          <slot name="action-button"></slot>
-        </v-row>
-      </template>
+  Was a `v-card` with TWO `v-toolbar`s: the caller's title + action button on
+  the top one, and the page range + arrows on a second one under the table. The
+  design has neither. The page name and the screen's primary action belong on
+  ONE title row ABOVE the card (`PageHeader`), and the range and the pager
+  belong on the card's own single top row (`CardToolbar`) - which is exactly
+  the shape `TableMain` was converted to.
 
-      <template v-if="$slots.extension" v-slot:extension>
-        <slot name="extension"></slot>
-      </template>
-    </v-toolbar>
-
-    <v-data-table
-      v-model="selected"
-      :headers="props.headers"
-      :items="props.items"
-      item-value="_id"
-      items-per-page="20"
-      fixed-header
-      hide-default-footer
-      selec
-      :loading="props.loading"
-      @click:row="handleRowClick"
-      :style="`max-height:${props.height}`"
-      :class="{ 'clickable-rows': props.clickableRows }"
-    >
-      <template v-if="$slots.item" v-slot:item>
-        <slot name="item" :items="props.items"></slot>
+  VISUAL ONLY. Same headers, same items, same slots, same row click, same
+  `page` model, same `update:pagination` payloads, same increment/decrement
+  guards. Nothing is fetched, filtered, sorted or emitted differently; the two
+  toolbars became one row and moved, and that is the whole change.
+-->
+<template>
+  <div class="list-card">
+    <!--
+      The fold: the caller's `title` slot used to be the `v-toolbar`'s prepend,
+      i.e. a heading INSIDE the card, and its action button sat on the same
+      bar. Both are the design's page-title row, so they move up to it. Only
+      drawn when the caller actually supplies a title - a caller that passes
+      none used to get the literal fallback word "Title" on the bar, which is
+      not a heading anybody asked for.
+    -->
+    <PageHeader v-if="$slots.title">
+      <template #title>
+        <slot name="title" />
       </template>
 
-      <template v-slot:item="{ item }">
-        <tr @click="handleRowClick(item)">
-          <td v-for="col in props.headers" :key="col.value">
-            <slot :name="col.value" :item="item">
-              {{ item[col.value] }}
-            </slot>
-          </td>
-        </tr>
+      <template v-if="$slots['action-button']" #actions>
+        <slot name="action-button"></slot>
       </template>
-    </v-data-table>
-    <v-toolbar density="compact" class="px-3 border-t-sm" color="transparent">
-      <template #append>
-        <v-row no-gutters justify="end" align="center">
-          <span class="mr-2 text-caption text-fontgray">
-            {{ props.pageRange }}
-          </span>
+    </PageHeader>
+
+    <AppCard class="table-card">
+      <!--
+        ONE toolbar. The range keeps the exact string the caller computed and
+        the arrows keep their own disabled rules and emits; they have simply
+        stopped costing a second bar under the table.
+      -->
+      <CardToolbar :count="props.pageRange">
+        <template #right>
           <div class="arrow-navigation">
             <v-btn
               icon="mdi-chevron-left"
@@ -66,14 +57,48 @@
               @click="increment"
             />
           </div>
-        </v-row>
-      </template>
+        </template>
+      </CardToolbar>
 
-      <template v-if="$slots.extension" v-slot:extension>
+      <!--
+        `extension` used to be rendered by BOTH toolbars, i.e. the same content
+        twice, above and below the table. It is one row now, under the toolbar,
+        where `TableMain` puts a filter row.
+      -->
+      <div v-if="$slots.extension" class="table-card__extension">
         <slot name="extension"></slot>
-      </template>
-    </v-toolbar>
-  </v-card>
+      </div>
+
+      <v-data-table
+        v-model="selected"
+        :headers="props.headers"
+        :items="props.items"
+        item-value="_id"
+        items-per-page="20"
+        fixed-header
+        hide-default-footer
+        selec
+        :loading="props.loading"
+        @click:row="handleRowClick"
+        :style="`max-height:${props.height}`"
+        :class="{ 'clickable-rows': props.clickableRows }"
+      >
+        <template v-if="$slots.item" v-slot:item>
+          <slot name="item" :items="props.items"></slot>
+        </template>
+
+        <template v-slot:item="{ item }">
+          <tr @click="handleRowClick(item)">
+            <td v-for="col in props.headers" :key="col.value">
+              <slot :name="col.value" :item="item">
+                {{ item[col.value] }}
+              </slot>
+            </td>
+          </tr>
+        </template>
+      </v-data-table>
+    </AppCard>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -161,4 +186,20 @@ watch(selectAll, (curr) => {
 .clickable-rows tbody tr:hover {
   background-color: var(--hover);
 }
+
+/*
+  Every caller wraps its title in `<span class="text-h6 font-weight-regular">`,
+  because the old toolbar drew no type of its own. Vuetify's typography classes
+  are `!important`, so that span would keep 20px/400 inside the design's
+  22px/800 heading and the fold would look like it had not happened. The
+  heading owns the type now; the caller's span is left to carry whatever else
+  it says. Confined to this card's own page head, so no other `PageHeader` is
+  touched - and no app repo has to be edited for the title to land.
+*/
+.list-card :deep(.app-page-head__title) * {
+  font-size: inherit !important;
+  font-weight: inherit !important;
+  line-height: inherit !important;
+  letter-spacing: inherit !important;
+}
 </style>

package/package.json

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