<?php
include_once 'header.php';
?>

<!--<h6 class="mb-0 text-uppercase">Dashboard</h6>-->
<!--<hr>-->
<!--<div class="card">-->
<!--  <div class="card-body p-4">-->
<!--    <h6 class="mb-0 text-uppercase">Users</h6>-->
<!--    <hr>-->
<!--    <div class="row">-->
<!--      <div class="col-12 col-xl-6">-->
<!--        <div class="card rounded-4 mb-4">-->
<!--          <div class="card-header">-->
<!--            <h5 class="mb-0">User Status Distribution</h5>-->
<!--          </div>-->
<!--          <div class="card-body">-->
<!--            <div id="usersStatusChart"></div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="col-12 col-xl-6">-->
<!--        <div class="card rounded-4 mb-4">-->
<!--          <div class="card-header">-->
<!--            <h5 class="mb-0">User Type Distribution</h5>-->
<!--          </div>-->
<!--          <div class="card-body">-->
<!--            <div id="usersTypeChart"></div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <h6 class="mb-0 text-uppercase">Staffs</h6>-->
<!--    <hr>-->
<!--    <div class="row">-->
<!--      <div class="col-12 col-xl-12">-->
<!--        <div class="card rounded-4 mb-4">-->
<!--          <div class="card-header">-->
<!--            <h5 class="mb-0">Staff by Designation</h5>-->
<!--          </div>-->
<!--          <div class="card-body">-->
<!--            <div id="staffByDesignationChart"></div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <h6 class="mb-0 text-uppercase">Invoices</h6>-->
<!--    <hr>-->
    
<!--    <div class="row">-->
<!--      <div class="col-12 col-xl-12">-->
<!--        <div class="card rounded-4 mb-4">-->
<!--          <div class="card-header">-->
<!--            <h5 class="mb-0">Invoices by Status</h5>-->
<!--          </div>-->
<!--          <div class="card-body">-->
<!--            <div id="invoiceStatusChart"></div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <h6 class="mb-0 text-uppercase">Projects</h6>-->
<!--    <hr>-->
<!--    <div class="row">-->
<!--      <div class="col-12 col-xl-12">-->
<!--        <div class="card rounded-4 mb-4">-->
<!--          <div class="card-header">-->
<!--            <h5 class="mb-0">Projects by Status</h5>-->
<!--          </div>-->
<!--          <div class="card-body">-->
<!--            <div id="projectsStatusChart"></div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="col-12 col-xl-12">-->
<!--        <div class="card rounded-4 mb-4">-->
<!--          <div class="card-header">-->
<!--            <h5 class="mb-0">Team Member Project Load</h5>-->
<!--          </div>-->
<!--          <div class="card-body">-->
<!--            <div id="memberProjectsChart"></div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="col-12 col-xl-6">-->
<!--        <div class="card rounded-4 mb-4">-->
<!--          <div class="card-header">-->
<!--            <h5 class="mb-0">Projects by Type</h5>-->
<!--          </div>-->
<!--          <div class="card-body">-->
<!--            <div id="projectsTypeChart"></div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <h6 class="mb-0 text-uppercase">Tickets</h6>-->
<!--    <hr>-->
<!--    <div class="row">-->
<!--      <div class="col-12 col-xl-12">-->
<!--        <div class="card rounded-4 mb-4">-->
<!--          <div class="card-header">-->
<!--            <h5 class="mb-0">Tickets by Status</h5>-->
<!--          </div>-->
<!--          <div class="card-body">-->
<!--            <div id="ticketsByStatus"></div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="col-12 col-xl-12">-->
<!--        <div class="card rounded-4 mb-4">-->
<!--          <div class="card-header">-->
<!--            <h5 class="mb-0">Tickets Created Over Time</h5>-->
<!--          </div>-->
<!--          <div class="card-body">-->
<!--            <div id="ticketsCreatedOvertimeChart"></div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="col-12 col-xl-6">-->
<!--        <div class="card rounded-4 mb-4">-->
<!--          <div class="card-header">-->
<!--            <h5 class="mb-0">Tickets by Category</h5>-->
<!--          </div>-->
<!--          <div class="card-body">-->
<!--            <div id="ticketsByCategoriesChart"></div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <h6 class="mb-0 text-uppercase">Events</h6>-->
<!--    <hr>-->
<!--    <div class="row">-->
<!--      <div class="col-12 col-xl-12">-->
<!--        <div class="card rounded-4 mb-4">-->
<!--          <div class="card-header">-->
<!--            <h5 class="mb-0">Upcoming Events Timeline</h5>-->
<!--          </div>-->
<!--          <div class="card-body">-->
<!--            <div id="upcomingEventsOvertime"></div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="col-12 col-xl-6">-->
<!--        <div class="card rounded-4 mb-4">-->
<!--          <div class="card-header">-->
<!--            <h5 class="mb-0">Events by Category</h5>-->
<!--          </div>-->
<!--          <div class="card-body">-->
<!--            <div id="eventsByCategoryChart"></div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <h6 class="mb-0 text-uppercase">General</h6>-->
<!--    <hr>-->
<!--    <div class="row">-->
<!--      <div class="col-12 col-xl-12">-->
<!--        <div class="card rounded-4 mb-4">-->
<!--          <div class="card-header">-->
<!--            <h5 class="mb-0">Daily Expense Trend</h5>-->
<!--          </div>-->
<!--          <div class="card-body">-->
<!--            <div id="dailyExpenseChart"></div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</div>-->

<div class="d-flex align-items-start justify-content-between">
  <div>
    <h6 class="mb-1 text-uppercase">Dashboard</h6>
    <div class="text-muted small">AML Screening System Overview</div>
  </div>
