@7365admin1/layer-common 3.2.2-staging.147 → 3.2.2-staging.149

package/components/BtnUploadFile.vue

@@ -10,12 +10,17 @@
       <v-row no-gutters>
         <v-col v-if="value || readOnly" cols="12">
           <v-row no-gutters>
+            <!-- The strip is one control split in two: the file name, and the
+                 cross that clears it. `rounded=""` on the read-only card was
+                 not "no radius" - Vuetify's `useRounded` treats an empty string
+                 as `true` and adds `.rounded`, i.e. its own 4px. The design's
+                 radius is stated here instead, on both ends. -->
             <v-card
               variant="outlined"
               border="thin"
-              class="px-4 text-caption font-weight-medium"
-              :rounded="readOnly ? '' : '0 s'"
-              height="36"
+              class="btn-input-file__name"
+              :class="{ 'btn-input-file__name--solo': readOnly }"
+              height="40"
               @click="emit('click:view')"
             >
               <v-row no-gutters class="fill-height" align="center">
@@ -26,24 +31,28 @@
               v-if="!readOnly"
               variant="outlined"
               border="s-0 thin"
-              rounded="0 e"
-              class="px-4 d-inline"
-              height="36"
+              class="btn-input-file__clear"
+              height="40"
               @click="emit('click:close')"
             >
               <v-row no-gutters class="fill-height" align="center">
-                <v-icon size="small"> mdi-close </v-icon>
+                <v-icon size="18"> mdi-close </v-icon>
               </v-row>
             </v-card>
           </v-row>
         </v-col>
 
         <v-col v-else cols="12">
+          <!-- This arm is the `v-else` of `v-if="value || readOnly"`, so
+               `value` is always falsy by the time it renders: the old
+               `:prepend-icon="value ? '' : ..."` had an arm that could never be
+               taken, and the icon is unconditional. `screen-btn-ghost` is the
+               design's 40px bordered button while keeping Vuetify's `loading`
+               spinner, which the upload needs and `AppButton` does not have. -->
           <v-btn
-            variant="outlined"
-            border="thin"
-            class="text-none"
-            :prepend-icon="value ? '' : 'mdi-tray-arrow-up'"
+            variant="flat"
+            class="text-none screen-btn-ghost"
+            prepend-icon="mdi-tray-arrow-up"
             :disabled="loading"
             :loading="loading"
             @click="selectAttachment"
@@ -137,3 +146,36 @@ const errorMessage = computed(() => {
   return null;
 });
 </script>
+
+<style scoped>
+/* The design's control box on the attachment strip: 40px, `--r-inner` on the
+   outer corners only (the two cards butt together), a `--line` edge and the
+   13.5px/500 cell type - not Vuetify's `text-caption` scale and 4px radius.
+   `:deep` because the box being styled is the `v-card` root Vuetify renders. */
+.btn-input-file__name,
+.btn-input-file__clear {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+  color: var(--text2);
+  border-color: var(--border);
+}
+
+.btn-input-file__name {
+  padding-inline: 14px;
+  border-start-start-radius: var(--r-inner);
+  border-end-start-radius: var(--r-inner);
+}
+
+/* Read-only: there is no cross beside it, so it is a single rounded box. */
+.btn-input-file__name--solo {
+  border-radius: var(--r-inner);
+}
+
+.btn-input-file__clear {
+  display: inline;
+  padding-inline: 12px;
+  border-start-end-radius: var(--r-inner);
+  border-end-end-radius: var(--r-inner);
+}
+</style>

package/components/DashboardMain.vue

