@7365admin1/layer-common 1.11.44 → 1.11.45

package/components/DocumentManagement.vue

@@ -1,58 +1,125 @@
 <template>
-  <v-row no-gutters>
+  <v-row no-gutters class="pa-0">
     <v-col cols="12" class="mb-2">
-      <v-row no-gutters>
-        <v-btn
-          class="text-none"
-          rounded="pill"
-          variant="tonal"
-          size="large"
-          @click="setDocument()"
-          v-if="canCreate && canCreateDocument"
+      <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"
+            rounded="pill"
+            variant="tonal"
+            size="large"
+            @click="setDocument()"
+            v-if="canCreate && canCreateDocument"
+          >
+            Add Document
+          </v-btn>
+
+          <v-btn
+            class="text-none"
+            rounded="pill"
+            variant="tonal"
+            size="large"
+            @click="openCreateFolderDialog()"
+            v-if="canCreate && canCreateDocument"
+          >
+            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"
         >
-          Add Document
-        </v-btn>
+          <!-- Search -->
+          <v-text-field
+            v-model="search"
+            placeholder="Search"
+            density="comfortable"
+            variant="outlined"
+            hide-details
+            rounded="lg"
+            class="me-3"
+            style="max-width: 220px"
+          />
+
+          <v-menu v-model="filterMenu" offset-y>
+            <template #activator="{ props }">
+              <v-btn
+                v-bind="props"
+                variant="outlined"
+                rounded="lg"
+                class="filtertype-btn text-none"
+                style="max-width: 220px"
+              >
+                {{ selectedFileType || 'Filter by File Type' }}
+              </v-btn>
+            </template>
+
+            <v-card class="filtertype-card">
+              <v-list class="pa-0">
+                <v-list-item
+                  v-for="(type, idx) in fileTypes"
+                  :key="idx"
+                  @click="selectFileType(type)"
+                  class="filtertype-item"
+                >
+                  <v-list-item-title class="text-subtitle-2">
+                    {{ type }}
+                  </v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-card>
+          </v-menu>
+        </v-col>
       </v-row>
     </v-col>
     <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
+      <TableV3
+        :headers="headers"
+        :items="tableItems"
         :loading="loading"
+        :page="page"
+        :pages="pages"
+        :page-range="pageRange"
+        :items-per-page="10"
+        @refresh="getDocuments"
+        @update:page="page = $event"
+        @row-click="tableRowClickHandler"
       >
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #prepend>
-            <v-btn fab icon density="comfortable" @click="getDocuments">
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-          </template>
-
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
-                {{ pageRange }}
-              </span>
-              <local-pagination
-                v-model="page"
-                :length="pages"
-                @update:value="getDocuments"
-              />
-            </v-row>
-          </template>
-        </v-toolbar>
-        <v-data-table
-          :headers="headers"
-          :items="items"
-          item-value="_id"
-          items-per-page="10"
-          fixed-header
-          hide-default-footer
-          @click:row="tableRowClickHandler"
-          style="max-height: calc(100vh - (200px))"
-        ></v-data-table>
-      </v-card>
+        <template #item.name="{ item }">
+          <div class="d-flex align-center ga-2">
+            <v-icon size="18" color="grey-darken-2">
+              {{
+                item.file_type?.toLowerCase() === "folder"
+                  ? "mdi-folder"
+                  : "mdi-file-document-outline"
+              }}
+            </v-icon>
+            <span>{{ item.name }}</span>
+          </div>
+        </template>
+
+        <template #item.date_modified="{ item }">
+          <span>{{ item.date_modified || "N/A" }}</span>
+        </template>
+
+        <template #item.remarks="{ item }">
+          <span>{{ item.remarks || "N/A" }}</span>
+        </template>
+
+        <template #item.action="{ item }">
+          <v-btn
+            variant="flat"
+            class="table-download-btn text-none"
+            @click.stop="downloadDocument(item._raw)"
+          >
+            Download
+          </v-btn>
+        </template>
+      </TableV3>
     </v-col>
 
     <!-- Create Dialog -->
@@ -60,6 +127,73 @@
       <DocumentForm @cancel="createDialog = false" @success="successCreate()" />
     </v-dialog>
 
