Updated Documentation, Upload Dialogue and Explorer Design

components/dms/dialogs/DMSUploadDialog.vue

@@ -13,7 +13,7 @@ const props = defineProps({
   }
 });
 
-const emit = defineEmits(['close', 'upload']);
+const emit = defineEmits(['close', 'upload', 'update:visible']);
 
 // Store
 const dmsStore = useDmsStore();
@@ -45,14 +45,15 @@ const customFields = computed(() => {
 // Get tag suggestions
 const tagSuggestions = ref([]);
 
+// Add a ref for the file input
+const fileInput = ref(null);
+
 // Methods
 const openFileDialog = () => {
-  const input = document.createElement('input');
-  input.type = 'file';
-  input.multiple = true;
-  input.accept = dmsStore.systemSettings.upload.allowedFileTypes.map(ext => `.${ext}`).join(',');
-  input.onchange = (e) => handleFiles(Array.from(e.target.files));
-  input.click();
+  // Use the ref instead of creating a new input element
+  if (fileInput.value) {
+    fileInput.value.click();
+  }
 };
 
 const handleFiles = (files) => {
@@ -69,7 +70,8 @@ const handleFiles = (files) => {
       fileMetadata.value[file.name] = {
         ...template,
         title: file.name.split('.')[0],
-        author: 'Current User' // Get from auth store
+        author: dmsStore.currentUser.name || 'Current User',
+        tags: [] // Ensure tags is always initialized as an array
       };
     } else {
       errors[file.name] = validation.errors;
@@ -116,6 +118,11 @@ const uploadFiles = async () => {
       const file = selectedFiles.value[i];
       const metadata = fileMetadata.value[file.name];
       
+      // Ensure all required fields are present
+      if (!metadata.tags) metadata.tags = [];
+      if (!metadata.author) metadata.author = dmsStore.currentUser.name || 'Current User';
+      if (!metadata.department) metadata.department = dmsStore.currentUser.department || '';
+      
       // Upload with enhanced metadata
       await dmsStore.uploadFileWithMetadata(file, metadata, props.currentPath);
       
@@ -126,7 +133,7 @@ const uploadFiles = async () => {
     closeDialog();
   } catch (error) {
     console.error('Upload failed:', error);
-    // Show error to user
+    alert(`Upload failed: ${error.message || 'Unknown error'}`);
   } finally {
     isUploading.value = false;
   }
@@ -137,6 +144,7 @@ const closeDialog = () => {
   fileMetadata.value = {};
   validationErrors.value = {};
   uploadProgress.value = 0;
+  emit('update:visible', false);
   emit('close');
 };
 
@@ -178,14 +186,25 @@ const handleTagInput = (fileName, input) => {
 };
 
 const addTag = (fileName, tag) => {
-  if (!fileMetadata.value[fileName].tags.includes(tag)) {
-    fileMetadata.value[fileName].tags.push(tag);
+  if (!tag || tag.trim() === '') return;
+  
+  // Initialize tags array if it doesn't exist
+  if (!fileMetadata.value[fileName].tags) {
+    fileMetadata.value[fileName].tags = [];
   }
+  
+  // Only add if tag isn't empty and not already in the array
+  if (!fileMetadata.value[fileName].tags.includes(tag.trim())) {
+    fileMetadata.value[fileName].tags.push(tag.trim());
+  }
+  
   tagSuggestions.value = [];
 };
 
 const removeTag = (fileName, tagIndex) => {
-  fileMetadata.value[fileName].tags.splice(tagIndex, 1);
+  if (fileMetadata.value[fileName]?.tags) {
+    fileMetadata.value[fileName].tags.splice(tagIndex, 1);
+  }
 };
 
 // Watch for template changes
@@ -222,10 +241,35 @@ const getFieldComponent = (fieldType) => {
       return 'text';
   }
 };
+
+onMounted(() => {
+  // Ensure fileMetadata is initialized correctly for each selected file
+  selectedFiles.value.forEach(file => {
+    if (!fileMetadata.value[file.name]) {
+      const template = dmsStore.metadataTemplates[metadataTemplate.value];
+      fileMetadata.value[file.name] = {
+        ...template,
+        title: file.name.split('.')[0],
+        tags: [],
+        author: dmsStore.currentUser.name || 'Current User'
+      };
+    }
+  });
+});
 </script>
 
 <template>
   <rs-modal :visible="visible" @close="closeDialog" size="4xl">
+    <!-- Hidden file input for better browser compatibility -->
+    <input 
+      type="file" 
+      ref="fileInput" 
+      @change="(e) => handleFiles(Array.from(e.target.files))" 
+      multiple 
+      class="hidden"
+      :accept="dmsStore.systemSettings.upload.allowedFileTypes.map(ext => `.${ext}`).join(',')"
+    />
+    
     <template #header>
       <div class="flex items-center space-x-2">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -401,7 +445,7 @@ const getFieldComponent = (fieldType) => {
                     </div>
                     
                     <!-- Selected Tags -->
-                    <div v-if="fileMetadata[file.name].tags && fileMetadata[file.name].tags.length > 0" 
+                    <div v-if="fileMetadata[file.name]?.tags && fileMetadata[file.name].tags.length > 0" 
                          class="flex flex-wrap gap-2">
                       <span v-for="(tag, tagIndex) in fileMetadata[file.name].tags" :key="tagIndex"
                             class="inline-flex items-center px-2 py-1 text-xs bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 rounded-full">

components/dms/explorer/DMSExplorer.vue

@@ -40,6 +40,7 @@ const accessRequestItem = ref(null);
 const isRequestingAccess = ref(false);
 const requestSuccess = ref(false);
 const requestError = ref(null);
+const parentType = ref('root'); // root, cabinet, drawer, folder
 
 // Navigation history for back/forward functionality
 const navigationHistory = ref([props.initialPath]);
@@ -306,25 +307,47 @@ const goForward = () => {
 
 const navigateTo = (path) => {
   if (path !== currentPath.value) {
-    // Remove any forward history if we're navigating to a new path
-    if (historyIndex.value < navigationHistory.value.length - 1) {
+    // Add current path to history if not navigating with back/forward buttons
+    if (historyIndex.value === navigationHistory.value.length - 1) {
+      navigationHistory.value.push(path);
+      historyIndex.value++;
+    } else {
+      // If navigating from a back/forward position, truncate history
       navigationHistory.value = navigationHistory.value.slice(0, historyIndex.value + 1);
+      navigationHistory.value.push(path);
+      historyIndex.value++;
     }
     
-    // Add new path to history
-    navigationHistory.value.push(path);
-    historyIndex.value = navigationHistory.value.length - 1;
-    
     currentPath.value = path;
-    
-    // Auto-expand tree to show current path
-    autoExpandTreeForPath(path);
-    
     emit('pathChanged', path);
+    
+    // Update parent type based on the path
+    updateParentType(path);
+    
+    // Refresh items for the new path
+    loadItems();
+  }
+};
+
+// Update parent type based on the current path
+const updateParentType = (path) => {
+  if (path === '/') {
+    parentType.value = 'root';
+  } else {
+    // Find the last container in the path
+    const pathParts = path.split('/').filter(Boolean);
+    if (pathParts.length === 0) {
+      parentType.value = 'root';
+    } else if (pathParts.length === 1) {
+      parentType.value = 'cabinet';
+    } else if (pathParts.length === 2) {
+      parentType.value = 'drawer';
+    } else {
+      parentType.value = 'folder';
+    }
   }
 };
 
-// Auto-expand tree items to show the current path
 const autoExpandTreeForPath = (path) => {
   const segments = path.split('/').filter(Boolean);
   segments.forEach((segment, index) => {
@@ -509,10 +532,18 @@ const getAccessTypeCount = (accessType) => {
 };
 
 // Lifecycle hooks
-onMounted(() => {
-  loadItems();
+onMounted(async () => {
+  // Load items
+  await loadItems();
+  
+  // Set initial parent type
+  updateParentType(currentPath.value);
+  
   // Auto-expand tree for initial path
   autoExpandTreeForPath(currentPath.value);
+  
+  // Mark as loaded
+  isLoading.value = false;
 });
 
 const getTabClasses = (tab) => {
@@ -738,14 +769,9 @@ const breadcrumbs = computed(() => {
   return breadcrumbItems;
 });
 
-const parentType = computed(() => {
-  const pathParts = currentPath.value.split('/').filter(Boolean);
-  if (pathParts.length === 0) return 'root';
-  if (pathParts.length === 1) return 'cabinet';
-  if (pathParts.length === 2) return 'drawer';
-  if (pathParts.length === 3) return 'folder';
-  return 'subfolder';
-});
+const getCurrentContainerType = () => {
+  return parentType.value;
+};
 </script>
 
 <template>
@@ -1411,7 +1437,9 @@ const parentType = computed(() => {
     
     <!-- Create New Dialog -->
     <DMSCreateNewDialog
-      v-if="showCreateDialog"
+      v-model:visible="showCreateDialog"
+      :current-path="currentPath"
+      :parent-type="getCurrentContainerType()"
       @close="showCreateDialog = false"
       @create="handleCreateNew"
     />

docs/DMS_SETTINGS.md

@@ -21,7 +21,7 @@ The Document Management System (DMS) Settings provides administrators with compl
 ## Access & Navigation
 
 ### Prerequisites
-- **Administrative Privileges**: Only users with admin roles can access DMS settings
+- **Administrative Privileges**: Only users with Superadmin or Admin roles can access DMS settings
 - **Browser Requirements**: Modern browser with JavaScript enabled
 - **Network Access**: Stable connection to the EDMS server
 
@@ -37,7 +37,7 @@ The Document Management System (DMS) Settings provides administrators with compl
    - **Action Buttons**: Save, Export, Import, and Reset options in the header
 
 3. **Permission Verification**:
-   - System automatically verifies admin permissions
+   - System automatically verifies Superadmin/Admin permissions
    - Unauthorized users are redirected to main DMS interface
    - Error messages displayed for access issues
 
@@ -85,25 +85,52 @@ The DMS settings are organized into six main categories, each with a distinct ic
 
 ### User Roles Configuration
 
-#### Default Roles
-The system comes with four default user roles:
-- **Admin**: Full system access and administrative privileges
-- **Editor**: Create, edit, and manage documents with approval capabilities
-- **Viewer**: Read-only access to assigned documents
-- **Uploader**: Upload documents with basic editing capabilities
+#### Default System Roles
+The system comes with three default user roles:
+- **Superadmin**: Full system access with all administrative privileges
+- **Admin**: Administrative access to manage documents, access requests, and some settings
+- **User**: Standard access for viewing, uploading, and managing personal documents
 
-#### Adding Custom Roles
-1. **Navigate to User Roles section**
-2. **Click "Add Role" button**
-3. **Enter role name** in the prompt dialog
-4. **Role automatically added** to the list
-5. **Save settings** to persist changes
+#### Role Capabilities
 
-#### Removing Roles
-1. **Locate role** in the roles list
-2. **Click delete button** (trash icon) next to role name
-3. **Confirm deletion** (role removed from all users)
-4. **Save settings** to persist changes
+##### Superadmin Role
+- **Color Scheme**: Purple
+- **Description**: Full system access with ability to manage all settings, users, and content
+- **Key Capabilities**:
+  - User and role management through Authentik integration
+  - Full system settings configuration
+  - Complete document management
+  - Access to all system areas including Pentadbiran
+  - Role management authority
+  - System monitoring and maintenance
+
+##### Admin Role
+- **Color Scheme**: Blue
+- **Description**: Administrative access to manage content and some system settings
+- **Key Capabilities**:
+  - Document management and organization
+  - Access request processing
+  - View KPI dashboard and metrics
+  - Some system configuration access
+  - Cannot access Pentadbiran section
+  - Cannot manage user roles
+
+##### User Role
+- **Color Scheme**: Green
+- **Description**: Standard user access for viewing and interacting with content based on permissions
+- **Key Capabilities**:
+  - View permitted documents
+  - Upload personal documents
+  - Request access to restricted content
+  - Manage personal documents
+  - No administrative access
+
+#### Role Switching
+The system includes a role switching capability for testing and administrative purposes:
+1. Navigate to **Switch Role** in the DMS menu
+2. Select the desired role from the available options
+3. Apply the temporary role change
+4. Return to original role when finished
 
 ### Permission Configuration
 
@@ -116,50 +143,40 @@ Configure specific permissions for different user levels:
   - **Impact**: Controls document visibility
 
 - **Edit Documents**:
-  - **Default**: Enabled for Admin/Editor roles
+  - **Default**: Enabled for all roles
   - **Purpose**: Modify document content and metadata
   - **Impact**: Affects document modification capabilities
 
 - **Delete Documents**:
-  - **Default**: Disabled (Admin only)
+  - **Default**: Enabled for Superadmin and Admin roles only
   - **Purpose**: Remove documents from system
   - **Impact**: Permanent document removal access
 
 - **Download Documents**:
-  - **Default**: Enabled for most roles
+  - **Default**: Enabled for all roles
   - **Purpose**: Save documents locally
   - **Impact**: Controls offline document access
 
 - **Share Documents**:
-  - **Default**: Enabled for Admin/Editor roles
+  - **Default**: Enabled for all roles
   - **Purpose**: Share documents with other users
   - **Impact**: Affects collaboration capabilities
 
+- **Approve Access Requests**:
+  - **Default**: Enabled for Superadmin and Admin roles only
+  - **Purpose**: Process access request workflows
+  - **Impact**: Controls access approval workflow
+
 ### Authentication Configuration
 
-#### Single Sign-On (SSO)
-- **Purpose**: Integrate with organizational authentication systems
-- **Supported Providers**: LDAP, Active Directory, OAuth providers
-- **Configuration**: Enable/disable SSO functionality
-- **Impact**: Streamlines user authentication process
-
-#### Multi-Factor Authentication (MFA)
-- **Purpose**: Enhanced security for sensitive environments
-- **Methods**: SMS, email, authenticator apps
-- **Configuration**: Require MFA for all users or specific roles
-- **Impact**: Significantly improves account security
-
-#### LDAP Integration
-- **Purpose**: Synchronize with enterprise directory services
-- **Features**: User import, group synchronization, automatic provisioning
-- **Configuration**: Enable/disable LDAP authentication
-- **Impact**: Centralizes user management
-
-#### Session Management
-- **Session Timeout**: Configure automatic logout (1-24 hours)
-- **Default**: 8 hours
-- **Security Impact**: Balances security with user convenience
-- **Compliance**: Helps meet organizational security policies
+#### Authentik Integration
+- **Purpose**: Centralized identity and access management
+- **Configuration**: 
+  - Enable/disable Authentik integration
+  - Configure connection parameters
+  - Map Authentik groups to system roles
+- **User Experience**: Single sign-on with role-based permissions
+- **Management**: User account provisioning and deprovisioning
 
 ## Document & Folder Settings
 

docs/SITE_SETTINGS.md

@@ -49,7 +49,7 @@ Site settings affect the entire application including:
 - **Backup & Restore**: Export/import configuration for backup and migration
 
 ### Administrative Features
-- **Role-Based Access**: Only administrators can modify site settings
+- **Role-Based Access**: Only Superadmin users can modify site settings
 - **Validation System**: Comprehensive validation for all settings
 - **File Upload Management**: Secure file upload for logos and assets
 - **Version Control**: Track changes and maintain configuration history
@@ -58,7 +58,7 @@ Site settings affect the entire application including:
 ## Accessing Site Settings
 
 ### Prerequisites
-- **Administrative Privileges**: User must have admin role
+- **Administrative Privileges**: User must have Superadmin role
 - **Modern Browser**: Chrome 70+, Firefox 65+, Safari 12+, Edge 79+
 - **JavaScript Enabled**: Required for interactive functionality
 - **Network Access**: Stable connection for file uploads and saves
@@ -69,6 +69,12 @@ Site settings affect the entire application including:
 3. **Site Settings**: Choose **Site Settings** from the submenu
 4. **Alternative Access**: Direct URL navigation to `/admin/site-settings`
 
+### Permission Requirements
+- **Available to**: Superadmin role only
+- **Admin users**: Cannot access Site Settings (limited to DMS Settings)
+- **Regular users**: No access to any settings pages
+- **Access control**: Implemented through navigation meta tags and server-side verification
+
 ### Interface Layout
 - **Tabbed Interface**: Basic Info, Branding, SEO, Advanced settings
 - **Live Preview Panel**: Real-time preview of changes

docs/Technical_Guide.md

@@ -26,7 +26,7 @@ The Electronic Document Management System (EDMS) is a modern web application bui
 - **Database**: Prisma ORM with MySQL support and comprehensive schema
 - **Styling**: TailwindCSS with custom Rs component system
 - **State Management**: Pinia for reactive state management with persistence
-- **Authentication**: Flexible authentication with JWT tokens and RBAC
+- **Authentication**: Flexible authentication with Authentik integration and role-based access control
 - **File Management**: Server-side file handling with metadata and versioning
 - **Real-time Features**: Vue reactivity for live updates and notifications
 - **Responsive Design**: Mobile-first approach with adaptive layouts
@@ -398,45 +398,67 @@ npm run dev
 
 ## Component Structure
 
-### Frontend Architecture
-```
-pages/
-├── dms/
-│   ├── index.vue                 # Main DMS interface with access level tabs
-│   ├── settings.vue              # Comprehensive DMS settings management
-│   └── erd.vue                   # Entity Relationship Diagram viewer
-├── index.vue                     # Dashboard/landing page
-└── [...other pages]
+### Core Components
 
-components/
-├── dms/
-│   └── explorer/
-│       └── DMSExplorer.vue       # Document management interface
-├── Rs/                           # Reusable component system
-│   ├── RsButton.vue
-│   ├── RsCard.vue
-│   ├── RsInput.vue
-│   └── [...other components]
-└── layouts/
-    └── Breadcrumb.vue            # Navigation breadcrumb component
+The EDMS is organized into several key component directories:
 
-composables/
-├── useDmsSettings.js             # DMS settings state management
-├── useSiteSettings.js            # Site configuration management
-└── [...other composables]
+#### DMS Explorer Components
+- **`components/dms/explorer/`**: Main document exploration interface
+  - `DMSExplorer.vue`: Main document explorer component with folder navigation and document viewing
+  - `DMSFileViewer.vue`: Document preview and viewing component
+  - `DMSNavigation.vue`: Navigation tree and breadcrumbs
+  - `DMSSearchBar.vue`: Advanced search component
 
-stores/
-├── dms.js                        # DMS-specific Pinia store
-└── [...other stores]
-```
+#### Dialog Components
+- **`components/dms/dialogs/`**: Modal dialogs for user interactions
+  - `DMSUploadDialog.vue`: File upload with metadata tagging and validation
+  - `DMSCreateNewDialog.vue`: Create new cabinets, drawers, folders and subfolders
+  - `DMSAccessRequestDialog.vue`: Request access to restricted content
+  - `DMSAccessApprovalDialog.vue`: Approve/reject access requests with notes
 
-### Rs Component System
-The EDMS uses a custom component library (Rs components) for consistent UI:
-- **RsButton**: Standardized button component with variants
-- **RsCard**: Card container with header/body/footer slots
-- **RsInput**: Form input components with validation
-- **RsModal**: Modal dialog components
-- **RsTable**: Data table components with sorting/filtering
+#### Access Management Components
+- **`components/dms/workflows/`**: Access control and workflows
+  - `DMSAccessRequestTracker.vue`: KPI tracking for access requests with metrics visualization
+  - `DMSApprovalQueue.vue`: Access request approval management interface
+  - `DMSRoleManager.vue`: Role management interface with Authentik integration
+
+#### Admin Components
+- **`components/dms/admin/`**: Administrative interfaces
+  - `DMSAdminDashboard.vue`: KPI metrics and system overview with performance charts
+  - `DMSAccessManagement.vue`: Comprehensive access management for documents
+  - `DMSSystemSettings.vue`: System configuration interface
+
+### Page Components
+
+The system includes several key page components:
+
+#### Main DMS Pages
+- **`pages/dms/index.vue`**: Main document explorer page
+- **`pages/dms/admin-dashboard.vue`**: Administrative dashboard with KPIs
+- **`pages/dms/access-management.vue`**: Access request management interface
+- **`pages/dms/role-management.vue`**: Role-based access control management
+- **`pages/dms/switch-roles.vue`**: Role switching for testing and administrative purposes
+- **`pages/dms/settings.vue`**: DMS settings configuration
+
+### Store Implementation
+
+State management is handled through Pinia stores:
+
+#### DMS Store
+- **`stores/dms.js`**: Core DMS functionality and state management
+  - User information and authentication
+  - Document and cabinet management
+  - Role-based access control
+  - Access request workflows
+  - System settings and configuration
+  - File uploads and metadata management
+
+#### Global Store
+- **`stores/global.js`**: Application-wide state management
+  - Theme and UI preferences
+  - Global notifications
+  - Application state
+  - User session management
 
 ## API & Data Management
 
@@ -723,27 +745,113 @@ Site settings are integrated throughout the application:
 
 ## Security & Authentication
 
-### Authentication Methods
-- **Local Authentication**: Username/password with bcrypt hashing
-- **JWT Tokens**: Secure token-based authentication
-- **Session Management**: Configurable session timeouts
-- **Multi-Factor Authentication**: Optional MFA support
-- **LDAP Integration**: Enterprise directory integration
-- **SSO Support**: Single Sign-On capabilities
+### Authentication System
 
-### Authorization & RBAC
-- **Role-Based Access Control**: Granular permission system
-- **Dynamic Permissions**: Configurable permission sets
-- **Resource-Level Security**: Document-level access control
-- **Access Request Workflow**: Formal access request process
-- **Audit Trail**: Comprehensive activity logging
+The EDMS implements a comprehensive authentication and authorization system using Authentik integration for identity management and a three-tier role-based access control model.
 
-### Data Security
-- **Input Validation**: Server-side validation for all inputs
-- **SQL Injection Prevention**: Prisma ORM parameter binding
-- **XSS Protection**: Content Security Policy and input sanitization
-- **File Upload Security**: File type validation and virus scanning
-- **Encryption**: Data encryption at rest and in transit
+#### Authentik Integration
+
+Authentik is used as the identity provider with the following implementation:
+
+```javascript
+// Authentication integration in stores/dms.js
+async authenticateWithAuthentik(username, password) {
+  // In production, this connects to the Authentik API
+  // The implementation here is a placeholder for demonstration
+  
+  // Authenticate and receive user profile with role information
+  // Returns user object with role (superadmin, admin, or user)
+}
+```
+
+#### User Roles and Permissions
+
+The system implements three core roles with distinct permission levels:
+
+```javascript
+// Role definitions in stores/dms.js
+systemRoles: [
+  { 
+    id: 'superadmin', 
+    name: 'Super Administrator', 
+    description: 'Full system access with ability to manage all settings, users, and content',
+    color: 'purple' 
+  },
+  { 
+    id: 'admin', 
+    name: 'Administrator', 
+    description: 'Administrative access to manage content and some system settings',
+    color: 'blue' 
+  },
+  { 
+    id: 'user', 
+    name: 'User', 
+    description: 'Standard user access for viewing and interacting with content based on permissions',
+    color: 'green' 
+  }
+]
+```
+
+Role-based permissions are implemented through the `getRbacPermissions` method:
+
+```javascript
+// RBAC permissions implementation
+async getRbacPermissions(userId) {
+  // In production, this fetches permissions from Authentik
+  // Returns permission object with granular access controls
+  
+  return {
+    roles: ['superadmin' | 'admin' | 'user'],
+    permissions: {
+      documents: { view, edit, delete, approve, reject, download },
+      cabinets: { view, create, edit, delete },
+      accessRequests: { approve, reject, viewAll },
+      systemSettings: { manage },
+      users: { manage },
+      roles: { manage }
+    }
+  };
+}
+```
+
+### Navigation Authorization
+
+The navigation system enforces role-based access through meta tags:
+
+```javascript
+// Role-based navigation in navigation/index.js
+{
+  "title": "Admin Dashboard",
+  "path": "/dms/admin-dashboard",
+  "icon": "material-symbols:dashboard",
+  "meta": {
+    "auth": {
+      "role": ["admin", "superadmin"]  // Only these roles can access
+    }
+  }
+}
+```
+
+### Role Switching
+
+For testing and administrative purposes, the system includes a role switching component:
+
+```vue
+// Role switching implementation in pages/dms/switch-roles.vue
+<script setup>
+// Component for switching between Superadmin, Admin, and User roles
+// Preserves the original role for restoration
+</script>
+```
+
+### Secure Storage
+
+User credentials and sensitive information are handled securely:
+
+1. **Token Storage**: JWT tokens stored in HTTP-only cookies
+2. **Password Handling**: Passwords never stored in the browser
+3. **Session Management**: Auto-logout after configurable inactivity period
+4. **Credential Transmission**: All authentication requests over HTTPS
 
 ## Deployment
 

docs/User_Guide.md

@@ -5,7 +5,7 @@
 2. [Getting Started](#getting-started)
 3. [Navigation](#navigation)
 4. [DMS Interface](#dms-interface)
-5. [Access Level System](#access-level-system)
+5. [Role-Based Access Control](#role-based-access-control)
 6. [Document Organization](#document-organization)
 7. [Working with Documents](#working-with-documents)
 8. [DMS Settings (Administrators)](#dms-settings-administrators)
@@ -21,6 +21,7 @@ The Electronic Document Management System (EDMS) is a modern web-based platform
 - **Access Level Organization**: Documents categorized as All, Public, Private, and Personal with color-coded tabs
 - **Hierarchical Structure**: Documents organized in a Cabinet → Drawer → Folder → Subfolder structure
 - **Multiple View Modes**: List, Grid, and Details views for browsing documents
+- **Role-Based Access Control**: Three-tier role system (Superadmin, Admin, User) with granular permissions
 - **Advanced Settings Management**: Comprehensive configuration system for administrators
 - **Document Viewer**: Built-in viewer supporting multiple file formats (PDF, images, text files, spreadsheets)
 - **Search Functionality**: Advanced search across document titles, descriptions, and metadata
@@ -128,46 +129,71 @@ The main DMS interface features a modern tabbed design for easy navigation betwe
 - **Loading States**: Visual feedback during system operations
 - **Error Handling**: Clear error messages with retry options
 
-## Access Level System
+## Role-Based Access Control
 
-### Understanding Access Levels
+### Understanding System Roles
 
-#### Public Documents
-- **Accessibility**: Visible and accessible to all system users
-- **Visual Indicator**: Green color theme with unlock icon
-- **Permissions**: No special permissions or approvals required
-- **Best For**: 
-  - Company policies and procedures
-  - Public announcements
-  - Shared templates and forms
-  - General information documents
+The EDMS implements a three-tier role system to manage access to system features and functionality:
 
-#### Private Documents
-- **Accessibility**: Restricted access requiring specific permissions
-- **Visual Indicator**: Red color theme with lock icon
-- **Permissions**: May require access request and approval workflow
-- **Best For**:
-  - Confidential business information
-  - HR records and sensitive data
-  - Financial documents
-  - Executive communications
-  - Legal documents
+#### Superadmin Role
+- **Access Level**: Complete system access with no restrictions
+- **Visual Indicator**: Purple color theme in the interface
+- **Capabilities**:
+  - Full system administration and configuration
+  - User and role management
+  - Complete access to all documents and folders
+  - System settings management
+  - Access to Pentadbiran (administration) section
+  - Ability to create, modify, and delete any content
+  - Approval/rejection of access requests
+  - Role management through Authentik integration
 
-#### Personal Documents
-- **Accessibility**: Documents owned and controlled by individual users
-- **Visual Indicator**: Purple color theme with user icon
-- **Permissions**: Full control over sharing and access
-- **Best For**:
-  - Individual workspace documents
-  - Draft documents before publication
-  - Personal notes and references
-  - Work-in-progress files
+#### Admin Role
+- **Access Level**: Administrative access with some restrictions
+- **Visual Indicator**: Blue color theme in the interface
+- **Capabilities**:
+  - Document management and organization
+  - Access to Admin Dashboard with KPI metrics
+  - View and process access requests
+  - Create and manage content
+  - Access management for users
+  - Some system settings configuration
+  - Cannot manage user roles or access the Pentadbiran section
 
-### Access Level Switching
-- Click any access level tab to filter documents by that category
-- Visual feedback shows which tab is currently active
-- Document count may vary between tabs based on your permissions
-- Some tabs may be empty if no documents exist in that category
+#### User Role
+- **Access Level**: Standard user access with basic permissions
+- **Visual Indicator**: Green color theme in the interface
+- **Capabilities**:
+  - View documents based on permissions
+  - Upload and edit documents (own documents)
+  - Request access to restricted content
+  - Basic search and navigation
+  - Personal document management
+  - Cannot access administrative features
+
+### Role Switching
+
+For testing and administrative purposes, the system includes a role switching feature:
+
+1. **Access the Role Switcher**:
+   - Navigate to "Switch Role" in the DMS menu
+   - Current role is displayed at the top of the page
+
+2. **Temporary Role Change**:
+   - Select the desired role (Superadmin, Admin, or User)
+   - Click "Switch to Selected Role"
+   - A temporary session with the new role permissions is created
+
+3. **Returning to Original Role**:
+   - Click "Revert to Original Role" to return to your assigned permissions
+   - The system will restore your original access level
+
+### Permission Inheritance
+
+Permissions in the system follow a hierarchical inheritance pattern:
+- Superadmin permissions include all Admin and User permissions
+- Admin permissions include all User permissions
+- Each higher role level has additional specialized capabilities
 
 ## Document Organization
 
@@ -198,25 +224,57 @@ The system uses color coding and icons to indicate access levels:
 
 ### Uploading Documents
 
-#### Single File Upload
-1. Navigate to the desired location in the hierarchy
-2. Click the "Upload" button or use the dedicated upload interface
-3. Select file(s) using the file picker or drag-and-drop interface
-4. Fill in comprehensive document metadata:
-   - Document title and description
-   - Keywords for enhanced searchability
-   - Category and current status
-   - Access level and specific permissions
-   - Department or responsible party
-   - Retention period and compliance information
-5. Review and click "Upload" to save the document
+The system provides a comprehensive document upload interface with metadata tagging:
 
-#### Bulk Upload
-1. Select multiple files using Ctrl+Click (Windows) or Cmd+Click (Mac)
-2. Assign metadata to individual files or apply common metadata to all
-3. Set default properties for batch processing efficiency
-4. Monitor upload progress with real-time status updates
-5. Review and confirm successful uploads
+1. **Access the Upload Dialog**:
+   - Click the "Upload" button in the document explorer toolbar
+   - The upload dialog appears with drag-and-drop functionality
+
+2. **Select Files**:
+   - Drag files into the upload area, or
+   - Click "browse" to select files from your device
+   - Multiple files can be selected simultaneously
+
+3. **Metadata Assignment**:
+   - For each uploaded file, complete the metadata form
+   - Select a document template (Standard, Contract, Report)
+   - Add required fields like Department, Project Code
+   - Add a description to help with search and context
+   - Add tags by typing and pressing Enter (or select from suggestions)
+
+4. **Validation**:
+   - The system automatically validates file types and sizes
+   - Required metadata fields are marked with asterisks
+   - Validation errors appear if requirements aren't met
+
+5. **Complete Upload**:
+   - Click "Upload" button to process files
+   - Progress bar shows upload status
+   - System provides confirmation when complete
+
+### Creating New Items
+
+To create new containers in the document hierarchy:
+
+1. **Access Create Dialog**:
+   - Click the "Create New" button in the toolbar
+   - Select the desired item type from the dropdown
+
+2. **Available Item Types**:
+   - Cabinet: Top-level organizational unit
+   - Drawer: Mid-level category container
+   - Folder: Specific topic container
+   - Subfolder: Detailed organizational unit
+
+3. **Set Properties**:
+   - Enter a name for the new item
+   - Select an access type (Public, Private, Personal)
+   - Add a description (optional but recommended)
+
+4. **Create Item**:
+   - Click "Create" to add the item to the current location
+   - New item appears in the document explorer
+   - Navigate into the new container by clicking on it
 
 ### Document Metadata
 For each document, you can specify comprehensive metadata based on system configuration:

pages/dms/index.vue

@@ -120,17 +120,41 @@ const showAdminDashboard = computed(() => {
   return ['admin', 'superadmin'].includes(store.currentUser?.role);
 });
 
-// Event handlers (placeholder functions for when components load)
+// Event handlers for DMSExplorer component interactions
 const handleItemSelected = (item) => {
-  console.log('Item selected:', item);
+  if (DMSExplorer && item) {
+    // The explorer component already handles file opening and navigation
+    console.log('Item selected:', item);
+  }
 };
 
 const handleViewModeChanged = (mode) => {
-  console.log('View mode changed to:', mode);
+  if (DMSExplorer) {
+    console.log('View mode changed to:', mode);
+  }
 };
 
 const handlePathChanged = (path) => {
-  console.log('Path changed to:', path);
+  if (DMSExplorer) {
+    console.log('Path changed to:', path);
+  }
+};
+
+// Handle uploaded files
+const handleUploadCompleted = (files) => {
+  console.log('Files uploaded:', files);
+  // The explorer component already handles refreshing the view
+};
+
+// Handle create new item
+const handleItemCreated = (item) => {
+  console.log('New item created:', item);
+  // The explorer component already handles refreshing the view
+};
+
+// Handle access request submitted
+const handleAccessRequestSubmitted = (request) => {
+  console.log('Access request submitted:', request);
 };
 
 // Lifecycle hooks
@@ -226,17 +250,6 @@ onMounted(() => {
                     </svg>
                     Admin Dashboard
                   </NuxtLink>
-                  
-                  <!-- Switch Role Button -->
-                  <NuxtLink 
-                    to="/dms/switch-roles" 
-                    class="inline-flex items-center px-3 py-1.5 border border-indigo-300 dark:border-indigo-600 rounded-md text-sm font-medium text-indigo-700 dark:text-indigo-300 bg-white dark:bg-gray-800 hover:bg-indigo-50 dark:hover:bg-indigo-900/10 transition-colors"
-                  >
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-                    </svg>
-                    Switch Role
-                  </NuxtLink>
                 </div>
               </div>
             </div>
@@ -307,11 +320,16 @@ onMounted(() => {
               <!-- Action Buttons -->
               <div class="px-6 py-3 bg-white dark:bg-gray-900/10 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
                 <div class="flex space-x-2">
-                  <!-- Placeholder for future actions -->
+                  <h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">
+                    {{ activeTab === 'all' ? 'All Documents' : 
+                       activeTab === 'public' ? 'Public Documents' : 
+                       activeTab === 'private' ? 'Private Documents' : 
+                       'Personal Documents' }}
+                  </h2>
                 </div>
                 
                 <div class="flex space-x-2">
-                  <!-- Role Management button has been removed -->
+                  <!-- View toggles and other action buttons will be handled by the DMSExplorer component -->
                 </div>
               </div>
               
@@ -325,6 +343,9 @@ onMounted(() => {
                 @item-selected="handleItemSelected"
                 @view-mode-changed="handleViewModeChanged"
                 @path-changed="handlePathChanged"
+                @upload-completed="handleUploadCompleted"
+                @item-created="handleItemCreated"
+                @access-request-submitted="handleAccessRequestSubmitted"
               />
               
               <!-- Fallback Content -->