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

package/components/ScanVisitorQRCode.vue

@@ -9,36 +9,27 @@
   >
     <v-container class="d-flex justify-center" max-height="90vh">
       <!-- QR code reader container -->
-      <v-card
-        elevation="2"
-        class="d-flex flex-column align-center pa-2 w-100 h-100"
-      >
-        <v-toolbar>
-          <v-card-title class="text-h5"> Scan QR Code </v-card-title>
-          <v-spacer />
-          <v-btn
-            color="grey-darken-1"
-            icon="mdi-close"
-            @click="closeDialog()"
-          />
-        </v-toolbar>
-
-        <div
-          id="reader"
-          class="d-flex justify-center align-center w-100 h-100"
-          style="height: calc(100vh - 64px)"
-        >
-          <!-- The QR code scanner box -->
-          <!-- This is where the QR code scanner will be displayed -->
+      <v-card class="screen-modal qr-scanner">
+        <div class="qr-scanner__head">
+          <v-card-title>Scan QR Code</v-card-title>
+          <AppButton variant="icon" icon="mdi-close" @click="closeDialog()" />
         </div>
-        <!-- Show Error Messages -->
-        <div v-if="showNotFoundMessage" class="text-error mt-4 text-h5">
-          <p>{{ errorMessage }}</p>
+
+        <div class="screen-modal__body qr-scanner__body">
+          <div id="reader" class="qr-scanner__reader">
+            <!-- The QR code scanner box -->
+            <!-- This is where the QR code scanner will be displayed -->
+          </div>
+          <!-- Show Error Messages -->
+          <p v-if="showNotFoundMessage" class="qr-scanner__error">{{ errorMessage }}</p>
+          <!-- Switch camera button inside the reader box -->
+          <AppButton
+            icon="mdi-camera-switch"
+            class="qr-scanner__switch"
+            aria-label="Switch camera"
+            @click="switchCamera()"
+          />
         </div>
-        <!-- Switch camera button inside the reader box -->
-        <v-btn color="primary" icon class="mt-4" @click="switchCamera()">
-          <v-icon icon="mdi-camera-switch" large />
-        </v-btn>
       </v-card>
     </v-container>
   </v-dialog>
@@ -60,7 +51,9 @@ const props = defineProps({
 
 const { standardFormatDate } = useUtils();
 
-const { validateVisitorQrCode } = useVisitor();
+const { validateVisitorQrCode, getVisitors } = useVisitor();
+
+const { getPassKeysByPageSearch } = usePassKey();
 
 const emits = defineEmits([
   "closeDialog",
@@ -97,8 +90,6 @@ const handleScanVisitorQRCode = async () => {
         showNotFoundMessage.value = false;
         // Automatically navigate to the scanned URL if it's a valid link
         if (isValidUrl(qrCodeMessage)) {
-          console.log("QR Code value", qrCodeMessage);
-          console.log("Last _id", qrCodeMessage.split("/").pop());
           // get the last _id in the url
           const id = qrCodeMessage.split("/").pop();
           // check if it's a valid mongodb _id
@@ -108,7 +99,6 @@ const handleScanVisitorQRCode = async () => {
               props.site as string,
               id as string
             );
-            console.log("validateVisitorQrCode", response);
             if (response.errorMessage) {
               showNotFoundMessage.value = true;
               errorMessage.value =
@@ -122,9 +112,38 @@ const handleScanVisitorQRCode = async () => {
               emits("openVisitorDataFromScannedQrCodeDialog", response);
             }
           } else {
-            showNotFoundMessage.value = true;
-            errorMessage.value = "Invalid mongodb _id.";
-            showMessage(errorMessage.value, "error");
+            const result: any = await getPassKeysByPageSearch({
+              sites: [props.site as string],
+              search: qrCodeMessage,
+            });
+
+            if (result.items?.length < 1) {
+              showMessage(`Pass or Key ${qrCodeMessage} not found.`, "error");
+              return;
+            }
+
+            const data: any = await getVisitors({
+              site: props.site as string,
+              passOrKey: {
+                keyId: result.items[0]._id,
+                type: result.items[0].passType == "pass-key" ? "key" : "pass",
+              },
+              checkedOut: false,
+            });
+
+            if (data.items?.length < 1) {
+              showMessage(
+                `There are no unchecked-out visitor transactions for the scanned ${
+                  result.items[0].passType == "pass-key" ? "Key" : "Pass"
+                } ${qrCodeMessage}.`,
+                "error"
+              );
+
+              return;
+            }
+
+            closeDialog();
+            emits("openVisitorDataFromScannedQrCodeDialog", data.items[0]);
           }
 
           // window.location.href = qrCodeMessage;
@@ -197,3 +216,48 @@ const stopScanner = () => {
   });
 };
 </script>
+
+<style scoped>
+/* Same scanner frame as the pass-key scanner: the card used to be `w-100`
+   inside the centring container, so keep that width. */
+.qr-scanner {
+  width: 100%;
+}
+
+.qr-scanner__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 12px;
+}
+
+.qr-scanner__body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 4px 20px 20px;
+}
+
+.qr-scanner__reader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 320px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--thead);
+}
+
+.qr-scanner__error {
+  margin: 0;
+  font-size: var(--fs-cell);
+  color: var(--err);
+}
+
+.qr-scanner__switch {
+  width: var(--btn-h);
+  padding: 0;
+}
+</style>

package/components/ScheduleAreaMain.vue

@@ -20,17 +20,18 @@
 
         <template #extension>
           <v-row no-gutters class="w-100 d-flex flex-column">
-            <v-card
-              class="w-100 px-3 d-flex align-center ga-5 py-2"
-              flat
-              :height="60"
-            >
+            <!--
+              A bare `v-card` here paints Vuetify's own `surface`, a shade off
+              the table card it sits inside. A plain row on the card's own
+              background, with both filters on the design's field.
+            -->
+            <div class="w-100 filter-bar d-flex align-center ga-5">
               <v-select
                 v-model="statusFilter"
                 :items="statusOptions"
                 density="compact"
                 hide-details
-                class="mx-2"
+                class="mx-2 filter-field"
                 style="max-width: 160px"
                 item-title="title"
                 item-value="value"
@@ -42,13 +43,13 @@
                 :items="typeOptions"
                 density="compact"
                 hide-details
-                class="mx-2"
+                class="mx-2 filter-field"
                 style="max-width: 160px"
                 item-title="title"
                 item-value="value"
                 label="Type"
               />
-            </v-card>
+            </div>
           </v-row>
         </template>
         <template #actions>
@@ -68,20 +69,18 @@
             <v-spacer />
 
             <v-col cols="auto">
-              <v-chip
+              <StatusChip
                 v-if="isScheduleClosed"
-                color="error"
-                variant="tonal"
+                status="Closed"
                 class="text-capitalize mr-2"
               >
-                <v-icon start>mdi-lock</v-icon>
+                <v-icon size="14">mdi-lock</v-icon>
                 Closed – View Only
-              </v-chip>
+              </StatusChip>
               <v-btn
                 v-if="canViewHistory"
-                class="text-none mr-2"
-                size="large"
-                color="primary"
+                class="text-none mr-2 screen-btn-primary"
+                variant="flat"
                 aria-label="History"
                 @click="openHistory"
               >
@@ -89,9 +88,8 @@
               </v-btn>
               <v-btn
                 v-if="canGenerateChecklist"
-                class="text-none"
-                size="large"
-                color="primary"
+                class="text-none screen-btn-primary"
+                variant="flat"
                 aria-label="Generate"
                 @click="_generateChecklist"
                 :loading="submitting"
@@ -109,25 +107,26 @@
               (item.status && String(item.status).toLowerCase() === 'accepted')
             "
           >
