@7365admin1/layer-common 4.136.0 → 4.137.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 4.137.0
+
+### Minor Changes
+
+- 5e44e4e: Schedule screens explain themselves (How it works panels, worked example, status meanings, plain row sentences, Extend or repeat, link to the day's checklist, staff preview) and readable text sizes across every screen (body/table 15px, secondary at least 13px).
+
 ## 4.136.0
 
 ### Minor Changes
@@ -3371,11 +3377,11 @@ Monthly report: a month that had patrols opens the list of that month's patrol r
   `utils/console-tier.ts` + `composables/useConsoleTier.ts` mirror the server's
   own rule from two endpoints the console already calls, unprojected:
 
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                GET /api/members/user/:user/app/admin    the Seven365 staff membership
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                GET /api/roles/id/:role                  that membership's role document
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  GET /api/members/user/:user/app/admin    the Seven365 staff membership
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  GET /api/roles/id/:role                  that membership's role document
 
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                owner  = member.type === "admin" && role.type === "admin" && role.default === true
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                staff  = member.type === "admin" && role.type === "admin"
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  owner  = member.type === "admin" && role.type === "admin" && role.default === true
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  staff  = member.type === "admin" && role.type === "admin"
 
   `role.default` is the marker because it is the only property of a platform
   staff role no API caller can set - `role.controller.ts` validates create and

package/assets/css/primitives.css

@@ -195,7 +195,7 @@
   align-items: center;
   gap: 5px;
   margin-top: 4px;
-  font-size: 12.5px;
+  font-size: 13.5px;
   font-weight: 600;
   color: var(--muted);
 }
@@ -268,7 +268,7 @@
 }
 
 .app-toolbar__count {
-  font-size: 12.5px;
+  font-size: 13.5px;
   font-weight: 600;
   color: var(--muted);
   font-variant-numeric: tabular-nums;
@@ -336,7 +336,7 @@
   align-items: center;
   padding: var(--cellpad) var(--cellpad-x);
   border-top: 1px solid var(--border);
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 600;
   color: var(--text);
 }
@@ -371,7 +371,7 @@
   gap: 8px;
   padding: 52px var(--cellpad-x);
   border-top: 1px solid var(--border);
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 600;
   color: var(--muted);
   text-align: center;
