@7365admin1/layer-common 3.0.21 → 3.0.23

package/components/Nfc/PatrolReport/MonthlyReportTab.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <ReportFilters
+      :model-value="filters"
+      :options="options"
+      @update:model-value="$emit('update:filters', $event)"
+      @export="$emit('export')"
+    />
+
+    <v-divider :thickness="1" class="border-opacity-100" />
+
+    <template v-if="report">
+      <ReportLocationHeader :location="report.location" />
+      <v-divider :thickness="1" class="border-opacity-100 mb-6" />
+      <SummaryReportTable :title="report.title" :rows="report.rows" />
+    </template>
+
+    <ReportEmptyState
+      v-else-if="!loading"
+      title="No Monthly Report Selected"
+      message="Please select a route, time range, and date to view the monthly report"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  NFCPatrolReportFilterOptions,
+  NFCPatrolReportFilters,
+} from "../../../types/nfc-patrol-report";
+import { useNFCPatrolMonthlyReport } from "../../../composables/useNFCPatrolMonthlyReport";
+import ReportEmptyState from "./ReportEmptyState.vue";
+import ReportFilters from "./ReportFilters.vue";
+import ReportLocationHeader from "./ReportLocationHeader.vue";
+import SummaryReportTable from "./SummaryReportTable.vue";
+
+const props = defineProps<{
+  active: boolean;
+  filters: NFCPatrolReportFilters;
+  options: NFCPatrolReportFilterOptions;
+}>();
+
+defineEmits<{
+  "update:filters": [value: NFCPatrolReportFilters];
+  export: [];
+}>();
+
+const { report, loading, fetchReport } = useNFCPatrolMonthlyReport(props.filters);
+
+watch(
+  () => [props.filters.route, props.filters.timeRange, props.filters.date, props.active],
+  () => {
+    if (props.active) {
+      void fetchReport();
+    }
+  },
+  { immediate: true },
+);
+</script>

package/components/Nfc/PatrolReport/PatrolActivityTable.vue

@@ -0,0 +1,81 @@
+<template>
+  <v-card variant="flat" rounded="lg">
+    <v-card-title>Patrol Activity</v-card-title>
+
+    <v-card-text class="pa-0">
+      <v-table class="border-thin">
+        <thead>
+          <tr>
+            <th>Checkpoints</th>
+            <th>Start - End Time</th>
+            <th>
+              Travel time<br />
+              <span class="text-caption text-medium-emphasis">Actual/Expected</span>
+            </th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="activity in activities"
+            :key="activity.id"
+            :class="{ 'cursor-pointer': activity.status === 'Skipped' }"
+            @click="handleActivityClick(activity)"
+          >
+            <td>{{ activity.checkpoint }}</td>
+            <td>
+              <v-icon size="small" class="mr-1">mdi-clock-outline</v-icon>
+              {{ activity.startTime }}
+              <v-icon size="small" class="mx-2">mdi-arrow-right</v-icon>
+              <v-icon size="small" class="mr-1">mdi-clock-outline</v-icon>
+              {{ activity.endTime }}
+            </td>
+            <td>
+              <v-icon size="small" class="mr-1">mdi-clock-outline</v-icon>
+              {{ activity.actualTime }} / {{ activity.expectedTime }}
+            </td>
+            <td>
+              <v-chip :color="statusColor(activity.status)" size="small" variant="flat">
+                {{ activity.status }}
+                <v-icon v-if="activity.status === 'Skipped'" size="small" class="ml-1">
+                  mdi-flag
+                </v-icon>
+              </v-chip>
+            </td>
+          </tr>
+        </tbody>
+      </v-table>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import type {
+  NFCPatrolActivity,
+  NFCPatrolActivityStatus,
+} from "../../../types/nfc-patrol-report";
+
+defineProps<{
+  activities: NFCPatrolActivity[];
+}>();
+
+const emit = defineEmits<{
+  remarks: [activity: NFCPatrolActivity];
+}>();
+
+function statusColor(status: NFCPatrolActivityStatus) {
+  return status === "Completed" ? "success" : "error";
+}
+
+function handleActivityClick(activity: NFCPatrolActivity) {
+  if (activity.status === "Skipped") {
+    emit("remarks", activity);
+  }
+}
+</script>
+
+<style scoped>
+.cursor-pointer {
+  cursor: pointer;
+}
+</style>

