@7365admin1/layer-common 3.2.2-staging.192 → 3.2.2-staging.194

package/components/AccessManagement.vue

@@ -62,6 +62,15 @@
           klass="app-toolbar__search"
         />
       </template>
+
+      <!--
+        A failed request is not a site with no access cards. Without this the
+        table drew its neutral "No data available" for a 500, which reads as
+        "there are no cards here" - a statement the server never made.
+      -->
+      <template v-if="getCardError" #no-data>
+        <DashboardEmptyState error />
+      </template>
     </TableMain>
 
     <!-- Create Dialog -->
@@ -125,6 +134,10 @@
   </v-row>
 </template>
 <script setup lang="ts">
+// Relative import, never Nuxt auto-import: this layer's `utils/` are auto-imported
+// into the consuming apps but not reliably into the layer's own components.
+import { readListPage } from "../utils/list-page";
+
 definePageMeta({
   middleware: ["01-auth", "02-org"],
   memberOnly: true,
@@ -262,6 +275,7 @@ const {
   data: getCardReq,
   refresh: getCards,
   status: getAllReqStatus,
+  error: getCardError,
 } = useLazyAsyncData(
   "get-all-cards",
   () =>
@@ -288,21 +302,27 @@ watch(searchText, (val) => {
 
 const loading = computed(() => getAllReqStatus.value === "pending");
 
+// This endpoint answers with a NESTED envelope - `{ data: { items, pages,
+// pageRange } }` - so the page totals are read off `reply.data`, through the
+// one helper that knows how a paginated reply is shaped. The totals are the
+// server's count of the WHOLE list; they are never re-derived from the rows on
+// this page. Applying it unconditionally matters: when a later request fails,
+// the reply goes null and the header falls back to the placeholder instead of
+// keeping the previous page's total on screen as if it were still true.
 watchEffect(() => {
-  if (getCardReq.value?.data) {
-    items.value = getCardReq.value.data.items.map((item: any) => ({
-      ...item,
-      cardCounts: {
-        ...item.cardCounts,
-        available: {
-          ...item.cardCounts?.available,
-          physical: (item.available?.physical ?? []).filter((c: any) => !c.damage).length,
-        },
+  const listPage = readListPage<Record<string, any>>(getCardReq.value?.data);
+  items.value = listPage.items.map((item: any) => ({
+    ...item,
+    cardCounts: {
+      ...item.cardCounts,
+      available: {
+        ...item.cardCounts?.available,
+        physical: (item.available?.physical ?? []).filter((c: any) => !c.damage).length,
       },
-    }));
-    pages.value = getCardReq.value.data.pages;
-    pageRange.value = getCardReq.value.data.pageRange;
-  }
+    },
+  }));
+  pages.value = listPage.pages;
+  pageRange.value = listPage.pageRange;
 });
 
 function setCard({ mode = "create", dialog = true, data = {} as TCard } = {}) {

package/components/BuildingForm.vue

@@ -353,7 +353,9 @@ const buildingFilesNames = ref<Record<string, string>>({});
 building.value.site = prop.site;
 if (prop.mode === "edit") {
   building.value = JSON.parse(JSON.stringify(prop.building));
-  building.value.levels = building.value.levels.map((level: any) => ({ _id: level._id, name: level.name }));  //temporary
+  // Same missing field as the blocks table: a block record without `levels`
+  // made this `.map` throw, which killed the edit dialog before it opened.
+  building.value.levels = (building.value.levels ?? []).map((level: any) => ({ _id: level._id, name: level.name }));  //temporary
   buildingLevels.value = building.value.levels.length;
   initialBuildingLevels.value = JSON.parse(JSON.stringify(building.value.levels));
 

package/components/BuildingManagement/buildings.vue

@@ -25,8 +25,13 @@
       <template #item.createdAt="{ value }">
         {{ new Date(value).toLocaleDateString() }}
       </template>
+      <!--
+        `item.levels.length` threw during render for any block whose record has
+        no `levels` array, and a TypeError in a row template tears the whole
+        table down - one incomplete block blanked every block.
+      -->
       <template #item.levels="{ item }">
-        {{ item.levels.length }}
+        {{ levelCount(item) }}
       </template>
     </TableMain>
 
@@ -58,7 +63,9 @@
 
             <v-col cols="12">
               <strong>Levels:</strong>
-              {{ selectedBuilding?.levels.length ?? "N/A" }}
+              <!-- The optional chain stopped one property early: `?.levels.length`
+                   still reads `.length` of undefined when the block has no levels. -->
+              {{ selectedBuilding ? levelCount(selectedBuilding) : "N/A" }}
             </v-col>
             <v-col cols="12">
               <strong>Files:</strong>
@@ -151,6 +158,10 @@
 </template>
 
 <script setup lang="ts">
+// Relative import, never Nuxt auto-import: this layer's `utils/` are auto-imported
+// into the consuming apps but not reliably into the layer's own components.
+import { levelCount } from "../../utils/data";
+
 definePageMeta({
   middleware: ["01-auth", "02-org"],
   memberOnly: true,

package/components/BulletinBoardManagement.vue

@@ -11,7 +11,7 @@
             </PageHeader>
         </v-col>
 
-        <TableMain :headers="headers" :items="paginatePlaceholderItem" v-model:search="searchInput"
+        <TableMain :headers="headers" :items="items" v-model:search="searchInput"
             :loading="getAnnouncementPending" :page="page" :pages="pages" :pageRange="pageRange"
             @refresh="getAnnouncementsRefresh" :show-header="APP_CONSTANTS.RESIDENT === props.recipients" @update:page="handleUpdatePage" @row-click="handleRowClick">
             <!--
@@ -27,6 +27,15 @@
                 </button>
             </template>
 
+            <!--
+                A failed request is not an empty bulletin board. Without this the
+                table drew its neutral "No data available" for a 500, which reads
+                as "there are no announcements" - a statement the server never made.
+            -->
+            <template v-if="getAnnouncementError" #no-data>
+                <DashboardEmptyState error />
+            </template>
+
             <template v-slot:item.createdAt="{ item }">
                 <span class="d-flex align-center ga-2">
                     <v-icon icon="mdi-calendar-start" color="green" size="20" />
@@ -75,6 +84,10 @@
 <script setup lang="ts">
 import useBulletin from '../composables/useBulletin';
 import { APP_CONSTANTS } from '../constants/app';
+// Imported by relative path, not left to Nuxt's auto-import: this layer's
+// components always import their utils explicitly, and a missing import here
+// is a ReferenceError that blanks the screen in every consuming app.
+import { readListPage } from '../utils/list-page';
 
 definePageMeta({
     memberOnly: true,
@@ -135,6 +148,13 @@ const headers = computed(() => {
     return arr;
 
 });
+// THE SERVER PAGES THIS LIST. `getAll` is called with `page`, so `items` is
+// already one page of rows and `pages` / `pageRange` are the server's own
+// answer for the whole list. A computed used to re-derive both from
+// `items.value.length` - i.e. from the page it had just been handed - so 47
+// announcements read "1-10 of 10", the pager was told there was 1 page, and
+// page 2 was unreachable. Nothing here recomputes them any more; the watcher
+// below is the only writer.
 const items = ref<TAnnouncement[]>([]);
 const page = ref(1);
 const pages = ref(0);
@@ -163,28 +183,11 @@ const activeAnnouncementObj = computed(() => {
     return items.value.find(x => x._id === selectedAnnouncementId.value)
 })
 
-const paginatePlaceholderItem = computed(() => {
-    const pageSize = 10
-    const total = items.value.length
-    const currentPage = page.value
-
-    const start = (currentPage - 1) * pageSize
-    const end = start + pageSize
-
-    const from = total === 0 ? 0 : start + 1
-    const to = Math.min(end, total)
-    pageRange.value = `${from}-${to} of ${total}`
-
-    pages.value = Math.ceil(total / pageSize)
-
-    return items.value.slice(start, end)
-})
-
-
 const {
     data: getAnnouncementReq,
     refresh: getAnnouncementsRefresh,
     pending: getAnnouncementPending,
+    error: getAnnouncementError,
 } = await useLazyAsyncData(
     `get-all-announcements-${page.value}`,
     () => getAll({ page: page.value, site: siteId, status: status.value, recipients: props.recipients ?? "" }),
@@ -194,9 +197,10 @@ const {
 );
 
 watch(getAnnouncementReq, (newVal) => {
-    items.value = newVal?.items || [];
-    pages.value = newVal?.pages || 0;
-    pageRange.value = newVal?.pageRange || "-- - -- of --";
+    const listPage = readListPage<TAnnouncement>(newVal);
+    items.value = listPage.items;
+    pages.value = listPage.pages;
+    pageRange.value = listPage.pageRange;
 });
 
 

package/components/DocumentManagement.vue

@@ -85,6 +85,15 @@
         @update:page="page = $event"
         @row-click="tableRowClickHandler"
       >
+        <!--
+          A failed request is not an empty folder. Without this the table drew
+          its neutral "No data available" for a 500, which reads as "there are
+          no documents here" - a statement the server never made.
+        -->
+        <template v-if="getDocumentError" #no-data>
+          <DashboardEmptyState error />
+        </template>
+
         <template v-if="isInsideFolder" #breadcrumb>
           <div class="d-flex align-center flex-wrap ga-1">
             <v-btn
@@ -597,6 +606,10 @@
   </v-row>
 </template>
 <script setup lang="ts">
+// Relative import, never Nuxt auto-import: this layer's `utils/` are auto-imported
+// into the consuming apps but not reliably into the layer's own components.
+import { readListPage } from "../utils/list-page";
+
 definePageMeta({
   middleware: ["01-auth", "02-org"],
   memberOnly: true,
@@ -736,6 +749,7 @@ const {
   data: getDocumentReq,
   refresh: getDocuments,
   status: getAllReqStatus,
+  error: getDocumentError,
 } = useLazyAsyncData(
   "get-all-documents",
   () =>
@@ -754,12 +768,16 @@ const {
 
 const loading = computed(() => getAllReqStatus.value === "pending");
 
+// The page totals are the server's count of the WHOLE list, read through the
+// one helper that knows how a paginated reply is shaped - never re-derived
+// from the rows on this page. Applied unconditionally so that when a request
+// fails the reply goes null and the header falls back to the placeholder,
+// instead of leaving the previous page's total on screen as if it still held.
 watchEffect(() => {
-  if (getDocumentReq.value) {
-    items.value = getDocumentReq.value.items;
-    pages.value = getDocumentReq.value.pages;
-    pageRange.value = getDocumentReq.value.pageRange;
-  }
+  const listPage = readListPage<Record<string, any>>(getDocumentReq.value);
+  items.value = listPage.items;
+  pages.value = listPage.pages;
+  pageRange.value = listPage.pageRange;
 });
 
 function formatDate(value?: string | null) {

package/components/ManageChecklistMain.vue

@@ -29,6 +29,15 @@
         :show-header="true"
         @refresh="getUnitCleanerChecklistRefresh"
       >
+        <!--
+          A failed request is not a schedule with no checklist. Without this the
+          table drew its neutral "No checklist found" for a 500, which reads as
+          "nothing is scheduled here" - a statement the server never made.
+        -->
+        <template v-if="getUnitCleanerChecklistError" #no-data>
+          <DashboardEmptyState error />
+        </template>
+
         <!-- Status icon driven by local activeActions state -->
         <template #item-prepend="{ item, group }">
           <!--
@@ -441,6 +450,7 @@
 </template>
 
 <script setup lang="ts">
+import { readListPage } from "../utils/list-page";
 import useCleaningSchedules from "../composables/useCleaningSchedules";
 import useCustomerSite from "../composables/useCustomerSite";
 import useFile from "../composables/useFile";
@@ -651,6 +661,7 @@ const {
   data: getUnitCleanerChecklistReq,
   refresh: getUnitCleanerChecklistRefresh,
   pending: loading,
+  error: getUnitCleanerChecklistError,
 } = await useLazyAsyncData(
   `get-all-unit-cleaner-checklist`,
   () =>
@@ -675,13 +686,20 @@ watchEffect(() => {
   }
 });
 
+// The page totals are the server's count of the WHOLE list, read through the
+// one helper that knows how a paginated reply is shaped - never re-derived
+// from the rows on this page. Applied unconditionally so that when a request
+// fails the reply goes null and the header falls back to the placeholder,
+// instead of leaving the previous page's total on screen as if it still held.
+// `page` still only moves when the server states it, so a failed request does
+// not knock the reader back to page 1.
 watchEffect(() => {
-  if (getUnitCleanerChecklistReq.value) {
-    items.value = getUnitCleanerChecklistReq.value.items;
+  const listPage = readListPage<TChecklistSet>(getUnitCleanerChecklistReq.value);
+  items.value = listPage.items;
+  if (getUnitCleanerChecklistReq.value?.page)
     page.value = getUnitCleanerChecklistReq.value.page;
-    pages.value = getUnitCleanerChecklistReq.value.pages;
-    pageRange.value = getUnitCleanerChecklistReq.value.pageRange;
-  }
+  pages.value = listPage.pages;
+  pageRange.value = listPage.pageRange;
 });
 
 watchEffect(() => {

package/components/TableHygiene.vue

@@ -62,8 +62,15 @@
           class="overflow-y-auto"
         >
           <div v-if="groupedItems.length === 0" class="table-card__empty">
-            <v-icon icon="mdi-magnify-close" size="32" />
-            <span>{{ noDataText }}</span>
+            <!--
+              The empty block was hard-coded, so a caller had no way to say
+              "this is not empty, the request failed" - every 500 rendered as
+              the neutral "nothing here". The default is unchanged.
+            -->
+            <slot name="no-data">
+              <v-icon icon="mdi-magnify-close" size="32" />
+              <span>{{ noDataText }}</span>
+            </slot>
           </div>
 
           <template

package/components/TableListSecondary.vue

@@ -96,6 +96,16 @@
             </td>
           </tr>
         </template>
+
+        <!--
+          Forwarded so a caller can say "this is not empty, the request
+          failed". Without it every 500 rendered as the table's neutral
+          "No data available". Vuetify's own default is unchanged when the
+          caller passes nothing.
+        -->
+        <template v-if="$slots['no-data']" #no-data>
+          <slot name="no-data" />
+        </template>
       </v-data-table>
     </AppCard>
   </div>

package/components/WorkOrder/ListView.vue

@@ -13,6 +13,15 @@
     @click:create="emit('click:create')"
     :length="pages"
   >
+    <!--
+      A failed request is not a site with no work orders. Without this the
+      table drew its neutral "No data available" for a 500, which reads as
+      "there is nothing outstanding" - a statement the server never made.
+    -->
+    <template v-if="failed" #no-data>
+      <DashboardEmptyState error />
+    </template>
+
     <template #title>
       <span class="screen-card-title">Work Order</span>
     </template>
@@ -52,6 +61,8 @@
 </template>
 
 <script lang="ts" setup>
+import { readListPage, NO_PAGE_RANGE } from "../../utils/list-page";
+
 const emit = defineEmits(["click:create", "update:pagination"]);
 
 const { page, pages, pageRange, workOrders, getWorkOrders } = useWorkOrder();
@@ -61,6 +72,7 @@ const message = ref("");
 const messageColor = ref("");
 const messageSnackbar = ref(false);
 const loading = ref(false);
+const failed = ref(false);
 const height = ref("500px");
 const selected = ref<string[]>([]);
 
@@ -72,20 +84,40 @@ const headers = ref([
   { title: "Date", value: "createdAt" },
 ]);
 
+// `getWorkOrders` RETURNS the reply; nothing was ever reading it. `workOrders`,
+// `pages` and `pageRange` are `useState` cells that no code in this layer or in
+// any of the eleven apps ever assigned, so this table drew zero rows and
+// "-- - -- of --" no matter what the server sent. The reply is now bound
+// through the one helper that knows how a paginated reply is shaped, so the
+// count on screen is the server's count of the whole list - never the number
+// of rows on this page.
 async function _getWorkOrders() {
   loading.value = true;
+  failed.value = false;
 
   try {
-    await getWorkOrders({
-      page: page.value,
-    });
+    const listPage = readListPage<TWorkOrder>(
+      await getWorkOrders({
+        page: page.value,
+      })
+    );
+    workOrders.value = listPage.items;
+    pages.value = listPage.pages;
+    pageRange.value = listPage.pageRange;
 
     emit("update:pagination", {
       page: page.value,
       pages: pages.value,
     });
   } catch (error) {
-    console.error("Error fetching feedbacks:", error);
+    // Say the request failed rather than presenting it as an empty list. The
+    // count goes back to the placeholder for the same reason: a failure is not
+    // a zero.
+    failed.value = true;
+    workOrders.value = [];
+    pages.value = 0;
+    pageRange.value = NO_PAGE_RANGE;
+    console.error("Error fetching work orders:", error);
   } finally {
     loading.value = false;
   }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.192",
+  "version": "3.2.2-staging.194",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",

package/utils/data.test.ts

@@ -1,7 +1,7 @@
 import assert from "node:assert/strict";
 import { test } from "node:test";
 
-import { findServiceProviderIdBySite } from "./data.ts";
+import { findServiceProviderIdBySite, levelCount } from "./data.ts";
 
 const SITE = "68f05fcc0c11062938dadada";
 const OTHER_SITE = "68f05fcc0c11062938d00001";
@@ -70,3 +70,26 @@ test("an account with no provider list still gets the sentence, not a TypeError"
     (error: any) => error.constructor === Error && !/undefined/.test(error.message)
   );
 });
+
+/**
+ * A block whose record carries no `levels` array used to throw during render
+ * (`Cannot read properties of undefined (reading 'length')`), which blanks the
+ * entire blocks table - not just the offending row.
+ */
+test("a block with no levels field counts as zero instead of throwing", () => {
+  assert.equal(levelCount({ levels: undefined }), 0);
+  assert.equal(levelCount({}), 0);
+  assert.equal(levelCount(undefined), 0);
+  assert.equal(levelCount(null), 0);
+});
+
+test("a block with no levels field is not confused with a block that has none", () => {
+  assert.equal(levelCount({ levels: [] }), 0);
+  assert.equal(levelCount({ levels: [{ name: "1" }, { name: "2" }] }), 2);
+});
+
+test("a non-array levels value is counted as zero, not as its own length", () => {
+  // The API has been seen to answer with a count rather than the array.
+  assert.equal(levelCount({ levels: 7 as unknown as [] }), 0);
+  assert.equal(levelCount({ levels: "12" as unknown as [] }), 0);
+});

package/utils/data.ts

@@ -160,3 +160,18 @@ export const generateRefNumber = () => {
   const ref = (timestamp + random).substring(0, 10).toUpperCase();
   return ref;
 };
+
+/**
+ * HOW MANY LEVELS A BLOCK HAS.
+ *
+ * `levels` is optional on a building record - a block created before levels
+ * were captured, or one the list endpoint returns without them, simply has no
+ * such field. Two screens read `building.levels.length` directly, which throws
+ * a TypeError DURING RENDER: Vue tears the component down and the whole blocks
+ * table disappears, so one incomplete row blanks every other row with it.
+ *
+ * Counting in one place means both screens - and anything added later - answer
+ * "no levels recorded" with a zero instead of taking the table down.
+ */
+export const levelCount = (building?: { levels?: unknown } | null): number =>
+  Array.isArray(building?.levels) ? building.levels.length : 0;

package/utils/list-page.test.ts

@@ -0,0 +1,60 @@
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import { readListPage, NO_PAGE_RANGE } from "./list-page.ts";
+
+const rows = (n: number, from = 1) =>
+    Array.from({ length: n }, (_, i) => ({ _id: `row-${from + i}` }));
+
+describe("readListPage", () => {
+    it("keeps the server's total when it is bigger than the page - the failing case", () => {
+        // 47 announcements served 10 at a time. Deriving from the page gives
+        // "10" and one page, which is the defect this replaces.
+        const got = readListPage({ items: rows(10), pages: 5, pageRange: "1-10 of 47" });
+
+        assert.equal(got.items.length, 10);
+        assert.equal(got.pages, 5);
+        assert.equal(got.pageRange, "1-10 of 47");
+    });
+
+    it("keeps the server's page 2 range rather than re-slicing", () => {
+        const got = readListPage({ items: rows(10, 11), pages: 5, pageRange: "11-20 of 47" });
+
+        assert.equal(got.items.length, 10);
+        assert.equal(got.items[0]._id, "row-11");
+        assert.equal(got.pageRange, "11-20 of 47");
+    });
+
+    it("passes a single page through unchanged", () => {
+        const got = readListPage({ items: rows(7), pages: 1, pageRange: "1-7 of 7" });
+
+        assert.deepEqual(
+            { pages: got.pages, pageRange: got.pageRange, n: got.items.length },
+            { pages: 1, pageRange: "1-7 of 7", n: 7 }
+        );
+    });
+
+    it("reports a genuinely empty list as the server described it", () => {
+        const got = readListPage({ items: [], pages: 0, pageRange: "0 - 0 of 0" });
+
+        assert.deepEqual(got, { items: [], pages: 0, pageRange: "0 - 0 of 0" });
+    });
+
+    it("does not invent a zero when the request failed and there is no reply", () => {
+        for (const reply of [null, undefined]) {
+            const got = readListPage(reply);
+
+            assert.deepEqual(got.items, []);
+            assert.equal(got.pages, 0);
+            // "0 of 0" would be a statement about the data. This is not one.
+            assert.equal(got.pageRange, NO_PAGE_RANGE);
+        }
+    });
+
+    it("does not fall back to the page length when the envelope omits its totals", () => {
+        const got = readListPage({ items: rows(10) });
+
+        assert.equal(got.pages, 0);
+        assert.equal(got.pageRange, NO_PAGE_RANGE);
+        assert.notEqual(got.pageRange, "1-10 of 10");
+    });
+});

package/utils/list-page.ts

@@ -0,0 +1,38 @@
+/**
+ * READING A PAGINATED LIST REPLY.
+ *
+ * Every paginated endpoint in this product answers with an envelope: the rows
+ * for the page that was asked for, plus `pages` and `pageRange` describing the
+ * WHOLE list. Screens kept re-deriving those two from the rows they had just
+ * been handed - `items.length` is the size of one page, not the size of the
+ * list - so a list of 47 announcements presented itself as 10 and its pager
+ * was told there was one page.
+ *
+ * This is the one place that reads the envelope, so the rule is stated once:
+ * take the server's own totals, and when the reply is missing (a failed
+ * request) say so with a placeholder rather than inventing a zero.
+ */
+
+export const NO_PAGE_RANGE = "-- - -- of --";
+
+export type TListPageReply<T> = {
+    items?: T[] | null;
+    pages?: number | null;
+    pageRange?: string | null;
+} | null | undefined;
+
+export type TListPage<T> = {
+    items: T[];
+    pages: number;
+    pageRange: string;
+};
+
+export function readListPage<T>(reply: TListPageReply<T>): TListPage<T> {
+    return {
+        items: reply?.items ?? [],
+        // The server's page COUNT for the whole list. Never ceil(items/limit).
+        pages: reply?.pages ?? 0,
+        // The server's own "1-10 of 47" string. Never rebuilt from the page.
+        pageRange: reply?.pageRange || NO_PAGE_RANGE,
+    };
+}

package/components/ScheduleTastTicketMain.vue

@@ -1,157 +0,0 @@
-<template>
-  <v-row no-gutters align="center" justify="center">
-    <v-col cols="12" lg="10">
-      <TableMain
-        :title="'Schedule Tasks'"
-        :items="items"
-        :headers="headers"
-        :loading="loading"
-        :show-header="true"
-        v-model:page="page"
-        :pages="pages"
-        :pageRange="pageRange"
-        :no-data-text="'No Schedule Tasks found'"
-        @row-click="onRowClick"
-      >
-        <template #item.task="{ item }">
-          {{ item.task || "N/A" }}
-        </template>
-
-        <template #item.createdAt="{ value }">
-          {{
-            formatDate
-              ? formatDate(value)
-              : value
-              ? new Date(value).toLocaleDateString()
-              : ""
-          }}
-        </template>
-
-        <template #item.area="{ value }">
-          {{ value || "N/A" }}
-        </template>
-
-        <template #item.createdBy="{ item }">
-          <!--
-            THE 3.12:1 `HS` CHIP.
-
-            This was a hand-rolled copy of `AvatarMain` with two problems: its
-            fill was Vuetify's MATERIAL `blue`/`purple`/`grey` (not a theme
-            token, so no `on-*` pair applied to it) and its `white--text` is
-            Vuetify 2 syntax that does nothing in Vuetify 3 - leaving Vuetify to
-            derive WHITE, which reads 3.12:1 on that blue in BOTH themes.
-            `AvatarMain` draws the same circle with the same initials and now
-            guarantees its label clears 4.5:1.
-          -->
-          <AvatarMain :name="item.createdBy" :size="32" class="mr-2" />
-          {{ item.createdBy || "N/A" }}
-        </template>
-
-        <template #item.cleaners="{ value }">
-          {{ value || "N/A" }}
-        </template>
-
-        <template #item.status="{ value }">
-          <StatusChip :status="value || 'To-Do'" :label="value || 'To-Do'" />
-        </template>
-        <!-- Completion Date/Time -->
-        <template #item.completionDate="{ value }">
-          {{ value ? formatDate(value) : "N/A" }}
-        </template>
-        <!-- Action (Accept button) -->
-        <template #item.action="{ item }">
-          <v-btn
-            variant="outlined"
-            class="text-none screen-btn-ghost"
-            @click.stop="acceptTask(item)"
-          >
-            Accept
-          </v-btn>
-        </template>
-      </TableMain>
-
-      <!-- Accept Confirmation Dialog -->
-      <AcceptDialog
-        :model-value="showAcceptDialog"
-        title="Accept Scheduled Task"
-        message="Are you sure you want to Accept this Scheduled Task?"
-        @confirm="confirmAccept"
-        @cancel="showAcceptDialog = false"
-      />
-
-      <!-- ScheduleTaskForm Dialog -->
-      <ScheduleTaskForm v-model:show="showForm" />
-    </v-col>
-  </v-row>
-</template>
-
-<script lang="ts" setup>
-const props = defineProps({
-  orgId: { type: String, required: true },
-  site: { type: String, required: true },
-  type: { type: String, required: true },
-});
-const loading = ref(false);
-const page = ref(1);
-const pages = ref(1);
-const pageRange = ref("1-3 of 3");
-const showForm = ref(false);
-
-const showAcceptDialog = ref(false);
-const selectedTask = ref(null);
-
-const items = ref([
-  {
-    _id: "1",
-    task: "Clean Windows",
-    createdAt: "2025-10-28T10:00:00Z",
-    area: "",
-    createdBy: "Demo Smith",
-    cleaners: "N/A",
-    status: "To-Do",
-    completionDate: "2025-10-28T10:00:00Z",
-  },
-  {
-    _id: "2",
-    task: "Clean The 3",
-    createdAt: "2025-10-28T10:00:00Z",
-    area: "",
-    createdBy: "Hygiene SP",
-    cleaners: "N/A",
-    status: "To-Do",
-    completionDate: "2025-10-28T10:00:00Z",
-  },
-]);
-
-const headers = [
-  { title: "Task", value: "task" },
-  { title: "Date Created", value: "createdAt" },
-  { title: "Area", value: "area" },
-  { title: "Created By", value: "createdBy" },
-  { title: "Cleaners", value: "cleaners" },
-  { title: "Status", value: "status" },
-  { title: "Completion Date/Time", value: "completionDate" },
-  { title: "Action", value: "action" },
-];
-
-const { formatDate } = useUtils();
-
-function acceptTask(item: any) {
-  selectedTask.value = item;
-  showAcceptDialog.value = true;
-}
-function confirmAccept() {
-  // Handle accept logic here (e.g., update status, API call)
-  showAcceptDialog.value = false;
-}
-function onRowClick(data: any) {
-  const item = data?.item ?? data;
-  const id = item?._id || item?.id;
-  if (id) {
-    const path = `/${props.orgId}/${props.site}/schedule-tasks-ticket/${id}`;
-    navigateTo(path);
-  } else {
-    console.warn("Row clicked but no id found to navigate:", item);
-  }
-}
-</script>