@7365admin1/layer-common 3.2.2-staging.114 → 3.2.2-staging.118

package/assets/css/screens.css

@@ -312,6 +312,25 @@
   font-size: 19px;
 }
 
+/**
+ * A DIALOG'S OWN HEADER/FOOTER BAR - OPT-IN, DELIBERATELY.
+ *
+ * Some dialogs draw their title row and their Cancel/Submit row as a
+ * `v-toolbar`. Vuetify paints that from its own `surface`, which in dark mode
+ * is a visible grey slab sitting on the card. The obvious fix - one blanket
+ * `.v-overlay__content .v-toolbar` rule - was measured and REJECTED: sixty-odd
+ * dialog components draw such a bar, and several set `color="black"` or
+ * `color="grey-darken-3"` ON PURPOSE. A blanket rule would flatten those too,
+ * unrendered and unverified.
+ *
+ * So this is a class a converted dialog opts into. Background and text only -
+ * it moves no control and changes no button.
+ */
+.screen-dialog-bar.v-toolbar {
+  background: var(--card) !important;
+  color: var(--text) !important;
+}
+
 /**
  * The design's two buttons, for the dialogs and toolbars that draw their own.
  *

package/components/BuildingUnitFormEdit.vue

@@ -1,11 +1,11 @@
 <template>
   <v-card width="100%" :loading="getUnitPeoplePending || loading.ownerProcessing" :disabled="loading.ownerProcessing">
-    <v-toolbar>
+    <v-toolbar class="screen-dialog-bar">
       <v-row no-gutters class="fill-height px-6" align="center">
         <span class="font-weight-bold text-h5"> Unit Info ( {{ buildingUnit.name }} ) </span>
       </v-row>
     </v-toolbar>
-    <v-toolbar density="compact">
+    <v-toolbar class="screen-dialog-bar" density="compact">
       <v-tabs v-model="tab" class="mt-0" active-class="bg-success">
         <v-tab value="general">General</v-tab>
         <v-tab value="residents">Residents/Tenants</v-tab>
@@ -253,7 +253,7 @@
       </v-row>
     </v-col>
 
-    <v-toolbar class="pa-0" density="compact">
+    <v-toolbar class="pa-0 screen-dialog-bar" density="compact">
       <v-row no-gutters>
         <v-col :cols="canUpdateUnit || canDeleteUnit ? 6 : 12" class="pa-0">
           <v-btn block variant="text" class="text-none" size="large" @click="emit('cancel')" height="48">

package/components/BulletinBoardView.vue

@@ -1,14 +1,17 @@
 <template>
-  <v-card width="100%" :loading="processing">
+  <v-card width="100%" class="screen-modal" :loading="processing">
     <v-toolbar>
       <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-subtitle-1 text-capitalize">
+        <span class="screen-card-title text-capitalize">
           Preview Announcement
         </span>
       </v-row>
     </v-toolbar>
 
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0 my-3">
+    <v-card-text
+      style="max-height: 100vh; overflow-y: auto"
+      class="screen-modal__body pb-0 my-3"
+    >
       <v-row no-gutters>
         <template v-for="(label, key) in formattedFields" :key="key">
           <v-col cols="12" class="mb-5">
@@ -39,7 +42,7 @@
             <v-col class="font-weight-bold">Attachments:</v-col>
             <v-col cols="9" class="px-10">
               <template v-if="videosArray.length > 0">
-                <div class="text-caption text-medium-emphasis mb-1">
+                <div class="text-caption screen-hint mb-1">
                   Videos ({{ videosArray.length }})
                 </div>
                 <v-list density="compact" class="pa-0 rounded-lg border mb-3">
@@ -71,7 +74,7 @@
 
               <template v-if="photosArray.length > 0">
                 <div
-                  class="text-caption text-medium-emphasis mb-1"
+                  class="text-caption screen-hint mb-1"
                   :class="{ 'mt-3': videosArray.length > 0 }"
                 >
                   Photos ({{ photosArray.length }})
@@ -110,7 +113,7 @@
 
               <template v-if="filesArray.length > 0">
                 <div
-                  class="text-caption text-medium-emphasis mb-1"
+                  class="text-caption screen-hint mb-1"
                   :class="{
                     'mt-3': videosArray.length > 0 || photosArray.length > 0,
                   }"

package/components/BulletinExpirationChip.vue

@@ -1,8 +1,17 @@
 <template>
-  <v-chip
-    size="small"
-    :color="value ? 'green' : 'red'"
-    :text="value ? 'Yes' : 'No'"
+  <!--
+    The design's status pill rather than a raw v-chip. Vuetify's `green` and
+    `red` are fixed hues that are in no token file: the red one printed
+    `rgb(244,67,54)` and measured 3.4:1 against the surface behind it, below AA
+    on the word people actually read, and the green one measured 2.78:1.
+    `approved` and `rejected` are the shared tone words, so this chip now takes
+    `--ok` / `--err` and their paired `--ok-bg` / `--err-bg` - the handoff's own
+    values - and carries its own background instead of borrowing whatever it
+    happens to sit on.
+  -->
+  <StatusChip
+    :status="value ? 'approved' : 'rejected'"
+    :label="value ? 'Yes' : 'No'"
   />
 </template>
 

package/components/CameraMain.vue

@@ -1,57 +1,45 @@
 <template>
   <v-row no-gutters>
     <v-col cols="12">
-      <v-card width="100%" variant="outlined" border="thin" rounded="lg">
-        <v-toolbar density="compact" color="grey-lighten-4 pl-2 pr-4">
-          <template #prepend>
-            <v-btn fab icon density="comfortable" @click="getCameraRefresh()">
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-          </template>
-
-          <template #append>
-            <v-btn
-              v-if="!prop.readOnly"
-              variant="flat"
-              color="primary"
-              class="text-none"
-              @click="dialogAdd = true"
-            >
+      <!-- Two `grey-lighten-4` bars - one above the table, one below - are one
+           CardToolbar on the card's own surface. The literal grey stayed white
+           on the dark theme's card; measured as four 48px white slabs. -->
+      <AppCard class="table-card">
+        <CardToolbar :count="pageRange">
+          <template #left>
+            <AppButton
+              variant="icon"
+              icon="mdi-refresh"
+              aria-label="Refresh"
+              @click="getCameraRefresh()"
+            />
+            <AppButton v-if="!prop.readOnly" @click="dialogAdd = true">
               Add
-            </v-btn>
+            </AppButton>
           </template>
-        </v-toolbar>
-
-        <v-card-text class="pa-0 bg-red">
-          <v-data-table
-            :headers="computedHeaders"
-            :items="items"
-            fixed-header
-            hide-default-footer
-            @click:row="handleRowClick"
-            style="max-height: 300px"
-          >
-            <template #item.host="{ value }">
-              {{ maskHostUrl(value) }}
-            </template>
-          </v-data-table>
-        </v-card-text>
 
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-font gray">
-                {{ pageRange }}
-              </span>
-              <local-pagination
-                v-model="page"
-                :length="pages"
-                @update:value="$emit('update:value', $event)"
-              />
-            </v-row>
+          <template #right>
+            <local-pagination
+              v-model="page"
+              :length="pages"
+              @update:value="$emit('update:value', $event)"
+            />
           </template>
-        </v-toolbar>
-      </v-card>
+        </CardToolbar>
+
+        <v-data-table
+          :headers="computedHeaders"
+          :items="items"
+          fixed-header
+          hide-default-footer
+          @click:row="handleRowClick"
+          style="max-height: 300px"
+        >
+          <template #item.host="{ value }">
+            {{ maskHostUrl(value) }}
+          </template>
+        </v-data-table>
+      </AppCard>
     </v-col>
 
     <!-- dialog -->

package/components/DeliveryCompany.vue

@@ -1,22 +1,27 @@
 <template>
     <v-row no-gutters class="pa-3">
         <v-col cols="12">
-            <v-card width="100%" variant="outlined" border="thin" rounded="lg" max-width="700" max-height="500"
-                style="overflow-y: auto;">
-                <v-toolbar density="compact" color="grey-lighten-4 pl-2 pr-4">
-                    <v-row v-if="!hideTitle" no-gutters class="px-3 font-weight-bold">
-                        Delivery Companies
-                    </v-row>
+            <AppCard class="delivery-company__card">
+                <!--
+                  The one toolbar the design puts on top of the card. It was a
+                  hardcoded grey-lighten-4 bar, which stays light in dark mode
+                  and painted as a white slab there.
+                -->
+                <CardToolbar>
+                    <template #left>
+                        <span v-if="!hideTitle" class="screen-card-title">
+                            Delivery Companies
+                        </span>
+                    </template>
 
-                    <template #append>
-                        <v-btn v-if="!props.readOnly" variant="flat" color="primary" class="text-none"
-                            @click="handleAdd">
+                    <template #right>
+                        <AppButton v-if="!props.readOnly" @click="handleAdd">
                             Add
-                        </v-btn>
+                        </AppButton>
                     </template>
-                </v-toolbar>
+                </CardToolbar>
 
-                <v-card-text class="pa-0" style="min-height: 100px;">
+                <div class="pa-0" style="min-height: 100px;">
                     <template v-if="companies.length > 0">
                         <draggable :list="companies" item-key="index" class="drag-area"
                             :disabled="editingIndex !== null">
@@ -60,11 +65,11 @@
                         </draggable>
                     </template>
 
-                    <div v-else class="text-center py-5">
+                    <div v-else class="screen-empty text-center py-5">
                         No delivery companies added yet.
                     </div>
-                </v-card-text>
-            </v-card>
+                </div>
+            </AppCard>
         </v-col>
 
         <v-dialog v-model="dialog.add" persistent width="450">
@@ -82,12 +87,13 @@
                 </v-card-text>
 
                 <v-toolbar>
-                    <v-row no-gutters justify="end" align="center" class="px-5">
-                        <v-btn variant="text" text="Cancel" @click="dialog.add = false" />
-                        <v-btn variant="flat" color="primary" class="text-none ml-2"
-                            @click="saveEdit(companies.length)">
+                    <v-row no-gutters justify="end" align="center" class="px-5 ga-2">
+                        <AppButton variant="ghost" @click="dialog.add = false">
+                            Cancel
+                        </AppButton>
+                        <AppButton @click="saveEdit(companies.length)">
                             Add
-                        </v-btn>
+                        </AppButton>
                     </v-row>
                 </v-toolbar>
             </v-card>
@@ -237,4 +243,12 @@ watch(initialCompanies, (val) => {
 .drag-handle {
     cursor: grab;
 }
+
+/* The size cap the v-card carried as max-width/max-height attributes, kept
+   verbatim so the panel does not grow to the full page width. */
+.delivery-company__card {
+    max-width: 700px;
+    max-height: 500px;
+    overflow-y: auto;
+}
 </style>

