312 lines
19 KiB
HTML
312 lines
19 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<div class="row mb-4 align-items-center">
|
|
<div class="col-md-6">
|
|
<h1 class="h3 mb-0 text-gray-800">{% trans "System Settings" %}</h1>
|
|
<p class="text-muted">{% trans "Manage your business profile and payments." %}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{% if messages %}
|
|
<div class="row">
|
|
<div class="col-12">
|
|
{% for message in messages %}
|
|
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<ul class="nav nav-pills mb-4" id="settingsTabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active fw-bold px-4" id="profile-tab" data-bs-toggle="pill" data-bs-target="#profile" type="button" role="tab">
|
|
<i class="bi bi-building me-2"></i>{% trans "Business Profile" %}
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link fw-bold px-4" id="payments-tab" data-bs-toggle="pill" data-bs-target="#payments" type="button" role="tab">
|
|
<i class="bi bi-credit-card me-2"></i>{% trans "Payment Methods" %}
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content" id="settingsTabsContent">
|
|
<!-- Business Profile Tab -->
|
|
<div class="tab-pane fade show active" id="profile" role="tabpanel">
|
|
<div class="row">
|
|
<div class="col-lg-8">
|
|
<div class="card shadow-sm border-0 glassmorphism mb-4">
|
|
<div class="card-header bg-transparent border-0 py-3">
|
|
<h5 class="card-title mb-0 fw-bold">{% trans "Business Profile" %}</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="post" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
<div class="row g-3">
|
|
<div class="col-md-12 text-center mb-3">
|
|
<label class="form-label d-block fw-semibold">{% trans "Business Logo" %}</label>
|
|
{% if settings.logo %}
|
|
<img src="{{ settings.logo.url }}" alt="Logo" class="img-thumbnail mb-2" style="max-height: 100px;">
|
|
{% else %}
|
|
<div class="bg-light border rounded d-inline-flex align-items-center justify-content-center mb-2" style="width: 100px; height: 100px;">
|
|
<i class="bi bi-image text-muted fs-1"></i>
|
|
</div>
|
|
{% endif %}
|
|
<input type="file" name="logo" class="form-control form-control-sm mx-auto" style="max-width: 300px;" accept="image/*">
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<label class="form-label fw-semibold">{% trans "Business Name" %}</label>
|
|
<input type="text" name="business_name" class="form-control" value="{{ settings.business_name }}" required>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-semibold">{% trans "Email Address" %}</label>
|
|
<input type="email" name="email" class="form-control" value="{{ settings.email }}">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-semibold">{% trans "Phone Number" %}</label>
|
|
<input type="text" name="phone" class="form-control" value="{{ settings.phone }}">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-semibold">{% trans "VAT Number" %}</label>
|
|
<input type="text" name="vat_number" class="form-control" value="{{ settings.vat_number }}">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-semibold">{% trans "Registration Number" %}</label>
|
|
<input type="text" name="registration_number" class="form-control" value="{{ settings.registration_number }}">
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label fw-semibold">{% trans "Address" %}</label>
|
|
<textarea name="address" class="form-control" rows="3">{{ settings.address }}</textarea>
|
|
</div>
|
|
|
|
<hr class="my-4">
|
|
|
|
<h5 class="fw-bold mb-3">{% trans "Financial Preferences" %}</h5>
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-semibold">{% trans "Currency Symbol" %}</label>
|
|
<input type="text" name="currency_symbol" class="form-control" value="{{ settings.currency_symbol }}" required>
|
|
<div class="form-text">{% trans "e.g., OMR, $, £, SAR" %}</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-semibold">{% trans "Default Tax Rate (%)" %}</label>
|
|
<input type="number" step="0.01" name="tax_rate" class="form-control" value="{{ settings.tax_rate }}" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 pt-3 border-top d-flex justify-content-end">
|
|
<button type="submit" class="btn btn-primary px-4 py-2">
|
|
<i class="bi bi-check-circle me-2"></i> {% trans "Save Changes" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4">
|
|
<div class="card shadow-sm border-0 glassmorphism mb-4">
|
|
<div class="card-header bg-transparent border-0 py-3">
|
|
<h5 class="card-title mb-0 fw-bold">{% trans "Help & Support" %}</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="text-muted small">
|
|
{% trans "Need help configuring your smart admin? Check our documentation or contact support." %}
|
|
</p>
|
|
<a href="#" class="btn btn-outline-secondary w-100 btn-sm">
|
|
<i class="bi bi-question-circle me-1"></i> {% trans "Documentation" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card shadow-sm border-0 glassmorphism bg-light">
|
|
<div class="card-body text-center py-4">
|
|
<i class="bi bi-info-circle fs-1 text-primary mb-3"></i>
|
|
<h6 class="fw-bold">{% trans "Smart Admin Version" %}</h6>
|
|
<p class="text-muted mb-0">v2.1.0-Meezan</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Payment Methods Tab -->
|
|
<div class="tab-pane fade" id="payments" role="tabpanel">
|
|
<div class="card shadow-sm border-0 glassmorphism">
|
|
<div class="card-header bg-transparent border-0 py-3 d-flex justify-content-between align-items-center">
|
|
<h5 class="card-title mb-0 fw-bold">{% trans "Payment Methods" %}</h5>
|
|
<button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addPaymentModal">
|
|
<i class="bi bi-plus-lg me-1"></i> {% trans "Add Method" %}
|
|
</button>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle mb-0">
|
|
<thead class="bg-light">
|
|
<tr>
|
|
<th class="ps-4">{% trans "Name (EN)" %}</th>
|
|
<th>{% trans "Name (AR)" %}</th>
|
|
<th>{% trans "Status" %}</th>
|
|
<th class="text-end pe-4">{% trans "Actions" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for pm in payment_methods %}
|
|
<tr>
|
|
<td class="ps-4 fw-semibold">{{ pm.name_en }}</td>
|
|
<td>{{ pm.name_ar }}</td>
|
|
<td>
|
|
{% if pm.is_active %}
|
|
<span class="badge bg-success-soft text-success">{% trans "Active" %}</span>
|
|
{% else %}
|
|
<span class="badge bg-danger-soft text-danger">{% trans "Inactive" %}</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="text-end pe-4">
|
|
<button class="btn btn-sm btn-light text-primary me-1" data-bs-toggle="modal" data-bs-target="#editPaymentModal{{ pm.id }}">
|
|
<i class="bi bi-pencil"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-light text-danger" data-bs-toggle="modal" data-bs-target="#deletePaymentModal{{ pm.id }}">
|
|
<i class="bi bi-trash"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Edit Modal -->
|
|
<div class="modal fade" id="editPaymentModal{{ pm.id }}" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content border-0">
|
|
<form action="{% url 'edit_payment_method' pm.id %}" method="post">
|
|
{% csrf_token %}
|
|
<div class="modal-header">
|
|
<h5 class="modal-title fw-bold">{% trans "Edit Payment Method" %}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">{% trans "Name (English)" %}</label>
|
|
<input type="text" name="name_en" class="form-control" value="{{ pm.name_en }}" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">{% trans "Name (Arabic)" %}</label>
|
|
<input type="text" name="name_ar" class="form-control" value="{{ pm.name_ar }}" required>
|
|
</div>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" name="is_active" {% if pm.is_active %}checked{% endif %}>
|
|
<label class="form-check-label">{% trans "Active" %}</label>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer bg-light border-0">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
|
|
<button type="submit" class="btn btn-primary">{% trans "Save Changes" %}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete Modal -->
|
|
<div class="modal fade" id="deletePaymentModal{{ pm.id }}" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content border-0">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title fw-bold">{% trans "Confirm Delete" %}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>{% trans "Are you sure you want to delete" %} <strong>{{ pm.name_en }}</strong>?</p>
|
|
<div class="alert alert-warning mb-0">
|
|
<i class="bi bi-exclamation-triangle me-2"></i>
|
|
{% trans "Deleting this will not affect historical records but it will no longer be available for new transactions." %}
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer bg-light border-0">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
|
|
<a href="{% url 'delete_payment_method' pm.id %}" class="btn btn-danger">{% trans "Delete" %}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="4" class="text-center py-5">
|
|
<div class="text-muted">
|
|
<i class="bi bi-credit-card fs-1 d-block mb-3"></i>
|
|
{% trans "No payment methods found." %}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Payment Method Modal -->
|
|
<div class="modal fade" id="addPaymentModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content border-0">
|
|
<form action="{% url 'add_payment_method' %}" method="post">
|
|
{% csrf_token %}
|
|
<div class="modal-header">
|
|
<h5 class="modal-title fw-bold">{% trans "Add Payment Method" %}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">{% trans "Name (English)" %}</label>
|
|
<input type="text" name="name_en" class="form-control" required placeholder="e.g. Bank Transfer">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">{% trans "Name (Arabic)" %}</label>
|
|
<input type="text" name="name_ar" class="form-control" required placeholder="e.g. تحويل بنكي">
|
|
</div>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" name="is_active" checked>
|
|
<label class="form-check-label">{% trans "Active" %}</label>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer bg-light border-0">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
|
|
<button type="submit" class="btn btn-primary">{% trans "Create Method" %}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
// Persist active tab on reload
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var hash = window.location.hash;
|
|
if (hash) {
|
|
var triggerEl = document.querySelector('button[data-bs-target="' + hash + '"]');
|
|
if (triggerEl) {
|
|
var tab = new bootstrap.Tab(triggerEl);
|
|
tab.show();
|
|
}
|
|
}
|
|
|
|
var tabEls = document.querySelectorAll('button[data-bs-toggle="pill"]');
|
|
tabEls.forEach(function(el) {
|
|
el.addEventListener('shown.bs.tab', function(event) {
|
|
window.location.hash = event.target.getAttribute('data-bs-target');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |