@7365admin1/layer-common 3.2.2-staging.84 → 3.2.2-staging.86

package/assets/css/screens.css

@@ -0,0 +1,471 @@
+/**
+ * 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);
+}
+
+/* ------------------------------------------------------------------ */
+/* 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/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/CleaningScheduleMain.vue

@@ -17,11 +17,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"
-              flat
-              :height="60"
-            >
+            <div class="filter-bar">
               <InputDateTimePicker
                 v-model:utc="startDate"
                 density="compact"
@@ -47,7 +43,7 @@
                 item-value="value"
                 label="Status"
               />
-            </v-card>
+            </div>
           </v-row>
         </template>
 
@@ -60,25 +56,23 @@
               : ""
           }}
         </template>
+        <!--
+          A countdown, not a status word, so it passes the tone the screen has
+          already worked out from the time left rather than a word to map.
+        -->
         <template #item.closeIn="{ item }">
-          <v-chip
+          <StatusChip
             class="text-capitalize"
-            variant="flat"
-            :color="getCloseInColor(item._id)"
-            pill
-          >
-            {{ remainingTime[item._id] || "00h 00m" }}
-          </v-chip>
+            :tone="getCloseInTone(item._id)"
+            :label="remainingTime[item._id] || '00h 00m'"
+          />
         </template>
         <template #item.status="{ value }">
-          <v-chip
+          <StatusChip
             class="text-capitalize"
-            :color="getStatusColor(value)"
-            variant="flat"
-            pill
-          >
-            {{ value || "No Status" }}
-          </v-chip>
+            :status="value"
+            :label="value || 'No Status'"
+          />
         </template>
         <template #item.completedAt="{ value }">
           {{
@@ -159,33 +153,22 @@ const downloadingId = ref<string | null>(null);
 const { getCleaningSchedules, downloadChecklistPdf } = useCleaningSchedules();
 const { formatDate } = useUtils();
 
-const getStatusColor = (status: unknown): string => {
-  if (!status) return "grey";
-
-  const normalized = String(status).toLowerCase();
-
-  switch (normalized) {
-    case "open":
-      return "grey";
-    case "ongoing":
-      return "primary";
-    case "completed":
-    case "accepted":
-      return "success";
-    case "closed":
-    case "rejected":
-      return "error";
-    default:
-      return "secondary";
-  }
-};
-
-const getCloseInColor = (id: string): string => {
+/**
+ * The status word now picks its own colour, from the one shared mapping in
+ * `utils/status.ts` - which carries every word this screen used to switch on,
+ * with the tone it used to give it. The screen no longer keeps a private
+ * palette that only it agrees with.
+ *
+ * The countdown is not a status word, so the thresholds stay here; only the
+ * NAMES change, from Vuetify colours to the design's tones. Same three bands,
+ * same boundaries.
+ */
+const getCloseInTone = (id: string): "info" | "warn" | "err" => {
   const secs = remainingSeconds.value[id];
-  if (secs === undefined) return "primary";
-  if (secs <= 0) return "error";
-  if (secs < 3 * 3600) return "warning";
-  return "primary";
+  if (secs === undefined) return "info";
+  if (secs <= 0) return "err";
+  if (secs < 3 * 3600) return "warn";
+  return "info";
 };
 
 const canDownloadSchedule = computed(() => props.canDownloadSchedule);