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

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

@@ -2259,7 +2259,7 @@ export default {
 .field-label {
   margin: 12px 0 7px;
   color: var(--text2);
-  font-size: 10px;
+  font-size: 12px;
   font-weight: 500;
 }
 
@@ -2270,7 +2270,7 @@ export default {
 .field-hint {
   margin: 6px 0 0;
   color: var(--text2);
-  font-size: 11px;
+  font-size: 12px;
   line-height: 1.4;
 }
 
@@ -2295,7 +2295,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;
 }
@@ -2333,7 +2333,7 @@ export default {
 
 .sip-section-switch small {
   color: var(--muted);
-  font-size: 10px;
+  font-size: 12px;
   line-height: 1.4;
 }
 
@@ -2475,7 +2475,7 @@ export default {
 .call-label {
   margin: 8px 0 6px;
   color: var(--text);
-  font-size: 10px;
+  font-size: 12px;
   font-weight: 500;
   letter-spacing: 0;
 }
@@ -2498,7 +2498,7 @@ export default {
 
 .call-radio-list :deep(.v-label) {
   color: var(--text2);
-  font-size: 11px;
+  font-size: 12px;
   letter-spacing: 0;
   opacity: 1;
 }
@@ -2514,7 +2514,7 @@ export default {
   border-radius: 3px;
   background: var(--card);
   color: var(--text);
-  font-size: 11px;
+  font-size: 12px;
   letter-spacing: 0;
 }
 
@@ -2670,7 +2670,7 @@ export default {
 .web-phone-status {
   min-width: 92px;
   justify-content: center;
-  font-size: 10px;
+  font-size: 12px;
 }
 
 .web-phone-status.ready {
@@ -2762,7 +2762,7 @@ export default {
 
 .sip-account-label {
   color: var(--muted);
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .sip-account-extension {
@@ -2775,7 +2775,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;
@@ -2851,7 +2851,7 @@ export default {
   max-width: 100%;
   overflow: hidden;
   color: var(--border);
-  font-size: 11px;
+  font-size: 12px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -2908,7 +2908,7 @@ export default {
 
 .web-phone-error {
   margin-top: 14px;
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .call-two-col {
@@ -2935,7 +2935,7 @@ export default {
   min-height: 38px;
   border: 1px dashed var(--border);
   color: var(--text2);
-  font-size: 11px;
+  font-size: 12px;
   letter-spacing: 0;
 }
 
@@ -2965,7 +2965,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

@@ -1321,7 +1321,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 = [

package/components/ScheduleGuide.vue

@@ -9,6 +9,29 @@
 <template>
   <div class="schedule-guide">
     <p v-if="text" class="schedule-guide__text">{{ text }}</p>
+    <!--
+      "How it works": the page's own short manual (owner 21 Oct - a supervisor
+      who was never trained must understand the screen from the screen). Open
+      by default until the viewer closes it; the choice is remembered on this
+      browser only.
+    -->
+    <v-expansion-panels
+      v-if="$slots.default && howTitle"
+      v-model="howPanel"
+      class="schedule-guide__how"
+      variant="accordion"
+      flat
+    >
+      <v-expansion-panel value="how">
+        <v-expansion-panel-title class="schedule-guide__how-title">
+          <v-icon size="20" class="mr-2">mdi-help-circle-outline</v-icon>
+          {{ howTitle }}
+        </v-expansion-panel-title>
+        <v-expansion-panel-text class="schedule-guide__how-body">
+          <slot />
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+    </v-expansion-panels>
     <v-alert
       v-if="problems.length"
       type="warning"
@@ -44,6 +67,27 @@ const props = defineProps({
   serviceType: { type: String, default: "" },
   scheduleRoute: { type: String, default: "" },
   text: { type: String, default: "" },
+  /** Heading of the "How it works" panel; the panel shows only with this and a default slot. */
+  howTitle: { type: String, default: "" },
+  /** Remembers open/closed per panel on this browser. */
+  howKey: { type: String, default: "" },
+});
+
+const HOW_STORE = () => `schedule-guide-how:${props.howKey || props.howTitle}`;
+const howPanel = ref<string | undefined>("how");
+onMounted(() => {
+  try {
+    if (localStorage.getItem(HOW_STORE()) === "closed") howPanel.value = undefined;
+  } catch {
+    // storage blocked: stay open
+  }
+});
+watch(howPanel, (v) => {
+  try {
+    localStorage.setItem(HOW_STORE(), v ? "open" : "closed");
+  } catch {
+    // storage blocked: nothing to remember
+  }
 });
 
 const { getAreas, getAreaById } = useAreas();
@@ -125,8 +169,65 @@ watch(() => [props.site, props.serviceType], check);
   font-size: var(--fs-cell);
   color: var(--text2);
 }
+.schedule-guide__how {
+  margin-bottom: 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  overflow: hidden;
+}
+.schedule-guide__how-title {
+  font-family: var(--font-sans);
+  font-size: var(--fs-card-title);
+  font-weight: 700;
+}
+.schedule-guide__how-body {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  line-height: 1.55;
+}
 .schedule-guide__list {
   margin: 0;
   padding-left: 18px;
 }
 </style>
+
+<!-- Shared by the "How it works" content the schedule screens put in the slot. -->
+<style>
+.sg-steps {
+  margin: 0 0 12px;
+  padding-left: 22px;
+}
+.sg-steps li {
+  margin-bottom: 6px;
+}
+.sg-example {
+  margin: 0 0 12px;
+  padding: 12px 14px;
+  border-left: 3px solid rgb(var(--v-theme-primary));
+  border-radius: var(--r-inner-sm);
+  background: var(--hover);
+}
+.sg-legend {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 8px 12px;
+  align-items: center;
+  margin: 0;
+}
+.sg-legend dd {
+  margin: 0;
+}
+.sg-h {
+  margin: 4px 0 8px;
+  font-weight: 700;
+}
+@media (max-width: 599.98px) {
+  .sg-legend {
+    grid-template-columns: 1fr;
+    gap: 2px 0;
+  }
+  .sg-legend dd {
+    margin-bottom: 8px;
+  }
+}
+</style>