@7365admin1/layer-common 3.0.22 → 3.0.24

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>