@7365admin1/layer-common 1.11.46 → 1.11.48

package/components/DocumentManagement.vue

@@ -2,7 +2,6 @@
   <v-row no-gutters class="pa-0">
     <v-col cols="12" class="mb-2">
       <v-row no-gutters align="center">
-        <!-- Left Buttons -->
         <v-col cols="12" md="6" class="d-flex align-center">
           <v-btn
             class="text-none me-2"
@@ -21,19 +20,17 @@
             variant="tonal"
             size="large"
             @click="openCreateFolderDialog()"
-            v-if="canCreate && canCreateDocument"
+            v-if="canCreate && canCreateFolder"
           >
             Create Folder
           </v-btn>
         </v-col>
 
-        <!-- Right Search + Filter -->
         <v-col
           cols="12"
           md="6"
           class="d-flex justify-end align-center mt-4 mt-md-0"
         >
-          <!-- Search -->
           <v-text-field
             v-model="search"
             placeholder="Search"
@@ -54,7 +51,7 @@
                 class="filtertype-btn text-none"
                 style="max-width: 220px"
               >
-                {{ selectedFileType || 'Filter by File Type' }}
+                {{ selectedFileType || "Filter by File Type" }}
               </v-btn>
             </template>
 
@@ -76,6 +73,22 @@
         </v-col>
       </v-row>
     </v-col>
+
+    <v-col cols="12" class="mb-2" v-if="isInsideFolder">
+      <div class="folder-path-bar d-flex align-center ga-2 px-3 py-2">
+        <v-btn
+          icon="mdi-arrow-left"
+          size="small"
+          variant="text"
+          @click="goBackFolder"
+        />
+        <v-icon size="18" color="grey-darken-2">mdi-folder</v-icon>
+        <span class="text-body-2 font-weight-medium">{{
+          currentFolderPath
+        }}</span>
+      </div>
+    </v-col>
+
     <v-col cols="12">
       <TableV3
         :headers="headers"
@@ -89,11 +102,49 @@
         @update:page="page = $event"
         @row-click="tableRowClickHandler"
       >
+        <template v-if="isInsideFolder" #breadcrumb>
+          <div class="d-flex align-center flex-wrap ga-1">
+            <v-btn
+              icon="mdi-chevron-left"
+              size="x-small"
+              variant="text"
+              density="comfortable"
+              class="me-1"
+              @click="goBackFolder"
+            />
+
+            <span
+              class="breadcrumb-segment text-body-2 text-grey-darken-1 cursor-pointer"
+              @click="navigateToRoot"
+              >Home</span
+            >
+            <template v-for="(folder, idx) in folderStack" :key="folder.id">
+              <v-icon size="14" color="grey-darken-1">mdi-chevron-right</v-icon>
+              <span
+                :class="[
+                  'breadcrumb-segment text-body-2 font-weight-medium',
+                  idx === folderStack.length - 1
+                    ? 'text-black'
+                    : 'text-grey-darken-1 cursor-pointer',
+                ]"
+                @click="
+                  idx < folderStack.length - 1 && navigateToStackIndex(idx)
+                "
+                >{{ folder.name }}</span
+              >
+            </template>
+          </div>
+        </template>
         <template #item.name="{ item }">
           <div class="d-flex align-center ga-2">
-            <v-icon size="18" color="grey-darken-2">
+            <v-icon
+              size="18"
+              :color="
+                isFolderItem(item._raw) ? 'amber-darken-2' : 'grey-darken-2'
+              "
+            >
               {{
-                item.file_type?.toLowerCase() === "folder"
+                isFolderItem(item._raw)
                   ? "mdi-folder"
                   : "mdi-file-document-outline"
               }}
@@ -115,6 +166,7 @@
             variant="flat"
             class="table-download-btn text-none"
             @click.stop="downloadDocument(item._raw)"
+            :disabled="isFolderItem(item._raw)"
           >
             Download
           </v-btn>
@@ -124,7 +176,11 @@
 
     <!-- Create Dialog -->
     <v-dialog v-model="createDialog" width="450" persistent>
-      <DocumentForm @cancel="createDialog = false" @success="successCreate()" />
+      <DocumentForm
+        :parent-id="activeParentId"
+        @cancel="createDialog = false"
+        @success="successCreate()"
+      />
     </v-dialog>
 
     <!-- Create Folder Dialog -->
@@ -145,7 +201,7 @@
               <v-text-field
                 v-model.trim="folderTitle"
                 density="comfortable"
