+
+
+
Requesting access to:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ itemName }}
+
{{ itemPath }}
-
+
{{ formError }}
-
+
-
Access Type
-
+
+
-
-
+
-
-
-
-
-
-
-
-
-
- Your request will be reviewed by the document owner or administrator.
-
+
+
+
+
+
+ How long do you need access to this resource?
+
+
-
- Cancel
-
-
-
- Submit Request
-
+
+
+
+ * Required fields
+
+
+
+
+ Cancel
+
+
+ Submit Request
+
+
diff --git a/components/dms/explorer/DMSExplorer.vue b/components/dms/explorer/DMSExplorer.vue
index 5f8cb9e..03860bc 100644
--- a/components/dms/explorer/DMSExplorer.vue
+++ b/components/dms/explorer/DMSExplorer.vue
@@ -5,6 +5,7 @@ import DMSDocumentViewer from '~/components/dms/viewers/DMSDocumentViewer.vue';
import DMSUploadDialog from '~/components/dms/dialogs/DMSUploadDialog.vue';
import DMSCreateNewDialog from '~/components/dms/dialogs/DMSCreateNewDialog.vue';
import DMSAccessRequestDialog from '~/components/dms/dialogs/DMSAccessRequestDialog.vue';
+import { useDmsStore } from '~/stores/dms';
// Props for the explorer
const props = defineProps({
@@ -36,6 +37,9 @@ const sortOrder = ref('asc'); // asc, desc
const searchQuery = ref('');
const showAccessRequestDialog = ref(false);
const accessRequestItem = ref(null);
+const isRequestingAccess = ref(false);
+const requestSuccess = ref(false);
+const requestError = ref(null);
// Navigation history for back/forward functionality
const navigationHistory = ref([props.initialPath]);
@@ -52,6 +56,7 @@ const currentDocument = ref(null);
// Mock data - replace with actual API calls
const allItems = ref([]);
const router = useRouter();
+const dmsStore = useDmsStore();
// Methods
const loadItems = async () => {
@@ -600,6 +605,39 @@ const closeAccessRequestDialog = () => {
accessRequestItem.value = null;
};
+const handleAccessRequest = async (item) => {
+ if (!item) return;
+
+ accessRequestItem.value = item;
+ showAccessRequestDialog.value = true;
+};
+
+const submitAccessRequest = async (requestData) => {
+ isRequestingAccess.value = true;
+ requestError.value = null;
+
+ try {
+ await dmsStore.requestAccess(
+ accessRequestItem.value.id,
+ requestData.accessType,
+ requestData.justification,
+ requestData.accessDuration
+ );
+
+ requestSuccess.value = true;
+ setTimeout(() => {
+ showAccessRequestDialog.value = false;
+ requestSuccess.value = false;
+ accessRequestItem.value = null;
+ }, 2000);
+ } catch (error) {
+ requestError.value = error.message || 'Failed to submit access request. Please try again.';
+ console.error('Access request error:', error);
+ } finally {
+ isRequestingAccess.value = false;
+ }
+};
+
// Computed properties
const currentItems = computed(() => {
let items = allItems.value.filter(item => item.parentPath === currentPath.value);
@@ -1119,6 +1157,33 @@ const parentType = computed(() => {
+
+
+
+
+
Restricted Access
+
+
+ Request Pending
+
+
+
@@ -1345,21 +1410,60 @@ const parentType = computed(() => {
/>
-
-
+
+
+
+
+
+
+
Access request submitted successfully!
+
+
+
+
+
+
+
+
+
+
{{ requestError }}
+
+
+
+
diff --git a/components/dms/workflows/DMSAccessRequestTracker.vue b/components/dms/workflows/DMSAccessRequestTracker.vue
new file mode 100644
index 0000000..471513d
--- /dev/null
+++ b/components/dms/workflows/DMSAccessRequestTracker.vue
@@ -0,0 +1,435 @@
+
+
+
+
+
+
+
+
Access Request Metrics
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Personal Metrics
+
Your access request performance
+
+
+
+
+
+
+
{{ personalMetrics.totalRequests }}
+
Total Requests
+
+
+
+
{{ personalMetrics.pendingRequests }}
+
Pending
+
+
+
+
{{ personalMetrics.approvedRequests }}
+
Approved
+
+
+
+
{{ personalMetrics.rejectedRequests }}
+
Rejected
+
+
+
+
+
Response Time Metrics
+
+
+
{{ formatDuration(personalMetrics.avgResponseTime) }}
+
Average Response
+
+
+
+
{{ formatDuration(personalMetrics.fastestResponse) }}
+
Fastest Response
+
+
+
+
{{ formatDuration(personalMetrics.slowestResponse) }}
+
Slowest Response
+
+
+
+
+
Overdue Metrics
+
+
+
{{ personalMetrics.overdueRequests }}
+
Overdue Requests
+
+
+
+
{{ formatPercentage(personalMetrics.overduePercentage) }}
+
Overdue Percentage
+
+
+
+
+
+
+
+
+
Department Metrics
+
Department-wide performance
+
+
+
+
+
+
+
{{ departmentMetrics.totalRequests }}
+
Total Requests
+
+
+
+
{{ departmentMetrics.pendingRequests }}
+
Pending
+
+
+
+
{{ departmentMetrics.approvedRequests }}
+
Approved
+
+
+
+
{{ departmentMetrics.rejectedRequests }}
+
Rejected
+
+
+
+
+
Response Time Metrics
+
+
+
{{ formatDuration(departmentMetrics.avgResponseTime) }}
+
Average Response
+
+
+
+
{{ formatDuration(departmentMetrics.fastestResponse) }}
+
Fastest Response
+
+
+
+
{{ formatDuration(departmentMetrics.slowestResponse) }}
+
Slowest Response
+
+
+
+
+
Overdue Metrics
+
+
+
{{ departmentMetrics.overdueRequests }}
+
Overdue Requests
+
+
+
+
{{ formatPercentage(departmentMetrics.overduePercentage) }}
+
Overdue Percentage
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/components/dms/workflows/DMSApprovalQueue.vue b/components/dms/workflows/DMSApprovalQueue.vue
new file mode 100644
index 0000000..7bb13c2
--- /dev/null
+++ b/components/dms/workflows/DMSApprovalQueue.vue
@@ -0,0 +1,539 @@
+
+
+
+
+
+
+
+
Access Requests
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Loading access requests...
+
+
+
+
+
+
+
No access requests found
+
There are no access requests matching your current filters.
+
+ View all requests
+
+
+
+
+
+
+
+
+ |
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+ Status
+ |
+
+ Actions
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ request.documentName }}
+
+
+ {{ request.documentPath }}
+
+
+ |
+
+
+
+
+ {{ request.requesterName }}
+
+
+ {{ request.requesterDepartment }}
+
+ |
+
+
+
+
+ {{ formatDate(request.requestDate) }}
+
+
+ {{ formatTimeAgo(request.requestDate) }}
+
+ |
+
+
+
+
+ {{ formatDate(request.targetResolutionTime) }}
+
+
+ {{ getDeadlineStatus(request).text }}
+
+ |
+
+
+
+
+ {{ request.status.charAt(0).toUpperCase() + request.status.slice(1) }}
+
+ |
+
+
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/navigation/index.js b/navigation/index.js
index 838fbc3..4cfe22e 100644
--- a/navigation/index.js
+++ b/navigation/index.js
@@ -10,12 +10,6 @@ export default [
"child": [],
"meta": {}
},
- {
- "title": "Access Requests",
- "path": "/dms/access-requests",
- "icon": "ic:outline-security",
- "child": []
- },
{
"title": "Settings",
"path": "/dms/settings",
diff --git a/pages/dms/access-management.vue b/pages/dms/access-management.vue
new file mode 100644
index 0000000..400838a
--- /dev/null
+++ b/pages/dms/access-management.vue
@@ -0,0 +1,236 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Loading access management...
+
+
+
+
+
+
+
⚠️
+
Error Loading Access Management
+
{{ errorMessage }}
+
+ Retry
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ dmsStore.currentUser.name }}
+
{{ dmsStore.currentUser.department }}
+
+
+
+
+
+ Approver
+
+
+
+ Administrator
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ tabs.find(t => t.id === activeTab)?.description }}
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pages/dms/index.vue b/pages/dms/index.vue
index cfde3ab..93861f5 100644
--- a/pages/dms/index.vue
+++ b/pages/dms/index.vue
@@ -181,6 +181,41 @@ onMounted(() => {
+
+
+
+
+
+
+
+
+
+
+ Access Management
+
+
+
+
+
+ Role Management
+
+
+
+
+import { ref, onMounted } from 'vue';
+import { useDmsStore } from '~/stores/dms';
+
+// Define page metadata
+definePageMeta({
+ title: "Role Management",
+ middleware: ["auth"],
+ requiresAuth: true,
+ breadcrumb: [
+ {
+ name: "DMS",
+ path: "/dms",
+ },
+ {
+ name: "Role Management",
+ path: "/dms/role-management",
+ },
+ ],
+});
+
+// Store
+const dmsStore = useDmsStore();
+
+// State variables
+const isLoading = ref(true);
+const users = ref([]);
+const roles = ref([]);
+const activeTab = ref('users');
+const searchQuery = ref('');
+const hasError = ref(false);
+const errorMessage = ref('');
+
+// Filtered users
+const filteredUsers = computed(() => {
+ if (!searchQuery.value) return users.value;
+
+ const query = searchQuery.value.toLowerCase();
+ return users.value.filter(user =>
+ user.name.toLowerCase().includes(query) ||
+ user.email.toLowerCase().includes(query) ||
+ user.department.toLowerCase().includes(query) ||
+ user.roles.some(role => role.toLowerCase().includes(query))
+ );
+});
+
+// Methods
+const loadUsers = async () => {
+ isLoading.value = true;
+ hasError.value = false;
+
+ try {
+ // This would be an actual API call in production
+ // For demo, we'll simulate it with mock data
+ await new Promise(resolve => setTimeout(resolve, 800));
+
+ users.value = [
+ {
+ id: 'user1',
+ name: 'Aiman Fakhrullah',
+ email: 'aiman@example.com',
+ department: 'JKR Bahagian Kejuruteraan Awam Cawangan Kota Bharu',
+ roles: ['engineer'],
+ lastLogin: '2023-12-15T08:30:00Z',
+ status: 'active'
+ },
+ {
+ id: 'user2',
+ name: 'Ahmad Zaki',
+ email: 'ahmad@example.com',
+ department: 'JKR Bahagian Kewangan',
+ roles: ['finance', 'approver'],
+ lastLogin: '2023-12-14T14:45:00Z',
+ status: 'active'
+ },
+ {
+ id: 'user3',
+ name: 'Siti Aminah',
+ email: 'siti@example.com',
+ department: 'JKR Cawangan Kuala Terengganu',
+ roles: ['manager', 'approver'],
+ lastLogin: '2023-12-13T09:15:00Z',
+ status: 'active'
+ },
+ {
+ id: 'admin1',
+ name: 'Admin User',
+ email: 'admin@example.com',
+ department: 'IT Department',
+ roles: ['admin'],
+ lastLogin: '2023-12-15T10:00:00Z',
+ status: 'active'
+ }
+ ];
+ } catch (error) {
+ console.error('Failed to load users:', error);
+ hasError.value = true;
+ errorMessage.value = 'Failed to load users. Please try again.';
+ } finally {
+ isLoading.value = false;
+ }
+};
+
+const loadRoles = async () => {
+ isLoading.value = true;
+ hasError.value = false;
+
+ try {
+ // This would be an actual API call to Authentik in production
+ // For demo, we'll simulate it with mock data
+ await new Promise(resolve => setTimeout(resolve, 600));
+
+ roles.value = [
+ {
+ id: 'admin',
+ name: 'Administrator',
+ description: 'Full system access',
+ userCount: 1,
+ permissions: {
+ documents: {
+ view: true,
+ edit: true,
+ delete: true,
+ approve: true,
+ reject: true,
+ download: true
+ },
+ cabinets: {
+ view: true,
+ create: true,
+ edit: true,
+ delete: true
+ },
+ accessRequests: {
+ approve: true,
+ reject: true,
+ viewAll: true
+ }
+ }
+ },
+ {
+ id: 'manager',
+ name: 'Manager',
+ description: 'Department management',
+ userCount: 1,
+ permissions: {
+ documents: {
+ view: true,
+ edit: true,
+ delete: false,
+ approve: true,
+ reject: true,
+ download: true
+ },
+ cabinets: {
+ view: true,
+ create: true,
+ edit: true,
+ delete: false
+ },
+ accessRequests: {
+ approve: true,
+ reject: true,
+ viewAll: true
+ }
+ }
+ },
+ {
+ id: 'engineer',
+ name: 'Engineer',
+ description: 'Engineering staff',
+ userCount: 1,
+ permissions: {
+ documents: {
+ view: true,
+ edit: true,
+ delete: false,
+ approve: false,
+ reject: false,
+ download: true
+ },
+ cabinets: {
+ view: true,
+ create: false,
+ edit: false,
+ delete: false
+ },
+ accessRequests: {
+ approve: false,
+ reject: false,
+ viewAll: false
+ }
+ }
+ },
+ {
+ id: 'finance',
+ name: 'Finance',
+ description: 'Finance department staff',
+ userCount: 1,
+ permissions: {
+ documents: {
+ view: true,
+ edit: true,
+ delete: false,
+ approve: false,
+ reject: false,
+ download: true
+ },
+ cabinets: {
+ view: true,
+ create: false,
+ edit: false,
+ delete: false
+ },
+ accessRequests: {
+ approve: false,
+ reject: false,
+ viewAll: false
+ }
+ }
+ },
+ {
+ id: 'approver',
+ name: 'Approver',
+ description: 'Can approve access requests',
+ userCount: 2,
+ permissions: {
+ documents: {
+ view: true,
+ edit: false,
+ delete: false,
+ approve: true,
+ reject: true,
+ download: false
+ },
+ cabinets: {
+ view: true,
+ create: false,
+ edit: false,
+ delete: false
+ },
+ accessRequests: {
+ approve: true,
+ reject: true,
+ viewAll: true
+ }
+ }
+ }
+ ];
+ } catch (error) {
+ console.error('Failed to load roles:', error);
+ hasError.value = true;
+ errorMessage.value = 'Failed to load roles. Please try again.';
+ } finally {
+ isLoading.value = false;
+ }
+};
+
+const switchTab = (tab) => {
+ activeTab.value = tab;
+
+ if (tab === 'users' && users.value.length === 0) {
+ loadUsers();
+ } else if (tab === 'roles' && roles.value.length === 0) {
+ loadRoles();
+ }
+};
+
+const formatDateTime = (dateString) => {
+ if (!dateString) return 'Never';
+
+ const date = new Date(dateString);
+ return date.toLocaleString('en-US', {
+ year: 'numeric',
+ month: 'short',
+ day: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit'
+ });
+};
+
+// Icons
+const getSvgIcon = (iconName) => {
+ const icons = {
+ 'users': ``,
+ 'roles': ``,
+ 'search': ``,
+ 'add': ``,
+ 'edit': ``,
+ 'trash': ``
+ };
+
+ return icons[iconName] || '';
+};
+
+// Lifecycle hooks
+onMounted(() => {
+ loadUsers();
+});
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Loading role management...
+
+
+
+
+
+
+
⚠️
+
Error Loading Data
+
{{ errorMessage }}
+
+ Retry
+
+
+
+
+
+
+
+
+
+
+
+
+
Authentik Integration
+
Role-Based Access Control Management
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ activeTab === 'users' ? 'Add User' : 'Add Role' }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+ User
+ |
+
+ Department
+ |
+
+ Roles
+ |
+
+ Last Login
+ |
+
+ Status
+ |
+
+ Actions
+ |
+
+
+
+
+
+
+
+ {{ user.name.charAt(0) }}
+
+
+
+ {{ user.name }}
+
+
+ {{ user.email }}
+
+
+ |
+
+ {{ user.department }}
+ |
+
+
+
+ {{ role }}
+
+
+ |
+
+ {{ formatDateTime(user.lastLogin) }}
+ |
+
+
+ {{ user.status }}
+
+ |
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ role.name }}
+
{{ role.description }}
+
+
+
+
+
+
+
+
+
+
Document Permissions
+
+
+
+ {{ key }}
+
+
+
+
+
+
+
Cabinet Permissions
+
+
+
+ {{ key }}
+
+
+
+
+
+
+
Access Request Permissions
+
+
+
+ {{ key }}
+
+
+
+
+
+
+ {{ role.userCount }} {{ role.userCount === 1 ? 'user' : 'users' }} with this role
+
+
+
+
+
+
+
+
+