@7365admin1/layer-common 3.0.31-staging.12 → 3.0.31-staging.14

package/components/DashboardMain.vue

@@ -984,60 +984,44 @@
               <div
                 v-for="item in formattedActivePatrolItems"
                 :key="item.id || item._id"
-                class="d-flex align-center justify-space-between"
-                style="
-                  padding: 16px 20px;
-                  border: 1px solid #e2e8f0;
-                  border-radius: 12px;
-                  margin-bottom: 12px;
-                  background-color: #ffffff;
-                  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
-                "
+                class="active-patrol-row"
               >
-                <div style="flex: 1; min-width: 140px">
-                  <strong
-                    style="
-                      display: block;
-                      font-size: 15px;
-                      font-weight: 700;
-                      color: #0b2f47;
-                      margin-bottom: 4px;
-                    "
-                    >{{ item.title || item.name }}</strong
-                  >
-                  <span style="font-size: 13px; color: #94a3b8">{{
-                    item.subtitle || item.location || ""
-                  }}</span>
+                <div class="active-patrol-main">
+                  <strong>{{ item.title || item.name }}</strong>
+                  <span>{{ item.subtitle || item.location || "" }}</span>
                 </div>
 
-                <div
-                  style="flex: 1; display: flex; align-items: center; gap: 12px"
-                >
-                  <AvatarMain
-                    :name="item.person || item.assignedTo"
-                    :size="36"
-                  />
-                  <span style="font-size: 14px; color: #64748b">{{
-                    item.person || item.assignedTo
-                  }}</span>
+                <div class="active-patrol-assignees">
+                  <div class="active-patrol-assignee">
+                    <AvatarMain :name="item.primaryAssignee" :size="24" />
+                    <span>{{ item.primaryAssignee }}</span>
+                  </div>
+                  <span
+                    v-if="item.extraAssigneeCount > 0"
+                    class="active-patrol-more-pill active-patrol-tooltip"
+                    :data-tooltip="item.extraAssignees.join(', ')"
+                  >
+                    +{{ item.extraAssigneeCount }}
+                  </span>
                 </div>
 
-                <div style="flex: 1; display: flex; justify-content: center">
+                <div class="active-patrol-statuses">
                   <div
-                    :style="getPatrolStatusStyle(item.status)"
-                    style="
-                      padding: 6px 16px;
-                      border-radius: 20px;
-                      font-size: 13px;
-                      font-weight: 500;
-                      text-transform: capitalize;
-                    "
+                    class="active-patrol-status-pill"
+                    :style="getPatrolStatusStyle(item.primaryStatus)"
                   >
-                    {{ item.status }}
+                    {{ item.primaryStatus }}
                   </div>
+                  <span
+                    v-if="item.extraStatusCount > 0"
+                    class="active-patrol-more-pill active-patrol-tooltip"
+                    :data-tooltip="item.extraStatuses.join(', ')"
+                  >
+                    +{{ item.extraStatusCount }}
+                  </span>
                 </div>
 
-                <div style="flex: 0 0 auto; text-align: right">
+                <div class="active-patrol-action">
                   <v-btn
                     variant="outlined"
                     class="text-none font-weight-medium"
