@7365admin1/layer-common 4.132.0 → 4.134.0

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>

package/components/ScheduleGuide.vue

@@ -0,0 +1,132 @@
+<!--
+  THE ONE-LINE EXPLANATION + "BEFORE YOU START" BANNER, shared by every schedule
+  screen (Cleaning / Landscape / Pest / Pool / Technician). The intro says what
+  the screen is for; the banner appears only when the site is not set up yet
+  (no Areas, an Area without "visits per day", or an Area without Units), and
+  links straight to where that is fixed. It never blocks the screen and stays
+  silent if the check itself fails.
+-->
+<template>
+  <div class="schedule-guide">
+    <p v-if="text" class="schedule-guide__text">{{ text }}</p>
+    <v-alert
+      v-if="problems.length"
+      type="warning"
+      variant="tonal"
+      density="comfortable"
+      class="schedule-guide__banner"
+      title="Before you start"
+    >
+      <ul class="schedule-guide__list">
+        <li v-for="p in problems" :key="p">{{ p }}</li>
+      </ul>
+      <template #append>
+        <v-btn
+          :to="areaLink"
+          variant="outlined"
+          size="small"
+          class="text-none"
+        >
+          Set up Areas and Units
+        </v-btn>
+      </template>
+    </v-alert>
+  </div>
+</template>
+
+<script setup lang="ts">
+import useAreas from "../composables/useAreas";
+import { scheduleNameFor } from "../utils/schedule-task";
+
+const props = defineProps({
+  orgId: { type: String, required: true },
+  site: { type: String, required: true },
+  serviceType: { type: String, default: "" },
+  scheduleRoute: { type: String, default: "" },
+  text: { type: String, default: "" },
+});
+
+const { getAreas, getAreaById } = useAreas();
+const problems = ref<string[]>([]);
+
+const areaLink = computed(
+  () =>
+    `/${props.orgId}/${props.site}/${
+      props.scheduleRoute || scheduleNameFor(props.serviceType).route
+    }/area`,
+);
+
+// How many areas get a units check: one request each, so capped.
+const MAX_UNIT_CHECKS = 30;
+const plural = (n: number, one: string, many: string) => (n === 1 ? one : many);
+
+async function check() {
+  try {
+    const res = await getAreas({
+      site: props.site,
+      limit: 200,
+      serviceType: props.serviceType,
+    });
+    const areas: any[] = res?.items || [];
+    const found: string[] = [];
+
+    if (!areas.length) {
+      problems.value = [
+        "There are no Areas yet. Add your Areas, then the Units in each one.",
+      ];
+      return;
+    }
+
+    const noVisits = areas.filter((a) => !(Number(a.set) >= 1));
+    if (noVisits.length) {
+      found.push(
+        `${noVisits.length} ${plural(noVisits.length, "area has", "areas have")} no visits per day set: ${noVisits
+          .slice(0, 3)
+          .map((a) => a.name)
+          .join(", ")}${noVisits.length > 3 ? "..." : ""}.`,
+      );
+    }
+
+    const noUnits: string[] = [];
+    await Promise.all(
+      areas.slice(0, MAX_UNIT_CHECKS).map(async (a) => {
+        try {
+          const full = await getAreaById(a._id);
+          if (!(full?.units || []).length) noUnits.push(a.name);
+        } catch {
+          // a failed lookup is not evidence of a missing unit
+        }
+      }),
+    );
+    if (noUnits.length) {
+      found.push(
+        `${noUnits.length} ${plural(noUnits.length, "area has", "areas have")} no Units, so ${plural(noUnits.length, "it is", "they are")} skipped: ${noUnits
+          .slice(0, 3)
+          .join(", ")}${noUnits.length > 3 ? "..." : ""}.`,
+      );
+    }
+    problems.value = found;
+  } catch {
+    problems.value = [];
+  }
+}
+
+onMounted(check);
+watch(() => [props.site, props.serviceType], check);
+</script>
+
+<style scoped>
+.schedule-guide {
+  margin-bottom: 12px;
+}
+.schedule-guide__text {
+  margin: 0 0 12px;
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--text2);
+}
+.schedule-guide__list {
+  margin: 0;
+  padding-left: 18px;
+}
+</style>