Hello guys how are you? Welcome back to my blog. Today in this blog post I will show you EQUATION – Multipurpose Sales Admin Dashboard Template Built with Next.js & Bootstrap 5.
For react js new comers, please check the below links:
Guys here is the code snippet for nextjs admin dashboard, bootstrap 5 admin template, sales dashboard template, crm dashboard ui, next js ecommerce admin, multipurpose admin ui, react admin panel, analytics dashboard, bootstrap dashboard theme, saas admin panel, modern admin ui, bootstrap react admin and please use carefully:
Step 1: Create a New Next.js Project
If you haven’t already, create a new Next.js project as well:
npx create-next-app@latest my-realestate-demo
cd my-realestate-demo
Step 2: Apply below code inside app/layout.js file:
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<title>Sales Admin | EQUATION - Multipurpose Bootstrap Dashboard Template </title>
<link rel="icon" type="image/x-icon" href="img/favicon.ico" />
<link href="css/light/loader.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/light/plugins.css" rel="stylesheet" type="text/css" />
<link href="css/light/list-group.css" rel="stylesheet" type="text/css" />
<link href="css/light/dash_2.css" rel="stylesheet" type="text/css" />
<script src="js/bootstrap.bundle.min.js"></script>
</head>
<body className="layout-boxed">
{children}
</body>
</html>
);
}
Step 3: Update code in a Page.js inside src/app folder
Open the page.js file and replace the content with the following code :
import Link from 'next/link';
export default function Home() {
return (
<div>
{/* BEGIN NAVBAR */}
<div className="header-container container-xxl">
<header className="header navbar navbar-expand-sm expand-header">
<a href="javascript:void(0);" className="sidebarCollapse">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
</a>
<div className="search-animated toggle-search">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
<form className="form-inline search-full form-inline search" role="search">
<div className="search-bar">
<input type="text" className="form-control search-form-control ml-lg-auto" placeholder="Search..." />
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-x search-close"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</div>
</form>
<span className="badge badge-secondary">Ctrl + /</span>
</div>
<ul className="navbar-item flex-row ms-lg-auto ms-0">
<li className="nav-item dropdown language-dropdown">
<a href="javascript:void(0);" className="nav-link dropdown-toggle" id="language-dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="img/1x1/us.svg" className="flag-width" alt="flag" />
</a>
<div className="dropdown-menu position-absolute" aria-labelledby="language-dropdown">
<a className="dropdown-item d-flex" href="javascript:void(0);"><img src="img/1x1/us.svg" className="flag-width" alt="flag" /> <span className="align-self-center"> English</span></a>
<a className="dropdown-item d-flex" href="javascript:void(0);"><img src="img/1x1/tr.svg" className="flag-width" alt="flag" /> <span className="align-self-center"> Turkish</span></a>
<a className="dropdown-item d-flex" href="javascript:void(0);"><img src="img/1x1/br.svg" className="flag-width" alt="flag" /> <span className="align-self-center"> Portuguese</span></a>
<a className="dropdown-item d-flex" href="javascript:void(0);"><img src="img/1x1/in.svg" className="flag-width" alt="flag" /> <span className="align-self-center"> Hindi</span></a>
<a className="dropdown-item d-flex" href="javascript:void(0);"><img src="img/1x1/de.svg" className="flag-width" alt="flag" /> <span className="align-self-center"> German</span></a>
</div>
</li>
<li className="nav-item theme-toggle-item d-none">
<a href="javascript:void(0);" className="nav-link theme-toggle">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-moon dark-mode"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-sun light-mode"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
</a>
</li>
<li className="nav-item dropdown notification-dropdown">
<a href="javascript:void(0);" className="nav-link dropdown-toggle" id="notificationDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-bell"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg><span className="badge badge-success"></span>
</a>
<div className="dropdown-menu position-absolute" aria-labelledby="notificationDropdown">
<div className="drodpown-title message">
<h6 className="d-flex justify-content-between"><span className="align-self-center">Messages</span> <span className="badge badge-primary">9 Unread</span></h6>
</div>
<div className="notification-scroll">
<div className="dropdown-item">
<div className="media server-log">
<img src="img/profile-16.jpeg" className="img-fluid me-2" alt="avatar" />
<div className="media-body">
<div className="data-info">
<h6 className="">Kara Young</h6>
<p className="">1 hr ago</p>
</div>
<div className="icon-status">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</div>
</div>
</div>
</div>
<div className="dropdown-item">
<div className="media ">
<img src="img/profile-15.jpeg" className="img-fluid me-2" alt="avatar" />
<div className="media-body">
<div className="data-info">
<h6 className="">Daisy Anderson</h6>
<p className="">8 hrs ago</p>
</div>
<div className="icon-status">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</div>
</div>
</div>
</div>
<div className="dropdown-item">
<div className="media file-upload">
<img src="img/profile-21.jpeg" className="img-fluid me-2" alt="avatar" />
<div className="media-body">
<div className="data-info">
<h6 className="">Oscar Garner</h6>
<p className="">14 hrs ago</p>
</div>
<div className="icon-status">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</div>
</div>
</div>
</div>
<div className="drodpown-title notification mt-2">
<h6 className="d-flex justify-content-between"><span className="align-self-center">Notifications</span> <span className="badge badge-secondary">16 New</span></h6>
</div>
<div className="dropdown-item">
<div className="media server-log">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-server"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6" y2="6"></line><line x1="6" y1="18" x2="6" y2="18"></line></svg>
<div className="media-body">
<div className="data-info">
<h6 className="">Server Rebooted</h6>
<p className="">45 min ago</p>
</div>
<div className="icon-status">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</div>
</div>
</div>
</div>
<div className="dropdown-item">
<div className="media file-upload">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
<div className="media-body">
<div className="data-info">
<h6 className="">Kelly Portfolio.pdf</h6>
<p className="">670 kb</p>
</div>
<div className="icon-status">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</div>
</div>
</div>
</div>
<div className="dropdown-item">
<div className="media ">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
<div className="media-body">
<div className="data-info">
<h6 className="">Licence Expiring Soon</h6>
<p className="">8 hrs ago</p>
</div>
<div className="icon-status">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li className="nav-item dropdown user-profile-dropdown order-lg-0 order-1">
<a href="javascript:void(0);" className="nav-link dropdown-toggle user" id="userProfileDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div className="avatar-container">
<div className="avatar avatar-sm avatar-indicators avatar-online">
<img alt="avatar" src="img/profile-30.png" className="rounded-circle" />
</div>
</div>
</a>
<div className="dropdown-menu position-absolute" aria-labelledby="userProfileDropdown">
<div className="user-profile-section">
<div className="media mx-auto">
<div className="emoji me-2">
👋
</div>
<div className="media-body">
<h5>Shaun Park</h5>
<p>Project Leader</p>
</div>
</div>
</div>
<div className="dropdown-item">
<a href="user-profile.html">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg> <span>Profile</span>
</a>
</div>
<div className="dropdown-item">
<a href="app-mailbox.html">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-inbox"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg> <span>Inbox</span>
</a>
</div>
<div className="dropdown-item">
<a href="auth-boxed-lockscreen.html">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-lock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg> <span>Lock Screen</span>
</a>
</div>
<div className="dropdown-item">
<a href="auth-boxed-signin.html">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg> <span>Log Out</span>
</a>
</div>
</div>
</li>
</ul>
</header>
</div>
{/* END NAVBAR */}
{/* BEGIN MAIN CONTAINER */}
<div className="main-container " id="container">
<div className="overlay"></div>
<div className="search-overlay"></div>
{/* BEGIN SIDEBAR */}
<div className="sidebar-wrapper sidebar-theme">
<nav id="sidebar">
<div className="navbar-nav theme-brand flex-row text-center">
<div className="nav-logo">
<div className="nav-item theme-logo">
<a href="./index.html">
<img src="img/logo.svg" className="navbar-logo" alt="logo" />
</a>
</div>
<div className="nav-item theme-text">
<a href="./index.html" className="nav-link"> EQUATION </a>
</div>
</div>
</div>
<div className="profile-info">
<div className="user-info">
<div className="profile-img">
<img src="img/profile-30.png" alt="avatar" />
</div>
<div className="profile-content">
<h6 className="">Shaun Park</h6>
<p className="">Project Leader</p>
</div>
</div>
</div>
<div className="shadow-bottom"></div>
<ul className="list-unstyled menu-categories" id="accordionExample">
<li className="menu active">
<a href="#dashboard" data-bs-toggle="collapse" aria-expanded="true" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
<span>Dashboard</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
</a>
<ul className="collapse submenu list-unstyled show" id="dashboard" data-bs-parent="#accordionExample">
<li>
<a href="./index.html"> Analytics </a>
</li>
<li className="active">
<a href="./index2.html"> Sales </a>
</li>
</ul>
</li>
<li className="menu menu-heading">
<div className="heading"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-minus"><line x1="5" y1="12" x2="19" y2="12"></line></svg><span>APPLICATIONS</span></div>
</li>
<li className="menu">
<a href="./app-calendar.html" aria-expanded="false" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
<span>Calendar</span>
</div>
</a>
</li>
<li className="menu">
<a href="./app-chat.html" aria-expanded="false" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-message-square"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
<span>Chat</span>
</div>
</a>
</li>
<li className="menu">
<a href="./app-mailbox.html" aria-expanded="false" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-mail"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
<span>Mailbox</span>
</div>
</a>
</li>
<li className="menu">
<a href="./app-todoList.html" aria-expanded="false" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
<span>Todo List</span>
</div>
</a>
</li>
<li className="menu">
<a href="./app-notes.html" aria-expanded="false" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
<span>Notes</span>
</div>
</a>
</li>
<li className="menu">
<a href="./app-scrumboard.html" aria-expanded="false" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-file-plus"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="12" y1="18" x2="12" y2="12"></line><line x1="9" y1="15" x2="15" y2="15"></line></svg>
<span>Scrumboard</span>
</div>
</a>
</li>
<li className="menu">
<a href="./app-contacts.html" aria-expanded="false" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-map-pin"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
<span>Contacts</span>
</div>
</a>
</li>
<li className="menu">
<a href="#invoice" data-bs-toggle="collapse" aria-expanded="false" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-dollar-sign"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
<span>Invoice</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
</a>
<ul className="collapse submenu list-unstyled" id="invoice" data-bs-parent="#accordionExample">
<li>
<a href="./app-invoice-list.html"> List </a>
</li>
<li>
<a href="./app-invoice-preview.html"> Preview </a>
</li>
<li>
<a href="./app-invoice-add.html"> Add </a>
</li>
<li>
<a href="./app-invoice-edit.html"> Edit </a>
</li>
</ul>
</li>
<li className="menu">
<a href="#ecommerce" data-bs-toggle="collapse" aria-expanded="false" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-shopping-cart"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
<span>Ecommerce</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
</a>
<ul className="collapse submenu list-unstyled" id="ecommerce" data-bs-parent="#accordionExample">
<li>
<a href="./app-ecommerce-product-shop.html"> Shop </a>
</li>
<li>
<a href="./app-ecommerce-product.html"> Product </a>
</li>
<li>
<a href="./app-ecommerce-product-list.html"> List </a>
</li>
<li>
<a href="./app-ecommerce-product-add.html"> Create </a>
</li>
<li>
<a href="./app-ecommerce-product-edit.html"> Edit </a>
</li>
</ul>
</li>
<li className="menu">
<a href="#blog" data-bs-toggle="collapse" aria-expanded="false" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-pen-tool"><path d="M12 19l7-7 3 3-7 7-3-3z"></path><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path><path d="M2 2l7.586 7.586"></path><circle cx="11" cy="11" r="2"></circle></svg>
<span>Blog</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
</a>
<ul className="collapse submenu list-unstyled" id="blog" data-bs-parent="#accordionExample">
<li>
<a href="./app-blog-grid.html"> Grid </a>
</li>
<li>
<a href="./app-blog-list.html"> List </a>
</li>
<li>
<a href="./app-blog-post.html"> Post </a>
</li>
<li>
<a href="./app-blog-create.html"> Create </a>
</li>
<li>
<a href="./app-blog-edit.html"> Edit </a>
</li>
</ul>
</li>
<li className="menu menu-heading">
<div className="heading"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-minus"><line x1="5" y1="12" x2="19" y2="12"></line></svg><span>USER INTERFACE</span></div>
</li>
<li className="menu">
<a href="#components" data-bs-toggle="collapse" aria-expanded="false" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-box"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
<span>Components</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
</a>
<ul className="collapse submenu list-unstyled" id="components" data-bs-parent="#accordionExample">
<li>
<a href="./component-tabs.html"> Tabs </a>
</li>
<li>
<a href="./component-accordion.html"> Accordions </a>
</li>
<li>
<a href="./component-modal.html"> Modals </a>
</li>
<li>
<a href="./component-cards.html"> Cards </a>
</li>
<li>
<a href="./component-bootstrap-carousel.html">Carousel</a>
</li>
<li>
<a href="./component-splide.html">Splide</a>
</li>
<li>
<a href="./component-sweetalert.html"> Sweet Alerts </a>
</li>
<li>
<a href="./component-timeline.html"> Timeline </a>
</li>
<li>
<a href="./component-notifications.html"> Notifications </a>
</li>
<li>
<a href="./component-media-object.html"> Media Object </a>
</li>
<li>
<a href="./component-list-group.html"> List Group </a>
</li>
<li>
<a href="./component-pricing-table.html"> Pricing Tables </a>
</li>
<li>
<a href="./component-lightbox.html"> Lightbox </a>
</li>
<li>
<a href="./component-drag-drop.html"> Drag and Drop </a>
</li>
<li>
<a href="./component-fonticons.html"> Font Icons </a>
</li>
<li>
<a href="./component-flags.html"> Flag Icons </a>
</li>
</ul>
</li>
<li className="menu">
<a href="#elements" data-bs-toggle="collapse" aria-expanded="false" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-zap"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
<span>Elements</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
</a>
<ul className="collapse submenu list-unstyled" id="elements" data-bs-parent="#accordionExample">
<li>
<a href="./element-alerts.html"> Alerts </a>
</li>
<li>
<a href="./element-avatar.html"> Avatar </a>
</li>
<li>
<a href="./element-badges.html"> Badges </a>
</li>
<li>
<a href="./element-breadcrumbs.html"> Breadcrumbs </a>
</li>
<li>
<a href="./element-buttons.html"> Buttons </a>
</li>
<li>
<a href="./element-buttons-group.html"> Button Groups </a>
</li>
<li>
<a href="./element-color-library.html"> Color Library </a>
</li>
<li>
<a href="./element-dropdown.html"> Dropdown </a>
</li>
<li>
<a href="./element-infobox.html"> Infobox </a>
</li>
<li>
<a href="./element-loader.html"> Loader </a>
</li>
<li>
<a href="./element-pagination.html"> Pagination </a>
</li>
<li>
<a href="./element-popovers.html"> Popovers </a>
</li>
<li>
<a href="./element-progressbar.html"> Progress Bar </a>
</li>
<li>
<a href="./element-search.html"> Search </a>
</li>
<li>
<a href="./element-tooltips.html"> Tooltips </a>
</li>
<li>
<a href="./element-treeview.html"> Treeview </a>
</li>
<li>
<a href="./element-typography.html"> Typography </a>
</li>
</ul>
</li>
<li className="menu">
<a href="./map-leaflet.html" aria-expanded="false" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-map"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"></polygon><line x1="8" y1="2" x2="8" y2="18"></line><line x1="16" y1="6" x2="16" y2="22"></line></svg>
<span>Maps</span>
</div>
</a>
</li>
<li className="menu">
<a href="./charts-apex.html" aria-expanded="false" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-pie-chart"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
<span>Charts</span>
</div>
</a>
</li>
<li className="menu">
<a href="./widgets.html" aria-expanded="false" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-airplay"><path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path><polygon points="12 15 17 21 7 21 12 15"></polygon></svg>
<span>Widgets</span>
</div>
</a>
</li>
<li className="menu">
<a href="#layouts" data-bs-toggle="collapse" aria-expanded="false" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-terminal"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
<span>Layouts</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
</a>
<ul className="collapse submenu list-unstyled" id="layouts" data-bs-parent="#accordionExample">
<li>
<a href="./layout-blank-page.html"> Blank Page </a>
</li>
<li>
<a href="./layout-empty.html"> Empty Page </a>
</li>
<li>
<a href="./layout-full-width.html"> Full Width </a>
</li>
<li>
<a href="./layout-collapsible-menu.html"> Collapsed Menu </a>
</li>
</ul>
</li>
<li className="menu menu-heading">
<div className="heading"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-minus"><line x1="5" y1="12" x2="19" y2="12"></line></svg><span>TABLES AND FORMS</span></div>
</li>
<li className="menu">
<a href="./table-basic.html" aria-expanded="false" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-layout"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
<span>Tables</span>
</div>
</a>
</li>
<li className="menu">
<a href="#datatables" data-bs-toggle="collapse" aria-expanded="false" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-layers"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
<span>DataTables</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
</a>
<ul className="collapse submenu list-unstyled" id="datatables" data-bs-parent="#accordionExample">
<li>
<a href="./table-datatable-basic.html"> Basic </a>
</li>
<li>
<a href="./table-datatable-striped-table.html"> Striped </a>
</li>
<li>
<a href="./table-datatable-custom.html"> Custom </a>
</li>
<li>
<a href="./table-datatable-miscellaneous.html"> Miscellaneous </a>
</li>
</ul>
</li>
<li className="menu">
<a href="#forms" data-bs-toggle="collapse" aria-expanded="false" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
<span>Forms</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
</a>
<ul className="collapse submenu list-unstyled" id="forms" data-bs-parent="#accordionExample">
<li>
<a href="./form-bootstrap-basic.html"> Basic </a>
</li>
<li>
<a href="./form-input-group-basic.html"> Input Group </a>
</li>
<li>
<a href="./form-layouts.html"> Layouts </a>
</li>
<li>
<a href="./form-validation.html"> Validation </a>
</li>
<li>
<a href="./form-input-mask.html"> Input Mask </a>
</li>
<li>
<a href="./form-tom-select.html"> Tom Select </a>
</li>
<li>
<a href="./form-tagify.html"> Tagify </a>
</li>
<li>
<a href="./form-bootstrap-touchspin.html"> TouchSpin </a>
</li>
<li>
<a href="./form-maxlength.html"> Maxlength </a>
</li>
<li>
<a href="./form-checkbox.html"> Checkbox </a>
</li>
<li>
<a href="./form-radio.html"> Radio </a>
</li>
<li>
<a href="./form-switches.html"> Switches </a>
</li>
<li>
<a href="./form-wizard.html"> Wizards </a>
</li>
<li>
<a href="./form-fileupload.html"> File Upload </a>
</li>
<li>
<a href="./form-quill.html"> Quill Editor </a>
</li>
<li>
<a href="./form-markdown.html"> Markdown Editor </a>
</li>
<li>
<a href="./form-date-time-picker.html"> Date Time Picker </a>
</li>
<li>
<a href="./form-slider.html"> Slider </a>
</li>
<li>
<a href="./form-clipboard.html"> Clipboard </a>
</li>
<li>
<a href="./form-autoComplete.html"> Auto Complete </a>
</li>
</ul>
</li>
<li className="menu menu-heading">
<div className="heading"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-minus"><line x1="5" y1="12" x2="19" y2="12"></line></svg><span>USER AND PAGES</span></div>
</li>
<li className="menu">
<a href="#users" data-bs-toggle="collapse" aria-expanded="false" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
<span>Users</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
</a>
<ul className="collapse submenu list-unstyled" id="users" data-bs-parent="#accordionExample">
<li>
<a href="./user-profile.html"> Profile </a>
</li>
<li>
<a href="./user-account-settings.html"> Account Settings </a>
</li>
</ul>
</li>
<li className="menu">
<a href="#pages" data-bs-toggle="collapse" aria-expanded="false" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
<span>Pages</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
</a>
<ul className="collapse submenu list-unstyled" id="pages" data-bs-parent="#accordionExample">
<li>
<a href="./pages-knowledge-base.html"> Knowledge Base </a>
</li>
<li>
<a href="./pages-faq.html"> FAQ </a>
</li>
<li>
<a href="./pages-contact-us.html"> Contact Form </a>
</li>
<li>
<a href="./pages-error404.html" target="_blank"> Error </a>
</li>
<li>
<a href="./pages-maintenence.html" target="_blank"> Maintanence </a>
</li>
</ul>
</li>
<li className="menu">
<a href="#authentication" data-bs-toggle="collapse" aria-expanded="false" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-lock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
<span>Authentication</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
</a>
<ul className="collapse submenu list-unstyled" id="authentication" data-bs-parent="#accordionExample">
<li>
<a href="./auth-boxed-signin.html" target="_blank"> Sign In </a>
</li>
<li>
<a href="./auth-boxed-signup.html" target="_blank"> Sign Up </a>
</li>
<li>
<a href="./auth-boxed-lockscreen.html" target="_blank"> Unlock </a>
</li>
<li>
<a href="./auth-boxed-password-reset.html" target="_blank"> Reset </a>
</li>
<li>
<a href="./auth-boxed-2-step-verification.html" target="_blank"> 2 Step </a>
</li>
<li>
<a href="./auth-cover-signin.html" target="_blank"> Sign In Cover </a>
</li>
<li>
<a href="./auth-cover-signup.html" target="_blank"> Sign Up Cover </a>
</li>
<li>
<a href="./auth-cover-lockscreen.html" target="_blank"> Unlock Cover </a>
</li>
<li>
<a href="./auth-cover-password-reset.html" target="_blank"> Reset Cover </a>
</li>
<li>
<a href="./auth-cover-2-step-verification.html" target="_blank"> 2 Step Cover </a>
</li>
</ul>
</li>
<li className="menu menu-heading">
<div className="heading"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-minus"><line x1="5" y1="12" x2="19" y2="12"></line></svg><span>MISCELLANEOUS</span></div>
</li>
<li className="menu">
<a href="#menuLevel1" data-bs-toggle="collapse" aria-expanded="false" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>
<span>Item Level</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
</a>
<ul className="collapse submenu list-unstyled" id="menuLevel1" data-bs-parent="#accordionExample">
<li>
<a href="javascript:void(0);"> Item Level 1a </a>
</li>
<li>
<a href="javascript:void(0);"> Item Level 1b </a>
</li>
<li>
<a href="#level-three" data-bs-toggle="collapse" aria-expanded="false" className="dropdown-toggle collapsed"> Item Level 1c <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg> </a>
<ul className="collapse list-unstyled sub-submenu" id="level-three" data-bs-parent="#pages">
<li>
<a href="javascript:void(0);"> Item Level 2a </a>
</li>
<li>
<a href="javascript:void(0);"> Item Level 2b </a>
</li>
<li>
<a href="javascript:void(0);"> Item Level 2c </a>
</li>
</ul>
</li>
</ul>
</li>
<li className="menu">
<a href="javascript:void(0);" aria-expanded="false" className="dropdown-toggle disabled">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>
<span>Item Disabled</span>
</div>
</a>
</li>
<li className="menu">
<a href="javascript:void(0);" aria-expanded="false" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>
<span>Item Label</span>
<span className="badge badge-primary sidebar-label"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-message-circle badge-icon"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg> New</span>
</div>
</a>
</li>
<li className="menu">
<a target="_blank" href="../../documentation/index.html" aria-expanded="false" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-book"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
<span>Documentation</span>
</div>
</a>
</li>
<li className="menu">
<a target="_blank" href="../../documentation/changelog.html" aria-expanded="false" className="dropdown-toggle">
<div className="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-hash"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>
<span>Changelog</span>
</div>
</a>
</li>
</ul>
</nav>
</div>
{/* END SIDEBAR */}
{/* BEGIN CONTENT AREA */}
<div id="content" className="main-content">
<div className="layout-px-spacing">
<div className="middle-content container-xxl p-0">
<div className="row layout-top-spacing">
<div className="col-xl-3 col-lg-6 col-md-6 col-sm-6 layout-spacing">
<div className="widget widget-t-sales-widget widget-m-sales">
<div className="media">
<div className="icon ml-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-bar-chart"><line x1="12" y1="20" x2="12" y2="10"></line><line x1="18" y1="20" x2="18" y2="4"></line><line x1="6" y1="20" x2="6" y2="16"></line></svg>
</div>
<div className="media-body">
<p className="widget-text">Sales</p>
<p className="widget-numeric-value">98,225</p>
</div>
</div>
<p className="widget-total-stats">94% New Sales</p>
</div>
</div>
<div className="col-xl-3 col-lg-6 col-md-6 col-sm-6 layout-spacing">
<div className="widget widget-t-sales-widget widget-m-orders">
<div className="media">
<div className="icon ml-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-shopping-bag"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg>
</div>
<div className="media-body">
<p className="widget-text">Orders</p>
<p className="widget-numeric-value">24,017</p>
</div>
</div>
<p className="widget-total-stats">552 New Orders</p>
</div>
</div>
<div className="col-xl-3 col-lg-6 col-md-6 col-sm-6 layout-spacing">
<div className="widget widget-t-sales-widget widget-m-customers">
<div className="media">
<div className="icon ml-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
</div>
<div className="media-body">
<p className="widget-text">Customers</p>
<p className="widget-numeric-value">92,251</p>
</div>
</div>
<p className="widget-total-stats">390 New Customers</p>
</div>
</div>
<div className="col-xl-3 col-lg-6 col-md-6 col-sm-6 layout-spacing">
<div className="widget widget-t-sales-widget widget-m-income">
<div className="media">
<div className="icon ml-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-dollar-sign"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
</div>
<div className="media-body">
<p className="widget-text">Income</p>
<p className="widget-numeric-value">9.5 M</p>
</div>
</div>
<p className="widget-total-stats">$2.1 M This Week</p>
</div>
</div>
<div className="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
<div className="widget widget-activity-four">
<div className="widget-heading">
<h5 className="">Recent Activities</h5>
</div>
<div className="widget-content">
<div className="mt-container-ra mx-auto">
<div className="timeline-line">
<div className="item-timeline timeline-primary">
<div className="t-dot" data-original-title="" title="">
</div>
<div className="t-text">
<p><span>Updated</span> Server Logs</p>
<span className="badge">Pending</span>
<p className="t-time">Just Now</p>
</div>
</div>
<div className="item-timeline timeline-success">
<div className="t-dot" data-original-title="" title="">
</div>
<div className="t-text">
<p>Send Mail to <a href="javascript:void(0);">HR</a> and <a href="javascript:void(0);">Admin</a></p>
<span className="badge">Completed</span>
<p className="t-time">2 min ago</p>
</div>
</div>
<div className="item-timeline timeline-danger">
<div className="t-dot" data-original-title="" title="">
</div>
<div className="t-text">
<p>Backup <span>Files EOD</span></p>
<span className="badge">Pending</span>
<p className="t-time">14:00</p>
</div>
</div>
<div className="item-timeline timeline-dark">
<div className="t-dot" data-original-title="" title="">
</div>
<div className="t-text">
<p>Collect documents from <a href="javascript:void(0);">Sara</a></p>
<span className="badge">Completed</span>
<p className="t-time">16:00</p>
</div>
</div>
<div className="item-timeline timeline-warning">
<div className="t-dot" data-original-title="" title="">
</div>
<div className="t-text">
<p>Conference call with <a href="javascript:void(0);">Marketing Manager</a>.</p>
<span className="badge">In progress</span>
<p className="t-time">17:00</p>
</div>
</div>
<div className="item-timeline timeline-secondary">
<div className="t-dot" data-original-title="" title="">
</div>
<div className="t-text">
<p>Rebooted Server</p>
<span className="badge">Completed</span>
<p className="t-time">17:00</p>
</div>
</div>
<div className="item-timeline timeline-warning">
<div className="t-dot" data-original-title="" title="">
</div>
<div className="t-text">
<p>Send contract details to Freelancer</p>
<span className="badge">Pending</span>
<p className="t-time">18:00</p>
</div>
</div>
<div className="item-timeline timeline-dark">
<div className="t-dot" data-original-title="" title="">
</div>
<div className="t-text">
<p>Kelly want to increase the time of the project.</p>
<span className="badge">In Progress</span>
<p className="t-time">19:00</p>
</div>
</div>
<div className="item-timeline timeline-success">
<div className="t-dot" data-original-title="" title="">
</div>
<div className="t-text">
<p>Server down for maintanence</p>
<span className="badge">Completed</span>
<p className="t-time">19:00</p>
</div>
</div>
<div className="item-timeline timeline-secondary">
<div className="t-dot" data-original-title="" title="">
</div>
<div className="t-text">
<p>Malicious link detected</p>
<span className="badge">Block</span>
<p className="t-time">20:00</p>
</div>
</div>
<div className="item-timeline timeline-warning">
<div className="t-dot" data-original-title="" title="">
</div>
<div className="t-text">
<p>Rebooted Server</p>
<span className="badge">Completed</span>
<p className="t-time">23:00</p>
</div>
</div>
<div className="item-timeline timeline-primary">
<div className="t-dot" data-original-title="" title="">
</div>
<div className="t-text">
<p><span>Updated</span> Server Logs</p>
<span className="badge">Pending</span>
<p className="t-time">Just Now</p>
</div>
</div>
<div className="item-timeline timeline-success">
<div className="t-dot" data-original-title="" title="">
</div>
<div className="t-text">
<p>Send Mail to <a href="javascript:void(0);">HR</a> and <a href="javascript:void(0);">Admin</a></p>
<span className="badge">Completed</span>
<p className="t-time">2 min ago</p>
</div>
</div>
<div className="item-timeline timeline-danger">
<div className="t-dot" data-original-title="" title="">
</div>
<div className="t-text">
<p>Backup <span>Files EOD</span></p>
<span className="badge">Pending</span>
<p className="t-time">14:00</p>
</div>
</div>
<div className="item-timeline timeline-dark">
<div className="t-dot" data-original-title="" title="">
</div>
<div className="t-text">
<p>Collect documents from <a href="javascript:void(0);">Sara</a></p>
<span className="badge">Completed</span>
<p className="t-time">16:00</p>
</div>
</div>
<div className="item-timeline timeline-warning">
<div className="t-dot" data-original-title="" title="">
</div>
<div className="t-text">
<p>Conference call with <a href="javascript:void(0);">Marketing Manager</a>.</p>
<span className="badge">In progress</span>
<p className="t-time">17:00</p>
</div>
</div>
</div>
</div>
<div className="tm-action-btn">
<button className="btn"><span>View All</span> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></button>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
<div className="widget widget-table-one">
<div className="widget-heading">
<h5 className="">Transactions</h5>
<div className="task-action">
<div className="dropdown">
<a className="dropdown-toggle" href="#" role="button" id="pendingTask" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-more-horizontal"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
</a>
<div className="dropdown-menu left" aria-labelledby="pendingTask" style={{ willChange: 'transform' }}>
<a className="dropdown-item" href="javascript:void(0);">View Report</a>
<a className="dropdown-item" href="javascript:void(0);">Edit Report</a>
<a className="dropdown-item" href="javascript:void(0);">Mark as Done</a>
</div>
</div>
</div>
</div>
<div className="widget-content">
<div className="transactions-list">
<div className="t-item">
<div className="t-company-name">
<div className="t-icon">
<div className="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</div>
</div>
<div className="t-name">
<h4>Electricity Bill</h4>
<p className="meta-date">04 Jan 1:00PM</p>
</div>
</div>
<div className="t-rate rate-dec">
<p><span>-$16.44</span></p>
</div>
</div>
</div>
<div className="transactions-list t-info">
<div className="t-item">
<div className="t-company-name">
<div className="t-icon">
<div className="avatar">
<span className="avatar-title">SP</span>
</div>
</div>
<div className="t-name">
<h4>Shaun Park</h4>
<p className="meta-date">10 Jan 1:00PM</p>
</div>
</div>
<div className="t-rate rate-inc">
<p><span>+$36.11</span></p>
</div>
</div>
</div>
<div className="transactions-list">
<div className="t-item">
<div className="t-company-name">
<div className="t-icon">
<div className="avatar">
<span className="avatar-title">AD</span>
</div>
</div>
<div className="t-name">
<h4>Amy Diaz</h4>
<p className="meta-date">31 Jan 1:00PM</p>
</div>
</div>
<div className="t-rate rate-inc">
<p><span>+$66.44</span></p>
</div>
</div>
</div>
<div className="transactions-list t-secondary">
<div className="t-item">
<div className="t-company-name">
<div className="t-icon">
<div className="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</div>
</div>
<div className="t-name">
<h4>Netflix</h4>
<p className="meta-date">02 Feb 1:00PM</p>
</div>
</div>
<div className="t-rate rate-dec">
<p><span>-$32.00</span></p>
</div>
</div>
</div>
<div className="transactions-list t-info">
<div className="t-item">
<div className="t-company-name">
<div className="t-icon">
<div className="avatar">
<span className="avatar-title">DA</span>
</div>
</div>
<div className="t-name">
<h4>Daisy Anderson</h4>
<p className="meta-date">15 Feb 1:00PM</p>
</div>
</div>
<div className="t-rate rate-inc">
<p><span>+$10.08</span></p>
</div>
</div>
</div>
<div className="transactions-list">
<div className="t-item">
<div className="t-company-name">
<div className="t-icon">
<div className="avatar">
<span className="avatar-title">OG</span>
</div>
</div>
<div className="t-name">
<h4>Oscar Garner</h4>
<p className="meta-date">20 Feb 1:00PM</p>
</div>
</div>
<div className="t-rate rate-dec">
<p><span>-$22.00</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
<div className="widget widget-wallet-one">
<div className="wallet-info text-center mb-3">
<p className="wallet-title mb-3">Total Balance</p>
<p className="total-amount mb-3">$ 26,177.88</p>
<a href="#" className="wallet-text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-trending-up me-2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg> Get 6% interest</a>
</div>
<div className="wallet-action text-center d-flex justify-content-around">
<button className="btn btn-danger">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
<span className="btn-text-inner">Topup</span>
</button>
<button className="btn btn-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-arrow-right-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg>
<span className="btn-text-inner">Send</span>
</button>
</div>
<hr />
<ul className="list-group list-group-media">
<li className="list-group-item ">
<div className="media">
<div className="me-3">
<img alt="avatar" src="img/netflix.svg" className="img-fluid rounded-circle" />
</div>
<div className="media-body">
<h6 className="tx-inverse">Netflix</h6>
<p className="mg-b-0">June 6, 10:34</p>
<p className="amount">- $18.06</p>
</div>
</div>
</li>
<li className="list-group-item">
<div className="media">
<div className="me-3">
<img alt="avatar" src="img/apple-app-store.svg" className="img-fluid rounded-circle" />
</div>
<div className="media-body">
<h6 className="tx-inverse">App Design</h6>
<p className="mg-b-0">June 14, 05:21</p>
<p className="amount">- $90.65</p>
</div>
</div>
</li>
</ul>
<button className="btn btn-secondary w-100 mt-3">View Transaction History</button>
</div>
</div>
<div className="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
<div className="widget widget-table-two">
<div className="widget-heading">
<h5 className="">Recent Orders</h5>
</div>
<div className="widget-content">
<div className="table-responsive">
<table className="table">
<thead>
<tr>
<th><div className="th-content">Customer</div></th>
<th><div className="th-content">Product</div></th>
<th><div className="th-content">Invoice</div></th>
<th><div className="th-content th-heading">Price</div></th>
<th><div className="th-content">Status</div></th>
</tr>
</thead>
<tbody>
<tr>
<td><div className="td-content customer-name"><img src="img/profile-13.jpeg" alt="avatar" /><span>Luke Ivory</span></div></td>
<td><div className="td-content product-brand text-primary">Headphone</div></td>
<td><div className="td-content product-invoice">#46894</div></td>
<td><div className="td-content pricing"><span className="">$56.07</span></div></td>
<td><div className="td-content"><span className="badge badge-success">Paid</span></div></td>
</tr>
<tr>
<td><div className="td-content customer-name"><img src="img/profile-7.jpeg" alt="avatar" /><span>Andy King</span></div></td>
<td><div className="td-content product-brand text-warning">Nike Sport</div></td>
<td><div className="td-content product-invoice">#76894</div></td>
<td><div className="td-content pricing"><span className="">$88.00</span></div></td>
<td><div className="td-content"><span className="badge badge-primary">Shipped</span></div></td>
</tr>
<tr>
<td><div className="td-content customer-name"><img src="img/profile-10.jpeg" alt="avatar" /><span>Laurie Fox</span></div></td>
<td><div className="td-content product-brand text-danger">Sunglasses</div></td>
<td><div className="td-content product-invoice">#66894</div></td>
<td><div className="td-content pricing"><span className="">$126.04</span></div></td>
<td><div className="td-content"><span className="badge badge-success">Paid</span></div></td>
</tr>
<tr>
<td><div className="td-content customer-name"><img src="img/profile-5.jpeg" alt="avatar" /><span>Ryan Collins</span></div></td>
<td><div className="td-content product-brand text-warning">Sport</div></td>
<td><div className="td-content product-invoice">#89891</div></td>
<td><div className="td-content pricing"><span className="">$108.09</span></div></td>
<td><div className="td-content"><span className="badge badge-primary">Shipped</span></div></td>
</tr>
<tr>
<td><div className="td-content customer-name"><img src="img/profile-4.jpeg" alt="avatar" /><span>Irene Collins</span></div></td>
<td><div className="td-content product-brand text-primary">Speakers</div></td>
<td><div className="td-content product-invoice">#75844</div></td>
<td><div className="td-content pricing"><span className="">$84.00</span></div></td>
<td><div className="td-content"><span className="badge badge-danger">Pending</span></div></td>
</tr>
<tr>
<td><div className="td-content customer-name"><img src="img/profile-11.jpeg" alt="avatar" /><span>Sonia Shaw</span></div></td>
<td><div className="td-content product-brand text-danger">Watch</div></td>
<td><div className="td-content product-invoice">#76844</div></td>
<td><div className="td-content pricing"><span className="">$110.00</span></div></td>
<td><div className="td-content"><span className="badge badge-success">Paid</span></div></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div className="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
<div className="widget widget-table-three">
<div className="widget-heading">
<h5 className="">Top Selling Product</h5>
</div>
<div className="widget-content">
<div className="table-responsive">
<table className="table table-scroll">
<thead>
<tr>
<th><div className="th-content">Product</div></th>
<th><div className="th-content th-heading">Price</div></th>
<th><div className="th-content th-heading">Discount</div></th>
<th><div className="th-content">Sold</div></th>
<th><div className="th-content">Source</div></th>
</tr>
</thead>
<tbody>
<tr>
<td><div className="td-content product-name"><img src="img/product-headphones.jpg" alt="product" /><div className="align-self-center"><p className="prd-name">Headphone</p><p className="prd-category text-primary">Digital</p></div></div></td>
<td><div className="td-content"><span className="pricing">$168.09</span></div></td>
<td><div className="td-content"><span className="discount-pricing">$60.09</span></div></td>
<td><div className="td-content">170</div></td>
<td><div className="td-content"><a href="javascript:void(0);" className="text-danger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-danger feather feather-chevrons-right"><polyline points="13 17 18 12 13 7"></polyline><polyline points="6 17 11 12 6 7"></polyline></svg> Direct</a></div></td>
</tr>
<tr>
<td><div className="td-content product-name"><img src="img/product-shoes.jpg" alt="product" /><div className="align-self-center"><p className="prd-name">Shoes</p><p className="prd-category text-warning">Faishon</p></div></div></td>
<td><div className="td-content"><span className="pricing">$108.09</span></div></td>
<td><div className="td-content"><span className="discount-pricing">$47.09</span></div></td>
<td><div className="td-content">130</div></td>
<td><div className="td-content"><a href="javascript:void(0);" className="text-primary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-primary feather feather-chevrons-right"><polyline points="13 17 18 12 13 7"></polyline><polyline points="6 17 11 12 6 7"></polyline></svg> Google</a></div></td>
</tr>
<tr>
<td><div className="td-content product-name"><img src="img/product-watch.jpg" alt="product" /><div className="align-self-center"><p className="prd-name">Watch</p><p className="prd-category text-danger">Accessories</p></div></div></td>
<td><div className="td-content"><span className="pricing">$88.00</span></div></td>
<td><div className="td-content"><span className="discount-pricing">$20.00</span></div></td>
<td><div className="td-content">66</div></td>
<td><div className="td-content"><a href="javascript:void(0);" className="text-warning"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-warning feather feather-chevrons-right"><polyline points="13 17 18 12 13 7"></polyline><polyline points="6 17 11 12 6 7"></polyline></svg> Ads</a></div></td>
</tr>
<tr>
<td><div className="td-content product-name"><img src="img/product-laptop.jpg" alt="product" /><div className="align-self-center"><p className="prd-name">Laptop</p><p className="prd-category text-primary">Digital</p></div></div></td>
<td><div className="td-content"><span className="pricing">$110.00</span></div></td>
<td><div className="td-content"><span className="discount-pricing">$33.00</span></div></td>
<td><div className="td-content">35</div></td>
<td><div className="td-content"><a href="javascript:void(0);" className="text-info"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-info feather feather-chevrons-right"><polyline points="13 17 18 12 13 7"></polyline><polyline points="6 17 11 12 6 7"></polyline></svg> Email</a></div></td>
</tr>
<tr>
<td><div className="td-content product-name"><img src="img/product-camera.jpg" alt="product" /><div className="align-self-center"><p className="prd-name">Camera</p><p className="prd-category text-primary">Digital</p></div></div></td>
<td><div className="td-content"><span className="pricing">$126.04</span></div></td>
<td><div className="td-content"><span className="discount-pricing">$26.04</span></div></td>
<td><div className="td-content">30</div></td>
<td><div className="td-content"><a href="javascript:void(0);" className="text-secondary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-secondary feather feather-chevrons-right"><polyline points="13 17 18 12 13 7"></polyline><polyline points="6 17 11 12 6 7"></polyline></svg> Referral</a></div></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{/* BEGIN FOOTER */}
<div className="footer-wrapper">
<div className="footer-section f-section-1">
<p className="">Copyright © <span className="dynamic-year">2025</span> <a target="_blank" href="#">Jassa</a>, All rights reserved.</p>
</div>
<div className="footer-section f-section-2">
<p className="">Coded with <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg></p>
</div>
</div>
{/* END CONTENT AREA */}
</div>
{/* END CONTENT AREA */}
</div>
{/* END MAIN CONTAINER */}
</div>
);
}
Step 4: Guys download assets from below GitHub link add that inside project public folder:
Step 5: Run the Application
Finally, run your Next.js application:
npm run dev
Visit http://localhost:3000 in your browser to see the website in action.
This is it guys and if you will have any kind of query, suggestion or requirement then feel free to comment below. Also if you will have any kind of project then feel free to hire me
Thanks
Ajay