More dev wiki
This commit is contained in:
@@ -0,0 +1,554 @@
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<!-- API Overview -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-3">RESTful API Documentation</h5>
|
||||
<p class="text-muted lead">
|
||||
DocuPulse provides a comprehensive RESTful API with 50+ endpoints for file management, user collaboration,
|
||||
and system administration. The API supports both web-based interactions and external integrations with
|
||||
proper authentication and authorization controls.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Authentication -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Authentication</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">Web Authentication</h6>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li class="mb-2">• Flask-Login session-based</li>
|
||||
<li class="mb-2">• CSRF token protection</li>
|
||||
<li class="mb-2">• Secure cookie handling</li>
|
||||
<li class="mb-2">• Automatic session timeout</li>
|
||||
<li class="mb-2">• Remember me functionality</li>
|
||||
<li class="mb-2">• Password reset tokens</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">API Authentication</h6>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li class="mb-2">• JWT token-based auth</li>
|
||||
<li class="mb-2">• Management API keys</li>
|
||||
<li class="mb-2">• Token expiration handling</li>
|
||||
<li class="mb-2">• IP address tracking</li>
|
||||
<li class="mb-2">• Rate limiting support</li>
|
||||
<li class="mb-2">• Audit logging</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Core API Endpoints -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Core API Endpoints</h5>
|
||||
|
||||
<!-- Authentication Endpoints -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-white">
|
||||
<h6 class="mb-0" style="color: var(--primary-color);">
|
||||
<i class="fas fa-user-shield me-2"></i>Authentication Endpoints
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Method</th>
|
||||
<th>Endpoint</th>
|
||||
<th>Description</th>
|
||||
<th>Auth Required</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="badge bg-primary">POST</span></td>
|
||||
<td><code>/auth/login</code></td>
|
||||
<td>User login</td>
|
||||
<td><span class="badge bg-secondary">No</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-danger">POST</span></td>
|
||||
<td><code>/auth/logout</code></td>
|
||||
<td>User logout</td>
|
||||
<td><span class="badge bg-success">Yes</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-primary">POST</span></td>
|
||||
<td><code>/auth/register</code></td>
|
||||
<td>User registration</td>
|
||||
<td><span class="badge bg-secondary">No</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-primary">POST</span></td>
|
||||
<td><code>/auth/forgot-password</code></td>
|
||||
<td>Password reset request</td>
|
||||
<td><span class="badge bg-secondary">No</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-primary">POST</span></td>
|
||||
<td><code>/auth/reset-password</code></td>
|
||||
<td>Password reset</td>
|
||||
<td><span class="badge bg-secondary">No</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Room Management Endpoints -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-white">
|
||||
<h6 class="mb-0" style="color: var(--primary-color);">
|
||||
<i class="fas fa-door-open me-2"></i>Room Management Endpoints
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Method</th>
|
||||
<th>Endpoint</th>
|
||||
<th>Description</th>
|
||||
<th>Auth Required</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="badge bg-success">GET</span></td>
|
||||
<td><code>/rooms</code></td>
|
||||
<td>List user's rooms</td>
|
||||
<td><span class="badge bg-success">Yes</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-primary">POST</span></td>
|
||||
<td><code>/rooms</code></td>
|
||||
<td>Create new room</td>
|
||||
<td><span class="badge bg-success">Yes</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-success">GET</span></td>
|
||||
<td><code>/rooms/{id}</code></td>
|
||||
<td>Get room details</td>
|
||||
<td><span class="badge bg-success">Yes</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-warning">PUT</span></td>
|
||||
<td><code>/rooms/{id}</code></td>
|
||||
<td>Update room</td>
|
||||
<td><span class="badge bg-success">Yes</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-danger">DELETE</span></td>
|
||||
<td><code>/rooms/{id}</code></td>
|
||||
<td>Delete room</td>
|
||||
<td><span class="badge bg-success">Yes</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- File Management Endpoints -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-white">
|
||||
<h6 class="mb-0" style="color: var(--primary-color);">
|
||||
<i class="fas fa-file-alt me-2"></i>File Management Endpoints
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Method</th>
|
||||
<th>Endpoint</th>
|
||||
<th>Description</th>
|
||||
<th>Auth Required</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="badge bg-success">GET</span></td>
|
||||
<td><code>/api/rooms/{room_id}/files</code></td>
|
||||
<td>List room files</td>
|
||||
<td><span class="badge bg-success">Yes</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-primary">POST</span></td>
|
||||
<td><code>/api/rooms/{room_id}/upload</code></td>
|
||||
<td>Upload file</td>
|
||||
<td><span class="badge bg-success">Yes</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-success">GET</span></td>
|
||||
<td><code>/api/rooms/{room_id}/files/{file_id}</code></td>
|
||||
<td>Download file</td>
|
||||
<td><span class="badge bg-success">Yes</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-warning">PUT</span></td>
|
||||
<td><code>/api/rooms/{room_id}/files/{file_id}</code></td>
|
||||
<td>Update file</td>
|
||||
<td><span class="badge bg-success">Yes</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-danger">DELETE</span></td>
|
||||
<td><code>/api/rooms/{room_id}/files/{file_id}</code></td>
|
||||
<td>Delete file</td>
|
||||
<td><span class="badge bg-success">Yes</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-primary">POST</span></td>
|
||||
<td><code>/api/rooms/{room_id}/files/{file_id}/star</code></td>
|
||||
<td>Star/unstar file</td>
|
||||
<td><span class="badge bg-success">Yes</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Conversation Endpoints -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-white">
|
||||
<h6 class="mb-0" style="color: var(--primary-color);">
|
||||
<i class="fas fa-comments me-2"></i>Conversation Endpoints
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Method</th>
|
||||
<th>Endpoint</th>
|
||||
<th>Description</th>
|
||||
<th>Auth Required</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="badge bg-success">GET</span></td>
|
||||
<td><code>/conversations</code></td>
|
||||
<td>List conversations</td>
|
||||
<td><span class="badge bg-success">Yes</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-primary">POST</span></td>
|
||||
<td><code>/conversations</code></td>
|
||||
<td>Create conversation</td>
|
||||
<td><span class="badge bg-success">Yes</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-success">GET</span></td>
|
||||
<td><code>/conversations/{id}/messages</code></td>
|
||||
<td>Get messages</td>
|
||||
<td><span class="badge bg-success">Yes</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-primary">POST</span></td>
|
||||
<td><code>/conversations/{id}/messages</code></td>
|
||||
<td>Send message</td>
|
||||
<td><span class="badge bg-success">Yes</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-primary">POST</span></td>
|
||||
<td><code>/conversations/{id}/members</code></td>
|
||||
<td>Add member</td>
|
||||
<td><span class="badge bg-success">Yes</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Admin API Endpoints -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Administrative API Endpoints</h5>
|
||||
|
||||
<!-- Management API -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-white">
|
||||
<h6 class="mb-0" style="color: var(--primary-color);">
|
||||
<i class="fas fa-cogs me-2"></i>Management API Endpoints
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Method</th>
|
||||
<th>Endpoint</th>
|
||||
<th>Description</th>
|
||||
<th>Auth Required</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="badge bg-success">GET</span></td>
|
||||
<td><code>/api/admin/instances</code></td>
|
||||
<td>List instances</td>
|
||||
<td><span class="badge bg-success">Admin</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-primary">POST</span></td>
|
||||
<td><code>/api/admin/instances</code></td>
|
||||
<td>Create instance</td>
|
||||
<td><span class="badge bg-success">Admin</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-success">GET</span></td>
|
||||
<td><code>/api/admin/events</code></td>
|
||||
<td>Get system events</td>
|
||||
<td><span class="badge bg-success">Admin</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-success">GET</span></td>
|
||||
<td><code>/api/admin/users</code></td>
|
||||
<td>List users</td>
|
||||
<td><span class="badge bg-success">Admin</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-warning">PUT</span></td>
|
||||
<td><code>/api/admin/settings</code></td>
|
||||
<td>Update settings</td>
|
||||
<td><span class="badge bg-success">Admin</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Launch API -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-white">
|
||||
<h6 class="mb-0" style="color: var(--primary-color);">
|
||||
<i class="fas fa-rocket me-2"></i>Launch API Endpoints
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Method</th>
|
||||
<th>Endpoint</th>
|
||||
<th>Description</th>
|
||||
<th>Auth Required</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="badge bg-primary">POST</span></td>
|
||||
<td><code>/api/admin/test-portainer</code></td>
|
||||
<td>Test Portainer connection</td>
|
||||
<td><span class="badge bg-secondary">No</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-primary">POST</span></td>
|
||||
<td><code>/api/admin/test-nginx</code></td>
|
||||
<td>Test NGINX connection</td>
|
||||
<td><span class="badge bg-secondary">No</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-primary">POST</span></td>
|
||||
<td><code>/api/admin/deploy-stack</code></td>
|
||||
<td>Deploy Docker stack</td>
|
||||
<td><span class="badge bg-success">Admin</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-primary">POST</span></td>
|
||||
<td><code>/api/admin/create-proxy</code></td>
|
||||
<td>Create proxy host</td>
|
||||
<td><span class="badge bg-success">Admin</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-primary">POST</span></td>
|
||||
<td><code>/api/admin/create-ssl</code></td>
|
||||
<td>Create SSL certificate</td>
|
||||
<td><span class="badge bg-success">Admin</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Response Formats -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Response Formats</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">Success Response</h6>
|
||||
<pre class="bg-light p-3 rounded small"><code>{
|
||||
"success": true,
|
||||
"data": {
|
||||
"id": 1,
|
||||
"name": "Example",
|
||||
"created_at": "2024-01-01T00:00:00Z"
|
||||
},
|
||||
"message": "Operation successful"
|
||||
}</code></pre>
|
||||
</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">Error Response</h6>
|
||||
<pre class="bg-light p-3 rounded small"><code>{
|
||||
"success": false,
|
||||
"error": "Validation failed",
|
||||
"details": {
|
||||
"field": "name",
|
||||
"message": "Name is required"
|
||||
},
|
||||
"status_code": 400
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="col-lg-4">
|
||||
<!-- API Statistics -->
|
||||
<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);">API 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);">50+</div>
|
||||
<small class="text-muted">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);">12</div>
|
||||
<small class="text-muted">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);">4</div>
|
||||
<small class="text-muted">Auth Types</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);">JSON</div>
|
||||
<small class="text-muted">Data Format</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Authentication Methods -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-3" style="color: var(--primary-color);">Authentication Methods</h5>
|
||||
<div class="d-grid gap-2">
|
||||
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
||||
<i class="fas fa-cookie-bite me-2"></i>Session-based (Web)
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
||||
<i class="fas fa-key me-2"></i>JWT Tokens (API)
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
||||
<i class="fas fa-shield-alt me-2"></i>API Keys (Management)
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
||||
<i class="fas fa-user-shield me-2"></i>Role-based Access
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- HTTP Status Codes -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-3" style="color: var(--primary-color);">HTTP Status Codes</h5>
|
||||
<div class="small">
|
||||
<div class="mb-2">
|
||||
<span class="badge bg-success me-2">200</span>
|
||||
<strong>OK</strong> - Request successful
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="badge bg-primary me-2">201</span>
|
||||
<strong>Created</strong> - Resource created
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="badge bg-warning me-2">400</span>
|
||||
<strong>Bad Request</strong> - Invalid input
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="badge bg-danger me-2">401</span>
|
||||
<strong>Unauthorized</strong> - Authentication required
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="badge bg-danger me-2">403</span>
|
||||
<strong>Forbidden</strong> - Access denied
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="badge bg-secondary me-2">404</span>
|
||||
<strong>Not Found</strong> - Resource not found
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="badge bg-danger me-2">500</span>
|
||||
<strong>Server Error</strong> - Internal error
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rate Limiting -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-3" style="color: var(--primary-color);">Rate Limiting</h5>
|
||||
<div class="small">
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-clock text-primary me-2"></i>
|
||||
<strong>Standard</strong> - 100 requests/minute
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-user-shield text-primary me-2"></i>
|
||||
<strong>Authenticated</strong> - 500 requests/minute
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-crown text-primary me-2"></i>
|
||||
<strong>Admin</strong> - 1000 requests/minute
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-exclamation-triangle text-warning me-2"></i>
|
||||
<strong>Exceeded</strong> - 429 Too Many Requests
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,351 @@
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<!-- Architecture Overview -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-3">System Architecture</h5>
|
||||
<p class="text-muted lead">
|
||||
DocuPulse employs a sophisticated multi-tenant architecture designed for scalability, security, and maintainability.
|
||||
The system is built on a modular blueprint structure with clear separation of concerns, comprehensive event logging,
|
||||
and robust permission management.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Architecture Layers -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Architecture Layers</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">Presentation Layer</h6>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li class="mb-2">• Bootstrap 5 responsive UI</li>
|
||||
<li class="mb-2">• JavaScript ES6+ client logic</li>
|
||||
<li class="mb-2">• Jinja2 templating engine</li>
|
||||
<li class="mb-2">• AJAX-based real-time updates</li>
|
||||
<li class="mb-2">• Progressive enhancement</li>
|
||||
<li class="mb-2">• Mobile-first design</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">Application Layer</h6>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li class="mb-2">• Flask 2.0+ web framework</li>
|
||||
<li class="mb-2">• Blueprint-based routing</li>
|
||||
<li class="mb-2">• RESTful API endpoints</li>
|
||||
<li class="mb-2">• CSRF protection</li>
|
||||
<li class="mb-2">• Session management</li>
|
||||
<li class="mb-2">• Error handling</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">Business Logic Layer</h6>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li class="mb-2">• User authentication & authorization</li>
|
||||
<li class="mb-2">• File management operations</li>
|
||||
<li class="mb-2">• Permission system (7 levels)</li>
|
||||
<li class="mb-2">• Event logging & notifications</li>
|
||||
<li class="mb-2">• Email template system</li>
|
||||
<li class="mb-2">• Multi-tenant isolation</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">Data Access Layer</h6>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li class="mb-2">• SQLAlchemy ORM</li>
|
||||
<li class="mb-2">• PostgreSQL database</li>
|
||||
<li class="mb-2">• Alembic migrations</li>
|
||||
<li class="mb-2">• Connection pooling</li>
|
||||
<li class="mb-2">• Transaction management</li>
|
||||
<li class="mb-2">• Query optimization</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Multi-Tenant Architecture -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Multi-Tenant Architecture</h5>
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-3">Master Instance</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Central orchestration hub</li>
|
||||
<li class="mb-2">• Instance management & monitoring</li>
|
||||
<li class="mb-2">• Health status tracking</li>
|
||||
<li class="mb-2">• Automated deployment via Docker</li>
|
||||
<li class="mb-2">• API-based communication</li>
|
||||
<li class="mb-2">• Resource allocation management</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-3">Tenant Instances</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Isolated data & storage</li>
|
||||
<li class="mb-2">• Independent user management</li>
|
||||
<li class="mb-2">• Custom configurations</li>
|
||||
<li class="mb-2">• Separate database instances</li>
|
||||
<li class="mb-2">• Unique domain/subdomain</li>
|
||||
<li class="mb-2">• Scalable resource limits</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Blueprint Structure -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Blueprint Structure</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">Core Modules</h6>
|
||||
<div class="d-grid gap-2">
|
||||
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
||||
<i class="fas fa-home me-2"></i>main.py - Dashboard & navigation
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
||||
<i class="fas fa-user-shield me-2"></i>auth.py - Authentication system
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
||||
<i class="fas fa-door-open me-2"></i>rooms.py - Room management
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
||||
<i class="fas fa-file-alt me-2"></i>room_files.py - File operations
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
||||
<i class="fas fa-comments me-2"></i>conversations.py - Messaging
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
||||
<i class="fas fa-users me-2"></i>room_members.py - Member management
|
||||
</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">Administrative Modules</h6>
|
||||
<div class="d-grid gap-2">
|
||||
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
||||
<i class="fas fa-cogs me-2"></i>admin.py - Admin dashboard
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
||||
<i class="fas fa-code me-2"></i>admin_api.py - Admin API endpoints
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
||||
<i class="fas fa-rocket me-2"></i>launch_api.py - Instance deployment
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
||||
<i class="fas fa-address-book me-2"></i>contacts.py - Contact management
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
||||
<i class="fas fa-trash me-2"></i>trash.py - Trash management
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
||||
<i class="fas fa-envelope me-2"></i>email_templates.py - Email system
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Security Architecture -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Security Architecture</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">Authentication & Authorization</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Flask-Login session management</li>
|
||||
<li class="mb-2">• Password hashing with Werkzeug</li>
|
||||
<li class="mb-2">• CSRF token protection</li>
|
||||
<li class="mb-2">• JWT for API authentication</li>
|
||||
<li class="mb-2">• Role-based access control</li>
|
||||
<li class="mb-2">• Granular permission system</li>
|
||||
</ul>
|
||||
</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">Data Protection</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• SQL injection prevention</li>
|
||||
<li class="mb-2">• XSS protection</li>
|
||||
<li class="mb-2">• File upload validation</li>
|
||||
<li class="mb-2">• Secure file storage</li>
|
||||
<li class="mb-2">• Audit logging</li>
|
||||
<li class="mb-2">• Data encryption at rest</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Event-Driven Architecture -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Event-Driven Architecture</h5>
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<p class="text-muted mb-4">Comprehensive event logging system with 30+ event types for audit trails and system monitoring.</p>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">User Events</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-1">• Login/logout tracking</li>
|
||||
<li class="mb-1">• Account creation/modification</li>
|
||||
<li class="mb-1">• Password changes</li>
|
||||
<li class="mb-1">• Profile updates</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">File Events</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-1">• Upload/download tracking</li>
|
||||
<li class="mb-1">• File modifications</li>
|
||||
<li class="mb-1">• Deletion/restoration</li>
|
||||
<li class="mb-1">• Permission changes</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">Room Events</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-1">• Room creation/deletion</li>
|
||||
<li class="mb-1">• Member management</li>
|
||||
<li class="mb-1">• Permission updates</li>
|
||||
<li class="mb-1">• Settings changes</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">System Events</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-1">• Configuration changes</li>
|
||||
<li class="mb-1">• Email notifications</li>
|
||||
<li class="mb-1">• Error logging</li>
|
||||
<li class="mb-1">• Performance metrics</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="col-lg-4">
|
||||
<!-- Architecture Diagram -->
|
||||
<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);">Architecture Flow</h5>
|
||||
<div class="mb-3">
|
||||
<div class="p-3 rounded mb-2" style="background-color: var(--primary-opacity-15);">
|
||||
<i class="fas fa-globe fa-2x mb-2" style="color: var(--primary-color);"></i>
|
||||
<div class="fw-bold">Client Layer</div>
|
||||
<small class="text-muted">Browser/API Client</small>
|
||||
</div>
|
||||
<div class="p-3 rounded mb-2" style="background-color: var(--secondary-opacity-15);">
|
||||
<i class="fas fa-server fa-2x mb-2" style="color: var(--secondary-color);"></i>
|
||||
<div class="fw-bold">Web Server</div>
|
||||
<small class="text-muted">Gunicorn + Flask</small>
|
||||
</div>
|
||||
<div class="p-3 rounded mb-2" style="background-color: var(--primary-opacity-15);">
|
||||
<i class="fas fa-cogs fa-2x mb-2" style="color: var(--primary-color);"></i>
|
||||
<div class="fw-bold">Application Layer</div>
|
||||
<small class="text-muted">Business Logic</small>
|
||||
</div>
|
||||
<div class="p-3 rounded mb-2" style="background-color: var(--secondary-opacity-15);">
|
||||
<i class="fas fa-database fa-2x mb-2" style="color: var(--secondary-color);"></i>
|
||||
<div class="fw-bold">Data Layer</div>
|
||||
<small class="text-muted">PostgreSQL</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Key Design Patterns -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-3" style="color: var(--primary-color);">Design Patterns</h5>
|
||||
<div class="d-grid gap-2">
|
||||
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
||||
<i class="fas fa-puzzle-piece me-2"></i>Blueprint Pattern
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
||||
<i class="fas fa-shield-alt me-2"></i>Decorator Pattern
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
||||
<i class="fas fa-database me-2"></i>Repository Pattern
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
||||
<i class="fas fa-bell me-2"></i>Observer Pattern
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
||||
<i class="fas fa-factory me-2"></i>Factory Pattern
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
||||
<i class="fas fa-chain me-2"></i>Chain of Responsibility
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scalability Features -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-3" style="color: var(--primary-color);">Scalability Features</h5>
|
||||
<div class="small">
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-docker text-primary me-2"></i>
|
||||
<strong>Containerization</strong> - Docker-based deployment
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-database text-primary me-2"></i>
|
||||
<strong>Connection Pooling</strong> - Database optimization
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-server text-primary me-2"></i>
|
||||
<strong>Load Balancing</strong> - Multi-instance support
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-chart-line text-primary me-2"></i>
|
||||
<strong>Monitoring</strong> - Health checks & metrics
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-cache text-primary me-2"></i>
|
||||
<strong>Caching</strong> - Asset versioning & CDN ready
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-expand-arrows-alt text-primary me-2"></i>
|
||||
<strong>Horizontal Scaling</strong> - Multi-tenant isolation
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -523,3 +523,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,430 @@
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<!-- Deployment Overview -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-3">Deployment Architecture</h5>
|
||||
<p class="text-muted lead">
|
||||
DocuPulse is designed for containerized deployment using Docker and Docker Compose, providing a scalable,
|
||||
production-ready infrastructure. The system supports both single-instance deployments and multi-tenant
|
||||
orchestration with automated provisioning and health monitoring.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Docker Architecture -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Docker Architecture</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">Web Application</h6>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li class="mb-2">• Flask application container</li>
|
||||
<li class="mb-2">• Gunicorn WSGI server</li>
|
||||
<li class="mb-2">• Health check endpoints</li>
|
||||
<li class="mb-2">• Resource limits & monitoring</li>
|
||||
<li class="mb-2">• Volume mounts for uploads</li>
|
||||
<li class="mb-2">• Environment configuration</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">Database</h6>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li class="mb-2">• PostgreSQL 13 container</li>
|
||||
<li class="mb-2">• Persistent volume storage</li>
|
||||
<li class="mb-2">• Connection pooling</li>
|
||||
<li class="mb-2">• Health monitoring</li>
|
||||
<li class="mb-2">• Automated backups</li>
|
||||
<li class="mb-2">• Performance optimization</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Docker Compose Configuration -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Docker Compose Configuration</h5>
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title text-muted mb-3">Services Configuration</h6>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">Web Service</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-1">• Image: Custom Flask application</li>
|
||||
<li class="mb-1">• Port: 5000 (internal) / ${PORT} (external)</li>
|
||||
<li class="mb-1">• Environment: Production settings</li>
|
||||
<li class="mb-1">• Volumes: Upload storage</li>
|
||||
<li class="mb-1">• Dependencies: Database service</li>
|
||||
<li class="mb-1">• Health checks: HTTP endpoint</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">Database Service</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-1">• Image: postgres:13</li>
|
||||
<li class="mb-1">• Port: 5432 (internal only)</li>
|
||||
<li class="mb-1">• Environment: Database credentials</li>
|
||||
<li class="mb-1">• Volumes: Persistent data storage</li>
|
||||
<li class="mb-1">• Health checks: pg_isready</li>
|
||||
<li class="mb-1">• Restart policy: unless-stopped</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Multi-Tenant Deployment -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Multi-Tenant Deployment</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">Master Instance</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Central orchestration hub</li>
|
||||
<li class="mb-2">• Instance management dashboard</li>
|
||||
<li class="mb-2">• Automated deployment via API</li>
|
||||
<li class="mb-2">• Health monitoring & alerts</li>
|
||||
<li class="mb-2">• Resource allocation tracking</li>
|
||||
<li class="mb-2">• Backup & recovery management</li>
|
||||
</ul>
|
||||
</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">Tenant Instances</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Isolated Docker networks</li>
|
||||
<li class="mb-2">• Separate database instances</li>
|
||||
<li class="mb-2">• Unique port assignments</li>
|
||||
<li class="mb-2">• Independent volume storage</li>
|
||||
<li class="mb-2">• Custom domain routing</li>
|
||||
<li class="mb-2">• Scalable resource limits</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Deployment Process -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Deployment Process</h5>
|
||||
|
||||
<!-- Single Instance Deployment -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-white">
|
||||
<h6 class="mb-0" style="color: var(--primary-color);">
|
||||
<i class="fas fa-server me-2"></i>Single Instance Deployment
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">Prerequisites</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-1">• Docker & Docker Compose</li>
|
||||
<li class="mb-1">• PostgreSQL (if external)</li>
|
||||
<li class="mb-1">• Environment variables</li>
|
||||
<li class="mb-1">• SSL certificates</li>
|
||||
<li class="mb-1">• Domain configuration</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">Deployment Steps</h6>
|
||||
<ol class="small">
|
||||
<li class="mb-1">Clone repository</li>
|
||||
<li class="mb-1">Configure environment</li>
|
||||
<li class="mb-1">Run database migrations</li>
|
||||
<li class="mb-1">Start Docker services</li>
|
||||
<li class="mb-1">Verify health checks</li>
|
||||
<li class="mb-1">Configure reverse proxy</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Multi-Tenant Deployment -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-white">
|
||||
<h6 class="mb-0" style="color: var(--primary-color);">
|
||||
<i class="fas fa-building me-2"></i>Multi-Tenant Deployment
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">Infrastructure Requirements</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-1">• Portainer for container management</li>
|
||||
<li class="mb-1">• NGINX Proxy Manager</li>
|
||||
<li class="mb-1">• Git repository access</li>
|
||||
<li class="mb-1">• SSL certificate provider</li>
|
||||
<li class="mb-1">• Monitoring & logging</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">Automated Process</h6>
|
||||
<ol class="small">
|
||||
<li class="mb-1">Instance creation via API</li>
|
||||
<li class="mb-1">Docker stack deployment</li>
|
||||
<li class="mb-1">Database initialization</li>
|
||||
<li class="mb-1">Proxy host configuration</li>
|
||||
<li class="mb-1">SSL certificate generation</li>
|
||||
<li class="mb-1">Health monitoring setup</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Environment Configuration -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Environment Configuration</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">Required Variables</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2"><code>DATABASE_URL</code> - PostgreSQL connection</li>
|
||||
<li class="mb-2"><code>SECRET_KEY</code> - Flask secret key</li>
|
||||
<li class="mb-2"><code>FLASK_ENV</code> - Environment mode</li>
|
||||
<li class="mb-2"><code>SERVER_NAME</code> - Server hostname</li>
|
||||
<li class="mb-2"><code>PREFERRED_URL_SCHEME</code> - HTTP/HTTPS</li>
|
||||
<li class="mb-2"><code>PORT</code> - External port mapping</li>
|
||||
</ul>
|
||||
</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">Optional Variables</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2"><code>MASTER</code> - Master instance flag</li>
|
||||
<li class="mb-2"><code>ISMASTER</code> - Master instance mode</li>
|
||||
<li class="mb-2"><code>CSS_VERSION</code> - Asset versioning</li>
|
||||
<li class="mb-2"><code>UPLOAD_FOLDER</code> - File storage path</li>
|
||||
<li class="mb-2"><code>LOG_LEVEL</code> - Logging verbosity</li>
|
||||
<li class="mb-2"><code>DEBUG</code> - Debug mode flag</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Health Monitoring -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Health Monitoring</h5>
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-3">Health Check Endpoints</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• <code>/health</code> - Application health</li>
|
||||
<li class="mb-2">• Database connectivity check</li>
|
||||
<li class="mb-2">• Response time monitoring</li>
|
||||
<li class="mb-2">• Error rate tracking</li>
|
||||
<li class="mb-2">• Resource usage metrics</li>
|
||||
<li class="mb-2">• Service status reporting</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-3">Monitoring Features</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Prometheus metrics export</li>
|
||||
<li class="mb-2">• Grafana dashboard integration</li>
|
||||
<li class="mb-2">• Alert notification system</li>
|
||||
<li class="mb-2">• Performance benchmarking</li>
|
||||
<li class="mb-2">• Capacity planning tools</li>
|
||||
<li class="mb-2">• Automated recovery actions</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Backup & Recovery -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Backup & Recovery</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">Backup Strategy</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Automated database backups</li>
|
||||
<li class="mb-2">• File storage snapshots</li>
|
||||
<li class="mb-2">• Configuration backups</li>
|
||||
<li class="mb-2">• Incremental backup support</li>
|
||||
<li class="mb-2">• Cross-region replication</li>
|
||||
<li class="mb-2">• Retention policy management</li>
|
||||
</ul>
|
||||
</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">Recovery Procedures</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Point-in-time recovery</li>
|
||||
<li class="mb-2">• Disaster recovery plans</li>
|
||||
<li class="mb-2">• Data validation tools</li>
|
||||
<li class="mb-2">• Rollback procedures</li>
|
||||
<li class="mb-2">• Testing environments</li>
|
||||
<li class="mb-2">• Documentation & runbooks</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="col-lg-4">
|
||||
<!-- Deployment Statistics -->
|
||||
<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);">Deployment Stats</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);">2</div>
|
||||
<small class="text-muted">Services</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">Tenants</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);">60s</div>
|
||||
<small class="text-muted">Health Check</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);">1GB</div>
|
||||
<small class="text-muted">Memory Limit</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Deployment Commands -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-3" style="color: var(--primary-color);">Quick Commands</h5>
|
||||
<div class="small">
|
||||
<div class="mb-2">
|
||||
<code class="bg-light p-1 rounded">docker-compose up -d</code>
|
||||
<div class="text-muted">Start services</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<code class="bg-light p-1 rounded">docker-compose down</code>
|
||||
<div class="text-muted">Stop services</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<code class="bg-light p-1 rounded">docker-compose logs</code>
|
||||
<div class="text-muted">View logs</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<code class="bg-light p-1 rounded">docker-compose ps</code>
|
||||
<div class="text-muted">Check status</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<code class="bg-light p-1 rounded">flask db upgrade</code>
|
||||
<div class="text-muted">Run migrations</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<code class="bg-light p-1 rounded">flask create-admin</code>
|
||||
<div class="text-muted">Create admin user</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Infrastructure 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);">Infrastructure</h5>
|
||||
<div class="d-grid gap-2">
|
||||
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
||||
<i class="fas fa-docker me-2"></i>Docker Engine
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
||||
<i class="fas fa-server me-2"></i>Docker Compose
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
||||
<i class="fas fa-database me-2"></i>PostgreSQL 13
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
||||
<i class="fas fa-rocket me-2"></i>Gunicorn WSGI
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
||||
<i class="fas fa-chart-line me-2"></i>Prometheus
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
||||
<i class="fas fa-shield-alt me-2"></i>NGINX Proxy
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Security Considerations -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-3" style="color: var(--primary-color);">Security</h5>
|
||||
<div class="small">
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-lock text-primary me-2"></i>
|
||||
<strong>Network Isolation</strong> - Docker networks
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-shield-alt text-primary me-2"></i>
|
||||
<strong>SSL/TLS</strong> - HTTPS encryption
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-user-shield text-primary me-2"></i>
|
||||
<strong>Access Control</strong> - Role-based permissions
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-database text-primary me-2"></i>
|
||||
<strong>Data Encryption</strong> - At rest & in transit
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-eye text-primary me-2"></i>
|
||||
<strong>Audit Logging</strong> - Comprehensive tracking
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-sync text-primary me-2"></i>
|
||||
<strong>Regular Updates</strong> - Security patches
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,473 @@
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<!-- Email System Overview -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-3">Email System & SMTP Integration</h5>
|
||||
<p class="text-muted lead">
|
||||
DocuPulse includes a comprehensive email system with template management, SMTP integration, and automated
|
||||
notifications. The system supports customizable email templates, delivery tracking, and integration with
|
||||
various SMTP providers for reliable email delivery.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Email Architecture -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Email System Architecture</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">Email Components</h6>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li class="mb-2">• Template management system</li>
|
||||
<li class="mb-2">• SMTP configuration</li>
|
||||
<li class="mb-2">• Email queue management</li>
|
||||
<li class="mb-2">• Delivery tracking</li>
|
||||
<li class="mb-2">• Notification system</li>
|
||||
<li class="mb-2">• Email logging</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">Email Features</h6>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li class="mb-2">• HTML email templates</li>
|
||||
<li class="mb-2">• Variable substitution</li>
|
||||
<li class="mb-2">• Attachment support</li>
|
||||
<li class="mb-2">• Bulk email sending</li>
|
||||
<li class="mb-2">• Email scheduling</li>
|
||||
<li class="mb-2">• Bounce handling</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Email Templates -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Email Template System</h5>
|
||||
|
||||
<!-- Template Management -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-white">
|
||||
<h6 class="mb-0" style="color: var(--primary-color);">
|
||||
<i class="fas fa-envelope me-2"></i>Template Management
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">Template Features</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-1">• HTML template editor</li>
|
||||
<li class="mb-1">• Variable placeholders</li>
|
||||
<li class="mb-1">• Template versioning</li>
|
||||
<li class="mb-1">• Template categories</li>
|
||||
<li class="mb-1">• Preview functionality</li>
|
||||
<li class="mb-1">• Template testing</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">Default Templates</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-1">• Welcome email</li>
|
||||
<li class="mb-1">• Password reset</li>
|
||||
<li class="mb-1">• Account confirmation</li>
|
||||
<li class="mb-1">• Room invitations</li>
|
||||
<li class="mb-1">• File sharing</li>
|
||||
<li class="mb-1">• System notifications</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Template Variables -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-white">
|
||||
<h6 class="mb-0" style="color: var(--primary-color);">
|
||||
<i class="fas fa-code me-2"></i>Template Variables
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">User Variables</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-1"><code>{{ user.name }}</code> - User's full name</li>
|
||||
<li class="mb-1"><code>{{ user.email }}</code> - User's email</li>
|
||||
<li class="mb-1"><code>{{ user.company }}</code> - User's company</li>
|
||||
<li class="mb-1"><code>{{ user.position }}</code> - User's position</li>
|
||||
<li class="mb-1"><code>{{ user.username }}</code> - Username</li>
|
||||
<li class="mb-1"><code>{{ user.profile_url }}</code> - Profile link</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">System Variables</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-1"><code>{{ site.name }}</code> - Site name</li>
|
||||
<li class="mb-1"><code>{{ site.url }}</code> - Site URL</li>
|
||||
<li class="mb-1"><code>{{ site.logo }}</code> - Company logo</li>
|
||||
<li class="mb-1"><code>{{ reset_url }}</code> - Password reset link</li>
|
||||
<li class="mb-1"><code>{{ room.name }}</code> - Room name</li>
|
||||
<li class="mb-1"><code>{{ file.name }}</code> - File name</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SMTP Configuration -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">SMTP Configuration</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">SMTP Settings</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• SMTP server configuration</li>
|
||||
<li class="mb-2">• Authentication credentials</li>
|
||||
<li class="mb-2">• Port configuration</li>
|
||||
<li class="mb-2">• SSL/TLS encryption</li>
|
||||
<li class="mb-2">• Connection timeout</li>
|
||||
<li class="mb-2">• Retry mechanisms</li>
|
||||
</ul>
|
||||
</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">Supported Providers</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Gmail SMTP</li>
|
||||
<li class="mb-2">• Outlook/Hotmail</li>
|
||||
<li class="mb-2">• SendGrid</li>
|
||||
<li class="mb-2">• Mailgun</li>
|
||||
<li class="mb-2">• Amazon SES</li>
|
||||
<li class="mb-2">• Custom SMTP servers</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Email Delivery -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Email Delivery System</h5>
|
||||
|
||||
<!-- Delivery Process -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-white">
|
||||
<h6 class="mb-0" style="color: var(--primary-color);">
|
||||
<i class="fas fa-paper-plane me-2"></i>Delivery Process
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">Email Processing</h6>
|
||||
<ol class="small">
|
||||
<li class="mb-1">Template selection & rendering</li>
|
||||
<li class="mb-1">Variable substitution</li>
|
||||
<li class="mb-1">Email validation</li>
|
||||
<li class="mb-1">Queue placement</li>
|
||||
<li class="mb-1">SMTP delivery</li>
|
||||
<li class="mb-1">Delivery confirmation</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">Error Handling</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-1">• Invalid email addresses</li>
|
||||
<li class="mb-1">• SMTP connection failures</li>
|
||||
<li class="mb-1">• Authentication errors</li>
|
||||
<li class="mb-1">• Rate limiting</li>
|
||||
<li class="mb-1">• Bounce processing</li>
|
||||
<li class="mb-1">• Retry mechanisms</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Email Queue -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-white">
|
||||
<h6 class="mb-0" style="color: var(--primary-color);">
|
||||
<i class="fas fa-list me-2"></i>Email Queue Management
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">Queue Features</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-1">• Priority-based queuing</li>
|
||||
<li class="mb-1">• Batch processing</li>
|
||||
<li class="mb-1">• Rate limiting</li>
|
||||
<li class="mb-1">• Queue monitoring</li>
|
||||
<li class="mb-1">• Failed email handling</li>
|
||||
<li class="mb-1">• Queue cleanup</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">Queue Status</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-1">• Pending emails</li>
|
||||
<li class="mb-1">• Processing emails</li>
|
||||
<li class="mb-1">• Sent emails</li>
|
||||
<li class="mb-1">• Failed emails</li>
|
||||
<li class="mb-1">• Bounced emails</li>
|
||||
<li class="mb-1">• Retry attempts</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notification System -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Notification System</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">Notification Types</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Account notifications</li>
|
||||
<li class="mb-2">• Room invitations</li>
|
||||
<li class="mb-2">• File sharing alerts</li>
|
||||
<li class="mb-2">• System announcements</li>
|
||||
<li class="mb-2">• Security alerts</li>
|
||||
<li class="mb-2">• Maintenance notices</li>
|
||||
</ul>
|
||||
</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">Notification Preferences</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Email notifications</li>
|
||||
<li class="mb-2">• In-app notifications</li>
|
||||
<li class="mb-2">• Notification frequency</li>
|
||||
<li class="mb-2">• Category preferences</li>
|
||||
<li class="mb-2">• Quiet hours</li>
|
||||
<li class="mb-2">• Unsubscribe options</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Email Analytics -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Email Analytics</h5>
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-3">Delivery Metrics</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Sent email count</li>
|
||||
<li class="mb-2">• Delivery success rate</li>
|
||||
<li class="mb-2">• Bounce rate tracking</li>
|
||||
<li class="mb-2">• Open rate monitoring</li>
|
||||
<li class="mb-2">• Click-through rates</li>
|
||||
<li class="mb-2">• Spam complaint tracking</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-3">Performance Analytics</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Email delivery time</li>
|
||||
<li class="mb-2">• Queue processing speed</li>
|
||||
<li class="mb-2">• SMTP response times</li>
|
||||
<li class="mb-2">• Error rate analysis</li>
|
||||
<li class="mb-2">• Template performance</li>
|
||||
<li class="mb-2">• User engagement metrics</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Email Security -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Email Security</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">Security Features</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Email encryption (TLS/SSL)</li>
|
||||
<li class="mb-2">• Authentication (SPF/DKIM)</li>
|
||||
<li class="mb-2">• Rate limiting</li>
|
||||
<li class="mb-2">• Spam protection</li>
|
||||
<li class="mb-2">• Content filtering</li>
|
||||
<li class="mb-2">• Secure SMTP connections</li>
|
||||
</ul>
|
||||
</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">Compliance</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• GDPR compliance</li>
|
||||
<li class="mb-2">• CAN-SPAM compliance</li>
|
||||
<li class="mb-2">• Unsubscribe mechanisms</li>
|
||||
<li class="mb-2">• Data retention policies</li>
|
||||
<li class="mb-2">• Privacy protection</li>
|
||||
<li class="mb-2">• Audit trail logging</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="col-lg-4">
|
||||
<!-- Email Statistics -->
|
||||
<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);">Email Stats</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);">6</div>
|
||||
<small class="text-muted">Default Templates</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">Custom Templates</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);">6</div>
|
||||
<small class="text-muted">SMTP Providers</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);">24/7</div>
|
||||
<small class="text-muted">Queue Processing</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Email Operations -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-3" style="color: var(--primary-color);">Email Operations</h5>
|
||||
<div class="d-grid gap-2">
|
||||
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
||||
<i class="fas fa-plus me-2"></i>Create Template
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
||||
<i class="fas fa-edit me-2"></i>Edit Template
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
||||
<i class="fas fa-paper-plane me-2"></i>Send Email
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
||||
<i class="fas fa-cog me-2"></i>Configure SMTP
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
||||
<i class="fas fa-chart-line me-2"></i>View Analytics
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
||||
<i class="fas fa-list me-2"></i>Manage Queue
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SMTP Providers -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-3" style="color: var(--primary-color);">SMTP Providers</h5>
|
||||
<div class="small">
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-envelope text-primary me-2"></i>
|
||||
<strong>Gmail</strong> - Google SMTP
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-envelope text-primary me-2"></i>
|
||||
<strong>Outlook</strong> - Microsoft SMTP
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-envelope text-primary me-2"></i>
|
||||
<strong>SendGrid</strong> - Transactional emails
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-envelope text-primary me-2"></i>
|
||||
<strong>Mailgun</strong> - API-based delivery
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-envelope text-primary me-2"></i>
|
||||
<strong>Amazon SES</strong> - AWS email service
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-envelope text-primary me-2"></i>
|
||||
<strong>Custom</strong> - Self-hosted SMTP
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Email Status -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-3" style="color: var(--primary-color);">Email Status</h5>
|
||||
<div class="small">
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-circle text-success me-2"></i>
|
||||
<strong>Sent</strong> - Successfully delivered
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-circle text-warning me-2"></i>
|
||||
<strong>Pending</strong> - In queue
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-circle text-danger me-2"></i>
|
||||
<strong>Failed</strong> - Delivery failed
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-circle text-info me-2"></i>
|
||||
<strong>Bounced</strong> - Email bounced
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-circle text-secondary me-2"></i>
|
||||
<strong>Spam</strong> - Marked as spam
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-circle text-dark me-2"></i>
|
||||
<strong>Unsubscribed</strong> - User opted out
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,467 @@
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<!-- File Management Overview -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-3">File Management System</h5>
|
||||
<p class="text-muted lead">
|
||||
DocuPulse features a sophisticated file management system with hierarchical organization, granular permissions,
|
||||
version control, and comprehensive metadata tracking. The system supports multiple file formats, bulk operations,
|
||||
and advanced search capabilities with secure storage and access controls.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- File System Architecture -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">File System Architecture</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">Storage Structure</h6>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li class="mb-2">• Room-based organization</li>
|
||||
<li class="mb-2">• Hierarchical folder structure</li>
|
||||
<li class="mb-2">• Metadata database tracking</li>
|
||||
<li class="mb-2">• Physical file storage</li>
|
||||
<li class="mb-2">• Backup & recovery system</li>
|
||||
<li class="mb-2">• Trash management</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">Access Control</h6>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li class="mb-2">• 7-level permission system</li>
|
||||
<li class="mb-2">• User-based access control</li>
|
||||
<li class="mb-2">• Room member permissions</li>
|
||||
<li class="mb-2">• File-level security</li>
|
||||
<li class="mb-2">• Audit trail logging</li>
|
||||
<li class="mb-2">• Secure file transfer</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- File Operations -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">File Operations</h5>
|
||||
|
||||
<!-- Upload Operations -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-white">
|
||||
<h6 class="mb-0" style="color: var(--primary-color);">
|
||||
<i class="fas fa-upload me-2"></i>Upload Operations
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">Upload Features</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-1">• Drag & drop interface</li>
|
||||
<li class="mb-1">• Progress tracking</li>
|
||||
<li class="mb-1">• Multiple file selection</li>
|
||||
<li class="mb-1">• File type validation</li>
|
||||
<li class="mb-1">• Size limit enforcement</li>
|
||||
<li class="mb-1">• Duplicate handling</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">Upload Process</h6>
|
||||
<ol class="small">
|
||||
<li class="mb-1">File validation & security check</li>
|
||||
<li class="mb-1">Metadata extraction</li>
|
||||
<li class="mb-1">Physical file storage</li>
|
||||
<li class="mb-1">Database record creation</li>
|
||||
<li class="mb-1">Permission assignment</li>
|
||||
<li class="mb-1">Event logging</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- File Management Operations -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-white">
|
||||
<h6 class="mb-0" style="color: var(--primary-color);">
|
||||
<i class="fas fa-cogs me-2"></i>File Management Operations
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">Basic Operations</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-1">• View & preview files</li>
|
||||
<li class="mb-1">• Download files</li>
|
||||
<li class="mb-1">• Rename files/folders</li>
|
||||
<li class="mb-1">• Move files between folders</li>
|
||||
<li class="mb-1">• Copy files</li>
|
||||
<li class="mb-1">• Delete files</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">Advanced Operations</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-1">• Bulk operations</li>
|
||||
<li class="mb-1">• Zip download</li>
|
||||
<li class="mb-1">• File starring</li>
|
||||
<li class="mb-1">• Version control</li>
|
||||
<li class="mb-1">• File sharing</li>
|
||||
<li class="mb-1">• Metadata editing</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Permission System -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Permission System</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">Permission Levels</h6>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Permission</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>can_view</code></td>
|
||||
<td>View files & folders</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>can_download</code></td>
|
||||
<td>Download files</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>can_upload</code></td>
|
||||
<td>Upload new files</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>can_delete</code></td>
|
||||
<td>Delete files</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>can_rename</code></td>
|
||||
<td>Rename files/folders</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>can_move</code></td>
|
||||
<td>Move files between folders</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>can_share</code></td>
|
||||
<td>Share files with others</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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">Permission Inheritance</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Room-level permissions</li>
|
||||
<li class="mb-2">• User-specific overrides</li>
|
||||
<li class="mb-2">• Dynamic permission updates</li>
|
||||
<li class="mb-2">• Permission validation</li>
|
||||
<li class="mb-2">• Audit trail tracking</li>
|
||||
<li class="mb-2">• Admin override capabilities</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- File Types & Formats -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">File Types & Formats</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">Supported Formats</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Documents: PDF, DOC, DOCX, TXT, RTF</li>
|
||||
<li class="mb-2">• Images: JPG, PNG, GIF, BMP, SVG</li>
|
||||
<li class="mb-2">• Spreadsheets: XLS, XLSX, CSV</li>
|
||||
<li class="mb-2">• Presentations: PPT, PPTX</li>
|
||||
<li class="mb-2">• Archives: ZIP, RAR, 7Z</li>
|
||||
<li class="mb-2">• Code: JS, PY, HTML, CSS, JSON</li>
|
||||
</ul>
|
||||
</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">File Processing</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• MIME type detection</li>
|
||||
<li class="mb-2">• File size validation</li>
|
||||
<li class="mb-2">• Virus scanning (optional)</li>
|
||||
<li class="mb-2">• Metadata extraction</li>
|
||||
<li class="mb-2">• Thumbnail generation</li>
|
||||
<li class="mb-2">• Preview generation</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search & Organization -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Search & Organization</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">Search Features</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Full-text search</li>
|
||||
<li class="mb-2">• File name search</li>
|
||||
<li class="mb-2">• Content search</li>
|
||||
<li class="mb-2">• Advanced filters</li>
|
||||
<li class="mb-2">• Search history</li>
|
||||
<li class="mb-2">• Saved searches</li>
|
||||
</ul>
|
||||
</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">Organization Features</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Folder hierarchy</li>
|
||||
<li class="mb-2">• File tagging</li>
|
||||
<li class="mb-2">• Starred files</li>
|
||||
<li class="mb-2">• Recent files</li>
|
||||
<li class="mb-2">• File categories</li>
|
||||
<li class="mb-2">• Custom views</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Trash Management -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Trash Management</h5>
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-3">Trash Features</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Soft delete implementation</li>
|
||||
<li class="mb-2">• 30-day retention policy</li>
|
||||
<li class="mb-2">• Restore functionality</li>
|
||||
<li class="mb-2">• Permanent deletion</li>
|
||||
<li class="mb-2">• Bulk operations</li>
|
||||
<li class="mb-2">• Trash analytics</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-3">Cleanup Process</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Automated cleanup jobs</li>
|
||||
<li class="mb-2">• Manual cleanup options</li>
|
||||
<li class="mb-2">• Storage space recovery</li>
|
||||
<li class="mb-2">• Audit trail maintenance</li>
|
||||
<li class="mb-2">• Backup preservation</li>
|
||||
<li class="mb-2">• Compliance reporting</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Storage Management -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Storage Management</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">Storage Features</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Storage quota management</li>
|
||||
<li class="mb-2">• Usage analytics</li>
|
||||
<li class="mb-2">• Storage optimization</li>
|
||||
<li class="mb-2">• Compression support</li>
|
||||
<li class="mb-2">• Deduplication</li>
|
||||
<li class="mb-2">• Storage tiering</li>
|
||||
</ul>
|
||||
</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">Performance Optimization</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• CDN integration</li>
|
||||
<li class="mb-2">• Caching strategies</li>
|
||||
<li class="mb-2">• Load balancing</li>
|
||||
<li class="mb-2">• Database optimization</li>
|
||||
<li class="mb-2">• File indexing</li>
|
||||
<li class="mb-2">• Background processing</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="col-lg-4">
|
||||
<!-- File System Statistics -->
|
||||
<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);">File System Stats</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);">50+</div>
|
||||
<small class="text-muted">File Formats</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);">7</div>
|
||||
<small class="text-muted">Permission Levels</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);">30</div>
|
||||
<small class="text-muted">Days in Trash</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">Storage Limit</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- File Operations -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-3" style="color: var(--primary-color);">File Operations</h5>
|
||||
<div class="d-grid gap-2">
|
||||
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
||||
<i class="fas fa-upload me-2"></i>Upload Files
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
||||
<i class="fas fa-download me-2"></i>Download Files
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
||||
<i class="fas fa-edit me-2"></i>Rename Files
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
||||
<i class="fas fa-cut me-2"></i>Move Files
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
||||
<i class="fas fa-trash me-2"></i>Delete Files
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
||||
<i class="fas fa-star me-2"></i>Star Files
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- File Security -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-3" style="color: var(--primary-color);">File Security</h5>
|
||||
<div class="small">
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-shield-alt text-primary me-2"></i>
|
||||
<strong>Access Control</strong> - Granular permissions
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-lock text-primary me-2"></i>
|
||||
<strong>File Encryption</strong> - At rest & in transit
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-eye text-primary me-2"></i>
|
||||
<strong>Audit Logging</strong> - Complete file history
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-virus-slash text-primary me-2"></i>
|
||||
<strong>Virus Scanning</strong> - File validation
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-user-shield text-primary me-2"></i>
|
||||
<strong>User Authentication</strong> - Secure access
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-backup text-primary me-2"></i>
|
||||
<strong>Backup Protection</strong> - Data safety
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Performance Features -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-3" style="color: var(--primary-color);">Performance</h5>
|
||||
<div class="small">
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-tachometer-alt text-primary me-2"></i>
|
||||
<strong>Fast Upload</strong> - Chunked transfers
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-search text-primary me-2"></i>
|
||||
<strong>Quick Search</strong> - Indexed queries
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-compress text-primary me-2"></i>
|
||||
<strong>Compression</strong> - Storage optimization
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-cache text-primary me-2"></i>
|
||||
<strong>Caching</strong> - CDN integration
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-sync text-primary me-2"></i>
|
||||
<strong>Background Jobs</strong> - Async processing
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-database text-primary me-2"></i>
|
||||
<strong>Database Optimization</strong> - Query efficiency
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,433 @@
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<!-- Instances Overview -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-3">Multi-Tenant Instance Management</h5>
|
||||
<p class="text-muted lead">
|
||||
DocuPulse supports a sophisticated multi-tenant architecture where each tenant operates on a completely isolated
|
||||
instance. The master instance orchestrates the creation, management, and monitoring of tenant instances with
|
||||
automated deployment, health tracking, and resource management.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Instance Architecture -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Instance Architecture</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">Master Instance</h6>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li class="mb-2">• Central orchestration hub</li>
|
||||
<li class="mb-2">• Instance lifecycle management</li>
|
||||
<li class="mb-2">• Health monitoring & alerts</li>
|
||||
<li class="mb-2">• Resource allocation tracking</li>
|
||||
<li class="mb-2">• Automated deployment</li>
|
||||
<li class="mb-2">• Backup & recovery management</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">Tenant Instances</h6>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li class="mb-2">• Isolated data & storage</li>
|
||||
<li class="mb-2">• Independent user management</li>
|
||||
<li class="mb-2">• Custom configurations</li>
|
||||
<li class="mb-2">• Separate database instances</li>
|
||||
<li class="mb-2">• Unique domain/subdomain</li>
|
||||
<li class="mb-2">• Scalable resource limits</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Instance Management -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Instance Management</h5>
|
||||
|
||||
<!-- Instance Creation -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-white">
|
||||
<h6 class="mb-0" style="color: var(--primary-color);">
|
||||
<i class="fas fa-plus me-2"></i>Instance Creation Process
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">Creation Steps</h6>
|
||||
<ol class="small">
|
||||
<li class="mb-1">Validate instance requirements</li>
|
||||
<li class="mb-1">Generate unique identifiers</li>
|
||||
<li class="mb-1">Create Docker stack configuration</li>
|
||||
<li class="mb-1">Deploy via Portainer API</li>
|
||||
<li class="mb-1">Configure NGINX proxy</li>
|
||||
<li class="mb-1">Generate SSL certificates</li>
|
||||
<li class="mb-1">Initialize database</li>
|
||||
<li class="mb-1">Verify deployment health</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">Required Information</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-1">• Instance name (unique)</li>
|
||||
<li class="mb-1">• Company information</li>
|
||||
<li class="mb-1">• Domain/subdomain</li>
|
||||
<li class="mb-1">• Resource limits</li>
|
||||
<li class="mb-1">• Payment plan</li>
|
||||
<li class="mb-1">• Connection token</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Instance Operations -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-white">
|
||||
<h6 class="mb-0" style="color: var(--primary-color);">
|
||||
<i class="fas fa-cogs me-2"></i>Instance Operations
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">Lifecycle Operations</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-1">• Start/stop instances</li>
|
||||
<li class="mb-1">• Restart instances</li>
|
||||
<li class="mb-1">• Scale resources</li>
|
||||
<li class="mb-1">• Update configurations</li>
|
||||
<li class="mb-1">• Backup instances</li>
|
||||
<li class="mb-1">• Restore instances</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">Administrative Operations</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-1">• Monitor health status</li>
|
||||
<li class="mb-1">• View resource usage</li>
|
||||
<li class="mb-1">• Access logs</li>
|
||||
<li class="mb-1">• Manage users</li>
|
||||
<li class="mb-1">• Configure settings</li>
|
||||
<li class="mb-1">• Delete instances</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Infrastructure Integration -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Infrastructure Integration</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">Portainer Integration</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Docker stack deployment</li>
|
||||
<li class="mb-2">• Container management</li>
|
||||
<li class="mb-2">• Resource monitoring</li>
|
||||
<li class="mb-2">• Log access</li>
|
||||
<li class="mb-2">• Health checks</li>
|
||||
<li class="mb-2">• Automated scaling</li>
|
||||
</ul>
|
||||
</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">NGINX Proxy Manager</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Reverse proxy configuration</li>
|
||||
<li class="mb-2">• SSL certificate management</li>
|
||||
<li class="mb-2">• Domain routing</li>
|
||||
<li class="mb-2">• Load balancing</li>
|
||||
<li class="mb-2">• Security headers</li>
|
||||
<li class="mb-2">• Rate limiting</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Instance Monitoring -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Instance Monitoring</h5>
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-3">Health Monitoring</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Application health checks</li>
|
||||
<li class="mb-2">• Database connectivity</li>
|
||||
<li class="mb-2">• Container status</li>
|
||||
<li class="mb-2">• Response time monitoring</li>
|
||||
<li class="mb-2">• Error rate tracking</li>
|
||||
<li class="mb-2">• Resource utilization</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-3">Alerting System</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Health status alerts</li>
|
||||
<li class="mb-2">• Resource threshold alerts</li>
|
||||
<li class="mb-2">• Error notifications</li>
|
||||
<li class="mb-2">• Performance degradation</li>
|
||||
<li class="mb-2">• Security alerts</li>
|
||||
<li class="mb-2">• Maintenance notifications</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Resource Management -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Resource Management</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">Resource Allocation</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• CPU limits per instance</li>
|
||||
<li class="mb-2">• Memory allocation</li>
|
||||
<li class="mb-2">• Storage quotas</li>
|
||||
<li class="mb-2">• Network bandwidth</li>
|
||||
<li class="mb-2">• Database connections</li>
|
||||
<li class="mb-2">• API rate limits</li>
|
||||
</ul>
|
||||
</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">Scaling Features</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Horizontal scaling</li>
|
||||
<li class="mb-2">• Vertical scaling</li>
|
||||
<li class="mb-2">• Auto-scaling policies</li>
|
||||
<li class="mb-2">• Load balancing</li>
|
||||
<li class="mb-2">• Resource optimization</li>
|
||||
<li class="mb-2">• Capacity planning</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Security & Isolation -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Security & Isolation</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">Data Isolation</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Separate databases</li>
|
||||
<li class="mb-2">• Isolated file storage</li>
|
||||
<li class="mb-2">• Network isolation</li>
|
||||
<li class="mb-2">• User data separation</li>
|
||||
<li class="mb-2">• Configuration isolation</li>
|
||||
<li class="mb-2">• Backup isolation</li>
|
||||
</ul>
|
||||
</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">Security Features</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• SSL/TLS encryption</li>
|
||||
<li class="mb-2">• Access control</li>
|
||||
<li class="mb-2">• Audit logging</li>
|
||||
<li class="mb-2">• Vulnerability scanning</li>
|
||||
<li class="mb-2">• Security updates</li>
|
||||
<li class="mb-2">• Compliance monitoring</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Backup & Recovery -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Backup & Recovery</h5>
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-3">Backup Strategy</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Automated daily backups</li>
|
||||
<li class="mb-2">• Database snapshots</li>
|
||||
<li class="mb-2">• File system backups</li>
|
||||
<li class="mb-2">• Configuration backups</li>
|
||||
<li class="mb-2">• Incremental backups</li>
|
||||
<li class="mb-2">• Cross-region replication</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-3">Recovery Procedures</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Point-in-time recovery</li>
|
||||
<li class="mb-2">• Disaster recovery</li>
|
||||
<li class="mb-2">• Instance restoration</li>
|
||||
<li class="mb-2">• Data validation</li>
|
||||
<li class="mb-2">• Testing procedures</li>
|
||||
<li class="mb-2">• Documentation</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="col-lg-4">
|
||||
<!-- Instance Statistics -->
|
||||
<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);">Instance Stats</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);">∞</div>
|
||||
<small class="text-muted">Tenant Instances</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);">1</div>
|
||||
<small class="text-muted">Master Instance</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);">60s</div>
|
||||
<small class="text-muted">Health Check</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);">24/7</div>
|
||||
<small class="text-muted">Monitoring</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Instance Operations -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-3" style="color: var(--primary-color);">Instance Operations</h5>
|
||||
<div class="d-grid gap-2">
|
||||
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
||||
<i class="fas fa-plus me-2"></i>Create Instance
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
||||
<i class="fas fa-play me-2"></i>Start Instance
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
||||
<i class="fas fa-stop me-2"></i>Stop Instance
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
||||
<i class="fas fa-sync me-2"></i>Restart Instance
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
||||
<i class="fas fa-expand-arrows-alt me-2"></i>Scale Instance
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
||||
<i class="fas fa-trash me-2"></i>Delete Instance
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Infrastructure 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);">Infrastructure</h5>
|
||||
<div class="small">
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-docker text-primary me-2"></i>
|
||||
<strong>Docker</strong> - Containerization
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-server text-primary me-2"></i>
|
||||
<strong>Portainer</strong> - Container management
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-shield-alt text-primary me-2"></i>
|
||||
<strong>NGINX Proxy</strong> - Load balancing
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-database text-primary me-2"></i>
|
||||
<strong>PostgreSQL</strong> - Database isolation
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-chart-line text-primary me-2"></i>
|
||||
<strong>Monitoring</strong> - Health tracking
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-backup text-primary me-2"></i>
|
||||
<strong>Backup</strong> - Data protection
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Instance Status -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-3" style="color: var(--primary-color);">Instance Status</h5>
|
||||
<div class="small">
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-circle text-success me-2"></i>
|
||||
<strong>Active</strong> - Running normally
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-circle text-warning me-2"></i>
|
||||
<strong>Starting</strong> - Initializing
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-circle text-danger me-2"></i>
|
||||
<strong>Stopped</strong> - Not running
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-circle text-info me-2"></i>
|
||||
<strong>Maintenance</strong> - Under maintenance
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-circle text-secondary me-2"></i>
|
||||
<strong>Error</strong> - Health check failed
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-circle text-dark me-2"></i>
|
||||
<strong>Unknown</strong> - Status unclear
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,465 @@
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<!-- Rooms Overview -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-3">Room-Based Workspace System</h5>
|
||||
<p class="text-muted lead">
|
||||
DocuPulse uses a room-based workspace system that provides isolated collaboration environments for teams and projects.
|
||||
Each room serves as a secure container for files, conversations, and team members with granular permission controls
|
||||
and comprehensive activity tracking.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Room Architecture -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Room Architecture</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">Room Structure</h6>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li class="mb-2">• Unique room identifier</li>
|
||||
<li class="mb-2">• Name & description</li>
|
||||
<li class="mb-2">• Creation metadata</li>
|
||||
<li class="mb-2">• Member management</li>
|
||||
<li class="mb-2">• File organization</li>
|
||||
<li class="mb-2">• Activity 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">Room Components</h6>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li class="mb-2">• File storage system</li>
|
||||
<li class="mb-2">• Conversation threads</li>
|
||||
<li class="mb-2">• Member permissions</li>
|
||||
<li class="mb-2">• Activity feed</li>
|
||||
<li class="mb-2">• Settings & configuration</li>
|
||||
<li class="mb-2">• Integration points</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Room Management -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Room Management</h5>
|
||||
|
||||
<!-- Room Creation -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-white">
|
||||
<h6 class="mb-0" style="color: var(--primary-color);">
|
||||
<i class="fas fa-plus me-2"></i>Room Creation
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">Creation Process</h6>
|
||||
<ol class="small">
|
||||
<li class="mb-1">User initiates room creation</li>
|
||||
<li class="mb-1">Room metadata validation</li>
|
||||
<li class="mb-1">Database record creation</li>
|
||||
<li class="mb-1">Creator permission assignment</li>
|
||||
<li class="mb-1">Default folder structure</li>
|
||||
<li class="mb-1">Event logging & notifications</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">Required Information</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-1">• Room name (unique)</li>
|
||||
<li class="mb-1">• Description (optional)</li>
|
||||
<li class="mb-1">• Creator user ID</li>
|
||||
<li class="mb-1">• Creation timestamp</li>
|
||||
<li class="mb-1">• Initial settings</li>
|
||||
<li class="mb-1">• Permission defaults</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Room Operations -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-white">
|
||||
<h6 class="mb-0" style="color: var(--primary-color);">
|
||||
<i class="fas fa-cogs me-2"></i>Room Operations
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">Basic Operations</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-1">• View room details</li>
|
||||
<li class="mb-1">• Edit room information</li>
|
||||
<li class="mb-1">• Archive room</li>
|
||||
<li class="mb-1">• Delete room</li>
|
||||
<li class="mb-1">• Export room data</li>
|
||||
<li class="mb-1">• Room analytics</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">Advanced Operations</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-1">• Clone room structure</li>
|
||||
<li class="mb-1">• Merge rooms</li>
|
||||
<li class="mb-1">• Room templates</li>
|
||||
<li class="mb-1">• Bulk operations</li>
|
||||
<li class="mb-1">• Room migration</li>
|
||||
<li class="mb-1">• Backup & restore</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Member Management -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Member Management</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">Member Operations</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Add new members</li>
|
||||
<li class="mb-2">• Remove members</li>
|
||||
<li class="mb-2">• Update permissions</li>
|
||||
<li class="mb-2">• Member invitations</li>
|
||||
<li class="mb-2">• Member roles</li>
|
||||
<li class="mb-2">• Member activity tracking</li>
|
||||
</ul>
|
||||
</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">Permission Management</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Individual permissions</li>
|
||||
<li class="mb-2">• Role-based permissions</li>
|
||||
<li class="mb-2">• Permission inheritance</li>
|
||||
<li class="mb-2">• Permission validation</li>
|
||||
<li class="mb-2">• Permission audit trail</li>
|
||||
<li class="mb-2">• Admin override capabilities</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Permission System -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Permission System</h5>
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-3">Permission Levels</h6>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Permission</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>can_view</code></td>
|
||||
<td>View room & files</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>can_download</code></td>
|
||||
<td>Download files</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>can_upload</code></td>
|
||||
<td>Upload files</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>can_delete</code></td>
|
||||
<td>Delete files</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>can_rename</code></td>
|
||||
<td>Rename files</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>can_move</code></td>
|
||||
<td>Move files</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>can_share</code></td>
|
||||
<td>Share files</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-3">Permission Features</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Granular control (7 levels)</li>
|
||||
<li class="mb-2">• User-specific permissions</li>
|
||||
<li class="mb-2">• Dynamic permission updates</li>
|
||||
<li class="mb-2">• Permission validation</li>
|
||||
<li class="mb-2">• Audit trail logging</li>
|
||||
<li class="mb-2">• Admin override capabilities</li>
|
||||
<li class="mb-2">• Permission inheritance</li>
|
||||
<li class="mb-2">• Role-based access control</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Room Features -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Room Features</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">File Management</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Hierarchical file structure</li>
|
||||
<li class="mb-2">• File upload & download</li>
|
||||
<li class="mb-2">• File versioning</li>
|
||||
<li class="mb-2">• File sharing</li>
|
||||
<li class="mb-2">• File search & filtering</li>
|
||||
<li class="mb-2">• File metadata tracking</li>
|
||||
</ul>
|
||||
</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">Collaboration Features</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Real-time messaging</li>
|
||||
<li class="mb-2">• File comments</li>
|
||||
<li class="mb-2">• Activity feed</li>
|
||||
<li class="mb-2">• Member notifications</li>
|
||||
<li class="mb-2">• Task management</li>
|
||||
<li class="mb-2">• Meeting scheduling</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Room Analytics -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Room Analytics</h5>
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-3">Usage Analytics</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Storage usage tracking</li>
|
||||
<li class="mb-2">• File activity metrics</li>
|
||||
<li class="mb-2">• Member activity logs</li>
|
||||
<li class="mb-2">• Access pattern analysis</li>
|
||||
<li class="mb-2">• Performance metrics</li>
|
||||
<li class="mb-2">• Growth trends</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-3">Reporting Features</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Activity reports</li>
|
||||
<li class="mb-2">• Storage reports</li>
|
||||
<li class="mb-2">• User reports</li>
|
||||
<li class="mb-2">• Permission reports</li>
|
||||
<li class="mb-2">• Export capabilities</li>
|
||||
<li class="mb-2">• Scheduled reports</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Room Security -->
|
||||
<div class="mb-5">
|
||||
<h5 style="color: var(--primary-color);" class="mb-4">Room Security</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">Access Control</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• User authentication</li>
|
||||
<li class="mb-2">• Role-based access</li>
|
||||
<li class="mb-2">• Permission validation</li>
|
||||
<li class="mb-2">• Session management</li>
|
||||
<li class="mb-2">• IP restrictions</li>
|
||||
<li class="mb-2">• Time-based access</li>
|
||||
</ul>
|
||||
</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">Data Protection</h6>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">• Data encryption</li>
|
||||
<li class="mb-2">• Secure file transfer</li>
|
||||
<li class="mb-2">• Audit logging</li>
|
||||
<li class="mb-2">• Backup protection</li>
|
||||
<li class="mb-2">• Compliance tracking</li>
|
||||
<li class="mb-2">• Data retention policies</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="col-lg-4">
|
||||
<!-- Room Statistics -->
|
||||
<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);">Room 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);">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">Members per Room</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);">∞</div>
|
||||
<small class="text-muted">Files per Room</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">Storage per Room</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Room Operations -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-3" style="color: var(--primary-color);">Room Operations</h5>
|
||||
<div class="d-grid gap-2">
|
||||
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
||||
<i class="fas fa-plus me-2"></i>Create Room
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
||||
<i class="fas fa-edit me-2"></i>Edit Room
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
||||
<i class="fas fa-users me-2"></i>Manage Members
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
||||
<i class="fas fa-shield-alt me-2"></i>Set Permissions
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
||||
<i class="fas fa-archive me-2"></i>Archive Room
|
||||
</div>
|
||||
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
||||
<i class="fas fa-trash me-2"></i>Delete Room
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Room Features -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-3" style="color: var(--primary-color);">Room Features</h5>
|
||||
<div class="small">
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-folder text-primary me-2"></i>
|
||||
<strong>File Management</strong> - Organized storage
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-comments text-primary me-2"></i>
|
||||
<strong>Messaging</strong> - Real-time chat
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-users text-primary me-2"></i>
|
||||
<strong>Collaboration</strong> - Team workspace
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-chart-line text-primary me-2"></i>
|
||||
<strong>Analytics</strong> - Usage tracking
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-bell text-primary me-2"></i>
|
||||
<strong>Notifications</strong> - Activity alerts
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-search text-primary me-2"></i>
|
||||
<strong>Search</strong> - Content discovery
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Room Templates -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-3" style="color: var(--primary-color);">Room Templates</h5>
|
||||
<div class="small">
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-briefcase text-primary me-2"></i>
|
||||
<strong>Project Room</strong> - Development workspace
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-users text-primary me-2"></i>
|
||||
<strong>Team Room</strong> - Department collaboration
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-file-alt text-primary me-2"></i>
|
||||
<strong>Document Room</strong> - File repository
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-calendar text-primary me-2"></i>
|
||||
<strong>Meeting Room</strong> - Event planning
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-cog text-primary me-2"></i>
|
||||
<strong>Custom Room</strong> - User-defined
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<i class="fas fa-clone text-primary me-2"></i>
|
||||
<strong>Clone Room</strong> - Template copy
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user