@7365admin1/layer-common 4.97.1-staging.578 → 4.97.1-staging.579

package/components/AreaChecklistHistoryLogs.vue

@@ -49,7 +49,7 @@
                       <StatusChip
                         class="text-capitalize"
                         :status="status"
-                        :label="status || 'N/A'"
+                        :label="status === 'N/A' ? status : dailyStatusLabel(status)"
                       />
                     </v-col>
                   </v-row>
@@ -125,7 +125,7 @@
                           pill
                           class="ml-2"
                         >
-                          Schedule Task
+                          Extra visit
                         </StatusChip>
                       </v-list-subheader>
 
@@ -165,8 +165,8 @@
                                  green as on every other screen. -->
                             <StatusChip
                               class="text-capitalize"
-                              :status="unit.status || 'Open'"
-                              :label="unit.status || 'Open'"
+                              :status="historyUnitLabel(unit.status)"
+                              :label="historyUnitLabel(unit.status)"
                             />
                           </v-col>
                         </v-row>
@@ -262,6 +262,7 @@
 </template>
 
 <script setup lang="ts">
+import { dailyStatusLabel, historyUnitLabel } from "../utils/schedule-task";
 const props = defineProps({
   orgId: { type: String, required: true, default: "" },
   site: { type: String, required: true, default: "" },

package/components/CleaningScheduleMain.vue

@@ -1,9 +1,17 @@
 <template>
   <v-row no-gutters align="center" justify="center">
     <v-col cols="12" lg="12">
+      <ScheduleGuide
+        v-if="canViewSchedules"
+        :org-id="orgId"
+        :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."
+      />
       <TableMain
         v-if="canViewSchedules"
-        :title="checklistTitle"
+        :title="pageTitle"
         :items="items"
         :headers="headers"
         :loading="loading"
@@ -15,6 +23,28 @@
         @refresh="onRefresh"
         @row-click="onRowClick"
       >
+        <template #no-data>
+          <div class="cs-empty">
+            <strong>No daily lists yet.</strong>
+            <span>
+              A list is created automatically every midnight, once your Areas
+              and Units are set up.
+            </span>
+          </div>
+        </template>
+
+        <template #actions>
+          <v-btn
+            v-if="showCreateToday"
+            class="text-none screen-btn-primary"
+            variant="flat"
+            :loading="creatingToday"
+            @click="createTodaysList"
+          >
+            Create today's list now
+          </v-btn>
+        </template>
+
         <template #extension>
           <v-row no-gutters class="w-100 d-flex flex-column">
             <div class="filter-bar">
@@ -73,7 +103,7 @@
           <StatusChip
             class="text-capitalize"
             :status="value"
-            :label="value || 'No Status'"
+            :label="dailyStatusLabel(value)"
           />
         </template>
         <template #item.completedAt="{ value }">
@@ -110,16 +140,22 @@
           </div>
         </AppCard>
       </div>
+      <Snackbar
+        v-model="messageSnackbar"
+        :text="message"
+        :color="messageColor"
+      />
     </v-col>
   </v-row>
 </template>
 
 <script lang="ts" setup>
 import useCleaningSchedules from "../composables/useCleaningSchedules";
-import useWorkerTerm from "../composables/useWorkerTerm";
-import { workerTitle } from "../utils/worker-terms";
-// "Cleaner Checklist" in Hygiene, "Gardener Checklist" in Landscape, ...
-const checklistTitle = workerTitle(`${useWorkerTerm().one} checklist`);
+import {
+  dailyStatusLabel,
+  hasListForToday,
+  scheduleNameFor,
+} from "../utils/schedule-task";
 import useUtils from "../composables/useUtils";
 
 const props = defineProps({
@@ -132,16 +168,24 @@ const props = defineProps({
   canViewScheduleDetails: { type: Boolean, default: false },
   canDownloadSchedule: { type: Boolean, default: false },
   canManageScheduleTasks: { type: Boolean, default: false },
+  canGenerateChecklist: { type: Boolean, default: false },
 });
 
+// "Daily Schedule - Cleaning" / "- Landscape" / "- Pest" / "- Pool" / "- Technician"
+const pageTitle = `Daily Schedule – ${scheduleNameFor(props.serviceType).title.replace(
+  / Schedule$/,
+  "",
+)}`;
+
 const startDate = ref("");
 const endDate = ref("");
 const status = ref<TScheduleAreaStatus>("all");
 const statusOptions = [
   { title: "All", value: "all" },
   { title: "Open", value: "open" },
-  { title: "Ongoing", value: "ongoing" },
+  { title: "In progress", value: "ongoing" },
   { title: "Completed", value: "completed" },
+  { title: "Closed", value: "closed" },
 ] as const;
 
 const items = ref<Array<Record<string, any>>>([]);
@@ -159,8 +203,18 @@ const headers = [
 const remainingTime = ref({} as Record<string, string>);
 const remainingSeconds = ref({} as Record<string, number>);
 const downloadingId = ref<string | null>(null);
+const creatingToday = ref(false);
 
-const { getCleaningSchedules, downloadChecklistPdf } = useCleaningSchedules();
+const message = ref("");
+const messageSnackbar = ref(false);
+const messageColor = ref("error");
+
+const {
+  getCleaningSchedules,
+  downloadChecklistPdf,
+  createTodaysParent,
+  generateChecklist,
+} = useCleaningSchedules();
 const { formatDate } = useUtils();
 
 /**
@@ -280,6 +334,36 @@ const updateRemainingTime = () => {
   });
 };
 
+// Only on the unfiltered first page, where today's row would be if it exists.
+const showCreateToday = computed(
+  () =>
+    props.canGenerateChecklist &&
+    !loading.value &&
+    !!getCleanerChecklistReq.value &&
+    page.value === 1 &&
+    !startDate.value &&
+    !endDate.value &&
+    status.value === "all" &&
+    !hasListForToday(items.value),
+);
+
+async function createTodaysList() {
+  try {
+    creatingToday.value = true;
+    const parent = await createTodaysParent(props.site, props.serviceType);
+    await generateChecklist(props.site, parent.id);
+    showMessage("Today's list is ready.", "success");
+    await getCleanerChecklistRefresh();
+  } catch (error: any) {
+    showMessage(
+      error?.data?.message || error?.message || "Could not create today's list.",
+      "error",
+    );
+  } finally {
+    creatingToday.value = false;
+  }
+}
+
 watchEffect(() => {
   if (getCleanerChecklistReq.value) {
     items.value = getCleanerChecklistReq.value.items;
@@ -333,7 +417,11 @@ async function downloadItem(item: any) {
     downloadingId.value = id;
     await downloadChecklistPdf(id);
   } catch (err) {
-    console.error("Failed to download checklist PDF", err);
+    showMessage(
+      (err as any)?.data?.message ||
+        "Could not download the PDF. Please try again.",
+      "error",
+    );
   } finally {
     downloadingId.value = null;
   }
@@ -375,15 +463,22 @@ function onRowClick(data: any) {
 }
 
 function showMessage(msg: string, color: string = "error") {
-  try {
-    console.warn(msg);
-  } catch (e) {
-    alert(msg);
-  }
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
 }
 </script>
 
 <style scoped>
+.cs-empty {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 24px 16px;
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--text2);
+}
 .cs-no-permission {
   font-family: var(--font-sans);
   font-size: var(--fs-cell);

package/components/ManageChecklistMain.vue

@@ -109,9 +109,9 @@
                 <div class="d-flex align-center ga-2 mb-2">
                   <v-icon color="error" size="18">mdi-close-circle</v-icon>
                   <span class="text-caption font-weight-bold">
-                    Rejection details
+                    Needs redo
                   </span>
-                  <StatusChip status="Rejected" :dot="false" />
+                  <StatusChip status="Needs redo" :dot="false" />
                 </div>
                 <div
                   v-if="item.remarks"
@@ -146,7 +146,7 @@
           </v-row>
         </template>
 
-        <!-- Approve / Reject action buttons -->
+        <!-- Done / Needs redo action buttons (labels only; the API still says approve / reject) -->
         <template #item-append="{ item, group }">
           <v-row
             v-if="!isScheduleClosed && canManageScheduleTasks"
@@ -165,6 +165,8 @@
                 color="error"
                 :loading="!!loadingActions[getKey(item, group.set)]"
                 :disabled="!!loadingActions[getKey(item, group.set)]"
+                aria-label="Needs redo"
+                title="Needs redo"
                 @click.stop="handleItemActionClick(item, group.set, 'reject')"
               />
             </v-col>
@@ -180,6 +182,8 @@
                 color="success"
                 :loading="!!loadingActions[getKey(item, group.set)]"
                 :disabled="!!loadingActions[getKey(item, group.set)]"
+                aria-label="Done"
+                title="Done"
                 @click.stop="handleItemActionClick(item, group.set, 'approve')"
               />
             </v-col>
@@ -190,7 +194,7 @@
           <v-row no-gutters align="center" class="ga-2">
             <v-col v-if="isGroupAnyApproved(group)" cols="auto">
               <StatusChip
-                :status="isGroupComplete(group) ? 'Completed' : 'Ongoing'"
+                :status="isGroupComplete(group) ? 'Completed' : 'In progress'"
                 :tone="isGroupComplete(group) ? 'ok' : 'warn'"
                 :dot="false"
                 class="text-none"
@@ -202,7 +206,7 @@
                       : "mdi-progress-clock"
                   }}
                 </v-icon>
-                {{ isGroupComplete(group) ? "Completed" : "Ongoing" }}
+                {{ isGroupComplete(group) ? "Completed" : "In progress" }}
                 <template v-if="getGroupCompletedByName(group)">
                   · {{ getGroupCompletedByName(group) }}
                 </template>
@@ -316,7 +320,7 @@
   -->
   <v-dialog v-model="showRejectModal" max-width="600" persistent>
     <v-card class="screen-modal">
-      <v-card-title>Reject Checklist Item</v-card-title>
+      <v-card-title>Needs redo</v-card-title>
 
       <v-divider />
 
@@ -901,14 +905,14 @@ async function submitRejectDialog(): Promise<void> {
       rejectModal.remarks.trim(),
       rejectModal.photoIds
     );
-    showMessage(response?.message || "Unit rejected successfully", "success");
+    showMessage(response?.message || "Marked as needs redo", "success");
     showRejectModal.value = false;
     resetRejectModal();
     await getUnitCleanerChecklistRefresh();
   } catch (error: any) {
     console.error("Error rejecting unit checklist:", error);
     showMessage(
-      error?.data?.message || error?.message || "Failed to reject checklist",
+      error?.data?.message || error?.message || "Could not mark this unit as needs redo",
       "error"
     );
   } finally {
@@ -985,7 +989,7 @@ async function _callUpdateUnitChecklist(
     (s) => s.unit === item.unit && s.set === set
   );
   if (isApproved && action === "approve") {
-    showMessage("Unit already approved", "info");
+    showMessage("This unit is already done", "info");
     return;
   }
 
@@ -1000,7 +1004,7 @@ async function _callUpdateUnitChecklist(
     );
     showMessage(
       response?.message ||
-        `Unit ${action === "approve" ? "approved" : "rejected"} successfully`,
+        `Unit marked as ${action === "approve" ? "done" : "needs redo"}`,
       "success"
     );
     await getUnitCleanerChecklistRefresh();
@@ -1071,13 +1075,13 @@ async function _updateUnitChecklist({
       );
     }
 
-    showMessage(`Set ${setNumber} approved successfully`, "success");
+    showMessage(`Set ${setNumber} done`, "success");
 
     // Refresh data
     await getUnitCleanerChecklistRefresh();
   } catch (error: any) {
     console.error("Error approving set:", error);
-    showMessage(error?.message || "Failed to approve set", "error");
+    showMessage(error?.message || "Could not finish this set", "error");
   } finally {
     submitting.value = false;
   }

package/components/ScheduleAreaMain.vue

@@ -1,8 +1,15 @@
 <template>
   <v-row no-gutters align="center" justify="center">
     <v-col cols="12" lg="12">
+      <ScheduleGuide
+        :org-id="orgId"
+        :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."
+      />
       <TableMain
-        :title="checklistTitle"
+        :title="pageTitle"
         :headers="headers"
         :items="items"
         :loading="loading"
@@ -14,6 +21,16 @@
         @row-click="onRowClick"
         @refresh="getScheduleAreasRefresh"
       >
+        <template #no-data>
+          <div class="sa-empty">
+            <strong>No areas on this list yet.</strong>
+            <span>
+              Areas appear here once they are set up with Units and the list is
+              created. Use "Create today's list now" if the midnight list is
+              missing.
+            </span>
+          </div>
+        </template>
         <template #item.type="{ item }">
           <span class="text-capitalize">{{ item.type }}</span>
         </template>
@@ -87,53 +104,18 @@
                 History
               </v-btn>
               <v-btn
-                v-if="canGenerateChecklist"
+                v-if="showCreateList"
                 class="text-none screen-btn-primary"
                 variant="flat"
-                aria-label="Generate"
+                aria-label="Create today's list now"
                 @click="_generateChecklist"
                 :loading="submitting"
-                :disabled="isScheduleClosed"
               >
-                Generate List
+                Create today's list now
               </v-btn>
             </v-col>
           </v-row>
         </template>
-        <template #item.acceptedBy="{ item }">
-          <div
-            v-if="
-              item.acceptedByName ||
-              (item.status && String(item.status).toLowerCase() === 'accepted')
-            "
-          >
-            <!--
-              `color`/`variant` on a plain `<span>` do nothing - Vuetify only
-              reads them on its own components, so this drew as bare cell text
-              while reading as a tonal green chip. It is the accepted chip the
-              sibling branches already use.
-            -->
-            <StatusChip
-              status="Accepted"
-              class="text-capitalize"
-              :label="item.acceptedByName || item.acceptedBy || 'Accepted'"
-            />
-          </div>
-          <div v-else-if="isScheduleClosed">
-            <StatusChip status="Closed" class="text-capitalize" />
-          </div>
-          <div v-else>
-            <v-btn
-              v-if="canManageScheduleTasks"
-              variant="outlined"
-              class="text-capitalize screen-btn-ghost"
-              @click.stop="() => _acceptAreaChecklist(item._id)"
-            >
-              Accept
-            </v-btn>
-          </div>
-        </template>
-
         <template #item.createdAt="{ value }">
           {{
             formatDate
@@ -148,7 +130,7 @@
           <StatusChip
             class="text-capitalize"
             :status="value"
-            :label="value || 'No Status'"
+            :label="dailyStatusLabel(value)"
           />
         </template>
       </TableMain></v-col
@@ -160,10 +142,7 @@
 
 <script setup lang="ts">
 import useCleaningSchedules from "../composables/useCleaningSchedules";
-import useWorkerTerm from "../composables/useWorkerTerm";
-import { workerTitle } from "../utils/worker-terms";
-// "Cleaner Checklist" in Hygiene, "Gardener Checklist" in Landscape, ...
-const checklistTitle = workerTitle(`${useWorkerTerm().one} checklist`);
+import { dailyStatusLabel, scheduleNameFor } from "../utils/schedule-task";
 import useUtils from "../composables/useUtils";
 
 const props = defineProps({
@@ -178,6 +157,12 @@ 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$/,
+  "",
+)}`;
+
 const submitting = ref(false);
 const message = ref("");
 const messageSnackbar = ref(false);
@@ -191,7 +176,7 @@ const headers = [
   { title: "Area", value: "name" },
   { title: "Status", value: "status" },
   { title: "Type", value: "type" },
-  { title: "No. of Visits", value: "set" },
+  { title: "Visits per day", value: "set" },
 ];
 
 const { formatDate, back } = useUtils();
@@ -214,7 +199,7 @@ const statusFilter = ref<TScheduleAreaStatus>("all");
 const statusOptions = [
   { title: "All", value: "all" },
   { title: "Open", value: "open" },
-  { title: "Ongoing", value: "ongoing" },
+  { title: "In progress", value: "ongoing" },
   { title: "Completed", value: "completed" },
 ];
 const areaTypeFilter = ref<TAreaType>("all");
@@ -224,8 +209,7 @@ const typeOptions = [
   { title: "Toilet", value: "toilet" },
 ];
 
-const { getScheduleAreas, acceptAreaChecklist, generateChecklist } =
-  useCleaningSchedules();
+const { getScheduleAreas, generateChecklist } = useCleaningSchedules();
 
 const {
   data: getScheduleAreasReq,
@@ -262,6 +246,16 @@ watchEffect(() => {
   }
 });
 
+// Only when the day has no areas at all: that is the missed-midnight case.
+const showCreateList = computed(
+  () =>
+    canGenerateChecklist.value &&
+    !isScheduleClosed.value &&
+    !loading.value &&
+    !!getScheduleAreasReq.value &&
+    items.value.length === 0,
+);
+
 function showMessage(msg: string, color: string = "error") {
   message.value = msg;
   messageColor.value = color;
@@ -288,38 +282,17 @@ function openHistory() {
   navigateTo(path);
 }
 
-async function _acceptAreaChecklist(id?: string) {
-  if (!id) {
-    showMessage("No checklist id provided to accept.", "error");
-    return;
-  }
-
-  try {
-    submitting.value = true;
-    await acceptAreaChecklist(id);
-    showMessage("Area checklist accepted successfully.", "success");
-
-    if (typeof getScheduleAreasRefresh === "function") {
-      getScheduleAreasRefresh();
-    }
-  } catch (error: any) {
-    showMessage(error?.message || "Failed to accept area checklist.", "error");
-  } finally {
-    submitting.value = false;
-  }
-}
-
 async function _generateChecklist() {
   try {
     submitting.value = true;
     await generateChecklist(props.site, props.scheduleAreaId);
-    showMessage("Checklist generated successfully.", "success");
+    showMessage("Today's list is ready.", "success");
 
     if (typeof getScheduleAreasRefresh === "function") {
       getScheduleAreasRefresh();
     }
   } catch (error: any) {
-    showMessage(error?.message || "Failed to generate checklist.", "error");
+    showMessage(error?.data?.message || error?.message || "Could not create today's list.", "error");
   } finally {
     submitting.value = false;
   }
@@ -354,3 +327,15 @@ onUnmounted(() => {
   } catch (_) {}
 });
 </script>
+
+<style scoped>
+.sa-empty {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 24px 16px;
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--text2);
+}
+</style>