<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Zee Digital – Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">

<style>
:root{
    --bg:#f4f6fb;
    --card:#ffffff;
    --text:#0f172a;
    --muted:#64748b;
    --line:rgba(15,23,42,.10);
    --shadow:0 14px 30px rgba(0,0,0,.10);
    --shadow2:0 10px 20px rgba(0,0,0,.08);

    --sb:#0b1220;
    --sb2:#0f1a32;
    --accent:#3b5bfd;
    --accent2:#00c9b7;
    --hover:rgba(59,91,253,.12);
}

body{
    background:var(--bg);
    overflow:hidden;
    color:var(--text);
}

/* ===== LAYOUT ===== */
.app{ display:flex; height:100vh; }

/* ===== SIDEBAR (PRO) ===== */
.sidebar{
    width:285px;
    background:linear-gradient(180deg, var(--sb) 0%, var(--sb2) 100%);
    border-right:1px solid rgba(255,255,255,.08);
    padding:14px 12px;
    overflow:auto;
    box-shadow: var(--shadow2);
}

.brand-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 10px 14px 10px;
    border-bottom:1px solid rgba(255,255,255,.08);
    margin-bottom:12px;
}

.brand-logo{
    width:38px; height:38px;
    border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 10px 18px rgba(0,0,0,.18);
}
.brand-logo i{ color:#fff; font-size:20px; }

.brand-title{
    line-height:1.05;
}
.brand-title .name{
    font-size:18px;
    font-weight:800;
    color:#fff;
    letter-spacing:.2px;
}
.brand-title .tag{
    font-size:11px;
    color:rgba(255,255,255,.70);
}

.userbox{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    margin:10px 6px 14px 6px;
}
.userbox .avatar{
    width:40px; height:40px;
    border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, rgba(59,91,253,.35), rgba(0,201,183,.25));
    border:1px solid rgba(255,255,255,.16);
}
.userbox .avatar i{ color:#fff; font-size:18px; }
.userbox .uinfo strong{ color:#fff; font-size:13px; }
.userbox .uinfo small{ color:rgba(255,255,255,.70); display:block; font-size:11px; margin-top:2px; }

.sb-section{
    padding:6px 10px;
    margin:10px 6px 6px 6px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.6px;
    text-transform:uppercase;
    color:rgba(255,255,255,.55);
}

.menu{ padding:0 6px 10px 6px; }

.menu a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 10px;
    border-radius:12px;
    text-decoration:none;
    color:rgba(255,255,255,.85);
    margin-bottom:6px;
    border:1px solid transparent;
    transition:.18s ease;
}

.menu a .left{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}
.menu a .left i{
    width:22px;
    text-align:center;
    font-size:16px;
    color:rgba(255,255,255,.88);
}
.menu a .txt{
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.menu a:hover{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.10);
    transform:translateX(2px);
}

.menu a.active{
    background:var(--hover);
    border-color:rgba(59,91,253,.35);
    box-shadow:0 10px 18px rgba(0,0,0,.18);
}
.menu a.active .left i{ color:#fff; }
.menu a.active .txt{ color:#fff; }

.chev{
    display:flex;
    align-items:center;
    gap:6px;
    color:rgba(255,255,255,.65);
    font-size:12px;
}
.badge-pill{
    font-size:10px;
    padding:4px 8px;
    border-radius:999px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.80);
}

.submenu{
    margin:0 0 10px 0;
    padding:2px 0 6px 0;
}
.submenu a{
    padding:8px 10px 8px 42px;
    font-size:12px;
    margin-bottom:4px;
    border-radius:12px;
    color:rgba(255,255,255,.78);
}
.submenu a:hover{
    background:rgba(255,255,255,.06);
}

/* nice scrollbar */
.sidebar::-webkit-scrollbar{ width:10px; }
.sidebar::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.12);
    border-radius:10px;
    border:2px solid rgba(0,0,0,0);
    background-clip:padding-box;
}
.sidebar::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.18); }

/* ===== MAIN ===== */
.main{ flex:1; display:flex; flex-direction:column; }

/* ===== CONTENT ===== */
.content{
    padding:16px;
    overflow:auto;
}
.frame-wrap{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:16px;
    overflow:hidden;
    box-shadow:var(--shadow);
}
iframe{
    width:100%;
    height: calc(100vh - 32px);
    border:0;
}

/* ===== Mobile offcanvas sidebar (optional) ===== */
@media (max-width: 991px){
    body{ overflow:auto; }
    .app{ display:block; height:auto; }
    .sidebar{ display:none; }
    iframe{ height: 86vh; }
}
</style>
</head>

<body>

