462 lines
28 KiB
HTML
462 lines
28 KiB
HTML
<div class="row">
|
|
<div class="col-lg-8">
|
|
<!-- System Description -->
|
|
<div class="mb-5">
|
|
<h5 style="color: var(--primary-color);" class="mb-3">What is DocuPulse?</h5>
|
|
<p class="text-muted lead">
|
|
DocuPulse is an enterprise-grade document management and collaboration platform built with Flask and PostgreSQL.
|
|
It features a sophisticated multi-tenant architecture that supports multiple isolated instances, each with their own
|
|
data, users, and configurations. The platform combines secure file management, real-time messaging, advanced
|
|
permission controls, and comprehensive audit logging in a modern, scalable web application.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Core Features -->
|
|
<div class="mb-5">
|
|
<h5 style="color: var(--primary-color);" class="mb-4">Core Features</h5>
|
|
<div class="row g-4">
|
|
<div class="col-md-6">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 style="color: var(--primary-color);" class="card-title mb-3">Advanced Document Management</h6>
|
|
<ul class="list-unstyled mb-0">
|
|
<li class="mb-2">• Multi-format file upload & organization</li>
|
|
<li class="mb-2">• Hierarchical folder structure</li>
|
|
<li class="mb-2">• File starring & favorites system</li>
|
|
<li class="mb-2">• Bulk operations & zip downloads</li>
|
|
<li class="mb-2">• Trash management with restore</li>
|
|
<li class="mb-2">• File preview & metadata tracking</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 style="color: var(--primary-color);" class="card-title mb-3">Collaboration & Communication</h6>
|
|
<ul class="list-unstyled mb-0">
|
|
<li class="mb-2">• Room-based workspace isolation</li>
|
|
<li class="mb-2">• Real-time messaging with attachments</li>
|
|
<li class="mb-2">• Granular permission system (7 levels)</li>
|
|
<li class="mb-2">• Member management & invitations</li>
|
|
<li class="mb-2">• Conversation threading</li>
|
|
<li class="mb-2">• File sharing with access control</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 style="color: var(--primary-color);" class="card-title mb-3">Multi-Tenant Architecture</h6>
|
|
<ul class="list-unstyled mb-0">
|
|
<li class="mb-2">• Instance isolation & management</li>
|
|
<li class="mb-2">• Master instance orchestration</li>
|
|
<li class="mb-2">• Automated deployment via Docker</li>
|
|
<li class="mb-2">• Health monitoring & status tracking</li>
|
|
<li class="mb-2">• API-based instance communication</li>
|
|
<li class="mb-2">• Scalable resource allocation</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 style="color: var(--primary-color);" class="card-title mb-3">Security & Administration</h6>
|
|
<ul class="list-unstyled mb-0">
|
|
<li class="mb-2">• Role-based access control (Admin/Manager/User)</li>
|
|
<li class="mb-2">• CSRF protection & secure authentication</li>
|
|
<li class="mb-2">• Comprehensive audit logging</li>
|
|
<li class="mb-2">• Email notification system</li>
|
|
<li class="mb-2">• Password reset & account management</li>
|
|
<li class="mb-2">• API key management for integrations</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Technical Stack -->
|
|
<div class="mb-5">
|
|
<h5 style="color: var(--primary-color);" class="mb-4">Technical Stack</h5>
|
|
<div class="row g-4">
|
|
<div class="col-md-6">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 class="card-title text-muted mb-3">Backend Technologies</h6>
|
|
<div class="row g-2">
|
|
<div class="col-6">
|
|
<div class="p-3" style="background-color: var(--primary-bg-light); border-radius: 8px;">
|
|
<div class="fw-bold" style="color: var(--primary-color);">Flask 2.0+</div>
|
|
<small class="text-muted">Web Framework</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="p-3" style="background-color: var(--primary-bg-light); border-radius: 8px;">
|
|
<div class="fw-bold" style="color: var(--primary-color);">PostgreSQL</div>
|
|
<small class="text-muted">Database</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="p-3" style="background-color: var(--primary-bg-light); border-radius: 8px;">
|
|
<div class="fw-bold" style="color: var(--primary-color);">SQLAlchemy</div>
|
|
<small class="text-muted">ORM & Migrations</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="p-3" style="background-color: var(--primary-bg-light); border-radius: 8px;">
|
|
<div class="fw-bold" style="color: var(--primary-color);">Flask-Login</div>
|
|
<small class="text-muted">Authentication</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="p-3" style="background-color: var(--primary-bg-light); border-radius: 8px;">
|
|
<div class="fw-bold" style="color: var(--primary-color);">Alembic</div>
|
|
<small class="text-muted">Database Migrations</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="p-3" style="background-color: var(--primary-bg-light); border-radius: 8px;">
|
|
<div class="fw-bold" style="color: var(--primary-color);">Werkzeug</div>
|
|
<small class="text-muted">Security & Utils</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 class="card-title text-muted mb-3">Frontend & DevOps</h6>
|
|
<div class="row g-2">
|
|
<div class="col-6">
|
|
<div class="p-3" style="background-color: var(--secondary-bg-light); border-radius: 8px;">
|
|
<div class="fw-bold" style="color: var(--secondary-color);">Bootstrap 5</div>
|
|
<small class="text-muted">UI Framework</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="p-3" style="background-color: var(--secondary-bg-light); border-radius: 8px;">
|
|
<div class="fw-bold" style="color: var(--secondary-color);">JavaScript ES6+</div>
|
|
<small class="text-muted">Client Logic</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="p-3" style="background-color: var(--secondary-bg-light); border-radius: 8px;">
|
|
<div class="fw-bold" style="color: var(--secondary-color);">Docker Compose</div>
|
|
<small class="text-muted">Containerization</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="p-3" style="background-color: var(--secondary-bg-light); border-radius: 8px;">
|
|
<div class="fw-bold" style="color: var(--secondary-color);">Gunicorn</div>
|
|
<small class="text-muted">WSGI Server</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="p-3" style="background-color: var(--secondary-bg-light); border-radius: 8px;">
|
|
<div class="fw-bold" style="color: var(--secondary-color);">Prometheus</div>
|
|
<small class="text-muted">Monitoring</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="p-3" style="background-color: var(--secondary-bg-light); border-radius: 8px;">
|
|
<div class="fw-bold" style="color: var(--secondary-color);">JWT</div>
|
|
<small class="text-muted">API Authentication</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Architecture -->
|
|
<div class="mb-5">
|
|
<h5 style="color: var(--primary-color);" class="mb-4">Architecture Highlights</h5>
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<div class="d-flex align-items-start">
|
|
<div class="flex-shrink-0 me-3">
|
|
<div class="rounded-circle p-2" style="background-color: var(--primary-opacity-15);">
|
|
<i class="fas fa-building" style="color: var(--primary-color);"></i>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h6 class="mb-1" style="color: var(--primary-color);">Multi-Tenant Design</h6>
|
|
<p class="text-muted small mb-0">Master instance manages multiple isolated tenant instances with separate databases, storage, and configurations</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="d-flex align-items-start">
|
|
<div class="flex-shrink-0 me-3">
|
|
<div class="rounded-circle p-2" style="background-color: var(--primary-opacity-15);">
|
|
<i class="fas fa-puzzle-piece" style="color: var(--primary-color);"></i>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h6 class="mb-1" style="color: var(--primary-color);">Modular Blueprint Structure</h6>
|
|
<p class="text-muted small mb-0">Blueprint-based routing with clear separation of concerns across 12+ route modules</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="d-flex align-items-start">
|
|
<div class="flex-shrink-0 me-3">
|
|
<div class="rounded-circle p-2" style="background-color: var(--secondary-opacity-15);">
|
|
<i class="fas fa-chart-line" style="color: var(--secondary-color);"></i>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h6 class="mb-1" style="color: var(--secondary-color);">Event-Driven Architecture</h6>
|
|
<p class="text-muted small mb-0">Comprehensive event logging with 30+ event types and real-time notification system</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="d-flex align-items-start">
|
|
<div class="flex-shrink-0 me-3">
|
|
<div class="rounded-circle p-2" style="background-color: var(--secondary-opacity-15);">
|
|
<i class="fas fa-shield-alt" style="color: var(--secondary-color);"></i>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h6 class="mb-1" style="color: var(--secondary-color);">Granular Security</h6>
|
|
<p class="text-muted small mb-0">7-level permission system, CSRF protection, password hashing, and role-based access control</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="d-flex align-items-start">
|
|
<div class="flex-shrink-0 me-3">
|
|
<div class="rounded-circle p-2" style="background-color: var(--primary-opacity-15);">
|
|
<i class="fas fa-database" style="color: var(--primary-color);"></i>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h6 class="mb-1" style="color: var(--primary-color);">Rich Data Model</h6>
|
|
<p class="text-muted small mb-0">15+ database models with complex relationships, JSON fields, and comprehensive metadata tracking</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="d-flex align-items-start">
|
|
<div class="flex-shrink-0 me-3">
|
|
<div class="rounded-circle p-2" style="background-color: var(--secondary-opacity-15);">
|
|
<i class="fas fa-rocket" style="color: var(--secondary-color);"></i>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h6 class="mb-1" style="color: var(--secondary-color);">API-First Design</h6>
|
|
<p class="text-muted small mb-0">RESTful API with 50+ endpoints, JWT authentication, and management API for instance orchestration</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Key Capabilities -->
|
|
<div class="mb-5">
|
|
<h5 style="color: var(--primary-color);" class="mb-4">Key Capabilities</h5>
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-body">
|
|
<h6 class="card-title" style="color: var(--primary-color);">
|
|
<i class="fas fa-file-upload me-2"></i>File Management
|
|
</h6>
|
|
<ul class="list-unstyled small">
|
|
<li>• Support for 50+ file formats</li>
|
|
<li>• Drag & drop upload with progress</li>
|
|
<li>• File preview & metadata extraction</li>
|
|
<li>• Version control & conflict resolution</li>
|
|
<li>• Bulk operations & batch processing</li>
|
|
<li>• Advanced search & filtering</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-body">
|
|
<h6 class="card-title" style="color: var(--secondary-color);">
|
|
<i class="fas fa-comments me-2"></i>Real-time Messaging
|
|
</h6>
|
|
<ul class="list-unstyled small">
|
|
<li>• Polling-based message updates</li>
|
|
<li>• File attachment support</li>
|
|
<li>• Message threading & organization</li>
|
|
<li>• Read receipts & delivery status</li>
|
|
<li>• Conversation member management</li>
|
|
<li>• Message search & history</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-body">
|
|
<h6 class="card-title" style="color: var(--primary-color);">
|
|
<i class="fas fa-users-cog me-2"></i>Permission System
|
|
</h6>
|
|
<ul class="list-unstyled small">
|
|
<li>• 7 granular permission levels</li>
|
|
<li>• Role-based access control</li>
|
|
<li>• Dynamic permission updates</li>
|
|
<li>• Member invitation system</li>
|
|
<li>• Audit trail for all actions</li>
|
|
<li>• Admin & manager roles</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-body">
|
|
<h6 class="card-title" style="color: var(--secondary-color);">
|
|
<i class="fas fa-bell me-2"></i>Notification System
|
|
</h6>
|
|
<ul class="list-unstyled small">
|
|
<li>• Real-time in-app notifications</li>
|
|
<li>• Email integration with templates</li>
|
|
<li>• Customizable notification types</li>
|
|
<li>• Read/unread status tracking</li>
|
|
<li>• Notification preferences</li>
|
|
<li>• Bulk notification management</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="col-lg-4">
|
|
<!-- Quick Stats -->
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-body text-center">
|
|
<h5 class="card-title mb-4" style="color: var(--primary-color);">System Statistics</h5>
|
|
<div class="row g-3">
|
|
<div class="col-6">
|
|
<div class="p-3 rounded" style="background-color: var(--primary-opacity-15);">
|
|
<div class="h3 mb-1" style="color: var(--primary-color);">15+</div>
|
|
<small class="text-muted">Database Models</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="p-3 rounded" style="background-color: var(--secondary-opacity-15);">
|
|
<div class="h3 mb-1" style="color: var(--secondary-color);">12+</div>
|
|
<small class="text-muted">Route Modules</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="p-3 rounded" style="background-color: var(--primary-opacity-15);">
|
|
<div class="h3 mb-1" style="color: var(--primary-color);">50+</div>
|
|
<small class="text-muted">API Endpoints</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="p-3 rounded" style="background-color: var(--secondary-opacity-15);">
|
|
<div class="h3 mb-1" style="color: var(--secondary-color);">30+</div>
|
|
<small class="text-muted">Event Types</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="p-3 rounded" style="background-color: var(--primary-opacity-15);">
|
|
<div class="h3 mb-1" style="color: var(--primary-color);">7</div>
|
|
<small class="text-muted">Permission Levels</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="p-3 rounded" style="background-color: var(--secondary-opacity-15);">
|
|
<div class="h3 mb-1" style="color: var(--secondary-color);">∞</div>
|
|
<small class="text-muted">Tenant Instances</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Key Components -->
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-body">
|
|
<h5 class="card-title mb-3" style="color: var(--primary-color);">Core Components</h5>
|
|
<div class="d-grid gap-2">
|
|
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
|
<i class="fas fa-user-shield me-2"></i>User Management & Authentication
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
|
<i class="fas fa-door-open me-2"></i>Room & Permission System
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
|
<i class="fas fa-file-alt me-2"></i>File Upload & Management
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
|
<i class="fas fa-comments me-2"></i>Conversation & Messaging
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
|
<i class="fas fa-bell me-2"></i>Notification & Event System
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
|
<i class="fas fa-envelope me-2"></i>Email Templates & SMTP
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
|
<i class="fas fa-cogs me-2"></i>Admin Dashboard & Settings
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
|
<i class="fas fa-server me-2"></i>Instance Management
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
|
<i class="fas fa-code me-2"></i>RESTful API & Integration
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
|
<i class="fas fa-database me-2"></i>Data Migration & Backup
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Deployment Info -->
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h5 class="card-title mb-3" style="color: var(--primary-color);">Deployment Ready</h5>
|
|
<div class="small">
|
|
<div class="mb-2">
|
|
<i class="fas fa-docker text-primary me-2"></i>
|
|
<strong>Docker Compose</strong> - Multi-container deployment
|
|
</div>
|
|
<div class="mb-2">
|
|
<i class="fas fa-database text-primary me-2"></i>
|
|
<strong>PostgreSQL</strong> - Production-ready database
|
|
</div>
|
|
<div class="mb-2">
|
|
<i class="fas fa-shield-alt text-primary me-2"></i>
|
|
<strong>Gunicorn</strong> - WSGI server with health checks
|
|
</div>
|
|
<div class="mb-2">
|
|
<i class="fas fa-chart-line text-primary me-2"></i>
|
|
<strong>Prometheus</strong> - Monitoring & metrics
|
|
</div>
|
|
<div class="mb-2">
|
|
<i class="fas fa-sync text-primary me-2"></i>
|
|
<strong>Alembic</strong> - Database migration management
|
|
</div>
|
|
<div>
|
|
<i class="fas fa-rocket text-primary me-2"></i>
|
|
<strong>CLI Tools</strong> - Admin commands & utilities
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |