# 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**
```bash
git clone https://github.com/your-repo/edms.git
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
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**
```bash
# Generate Prisma client
npx prisma generate

# Run migrations
npx prisma db push

# Seed data (optional)
npx prisma db seed
```

5. **Development Server**
```bash
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

```vue
<!-- 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](docs/Technical_Guide.md)**: Comprehensive technical documentation
- **[User Guide](docs/User_Guide.md)**: End-user instructions and features
- **[Site Settings](docs/SITE_SETTINGS.md)**: 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

```bash
# 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](docs/Technical_Guide.md)
- **User Questions**: Refer to the [User Guide](docs/User_Guide.md)  
- **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.