Add website branding feature.

2025-07-04 09:29:05 +02:00
parent 52d3400728
commit 0fbf410755
12 changed files with 407 additions and 31 deletions
--- a/app.py
+++ b/app.py
@@ -1,5 +1,5 @@
 from flask import Flask, render_template, request, redirect, url_for, jsonify, flash, session, g, Response, send_file
-from models import db, TimeEntry, WorkConfig, User, SystemSettings, Team, Role, Project, Company, CompanyWorkConfig, UserPreferences, WorkRegion, AccountType, ProjectCategory, Task, SubTask, TaskStatus, TaskPriority, Announcement, SystemEvent
+from models import db, TimeEntry, WorkConfig, User, SystemSettings, Team, Role, Project, Company, CompanyWorkConfig, UserPreferences, WorkRegion, AccountType, ProjectCategory, Task, SubTask, TaskStatus, TaskPriority, Announcement, SystemEvent, BrandingSettings
 from data_formatting import (
    format_duration, prepare_export_data, prepare_team_hours_export_data,
    format_table_data, format_graph_data, format_team_data
@@ -40,7 +40,7 @@ app.config['MAIL_PORT'] = int(os.environ.get('MAIL_PORT') or 587)
 app.config['MAIL_USE_TLS'] = os.environ.get('MAIL_USE_TLS', 'true').lower() in ['true', 'on', '1']
 app.config['MAIL_USERNAME'] = os.environ.get('MAIL_USERNAME', 'your-email@example.com')
 app.config['MAIL_PASSWORD'] = os.environ.get('MAIL_PASSWORD', 'your-password')
-app.config['MAIL_DEFAULT_SENDER'] = os.environ.get('MAIL_DEFAULT_SENDER', 'TimeTrack <noreply@timetrack.com>')
+app.config['MAIL_DEFAULT_SENDER'] = os.environ.get('MAIL_DEFAULT_SENDER', 'TimeTrack <noreply@timetrack.com>')  # Will be overridden by branding in mail sending functions

 # Log mail configuration (without password)
 logger.info(f"Mail server: {app.config['MAIL_SERVER']}")
@@ -396,6 +396,9 @@ def load_logged_in_user():
                    return redirect(url_for('login'))
        else:
            g.company = None
+    
+    # Load branding settings for all requests
+    g.branding = BrandingSettings.get_current()

@app.route('/')
 def home():
@@ -621,19 +624,19 @@ def register():
                else:
                    # Send verification email for regular users when verification is required
                    verification_url = url_for('verify_email', token=token, _external=True)
-                    msg = Message('Verify your TimeTrack account', recipients=[email])
+                    msg = Message(f'Verify your {g.branding.app_name} account', recipients=[email])
                    msg.body = f'''Hello {username},

-Thank you for registering with TimeTrack. To complete your registration, please click on the link below:
+Thank you for registering with {g.branding.app_name}. To complete your registration, please click on the link below:

 {verification_url}

 This link will expire in 24 hours.

-If you did not register for TimeTrack, please ignore this email.
+If you did not register for {g.branding.app_name}, please ignore this email.

 Best regards,
-The TimeTrack Team
+The {g.branding.app_name} Team
 '''
                    mail.send(msg)
                    logger.info(f"Verification email sent to {email}")
@@ -994,17 +997,17 @@ def create_user():
                # Generate verification token and send email
                token = new_user.generate_verification_token()
                verification_url = url_for('verify_email', token=token, _external=True)
-                msg = Message('Verify your TimeTrack account', recipients=[email])
+                msg = Message(f'Verify your {g.branding.app_name} account', recipients=[email])
                msg.body = f'''Hello {username},

-An administrator has created an account for you on TimeTrack. To activate your account, please click on the link below:
+An administrator has created an account for you on {g.branding.app_name}. To activate your account, please click on the link below:

 {verification_url}

 This link will expire in 24 hours.

 Best regards,
-The TimeTrack Team
+The {g.branding.app_name} Team
 '''
                mail.send(msg)

@@ -1177,7 +1180,7 @@ def setup_2fa():
    import io
    import base64

-    qr_uri = g.user.get_2fa_uri()
+    qr_uri = g.user.get_2fa_uri(issuer_name=g.branding.app_name)
    qr = qrcode.QRCode(version=1, box_size=10, border=5)
    qr.add_data(qr_uri)
    qr.make(fit=True)
@@ -2108,6 +2111,60 @@ def system_admin_settings():
                         total_users=total_users,
                         total_system_admins=total_system_admins)

+@app.route('/system-admin/branding', methods=['GET', 'POST'])
+@system_admin_required
+def system_admin_branding():
+    """System Admin: Branding settings"""
+    if request.method == 'POST':
+        branding = BrandingSettings.get_current()
+        
+        # Handle form data
+        branding.app_name = request.form.get('app_name', g.branding.app_name).strip()
+        branding.logo_alt_text = request.form.get('logo_alt_text', '').strip()
+        branding.primary_color = request.form.get('primary_color', '#007bff').strip()
+        branding.updated_by_id = g.user.id
+        
+        # Handle logo upload
+        if 'logo_file' in request.files:
+            logo_file = request.files['logo_file']
+            if logo_file and logo_file.filename:
+                # Create uploads directory if it doesn't exist
+                upload_dir = os.path.join(app.static_folder, 'uploads', 'branding')
+                os.makedirs(upload_dir, exist_ok=True)
+                
+                # Save the file with a timestamp to avoid conflicts
+                import time
+                filename = f"logo_{int(time.time())}_{logo_file.filename}"
+                logo_path = os.path.join(upload_dir, filename)
+                logo_file.save(logo_path)
+                branding.logo_filename = filename
+        
+        # Handle favicon upload
+        if 'favicon_file' in request.files:
+            favicon_file = request.files['favicon_file']
+            if favicon_file and favicon_file.filename:
+                # Create uploads directory if it doesn't exist
+                upload_dir = os.path.join(app.static_folder, 'uploads', 'branding')
+                os.makedirs(upload_dir, exist_ok=True)
+                
+                # Save the file with a timestamp to avoid conflicts
+                import time
+                filename = f"favicon_{int(time.time())}_{favicon_file.filename}"
+                favicon_path = os.path.join(upload_dir, filename)
+                favicon_file.save(favicon_path)
+                branding.favicon_filename = filename
+        
+        db.session.commit()
+        flash('Branding settings updated successfully.', 'success')
+        return redirect(url_for('system_admin_branding'))
+    
+    # Get current branding settings
+    branding = BrandingSettings.get_current()
+    
+    return render_template('system_admin_branding.html',
+                         title='System Administrator - Branding Settings',
+                         branding=branding)
+
@app.route('/system-admin/health')
@system_admin_required  
 def system_admin_health():
--- a/models.py
+++ b/models.py
@@ -193,15 +193,17 @@ class User(db.Model):
        self.two_factor_secret = pyotp.random_base32()
        return self.two_factor_secret
    
-    def get_2fa_uri(self):
+    def get_2fa_uri(self, issuer_name=None):
        """Get the provisioning URI for QR code generation"""
        if not self.two_factor_secret:
            return None
        import pyotp
        totp = pyotp.TOTP(self.two_factor_secret)
+        if issuer_name is None:
+            issuer_name = "Time Tracker"  # Default fallback
        return totp.provisioning_uri(
            name=self.email,
-            issuer_name="TimeTrack"
+            issuer_name=issuer_name
        )
    
    def verify_2fa_token(self, token, allow_setup=False):
@@ -228,6 +230,38 @@ class SystemSettings(db.Model):
    def __repr__(self):
        return f'<SystemSettings {self.key}={self.value}>'