</div>

<hr>

<!-- TOP STATS -->
<div class="row maincard g-3 mb-3">
  <div class="col-12 col-md-6 col-xl-3">
    <div class="card ui-card">
      <div class="card-body d-flex justify-content-between">
        <div>
          <div class="stat-label">Total Searches</div>
          <p class="stat-value">30</p>
          <p class="stat-sub">0 today</p>
        </div>
        <div class="icon-box icon-blue" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <circle cx="11" cy="11" r="7"></circle>
            <path d="M20 20l-3.5-3.5"></path>
          </svg>
        </div>
      </div>
    </div>
  </div>

  <div class="col-12 col-md-6 col-xl-3">
    <div class="card ui-card">
      <div class="card-body d-flex justify-content-between">
        <div>
          <div class="stat-label">High Risk<br>Detections</div>
          <p class="stat-value">100</p>
          <p class="stat-sub">Requires attention</p>
        </div>
        <div class="icon-box icon-red" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M10.3 3.4 1.9 18.1A2 2 0 0 0 3.6 21h16.8a2 2 0 0 0 1.7-2.9L13.7 3.4a2 2 0 0 0-3.4 0Z"/>
            <path d="M12 9v4"></path>
            <path d="M12 17h.01"></path>
          </svg>
        </div>
      </div>
    </div>
  </div>

  <div class="col-12 col-md-6 col-xl-3">
    <div class="card ui-card">
      <div class="card-body d-flex justify-content-between">
        <div>
          <div class="stat-label">Pending Reviews</div>
          <p class="stat-value">100</p>
          <p class="stat-sub">Awaiting action</p>
        </div>
        <div class="icon-box icon-orange" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="9"></circle>
            <path d="M12 7v5l3 2"></path>
          </svg>
        </div>
      </div>
    </div>
  </div>

  <div class="col-12 col-md-6 col-xl-3">
    <div class="card ui-card">
      <div class="card-body d-flex justify-content-between">
        <div>
          <div class="stat-label">Database Records</div>
          <p class="stat-value" style="font-size:30px;">Active</p>
          <p class="stat-sub">AML watchlist</p>
        </div>
        <div class="icon-box icon-green" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"></path>
            <path d="M14 2v6h6"></path>
            <path d="M8 13h8"></path>
            <path d="M8 17h8"></path>
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- BOTTOM PANELS -->
<div class="row g-3">
  <!-- Recent Searches -->
  <div class="col-12 col-lg-6">
    <div class="card ui-card">
      <div class="card-body">
        <div class="panel-head d-flex align-items-center gap-2">
          <div class="mini mini-green" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
              <circle cx="11" cy="11" r="7"></circle>
              <path d="M20 20l-3.5-3.5"></path>
            </svg>
          </div>
          <h6 class="m-0 fw-bold">Recent Searches</h6>
        </div>

        <div class="list-row d-flex justify-content-between align-items-start">
          <div>
            <p class="title-lower">anna</p>
            <p class="m-0 tiny muted">20 matches found</p>
          </div>
          <div class="text-end">
            <span class="badge-pill badge-high mb-1">High Risk</span><br>
            <span class="tiny muted">Feb 15, 19:46</span>
          </div>
        </div>

        <div class="list-row d-flex justify-content-between align-items-start">
          <div>
            <p class="title-lower">ana</p>
            <p class="m-0 tiny muted">0 matches found</p>
          </div>
          <div class="text-end">
            <span class="tiny muted">Feb 15, 19:46</span>
          </div>
        </div>

        <div class="list-row d-flex justify-content-between align-items-start">
          <div>
            <p class="title-lower">anna</p>
            <p class="m-0 tiny muted">20 matches found</p>
          </div>
          <div class="text-end">
            <span class="badge-pill badge-high mb-1">High Risk</span><br>
            <span class="tiny muted">Feb 13, 19:44</span>
          </div>
        </div>

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

  <!-- Recent Detections -->
  <div class="col-12 col-lg-6">
    <div class="card ui-card">
      <div class="card-body">
        <div class="panel-head d-flex align-items-center gap-2">
          <div class="mini mini-orange" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M10.3 3.4 1.9 18.1A2 2 0 0 0 3.6 21h16.8a2 2 0 0 0 1.7-2.9L13.7 3.4a2 2 0 0 0-3.4 0Z"/>
              <path d="M12 9v4"></path>
              <path d="M12 17h.01"></path>
            </svg>
          </div>
          <h6 class="m-0 fw-bold">Recent Detections</h6>
        </div>

        <div class="list-row d-flex justify-content-between align-items-start">
          <div>
            <p class="title-upper">ANNA BROWN</p>
            <p class="m-0 tiny muted">Query: "anna" • 95% match</p>
          </div>
          <div class="text-end">
            <span class="badge-pill badge-review mb-1">Under Review</span><br>
            <span class="tiny muted">Feb 15</span>
          </div>
        </div>

        <div class="list-row d-flex justify-content-between align-items-start">
          <div>
            <p class="title-upper">ANNA BROWN</p>
            <p class="m-0 tiny muted">Query: "anna" • 95% match</p>
          </div>
          <div class="text-end">
            <span class="badge-pill badge-new mb-1">New</span><br>
            <span class="tiny muted">Feb 15</span>
          </div>
        </div>

        <div class="list-row d-flex justify-content-between align-items-start">
          <div>
            <p class="title-upper">ANNA BROWN</p>
            <p class="m-0 tiny muted">Query: "anna" • 95% match</p>
          </div>
          <div class="text-end">
            <span class="badge-pill badge-new mb-1">New</span><br>
            <span class="tiny muted">Feb 15</span>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
<?php
  include_once 'footer.php';
?>