Files
2026-06-20 15:01:44 +05:30

168 lines
10 KiB
HTML

{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="af-page-shell space-y-6">
<div class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
<div>
<h1 class="af-page-title">Firm Branding Settings</h1>
<p class="af-page-subtitle">Configure firm logo, favicon, standard colours, contact details and invoice presentation defaults.</p>
</div>
{% if saved %}
<div class="af-badge af-badge-success">Saved successfully</div>
{% endif %}
</div>
{% if can_change_tenant %}
<div class="af-card p-4">
<form method="get" action="/system-settings/branding" class="grid gap-3 md:grid-cols-3 md:items-end">
<label class="grid gap-1">
<span class="text-sm font-medium text-slate-600">Audit Firm</span>
<select name="tenant_id" class="af-select" onchange="this.form.submit()">
{% for t in tenants %}
<option value="{{ t.id }}" {% if tenant and t.id == tenant.id %}selected{% endif %}>{{ t.display_name or t.name }} ({{ t.code }})</option>
{% endfor %}
</select>
</label>
<label class="grid gap-1">
<span class="text-sm font-medium text-slate-600">Branch</span>
<select name="branch_id" class="af-select" onchange="this.form.submit()">
{% for b in branches %}
<option value="{{ b.id }}" {% if branch and b.id == branch.id %}selected{% endif %}>{{ b.name }} ({{ b.code }})</option>
{% endfor %}
</select>
</label>
<div class="text-sm text-slate-500">System Admin can preview/edit branding for any audit firm. Firm Admin is restricted to own firm.</div>
</form>
</div>
{% endif %}
<form method="post" enctype="multipart/form-data" class="space-y-6">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
<input type="hidden" name="tenant_id" value="{{ tenant.id }}" />
{% if branch %}<input type="hidden" name="branch_id" value="{{ branch.id }}" />{% endif %}
<div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_22rem]">
<div class="space-y-6">
<section class="af-card p-5">
<div class="af-section-heading">Brand Identity</div>
<div class="mt-4 grid gap-4 md:grid-cols-2">
<label class="grid gap-1 md:col-span-2">
<span class="text-sm font-medium text-slate-600">Display Name</span>
<input class="af-input" name="display_name" value="{{ tenant.display_name or tenant.name }}" placeholder="A R R R & ASSOCIATES" />
<span class="text-xs text-slate-500">This name will be used in the sidebar, title bar and future invoice/report headers.</span>
</label>
<label class="grid gap-1">
<span class="text-sm font-medium text-slate-600">Primary Colour</span>
<input class="af-input h-11" type="color" name="primary_color" value="{{ tenant.primary_color or '#2563eb' }}" />
</label>
<label class="grid gap-1">
<span class="text-sm font-medium text-slate-600">Accent / Dark Colour</span>
<input class="af-input h-11" type="color" name="accent_color" value="{{ tenant.accent_color or '#0f172a' }}" />
</label>
<label class="grid gap-1">
<span class="text-sm font-medium text-slate-600">Firm Logo</span>
<input class="af-input" type="file" name="logo_file" accept=".png,.jpg,.jpeg,.webp,.svg" />
<span class="text-xs text-slate-500">Recommended: transparent PNG/SVG, square or horizontal.</span>
</label>
<label class="grid gap-1">
<span class="text-sm font-medium text-slate-600">Favicon</span>
<input class="af-input" type="file" name="favicon_file" accept=".ico,.png,.svg" />
<span class="text-xs text-slate-500">Recommended: ICO/PNG 32x32 or 64x64.</span>
</label>
</div>
</section>
<section class="af-card p-5">
<div class="af-section-heading">Contact & Statutory Details</div>
<div class="mt-4 grid gap-4 md:grid-cols-2">
<label class="grid gap-1">
<span class="text-sm font-medium text-slate-600">Website</span>
<input class="af-input" name="website_url" value="{{ tenant.website_url or '' }}" placeholder="https://arrr.associates" />
</label>
<label class="grid gap-1">
<span class="text-sm font-medium text-slate-600">Contact Email</span>
<input class="af-input" name="contact_email" value="{{ tenant.contact_email or '' }}" placeholder="office@example.com" />
</label>
<label class="grid gap-1">
<span class="text-sm font-medium text-slate-600">Contact Mobile</span>
<input class="af-input" name="contact_mobile" value="{{ tenant.contact_mobile or '' }}" placeholder="+91 XXXXX XXXXX" />
</label>
<label class="grid gap-1">
<span class="text-sm font-medium text-slate-600">GSTIN</span>
<input class="af-input" name="gstin" value="{{ settings.gstin if settings else '' }}" />
</label>
<label class="grid gap-1">
<span class="text-sm font-medium text-slate-600">PAN</span>
<input class="af-input" name="pan" value="{{ settings.pan if settings else '' }}" />
</label>
<label class="grid gap-1 md:col-span-2">
<span class="text-sm font-medium text-slate-600">Address Line 1</span>
<input class="af-input" name="address_line1" value="{{ settings.address_line1 if settings else '' }}" />
</label>
<label class="grid gap-1 md:col-span-2">
<span class="text-sm font-medium text-slate-600">Address Line 2</span>
<input class="af-input" name="address_line2" value="{{ settings.address_line2 if settings else '' }}" />
</label>
<label class="grid gap-1"><span class="text-sm font-medium text-slate-600">City</span><input class="af-input" name="city" value="{{ settings.city if settings else '' }}" /></label>
<label class="grid gap-1"><span class="text-sm font-medium text-slate-600">State</span><input class="af-input" name="state" value="{{ settings.state if settings else '' }}" /></label>
<label class="grid gap-1"><span class="text-sm font-medium text-slate-600">PIN Code</span><input class="af-input" name="pin_code" value="{{ settings.pin_code if settings else '' }}" /></label>
</div>
</section>
<section class="af-card p-5">
<div class="af-section-heading">Invoice / Payment Defaults</div>
<div class="mt-4 grid gap-4 md:grid-cols-2">
<label class="grid gap-1"><span class="text-sm font-medium text-slate-600">Bank Name</span><input class="af-input" name="bank_name" value="{{ settings.bank_name if settings else '' }}" /></label>
<label class="grid gap-1"><span class="text-sm font-medium text-slate-600">Account Name</span><input class="af-input" name="bank_account_name" value="{{ settings.bank_account_name if settings else '' }}" /></label>
<label class="grid gap-1"><span class="text-sm font-medium text-slate-600">Account Number</span><input class="af-input" name="bank_account_number" value="{{ settings.bank_account_number if settings else '' }}" /></label>
<label class="grid gap-1"><span class="text-sm font-medium text-slate-600">IFSC</span><input class="af-input" name="bank_ifsc" value="{{ settings.bank_ifsc if settings else '' }}" /></label>
<label class="grid gap-1 md:col-span-2"><span class="text-sm font-medium text-slate-600">UPI ID</span><input class="af-input" name="upi_id" value="{{ settings.upi_id if settings else '' }}" /></label>
<label class="grid gap-1 md:col-span-2">
<span class="text-sm font-medium text-slate-600">Invoice Footer Text</span>
<textarea class="af-textarea min-h-24" name="invoice_footer_text">{{ settings.invoice_footer_text if settings else '' }}</textarea>
</label>
</div>
</section>
<div class="flex flex-wrap gap-3">
<button class="af-btn af-btn-primary" type="submit">Save Branding</button>
<a class="af-btn af-btn-secondary" href="/system-settings">Back to Setup</a>
</div>
</div>
<aside class="space-y-4">
<div class="af-card overflow-hidden">
<div class="p-5" style="background: {{ tenant.primary_color or '#2563eb' }}; color: white;">
<div class="flex items-center gap-3">
{% if tenant.logo_path %}
<img src="{{ tenant.logo_path }}" alt="Firm logo" class="h-12 w-12 rounded-2xl bg-white object-contain p-1" />
{% else %}
<div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-white/20 text-lg font-bold">AF</div>
{% endif %}
<div class="min-w-0">
<div class="truncate text-base font-semibold">{{ tenant.display_name or tenant.name }}</div>
<div class="truncate text-xs opacity-90">{{ branch.name if branch else 'Default Branch' }}</div>
</div>
</div>
</div>
<div class="space-y-3 p-5 text-sm text-slate-600">
<div><span class="font-medium text-slate-800">Email:</span> {{ tenant.contact_email or '-' }}</div>
<div><span class="font-medium text-slate-800">Mobile:</span> {{ tenant.contact_mobile or '-' }}</div>
<div><span class="font-medium text-slate-800">GSTIN:</span> {{ settings.gstin if settings and settings.gstin else '-' }}</div>
<div><span class="font-medium text-slate-800">PAN:</span> {{ settings.pan if settings and settings.pan else '-' }}</div>
</div>
</div>
<div class="af-card-muted p-5 text-sm text-slate-600">
<div class="font-semibold text-slate-900">Where this is used</div>
<p class="mt-2">This phase immediately applies firm logo, favicon and theme colours to the common layout. Invoice and client portal usage will be refined in later phases.</p>
</div>
</aside>
</div>
</form>
</div>
{% endblock %}