@@ -1683,27 +1683,52 @@ const finalDashboardData = computed<Record<string, any>>(() => {
 
 // ─── Card Value Configs ───────────────────────────────────────────────────────
 
+/**
+ * THE KPI TILE PALETTE.
+ *
+ * Was eleven hand-picked hexes restated in four places and blind to the theme:
+ * the SAME orange glyph on the SAME pink tint in light and in dark, because a
+ * literal cannot follow a theme. Its worst pairing measured 1.36:1 and the one
+ * that actually shipped measured 1.74:1 - the lowest readings in the package,
+ * on the first screen every account type opens.
+ *
+ * The handoff names no colour for a KPI tile. It DOES name four status tones
+ * and their soft fills, and the hexes that were here were already those four
+ * hues (`#1d5f99` blue, `#b73535` red, `#d28722` amber, `#23824f` green). So
+ * each pair is re-pointed at the token it was imitating rather than given a
+ * new colour. That also makes each tile the design's own chip pairing, which
+ * is the ruling this project already follows.
+ */
+const KPI_TONES = {
+  info: { color: "var(--info)", tint: "var(--info-bg)" },
+  err: { color: "var(--err)", tint: "var(--err-bg)" },
+  ok: { color: "var(--ok)", tint: "var(--ok-bg)" },
+  warn: { color: "var(--warn)", tint: "var(--warn-bg)" },
+} as const;
+
 const defaultCardValues: TDashboardCardValue[] = [
   {
     key: "openWorkOrder",
     periodKey: "period",
     title: "Open Work Order",
     icon: "mdi-briefcase",
-    color: "#0b2f47",
+    /** The same tile is `#1d5f99` blue in the other two branches - info. */
+    color: KPI_TONES.info.color,
   },
   {
     key: "taskCompleted",
     periodKey: "period",
     title: "Task Completed",
     icon: "mdi-clipboard-check-outline",
-    color: "#f4a340",
+    /** `utils/status.ts`: "completed" is `ok`. This was the 1.74:1 orange. */
+    color: KPI_TONES.ok.color,
   },
   {
     key: "supplyAlert",
     periodKey: "period",
     title: "Supply Alert",
     icon: "mdi-alert",
-    color: "#d32f2f",
+    color: KPI_TONES.err.color,
   },
 ];
 
@@ -1713,28 +1738,28 @@ const propertyCardValues: TDashboardCardValue[] = [
     periodKey: "period",
     title: "Open Work Order",
     icon: "mdi-briefcase",
-    color: "#1d5f99",
+    color: KPI_TONES.info.color,
   },
   {
     key: "incidents",
     periodKey: "period",
     title: "Open Incidents",
     icon: "mdi-alert",
-    color: "#b73535",
+    color: KPI_TONES.err.color,
   },
   {
     key: "visitors",
     periodKey: "period",
     title: "Visitors",
     icon: "mdi-account-multiple",
-    color: "#d28722",
+    color: KPI_TONES.warn.color,
   },
   {
     key: "facilityBookings",
     periodKey: "period",
     title: "Facility Booking",
     icon: "mdi-office-building",
-    color: "#23824f",
+    color: KPI_TONES.ok.color,
   },
 ];
 
@@ -1744,28 +1769,28 @@ const securityCardValues: TDashboardCardValue[] = [
     periodKey: "period",
     title: "Open Work Order",
     icon: "mdi-briefcase",
-    color: "#1d5f99",
+    color: KPI_TONES.info.color,
   },
   {
     key: "incidents",
     periodKey: "period",
     title: "Open Incidents",
     icon: "mdi-alert",
-    color: "#b73535",
+    color: KPI_TONES.err.color,
   },
   {
     key: "visitors",
     periodKey: "period",
     title: "Visitors",
     icon: "mdi-account-multiple",
-    color: "#d28722",
+    color: KPI_TONES.warn.color,
   },
   {
     key: "patrolCompliance",
     periodKey: "period",
     title: "Patrol Compliance",
     icon: "mdi-office-building",
-    color: "#23824f",
+    color: KPI_TONES.ok.color,
   },
 ];
 
