@7365admin1/layer-common 3.2.7 → 3.2.8-staging.201

package/components/VisitorSearchResultSummary.vue

@@ -1,27 +1,48 @@
+<!--
+  The summary a visitor search draws under its result. Every one of the four
+  cells was `text-subtitle-1` - Vuetify's 16px/400 Roboto - so the LABEL that
+  names a value ("Name:", "NRIC:") was drawn at exactly the same size, weight
+  and ink as the value itself, and neither was the product font.
+
+  DESIGN GAP, STATED: the handoff draws no visitor-search panel. What it does
+  draw is a label sitting next to the value it names, at
+  `iService365 Redesign.dc.html:659` - `color:var(--muted);font-size:12.5px` -
+  inside a row whose own type is 13.5px/600 with the name at 700 (line 658).
+  Those are the values below: a muted 12.5px label over a 13.5px/700 value, the
+  same label-quieter-than-value relationship `ListItem.vue` already uses.
+
+  The trailing colons are dropped: the design separates a label from its value
+  by weight and ink, not by punctuation.
+-->
 <template>
   <div class="w-100 py-2">
-    <div class="d-flex align-center mb-3 justify-space-between ga-4 w-100">
-      <span class="text-subtitle-1" style="min-width: 50%">
-        <div>Name:</div>
-        <div>{{ displayName }}</div>
-      </span>
-      <span class="text-subtitle-1" style="min-width: 50%">
-        <div>NRIC:</div>
-        <div>{{ item?.nric || "N/A" }}</div>
-      </span>
+    <div class="d-flex flex-wrap align-center mb-3 justify-space-between ga-4 w-100">
+      <!-- These were `<span>` wrappers with `<div>` children - a block inside
+           an inline element, which the parser closes early. Now both are
+           blocks, which is also what makes the 50% min-width behave. -->
+      <div class="visitor-summary__cell">
+        <div class="visitor-summary__label">Name</div>
+        <div class="visitor-summary__value">{{ displayName }}</div>
+      </div>
+      <div class="visitor-summary__cell">
+        <div class="visitor-summary__label">NRIC</div>
+        <div class="visitor-summary__value">{{ item?.nric || "N/A" }}</div>
+      </div>
     </div>
 
     <div
       v-if="contacts.length < 2 && plateNumbers.length < 2"
-      class="d-flex align-center justify-space-between ga-4 w-100"
+      class="d-flex flex-wrap align-center justify-space-between ga-4 w-100"
     >
-      <div class="text-subtitle-1" style="min-width: 50%">
-        <div>Contact:</div>
-        <div>{{ contacts[0] || "N/A" }}</div>
+      <div class="visitor-summary__cell">
+        <div class="visitor-summary__label">Contact</div>
+        <div class="visitor-summary__value">{{ contacts[0] || "N/A" }}</div>
       </div>
-      <div class="text-subtitle-1" style="min-width: 50%">
-        <div>Plate:</div>
-        <div class="text-uppercase">{{ plateNumbers[0] || "N/A" }}</div>
+      <div class="visitor-summary__cell">
+        <div class="visitor-summary__label">Plate</div>
+        <div class="visitor-summary__value text-uppercase">
+          {{ plateNumbers[0] || "N/A" }}
+        </div>
       </div>
     </div>
   </div>
@@ -84,3 +105,26 @@ const plateNumbers = computed(() => {
   );
 });
 </script>
+
+<style scoped>
+.visitor-summary__cell {
+  min-width: 50%;
+}
+
+.visitor-summary__label {
+  font-family: var(--font-sans);
+  font-size: 12.5px;
+  font-weight: var(--fw-cell);
+  letter-spacing: 0;
+  color: var(--muted);
+  margin-bottom: 2px;
+}
+
+.visitor-summary__value {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-btn);
+  letter-spacing: 0;
+  color: var(--text);
+}
+</style>

package/components/VisitorSocketPopUp.vue

@@ -49,7 +49,7 @@
           v-if="snackBarMessage.isUnregistered"
           rounded="md"
           variant="text"
