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

package/components/CameraForm.vue

@@ -1,20 +1,15 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
-      <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-h5 text-capitalize">
-          {{ title }}
-        </span>
-      </v-row>
-    </v-toolbar>
+  <v-card width="100%" class="screen-modal">
+    <v-card-title class="text-capitalize">{{ title }}</v-card-title>
 
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5">
+    <v-card-text class="screen-modal__body pa-5">
       <v-form ref="formRef" v-model="validForm" :disabled="disable">
         <v-row no-gutters class="pt-4">
           <v-col v-if="isCCTV" cols="12">
             <InputLabel class="text-capitalize" title="Camera Name" required />
             <v-text-field
               v-model.trim="camera.name"
+              class="filter-field"
               density="comfortable"
               :rules="[requiredRule]"
               placeholder="Enter CCTV camera name"
@@ -24,6 +19,7 @@
             <InputLabel class="text-capitalize" title="URL" required />
             <v-text-field
               v-model.trim="camera.host"
+              class="filter-field"
               density="comfortable"
               :rules="[requiredRule, hostRule]"
               placeholder="Enter camera URL"
@@ -35,6 +31,7 @@
             <v-select
               v-model="camera.category"
               :items="anprCategoryOptions"
+              class="filter-field"
               density="comfortable"
               :rules="[requiredRule]"
             />
@@ -45,6 +42,7 @@
             <v-select
               v-model="camera.direction"
               :items="anprDirectionOptions"
+              class="filter-field"
               density="comfortable"
               :rules="[requiredRule]"
             />
@@ -55,6 +53,7 @@
             <v-select
               v-model="camera.guardPost"
               :items="guardPostOptions"
+              class="filter-field"
               density="comfortable"
             />
           </v-col> -->
@@ -63,6 +62,7 @@
             <InputLabel class="text-capitalize" title="User" required />
             <v-text-field
               v-model.trim="camera.username"
+              class="filter-field"
               density="comfortable"
               :rules="[requiredRule]"
               placeholder="Enter username"
@@ -74,6 +74,7 @@
             <v-text-field
               v-model.trim="camera.password"
               type="password"
+              class="filter-field"
               density="comfortable"
               :rules="[requiredRule]"
               placeholder="Enter password"
@@ -86,10 +87,11 @@
               v-model="camera.status"
               hide-details
               inset
+              class="filter-field"
               density="comfortable"
               true-value="active"
               false-value="inactive"
-              :color="camera.status === 'active' ? 'success' : 'grey'"
+              :color="camera.status === 'active' ? 'success' : 'muted'"
               :label="camera.status === 'active' ? 'Active' : 'Inactive'"
             ></v-switch>
           </v-col>
@@ -97,27 +99,24 @@
       </v-form>
     </v-card-text>
 
-    <v-toolbar density="compact">
+    <!-- Was a `v-toolbar`: a grey slab with square (`tile`) buttons and a
+         hardcoded `color="black"` primary. The gate on Submit is unchanged. -->
+    <v-card-actions class="screen-modal__footer">
       <v-row no-gutters>
-        <v-col cols="6">
+        <v-col cols="6" class="pr-2">
           <v-btn
-            tile
             block
-            variant="text"
-            class="text-none"
-            size="48"
+            variant="outlined"
+            class="text-none screen-btn-ghost"
             @click="back"
             text="Cancel"
           />
         </v-col>
-        <v-col cols="6">
+        <v-col cols="6" class="pl-2">
           <v-btn
-            tile
             block
             variant="flat"
-            color="black"
-            class="text-none"
-            size="48"
+            class="text-none screen-btn-primary"
             :disabled="!validForm || disable || !hasChanges"
             @click="submit"
             :loading="disable"
@@ -125,7 +124,7 @@
           />
         </v-col>
       </v-row>
-    </v-toolbar>
+    </v-card-actions>
   </v-card>
 </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 -->
@@ -302,12 +290,25 @@ const computedHeaders = computed(() => {
       { title: "URL", key: "host" },
     ]
   }else if(prop.type === "anpr"){
-  return [ 
+  return [
       { title: "URL", key: "host" },
       { title: "Type", key: "direction" },
     ]
   }
-  // return prop.headers;
+  // A THIRD TYPE FELL OFF THE END. Both arms above are early returns and the
+  // fallback was commented out, so `computedHeaders` resolved to `undefined`
+  // for any `type` that is neither `ip` nor `anpr` - and `:headers="undefined"`
+  // does not mean "no table", it means Vuetify derives the columns from the
+  // first item's own keys, i.e. a raw dump of every field including `_id`.
+  //
+  // `prop.headers` is the component's declared escape hatch for exactly this
+  // and nothing was reading it, so the prop was dead. Reading it makes the
+  // fallback deterministic and gives a caller a way to supply its own columns.
+  //
+  // The four commented-out entries in that prop's default (Host, Category,
+  // Guard House, Actions) are ANOTHER TEAM'S deliberate change (9610a7d,
+  // f24fa80) and are left exactly as they are.
+  return prop.headers;
 });
 
 const items = ref<Array<TCamera>>([]);

