@7365admin1/layer-common 3.2.2-staging.85 → 3.2.2-staging.87

package/assets/css/screens.css

@@ -0,0 +1,486 @@
+/**
+ * PHASE 4 - THE MODULE-SCREEN PATTERNS.
+ *
+ * Phase 1 wrote the tokens, Phase 2 the shell, Phase 3 the table card. What is
+ * left on a module screen is everything AROUND that table: the filter bar over
+ * it, the tabs that switch it, the dialogs it opens, the plain cards and the
+ * settings accordion. Those patterns are drawn once, here, and the screens opt
+ * in by class name - so a screen's diff is class names and chips, not a block
+ * of CSS repeated twenty times.
+ *
+ * OPT-IN, NOT GLOBAL. Every rule below is under a class this layer's own
+ * components add to their own markup. Nothing here selects a bare Vuetify class
+ * on its own, so no application page is repainted by a stylesheet it never
+ * asked for - the eleven apps get these surfaces through the components they
+ * already mount, and their own markup is Phases 6 and 7.
+ *
+ * VISUAL ONLY. No rule here hides, moves, reorders, disables or reveals a
+ * control: everything is colour, type, radius, border, shadow and spacing.
+ */
+
+/* ------------------------------------------------------------------ */
+/* 1. The filter bar.                                                  */
+/* ------------------------------------------------------------------ */
+
+/**
+ * The row of filters that sits over a table. On these screens it is a
+ * `v-card flat` with a fixed 60px height and `ga-5`, which on a phone puts
+ * three 300px fields on one 60px line and clips them. This is the same fields
+ * in the same order, on the design's surface, wrapping instead of clipping.
+ */
+.filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--grid-gap);
+  width: 100%;
+  padding: 10px var(--cellpad-x);
+  background: transparent;
+  font-family: var(--font-sans);
+}
+
+/* 40px, 10px radius, 13.5px - the design's input, whatever Vuetify's density
+   would otherwise make of it. `.filter-field` is the same input on its own,
+   for the screens whose one search box sits in a toolbar rather than a row. */
+.filter-bar .v-field,
+.filter-field .v-field {
+  border-radius: var(--r-inner);
+  font-size: var(--fs-cell);
+  font-family: var(--font-sans);
+}
+
+.filter-bar .v-field__input,
+.filter-field .v-field__input {
+  min-height: var(--input-h);
+  font-size: var(--fs-cell);
+}
+
+.filter-bar .v-label,
+.filter-field .v-label,
+.filter-bar .v-field__input input::placeholder,
+.filter-field .v-field__input input::placeholder {
+  font-size: var(--fs-cell);
+  font-family: var(--font-sans);
+}
+
+/* A field is at least readable-wide and then shares what is left. Below 600
+   there is no room for two, so they stack - the same rule `.filter-row` uses. */
+.filter-bar > * {
+  flex: 1 1 200px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.filter-bar > .filter-bar__fit {
+  flex: 0 0 auto;
+}
+
+@media (max-width: 599.98px) {
+  .filter-bar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .filter-bar > * {
+    flex: 1 1 auto;
+    width: 100%;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* 2. Tabs.                                                            */
+/* ------------------------------------------------------------------ */
+
+/**
+ * 13px, the active one at 800 in `--accent-text` over a 2px accent underline.
+ * Vuetify's own tab label is uppercase 14px/500 with wide tracking and it puts
+ * `text-uppercase` on it as a utility, so these need the same weight of hand
+ * the nav items needed in Phase 2.
+ */
+.screen-tabs .v-tab {
+  font-family: var(--font-sans);
+  font-size: var(--fs-nav) !important;
+  font-weight: var(--fw-cell) !important;
+  letter-spacing: 0 !important;
+  text-transform: none !important;
+  color: var(--muted);
+  min-width: 0;
+}
+
+.screen-tabs .v-tab.v-tab--selected {
+  font-weight: var(--fw-table-head) !important;
+  color: var(--accent-text);
+}
+
+.screen-tabs .v-tab .v-tab__slider {
+  height: 2px;
+  background: var(--accent);
+}
+
+/* ------------------------------------------------------------------ */
+/* 3. Cards, section headings and empty states.                        */
+/* ------------------------------------------------------------------ */
+
+/** The card contract, for the surfaces that are not the table card. */
+.screen-card {
+  font-family: var(--font-sans);
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-card);
+  box-shadow: var(--shadow);
+}
+
+.screen-title {
+  font-family: var(--font-sans);
+  font-size: var(--fs-h1);
+  font-weight: var(--fw-h1);
+  letter-spacing: var(--ls-h1);
+  color: var(--text);
+}
+
+.screen-card-title {
+  font-family: var(--font-sans);
+  font-size: var(--fs-card-title) !important;
+  font-weight: var(--fw-card-title) !important;
+  letter-spacing: 0 !important;
+  color: var(--text);
+}
+
+.screen-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 52px 16px;
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--muted);
+  text-align: center;
+}
+
+.screen-empty .v-icon {
+  color: var(--muted);
+}
+
+/**
+ * The one-line explanation under a setting's name. It was
+ * `text-grey-darken-1` - a fixed Vuetify grey, i.e. the same dark grey on the
+ * dark page - so the sentence that explains a switch was the hardest thing on
+ * the screen to read. `--muted` is the design's own, and it is a token, so it
+ * follows the theme.
+ */
+.screen-hint {
+  font-family: var(--font-sans);
+  color: var(--muted);
+}
+
+/* ------------------------------------------------------------------ */
+/* 4. Dialogs.                                                         */
+/* ------------------------------------------------------------------ */
+
+/**
+ * THE ONE RULE HERE THAT IS NOT OPT-IN, AND WHY.
+ *
+ * The product opens its dialogs from more than sixty different form and dialog
+ * components, not from the twenty-three module screens. Giving the design's
+ * 16px corner to a modal by editing sixty files would be sixty chances to
+ * break a dialog for a corner radius. So the SHAPE is stated once, for any
+ * card that Vuetify has put inside an overlay - shape and shadow only. It
+ * repaints no colour, moves no control and changes no type, and it is the same
+ * `.v-overlay__content > .v-card` selector Phase 3 already had to out-specify.
+ */
+.v-overlay__content > .v-card,
+.v-overlay__content > form > .v-card {
+  border-radius: var(--r-modal) !important;
+  box-shadow: var(--shadow-modal) !important;
+}
+
+/**
+ * `.v-overlay__content > .v-card` is MORE SPECIFIC than a class on the card
+ * (Phase 3 measured a dialog stuck at its factory 4px radius because of it),
+ * so the radius has to be `!important` to be reached at all.
+ *
+ * The body is what scrolls, not the whole card: a modal whose card scrolls
+ * takes its Cancel/Submit footer off screen with it. `.screen-modal__body` is
+ * only applied where a screen's dialog already has a distinct body element.
+ */
+.screen-modal {
+  font-family: var(--font-sans);
+  border-radius: var(--r-modal) !important;
+  box-shadow: var(--shadow-modal) !important;
+  background: var(--card) !important;
+  max-height: calc(100vh - 32px);
+}
+
+.screen-modal .v-card-title {
+  font-family: var(--font-sans);
+  font-size: var(--fs-card-title) !important;
+  font-weight: var(--fw-card-title) !important;
+  letter-spacing: 0 !important;
+  color: var(--text);
+}
+
+.screen-modal__body {
+  overflow-y: auto;
+  font-size: var(--fs-cell);
+}
+
+/* The design's two buttons, for the dialogs and toolbars that draw their own. */
+.screen-btn-primary {
+  height: var(--btn-h);
+  border-radius: var(--r-inner);
+  padding: 0 16px;
+  font-family: var(--font-sans);
+  font-size: var(--fs-btn);
+  font-weight: var(--fw-btn-strong);
+  letter-spacing: 0;
+  text-transform: none;
+  background: var(--accent-strong);
+  color: var(--on-accent-strong);
+}
+
+/* Vuetify paints `variant="tonal"` with an overlay layer ABOVE the button's own
+   background, so without this the accent fill shows through a wash. */
+.screen-btn-primary .v-btn__overlay,
+.screen-btn-ghost .v-btn__overlay {
+  opacity: 0;
+}
+
+/**
+ * The icon-only actions next to a primary button (download template, import,
+ * export). The design draws an icon button as a bordered square the height of
+ * the input next to it - the same button Phase 2 gave the top bar - not a
+ * tinted pill.
+ */
+.screen-icon-btn {
+  height: var(--btn-h);
+  width: var(--btn-h);
+  min-width: var(--btn-h);
+  border-radius: var(--r-inner);
+  border: 1px solid var(--border);
+  background: var(--card);
+  color: var(--text2);
+}
+
+.screen-icon-btn .v-btn__overlay {
+  opacity: 0;
+}
+
+.screen-btn-ghost {
+  height: var(--btn-h);
+  border-radius: var(--r-inner);
+  padding: 0 16px;
+  font-family: var(--font-sans);
+  font-size: var(--fs-btn);
+  font-weight: var(--fw-btn);
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--text2);
+  border-color: var(--border);
+  background: var(--card);
+}
+
+/* ------------------------------------------------------------------ */
+/* 5. The settings accordion.                                          */
+/* ------------------------------------------------------------------ */
+
+/**
+ * The design draws settings as a stack of bordered sections with one open at a
+ * time. The "one at a time" half is BEHAVIOUR and is left exactly as the panel
+ * has it (`multiple`, on the site settings screen); this is the drawn half:
+ * the border, the radius, the title type and the open section's surface.
+ */
+.screen-accordion .v-expansion-panel {
+  font-family: var(--font-sans);
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-card) !important;
+  box-shadow: none !important;
+  margin-bottom: 10px;
+}
+
+.screen-accordion .v-expansion-panel::after {
+  display: none;
+}
+
+.screen-accordion .v-expansion-panel-title {
+  font-family: var(--font-sans);
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  color: var(--text);
+  min-height: 56px;
+}
+
+.screen-accordion .v-expansion-panel-title--active {
+  color: var(--text);
+  border-bottom: 1px solid var(--border);
+}
+
+.screen-accordion .v-expansion-panel-text {
+  font-size: var(--fs-cell);
+  color: var(--text2);
+}
+
+.screen-accordion .v-expansion-panel-title__overlay {
+  background: transparent;
+}
+
+/* ------------------------------------------------------------------ */
+/* 6. The table card (moved here from TableMain, unchanged).           */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Phase 3 drew this inside `TableMain`'s own scoped block. It is moved here,
+ * rule for rule, because it is not TableMain's alone any more: `BillingMain`
+ * draws the same card from its own copy of that markup, and a second copy of
+ * the CSS is how the two drift apart. `TableMain` still puts the same classes
+ * on the same elements - only the stylesheet moved, so nothing it renders
+ * changes.
+ */
+
+/* ------------------------------------------------------------------ */
+/* 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 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 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 tbody tr:hover > td {
+  background: var(--hover);
+}
+
+/**
+ * The grouped list (`TableHygiene`) draws its own rows instead of a <table>,
+ * so it cannot inherit the two rules above. Its group header takes the header
+ * row's surface and its rows the card's - replacing the literal
+ * `grey-lighten-4` and `white` that painted the whole list near-white on a
+ * dark card.
+ */
+.table-card__group {
+  background: var(--thead);
+}
+
+.table-card__row {
+  background: var(--card);
+}
+
+/* ------------------------------------------------------------------ */
+/* 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 .v-icon {
+  color: var(--muted);
+}
+
+/* The in-card variant: 34px, 10px radius, as drawn. */
+.table-card__search .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 .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 .v-tab.v-tab--selected {
+  font-weight: var(--fw-table-head);
+  color: var(--accent-text);
+}
+
+.table-card .v-tab .v-tab__slider {
+  height: 2px;
+  background: var(--accent);
+}

package/components/AreaChecklistHistoryMain.vue

@@ -33,7 +33,7 @@
         <template #extension>
           <v-row no-gutters class="w-100 d-flex flex-column">
             <v-card
-              class="w-100 px-3 d-flex align-center ga-5 py-2"
+              class="w-100 filter-bar d-flex align-center ga-5"
               flat
               :height="60"
             >
@@ -80,7 +80,11 @@
           </div>
         </template>
         <template #item.status="{ value }">
-          <v-chip class="text-capitalize">{{ value || "No Status" }}</v-chip>
+          <StatusChip
+            class="text-capitalize"
+            :status="value"
+            :label="value || 'No Status'"
+          />
         </template>
       </TableMain></v-col
     >

package/components/AreaMain.vue

@@ -49,10 +49,8 @@
                 <!-- Primary action -->
                 <v-btn
                   v-if="canCreateArea"
-                  class="text-none mr-3"
-                  rounded="pill"
-                  variant="tonal"
-                  size="large"
+                  class="text-none mr-3 screen-btn-primary"
+                  variant="flat"
                   @click="onCreateItem"
                 >
                   {{ createLabel }}
@@ -63,10 +61,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/area-sample-data.xlsx"
                       target="_blank"
                       download
@@ -81,10 +77,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>
@@ -97,10 +91,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"
                     >
