tieptk/admin_hura_8
2
1
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

update menu

Browse Source
This commit is contained in:
Dao Duc
2024-01-24 17:01:14 +07:00
parent 9f670e9ab0
commit 401157b54e
9 changed files with 679 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/global-sprite.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 26 KiB

143
assets/script/pc_style.css
View File

@@ -1,3 +1,4 @@
@charset "UTF-8";
*,
::after,
::before {
@@ -126,6 +127,7 @@ a {
.icons {
background: url(../images/global-sprite.png) no-repeat;
background-size: 400px 400px;
background-position: 0 40px;
}
.admin-global-container {
@@ -169,6 +171,9 @@ a {
.admin-menu-container details[open] .icons {
filter: brightness(100);
}
.admin-menu-container details[open] .fa-angle-right {
transform: rotate(90deg);
}
.admin-menu-container summary {
display: flex;
align-items: center;
@@ -203,6 +208,11 @@ a {
.admin-menu-container .item:hover .icons {
filter: brightness(100);
}
.admin-menu-container .item .icons {
width: 20px;
height: 20px;
margin-right: 13px;
}
.admin-menu-container .title {
width: calc(100% - 33px);
}
@@ -227,6 +237,10 @@ a {
.admin-menu-container .sub-menu a:hover {
text-decoration: underline;
}
.admin-menu-container .sub-menu a.current {
font-weight: 700;
text-decoration: none;
}
.admin-menu-container .sub-menu a::before {
content: "";
width: 8px;
@@ -240,11 +254,6 @@ a {
.admin-menu-container .sub-menu a:last-child {
margin: 0;
}
.admin-menu-container .icons {
width: 20px;
height: 20px;
margin-right: 13px;
}
.admin-menu-container .icon-home {
background-position: -9px -7px;
}
@@ -285,6 +294,21 @@ a {
position: absolute;
right: 10px;
}
.admin-menu-container .icon-investor_relation {
background-position: -9px -126px;
}
.admin-menu-container .icon-job {
background-position: -52px -126px;
}
.admin-menu-container .icon-pcbuilder {
background-position: -99px -126px;
}
.admin-menu-container .icon-payinstall {
background-position: -142px -125px;
}
.admin-menu-container .icon-distributor {
background-position: -187px -126px;
}
.admin-menu {
color: #fff;
@@ -325,6 +349,9 @@ a {
height: 41px;
display: none;
}
.admin-menu .item:nth-child(n+13) .sub-menu {
top: unset;
}
.admin-menu .sub-menu {
padding: 10px 22px 10px 15px;
border-radius: 6px;
@@ -350,6 +377,10 @@ a {
.admin-menu .sub-menu a:hover {
text-decoration: underline;
}
.admin-menu .sub-menu a.current {
font-weight: 700;
text-decoration: none;
}
.admin-menu .sub-menu a::before {
content: "";
width: 8px;
@@ -428,6 +459,21 @@ a {
.admin-menu .icon-logout {
background-position: 6px -34px;
}
.admin-menu .icon-investor_relation {
background-position: 6px -115px;
}
.admin-menu .icon-job {
background-position: -37px -114px;
}
.admin-menu .icon-pcbuilder {
background-position: -83px -114px;
}
.admin-menu .icon-payinstall {
background-position: -128px -114px;
}
.admin-menu .icon-distributor {
background-position: -173px -114px;
}
.admin-menu .logo {
position: relative;
}
@@ -649,4 +695,91 @@ input[type=radio]:focus:before {
.admin-header-container .menu-hide {
margin-left: 30px;
}
/* Bán hàng */
.order-page .order-page-title a {
margin: 0 2px 0 0;
border-radius: 4px 4px 0px 0px;
background: #F6F6F6;
color: #919699;
font-weight: 500;
padding: 0 24px;
}
.order-page .order-page-title a:hover, .order-page .order-page-title a.current, .order-page .order-page-title a.active {
background: #0041E8;
color: #fff;
}
.order-page .order-page-table {
line-height: 20px;
text-align: center;
}
.order-page .order-page-table a {
color: #0041E8;
}
.order-page .order-page-table a:hover {
text-decoration: underline;
}
.order-page .order-page-table table {
width: 100%;
}
.order-page .order-page-table thead {
background: #F6F6F6;
font-weight: 600;
}
.order-page .order-page-table thead td {
padding: 8px;
}
.order-page .order-page-table td {
padding: 14px 8px;
border: 1px solid #ECECEC;
text-transform: capitalize;
}
.order-page .order-page-table td * {
display: inline-block;
}
.order-page .order-page-table select {
border-radius: 4px;
border: 1px solid #D8D8D8;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
height: 32px;
display: block;
width: 100%;
padding: 0 0 0 5px;
}
.order-page .order-page-table .icons {
width: 30px;
height: 30px;
border: 1px solid #ECECEC;
background-color: #F9F9F9;
border-radius: 5px;
}
.order-page .order-page-table .icon-edit {
border: 1px solid #0041E8;
background-color: #F5F7FF;
background-position: -108px -82px;
margin-right: 6px;
}
.order-page .order-page-table .icon-delete {
background-position: -145px -82px;
}
.paging {
margin: 30px 0;
display: flex;
align-items: center;
justify-content: center;
line-height: 28px;
}
.paging a {
margin: 0 3px;
min-width: 28px;
text-align: center;
font-size: 16px;
padding: 0 10px;
border-radius: 4px;
}
.paging a:hover, .paging a.current, .paging a.active {
background: #0041E8;
color: #fff;
}/*# sourceMappingURL=pc_style.css.map */

2
assets/script/pc_style.css.map
View File

File diff suppressed because one or more lines are too long

148
assets/script/pc_style.scss
View File

@@ -109,6 +109,7 @@ a {
.icons {
background: url(../images/global-sprite.png) no-repeat;
background-size: 400px 400px;
background-position: 0 40px;
}
.admin-global-container {
max-width: 1720px;
@@ -151,6 +152,9 @@ a {
.icons {
filter: brightness(100);
}
.fa-angle-right {
transform: rotate(90deg);
}
}
}
summary {
@@ -186,6 +190,11 @@ a {
filter: brightness(100);
}
}
.icons {
width: 20px;
height: 20px;
margin-right: 13px;
}
}
.title {
width: calc(100% - 33px);
@@ -209,6 +218,10 @@ a {
&:hover {
text-decoration: underline;
}
&.current {
font-weight: 700;
text-decoration: none;
}
&::before {
content: "";
width: 8px;
@@ -224,11 +237,6 @@ a {
}
}
}
.icons {
width: 20px;
height: 20px;
margin-right: 13px;
}
.icon-home {
background-position: -9px -7px;
}
@@ -269,6 +277,21 @@ a {
position: absolute;
right: 10px;
}
.icon-investor_relation {
background-position: -9px -126px;
}
.icon-job {
background-position: -52px -126px;
}
.icon-pcbuilder {
background-position: -99px -126px;
}
.icon-payinstall {
background-position: -142px -125px;
}
.icon-distributor {
background-position: -187px -126px;
}
}
.admin-menu {
color: #fff;
@@ -311,6 +334,11 @@ a {
height: 41px;
display: none;
}
&:nth-child(n+13){
.sub-menu{
top: unset;
}
}
}
.sub-menu {
padding: 10px 22px 10px 15px;
@@ -335,6 +363,10 @@ a {
&:hover {
text-decoration: underline;
}
&.current {
font-weight: 700;
text-decoration: none;
}
&::before {
content: "";
width: 8px;
@@ -415,6 +447,21 @@ a {
.icon-logout {
background-position: 6px -34px;
}
.icon-investor_relation {
background-position: 6px -115px;
}
.icon-job {
background-position: -37px -114px;
}
.icon-pcbuilder {
background-position: -83px -114px;
}
.icon-payinstall {
background-position: -128px -114px;
}
.icon-distributor {
background-position: -173px -114px;
}
.logo {
position: relative;
}
@@ -661,3 +708,94 @@ input[type="radio"] {
margin-left: 30px;
}
}
/* Bán hàng */
.order-page {
.order-page-title{
a {
margin: 0 2px 0 0;
border-radius: 4px 4px 0px 0px;
background: #F6F6F6;
color: #919699;
font-weight: 500;
padding: 0 24px;
&:hover, &.current, &.active {
background: #0041E8;
color: #fff;
}
}
}
.order-page-table {
line-height: 20px;
text-align: center;
a{
color: #0041E8;
&:hover{
text-decoration: underline;
}
}
table{
width: 100%;
}
thead {
background: #F6F6F6;
font-weight: 600;
td{
padding: 8px;
}
}
td{
padding: 14px 8px;
border: 1px solid #ECECEC;
text-transform: capitalize;
*{
display: inline-block;
}
}
select {
border-radius: 4px;
border: 1px solid #D8D8D8;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
height: 32px;
display: block;
width: 100%;
padding: 0 0 0 5px;
}
.icons {
width: 30px;
height: 30px;
border: 1px solid #ECECEC;
background-color: #F9F9F9;
border-radius: 5px;
}
.icon-edit {
border: 1px solid #0041E8;
background-color: #F5F7FF;
background-position: -108px -82px;
margin-right: 6px;
}
.icon-delete {
background-position: -145px -82px;
}
}
}
.paging {
margin: 30px 0;
display: flex;
align-items: center;
justify-content: center;
line-height: 28px;
a{
margin: 0 3px;
min-width: 28px;
text-align: center;
font-size: 16px;
padding: 0 10px;
border-radius: 4px;
&:hover, &.current, &.active {
background: #0041E8;
color: #fff;
}
}
}

2
inc/Hura8/AppAdmin.php
View File

@@ -56,6 +56,8 @@ class AppAdmin
$data = include_once $module_file;
$global_data = [
"name" => $this->current_route_info['module'],
"view" => $this->current_route_info['view'],
"main_menu" => include_once ROOT_DIR."/data/menu.php",
];

4
template/javascript/global.html
View File

@@ -17,8 +17,8 @@
// Hàm để cập nhật trạng thái hiển thị menu và localStorage
function capNhatTrangThaiMenu(hideMenuBig) {
$('#menu-big').toggleClass('hidden', hideMenuBig);
$('#menu-small').toggleClass('hidden', !hideMenuBig);
$('#js-menu-big').toggleClass('hidden', hideMenuBig);
$('#js-menu-small').toggleClass('hidden', !hideMenuBig);
$('#js-form-search').toggleClass('menu-hide', hideMenuBig);
localStorage.setItem(hideMenuBig ? 'menu_big' : 'menu_small', 'hidden');
localStorage.removeItem(hideMenuBig ? 'menu_small' : 'menu_big');

5
template/javascript/index.html
View File

@@ -1,4 +1,5 @@
{% include javascript/global %}
{% include javascript/homepage %}
{% if global.module.name == 'home' %}
{% include javascript/homepage %}
{% endif %}

180
template/order/home.html
View File

@@ -0,0 +1,180 @@
<div class="order-page m-[16px] p-[20px_15px] bg-white">
<p class="m-[0_0_10px] text-[24px] font-[600] leading-[31px]">Danh sách đơn hàng </p>
<div class="order-page-title flex flex-wrap mb-[17px] leading-[36px]">
<a href="/admin/?opt=order" class="current">Tất cả</a>
<a href="/admin/?opt=order&list=mine">Tôi được giao</a>
<a href="/admin/?opt=order&list=new">Đơn mới</a>
<a href="/admin/?opt=order&list=unpaid">Chưa thanh toán</a>
<a href="/admin/?opt=order&list=unfulfilled">Chưa ship</a>
</div>
<form method="get" action="" enctype="multipart/form-data" id="form-search">
<input type="hidden" name="opt" value="order">
<input type="hidden" name="status" id="js-status" value="">
<input type="hidden" name="update_by" id="update_by" value="">
<input type="hidden" name="assign_to" id="assign_to" value="">
<input type="hidden" name="payment" id="js-payment" value="">
<input type="hidden" name="fullfillment" id="js-fullfillment" value="">
<div class="flex items-center mb-[15px] p-[15px_16px] border border-[#F6F6F6] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)]">
<input type="text" name="orderCode" value="" placeholder="Mã đơn hàng" class="w-[375px] h-[36px] p-[0_10px] m-[0_10px_0_0] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
<span>hoặc</span>
<input type="text" name="q" value="" placeholder="Tìm người mua (* tên, email, điện thoại)" class="w-[375px] h-[36px] p-[0_10px] m-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
<div class="relative m-[0_15px]">
<i class="far fa-calendar text-[#7E7E7E] m-[0_5px_0_0] absolute left-[10px] leading-[35px]"></i>
<input type="text" name="from_date" value="" onfocus="scwShow(this,event);" onclick="scwShow(this,event);" placeholder="Từ ngày" class="w-[125px] h-[36px] p-[0_10px_0_30px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
</div>
<div class="relative m-[0_15px]">
<i class="far fa-calendar text-[#7E7E7E] m-[0_5px_0_0] absolute left-[10px] leading-[35px]"></i>
<input type="text" name="to_date" value="" onfocus="scwShow(this,event);" onclick="scwShow(this,event);" placeholder="Đến ngày" class="w-[125px] h-[36px] p-[0_10px_0_30px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
</div>
<input type="submit" value="Tìm kiếm" class="bg-[#0041E8] rounded-[4px] text-[#fff] font-[500] h-[36px] p-[0_10px] cursor-pointer">
</div>
</form>
<div class="flex items-center justify-between m-[14px_0_20px]">
<div>
<p class="m-[0_55px_0_0] inline-block">
Tổng số đơn hàng: <b>1.458</b>
</p>
<p class="m-0 inline-block">
Tổng giá trị: <b>14.948.348.000 VNĐ</b>
</p>
</div>
<div>
<a href="" class="rounded-[4px] bg-[#F5F7FF] border border-[#0041E8] hover:text-[#fff] hover:bg-[#0041E8] leading-[36px] font-[600] text-[#0041E8] p-[0_14px] inline-block m-[0_0_0_15px]">
<i class="fas fa-print m-[0_4px_0_0]"></i> In danh sách
</a>
<a href="" class="rounded-[4px] bg-[#F5F7FF] border border-[#0041E8] hover:text-[#fff] hover:bg-[#0041E8] leading-[36px] font-[600] text-[#0041E8] p-[0_14px] inline-block m-[0_0_0_15px]">
<i class="far fa-file-excel m-[0_4px_0_0]"></i> Tải file excel
</a>
</div>
</div>
<div class="order-page-table">
<table>
<thead>
<tr>
<td> STT </td>
<td> Mã số </td>
<td> Thời gian </td>
<td> Khách hàng </td>
<td> Tỉnh/TP </td>
<td> Giá trị </td>
<td width="170">
<select onchange="setHiddenValue('js-payment', this.value); runFilter()">
<option value="">Thanh toán</option>
<option value="pending">Chờ</option>
<option value="authorized">Đã xác nhận</option>
<option value="overdue">Quá hạn</option>
<option value="expiring">Sắp hết hạn</option>
<option value="expired">Hết hạn</option>
<option value="paid">Đã thanh toán</option>
<option value="refunded">Đã hoàn lại</option>
<option value="partially-refunded">Hoàn lại 1 phần</option>
<option value="partially-paid">Thanh toán 1 phần</option>
<option value="voided">Hủy</option>
<option value="unpaid">Chưa thanh toán</option>
</select>
</td>
<td width="160">
<select onchange="setHiddenValue('js-fullfillment', this.value); runFilter()">
<option value="">Vận chuyển</option>
<option value="fulfilled">Đã chuyển hết</option>
<option value="unfulfilled">Chưa chuyển</option>
<option value="partially-fulfilled">Chuyển 1 phần</option>
<option value="scheduled">Đã lên kế hoạch</option>
<option value="onhold ">Giữ hàng</option>
</select>
</td>
<td width="160">
<select onchange="setHiddenValue('js-status', this.value); runFilter()">
<option value="">Tình trạng đơn</option>
<option value="new">Mới</option>
<option value="processing">Đang xử lý</option>
<option value="success">Thành công</option>
<option value="closed">Đóng lại</option>
<option value="canceled">Hủy</option>
</select>
</td>
<td width="170">
<select onchange="setHiddenValue('assign_to', this.value); runFilter()">
<option value="">Người được giao</option>
</select>
</td>
<td width="87"> Xem </td>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td>
<a href=""> 000-369 </a>
</td>
<td> 16-11-2023, 9:59 am </td>
<td>
<a href=""> Nguyen Duc Quan </a>
</td>
<td> Hà Nội </td>
<td> 69.600.000 </td>
<td> <span class="block w-[14px] h-[14px] rounded-[50%]" style="background-color: red"></span> </td>
<td> <span class="block w-[14px] h-[14px] rounded-[50%]" style="background-color: yellow"></span> </td>
<td> <span class="block w-[14px] h-[14px] rounded-[50%]" style="background-color: green"></span> </td>
<td>
<a href=""> Nguyen Duc Quan </a>
</td>
<td>
<a href="" class="icons icon-edit" title="Chi tiết"></a>
<a href="" class="icons icon-delete" title="Xóa"></a>
</td>
</tr>
<tr>
<td> 2 </td>
<td>
<a href=""> 000-369 </a>
</td>
<td> 16-11-2023, 9:59 am </td>
<td>
<a href=""> test hura </a>
</td>
<td> Hà Nội </td>
<td> 69.600.000 </td>
<td> <span class="block w-[14px] h-[14px] rounded-[50%]" style="background-color: blue"></span> </td>
<td> <span class="block w-[14px] h-[14px] rounded-[50%]" style="background-color: yellow"></span> </td>
<td> <span class="block w-[14px] h-[14px] rounded-[50%]" style="background-color: green"></span> </td>
<td>
<a href=""> test hura </a>
</td>
<td>
<a href="" class="icons icon-edit" title="Chi tiết"></a>
<a href="" class="icons icon-delete" title="Xóa"></a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="paging">
<a href="" class="paging-prev"><i class="fas fa-chevron-left"></i></a>
<a href="" class="current">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="" class="paging-next"><i class="fas fa-chevron-right"></i></a>
</div>
</div>

572
template/theme.html
View File

@@ -11,437 +11,273 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.6.0/dist/full.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<link rel="stylesheet" media="screen" href="{{ 'pc_style.css' | asset_url }}?v=1.99.21" />
<script src="{{ 'tailwindcss.js' | asset_url }}"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
</head>
<body>
{{global|show_var}}
{{page|show_var}}
<div class="admin-global-container">
<div class="admin-global-container">
<!-- Menu cũ -->
<div class="admin-menu-container box-menu sticky top-0 bottom-0 h-[100vh] hidden" id="menu-big">
<a href="javascript:void(0)" class="icon-close" id="js-hide-menu">
<i class="fa-solid fa-outdent"></i>
</a>
<div class="admin-menu-container box-menu sticky top-0 bottom-0 h-[100vh] hidden" id="js-menu-big">
<a href="javascript:void(0)" class="icon-close" id="js-hide-menu">
<i class="fa-solid fa-outdent"></i>
</a>
<a href="" class="menu-logo">
<img src="{{ 'logo.png' | asset_url }}" />
</a>
<a href="" class="menu-logo">
<img src="{{ 'logo.png' | asset_url }}" />
</a>
<div class="menu-list">
<a href="/" class="item">
<i class="icons icon-home"></i>
<span class="title"> Home </span>
</a>
<div class="menu-list">
<a href="/" class="item">
<i class="icons icon-home"></i>
<span class="title"> Home </span>
</a>
<details>
<summary class="item">
<div class="flex items-center">
<i class="icons icon-order"></i>
<span class="title"> Bán hàng </span>
</div>
{% for _category in global.main_menu %}
{% assign _type = _category[0] %}
{% assign _menuArray = _category[1].menu %}
{% if _category[1].enable == 1 %}
<details {% if _type == global.name %} open {% endif %}>
<summary class="item">
<div class="flex items-center">
<i class="fa-solid fa-angle-right"></i>
</summary>
<div class="sub-menu">
{% for _item in global.main_menu.order.menu %}
<a href="?module={{_item.module }}&view={{_item.view }}"> {{_item.name }} </a>
{% endfor %}
</div>
{% if _type == 'order' %} <i class="icons icon-order"></i>
{% elsif _type == 'product' %} <i class="icons icon-product"></i>
{% elsif _type == 'customer' %}<i class="icons icon-customer"></i>
{% elsif _type == 'marketing' %}<i class="icons icon-marketing"></i>
{% elsif _type == 'investor_relation' %} <i class="icons icon-investor_relation"></i>
{% elsif _type == 'article' %} <i class="icons icon-content"></i>
{% elsif _type == 'job' %} <i class="icons icon-job"></i>
{% elsif _type == 'pcbuilder' %} <i class="icons icon-pcbuilder"></i>
{% elsif _type == 'payinstall' %} <i class="icons icon-payinstall"></i>
{% elsif _type == 'distributor' %} <i class="icons icon-distributor"></i>
{% elsif _type == 'report' %}<i class="icons icon-stats"></i>
{% elsif _type == 'system' %}<i class="icons icon-system"></i>
{% endif %}
</details>
<span class="title" > {{ _category[1].name }} </span>
</div>
<details>
<summary class="item">
<div class="flex items-center">
<i class="icons icon-product"></i>
<i class="fa-solid fa-angle-right"></i>
</summary>
<span class="title"> Sản phẩm </span>
</div>
<div class="sub-menu">
{% for _item in _menuArray %}
<a href="?module={{ _item.module }}&view={{ _item.view }}"
{% if _item.view == global.view and _type == global.name %} class="current" {% endif %}
> {{ _item.name }} </a>
{% endfor %}
</div>
</details>
{% endif %}
{% endfor %}
</div>
<i class="fa-solid fa-angle-right"></i>
</summary>
<div class="menu-list">
<p style="color: #81B5E4;margin: 0 0 10px;font-weight: 700;padding: 0 16px;">TÀI KHOẢN</p>
<div class="sub-menu">
{% for _item in global.main_menu.product.menu %}
<a href="?module={{_item.module }}&view={{_item.view }}"> {{_item.name }} </a>
{% endfor %}
</div>
</details>
<a href="" class="item">
<i class="icons icon-settings"></i>
<span class="title"> Cài đặt </span>
</a>
<details>
<summary class="item">
<div class="flex items-center">
<i class="icons icon-customer"></i>
<a href="" class="item">
<i class="icons icon-support"></i>
<span class="title"> Hỗ trợ </span>
</a>
<span class="title"> Khách hàng </span>
</div>
<a href="" class="item">
<i class="icons icon-account"></i>
<span class="title"> Quản lý tài khoản </span>
</a>
</div>
<i class="fa-solid fa-angle-right"></i>
</summary>
<a href="" class="item">
<i class="icons icon-logout"></i>
<span class="title"> Thoát quản trị </span>
</a>
<div class="sub-menu">
{% for _item in global.main_menu.customer.menu %}
<a href="?module={{_item.module }}&view={{_item.view }}"> {{_item.name }} </a>
{% endfor %}
</div>
</details>
<details>
<summary class="item">
<div class="flex items-center">
<i class="icons icon-marketing"></i>
<span class="title"> Marketing </span>
</div>
<i class="fa-solid fa-angle-right"></i>
</summary>
<div class="sub-menu">
{% for _item in global.main_menu.marketing.menu %}
<a href="?module={{_item.module }}&view={{_item.view }}"> {{_item.name }} </a>
{% endfor %}
</div>
</details>
<details>
<summary class="item">
<div class="flex items-center">
<i class="icons icon-content"></i>
<span class="title"> Nội dung </span>
</div>
<i class="fa-solid fa-angle-right"></i>
</summary>
<div class="sub-menu">
<a href=""> Menu title </a>
<a href=""> Menu title </a>
<a href=""> Menu title </a>
<a href=""> Menu title </a>
</div>
</details>
<details>
<summary class="item">
<div class="flex items-center">
<i class="icons icon-stats"></i>
<span class="title"> Thống kê </span>
</div>
<i class="fa-solid fa-angle-right"></i>
</summary>
<div class="sub-menu">
<a href=""> Menu title </a>
<a href=""> Menu title </a>
<a href=""> Menu title </a>
<a href=""> Menu title </a>
</div>
</details>
<details>
<summary class="item">
<div class=" flex items-center">
<i class="icons icon-system"></i>
<span class="title"> Hệ thống </span>
</div>
<i class="fa-solid fa-angle-right"></i>
</summary>
<div class="sub-menu">
<a href=""> Menu title </a>
<a href=""> Menu title </a>
<a href=""> Menu title </a>
<a href=""> Menu title </a>
</div>
</details>
</div>
<div class="menu-list">
<p style="color: #81B5E4;margin: 0 0 10px;font-weight: 700;padding: 0 16px;">TÀI KHOẢN</p>
<a href="" class="item">
<i class="icons icon-settings"></i>
<span class="title"> Cài đặt </span>
</a>
<a href="" class="item">
<i class="icons icon-support"></i>
<span class="title"> Hỗ trợ </span>
</a>
<a href="" class="item">
<i class="icons icon-account"></i>
<span class="title"> Quản lý tài khoản </span>
</a>
</div>
<a href="" class="item">
<i class="icons icon-logout"></i>
<span class="title"> Thoát quản trị </span>
</a>
</div>
</div>
<!-- Menu mới -->
<div class="admin-menu box-menu sticky top-0 bottom-0 h-[100vh] bg-[#004E99] flex flex-col justify-between"
id="menu-small">
<div>
<div
class="logo item items-center justify-center border-[rgba(255,255,255,0.15)] border-b p-[20px_0_38px_!important]">
<a href="/" class="">
<img src="../assets/images/logo_small.png" alt="">
</a>
<a href="javascript:void(0)" class="icon-close" id="js-show-menu">
<i class="fa-solid fa-indent"></i>
</a>
</div>
<div class="admin-menu box-menu sticky top-0 bg-[#004E99] flex flex-col justify-between pb-[20px] min-h-[100vh]"
id="js-menu-small">
<div>
<div class="logo item items-center justify-center border-[rgba(255,255,255,0.15)] border-b p-[20px_0_38px_!important]">
<a href="/" class="">
<img src="../assets/images/logo_small.png" alt="">
</a>
<a href="javascript:void(0)" class="icon-close" id="js-show-menu">
<i class="fa-solid fa-indent"></i>
</a>
</div>
<div class="item">
<a href="/" class="icons icon-home"> </a>
<div class="item">
<a href="/" class="icons icon-home"> </a>
<div class="sub-menu">
<p class="font-bold"> Home </p>
</div>
</div>
<div class="sub-menu">
<p class="font-bold"> Home </p>
</div>
</div>
<div class="item">
<a href="" class="icons icon-sell"> </a>
{% for _category in global.main_menu %}
{% assign _type = _category[0] %}
{% assign _menuArray = _category[1].menu %}
<div class="sub-menu">
<p class="font-bold"> Bán hàng </p>
{% if _category[1].enable == 1 %}
<div class="item {% if _type == 'system' %} border-[rgba(255,255,255,0.15)] border-b{% endif %}">
{% if _type == 'order' %} <a href="" class="icons icon-sell"> </a>
{% elsif _type == 'product' %} <a href="" class="icons icon-product"> </a>
{% elsif _type == 'customer' %}<a href="" class="icons icon-user"> </a>
{% elsif _type == 'marketing' %} <a href="" class="icons icon-marketing"> </a>
{% elsif _type == 'investor_relation' %} <a href="" class="icons icon-investor_relation"> </a>
{% elsif _type == 'article' %} <a href="" class="icons icon-content"> </a>
{% elsif _type == 'job' %} <a href="" class="icons icon-job"> </a>
{% elsif _type == 'pcbuilder' %} <a href="" class="icons icon-pcbuilder"> </a>
{% elsif _type == 'payinstall' %} <a href="" class="icons icon-payinstall"> </a>
{% elsif _type == 'distributor' %} <a href="" class="icons icon-distributor"> </a>
{% elsif _type == 'report' %}<i class="icons icon-stats"></i>
{% elsif _type == 'system' %}<i class="icons icon-system"></i>
{% endif %}
<div class="menu-list">
{% for _item in global.main_menu.order.menu %}
<a href="/?module={{_item.module }}&view={{_item.view }}"> {{_item.name }} </a>
{% endfor %}
</div>
</div>
</div>
<div class="sub-menu">
<p class="font-bold"> {{ _category[1].name }} </p>
<div class="item">
<a href="" class="icons icon-product"> </a>
<div class="menu-list">
{% for _item in _menuArray %}
<a href="?module={{ _item.module }}&view={{ _item.view }}"
{% if _item.view == global.view and _type == global.name %} class="current" {% endif %}
> {{ _item.name }} </a>
{% endfor %}
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
<div class="sub-menu">
<p class="font-bold"> Sản phẩm </p>
<div>
<div class="item bottom">
<a href="" class="icons icon-settings"> </a>
<div class="menu-list">
{% for _item in global.main_menu.product.menu %}
<a href="/?module={{_item.module }}&view={{_item.view }}"> {{_item.name }} </a>
{% endfor %}
</div>
</div>
</div>
<div class="sub-menu">
<p class="font-bold"> Cài đặt </p>
<div class="item">
<a href="" class="icons icon-user"> </a>
<div class="menu-list">
{% for _item in global.main_menu.system.menu %}
<a href="/?module={{_item.module }}&view={{_item.view }}"> {{_item.name }} </a>
{% endfor %}
</div>
</div>
</div>
<div class="sub-menu">
<p class="font-bold"> Khách hàng </p>
<div class="item bottom">
<a href="" class="icons icon-support"> </a>
<div class="menu-list">
{% for _item in global.main_menu.customer.menu %}
<a href="/?module={{_item.module }}&view={{_item.view }}"> {{_item.name }} </a>
{% endfor %}
</div>
</div>
</div>
<div class="sub-menu">
<p class="font-bold"> Hỗ trợ </p>
<div class="item">
<a href="" class="icons icon-marketing"> </a>
<div class="menu-list">
<a href=""> Menu title </a>
<a href=""> Menu title </a>
<a href=""> Menu title </a>
<a href=""> Menu title </a>
</div>
</div>
</div>
<div class="sub-menu">
<p class="font-bold"> Marketing </p>
<div class="item bottom">
<a href="" class="icons icon-account"> </a>
<div class="menu-list">
{% for _item in global.main_menu.marketing.menu %}
<a href="/?module={{_item.module }}&view={{_item.view }}"> {{_item.name }} </a>
{% endfor %}
</div>
</div>
</div>
<div class="sub-menu">
<p class="font-bold"> Quản lý tài khoản </p>
<div class="item">
<a href="" class="icons icon-content"> </a>
<div class="menu-list">
<a href=""> Menu title </a>
<a href=""> Menu title </a>
<a href=""> Menu title </a>
<a href=""> Menu title </a>
</div>
</div>
</div>
</div>
<div class="sub-menu">
<p class="font-bold"> Nội dung </p>
<div class="item">
<a href="" class="icons icon-logout"> </a>
<div class="menu-list">
{% for _item in global.main_menu.article.menu %}
<a href="/?module={{_item.module }}&view={{_item.view }}"> {{_item.name }} </a>
{% endfor %}
</div>
</div>
</div>
<div class="item">
<a href="" class="icons icon-stats"> </a>
<div class="sub-menu">
<p class="font-bold"> Thống kê </p>
<div class="menu-list">
{% for _item in global.main_menu.report.menu %}
<a href="/?module={{_item.module }}&view={{_item.view }}"> {{_item.name }} </a>
{% endfor %}
</div>
</div>
</div>
<div class="item border-[rgba(255,255,255,0.15)] border-b">
<a href="" class="icons icon-system"> </a>
<div class="sub-menu">
<p class="font-bold"> Hệ thống </p>
<div class="menu-list">
{% for _item in global.main_menu.system.menu %}
<a href="/?module={{_item.module }}&view={{_item.view }}"> {{_item.name }} </a>
{% endfor %}
</div>
</div>
</div>
</div>
<div>
<div class="item bottom">
<a href="" class="icons icon-settings"> </a>
<div class="sub-menu">
<p class="font-bold"> Cài đặt </p>
<div class="menu-list">
{% for _item in global.main_menu.system.menu %}
<a href="/?module={{_item.module }}&view={{_item.view }}"> {{_item.name }} </a>
{% endfor %}
</div>
</div>
</div>
<div class="item bottom">
<a href="" class="icons icon-support"> </a>
<div class="sub-menu">
<p class="font-bold"> Hỗ trợ </p>
<div class="menu-list">
<a href=""> Menu title </a>
<a href=""> Menu title </a>
<a href=""> Menu title </a>
<a href=""> Menu title </a>
</div>
</div>
</div>
<div class="item bottom">
<a href="" class="icons icon-account"> </a>
<div class="sub-menu">
<p class="font-bold"> Quản lý tài khoản </p>
<div class="menu-list">
<a href=""> Menu title </a>
<a href=""> Menu title </a>
<a href=""> Menu title </a>
<a href=""> Menu title </a>
</div>
</div>
</div>
</div>
<div class="item mb-[20px]">
<a href="" class="icons icon-logout"> </a>
<div class="sub-menu">
<p class="font-bold"> Thoát quản trị </p>
</div>
</div>
</div>
<div class="sub-menu">
<p class="font-bold"> Thoát quản trị </p>
</div>
</div>
</div>
<div class="admin-content-container w-[100%]">
<!-- Header -->
<div class="admin-header-container flex items-center justify-between bg-white px-4 py-3">
<form class="max-w-[420px] relative w-[100%] menu-hide" id="js-form-search">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<i class="icons icon-search"></i>
</div>
<!-- Header -->
<div class="admin-header-container flex items-center justify-between bg-white px-4 py-3">
<form class="max-w-[420px] relative w-[100%] menu-hide" id="js-form-search">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<i class="icons icon-search"></i>
</div>
<input type="search" class="block border h-[36px] ps-10 rounded w-full" placeholder="Tìm kiếm">
</form>
<input type="search" class="block border h-[36px] ps-10 rounded w-full" placeholder="Tìm kiếm">
</form>
<div class="admin-header-right flex items-center justify-end">
<a href="" title="Truy cập trung tâm hỗ trợ của Hurasoft">
<i class="icons header-support"></i>
</a>
<div class="admin-header-right flex items-center justify-end">
<a href="" title="Truy cập trung tâm hỗ trợ của Hurasoft">
<i class="icons header-support"></i>
</a>
<div
class="group relative cursor-pointer ml-[20px] mr-[35px] group [&_summary::-webkit-details-marker]:hidden">
<div class="relative flex">
<i class="icons icon-notification"></i>
<div class="group relative cursor-pointer ml-[20px] mr-[35px] group [&_summary::-webkit-details-marker]:hidden">
<div class="relative flex">
<i class="icons icon-notification"></i>
<span
class="absolute bg-[#E00000] font-[500] h-[17px] leading-[17px] note right-[-5px] rounded-lg text-[#fff] text-[13px] text-center top-[-3px] w-[17px]">0</span>
</div>
<span class="absolute bg-[#E00000] font-[500] h-[17px] leading-[17px] note right-[-5px] rounded-lg text-[#fff] text-[13px] text-center top-[-3px] w-[17px]">
0
</span>
</div>
<div
class="group-hover:opacity-[1] group-hover:z-[1] opacity-0 absolute bg-white leading-[30px] note-list shadow whitespace-nowrap z-[-1] rounded-[4px] right-[-10px]">
<a href=""> Menu title </a>
<a href=""> Menu title </a>
<a href=""> Menu title </a>
<a href=""> Menu title </a>
</div>
</div>
<div class="group-hover:opacity-[1] group-hover:z-[1] opacity-0 absolute bg-white leading-[30px] note-list shadow whitespace-nowrap z-[-1] rounded-[4px] right-[-10px]">
<a href=""> Menu title </a>
<a href=""> Menu title </a>
<a href=""> Menu title </a>
<a href=""> Menu title </a>
</div>
</div>
<div class="group relative cursor-pointer group [&_summary::-webkit-details-marker]:hidden">
<div class="flex items-center">
<p class="m-0 mr-[10px]"> ducdt@hurasoft.com </p>
<div class="group relative cursor-pointer group [&_summary::-webkit-details-marker]:hidden">
<div class="flex items-center">
<p class="m-0 mr-[10px]"> ducdt@hurasoft.com </p>
<img src="https://via.placeholder.com/72x72" class="block rounded-[50%] w-[36px] h-[36px] mr-[8px]" />
<i class="fa-solid fa-sort-down text-[#C9C9C9] mb-[3px]"></i>
</div>
<div
class="group-hover:opacity-[1] group-hover:z-[1] opacity-0 absolute bg-white leading-[30px] note-list shadow whitespace-nowrap z-[-1] rounded-[4px] right-0">
<a href="">Đổi mật khẩu</a>
<a href="">Thoát quản trị</a>
</div>
</div>
</div>
</div>
<!-- Content -->
{{page_content}}
<img src="https://via.placeholder.com/72x72" class="block rounded-[50%] w-[36px] h-[36px] mr-[8px]" />
<i class="fa-solid fa-sort-down text-[#C9C9C9] mb-[3px]"></i>
</div>
<div class="group-hover:opacity-[1] group-hover:z-[1] opacity-0 absolute bg-white leading-[30px] note-list shadow whitespace-nowrap z-[-1] rounded-[4px] right-0">
<a href="">Đổi mật khẩu</a>
<a href="">Thoát quản trị</a>
</div>
</div>
</div>
</div>
<!-- Content -->
{{page_content}}
</div>
</div>
</div>
{% include javascript/index %}
{% include javascript/index %}
</body>
</html>