<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CRM Dashboard</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .sidebar {
      height: 100vh;
      background: #343a40;
      color: #fff;
    }
    .sidebar a {
      color: #adb5bd;
      text-decoration: none;
      display: block;
      padding: 10px;
    }
    .sidebar a:hover {
      background: #495057;
      color: #fff;
    }
    .card {
      border: none;
      border-radius: 10px;
    }
  </style>
</head>
<body>
<div class="d-flex">
  <!-- Sidebar -->
  <div class="sidebar p-3">
    <h4 class="text-white">CRM</h4>
    <a href="#">Dashboard</a>
    <a href="#">Customers</a>
    <a href="#">Sales</a>
    <a href="#">Reports</a>
    <a href="#">Settings</a>
  </div>

  <!-- Main Content -->
  <div class="flex-grow-1">
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light px-4">
      <a class="navbar-brand" href="#">Dashboard</a>
      <div class="ms-auto">
        <button class="btn btn-primary">Logout</button>
      </div>
    </nav>

    <!-- Content -->
    <div class="container-fluid p-4">
      <div class="row g-3">
        <div class="col-md-3">
          <div class="card text-white bg-primary">
            <div class="card-body">
              <h5>Total Leads</h5>
              <h3>1,204</h3>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="card text-white bg-success">
            <div class="card-body">
              <h5>Deals Closed</h5>
              <h3>315</h3>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="card text-white bg-warning">
            <div class="card-body">
              <h5>Pending Tasks</h5>
              <h3>48</h3>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="card text-white bg-danger">
            <div class="card-body">
              <h5>Issues</h5>
              <h3>5</h3>
            </div>
          </div>
        </div>
      </div>

      <!-- Chart Placeholder -->
      <div class="row mt-4">
        <div class="col-12">
          <div class="card bg-light">
            <div class="card-body">
              <h5>Sales Overview</h5>
              <div style="height: 300px; background: #f1f3f5; display: flex; justify-content: center; align-items: center;">
                <span class="text-muted">[Chart Placeholder]</span>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

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