<style>
.sidebar{
    width:220px;
    background:#0a58ca;
    color:#fff;
}
.sidebar a{
    display:block;
    padding:10px 15px;
    color:#dbe7ff;
    text-decoration:none;
}
.sidebar a:hover{
    background:#084298;
    color:#fff;
}
.menu-title{
    padding:10px 15px;
    font-size:12px;
    text-transform:uppercase;
    color:#cfe2ff;
}
</style>

<div class="sidebar">

    <div class="menu-title">Dashboard</div>
    <a href="#" onclick="loadPage('dashboard.php')">📊 Overview</a>

    <div class="menu-title">Customers</div>
    <a href="#" onclick="loadPage('hps_customers.php')">👥 Customers</a>
    <a href="#" onclick="loadPage('hps_customer_payment.php')">💳 Installments</a>
    <a href="#" onclick="loadPage('hps_customer_statement.php')">📄 Statement</a>

    <div class="menu-title">Sales</div>
    <a href="#" onclick="loadPage('hps_sale_new.php')">➕ New Sale</a>
    <a href="#" onclick="loadPage('hps_sale_pending.php')">⏳ Pending</a>
    <a href="#" onclick="loadPage('hps_sale_approved.php')">✅ Approved</a>

    <div class="menu-title">Accounts</div>
    <a href="#" onclick="loadPage('hps_payment.php')">💸 Payments</a>
    <a href="#" onclick="loadPage('hps_receipt.php')">📥 Receipts</a>

    <div class="menu-title">Stock</div>
    <a href="#" onclick="loadPage('hps_stock_report.php')">📦 Stock Report</a>

    <div class="menu-title">Suppliers</div>
    <a href="#" onclick="loadPage('hps_suppliers.php')">🚚 Suppliers</a>
    <a href="#" onclick="loadPage('hps_supplier_payment.php')">💰 Supplier Payment</a>

    <a href="logout.php">🚪 Logout</a>

</div>