package/components/DocumentManagement.vue

@@ -204,7 +204,7 @@
     <!-- Create Folder Dialog -->
     <v-dialog v-model="createFolderDialog" width="450" persistent>
       <v-card width="100%">
-        <v-toolbar class="pa-0" density="compact">
+        <v-toolbar class="pa-0 screen-dialog-bar" density="compact">
           <v-row no-gutters class="w-100">
             <v-col cols="12" class="pa-4">
               <span class="font-weight-medium text-h6">Create Folder</span>
@@ -234,7 +234,7 @@
           </v-form>
         </v-card-text>
 
-        <v-toolbar class="pa-0" density="compact">
+        <v-toolbar class="pa-0 screen-dialog-bar" density="compact">
           <v-row no-gutters class="w-100">
             <v-col cols="6" class="pa-0">
               <v-btn
@@ -271,7 +271,7 @@
     <!-- Edit Folder Dialog -->
     <v-dialog v-model="editFolderDialog" width="450" persistent>
       <v-card width="100%" class="folder-dialog-card">
-        <v-toolbar class="pa-0 folder-dialog-toolbar" density="compact">
+        <v-toolbar class="pa-0 folder-dialog-toolbar screen-dialog-bar" density="compact">
           <v-row no-gutters class="w-100">
             <v-col cols="12" class="pa-4">
               <span class="font-weight-medium text-h6">Edit Folder</span>
@@ -306,7 +306,7 @@
           </v-form>
         </v-card-text>
 
-        <v-toolbar class="pa-0" density="compact">
+        <v-toolbar class="pa-0 screen-dialog-bar" density="compact">
           <v-row no-gutters class="w-100">
             <v-col cols="6" class="pa-0">
               <v-btn
@@ -343,7 +343,7 @@
     <!-- Delete Folder Dialog -->
     <v-dialog v-model="deleteFolderDialog" width="450" persistent>
       <v-card width="100%" class="folder-dialog-card">
-        <v-toolbar density="compact" class="pl-4 folder-dialog-toolbar">
+        <v-toolbar density="compact" class="pl-4 folder-dialog-toolbar screen-dialog-bar">
           <span class="font-weight-medium text-h6">Delete Folder</span>
         </v-toolbar>
 
@@ -357,7 +357,7 @@
           </p>
         </v-card-text>
 
-        <v-toolbar density="compact" class="pa-0">
+        <v-toolbar density="compact" class="pa-0 screen-dialog-bar">
           <v-row no-gutters class="w-100">
             <v-col cols="6" class="pa-0">
               <v-btn
@@ -485,7 +485,7 @@
             </v-col>
           </v-row>
         </v-card-text>
-        <v-toolbar class="pa-0" density="compact">
+        <v-toolbar class="pa-0 screen-dialog-bar" density="compact">
           <v-row no-gutters>
             <v-col cols="6" class="pa-0">
               <v-btn
@@ -549,7 +549,7 @@
       persistent
     >
       <v-card width="100%">
-        <v-toolbar density="compact" class="pl-4">
+        <v-toolbar density="compact" class="pl-4 screen-dialog-bar">
           <span class="font-weight-medium text-h5">Delete Document</span>
         </v-toolbar>
         <v-card-text>
@@ -559,7 +559,7 @@
           </p>
         </v-card-text>
 
-        <v-toolbar density="compact">
+        <v-toolbar class="screen-dialog-bar" density="compact">
           <v-row no-gutters>
             <v-col cols="6">
               <v-btn

package/components/MemberInformation.vue

@@ -1,9 +1,12 @@
 <template>
   <v-row no-gutters class="w-100">
-    <v-card class="w-100">
-      <v-card-text>
-        <v-btn block color="primary-button" :height="40" text="Scan QR Code" class="text-capitalize"
-          prepend-icon="mdi-qrcode" @click="handleScanQRPass" />
+    <AppCard class="w-100 pa-4">
+        <!-- GHOST, not primary: the handoff names "Scan QR Code" in its
+             ghost/secondary list, alongside Bulk Upload, Download Report and
+             Export. Stays a `v-btn` because `block` has no AppButton
+             equivalent, so the design's button is applied as a class. -->
+        <v-btn block :height="38" text="Scan QR Code" variant="outlined"
+          class="screen-btn-ghost" prepend-icon="mdi-qrcode" @click="handleScanQRPass" />
         <v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorScanPassMessage = ''">
           <v-row no-gutters class="pt-5 ga-2">
             <v-col cols="12">
@@ -81,22 +84,26 @@
 
             <v-row class="pt-3" justify="space-between">
               <v-col cols="6">
-                <v-btn text="Add Member" :disabled="!validForm" prepend-icon="mdi-plus" color="primary-button"
-                  class="text-capitalize" @click="handleAddMember" />
+                <!-- The primitive rather than a class on a v-btn: these two
+                     need nothing Vuetify owns, and AppButton is the only way
+                     they draw at the handoff's 40px / 38px. -->
+                <AppButton icon="mdi-plus" :disabled="!validForm" @click="handleAddMember">
+                  Add Member
+                </AppButton>
               </v-col>
               <v-col cols="6" align="end">
-                <v-btn text="Clear Form" prepend-icon="mdi-refresh" color="primary-button" class="text-capitalize"
-                  @click.stop="handleClearForm" />
+                <AppButton variant="ghost" icon="mdi-refresh" @click.stop="handleClearForm">
+                  Clear Form
+                </AppButton>
               </v-col>
             </v-row>
           </v-row>
         </v-form>
-      </v-card-text>
-    </v-card>
+    </AppCard>
     <visitor-pass-key-q-r-scanner :dialog="dialog.scanQRCode" v-model:scannedValue="scannedPassValue"
       @close-dialog="dialog.scanQRCode = false" />
     <v-dialog v-model="dialog.memberAutofillOptions" max-width="430">
-      <v-card v-if="memberSelectedSearchResult" class="nric-options-card">
+      <v-card v-if="memberSelectedSearchResult" class="nric-options-card screen-modal">
         <v-card-actions class="justify-end pa-1">
           <v-btn icon="mdi-close" variant="text" size="small" @click="memberCloseAutofillOptions" />
         </v-card-actions>
@@ -127,10 +134,10 @@
         </v-card-text>
 
         <v-card-actions class="justify-end px-4 pb-4">
