Jun 27 MT-7

app/templates/base.html

@@ -13,6 +13,18 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/theme.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/ipad_responsive.css') }}">
+    {% if tenant_branding %}
+    <style>
+      :root {
+        --bs-primary: {{ tenant_branding.primary_color or '#1a56db' }};
+        --bs-primary-rgb: {{ tenant_branding.primary_color|hex_to_rgb if tenant_branding.primary_color else '26,86,219' }};
+        --jqc-accent: {{ tenant_branding.accent_color or '#16a34a' }};
+      }
+      .bg-primary { background-color: {{ tenant_branding.primary_color or '#1a56db' }} !important; }
+      .btn-primary { background-color: {{ tenant_branding.primary_color or '#1a56db' }} !important;
+                     border-color: {{ tenant_branding.primary_color or '#1a56db' }} !important; }
+    </style>
+    {% endif %}
     {% block extra_css %}{% endblock %}
     <style>
         /* ── Notification bell styles ── */
@@ -65,7 +77,14 @@
     <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
         <div class="container-fluid">
             <a class="navbar-brand" href="{{ url_for('dashboard.index') }}">
-                <i class="bi bi-clipboard-check"></i> Janitorial QC
+                {% if tenant_branding and tenant_branding.logo_url %}
+                <img src="{{ url_for('static', filename=tenant_branding.logo_url) }}"
+                     alt="{{ tenant_branding.display_name }}"
+                     style="max-height:32px; border-radius:4px; margin-right:.35rem;">
+                {% else %}
+                <i class="bi bi-clipboard-check"></i>
+                {% endif %}
+                {{ tenant_branding.display_name if tenant_branding else 'Janitorial QC' }}
             </a>
             <!-- ── Bell + toggler always visible on mobile/tablet ── -->
             <div class="d-flex align-items-center gap-2 ms-auto me-2 d-lg-none">
@@ -214,6 +233,12 @@
                             <i class="bi bi-tablet"></i> Devices
                         </a>
                     </li>
+                    <li>
+                        <a class="dropdown-item {{ 'active' if request.endpoint and request.endpoint.startswith('tenant_settings.') else '' }}"
+                            href="{{ url_for('tenant_settings.branding') }}">
+                        <i class="bi bi-gear me-1"></i> Workspace Settings
+                        </a>
+                    </li>
                     {% endif %}
                 </ul>
                 <ul class="navbar-nav align-items-center">

app/templates/tenant_settings/branding.html

