@7365admin1/layer-common 3.2.1-staging.75 → 3.2.2-staging.100

package/components/BuildingManagement/buildings.vue

@@ -1,46 +1,35 @@
 <template>
   <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters>
-        <v-btn class="text-none" rounded="pill" variant="tonal" @click="setBuilding()" size="large"
-          v-if="canCreate && canCreateBuilding">
-          Add Block
-        </v-btn>
-      </v-row>
-    </v-col>
+    <!-- Title row; nav calls this screen "Blocks". The Add pill moves onto it. -->
     <v-col cols="12">
-      <v-card width="100%" variant="outlined" border="thin" rounded="lg" :loading="loading">
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #prepend>
-            <v-btn fab icon density="comfortable" @click="getBuildings()">
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-            <v-text-field v-model="searchInput" autocomplete="off" placeholder="Search" density="compact" hide-details
-              dense clearable class="mx-2" style="width: 200px;" />
-          </template>
-
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
-                {{ pageRange }}
-              </span>
-              <local-pagination v-model="page" :length="pages" @update:value="getBuildings()" />
-            </v-row>
-          </template>
-        </v-toolbar>
-
-        <v-data-table :headers="headers" :items="items" item-value="_id" items-per-page="20" fixed-header
-          hide-default-footer @click:row="tableRowClickHandler" style="max-height: calc(100vh - (200px))">
-          <template #item.createdAt="{ value }">
-            {{ new Date(value).toLocaleDateString() }}
-          </template>
-          <template #item.levels="{ item }">
-            {{ item.levels.length }}
-          </template>
-        </v-data-table>
-      </v-card>
+      <PageHeader title="Blocks">
+        <template #actions>
+          <AppButton v-if="canCreate && canCreateBuilding" icon="mdi-plus" @click="setBuilding()">
+            Add Block
+          </AppButton>
+        </template>
+      </PageHeader>
     </v-col>
 
+    <!--
+      Was `v-card` + a `grey-lighten-4` `v-toolbar` + a bare `v-data-table`.
+      `TableMain` draws the same card, the same refresh/search/page-range/pager
+      row and the same table - with the design's uppercase header row.
+    -->
+    <TableMain :headers="headers" :items="items" :loading="loading" :page="page" :pages="pages"
+      :pageRange="pageRange" show-header @refresh="getBuildings()"
+      @update:page="page = $event; getBuildings()" @row-click="(data: any) => tableRowClickHandler(null, data)">
+      <template #prepend-additional>
+        <AppField v-model="searchInput" search compact placeholder="Search" klass="app-toolbar__search" />
+      </template>
+      <template #item.createdAt="{ value }">
+        {{ new Date(value).toLocaleDateString() }}
+      </template>
+      <template #item.levels="{ item }">
+        {{ item.levels.length }}
+      </template>
+    </TableMain>
+
     <!-- Create Dialog -->
     <v-dialog v-model="createDialog" width="450" persistent>
       <BuildingForm :site="site" mode="add" :blocks="items" @cancel="createDialog = false" @success="successCreate()"

package/components/BuildingManagement/units.vue

@@ -1,50 +1,34 @@
 <template>
   <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters>
-        <v-btn class="text-none" rounded="pill" variant="tonal" @click="setBuilding()" size="large"
-          v-if="canCreate && canCreateUnit">
-          Add Unit
-        </v-btn>
-        <v-btn class="text-none ml-2" rounded="pill" variant="tonal" @click="openBulkUploadFilePicker()" size="large"
-          :loading="bulkUploadLoading" v-if="canCreate && canCreateUnit">
-          <v-icon start>mdi-upload</v-icon>
-          Bulk Upload
-        </v-btn>
-        <input ref="bulkUploadFileInput" type="file" accept=".xlsx,.xls,.csv" class="d-none"
-          @change="handleBulkUploadFileChange" />
-      </v-row>
-    </v-col>
+    <!-- Title row; nav calls this screen "Units". Both pills move onto it. -->
     <v-col cols="12">
