Start of dev pages

This commit is contained in:
2025-06-19 23:02:34 +02:00
parent 2f6de65e5c
commit e486b8a83d
17 changed files with 2704 additions and 1 deletions

View File

@@ -1730,3 +1730,13 @@ def init_routes(main_bp):
'name': mail.template.name 'name': mail.template.name
} if mail.template else None } if mail.template else None
}) })
@main_bp.route('/development-wiki')
@login_required
@require_password_change
def development_wiki():
if not os.environ.get('MASTER', 'false').lower() == 'true':
flash('This page is only available in master instances.', 'error')
return redirect(url_for('main.dashboard'))
return render_template('wiki/base.html')

View File

@@ -95,6 +95,11 @@
<i class="fas fa-server"></i> Instances <i class="fas fa-server"></i> Instances
</a> </a>
</li> </li>
<li class="nav-item">
<a class="nav-link {% if request.endpoint == 'main.development_wiki' %}active{% endif %}" href="{{ url_for('main.development_wiki') }}">
<i class="fas fa-book"></i> Development Wiki
</a>
</li>
{% endif %} {% endif %}
<li class="nav-item"> <li class="nav-item">
<a class="nav-link {% if request.endpoint == 'contacts.contacts_list' %}active{% endif %}" href="{{ url_for('contacts.contacts_list') }}"> <a class="nav-link {% if request.endpoint == 'contacts.contacts_list' %}active{% endif %}" href="{{ url_for('contacts.contacts_list') }}">

54
templates/wiki/README.md Normal file
View File

@@ -0,0 +1,54 @@
# Development Wiki Template Structure
This directory contains the modular template structure for the DocuPulse Development Wiki.
## Structure
```
templates/wiki/
├── base.html # Main wiki template with tab navigation
├── tabs/ # Individual tab content templates
│ ├── overview.html # System overview and features
│ ├── architecture.html # System architecture documentation
│ ├── models.html # Database models and schema
│ ├── authentication.html # Authentication & security features
│ ├── file_management.html # File management system
│ ├── rooms.html # Rooms & permissions system
│ ├── conversations.html # Conversations & messaging
│ ├── notifications.html # Notifications & events
│ ├── email.html # Email templates & SMTP
│ ├── instances.html # Instance management
│ ├── api.html # API & integration
│ └── deployment.html # Deployment & DevOps
└── README.md # This file
```
## How to Use
1. **Main Template**: `base.html` contains the overall structure, navigation tabs, and includes all tab content
2. **Tab Templates**: Each tab has its own template file in the `tabs/` directory
3. **Adding Content**: To add content to a specific tab, edit the corresponding template file
4. **Adding New Tabs**:
- Add the tab button to `base.html`
- Create a new template file in `templates/wiki/tabs/`
- Include it in the tab content section
## Benefits
- **Modularity**: Each tab is a separate file, making maintenance easier
- **Reusability**: Tab content can be reused in other contexts if needed
- **Organization**: Clear separation of concerns
- **Scalability**: Easy to add new tabs or modify existing ones
- **Collaboration**: Multiple developers can work on different tabs simultaneously
## Route Configuration
The wiki is accessed via the `/development-wiki` route in `routes/main.py`, which renders `templates/wiki/base.html`.
## Styling
All templates use the existing CSS variables and Bootstrap classes for consistent styling:
- Primary color: `var(--primary-color)`
- Secondary color: `var(--secondary-color)`
- Background colors: `var(--primary-bg-light)`, `var(--secondary-bg-light)`
- Opacity classes: `var(--primary-opacity-15)`, `var(--secondary-opacity-15)`

150
templates/wiki/base.html Normal file
View File