@@ -114,7 +106,7 @@
 
             <v-spacer />
 
-            <v-col cols="auto">
+            <v-col cols="auto" class="filter-field">
               <v-text-field
                 v-model="searchInput"
                 density="compact"

package/components/AttendanceMain.vue

@@ -15,11 +15,12 @@
         @row-click="handleRowClick"
       >
         <template #actions>
+          <!-- Was `color="black"`: a black slab in both themes, and the only
+               black surface on the page. Same button, the design's ghost. -->
           <v-btn
             v-if="canManageAttendanceSettings"
-            variant="flat"
-            color="black"
-            class="text-none"
+            variant="outlined"
+            class="text-none screen-btn-ghost"
             @click="dialogShowSettings = true"
           >
             <v-icon class="mr-2">mdi-cog</v-icon>

package/components/BillingMain.vue

@@ -1,14 +1,12 @@
 <template>
   <v-row no-gutters>
     <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
-        :loading="false"
-      >
-        <v-toolbar density="compact" color="grey-lighten-4">
+      <v-card width="100%" variant="flat" class="table-card" :loading="false">
+        <v-toolbar
+          density="compact"
+          color="transparent"
+          class="table-card__toolbar"
+        >
           <template #prepend>
             <v-btn fab icon density="comfortable">
               <v-icon>mdi-refresh</v-icon>
@@ -16,7 +14,7 @@
           </template>
           <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 v-model="page" :length="pages" />
@@ -38,7 +36,7 @@
             <span class="text-caption font-weight-bold text-capitalize">
               permissions
             </span>
-            <v-chip>{{ value.length }}</v-chip>
+            <StatusChip :dot="false" tone="neutral" :label="`${value.length}`" />
           </template>
 
           <template #item.nature="{ item }">