package/components/Nfc/PatrolReport/PatrolReportTab.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <ReportFilters
+      :model-value="filters"
+      :options="options"
+      @update:model-value="$emit('update:filters', $event)"
+      @export="$emit('export')"
+    />
+
+    <v-divider :thickness="1" class="border-opacity-100" />
+
+    <template v-if="report">
+      <ReportLocationHeader :location="report.location" />
+      <v-divider :thickness="1" class="border-opacity-100 mb-6" />
+
+      <PatrolRouteSummary v-if="report.routeSummary" :summary="report.routeSummary" />
+
+      <PatrolActivityTable
+        v-if="report.activities.length"
+        :activities="report.activities"
+        @remarks="openRemarksDialog"
+      />
+    </template>
+
+    <ReportEmptyState v-else-if="!loading" />
+
+    <RemarksDialog v-model="dialogRemarks" :remarks="selectedActivityRemarks" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  NFCPatrolReportFilterOptions,
+  NFCPatrolReportFilters,
+} from "../../../types/nfc-patrol-report";
+import { useNFCPatrolReport } from "../../../composables/useNFCPatrolReport";
+import PatrolActivityTable from "./PatrolActivityTable.vue";
+import PatrolRouteSummary from "./PatrolRouteSummary.vue";
+import RemarksDialog from "./RemarksDialog.vue";
+import ReportEmptyState from "./ReportEmptyState.vue";
+import ReportFilters from "./ReportFilters.vue";
+import ReportLocationHeader from "./ReportLocationHeader.vue";
+
+const props = defineProps<{
+  active: boolean;
+  filters: NFCPatrolReportFilters;
+  options: NFCPatrolReportFilterOptions;
+}>();
+
+defineEmits<{
+  "update:filters": [value: NFCPatrolReportFilters];
+  export: [];
+}>();
+
+const {
+  report,
+  loading,
+  selectedActivityRemarks,
+  dialogRemarks,
+  fetchReport,
+  openRemarksDialog,
+} = useNFCPatrolReport(props.filters);
+
+watch(
+  () => [props.filters.route, props.filters.timeRange, props.filters.date, props.active],
+  () => {
+    if (props.active) {
+      void fetchReport();
+    }
+  },
+  { immediate: true },
+);
+</script>

package/components/Nfc/PatrolReport/PatrolRouteSummary.vue

@@ -0,0 +1,63 @@
+<template>
+  <v-card class="mb-6" variant="flat" rounded="lg">
+    <v-card-title class="d-flex justify-space-between align-center">
+      <span>Patrol Route Summary: {{ summary.routeName }}</span>
+      <span class="text-body-2 text-medium-emphasis">
+        Tolerance: {{ summary.tolerance }} mins
+      </span>
+    </v-card-title>
+
+    <v-card-text class="pa-0">
+      <v-table class="border-thin">
+        <thead>
+          <tr>
+            <th>Time</th>
+            <th>Start</th>
+            <th>End</th>
+            <th>Total travel time</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="font-weight-medium">Schedule</td>
+            <td>
+              <v-icon size="small" class="mr-1">mdi-clock-outline</v-icon>
+              {{ summary.schedule.start }}
+            </td>
+            <td>
+              <v-icon size="small" class="mr-1">mdi-clock-outline</v-icon>
+              {{ summary.schedule.end }}
+            </td>
+            <td>
+              <v-icon size="small" class="mr-1">mdi-clock-outline</v-icon>
+              {{ summary.schedule.totalTime }}
+            </td>
+          </tr>
+          <tr>
+            <td class="font-weight-medium">Actual</td>
+            <td>
+              <v-icon size="small" class="mr-1">mdi-clock-outline</v-icon>
+              {{ summary.actual.start }}
+            </td>
+            <td>
+              <v-icon size="small" class="mr-1">mdi-clock-outline</v-icon>
+              {{ summary.actual.end }}
+            </td>
+            <td>
+              <v-icon size="small" class="mr-1">mdi-clock-outline</v-icon>
+              {{ summary.actual.totalTime }}
+            </td>
+          </tr>
+        </tbody>
+      </v-table>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import type { NFCPatrolRouteSummary } from "../../../types/nfc-patrol-report";
+
+defineProps<{
+  summary: NFCPatrolRouteSummary;
+}>();
+</script>

package/components/Nfc/PatrolReport/RemarksDialog.vue

@@ -0,0 +1,37 @@
+<template>
+  <v-dialog :model-value="modelValue" max-width="600" persistent>
+    <v-card rounded="xl">
+      <v-card-title class="d-flex align-center pa-6">
+        <span class="text-h6">Skip Checkpoint Remarks</span>
+        <v-spacer />
+        <v-btn icon="mdi-close" variant="text" size="small" @click="close" />
+      </v-card-title>
+
+      <v-card-text class="px-6 pb-6">
+        <v-textarea
+          :model-value="remarks"
+          variant="outlined"
+          rounded="lg"
+          readonly
+          rows="4"
+          hide-details
+        />
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  modelValue: boolean;
+  remarks: string;
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+}>();
+
+function close() {
+  emit("update:modelValue", false);
+}
+</script>

package/components/Nfc/PatrolReport/ReportEmptyState.vue

@@ -0,0 +1,24 @@
+<template>
+  <v-card class="text-center pa-12" variant="outlined" rounded="lg">
+    <v-icon size="64" color="grey-lighten-1" class="mb-4">
+      mdi-clipboard-text-outline
+    </v-icon>
+    <h3 class="text-h6 mb-2">{{ title }}</h3>
+    <p class="text-body-2 text-medium-emphasis">
+      {{ message }}
+    </p>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    title?: string;
+    message?: string;
+  }>(),
+  {
+    title: "No Patrol Report Selected",
+    message: "Please select a route, time range, and date to view the patrol report",
+  },
+);
+</script>

package/components/Nfc/PatrolReport/ReportFilters.vue

@@ -0,0 +1,88 @@
+<template>
+  <v-row no-gutters class="mb-6">
+    <v-col cols="12" md="3" class="pr-md-2 mb-2 mb-md-0">
+      <v-select
+        :model-value="modelValue.route"
+        :items="options.routes"
+        label="Select Route"
+        variant="outlined"
+        density="comfortable"
+        rounded="lg"
+        hide-details
+        bg-color="white"
+        @update:model-value="updateFilter('route', $event)"
+      />
+    </v-col>
+
+    <v-col cols="12" md="2" class="px-md-2 mb-2 mb-md-0">
+      <v-select
+        :model-value="modelValue.timeRange"
+        :items="options.timeRanges"
+        label="Time Range"
+        variant="outlined"
+        density="comfortable"
+        rounded="lg"
+        hide-details
+        bg-color="white"
+        @update:model-value="updateFilter('timeRange', $event)"
+      />
+    </v-col>
+
+    <v-col cols="12" md="2" class="px-md-2 mb-2 mb-md-0">
+      <v-text-field
+        :model-value="modelValue.date"
+        type="date"
+        variant="outlined"
+        density="comfortable"
+        rounded="lg"
+        hide-details
+        bg-color="white"
+        @update:model-value="updateFilter('date', $event)"
+      />
+    </v-col>
+
+    <v-spacer />
+
+    <v-col cols="12" md="2" class="pl-md-2">
+      <v-btn
+        variant="outlined"
+        block
+        size="large"
+        rounded="lg"
+        class="text-none"
+        prepend-icon="mdi-export"
+        @click="$emit('export')"
+      >
+        Export
+      </v-btn>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import type {
+  NFCPatrolReportFilterOptions,
+  NFCPatrolReportFilters,
+} from "../../../types/nfc-patrol-report";
+
+const props = defineProps<{
+  modelValue: NFCPatrolReportFilters;
+  options: NFCPatrolReportFilterOptions;
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [value: NFCPatrolReportFilters];
+  export: [];
+}>();
+
+function updateFilter(key: keyof NFCPatrolReportFilters, value: unknown) {
+  if (typeof value !== "string") {
+    return;
+  }
+
+  emit("update:modelValue", {
+    ...props.modelValue,
+    [key]: value,
+  });
+}
+</script>

package/components/Nfc/PatrolReport/ReportLocationHeader.vue

@@ -0,0 +1,17 @@
+<template>
+  <v-card class="text-center pa-8 mt-2" variant="flat" rounded="lg">
+    <v-icon size="64" class="mb-4">mdi-office-building</v-icon>
+    <h2 class="text-h5 mb-2">{{ location.name }}</h2>
+    <p class="text-body-2 text-medium-emphasis">
+      {{ location.address }}
+    </p>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import type { NFCPatrolReportLocation } from "../../../types/nfc-patrol-report";
+
+defineProps<{
+  location: NFCPatrolReportLocation;
+}>();
+</script>

package/components/Nfc/PatrolReport/SummaryReportTable.vue

@@ -0,0 +1,51 @@
+<template>
+  <v-card class="mb-6" variant="flat" rounded="lg">
+    <v-card-title>{{ title }}</v-card-title>
+
+    <v-card-text>
+      <v-table class="border-thin">
+        <thead>
+          <tr>
+            <th>Patrol Route Name</th>
+            <th>Security Check Schedule</th>
+            <th>Checked</th>
+            <th>Missed</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="row in rows" :key="row.id">
+            <td>{{ row.routeName }}</td>
+            <td>
+              <v-icon size="small" class="mr-1">mdi-clock-outline</v-icon>
+              {{ row.securityCheckSchedule }}
+            </td>
+            <td>{{ row.checked }}</td>
+            <td>{{ row.missed }}</td>
+            <td>
+              <span :class="statusClass(row.status)">
+                {{ row.status }}
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </v-table>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import type {
+  NFCPatrolReportSummaryRow,
+  NFCPatrolReportSummaryStatus,
+} from "../../../types/nfc-patrol-report";
+
+defineProps<{
+  title: string;
+  rows: NFCPatrolReportSummaryRow[];
+}>();
+
+function statusClass(status: NFCPatrolReportSummaryStatus) {
+  return status === "Completed" ? "text-success" : "text-error";
+}
+</script>

package/components/ScheduleTaskMain.vue

@@ -162,7 +162,9 @@
                   class="mb-2"
                 >
                   <v-col cols="12">
-                    <div class="text-subtitle-2 font-weight-bold mb-2">Units Under Selected Areas:</div>
+                    <div class="text-subtitle-2 font-weight-bold mb-2">
+                      Units Under Selected Areas:
+                    </div>
                     <v-card variant="outlined" rounded>
                       <v-list density="compact" nav>
                         <template
@@ -179,33 +181,62 @@
                               <v-icon size="16">
                                 {{
                                   openViewAreas.includes(area.value || area._id)
-                                    ? 'mdi-chevron-down'
-                                    : 'mdi-chevron-right'
+                                    ? "mdi-chevron-down"
+                                    : "mdi-chevron-right"
                                 }}
                               </v-icon>
                             </template>
                             <template #append>
                               <v-progress-circular
-                                v-if="loadingViewUnits && !(area.value || area._id in fetchedViewAreaUnits)"
+                                v-if="
+                                  loadingViewUnits &&
+                                  !(
+                                    area.value ||
+                                    area._id in fetchedViewAreaUnits
+                                  )
+                                "
                                 size="14"
                                 width="2"
                                 indeterminate
                                 color="primary"
                               />
-                              <v-chip v-else size="x-small" variant="tonal" color="primary">
-                                {{ (fetchedViewAreaUnits[area.value || area._id] || []).length }}
+                              <v-chip
+                                v-else
+                                size="x-small"
+                                variant="tonal"
+                                color="primary"
+                              >
+                                {{
+                                  (
+                                    fetchedViewAreaUnits[
+                                      area.value || area._id
+                                    ] || []
+                                  ).length
+                                }}
                               </v-chip>
                             </template>
                           </v-list-item>
                           <v-expand-transition>
-                            <div v-show="openViewAreas.includes(area.value || area._id)">
+                            <div
+                              v-show="
+                                openViewAreas.includes(area.value || area._id)
+                              "
+                            >
                               <v-card-text class="px-3 py-2">
                                 <div
-                                  v-if="(fetchedViewAreaUnits[area.value || area._id] || []).length > 0"
+                                  v-if="
+                                    (
+                                      fetchedViewAreaUnits[
+                                        area.value || area._id
+                                      ] || []
+                                    ).length > 0
+                                  "
                                   class="d-flex flex-wrap ga-3"
                                 >
                                   <v-chip
-                                    v-for="unit in fetchedViewAreaUnits[area.value || area._id]"
+                                    v-for="unit in fetchedViewAreaUnits[
+                                      area.value || area._id
+                                    ]"
                                     :key="unit.unit"
                                     size="small"
                                     variant="tonal"
@@ -213,7 +244,9 @@
                                     {{ unit.name }}
                                   </v-chip>
                                 </div>
-                                <span v-else class="text-caption text-disabled">No units configured</span>
+                                <span v-else class="text-caption text-disabled"
+                                  >No units configured</span
+                                >
                               </v-card-text>
                             </div>
                           </v-expand-transition>
@@ -371,7 +404,9 @@ const messageSnackbar = ref(false);
 const messageColor = ref("success");
 
 const loadingViewUnits = ref(false);
-const fetchedViewAreaUnits = ref<Record<string, { name: string; unit: string }[]>>({});
+const fetchedViewAreaUnits = ref<
+  Record<string, { name: string; unit: string }[]>
+>({});
 const openViewAreas = ref<string[]>([]);
 
 const toggleViewArea = (id: string) => {
@@ -528,7 +563,7 @@ async function _deleteScheduleTask() {
 
     const response = await deleteScheduleTask(id);
     dialogDeleteTask.value = false;
-    showMessage(response?.message, "success");
+    showMessage("Scheduled task successfully deleted.", "success");
 
     await getTaskRefresh();
   } catch (error: any) {