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

package/components/TableMain.vue

@@ -1,85 +1,158 @@
+<!--
+  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 -->
-    <v-col cols="12" class="mb-2" v-if="canCreate || $slots.actions">
-      <v-row no-gutters>
-        <slot name="actions">
-          <v-col cols="12">
-            <v-row no-gutters class="ga-2">
-              <v-btn
-                v-if="canCreate"
-                class="text-none"
-                rounded="pill"
-                variant="tonal"
-                size="large"
-                @click="emits('create')"
-              >
-                {{ createLabel }}
-              </v-btn>
-              <v-text-field
-                v-if="canSearch"
-                v-model="searchInput"
-                density="compact"
-                placeholder="Search"
-                clearable
-                max-width="300"
-                append-inner-icon="mdi-magnify"
-                hide-details
-              />
-              <v-btn
-                v-if="canScanVisitorQRCode"
-                text="Scan QR Code"
-                class="text-none ml-2"
-                rounded="pill"
-                variant="tonal"
-                size="large"
-                @click="emits('scan')"
-              />
-            </v-row>
-          </v-col>
-        </slot>
-      </v-row>
+  <v-row no-gutters class="table-card__shrink">
+    <!--
+      THE DESIGN'S PAGE TITLE (Phase 9).
+
+      The design opens every screen with a 22px/800 heading. This shared table
+      card is mounted by 17 module screens, and none of them had one - four of
+      them (Units, Areas, Equipment Item, Equipment Management) were already
+      PASSING `:title` to this component, which had no `title` prop, so the
+      string was landing on the root element as a plain HTML `title` attribute:
+      a browser tooltip nobody asked for. It now draws the heading it was
+      always meant to draw.
+
+      Placement only. No caller changes, no slot moves, no behaviour: a screen
+      that passes no title renders exactly what it rendered before.
+    -->
+    <!--
+      The actions used to be drawn on a SECOND row underneath that heading,
+      which is not where the design puts them - the design's title row is the
+      page name on the left and the screen's actions on the right of the SAME
+      line, which is why every screen converted so far had to bypass this
+      component and draw its own `PageHeader` above it. They are on the title
+      row now, in `PageHeader`'s own `actions` slot.
+
+      Same buttons, same slot name, same content, same events - one row instead
+      of two. A screen with no title still gets its actions at the left, where
+      they have always been, because the title block is not drawn at all.
+    -->
+    <v-col cols="12" v-if="title || canCreate || $slots.actions">
+      <PageHeader :title="title">
+        <template v-if="canCreate || $slots.actions" #actions>
+          <slot name="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 table-card__primary"
+              variant="flat"
+              prepend-icon="mdi-plus"
+              @click="emits('create')"
+            >
+              {{ createLabel }}
+            </v-btn>
+            <v-text-field
+              v-if="canSearch"
+              v-model="searchInput"
+              density="compact"
+              placeholder="Search"
+              clearable
+              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 table-card__ghost"
+              variant="outlined"
+              @click="emits('scan')"
+            />
+          </slot>
+        </template>
+      </PageHeader>
     </v-col>
 
     <!-- Table Card -->
-    <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
-        :loading="loading"
-      >
+    <!--
+      `table-card__shrink` is the fix for the wide-table blowout: this column is a
+      flex item, and a flex item's automatic minimum size is its CONTENT's, so
+      a table with enough columns set a floor the column would not shrink below
+      and the whole page scrolled sideways at 360 and 768. The table scrolls
+      inside the card instead - see `.table-card__shrink` in `screens.css`.
+    -->
+    <v-col cols="12" class="table-card__shrink">
+      <!--
+        THE DESIGN'S CARD AND ITS IN-CARD TOP ROW (Phase 9).
+
+        Was a `v-card` + `v-toolbar`. `v-card` brings its own radius, elevation
+        and surface at a specificity a class has to fight, and `v-toolbar` puts
+        its `extension` on a SECOND stacked row. `AppCard` + `CardToolbar` are
+        the primitives the design is drawn with, already proven on
+        `ServiceProviderMain` / `MemberMain`.
+
+        Placement only. The refresh button, the `prepend-additional` slot, the
+        page range, the pager, the `extension` slot and the `footer` slot are
+        the same controls, emitting the same events, in the same order. The
+        `loading` bar `v-card` used to draw is drawn explicitly so a loading
+        screen still says so.
+      -->
+      <AppCard class="table-card">
+        <v-progress-linear
+          v-if="loading"
+          indeterminate
+          height="2"
+          class="table-card__loading"
+        />
+
         <!-- Toolbar -->
-        <v-toolbar
-          density="compact"
-          color="grey-lighten-4"
-          :extension-height="extensionHeight"
-        >
-          <template #prepend>
-            <v-btn fab icon density="comfortable" @click="emits('refresh')">
+        <CardToolbar :count="pageRange">
+          <!--
+            The design draws a screen's tabs ON the toolbar row, not on a
+            stacked strip above the table. `CardToolbar` has always had the
+            slot; `TableMain` simply never forwarded it, so callers put their
+            `v-tabs` in `extension` and got a second row. Purely additive: a
+            caller that passes no `tabs` renders exactly what it rendered.
+          -->
+          <template v-if="$slots.tabs" #tabs>
+            <slot name="tabs" />
+          </template>
+
+          <template #left>
+            <v-btn fab icon density="comfortable" variant="text" @click="emits('refresh')">
               <v-icon>mdi-refresh</v-icon>
             </v-btn>
             <slot name="prepend-additional" />
           </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="internalPage"