-            <span class="text-capitalize" color="success" variant="tonal">
-              {{ item.acceptedByName || item.acceptedBy || "Accepted" }}
-            </span>
+            <!--
+              `color`/`variant` on a plain `<span>` do nothing - Vuetify only
+              reads them on its own components, so this drew as bare cell text
+              while reading as a tonal green chip. It is the accepted chip the
+              sibling branches already use.
+            -->
+            <StatusChip
+              status="Accepted"
+              class="text-capitalize"
+              :label="item.acceptedByName || item.acceptedBy || 'Accepted'"
+            />
           </div>
           <div v-else-if="isScheduleClosed">
-            <v-chip
-              size="small"
-              color="error"
-              variant="tonal"
-              class="text-capitalize"
-              >Closed</v-chip
-            >
+            <StatusChip status="Closed" class="text-capitalize" />
           </div>
           <div v-else>
             <v-btn
               v-if="canManageScheduleTasks"
               variant="outlined"
-              size="medium"
-              class="text-capitalize px-4 py-2"
+              class="text-capitalize screen-btn-ghost"
               @click.stop="() => _acceptAreaChecklist(item._id)"
             >
               Accept
@@ -146,14 +145,11 @@
         </template>
 
         <template #item.status="{ value }">
-          <v-chip
+          <StatusChip
             class="text-capitalize"
-            :color="getStatusColor(value)"
-            variant="flat"
-            pill
-          >
-            {{ value || "No Status" }}
-          </v-chip>
+            :status="value"
+            :label="value || 'No Status'"
+          />
         </template>
       </TableMain></v-col
     >
@@ -262,27 +258,6 @@ watchEffect(() => {
   }
 });
 