+    <!-- Create Folder Dialog -->
+    <v-dialog v-model="createFolderDialog" width="450" persistent>
+      <v-card width="100%">
+        <v-toolbar class="pa-0" density="compact">
+          <v-row no-gutters class="w-100">
+            <v-col cols="12" class="pa-4">
+              <span class="font-weight-medium text-h6">Create Folder</span>
+            </v-col>
+          </v-row>
+        </v-toolbar>
+
+        <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-0">
+          <v-form v-model="validFolderForm">
+            <v-col cols="12" class="px-6">
+              <InputLabel title="Folder Title" />
+              <v-text-field
+                v-model.trim="folderTitle"
+                density="comfortable"
+                :rules="[v => !!v || 'Folder title is required']"
+              />
+            </v-col>
+
+            <v-col cols="12" class="px-6">
+              <InputLabel title="Remarks (Optional)" />
+              <v-textarea
+                v-model.trim="folderRemarks"
+                density="comfortable"
+                rows="3"
+              />
+            </v-col>
+          </v-form>
+        </v-card-text>
+
+        <v-toolbar class="pa-0" density="compact">
+          <v-row no-gutters class="w-100">
+            <v-col cols="6" class="pa-0">
+              <v-btn
+                block
+                variant="text"
+                class="text-none"
+                size="large"
+                @click="createFolderDialog = false"
+                :disabled="folderLoading"
+                height="48"
+              >
+                Cancel
+              </v-btn>
+            </v-col>
+            <v-col cols="6" class="pa-0">
+              <v-btn
+                block
+                color="black"
+                variant="flat"
+                class="text-none"
+                size="large"
+                @click="handleCreateFolder"
+                :loading="folderLoading"
+                height="48"
+              >
+                Submit
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-toolbar>
+      </v-card>
+    </v-dialog>
+
     <!-- Edit Dialog -->
     <v-dialog v-model="editDialog" width="450" persistent>
       <DocumentForm
@@ -218,10 +352,30 @@ const props = defineProps({
         value: "name",
       },
       {
-        title: "Type",
-        value: "type",
+        title: "File Type",
+        value: "file_type",
+      },
+      {
+        title: "File Size",
+        value: "file_size",
+      },
+      {
+        title: "Date Created",
+        value: "date_created",
+      },
+      {
+        title: "Date Modified",
+        value: "date_modified",
+      },
+      {
+        title: "Remarks",
+        value: "remarks",
+      },
+      {
+        title: "Action",
+        value: "action",
+        sortable: false,
       },
-      // { title: "Action", value: "action-table" },
     ],
   },
   canCreate: {
@@ -251,7 +405,8 @@ const props = defineProps({
 });
 
 const { headerSearch } = useLocal();
-const { getAll: _getAllDocuments, deleteById } = useDocument();
+const documentService = useDocument();
+const { getAll: _getAllDocuments, deleteById, createFolder, create } = documentService;
 const { getFileUrl } = useFile();
 
 const page = ref(1);
@@ -294,9 +449,52 @@ watchEffect(() => {
   }
 });
 
+function formatDate(value?: string | null) {
+  if (!value) {
+    return "N/A";
+  }
+
+  const dateValue = new Date(value);
+  if (Number.isNaN(dateValue.getTime())) {
+    return "N/A";
+  }
+
+  return dateValue.toLocaleString("en-SG", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  });
+}
+
+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",
+    date_created: formatDate(doc.created_at || doc.createdAt),
+    date_modified: formatDate(doc.updated_at || doc.updatedAt),
+    remarks: doc.remarks || "N/A",
+  }));
+});
+
 const createDialog = ref(false);
 const editDialog = ref(false);
 const previewDialog = ref(false);