-                :length="pages"
-                @update:value="emits('update:page', internalPage)"
-              />
-            </v-row>
+          <template #right>
+            <local-pagination
+              v-model="internalPage"
+              :length="pages"
+              @update:value="emits('update:page', internalPage)"
+            />
           </template>
+        </CardToolbar>
 
-          <template v-if="$slots.extension" #extension>
-            <slot name="extension" />
-          </template>
-        </v-toolbar>
+        <!--
+          The callers' `extension` is a FILTER row (selects, date ranges), not
+          tabs - it is full-width by construction, so it keeps its own line
+          under the toolbar rather than being folded into it, which would push
+          the pager off the end of the row.
+        -->
+        <div v-if="$slots.extension" class="table-card__extension">
+          <slot name="extension" />
+        </div>
 
         <!-- Data Table -->
         <v-data-table
@@ -96,15 +169,32 @@
           <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>
+      </AppCard>
     </v-col>
   </v-row>
 </template>
 
 <script lang="ts" setup>
 const props = defineProps({
+  // The design's page heading. Empty = no heading, i.e. exactly today's markup.
+  title: {
+    type: String,
+    default: "",
+  },
   headers: {
     type: Array as PropType<Array<Record<string, any>>>,
     required: true,
@@ -185,9 +275,3 @@ watch(
   }
 );
 </script>
-
-<style scoped>
-.v-data-table :deep(thead th) {
-  font-weight: bold !important;
-}
-</style>

package/components/TableV3.vue

@@ -5,43 +5,39 @@
     border="thin"
     rounded="lg"
     :loading="loading"
-    class="table-v3"
+    class="table-v3 table-card"
   >
-    <v-toolbar density="compact" color="grey-lighten-5">
-      <template #prepend>
+    <div class="app-toolbar app-toolbar--plain">
+      <v-btn
+        icon
+        variant="text"
+        density="comfortable"
+        class="table-v3__refresh-btn"
+        @click="emit('refresh')"
+      >
+        <v-icon size="24">mdi-history</v-icon>
+      </v-btn>
+
+      <div class="app-toolbar__spacer" />
+
+      <div class="app-toolbar__right">
+        <span class="table-card__range">{{ pageRange }}</span>
         <v-btn
-          icon
+          icon="mdi-chevron-left"
           variant="text"
           density="comfortable"
-          class="table-v3__refresh-btn"
-          @click="emit('refresh')"
-        >
-          <v-icon size="28" color="black">mdi-history</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>
-          <v-btn
-            icon="mdi-chevron-left"
-            variant="text"
-            density="comfortable"
-            :disabled="!canGoPrev"
-            @click="goPrev"
-          />
-          <v-btn
-            icon="mdi-chevron-right"
-            variant="text"
-            density="comfortable"
-            :disabled="!canGoNext"
-            @click="goNext"
-          />
-        </v-row>
-      </template>
-    </v-toolbar>
+          :disabled="!canGoPrev"
+          @click="goPrev"
+        />
+        <v-btn
+          icon="mdi-chevron-right"
+          variant="text"
+          density="comfortable"
+          :disabled="!canGoNext"
+          @click="goNext"
+        />
+      </div>
+    </div>
 
     <div v-if="$slots.breadcrumb" class="table-v3__breadcrumb">
       <slot name="breadcrumb" />
@@ -62,29 +58,27 @@
       </template>
     </v-data-table>
 
-    <v-toolbar density="compact" color="grey-lighten-5" class="table-v3__footer">
-      <template #append>
-        <v-row no-gutters justify="end" align="center">
-          <span class="mr-2 text-caption text-fontgray">
-            {{ pageRange }}
-          </span>
-          <v-btn
-            icon="mdi-chevron-left"
-            variant="text"
-            density="comfortable"
-            :disabled="!canGoPrev"
-            @click="goPrev"
-          />
-          <v-btn
-            icon="mdi-chevron-right"
-            variant="text"
-            density="comfortable"
-            :disabled="!canGoNext"
-            @click="goNext"
-          />
-        </v-row>
-      </template>
-    </v-toolbar>
+    <div class="app-toolbar app-toolbar--plain table-v3__footer">
+      <div class="app-toolbar__spacer" />
+
+      <div class="app-toolbar__right">
+        <span class="table-card__range">{{ pageRange }}</span>
+        <v-btn
+          icon="mdi-chevron-left"
+          variant="text"
+          density="comfortable"
+          :disabled="!canGoPrev"
+          @click="goPrev"
+        />
+        <v-btn
+          icon="mdi-chevron-right"
+          variant="text"
+          density="comfortable"
+          :disabled="!canGoNext"
+          @click="goNext"
+        />
+      </div>
+    </div>
   </v-card>
 </template>
 
@@ -161,19 +155,20 @@ watch(
 </script>
 
 <style scoped>
-.table-v3 :deep(thead th) {
-  background-color: #f5f5f5;
-  color: #6b7280;
-  font-weight: 600 !important;
-  font-size: 12px;
-}
-
+/*
+ * The header row is no longer drawn here. It was `#f5f5f5` on `#6b7280`,
+ * both literal, so in the dark theme the fixed-header rule won the background
+ * and the header read 3.45:1. `.table-card` on the root gives this table the
+ * same tokenised header, cell and hover treatment as every other table in the
+ * product, which measures 4.77:1 light / 4.71:1 dark.
+ */
 .table-v3 :deep(tbody td) {
   height: 54px;
 }
 
 .table-v3__footer {
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  border-top: 1px solid var(--border);
+  border-bottom: 0;
 }
 
 .table-v3__refresh-btn {
@@ -182,8 +177,8 @@ watch(
 }
 
 .table-v3__breadcrumb {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-  background-color: #fff;
+  border-bottom: 1px solid var(--border);
+  background-color: var(--card);
   padding: 6px 12px;
 }
 </style>

package/components/UnitMain.vue

@@ -24,10 +24,8 @@
                 <!-- Primary action -->
                 <v-btn
                   v-if="canCreateUnit"
-                  class="text-none mr-3"
-                  rounded="pill"
-                  variant="tonal"
-                  size="large"
+                  class="text-none mr-3 screen-btn-primary"
+                  variant="flat"
                   @click="onCreateUnit()"
                 >
                   Add Unit
@@ -37,10 +35,8 @@
                   <template #activator="{ props: t }">
                     <v-btn
                       v-bind="t"
-                      class="ma-1"
-                      variant="tonal"
-                      size="large"
-                      rounded="pill"
+                      class="ma-1 screen-icon-btn"
+                      variant="flat"
                       href="/files/unit-sample-data.xlsx"
                       target="_blank"
                       download
@@ -55,10 +51,8 @@
                   <template #activator="{ props: t }">
                     <v-btn
                       v-bind="t"
-                      class="ma-1"
-                      variant="tonal"
-                      size="large"
-                      rounded="pill"
+                      class="ma-1 screen-icon-btn"
+                      variant="flat"
                       @click="onImportData"
                     >
                       <v-icon>mdi-upload</v-icon>
@@ -71,10 +65,8 @@
                   <template #activator="{ props: t }">
                     <v-btn
                       v-bind="t"
-                      class="ma-1"
-                      variant="tonal"
-                      size="large"
-                      rounded="pill"
+                      class="ma-1 screen-icon-btn"
+                      variant="flat"
                       @click="handleDownloadExcel"
                       :loading="isDownloading"
                     >
@@ -88,7 +80,7 @@
 
             <v-spacer />
 
-            <v-col cols="auto">
+            <v-col cols="auto" class="filter-field">
               <v-text-field
                 v-model="searchInput"
                 density="compact"

package/components/VehicleManagement.vue

@@ -1,17 +1,28 @@
 <template>
   <v-row no-gutters>
+    <!--
+      The design's title row: page name left, primary action right. Was a
+      `tonal` pill drawn by `TableMain` on its own row under the (absent)
+      heading. Same handler, same permission gate.
+    -->
+    <v-col cols="12">
+      <PageHeader title="Vehicle Mgmt">
+        <template #actions>
+          <AppButton v-if="canCreateVehicle" icon="mdi-plus" @click="handleAddVehicleClick">
+            Add Vehicle
+          </AppButton>
+        </template>
+      </PageHeader>
+    </v-col>
+
     <TableMain :headers="headers" :items="items" :loading="loading || getVehiclesPending" :page="page" :pages="pages"
-      :pageRange="pageRange" :extension-height="70" :canCreate="canCreateVehicle" @refresh="getVehiclesRefresh"
-      createLabel="Add Vehicle" show-header @row-click="handleRowClick" @create="handleAddVehicleClick"
+      :pageRange="pageRange" @refresh="getVehiclesRefresh"
+      show-header @row-click="handleRowClick"
       @update:page="handleUpdatePage">
 
-      <template #extension>
-        <v-row no-gutters class="px-5 py-1 d-flex align-center justify-end ga-3">
-          <v-text-field v-model="searchInput" density="compact" placeholder="Search" clearable max-width="300"
-            append-inner-icon="mdi-magnify" hide-details />
-          <!-- <v-select v-model="vehicleTypeFilter" density="compact" item-title="label" item-value="value"
-            placeholder="Filter by Type" clearable max-width="200" hide-details :items="typeOptions" /> -->
-        </v-row>
+      <!-- Search joins the toolbar row rather than stacking a second one. -->
+      <template #prepend-additional>
+        <AppField v-model="searchInput" search compact placeholder="Search" klass="app-toolbar__search" />
       </template>
 
       <template #item.block="{ value }">