-                :rules="[v => !!v || 'Folder title is required']"
+                :rules="[(v) => !!v || 'Folder title is required']"
               />
             </v-col>
 
@@ -209,21 +265,72 @@
       <v-card width="100%">
         <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
           <v-row no-gutters class="mb-4">
-            <v-col cols="12">
-              <strong>Name:</strong> {{ selectedDocument?.name ?? "N/A" }}
+            <v-col cols="12" class="mb-3">
+              <div class="text-h6 font-weight-bold">
+                {{ selectedDocument?.name || "N/A" }}
+              </div>
             </v-col>
-            <v-col cols="12">
-              <strong>Type:</strong> {{ selectedDocument?.type ?? "N/A" }}
+
+            <v-col cols="12" class="mb-2">
+              <v-row no-gutters>
+                <v-col cols="6" class="text-body-1">Document</v-col>
+                <v-col cols="6" class="text-right text-body-1">
+                  <NuxtLink
+                    v-if="selectedDocument?.attachment"
+                    :to="getFileUrl(selectedDocument.attachment)"
+                    external
+                    target="_blank"
+                  >
+                    View Document
+                  </NuxtLink>
+                  <span v-else>N/A</span>
+                </v-col>
+              </v-row>
+            </v-col>
+
+            <v-col cols="12" class="mb-2">
+              <v-row no-gutters>
+                <v-col cols="6" class="text-body-1">File Type</v-col>
+                <v-col cols="6" class="text-right text-body-1">{{
+                  previewDetails.fileType
+                }}</v-col>
+              </v-row>
+            </v-col>
+
+            <v-col cols="12" class="mb-2">
+              <v-row no-gutters>
+                <v-col cols="6" class="text-body-1">File Size</v-col>
+                <v-col cols="6" class="text-right text-body-1">{{
+                  previewDetails.fileSize
+                }}</v-col>
+              </v-row>
+            </v-col>
+
+            <v-col cols="12" class="mb-2">
+              <v-row no-gutters>
+                <v-col cols="6" class="text-body-1">Date Created</v-col>
+                <v-col cols="6" class="text-right text-body-1">{{
+                  previewDetails.dateCreated
+                }}</v-col>
+              </v-row>
+            </v-col>
+
+            <v-col cols="12" class="mb-2">
+              <v-row no-gutters>
+                <v-col cols="6" class="text-body-1">Date Modified</v-col>
+                <v-col cols="6" class="text-right text-body-1">{{
+                  previewDetails.dateModified
+                }}</v-col>
+              </v-row>
             </v-col>
+
             <v-col cols="12">
-              <strong>Document: </strong>
-              <NuxtLink
-                :to="getFileUrl(selectedDocument.attachment)"
-                external
-                target="_blank"
-              >
-                View Document
-              </NuxtLink>
+              <v-row no-gutters>
+                <v-col cols="6" class="text-body-1">Remarks</v-col>
+                <v-col cols="6" class="text-right text-body-1">{{
+                  previewDetails.remarks
+                }}</v-col>
+              </v-row>
             </v-col>
           </v-row>
         </v-card-text>
@@ -394,6 +501,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  canCreateFolder: {
+    type: Boolean,
+    default: true,
+  },
   canUpdateDocument: {
     type: Boolean,
     default: true,
@@ -406,9 +517,17 @@ const props = defineProps({
 
 const { headerSearch } = useLocal();
 const documentService = useDocument();
-const { getAll: _getAllDocuments, deleteById, createFolder, create } = documentService;
+const {
+  getAll: _getAllDocuments,
+  deleteById,
+  createFolder,
+  create,
+} = documentService;
 const { getFileUrl } = useFile();
 
+const router = useRouter();
+const route = useRoute();
+
 const page = ref(1);
 const pages = ref(0);
 const pageRange = ref("-- - -- of --");
@@ -419,8 +538,32 @@ const messageColor = ref("");
 
 const items = ref<Array<Record<string, any>>>([]);
 
-const route = useRoute();
 const siteId = route.params.site as string;
+const orgId = route.params.org as string;
+const routeParentId = computed(() =>
+  typeof route.query.parentId === "string" ? route.query.parentId : ""
+);
+const activeParentId = ref(routeParentId.value);
+const folderStack = ref<Array<{ id: string; name: string }>>([]);
+
+const search = computed({
+  get: () => headerSearch.value,
+  set: (value: string) => {
+    headerSearch.value = value;
+  },
+});
+
+const isInsideFolder = computed(() => activeParentId.value !== "");
+const currentFolderPath = computed(() => {
+  if (folderStack.value.length === 0 && activeParentId.value) {
+    return "Current Folder";
+  }
+
+  return folderStack.value.map((folder) => folder.name).join(" / ");
+});
+
+const fileTypes = ref(["all", "pdf", "csv", "doc"]);
+const selectedFileType = ref("all");
 
 const {
   data: getDocumentReq,
@@ -433,9 +576,12 @@ const {
       page: page.value,
       search: headerSearch.value,
       site: siteId,
+      parentId: activeParentId.value,
+      type:
+        selectedFileType.value === "all" ? undefined : selectedFileType.value,
     }),
   {
-    watch: [page, headerSearch],
+    watch: [page, headerSearch, activeParentId, selectedFileType],
   }
 );
 
@@ -469,12 +615,24 @@ function formatDate(value?: string | null) {
   });
 }
 
