templates/admin/wallet.html

<div class="admin-section" id="section-wallet">
    <div class="welcome-banner compact admin-banner">
        <div class="welcome-text">
            <h1>Wallet Management</h1>
            <p>User account management with profile insights, print/topup history, and wallet controls.</p>
        </div>
        <div class="dashboard-controls">
            <button class="btn-premium small" onclick="loadUserWallets()">
                <i class="fa-solid fa-rotate"></i> Refresh
            </button>
        </div>
        <div class="admin-banner-decoration"></div>
    </div>

    <div class="wallet-kpi-grid wallet-kpi-grid-inline">
        <div class="wallet-kpi-card">
            <div class="wallet-kpi-accent"></div>
            <div class="wallet-kpi-label">Total Accounts</div>
            <div class="wallet-kpi-value" id="wallet-total-users">0</div>
        </div>
        <div class="wallet-kpi-card">
            <div class="wallet-kpi-accent balance"></div>
            <div class="wallet-kpi-label">Total Wallet Balance</div>
            <div class="wallet-kpi-value" id="wallet-total-balance">₹0</div>
        </div>
        <div class="wallet-kpi-card">
            <div class="wallet-kpi-accent activity"></div>
            <div class="wallet-kpi-label">Recent Activity (24h)</div>
            <div class="wallet-kpi-value" id="wallet-recent-activity">0</div>
        </div>
        <div class="wallet-kpi-card">
            <div class="wallet-kpi-accent low-balance"></div>
            <div class="wallet-kpi-label">Low Balance Users (&lt; ₹100)</div>
            <div class="wallet-kpi-value" id="wallet-low-balance">0</div>
        </div>
    </div>

    <div class="wallet-controls wallet-controls-inline">
        <div class="wallet-search-wrap wallet-search-wrap-inline">
            <i class="fa-solid fa-search"></i>
            <input type="text" id="wallet-search" placeholder="Search by user name, phone, or ID" class="input-hover-effect">
        </div>
        <select id="wallet-balance-filter" class="wallet-filter-select input-hover-effect">
            <option value="all">All Balances</option>
            <option value="low">Low (&lt; ₹100)</option>
            <option value="medium">₹100 - ₹1000</option>
            <option value="high">₹1000+</option>
        </select>
        <select id="wallet-sort" class="wallet-sort-select input-hover-effect">
            <option value="balance-desc">Highest Balance</option>
            <option value="balance-asc">Lowest Balance</option>
            <option value="name-asc">Name (A-Z)</option>
            <option value="recent">Latest Activity</option>
        </select>
    </div>

    <div class="wallet-layout animate-up">
        <div class="wallet-accounts-panel">
            <div class="wallet-panel-head">
                <h3>
                    <i class="fa-solid fa-users"></i>
                    Manage User Accounts
                </h3>
                <span id="wallet-result-count">0 users</span>
            </div>
            <div id="wallet-cards-grid" class="wallet-cards-grid"></div>
        </div>
    </div>

    <div id="wallet-manage-modal" class="wallet-modal manage">
        <div class="modal-content wallet-manage-modal">
            <div class="wallet-modal-head">
                <h3 id="wallet-manage-title">Manage Wallet</h3>
                <button class="wallet-modal-close" onclick="closeWalletManageModal()"><i class="fa-solid fa-xmark"></i></button>
            </div>
            <div class="wallet-manage-fields">
                <div class="wallet-manage-user" id="wallet-manage-user"></div>
                <div class="wallet-manage-balance" id="wallet-manage-current-balance"></div>
                <div class="wallet-manage-grid">
                    <label>Action
                        <select id="wallet-manage-action">
                            <option value="credit">Credit</option>
                            <option value="debit">Debit</option>
                        </select>
                    </label>
                    <label>Amount
                        <input type="number" id="wallet-manage-amount" min="1" step="0.01" placeholder="Enter amount">
                    </label>
                </div>
                <label>Reason
                    <textarea id="wallet-manage-reason" placeholder="Write reason for wallet update"></textarea>
                </label>
                <p id="wallet-manage-feedback" class="wallet-manage-feedback"></p>
                <div class="wallet-manage-actions">
                    <button class="ra-btn" onclick="closeWalletManageModal()">Cancel</button>
                    <button class="ra-btn primary" onclick="submitWalletManage()"><i class="fa-solid fa-check"></i> Update Wallet</button>
                </div>
            </div>
        </div>
    </div>
</div>