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

package/components/DocumentManagement.vue

@@ -1,77 +1,60 @@
 <template>
   <v-row no-gutters class="pa-0">
     <v-col cols="12" class="mb-2">
-      <v-row no-gutters align="center">
-        <v-col cols="12" md="6" class="d-flex align-center">
-          <v-btn
-            class="text-none me-2"
-            rounded="pill"
-            variant="tonal"
-            size="large"
-            @click="setDocument()"
+      <PageHeader title="Documents">
+        <template #actions>
+          <AppButton
+            v-if="canCreate && canCreateFolder"
+            variant="ghost"
+            icon="mdi-folder-plus-outline"
+            @click="openCreateFolderDialog()"
+          >
+            Create Folder
+          </AppButton>
+
+          <AppButton
             v-if="canCreate && canCreateDocument"
+            icon="mdi-plus"
+            @click="setDocument()"
           >
             Add Document
-          </v-btn>
+          </AppButton>
+        </template>
+      </PageHeader>
+
+      <div class="doc-filters">
+        <AppField
+          v-model="search"
+          search
+          icon="mdi-magnify"
+          placeholder="Search"
+          klass="doc-filters__search"
+        />
 
-          <v-btn
-            class="text-none"
-            rounded="pill"
-            variant="tonal"
-            size="large"
-            @click="openCreateFolderDialog()"
-            v-if="canCreate && canCreateFolder"
-          >
-            Create Folder
-          </v-btn>
-        </v-col>
-
-        <v-col
-          cols="12"
-          md="6"
-          class="d-flex justify-end align-center mt-4 mt-md-0"
-        >
-          <v-text-field
-            v-model="search"
-            placeholder="Search"
-            density="comfortable"
-            variant="outlined"
-            hide-details
-            rounded="lg"
-            class="me-3"
-            style="max-width: 220px"
-          />
-
-          <v-menu v-model="filterMenu" offset-y>
-            <template #activator="{ props }">
-              <v-btn
-                v-bind="props"
-                variant="outlined"
-                rounded="lg"
-                class="filtertype-btn text-none"
-                style="max-width: 220px"
-              >
-                {{ selectedFileType || "Filter by File Type" }}
-              </v-btn>
-            </template>
+        <v-menu v-model="filterMenu" offset-y>
+          <template #activator="{ props }">
+            <button v-bind="props" type="button" class="doc-filters__type">
+              <span>{{ selectedFileType || "Filter by File Type" }}</span>
+              <v-icon size="18">mdi-chevron-down</v-icon>
+            </button>
+          </template>
 
-            <v-card class="filtertype-card">
-              <v-list class="pa-0">
-                <v-list-item
-                  v-for="(type, idx) in fileTypes"
-                  :key="idx"
-                  @click="selectFileType(type)"
-                  class="filtertype-item"
-                >
-                  <v-list-item-title class="text-subtitle-2">
-                    {{ type }}
-                  </v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-card>
-          </v-menu>
-        </v-col>
-      </v-row>
+          <v-card class="filtertype-card">
+            <v-list class="pa-0">
+              <v-list-item
+                v-for="(type, idx) in fileTypes"
+                :key="idx"
+                @click="selectFileType(type)"
+                class="filtertype-item"
+              >
+                <v-list-item-title class="text-subtitle-2">
+                  {{ type }}
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-card>
+        </v-menu>
+      </div>
     </v-col>
 
     <v-col cols="12" class="mb-2" v-if="isInsideFolder">
@@ -82,7 +65,7 @@
           variant="text"
           @click="goBackFolder"
         />
-        <v-icon size="18" color="grey-darken-2">mdi-folder</v-icon>
+        <v-icon size="18" style="color: var(--muted)">mdi-folder</v-icon>
         <span class="text-body-2 font-weight-medium">{{
           currentFolderPath
         }}</span>
@@ -114,18 +97,18 @@
             />
 
             <span
-              class="breadcrumb-segment text-body-2 text-grey-darken-1 cursor-pointer"
+              class="breadcrumb-segment text-body-2 breadcrumb-segment--link cursor-pointer"
               @click="navigateToRoot"
               >Home</span
             >
             <template v-for="(folder, idx) in folderStack" :key="folder.id">
-              <v-icon size="14" color="grey-darken-1">mdi-chevron-right</v-icon>
+              <v-icon size="14" style="color: var(--muted)">mdi-chevron-right</v-icon>
               <span
                 :class="[
                   'breadcrumb-segment text-body-2 font-weight-medium',
                   idx === folderStack.length - 1
