AyulaPOS/bootstrap/pos.html

2757 lines
113 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=0"
/>
<meta name="description" content="POS - Bootstrap Admin Template" />
<meta
name="keywords"
content="admin, estimates, bootstrap, business, corporate, creative, invoice, html5, responsive, Projects"
/>
<meta name="author" content="Dreamguys - Bootstrap Admin Template" />
<meta name="robots" content="noindex, nofollow" />
<title>Dreams Pos admin template</title>
<link
rel="shortcut icon"
type="image/x-icon"
href="assets/img/favicon.jpg"
/>
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/css/animate.css" />
<link
rel="stylesheet"
href="assets/plugins/owlcarousel/owl.carousel.min.css"
/>
<link
rel="stylesheet"
href="assets/plugins/owlcarousel/owl.theme.default.min.css"
/>
<link rel="stylesheet" href="assets/plugins/select2/css/select2.min.css" />
<link rel="stylesheet" href="assets/css/bootstrap-datetimepicker.min.css" />
<link
rel="stylesheet"
href="assets/plugins/fontawesome/css/fontawesome.min.css"
/>
<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css" />
<link rel="stylesheet" href="assets/css/style.css" />
</head>
<body>
<div id="global-loader">
<div class="whirly-loader"></div>
</div>
<div class="main-wrappers">
<div class="header">
<div class="header-left border-0">
<a href="index.html" class="logo">
<img src="assets/img/logo.png" alt="" />
</a>
<a href="index.html" class="logo-small">
<img src="assets/img/logo-small.png" alt="" />
</a>
<a id="toggle_btn" href="javascript:void(0);"> </a>
</div>
<a id="mobile_btn" class="mobile_btn" href="#sidebar">
<span class="bar-icon">
<span></span>
<span></span>
<span></span>
</span>
</a>
<ul class="nav user-menu">
<li class="nav-item">
<div class="top-nav-search">
<a href="javascript:void(0);" class="responsive-search">
<i class="fa fa-search"></i>
</a>
<form action="#">
<div class="searchinputs">
<input type="text" placeholder="Search Here ..." />
<div class="search-addon">
<span
><img src="assets/img/icons/closes.svg" alt="img"
/></span>
</div>
</div>
<a class="btn" id="searchdiv"
><img src="assets/img/icons/search.svg" alt="img"
/></a>
</form>
</div>
</li>
<li class="nav-item dropdown has-arrow flag-nav">
<a
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
href="javascript:void(0);"
role="button"
>
<img src="assets/img/flags/us1.png" alt="" height="20" />
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="javascript:void(0);" class="dropdown-item">
<img src="assets/img/flags/us.png" alt="" height="16" /> English
</a>
<a href="javascript:void(0);" class="dropdown-item">
<img src="assets/img/flags/fr.png" alt="" height="16" /> French
</a>
<a href="javascript:void(0);" class="dropdown-item">
<img src="assets/img/flags/es.png" alt="" height="16" /> Spanish
</a>
<a href="javascript:void(0);" class="dropdown-item">
<img src="assets/img/flags/de.png" alt="" height="16" /> German
</a>
</div>
</li>
<li class="nav-item dropdown">
<a
href="javascript:void(0);"
class="dropdown-toggle nav-link"
data-bs-toggle="dropdown"
>
<img src="assets/img/icons/notification-bing.svg" alt="img" />
<span class="badge rounded-pill">4</span>
</a>
<div class="dropdown-menu notifications">
<div class="topnav-dropdown-header">
<span class="notification-title">Notifications</span>
<a href="javascript:void(0)" class="clear-noti"> Clear All </a>
</div>
<div class="noti-content">
<ul class="notification-list">
<li class="notification-message">
<a href="activities.html">
<div class="media d-flex">
<span class="avatar flex-shrink-0">
<img alt="" src="assets/img/profiles/avatar-02.jpg" />
</span>
<div class="media-body flex-grow-1">
<p class="noti-details">
<span class="noti-title">John Doe</span> added new
task
<span class="noti-title"
>Patient appointment booking</span
>
</p>
<p class="noti-time">
<span class="notification-time">4 mins ago</span>
</p>
</div>
</div>
</a>
</li>
<li class="notification-message">
<a href="activities.html">
<div class="media d-flex">
<span class="avatar flex-shrink-0">
<img alt="" src="assets/img/profiles/avatar-03.jpg" />
</span>
<div class="media-body flex-grow-1">
<p class="noti-details">
<span class="noti-title">Tarah Shropshire</span>
changed the task name
<span class="noti-title"
>Appointment booking with payment gateway</span
>
</p>
<p class="noti-time">
<span class="notification-time">6 mins ago</span>
</p>
</div>
</div>
</a>
</li>
<li class="notification-message">
<a href="activities.html">
<div class="media d-flex">
<span class="avatar flex-shrink-0">
<img alt="" src="assets/img/profiles/avatar-06.jpg" />
</span>
<div class="media-body flex-grow-1">
<p class="noti-details">
<span class="noti-title">Misty Tison</span> added
<span class="noti-title">Domenic Houston</span> and
<span class="noti-title">Claire Mapes</span> to
project
<span class="noti-title"
>Doctor available module</span
>
</p>
<p class="noti-time">
<span class="notification-time">8 mins ago</span>
</p>
</div>
</div>
</a>
</li>
<li class="notification-message">
<a href="activities.html">
<div class="media d-flex">
<span class="avatar flex-shrink-0">
<img alt="" src="assets/img/profiles/avatar-17.jpg" />
</span>
<div class="media-body flex-grow-1">
<p class="noti-details">
<span class="noti-title">Rolland Webber</span>
completed task
<span class="noti-title"
>Patient and Doctor video conferencing</span
>
</p>
<p class="noti-time">
<span class="notification-time">12 mins ago</span>
</p>
</div>
</div>
</a>
</li>
<li class="notification-message">
<a href="activities.html">
<div class="media d-flex">
<span class="avatar flex-shrink-0">
<img alt="" src="assets/img/profiles/avatar-13.jpg" />
</span>
<div class="media-body flex-grow-1">
<p class="noti-details">
<span class="noti-title">Bernardo Galaviz</span>
added new task
<span class="noti-title">Private chat module</span>
</p>
<p class="noti-time">
<span class="notification-time">2 days ago</span>
</p>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="topnav-dropdown-footer">
<a href="activities.html">View all Notifications</a>
</div>
</div>
</li>
<li class="nav-item dropdown has-arrow main-drop">
<a
href="javascript:void(0);"
class="dropdown-toggle nav-link userset"
data-bs-toggle="dropdown"
>
<span class="user-img"
><img src="assets/img/profiles/avator1.jpg" alt="" />
<span class="status online"></span
></span>
</a>
<div class="dropdown-menu menu-drop-user">
<div class="profilename">
<div class="profileset">
<span class="user-img"
><img src="assets/img/profiles/avator1.jpg" alt="" />
<span class="status online"></span
></span>
<div class="profilesets">
<h6>John Doe</h6>
<h5>Admin</h5>
</div>
</div>
<hr class="m-0" />
<a class="dropdown-item" href="profile.html">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-user me-2"
>
<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>
My Profile</a
>
<a class="dropdown-item" href="generalsettings.html"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-settings me-2"
>
<circle cx="12" cy="12" r="3"></circle>
<path
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
></path></svg
>Settings</a
>
<hr class="m-0" />
<a class="dropdown-item logout pb-0" href="signin.html"
><img
src="assets/img/icons/log-out.svg"
class="me-2"
alt="img"
/>Logout</a
>
</div>
</div>
</li>
</ul>
<div class="dropdown mobile-user-menu">
<a
href="javascript:void(0);"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
><i class="fa fa-ellipsis-v"></i
></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="profile.html">My Profile</a>
<a class="dropdown-item" href="generalsettings.html">Settings</a>
<a class="dropdown-item" href="signin.html">Logout</a>
</div>
</div>
</div>
<div class="sidebar" id="sidebar">
<div class="sidebar-inner slimscroll">
<div id="sidebar-menu" class="sidebar-menu">
<ul>
<li>
<a href="index.html"
><img src="assets/img/icons/dashboard.svg" alt="img" /><span>
Dashboard</span
>
</a>
</li>
<li class="submenu">
<a href="javascript:void(0);"
><img src="assets/img/icons/product.svg" alt="img" /><span>
Product</span
>
<span class="menu-arrow"></span
></a>
<ul>
<li>
<a href="productlist.html" class="active">Product List</a>
</li>
<li><a href="addproduct.html">Add Product</a></li>
<li><a href="categorylist.html">Category List</a></li>
<li><a href="addcategory.html">Add Category</a></li>
<li><a href="subcategorylist.html">Sub Category List</a></li>
<li><a href="subaddcategory.html">Add Sub Category</a></li>
<li><a href="brandlist.html">Brand List</a></li>
<li><a href="addbrand.html">Add Brand</a></li>
<li><a href="importproduct.html">Import Products</a></li>
<li><a href="barcode.html">Print Barcode</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"
><img src="assets/img/icons/sales1.svg" alt="img" /><span>
Sales</span
>
<span class="menu-arrow"></span
></a>
<ul>
<li><a href="saleslist.html">Sales List</a></li>
<li><a href="pos.html">POS</a></li>
<li><a href="pos.html">New Sales</a></li>
<li><a href="salesreturnlists.html">Sales Return List</a></li>
<li>
<a href="createsalesreturns.html">New Sales Return</a>
</li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"
><img src="assets/img/icons/purchase1.svg" alt="img" /><span>
Purchase</span
>
<span class="menu-arrow"></span
></a>
<ul>
<li><a href="purchaselist.html">Purchase List</a></li>
<li><a href="addpurchase.html">Add Purchase</a></li>
<li><a href="importpurchase.html">Import Purchase</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"
><img src="assets/img/icons/expense1.svg" alt="img" /><span>
Expense</span
>
<span class="menu-arrow"></span
></a>
<ul>
<li><a href="expenselist.html">Expense List</a></li>
<li><a href="createexpense.html">Add Expense</a></li>
<li><a href="expensecategory.html">Expense Category</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"
><img src="assets/img/icons/quotation1.svg" alt="img" /><span>
Quotation</span
>
<span class="menu-arrow"></span
></a>
<ul>
<li><a href="quotationList.html">Quotation List</a></li>
<li><a href="addquotation.html">Add Quotation</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"
><img src="assets/img/icons/transfer1.svg" alt="img" /><span>
Transfer</span
>
<span class="menu-arrow"></span
></a>
<ul>
<li><a href="transferlist.html">Transfer List</a></li>
<li><a href="addtransfer.html">Add Transfer </a></li>
<li><a href="importtransfer.html">Import Transfer </a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"
><img src="assets/img/icons/return1.svg" alt="img" /><span>
Return</span
>
<span class="menu-arrow"></span
></a>
<ul>
<li><a href="salesreturnlist.html">Sales Return List</a></li>
<li>
<a href="createsalesreturn.html">Add Sales Return </a>
</li>
<li>
<a href="purchasereturnlist.html">Purchase Return List</a>
</li>
<li>
<a href="createpurchasereturn.html">Add Purchase Return </a>
</li>
</ul>
</li>
<li>
<a href="components.html"
><i data-feather="layers"></i><span> Components</span>
</a>
</li>
<li>
<a href="blankpage.html"
><i data-feather="file"></i><span> Blank Page</span>
</a>
</li>
<li class="submenu">
<a href="javascript:void(0);"
><i data-feather="alert-octagon"></i>
<span> Error Pages </span> <span class="menu-arrow"></span
></a>
<ul>
<li><a href="error-404.html">404 Error </a></li>
<li><a href="error-500.html">500 Error </a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"
><i data-feather="box"></i> <span>Elements </span>
<span class="menu-arrow"></span
></a>
<ul>
<li><a href="sweetalerts.html">Sweet Alerts</a></li>
<li><a href="tooltip.html">Tooltip</a></li>
<li><a href="popover.html">Popover</a></li>
<li><a href="ribbon.html">Ribbon</a></li>
<li><a href="clipboard.html">Clipboard</a></li>
<li><a href="drag-drop.html">Drag & Drop</a></li>
<li><a href="rangeslider.html">Range Slider</a></li>
<li><a href="rating.html">Rating</a></li>
<li><a href="toastr.html">Toastr</a></li>
<li><a href="text-editor.html">Text Editor</a></li>
<li><a href="counter.html">Counter</a></li>
<li><a href="scrollbar.html">Scrollbar</a></li>
<li><a href="spinner.html">Spinner</a></li>
<li><a href="notification.html">Notification</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="stickynote.html">Sticky Note</a></li>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="form-wizard.html">Form Wizard</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"
><i data-feather="bar-chart-2"></i> <span> Charts </span>
<span class="menu-arrow"></span
></a>
<ul>
<li><a href="chart-apex.html">Apex Charts</a></li>
<li><a href="chart-js.html">Chart Js</a></li>
<li><a href="chart-morris.html">Morris Charts</a></li>
<li><a href="chart-flot.html">Flot Charts</a></li>
<li><a href="chart-peity.html">Peity Charts</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"
><i data-feather="award"></i><span> Icons </span>
<span class="menu-arrow"></span
></a>
<ul>
<li><a href="icon-fontawesome.html">Fontawesome Icons</a></li>
<li><a href="icon-feather.html">Feather Icons</a></li>
<li><a href="icon-ionic.html">Ionic Icons</a></li>
<li><a href="icon-material.html">Material Icons</a></li>
<li><a href="icon-pe7.html">Pe7 Icons</a></li>
<li><a href="icon-simpleline.html">Simpleline Icons</a></li>
<li><a href="icon-themify.html">Themify Icons</a></li>
<li><a href="icon-weather.html">Weather Icons</a></li>
<li><a href="icon-typicon.html">Typicon Icons</a></li>
<li><a href="icon-flag.html">Flag Icons</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"
><i data-feather="columns"></i> <span> Forms </span>
<span class="menu-arrow"></span
></a>
<ul>
<li><a href="form-basic-inputs.html">Basic Inputs </a></li>
<li><a href="form-input-groups.html">Input Groups </a></li>
<li><a href="form-horizontal.html">Horizontal Form </a></li>
<li><a href="form-vertical.html"> Vertical Form </a></li>
<li><a href="form-mask.html">Form Mask </a></li>
<li><a href="form-validation.html">Form Validation </a></li>
<li><a href="form-select2.html">Form Select2 </a></li>
<li><a href="form-fileupload.html">File Upload </a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"
><i data-feather="layout"></i> <span> Table </span>
<span class="menu-arrow"></span
></a>
<ul>
<li><a href="tables-basic.html">Basic Tables </a></li>
<li><a href="data-tables.html">Data Table </a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"
><img src="assets/img/icons/product.svg" alt="img" /><span>
Application</span
>
<span class="menu-arrow"></span
></a>
<ul>
<li><a href="chat.html">Chat</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="email.html">Email</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"
><img src="assets/img/icons/users1.svg" alt="img" /><span>
People</span
>
<span class="menu-arrow"></span
></a>
<ul>
<li><a href="customerlist.html">Customer List</a></li>
<li><a href="addcustomer.html">Add Customer </a></li>
<li><a href="supplierlist.html">Supplier List</a></li>
<li><a href="addsupplier.html">Add Supplier </a></li>
<li><a href="userlist.html">User List</a></li>
<li><a href="adduser.html">Add User</a></li>
<li><a href="storelist.html">Store List</a></li>
<li><a href="addstore.html">Add Store</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"
><img src="assets/img/icons/places.svg" alt="img" /><span>
Places</span
>
<span class="menu-arrow"></span
></a>
<ul>
<li><a href="newcountry.html">New Country</a></li>
<li><a href="countrieslist.html">Countries list</a></li>
<li><a href="newstate.html">New State </a></li>
<li><a href="statelist.html">State list</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"
><img src="assets/img/icons/time.svg" alt="img" /><span>
Report</span
>
<span class="menu-arrow"></span
></a>
<ul>
<li>
<a href="purchaseorderreport.html">Purchase order report</a>
</li>
<li><a href="inventoryreport.html">Inventory Report</a></li>
<li><a href="salesreport.html">Sales Report</a></li>
<li><a href="invoicereport.html">Invoice Report</a></li>
<li><a href="purchasereport.html">Purchase Report</a></li>
<li><a href="supplierreport.html">Supplier Report</a></li>
<li><a href="customerreport.html">Customer Report</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"
><img src="assets/img/icons/users1.svg" alt="img" /><span>
Users</span
>
<span class="menu-arrow"></span
></a>
<ul>
<li><a href="newuser.html">New User </a></li>
<li><a href="userlists.html">Users List</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"
><img src="assets/img/icons/settings.svg" alt="img" /><span>
Settings</span
>
<span class="menu-arrow"></span
></a>
<ul>
<li><a href="generalsettings.html">General Settings</a></li>
<li><a href="emailsettings.html">Email Settings</a></li>
<li><a href="paymentsettings.html">Payment Settings</a></li>
<li><a href="currencysettings.html">Currency Settings</a></li>
<li><a href="grouppermissions.html">Group Permissions</a></li>
<li><a href="taxrates.html">Tax Rates</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="page-wrapper">
<div class="content">
<div class="row">
<div class="col-lg-8 col-sm-12 tabs_wrapper">
<div class="page-header">
<div class="page-title">
<h4>Categories</h4>
<h6>Manage your purchases</h6>
</div>
</div>
<ul class="tabs owl-carousel owl-theme owl-product border-0">
<li class="active" id="fruits">
<div class="product-details">
<img src="assets/img/product/product62.png" alt="img" />
<h6>Fruits</h6>
</div>
</li>
<li id="headphone">
<div class="product-details">
<img src="assets/img/product/product63.png" alt="img" />
<h6>Headphones</h6>
</div>
</li>
<li id="Accessories">
<div class="product-details">
<img src="assets/img/product/product64.png" alt="img" />
<h6>Accessories</h6>
</div>
</li>
<li id="Shoes">
<a class="product-details">
<img src="assets/img/product/product65.png" alt="img" />
<h6>Shoes</h6>
</a>
</li>
<li id="computer">
<a class="product-details">
<img src="assets/img/product/product66.png" alt="img" />
<h6>Computer</h6>
</a>
</li>
<li id="Snacks">
<a class="product-details">
<img src="assets/img/product/product67.png" alt="img" />
<h6>Snacks</h6>
</a>
</li>
<li id="watch">
<a class="product-details">
<img src="assets/img/product/product68.png" alt="img" />
<h6>Watches</h6>
</a>
</li>
<li id="cycle">
<a class="product-details">
<img src="assets/img/product/product61.png" alt="img" />
<h6>Cycles</h6>
</a>
</li>
<li id="fruits1">
<div class="product-details">
<img src="assets/img/product/product62.png" alt="img" />
<h6>Fruits</h6>
</div>
</li>
<li id="headphone1">
<div class="product-details">
<img src="assets/img/product/product63.png" alt="img" />
<h6>Headphones</h6>
</div>
</li>
</ul>
<div class="tabs_container">
<div class="tab_content active" data-tab="fruits">
<div class="row">
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill active">
<div class="productsetimg">
<img
src="assets/img/product/product29.jpg"
alt="img"
/>
<h6>Qty: 5.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h5>Fruits</h5>
<h4>Orange</h4>
<h6>150.00</h6>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product31.jpg"
alt="img"
/>
<h6>Qty: 1.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h5>Fruits</h5>
<h4>Strawberry</h4>
<h6>15.00</h6>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product35.jpg"
alt="img"
/>
<h6>Qty: 5.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h5>Fruits</h5>
<h4>Banana</h4>
<h6>150.00</h6>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product37.jpg"
alt="img"
/>
<h6>Qty: 5.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h5>Fruits</h5>
<h4>Limon</h4>
<h6>1500.00</h6>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product54.jpg"
alt="img"
/>
<h6>Qty: 5.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h5>Fruits</h5>
<h4>Apple</h4>
<h6>1500.00</h6>
</div>
</div>
</div>
</div>
</div>
<div class="tab_content" data-tab="headphone">
<div class="row">
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product44.jpg"
alt="img"
/>
<h6>Qty: 5.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h5>Headphones</h5>
<h4>Earphones</h4>
<h6>150.00</h6>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product45.jpg"
alt="img"
/>
<h6>Qty: 5.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h5>Headphones</h5>
<h4>Earphones</h4>
<h6>150.00</h6>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product36.jpg"
alt="img"
/>
<h6>Qty: 5.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h5>Headphones</h5>
<h4>Earphones</h4>
<h6>150.00</h6>
</div>
</div>
</div>
</div>
</div>
<div class="tab_content" data-tab="Accessories">
<div class="row">
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product32.jpg"
alt="img"
/>
<h6>Qty: 1.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h5>Accessories</h5>
<h4>Sunglasses</h4>
<h6>15.00</h6>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product46.jpg"
alt="img"
/>
<h6>Qty: 1.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h5>Accessories</h5>
<h4>Pendrive</h4>
<h6>150.00</h6>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product55.jpg"
alt="img"
/>
<h6>Qty: 1.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h5>Accessories</h5>
<h4>Mouse</h4>
<h6>150.00</h6>
</div>
</div>
</div>
</div>
</div>
<div class="tab_content" data-tab="Shoes">
<div class="row">
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product60.jpg"
alt="img"
/>
<h6>Qty: 1.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h5>Shoes</h5>
<h4>Red nike</h4>
<h6>1500.00</h6>
</div>
</div>
</div>
</div>
</div>
<div class="tab_content" data-tab="computer">
<div class="row">
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product56.jpg"
alt="img"
/>
<h6>Qty: 1.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h5>Computers</h5>
<h4>Desktop</h4>
<h6>1500.00</h6>
</div>
</div>
</div>
</div>
</div>
<div class="tab_content" data-tab="Snacks">
<div class="row">
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product47.jpg"
alt="img"
/>
<h6>Qty: 1.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h5>Snacks</h5>
<h4>Duck Salad</h4>
<h6>1500.00</h6>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product48.png"
alt="img"
/>
<h6>Qty: 1.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h5>Snacks</h5>
<h4>Breakfast board</h4>
<h6>1500.00</h6>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product57.jpg"
alt="img"
/>
<h6>Qty: 1.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h5>Snacks</h5>
<h4>California roll</h4>
<h6>1500.00</h6>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product58.jpg"
alt="img"
/>
<h6>Qty: 1.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h5>Snacks</h5>
<h4>Sashimi</h4>
<h6>1500.00</h6>
</div>
</div>
</div>
</div>
</div>
<div class="tab_content" data-tab="watch">
<div class="row">
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product49.jpg"
alt="img"
/>
<h6>Qty: 1.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h4>Watch</h4>
<h5>Watch</h5>
<h6>1500.00</h6>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product51.jpg"
alt="img"
/>
<h6>Qty: 1.00</h6>
</div>
<div class="productsetcontent">
<h4>Watch</h4>
<h5>Watch</h5>
<h6>1500.00</h6>
</div>
</div>
</div>
</div>
</div>
<div class="tab_content" data-tab="cycle">
<div class="row">
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product52.jpg"
alt="img"
/>
<h6>Qty: 1.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h4>Cycle</h4>
<h5>Cycle</h5>
<h6>1500.00</h6>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product53.jpg"
alt="img"
/>
<h6>Qty: 1.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h4>Cycle</h4>
<h5>Cycle</h5>
<h6>1500.00</h6>
</div>
</div>
</div>
</div>
</div>
<div class="tab_content" data-tab="fruits1">
<div class="row">
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product29.jpg"
alt="img"
/>
<h6>Qty: 5.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h5>Fruits</h5>
<h4>Orange</h4>
<h6>150.00</h6>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product31.jpg"
alt="img"
/>
<h6>Qty: 1.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h5>Fruits</h5>
<h4>Strawberry</h4>
<h6>15.00</h6>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product35.jpg"
alt="img"
/>
<h6>Qty: 5.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h5>Fruits</h5>
<h4>Banana</h4>
<h6>150.00</h6>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product37.jpg"
alt="img"
/>
<h6>Qty: 5.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h5>Fruits</h5>
<h4>Limon</h4>
<h6>1500.00</h6>
</div>
</div>
</div>
</div>
</div>
<div class="tab_content" data-tab="headphone1">
<div class="row">
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product44.jpg"
alt="img"
/>
<h6>Qty: 5.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h5>Headphones</h5>
<h4>Earphones</h4>
<h6>150.00</h6>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product45.jpg"
alt="img"
/>
<h6>Qty: 5.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h5>Headphones</h5>
<h4>Earphones</h4>
<h6>150.00</h6>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 d-flex">
<div class="productset flex-fill">
<div class="productsetimg">
<img
src="assets/img/product/product36.jpg"
alt="img"
/>
<h6>Qty: 5.00</h6>
<div class="check-product">
<i class="fa fa-check"></i>
</div>
</div>
<div class="productsetcontent">
<h5>Headphones</h5>
<h4>Earphones</h4>
<h6>150.00</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-12">
<div class="order-list">
<div class="orderid">
<h4>Order List</h4>
<h5>Transaction id : #65565</h5>
</div>
<div class="actionproducts">
<ul>
<li>
<a
href="javascript:void(0);"
class="deletebg confirm-text"
><img src="assets/img/icons/delete-2.svg" alt="img"
/></a>
</li>
<li>
<a
href="javascript:void(0);"
data-bs-toggle="dropdown"
aria-expanded="false"
class="dropset"
>
<img src="assets/img/icons/ellipise1.svg" alt="img" />
</a>
<ul
class="dropdown-menu"
aria-labelledby="dropdownMenuButton"
data-popper-placement="bottom-end"
>
<li>
<a href="#" class="dropdown-item">Action</a>
</li>
<li>
<a href="#" class="dropdown-item">Another Action</a>
</li>
<li>
<a href="#" class="dropdown-item">Something Elses</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="card card-order">
<!-- <div class="card-body">
<div class="row">
<div class="col-12">
<a
href="javascript:void(0);"
class="btn btn-adds"
data-bs-toggle="modal"
data-bs-target="#create"
><i class="fa fa-plus me-2"></i>Add Customer</a
>
</div>
<div class="col-lg-12">
<div class="select-split">
<div class="select-group w-100">
<select class="select">
<option>Walk-in Customer</option>
<option>Chris Moris</option>
</select>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="select-split">
<div class="select-group w-100">
<select class="select">
<option>Product</option>
<option>Barcode</option>
</select>
</div>
</div>
</div>
<div class="col-12">
<div class="text-end">
<a class="btn btn-scanner-set"
><img
src="assets/img/icons/scanner1.svg"
alt="img"
class="me-2"
/>Scan bardcode</a
>
</div>
</div>
</div>
</div> -->
<div class="split-card"></div>
<div class="card-body pt-0">
<div class="totalitem">
<h4>Total items : 4</h4>
<a href="javascript:void(0);">Clear all</a>
</div>
<div class="product-table">
<ul class="product-lists">
<li>
<div class="productimg">
<div class="productimgs">
<img
src="assets/img/product/product30.jpg"
alt="img"
/>
</div>
<div class="productcontet">
<h4>
Pineapple
<a
href="javascript:void(0);"
class="ms-2"
data-bs-toggle="modal"
data-bs-target="#edit"
><img
src="assets/img/icons/edit-5.svg"
alt="img"
/></a>
</h4>
<div class="productlinkset">
<h5>PT001</h5>
</div>
<div class="increment-decrement">
<div class="input-groups">
<input
type="button"
value="-"
class="button-minus dec button"
/>
<input
type="text"
name="child"
value="0"
class="quantity-field"
/>
<input
type="button"
value="+"
class="button-plus inc button"
/>
</div>
</div>
</div>
</div>
</li>
<li>3000.00</li>
<li>
<a class="confirm-text" href="javascript:void(0);"
><img src="assets/img/icons/delete-2.svg" alt="img"
/></a>
</li>
</ul>
<ul class="product-lists">
<li>
<div class="productimg">
<div class="productimgs">
<img
src="assets/img/product/product34.jpg"
alt="img"
/>
</div>
<div class="productcontet">
<h4>
Green Nike
<a
href="javascript:void(0);"
class="ms-2"
data-bs-toggle="modal"
data-bs-target="#edit"
><img
src="assets/img/icons/edit-5.svg"
alt="img"
/></a>
</h4>
<div class="productlinkset">
<h5>PT001</h5>
</div>
<div class="increment-decrement">
<div class="input-groups">
<input
type="button"
value="-"
class="button-minus dec button"
/>
<input
type="text"
name="child"
value="0"
class="quantity-field"
/>
<input
type="button"
value="+"
class="button-plus inc button"
/>
</div>
</div>
</div>
</div>
</li>
<li>3000.00</li>
<li>
<a class="confirm-text" href="javascript:void(0);"
><img src="assets/img/icons/delete-2.svg" alt="img"
/></a>
</li>
</ul>
<ul class="product-lists">
<li>
<div class="productimg">
<div class="productimgs">
<img
src="assets/img/product/product35.jpg"
alt="img"
/>
</div>
<div class="productcontet">
<h4>
Banana
<a
href="javascript:void(0);"
class="ms-2"
data-bs-toggle="modal"
data-bs-target="#edit"
><img
src="assets/img/icons/edit-5.svg"
alt="img"
/></a>
</h4>
<div class="productlinkset">
<h5>PT001</h5>
</div>
<div class="increment-decrement">
<div class="input-groups">
<input
type="button"
value="-"
class="button-minus dec button"
/>
<input
type="text"
name="child"
value="0"
class="quantity-field"
/>
<input
type="button"
value="+"
class="button-plus inc button"
/>
</div>
</div>
</div>
</div>
</li>
<li>3000.00</li>
<li>
<a class="confirm-text" href="javascript:void(0);"
><img src="assets/img/icons/delete-2.svg" alt="img"
/></a>
</li>
</ul>
<ul class="product-lists">
<li>
<div class="productimg">
<div class="productimgs">
<img
src="assets/img/product/product31.jpg"
alt="img"
/>
</div>
<div class="productcontet">
<h4>
Strawberry
<a
href="javascript:void(0);"
class="ms-2"
data-bs-toggle="modal"
data-bs-target="#edit"
><img
src="assets/img/icons/edit-5.svg"
alt="img"
/></a>
</h4>
<div class="productlinkset">
<h5>PT001</h5>
</div>
<div class="increment-decrement">
<div class="input-groups">
<input
type="button"
value="-"
class="button-minus dec button"
/>
<input
type="text"
name="child"
value="0"
class="quantity-field"
/>
<input
type="button"
value="+"
class="button-plus inc button"
/>
</div>
</div>
</div>
</div>
</li>
<li>3000.00</li>
<li>
<a class="confirm-text" href="javascript:void(0);"
><img src="assets/img/icons/delete-2.svg" alt="img"
/></a>
</li>
</ul>
</div>
</div>
<div class="split-card"></div>
<div class="card-body pt-0 pb-2">
<div class="setvalue">
<ul>
<li>
<h5>Subtotal</h5>
<h6>55.00$</h6>
</li>
<li>
<h5>Tax</h5>
<h6>5.00$</h6>
</li>
<li class="total-value">
<h5>Total</h5>
<h6>60.00$</h6>
</li>
</ul>
</div>
<div class="setvaluecash">
<ul>
<li>
<a href="javascript:void(0);" class="paymentmethod">
<img
src="assets/img/icons/cash.svg"
alt="img"
class="me-2"
/>
Cash
</a>
</li>
<li>
<a href="javascript:void(0);" class="paymentmethod">
<img
src="assets/img/icons/debitcard.svg"
alt="img"
class="me-2"
/>
Debit
</a>
</li>
<li>
<a href="javascript:void(0);" class="paymentmethod">
<img
src="assets/img/icons/scan.svg"
alt="img"
class="me-2"
/>
Scan
</a>
</li>
</ul>
</div>
<div class="btn-totallabel">
<h5>Checkout</h5>
<h6>60.00$</h6>
</div>
<div class="btn-pos">
<ul>
<li>
<a class="btn"
><img
src="assets/img/icons/pause1.svg"
alt="img"
class="me-1"
/>Hold</a
>
</li>
<li>
<a class="btn"
><img
src="assets/img/icons/edit-6.svg"
alt="img"
class="me-1"
/>Quotation</a
>
</li>
<li>
<a class="btn"
><img
src="assets/img/icons/trash12.svg"
alt="img"
class="me-1"
/>Void</a
>
</li>
<li>
<a class="btn"
><img
src="assets/img/icons/wallet1.svg"
alt="img"
class="me-1"
/>Payment</a
>
</li>
<li>
<a
class="btn"
data-bs-toggle="modal"
data-bs-target="#recents"
><img
src="assets/img/icons/transcation.svg"
alt="img"
class="me-1"
/>
Transaction</a
>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="calculator" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Define Quantity</h5>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="calculator-set">
<div class="calculatortotal">
<h4>0</h4>
</div>
<ul>
<li>
<a href="javascript:void(0);">1</a>
</li>
<li>
<a href="javascript:void(0);">2</a>
</li>
<li>
<a href="javascript:void(0);">3</a>
</li>
<li>
<a href="javascript:void(0);">4</a>
</li>
<li>
<a href="javascript:void(0);">5</a>
</li>
<li>
<a href="javascript:void(0);">6</a>
</li>
<li>
<a href="javascript:void(0);">7</a>
</li>
<li>
<a href="javascript:void(0);">8</a>
</li>
<li>
<a href="javascript:void(0);">9</a>
</li>
<li>
<a href="javascript:void(0);" class="btn btn-closes"
><img src="assets/img/icons/close-circle.svg" alt="img"
/></a>
</li>
<li>
<a href="javascript:void(0);">0</a>
</li>
<li>
<a href="javascript:void(0);" class="btn btn-reverse"
><img src="assets/img/icons/reverse.svg" alt="img"
/></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="holdsales" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Hold order</h5>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="hold-order">
<h2>4500.00</h2>
</div>
<div class="form-group">
<label>Order Reference</label>
<input type="text" />
</div>
<div class="para-set">
<p>
The current order will be set on hold. You can retreive this
order from the pending order button. Providing a reference to it
might help you to identify the order more quickly.
</p>
</div>
<div class="col-lg-12">
<a class="btn btn-submit me-2">Submit</a>
<a class="btn btn-cancel" data-bs-dismiss="modal">Cancel</a>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="edit" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit Order</h5>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-6 col-sm-12 col-12">
<div class="form-group">
<label>Product Price</label>
<input type="text" value="20" />
</div>
</div>
<div class="col-lg-6 col-sm-12 col-12">
<div class="form-group">
<label>Product Price</label>
<select class="select">
<option>Exclusive</option>
<option>Inclusive</option>
</select>
</div>
</div>
<div class="col-lg-6 col-sm-12 col-12">
<div class="form-group">
<label> Tax</label>
<div class="input-group">
<input type="text" />
<a class="scanner-set input-group-text"> % </a>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-12 col-12">
<div class="form-group">
<label>Discount Type</label>
<select class="select">
<option>Fixed</option>
<option>Percentage</option>
</select>
</div>
</div>
<div class="col-lg-6 col-sm-12 col-12">
<div class="form-group">
<label>Discount</label>
<input type="text" value="20" />
</div>
</div>
<div class="col-lg-6 col-sm-12 col-12">
<div class="form-group">
<label>Sales Unit</label>
<select class="select">
<option>Kilogram</option>
<option>Grams</option>
</select>
</div>
</div>
</div>
<div class="col-lg-12">
<a class="btn btn-submit me-2">Submit</a>
<a class="btn btn-cancel" data-bs-dismiss="modal">Cancel</a>
</div>
</div>
</div>
</div>
</div>
<div
class="modal fade"
id="create"
tabindex="-1"
aria-labelledby="create"
aria-hidden="true"
>
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Create</h5>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-6 col-sm-12 col-12">
<div class="form-group">
<label>Customer Name</label>
<input type="text" />
</div>
</div>
<div class="col-lg-6 col-sm-12 col-12">
<div class="form-group">
<label>Email</label>
<input type="text" />
</div>
</div>
<div class="col-lg-6 col-sm-12 col-12">
<div class="form-group">
<label>Phone</label>
<input type="text" />
</div>
</div>
<div class="col-lg-6 col-sm-12 col-12">
<div class="form-group">
<label>Country</label>
<input type="text" />
</div>
</div>
<div class="col-lg-6 col-sm-12 col-12">
<div class="form-group">
<label>City</label>
<input type="text" />
</div>
</div>
<div class="col-lg-6 col-sm-12 col-12">
<div class="form-group">
<label>Address</label>
<input type="text" />
</div>
</div>
</div>
<div class="col-lg-12">
<a class="btn btn-submit me-2">Submit</a>
<a class="btn btn-cancel" data-bs-dismiss="modal">Cancel</a>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="delete" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Order Deletion</h5>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="delete-order">
<img src="assets/img/icons/close-circle1.svg" alt="img" />
</div>
<div class="para-set text-center">
<p>
The current order will be deleted as no payment has been <br />
made so far.
</p>
</div>
<div class="col-lg-12 text-center">
<a class="btn btn-danger me-2">Yes</a>
<a class="btn btn-cancel" data-bs-dismiss="modal">No</a>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="recents" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Recent Transactions</h5>
<button
type="button"
class="close"
data-bs-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="tabs-sets">
<ul class="nav nav-tabs" id="myTabs" role="tablist">
<li class="nav-item" role="presentation">
<button
class="nav-link active"
id="purchase-tab"
data-bs-toggle="tab"
data-bs-target="#purchase"
type="button"
aria-controls="purchase"
aria-selected="true"
role="tab"
>
Purchase
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="payment-tab"
data-bs-toggle="tab"
data-bs-target="#payment"
type="button"
aria-controls="payment"
aria-selected="false"
role="tab"
>
Payment
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="return-tab"
data-bs-toggle="tab"
data-bs-target="#return"
type="button"
aria-controls="return"
aria-selected="false"
role="tab"
>
Return
</button>
</li>
</ul>
<div class="tab-content">
<div
class="tab-pane fade show active"
id="purchase"
role="tabpanel"
aria-labelledby="purchase-tab"
>
<div class="table-top">
<div class="search-set">
<div class="search-input">
<a class="btn btn-searchset"
><img
src="assets/img/icons/search-white.svg"
alt="img"
/></a>
</div>
</div>
<div class="wordset">
<ul>
<li>
<a
data-bs-toggle="tooltip"
data-bs-placement="top"
title="pdf"
><img src="assets/img/icons/pdf.svg" alt="img"
/></a>
</li>
<li>
<a
data-bs-toggle="tooltip"
data-bs-placement="top"
title="excel"
><img src="assets/img/icons/excel.svg" alt="img"
/></a>
</li>
<li>
<a
data-bs-toggle="tooltip"
data-bs-placement="top"
title="print"
><img src="assets/img/icons/printer.svg" alt="img"
/></a>
</li>
</ul>
</div>
</div>
<div class="table-responsive">
<table class="table datanew">
<thead>
<tr>
<th>Date</th>
<th>Reference</th>
<th>Customer</th>
<th>Amount</th>
<th class="text-end">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>2022-03-07</td>
<td>INV/SL0101</td>
<td>Walk-in Customer</td>
<td>$ 1500.00</td>
<td>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/eye.svg" alt="img" />
</a>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/edit.svg" alt="img" />
</a>
<a
class="me-3 confirm-text"
href="javascript:void(0);"
>
<img
src="assets/img/icons/delete.svg"
alt="img"
/>
</a>
</td>
</tr>
<tr>
<td>2022-03-07</td>
<td>INV/SL0101</td>
<td>Walk-in Customer</td>
<td>$ 1500.00</td>
<td>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/eye.svg" alt="img" />
</a>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/edit.svg" alt="img" />
</a>
<a
class="me-3 confirm-text"
href="javascript:void(0);"
>
<img
src="assets/img/icons/delete.svg"
alt="img"
/>
</a>
</td>
</tr>
<tr>
<td>2022-03-07</td>
<td>INV/SL0101</td>
<td>Walk-in Customer</td>
<td>$ 1500.00</td>
<td>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/eye.svg" alt="img" />
</a>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/edit.svg" alt="img" />
</a>
<a
class="me-3 confirm-text"
href="javascript:void(0);"
>
<img
src="assets/img/icons/delete.svg"
alt="img"
/>
</a>
</td>
</tr>
<tr>
<td>2022-03-07</td>
<td>INV/SL0101</td>
<td>Walk-in Customer</td>
<td>$ 1500.00</td>
<td>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/eye.svg" alt="img" />
</a>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/edit.svg" alt="img" />
</a>
<a
class="me-3 confirm-text"
href="javascript:void(0);"
>
<img
src="assets/img/icons/delete.svg"
alt="img"
/>
</a>
</td>
</tr>
<tr>
<td>2022-03-07</td>
<td>INV/SL0101</td>
<td>Walk-in Customer</td>
<td>$ 1500.00</td>
<td>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/eye.svg" alt="img" />
</a>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/edit.svg" alt="img" />
</a>
<a
class="me-3 confirm-text"
href="javascript:void(0);"
>
<img
src="assets/img/icons/delete.svg"
alt="img"
/>
</a>
</td>
</tr>
<tr>
<td>2022-03-07</td>
<td>INV/SL0101</td>
<td>Walk-in Customer</td>
<td>$ 1500.00</td>
<td>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/eye.svg" alt="img" />
</a>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/edit.svg" alt="img" />
</a>
<a
class="me-3 confirm-text"
href="javascript:void(0);"
>
<img
src="assets/img/icons/delete.svg"
alt="img"
/>
</a>
</td>
</tr>
<tr>
<td>2022-03-07</td>
<td>INV/SL0101</td>
<td>Walk-in Customer</td>
<td>$ 1500.00</td>
<td>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/eye.svg" alt="img" />
</a>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/edit.svg" alt="img" />
</a>
<a
class="me-3 confirm-text"
href="javascript:void(0);"
>
<img
src="assets/img/icons/delete.svg"
alt="img"
/>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="payment" role="tabpanel">
<div class="table-top">
<div class="search-set">
<div class="search-input">
<a class="btn btn-searchset"
><img
src="assets/img/icons/search-white.svg"
alt="img"
/></a>
</div>
</div>
<div class="wordset">
<ul>
<li>
<a
data-bs-toggle="tooltip"
data-bs-placement="top"
title="pdf"
><img src="assets/img/icons/pdf.svg" alt="img"
/></a>
</li>
<li>
<a
data-bs-toggle="tooltip"
data-bs-placement="top"
title="excel"
><img src="assets/img/icons/excel.svg" alt="img"
/></a>
</li>
<li>
<a
data-bs-toggle="tooltip"
data-bs-placement="top"
title="print"
><img src="assets/img/icons/printer.svg" alt="img"
/></a>
</li>
</ul>
</div>
</div>
<div class="table-responsive">
<table class="table datanew">
<thead>
<tr>
<th>Date</th>
<th>Reference</th>
<th>Customer</th>
<th>Amount</th>
<th class="text-end">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>2022-03-07</td>
<td>0101</td>
<td>Walk-in Customer</td>
<td>$ 1500.00</td>
<td>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/eye.svg" alt="img" />
</a>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/edit.svg" alt="img" />
</a>
<a
class="me-3 confirm-text"
href="javascript:void(0);"
>
<img
src="assets/img/icons/delete.svg"
alt="img"
/>
</a>
</td>
</tr>
<tr>
<td>2022-03-07</td>
<td>0102</td>
<td>Walk-in Customer</td>
<td>$ 1500.00</td>
<td>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/eye.svg" alt="img" />
</a>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/edit.svg" alt="img" />
</a>
<a
class="me-3 confirm-text"
href="javascript:void(0);"
>
<img
src="assets/img/icons/delete.svg"
alt="img"
/>
</a>
</td>
</tr>
<tr>
<td>2022-03-07</td>
<td>0103</td>
<td>Walk-in Customer</td>
<td>$ 1500.00</td>
<td>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/eye.svg" alt="img" />
</a>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/edit.svg" alt="img" />
</a>
<a
class="me-3 confirm-text"
href="javascript:void(0);"
>
<img
src="assets/img/icons/delete.svg"
alt="img"
/>
</a>
</td>
</tr>
<tr>
<td>2022-03-07</td>
<td>0104</td>
<td>Walk-in Customer</td>
<td>$ 1500.00</td>
<td>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/eye.svg" alt="img" />
</a>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/edit.svg" alt="img" />
</a>
<a
class="me-3 confirm-text"
href="javascript:void(0);"
>
<img
src="assets/img/icons/delete.svg"
alt="img"
/>
</a>
</td>
</tr>
<tr>
<td>2022-03-07</td>
<td>0105</td>
<td>Walk-in Customer</td>
<td>$ 1500.00</td>
<td>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/eye.svg" alt="img" />
</a>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/edit.svg" alt="img" />
</a>
<a
class="me-3 confirm-text"
href="javascript:void(0);"
>
<img
src="assets/img/icons/delete.svg"
alt="img"
/>
</a>
</td>
</tr>
<tr>
<td>2022-03-07</td>
<td>0106</td>
<td>Walk-in Customer</td>
<td>$ 1500.00</td>
<td>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/eye.svg" alt="img" />
</a>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/edit.svg" alt="img" />
</a>
<a
class="me-3 confirm-text"
href="javascript:void(0);"
>
<img
src="assets/img/icons/delete.svg"
alt="img"
/>
</a>
</td>
</tr>
<tr>
<td>2022-03-07</td>
<td>0107</td>
<td>Walk-in Customer</td>
<td>$ 1500.00</td>
<td>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/eye.svg" alt="img" />
</a>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/edit.svg" alt="img" />
</a>
<a
class="me-3 confirm-text"
href="javascript:void(0);"
>
<img
src="assets/img/icons/delete.svg"
alt="img"
/>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="return" role="tabpanel">
<div class="table-top">
<div class="search-set">
<div class="search-input">
<a class="btn btn-searchset"
><img
src="assets/img/icons/search-white.svg"
alt="img"
/></a>
</div>
</div>
<div class="wordset">
<ul>
<li>
<a
data-bs-toggle="tooltip"
data-bs-placement="top"
title="pdf"
><img src="assets/img/icons/pdf.svg" alt="img"
/></a>
</li>
<li>
<a
data-bs-toggle="tooltip"
data-bs-placement="top"
title="excel"
><img src="assets/img/icons/excel.svg" alt="img"
/></a>
</li>
<li>
<a
data-bs-toggle="tooltip"
data-bs-placement="top"
title="print"
><img src="assets/img/icons/printer.svg" alt="img"
/></a>
</li>
</ul>
</div>
</div>
<div class="table-responsive">
<table class="table datanew">
<thead>
<tr>
<th>Date</th>
<th>Reference</th>
<th>Customer</th>
<th>Amount</th>
<th class="text-end">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>2022-03-07</td>
<td>0101</td>
<td>Walk-in Customer</td>
<td>$ 1500.00</td>
<td>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/eye.svg" alt="img" />
</a>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/edit.svg" alt="img" />
</a>
<a
class="me-3 confirm-text"
href="javascript:void(0);"
>
<img
src="assets/img/icons/delete.svg"
alt="img"
/>
</a>
</td>
</tr>
<tr>
<td>2022-03-07</td>
<td>0102</td>
<td>Walk-in Customer</td>
<td>$ 1500.00</td>
<td>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/eye.svg" alt="img" />
</a>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/edit.svg" alt="img" />
</a>
<a
class="me-3 confirm-text"
href="javascript:void(0);"
>
<img
src="assets/img/icons/delete.svg"
alt="img"
/>
</a>
</td>
</tr>
<tr>
<td>2022-03-07</td>
<td>0103</td>
<td>Walk-in Customer</td>
<td>$ 1500.00</td>
<td>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/eye.svg" alt="img" />
</a>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/edit.svg" alt="img" />
</a>
<a
class="me-3 confirm-text"
href="javascript:void(0);"
>
<img
src="assets/img/icons/delete.svg"
alt="img"
/>
</a>
</td>
</tr>
<tr>
<td>2022-03-07</td>
<td>0104</td>
<td>Walk-in Customer</td>
<td>$ 1500.00</td>
<td>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/eye.svg" alt="img" />
</a>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/edit.svg" alt="img" />
</a>
<a
class="me-3 confirm-text"
href="javascript:void(0);"
>
<img
src="assets/img/icons/delete.svg"
alt="img"
/>
</a>
</td>
</tr>
<tr>
<td>2022-03-07</td>
<td>0105</td>
<td>Walk-in Customer</td>
<td>$ 1500.00</td>
<td>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/eye.svg" alt="img" />
</a>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/edit.svg" alt="img" />
</a>
<a
class="me-3 confirm-text"
href="javascript:void(0);"
>
<img
src="assets/img/icons/delete.svg"
alt="img"
/>
</a>
</td>
</tr>
<tr>
<td>2022-03-07</td>
<td>0106</td>
<td>Walk-in Customer</td>
<td>$ 1500.00</td>
<td>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/eye.svg" alt="img" />
</a>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/edit.svg" alt="img" />
</a>
<a
class="me-3 confirm-text"
href="javascript:void(0);"
>
<img
src="assets/img/icons/delete.svg"
alt="img"
/>
</a>
</td>
</tr>
<tr>
<td>2022-03-07</td>
<td>0107</td>
<td>Walk-in Customer</td>
<td>$ 1500.00</td>
<td>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/eye.svg" alt="img" />
</a>
<a class="me-3" href="javascript:void(0);">
<img src="assets/img/icons/edit.svg" alt="img" />
</a>
<a
class="me-3 confirm-text"
href="javascript:void(0);"
>
<img
src="assets/img/icons/delete.svg"
alt="img"
/>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="assets/js/jquery-3.6.0.min.js"></script>
<script src="assets/js/feather.min.js"></script>
<script src="assets/js/jquery.slimscroll.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/jquery.dataTables.min.js"></script>
<script src="assets/js/dataTables.bootstrap4.min.js"></script>
<script src="assets/plugins/select2/js/select2.min.js"></script>
<script src="assets/plugins/owlcarousel/owl.carousel.min.js"></script>
<script src="assets/plugins/sweetalert/sweetalert2.all.min.js"></script>
<script src="assets/plugins/sweetalert/sweetalerts.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>