package/components/Card/DeleteConfirmation.vue

@@ -1,30 +1,32 @@
 <template>
-    <v-card width="100%" :disabled="loading" :loading="loading">
-        <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5 px-7 text-center">
-            <span> {{ promptTitle }}</span>
+    <v-card class="screen-modal" width="100%" :disabled="loading" :loading="loading">
+        <v-card-text class="screen-modal__body pa-5 my-5 px-7 text-center">
+            <span class="screen-card-title"> {{ promptTitle }}</span>
 
-            <span v-if="message" class="text-error mt-2">
+            <!-- `text-error` is Vuetify's own class over `--v-theme-error`,
+                 which is the design's `--err` in both themes - already a token,
+                 so it stays. -->
+            <!-- A `div`, as in the Dialog/ twin: on an inline `span` the `mt-2`
+                 does nothing and the warning ran straight into the title with
+                 no space - "delete this?This removes the record...". -->
+            <div v-if="message" class="text-error mt-2">
                 {{ message }} Do you want to delete anyway?
-            </span>
+            </div>
         </v-card-text>
 
-        <v-toolbar class="pa-0" density="compact">
-            <v-row no-gutters>
-                <v-col cols="6" class="pa-0">
-                    <v-btn block variant="text" class="text-none" size="large" tile @click="emit('close')"
-                        height="48">
-                        Cancel
-                    </v-btn>
-                </v-col>
+        <!-- The design's footer: two equal-width buttons, ghost then primary,
+             on a bordered strip. The handoff draws no destructive variant, so
+             the confirming action takes the primary shape like every other
+             modal's Submit. -->
+        <div class="screen-modal__footer">
+            <v-btn class="screen-btn-ghost" variant="outlined" @click="emit('close')">
+                Cancel
+            </v-btn>
 
-                <v-col cols="6" class="pa-0">
-                    <v-btn block tile variant="flat" class="text-none" size="large" height="48" color="black"
-                        @click="emit('delete')">
-                        Delete
-                    </v-btn>
-                </v-col>
-            </v-row>
-        </v-toolbar>
+            <v-btn class="screen-btn-primary" variant="flat" @click="emit('delete')">
+                Delete
+            </v-btn>
+        </div>
     </v-card>
 </template>
 
@@ -48,4 +50,4 @@ const emit = defineEmits(["close", "delete"])
 
 </script>
 
-<style scoped></style>
+<style scoped></style>

package/components/Card/MemberInfoSummary.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-card flat border="sm grey-lighten-2" color="grey-lighten-3" class="w-100">
+    <v-card flat class="w-100 member-summary">
         <v-card-text>
             <v-row no-gutters>
                 <v-col cols="10" no-gutters>
@@ -13,7 +13,7 @@
                     </v-row>
                 </v-col>
                 <v-col cols="2" class="d-flex align-center justify-center">
-                    <v-btn icon="mdi-trash-outline" size="small" color="red" @click="emit('remove')" />
+                    <v-btn class="member-summary__remove" icon="mdi-trash-outline" variant="text" size="small" @click="emit('remove')" />
                 </v-col>
             </v-row>
         </v-card-text>