-      <v-card width="100%" variant="outlined" border="thin" rounded="lg" :loading="loading">
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #prepend>
-            <v-btn fab icon density="comfortable" @click="getBuildingUnit()">
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-            <v-text-field v-model="searchInput" placeholder="Search" density="compact" hide-details dense clearable
-              class="mx-2" style="width: 200px;" />
-          </template>
-
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
-                {{ pageRange }}
-              </span>
-              <local-pagination v-model="page" :length="pages" @update:value="getBuildingUnit()" />
-            </v-row>
-          </template>
-        </v-toolbar>
-
-        <v-data-table :headers="props.headers" :items="items" item-value="_id" items-per-page="20" fixed-header
-          hide-default-footer @click:row="tableRowClickHandler" style="max-height: calc(100vh - (200px))">
-          <template #item.block="{ value, item }">
-            {{ value ? `Block ${value}` : "" }}
-          </template>
-        </v-data-table>
-      </v-card>
+      <PageHeader title="Units">
+        <template #actions>
+          <AppButton v-if="canCreate && canCreateUnit" variant="ghost" icon="mdi-upload"
+            :disabled="bulkUploadLoading" @click="openBulkUploadFilePicker()">
+            Bulk Upload
+          </AppButton>
+          <AppButton v-if="canCreate && canCreateUnit" icon="mdi-plus" @click="setBuilding()">
+            Add Unit
+          </AppButton>
+        </template>
+      </PageHeader>
+      <input ref="bulkUploadFileInput" type="file" accept=".xlsx,.xls,.csv" class="d-none"
+        @change="handleBulkUploadFileChange" />
     </v-col>
 
+    <!-- Was `v-card` + a `grey-lighten-4` `v-toolbar` + a bare `v-data-table`. -->
+    <TableMain :headers="props.headers" :items="items" :loading="loading" :page="page" :pages="pages"
+      :pageRange="pageRange" show-header @refresh="getBuildingUnit()"
+      @update:page="page = $event; getBuildingUnit()" @row-click="(data: any) => tableRowClickHandler(null, data)">
+      <template #prepend-additional>
+        <AppField v-model="searchInput" search compact placeholder="Search" klass="app-toolbar__search" />
+      </template>
+      <template #item.block="{ value, item }">
+        {{ value ? `Block ${value}` : "" }}
+      </template>
+    </TableMain>
+
     <!-- Create Dialog -->
     <v-dialog v-model="createDialog" :width="smAndUp ? '50svw' : '100%'" persistent>
       <BuildingUnitFormAdd :site="site" @cancel="createDialog = false" @success="successCreate()"

package/components/BulletinBoardManagement.vue

@@ -1,17 +1,30 @@
 <template>
     <v-row no-gutters>
+        <!-- Title left, primary action right - the design's opening row. -->
+        <v-col cols="12">
+            <PageHeader title="Bulletin Board">
+                <template #actions>
+                    <AppButton v-if="canCreateBulletinBoard" icon="mdi-plus" @click="handleCreateEvent">
+                        Add Announcement
+                    </AppButton>
+                </template>
+            </PageHeader>
+        </v-col>
+
         <TableMain :headers="headers" :items="paginatePlaceholderItem" 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"
-            @create="handleCreateEvent" :can-create="canCreateBulletinBoard" create-label="Add Announcement">
-            <template #extension>
-                <v-row no-gutters class="w-100 d-flex flex-column">
-                    <v-tabs v-model="status" color="primary" :height="40" @update:model-value="toRoute" class="w-100">
-                        <v-tab v-for="tab in tabOptions" :value="tab.status" :key="tab.status" class="text-capitalize">
-                            {{ tab.name }}
-                        </v-tab>
-                    </v-tabs>
-                </v-row>
+            @refresh="getAnnouncementsRefresh" :show-header="APP_CONSTANTS.RESIDENT === props.recipients" @update:page="handleUpdatePage" @row-click="handleRowClick">
+            <!--
+                The tabs move ONTO the toolbar row (the design draws them there)
+                instead of a stacked strip above the table. Same options, same
+                order, same `toRoute` - which already sets the status itself.
+            -->
+            <template #tabs>
+                <button v-for="tab in tabOptions" :key="tab.status" type="button" role="tab" class="app-tab"
+                    :class="{ 'app-tab--active': status === tab.status }" :aria-selected="status === tab.status"
+                    @click="status = tab.status as any; toRoute(tab.status)">
+                    {{ tab.name }}
+                </button>
             </template>
 
             <template v-slot:item.createdAt="{ item }">

package/components/CardToolbar.vue