+function formatBytes(bytes = 0) {
+  const b = Number(bytes) || 0;
+  if (b === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(b) / Math.log(k));
+  return `${parseFloat((b / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}
+
 const tableItems = computed(() => {
   return items.value.map((doc: any) => ({
     ...doc,
     _raw: doc,
-    file_type: doc.type || "N/A",
-    file_size: doc.file_size || doc.size || "0mb",
+    file_type: doc.type === "folder" ? "Folder" : doc.type || "N/A",
+    file_size:
+      doc.type === "folder"
+        ? "—"
+        : formatBytes(Number(doc.file_size ?? doc.size ?? 0)),
     date_created: formatDate(doc.created_at || doc.createdAt),
     date_modified: formatDate(doc.updated_at || doc.updatedAt),
     remarks: doc.remarks || "N/A",
@@ -492,8 +650,8 @@ const folderRemarks = ref("");
 const folderLoading = ref(false);
 const validFolderForm = ref(false);
 
-const fileTypes = ref(["All", "pdf", "csv", "doc"]);
-const selectedFileType = ref("All");
+// fileTypes and selectedFileType are declared above to allow
+// the fetch to include the selected filter.
 const filterMenu = ref(false);
 const selectedDocument = ref<TDocument>({
   _id: "",
@@ -501,13 +659,101 @@ const selectedDocument = ref<TDocument>({
   attachment: "",
   type: "",
 });
+
+const previewDetails = computed(() => {
+  const document = selectedDocument.value as Record<string, any>;
+  const fileType =
+    document?.type === "folder"
+      ? "Folder"
+      : document?.type || document?.file_type || "N/A";
+  const fileSize =
+    document?.type === "folder"
+      ? "N/A"
+      : formatBytes(Number(document?.file_size ?? document?.size ?? 0));
+
+  return {
+    fileType,
+    fileSize,
+    dateCreated: formatDate(document?.created_at || document?.createdAt),
+    dateModified: formatDate(document?.updated_at || document?.updatedAt),
+    remarks: document?.remarks || "N/A",
+  };
+});
 const deleteLoading = ref(false);
 const confirmDialog = ref(false);
 const selectedDocumentId = ref<string | null>(null);
 
 function tableRowClickHandler(data: any) {
-  selectedDocument.value = (data?._raw || data) as TDocument;
+  const rowData = (data?._raw || data) as TDocument;
+
+  if (isFolderItem(rowData)) {
+    openFolder(rowData);
+    return;
+  }
+
+  openPreviewDialog(rowData);
+}
+
+async function openPreviewDialog(document: TDocument) {
+  selectedDocument.value = document;
   previewDialog.value = true;
+
+  const documentId = String(document?._id || "");
+  if (!documentId) {
+    return;
+  }
+
+  try {
+    const response = await documentService.getById(documentId);
+    const fetchedDocument =
+      (response as any)?.item ||
+      (response as any)?.data ||
+      (response as any)?.document ||
+      response;
+
+    if (fetchedDocument && typeof fetchedDocument === "object") {
+      selectedDocument.value = {
+        ...document,
+        ...(fetchedDocument as Record<string, any>),
+      } as TDocument;
+    }
+  } catch (_error) {
+    // Keep table data in modal if detail API request fails.
+  }
+}
+
+function isFolderItem(document?: Partial<TDocument> & Record<string, any>) {
+  if (!document) {
+    return false;
+  }
+
+  const docType = String(
+    document.type || document.file_type || ""
+  ).toLowerCase();
+  return docType === "folder";
+}
+
+function openFolder(document: Partial<TDocument> & Record<string, any>) {
+  const folderId = String(document._id || "");
+  const folderName = String(document.name || "Folder");
+
+  if (!folderId) {
+    return;
+  }
+
+  activeParentId.value = folderId;
+  folderStack.value.push({ id: folderId, name: folderName });
+  page.value = 1;
+}
+
+function goBackFolder() {
+  if (folderStack.value.length === 0) {
+    return;
+  }
+
+  folderStack.value.pop();
+  activeParentId.value = folderStack.value.at(-1)?.id || "";
+  page.value = 1;
 }
 
 function downloadDocument(document?: TDocument) {
@@ -532,8 +778,11 @@ function setDocument({
     editDialog.value = dialog;
     selectedDocument.value = data;
   } else if (mode === "preview") {
-    previewDialog.value = dialog;
-    selectedDocument.value = data;
+    if (!dialog) {
+      previewDialog.value = false;
+      return;
+    }
+    openPreviewDialog(data);
   }
 }
 
@@ -563,24 +812,28 @@ async function handleCreateFolder() {
 
   folderLoading.value = true;
   try {
-    if (documentService.createFolder) {
-      const resp = await (documentService as any).createFolder({
-        name: folderTitle.value,
-        remarks: folderRemarks.value,
-        site: siteId,
-      });
-      showMessage(resp?.message || "Folder created successfully!", "success");
+    const payload = {
+      name: folderTitle.value,
+      remarks: folderRemarks.value,
+      org: orgId,
+      site: siteId,
+      parentId: activeParentId.value,
+      type: "folder",
+    };
+
+    let resp: any = null;
+    if ((documentService as any).createFolder) {
+      resp = await (documentService as any).createFolder(payload);
     } else if ((documentService as any).create) {
-      const resp = await (documentService as any).create({
-        name: folderTitle.value,
-        remarks: folderRemarks.value,
-        type: "folder",
-        site: siteId,
-      });
-      showMessage(resp?.message || "Folder created successfully!", "success");
+      resp = await (documentService as any).create(payload);
+    } else if ((documentService as any).add) {
+      resp = await (documentService as any).add(payload);
     } else {
-      // fallback: no API available in this service
-      showMessage("Folder created (local)", "success");
+      showMessage("Unable to create folder. No API available.", "error");
+    }
+
+    if (resp) {
+      showMessage(resp?.message || "Folder created successfully!", "success");
     }
 
     createFolderDialog.value = false;
@@ -588,7 +841,10 @@ async function handleCreateFolder() {
     folderRemarks.value = "";
     await getDocuments();
   } catch (error: any) {
-    showMessage(error?.response?._data?.message || "Failed to create folder", "error");
+    showMessage(
+      error?.response?._data?.message || "Failed to create folder",
+      "error"
+    );
   } finally {
     folderLoading.value = false;
   }
@@ -670,4 +926,10 @@ function selectFileType(type: string) {
 .filtertype-item:last-child {
   border-bottom: none;
 }
+
+.folder-path-bar {
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background: #fafafa;
+}
 </style>

package/components/RolePermissionFormCreate.vue

@@ -221,8 +221,7 @@ const { requiredRule } = useUtils();
 const { createRole } = useRole();
 const { getSiteById } = useSite();
 
-// Gom selected + enabled vào 1 shallowRef duy nhất
-// để chỉ trigger 1 render cycle khi update cả 2
+// All selected + enabled 1 shallowRef
 const permState = shallowRef({
   selected: [] as string[],
   enabled: [] as string[],
@@ -283,7 +282,7 @@ function toggleSelectAll(value: boolean) {
     }
   }
 
-  // 1 assignment duy nhất = 1 render cycle, không crash
+  // 1 assignment to trigger reactivity only once
   permState.value = { selected: allKeys, enabled: categories }
 }
 

package/components/SiteSettings.vue

@@ -83,6 +83,56 @@
         </v-expansion-panel-title>
 
         <v-expansion-panel-text>
+          <v-container fluid class="px-0">
+            <v-row dense>
+              <v-col cols="6">
+                <v-switch
+                  v-model="ANPRSwitches.enableUnregistered"
+                  :disabled="!canManageSiteSettings"
+                  label="Enable Unregistered Vehicles"
+                  color="primary"
+                  hide-details
+                ></v-switch>
+              </v-col>
+              
+              <v-col cols="6">
+                <v-switch
+                  v-model="ANPRSwitches.openBarrierPickUpDropOff"
+                  :disabled="!canManageSiteSettings"
+                  label="Open Barrier for Pick-up and Drop-off"
+                  color="primary"
+                  hide-details
+                ></v-switch>
+              </v-col>
+
+              <v-col cols="6">
+                <v-switch
+                  v-model="ANPRSwitches.vehicleSnapshot"
+                  :disabled="!canManageSiteSettings"
+                  label="Capture Vehicle Snapshot"
+                  color="primary"
+                  hide-details
+                ></v-switch>
+              </v-col>
+            </v-row>
+
+            <v-row v-if="canManageSiteSettings">
+              <v-col cols="auto">
+                <v-btn
+                  variant="flat"
+                  color="primary"
+                  class="text-none"
+                  :loading="isSaving"
+                  @click="saveANPRSettings"
+                >
+                  Save
+                </v-btn>
+              </v-col>
+            </v-row>
+          </v-container>
+
+          <v-divider class="my-4"></v-divider>
+
           <CameraMain :site="siteId" :read-only="!canManageSiteSettings"
             :guard-posts="siteData?.metadata?.guardPosts" />
         </v-expansion-panel-text>
@@ -154,9 +204,11 @@ import useFile from '../composables/useFile';
 import useSiteSettings from '../composables/useSiteSettings';
 import useUtils from '../composables/useUtils';
 import useWorkOrder from '../composables/useWorkOrder';
+import useANPRSettings from '../composables/useANPRSettings';
 
 const props = defineProps({
   siteId: { type: String, required: true },
+  createdBy: { type: String },
   canManageSiteSettings: { type: Boolean, default: false },
   showAnprCamera: { type: Boolean, default: false },
   showCctvCamera: { type: Boolean, default: false },
@@ -173,6 +225,7 @@ const { requiredRule } = useUtils();
 const { getFileUrl } = useFile();
 const { getWorkOrderSettings, createWorkOrderSettings } = useWorkOrder();
 
+
 const blocks = ref(0);
 const guardPosts = ref(0);
 const gracePeriod = ref(0);
@@ -358,4 +411,56 @@ function show(message: string, color: string) {
   toast.message = message;
   toast.color = color;
 }
+
+
+// ANPR Settings
+const {getANPRSettingBySite, createUpdateANPRSettings} = useANPRSettings();
+const isSaving = ref(false)
+
+// Reactive object to hold the state of the 3 switches
+const ANPRSwitches = ref({
+  enableUnregistered: false,
+  openBarrierPickUpDropOff: false,
+  vehicleSnapshot: false
+})
+
+await useLazyAsyncData(
+  `anpr-settings-${props.siteId}`,
+  async () => {
+    const data = await getANPRSettingBySite({
+      site: props.siteId,
+      userType: "site",
+    });
+    console.log('data', data)
+    if(typeof data?.ANPRSwitches == "object"){
+      ANPRSwitches.value = data?.ANPRSwitches
+    }
+  }
+);
+
+const saveANPRSettings = async () => {
+  try {
+    isSaving.value = true
+    
+    // Replace this with your actual API endpoint / store action
+    // await $fetch(`/api/sites/${siteId.value}/camera-settings`, {
+    //   method: 'POST',
+    //   body: cameraSettings.value
+    // })
+    const data = {
+      site: props.siteId,
+      ANPRSwitches: ANPRSwitches.value,
+      updatedBy: props.createdBy,
+      userType: "site",
+    };
+     console.log('saveANPRSettings data:', data)
+    await createUpdateANPRSettings(data);
+    show("Saved successfully", "success");
+  } catch (error) {
+    console.error('Failed to save settings:', error)
+  } finally {
+    isSaving.value = false
+  }
+}
+
 </script>

package/components/TableV3.vue

@@ -43,6 +43,10 @@
       </template>
     </v-toolbar>
 
+    <div v-if="$slots.breadcrumb" class="table-v3__breadcrumb">
+      <slot name="breadcrumb" />
+    </div>
+
     <v-data-table
       :headers="headers"
       :items="items"
@@ -176,4 +180,10 @@ watch(
   width: 38px;
   height: 38px;
 }
+
+.table-v3__breadcrumb {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: #fff;
+  padding: 6px 12px;
+}
 </style>