+
+// Create folder dialog state
+const createFolderDialog = ref(false);
+const folderTitle = ref("");
+const folderRemarks = ref("");
+const folderLoading = ref(false);
+const validFolderForm = ref(false);
+
+const fileTypes = ref(["All", "pdf", "csv", "doc"]);
+const selectedFileType = ref("All");
+const filterMenu = ref(false);
 const selectedDocument = ref<TDocument>({
   _id: "",
   name: "",
@@ -307,11 +505,22 @@ const deleteLoading = ref(false);
 const confirmDialog = ref(false);
 const selectedDocumentId = ref<string | null>(null);
 
-function tableRowClickHandler(_: any, data: any) {
-  selectedDocument.value = data.item as TDocument;
+function tableRowClickHandler(data: any) {
+  selectedDocument.value = (data?._raw || data) as TDocument;
   previewDialog.value = true;
 }
 
+function downloadDocument(document?: TDocument) {
+  if (!document?.attachment || !process.client) {
+    return;
+  }
+
+  const fileUrl = getFileUrl(document.attachment);
+  if (fileUrl) {
+    window.open(fileUrl, "_blank", "noopener,noreferrer");
+  }
+}
+
 function setDocument({
   mode = "create",
   dialog = true,
@@ -340,6 +549,51 @@ function successCreate() {
   showMessage("Document created successfully!", "success");
 }
 
+function openCreateFolderDialog() {
+  folderTitle.value = "";
+  folderRemarks.value = "";
+  createFolderDialog.value = true;
+}
+
+async function handleCreateFolder() {
+  if (!folderTitle.value) {
+    showMessage("Folder title is required", "error");
+    return;
+  }
+
+  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");
+    } 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");
+    } else {
+      // fallback: no API available in this service
+      showMessage("Folder created (local)", "success");
+    }
+
+    createFolderDialog.value = false;
+    folderTitle.value = "";
+    folderRemarks.value = "";
+    await getDocuments();
+  } catch (error: any) {
+    showMessage(error?.response?._data?.message || "Failed to create folder", "error");
+  } finally {
+    folderLoading.value = false;
+  }
+}
+
 function openDeleteDialog() {
   confirmDialog.value = true;
   message.value = "";
@@ -372,4 +626,48 @@ function successUpdate() {
   getDocuments();
   showMessage("Document updated successfully!", "success");
 }
+
+function selectFileType(type: string) {
+  selectedFileType.value = type;
+  filterMenu.value = false;
+}
 </script>
+
+<style scoped>
+.table-download-btn {
+  min-width: 106px;
+  height: 30px;
+  border-radius: 4px;
+  background-color: #e3e3e3;
+  color: #38475a;
+  font-size: 12px;
+  font-weight: 500;
+  box-shadow: none;
+}
+
+.table-download-btn:hover {
+  background-color: #d8d8d8;
+}
+
+.filtertype-btn {
+  justify-content: flex-start;
+  width: 220px;
+}
+
+.filtertype-card {
+  background: #fff;
+  border-radius: 8px;
+  min-width: 160px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
+  overflow: hidden;
+}
+
+.filtertype-item {
+  border-bottom: 1px solid #f0f0f0;
+  padding: 10px 16px;
+}
+
+.filtertype-item:last-child {
+  border-bottom: none;
+}
+</style>

package/components/InvitationClientForm.vue

@@ -321,7 +321,7 @@ async function checkEmail(email: string) {
 
      const memberRes = await getAllByUserId(user._id)
 
-userAccess.value = memberRes?.items || []
+    userAccess.value = memberRes?.items || []
     } else {
       existingUser.value = null
       userAccess.value = []
@@ -340,23 +340,36 @@ async function submit() {
   submitError.value = ""
 
   try {
-    await inviteUserClient({
-      email: invite.value.email,
-      app: invite.value.app,
-      role: invite.value.role,
-      org: org.value?._id,
-      site: invite.value.site,
-      siteName: invite.value.siteName,
-    })
+
+    for (const app of invite.value.app) {
+
+      await inviteUserClient({
+        email: invite.value.email,
+
+        app: [app],
+
+        role: invite.value.role,
+
+        org: org.value?._id,
+
+        siteId: invite.value.site,
+        siteName: invite.value.siteName,
+      })
+    }
 
     emit("success", true)
 
   } catch (e: any) {
-    submitError.value = e?.response?._data?.message || "Error"
+
+    submitError.value =
+      e?.response?._data?.message || "Error"
+
   } finally {
+
     loading.submittingForm = false
   }
 }
+
 function cancel() {
   emit("cancel")
 }

package/components/TableV3.vue

@@ -0,0 +1,179 @@
+<template>
+  <v-card
+    width="100%"
+    variant="outlined"
+    border="thin"
+    rounded="lg"
+    :loading="loading"
+    class="table-v3"
+  >
+    <v-toolbar density="compact" color="grey-lighten-5">
+      <template #prepend>
+        <v-btn
+          icon
+          variant="text"
+          density="comfortable"
+          class="table-v3__refresh-btn"
+          @click="emit('refresh')"
+        >
+          <v-icon size="28" color="black">mdi-history</v-icon>
+        </v-btn>
+      </template>
+
+      <template #append>
+        <v-row no-gutters justify="end" align="center">
+          <span class="mr-2 text-caption text-fontgray">
+            {{ pageRange }}
+          </span>
+          <v-btn
+            icon="mdi-chevron-left"
+            variant="text"
+            density="comfortable"
+            :disabled="!canGoPrev"
+            @click="goPrev"
+          />
+          <v-btn
+            icon="mdi-chevron-right"
+            variant="text"
+            density="comfortable"
+            :disabled="!canGoNext"
+            @click="goNext"
+          />
+        </v-row>
+      </template>
+    </v-toolbar>
+
+    <v-data-table
+      :headers="headers"
+      :items="items"
+      :item-value="itemValue"
+      :items-per-page="itemsPerPage"
+      fixed-header
+      hide-default-footer
+      :style="`max-height: calc(100vh - (${offset}px))`"
+      @click:row="(_: any, data: any) => emit('row-click', data.item)"
+    >
+      <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
+        <slot :name="slotName" v-bind="slotProps" />
+      </template>
+    </v-data-table>
+
+    <v-toolbar density="compact" color="grey-lighten-5" class="table-v3__footer">
+      <template #append>
+        <v-row no-gutters justify="end" align="center">
+          <span class="mr-2 text-caption text-fontgray">
+            {{ pageRange }}
+          </span>
+          <v-btn
+            icon="mdi-chevron-left"
+            variant="text"
+            density="comfortable"
+            :disabled="!canGoPrev"
+            @click="goPrev"
+          />
+          <v-btn
+            icon="mdi-chevron-right"
+            variant="text"
+            density="comfortable"
+            :disabled="!canGoNext"
+            @click="goNext"
+          />
+        </v-row>
+      </template>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  headers: {
+    type: Array as PropType<Array<Record<string, any>>>,
+    required: true,
+  },
+  items: {
+    type: Array as PropType<Array<Record<string, any>>>,
+    default: () => [],
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  itemValue: {
+    type: String,
+    default: "_id",
+  },
+  itemsPerPage: {
+    type: Number,
+    default: 20,
+  },
+  page: {
+    type: Number,
+    default: 1,
+  },
+  pages: {
+    type: Number,
+    default: 0,
+  },
+  pageRange: {
+    type: String,
+    default: "-- - -- of --",
+  },
+  offset: {
+    type: Number,
+    default: 220,
+  },
+});
+
+const emit = defineEmits(["refresh", "update:page", "row-click"]);
+
+const internalPage = ref(props.page);
+const canGoPrev = computed(() => internalPage.value > 1);
+const canGoNext = computed(
+  () => props.pages > 0 && internalPage.value < props.pages
+);
+
+function goPrev() {
+  if (!canGoPrev.value) {
+    return;
+  }
+  internalPage.value -= 1;
+  emit("update:page", internalPage.value);
+}
+
+function goNext() {
+  if (!canGoNext.value) {
+    return;
+  }
+  internalPage.value += 1;
+  emit("update:page", internalPage.value);
+}
+
+watch(
+  () => props.page,
+  (val) => {
+    internalPage.value = val;
+  }
+);
+</script>
+
+<style scoped>
+.table-v3 :deep(thead th) {
+  background-color: #f5f5f5;
+  color: #6b7280;
+  font-weight: 600 !important;
+  font-size: 12px;
+}
+
+.table-v3 :deep(tbody td) {
+  height: 54px;
+}
+
+.table-v3__footer {
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.table-v3__refresh-btn {
+  width: 38px;
+  height: 38px;
+}
+</style>