<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ERP Dashboard</title>
    <link rel="stylesheet" href="{{ url('public/june_assets/css/bootstrap.min.css') }}">
  </head>
  <body class="bg-body-tertiary">
    <nav class="navbar navbar-expand-lg bg-body border-bottom sticky-top">
      <div class="container-fluid">
        <button class="btn btn-outline-secondary d-lg-none me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar" aria-controls="sidebar">
          Menu
        </button>
        <a class="navbar-brand fw-semibold" href="index.html">ERP</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#topbar" aria-controls="topbar" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="topbar">
          <form class="d-flex ms-lg-4 my-3 my-lg-0 w-100" role="search">
            <input class="form-control" type="search" placeholder="Search records" aria-label="Search">
          </form>
          <div class="dropdown ms-lg-3">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
              Admin
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
              <li><a class="dropdown-item" href="blank.html">General page</a></li>
              <li><a class="dropdown-item" href="#">Settings</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" href="#">Sign out</a></li>
            </ul>
          </div>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <aside class="col-lg-2 d-none d-lg-block bg-body border-end min-vh-100 p-3">
          <div class="list-group list-group-flush">
            <a class="list-group-item list-group-item-action active" href="index.html">Dashboard</a>
            <a class="list-group-item list-group-item-action" href="blank.html">General Page</a>
            <a class="list-group-item list-group-item-action" href="#">Customers</a>
            <a class="list-group-item list-group-item-action" href="#">Invoices</a>
            <a class="list-group-item list-group-item-action" href="#">Reports</a>
            <a class="list-group-item list-group-item-action" href="#">Settings</a>
          </div>
        </aside>

        <div class="offcanvas offcanvas-start d-lg-none" tabindex="-1" id="sidebar" aria-labelledby="sidebarLabel">
          <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="sidebarLabel">ERP</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
          </div>
          <div class="offcanvas-body">
            <div class="list-group list-group-flush">
              <a class="list-group-item list-group-item-action active" href="index.html">Dashboard</a>
              <a class="list-group-item list-group-item-action" href="blank.html">General Page</a>
              <a class="list-group-item list-group-item-action" href="#">Customers</a>
              <a class="list-group-item list-group-item-action" href="#">Invoices</a>
              <a class="list-group-item list-group-item-action" href="#">Reports</a>
              <a class="list-group-item list-group-item-action" href="#">Settings</a>
            </div>
          </div>
        </div>

        <main class="col-lg-10 p-4">
          <div class="d-flex flex-column flex-md-row justify-content-between gap-3 mb-4">
            <div>
              <h1 class="h3 mb-1">Dashboard</h1>
              <p class="text-secondary mb-0">Business overview and recent activity</p>
            </div>
            <div class="d-flex gap-2">
              <button class="btn btn-outline-secondary" type="button">Export</button>
              <button class="btn btn-primary" type="button">New Record</button>
            </div>
          </div>

          <div class="row g-3 mb-4">
            <div class="col-sm-6 col-xl-3">
              <div class="card h-100">
                <div class="card-body">
                  <p class="text-secondary mb-1">Revenue</p>
                  <h2 class="h4 mb-1">GHS 128,400</h2>
                  <span class="badge text-bg-success">Up 12%</span>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-xl-3">
              <div class="card h-100">
                <div class="card-body">
                  <p class="text-secondary mb-1">Orders</p>
                  <h2 class="h4 mb-1">1,284</h2>
                  <span class="badge text-bg-primary">Today</span>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-xl-3">
              <div class="card h-100">
                <div class="card-body">
                  <p class="text-secondary mb-1">Pending</p>
                  <h2 class="h4 mb-1">38</h2>
                  <span class="badge text-bg-warning">Review</span>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-xl-3">
              <div class="card h-100">
                <div class="card-body">
                  <p class="text-secondary mb-1">Customers</p>
                  <h2 class="h4 mb-1">864</h2>
                  <span class="badge text-bg-info">Active</span>
                </div>
              </div>
            </div>
          </div>

          <div class="row g-4">
            <div class="col-xl-8">
              <div class="card">
                <div class="card-header bg-body d-flex justify-content-between align-items-center">
                  <h2 class="h5 mb-0">Recent Transactions</h2>
                  <a class="btn btn-sm btn-outline-primary" href="#">View all</a>
                </div>
                <div class="table-responsive">
                  <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                      <tr>
                        <th scope="col">Reference</th>
                        <th scope="col">Customer</th>
                        <th scope="col">Status</th>
                        <th scope="col" class="text-end">Amount</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>INV-1024</td>
                        <td>North Ridge Ltd</td>
                        <td><span class="badge text-bg-success">Paid</span></td>
                        <td class="text-end">GHS 12,000</td>
                      </tr>
                      <tr>
                        <td>INV-1025</td>
                        <td>Adenta Stores</td>
                        <td><span class="badge text-bg-warning">Pending</span></td>
                        <td class="text-end">GHS 4,850</td>
                      </tr>
                      <tr>
                        <td>INV-1026</td>
                        <td>Osu Supplies</td>
                        <td><span class="badge text-bg-secondary">Draft</span></td>
                        <td class="text-end">GHS 9,300</td>
                      </tr>
                      <tr>
                        <td>INV-1027</td>
                        <td>Labone Foods</td>
                        <td><span class="badge text-bg-success">Paid</span></td>
                        <td class="text-end">GHS 7,600</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>

            <div class="col-xl-4">
              <div class="card mb-4">
                <div class="card-header bg-body">
                  <h2 class="h5 mb-0">Tasks</h2>
                </div>
                <div class="list-group list-group-flush">
                  <label class="list-group-item d-flex gap-3">
                    <input class="form-check-input flex-shrink-0" type="checkbox" value="">
                    <span>Approve purchase requests</span>
                  </label>
                  <label class="list-group-item d-flex gap-3">
                    <input class="form-check-input flex-shrink-0" type="checkbox" value="">
                    <span>Review pending invoices</span>
                  </label>
                  <label class="list-group-item d-flex gap-3">
                    <input class="form-check-input flex-shrink-0" type="checkbox" value="">
                    <span>Send stock report</span>
                  </label>
                </div>
              </div>

              <div class="card">
                <div class="card-body">
                  <h2 class="h5">Monthly Target</h2>
                  <p class="text-secondary">Current progress toward the sales target.</p>
                  <div class="progress" role="progressbar" aria-label="Monthly target" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100">
                    <div class="progress-bar" style="width: 72%">72%</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
    <script src="{{ url('public/june_assets/js/bootstrap_bundle.min.js') }}" defer></script>
  </body>
</html>