@@ -2767,18 +2751,23 @@ const activePatrolItems = computed<any[]>(
 
 const formattedActivePatrolItems = computed<any[]>(() => {
   return activePatrolItems.value.map((item) => {
-    let status = item.status;
-    if (Array.isArray(status)) {
-      status = status.join(", ");
-    }
-    let person = item.person || item.assignedTo || "Unassigned";
-    if (Array.isArray(person)) {
-      person = person.join(", ");
-    }
+    const statuses = normalizeListValue(item.status || "Pending");
+    const assignees = normalizeListValue(
+      item.person || item.assignedTo || "Unassigned"
+    );
+
     return {
       ...item,
-      status,
-      person,
+      status: statuses.join(", "),
+      statuses,
+      primaryStatus: statuses[0] || "Pending",
+      extraStatuses: statuses.slice(1),
+      extraStatusCount: Math.max(0, statuses.length - 1),
+      person: assignees.join(", "),
+      assignees,
+      primaryAssignee: assignees[0] || "Unassigned",
+      extraAssignees: assignees.slice(1),
+      extraAssigneeCount: Math.max(0, assignees.length - 1),
     };
   });
 });
@@ -3948,6 +3937,20 @@ function normalizeStatus(value: any) {
   return text.replace(/[_-]+/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
 }
 
+function normalizeListValue(value: any) {
+  if (Array.isArray(value)) {
+    return value
+      .flatMap((entry) => normalizeListValue(entry))
+      .map((entry) => String(entry).trim())
+      .filter(Boolean);
+  }
+
+  return String(value || "")
+    .split(",")
+    .map((entry) => entry.trim())
+    .filter(Boolean);
+}
+
 function getStatusTone(status: any) {
   const s = String(status || "").toLowerCase();
   if (
@@ -4415,6 +4418,151 @@ function formatDashboardTime(value?: string) {
   border: 2px solid #f9c97c;
 }
 
+.active-patrol-row {
+  align-items: center;
+  background-color: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
+  display: grid;
+  gap: 10px;
+  grid-template-columns: 150px minmax(0, 1fr) max-content max-content;
+  margin-bottom: 12px;
+  min-height: 64px;
+  overflow: visible;
+  padding: 12px 14px;
+}
+
+.active-patrol-main {
+  min-width: 0;
+}
+
+.active-patrol-main strong {
+  color: #0b2f47;
+  display: block;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.25;
+  margin-bottom: 3px;
+  overflow-wrap: anywhere;
+}
+
+.active-patrol-main span {
+  color: #94a3b8;
+  display: block;
+  font-size: 11px;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+
+.active-patrol-assignees {
+  align-items: center;
+  display: flex;
+  gap: 6px;
+  min-width: 0;
+}
+
+.active-patrol-assignee {
+  align-items: center;
+  background: #f8fafc;
+  border: 1px solid #e7edf3;
+  border-radius: 999px;
+  display: inline-flex;
+  flex: 1 1 auto;
+  gap: 6px;
+  max-width: 100%;
+  min-width: 0;
+  padding: 2px 8px 2px 3px;
+}
+
+.active-patrol-assignee span {
+  color: #475569;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.2;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.active-patrol-statuses {
+  align-items: center;
+  display: flex;
+  gap: 6px;
+  justify-content: flex-start;
+  min-width: 0;
+}
+
+.active-patrol-status-pill {
+  border-radius: 20px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.2;
+  padding: 5px 10px;
+  text-transform: capitalize;
+  white-space: nowrap;
+}
+
+.active-patrol-more-pill {
+  align-items: center;
+  background: #eef3f8;
+  border: 1px solid #dbe4ed;
+  border-radius: 999px;
+  color: #607386;
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: 11px;
+  font-weight: 800;
+  height: 24px;
+  justify-content: center;
+  line-height: 1;
+  min-width: 30px;
+  padding: 0 8px;
+  position: relative;
+  white-space: nowrap;
+}
+
+.active-patrol-action {
+  justify-self: end;
+  text-align: right;
+}
+
+.active-patrol-tooltip::after {
+  background: #0f2638;
+  border-radius: 6px;
+  bottom: calc(100% + 8px);
+  box-shadow: 0 8px 24px rgba(15, 38, 56, 0.18);
+  color: #ffffff;
+  content: attr(data-tooltip);
+  font-size: 11px;
+  font-weight: 600;
+  left: 50%;
+  line-height: 1.35;
+  max-width: 260px;
+  opacity: 0;
+  padding: 7px 9px;
+  pointer-events: none;
+  position: absolute;
+  text-align: left;
+  transform: translate(-50%, 4px);
+  transition: opacity 0.14s ease, transform 0.14s ease;
+  white-space: normal;
+  width: max-content;
+  z-index: 5;
+}
+
+.active-patrol-tooltip:hover::after {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+
+@media (max-width: 960px) {
+  .active-patrol-row {
+    grid-template-columns: 120px minmax(0, 1fr) max-content max-content;
+  }
+}
+
 .figma-icon-badge {
   align-items: center;
   border-radius: 50%;

package/components/VisitorForm.vue

@@ -12,7 +12,7 @@
       <div class="w-100 d-flex justify-space-between ga-2">
         <span class="text-subtitle-1 w-100 font-weight-bold mb-3">{{
           formTitle
-        }}</span>
+          }}</span>
         <span v-if="withStep2 || withStep3" class="text-subtitle-2 font-weight-bold" style="text-wrap: nowrap">Step
           <span class="text-primary-button">{{ contractorStep }}</span>/{{ withStep3 ? 3 : withStep2 ? 2 : 1 }}</span>
       </div>
@@ -30,7 +30,7 @@
                   <v-list-item-title @click.stop="handleAddNewContractorType" class="d-flex align-center ga-1">
                     <span><v-icon icon="mdi-plus" /></span> Add "<strong>{{
                       contractorTypeInput
-                    }}</strong>" as custom contractor type.
+                      }}</strong>" as custom contractor type.
                   </v-list-item-title>
                 </v-list-item>
               </template>
@@ -99,16 +99,38 @@
                     <span class="text-subtitle-1">{{ item.name || 'Unknown' }}</span>
                     <span class="text-subtitle-1 text-no-wrap">NRIC: {{ item.nric || 'N/A' }}</span>
                   </div>
-                  <div v-if="getPersonContactOptions(item).length < 2 && getPersonPlateOptions(item).length < 2"
-                    class="d-flex align-center justify-space-between ga-4 w-100">
-                    <span class="text-subtitle-1">{{ getPersonContactOptions(item)[0] || 'N/A' }}</span>
-                    <span class="text-subtitle-1 text-no-wrap">{{ getPersonPlateOptions(item)[0] || 'N/A' }}</span>
-                  </div>
                 </v-list-item>
               </v-list>
             </v-menu>
           </v-col>
 
+
+          <v-col v-if="shouldShowField('plateNumber')" cols="12">
+            <v-row>
+              <v-col cols="12">
+                <InputLabel class="text-capitalize" title="Vehicle Number" :required="isVehicleRequired" />
+                <!-- <v-text-field v-model.trim.uppercase="visitor.plateNumber" density="comfortable" /> -->
+                <v-menu v-model="vehicleSearchMenu" location="bottom" offset-y :close-on-content-click="false">
+                  <template #activator="{ props }">
+                    <InputVehicleNumber v-bind="props" v-model="visitor.plateNumber" density="comfortable"
+                      @update:model-value="handleUpdateVehicleNumber" />
+                  </template>
+
+                  <v-list v-if="vehicleSearchResults.length" class="pa-1">
+                    <v-list-item v-for="(item, index) in vehicleSearchResults" :key="item._id || index"
+                      @click="selectAutofillSearchResult(item, 'vehicleNumber')"
+                      class="cursor-pointer nric-search-item">
+                      <div class="d-flex align-center justify-space-between ga-4 w-100">
+                        <span class="text-subtitle-1">{{ item.name || 'Unknown' }}</span>
+                        <span class="text-subtitle-1 text-no-wrap">NRIC: {{ item.nric || 'N/A' }}</span>
+                      </div>
+                    </v-list-item>
+                  </v-list>
+                </v-menu>
+              </v-col>
+            </v-row>
+          </v-col>
+
           <v-col v-if="shouldShowField('deliveryType')" cols="12">
             <v-row>
               <v-col cols="12">
@@ -137,7 +159,7 @@
                       class="d-flex align-center ga-1">
                       <span><v-icon icon="mdi-plus" /></span>Add "<strong>{{
                         companyNameInput
-                      }}</strong>" as new company.
+                        }}</strong>" as new company.
                     </v-list-item-title>
                     <v-list-item-title v-else-if="!companyNameInput && companyNames.length === 0">
                       Start typing to search for companies.
