@7365admin1/layer-common 4.97.1-staging.581 → 4.97.1-staging.583

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/AreaMain.vue

@@ -759,14 +759,20 @@ const onShowQRAction = () => {
   const id =
     (selectedItem.value as any)?._id || (selectedItem.value as any)?.id;
   const runtimeConfig = useRuntimeConfig ? useRuntimeConfig() : undefined;
-  const origin =
-    runtimeConfig?.public?.APP_HYGIENE ||
-    (typeof window !== "undefined" && window.location?.origin
+  // The QR opens this app's own schedule page (M&E, pest, pool, landscape
+  // pass their route); only Hygiene uses the configured Hygiene host.
+  const scheduleSegment = props.scheduleRoute || "cleaning-schedule";
+  const currentOrigin =
+    typeof window !== "undefined" && window.location?.origin
       ? window.location.origin
-      : "https://hygiene.app.iservice365.org");
+      : "";
+  const origin =
+    (scheduleSegment === "cleaning-schedule" && runtimeConfig?.public?.APP_HYGIENE) ||
+    currentOrigin ||
+    "https://hygiene.app.iservice365.org";
   qrPath.value = `${origin}/${props.orgId}/${
     props.site
-  }/cleaning-schedule?qrcode=true&id=${encodeURIComponent(
+  }/${scheduleSegment}?qrcode=true&id=${encodeURIComponent(
     id
   )}&site=${encodeURIComponent(props.site)}`;
 };

package/components/BillingMain.vue

@@ -1,62 +1,21 @@
 <template>
   <div>
     <!--
-      THE DESIGN'S PAGE SCAFFOLD (same shape as Service Providers).
-
-      Placement only: the same refresh control, the same range text, the same
-      pager bound to the same `page`, and the table, its columns and its cell
-      templates are untouched. The screen simply gains the page title it has
-      never had, and its card + toolbar are the design's rather than Vuetify's.
+      Service-provider billing is not built yet. This screen used to draw an
+      empty table with a refresh button that did nothing, which read as
+      "there are no bills". It now says plainly what is (not) here.
     -->
     <PageHeader title="Billing" />
 
-    <AppCard class="table-card">
-      <CardToolbar :count="pageRange">
-        <template #left>
-          <AppButton variant="icon" icon="mdi-refresh" aria-label="Refresh" />
-        </template>
-
-        <template #right>
-          <local-pagination v-model="page" :length="pages" />
-        </template>
-      </CardToolbar>
-
-      <v-data-table
-          :headers="headers"
-          :items="items"
-          item-value="_id"
-          items-per-page="20"
-          fixed-header
-          hide-default-footer
-          hide-default-header
-          style="max-height: calc(100vh - (180px))"
-        >
-          <template #item.permissions="{ value }">
-            <span class="text-caption font-weight-bold text-capitalize">
-              permissions
-            </span>
-            <StatusChip :dot="false" tone="neutral" :label="`${value.length}`" />
-          </template>
-
-          <template #item.nature="{ item }">
-            <span class="text-capitalize">
-              {{ item.nature }}
-            </span>
-          </template>
-      </v-data-table>
+    <AppCard class="pa-6">
+      <p class="text-body-1 mb-2">
+        Service provider billing is not available yet.
+      </p>
+      <p class="text-body-2 text-medium-emphasis mb-0">
+        Bills from your service providers will appear here once this feature is
+        switched on. For billing questions today, please contact your service
+        provider directly.
+      </p>
     </AppCard>
   </div>
 </template>
-
-<script setup lang="ts">
-const page = ref(1);
-const pages = ref(0);
-const pageRange = ref("-- - -- of --");
-
-const items = ref<Array<Record<string, any>>>([]);
-
-const headers = [
-  { title: "Name", value: "name" },
-  { title: "Nature", value: "nature" },
-];
-</script>

package/components/BulletinBoardManagement.vue

@@ -13,7 +13,7 @@
 
         <TableMain :headers="headers" :items="items" v-model:search="searchInput"
             :loading="getAnnouncementPending" :page="page" :pages="pages" :pageRange="pageRange"
-            @refresh="getAnnouncementsRefresh" :show-header="APP_CONSTANTS.RESIDENT === props.recipients" @update:page="handleUpdatePage" @row-click="handleRowClick">
+            @refresh="getAnnouncementsRefresh" show-header @update:page="handleUpdatePage" @row-click="handleRowClick">
             <!--
                 The tabs move ONTO the toolbar row (the design draws them there)
                 instead of a stacked strip above the table. Same options, same
@@ -83,7 +83,6 @@
 </template>
 <script setup lang="ts">
 import useBulletin from '../composables/useBulletin';
-import { APP_CONSTANTS } from '../constants/app';
 // Imported by relative path, not left to Nuxt's auto-import: this layer's
 // components always import their utils explicitly, and a missing import here
 // is a ReferenceError that blanks the screen in every consuming app.
@@ -141,18 +140,15 @@ const { debounce } = useUtils()
 
 
 const headers = computed(() => {
-    const arr = [
+    // Every app shows when an announcement was posted and when it runs/ends.
+    // These used to appear only for recipients="resident", which no app passes,
+    // so staff saw bare titles with no dates.
+    return [
         { title: "Title", value: "title", align: "start" },
-    ]
-
-    if (props.recipients === APP_CONSTANTS.RESIDENT) {
-        arr.push({ title: "Date Created", value: "createdAt", align: "start" });
-        arr.push({ title: "Start Date/End Date", value: "duration", align: "start" });
-        arr.push({ title: "No Expiration", value: "noExpiration", align: "start" });
-        arr.push({ title: "", value: "actions", align: "center" });
-    }
-
-    return arr;
+        { title: "Date Created", value: "createdAt", align: "start" },
+        { title: "Start Date/End Date", value: "duration", align: "start" },
+        { title: "No Expiration", value: "noExpiration", align: "start" },
+    ];
 
 });
 // THE SERVER PAGES THIS LIST. `getAll` is called with `page`, so `items` is

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"
@@ -25,10 +59,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>
@@ -125,7 +160,7 @@
             @click.stop="downloadItem(item)"
           >
             <v-icon left>mdi-download</v-icon>
-            Download
+            Download PDF
           </v-btn>
         </template>
       </TableMain>
@@ -136,7 +171,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>
@@ -152,9 +188,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";
 
@@ -171,20 +208,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;
 
@@ -194,10 +230,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;