Electronic Document Management System (EDMS)

A modern, web-based document management system built with Nuxt.js 3 and Vue.js 3, featuring a comprehensive design system and hierarchical document organization.

🚀 Features

Core Functionality

• Hierarchical Organization: Cabinet → Drawer → Folder → Subfolder structure
• Advanced Document Management: Upload, version control, metadata management
• Role-Based Access Control: Granular permissions with access request workflows
• Multi-format Document Viewer: Built-in viewer for PDF, images, Office documents
• Advanced Search: Full-text search with metadata and tag filtering
• Responsive Design: Works seamlessly across desktop, tablet, and mobile

Design System

• Standardized Components: Complete "Rs" component library (RsButton, RsInput, RsSelect, etc.)
• Consistent Styling: Unified design patterns with dark/light mode support
• Accessibility: WCAG-compliant components with proper ARIA attributes
• Interactive Documentation: Design system playground at /dms/design-system

Administration

• Streamlined Settings: 5 core configuration categories
  • 🔐 User & Access Management
  • 📁 Document & Folder Settings
  • 📝 Metadata & Tagging
  • 📤 Upload & Storage Settings
  • 📅 System Settings
• Import/Export: Configuration backup and transfer capabilities
• Real-time Validation: Form validation with dependency checking

🛠️ Technology Stack

Frontend

• Nuxt.js 3: Universal Vue.js framework with SSR/SPA support
• Vue.js 3: Progressive framework with Composition API
• TailwindCSS: Utility-first CSS framework with custom component system
• Pinia: Modern state management with persistence
• FormKit: Advanced form handling with custom theming

Backend

• Prisma ORM: Type-safe database client with migrations
• MySQL/PostgreSQL: Relational database with comprehensive schema
• File System Integration: Secure file storage and management
• JWT Authentication: Token-based authentication with RBAC

Development Tools

• TypeScript: Type safety and enhanced development experience
• ESLint: Code linting with Vue.js specific rules
• Vite: Lightning-fast build tool and HMR

📋 Setup

Requirements

• Node.js 18+ and npm/yarn/pnpm
• MySQL 8+ or PostgreSQL 13+
• Modern web browser with JavaScript enabled

Installation

1. Clone Repository

git clone https://github.com/your-repo/edms.git
cd edms

2. Install Dependencies

# Using npm
npm install

# Using yarn
yarn install

# Using pnpm
pnpm install

3. Environment Configuration Create .env file:

# Database
DATABASE_URL="mysql://username:password@localhost:3306/edms_db"

# Authentication
JWT_SECRET="your-jwt-secret-key-min-256-bits"
SESSION_SECRET="your-session-secret-key"

# File Storage
UPLOAD_PATH="/var/uploads/edms"
MAX_FILE_SIZE="104857600" # 100MB
ALLOWED_FILE_TYPES="pdf,doc,docx,xls,xlsx,ppt,pptx,txt,jpg,jpeg,png"

# Application
NUXT_SECRET_KEY="your-nuxt-app-secret"
BASE_URL="http://localhost:3000"

4. Database Setup

# Generate Prisma client
npx prisma generate

# Run migrations
npx prisma db push

# Seed data (optional)
npx prisma db seed

5. Development Server

npm run dev

Access the application at http://localhost:3000

🎨 Design System

Component Library

The EDMS uses a standardized component library with the "Rs" prefix:

Form Components

• RsInput: Standardized input fields with validation
• RsSelect: Dropdown/select with options support
• RsTextarea: Multi-line text input with resize controls
• RsButton: Buttons with multiple variants and sizes

UI Components

• RsCard: Container component with header/body/footer
• RsModal: Modal dialogs with standardized structure
• RsTable: Data tables with sorting and filtering
• RsDropdown: Dropdown menus and navigation

Usage Examples

<!-- Input with validation -->
<rs-input
  v-model="email"
  label="Email Address"
  type="email"
  :required="true"
  :error="emailError"
/>

<!-- Button with variants -->
<rs-button variant="primary" size="md" @click="save">
  Save Changes
</rs-button>

<!-- Modal with standardized structure -->
<rs-modal :visible="showModal" @close="closeModal">
  <template #header>Modal Title</template>
  <template #body>Modal content</template>
  <template #footer>
    <rs-button variant="secondary" @click="closeModal">Cancel</rs-button>
    <rs-button variant="primary" @click="confirm">Confirm</rs-button>
  </template>
</rs-modal>

Design Principles

• 🎯 Consistency: Unified patterns across all components
• 🔧 Modularity: Reusable and composable components
• 🌙 Dark Mode: Universal theme support
• 📱 Responsive: Mobile-first approach
• ♿ Accessibility: WCAG-compliant with keyboard navigation

📖 Documentation

Available Guides

• Technical Guide: Comprehensive technical documentation
• User Guide: End-user instructions and features
• Site Settings: Configuration and customization guide

Interactive Documentation

• Design System: Visit /dms/design-system for component examples
• API Documentation: Available in development mode
• Component Playground: Test components with live examples

🔧 Development

Project Structure

edms/
├── components/          # Vue components
│   ├── dms/            # DMS-specific components
│   │   ├── dialogs/    # Modal dialogs
│   │   ├── explorer/   # Document browser
│   │   ├── search/     # Search functionality
│   │   └── viewers/    # Document preview
│   └── Rs*.vue         # Design system components
├── pages/              # File-based routing
│   ├── dms/           # DMS pages
│   └── devtool/       # Admin tools
├── stores/            # Pinia state management
├── server/            # API routes and middleware
├── prisma/            # Database schema and migrations
├── assets/            # Stylesheets and assets
└── docs/              # Documentation

Building for Production

# Build application
npm run build

# Preview production build
npm run preview

# Generate static site (if applicable)
npm run generate

🔐 Security Features

• Role-Based Access Control: Granular permission system
• Document-level Security: Individual document access controls
• Access Request Workflow: Approval system for restricted documents
• Audit Trail: Comprehensive activity logging
• File Type Validation: Security through file type restrictions
• Session Management: Secure token-based authentication

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Follow the design system guidelines
4. Use standardized components (Rs library)
5. Add tests for new functionality
6. Commit changes (git commit -m 'Add amazing feature')
7. Push to branch (git push origin feature/amazing-feature)
8. Open a Pull Request

Development Guidelines

• Use Rs components instead of custom styling
• Follow semantic variant naming (primary, secondary, danger)
• Test in both light and dark modes
• Maintain accessibility standards
• Document new features in user/technical guides

📄 License

This project is part of the corradAF base project. See the license file for details.

🆘 Support

• Technical Issues: Check the Technical Guide
• User Questions: Refer to the User Guide
• Component Usage: Visit /dms/design-system for examples
• Bug Reports: Create an issue with detailed reproduction steps

---

Built with ❤️ using Nuxt.js 3, Vue.js 3, and modern web technologies.