<div class="app">

    <!-- ================= SIDEBAR ================= -->
    <div class="sidebar">

        <div class="brand-row">
            <div class="brand-logo">
                <i class="bi bi-building"></i>
            </div>
            <div class="brand-title">
                <div class="name">Zee Digital</div>
                <div class="tag">HPS Installment POS</div>
            </div>
        </div>

        <div class="userbox">
            <div class="avatar"><i class="bi bi-geo-alt"></i></div>
            <div class="uinfo">
                <strong>Chakwal</strong>
                <small>0543-551144</small>
            </div>
        </div>

        <div class="sb-section">Main</div>

        <div class="menu" id="sbMenu">

            <a href="dashboard.php" target="myframe" class="navlink">
                <span class="left">
                    <i class="bi bi-speedometer2"></i>
                    <span class="txt">Dashboard</span>
                </span>
                <span class="chev"><i class="bi bi-chevron-right"></i></span>
            </a>

            <a href="hps_sale_customer.php" target="myframe" class="navlink">
                <span class="left">
                    <i class="bi bi-plus-circle"></i>
                    <span class="txt">New Sale</span>
                </span>
                <span class="chev"><i class="bi bi-chevron-right"></i></span>
            </a>

            <a href="hps_sale_pending.php" target="myframe" class="navlink">
                <span class="left">
                    <i class="bi bi-hourglass-split"></i>
                    <span class="txt">Pending Approvals</span>
                </span>
                <span class="badge-pill">Pending</span>
            </a>

            <a href="hps_sale_approved.php" target="myframe" class="navlink">
                <span class="left">
                    <i class="bi bi-check2-circle"></i>
                    <span class="txt">Approved Sales</span>
                </span>
                <span class="chev"><i class="bi bi-chevron-right"></i></span>
            </a>

            <a href="hps_customers.php" target="myframe" class="navlink">
                <span class="left">
                    <i class="bi bi-people"></i>
                    <span class="txt">Customers</span>
                </span>
                <span class="chev"><i class="bi bi-chevron-right"></i></span>
            </a>

            <a href="hps_purchase.php" target="myframe" class="navlink">
                <span class="left">
                    <i class="bi bi-cart-plus"></i>
                    <span class="txt">Purchase</span>
                </span>
                <span class="chev"><i class="bi bi-chevron-right"></i></span>
            </a>

            <a href="hps_products.php" target="myframe" class="navlink">
                <span class="left">
                    <i class="bi bi-box-seam"></i>
                    <span class="txt">Products</span>
                </span>
                <span class="chev"><i class="bi bi-chevron-right"></i></span>
            </a>

            <a data-bs-toggle="collapse" href="#expMenu" role="button" class="navlink">
                <span class="left">
                    <i class="bi bi-receipt"></i>
                    <span class="txt">Expense</span>
                </span>
                <span class="chev"><span class="badge-pill">3</span> <i class="bi bi-chevron-down"></i></span>
            </a>
            <div class="collapse submenu" id="expMenu">
                <a href="hps_expense_add.php" target="myframe" class="navlink">
                    <span class="left"><i class="bi bi-plus-square"></i><span class="txt">Add Expense</span></span>
                    <span class="chev"><i class="bi bi-chevron-right"></i></span>
                </a>
                <a href="hps_expense_heads.php" target="myframe" class="navlink">
                    <span class="left"><i class="bi bi-diagram-3"></i><span class="txt">Add Heads</span></span>
                    <span class="chev"><i class="bi bi-chevron-right"></i></span>
                </a>
                <a href="hps_expense_report.php" target="myframe" class="navlink">
                    <span class="left"><i class="bi bi-graph-up"></i><span class="txt">Expense Report</span></span>
                    <span class="chev"><i class="bi bi-chevron-right"></i></span>
                </a>
            </div>

            <a href="hps_supplier_payment.php" target="myframe" class="navlink">
                <span class="left">
                    <i class="bi bi-cash-coin"></i>
                    <span class="txt">Payment To Supplier</span>
                </span>
                <span class="chev"><i class="bi bi-chevron-right"></i></span>
            </a>

            <a href="hps_suppliers.php" target="myframe" class="navlink">
                <span class="left">
                    <i class="bi bi-truck"></i>
                    <span class="txt">Suppliers</span>
                </span>
                <span class="chev"><i class="bi bi-chevron-right"></i></span>
            </a>

            <a data-bs-toggle="collapse" href="#instMenu" role="button" class="navlink">
                <span class="left">
                    <i class="bi bi-calendar2-check"></i>
                    <span class="txt">Installments</span>
                </span>
                <span class="chev"><span class="badge-pill">2</span> <i class="bi bi-chevron-down"></i></span>
            </a>
            <div class="collapse submenu" id="instMenu">
                <a href="hps_sale_approved.php" target="myframe" class="navlink">
                    <span class="left"><i class="bi bi-wallet2"></i><span class="txt">Collect Installment</span></span>
                    <span class="chev"><i class="bi bi-chevron-right"></i></span>
                </a>
                <a href="hps_customer_statement_select.php" target="myframe" class="navlink">
                    <span class="left"><i class="bi bi-file-earmark-text"></i><span class="txt">Customer Statement</span></span>
                    <span class="chev"><i class="bi bi-chevron-right"></i></span>
                </a>
            </div>

            <a data-bs-toggle="collapse" href="#cashMenu" role="button" class="navlink">
                <span class="left">
                    <i class="bi bi-safe2"></i>
                    <span class="txt">Cash Book</span>
                </span>
                <span class="chev"><span class="badge-pill">4</span> <i class="bi bi-chevron-down"></i></span>
            </a>
            <div class="collapse submenu" id="cashMenu">
                <a href="hps_cash_handover.php" target="myframe" class="navlink">
                    <span class="left"><i class="bi bi-arrow-left-right"></i><span class="txt">Cash Transfer</span></span>
                    <span class="chev"><i class="bi bi-chevron-right"></i></span>
                </a>
                <a href="hps_cash_position.php" target="myframe" class="navlink">
                    <span class="left"><i class="bi bi-cash-stack"></i><span class="txt">Cash Position</span></span>
                    <span class="chev"><i class="bi bi-chevron-right"></i></span>
                </a>
                <a href="hps_bank_transaction.php" target="myframe" class="navlink">
                    <span class="left"><i class="bi bi-bank"></i><span class="txt">Bank Transactions</span></span>
                    <span class="chev"><i class="bi bi-chevron-right"></i></span>
                </a>
                <a href="hps_cashbook_report.php" target="myframe" class="navlink">
                    <span class="left"><i class="bi bi-journal-text"></i><span class="txt">Cashbook Report</span></span>
                    <span class="chev"><i class="bi bi-chevron-right"></i></span>
                </a>
            </div>

            <div class="sb-section">Team & Reports</div>

            <a href="hps_salesperson.php" target="myframe" class="navlink">
                <span class="left">
                    <i class="bi bi-person-badge"></i>
                    <span class="txt">Sales Staff</span>
                </span>
                <span class="chev"><i class="bi bi-chevron-right"></i></span>
            </a>

            <a data-bs-toggle="collapse" href="#repMenu" role="button" class="navlink">
                <span class="left">
                    <i class="bi bi-bar-chart"></i>
                    <span class="txt">Reports</span>
                </span>
                <span class="chev"><span class="badge-pill">8</span> <i class="bi bi-chevron-down"></i></span>
            </a>
            <div class="collapse submenu" id="repMenu">
                <a href="rpt_sales.php" target="myframe" class="navlink">
                    <span class="left"><i class="bi bi-graph-up-arrow"></i><span class="txt">Sale Report</span></span>
                    <span class="chev"><i class="bi bi-chevron-right"></i></span>
                </a>
                <a href="rpt_installment_due.php" target="myframe" class="navlink">
                    <span class="left"><i class="bi bi-clock-history"></i><span class="txt">Installment Due Report</span></span>
                    <span class="chev"><i class="bi bi-chevron-right"></i></span>
                </a>
                <a href="hps_salesperson_call_report.php" target="myframe" class="navlink">
                    <span class="left"><i class="bi bi-telephone"></i><span class="txt">Call Report</span></span>
                    <span class="chev"><i class="bi bi-chevron-right"></i></span>
                </a>
                <a href="hps_low_stock_report.php" target="myframe" class="navlink">
                    <span class="left"><i class="bi bi-exclamation-triangle"></i><span class="txt">Low Stock Report</span></span>
                    <span class="chev"><i class="bi bi-chevron-right"></i></span>
                </a>
                <a href="hps_supplier_ledger.php" target="myframe" class="navlink">
                    <span class="left"><i class="bi bi-journal-check"></i><span class="txt">Supplier Ledger</span></span>
                    <span class="chev"><i class="bi bi-chevron-right"></i></span>
                </a>
                <a href="hps_default_report.php" target="myframe" class="navlink">
                    <span class="left"><i class="bi bi-person-x"></i><span class="txt">Defaulters Report</span></span>
                    <span class="chev"><i class="bi bi-chevron-right"></i></span>
                </a>
                <a href="hps_profit_report.php" target="myframe" class="navlink">
                    <span class="left"><i class="bi bi-currency-exchange"></i><span class="txt">Profit Report</span></span>
                    <span class="chev"><i class="bi bi-chevron-right"></i></span>
                </a>
                <a href="hps_stock_adjust.php" target="myframe" class="navlink">
                    <span class="left"><i class="bi bi-sliders"></i><span class="txt">Stock Adjustment</span></span>
                    <span class="chev"><i class="bi bi-chevron-right"></i></span>
                </a>
            </div>

        </div>

    </div>

    <!-- ================= MAIN ================= -->
    <div class="main">
        <div class="content">
            <div class="frame-wrap">
                <iframe name="myframe" src="dashboard.php"></iframe>
            </div>
        </div>
    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
// Active highlight on click
document.querySelectorAll('#sbMenu a.navlink').forEach(a=>{
  a.addEventListener('click', function(){
    // only set active for real links (ignore collapse toggles)
    if(this.getAttribute('href') && this.getAttribute('href').startsWith('#')) return;
    document.querySelectorAll('#sbMenu a.navlink').forEach(x=>x.classList.remove('active'));
    this.classList.add('active');
  });
});
</script>

</body>
</html>