-          color="baseButton"
+          color="primary"
           class="text-truncate text-decoration-underline px-0"
           @click="goToUnregistered"
         >
@@ -90,19 +90,14 @@
     </v-snackbar>
 
     <v-dialog v-model="permanentMessageDialog.modal" max-width="480" persistent>
-      <v-card>
-        <v-card-title class="text-h6">Notice</v-card-title>
-        <v-card-text>{{ permanentMessageDialog.text }}</v-card-text>
-        <v-card-actions>
-          <v-spacer />
-          <v-btn
-            color="primary"
-            variant="elevated"
-            @click="permanentMessageDialog.modal = false"
-          >
-            Close
-          </v-btn>
-        </v-card-actions>
+      <v-card class="screen-modal socket-notice">
+        <v-card-title>Notice</v-card-title>
+        <div class="screen-modal__body socket-notice__body">
+          {{ permanentMessageDialog.text }}
+        </div>
+        <div class="socket-notice__footer">
+          <AppButton @click="permanentMessageDialog.modal = false">Close</AppButton>
+        </div>
       </v-card>
     </v-dialog>
   </div>
@@ -372,3 +367,16 @@ onUnmounted(() => {
 
 
 </script>
+
+<style scoped>
+.socket-notice__body {
+  padding: 4px 20px 0;
+  color: var(--text2);
+}
+
+.socket-notice__footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 16px 20px 20px;
+}
+</style>

package/components/VisitorsReportPreview.vue

@@ -1,22 +1,25 @@
 <template>
-    <v-card height="100%" width="100%" flat class="pa-2 pa-sm-5">
+    <AppCard class="pa-2 pa-sm-5">
         <v-row no-gutters>
             <v-col cols="12">
                 <v-row no-gutters class="d-flex ga-2 justify-space-between align-start mb-3 mb-sm-5 flex-wrap">
 
                     <div class="d-flex flex-column" style="min-width: 0;">
-                        <span class="text-subtitle-1 font-weight-bold" style="word-break: break-word;">Visitor
+                        <span class="screen-card-title" style="word-break: break-word;">Visitor
                             Management - Visitor ({{ items.length }} visitors)</span>
-                        <span style="font-size: clamp(11px, 1.1vw, 13px); word-break: break-word;">Date Range: {{
+                        <span class="report-meta" style="word-break: break-word;">Date Range: {{
                             formatDateDDMMYYYY(dateFrom) }} - {{ formatDateDDMMYYYY(dateTo) ?? "" }}</span>
-                        <span class="text-subtitle-1" style="word-break: break-word;">Site Name: {{ activeSiteName
+                        <span class="report-meta" style="word-break: break-word;">Site Name: {{ activeSiteName
                         }}</span>
                     </div>
 
                 </v-row>
-                <div style="overflow-x: auto; max-width: 100%;">
+                <!-- `text-black` forced every cell AND the empty-state line to
+                     literal black, which on the dark theme's card measured
+                     1.26:1. The table takes the theme's own ink now. -->
+                <div class="table-card" style="overflow-x: auto; max-width: 100%;">
                     <v-data-table :headers="headers" :items="items" show-header :items-per-page="100"
-                        hide-default-footer class="text-black" no-data-text="No entries to display">
+                        hide-default-footer no-data-text="No entries to display">
 
                         <template v-slot:item.typeCompany="{ item }">
                             <span class="d-flex align-center ga-2" style="flex-wrap: wrap;">
@@ -77,13 +80,13 @@
                         <template v-slot:item.checkInOutImage="{ item }">
                             <div class="d-flex flex-column ga-2">
                                 <div v-if="item?.snapshotEntryImage" class="d-flex flex-column">
-                                    <span class="text-caption font-weight-bold text-blue-darken-1">Check-In</span>
+                                    <span class="snapshot-label snapshot-label--in">Check-In</span>
                                     <v-img :src="getFileUrlAnpr(`${siteId}/${item.snapshotEntryImage}`)"
                                         style="max-width: clamp(60px, 10vw, 100px); max-height: clamp(60px, 10vw, 100px);"
                                         class="border" />
                                 </div>
                                 <div v-if="item?.snapshotExitImage" class="d-flex flex-column">
-                                    <span class="text-caption font-weight-bold text-red-darken-1">Check-Out</span>
+                                    <span class="snapshot-label snapshot-label--out">Check-Out</span>
                                     <v-img :src="getFileUrlAnpr(`${siteId}/${item.snapshotExitImage}`)"
                                         style="max-width: clamp(60px, 10vw, 100px); max-height: clamp(60px, 10vw, 100px);"
                                         class="border" />
@@ -101,7 +104,7 @@
             </v-col>
 
         </v-row>
-    </v-card>
+    </AppCard>
 </template>
 
 <script setup lang="ts">
@@ -311,44 +314,56 @@ onMounted(() => {
     box-sizing: border-box;
 }
 
-:deep(.v-card) {
-    overflow-x: auto;
+/* The handoff names no type for a report's meta lines or a snapshot caption,
+   so both take the design's own secondary sizes. The captions were
+   `text-blue-darken-1` / `text-red-darken-1` - fixed Vuetify hues that do not
+   follow the theme. */
+.report-meta {
+    font-family: var(--font-sans);
+    font-size: var(--fs-breadcrumb);
+    color: var(--text2);
 }
 
-:deep(.v-data-table-header__content) {
-    background-color: #1976d2 !important;
-    color: white !important;
-    font-weight: bold;
+.snapshot-label {
+    font-family: var(--font-sans);
+    font-size: var(--fs-chip);
+    font-weight: var(--fw-chip);
 }
 
-:deep(.v-data-table thead tr th) {
-    background-color: #1976d2 !important;
-    color: white !important;
-    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
-    font-size: clamp(11px, 1.2vw, 14px) !important;
-    padding: clamp(8px, 1vw, 12px) !important;
-    word-break: break-word;
+.snapshot-label--in {
+    color: var(--info);
 }
 
-:deep(.v-data-table thead tr th:last-child) {
-    border-right: none !important;
+.snapshot-label--out {
+    /* Was `var(--error)`, which is not a token here - the name is `--err`. An
+       undefined custom property invalidates the declaration silently, so the
+       label inherited instead of turning red. */
+    color: var(--err);
+}
+
+:deep(.v-card) {
+    overflow-x: auto;
 }
 
+/* The header row was a fixed `#1976d2` fill with white labels and the cell
+   rules were a fixed `#e0e0e0`, none of which follows the theme and none of
+   which is in the handoff - the design's table head is 11px/800 uppercase in
+   `--muted` on `--thead`. Deleted so the shared `.table-card` rule applies;
+   only the column rule this report actually needs is kept, on `--border`. */
+:deep(.v-data-table thead tr th),
 :deep(.v-data-table tbody tr td) {
-    border-right: 1px solid #e0e0e0 !important;
-    font-size: clamp(10px, 1.1vw, 13px) !important;
-    padding: clamp(6px, 0.8vw, 10px) !important;
+    border-right: 1px solid var(--border) !important;
     word-break: break-word;
-    word-wrap: break-word;
     overflow-wrap: break-word;
 }
 
+:deep(.v-data-table thead tr th:last-child),
 :deep(.v-data-table tbody tr td:last-child) {
     border-right: none !important;
 }
 
 :deep(.v-data-table tbody tr:last-child td) {
-    border-bottom: 1px solid #e0e0e0 !important;
+    border-bottom: 1px solid var(--border) !important;
 }
 
 :deep(.v-img) {

package/components/WorkOrder/Create.vue

@@ -1,7 +1,7 @@
 <template>
   <FormDialog v-model="dialog" @close="closeDialog">
     <template #title>
-      <span class="text-h6 font-weight-medium pt-1 text-capitalize">
+      <span class="screen-card-title pt-1 text-capitalize">
         {{ isEditMode ? "Edit Work Order" : "Create Work Order" }}
       </span>
     </template>
@@ -24,8 +24,7 @@
       item-props
       label="Subject"
       variant="outlined"
-      density="compact"
-      class="mb-2"
+      class="filter-field mb-2"
       :clearable="
         props.createdFrom === 'feedback' && workOrder.subject !== ''
           ? false
@@ -39,7 +38,7 @@
       :custom-filter="customFilter"
       :rules="[requiredRule]"
     >
-      <template #label> Subject <span class="text-red">*</span> </template>
+      <template #label> Subject <span class="form-required">*</span> </template>
     </v-autocomplete>
 
     <v-autocomplete
@@ -50,8 +49,7 @@
       item-props
       label="Category"
       variant="outlined"
-      density="compact"
-      class="mb-2"
+      class="filter-field mb-2"
       :clearable="
         props.createdFrom === 'feedback' && workOrder.category !== ''
           ? false
@@ -64,12 +62,12 @@
       "
       :rules="[requiredRule]"
     >
-      <template #label> Category <span class="text-red">*</span> </template>
+      <template #label> Category <span class="form-required">*</span> </template>
     </v-autocomplete>
 
     <v-checkbox v-model="workOrder.highPriority" density="compact" class="ma-0">
       <template #label>
-        <span class="text-caption">
+        <span class="form-check-label">
           Set work order as High Priority (Optional)
         </span>
       </template>
@@ -98,14 +96,13 @@
     <v-autocomplete
       label="Unit"
       variant="outlined"
-      density="compact"
+      class="filter-field mt-1"
       v-model="workOrder.unit"
       :items="units"
-      class="mt-1"
       clearable
       :rules="[requiredRule]"
     >
-      <template #label> Unit <span class="text-red">*</span> </template>
+      <template #label> Unit <span class="form-required">*</span> </template>
     </v-autocomplete>
 
     <!-- <v-text-field
@@ -125,23 +122,21 @@
     <v-textarea
       label="Work Order Description"
       variant="outlined"
-      density="compact"
+      class="filter-field mt-1"
       v-model="workOrder.description"
-      class="mt-1"
       rows="4"
       clearable
       auto-grow
       :rules="[requiredRule]"
     >
-      <template #label> Description <span class="text-red">*</span> </template>
+      <template #label> Description <span class="form-required">*</span> </template>
     </v-textarea>
 
     <template #footer>
       <v-btn
-        color="primary-button"
-        class="text-capitalize mb-4"
+        class="screen-btn-primary mb-4"
+        variant="flat"
         block
-        height="40"
         :loading="loading"
         :disabled="loading || !isFormValid"
         @click="submitWorkOrder"
@@ -282,3 +277,17 @@ const customFilter = (value: string, query: string, item: any) => {
   return title.includes(search) || subtitle.includes(search);
 };
 </script>
+
+<style scoped>
+/* The required star was `text-red`, a Vuetify palette word rather than the
+   design's error token. */
+.form-required {
+  color: var(--err);
+}
+
+.form-check-label {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--text);
+}
+</style>

package/components/WorkOrder/ListView.vue

@@ -13,14 +13,22 @@
     @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="text-h6 font-weight-regular">Work Order</span>
+      <span class="screen-card-title">Work Order</span>
     </template>
     <template #action-button>
       <v-btn
-        color="primary-button"
         variant="flat"
-        class="ml-4 text-capitalize"
+        class="screen-btn-primary ml-4"
         @click="emit('click:create')"
       >
         Work Order
@@ -53,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();
@@ -62,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[]>([]);
 
@@ -73,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/components/WorkOrder/Main.vue

@@ -1,58 +1,47 @@
 <template>
-  <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters align="center" justify="space-between">
-        <v-btn
-          class="text-none text-capitalize"
-          rounded="pill"
-          variant="tonal"
-          size="large"
-          @click="(showCreateDialog = true), (isEditMode = false)"
-          v-if="canCreateWorkOrder"
-        >
+  <div>
+    <!--
+      The design's page scaffold. The screen had no heading, its Create button
+      sat top-left and the search floated top-right outside the card, with
+      refresh and the pager stacked on their own bar above the table. Same
+      button, same dialog, same permission, same debounced search, same pager.
+    -->
+    <PageHeader title="Work Orders">
+      <template v-if="canCreateWorkOrder" #actions>
+        <AppButton @click="(showCreateDialog = true), (isEditMode = false)">
           Create Work Order
-        </v-btn>
-
-        <v-text-field
-          v-model="searchText"
-          placeholder="Search work order..."
-          variant="outlined"
-          density="comfortable"
-          clearable
-          hide-details
-          class="ml-2"
-          style="max-width: 250px"
-        />
-      </v-row>
-    </v-col>
+        </AppButton>
+      </template>
+    </PageHeader>
+
+    <v-row no-gutters>
     <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="updatePage(1)">
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
+      <AppCard class="table-card">
+        <CardToolbar :count="pageRange">
+          <template #left>
+            <AppButton
+              variant="icon"
+              icon="mdi-refresh"
+              aria-label="Refresh"
+              @click="updatePage(1)"
+            />
           </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="updatePage"
-              />
-            </v-row>
+          <template #right>
+            <AppField
+              v-model="searchText"
+              search
+              compact
+              placeholder="Search work order..."
+              klass="app-toolbar__search"
+            />
+            <local-pagination
+              v-model="page"
+              :length="pages"
+              @update:value="updatePage"
+            />
           </template>
-        </v-toolbar>
+        </CardToolbar>
 
         <v-data-table
           :headers="headers"
@@ -62,6 +51,7 @@
           fixed-header
           hide-default-footer
           :hide-default-header="false"
+          :loading="loading"
           @click:row="tableRowClickHandler"
           style="max-height: calc(100vh - (200px))"
         >
@@ -69,9 +59,10 @@
             {{ formatDateDDMMYYYYLocal(item.createdAt) }}
           </template>
         </v-data-table>
-      </v-card>
+      </AppCard>
     </v-col>
-  </v-row>
+    </v-row>
+  </div>
 
   <WorkOrderCreate
     v-model="showCreateDialog"
@@ -217,6 +208,9 @@
 
 <script setup lang="ts">
 import { useTheme } from "vuetify";
+// 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 { pickRouteName } from "../../utils/route-name";
 const emit = defineEmits(["click:create", "update:pagination"]);
 
 const props = defineProps({
@@ -372,14 +366,23 @@ function handleRowClick(row: any) {
   const org = useRoute().params.org || "defaultOrg";
   const site = useRoute().params.site || "defaultSite";
   const id = row._id;
-  useRouter().push({
-    name: "work-order-details",
-    params: {
-      org,
-      site,
-      id,
-    },
-  });
+  // `work-order-details` is not a route in any consuming app; the detail screen
+  // is `pages/[org]/[site]/work-orders/[id].vue` -> `org-site-work-orders-id`.
+  const details = pickRouteName(
+    useRouter(),
+    "org-site-work-orders-id",
+    "work-orders-id"
+  );
+  if (details) {
+    useRouter().push({
+      name: details,
+      params: {
+        org,
+        site,
+        id,
+      },
+    });
+  }
 }
 
 function resetWorkOrderForm() {

package/composables/useFeedback.ts

@@ -51,9 +51,9 @@ export default function useFeedback() {
 
   const feedback = useState("feedback", () => new MFeedback());
   const feedbacks = useState("feedbacks", (): TFeedback[] => []);
-  const page = useState("page", () => 1);
-  const pages = useState("pages", () => 0);
-  const pageRange = useState("pageRange", () => "-- - -- of --");
+  const page = useState("feedbackPage", () => 1);
+  const pages = useState("feedbackPages", () => 0);
+  const pageRange = useState("feedbackPageRange", () => "-- - -- of --");
 
   function setFeedback(data?: TFeedback) {
     feedback.value = data || new MFeedback();