+class BrandingSettings(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    app_name = db.Column(db.String(100), nullable=False, default='Time Tracker')
+    logo_filename = db.Column(db.String(255), nullable=True)  # Filename of uploaded logo
+    logo_alt_text = db.Column(db.String(255), nullable=True, default='Logo')
+    favicon_filename = db.Column(db.String(255), nullable=True)  # Filename of uploaded favicon
+    primary_color = db.Column(db.String(7), nullable=True, default='#007bff')  # Hex color
+    
+    # Meta fields
+    created_at = db.Column(db.DateTime, default=datetime.now)
+    updated_at = db.Column(db.DateTime, default=datetime.now, onupdate=datetime.now)
+    updated_by_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=True)
+    
+    # Relationships
+    updated_by = db.relationship('User', foreign_keys=[updated_by_id])
+    
+    def __repr__(self):
+        return f'<BrandingSettings {self.app_name}>'
+    
+    @staticmethod
+    def get_current():
+        """Get current branding settings or create defaults"""
+        settings = BrandingSettings.query.first()
+        if not settings:
+            settings = BrandingSettings(
+                app_name='Time Tracker',
+                logo_alt_text='Application Logo'
+            )
+            db.session.add(settings)
+            db.session.commit()
+        return settings
+
 class TimeEntry(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    arrival_time = db.Column(db.DateTime, nullable=False)
--- a/templates/about.html
+++ b/templates/about.html
@@ -5,7 +5,7 @@
    <div class="about-content">
        <div class="intro">
            <h2>Professional Time Tracking Made Simple</h2>
-            <p>TimeTrack is a comprehensive multi-tenant time management solution designed to help organizations and individuals monitor work hours efficiently. Built with simplicity and accuracy in mind, our platform provides the tools you need to track, manage, and analyze time spent on work activities across multiple companies and teams.</p>
+            <p>{{ g.branding.app_name }} is a comprehensive multi-tenant time management solution designed to help organizations and individuals monitor work hours efficiently. Built with simplicity and accuracy in mind, our platform provides the tools you need to track, manage, and analyze time spent on work activities across multiple companies and teams.</p>
        </div>
        
        <div class="features-section">
@@ -39,7 +39,7 @@
                
                <div class="feature-item">
                    <h3>🏢 Multi-Company Support</h3>
-                    <p>Enterprise-ready multi-tenant architecture allows multiple companies to operate independently within a single TimeTrack instance, with complete data isolation and security.</p>
+                    <p>Enterprise-ready multi-tenant architecture allows multiple companies to operate independently within a single {{ g.branding.app_name }} instance, with complete data isolation and security.</p>
                </div>
                
                <div class="feature-item">
@@ -76,7 +76,7 @@
        </div>
        
        <div class="benefits-section">
-            <h2>Why Choose TimeTrack?</h2>
+            <h2>Why Choose {{ g.branding.app_name }}?</h2>
            
            <div class="benefits-list">
                <div class="benefit">
@@ -103,7 +103,7 @@
        
        <div class="technical-section">
            <h2>Technical Information</h2>
-            <p>TimeTrack is built using modern web technologies including Flask (Python), SQLite database, and responsive HTML/CSS/JavaScript frontend. The application features a REST API architecture, secure session management, and email integration for user verification.</p>
+            <p>{{ g.branding.app_name }} is built using modern web technologies including Flask (Python), SQLite database, and responsive HTML/CSS/JavaScript frontend. The application features a REST API architecture, secure session management, and email integration for user verification.</p>
        </div>
        
        <div class="company-setup-section">
@@ -111,12 +111,12 @@
            <div class="setup-options">
                <div class="setup-option">
                    <h3>🏢 New Company Setup</h3>
-                    <p>Setting up TimeTrack for the first time or adding a new company? Create your company profile and administrator account to get started.</p>
+                    <p>Setting up {{ g.branding.app_name }} for the first time or adding a new company? Create your company profile and administrator account to get started.</p>
                </div>
                
                <div class="setup-option">
                    <h3>👥 Join Existing Company</h3>
-                    <p>Already have a company using TimeTrack? Get your company code from your administrator and register to join your organization.</p>
+                    <p>Already have a company using {{ g.branding.app_name }}? Get your company code from your administrator and register to join your organization.</p>
                </div>
            </div>
        </div>
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,7 +2,7 @@

 {% block content %}
 <div class="hero">
-    <h1>Welcome to TimeTrack</h1>
+    <h1>Welcome to {{ g.branding.app_name }}</h1>
    <p>Track your work hours easily and efficiently</p>
 </div>

--- a/templates/layout.html
+++ b/templates/layout.html
@@ -3,14 +3,64 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ title }} - TimeTrack{% if g.company %} - {{ g.company.name }}{% endif %}</title>
+    <title>{{ title }} - {{ g.branding.app_name }}{% if g.company %} - {{ g.company.name }}{% endif %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    {% if g.branding.favicon_filename %}
+        <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='uploads/branding/' + g.branding.favicon_filename) }}">
+    {% endif %}
+    <style>
+        :root {
+            --primary-color: {{ g.branding.primary_color }};
+        }
+        .btn-primary {
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
+        }
+        .btn-primary:hover {
+            background-color: {{ g.branding.primary_color }}dd;
+            border-color: {{ g.branding.primary_color }}dd;
+        }
+        .nav-icon {
+            color: var(--primary-color);
+        }
+        a:hover {
+            color: var(--primary-color);
+        }
+        .mobile-logo {
+            max-height: 30px;
+            max-width: 150px;
+            object-fit: contain;
+        }
+        .sidebar-logo {
+            max-height: 32px;
+            max-width: 160px;
+            object-fit: contain;
+        }
+        .mobile-nav-brand a {
+            display: flex;
+            align-items: center;
+        }
+        .sidebar-header h2 a {
+            display: flex;
+            align-items: center;
+            color: inherit;
+            text-decoration: none;
+        }
+    </style>
 </head>
 <body>
    <!-- Mobile header -->
    <header class="mobile-header">
        <div class="mobile-nav-brand">
