@7365admin1/layer-common 4.97.1-staging.580 → 4.97.1-staging.582

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

@@ -284,6 +284,7 @@ import useUtils from "../composables/useUtils";
 import useSite from "../composables/useSite";
 import { readApiError } from "../utils/subscription-form";
 import { withSecurityMarker } from "../utils/security-catalogue";
+import { isTradeCatalogue, withTradeMarker } from "../utils/trade-catalogue";
 import { applyRolePreset, ROLE_PRESETS, type TRolePreset } from "../utils/inventory-presets";
 
 /** Shown after "Couldn't save:" when the server gave no reason (network, timeout). */
@@ -534,10 +535,13 @@ async function submit() {
   try {
     await createRole({
       name: name.value,
-      // Security catalogue only (it carries `offline-data`): stamp the v2 marker.
+      // Security catalogue (it carries `offline-data`) / trade catalogue (it
+      // offers See calendar): stamp that catalogue's v2 marker.
       permissions: "offline-data" in (props.permissions || {})
         ? withSecurityMarker(permState.value.selected)
-        : permState.value.selected,
+        : isTradeCatalogue(props.permissions)
+          ? withTradeMarker(permState.value.selected)
+          : permState.value.selected,
       type: props.type,
       org: props.org,
       site: props.siteId,

package/components/RolePermissionFormPreviewUpdate.vue

@@ -277,6 +277,11 @@ import {
   securityV2PreTicks,
   withSecurityMarker,
 } from "../utils/security-catalogue";
+import {
+  isTradeCatalogue as isTradeCatalogueOf,
+  tradeV2PreTicks,
+  withTradeMarker,
+} from "../utils/trade-catalogue";
 import {
   holdsPermission,
   withoutPermission,
@@ -651,12 +656,21 @@ const isSecurityCatalogue = computed(
   () => "offline-data" in (props.permissions as Record<string, unknown>)
 );
 
-// Opening an UNMARKED security role for edit: pre-tick the new boxes the role
+/** Trade catalogue only: the five trade trees offer Task Calendar -> See calendar. */
+const isTradeCatalogue = computed(() =>
+  isTradeCatalogueOf(props.permissions as Record<string, any>)
+);
+
+// Opening an UNMARKED security (or trade) role for edit: pre-tick the new boxes the role
 // already effectively has (legacy fallback), so an unrelated save never strips
 // access. Cancel restores the original list.
 watch(edit, (on) => {
-  if (!on || !isSecurityCatalogue.value) return;
-  const add = securityV2PreTicks(definedModel.value ?? []);
+  if (!on) return;
+  const add = isSecurityCatalogue.value
+    ? securityV2PreTicks(definedModel.value ?? [])
+    : isTradeCatalogue.value
+      ? tradeV2PreTicks(definedModel.value ?? [])
+      : [];
   if (add.length) definedModel.value = [...definedModel.value, ...add];
 });
 
@@ -735,7 +749,9 @@ async function submit() {
       props.id,
       isSecurityCatalogue.value
         ? withSecurityMarker(definedModel.value)
-        : definedModel.value
+        : isTradeCatalogue.value
+          ? withTradeMarker(definedModel.value)
+          : definedModel.value
     );
     emit("success");
   } catch (error: any) {

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>

package/components/ScheduleTaskForm.vue

@@ -59,8 +59,10 @@
                   variant="outlined"
                   density="comfortable"
                   class="filter-field mb-4"
-                  placeholder="For example: Midday toilet round"
+                  placeholder="For example: Lunch toilet check"
                   :error-messages="fieldError('title')"
+                  hint="Staff see this name on their phone, on the extra round."
+                  persistent-hint
                   hide-details="auto"
                 />
                 <InputLabel for="description" title="Instructions" />
@@ -72,6 +74,8 @@
                   class="filter-field"
                   rows="3"
                   placeholder="Optional. Anything staff should know for this visit."
+                  hint="Optional. For example: refill soap and tissue as well."
+                  persistent-hint
                   hide-details="auto"
                 />
               </div>
@@ -81,8 +85,9 @@
             <v-stepper-window-item :value="2">
               <div class="st-step">
                 <p class="st-step__help">
-                  Pick the areas that get the extra visit. Every unit in an
-                  area is added to the checklist.
+                  Pick the areas that get the extra visit. Every unit in a
+                  picked area gets one more tick box on the Daily Checklist
+                  for this visit.
                 </p>
                 <InputLabel for="selected-areas" title="Areas" required />
                 <v-select
@@ -165,7 +170,8 @@
               <div class="st-step">
                 <p class="st-step__help">
                   Choose the time, and whether it happens once or repeats.
-                  Times are Singapore time.
+                  Times are Singapore time. The extra round appears on staff's
+                  checklist at this time.
                 </p>
                 <v-row dense>
                   <v-col cols="12" sm="6">
@@ -193,6 +199,8 @@
                       variant="outlined"
                       density="comfortable"
                       class="filter-field"
+                      :hint="REPEAT_HINTS[repeat]"
+                      persistent-hint
                       hide-details="auto"
                     />
                   </v-col>
@@ -200,7 +208,7 @@
 
                 <!-- Once: pick the day(s) -->
                 <div v-if="repeat === 'none'" class="mt-4">
-                  <InputLabel title="Day" required />
+                  <InputLabel title="Day(s)" required />
                   <div class="st-panel">
                     <v-date-picker
                       v-model="pickerDates"
@@ -213,7 +221,8 @@
                       class="ma-0"
                     />
                     <div class="st-step__help mt-2">
-                      {{ selectedDates.length }} day(s) selected.
+                      {{ selectedDates.length }} day(s) selected. Click a day
+                      again to remove it.
                     </div>
                   </div>
                   <div v-if="fieldError('dates').length" class="st-error">
@@ -304,6 +313,32 @@
                   <div class="st-summary__label">This will:</div>
                   <div class="st-summary__text">{{ summary }}</div>
                 </div>
+
+                <!-- What staff will see: the same card shape as the mobile checklist. -->
+                <div class="st-summary__label mt-4">
+                  What staff will see on their phone:
+                </div>
+                <div class="st-preview">
+                  <div class="st-preview__head">
+                    <v-icon size="18" class="mr-1">mdi-clock-outline</v-icon>
+                    {{ previewTime }} · Extra visit
+                  </div>
+                  <div class="st-preview__title">
+                    {{ subject.trim() || "(your title)" }}
+                  </div>
+                  <div v-if="description.trim()" class="st-preview__desc">
+                    {{ description.trim() }}
+                  </div>
+                  <div
+                    v-for="area in selectedAreas"
+                    :key="areaKey(area)"
+                    class="st-preview__row"
+                  >
+                    <v-icon size="18" class="mr-1">mdi-checkbox-blank-outline</v-icon>
+                    {{ area.name }} -
+                    {{ unitCountOf(area) }} unit{{ unitCountOf(area) === 1 ? "" : "s" }} to tick
+                  </div>
+                </div>
                 <div v-if="fieldError('never').length" class="st-error mt-2">
                   {{ fieldError("never")[0] }}
                 </div>
@@ -372,6 +407,7 @@ import {
   REPEAT_OPTIONS,
   WEEK_DAYS,
   buildSummary,
+  fmtTime,
   sgtToday,
   validateSchedule,
   type TRepeat,
@@ -395,6 +431,11 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  /** The step the dialog opens on (3 = When, used by "Extend or repeat"). */
+  startStep: {
+    type: Number,
+    default: 1,
+  },
 });
 
 const show = defineModel("show", { type: Boolean, default: false });
@@ -476,6 +517,15 @@ const formState = computed(() => ({
 const errors = computed<TScheduleErrors>(() => validateSchedule(formState.value));
 const summary = computed(() => buildSummary(formState.value, totalUnits.value));
 
+const REPEAT_HINTS: Record<TRepeat, string> = {
+  none: "Only on the day(s) you pick below.",
+  daily: "Every day, weekends included.",
+  weekdays: "Monday to Friday.",
+  weekly: "On the weekdays you pick below.",
+  monthly: "Once a month, on the start date's day.",
+};
+const previewTime = computed(() => fmtTime(scheduleTime.value) || "--");
+
 const STEP_FIELDS: Record<number, (keyof TScheduleErrors)[]> = {
   1: ["title"],
   2: ["areas"],
@@ -694,6 +744,7 @@ const close = () => {
 watch(
   [show, () => props.mode, () => props.taskData],
   async ([isOpen, mode]) => {
+    if (isOpen) step.value = props.startStep || 1;
     if (isOpen && mode === "edit") {
       await loadTaskData();
     } else if (!isOpen) {
@@ -710,7 +761,7 @@ watch(
 }
 .st-step__help {
   margin: 0 0 12px;
-  font-size: var(--fs-chip-lg);
+  font-size: var(--fs-cell);
   font-weight: 600;
   color: var(--text2);
 }
@@ -748,6 +799,36 @@ watch(
   font-size: 15px;
   font-weight: 600;
 }
+.st-preview {
+  margin-top: 6px;
+  padding: 14px 16px;
+  border: 1px solid var(--border);
+  border-left: 4px solid rgb(var(--v-theme-primary));
+  border-radius: var(--r-inner);
+  background: var(--card);
+  font-size: var(--fs-cell);
+}
+.st-preview__head {
+  display: flex;
+  align-items: center;
+  font-size: var(--fs-chip-lg);
+  font-weight: 700;
+  color: var(--text2);
+}
+.st-preview__title {
+  margin: 4px 0;
+  font-size: var(--fs-card-title);
+  font-weight: 800;
+}
+.st-preview__desc {
+  margin-bottom: 6px;
+  color: var(--text2);
+}
+.st-preview__row {
+  display: flex;
+  align-items: center;
+  padding: 4px 0;
+}
 .st-stepper,
 .st-stepper__header {
   background: transparent;