@@ -0,0 +1,156 @@
+{% extends "base.html" %}
+{% block title %}Branding — Settings{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-3">
+  <h4 class="mb-0"><i class="bi bi-palette me-2"></i>Branding</h4>
+  <div class="btn-group btn-group-sm">
+    <a href="{{ url_for('tenant_settings.branding') }}" class="btn btn-primary">Branding</a>
+    <a href="{{ url_for('tenant_settings.plan') }}" class="btn btn-outline-secondary">Plan &amp; Usage</a>
+    <a href="{{ url_for('tenant_settings.domains') }}" class="btn btn-outline-secondary">Domains</a>
+  </div>
+</div>
+
+{% if not branding_allowed %}
+<div class="alert alert-warning">
+  <i class="bi bi-lock me-1"></i>
+  Branding customisation is available on <strong>Pro</strong> and <strong>Enterprise</strong> plans.
+  Changes below won't take effect until you upgrade.
+</div>
+{% endif %}
+
+<div class="row">
+  <div class="col-lg-7">
+    <div class="card border-0 shadow-sm">
+      <div class="card-body">
+        <form method="POST" action="{{ url_for('tenant_settings.branding') }}" enctype="multipart/form-data">
+          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+
+          <div class="mb-3">
+            <label class="form-label fw-semibold">Company / Workspace Name</label>
+            <input type="text" name="company_name" class="form-control"
+                   value="{{ settings.company_name or '' }}" maxlength="150"
+                   placeholder="e.g. Acme Janitorial">
+            <div class="form-text">Shown in the navbar and email footers.</div>
+          </div>
+
+          <div class="mb-3">
+            <label class="form-label fw-semibold">Logo</label>
+            {% if settings.logo_url %}
+            <div class="mb-2">
+              <img src="{{ url_for('static', filename=settings.logo_url) }}"
+                   alt="Current logo" style="max-height:48px; border-radius:6px;">
+              <div class="form-check mt-1">
+                <input class="form-check-input" type="checkbox" name="clear_logo" id="clear_logo">
+                <label class="form-check-label text-muted small" for="clear_logo">Remove current logo</label>
+              </div>
+            </div>
+            {% endif %}
+            <input type="file" name="logo" class="form-control"
+                   accept=".png,.jpg,.jpeg,.gif,.svg,.webp">
+            <div class="form-text">PNG, JPG, SVG or WebP. Displayed at 40px height in the navbar.</div>
+          </div>
+
+          <div class="row g-3 mb-3">
+            <div class="col-6">
+              <label class="form-label fw-semibold">Primary Colour</label>
+              <div class="input-group">
+                <input type="color" name="primary_color" class="form-control form-control-color"
+                       value="{{ settings.primary_color or '#1a56db' }}" title="Primary colour">
+                <input type="text" class="form-control font-monospace"
+                       value="{{ settings.primary_color or '#1a56db' }}"
+                       pattern="^#[0-9a-fA-F]{6}$"
+                       oninput="this.previousElementSibling.value=this.value"
+                       id="primary_color_text">
+              </div>
+              <div class="form-text">Navbar background.</div>
+            </div>
+            <div class="col-6">
+              <label class="form-label fw-semibold">Accent Colour</label>
+              <div class="input-group">
+                <input type="color" name="accent_color" class="form-control form-control-color"
+                       value="{{ settings.accent_color or '#16a34a' }}" title="Accent colour">
+                <input type="text" class="form-control font-monospace"
+                       value="{{ settings.accent_color or '#16a34a' }}"
+                       pattern="^#[0-9a-fA-F]{6}$"
+                       oninput="this.previousElementSibling.value=this.value"
+                       id="accent_color_text">
+              </div>
+              <div class="form-text">Buttons and highlights.</div>
+            </div>
+          </div>
+
+          <div class="mb-4">
+            <label class="form-label fw-semibold">Support Email</label>
+            <input type="email" name="support_email" class="form-control"
+                   value="{{ settings.support_email or '' }}"
+                   placeholder="support@yourcompany.com">
+            <div class="form-text">Shown to users on the support page.</div>
+          </div>
+
+          <button type="submit" class="btn btn-primary" {{ 'disabled' if not branding_allowed }}>
+            <i class="bi bi-check-lg me-1"></i> Save Branding
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-lg-5 mt-3 mt-lg-0">
+    <div class="card border-0 shadow-sm">
+      <div class="card-header bg-white py-2">
+        <span class="fw-semibold" style="font-size:.9rem;">Preview</span>
+      </div>
+      <div class="card-body p-0">
+        <nav class="navbar navbar-dark px-3 py-2" id="preview-navbar"
+             style="background-color: {{ settings.primary_color or '#1a56db' }}; border-radius:0 0 6px 6px;">
+          {% if settings.logo_url %}
+          <img src="{{ url_for('static', filename=settings.logo_url) }}"
+               alt="logo" style="max-height:32px; margin-right:.5rem; border-radius:4px;">
+          {% else %}
+          <i class="bi bi-clipboard-check me-2"></i>
+          {% endif %}
+          <span class="navbar-brand mb-0 h1" style="font-size:1rem;" id="preview-name">
+            {{ settings.display_name }}
+          </span>
+        </nav>
+        <div class="p-3" style="font-size:.82rem; color:#64748b;">
+          Navbar and button colours update as you pick them.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+// Live preview sync
+(function () {
+  const navbar = document.getElementById('preview-navbar');
+  const nameEl = document.getElementById('preview-name');
+
+  document.querySelector('input[name="company_name"]').addEventListener('input', function () {
+    nameEl.textContent = this.value || 'Janitorial QC';
+  });
+
+  function wireColor(colorInput, textInput) {
+    colorInput.addEventListener('input', function () {
+      textInput.value = this.value;
+      if (colorInput.name === 'primary_color') navbar.style.backgroundColor = this.value;
+    });
+    textInput.addEventListener('input', function () {
+      if (/^#[0-9a-fA-F]{6}$/.test(this.value)) {
+        colorInput.value = this.value;
+        if (colorInput.name === 'primary_color') navbar.style.backgroundColor = this.value;
+      }
+    });
+  }
+
+  const pColor = document.querySelector('input[name="primary_color"]');
+  const pText  = document.getElementById('primary_color_text');
+  const aColor = document.querySelector('input[name="accent_color"]');
+  const aText  = document.getElementById('accent_color_text');
+  if (pColor && pText) wireColor(pColor, pText);
+  if (aColor && aText) wireColor(aColor, aText);
+})();
+</script>
+{% endblock %}

app/templates/tenant_settings/domains.html

@@ -0,0 +1,127 @@
+{% extends "base.html" %}
+{% block title %}Domains — Settings{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-3">
+  <h4 class="mb-0"><i class="bi bi-globe me-2"></i>Domains</h4>
+  <div class="btn-group btn-group-sm">
+    <a href="{{ url_for('tenant_settings.branding') }}" class="btn btn-outline-secondary">Branding</a>
+    <a href="{{ url_for('tenant_settings.plan') }}" class="btn btn-outline-secondary">Plan &amp; Usage</a>
+    <a href="{{ url_for('tenant_settings.domains') }}" class="btn btn-primary">Domains</a>
+  </div>
+</div>
+
+{% if not domain_allowed %}
+<div class="alert alert-warning">
+  <i class="bi bi-lock me-1"></i>
+  Custom domains are available on <strong>Pro</strong> and <strong>Enterprise</strong> plans.
+  <a href="{{ url_for('tenant_settings.plan') }}" class="alert-link">View your plan</a>.
+</div>
+{% endif %}
+
+<div class="card border-0 shadow-sm mb-3">
+  <div class="table-responsive">
+    <table class="table table-hover mb-0 align-middle" style="font-size:.85rem;">
+      <thead class="table-light">
+        <tr>
+          <th>Domain</th>
+          <th>Type</th>
+          <th>Status</th>
+          <th>TLS</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for d in tenant_domains %}
+        <tr>
+          <td class="font-monospace fw-medium">{{ d.domain }}</td>
+          <td>
+            <span class="badge {{ 'bg-primary' if d.kind == 'subdomain' else 'bg-secondary' }}">
+              {{ d.kind }}
+            </span>
+            {% if d.is_primary %}
+            <span class="badge bg-light text-dark border ms-1">primary</span>
+            {% endif %}
+          </td>
+          <td>
+            {% if d.verified %}
+            <span class="text-success"><i class="bi bi-check-circle-fill me-1"></i>Verified</span>
+            {% else %}
+            <span class="text-warning"><i class="bi bi-clock me-1"></i>Pending DNS</span>
+            {% endif %}
+          </td>
+          <td>
+            <span class="badge {{ 'bg-success' if d.tls_status == 'active' else ('bg-danger' if d.tls_status == 'failed' else 'bg-secondary') }}">
+              {{ d.tls_status }}
+            </span>
+          </td>
+          <td>
+            {% if not d.is_primary and d.kind == 'custom' %}
+            <form method="POST"
+                  action="{{ url_for('tenant_settings.delete_domain', domain_id=d.id) }}"
+                  class="d-inline"
+                  onsubmit="return confirm('Remove {{ d.domain }}?')">
+              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+              <button class="btn btn-outline-danger btn-sm">
+                <i class="bi bi-trash"></i>
+              </button>
+            </form>
+            {% endif %}
+          </td>
+        </tr>
+
+        {# DNS verification instructions for unverified custom domains #}
+        {% if not d.verified and d.kind == 'custom' and d.verification_token %}
+        <tr class="table-warning">
+          <td colspan="5" style="font-size:.82rem;">
+            <strong><i class="bi bi-info-circle me-1"></i>DNS Verification required for {{ d.domain }}</strong><br>
+            Add one of these DNS records at your DNS provider, then contact support to activate:
+            <div class="mt-2 font-monospace" style="background:#f8fafc; padding:.5rem .75rem; border-radius:6px; font-size:.78rem;">
+              <strong>Option A — TXT record</strong><br>
+              Name: <code>_jqc-verify.{{ d.domain }}</code><br>
+              Value: <code>jqc-verify={{ d.verification_token }}</code>
+              <br><br>
+              <strong>Option B — CNAME record</strong><br>
+              Name: <code>{{ d.domain }}</code><br>
+              Value: <code>{{ tenant_slug }}.{{ base_domain }}</code>
+            </div>
+          </td>
+        </tr>
+        {% endif %}
+
+        {% else %}
+        <tr><td colspan="5" class="text-muted py-3 text-center">No domains configured.</td></tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+</div>
+
+{% if domain_allowed %}
+<div class="card border-0 shadow-sm">
+  <div class="card-header bg-white py-2">
+    <span class="fw-semibold" style="font-size:.9rem;">Request Custom Domain</span>
+  </div>
+  <div class="card-body">
+    <p class="text-muted" style="font-size:.85rem;">
+      Enter the custom domain you want to use (e.g. <code>jqc.yourcompany.com</code>).
+      You'll need to add a DNS record to verify ownership before it goes live.
+    </p>
+    <form method="POST" action="{{ url_for('tenant_settings.request_domain') }}"
+          class="row g-2 align-items-end">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+      <div class="col-auto">
+        <input type="text" name="domain" class="form-control"
+               placeholder="jqc.yourcompany.com" style="width:280px;"
+               pattern="^(?:[a-z0-9](?:[a-z0-9\-]{0,61}[a-z0-9])?\.)+[a-z]{2,}$">
+      </div>
+      <div class="col-auto">
+        <button class="btn btn-primary">
+          <i class="bi bi-plus-circle me-1"></i> Add Domain
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+{% endif %}
+{% endblock %}

app/templates/tenant_settings/plan.html

@@ -0,0 +1,97 @@
+{% extends "base.html" %}
+{% block title %}Plan & Usage — Settings{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-3">
+  <h4 class="mb-0"><i class="bi bi-patch-check me-2"></i>Plan &amp; Usage</h4>
+  <div class="btn-group btn-group-sm">
+    <a href="{{ url_for('tenant_settings.branding') }}" class="btn btn-outline-secondary">Branding</a>
+    <a href="{{ url_for('tenant_settings.plan') }}" class="btn btn-primary">Plan &amp; Usage</a>
+    <a href="{{ url_for('tenant_settings.domains') }}" class="btn btn-outline-secondary">Domains</a>
+  </div>
+</div>
+
+{% if plan_info %}
+<div class="row g-3">
+  <div class="col-lg-5">
+    <div class="card border-0 shadow-sm h-100">
+      <div class="card-header bg-white py-2">
+        <span class="fw-semibold" style="font-size:.9rem;">Current Plan</span>
+      </div>
+      <div class="card-body">
+        <div class="d-flex align-items-center gap-2 mb-3">
+          <span class="badge bg-primary fs-6 px-3 py-2">{{ plan_info.name }}</span>
+          <span class="text-muted" style="font-size:.85rem;">{{ plan_info.code }}</span>
+        </div>
+        <table class="table table-sm mb-0" style="font-size:.85rem;">
+          <tbody>
+            <tr>
+              <td class="text-muted">Mobile API (iPad)</td>
+              <td>{% if plan_info.allow_mobile_api %}<i class="bi bi-check-circle-fill text-success"></i>{% else %}<i class="bi bi-x-circle-fill text-danger"></i>{% endif %}</td>
+            </tr>
+            <tr>
+              <td class="text-muted">Scheduled Reports</td>
+              <td>{% if plan_info.allow_scheduled_reports %}<i class="bi bi-check-circle-fill text-success"></i>{% else %}<i class="bi bi-x-circle-fill text-danger"></i>{% endif %}</td>
+            </tr>
+            <tr>
+              <td class="text-muted">Branding / White-label</td>
+              <td>{% if plan_info.allow_branding %}<i class="bi bi-check-circle-fill text-success"></i>{% else %}<i class="bi bi-x-circle-fill text-danger"></i>{% endif %}</td>
+            </tr>
+            <tr>
+              <td class="text-muted">Custom Domain</td>
+              <td>{% if plan_info.allow_custom_domain %}<i class="bi bi-check-circle-fill text-success"></i>{% else %}<i class="bi bi-x-circle-fill text-danger"></i>{% endif %}</td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="mt-3">
+          <a href="mailto:support@jqc.app?subject=Plan upgrade request"
+             class="btn btn-sm btn-outline-primary">
+            <i class="bi bi-arrow-up-circle me-1"></i> Request Plan Upgrade
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-lg-7">
+    <div class="card border-0 shadow-sm h-100">
+      <div class="card-header bg-white py-2">
+        <span class="fw-semibold" style="font-size:.9rem;">Usage This Month</span>
+      </div>
+      <div class="card-body">
+        {% set axes = [
+          ('inspections', 'Inspections / month', plan_info.max_inspections_month),
+          ('issues',      'Issues / month',      plan_info.max_issues_month),
+          ('users',       'Active Users (total)', plan_info.max_users),
+          ('facilities',  'Active Facilities (total)', plan_info.max_facilities),
+        ] %}
+        {% for key, label, limit in axes %}
+        {% set current = quota_usage.get(key, 0) %}
+        {% set pct = ((current / limit * 100) | int) if limit else 0 %}
+        {% set over = limit and current >= limit %}
+        <div class="mb-3">
+          <div class="d-flex justify-content-between mb-1" style="font-size:.85rem;">
+            <span>{{ label }}</span>
+            <span class="{{ 'text-danger fw-semibold' if over else 'text-muted' }}">
+              {{ current }}{% if limit %} / {{ limit }}{% else %} / <em>unlimited</em>{% endif %}
+            </span>
+          </div>
+          {% if limit %}
+          <div class="progress" style="height:6px;">
+            <div class="progress-bar {{ 'bg-danger' if over else ('bg-warning' if pct >= 80 else 'bg-success') }}"
+                 role="progressbar" style="width:{{ [pct,100]|min }}%"></div>
+          </div>
+          {% endif %}
+        </div>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+</div>
+
+{% else %}
+<div class="alert alert-info">
+  Plan information is only available when multi-tenancy is enabled.
+</div>
+{% endif %}
+{% endblock %}