-            <a href="{{ url_for('home') }}">TimeTrack</a>
+            <a href="{{ url_for('home') }}">
+                {% if g.branding.logo_filename %}
+                    <img src="{{ url_for('static', filename='uploads/branding/' + g.branding.logo_filename) }}" 
+                         alt="{{ g.branding.logo_alt_text }}" 
+                         class="mobile-logo">
+                {% else %}
+                    {{ g.branding.app_name }}
+                {% endif %}
+            </a>
            {% if g.company %}
                <small class="company-name">{{ g.company.name }}</small>
            {% endif %}
@@ -25,7 +75,17 @@
    <!-- Sidebar navigation -->
    <aside class="sidebar" id="sidebar">
        <div class="sidebar-header">
-            <h2><a href="{{ url_for('home') }}">TimeTrack</a></h2>
+            <h2>
+                <a href="{{ url_for('home') }}">
+                    {% if g.branding.logo_filename %}
+                        <img src="{{ url_for('static', filename='uploads/branding/' + g.branding.logo_filename) }}" 
+                             alt="{{ g.branding.logo_alt_text }}" 
+                             class="sidebar-logo">
+                    {% else %}
+                        {{ g.branding.app_name }}
+                    {% endif %}
+                </a>
+            </h2>
            {% if g.company %}
                <div class="company-info">
                    <small class="text-muted">{{ g.company.name }}</small>
@@ -127,7 +187,7 @@
    </main>

    <footer>
-        <p>&copy; {{ current_year }} TimeTrack. All rights reserved.</p>
+        <p>&copy; {{ current_year }} {{ g.branding.app_name }}. All rights reserved.</p>
    </footer>

    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
--- a/templates/login.html
+++ b/templates/login.html
@@ -2,7 +2,7 @@

 {% block content %}
 <div class="auth-container">
-    <h1>Login to TimeTrack</h1>
+    <h1>Login to {{ g.branding.app_name }}</h1>
    
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
--- a/templates/register.html
+++ b/templates/register.html
@@ -2,7 +2,7 @@

 {% block content %}
 <div class="auth-container">
-    <h1>Register for TimeTrack</h1>
+    <h1>Register for {{ g.branding.app_name }}</h1>
    <p class="text-muted">Join your company team</p>
    
    {% with messages = get_flashed_messages(with_categories=true) %}
--- a/templates/setup_2fa.html
+++ b/templates/setup_2fa.html
@@ -25,7 +25,7 @@
                <div class="manual-entry">
                    <h3>Can't scan? Enter this code manually:</h3>
                    <div class="secret-code">{{ secret }}</div>
-                    <p><small>Account: {{ g.user.email }}<br>Issuer: TimeTrack</small></p>
+                    <p><small>Account: {{ g.user.email }}<br>Issuer: {{ g.branding.app_name }}</small></p>
                </div>
            </div>
        </div>
--- a/templates/setup_company.html
+++ b/templates/setup_company.html
@@ -4,7 +4,7 @@
 <div class="admin-container">
    <h1>
        {% if is_initial_setup %}
-            Welcome to TimeTrack
+            Welcome to {{ g.branding.app_name }}
        {% else %}
            Create New Company
        {% endif %}
@@ -14,12 +14,12 @@
    {% if is_initial_setup %}
        <div class="info-message">
            <h3>🎉 Let's Get Started!</h3>
-            <p>Set up your company and create the first administrator account to begin using TimeTrack.</p>
+            <p>Set up your company and create the first administrator account to begin using {{ g.branding.app_name }}.</p>
        </div>
    {% elif is_super_admin %}
        <div class="info-message">
            <h3>🏢 New Company Setup</h3>
-            <p>Create a new company with its own administrator. This will be a separate organization within TimeTrack.</p>
+            <p>Create a new company with its own administrator. This will be a separate organization within {{ g.branding.app_name }}.</p>
        </div>
    {% else %}
        <div class="error-message">
--- a/templates/system_admin_branding.html
+++ b/templates/system_admin_branding.html
@@ -0,0 +1,222 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="container">
+    <div class="header-section">
+        <h1>🎨 System Administrator - Branding Settings</h1>
+        <p class="subtitle">Customize the appearance and branding of your TimeTrack instance</p>
+        <a href="{{ url_for('system_admin_dashboard') }}" class="btn btn-secondary">← Back to Dashboard</a>
+    </div>
+
+    <!-- Current Branding Preview -->
+    <div class="stats-section">
+        <h3>👁️ Current Branding Preview</h3>
+        <div class="branding-preview">
+            <div class="preview-card">
+                <div class="preview-header">
+                    {% if branding.logo_filename %}
+                        <img src="{{ url_for('static', filename='uploads/branding/' + branding.logo_filename) }}" 
+                             alt="{{ branding.logo_alt_text }}" 
+                             class="preview-logo">
+                    {% endif %}
+                    <h4>{{ branding.app_name }}</h4>
+                </div>
+                <div class="preview-content">
+                    <p>This is how your branding will appear to users.</p>
+                    <div class="preview-button" style="background-color: {{ branding.primary_color }};">
+                        Sample Button
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Branding Settings Form -->
+    <div class="settings-section">
+        <h3>🔧 Branding Configuration</h3>
+        <form method="POST" enctype="multipart/form-data" class="settings-form">
+            <!-- Application Name -->
+            <div class="setting-group">
+                <div class="setting-header">
+                    <h4>Application Name</h4>
+                    <p>The name that appears throughout the application</p>
+                </div>
+                <div class="setting-control">
+                    <label for="app_name">Application Name:</label>
+                    <input type="text" id="app_name" name="app_name" 
+                           value="{{ branding.app_name }}" 
+                           class="form-control"
+                           placeholder="TimeTrack" 
+                           required>
+                    <small class="setting-description">
+                        This name will appear in the title, navigation, and throughout the interface.
+                    </small>
+                </div>
+            </div>
+
+            <!-- Logo Upload -->
+            <div class="setting-group">
+                <div class="setting-header">
+                    <h4>Logo Upload</h4>
+                    <p>Upload a custom logo for your application</p>
+                </div>
+                <div class="setting-control">
+                    <label for="logo_file">Logo File:</label>
+                    <input type="file" id="logo_file" name="logo_file" 
+                           accept="image/*" 
+                           class="form-control">
+                    {% if branding.logo_filename %}
+                        <div class="current-file">
+                            <strong>Current logo:</strong>
+                            <img src="{{ url_for('static', filename='uploads/branding/' + branding.logo_filename) }}" 
+                                 alt="{{ branding.logo_alt_text }}" 
+                                 class="current-logo">
+                        </div>
+                    {% endif %}
+                    <small class="setting-description">
+                        Supported formats: PNG, JPG, GIF, SVG. Recommended size: 200x50px or similar aspect ratio.
+                    </small>
+                </div>
+            </div>
+
+            <!-- Logo Alt Text -->
+            <div class="setting-group">
+                <div class="setting-header">
+                    <h4>Logo Alt Text</h4>
+                    <p>Alternative text for the logo (accessibility)</p>
+                </div>
+                <div class="setting-control">
+                    <label for="logo_alt_text">Alt Text:</label>
+                    <input type="text" id="logo_alt_text" name="logo_alt_text" 
+                           value="{{ branding.logo_alt_text }}" 
+                           class="form-control"
+                           placeholder="Company Logo">
+                    <small class="setting-description">
+                        This text will be read by screen readers and shown when the logo cannot be displayed.
+                    </small>
+                </div>
+            </div>
+
+            <!-- Favicon Upload -->
+            <div class="setting-group">
+                <div class="setting-header">
+                    <h4>Favicon Upload</h4>
+                    <p>Upload a custom favicon (browser tab icon)</p>
+                </div>
+                <div class="setting-control">
+                    <label for="favicon_file">Favicon File:</label>
+                    <input type="file" id="favicon_file" name="favicon_file" 
+                           accept="image/*" 
+                           class="form-control">
+                    {% if branding.favicon_filename %}
+                        <div class="current-file">
+                            <strong>Current favicon:</strong>
+                            <img src="{{ url_for('static', filename='uploads/branding/' + branding.favicon_filename) }}" 
+                                 alt="Current favicon" 
+                                 class="current-favicon">
+                        </div>
+                    {% endif %}
+                    <small class="setting-description">
+                        Supported formats: ICO, PNG (16x16px or 32x32px recommended).
+                    </small>
+                </div>
+            </div>
+
+            <!-- Primary Color -->
+            <div class="setting-group">
+                <div class="setting-header">
+                    <h4>Primary Color</h4>
+                    <p>The primary color used throughout the application</p>
+                </div>
+                <div class="setting-control">
+                    <label for="primary_color">Primary Color:</label>
+                    <input type="color" id="primary_color" name="primary_color" 
+                           value="{{ branding.primary_color }}" 
+                           class="form-control color-picker">
+                    <small class="setting-description">
+                        This color will be used for buttons, links, and other UI elements throughout the application.
+                    </small>
+                </div>
+            </div>
+
+            <!-- Save Button -->
+            <div class="form-actions">
+                <button type="submit" class="btn btn-primary">💾 Save Branding Settings</button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<style>
+/* Branding-specific styles that complement the existing design system */
+.branding-preview {
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 5px;
+    padding: 20px;
+    margin-top: 15px;
+}
+
+.preview-card {
+    background: white;
+    border-radius: 5px;
+    padding: 20px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    max-width: 400px;
+}
+
+.preview-header {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    margin-bottom: 15px;
+    padding-bottom: 15px;
+    border-bottom: 1px solid #eee;
+}
+
+.preview-logo {
+    max-height: 40px;
+    max-width: 150px;
+    object-fit: contain;
+}
+
+.preview-button {
+    color: white;
+    padding: 8px 16px;
+    border-radius: 4px;
+    display: inline-block;
+    margin-top: 10px;
+    font-size: 14px;
+    border: none;
+    cursor: pointer;
+}
+
+.current-file {
+    margin-top: 10px;
+    padding: 10px;
+    background: #f8f9fa;
+    border-radius: 4px;
+    border: 1px solid #dee2e6;
+}
+
+.current-logo {
+    max-height: 30px;
+    max-width: 100px;
+    object-fit: contain;
+    margin-left: 10px;
+}
+
+.current-favicon {
+    max-height: 16px;
+    max-width: 16px;
+    object-fit: contain;
+    margin-left: 10px;
+}
+
+.color-picker {
+    width: 80px !important;
+    height: 40px;
+    padding: 0 !important;
+}
+</style>
+{% endblock %}
--- a/templates/system_admin_dashboard.html
+++ b/templates/system_admin_dashboard.html
@@ -183,7 +183,10 @@
            <a href="{{ url_for('system_admin_settings') }}" class="btn btn-primary">
                ⚙️ System Settings
            </a>
-            <a href="{{ url_for('system_admin_health') }}" class="btn btn-warning">
+            <a href="{{ url_for('system_admin_branding') }}" class="btn btn-primary">
+                🎨 Branding Settings
+            </a>
+            <a href="{{ url_for('system_admin_health') }}" class="btn btn-primary">
                🏥 System Health
            </a>
        </div>
--- a/templates/system_admin_settings.html
+++ b/templates/system_admin_settings.html
@@ -119,7 +119,7 @@
        <div class="info-grid">
            <div class="info-card">
                <h4>Application Version</h4>
-                <p>TimeTrack v1.0</p>
+                <p>{{ g.branding.app_name }} v1.0</p>
            </div>
            <div class="info-card">
                <h4>Database</h4>