@@ -45,4 +45,29 @@ const displayFields: Record<keyof TMemberInfo, string> = {
 
 </script>
 
-<style scoped></style>
+<style scoped>
+/*
+ * Was `border="sm grey-lighten-2" color="grey-lighten-3"` - two LITERAL light
+ * greys, i.e. a pale slab with a pale frame drawn straight across the dark
+ * theme. The design draws an added-member row as an inset on the card it sits
+ * in, so it takes `--hover` (the neutral wash the chips and avatars use) on
+ * `--border`, at the inner radius.
+ *
+ * The remove action was `color="red"` - not a token, and a solid red circle the
+ * design never draws. It is the `--err` glyph the rest of the layer uses.
+ */
+.member-summary {
+    background: var(--hover);
+    border: 1px solid var(--border);
+    border-radius: var(--r-inner);
+    color: var(--text);
+}
+
+.member-summary :deep(.v-card-text) {
+    font-size: var(--fs-cell);
+}
+
+.member-summary__remove {
+    color: var(--err);
+}
+</style>

package/components/Card/Toggle.vue

@@ -1,7 +1,7 @@
 <template>
-    <v-card flat border="md black">
+    <v-card flat class="screen-card toggle-card">
         <v-card-text class="d-flex justify-space-between align-center py-0">
-            <p>{{ label }}</p>
+            <p class="toggle-card__label">{{ label }}</p>
             <v-switch v-model="toggle" :color="toggleColor" hide-details />
         </v-card-text>
     </v-card>
@@ -22,4 +22,16 @@ defineProps({
 const toggle = defineModel({default: false})
 </script>
 
-<style scoped></style>
+<style scoped>
+/*
+ * Was `border="md black"` - a 2px LITERAL black frame, which is a black box
+ * drawn across the dark theme. The design draws a settings row as the ordinary
+ * 1px card, so this is `.screen-card` plus the design's cell type on the label
+ * (Vuetify's `<p>` inherits the body size, not the design's).
+ */
+.toggle-card__label {
+    font-size: var(--fs-cell);
+    color: var(--text);
+    margin: 0;
+}
+</style>

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/Carousel.vue

@@ -22,9 +22,7 @@
 
         <div class="edit-btn mb-5" v-if="imgEditable">
           <v-btn
-            color="primary"
-            height="42px"
-            width="100px"
+            class="screen-btn-primary"
             @click.stop="onMediaEdit(item.url, idx)"
           >
             Edit
@@ -32,14 +30,9 @@
         </div>
 
         <div class="delete-btn mb-3" v-if="imgDelete">
-          <v-btn
-            color="red"
-            height="42px"
-            width="100px"
-            @click.stop="onMediaDelete(item.url)"
-          >
+          <AppButton variant="err" @click.stop="onMediaDelete(item.url)">
             Delete
-          </v-btn>
+          </AppButton>
         </div>
       </v-carousel-item>
 
@@ -53,20 +46,15 @@
             <source :src="item.url" />
           </video>
           <div class="play-overlay">
-            <v-btn class="play-btn" icon size="55" color="primary">
+            <v-btn class="play-btn" icon size="55">
               <v-icon icon="mdi-play" size="40" />
             </v-btn>
           </div>
 
           <div class="delete-btn pb-4" v-if="imgDelete">
-            <v-btn
-              color="red"
-              height="42px"
-              width="100px"
-              @click.stop="onMediaDelete(item.url)"
-            >
+            <AppButton variant="err" @click.stop="onMediaDelete(item.url)">
               Delete
-            </v-btn>
+            </AppButton>
           </div>
         </div>
       </v-carousel-item>
@@ -82,19 +70,16 @@
           <v-icon
             :icon="getFileIcon(item.type)"
             size="150"
-            :color="getFileIconColor(getFileIcon(item.type))"
+            :class="getFileIconTone(getFileIcon(item.type))"
           />
-          <div class="text-h6 text-center text-wrap mt-2">{{ item.name }}</div>
+          <div class="screen-card-title text-center text-wrap mt-2">
+            {{ item.name }}
+          </div>
 
           <div class="delete-btn pb-4" v-if="imgDelete">
-            <v-btn
-              color="red"
-              height="42px"
-              width="100px"
-              @click.stop="onMediaDelete(item.url)"
-            >
+            <AppButton variant="err" @click.stop="onMediaDelete(item.url)">
               Delete
-            </v-btn>
+            </AppButton>
           </div>
         </div>
       </v-carousel-item>
@@ -105,7 +90,7 @@
 
   <!-- Dialog for fullscreen view -->
   <v-dialog v-model="isDialogOpen" max-width="700">
-    <v-card>
+    <v-card class="screen-modal">
       <v-btn icon class="close-btn" @click="isDialogOpen = false">
         <v-icon icon="mdi-close" size="40" />
       </v-btn>
@@ -346,14 +331,21 @@ const getFileIcon = (type: string) => {
   return iconMap[type] || "mdi-file-outline";
 };
 
-function getFileIconColor(icon?: string) {
-  if (icon === "mdi-file-pdf-box") return "#F44336"; // Red
-  if (icon === "mdi-file-word-box") return "#2196F3"; // Blue
+/**
+ * The file-type tone. The handoff draws no file-type icon palette at all, so
+ * the six distinctions this screen already made are kept and simply said in the
+ * tokens that carry those tones - the same reading `AttachmentsViewer` took.
+ * The one exception is the archive icon, which was purple: there is no purple
+ * token, so it falls in with the generic files on `--muted`. That IS a change
+ * of meaning and is recorded rather than papered over.
+ */
+function getFileIconTone(icon?: string) {
+  if (icon === "mdi-file-pdf-box") return "tone-err";
+  if (icon === "mdi-file-word-box") return "tone-info";
   if (icon === "mdi-file-excel-box" || icon === "mdi-file-delimited-outline")
-    return "#4CAF50"; // Green
-  if (icon === "mdi-file-powerpoint-box") return "#FF9800"; // Orange
-  if (icon === "mdi-zip-box-outline") return "#9C27B0"; // Purple
-  return "grey";
+    return "tone-ok";
+  if (icon === "mdi-file-powerpoint-box") return "tone-warn";
+  return "tone-muted";
 }
 
 const message = ref("");
@@ -419,6 +411,13 @@ async function downloadFile({
   right: 5%;
 }
 
+/**
+ * DELIBERATELY NOT `.screen-modal__close`. This close sits ON the picture, not
+ * on a card, so the design's borderless muted glyph would be unreadable over a
+ * bright photo in light theme and over a dark one in dark theme. The existing
+ * dark chip is legible on both, and the handoff draws no media lightbox at all
+ * - parity with a readable control wins over a primitive that would disappear.
+ */
 .close-btn {
   position: absolute;
   top: 10px;
@@ -440,8 +439,29 @@ async function downloadFile({
   pointer-events: auto;
 }
 
+/* Was `color="primary"`, i.e. the FOREGROUND token used as a fill. The button
+   the design fills is `--accent-strong` with `--on-accent-strong` ink. */
 .play-btn {
-  border-radius: 9999px;
+  border-radius: var(--r-pill);
+  background: var(--accent-strong);
+  color: var(--on-accent-strong);
+}
+
+/* The file-type tones, on tokens instead of six hard-coded hexes. */
+.tone-err {
+  color: var(--err);
+}
+.tone-info {
+  color: var(--info);
+}
+.tone-ok {
+  color: var(--ok);
+}
+.tone-warn {
+  color: var(--warn);
+}
+.tone-muted {
+  color: var(--muted);
 }
 
 .dialog-video-container {

package/components/Chat/Bubbles.vue

@@ -1,36 +1,32 @@
 <template>
-  <v-card class="mb-2 pa-4 rounded-lg" width="400" elevation="2">
+  <v-card class="chat-bubble screen-card mb-2 pa-4" width="400" elevation="0">
     <v-row no-gutters align="center">
       <v-col cols="auto" class="mr-3">
-        <v-avatar color="surface-variant" size="35">
+        <v-avatar class="chat-bubble__avatar" size="35">
           <v-img v-if="currentUser?.profile" width="15" height="15" />
-          <span v-else class="text-h5">{{ getNameInitials(senderName) }}</span>
+          <span v-else>{{ getNameInitials(senderName) }}</span>
         </v-avatar>
       </v-col>
 
       <v-col class="d-flex flex-column">
-        <span class="text-body-2 font-weight-medium">{{ senderName }}</span>
-        <span class="text-caption text-grey">{{ role }}</span>
+        <span class="chat-bubble__sender">{{ senderName }}</span>
+        <span class="chat-bubble__sub">{{ role }}</span>
       </v-col>
     </v-row>
 
     <v-row no-gutters class="mt-1">
       <v-col>
-        <span class="py-2">{{ message }}</span>
+        <span class="chat-bubble__text py-2">{{ message }}</span>
 
         <v-row no-gutters justify="space-between" align="center" class="mt-1">
           <v-col cols="auto">
-            <span class="text-caption">{{ timestamp }}</span>
+            <span class="chat-bubble__sub">{{ timestamp }}</span>
           </v-col>
-          <v-col
-            v-if="isCurrentUser"
-            cols="auto"
-            class="d-flex align-center bg-grey-200"
-          >
-            <v-icon size="16" class="mr-1 text--secondary"
+          <v-col v-if="isCurrentUser" cols="auto" class="d-flex align-center">
+            <v-icon size="16" class="chat-bubble__sub mr-1"
               >mdi-eye-outline</v-icon
             >
-            <span class="text-caption text--secondary">{{ seenLabel }}</span>
+            <span class="chat-bubble__sub">{{ seenLabel }}</span>
           </v-col>
         </v-row>
       </v-col>
@@ -51,3 +47,36 @@ defineProps<{
 const { currentUser } = useLocalAuth();
 const { getNameInitials } = useUtils();
 </script>
+
+<style scoped>
+.chat-bubble {
+  font-family: var(--font-sans);
+  color: var(--text);
+}
+
+/* Was `color="surface-variant"` with the initials at `text-h5`, i.e. a 24px
+   pair of letters in a 35px circle. The design's avatar is the tone wash with
+   the accent ink, and the initials fit inside it. */
+.chat-bubble__avatar {
+  background: var(--hover);
+  color: var(--text2);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.chat-bubble__sender {
+  font-size: var(--fs-cell);
+  font-weight: 600;
+}
+
+.chat-bubble__text {
+  font-size: var(--fs-cell);
+}
+
+/* The role, the timestamp and the seen label were `text-grey`, `text-caption`
+   and `text--secondary` - three different greys for one sub-line. One tone. */
+.chat-bubble__sub {
+  font-size: var(--fs-chip);
+  color: var(--muted);
+}
+</style>