-                    ? 'text-black'
-                    : 'text-grey-darken-1 cursor-pointer',
+                    ? 'breadcrumb-segment--current'
+                    : 'breadcrumb-segment--link cursor-pointer',
                 ]"
                 @click="
                   idx < folderStack.length - 1 && navigateToStackIndex(idx)
@@ -1197,36 +1180,87 @@ function selectFileType(type: string) {
 </script>
 
 <style scoped>
+/*
+ * EVERY COLOUR IN THIS BLOCK WAS A LITERAL. `#fff` menus, `#fafafa` bars,
+ * `#e0e0e0` rules and `#38475a` ink do not follow the theme, so in dark mode
+ * this screen drew white slabs on the dark page. All of them are tokens now;
+ * nothing about the layout, the flow or the actions changed.
+ */
+
+/* The breadcrumb was `text-grey-darken-1` and `text-black` - the same two
+   greys on the dark page, i.e. black lettering on a dark card. */
+.breadcrumb-segment--link {
+  color: var(--muted);
+}
+
+.breadcrumb-segment--current {
+  color: var(--text);
+}
+
 .table-download-btn {
   min-width: 106px;
   height: 30px;
-  border-radius: 4px;
-  background-color: #e3e3e3;
-  color: #38475a;
+  border-radius: var(--r-tag);
+  background-color: var(--hover);
+  color: var(--text2);
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 600;
   box-shadow: none;
 }
 
 .table-download-btn:hover {
-  background-color: #d8d8d8;
+  background-color: var(--thead);
+}
+
+/* The filter row under the title: the design puts search and filters on one
+   line, right-aligned, rather than in a second full-width toolbar. */
+.doc-filters {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
 }
 
-.filtertype-btn {
-  justify-content: flex-start;
+.doc-filters :deep(.doc-filters__search) {
+  flex: 0 0 auto;
   width: 220px;
+  min-width: 0;
+}
+
+.doc-filters__type {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 220px;
+  height: 38px;
+  padding: 0 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--card);
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 600;
+  text-align: left;
+}
+
+.doc-filters__type:hover {
+  background: var(--hover);
 }
 
 .filtertype-card {
-  background: #fff;
-  border-radius: 8px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
   min-width: 160px;
-  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--shadow-menu);
   overflow: hidden;
 }
 
 .filtertype-item {
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--border);
   padding: 10px 16px;
 }
 