@@ -605,7 +605,7 @@ button.app-btn--err {
 }
 
 .app-field__label {
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 600;
   color: var(--muted);
   white-space: nowrap;
@@ -928,7 +928,7 @@ select option {
   background: transparent;
   color: var(--muted);
   font-family: inherit;
-  font-size: 12.5px;
+  font-size: 13.5px;
   font-weight: 700;
   line-height: 1.2;
   white-space: nowrap;
@@ -1055,7 +1055,7 @@ select option {
   padding-inline-start: 12px;
   color: var(--text2);
   font-family: var(--font-sans);
-  font-size: 13.5px;
+  font-size: 14.5px;
   font-weight: 700;
   opacity: 1;
 }
@@ -1136,7 +1136,7 @@ select option {
   align-items: center;
   padding: 3px 8px;
   border-radius: 999px;
-  font-size: 11.5px;
+  font-size: 13px;
   font-weight: 800;
   line-height: 1.2;
   background: var(--ok-bg);
@@ -1150,7 +1150,7 @@ select option {
 
 .app-kpi__sub {
   margin-top: 6px;
-  font-size: 12.5px;
+  font-size: 13.5px;
   font-weight: 600;
   color: var(--muted);
 }
@@ -1208,7 +1208,7 @@ select option {
 
   .v-data-table__td-title {
     color: var(--muted);
-    font-size: 12px;
+    font-size: 13px;
   }
 
   .v-data-table__td-value {
@@ -1241,7 +1241,7 @@ select option {
 /* ------------------------------------------------------------------ */
 .app-input-label {
   font-family: var(--font-sans);
-  font-size: 12.5px;
+  font-size: 13.5px;
   font-weight: 700;
   letter-spacing: 0;
   color: var(--text);
@@ -1251,3 +1251,46 @@ select option {
 .app-input-label__req {
   color: var(--err);
 }
+
+/* ------------------------------------------------------------------ */
+/* READABLE TEXT FLOOR (owner 21 Oct 2026: "the font size is too small"). */
+/* ------------------------------------------------------------------ */
+/*
+ * Vuetify's stock small sizes, raised once here so every screen in every app
+ * follows without per-page edits: captions, field hints/errors, small chips
+ * and buttons, table footers and list subtitles. Body/table text is 15px via
+ * the tokens; secondary text is at least 13px; nothing is under 12px.
+ * `!important` only where Vuetify's own rule is a utility (`.text-caption`)
+ * or outranks a single class.
+ */
+.text-caption {
+  font-size: 13px !important;
+  line-height: 1.4 !important;
+}
+.text-overline {
+  font-size: 12px !important;
+}
+.v-messages,
+.v-messages__message {
+  font-size: 13px;
+  line-height: 1.35;
+}
+.v-chip.v-chip--size-small {
+  font-size: 13px;
+}
+.v-chip.v-chip--size-x-small {
+  font-size: 12px;
+}
+.v-btn.v-btn--size-small {
+  font-size: 13px;
+}
+.v-btn.v-btn--size-x-small {
+  font-size: 12px;
+}
+.v-data-table-footer,
+.v-data-table-footer .v-field__input {
+  font-size: 13.5px;
+}
+.v-list-item-subtitle {
+  font-size: 14px;
+}

package/assets/css/screens.css

@@ -656,7 +656,7 @@
 }
 
 .table-card__range {
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 600;
   color: var(--muted);
   font-variant-numeric: tabular-nums;
@@ -1233,7 +1233,7 @@
   justify-content: center;
   pointer-events: none;
   font-family: var(--font-sans);
-  font-size: 12.5px;
+  font-size: 13.5px;
   font-weight: 600;
   letter-spacing: 0;
   color: rgb(139, 143, 152); /* light `--muted` - the pad is paper */
@@ -1241,7 +1241,7 @@
 
 .screen-signpad__label {
   font-family: var(--font-sans);
-  font-size: 12.5px;
+  font-size: 13.5px;
   font-weight: 600;
   letter-spacing: 0;
   color: var(--muted);

package/assets/css/tokens.css

@@ -122,41 +122,46 @@
   --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, sans-serif;
 
-  /* Type scale - size / weight / letter-spacing, straight from the contract. */
-  --fs-h1: 22px;
+  /*
+   * Type scale. Raised 21 Oct 2026 (owner: "most of the pages the font size is
+   * too small"): body and table text 15px, secondary text at least 13px,
+   * nothing under 12px. Was h1 22 / card 15.5 / head 11 / cell 13.5 / dense 13 /
+   * nav 13 / section 10.5 / btn 13.5 / chip 11.5 / chip-lg 12 / crumb 12.5.
+   */
+  --fs-h1: 24px;
   --fw-h1: 800;
   --ls-h1: -0.01em;
 
-  --fs-card-title: 15.5px;
+  --fs-card-title: 16.5px;
   --fw-card-title: 800;
 
   --fs-kpi: 30px;
   --fw-kpi: 800;
   --ls-kpi: -0.02em;
 
-  --fs-table-head: 11px;
+  --fs-table-head: 12.5px;
   --fw-table-head: 800;
   --ls-table-head: 0.07em;
 
-  --fs-cell: 13.5px;
+  --fs-cell: 15px;
   --fw-cell: 600;
-  --fs-cell-dense: 13px;
+  --fs-cell-dense: 14px;
 
-  --fs-nav: 13px;
+  --fs-nav: 14px;
 
-  --fs-section-label: 10.5px;
+  --fs-section-label: 12px;
   --fw-section-label: 800;
   --ls-section-label: 0.09em;
 
-  --fs-btn: 13.5px;
+  --fs-btn: 14px;
   --fw-btn: 700;
   --fw-btn-strong: 800;
 
-  --fs-chip: 11.5px;
-  --fs-chip-lg: 12px;
+  --fs-chip: 13px;
+  --fs-chip-lg: 13px;
   --fw-chip: 700;
 
-  --fs-breadcrumb: 12.5px;
+  --fs-breadcrumb: 13.5px;
 
   /* Shape */
   --r-card: 14px;

package/components/AnprCameraBadge.vue

@@ -179,7 +179,7 @@ const isBlocked = computed(() => props.cameras?.some((c) => c.list === "blocked"
   border: 1px solid var(--border);
   background: var(--card);
   color: var(--text);
-  font-size: 11px;
+  font-size: 12px;
   line-height: 18px;
   cursor: pointer;
 }

package/components/CameraWall.vue

@@ -983,7 +983,7 @@ async function toggleFullscreen() {
   justify-content: space-between;
   gap: 6px;
   margin: 6px 0 0;
-  font-size: 11px;
+  font-size: 12px;
 }
 .vms__picker-range {
   color: var(--vms-text-dim);
@@ -999,7 +999,7 @@ async function toggleFullscreen() {
   align-items: center;
   justify-content: space-between;
   margin: 0 0 6px;
-  font-size: 11px;
+  font-size: 12px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--vms-text-dim);
@@ -1008,7 +1008,7 @@ async function toggleFullscreen() {
 .vms__picker-empty,
 .vms__picker-note {
   margin: 6px 0 0;
-  font-size: 11px;
+  font-size: 12px;
   line-height: 15px;
   color: var(--vms-text-dim);
 }
@@ -1017,7 +1017,7 @@ async function toggleFullscreen() {
   background: none;
   border: none;
   color: var(--vms-accent);
-  font-size: 11px;
+  font-size: 12px;
   cursor: pointer;
   padding: 0;
   text-transform: none;
@@ -1186,7 +1186,7 @@ async function toggleFullscreen() {
 */
 .vms__caps-head {
   margin: 0 0 6px;
-  font-size: 11px;
+  font-size: 12px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--vms-text-dim);
@@ -1238,7 +1238,7 @@ async function toggleFullscreen() {
 }
 
 .vms__cap-tag {
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 400;
   padding: 1px 6px;
   border-radius: var(--vms-radius);
@@ -1266,7 +1266,7 @@ async function toggleFullscreen() {
   margin: 6px 0 0;
   padding-top: 6px;
   border-top: 1px solid var(--vms-line);
-  font-size: 11px;
+  font-size: 12px;
   line-height: 16px;
   color: var(--vms-text-dim);
 }

package/components/CameraWallTile.vue

@@ -606,7 +606,7 @@ async function toggleFullscreen() {
 }
 
 .vms-tile--dense .vms-tile__reason {
-  font-size: 11px;
+  font-size: 12px;
   line-height: 15px;
 }
 
@@ -659,7 +659,7 @@ async function toggleFullscreen() {
 
 .vms-tile__state {
   color: var(--vms-text, #e8ecf1);
-  font-size: 11px;
+  font-size: 12px;
   line-height: 14px;
   white-space: nowrap;
 }
@@ -673,7 +673,7 @@ async function toggleFullscreen() {
 }
 
 .vms-tile--dense .vms-tile__state {
-  font-size: 10px;
+  font-size: 12px;
   line-height: 13px;
 }
 
@@ -715,7 +715,7 @@ async function toggleFullscreen() {
   border-radius: var(--vms-radius, 3px);
   background: var(--vms-scrim, rgba(7, 9, 12, 0.62));
   color: var(--vms-text-dim, #94a0b0);
-  font-size: 11px;
+  font-size: 12px;
   line-height: 15px;
   white-space: nowrap;
   overflow: hidden;
@@ -723,7 +723,7 @@ async function toggleFullscreen() {
 }
 
 .vms-tile--dense .vms-tile__health {
-  font-size: 10px;
+  font-size: 12px;
   line-height: 14px;
 }
 
@@ -752,7 +752,7 @@ async function toggleFullscreen() {
   padding: 1px 6px;
   border-radius: var(--vms-radius, 3px);
   background: var(--vms-scrim, rgba(7, 9, 12, 0.62));
-  font-size: 11px;
+  font-size: 12px;
   line-height: 15px;
   /* The row is click-through; this one control is not. */
   pointer-events: auto;
@@ -768,7 +768,7 @@ async function toggleFullscreen() {
   border: none;
   padding: 2px 2px;
   color: var(--vms-accent, #5b9be0);
-  font-size: 11px;
+  font-size: 12px;
   line-height: 15px;
   cursor: pointer;
 }
@@ -791,7 +791,7 @@ async function toggleFullscreen() {
 }
 
 .vms-tile--dense .vms-tile__name {
-  font-size: 11px;
+  font-size: 12px;
   line-height: 15px;
 }
 

package/components/Chat/ListCard.vue

@@ -84,7 +84,7 @@ defineProps({
 }
 
 .chat-listcard__initials {
-  font-size: 9px;
+  font-size: 12px;
   font-weight: 700;
   letter-spacing: 0;
 }

package/components/CleaningScheduleMain.vue

@@ -7,8 +7,42 @@
         :site="site"
         :service-type="serviceType"
         :schedule-route="scheduleRoute"
-        text="A new checklist is created for every area automatically each midnight. Staff tick off each unit on the mobile app."
-      />
+        text="The app makes a new checklist for every area automatically each midnight. Staff tick off each unit on their mobile app; you follow progress here."
+        how-title="How the Daily Checklist works"
+        how-key="daily-checklist"
+      >
+        <ol class="sg-steps">
+          <li>
+            Every midnight a new row appears here for the day. It holds every
+            area, with as many visits as the area's "visits per day", plus
+            any <strong>Extra Visits</strong> set for that day.
+          </li>
+          <li>
+            Staff open the same list in their mobile app and tick each unit
+            when it is done (a photo is needed to finish a visit).
+          </li>
+          <li>
+            <strong>Closes in</strong> counts down to midnight. When it
+            reaches zero the day's list closes: it becomes view-only, and any
+            unit not ticked counts as <strong>Missed</strong>.
+          </li>
+          <li>
+            Click a row to see its areas, then an area to see each unit,
+            send a unit back (<strong>Needs redo</strong>) or add a remark.
+          </li>
+          <li>
+            <strong>Download PDF</strong> saves that day's report - every
+            area, unit, who ticked it and when - to send to your client.
+          </li>
+        </ol>
+        <div class="sg-h">What the status words mean</div>
+        <dl class="sg-legend">
+          <template v-for="h in DAILY_STATUS_HELP" :key="h.word">
+            <dt><StatusChip :status="h.word" :label="h.word" /></dt>
+            <dd>{{ h.meaning }}</dd>
+          </template>
+        </dl>
+      </ScheduleGuide>
       <TableMain
         v-if="canViewSchedules"
         :title="pageTitle"
@@ -24,10 +58,11 @@
       >
         <template #no-data>
           <div class="cs-empty">
-            <strong>No daily lists yet.</strong>
+            <strong>No daily checklists here yet.</strong>
             <span>
-              A list is created automatically every midnight, once your Areas
-              and Units are set up.
+              A checklist is made automatically every midnight once your Areas
+              and Units are set up. If you filtered by date or status, clear
+              the filter to see every day.
             </span>
           </div>
         </template>
@@ -122,7 +157,7 @@
             @click.stop="downloadItem(item)"
           >
             <v-icon left>mdi-download</v-icon>
-            Download
+            Download PDF
           </v-btn>
         </template>
       </TableMain>
@@ -133,7 +168,8 @@
         -->
         <AppCard class="pa-4">
           <div class="cs-no-permission">
-            You do not have permission to view cleaning schedules.
+            You do not have permission to view the Daily Checklist. Ask your
+            administrator to give your role access to it.
           </div>
         </AppCard>
       </div>
@@ -149,9 +185,10 @@
 <script lang="ts" setup>
 import useCleaningSchedules from "../composables/useCleaningSchedules";
 import {
+  DAILY_STATUS_HELP,
+  dailyChecklistTitle,
   dailyStatusLabel,
   hasListForToday,
-  scheduleNameFor,
 } from "../utils/schedule-task";
 import useUtils from "../composables/useUtils";
 
@@ -168,20 +205,19 @@ const props = defineProps({
   canGenerateChecklist: { type: Boolean, default: false },
 });
 
-// "Daily Schedule - Cleaning" / "- Landscape" / "- Pest" / "- Pool" / "- Technician"
-const pageTitle = `Daily Schedule – ${scheduleNameFor(props.serviceType).title.replace(
-  / Schedule$/,
-  "",
-)}`;
+// "Daily Checklist – Cleaning" / "– Landscape" / "– Pest" / "– Pool" / "– Technician"
+const pageTitle = dailyChecklistTitle(props.serviceType);
 
-const startDate = ref("");
-const endDate = ref("");
+// `?date=YYYY-MM-DD` (from an Extra Visit's "See that day's checklist") opens on that one day.
+const linkedDay = String(useRoute().query.date ?? "");
+const startDate = ref(/^\d{4}-\d{2}-\d{2}$/.test(linkedDay) ? linkedDay : "");
+const endDate = ref(startDate.value);
 const status = ref<TScheduleAreaStatus>("all");
 const statusOptions = [
   { title: "All", value: "all" },
-  { title: "Open", value: "open" },
+  { title: "Not started", value: "open" },
   { title: "In progress", value: "ongoing" },
-  { title: "Completed", value: "completed" },
+  { title: "Done", value: "completed" },
   { title: "Closed", value: "closed" },
 ] as const;
 
@@ -191,10 +227,10 @@ const pages = ref(0);
 const pageRange = ref("-- - -- of --");
 
 const headers = [
-  { title: "Created Date", value: "createdAt" },
-  { title: "Close in", value: "closeIn" },
+  { title: "Day", value: "createdAt" },
+  { title: "Closes in", value: "closeIn" },
   { title: "Status", value: "status" },
-  { title: "Completion Date", value: "completedAt" },
+  { title: "Finished on", value: "completedAt" },
   { title: "", value: "download" },
 ];
 const remainingTime = ref({} as Record<string, string>);

package/components/ClientMain.vue

@@ -899,7 +899,7 @@ onUnmounted(() => {
   position: absolute;
   top: -8px;
   left: 9px;
-  font-size: 10px;
+  font-size: 12px;
   color: var(--muted);
   background: var(--card);
   padding: 0 3px;

package/components/ClientSubscriptionForm.vue

@@ -463,7 +463,7 @@ onMounted(load)
 }
 .sub-free-badge {
   display: block;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 700;
   color: var(--text2);
   margin-top: 2px;

package/components/DashboardMain.vue

@@ -69,7 +69,7 @@
             :y="label.y"
             text-anchor="end"
             alignment-baseline="middle"
-            style="fill: #64748b; font-size: 11px; font-weight: 500"
+            style="fill: #64748b; font-size: 12px; font-weight: 500"
           >
             {{ label.text }}
           </text>
@@ -471,7 +471,7 @@
             :y="label.y"
             text-anchor="end"
             alignment-baseline="middle"
-            style="fill: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); font-size: 11px; font-weight: 500"
+            style="fill: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); font-size: 12px; font-weight: 500"
           >
             {{ label.text }}
           </text>
@@ -4283,7 +4283,7 @@ function formatDashboardTime(value?: string) {
 
 .print-kpi-title {
   color: #64748b;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   margin-bottom: 8px;
@@ -4299,7 +4299,7 @@ function formatDashboardTime(value?: string) {
 
 .print-kpi-meta {
   color: #64748b;
-  font-size: 11px;
+  font-size: 12px;
   margin-top: 6px;
 }
 
@@ -4349,7 +4349,7 @@ function formatDashboardTime(value?: string) {
 
 .print-status-badge {
   display: inline-block;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 600;
   padding: 2px 8px;
   border-radius: 4px;
@@ -4636,7 +4636,7 @@ function formatDashboardTime(value?: string) {
 
 .figma-list-main p {
   color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 700;
   line-height: 1.3;
   margin: 3px 0 0;
@@ -4662,7 +4662,7 @@ function formatDashboardTime(value?: string) {
   color: var(--muted);
   display: flex;
   font-family: var(--font-sans);
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 700;
   gap: 8px;
   min-width: 0;
@@ -4766,7 +4766,7 @@ function formatDashboardTime(value?: string) {
 .active-patrol-main span {
   color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   display: block;
-  font-size: 11px;
+  font-size: 12px;
   line-height: 1.25;
   overflow-wrap: anywhere;
 }
@@ -4811,7 +4811,7 @@ function formatDashboardTime(value?: string) {
 
 .active-patrol-assignee span {
   color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 600;
   line-height: 1.2;
   min-width: 0;
@@ -4830,7 +4830,7 @@ function formatDashboardTime(value?: string) {
 
 .active-patrol-status-pill {
   border-radius: 20px;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 600;
   line-height: 1.2;
   padding: 5px 10px;
@@ -4846,7 +4846,7 @@ function formatDashboardTime(value?: string) {
   color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   display: inline-flex;
   flex: 0 0 auto;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 800;
   height: 24px;
   justify-content: center;
@@ -4869,7 +4869,7 @@ function formatDashboardTime(value?: string) {
   box-shadow: var(--shadow-menu);
   color: var(--card);
   content: attr(data-tooltip);
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 600;
   left: 50%;
   line-height: 1.35;
@@ -5099,7 +5099,7 @@ function formatDashboardTime(value?: string) {
   color: var(--accent-text);
   display: inline-flex;
   flex-shrink: 0;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 800;
   height: 30px;
   justify-content: center;