<!doctype html>
<html lang="en" class="Homedashboard">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--favicon-->
    <link rel="icon" href="assets/img/favicon-32x32.png" type="image/png" />
    <!--plugins-->
    <link href="css/dashboard-css/jquery-jvectormap-2.0.2.css" rel="stylesheet" />
    <link href="css/dashboard-css/simplebar.css" rel="stylesheet" />
    <link href="css/dashboard-css/perfect-scrollbar.css" rel="stylesheet" />
    <!-- <link href="css/dashboard-css/metisMenu.min.css" rel="stylesheet" /> -->
    <!-- loader-->
    <!-- <link href="css/dashboard-css/pace.min.css" rel="stylesheet" /> -->
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <script src="js/dashboard-js/pace.min.js"></script>
    <!-- Bootstrap CSS -->
    <link href="css/dashboard-css/bootstrap.min.css" rel="stylesheet">
    <link href="css/dashboard-css/bootstrap-extended.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
    <link href="css/dashboard-css/app.css" rel="stylesheet">
    <link href="css/dashboard-css/icons.css" rel="stylesheet">
    <!-- Theme Style CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="css/dashboard-css/dark-theme.css" />
    <link rel="stylesheet" href="css/dashboard-css/semi-dark.css" />
    <link rel="stylesheet" href="css/responsive.css" />
    <title>DASHBOARD</title>
  </head>
  <body>
    <!--wrapper-->
    <div class="wrapper">
      <!--sidebar wrapper -->
      <div class="sidebar-wrapper" data-simplebar="true">
        <div class="sidebar-header">
          <div>
            <img src="assets/img/logo.png" class="logo-icon" alt="logo icon">
          </div>
    <!--      <div class="toggle-icon ms-auto"><i class='bx bx-arrow-back'></i>-->
				<!--</div>-->
        </div>
        <!--navigation-->
        <ul class="metismenu" id="menu">
          <li>
            <a href="javascripts:;">
              <div class="parent-icon">
                <img src="assets/img/n1.png" alt="">
              </div>
              <div class="menu-title">Dashboard</div>
            </a>
          </li>
          <li>
            <a href="javascripts:;">
              <div class="parent-icon">
              <img src="assets/img/n2.png" alt="">
              </div>
              <div class="menu-title">Donation</div>
            </a>
          </li>
          <li>
            <a href="javascripts:;">
              <div class="parent-icon">
              <img src="assets/img/n3.png" alt="">
              </div>
              <div class="menu-title">Report</div>
            </a>
          </li>
          <li>
            <a href="javascripts:;">
              <div class="parent-icon">
              <img src="assets/img/n4.png" alt="">
              </div>
              <div class="menu-title">ASL Users</div>
            </a>
          </li>
          <li>
            <a href="javascripts:;">
              <div class="parent-icon">
                <img src="assets/img/n5.png" alt="">
              </div>
              <div class="menu-title">Events</div>
            </a>
          </li>
          <li>
            <a href="javascripts:;">
              <div class="parent-icon">
                <img src="assets/img/n6.png" alt="">
              </div>
              <div class="menu-title">setting</div>
            </a>
          </li>
        
        </ul>
        <ul>
        <li class="LSt">
            <a href="javascripts:;">
              <div class="parent-icon">
                <img src="assets/img/n7.png" alt="">
              </div>
              <div class="menu-title">Log Out</div>
            </a></li>
        </ul>
        <!--end navigation-->
      </div>
      <!--end sidebar wrapper -->
      <!--start header -->
      <header>
        <div class="topbar d-flex align-items-center">
          <nav class="navbar navbar-expand gap-3">
            <div class="mobile-toggle-menu " onclick="toggleSidebar(this)">
              <i class='bx bx-menu'></i>
            </div>
            <div class="search-bar d-lg-block d-none" data-bs-toggle="modal" data-bs-target="#SearchModal">
              <a href="avascript:;" class="btn d-flex align-items-center">
                <i class='bx bx-search'></i>Search </a>
            </div>
            <div class="top-menu ms-auto">
              <ul class="navbar-nav align-items-center gap-1">
                <li class="nav-item mobile-search-icon d-flex d-lg-none" data-bs-toggle="modal" data-bs-target="#SearchModal">
                  <a class="nav-link" href="avascript:;">
                    <i class='bx bx-search'></i>
                  </a>
                </li>
                <!-- <li class="nav-item dark-mode d-none d-sm-flex"><a class="nav-link dark-mode-icon" href="voids:;"><i class='bx bx-moon'></i></a></li> -->
                <li class="nav-item dropdown dropdown-large">
                  <a class="nav-link dropdown-toggle dropdown-toggle-nocaret position-relative" href="#" data-bs-toggle="dropdown">
                    <span class="alert-count ">7</span>
                    <figure class="countg">
                      <img src="assets/img/icon.png" alt="">
                    </figure>
                  </a>
                  <div class="dropdown-menu dropdown-menu-end">
                    <a href="voids:;">
                      <div class="msg-header">
                        <p class="msg-header-title">Notifications</p>
                        <p class="msg-header-badge">8 New</p>
                      </div>
                    </a>
                    <div class="header-notifications-list">
                      <a class="dropdown-item" href="voids:;">
                        <div class="d-flex align-items-center">
                          <div class="user-online">
                            <img src="assets/img/avatar-1.png" class="msg-avatar" alt="user avatar">
                          </div>
                          <div class="flex-grow-1">
                            <h6 class="msg-name">Daisy Anderson <span class="msg-time float-end">5 sec ago</span>
                            </h6>
                            <p class="msg-info">The standard chunk of lorem</p>
                          </div>
                        </div>
                      </a>
                      <a class="dropdown-item" href="voids:;">
                        <div class="d-flex align-items-center">
                          <div class="notify bg-light-danger text-danger">dc </div>
                          <div class="flex-grow-1">
                            <h6 class="msg-name">New Orders <span class="msg-time float-end">2 min ago</span>
                            </h6>
                            <p class="msg-info">You have recived new orders</p>
                          </div>
                        </div>
                      </a>
                      <a class="dropdown-item" href="voids:;">
                        <div class="d-flex align-items-center">
                          <div class="user-online">
                            <img src="assets/img/avater-2.png" class="msg-avatar" alt="user avatar">
                          </div>
                          <div class="flex-grow-1">
                            <h6 class="msg-name">Althea Cabardo <span class="msg-time float-end">14 sec ago</span>
                            </h6>
                            <p class="msg-info">Many desktop publishing packages</p>
                          </div>
                        </div>
                      </a>
                      <a class="dropdown-item" href="voids:;">
                        <div class="d-flex align-items-center">
                          <div class="notify bg-light-success text-success">
                            <img src="assets/img/outlook.png" width="25" alt="user avatar">
                          </div>
                          <div class="flex-grow-1">
                            <h6 class="msg-name">Account Created <span class="msg-time float-end">28 min ago</span>
                            </h6>
                            <p class="msg-info">Successfully created new email</p>
                          </div>
                        </div>
                      </a>
                      <a class="dropdown-item" href="voids:;">
                        <div class="d-flex align-items-center">
                          <div class="notify bg-light-info text-info">Ss </div>
                          <div class="flex-grow-1">
                            <h6 class="msg-name">New Product Approved <span class="msg-time float-end">2 hrs ago</span>
                            </h6>
                            <p class="msg-info">Your new product has approved</p>
                          </div>
                        </div>
                      </a>
                      <a class="dropdown-item" href="voids:;">
                        <div class="d-flex align-items-center">
                          <div class="user-online">
                            <img src="assets/img/avatar-4.png" class="msg-avatar" alt="user avatar">
                          </div>
                          <div class="flex-grow-1">
                            <h6 class="msg-name">Katherine Pechon <span class="msg-time float-end">15 min ago</span>
                            </h6>
                            <p class="msg-info">Making this the first true generator</p>
                          </div>
                        </div>
                      </a>
                      <a class="dropdown-item" href="voids:;">
                        <div class="d-flex align-items-center">
                          <div class="notify bg-light-success text-success">
                            <i class='bx bx-check-square'></i>
                          </div>
                          <div class="flex-grow-1">
                            <h6 class="msg-name">Your item is shipped <span class="msg-time float-end">5 hrs ago</span>
                            </h6>
                            <p class="msg-info">Successfully shipped your item</p>
                          </div>
                        </div>
                      </a>
                      <a class="dropdown-item" href="voids:;">
                        <div class="d-flex align-items-center">
                          <div class="notify bg-light-primary">
                            <img src="assets/img/github.png" width="25" alt="user avatar">
                          </div>
                          <div class="flex-grow-1">
                            <h6 class="msg-name">New 24 authors <span class="msg-time float-end">1 day ago</span>
                            </h6>
                            <p class="msg-info">24 new authors joined last week</p>
                          </div>
                        </div>
                      </a>
                      <a class="dropdown-item" href="voids:;">
                        <div class="d-flex align-items-center">
                          <div class="user-online">
                            <img src="assets/img/avatar-8.png" class="msg-avatar" alt="user avatar">
                          </div>
                          <div class="flex-grow-1">
                            <h6 class="msg-name">Peter Costanzo <span class="msg-time float-end">6 hrs ago</span>
                            </h6>
                            <p class="msg-info">It was popularised in the 1960s</p>
                          </div>
                        </div>
                      </a>
                    </div>
                    <a href="voids:;">
                      <div class="text-center msg-footer">
                        <button class="btn btn-primary w-100">View All Notifications</button>
                      </div>
                    </a>
                  </div>
                </li>
                <li class="nav-item dropdown dropdown-laungauge d-none d-sm-flex">
                  <a class="nav-link dropdown-toggle dropdown-toggle-nocaret" href="avascript:;" data-bs-toggle="dropdown">
                    <img src="assets/img/country/Flag.png" width="40" alt="">
                    <span class="lanf">English <i class="fa-solid fa-chevron-down"></i>
                    </span>
                  </a>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <a class="dropdown-item d-flex align-items-center py-2" href="voids:;">
                        <img src="assets/img/country/01.png" width="20" alt="">
                        <span class="ms-2">English</span>
                      </a>
                    </li>
                    <li>
                      <a class="dropdown-item d-flex align-items-center py-2" href="voids:;">
                        <img src="assets/img/country/02.png" width="20" alt="">
                        <span class="ms-2">Catalan</span>
                      </a>
                    </li>
                    <li>
                      <a class="dropdown-item d-flex align-items-center py-2" href="voids:;">
                        <img src="assets/img/country/03.png" width="20" alt="">
                        <span class="ms-2">French</span>
                      </a>
                    </li>
                    <li>
                      <a class="dropdown-item d-flex align-items-center py-2" href="voids:;">
                        <img src="assets/img/country/04.png" width="20" alt="">
                        <span class="ms-2">Belize</span>
                      </a>
                    </li>
                    <li>
                      <a class="dropdown-item d-flex align-items-center py-2" href="voids:;">
                        <img src="assets/img/country/05.png" width="20" alt="">
                        <span class="ms-2">Colombia</span>
                      </a>
                    </li>
                    <li>
                      <a class="dropdown-item d-flex align-items-center py-2" href="voids:;">
                        <img src="assets/img/country/06.png" width="20" alt="">
                        <span class="ms-2">Spanish</span>
                      </a>
                    </li>
                    <li>
                      <a class="dropdown-item d-flex align-items-center py-2" href="voids:;">
                        <img src="assets/img/country/07.png" width="20" alt="">
                        <span class="ms-2">Georgian</span>
                      </a>
                    </li>
                    <li>
                      <a class="dropdown-item d-flex align-items-center py-2" href="voids:;">
                        <img src="assets/img/country/08.png" width="20" alt="">
                        <span class="ms-2">Hindi</span>
                      </a>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
            <div class="user-box dropdown px-3">
              <a class="d-flex align-items-center nav-link dropdown-toggle gap-3 dropdown-toggle-nocaret" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                <img src="assets/img/avater-2.png" class="user-img" alt="user avatar">
                <div class="user-info">
                  <p class="user-name mb-0">Moni Roy</p>
                  <p class="designattion mb-0">Admin</p>
                </div>
                <span class="icon">
                  <i class="fa-solid fa-chevron-down"></i>
                </span>
              </a>
              <ul class="dropdown-menu dropdown-menu-end">
                <li>
                  <a class="dropdown-item d-flex align-items-center" href="voids:;">
                    <i class="bx bx-user fs-5"></i>
                    <span>Profile</span>
                  </a>
                </li>
                <li>
                  <a class="dropdown-item d-flex align-items-center" href="voids:;">
                    <i class="bx bx-cog fs-5"></i>
                    <span>Settings</span>
                  </a>
                </li>
                <li>
                  <a class="dropdown-item d-flex align-items-center" href="voids:;">
                    <i class="bx bx-home-circle fs-5"></i>
                    <span>Dashboard</span>
                  </a>
                </li>
                <li>
                  <a class="dropdown-item d-flex align-items-center" href="voids:;">
                    <i class="bx bx-dollar-circle fs-5"></i>
                    <span>Earnings</span>
                  </a>
                </li>
                <li>
                  <a class="dropdown-item d-flex align-items-center" href="voids:;">
                    <i class="bx bx-download fs-5"></i>
                    <span>Downloads</span>
                  </a>
                </li>
                <li>
                  <div class="dropdown-divider mb-0"></div>
                </li>
                <li>
                  <a class="dropdown-item d-flex align-items-center" href="voids:;">
                    <i class="bx bx-log-out-circle"></i>
                    <span>Logout</span>
                  </a>
                </li>
              </ul>
            </div>
          </nav>
        </div>
      </header>
      <!--end header -->
      <!--start page wrapper -->
      <div class="page-wrapper">
        <div class="page-content">
          <div class="row row-cols-1 row-cols-md-2 row-cols-xl-4">
            <div class="col">
              <div class="card radius-10 ">
                <div class="card-body Box-top">
                  <div class="d-flex align-items-center">
                    <div>
                      <p class="mb-0 text-total">Total Orders</p>
                      <h4 class="my-1 ">4805</h4>
                      <p class="mb-0 font-13">+2.5% from last week</p>
                    </div>
                    <div class="widgets-icons-2  ms-auto">
                      <img src="assets/img/ico-1.png" alt="">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col">
              <div class="card radius-10 ">
                <div class="card-body Box-top">
                  <div class="d-flex align-items-center">
                    <div>
                      <p class="mb-0 text-total">Total Revenue</p>
                      <h4 class="my-1 ">$84,245</h4>
                      <p class="mb-0 font-13">+5.4% from last week</p>
                    </div>
                    <div class="widgets-icons-2  ms-auto">
                      <img src="assets/img/ico-2.png" alt="">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col">
              <div class="card radius-10 ">
                <div class="card-body Box-top">
                  <div class="d-flex align-items-center">
                    <div>
                      <p class="mb-0 text-total">Bounce Rate</p>
                      <h4 class="my-1 ">34.6%</h4>
                      <p class="mb-0 font-13">-4.5% from last week</p>
                    </div>
                    <div class="widgets-icons-2 ms-auto">
                      <img src="assets/img/ico-3.png" alt="">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col">
              <div class="card radius-10 ">
                <div class="card-body Box-top">
                  <div class="d-flex align-items-center">
                    <div>
                      <p class="mb-0 text-total">Total Customers</p>
                      <h4 class="my-1 ">8.4K</h4>
                      <p class="mb-0 font-13">+8.4% from last week</p>
                    </div>
                    <div class="widgets-icons-2  ms-auto">
                      <img src="assets/img/ico-4.png" alt="">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--end row-->
          <div class="card radius-10 spacecard">
            <div class="row">
              <div class="col-7">
                <div class="card-body">
                  <div class="table-container">
                    <div class="table-header">Donation Payment</div>
                    <table>
                      <thead>
                        <tr>
                          <th>User</th>
                          <th>Donation</th>
                          <th>Date</th>
                          <th>Location</th>
                          <th>Status</th>
                          <th>Actions</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr class="mb-5">
                          <td>J Smith</td>
                          <td>$50</td>
                          <td>Oct 20, 2024</td>
                          <td>London, UK</td>
                          <td class="status-received">Received</td>
                          <td class="action-icons">
                            <span class="view-icon">
                              <i class="fa-regular fa-eye"></i>
                            </span>
                            <span class="delete-icon">
                              <i class="fa-solid fa-trash-can"></i>
                            </span>
                          </td>
                        </tr>
                        
                        <tr class="mb-5">
                          <td>J Smith</td>
                          <td>$50</td>
                          <td>Oct 20, 2024</td>
                          <td>London, UK</td>
                          <td class="status-received">Received</td>
                          <td class="action-icons">
                            <span class="view-icon">
                              <i class="fa-regular fa-eye"></i>
                            </span>
                            <span class="delete-icon">
                              <i class="fa-solid fa-trash-can"></i>
                            </span>
                          </td>
                        </tr>

                        <tr class="mb-5">
                          <td>J Smith</td>
                          <td>$50</td>
                          <td>Oct 20, 2024</td>
                          <td>London, UK</td>
                          <td class="status-received">Received</td>
                          <td class="action-icons">
                            <span class="view-icon">
                              <i class="fa-regular fa-eye"></i>
                            </span>
                            <span class="delete-icon">
                              <i class="fa-solid fa-trash-can"></i>
                            </span>
                          </td>
                        </tr>
                        
                        <tr class="mb-5">
                          <td>J Smith</td>
                          <td>$50</td>
                          <td>Oct 20, 2024</td>
                          <td>London, UK</td>
                          <td class="status-received">Received</td>
                          <td class="action-icons">
                            <span class="view-icon">
                              <i class="fa-regular fa-eye"></i>
                            </span>
                            <span class="delete-icon">
                              <i class="fa-solid fa-trash-can"></i>
                            </span>
                          </td>
                        </tr>
                        <tr class="mb-5">
                          <td>J Smith</td>
                          <td>$50</td>
                          <td>Oct 20, 2024</td>
                          <td>London, UK</td>
                          <td class="status-received">Received</td>
                          <td class="action-icons">
                            <span class="view-icon">
                              <i class="fa-regular fa-eye"></i>
                            </span>
                            <span class="delete-icon">
                              <i class="fa-solid fa-trash-can"></i>
                            </span>
                          </td>
                        </tr>
                        
                        <tr class="mb-5">
                          <td>J Smith</td>
                          <td>$50</td>
                          <td>Oct 20, 2024</td>
                          <td>London, UK</td>
                          <td class="status-received">Received</td>
                          <td class="action-icons">
                            <span class="view-icon">
                              <i class="fa-regular fa-eye"></i>
                            </span>
                            <span class="delete-icon">
                              <i class="fa-solid fa-trash-can"></i>
                            </span>
                          </td>
                        </tr>
                        <tr class="mb-5">
                          <td>J Smith</td>
                          <td>$50</td>
                          <td>Oct 20, 2024</td>
                          <td>London, UK</td>
                          <td class="status-received">Received</td>
                          <td class="action-icons">
                            <span class="view-icon">
                              <i class="fa-regular fa-eye"></i>
                            </span>
                            <span class="delete-icon">
                              <i class="fa-solid fa-trash-can"></i>
                            </span>
                          </td>
                        </tr>
                        
                        <tr class="mb-5">
                          <td>J Smith</td>
                          <td>$50</td>
                          <td>Oct 20, 2024</td>
                          <td>London, UK</td>
                          <td class="status-received">Received</td>
                          <td class="action-icons">
                            <span class="view-icon">
                              <i class="fa-regular fa-eye"></i>
                            </span>
                            <span class="delete-icon">
                              <i class="fa-solid fa-trash-can"></i>
                            </span>
                          </td>
                        </tr>
                        <!-- Repeat similar rows as needed -->
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <div class="col-5">
                <div class="card-body">
                  <div class="table-container">
                    <div class="table-header">ASL Users</div>
                    <table>
                      <thead>
                        <tr class="bn">
                          <th>User</th>
                          <th>Date</th>
                          <th>Location</th>
                          <th>Status</th>
                          <th>Actions</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr class="table-success">
                          <td>J Smith</td>
                          <td>Oct 20, 2024</td>
                          <td>London, UK</td>
                          <td class="status-received">Received</td>
                          <td class="action-icons">
                            <span class="view-icon">
                              <i class="fa-regular fa-eye"></i>
                            </span>
                            <span class="delete-icon">
                              <i class="fa-solid fa-trash-can"></i>
                            </span>
                          </td>
                        </tr>
                        <tr class="mb-5">
                          <td>J Smith</td>
                          <td>Oct 20, 2024</td>
                          <td>London, UK</td>
                          <td class="status-received">Received</td>
                          <td class="action-icons">
                            <span class="view-icon">
                              <i class="fa-regular fa-eye"></i>
                            </span>
                            <span class="delete-icon">
                              <i class="fa-solid fa-trash-can"></i>
                            </span>
                          </td>
                        </tr>

                        <tr class="table-success">
                          <td>J Smith</td>
                          <td>Oct 20, 2024</td>
                          <td>London, UK</td>
                          <td class="status-received">Received</td>
                          <td class="action-icons">
                            <span class="view-icon">
                              <i class="fa-regular fa-eye"></i>
                            </span>
                            <span class="delete-icon">
                              <i class="fa-solid fa-trash-can"></i>
                            </span>
                          </td>
                        </tr>
                        <tr class="mb-5">
                          <td>J Smith</td>
                          <td>Oct 20, 2024</td>
                          <td>London, UK</td>
                          <td class="status-received">Received</td>
                          <td class="action-icons">
                            <span class="view-icon">
                              <i class="fa-regular fa-eye"></i>
                            </span>
                            <span class="delete-icon">
                              <i class="fa-solid fa-trash-can"></i>
                            </span>
                          </td>
                        </tr>



                        <tr class="table-success">
                          <td>J Smith</td>
                          <td>Oct 20, 2024</td>
                          <td>London, UK</td>
                          <td class="status-received">Received</td>
                          <td class="action-icons">
                            <span class="view-icon">
                              <i class="fa-regular fa-eye"></i>
                            </span>
                            <span class="delete-icon">
                              <i class="fa-solid fa-trash-can"></i>
                            </span>
                          </td>
                        </tr>
                        <tr class="mb-5">
                          <td>J Smith</td>
                          <td>Oct 20, 2024</td>
                          <td>London, UK</td>
                          <td class="status-received">Received</td>
                          <td class="action-icons">
                            <span class="view-icon">
                              <i class="fa-regular fa-eye"></i>
                            </span>
                            <span class="delete-icon">
                              <i class="fa-solid fa-trash-can"></i>
                            </span>
                          </td>
                        </tr>



                        <tr class="table-success">
                          <td>J Smith</td>
                          <td>Oct 20, 2024</td>
                          <td>London, UK</td>
                          <td class="status-received">Received</td>
                          <td class="action-icons">
                            <span class="view-icon">
                              <i class="fa-regular fa-eye"></i>
                            </span>
                            <span class="delete-icon">
                              <i class="fa-solid fa-trash-can"></i>
                            </span>
                          </td>
                        </tr>
                        <tr class="mb-5">
                          <td>J Smith</td>
                          <td>Oct 20, 2024</td>
                          <td>London, UK</td>
                          <td class="status-received">Received</td>
                          <td class="action-icons">
                            <span class="view-icon">
                              <i class="fa-regular fa-eye"></i>
                            </span>
                            <span class="delete-icon">
                              <i class="fa-solid fa-trash-can"></i>
                            </span>
                          </td>
                        </tr>
                        <!-- Repeat similar rows as needed -->
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-12">
                <div class="tabledata">

                        <div class="search-container">
                            <input type="text" placeholder="User Id">
                            <input type="text" placeholder="Name">
                            <select>
                                <option value="">View By Status</option>
                            </select>
                            <select>
                                <option value="">View By Date</option>
                            </select>
                            <button>SEARCH</button>
                            <span class="clear-filter">Clear Filter</span>
                            <a href="#" class="advanced-search"><img src="assets/img/frame.png" alt="">ADVANCE SEARCH</a>
                        </div>
                </div>
            </div>
          </div>
          <div class="row  ">
           
           
            <div class="col d-flex">
              <div class="card bg-none radius-10 w-100">
              <div class="card-body bg-none p-0">
                  <div class="table-container">
                    <div class="table-header">ASL Classes Reports</div>
                    <table>
                      <thead>
                        <tr>
                          <th>Name</th>
                          <th>ASL Classes</th>
                          <th>Status</th>
                          <th>Report ID</th>
                          <th>Order Date</th>
                          <th class="lsty">Action</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr class="mb-5">
                          <td>J Smith</td>
                          <td>ASL Classes 01</td>
                          <td>Completed</td>
                          <td>#5432415</td>
                          <td class="">Oct 20,2024</td>
                          <td class="action-icons">
                           <div class="action">
                            <div class="dropdown">
                                            <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                                <img src="assets/img/pdf.png" alt="">File Uplo...
                                            </button>
                                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                <li><a class="dropdown-item" href="#"><img src="assets/img/pdf.png" alt="">File Uplo...</a></li>
                                                <li><a class="dropdown-item" href="#"><img src="assets/img/pdf.png" alt="">File Uplo...</a></li>
                                                <li><a class="dropdown-item" href="#"><img src="assets/img/pdf.png" alt="">File Uplo...</a></li>
                                            </ul>
                                        </div>
                            
                           </div>
                          </td>
                        </tr>
                        
                        <tr class="mb-5">
                          <td>J Smith</td>
                          <td>ASL Classes 01</td>
                          <td>Completed</td>
                          <td>#5432415</td>
                          <td class="">Oct 20,2024</td>
                          <td class="action-icons">
                           <div class="action">
                            <div class="dropdown">
                                            <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                                <img src="assets/img/pdf.png" alt="">File Uplo...
                                            </button>
                                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                <li><a class="dropdown-item" href="#"><img src="assets/img/pdf.png" alt="">File Uplo...</a></li>
                                                <li><a class="dropdown-item" href="#"><img src="assets/img/pdf.png" alt="">File Uplo...</a></li>
                                                <li><a class="dropdown-item" href="#"><img src="assets/img/pdf.png" alt="">File Uplo...</a></li>
                                            </ul>
                                        </div>
                            
                           </div>
                          </td>
                        </tr>

                        <tr class="mb-5">
                          <td>J Smith</td>
                          <td>ASL Classes 01</td>
                          <td>Completed</td>
                          <td>#5432415</td>
                          <td class="">Oct 20,2024</td>
                          <td class="action-icons">
                           <div class="action">
                            <div class="dropdown">
                                            <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                                <img src="assets/img/pdf.png" alt="">File Uplo...
                                            </button>
                                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                <li><a class="dropdown-item" href="#"><img src="assets/img/pdf.png" alt="">File Uplo...</a></li>
                                                <li><a class="dropdown-item" href="#"><img src="assets/img/pdf.png" alt="">File Uplo...</a></li>
                                                <li><a class="dropdown-item" href="#"><img src="assets/img/pdf.png" alt="">File Uplo...</a></li>
                                            </ul>
                                        </div>
                            
                           </div>
                          </td>
                        </tr>
                        
                        <tr class="mb-5">
                          <td>J Smith</td>
                          <td>ASL Classes 01</td>
                          <td>Completed</td>
                          <td>#5432415</td>
                          <td class="">Oct 20,2024</td>
                          <td class="action-icons">
                           <div class="action">
                            <div class="dropdown">
                                            <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                                <img src="assets/img/pdf.png" alt="">File Uplo...
                                            </button>
                                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                <li><a class="dropdown-item" href="#"><img src="assets/img/pdf.png" alt="">File Uplo...</a></li>
                                                <li><a class="dropdown-item" href="#"><img src="assets/img/pdf.png" alt="">File Uplo...</a></li>
                                                <li><a class="dropdown-item" href="#"><img src="assets/img/pdf.png" alt="">File Uplo...</a></li>
                                            </ul>
                                        </div>
                            
                           </div>
                          </td>
                        </tr>
                        <tr class="mb-5">
                          <td>J Smith</td>
                          <td>ASL Classes 01</td>
                          <td>Completed</td>
                          <td>#5432415</td>
                          <td class="">Oct 20,2024</td>
                          <td class="action-icons">
                           <div class="action">
                            <div class="dropdown">
                                            <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                                <img src="assets/img/pdf.png" alt="">File Uplo...
                                            </button>
                                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                <li><a class="dropdown-item" href="#"><img src="assets/img/pdf.png" alt="">File Uplo...</a></li>
                                                <li><a class="dropdown-item" href="#"><img src="assets/img/pdf.png" alt="">File Uplo...</a></li>
                                                <li><a class="dropdown-item" href="#"><img src="assets/img/pdf.png" alt="">File Uplo...</a></li>
                                            </ul>
                                        </div>
                            
                           </div>
                          </td>
                        </tr>
                        
                        <tr class="mb-5">
                          <td>J Smith</td>
                          <td>ASL Classes 01</td>
                          <td>Completed</td>
                          <td>#5432415</td>
                          <td class="">Oct 20,2024</td>
                          <td class="action-icons">
                           <div class="action">
                            <div class="dropdown">
                                            <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                                <img src="assets/img/pdf.png" alt="">File Uplo...
                                            </button>
                                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                <li><a class="dropdown-item" href="#"><img src="assets/img/pdf.png" alt="">File Uplo...</a></li>
                                                <li><a class="dropdown-item" href="#"><img src="assets/img/pdf.png" alt="">File Uplo...</a></li>
                                                <li><a class="dropdown-item" href="#"><img src="assets/img/pdf.png" alt="">File Uplo...</a></li>
                                            </ul>
                                        </div>
                            
                           </div>
                          </td>
                        </tr>
                  
                        <!-- Repeat similar rows as needed -->
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--end row-->
        </div>
      </div>
      <!--end page wrapper -->
      <!--start overlay-->
      <div class="overlay toggle-icon"></div>
      <!--end overlay-->
      <!--Start Back To Top Button-->
      <a href="voids:;" class="back-to-top">
        <i class='bx bxs-up-arrow-alt'></i>
      </a>
      <!--End Back To Top Button-->
      <!-- <footer class="page-footer">
        <p class="mb-0">Copyright © 2022. All right reserved.</p>
      </footer> -->
    </div>
    <!--end wrapper-->
    <!-- search modal -->
    <div class="modal" id="SearchModal" tabindex="-1">
      <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-fullscreen-md-down">
        <div class="modal-content">
          <div class="modal-header gap-2">
            <div class="position-relative popup-search w-100">
              <input class="form-control form-control-lg ps-5 border border-3 border-primary" type="search" placeholder="Search">
              <span class="position-absolute top-50 search-show ms-3 translate-middle-y start-0 top-50 fs-4">
                <i class='bx bx-search'></i>
              </span>
            </div>
            <button type="button" class="btn-close d-md-none" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="search-list">
              <p class="mb-1">SEARCHING....</p>
              <div class="list-group">
                <a href="voids:;" class="list-group-item list-group-item-action active align-items-center d-flex gap-2 py-1">
                  <i class='bx bxl-angular fs-4'></i>Total Invoice </a>
                <a href="voids:;" class="list-group-item list-group-item-action align-items-center d-flex gap-2 py-1">
                  <i class='bx bxl-vuejs fs-4'></i>Total Revenue </a>
                <a href="voids:;" class="list-group-item list-group-item-action align-items-center d-flex gap-2 py-1">
                  <i class='bx bxl-magento fs-4'></i>Bounce Rate </a>
                <a href="voids:;" class="list-group-item list-group-item-action align-items-center d-flex gap-2 py-1">
                  <i class='bx bxl-shopify fs-4'></i>Total Customers </a>
              </div>
              <!-- <p class="mb-1 mt-3">Web Designe Company</p><div class="list-group"><a href="voids:;" class="list-group-item list-group-item-action align-items-center d-flex gap-2 py-1"><i class='bx bxl-windows fs-4'></i>Best Html Templates </a><a href="voids:;" class="list-group-item list-group-item-action align-items-center d-flex gap-2 py-1"><i class='bx bxl-dropbox fs-4'></i>Html5 Templates </a><a href="voids:;" class="list-group-item list-group-item-action align-items-center d-flex gap-2 py-1"><i class='bx bxl-opera fs-4'></i>Responsive Html5 Templates </a><a href="voids:;" class="list-group-item list-group-item-action align-items-center d-flex gap-2 py-1"><i class='bx bxl-wordpress fs-4'></i>eCommerce Html Templates </a></div><p class="mb-1 mt-3">Software Development</p><div class="list-group"><a href="voids:;" class="list-group-item list-group-item-action align-items-center d-flex gap-2 py-1"><i class='bx bxl-mailchimp fs-4'></i>Best Html Templates </a><a href="voids:;" class="list-group-item list-group-item-action align-items-center d-flex gap-2 py-1"><i class='bx bxl-zoom fs-4'></i>Html5 Templates </a><a href="voids:;" class="list-group-item list-group-item-action align-items-center d-flex gap-2 py-1"><i class='bx bxl-sass fs-4'></i>Responsive Html5 Templates </a><a href="voids:;" class="list-group-item list-group-item-action align-items-center d-flex gap-2 py-1"><i class='bx bxl-vk fs-4'></i>eCommerce Html Templates </a></div><p class="mb-1 mt-3">Online Shoping Portals</p><div class="list-group"><a href="voids:;" class="list-group-item list-group-item-action align-items-center d-flex gap-2 py-1"><i class='bx bxl-slack fs-4'></i>Best Html Templates </a><a href="voids:;" class="list-group-item list-group-item-action align-items-center d-flex gap-2 py-1"><i class='bx bxl-skype fs-4'></i>Html5 Templates </a><a href="voids:;" class="list-group-item list-group-item-action align-items-center d-flex gap-2 py-1"><i class='bx bxl-twitter fs-4'></i>Responsive Html5 Templates </a><a href="voids:;" class="list-group-item list-group-item-action align-items-center d-flex gap-2 py-1"><i class='bx bxl-vimeo fs-4'></i>eCommerce Html Templates </a></div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- end search modal -->
  
    <!-- Bootstrap JS -->
    <script src="js/dashboard-js/bootstrap.bundle.min.js"></script>
    <!--plugins-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="js/dashboard-js/simplebar.min.js"></script>
   

    <script src="js/dashboard-js/perfect-scrollbar.js"></script>
   
    <!--app JS-->
    <!-- <script src="js/dashboard-js/app.js"></script> -->
    <script>
      new PerfectScrollbar(".app-container")
    </script>
  </body>
</html>