@@ -0,0 +1,150 @@
{% extends "common/base.html" %}
{% from "components/header.html" import header %}
{% block title %}Development Wiki - {{ super() }}{% endblock %}
{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/settings.css') }}?v={{ 'css/settings.css'|asset_version }}">
{% endblock %}
{% block content %}
{{ header(
title="Development Wiki",
description="Documentation and development resources for DocuPulse",
icon="fa-book"
) }}
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card-header bg-white">
<ul class="nav nav-tabs card-header-tabs" id="wikiTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab" aria-controls="overview" aria-selected="true">
<i class="fas fa-info-circle me-2"></i>Overview
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="architecture-tab" data-bs-toggle="tab" data-bs-target="#architecture" type="button" role="tab" aria-controls="architecture" aria-selected="false">
<i class="fas fa-sitemap me-2"></i>Architecture
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="models-tab" data-bs-toggle="tab" data-bs-target="#models" type="button" role="tab" aria-controls="models" aria-selected="false">
<i class="fas fa-database me-2"></i>Data Models
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="authentication-tab" data-bs-toggle="tab" data-bs-target="#authentication" type="button" role="tab" aria-controls="authentication" aria-selected="false">
<i class="fas fa-shield-alt me-2"></i>Authentication & Security
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="file-management-tab" data-bs-toggle="tab" data-bs-target="#file-management" type="button" role="tab" aria-controls="file-management" aria-selected="false">
<i class="fas fa-file-alt me-2"></i>File Management
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="rooms-tab" data-bs-toggle="tab" data-bs-target="#rooms" type="button" role="tab" aria-controls="rooms" aria-selected="false">
<i class="fas fa-door-open me-2"></i>Rooms & Permissions
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="conversations-tab" data-bs-toggle="tab" data-bs-target="#conversations" type="button" role="tab" aria-controls="conversations" aria-selected="false">
<i class="fas fa-comments me-2"></i>Conversations & Messaging
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="notifications-tab" data-bs-toggle="tab" data-bs-target="#notifications" type="button" role="tab" aria-controls="notifications" aria-selected="false">
<i class="fas fa-bell me-2"></i>Notifications & Events
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="email-tab" data-bs-toggle="tab" data-bs-target="#email" type="button" role="tab" aria-controls="email" aria-selected="false">
<i class="fas fa-envelope me-2"></i>Email System
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="instances-tab" data-bs-toggle="tab" data-bs-target="#instances" type="button" role="tab" aria-controls="instances" aria-selected="false">
<i class="fas fa-server me-2"></i>Instance Management
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="api-tab" data-bs-toggle="tab" data-bs-target="#api" type="button" role="tab" aria-controls="api" aria-selected="false">
<i class="fas fa-code me-2"></i>API & Integration
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="deployment-tab" data-bs-toggle="tab" data-bs-target="#deployment" type="button" role="tab" aria-controls="deployment" aria-selected="false">
<i class="fas fa-rocket me-2"></i>Deployment & DevOps
</button>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="wikiTabContent">
<!-- Overview Tab -->
<div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
{% include 'wiki/tabs/overview.html' %}
</div>
<!-- Architecture Tab -->
<div class="tab-pane fade" id="architecture" role="tabpanel" aria-labelledby="architecture-tab">
{% include 'wiki/tabs/architecture.html' %}
</div>
<!-- Data Models Tab -->
<div class="tab-pane fade" id="models" role="tabpanel" aria-labelledby="models-tab">
{% include 'wiki/tabs/models.html' %}
</div>
<!-- Authentication Tab -->
<div class="tab-pane fade" id="authentication" role="tabpanel" aria-labelledby="authentication-tab">
{% include 'wiki/tabs/authentication.html' %}
</div>
<!-- File Management Tab -->
<div class="tab-pane fade" id="file-management" role="tabpanel" aria-labelledby="file-management-tab">
{% include 'wiki/tabs/file_management.html' %}
</div>
<!-- Rooms Tab -->
<div class="tab-pane fade" id="rooms" role="tabpanel" aria-labelledby="rooms-tab">
{% include 'wiki/tabs/rooms.html' %}
</div>
<!-- Conversations Tab -->
<div class="tab-pane fade" id="conversations" role="tabpanel" aria-labelledby="conversations-tab">
{% include 'wiki/tabs/conversations.html' %}
</div>
<!-- Notifications Tab -->
<div class="tab-pane fade" id="notifications" role="tabpanel" aria-labelledby="notifications-tab">
{% include 'wiki/tabs/notifications.html' %}
</div>
<!-- Email Tab -->
<div class="tab-pane fade" id="email" role="tabpanel" aria-labelledby="email-tab">
{% include 'wiki/tabs/email.html' %}
</div>
<!-- Instances Tab -->
<div class="tab-pane fade" id="instances" role="tabpanel" aria-labelledby="instances-tab">
{% include 'wiki/tabs/instances.html' %}
</div>
<!-- API Tab -->
<div class="tab-pane fade" id="api" role="tabpanel" aria-labelledby="api-tab">
{% include 'wiki/tabs/api.html' %}
</div>
<!-- Deployment Tab -->
<div class="tab-pane fade" id="deployment" role="tabpanel" aria-labelledby="deployment-tab">
{% include 'wiki/tabs/deployment.html' %}
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

View File

View File

View File

@@ -0,0 +1,523 @@
<div class="row">
<div class="col-lg-8">
<!-- Overview Section -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-3">Authentication & Security Overview</h5>
<p class="text-muted lead">
DocuPulse implements a comprehensive multi-layered security system designed to protect user data,
ensure secure access control, and maintain detailed audit trails. The system combines traditional
web authentication with modern security practices including CSRF protection, secure session management,
granular permissions, and comprehensive event logging for compliance and security monitoring.
</p>
</div>
<!-- Authentication System -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-4">Authentication System</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">User Authentication</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2">• Secure password hashing with Werkzeug</li>
<li class="mb-2">• Session-based authentication with Flask-Login</li>
<li class="mb-2">• Remember me functionality</li>
<li class="mb-2">• Secure logout with session cleanup</li>
<li class="mb-2">• Failed login attempt logging</li>
<li class="mb-2">• IP address tracking for security</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">Password Management</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2">• Strong password requirements (8+ chars)</li>
<li class="mb-2">• Mixed case, numbers, and special chars</li>
<li class="mb-2">• Secure password reset via email</li>
<li class="mb-2">• Initial password setup tokens</li>
<li class="mb-2">• Password change enforcement</li>
<li class="mb-2">• Default password detection</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">• Role-based permissions (Admin/Manager/User)</li>
<li class="mb-2">• Granular room-level permissions (7 levels)</li>
<li class="mb-2">• API key authentication for integrations</li>
<li class="mb-2">• CSRF token protection on all forms</li>
<li class="mb-2">• Secure headers and content security policy</li>
<li class="mb-2">• Input validation and sanitization</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">Audit & Monitoring</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2">• Comprehensive event logging system</li>
<li class="mb-2">• User activity tracking and history</li>
<li class="mb-2">• Security event monitoring</li>
<li class="mb-2">• Failed login attempt logging</li>
<li class="mb-2">• File access audit trails</li>
<li class="mb-2">• Admin action logging</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Authentication Flow -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-4">Authentication Flow</h5>
<div class="card border-0 shadow-sm">
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<div class="d-flex align-items-start">
<div class="flex-shrink-0 me-3">
<div class="rounded-circle p-2" style="background-color: var(--primary-opacity-15);">
<i class="fas fa-sign-in-alt" style="color: var(--primary-color);"></i>
</div>
</div>
<div>
<h6 class="mb-1" style="color: var(--primary-color);">Login Process</h6>
<p class="text-muted small mb-0">User credentials are validated against the database, password is verified using secure hashing, and a session is created with appropriate permissions</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-start">
<div class="flex-shrink-0 me-3">
<div class="rounded-circle p-2" style="background-color: var(--primary-opacity-15);">
<i class="fas fa-shield-alt" style="color: var(--primary-color);"></i>
</div>
</div>
<div>
<h6 class="mb-1" style="color: var(--primary-color);">Permission Validation</h6>
<p class="text-muted small mb-0">Each request is validated against user roles and room permissions, ensuring users can only access resources they're authorized to use</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-start">
<div class="flex-shrink-0 me-3">
<div class="rounded-circle p-2" style="background-color: var(--primary-opacity-15);">
<i class="fas fa-history" style="color: var(--primary-color);"></i>
</div>
</div>
<div>
<h6 class="mb-1" style="color: var(--primary-color);">Session Management</h6>
<p class="text-muted small mb-0">Sessions are managed securely with automatic timeout, remember me functionality, and proper cleanup on logout</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-start">
<div class="flex-shrink-0 me-3">
<div class="rounded-circle p-2" style="background-color: var(--primary-opacity-15);">
<i class="fas fa-clipboard-list" style="color: var(--primary-color);"></i>
</div>
</div>
<div>
<h6 class="mb-1" style="color: var(--primary-color);">Audit Logging</h6>
<p class="text-muted small mb-0">All authentication events, security actions, and user activities are logged for compliance and security monitoring</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Password Security -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-4">Password Security</h5>
<!-- Password Requirements -->
<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-key me-2"></i>Password Requirements
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">Minimum Requirements</h6>
<ul class="list-unstyled small">
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Minimum 8 characters</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>At least one uppercase letter</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>At least one lowercase letter</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>At least one number</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>At least one special character</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Security Features</h6>
<ul class="list-unstyled small">
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Werkzeug secure hashing</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Default password detection</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Password change enforcement</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Secure reset tokens</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Token expiration (1 hour)</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Password Reset Flow -->
<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-unlock me-2"></i>Password Reset Process
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">Reset Request</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>1.</code> User requests password reset</li>
<li class="mb-1"><code>2.</code> System validates email address</li>
<li class="mb-1"><code>3.</code> Generates secure token (32 chars)</li>
<li class="mb-1"><code>4.</code> Creates reset token record</li>
<li class="mb-1"><code>5.</code> Sends email with reset link</li>
<li class="mb-1"><code>6.</code> Logs reset request event</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Reset Completion</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>1.</code> User clicks reset link</li>
<li class="mb-1"><code>2.</code> System validates token</li>
<li class="mb-1"><code>3.</code> Checks token expiration</li>
<li class="mb-1"><code>4.</code> Validates new password</li>
<li class="mb-1"><code>5.</code> Updates user password</li>
<li class="mb-1"><code>6.</code> Marks token as used</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>
<!-- Role-Based Access Control -->
<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-users-cog me-2"></i>Role-Based Access Control
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-4">
<h6 class="text-muted mb-2">Administrator</h6>
<ul class="list-unstyled small">
<li class="mb-1"><i class="fas fa-star text-warning me-2"></i>Full system access</li>
<li class="mb-1"><i class="fas fa-star text-warning me-2"></i>User management</li>
<li class="mb-1"><i class="fas fa-star text-warning me-2"></i>System settings</li>
<li class="mb-1"><i class="fas fa-star text-warning me-2"></i>All room permissions</li>
<li class="mb-1"><i class="fas fa-star text-warning me-2"></i>Audit log access</li>
</ul>
</div>
<div class="col-md-4">
<h6 class="text-muted mb-2">Manager</h6>
<ul class="list-unstyled small">
<li class="mb-1"><i class="fas fa-user-tie text-info me-2"></i>Room management</li>
<li class="mb-1"><i class="fas fa-user-tie text-info me-2"></i>Member management</li>
<li class="mb-1"><i class="fas fa-user-tie text-info me-2"></i>Permission assignment</li>
<li class="mb-1"><i class="fas fa-user-tie text-info me-2"></i>File operations</li>
<li class="mb-1"><i class="fas fa-user-tie text-info me-2"></i>Limited admin access</li>
</ul>
</div>
<div class="col-md-4">
<h6 class="text-muted mb-2">Standard User</h6>
<ul class="list-unstyled small">
<li class="mb-1"><i class="fas fa-user text-success me-2"></i>Basic file access</li>
<li class="mb-1"><i class="fas fa-user text-success me-2"></i>Room participation</li>
<li class="mb-1"><i class="fas fa-user text-success me-2"></i>Conversation access</li>
<li class="mb-1"><i class="fas fa-user text-success me-2"></i>Profile management</li>
<li class="mb-1"><i class="fas fa-user text-success me-2"></i>Permission-based actions</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Granular Room Permissions -->
<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>Granular Room Permissions
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">File Operations</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>can_view</code> - View files and folders</li>
<li class="mb-1"><code>can_download</code> - Download files</li>
<li class="mb-1"><code>can_upload</code> - Upload new files</li>
<li class="mb-1"><code>can_delete</code> - Delete files</li>
<li class="mb-1"><code>can_rename</code> - Rename files</li>
<li class="mb-1"><code>can_move</code> - Move files between folders</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Room Management</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>can_share</code> - Share files with others</li>
<li class="mb-1"><code>can_manage_members</code> - Add/remove members</li>
<li class="mb-1"><code>can_edit_room</code> - Modify room settings</li>
<li class="mb-1"><code>can_delete_room</code> - Delete entire room</li>
<li class="mb-1"><code>can_view_activity</code> - View room activity</li>
<li class="mb-1"><code>can_export_data</code> - Export room data</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Security Features -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-4">Security Features</h5>
<!-- CSRF Protection -->
<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-shield-alt me-2"></i>CSRF Protection
</h6>
</div>
<div class="card-body">
<p class="text-muted mb-3">Cross-Site Request Forgery protection is implemented across all forms and API endpoints.</p>
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">Implementation</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>Flask-WTF</code> - CSRF protection library</li>
<li class="mb-1"><code>csrf_token</code> - Hidden form fields</li>
<li class="mb-1"><code>generate_csrf()</code> - Token generation</li>
<li class="mb-1"><code>validate_csrf()</code> - Token validation</li>
<li class="mb-1"><code>exempt_routes</code> - API exemptions</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Security Benefits</h6>
<ul class="list-unstyled small">
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Prevents unauthorized actions</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Protects against malicious sites</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Session-based token validation</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Automatic token rotation</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Secure token storage</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Session Security -->
<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-clock me-2"></i>Session Management
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">Session Features</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>Flask-Login</code> - Session management</li>
<li class="mb-1"><code>remember_me</code> - Persistent sessions</li>
<li class="mb-1"><code>session_timeout</code> - Automatic expiration</li>
<li class="mb-1"><code>secure_logout</code> - Session cleanup</li>
<li class="mb-1"><code>session_regeneration</code> - Security rotation</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Security Measures</h6>
<ul class="list-unstyled small">
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Secure session cookies</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>HTTPS enforcement</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Session fixation protection</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Concurrent session limits</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>IP address tracking</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Audit Logging -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-4">Audit Logging System</h5>
<!-- Event Types -->
<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-clipboard-list me-2"></i>Event Types
</h6>
</div>
<div class="card-body">
<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"><code>user_login</code> - Login attempts</li>
<li class="mb-1"><code>user_logout</code> - Logout events</li>
<li class="mb-1"><code>user_create</code> - Account creation</li>
<li class="mb-1"><code>user_update</code> - Profile changes</li>
<li class="mb-1"><code>user_delete</code> - Account deletion</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Security Events</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>password_change</code> - Password updates</li>
<li class="mb-1"><code>password_reset</code> - Reset attempts</li>
<li class="mb-1"><code>failed_login</code> - Failed attempts</li>
<li class="mb-1"><code>permission_change</code> - Access updates</li>
<li class="mb-1"><code>admin_action</code> - Administrative actions</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Logging Details -->
<div class="card border-0 shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0" style="color: var(--primary-color);">
<i class="fas fa-database me-2"></i>Logging Details
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">Captured Information</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>event_type</code> - Type of event</li>
<li class="mb-1"><code>user_id</code> - User identifier</li>
<li class="mb-1"><code>timestamp</code> - Event time</li>
<li class="mb-1"><code>ip_address</code> - Client IP</li>
<li class="mb-1"><code>user_agent</code> - Browser info</li>
<li class="mb-1"><code>details</code> - Event specifics</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Retention & Access</h6>
<ul class="list-unstyled small">
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Permanent storage</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Admin-only access</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Search and filter</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Export capabilities</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Compliance ready</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<!-- Quick Reference -->
<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-info-circle me-2"></i>Quick Reference
</h6>
</div>
<div class="card-body">
<div class="mb-3">
<h6 class="text-muted mb-2">User Roles</h6>
<div class="d-flex justify-content-between mb-1">
<span class="small">Admin</span>
<span class="badge bg-danger">Full Access</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="small">Manager</span>
<span class="badge bg-warning">Room & Conversation Management</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="small">User</span>
<span class="badge bg-info">Basic Access</span>
</div>
</div>
<div class="mb-3">
<h6 class="text-muted mb-2">Room Permissions</h6>
<div class="d-flex justify-content-between mb-1">
<span class="small">View</span>
<span class="badge bg-success"></span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="small">Download</span>
<span class="badge bg-warning">Optional</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="small">Upload</span>
<span class="badge bg-warning">Optional</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="small">Delete</span>
<span class="badge bg-danger">Restricted</span>
</div>
</div>
</div>
</div>
<!-- Security Configuration -->
<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>Security Configuration
</h6>
</div>
<div class="card-body">
<div class="mb-3">
<h6 class="text-muted mb-2">Framework</h6>
<div class="p-2" style="background-color: var(--primary-bg-light); border-radius: 6px;">
<div class="fw-bold" style="color: var(--primary-color);">Flask-Login</div>
<small class="text-muted">Session management</small>
</div>
</div>
<div class="mb-3">
<h6 class="text-muted mb-2">CSRF Protection</h6>
<div class="p-2" style="background-color: var(--secondary-bg-light); border-radius: 6px;">
<div class="fw-bold" style="color: var(--secondary-color);">Flask-WTF</div>
<small class="text-muted">Cross-site request forgery</small>
</div>
</div>
<div class="mb-3">
<h6 class="text-muted mb-2">Password Hashing</h6>
<div class="p-2" style="background-color: var(--primary-bg-light); border-radius: 6px;">
<div class="fw-bold" style="color: var(--primary-color);">Werkzeug</div>
<small class="text-muted">Secure password hashing</small>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,525 @@
<div class="row">
<div class="col-lg-8">
<!-- Overview Section -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-3">Conversations & Messaging Overview</h5>
<p class="text-muted lead">
DocuPulse features a sophisticated real-time messaging system that enables seamless communication
between team members. The system combines traditional chat functionality with advanced features
including file attachments, member management, notifications, and comprehensive audit logging.
Built with security and collaboration in mind, it supports both text-based conversations and
rich media sharing.
</p>
</div>
<!-- Core Features -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-4">Core Messaging Features</h5>
<div class="row g-4">
<div class="col-md-6">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body">
<h6 style="color: var(--primary-color);" class="card-title mb-3">Real-Time Communication</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2">• Instant message delivery with polling</li>
<li class="mb-2">• Real-time message updates</li>
<li class="mb-2">• Message status tracking</li>
<li class="mb-2">• Typing indicators (planned)</li>
<li class="mb-2">• Message threading support</li>
<li class="mb-2">• Conversation history</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">File Attachments</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2">• Multi-format file support (50+ types)</li>
<li class="mb-2">• Secure file upload (10MB limit)</li>
<li class="mb-2">• File preview and download</li>
<li class="mb-2">• Attachment size tracking</li>
<li class="mb-2">• File type validation</li>
<li class="mb-2">• Secure file storage</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">Member Management</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2">• Role-based conversation access</li>
<li class="mb-2">• Member invitation system</li>
<li class="mb-2">• Permission-based management</li>
<li class="mb-2">• Member removal capabilities</li>
<li class="mb-2">• Conversation ownership</li>
<li class="mb-2">• Admin-only controls</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">Notifications & Alerts</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2">• Real-time notification system</li>
<li class="mb-2">• Email notifications</li>
<li class="mb-2">• Message preview in alerts</li>
<li class="mb-2">• Attachment notifications</li>
<li class="mb-2">• Member change alerts</li>
<li class="mb-2">• Unread message tracking</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Conversation Management -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-4">Conversation Management</h5>
<!-- Conversation 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-circle me-2"></i>Conversation Creation
</h6>
</div>
<div class="card-body">
<p class="text-muted mb-3">Conversations can be created by administrators and managers with full member management capabilities.</p>
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">Creation Process</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>1.</code> Admin/Manager initiates creation</li>
<li class="mb-1"><code>2.</code> Sets conversation name and description</li>
<li class="mb-1"><code>3.</code> Selects initial members</li>
<li class="mb-1"><code>4.</code> System validates permissions</li>
<li class="mb-1"><code>5.</code> Creates conversation record</li>
<li class="mb-1"><code>6.</code> Sends member invitations</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Required Fields</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>name</code> - Conversation title</li>
<li class="mb-1"><code>description</code> - Optional description</li>
<li class="mb-1"><code>created_by</code> - Creator user ID</li>
<li class="mb-1"><code>members</code> - Initial member list</li>
<li class="mb-1"><code>created_at</code> - Creation timestamp</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Member 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-users me-2"></i>Member Management
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">Adding Members</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>conversation_invite</code> - Invitation notification</li>
<li class="mb-1"><code>member_add</code> - Add to conversation</li>
<li class="mb-1"><code>permission_check</code> - Validate access</li>
<li class="mb-1"><code>notification_send</code> - Alert new member</li>
<li class="mb-1"><code>event_log</code> - Log member addition</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Removing Members</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>creator_protection</code> - Prevent creator removal</li>
<li class="mb-1"><code>member_remove</code> - Remove from conversation</li>
<li class="mb-1"><code>notification_send</code> - Alert removed member</li>
<li class="mb-1"><code>event_log</code> - Log member removal</li>
<li class="mb-1"><code>access_revoke</code> - Revoke conversation access</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Real-Time Messaging -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-4">Real-Time Messaging System</h5>
<!-- Message Flow -->
<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>Message Flow
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">Message Sending</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>1.</code> User composes message</li>
<li class="mb-1"><code>2.</code> Attaches files (optional)</li>
<li class="mb-1"><code>3.</code> Validates permissions</li>
<li class="mb-1"><code>4.</code> Saves message to database</li>
<li class="mb-1"><code>5.</code> Processes attachments</li>
<li class="mb-1"><code>6.</code> Sends notifications</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Message Receiving</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>1.</code> Polling checks for new messages</li>
<li class="mb-1"><code>2.</code> Fetches messages since last ID</li>
<li class="mb-1"><code>3.</code> Validates user access</li>
<li class="mb-1"><code>4.</code> Processes message data</li>
<li class="mb-1"><code>5.</code> Updates chat interface</li>
<li class="mb-1"><code>6.</code> Triggers UI events</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Polling System -->
<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-sync me-2"></i>Real-Time Polling
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">Polling Configuration</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>interval</code> - 3 seconds between polls</li>
<li class="mb-1"><code>last_message_id</code> - Track last received</li>
<li class="mb-1"><code>retry_attempts</code> - 5 failed attempts</li>
<li class="mb-1"><code>auto_reconnect</code> - Restart on failure</li>
<li class="mb-1"><code>state_management</code> - Track connection</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Error Handling</h6>
<ul class="list-unstyled small">
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Network failure recovery</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Automatic reconnection</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Duplicate message prevention</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>State synchronization</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Graceful degradation</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- File Attachments -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-4">File Attachment System</h5>
<!-- Supported File Types -->
<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-paperclip me-2"></i>Supported File Types
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">Document Types</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>PDF</code> - Portable Document Format</li>
<li class="mb-1"><code>DOCX/DOC</code> - Microsoft Word</li>
<li class="mb-1"><code>XLSX/XLS</code> - Microsoft Excel</li>
<li class="mb-1"><code>PPTX/PPT</code> - Microsoft PowerPoint</li>
<li class="mb-1"><code>TXT/RTF</code> - Text documents</li>
<li class="mb-1"><code>CSV/MD</code> - Data and markdown</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Media Types</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>JPG/PNG/GIF</code> - Image files</li>
<li class="mb-1"><code>MP3/WAV/OGG</code> - Audio files</li>
<li class="mb-1"><code>MP4/AVI/MOV</code> - Video files</li>
<li class="mb-1"><code>ZIP/RAR/7Z</code> - Archive files</li>
<li class="mb-1"><code>PY/JS/HTML</code> - Code files</li>
<li class="mb-1"><code>DWG/AI/PSD</code> - Design files</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Attachment Security -->
<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-shield-alt me-2"></i>Attachment Security
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">Upload Security</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>file_validation</code> - Type and size checks</li>
<li class="mb-1"><code>secure_filename</code> - Sanitize filenames</li>
<li class="mb-1"><code>size_limit</code> - 10MB maximum</li>
<li class="mb-1"><code>virus_scan</code> - Malware detection</li>
<li class="mb-1"><code>access_control</code> - Permission validation</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Download Security</h6>
<ul class="list-unstyled small">
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Member-only access</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Secure file serving</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Download tracking</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Audit logging</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>File integrity checks</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>
<!-- Notification Types -->
<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-bell me-2"></i>Notification Types
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">Conversation Events</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>conversation_invite</code> - Member invitation</li>
<li class="mb-1"><code>conversation_invite_removed</code> - Member removal</li>
<li class="mb-1"><code>conversation_message</code> - New message</li>
<li class="mb-1"><code>conversation_created</code> - New conversation</li>
<li class="mb-1"><code>conversation_updated</code> - Settings changed</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Message Events</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>message_create</code> - Message sent</li>
<li class="mb-1"><code>message_attachment</code> - File attached</li>
<li class="mb-1"><code>message_mention</code> - User mentioned</li>
<li class="mb-1"><code>message_reply</code> - Message replied to</li>
<li class="mb-1"><code>message_edit</code> - Message edited</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Notification Delivery -->
<div class="card border-0 shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0" style="color: var(--primary-color);">
<i class="fas fa-envelope me-2"></i>Notification Delivery
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">In-App Notifications</h6>
<ul class="list-unstyled small">
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Real-time updates</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Unread count tracking</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Notification center</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Message previews</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Mark as read</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Email Notifications</h6>
<ul class="list-unstyled small">
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>SMTP integration</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>HTML email templates</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Message content preview</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Direct conversation links</li>
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Unsubscribe options</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<!-- Quick Reference -->
<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-info-circle me-2"></i>Quick Reference
</h6>
</div>
<div class="card-body">
<div class="mb-3">
<h6 class="text-muted mb-2">Conversation Roles</h6>
<div class="d-flex justify-content-between mb-1">
<span class="small">Creator</span>
<span class="badge bg-primary">Full Control</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="small">Admin</span>
<span class="badge bg-danger">Manage All</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="small">Manager</span>
<span class="badge bg-warning">Manage Members</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="small">Member</span>
<span class="badge bg-success">Send Messages</span>
</div>
</div>
<div class="mb-3">
<h6 class="text-muted mb-2">File Limits</h6>
<div class="d-flex justify-content-between mb-1">
<span class="small">Max File Size</span>
<span class="badge bg-info">10MB</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="small">Supported Types</span>
<span class="badge bg-success">50+</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="small">Polling Interval</span>
<span class="badge bg-warning">3s</span>
</div>
</div>
</div>
</div>
<!-- Message Features -->
<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-comment-dots me-2"></i>Message Features
</h6>
</div>
<div class="card-body">
<ul class="list-unstyled mb-0">
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Real-time message delivery
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
File attachment support
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Message threading
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Conversation history
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Message search
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Read receipts
</li>
</ul>
</div>
</div>
<!-- Security Features -->
<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-shield-alt me-2"></i>Security Features
</h6>
</div>
<div class="card-body">
<ul class="list-unstyled mb-0">
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Member-only access control
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
File type validation
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Secure file storage
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Message encryption
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Audit logging
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
CSRF protection
</li>
</ul>
</div>
</div>
<!-- Technical Stack -->
<div class="card border-0 shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0" style="color: var(--primary-color);">
<i class="fas fa-code me-2"></i>Technical Stack
</h6>
</div>
<div class="card-body">
<div class="mb-3">
<h6 class="text-muted mb-2">Backend</h6>
<div class="p-2" style="background-color: var(--primary-bg-light); border-radius: 6px;">
<div class="fw-bold" style="color: var(--primary-color);">Flask + SQLAlchemy</div>
<small class="text-muted">Message processing</small>
</div>
</div>
<div class="mb-3">
<h6 class="text-muted mb-2">Frontend</h6>
<div class="p-2" style="background-color: var(--secondary-bg-light); border-radius: 6px;">
<div class="fw-bold" style="color: var(--secondary-color);">JavaScript + jQuery</div>
<small class="text-muted">Real-time updates</small>
</div>
</div>
<div class="mb-3">
<h6 class="text-muted mb-2">Database</h6>
<div class="p-2" style="background-color: var(--primary-bg-light); border-radius: 6px;">
<div class="fw-bold" style="color: var(--primary-color);">PostgreSQL</div>
<small class="text-muted">Message storage</small>
</div>
</div>
</div>
</div>
</div>
</div>

View File

View File

View File

View File

View File

@@ -0,0 +1,434 @@
<div class="row">
<div class="col-lg-8">
<!-- Overview Section -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-3">Data Models Overview</h5>
<p class="text-muted lead">
DocuPulse uses SQLAlchemy ORM with PostgreSQL to manage a comprehensive set of data models that support
multi-tenant document management, user collaboration, and system administration. The database schema
is designed for scalability, security, and efficient querying with proper relationships and constraints.
</p>
</div>
<!-- Core Models -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-4">Core Models</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">User Management</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2"><strong>User:</strong> Core user accounts with roles</li>
<li class="mb-2"><strong>PasswordResetToken:</strong> Secure password recovery</li>
<li class="mb-2"><strong>PasswordSetupToken:</strong> Initial account setup</li>
<li class="mb-2"><strong>ManagementAPIKey:</strong> API authentication</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">Workspace & Collaboration</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2"><strong>Room:</strong> Document workspaces</li>
<li class="mb-2"><strong>RoomMemberPermission:</strong> Granular access control</li>
<li class="mb-2"><strong>Conversation:</strong> Real-time messaging</li>
<li class="mb-2"><strong>Message:</strong> Individual chat messages</li>
<li class="mb-2"><strong>MessageAttachment:</strong> File attachments</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">File Management</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2"><strong>RoomFile:</strong> Files and folders in rooms</li>
<li class="mb-2"><strong>UserStarredFile:</strong> User favorites system</li>
<li class="mb-2"><strong>TrashedFile:</strong> Deleted file 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">System & Administration</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2"><strong>SiteSettings:</strong> Company configuration</li>
<li class="mb-2"><strong>DocuPulseSettings:</strong> System limits</li>
<li class="mb-2"><strong>KeyValueSettings:</strong> Dynamic configuration</li>
<li class="mb-2"><strong>Event:</strong> Audit logging system</li>
<li class="mb-2"><strong>Notif:</strong> Notification system</li>
<li class="mb-2"><strong>EmailTemplate:</strong> Email templates</li>
<li class="mb-2"><strong>Mail:</strong> Email tracking</li>
<li class="mb-2"><strong>Instance:</strong> Multi-tenant management</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Detailed Model Documentation -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-4">Model Details</h5>
<!-- User Model -->
<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 me-2"></i>User Model
</h6>
</div>
<div class="card-body">
<p class="text-muted mb-3">Core user account with authentication, roles, and profile information.</p>
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">Primary Fields</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>id</code> - Primary key</li>
<li class="mb-1"><code>username</code> - Unique username</li>
<li class="mb-1"><code>email</code> - Unique email address</li>
<li class="mb-1"><code>password_hash</code> - Encrypted password</li>
<li class="mb-1"><code>is_admin</code> - Administrator role</li>
<li class="mb-1"><code>is_manager</code> - Manager role</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Profile Fields</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>last_name</code> - User's last name</li>
<li class="mb-1"><code>phone</code> - Contact phone</li>
<li class="mb-1"><code>company</code> - Company name</li>
<li class="mb-1"><code>position</code> - Job position</li>
<li class="mb-1"><code>profile_picture</code> - Avatar image</li>
<li class="mb-1"><code>preferred_view</code> - UI preference</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Room Model -->
<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 Model
</h6>
</div>
<div class="card-body">
<p class="text-muted mb-3">Document workspace with member management and file organization.</p>
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">Core Fields</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>id</code> - Primary key</li>
<li class="mb-1"><code>name</code> - Room name</li>
<li class="mb-1"><code>description</code> - Room description</li>
<li class="mb-1"><code>created_at</code> - Creation timestamp</li>
<li class="mb-1"><code>created_by</code> - Creator user ID</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Relationships</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>creator</code> - Room creator (User)</li>
<li class="mb-1"><code>members</code> - Room members (User)</li>
<li class="mb-1"><code>member_permissions</code> - Member permissions</li>
<li class="mb-1"><code>files</code> - Room files (RoomFile)</li>
</ul>
</div>
</div>
</div>
</div>
<!-- RoomFile Model -->
<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 me-2"></i>RoomFile Model
</h6>
</div>
<div class="card-body">
<p class="text-muted mb-3">Files and folders stored within rooms with metadata and access tracking.</p>
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">File Information</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>id</code> - Primary key</li>
<li class="mb-1"><code>name</code> - File/folder name</li>
<li class="mb-1"><code>path</code> - File path</li>
<li class="mb-1"><code>type</code> - 'file' or 'folder'</li>
<li class="mb-1"><code>size</code> - File size in bytes</li>
<li class="mb-1"><code>modified</code> - Last modified timestamp</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Access Control</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>room_id</code> - Parent room</li>
<li class="mb-1"><code>uploaded_by</code> - Uploader user ID</li>
<li class="mb-1"><code>uploaded_at</code> - Upload timestamp</li>
<li class="mb-1"><code>deleted</code> - Deletion status</li>
<li class="mb-1"><code>deleted_by</code> - Deleter user ID</li>
<li class="mb-1"><code>deleted_at</code> - Deletion timestamp</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Conversation Model -->
<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 Model
</h6>
</div>
<div class="card-body">
<p class="text-muted mb-3">Real-time messaging conversations with member management.</p>
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">Conversation Details</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>id</code> - Primary key</li>
<li class="mb-1"><code>name</code> - Conversation name</li>
<li class="mb-1"><code>description</code> - Conversation description</li>
<li class="mb-1"><code>created_at</code> - Creation timestamp</li>
<li class="mb-1"><code>created_by</code> - Creator user ID</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Relationships</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>creator</code> - Conversation creator</li>
<li class="mb-1"><code>members</code> - Conversation members</li>
<li class="mb-1"><code>messages</code> - Conversation messages</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Settings Models -->
<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>Settings Models
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">SiteSettings</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>primary_color</code> - Brand primary color</li>
<li class="mb-1"><code>secondary_color</code> - Brand secondary color</li>
<li class="mb-1"><code>company_name</code> - Company name</li>
<li class="mb-1"><code>company_logo</code> - Logo filename</li>
<li class="mb-1"><code>company_website</code> - Company website</li>
<li class="mb-1"><code>company_email</code> - Contact email</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">DocuPulseSettings</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>max_rooms</code> - Maximum rooms per instance</li>
<li class="mb-1"><code>max_conversations</code> - Max conversations</li>
<li class="mb-1"><code>max_storage</code> - Storage limit in bytes</li>
<li class="mb-1"><code>updated_at</code> - Last update timestamp</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Database Relationships -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-4">Database Relationships</h5>
<div class="card border-0 shadow-sm">
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<div class="d-flex align-items-start">
<div class="flex-shrink-0 me-3">
<div class="rounded-circle p-2" style="background-color: var(--primary-opacity-15);">
<i class="fas fa-users" style="color: var(--primary-color);"></i>
</div>
</div>
<div>
<h6 class="mb-1" style="color: var(--primary-color);">User Relationships</h6>
<p class="text-muted small mb-0">Users can create rooms, upload files, send messages, and participate in conversations with proper permission controls</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-start">
<div class="flex-shrink-0 me-3">
<div class="rounded-circle p-2" style="background-color: var(--primary-opacity-15);">
<i class="fas fa-folder-tree" style="color: var(--primary-color);"></i>
</div>
</div>
<div>
<h6 class="mb-1" style="color: var(--primary-color);">File Hierarchy</h6>
<p class="text-muted small mb-0">Files are organized in rooms with folder structures, starring capabilities, and trash management for deleted items</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-start">
<div class="flex-shrink-0 me-3">
<div class="rounded-circle p-2" style="background-color: var(--primary-opacity-15);">
<i class="fas fa-shield-alt" style="color: var(--primary-color);"></i>
</div>
</div>
<div>
<h6 class="mb-1" style="color: var(--primary-color);">Permission System</h6>
<p class="text-muted small mb-0">Granular permissions control access to rooms, files, and conversations with role-based and user-specific settings</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-start">
<div class="flex-shrink-0 me-3">
<div class="rounded-circle p-2" style="background-color: var(--primary-opacity-15);">
<i class="fas fa-history" style="color: var(--primary-color);"></i>
</div>
</div>
<div>
<h6 class="mb-1" style="color: var(--primary-color);">Audit Trail</h6>
<p class="text-muted small mb-0">Comprehensive event logging tracks all user actions, file operations, and system changes for security and compliance</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<!-- Quick Reference -->
<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-info-circle me-2"></i>Quick Reference
</h6>
</div>
<div class="card-body">
<div class="mb-3">
<h6 class="text-muted mb-2">Model Categories</h6>
<div class="d-flex justify-content-between mb-1">
<span class="small">User Management</span>
<span class="badge bg-primary">4 Models</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="small">File Management</span>
<span class="badge bg-success">3 Models</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="small">Communication</span>
<span class="badge bg-info">3 Models</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="small">System Settings</span>
<span class="badge bg-warning">8 Models</span>
</div>
</div>
<div class="mb-3">
<h6 class="text-muted mb-2">Key Features</h6>
<div class="d-flex justify-content-between mb-1">
<span class="small">Multi-tenant</span>
<span class="badge bg-success"></span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="small">Role-based access</span>
<span class="badge bg-success"></span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="small">Audit logging</span>
<span class="badge bg-success"></span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="small">File versioning</span>
<span class="badge bg-success"></span>
</div>
</div>
</div>
</div>
<!-- Database Schema -->
<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-database me-2"></i>Database Schema
</h6>
</div>
<div class="card-body">
<div class="mb-3">
<h6 class="text-muted mb-2">Database Type</h6>
<div class="p-2" style="background-color: var(--primary-bg-light); border-radius: 6px;">
<div class="fw-bold" style="color: var(--primary-color);">PostgreSQL</div>
<small class="text-muted">Primary database</small>
</div>
</div>
<div class="mb-3">
<h6 class="text-muted mb-2">ORM Framework</h6>
<div class="p-2" style="background-color: var(--secondary-bg-light); border-radius: 6px;">
<div class="fw-bold" style="color: var(--secondary-color);">SQLAlchemy</div>
<small class="text-muted">Object-relational mapping</small>
</div>
</div>
<div class="mb-3">
<h6 class="text-muted mb-2">Migration Tool</h6>
<div class="p-2" style="background-color: var(--primary-bg-light); border-radius: 6px;">
<div class="fw-bold" style="color: var(--primary-color);">Alembic</div>
<small class="text-muted">Schema versioning</small>
</div>
</div>
</div>
</div>
<!-- Model Best Practices -->
<div class="card border-0 shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0" style="color: var(--primary-color);">
<i class="fas fa-lightbulb me-2"></i>Model Best Practices
</h6>
</div>
<div class="card-body">
<ul class="list-unstyled mb-0">
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Use proper foreign key constraints
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Implement cascade delete where appropriate
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Add indexes for frequently queried fields
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Use JSON fields for flexible data storage
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Include audit timestamps on all models
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Implement soft deletes for data recovery
</li>
</ul>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,540 @@
<div class="row">
<div class="col-lg-8">
<!-- Overview Section -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-3">Notifications & Events Overview</h5>
<p class="text-muted lead">
DocuPulse features a comprehensive notification and event logging system that provides real-time
alerts, email notifications, and detailed audit trails. The system combines in-app notifications
with email delivery, offering users multiple ways to stay informed about important activities
and system events. Built with security and compliance in mind, it provides complete visibility
into user actions and system activities.
</p>
</div>
<!-- Notification System -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-4">Notification System</h5>
<!-- Notification Types -->
<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-bell me-2"></i>Notification Types
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">User Management</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>account_created</code> - New user account created</li>
<li class="mb-1"><code>password_reset</code> - Password reset requested</li>
<li class="mb-1"><code>account_deleted</code> - User account deleted</li>
<li class="mb-1"><code>account_updated</code> - User profile updated</li>
<li class="mb-1"><code>password_changed</code> - Password successfully changed</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Collaboration</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>room_invite</code> - Invited to join room</li>
<li class="mb-1"><code>room_invite_removed</code> - Removed from room</li>
<li class="mb-1"><code>conversation_invite</code> - Invited to conversation</li>
<li class="mb-1"><code>conversation_invite_removed</code> - Removed from conversation</li>
<li class="mb-1"><code>conversation_message</code> - New message received</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Notification 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-circle me-2"></i>Notification 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>
<ul class="list-unstyled small">
<li class="mb-1"><code>1.</code> Event triggers notification</li>
<li class="mb-1"><code>2.</code> System validates notification type</li>
<li class="mb-1"><code>3.</code> Creates notification record</li>
<li class="mb-1"><code>4.</code> Generates email template</li>
<li class="mb-1"><code>5.</code> Sends email via SMTP</li>
<li class="mb-1"><code>6.</code> Updates notification status</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Required Parameters</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>notif_type</code> - Type of notification</li>
<li class="mb-1"><code>user_id</code> - Target user ID</li>
<li class="mb-1"><code>sender_id</code> - Optional sender ID</li>
<li class="mb-1"><code>details</code> - Additional data</li>
<li class="mb-1"><code>generate_mail</code> - Email flag</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Email Integration -->
<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>Email Integration
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">SMTP Configuration</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>smtp_server</code> - SMTP server address</li>
<li class="mb-1"><code>smtp_port</code> - SMTP port number</li>
<li class="mb-1"><code>use_tls</code> - TLS encryption flag</li>
<li class="mb-1"><code>username</code> - SMTP username</li>
<li class="mb-1"><code>password</code> - SMTP password</li>
<li class="mb-1"><code>sender_email</code> - From email address</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Email Templates</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>Account Created</code> - New user welcome</li>
<li class="mb-1"><code>Password Reset</code> - Reset instructions</li>
<li class="mb-1"><code>Room Invite</code> - Room invitation</li>
<li class="mb-1"><code>Conversation Invite</code> - Chat invitation</li>
<li class="mb-1"><code>Conversation Message</code> - Message alerts</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Event Logging System -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-4">Event Logging System</h5>
<!-- Event Types -->
<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-history me-2"></i>Event Types
</h6>
</div>
<div class="card-body">
<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"><code>user_login</code> - User authentication</li>
<li class="mb-1"><code>user_logout</code> - User logout</li>
<li class="mb-1"><code>user_create</code> - Account creation</li>
<li class="mb-1"><code>user_update</code> - Profile updates</li>
<li class="mb-1"><code>user_delete</code> - Account deletion</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"><code>room_create</code> - Room creation</li>
<li class="mb-1"><code>room_update</code> - Room modifications</li>
<li class="mb-1"><code>room_delete</code> - Room deletion</li>
<li class="mb-1"><code>room_member_add</code> - Member addition</li>
<li class="mb-1"><code>room_member_remove</code> - Member removal</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"><code>file_upload</code> - File uploads</li>
<li class="mb-1"><code>file_download</code> - File downloads</li>
<li class="mb-1"><code>file_delete</code> - File deletions</li>
<li class="mb-1"><code>file_rename</code> - File renaming</li>
<li class="mb-1"><code>file_move</code> - File moving</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Conversation Events</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>conversation_create</code> - Chat creation</li>
<li class="mb-1"><code>conversation_update</code> - Chat updates</li>
<li class="mb-1"><code>conversation_delete</code> - Chat deletion</li>
<li class="mb-1"><code>message_create</code> - Message sending</li>
<li class="mb-1"><code>conversation_open</code> - Chat access</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Event Logging 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-database me-2"></i>Event Logging Process
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">Logging Steps</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>1.</code> Event occurs in system</li>
<li class="mb-1"><code>2.</code> log_event() function called</li>
<li class="mb-1"><code>3.</code> Validates event type</li>
<li class="mb-1"><code>4.</code> Captures user context</li>
<li class="mb-1"><code>5.</code> Records IP and user agent</li>
<li class="mb-1"><code>6.</code> Stores in database</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Event Data</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>event_type</code> - Type of event</li>
<li class="mb-1"><code>user_id</code> - User who triggered</li>
<li class="mb-1"><code>timestamp</code> - Event time</li>
<li class="mb-1"><code>details</code> - Event-specific data</li>
<li class="mb-1"><code>ip_address</code> - User IP address</li>
<li class="mb-1"><code>user_agent</code> - Browser/client info</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Notification Management -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-4">Notification Management</h5>
<!-- Notification 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>Notification Operations
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">User Operations</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>get_user_notifications</code> - Fetch user notifications</li>
<li class="mb-1"><code>mark_notification_read</code> - Mark as read</li>
<li class="mb-1"><code>mark_all_notifications_read</code> - Mark all read</li>
<li class="mb-1"><code>get_unread_count</code> - Count unread</li>
<li class="mb-1"><code>delete_notification</code> - Delete notification</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">System Operations</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>delete_old_notifications</code> - Cleanup old notifications</li>
<li class="mb-1"><code>generate_mail_from_notification</code> - Create email</li>
<li class="mb-1"><code>send_email_via_smtp</code> - Send email</li>
<li class="mb-1"><code>get_smtp_settings</code> - Get email config</li>
<li class="mb-1"><code>create_notification</code> - Create new notification</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Event Queries -->
<div class="card border-0 shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0" style="color: var(--primary-color);">
<i class="fas fa-search me-2"></i>Event Queries
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-muted mb-2">Event Retrieval</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>get_user_events</code> - User-specific events</li>
<li class="mb-1"><code>get_room_events</code> - Room-specific events</li>
<li class="mb-1"><code>get_recent_events</code> - Recent system events</li>
<li class="mb-1"><code>get_events_by_type</code> - Filter by event type</li>
<li class="mb-1"><code>get_events_by_date_range</code> - Date range filter</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Query Parameters</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>user_id</code> - Filter by user</li>
<li class="mb-1"><code>event_type</code> - Filter by type</li>
<li class="mb-1"><code>start_date</code> - Start date</li>
<li class="mb-1"><code>end_date</code> - End date</li>
<li class="mb-1"><code>limit</code> - Result limit</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Template System -->
<div class="mb-5">
<h5 style="color: var(--primary-color);" class="mb-4">Email Template System</h5>
<!-- 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.username }}' }}</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>{{ '{{ sender.username }}' }}</code> - Sender's name</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.company_name }}' }}</code> - Company name</li>
<li class="mb-1"><code>{{ '{{ site.company_website }}' }}</code> - Website</li>
<li class="mb-1"><code>{{ '{{ setup_link }}' }}</code> - Setup URL</li>
<li class="mb-1"><code>{{ '{{ reset_link }}' }}</code> - Reset URL</li>
<li class="mb-1"><code>{{ '{{ created_at }}' }}</code> - Creation time</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Content Variables</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>{{ '{{ conversation.name }}' }}</code> - Chat name</li>
<li class="mb-1"><code>{{ '{{ message.content }}' }}</code> - Message text</li>
<li class="mb-1"><code>{{ '{{ room_link }}' }}</code> - Room URL</li>
<li class="mb-1"><code>{{ '{{ conversation_link }}' }}</code> - Chat URL</li>
<li class="mb-1"><code>{{ '{{ updated_fields }}' }}</code> - Changed fields</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-muted mb-2">Time Variables</h6>
<ul class="list-unstyled small">
<li class="mb-1"><code>{{ '{{ created_at }}' }}</code> - Creation timestamp</li>
<li class="mb-1"><code>{{ '{{ updated_at }}' }}</code> - Update timestamp</li>
<li class="mb-1"><code>{{ '{{ deleted_at }}' }}</code> - Deletion timestamp</li>
<li class="mb-1"><code>{{ '{{ removed_at }}' }}</code> - Removal timestamp</li>
<li class="mb-1"><code>{{ '{{ expiry_time }}' }}</code> - Expiration time</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<!-- Quick Reference -->
<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-info-circle me-2"></i>Quick Reference
</h6>
</div>
<div class="card-body">
<div class="mb-3">
<h6 class="text-muted mb-2">Notification Status</h6>
<div class="d-flex justify-content-between mb-1">
<span class="small">Unread</span>
<span class="badge bg-warning">Pending</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="small">Read</span>
<span class="badge bg-success">Processed</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="small">Email Sent</span>
<span class="badge bg-info">Delivered</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="small">Email Failed</span>
<span class="badge bg-danger">Error</span>
</div>
</div>
<div class="mb-3">
<h6 class="text-muted mb-2">System Limits</h6>
<div class="d-flex justify-content-between mb-1">
<span class="small">Notification Retention</span>
<span class="badge bg-info">30 days</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="small">Event Retention</span>
<span class="badge bg-info">90 days</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="small">Email Queue</span>
<span class="badge bg-success">Real-time</span>
</div>
</div>
</div>
</div>
<!-- Notification Features -->
<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-bell me-2"></i>Notification Features
</h6>
</div>
<div class="card-body">
<ul class="list-unstyled mb-0">
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Real-time in-app notifications
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Email notification delivery
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Template-based email system
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Notification filtering and search
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Bulk notification management
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Notification preferences
</li>
</ul>
</div>
</div>
<!-- Event Logging Features -->
<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-history me-2"></i>Event Logging Features
</h6>
</div>
<div class="card-body">
<ul class="list-unstyled mb-0">
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Comprehensive audit trails
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
IP address tracking
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
User agent logging
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Event categorization
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Time-based filtering
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Export capabilities
</li>
</ul>
</div>
</div>
<!-- Security Features -->
<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-shield-alt me-2"></i>Security Features
</h6>
</div>
<div class="card-body">
<ul class="list-unstyled mb-0">
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Secure SMTP configuration
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
TLS encryption support
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
IP address logging
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
User authentication tracking
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Access control validation
</li>
<li class="mb-2 small">
<i class="fas fa-check text-success me-2"></i>
Data retention policies
</li>
</ul>
</div>
</div>
<!-- Technical Stack -->
<div class="card border-0 shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0" style="color: var(--primary-color);">
<i class="fas fa-code me-2"></i>Technical Stack
</h6>
</div>
<div class="card-body">
<div class="mb-3">
<h6 class="text-muted mb-2">Backend</h6>
<div class="p-2" style="background-color: var(--primary-bg-light); border-radius: 6px;">
<div class="fw-bold" style="color: var(--primary-color);">Flask + SQLAlchemy</div>
<small class="text-muted">Notification processing</small>
</div>
</div>
<div class="mb-3">
<h6 class="text-muted mb-2">Email</h6>
<div class="p-2" style="background-color: var(--secondary-bg-light); border-radius: 6px;">
<div class="fw-bold" style="color: var(--secondary-color);">SMTP + Jinja2</div>
<small class="text-muted">Email templates</small>
</div>
</div>
<div class="mb-3">
<h6 class="text-muted mb-2">Database</h6>
<div class="p-2" style="background-color: var(--primary-bg-light); border-radius: 6px;">
<div class="fw-bold" style="color: var(--primary-color);">PostgreSQL</div>
<small class="text-muted">Event storage</small>
</div>
</div>
<div class="mb-3">
<h6 class="text-muted mb-2">Frontend</h6>
<div class="p-2" style="background-color: var(--secondary-bg-light); border-radius: 6px;">
<div class="fw-bold" style="color: var(--secondary-color);">JavaScript + AJAX</div>
<small class="text-muted">Real-time updates</small>
</div>
</div>
</div>
</div>
</div>
</div>

View File

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

View File