Jun 27 MT-7
This commit is contained in:
@@ -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 & 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 %}
|
||||
@@ -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 & 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 %}
|
||||
@@ -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 & 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 & 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 %}
|
||||
Reference in New Issue
Block a user