@@ -2094,8 +2119,8 @@ function getPropertyKpiCards() {
       key: "workOrders",
       title: "Open Work Order",
       icon: "mdi-briefcase",
-      color: "#1d5f99",
-      tint: "#d7ecff",
+      color: KPI_TONES.info.color,
+      tint: KPI_TONES.info.tint,
       value: formatNumber(toNumber(workOrderMetric?.count)),
       percentage: toNumber(workOrderMetric?.percentage),
       meta: getMetricMeta(workOrderMetric),
@@ -2106,8 +2131,8 @@ function getPropertyKpiCards() {
       key: "incidents",
       title: "Open Incidents",
       icon: "mdi-alert",
-      color: "#b73535",
-      tint: "#ffdede",
+      color: KPI_TONES.err.color,
+      tint: KPI_TONES.err.tint,
       value: formatNumber(toNumber(incidentMetric?.count)),
       percentage: toNumber(incidentMetric?.percentage),
       meta: getMetricMeta(incidentMetric),
@@ -2118,8 +2143,8 @@ function getPropertyKpiCards() {
       key: "visitors",
       title: "Visitors",
       icon: "mdi-account-multiple",
-      color: "#d28722",
-      tint: "#ffe4bd",
+      color: KPI_TONES.warn.color,
+      tint: KPI_TONES.warn.tint,
       value: formatNumber(toNumber(visitorMetric?.count)),
       percentage: toNumber(visitorMetric?.percentage),
       meta: getMetricMeta(visitorMetric),
@@ -2137,8 +2162,8 @@ function getPropertyKpiCards() {
       key: "facilityBookings",
       title: "Facility Booking",
       icon: "mdi-office-building",
-      color: "#23824f",
-      tint: "#c8f3da",
+      color: KPI_TONES.ok.color,
+      tint: KPI_TONES.ok.tint,
       value: formatNumber(toNumber(facilityMetric?.count)),
       percentage: toNumber(facilityMetric?.percentage),
       meta: getMetricMeta(facilityMetric),
@@ -2172,8 +2197,8 @@ function getSecurityKpiCards() {
       key: "workOrders",
       title: "Open Work Order",
       icon: "mdi-briefcase",
-      color: "#1d5f99",
-      tint: "#d7ecff",
+      color: KPI_TONES.info.color,
+      tint: KPI_TONES.info.tint,
       value: formatNumber(toNumber(workOrderMetric?.count)),
       percentage: toNumber(workOrderMetric?.percentage),
       meta: getMetricMeta(workOrderMetric),
@@ -2184,8 +2209,8 @@ function getSecurityKpiCards() {
       key: "incidents",
       title: "Open Incidents",
       icon: "mdi-alert",
-      color: "#b73535",
-      tint: "#ffdede",
+      color: KPI_TONES.err.color,
+      tint: KPI_TONES.err.tint,
       value: formatNumber(toNumber(incidentMetric?.count)),
       percentage: toNumber(incidentMetric?.percentage),
       meta: getMetricMeta(incidentMetric),
@@ -2196,8 +2221,8 @@ function getSecurityKpiCards() {
       key: "visitors",
       title: "Visitors",
       icon: "mdi-account-multiple",
-      color: "#d28722",
-      tint: "#ffe4bd",
+      color: KPI_TONES.warn.color,
+      tint: KPI_TONES.warn.tint,
       value: formatNumber(toNumber(visitorMetric?.count)),
       percentage: toNumber(visitorMetric?.percentage),
       meta: getMetricMeta(visitorMetric),
@@ -2215,8 +2240,8 @@ function getSecurityKpiCards() {
       key: "patrolCompliance",
       title: "Patrol Compliance",
       icon: "mdi-office-building",
-      color: "#23824f",
-      tint: "#c8f3da",
+      color: KPI_TONES.ok.color,
+      tint: KPI_TONES.ok.tint,
       value: `${toNumber(patrolMetric?.count)}%`,
       percentage: toNumber(patrolMetric?.percentage),
       meta: getMetricMeta(patrolMetric),
@@ -3607,18 +3632,33 @@ async function exportDashboard(format: "PDF" | "Word") {
 
 // ─── Card Color Helpers ───────────────────────────────────────────────────────
 
+/** The rotation an unstyled `cardValues` entry falls into - same four tones. */
+const KPI_ROTATION = [
+  KPI_TONES.info,
+  KPI_TONES.err,
+  KPI_TONES.ok,
+  KPI_TONES.warn,
+] as const;
+
 function getCardColor(index: number) {
-  return ["#155178", "#9f2f29", "#1f8a56", "#b96d17"][index % 4];
+  return KPI_ROTATION[index % KPI_ROTATION.length].color;
 }
 
+/**
+ * A tint for whatever colour the caller gave. `props.cardValues` comes from
+ * eleven applications and still arrives as a raw hex in places, so the hex
+ * matching stays - the token names are matched alongside it, not instead.
+ */
 function getCardTint(color: string, index: number) {
-  const tints = ["#dbeeff", "#f8c6c3", "#d8f5e5", "#ffe7c2"];
-  if (!color) return tints[index % tints.length];
+  if (!color) return KPI_ROTATION[index % KPI_ROTATION.length].tint;
   const n = color.toLowerCase();
-  if (n.includes("f44336") || n.includes("d32f2f")) return "#f8c6c3";
-  if (n.includes("4caf50") || n.includes("43a047")) return "#d8f5e5";
-  if (n.includes("ff9800") || n.includes("ffa726")) return "#ffe7c2";
-  return "#dbeeff";
+  if (n.includes("--err") || n.includes("f44336") || n.includes("d32f2f"))
+    return KPI_TONES.err.tint;
+  if (n.includes("--ok") || n.includes("4caf50") || n.includes("43a047"))
+    return KPI_TONES.ok.tint;
+  if (n.includes("--warn") || n.includes("ff9800") || n.includes("ffa726"))
+    return KPI_TONES.warn.tint;
+  return KPI_TONES.info.tint;
 }
 
 // ─── Generic Helpers ─────────────────────────────────────────────────────────

package/components/Input/DatePicker.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="d-flex flex-column">
-        <v-text-field v-bind="$attrs" ref="datePickerRef" :model-value="dateFormattedReadOnly" autocomplete="off"
+        <v-text-field v-bind="$attrs" class="filter-field" ref="datePickerRef" :model-value="dateFormattedReadOnly" autocomplete="off"
             :placeholder="placeholder" :rules="rules" style="z-index: 10" @click="openDatePicker" @click:clear.stop="clearDate">
             <template #append-inner>
                 <v-icon icon="mdi-calendar" @click.stop="openDatePicker" />

package/components/Input/DateTimePicker.vue

@@ -2,6 +2,7 @@
   <div class="d-flex flex-column">
     <v-text-field
       v-bind="$attrs"
+      class="filter-field"
       ref="dateTimePickerRef"
       :model-value="dateTimeFormattedReadOnly"
       autocomplete="off"

package/components/Input/FileV2.vue

@@ -22,7 +22,7 @@
     <template v-else>
       <v-file-upload v-model="uploadFiles" density="compact" @update:model-value="handleUpdateValue"
         :loading="processing" :disabled="processing" :height="height" :title="title" :accept="accept"
-        :name="`upload_images`" class="text-caption w-100" clearable :multiple="multiple">
+        :name="`upload_images`" class="w-100 file-v2__drop" clearable :multiple="multiple">
         <template #item="{ props: itemProps, file }">
           <v-file-upload-item v-bind="itemProps" lines="one" nav @click="handleClickItem(file)">
             <template #prepend>
@@ -30,8 +30,19 @@
             </template>
 
             <!-- delete button NOT shown in view mode -->
-            <template #clear="{ props: clearProps }">
-              <v-btn v-if="!viewMode" color="primary" @click.stop="handleRemove(file)"></v-btn>
+            <!-- This button had NO icon and NO label, so it drew as an empty
+                 slab, and `color="primary"` filled that slab with the design's
+                 FOREGROUND token (the link ink) rather than a fill. It is the
+                 remove control for one attached file: a plain close glyph. -->
+            <template #clear>
+              <v-btn
+                v-if="!viewMode"
+                icon="mdi-close"
+                variant="text"
+                size="small"
+                aria-label="Remove file"
+                @click.stop="handleRemove(file)"
+              />
             </template>
           </v-file-upload-item>
         </template>
@@ -39,7 +50,7 @@
     </template>
 
     <v-row no-gutters class="w-100" v-if="errorMessage">
-      <p class="text-error w-100 text-center text-subtitle-2">{{ errorMessage }}</p>
+      <p class="text-error w-100 text-center file-v2__error">{{ errorMessage }}</p>
     </v-row>
 
     <ImageCarousel v-model="showImageCarousel" :files="idsArray" :active-file-id="activeImageId" />
@@ -224,12 +235,34 @@ async function downloadFile(id: string, filename: string) {
 
 
 <style scoped>
+/* The drop zone on the design's surface: `--r-inner`, a `--border` edge and the
+   13.5px cell type, instead of Vuetify's 4px radius and `text-caption` scale.
+   `:deep` because every box below is rendered by `v-file-upload`. */
+.file-v2__drop {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  border-radius: var(--r-inner);
+  border-color: var(--border);
+}
+
+.file-v2__drop :deep(.v-file-upload-item) {
+  border-radius: var(--r-inner);
+}
+
 * :deep(.v-file-upload-title) {
-  font-size: 1rem;
-  font-weight: 500;
+  font-family: var(--font-sans);
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  color: var(--text);
 }
 
 * :deep(.v-file-upload-items) {
   min-width: 100%;
 }
+
+.file-v2__error {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+}
 </style>

package/components/Input/InputPhoneNumberV2.vue

@@ -8,7 +8,7 @@
         item-title="dial_code"
         item-value="code"
         hide-details
-        class="px-0"
+        class="px-0 filter-field"
         :density="density"
         style="max-width: 110px"
         :rules="[...props.rules]"
@@ -31,6 +31,7 @@
 
       <v-mask-input
         v-model="input"
+        class="filter-field"
         :mask="currentMask"
         :rules="[...props.rules, validatePhone]"
         ref="maskRef"

package/components/Input/NRICNumber.vue

@@ -1,6 +1,7 @@
 <template>
   <v-text-field
     v-model.trim="model"
+    class="filter-field"
     :rules="rules"
     :maxlength="maxlength"
     :placeholder="placeholder"

package/components/Input/NewDate.vue

@@ -113,6 +113,7 @@ const modifyDatePart = (
 <template>
   <v-text-field
     ref="inputRef"
+    class="filter-field"
     v-model="dateValue"
     placeholder="MM/DD/YYYY"
     @input="formatDate"

package/components/Input/Number.vue

@@ -102,6 +102,7 @@ const restoreCursor = () => {
     ref="inputRef"
     v-model="formattedValue"
     v-bind="attrs"
+    class="filter-field"
     type="text"
     @keydown="handleKeyDown"
   >

package/components/Input/Password.vue

@@ -2,6 +2,7 @@
   <v-text-field
     id="_password"
     v-model="password"
+    class="filter-field"
     placeholder="Password"
     :type="showPassword ? 'text' : 'password'"
     :append-inner-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"

package/components/Input/VehicleNumber.vue

@@ -1,6 +1,7 @@
 <template>
   <v-text-field
     v-model="model"
+    class="filter-field"
     :rules="rules"
     :maxlength="maxlength"
     :placeholder="placeholder"

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.147",
+  "version": "3.2.2-staging.149",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",