@@ -0,0 +1,37 @@
+<!--
+  THE IN-CARD TOP ROW.
+
+  The design does NOT put a screen's tabs above its card - they are the card's
+  own first row, with the pagination on the opposite end of that same line, and
+  the tab underline meets the card's rule. Today those tabs sit in a
+  `v-toolbar`'s extension slot, which stacks them BELOW a separate bar and
+  costs a whole row of height.
+
+  Two shapes, both from the handoff: with tabs (`0 20px`, the tabs supply the
+  vertical padding) and without (`10px 14px`, a refresh button on the left).
+  This component only places things - the tabs, the count and the pager are
+  passed in and keep their own behaviour.
+-->
+<template>
+  <div class="app-toolbar" :class="{ 'app-toolbar--plain': !$slots.tabs }">
+    <div v-if="$slots.tabs" class="app-tabs" role="tablist">
+      <slot name="tabs" />
+    </div>
+
+    <slot name="left" />
+
+    <div class="app-toolbar__spacer" />
+
+    <div class="app-toolbar__right">
+      <span v-if="count" class="app-toolbar__count">{{ count }}</span>
+      <slot name="right" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  /** The design's `1-1 of 1` range, printed as the screen already computes it. */
+  count: { type: String, default: "" },
+});
+</script>

package/components/CleaningScheduleMain.vue

@@ -17,11 +17,7 @@
       >
         <template #extension>
           <v-row no-gutters class="w-100 d-flex flex-column">
-            <v-card
-              class="w-100 px-3 d-flex align-center ga-5 py-2"
-              flat
-              :height="60"
-            >
+            <div class="filter-bar">
               <InputDateTimePicker
                 v-model:utc="startDate"
                 density="compact"
@@ -47,7 +43,7 @@
                 item-value="value"
                 label="Status"
               />
-            </v-card>
+            </div>
           </v-row>
         </template>
 
@@ -60,25 +56,23 @@
               : ""
           }}
         </template>
+        <!--
+          A countdown, not a status word, so it passes the tone the screen has
+          already worked out from the time left rather than a word to map.
+        -->
         <template #item.closeIn="{ item }">
-          <v-chip
+          <StatusChip
             class="text-capitalize"
-            variant="flat"
-            :color="getCloseInColor(item._id)"
-            pill
-          >
-            {{ remainingTime[item._id] || "00h 00m" }}
-          </v-chip>
+            :tone="getCloseInTone(item._id)"
+            :label="remainingTime[item._id] || '00h 00m'"
+          />
         </template>
         <template #item.status="{ value }">
-          <v-chip
+          <StatusChip
             class="text-capitalize"
-            :color="getStatusColor(value)"
-            variant="flat"
-            pill
-          >
-            {{ value || "No Status" }}
-          </v-chip>
+            :status="value"
+            :label="value || 'No Status'"
+          />
         </template>
         <template #item.completedAt="{ value }">
           {{
@@ -159,33 +153,22 @@ const downloadingId = ref<string | null>(null);
 const { getCleaningSchedules, downloadChecklistPdf } = useCleaningSchedules();
 const { formatDate } = useUtils();
 
-const getStatusColor = (status: unknown): string => {
-  if (!status) return "grey";
-
-  const normalized = String(status).toLowerCase();
-
-  switch (normalized) {
-    case "open":
-      return "grey";
-    case "ongoing":
-      return "primary";
-    case "completed":
-    case "accepted":
-      return "success";
-    case "closed":
-    case "rejected":
-      return "error";
-    default:
-      return "secondary";
-  }
-};
-
-const getCloseInColor = (id: string): string => {
+/**
+ * The status word now picks its own colour, from the one shared mapping in
+ * `utils/status.ts` - which carries every word this screen used to switch on,
+ * with the tone it used to give it. The screen no longer keeps a private
+ * palette that only it agrees with.
+ *
+ * The countdown is not a status word, so the thresholds stay here; only the
+ * NAMES change, from Vuetify colours to the design's tones. Same three bands,
+ * same boundaries.
+ */
+const getCloseInTone = (id: string): "info" | "warn" | "err" => {
   const secs = remainingSeconds.value[id];
-  if (secs === undefined) return "primary";
-  if (secs <= 0) return "error";
-  if (secs < 3 * 3600) return "warning";
-  return "primary";
+  if (secs === undefined) return "info";
+  if (secs <= 0) return "err";
+  if (secs < 3 * 3600) return "warn";
+  return "info";
 };
 
 const canDownloadSchedule = computed(() => props.canDownloadSchedule);