@7365admin1/layer-common 4.136.0 → 4.138.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;

package/components/HidAccessLogDashboard.vue

@@ -1447,7 +1447,7 @@ function buildPdfHtml() {
           background: #ffffff;
           color: #0a2638;
           font-family: Arial, Helvetica, sans-serif;
-          font-size: 9px;
+          font-size: 12px;
         }
 
         .pdf-summary {
@@ -1482,7 +1482,7 @@ function buildPdfHtml() {
         }
 
         .pdf-value {
-          font-size: 10px;
+          font-size: 12px;
           line-height: 1.35;
         }
 
@@ -1693,7 +1693,7 @@ watch(selectedReaderId, (value) => {
 .history-table-card :deep(th) {
   background: var(--thead);
   color: var(--muted);
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.04em;

package/components/HidIntercomManagement.vue

@@ -2246,7 +2246,7 @@ export default {
 .field-label {
   margin: 12px 0 7px;
   color: var(--text2);
-  font-size: 10px;
+  font-size: 12px;
   font-weight: 500;
 }
 
@@ -2257,7 +2257,7 @@ export default {
 .field-hint {
   margin: 6px 0 0;
   color: var(--text2);
-  font-size: 11px;
+  font-size: 12px;
   line-height: 1.4;
 }
 
@@ -2282,7 +2282,7 @@ export default {
 .sip-label {
   margin: 12px 0 6px;
   color: var(--text);
-  font-size: 10px;
+  font-size: 12px;
   font-weight: 500;
   line-height: 1.2;
 }
@@ -2320,7 +2320,7 @@ export default {
 
 .sip-section-switch small {
   color: var(--muted);
-  font-size: 10px;
+  font-size: 12px;
   line-height: 1.4;
 }
 
@@ -2462,7 +2462,7 @@ export default {
 .call-label {
   margin: 8px 0 6px;
   color: var(--text);
-  font-size: 10px;
+  font-size: 12px;
   font-weight: 500;
   letter-spacing: 0;
 }
@@ -2485,7 +2485,7 @@ export default {
 
 .call-radio-list :deep(.v-label) {
   color: var(--text2);
-  font-size: 11px;
+  font-size: 12px;
   letter-spacing: 0;
   opacity: 1;
 }
@@ -2501,7 +2501,7 @@ export default {
   border-radius: 3px;
   background: var(--card);
   color: var(--text);
-  font-size: 11px;
+  font-size: 12px;
   letter-spacing: 0;
 }
 
@@ -2657,7 +2657,7 @@ export default {
 .web-phone-status {
   min-width: 92px;
   justify-content: center;
-  font-size: 10px;
+  font-size: 12px;
 }
 
 .web-phone-status.ready {
@@ -2749,7 +2749,7 @@ export default {
 
 .sip-account-label {
   color: var(--muted);
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .sip-account-extension {
@@ -2762,7 +2762,7 @@ export default {
   max-width: 170px;
   overflow: hidden;
   color: var(--text2);
-  font-size: 11px;
+  font-size: 12px;
   text-align: right;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2838,7 +2838,7 @@ export default {
   max-width: 100%;
   overflow: hidden;
   color: var(--border);
-  font-size: 11px;
+  font-size: 12px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -2895,7 +2895,7 @@ export default {
 
 .web-phone-error {
   margin-top: 14px;
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .call-two-col {
@@ -2922,7 +2922,7 @@ export default {
   min-height: 38px;
   border: 1px dashed var(--border);
   color: var(--text2);
-  font-size: 11px;
+  font-size: 12px;
   letter-spacing: 0;
 }
 
@@ -2952,7 +2952,7 @@ export default {
   min-height: 32px;
   margin: 0 0 10px;
   color: var(--text2);
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .call-file-name {

package/components/HidQrCodeConfiguration.vue

@@ -644,7 +644,7 @@ function showMessage(text: string, color: string) {
 .pass-subtext {
   min-height: 18px;
   color: #6b7280;
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .qr-grid {
@@ -667,7 +667,7 @@ function showMessage(text: string, color: string) {
   background-size: 10px 10px;
   background-position: 0 0, 0 5px, 5px -5px, -5px 0;
   color: #6b7280;
-  font-size: 9px;
+  font-size: 12px;
 }
 
 .qr-placeholder.small {
@@ -685,7 +685,7 @@ function showMessage(text: string, color: string) {
   display: grid;
   gap: 4px;
   color: #4b5563;
-  font-size: 10px;
+  font-size: 12px;
 }
 
 .pass-footer strong {

package/components/HidReaderManagement.vue

@@ -1303,7 +1303,7 @@ function formatCallback(reader?: HidRecord | null) {
    nobody opens. */
 .identification-copy small {
   color: var(--muted);
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .identification-applied {

package/components/InventoryPhotoThumbs.vue

@@ -57,7 +57,7 @@ const list = computed(() => [
   position: absolute;
   left: 2px;
   bottom: 2px;
-  font-size: 9px;
+  font-size: 12px;
   line-height: 1;
   padding: 1px 3px;
   border-radius: 3px;

package/components/InvitationMain.vue

@@ -27,6 +27,14 @@
           </template>
 
           <template #right>
+            <AppField
+              v-model="headerSearch"
+              search
+              compact
+              placeholder="Search"
+              aria-label="Search"
+              klass="app-toolbar__search"
+            />
             <AppButton
               variant="icon"
               icon="mdi-refresh"

package/components/Layout/Header.vue

@@ -307,7 +307,7 @@ const { getNameInitials } = useUtils();
 }
 
 .app-profile-menu__name {
-  font-size: 13.5px;
+  font-size: 14.5px;
   font-weight: 800;
   line-height: 1.3;
   color: var(--text);
@@ -317,7 +317,7 @@ const { getNameInitials } = useUtils();
 }
 
 .app-profile-menu__site {
-  font-size: 11.5px;
+  font-size: 13px;
   font-weight: 600;
   line-height: 1.3;
   color: var(--muted);

package/components/Layout/NavigationDrawer.vue

@@ -297,7 +297,7 @@ const handleClick = (item: any) => {
 }
 
 .brand-drawer__suite {
-  font-size: 11.5px;
+  font-size: 13px;
   font-weight: 600;
   line-height: 1.3;
   color: var(--muted);

package/components/MemberMain.vue

@@ -85,6 +85,14 @@
         </template>
 
         <template #right>
+          <AppField
+            v-model="headerSearch"
+            search
+            compact
+            placeholder="Search"
+            aria-label="Search"
+            klass="app-toolbar__search"
+          />
           <AppButton
             variant="icon"
             icon="mdi-refresh"

package/components/Nfc/NFCRouteScheduleTimes.vue

@@ -70,7 +70,7 @@ const hidden = computed(() => (props.limit ? props.windows.slice(props.limit) :
 }
 
 .route-times__next {
-  font-size: 10px;
+  font-size: 12px;
   font-weight: 700;
   color: var(--warn);
 }

package/components/PlateNumberDisplay.vue

@@ -144,7 +144,7 @@ const extraCount = computed(() => {
   width: fit-content;
   padding: 0 6px;
   border-radius: 999px;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 600;
   line-height: 18px;
 }

package/components/RolePermissionMain.vue

@@ -32,6 +32,14 @@
         </template>
 
         <template #right>
+          <AppField
+            v-model="headerSearch"
+            search
+            compact
+            placeholder="Search"
+            aria-label="Search"
+            klass="app-toolbar__search"
+          />
           <local-pagination
             v-model="page"
             :length="pages"
@@ -446,6 +454,11 @@ const {
   }
 );
 
+// A new search starts from the first page.
+watch(headerSearch, () => {
+  page.value = 1;
+});
+
 const loading = computed(() => getRoleReqStatus.value === "pending");
 
 watchEffect(() => {

package/components/ScheduleAreaMain.vue

@@ -6,7 +6,7 @@
         :site="site"
         :service-type="serviceType"
         :schedule-route="scheduleRoute"
-        text="These are the areas on this day's checklist. Open an area to see its units and visits."
+        text="These are the areas on this day's checklist. Click an area to see each unit, tick it as done, or send it back to be redone."
       />
       <TableMain
         :title="pageTitle"
@@ -142,7 +142,7 @@
 
 <script setup lang="ts">
 import useCleaningSchedules from "../composables/useCleaningSchedules";
-import { dailyStatusLabel, scheduleNameFor } from "../utils/schedule-task";
+import { dailyChecklistTitle, dailyStatusLabel } from "../utils/schedule-task";
 import useUtils from "../composables/useUtils";
 
 const props = defineProps({
@@ -157,11 +157,8 @@ const props = defineProps({
   canManageScheduleTasks: { type: Boolean, default: false },
 });
 
-// "Daily Schedule - Cleaning" / "- Landscape" / ... (same title as the day list)
-const pageTitle = `Daily Schedule – ${scheduleNameFor(props.serviceType).title.replace(
-  / Schedule$/,
-  "",
-)}`;
+// "Daily Checklist – Cleaning" / "– Landscape" / ... (same title as the day list)
+const pageTitle = dailyChecklistTitle(props.serviceType);
 
 const submitting = ref(false);
 const message = ref("");
@@ -198,9 +195,9 @@ const items = ref<Array<Record<string, any>>>([]);
 const statusFilter = 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" },
 ];
 const areaTypeFilter = ref<TAreaType>("all");
 const typeOptions = [