-const getStatusColor = (status: unknown): string => {
-  if (!status) return "grey";
-
-  const normalized = String(status).toLowerCase();
-
-  switch (normalized) {
-    case "open":
-      return "grey";
-    case "ongoing":
-      return "primary";
-    case "completed":
-    case "accepted":
-      return "success";
-    case "closed":
-    case "rejected":
-      return "error";
-    default:
-      return "secondary";
-  }
-};
-
 function showMessage(msg: string, color: string = "error") {
   message.value = msg;
   messageColor.value = color;

package/components/ScheduleTaskForm.vue

@@ -1,26 +1,24 @@
 <template>
   <v-dialog v-model="show" max-width="680" persistent>
-    <v-card class="d-flex flex-column" max-height="90vh">
-      <v-toolbar flat color="grey-lighten-4">
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <v-toolbar-title class="text-h6 font-weight-bold">
-            {{
-              props.mode === "edit"
-                ? "Edit Schedule Task"
-                : "Create Schedule Task"
-            }}
-          </v-toolbar-title>
-          <v-spacer />
-          <v-btn
-            icon="mdi-close"
-            variant="text"
-            @click="close"
-            :disabled="submitting"
-          />
-        </v-row>
-      </v-toolbar>
-
-      <v-card-text class="pa-4 flex-grow-1" style="overflow-y: auto">
+    <v-card class="screen-modal">
+      <v-card-title class="d-flex align-center">
+        {{
+          props.mode === "edit"
+            ? "Edit Schedule Task"
+            : "Create Schedule Task"
+        }}
+        <v-spacer />
+        <v-btn
+          icon="mdi-close"
+          variant="text"
+          class="screen-modal__close"
+          aria-label="Close"
+          @click="close"
+          :disabled="submitting"
+        />
+      </v-card-title>
+
+      <v-card-text class="screen-modal__body">
         <v-form ref="formRef" v-model="valid">
           <v-row dense>
             <v-col cols="12">
@@ -30,15 +28,15 @@
                 v-model="subject"
                 variant="outlined"
                 density="comfortable"
+                class="filter-field mb-4"
                 placeholder="Enter task title"
                 hide-details="auto"
-                class="mb-4"
               />
             </v-col>
 
             <v-col cols="12">
               <InputLabel for="date-range" title="Select Dates" required />
-              <v-sheet border rounded class="pa-4 mb-4" color="grey-lighten-5">
+              <div class="task-form__panel mb-4">
                 <v-date-picker
                   v-model="pickerDates"
                   multiple
@@ -49,7 +47,7 @@
                   class="ma-0"
                 />
                 <v-divider class="my-3" />
-                <div class="text-caption text-medium-emphasis mb-2">
+                <div class="task-form__hint mb-2">
                   {{ selectedDates.length }} date(s) selected
                 </div>
                 <div
@@ -66,10 +64,10 @@
                     {{ date }}
                   </v-chip>
                 </div>
-                <div v-else class="text-caption text-disabled">
+                <div v-else class="task-form__hint">
                   No dates selected. Click on the calendar to select dates.
                 </div>
-              </v-sheet>
+              </div>
             </v-col>
 
             <v-col cols="12">
@@ -80,9 +78,9 @@
                 type="time"
                 variant="outlined"
                 density="comfortable"
+                class="filter-field mb-4"
                 hide-details="auto"
                 prepend-inner-icon="mdi-clock-outline"
-                class="mb-4"
               />
             </v-col>
 
@@ -98,10 +96,10 @@
                 multiple
                 variant="outlined"
                 density="comfortable"
+                class="filter-field mb-4"
                 :loading="loadingAreas"
                 placeholder="Choose one or more areas"
                 hide-details="auto"
-                class="mb-4"
                 chips
                 closable-chips
               >
@@ -116,7 +114,7 @@
                   </v-chip>
                   <span
                     v-if="index === 3"
-                    class="text-grey text-caption align-self-center"
+                    class="task-form__hint align-self-center"
                   >
                     (+{{ selectedAreas.length - 3 }} others)
                   </span>
@@ -215,7 +213,7 @@
                             </v-chip>
                           </div>
 
-                          <span v-else class="text-caption text-disabled">
+                          <span v-else class="task-form__hint">
                             No units configured
                           </span>
                         </v-card-text>
@@ -233,38 +231,34 @@
                 v-model="description"
                 variant="outlined"
                 density="comfortable"
+                class="filter-field mb-2"
                 rows="4"
                 placeholder="Add additional details about this task..."
                 hide-details="auto"
-                class="mb-2"
               />
             </v-col>
           </v-row>
         </v-form>
       </v-card-text>
 
-      <v-toolbar class="pa-0" density="compact">
+      <v-card-actions class="screen-modal__footer">
         <v-row no-gutters>
-          <v-col cols="6" class="pa-0">
+          <v-col cols="6" class="pr-2">
             <v-btn
               block
-              variant="text"
-              class="text-none"
-              size="large"
+              variant="outlined"
+              class="text-none screen-btn-ghost"
               @click="close"
-              height="48"
               :disabled="submitting"
             >
               Cancel
             </v-btn>
           </v-col>
-          <v-col cols="6" class="pa-0">
+          <v-col cols="6" class="pl-2">
             <v-btn
               block
               variant="flat"
-              color="primary"
-              class="text-none font-weight-bold rounded-0"
-              height="48"
+              class="text-none screen-btn-primary"
               @click="submitTask"
               :loading="submitting"
             >
@@ -272,7 +266,7 @@
             </v-btn>
           </v-col>
         </v-row>
-      </v-toolbar>
+      </v-card-actions>
     </v-card>
   </v-dialog>
 
@@ -568,3 +562,28 @@ watch(
   { immediate: false }
 );
 </script>
+
+<style scoped>
+/* Was `<v-sheet border rounded color="grey-lighten-5">` - a fixed light grey
+   that stayed light on the dark theme. The design has no calendar panel, so
+   this is the estate's own card surface and border, nothing invented. */
+.task-form__panel {
+  padding: 16px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--card);
+}
+
+/* Replaces `text-caption text-disabled` / `text-medium-emphasis` / `text-grey`,
+   three different Vuetify greys doing the same job.
+
+   `--text2`, not `--muted`: the design is silent on this hint line, and `--muted`
+   at 12px measured 3.24:1 on the light card. That pairing would have been OURS,
+   not the design's, so it is fixed here with an existing token rather than
+   recorded. `--text2` measures 8.2:1. */
+.task-form__hint {
+  font-size: var(--fs-chip-lg);
+  font-weight: 600;
+  color: var(--text2);
+}
+</style>