-          <v-btn variant="text" class="text-none" size="small" @click="memberCloseAutofillOptions">
+          <v-btn variant="outlined" class="screen-btn-ghost" size="small" @click="memberCloseAutofillOptions">
             Cancel
           </v-btn>
-          <v-btn color="primary-button" variant="flat" class="text-none px-5" size="small"
+          <v-btn variant="flat" class="screen-btn-primary px-5" size="small"
             @click="memberConfirmAutofillOptions">
             Select
           </v-btn>
@@ -626,13 +633,13 @@ function handleRemoveMember(index: number) {
 }
 
 .nric-options-title {
-  color: #06253b;
+  color: var(--text);
   font-size: 1.45rem;
   line-height: 1.2;
 }
 
 .nric-options-section-title {
-  color: #06253b;
+  color: var(--text);
   font-size: 1.05rem;
   line-height: 1.25;
 }
@@ -640,7 +647,7 @@ function handleRemoveMember(index: number) {
 .nric-selected-person {
   border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
   border-radius: 12px;
-  color: #06253b;
+  color: var(--text);
   font-size: 0.95rem;
   min-height: 52px;
   padding: 10px 14px;

package/components/Nfc/NFCPatrolReportMain.vue

@@ -1,39 +1,46 @@
 <template>
-  <v-row no-gutters class="border-thin pa-6 rounded-lg">
+  <v-row no-gutters>
     <v-col cols="12">
-      <v-row no-gutters class="mb-4" align="center">
-        <v-col cols="12" md="6">
-          <v-btn
-            variant="text"
-            prepend-icon="mdi-chevron-left"
-            class="text-none"
-            @click="goBack"
-          >
+      <!--
+        The screen had no page name at all - it opened on a bare back button.
+        The design opens every screen with its name; the back link keeps its
+        own `router.back()` and moves onto that row as the ghost action.
+      -->
+      <PageHeader title="Patrol Report">
+        <template #actions>
+          <AppButton variant="ghost" icon="mdi-chevron-left" @click="goBack">
             Patrol Report Log
-          </v-btn>
-        </v-col>
-      </v-row>
-
-      <v-tabs
-        v-model="activeTab"
-        class="mb-6"
-        bg-color="transparent"
-        grow
-      >
-        <v-tab value="patrol" class="text-none border-thin">
-          Patrol Report
-        </v-tab>
-
-        <v-tab value="daily" class="text-none border-thin">
-          Daily Report
-        </v-tab>
-
-        <v-tab value="monthly" class="text-none border-thin">
-          Monthly Report
-        </v-tab>
-      </v-tabs>
-
-      <v-window v-model="activeTab" class="pt-4">
+          </AppButton>
+        </template>
+      </PageHeader>
+    </v-col>
+
+    <v-col cols="12">
+      <!--
+        The three report tabs were a `grow` `v-tabs` strip floating above the
+        content with its own `border-thin` boxes. The design makes the tabs the
+        card's own first row, so they become the ONE `CardToolbar`'s tabs. Same
+        `activeTab` model, same three values, same `v-window`.
+      -->
+      <AppCard>
+        <CardToolbar>
+          <template #tabs>
+            <button
+              v-for="tab in reportTabs"
+              :key="tab.value"
+              type="button"
+              role="tab"
+              class="app-tab"
+              :class="{ 'app-tab--active': activeTab === tab.value }"
+              :aria-selected="activeTab === tab.value"
+              @click="activeTab = tab.value"
+            >
+              {{ tab.label }}
+            </button>
+          </template>
+        </CardToolbar>
+
+      <v-window v-model="activeTab" class="pt-4 px-6 pb-6">
         <v-window-item value="patrol">
           <div v-if="activeTab === 'patrol'">
             <PatrolReportTab
@@ -73,6 +80,7 @@
           </div>
         </v-window-item>
       </v-window>
+      </AppCard>
     </v-col>
   </v-row>
 </template>
@@ -103,6 +111,12 @@ const router = useRouter();
 
 const activeTab = ref<NFCPatrolReportTab>("patrol");
 
+const reportTabs: Array<{ value: NFCPatrolReportTab; label: string }> = [
+  { value: "patrol", label: "Patrol Report" },
+  { value: "daily", label: "Daily Report" },
+  { value: "monthly", label: "Monthly Report" },
+];
+
 const { filters, options, fetchOptions } =
   useNFCPatrolReportFilters(props.site);