@@ -167,7 +189,7 @@
                       class="d-flex align-center ga-1">
                       <span><v-icon icon="mdi-plus" /></span>Add "<strong>{{
                         companyNameInput
-                      }}</strong>" as new company.
+                        }}</strong>" as new company.
                     </v-list-item-title>
                     <v-list-item-title v-else-if="!companyNameInput && companyNames.length === 0">
                       Start typing to search for companies.
@@ -181,36 +203,7 @@
             </v-col>
           </template>
 
-          <v-col v-if="shouldShowField('plateNumber')" cols="12">
-            <v-row>
-              <v-col cols="12">
-                <InputLabel class="text-capitalize" title="Vehicle Number" :required="isVehicleRequired" />
-                <!-- <v-text-field v-model.trim.uppercase="visitor.plateNumber" density="comfortable" /> -->
-                <v-menu v-model="vehicleSearchMenu" location="bottom" offset-y :close-on-content-click="false">
-                  <template #activator="{ props }">
-                    <InputVehicleNumber v-bind="props" v-model="visitor.plateNumber" density="comfortable"
-                      @update:model-value="handleUpdateVehicleNumber" />
-                  </template>
 
-                  <v-list v-if="vehicleSearchResults.length" class="pa-1">
-                    <v-list-item v-for="(item, index) in vehicleSearchResults" :key="item._id || index"
-                      @click="selectAutofillSearchResult(item, 'vehicleNumber')"
-                      class="cursor-pointer nric-search-item">
-                      <div class="d-flex align-center justify-space-between ga-4 w-100">
-                        <span class="text-subtitle-1">{{ item.name || 'Unknown' }}</span>
-                        <span class="text-subtitle-1 text-no-wrap">NRIC: {{ item.nric || 'N/A' }}</span>
-                      </div>
-                      <div v-if="getPersonContactOptions(item).length < 2 && getPersonPlateOptions(item).length < 2"
-                        class="d-flex align-center justify-space-between ga-4 w-100">
-                        <span class="text-subtitle-1">{{ getPersonContactOptions(item)[0] || 'N/A' }}</span>
-                        <span class="text-subtitle-1 text-no-wrap">{{ getPersonPlateOptions(item)[0] || 'N/A' }}</span>
-                      </div>
-                    </v-list-item>
-                  </v-list>
-                </v-menu>
-              </v-col>
-            </v-row>
-          </v-col>
 
           <v-col v-if="shouldShowField('block')" cols="12">
             <InputLabel class="text-capitalize" title="Block" required />
@@ -431,7 +424,7 @@
           </v-data-table>
 
           <div class="d-flex justify-end mt-8">
-            <v-btn v-if="!skipNonCheckedOutNric"  color="red" variant="flat" size="large" class="text-none px-10"
+            <v-btn v-if="!skipNonCheckedOutNric" color="red" variant="flat" size="large" class="text-none px-10"
               :loading="loading.searchingNonCheckedOut" @click="handleSkipNricNonCheckedOut">
               Skip NRIC: {{ visitor.nric || "N/A" }}
             </v-btn>
@@ -1012,7 +1005,7 @@ function selectAutofillSearchResult(item: Partial<TPeople>, source: Exclude<Auto
   const contactOptions = getPersonContactOptions(item);
   const plateOptions = getPersonPlateOptions(item);
 
-  if (contactOptions.length > 1 || plateOptions.length > 1) {
+  if (source === "nric" && (contactOptions.length > 1 || plateOptions.length > 1)) {
     nricSearchMenu.value = false;
     phoneSearchMenu.value = false;
     vehicleSearchMenu.value = false;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.0.31-staging.12",
+  "version": "3.0.31-staging.14",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {