@7365admin1/layer-common 3.1.2 → 3.1.3-staging.40

package/components/Nfc/PatrolReport/MonthlyReportTable.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="mt-6">
+    <div class="text-h6 font-weight-bold mb-4">
+      {{ title }}
+    </div>
+
+    <v-table class="border rounded-lg">
+      <thead>
+        <tr>
+          <th class="text-left font-weight-bold">Month</th>
+          <th class="text-center font-weight-bold">Checked</th>
+          <th class="text-center font-weight-bold">% Checked</th>
+          <th class="text-center font-weight-bold">Missed</th>
+          <th class="text-center font-weight-bold">% Missed</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr
+          v-for="row in rows"
+          :key="row.month"
+        >
+          <td>{{ row.month }}</td>
+
+          <td class="text-center">
+            {{ row.checked }}
+          </td>
+
+          <td class="text-center">
+            {{ row.checkedPercentage }}%
+          </td>
+
+          <td class="text-center">
+            {{ row.missed }}
+          </td>
+
+          <td class="text-center">
+            {{ row.missedPercentage }}%
+          </td>
+        </tr>
+      </tbody>
+    </v-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { NFCPatrolMonthlyReportRow } from "../../../types/nfc-patrol-report";
+
+defineProps<{
+  title: string;
+  rows: NFCPatrolMonthlyReportRow[];
+}>();
+</script>
+
+<style scoped>
+.v-table {
+  border: 1px solid rgb(var(--v-theme-outline));
+}
+
+thead th {
+  background: transparent;
+  white-space: nowrap;
+  font-weight: 600;
+}
+
+tbody td {
+  height: 56px;
+}
+</style>

package/components/Nfc/PatrolReport/PatrolActivityTable.vue

@@ -7,6 +7,8 @@
         <thead>
           <tr>
             <th>Checkpoints</th>
+            <th>Security Personnel</th>
+            <th>Signature</th>
             <th>Start - End Time</th>
             <th>
               Travel time<br />
@@ -23,6 +25,17 @@
             @click="handleActivityClick(activity)"
           >
             <td>{{ activity.checkpoint }}</td>
+            <td>{{ activity.guardName || "-" }}</td>
+            <td>
+              <v-img
+                v-if="activity.guardSignatureFileId"
+                :src="getFileUrl(activity.guardSignatureFileId)"
+                :alt="`${activity.guardName || 'Guard'} signature`"
+                class="guard-signature"
+                contain
+              />
+              <span v-else>-</span>
+            </td>
             <td>
               <v-icon size="small" class="mr-1">mdi-clock-outline</v-icon>
               {{ activity.startTime }}
@@ -59,6 +72,8 @@ defineProps<{
   activities: NFCPatrolActivity[];
 }>();
 
+const { getFileUrl } = useFile();
+
 const emit = defineEmits<{
   remarks: [activity: NFCPatrolActivity];
 }>();
@@ -78,4 +93,9 @@ function handleActivityClick(activity: NFCPatrolActivity) {
 .cursor-pointer {
   cursor: pointer;
 }
+
+.guard-signature {
+  width: 80px;
+  height: 40px;
+}
 </style>

package/components/Nfc/PatrolReport/PatrolReportTab.vue

@@ -4,9 +4,9 @@
       :model-value="filters"
       :options="options"
       @update:model-value="$emit('update:filters', $event)"
-      @export="$emit('export')"
+      @export="(type) => $emit('export', type)"
     />
-
+    <div class="report-export">
     <v-divider :thickness="1" class="border-opacity-100" />
 
     <template v-if="report">
@@ -30,6 +30,7 @@
     <ReportEmptyState v-else-if="!loading" />
 
     <RemarksDialog v-model="dialogRemarks" :remarks="selectedActivityRemarks" />
+    </div>
   </div>
 </template>
 
@@ -55,7 +56,7 @@ const props = defineProps<{
 
 defineEmits<{
   "update:filters": [value: NFCPatrolReportFilters];
-  export: [];
+  export: [type: "pdf" | "csv"];
 }>();
 
 const {
@@ -77,4 +78,5 @@ watch(
   },
   { immediate: true },
 );
+
 </script>

package/components/Nfc/PatrolReport/ReportDatePicker.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="d-flex flex-column">
+    <v-text-field
+      v-bind="$attrs"
+      :model-value="formattedDate"
+      autocomplete="off"
+      placeholder="DD/MM/YY"
+      readonly
+      @click="openDatePicker"
+    >
+      <template #append-inner>
+        <v-icon icon="mdi-calendar" @click.stop="openDatePicker" />
+      </template>
+    </v-text-field>
+
+    <input
+      ref="dateInput"
+      v-model="date"
+      class="native-date-input"
+      type="date"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+
+const date = defineModel<string>({ default: "" });
+const dateInput = ref<HTMLInputElement | null>(null);
+
+const formattedDate = computed(() => {
+  const match = date.value.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+
+  if (!match) return "";
+
+  const [, year, month, day] = match;
+  return `${day}/${month}/${year.slice(-2)}`;
+});
+
+function openDatePicker() {
+  const input = dateInput.value;
+
+  if (!input) return;
+
+  if (input.showPicker) {
+    input.showPicker();
+  } else {
+    input.click();
+  }
+}
+</script>
+
+<style scoped>
+.native-date-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+</style>

package/components/Nfc/PatrolReport/ReportFilters.vue

@@ -16,7 +16,12 @@
       />
     </v-col>
 
-    <v-col cols="12" md="2" class="px-md-2 mb-2 mb-md-0">
+    <v-col
+      v-if="showTimeFilter"
+      cols="12"
+      md="2"
+      class="px-md-2 mb-2 mb-md-0"
+    >
       <v-select
         :model-value="modelValue.timeRange"
         :items="options.timeRanges"
@@ -30,10 +35,14 @@
       />
     </v-col>
 
-    <v-col cols="12" md="2" class="px-md-2 mb-2 mb-md-0">
-      <v-text-field
+    <v-col
+      v-if="showDateFilter"
+      cols="12"
+      md="2"
+      class="px-md-2 mb-2 mb-md-0"
+    >
+      <ReportDatePicker
         :model-value="modelValue.date"
-        type="date"
         variant="outlined"
         density="comfortable"
         rounded="lg"
@@ -46,17 +55,31 @@
     <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-menu>
+        <template #activator="{ props: menuProps }">
+          <v-btn
+            v-bind="menuProps"
+            variant="outlined"
+            block
+            size="large"
+            rounded="lg"
+            class="text-none"
+            prepend-icon="mdi-export"
+          >
+            Export
+          </v-btn>
+        </template>
+
+        <v-list density="compact">
+          <v-list-item @click="$emit('export', 'pdf')">
+            <v-list-item-title>PDF</v-list-item-title>
+          </v-list-item>
+
+          <v-list-item @click="$emit('export', 'csv')">
+            <v-list-item-title>CSV</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
     </v-col>
   </v-row>
 </template>
@@ -66,15 +89,24 @@ import type {
   NFCPatrolReportFilterOptions,
   NFCPatrolReportFilters,
 } from "../../../types/nfc-patrol-report";
+import ReportDatePicker from "./ReportDatePicker.vue";
 
-const props = defineProps<{
-  modelValue: NFCPatrolReportFilters;
-  options: NFCPatrolReportFilterOptions;
-}>();
+const props = withDefaults(
+  defineProps<{
+    modelValue: NFCPatrolReportFilters;
+    options: NFCPatrolReportFilterOptions;
+    showTimeFilter?: boolean;
+    showDateFilter?: boolean;
+  }>(),
+  {
+    showTimeFilter: true,
+    showDateFilter: true,
+  },
+);;
 
 const emit = defineEmits<{
   "update:modelValue": [value: NFCPatrolReportFilters];
-  export: [];
+  export: [type: "pdf" | "csv"];
 }>();
 
 function updateFilter(key: keyof NFCPatrolReportFilters, value: unknown) {

package/components/Nfc/PatrolReport/SummaryReportTable.vue

@@ -8,6 +8,8 @@
           <tr>
             <th>Patrol Route Name</th>
             <th>Security Check Schedule</th>
+            <th>Security Personnel</th>
+            <th>Signature</th>
             <th>Checked</th>
             <th>Missed</th>
             <th>Status</th>
@@ -20,6 +22,17 @@
               <v-icon size="small" class="mr-1">mdi-clock-outline</v-icon>
               {{ row.securityCheckSchedule }}
             </td>
+            <td>{{ row.guardName || "-" }}</td>
+            <td>
+              <v-img
+                v-if="row.guardSignatureFileId"
+                :src="getFileUrl(row.guardSignatureFileId)"
+                :alt="`${row.guardName || 'Guard'} signature`"
+                class="guard-signature"
+                contain
+              />
+              <span v-else>-</span>
+            </td>
             <td>{{ row.checked }}</td>
             <td>{{ row.missed }}</td>
             <td>
@@ -45,7 +58,16 @@ defineProps<{
   rows: NFCPatrolReportSummaryRow[];
 }>();
 
+const { getFileUrl } = useFile();
+
 function statusClass(status: NFCPatrolReportSummaryStatus) {
   return status === "Completed" ? "text-success" : "text-error";
 }
 </script>
+
+<style scoped>
+.guard-signature {
+  width: 80px;
+  height: 40px;
+}
+</style>

package/components/PhotoUpload.vue

@@ -59,6 +59,21 @@
     </v-col>
   </v-row>
 
+  <v-dialog v-model="showPhotoPreview" max-width="900">
+    <v-card>
+      <v-card-actions class="pa-2 justify-end">
+        <v-btn
+          icon="mdi-close"
+          variant="text"
+          @click="showPhotoPreview = false"
+        />
+      </v-card-actions>
+      <v-card-text class="pa-2 pt-0">
+        <v-img :src="selectedPhoto" contain max-height="80vh" />
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+
   <v-dialog v-model="photoOptionsDialog" max-width="420">
     <v-card>
       <v-card-title class="d-flex align-center pa-4">
@@ -196,6 +211,8 @@ const photos = ref<string[]>([...props.modelValue]);
 const photosIds = ref<string[]>([...props.photoIds]);
 const photoOptionsDialog = ref(false);
 const showCameraDialog = ref(false);
+const showPhotoPreview = ref(false);
+const selectedPhoto = ref("");
 const videoRef = ref<HTMLVideoElement | null>(null);
 const canvasRef = ref<HTMLCanvasElement | null>(null);
 const fileInputRef = ref<HTMLInputElement | null>(null);
@@ -205,10 +222,8 @@ const uploading = ref(false);
 const { addFile } = useFile();
 
 function viewPhoto(photoData: string) {
-  const link = document.createElement("a");
-  link.href = photoData;
-  link.target = "_blank";
-  link.click();
+  selectedPhoto.value = photoData;
+  showPhotoPreview.value = true;
 }
 
 watch(

package/components/ServiceProviderMain.vue

@@ -548,7 +548,7 @@
               variant="flat"
               class="text-none sp-invite-submit-btn"
               height="76"
-              :disabled="!validServiceProvider"
+              :disabled="!canSubmitInvite"
               :loading="disableServiceProvider"
               @click="submitServiceProviderInvite()"
             >
@@ -574,6 +574,7 @@ type ListTab = "active" | "pending" | "inactive";
 
 type TableRow = {
   _id: string;
+  userId: string;
   serviceProviderOrgId: string;
   companyName: string;
   email: string;
@@ -733,11 +734,10 @@ const {
   updateStatus: updateServiceProviderStatus,
   invite,
 } = useServiceProvider();
-const { getAll: getAllMembers } = useMember();
+const { getAll: getAllMembers, getAllByUserId } = useMember();
 
 const { getVerifications, cancelUserInvitation, getVerificationByEmail } =
   useVerification();
-const { getOrgsByMembership } = useMember();
 
 const existingAccount = ref<any>(null);
 const checkingExistingAccount = ref(false);
@@ -759,41 +759,77 @@ const createInviteDialog = ref(false);
 
 const { getByUserType } = useMember();
 const { getOrgs } = useOrg();
+const { getByEmail } = useServiceProvider();
 
 async function checkExistingAccount(email: string) {
   existingAccount.value = null;
+  messageServiceProvider.value = "";
 
   if (!email.trim() || emailRule(email) !== true) return;
 
   checkingExistingAccount.value = true;
 
   try {
+    // Check if user exists
     const user = await getUserByEmail(email);
 
-    if (!user?._id) return;
+if (!user?._id) return;
 
-    const orgs = await getOrgs({
-      user: user._id,
-    });
+    // Check if this service provider already exists in current org/site
+    const serviceProviders = await getByEmail({
+  email,
+  orgId: props.orgId,
+  siteId: props.siteId,
+});
+
+console.log("serviceProviders", serviceProviders);
+
+    if (serviceProviders?.length) {
+      messageServiceProvider.value =
+        "This service provider already exists.";
+      return;
+    }
+
+    // Check existing memberships
+    const members = await getAllByUserId(user._id);
 
-    const matchedOrg = orgs.items?.find(
-      (org: any) => org.type === serviceProviderInvite.value.app
+    const appMember = (members.items ?? []).find(
+      (member: any) => member.type === serviceProviderInvite.value.app
     );
 
-    if (matchedOrg) {
-      existingAccount.value = {
-        _id: matchedOrg.value,
-        text: matchedOrg.text,
-        ...matchedOrg,
-      };
+    if (!appMember) return;
+
+    // Already belongs to the same org/site
+    if (
+      appMember.org === props.orgId &&
+      (appMember.siteId || "") === (props.siteId || "")
+    ) {
+      messageServiceProvider.value =
+        "This user is already a member of this service provider.";
+      return;
     }
+
+    // Existing account in another org/site
+    existingAccount.value = {
+      _id: appMember.org,
+      text: appMember.orgName,
+      org: appMember.org,
+      orgName: appMember.orgName,
+      siteId: appMember.siteId,
+      siteName: appMember.siteName,
+    };
   } catch (error) {
     existingAccount.value = null;
   } finally {
     checkingExistingAccount.value = false;
   }
 }
-
+const canSubmitInvite = computed(() => {
+  return (
+    validServiceProvider.value &&
+    !messageServiceProvider.value
+  );
+});
 watch(
   () => serviceProviderInvite.value.email,
   async (value) => {
@@ -939,6 +975,7 @@ function formatEmailCell(value: unknown): string {
 function mapProviderRows(raw: Record<string, any>[]): TableRow[] {
   return raw.map((row) => ({
     _id: String(row._id ?? ""),
+    userId: String(row.user ?? ""),
     serviceProviderOrgId: String(row.serviceProviderOrgId ?? ""),
     companyName: row.name ?? "-",
     email: formatEmailCell(row.email),
@@ -961,6 +998,7 @@ function inviteTypeLabel(t: string) {
 function mapInviteRows(raw: Record<string, any>[]): TableRow[] {
   return raw.map((row) => ({
     _id: String(row._id ?? ""),
+    userId: String(row.user ?? ""),
     serviceProviderOrgId: String(row.metadata?.serviceProviderOrgId ?? ""),
     companyName: row.metadata?.name || "-",
     email: formatEmailCell(row.email),
@@ -1029,16 +1067,12 @@ async function openView(row: TableRow) {
 
   loadingMembers.value = true;
   try {
-    const data = await getAllMembers({
-      page: 1,
-      limit: 1000,
-      org: row.serviceProviderOrgId,
-      status: "active",
-    });
+    const data = await getAllByUserId(row.userId);
+
     serviceProviderMembers.value = (data.items ?? []).map((member: any) => ({
-      _id: String(member._id ?? ""),
-      name: member.name || member.fullName || member.email || "-",
-      role: member.roleName || member.role?.name || "-",
+      _id: member._id,
+      name: member.name || "-",
+      role: member.role || "-",
     }));
   } catch (error: any) {
     showMessage(errorConverter(error), "error");