corrad-software/EDMS
9
0
Fork 0
generated from corrad-software/corrad-af-2024
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Released 1st Version User Guide and Technical Guide

Browse Source
This commit is contained in:
Aiman Fakhrullah Mantasan 2025-05-30 19:35:22 +08:00
parent 1aac9905e3
commit 8d51ae775a
2 changed files with 1166 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

818
docs/Technical_Guide.md Normal file
View File

@ -0,0 +1,818 @@
# Electronic Document Management System (EDMS) - Technical Guide
## Table of Contents
1. [System Overview](#system-overview)
2. [Architecture](#architecture)
3. [Technology Stack](#technology-stack)
4. [Database Schema](#database-schema)
5. [Installation & Setup](#installation--setup)
6. [Development Environment](#development-environment)
7. [Component Structure](#component-structure)
8. [API & Data Management](#api--data-management)
9. [Security & Authentication](#security--authentication)
10. [Deployment](#deployment)
11. [Maintenance & Monitoring](#maintenance--monitoring)
12. [Extension & Customization](#extension--customization)
## System Overview
The Electronic Document Management System (EDMS) is a modern web application built with Nuxt.js 3 and Vue.js 3, designed to provide a comprehensive document management solution for organizations. The system implements a hierarchical document organization structure with role-based access control (RBAC) and supports integration with external authentication providers like Authentik.
### Key Technical Features
- **Modern Frontend**: Vue.js 3 with Composition API and script setup syntax
- **SSR/SPA Support**: Nuxt.js 3 for optimal performance and SEO
- **Database**: Prisma ORM with MySQL/PostgreSQL support and migrations
- **Styling**: TailwindCSS with custom component system
- **State Management**: Pinia for reactive state management with persistence
- **Authentication**: Flexible authentication with JWT tokens and RBAC
- **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
## Architecture
### System Architecture
```
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Frontend │ │ Backend │ │ Database │
│ (Nuxt.js) │◄──►│ (Server API) │◄──►│ (MySQL/PG) │
│ │ │ │ │ │
│ • Vue.js 3 │ │ • Prisma ORM │ │ • User Data │
│ • TailwindCSS │ │ • File System │ │ • Documents │
│ • Pinia Store │ │ • Authentication│ │ • Permissions │
│ • Components │ │ • API Routes │ │ • Audit Logs │
└─────────────────┘ └─────────────────┘ └─────────────────┘
│ │ │
│ ┌─────────────────┐ │
│ │ File Storage │ │
└──────────────►│ • Documents │◄────────────┘
│ • Versions │
│ • Thumbnails │
│ • Temp Files │
└─────────────────┘
```
### Application Flow
1. **Authentication**: User authenticates via configured authentication provider
2. **Authorization**: System validates user permissions against RBAC rules
3. **Navigation**: User navigates document hierarchy with tree-based structure
4. **Data Fetching**: Pinia store manages API calls with caching and error handling
5. **Rendering**: Vue components render UI with reactive updates
6. **File Operations**: Server handles secure file upload/download/preview
7. **Access Control**: System enforces granular document permissions
8. **Audit Trail**: All actions are logged for compliance and security
## Technology Stack
### Frontend Dependencies
```json
{
"core": {
"nuxt": "^3.6.5",
"vue": "^3.x",
"@pinia/nuxt": "^0.4.11",
"@pinia-plugin-persistedstate/nuxt": "^1.1.1"
},
"styling": {
"@nuxtjs/tailwindcss": "^6.8.0",
"sass": "^1.62.0",
"postcss-import": "^15.1.0"
},
"forms": {
"@formkit/nuxt": "^1.0.0",
"@formkit/themes": "^1.0.0",
"@formkit/addons": "^1.0.0",
"@formkit/pro": "^0.115.3"
},
"ui": {
"apexcharts": "^3.36.0",
"vue3-apexcharts": "^1.4.1",
"@vueuse/core": "^9.5.0",
"@vueuse/nuxt": "^9.5.0",
"floating-vue": "^2.0.0-beta.24",
"vue3-dropzone": "^2.0.1"
},
"utilities": {
"luxon": "^3.1.0",
"uuid": "^10.0.0",
"crypto-js": "^4.1.1",
"@shimyshack/uid": "^0.1.7"
}
}
```
### Backend Dependencies
```json
{
"database": {
"@prisma/client": "^5.1.1",
"prisma": "^5.1.1"
},
"authentication": {
"jsonwebtoken": "^8.5.1"
},
"file-handling": {
"jspdf": "^2.5.1"
},
"security": {
"nuxt-security": "^0.13.0"
}
}
```
### Development Tools
- **ESLint**: Code linting with Vue.js specific rules
- **TypeScript**: Type safety with Nuxt TypeScript integration
- **Prettier**: Consistent code formatting
- **Vite**: Lightning-fast build tool and HMR
- **PostCSS**: Advanced CSS processing with plugins
## Database Schema
### Core Models
#### User Management
```prisma
model user {
userID Int @id @default(autoincrement())
userSecretKey String? @db.VarChar(255)
userUsername String? @unique @db.VarChar(255)
userPassword String? @db.VarChar(255)
userFullName String? @db.VarChar(255)
userEmail String? @unique @db.VarChar(255)
userPhone String? @db.VarChar(255)
userStatus String? @db.VarChar(255)
userCreatedDate DateTime? @default(now()) @db.DateTime(0)
userModifiedDate DateTime? @updatedAt @db.DateTime(0)
// Relationships
userrole userrole[]
accessRequests AccessRequest[]
permissions AccessPermission[]
documents Document[] @relation("DocumentCreator")
cabinets Cabinet[] @relation("CabinetCreator")
drawers Drawer[] @relation("DrawerCreator")
folders Folder[] @relation("FolderCreator")
subfolders Subfolder[] @relation("SubfolderCreator")
}
model role {
roleID Int @id @default(autoincrement())
roleName String @unique @db.VarChar(255)
roleDescription String? @db.Text
rolePermissions Json? // Flexible permissions structure
roleCreatedDate DateTime @default(now()) @db.DateTime(0)
roleModifiedDate DateTime @updatedAt @db.DateTime(0)
userrole userrole[]
permissions AccessPermission[]
}
```
#### Document Hierarchy
```prisma
// Cabinet → Drawer → Folder → Subfolder → Document
model Cabinet {
id Int @id @default(autoincrement())
name String @db.VarChar(255)
description String? @db.Text
metadata Json? // Flexible metadata storage
createdAt DateTime @default(now()) @db.DateTime(0)
updatedAt DateTime @updatedAt @db.DateTime(0)
createdBy Int
status String @default("active") @db.VarChar(50)
user user @relation("CabinetCreator", fields: [createdBy], references: [userID])
drawers Drawer[]
permissions AccessPermission[]
@@index([createdBy])
@@index([status])
}
model Document {
id Int @id @default(autoincrement())
name String @db.VarChar(255)
description String? @db.Text
fileSize Int @default(0)
fileType String @db.VarChar(100)
fileExtension String @db.VarChar(20)
filePath String @db.VarChar(500)
thumbnailPath String? @db.VarChar(500)
checksum String? @db.VarChar(64)
version Int @default(1)
isTemplate Boolean @default(false)
isPublic Boolean @default(false)
metadata Json? // Custom metadata fields
tags String? @db.Text
folderId Int?
subfolderId Int?
createdAt DateTime @default(now()) @db.DateTime(0)
updatedAt DateTime @updatedAt @db.DateTime(0)
createdBy Int
status String @default("active") @db.VarChar(50)
folder Folder? @relation("FolderDocuments", fields: [folderId], references: [id], onDelete: SetNull)
subfolder Subfolder? @relation("SubfolderDocuments", fields: [subfolderId], references: [id], onDelete: SetNull)
user user @relation("DocumentCreator", fields: [createdBy], references: [userID])
accessRequests AccessRequest[]
permissions AccessPermission[]
versions DocumentVersion[]
@@index([folderId])
@@index([subfolderId])
@@index([createdBy])
@@index([fileType])
@@index([status])
@@fulltext([name, description, tags])
}
```
#### Access Control & Workflow
```prisma
model AccessPermission {
id Int @id @default(autoincrement())
userId Int?
roleId Int?
documentId Int?
cabinetId Int?
drawerId Int?
folderId Int?
subfolderId Int?
permissionLevel String @db.VarChar(50) // view, download, print, edit, full, admin
conditions Json? // Additional permission conditions
createdAt DateTime @default(now()) @db.DateTime(0)
updatedAt DateTime @updatedAt @db.DateTime(0)
expiresAt DateTime? @db.DateTime(0)
createdBy Int?
user user? @relation(fields: [userId], references: [userID], onDelete: SetNull)
role role? @relation(fields: [roleId], references: [roleID], onDelete: SetNull)
document Document? @relation(fields: [documentId], references: [id], onDelete: Cascade)
cabinet Cabinet? @relation(fields: [cabinetId], references: [id], onDelete: Cascade)
drawer Drawer? @relation(fields: [drawerId], references: [id], onDelete: Cascade)
folder Folder? @relation(fields: [folderId], references: [id], onDelete: Cascade)
subfolder Subfolder? @relation(fields: [subfolderId], references: [id], onDelete: Cascade)
@@index([userId])
@@index([roleId])
@@index([documentId])
@@index([expiresAt])
}
model AccessRequest {
id Int @id @default(autoincrement())
documentId Int
userId Int
requestedLevel String @db.VarChar(50) // view, download, print, edit, full
duration String? @db.VarChar(50) // 7d, 14d, 30d, 60d, 90d, permanent
justification String? @db.Text
status String @default("pending") @db.VarChar(50) // pending, approved, rejected, expired
responseNote String? @db.Text
requestedAt DateTime @default(now()) @db.DateTime(0)
respondedAt DateTime? @db.DateTime(0)
respondedBy Int?
expiresAt DateTime? @db.DateTime(0)
document Document @relation(fields: [documentId], references: [id], onDelete: Cascade)
user user @relation(fields: [userId], references: [userID])
@@index([documentId])
@@index([userId])
@@index([status])
}
```
## Installation & Setup
### Prerequisites
- Node.js 18+ and npm/yarn/pnpm
- MySQL 8.0+ or PostgreSQL 13+
- Git for version control
- Optional: Docker for containerized deployment
### Installation Steps
1. **Clone Repository**
```bash
git clone <repository-url>
cd edms
```
2. **Install Dependencies**
```bash
# Using npm
npm install
# Using yarn
yarn install
# Using pnpm
pnpm install
```
3. **Environment Configuration**
Create `.env` file:
```env
# Database Configuration
DATABASE_URL="mysql://username:password@localhost:3306/edms_db"
# For PostgreSQL: DATABASE_URL="postgresql://username:password@localhost:5432/edms_db"
# Authentication
JWT_SECRET="your-jwt-secret-key-min-256-bits"
SESSION_SECRET="your-session-secret-key"
# External Authentication (Optional)
AUTHENTIK_BASE_URL="https://auth.yourdomain.com"
AUTHENTIK_CLIENT_ID="your-client-id"
AUTHENTIK_CLIENT_SECRET="your-client-secret"
# File Storage
UPLOAD_PATH="/var/uploads/edms"
TEMP_PATH="/var/tmp/edms"
MAX_FILE_SIZE="104857600" # 100MB in bytes
ALLOWED_FILE_TYPES="pdf,doc,docx,xls,xlsx,ppt,pptx,txt,jpg,jpeg,png,gif"
# Application Configuration
NUXT_SECRET_KEY="your-nuxt-app-secret"
BASE_URL="http://localhost:3000"
NODE_ENV="development"
# Security
CORS_ORIGIN="http://localhost:3000"
RATE_LIMIT_MAX="100" # requests per window
RATE_LIMIT_WINDOW="15" # minutes
# Monitoring & Logging
LOG_LEVEL="info"
LOG_FILE="/var/log/edms/app.log"
```
4. **Database Setup**
```bash
# Generate Prisma client
npx prisma generate
# Run database migrations
npx prisma db push
# Seed initial data (optional)
npx prisma db seed
# View database in Prisma Studio (optional)
npx prisma studio
```
5. **Development Server**
```bash
# Start development server
npm run dev
# Access application at http://localhost:3000
```
## Development Environment
### Project Structure
```
edms/
├── components/ # Vue components
│ ├── dms/ # DMS-specific components
│ │ ├── explorer/ # Document explorer interface
│ │ ├── dialogs/ # Modal dialogs and forms
│ │ ├── viewers/ # Document preview components
│ │ └── navigation/ # Tree and breadcrumb navigation
│ ├── layouts/ # Layout components
│ ├── formkit/ # FormKit custom components
│ └── [Rs*].vue # Reusable UI components (RsButton, RsCard, etc.)
├── pages/ # Nuxt pages (file-based routing)
│ ├── dms/ # DMS-related pages
│ ├── dashboard/ # Dashboard and analytics
│ ├── login/ # Authentication pages
│ └── index.vue # Homepage
├── stores/ # Pinia state stores
│ ├── dms.js # Document management store
│ ├── auth.js # Authentication store
│ └── app.js # Global application store
├── middleware/ # Route middleware
│ ├── auth.js # Authentication middleware
│ └── rbac.js # Role-based access control
├── layouts/ # Nuxt layouts
│ ├── default.vue # Default application layout
│ └── auth.vue # Authentication layout
├── server/ # Server-side code
│ ├── api/ # API routes
│ └── middleware/ # Server middleware
├── prisma/ # Database configuration
│ ├── schema.prisma # Database schema
│ └── migrations/ # Database migrations
├── public/ # Static assets
├── assets/ # Build-time assets
├── plugins/ # Nuxt plugins
├── composables/ # Vue composables
└── utils/ # Utility functions
```
### Component Architecture
#### Core EDMS Components
1. **DMSExplorer.vue**: Main document browser with tree navigation, content views, and details panel
2. **DMSTreeView.vue**: Recursive tree navigation for hierarchical structure
3. **DMSDocumentViewer.vue**: Multi-format document viewer with zoom and controls
4. **DMSAccessRequestDialog.vue**: Access request form with approval workflow
5. **DMSUploadDialog.vue**: File upload interface with metadata assignment
#### Custom UI Components (Rs Prefix)
- **RsButton.vue**: Standardized button component with variants
- **RsCard.vue**: Container component with consistent styling
- **RsModal.vue**: Modal dialog base component
- **RsTable.vue**: Data table with sorting and filtering
- **RsDropdown.vue**: Dropdown menu component
### State Management (Pinia)
#### DMS Store (`stores/dms.js`)
```javascript
export const useDmsStore = defineStore('dms', {
state: () => ({
// Navigation state
currentPath: '/',
pathHistory: [],
currentItems: [],
selectedItem: null,
// UI state
treeExpanded: {},
searchQuery: '',
viewMode: 'list', // list, grid, details
sortOrder: 'asc',
sortField: 'name',
activeTab: 'all', // all, public, private, personal
// Loading states
isLoading: false,
isUploading: false,
uploadProgress: 0,
// Dialog states
showUploadDialog: false,
showAccessRequestDialog: false,
accessRequestItem: null
}),
actions: {
// Navigation actions
async navigateTo(path) {
this.isLoading = true
try {
this.pathHistory.push(this.currentPath)
this.currentPath = path
await this.loadItems()
} finally {
this.isLoading = false
}
},
async loadItems() {
const response = await $fetch('/api/dms/items', {
query: {
path: this.currentPath,
search: this.searchQuery,
tab: this.activeTab
}
})
this.currentItems = response.items
},
// File operations
async uploadFile(file, metadata) {
this.isUploading = true
try {
const formData = new FormData()
formData.append('file', file)
formData.append('metadata', JSON.stringify(metadata))
formData.append('path', this.currentPath)
const response = await $fetch('/api/dms/upload', {
method: 'POST',
body: formData,
onUploadProgress: (progress) => {
this.uploadProgress = Math.round((progress.loaded / progress.total) * 100)
}
})
await this.loadItems()
return response
} finally {
this.isUploading = false
this.uploadProgress = 0
}
},
async requestAccess(item, requestData) {
return await $fetch('/api/dms/access-request', {
method: 'POST',
body: {
documentId: item.id,
requestedLevel: requestData.accessType,
duration: requestData.duration,
justification: requestData.justification
}
})
},
async searchDocuments(query) {
this.searchQuery = query
await this.loadItems()
}
},
getters: {
filteredItems: (state) => {
let items = state.currentItems
// Apply tab filter
if (state.activeTab !== 'all') {
items = items.filter(item => item.accessType === state.activeTab)
}
// Apply search filter
if (state.searchQuery) {
items = items.filter(item =>
item.name.toLowerCase().includes(state.searchQuery.toLowerCase()) ||
item.description?.toLowerCase().includes(state.searchQuery.toLowerCase())
)
}
// Apply sorting
items.sort((a, b) => {
const aVal = a[state.sortField]
const bVal = b[state.sortField]
const modifier = state.sortOrder === 'asc' ? 1 : -1
return aVal < bVal ? -modifier : aVal > bVal ? modifier : 0
})
return items
},
currentBreadcrumbs: (state) => {
const parts = state.currentPath.split('/').filter(Boolean)
return parts.map((part, index) => ({
name: part,
path: '/' + parts.slice(0, index + 1).join('/')
}))
},
canNavigateBack: (state) => state.pathHistory.length > 0
},
persist: {
storage: persistedState.localStorage,
pick: ['treeExpanded', 'viewMode', 'sortOrder', 'sortField']
}
})
```
## API & Data Management
### Server API Routes
#### Document Management
```javascript
// server/api/dms/documents/[id].get.js
export default defineEventHandler(async (event) => {
const id = getRouterParam(event, 'id')
// Fetch document with access control
})
// server/api/dms/upload.post.js
export default defineEventHandler(async (event) => {
// Handle file upload with validation
})
// server/api/dms/search.get.js
export default defineEventHandler(async (event) => {
const query = getQuery(event)
// Perform document search
})
```
#### Access Control
```javascript
// server/api/dms/access-request.post.js
export default defineEventHandler(async (event) => {
// Process access requests
})
// server/api/dms/permissions/[id].get.js
export default defineEventHandler(async (event) => {
// Get user permissions for item
})
```
### Data Validation
#### Prisma Schema Validation
- Field constraints and types
- Relationship integrity
- Index optimization
#### Frontend Validation
```javascript
// FormKit validation rules
const documentValidation = {
title: 'required|length:3,255',
description: 'length:0,1000',
fileType: 'required|in:pdf,doc,docx,xls,xlsx,jpg,png',
accessLevel: 'required|in:public,private,personal'
}
```
## Security & Authentication
### Authentication Flow
1. **User Login**: Redirect to Authentik
2. **Token Exchange**: Receive JWT token
3. **Token Validation**: Verify on each request
4. **Session Management**: Store in secure cookie
5. **Token Refresh**: Automatic renewal
### Authorization Levels
- **System Admin**: Full system access
- **Department Admin**: Department-wide permissions
- **Document Owner**: Full access to owned documents
- **User**: Access based on granted permissions
### File Security
- **Path Traversal Protection**: Validate file paths
- **File Type Validation**: Whitelist allowed formats
- **Size Limits**: Prevent large file uploads
- **Virus Scanning**: Optional integration
- **Access Logging**: Track file access
### Data Protection
- **SQL Injection Prevention**: Parameterized queries via Prisma
- **XSS Protection**: Input sanitization
- **CSRF Protection**: Token validation
- **Secure Headers**: Security-focused HTTP headers
## Deployment
### Production Build
```bash
# Build for production
npm run build
# Generate static files (if needed)
npm run generate
# Preview production build
npm run preview
```
### Environment Configuration
#### Production Environment Variables
```env
NODE_ENV=production
DATABASE_URL="mysql://prod_user:password@db.server:3306/edms_prod"
NUXT_SECRET_KEY="production-secret-key"
BASE_URL="https://dms.jkr-kotabharu.gov.my"
```
#### Docker Deployment
```dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "start"]
```
### Nginx Configuration
```nginx
server {
listen 80;
server_name dms.jkr-kotabharu.gov.my;
location / {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
location /uploads/ {
alias /var/www/uploads/;
expires 1y;
}
}
```
## Maintenance & Monitoring
### Database Maintenance
```sql
-- Regular maintenance queries
OPTIMIZE TABLE document;
ANALYZE TABLE access_permission;
-- Cleanup old access requests
DELETE FROM access_request
WHERE status = 'rejected'
AND requested_at < DATE_SUB(NOW(), INTERVAL 30 DAY);
```
### Backup Strategy
- **Database Backups**: Daily automated backups
- **File Storage Backups**: Incremental file backups
- **Configuration Backups**: Version control for configs
### Monitoring
- **Application Performance**: Response times, error rates
- **Database Performance**: Query performance, connection counts
- **File Storage**: Disk usage, file integrity
- **Security Events**: Failed logins, access violations
### Logging
```javascript
// Server-side logging
import { createLogger } from 'winston'
const logger = createLogger({
level: 'info',
format: winston.format.json(),
transports: [
new winston.transports.File({ filename: 'error.log', level: 'error' }),
new winston.transports.File({ filename: 'combined.log' })
]
})
```
## Extension & Customization
### Adding New Document Types
1. Update Prisma schema with new file types
2. Add validation rules for the file type
3. Implement viewer component for the format
4. Update upload dialog to support the type
### Custom Access Control
1. Extend AccessPermission model
2. Implement custom permission logic
3. Update UI to reflect new permissions
4. Add admin interface for permission management
### Integration Points
- **External Authentication**: LDAP/Active Directory
- **Document Processing**: OCR, text extraction
- **Workflow Systems**: Approval workflows
- **Notification Systems**: Email/SMS notifications
- **Analytics**: Document usage analytics
### API Extensions
```javascript
// Custom API endpoint example
// server/api/custom/analytics.get.js
export default defineEventHandler(async (event) => {
// Custom analytics logic
return {
totalDocuments: count,
storageUsed: size,
activeUsers: userCount
}
})
```
### Theme Customization
```javascript
// tailwind.config.js extensions
module.exports = {
theme: {
extend: {
colors: {
primary: {
50: '#eff6ff',
500: '#3b82f6',
900: '#1e3a8a'
}
}
}
}
}
```
---
**Document Version**: 2.0
**Last Updated**: December 2024
**System Version**: EDMS v1.0
**Technology Stack**: Nuxt.js 3, Vue.js 3, Prisma, TailwindCSS
**Database**: MySQL/PostgreSQL
**Authentication**: JWT with optional external providers

348
docs/User_Guide.md Normal file
View File

@ -0,0 +1,348 @@
# Electronic Document Management System (EDMS) - User Guide
## Table of Contents
1. [Introduction](#introduction)
2. [Getting Started](#getting-started)
3. [Navigation](#navigation)
4. [Document Organization](#document-organization)
5. [Working with Documents](#working-with-documents)
6. [Access Control](#access-control)
7. [Search and Filtering](#search-and-filtering)
8. [Document Viewer](#document-viewer)
9. [My Documents](#my-documents)
10. [Troubleshooting](#troubleshooting)
## Introduction
The Electronic Document Management System (EDMS) is a modern web-based platform designed to efficiently organize, store, and manage digital documents in organizational environments. The system provides a secure, hierarchical structure for document storage with comprehensive role-based access control and advanced document management capabilities.
### Key Features
- **Hierarchical Organization**: Documents are organized in a Cabinet → Drawer → Folder → Subfolder structure
- **Multiple View Modes**: List, Grid, and Details views for browsing documents
- **Access Control**: Public, Private, and Personal document categories with granular permission management
- **Document Viewer**: Built-in viewer supporting multiple file formats (PDF, images, text files, spreadsheets)
- **Search Functionality**: Advanced search across document titles, descriptions, and metadata
- **Upload Management**: Drag-and-drop file upload with comprehensive metadata assignment
- **Access Request System**: Workflow-based access request system for private documents
- **Version Control**: Document versioning and change tracking
- **Responsive Design**: Works seamlessly across desktop, tablet, and mobile devices
## Getting Started
### System Requirements
- Modern web browser (Chrome, Firefox, Safari, Edge)
- Stable internet connection
- Valid user account with appropriate permissions
- JavaScript enabled in browser
### Logging In
1. Navigate to the EDMS application URL provided by your administrator
2. Enter your username and password
3. Click "Login" to access the system
4. You'll be redirected to the main dashboard upon successful authentication
### Dashboard Overview
The main dashboard provides:
- Quick access to recent documents and activities
- System notifications and announcements
- Navigation menu to EDMS modules
- User profile and account settings
- System status and storage information
## Navigation
### Main Navigation Menu
Access the EDMS through the main navigation menu:
- **Dashboard**: System overview and quick access to recent items
- **DMS**: Main document management interface
- **My Documents**: Personal document collection and workspace
- **Upload Document**: Dedicated document upload interface
### EDMS Interface Layout
The EDMS interface consists of three main areas:
1. **Tree Navigation (Left Panel)**
- Hierarchical view of cabinets, drawers, and folders
- Expandable/collapsible folder structure
- Color-coded access indicators for different permission levels
- Lock icons for restricted items requiring special access
2. **Content Area (Center)**
- Document listing with multiple view modes (List, Grid, Details)
- Breadcrumb navigation showing current location
- Search and filter tools for finding documents
- View mode controls and sorting options
- Document tabs for filtering by access type
3. **Details Panel (Optional Right Panel)**
- Document properties and metadata information
- Quick actions and document tools
- Access control information and permissions
- Document history and version information
### Breadcrumb Navigation
- Shows your current location in the document hierarchy
- Click any level to navigate back to parent folders
- Helps maintain orientation in deep folder structures
- Displays full path from root to current location
## Document Organization
### Hierarchical Structure
Documents are organized in a four-level hierarchy designed for maximum flexibility:
1. **Cabinet**: Top-level organizational unit (e.g., "Human Resources", "Finance", "Projects")
2. **Drawer**: Major category within a cabinet (e.g., "Employee Records", "Budget 2024", "Active Projects")
3. **Folder**: Specific project or topic (e.g., "Recruitment", "Q1 Reports", "Project Alpha")
4. **Subfolder**: Detailed categorization (e.g., "Applications", "Monthly Reports", "Phase 1 Documents")
### Document Categories
- **Public**: Accessible to all system users without restrictions
- **Private**: Restricted access requiring specific permissions or approval
- **Personal**: Individual user documents with private access by default
- **Templates**: Reusable document templates for standardization
### Visual Indicators
The system uses color coding and icons to indicate access levels:
- **Green**: Public documents (open access for all users)
- **Blue**: Personal documents (owned by you)
- **Red**: Private documents (restricted access)
- **Lock Icon**: Documents you cannot currently access
- **Template Icon**: Document templates available for use
## Working with Documents
### Uploading Documents
#### Single File Upload
1. Navigate to the desired location in the hierarchy
2. Click the "Upload" button or use the dedicated "Upload Document" page
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
#### 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
### Document Metadata
For each document, you can specify comprehensive metadata:
- **Title**: Descriptive document name/title
- **Description**: Brief summary of document content and purpose
- **Keywords**: Search terms for improved discoverability (comma-separated)
- **Category**: Document type (Technical Specification, Contract, Report, Policy, etc.)
- **Status**: Current state (Draft, Under Review, Approved, Archived, etc.)
- **Department**: Responsible department or team
- **Access Level**: Determines who can view and interact with the document
- **Retention Period**: How long the document should be retained
- **Version**: Document version number and change notes
### Viewing Documents
1. Click on any document to view its details and metadata
2. Double-click to open in the built-in document viewer
3. Use the preview panel for quick viewing without opening
4. Download documents for offline access and external editing
### Managing Documents
- **Edit Properties**: Modify document metadata and settings
- **Move Documents**: Drag and drop to reorganize into different locations
- **Delete Documents**: Remove documents with confirmation and audit trail
- **Copy Documents**: Duplicate documents to multiple locations
- **Version Control**: Track document versions and view change history
- **Share Documents**: Generate sharing links and manage access permissions
## Access Control
### Understanding Access Levels
#### Public Documents
- Visible and accessible to all system users
- No special permissions or approvals required
- Green color indicator for easy identification
- Suitable for general information and policies
#### Private Documents
- Restricted access requiring specific permissions
- Red color indicator with lock icon
- May require access request and approval workflow
- Ideal for sensitive or confidential information
#### Personal Documents
- Documents owned and controlled by individual users
- Blue color indicator showing ownership
- Full control over sharing and permissions
- Private workspace for individual document management
### Requesting Access
When you encounter a private document you cannot access:
1. **Identify Restricted Item**: Look for red color coding and lock icon
2. **Initiate Access Request**: Click the "Request Access" button
3. **Complete Request Form**:
- **Document Information**: Pre-filled with document title and file details
- **Access Type**: Choose appropriate permission level:
- View Only: Read-only access to document content
- Download: View and download permissions for offline access
- Print: View and print permissions for physical copies
- Full Access: Complete access rights including editing
- **Access Duration**: Select appropriate timeframe:
- 7 days, 14 days, 30 days, 60 days, 90 days, or Permanent
- **Justification**: Detailed explanation of why access is needed (required field)
4. **Submit Request**: Click "Submit Request" to send for approval
5. **Monitor Status**: Track request status and wait for approval from document owner or administrator
### Access Request Status
- **Pending**: Request submitted and awaiting review by approvers
- **Approved**: Access granted for specified duration and permission level
- **Rejected**: Request denied with explanation from approver
- **Expired**: Previously approved access has reached its expiration date
## Search and Filtering
### Basic Search
1. Use the search box in the top navigation bar
2. Enter keywords, document titles, or content descriptions
3. Press Enter or click the search icon to execute search
4. Results display with matching documents and highlighted search terms
5. Refine results using additional filters and sorting options
### Advanced Search Options
- **Filter by Type**: Documents, folders, cabinets, or specific file formats
- **Filter by Category**: Technical, Administrative, Financial, HR, etc.
- **Filter by Date Range**: Creation date, modification date, or access date
- **Filter by Owner**: Documents by specific users or departments
- **Filter by Access Level**: Public, private, personal, or template documents
- **Filter by Status**: Draft, approved, archived, or under review
- **Filter by File Format**: PDF, Word, Excel, images, etc.
### Search Tips for Better Results
- Use quotation marks for exact phrase matching
- Combine multiple keywords with spaces for broader results
- Search includes document titles, descriptions, metadata, and content (where supported)
- Use wildcards (*) for partial word matching
- Utilize Boolean operators (AND, OR, NOT) for complex searches
### Document Tabs for Quick Filtering
Filter documents by category using convenient tabs:
- **All**: Display all accessible documents in current location
- **Public**: Show only public documents available to all users
- **Private**: Display private documents you have access to
- **Personal**: Show your personal documents and workspace items
## Document Viewer
### Supported File Formats
The built-in document viewer supports multiple formats:
- **PDF Documents**: Full preview with zoom, navigation, and text selection
- **Images**: JPG, PNG, GIF, BMP with zoom and pan functionality
- **Text Files**: TXT, RTF with formatted preview and search
- **Microsoft Office**: DOC, DOCX, XLS, XLSX, PPT, PPTX (basic preview)
- **Other Formats**: Download option provided for unsupported formats
### Viewer Features and Controls
- **Zoom Controls**: Zoom in/out from 25% to 400% for optimal readability
- **Page Navigation**: Navigate through multi-page documents with thumbnails
- **Full Screen Mode**: Maximize viewer for immersive document experience
- **Download Function**: Save document locally for offline access
- **Print Support**: Print document directly from viewer interface
- **Search in Document**: Find specific text within document content
- **Rotation Controls**: Rotate document pages for better viewing
### Viewer Interface Controls
- **Zoom Options**: 25%, 50%, 75%, 100%, 125%, 150%, 200%, Fit to Width, Fit to Page
- **Navigation**: Previous/Next page buttons, page number input, thumbnail sidebar
- **View Options**: Single page, continuous scroll, two-page spread
- **Tools**: Text selection, annotation tools (if enabled), measurement tools
- **Close**: Return to document list or previous view
## My Documents
### Personal Document Workspace
The "My Documents" section provides a personalized workspace showing:
- Documents you've created and own
- Documents you've recently accessed or modified
- Documents shared with you by other users
- Recent document activity and version history
- Personal folders and organizational structure
### Organization and Management Features
- **Quick Search**: Search specifically within your personal documents
- **Sort Options**: Sort by name, date created, date modified, file type, or size
- **View Modes**: Switch between list, grid, or detailed view layouts
- **Bulk Actions**: Select and manage multiple documents simultaneously
- **Folder Creation**: Create personal folders for document organization
- **Favorites**: Mark frequently used documents for quick access
### Personal Document Statistics and Insights
View comprehensive information about your document usage:
- Total number of documents owned and accessible
- Storage space used and available quota
- Recent upload activity and document creation trends
- Document categories and type distribution
- Most accessed documents and usage patterns
## Troubleshooting
### Common Issues and Solutions
#### Cannot Access Document
- **Check Access Level**: Verify document permissions and look for lock icons
- **Request Access**: Use the access request feature for private documents
- **Contact Administrator**: Reach out for urgent access needs or system issues
- **Verify Account Status**: Ensure your user account is active and properly configured
#### Upload Problems
- **File Size Limits**: Check maximum file size restrictions (typically 50MB)
- **File Format Support**: Ensure file format is supported by the system
- **Network Connection**: Verify stable internet connection for large uploads
- **Upload Permissions**: Confirm you have upload permissions for the target location
- **Browser Issues**: Try clearing cache or using a different browser
#### Search Not Working Properly
- **Check Spelling**: Verify search terms are spelled correctly
- **Try Alternative Keywords**: Use different or broader search terms
- **Clear Active Filters**: Remove any filters that might be limiting results
- **Refresh Application**: Reload the page to reset search functionality
- **Check Indexing Status**: Some documents may take time to be indexed for search
#### Document Viewer Issues
- **Browser Compatibility**: Ensure you're using a supported modern browser
- **Enable JavaScript**: Verify JavaScript is enabled in browser settings
- **Clear Browser Cache**: Clear cache and cookies to resolve display issues
- **Plugin Requirements**: Install any required browser plugins for specific file types
- **Download Alternative**: Use download option if viewer is not functioning
### Getting Help and Support
- **Contact IT Support**: Reach out to technical support for system issues
- **Check System Status**: Verify overall system availability and maintenance schedules
- **User Training**: Request additional training sessions for advanced features
- **Documentation**: Refer to technical guide for detailed system information
- **Community Resources**: Access user forums and knowledge bases if available
### Best Practices for Optimal System Use
1. **Systematic Organization**: Create and maintain clear, logical folder structures
2. **Descriptive Naming**: Use meaningful, descriptive document titles and filenames
3. **Regular Maintenance**: Periodically review and clean up outdated documents
4. **Backup Strategy**: Keep local copies of critical documents as backup
5. **Consistent Conventions**: Follow organizational naming and filing conventions
6. **Metadata Accuracy**: Keep document metadata current and accurate
7. **Access Control Respect**: Follow organizational policies for document sharing and access
8. **Version Management**: Use version control features to track document changes
9. **Security Awareness**: Be mindful of document sensitivity and appropriate access levels
10. **Regular Updates**: Stay informed about system updates and new features
---
**Document Version**: 2.0
**Last Updated**: December 2024
**System Version**: EDMS v1.0
**Platform**: Electronic Document Management System