@@ -1235,27 +1269,29 @@ function selectFileType(type: string) {
 }
 
 .folder-path-bar {
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  background: #fafafa;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--thead);
+  color: var(--text);
 }
 
 .folder-action-btn {
-  color: #38475a;
+  color: var(--text2);
 }
 
 .folder-action-list {
   min-width: 180px;
-  border-radius: 8px;
-  background: #fff;
-  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22);
+  border-radius: var(--r-inner);
+  background: var(--card);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-menu);
   overflow: hidden;
 }
 
 .folder-action-item {
   min-height: 40px;
-  border-bottom: 1px solid #eef0f2;
-  color: #38475a;
+  border-bottom: 1px solid var(--border);
+  color: var(--text2);
 }
 
 .folder-action-item:last-child {
@@ -1263,11 +1299,11 @@ function selectFileType(type: string) {
 }
 
 .folder-dialog-card {
-  border-radius: 6px;
+  border-radius: var(--r-inner);
   overflow: hidden;
 }
 
 .folder-dialog-toolbar {
-  border-bottom: 1px solid #eef0f2;
+  border-bottom: 1px solid var(--border);
 }
 </style>

package/components/EntryPassMain.vue

@@ -5,28 +5,41 @@
     :height="'200px'"
     v-if="loading"
   />
-  <v-row no-gutters v-if="!loading">
-    <v-col cols="12" elevation="3" class="border">
-      <v-tabs v-model="activeTab" color="primary" class="px-2">
-        <v-tab value="general">
-          <v-icon start>mdi-cog-outline</v-icon>
-          General
-        </v-tab>
-        <v-tab value="qrcode">
-          <v-icon start>mdi-qrcode</v-icon>
-          QR Code
-        </v-tab>
-        <v-tab value="printer">
-          <v-icon start>mdi-printer</v-icon>
-          Printer
-        </v-tab>
-        <v-tab value="entrypass">
-          <v-icon start>mdi-link-variant</v-icon>
-          Entrypass
-        </v-tab>
-      </v-tabs>
-
-      <v-divider />
+  <div v-if="!loading">
+    <!--
+      THE DESIGN'S CARD + TAB ROW - AND DELIBERATELY NO `PageHeader`.
+
+      This screen owns no table; it is a settings screen of switches and fields,
+      so it takes `AppCard` + `CardToolbar`'s tabs row and no pager, count or
+      refresh, because it has never had any.
+
+      It gets NO page title, unlike the other screens in this pass: its only
+      caller mounts it INSIDE a `v-expansion-panel` on property-management's
+      Settings page whose panel header already reads "Entry Pass". A
+      `PageHeader` here would print that title twice.
+
+      The same four tabs switch the same `v-window` on the same `activeTab`,
+      keeping their icons; every switch, field, button and save handler is
+      untouched.
+    -->
+    <AppCard class="screen-card">
+      <CardToolbar>
+        <template #tabs>
+          <button
+            v-for="tab in entryPassTabs"
+            :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"
+          >
+            <v-icon start size="16">{{ tab.icon }}</v-icon>
+            {{ tab.label }}
+          </button>
+        </template>
+      </CardToolbar>
 
       <v-window v-model="activeTab">
         <!-- ─── Tab 1: General ─────────────────────────────────── -->
@@ -38,7 +51,7 @@
               <div class="d-flex mt-3 pb-5 pr-5">
                 <p class="mr-6 font-weight-medium flex-grow-1">
                   NFC / QR Code Pass
-                  <span class="d-block text-caption text-grey-darken-1 mt-1">
+                  <span class="d-block text-caption screen-hint mt-1">
                     NFC Card Pass uses Near Field Communication (NFC) technology
                     to enable secure and convenient entry within ~4 cm proximity.
                   </span>
@@ -59,7 +72,7 @@
               <div class="mt-5 pb-5">
                 <p class="font-weight-medium mb-1">
                   Access Door / Lift
-                  <span class="d-block text-caption text-grey-darken-1 mt-1">
+                  <span class="d-block text-caption screen-hint mt-1">
                     Choose the access method(s) for door and lift control.
                     At least one method must be enabled.
                   </span>
@@ -190,7 +203,7 @@
               <div class="d-flex mt-3 pb-5">
                 <p class="font-weight-medium flex-grow-1">
                   Upload Access Cards Template
-                  <span class="d-block text-caption text-grey-darken-1 mt-1">
+                  <span class="d-block text-caption screen-hint mt-1">
                     <a
                       v-if="currentEntryPassSettings.template?.id"
                       href="#"
@@ -379,7 +392,7 @@
           </v-row>
         </v-window-item>
       </v-window>
-    </v-col>
+    </AppCard>
 
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
 
@@ -388,7 +401,7 @@
       :header="currentEntryPassSettings.qrCodeTemplateHeader"
       :sub-text="currentEntryPassSettings.qrCodeTemplateHeaderSubText"
     />
-  </v-row>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -400,6 +413,15 @@ const prop = defineProps({
 
 const activeTab = ref("general");
 
+/** The same four tabs, in the same order, moved out of the template so the
+    design's tab row can `v-for` them. Values unchanged - they key `v-window`. */
+const entryPassTabs = [
+  { value: "general", label: "General", icon: "mdi-cog-outline" },
+  { value: "qrcode", label: "QR Code", icon: "mdi-qrcode" },
+  { value: "printer", label: "Printer", icon: "mdi-printer" },
+  { value: "entrypass", label: "Entrypass", icon: "mdi-link-variant" },
+];
+
 const currentEntryPassSettings = ref<Record<string, any>>({
   _id: "",
   site: "",

package/components/EquipmentItemMain.vue

@@ -2,7 +2,7 @@
   <v-row no-gutters align="center" justify="center">
     <v-col cols="12" lg="12">
       <TableMain
-        :title="`${siteName} Units`"
+        :title="`${siteName} Equipment Items`"
         :items="items"
         :headers="headers"
         :loading="loading"
@@ -20,10 +20,8 @@
           <v-row no-gutters align="center" class="w-100">
             <v-col cols="auto" v-if="canCreateEquipmentItem">
               <v-btn
-                class="text-none"
-                rounded="pill"
-                variant="tonal"
-                size="large"
+                class="text-none screen-btn-primary"
+                variant="flat"
                 @click="openEquipmentItemDialog()"
               >
                 Checkout Item
@@ -32,7 +30,7 @@
 
             <v-spacer />
 
-            <v-col cols="auto">
+            <v-col cols="auto" class="filter-field">
               <v-text-field
                 v-model="searchInput"
                 density="compact"

package/components/EquipmentManagementMain.vue

@@ -2,7 +2,7 @@
   <v-row no-gutters align="center" justify="center">
     <v-col cols="12" lg="12">
       <TableMain
-        :title="`${siteName} Units`"
+        :title="`${siteName} Equipment`"
         :items="items"
         :headers="headers"
         :loading="loading"
@@ -20,10 +20,8 @@
           <v-row no-gutters align="center" class="w-100">
             <v-col cols="auto" v-if="canAddEquipment">
               <v-btn
-                class="text-none"
-                rounded="pill"
-                variant="tonal"
-                size="large"
+                class="text-none screen-btn-primary"
+                variant="flat"
                 @click="onCreateUnit()"
               >
                 Add Equipment
@@ -32,7 +30,7 @@
 
             <v-spacer />
 
-            <v-col cols="auto">
+            <v-col cols="auto" class="filter-field">
               <v-text-field
                 v-model="searchInput"
                 density="compact"
@@ -60,7 +58,11 @@
         </template>
 
         <template #item.status="{ value }">
-          <v-chip class="text-capitalize">{{ value || "N/A" }}</v-chip>
+          <StatusChip
+            class="text-capitalize"
+            :status="value"
+            :label="value || 'N/A'"
+          />
         </template>
 
         <template #item.block="{ value }">

package/components/FeedbackMain.vue

@@ -1,7 +1,17 @@
 <template>
-  <v-row no-gutters>
+  <div>
+    <!-- The design's title row: the page's name at 22px and its primary
+         action on the right of that same line. Placement only - the same
+         button opens the same dialog under the same permission. -->
+    <PageHeader title="Feedbacks">
+      <template v-if="canCreateFeedback" #actions>
+        <AppButton @click="showCreateDialog = true">Create Feedback</AppButton>
+      </template>
+    </PageHeader>
+
+    <v-row no-gutters>
     <v-col cols="12" class="mb-2">
-      <v-row no-gutters align="center">
+      <v-row no-gutters align="center" class="filter-bar">
         <v-text-field
           v-model="searchText"
           placeholder="Search feedback..."
@@ -50,51 +60,32 @@
             <v-date-picker v-model="endDate" width="320" :locale="locale" />
           </v-card>
         </v-dialog>
-        <v-btn
-          v-if="canCreateFeedback"
-          text="create feedback"
-          class="text-none text-capitalize ml-2"
-          rounded="pill"
-          variant="tonal"
-          size="large"
-          @click="showCreateDialog = true"
-        />
       </v-row>
     </v-col>
 
     <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"
+      <AppCard class="table-card">
+        <!-- One row inside the card - refresh, the range and the pager - in
+             place of a `v-toolbar` that stacked them above the table. Same
+             three controls, same handlers. -->
+        <CardToolbar :count="pageRange">
+          <template #left>
+            <AppButton
+              variant="icon"
+              icon="mdi-refresh"
+              aria-label="Refresh"
               @click="(page = 1), refreshFeedbacks()"
-            >
-              <v-icon icon="mdi-refresh" />
-            </v-btn>
+            />
           </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>
+            <local-pagination
+              v-model="page"
+              :length="pages"
+              @update:value="updatePage"
+            />
           </template>
-        </v-toolbar>
+        </CardToolbar>
 
         <v-data-table
           :headers="headers"
@@ -104,6 +95,7 @@
           fixed-header
           hide-default-footer
           :hide-default-header="false"
+          :loading="loading"
           @click:row="tableRowClickHandler"
           style="max-height: calc(100vh - (200px))"
         >
@@ -139,13 +131,7 @@
           </template>
           <template #item.status="{ value }">
             <span class="d-inline-block text-truncate">
-              <v-chip
-                :color="getStatusColor(value ?? '')"
-                class="pa-5 text-capitalize text-center whitespace-nowrap text-body-1"
-                variant="flat"
-              >
-                {{ value }}
-              </v-chip>
+              <StatusChip class="text-capitalize" :status="value" />
             </span>
           </template>
           <template #item.assigneeInfo="{ item, index }">
@@ -183,9 +169,10 @@
             <span v-else class="mt-1 text-wrap"> Not Assigned </span>
           </template>
         </v-data-table>
-      </v-card>
+      </AppCard>
     </v-col>
-  </v-row>
+    </v-row>
+  </div>
 
   <!-- <FeedbackForm
     v-model="showCreateDialog"
@@ -660,7 +647,6 @@ const _feedback = ref({
 });
 
 const {
-  getStatusColor,
   debounce,
   standardFormatDateTime,
   standardFormatDate,