haikal/templates/ledger/coa_accounts/account_list.html

{% extends "base.html" %}
{% load i18n custom_filters %}
{% block title %}{% trans "Accounts" %}{% endblock title %}
{% block accounts %}
    <a class="nav-link active fw-bold">
        {% trans "Accounts"|capfirst %}
        <span class="visually-hidden">(current)</span>
    </a>
{% endblock %}
{% block content %}
    <div class="row mt-4">
        <div class="d-flex justify-content-between mb-2">
            <h3 class=""><i class="fa-solid fa-book"></i> {% trans "Accounts" %}</h3>
            <a href="{% url 'account_create' request.dealer.slug %}" class="btn btn-md btn-phoenix-primary"><i class="fa fa-plus me-2"></i>{% trans 'New Account' %}</a>
        </div>

        <!-- Account Type Tabs -->
        <div class="mb-4">
            <ul class="nav nav-tabs" id="accountTypeTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="assets-tab" data-bs-toggle="tab" data-bs-target="#assets" type="button" role="tab" aria-controls="assets" aria-selected="true">
                        <i class="fas fa-wallet me-2"></i>{% trans "Assets" %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="cogs-tab" data-bs-toggle="tab" data-bs-target="#cogs" type="button" role="tab" aria-controls="cogs" aria-selected="false">
                        <i class="fas fa-boxes me-2"></i>{% trans "COGS" %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="capital-tab" data-bs-toggle="tab" data-bs-target="#capital" type="button" role="tab" aria-controls="capital" aria-selected="false">
                        <i class="fas fa-landmark me-2"></i>{% trans "Capital" %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="income-tab" data-bs-toggle="tab" data-bs-target="#income" type="button" role="tab" aria-controls="income" aria-selected="false">
                        <i class="fas fa-money-bill-wave me-2"></i>{% trans "Income" %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="expenses-tab" data-bs-toggle="tab" data-bs-target="#expenses" type="button" role="tab" aria-controls="expenses" aria-selected="false">
                        <i class="fas fa-receipt me-2"></i>{% trans "Expenses" %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="liabilities-tab" data-bs-toggle="tab" data-bs-target="#liabilities" type="button" role="tab" aria-controls="liabilities" aria-selected="false">
                        <i class="fas fa-receipt me-2"></i>{% trans "Liabilities" %}
                    </button>
                </li>
            </ul>

            <div class="tab-content p-3 border border-top-0 rounded-bottom" id="accountTypeTabsContent">
                <!-- Assets Tab -->
                <div class="tab-pane fade show active" id="assets" role="tabpanel" aria-labelledby="assets-tab">
                    {% include "partials/search_box.html" %}
                    {% with accounts=accounts|filter_by_role:"asset_" %}
                        {% include "ledger/coa_accounts/partials/account_table.html" %}
                    {% endwith %}
                </div>

                <!-- COGS Tab -->
                <div class="tab-pane fade" id="cogs" role="tabpanel" aria-labelledby="cogs-tab">
                    {% include "partials/search_box.html" %}
                    {% with accounts=accounts|filter_by_role:"cogs" %}
                        {% include "ledger/coa_accounts/partials/account_table.html" %}
                    {% endwith %}
                </div>

                <!-- Capital Tab -->
                <div class="tab-pane fade" id="capital" role="tabpanel" aria-labelledby="capital-tab">
                    {% include "partials/search_box.html" %}
                    {% with accounts=accounts|filter_by_role:"eq_" %}
                        {% include "ledger/coa_accounts/partials/account_table.html" %}
                    {% endwith %}
                </div>

                <!-- Income Tab -->
                <div class="tab-pane fade" id="income" role="tabpanel" aria-labelledby="income-tab">
                    {% include "partials/search_box.html" %}
                    {% with accounts=accounts|filter_by_role:"in_" %}
                        {% include "ledger/coa_accounts/partials/account_table.html" %}
                    {% endwith %}
                </div>

                <!-- Expenses Tab -->
                <div class="tab-pane fade" id="expenses" role="tabpanel" aria-labelledby="expenses-tab">
                    {% include "partials/search_box.html" %}
                    {% with accounts=accounts|filter_by_role:"ex_" %}
                        {% include "ledger/coa_accounts/partials/account_table.html" %}
                    {% endwith %}
                </div>
                <!-- Liabilities Tab -->
                <div class="tab-pane fade" id="liabilities" role="tabpanel" aria-labelledby="liabilities-tab">
                    {% include "partials/search_box.html" %}
                    {% with accounts=accounts|filter_by_role:"lia_" %}
                        {% include "ledger/coa_accounts/partials/account_table.html" %}
                    {% endwith %}
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Modal (moved outside tables) -->
    <div class="modal fade" id="deleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">
                        {% trans "Delete Account" %}
                        <span data-feather="alert-circle"></span>
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <p class="mb-0 text-danger fw-bold">
                        {% trans "Are you sure you want to delete this Account?" %}
                    </p>
                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-phoenix-secondary btn-sm" data-bs-dismiss="modal">
                            {% trans "No" %}
                        </button>
                        <a id="deleteAccountBtn" type="button" class="btn btn-phoenix-danger btn-sm" href="#">
                            {% trans "Yes" %}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block customerJS %}
    <script>
    // Handle delete modal for all tables
        document.addEventListener('DOMContentLoaded', function() {
            var deleteModal = document.getElementById('deleteModal');
            deleteModal.addEventListener('show.bs.modal', function(event) {
                var button = event.relatedTarget;
                var accountId = button.closest('tr').getAttribute('data-account-id');
                document.getElementById('deleteAccountBtn').href = `/accounts/delete/${accountId}/`;
            });
        });
    </script>
{% endblock %}