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

update

Browse Source
This commit is contained in:
Tieptk
2025-11-27 12:55:33 +07:00
parent 6876ab2bd3
commit 8c42d57fcd
12 changed files with 62085 additions and 1055 deletions
Download Patch File Download Diff File Expand all files Collapse all files

845
template/home/home.html
View File

@@ -1,501 +1,436 @@
<!-- Start: Dashboard Stats Widget -->
<div class="grid gap-5 lg:grid-cols-2 xl:grid-cols-4">
<div class="card bg-base-100 shadow">
<div class="card-body gap-2">
<div class="flex items-start justify-between gap-2 text-sm">
<div>
<p class="text-base-content/80 font-medium">
Doanh thu
</p>
<div class="mt-3 flex items-center gap-2">
<p class="inline text-2xl font-semibold">
$587.54
</p>
<div class="grid gap-5 grid-cols-12">
<div class="col-span-8">
<div class="grid gap-3 lg:grid-cols-2 xl:grid-cols-4">
<div class="card bg-base-100 shadow">
<div class="card-body gap-2">
<div class="flex items-start justify-between gap-2 text-sm">
<div>
<p class="text-base-content/80 font-medium h-[40px]">
Đơn hàng mới
</p>
<div class="mt-3 flex items-center gap-2">
<p class="inline text-2xl font-semibold">
10.000.000
</p>
</div>
</div>
<div class="bg-base-200 rounded-box flex items-center p-2">
<span class="iconify lucide--circle-dollar-sign size-5"></span>
</div>
</div>
<div class="flex items-center gap-3 mt-2">
<div class="badge badge-soft badge-success badge-sm gap-0.5 px-1 font-medium">
<span class="iconify lucide--arrow-up size-3.5"></span>
10.8%
</div>
<p class="text-base-content/60 text-sm">
Hôm qua
</p>
</div>
</div>
<div class="bg-base-200 rounded-box flex items-center p-2">
<span class="iconify lucide--circle-dollar-sign size-5"></span>
</div>
</div>
<p class="text-base-content/60 text-sm">
vs.
<span class="mx-1">$494.16</span>
last period
</p>
</div>
</div>
<div class="card bg-base-100 shadow">
<div class="card-body gap-2">
<div class="flex items-start justify-between gap-2 text-sm">
<div>
<p class="text-base-content/80 font-medium">
Khách hàng liên hệ
</p>
<div class="mt-3 flex items-center gap-2">
<p class="inline text-2xl font-semibold">
4500
</p>
<div class="badge badge-soft badge-success badge-sm gap-0.5 px-1 font-medium">
<span class="iconify lucide--arrow-up size-3.5"></span>
21.2%
<div class="card bg-base-100 shadow">
<div class="card-body gap-2">
<div class="flex items-start justify-between gap-2 text-sm">
<div>
<p class="text-base-content/80 font-medium">
Khách hàng liên hệ
qua website
</p>
<div class="mt-3 flex items-center gap-2">
<p class="inline text-2xl font-semibold">
1.000.000
</p>
</div>
</div>
<div class="bg-base-200 rounded-box flex items-center p-2">
<span class="iconify lucide--package size-5"></span>
</div>
</div>
</div>
<div class="bg-base-200 rounded-box flex items-center p-2">
<span class="iconify lucide--package size-5"></span>
<div class="flex items-center gap-3 mt-2">
<div class="badge badge-soft badge-success badge-sm gap-0.5 px-1 font-medium">
<span class="iconify lucide--arrow-up size-3.5"></span>
5.4%
</div>
<p class="text-base-content/60 text-sm">
Hôm qua
</p>
</div>
</div>
</div>
<p class="text-base-content/60 text-sm">
vs.
<span class="mx-1">3845</span>
last period
</p>
</div>
</div>
<div class="card bg-base-100 shadow">
<div class="card-body gap-2">
<div class="flex items-start justify-between gap-2 text-sm">
<div>
<p class="text-base-content/80 font-medium">
Customers
</p>
<div class="mt-3 flex items-center gap-2">
<p class="inline text-2xl font-semibold">
2242
</p>
<div class="card bg-base-100 shadow">
<div class="card-body gap-2">
<div class="flex items-start justify-between gap-2 text-sm">
<div>
<p class="text-base-content/80 font-medium h-[40px]">
Đơn trả góp
</p>
<div class="mt-3 flex items-center gap-2">
<p class="inline text-2xl font-semibold">
600.000
</p>
</div>
</div>
<div class="bg-base-200 rounded-box flex items-center p-2">
<span class="iconify lucide--users size-5"></span>
</div>
</div>
<div class="flex items-center gap-3 mt-2">
<div class="badge badge-soft badge-error badge-sm gap-0.5 px-1 font-medium">
<span class="iconify lucide--arrow-down size-3.5"></span>
-6.8%
</div>
<p class="text-base-content/60 text-sm">
Hôm qua
</p>
</div>
</div>
<div class="bg-base-200 rounded-box flex items-center p-2">
<span class="iconify lucide--users size-5"></span>
</div>
</div>
<p class="text-base-content/60 text-sm">
vs.
<span class="mx-1">2448</span>
last period
</p>
</div>
</div>
<div class="card bg-base-100 shadow">
<div class="card-body gap-2">
<div class="flex items-start justify-between gap-2 text-sm">
<div>
<p class="text-base-content/80 font-medium">
Spending
</p>
<div class="mt-3 flex items-center gap-2">
<p class="inline text-2xl font-semibold">
$112.54
</p>
<div class="card bg-base-100 shadow">
<div class="card-body gap-2">
<div class="flex items-start justify-between gap-2 text-sm">
<div>
<p class="text-base-content/80 font-medium h-[40px]">
Đơn hoàn trả
</p>
<div class="mt-3 flex items-center gap-2">
<p class="inline text-2xl font-semibold">
30.000
</p>
</div>
</div>
<div class="bg-base-200 rounded-box flex items-center p-2">
<span class="iconify lucide--eraser size-5"></span>
</div>
</div>
<div class="flex items-center gap-3 mt-2">
<div class="badge badge-soft badge-success badge-sm gap-0.5 px-1 font-medium">
<span class="iconify lucide--arrow-up size-3.5"></span>
8.5%
</div>
<p class="text-base-content/60 text-sm">
Hôm qua
</p>
</div>
</div>
<div class="bg-base-200 rounded-box flex items-center p-2">
<span class="iconify lucide--eraser size-5"></span>
</div>
</div>
<p class="text-base-content/60 text-sm">
vs.
<span class="mx-1">$98.14</span>
last period
</p>
</div>
</div>
</div>
<!-- End: Dashboard Stats Widget -->
<div class="mt-3 grid grid-cols-1 gap-3 xl:grid-cols-12">
<div class="xl:col-span-7">
<!-- Start: Revenue Statistic -->
<!-- End: Dashboard Stats Widget -->
<div class="mt-6 grid grid-cols-1 gap-6 xl:grid-cols-12">
<div class="xl:col-span-7">
<!-- Start: Revenue Statistic -->
<div class="card bg-base-100 shadow">
<div class="card-body px-0 pb-0">
<div class="px-6">
<div class="flex items-start justify-between">
<span class="font-medium">
Revenue Statistics
</span>
<div class="tabs tabs-box tabs-xs hidden sm:block">
<div class="tab false px-3">Day</div>
<div class="tab false px-3">Month</div>
<div class="tab tab-active px-3">Year</div>
<div class="card bg-base-100 shadow">
<div class="card-body px-0 pb-0">
<div class="px-6">
<div class="flex items-start justify-between">
<span class="font-medium">
Doanh thu
</span>
<div class="tabs tabs-box tabs-xs hidden sm:block">
<div class="tab false px-3">Ngày</div>
<div class="tab false px-3">Tháng</div>
<div class="tab tab-active px-3">Năm</div>
</div>
</div>
<div class="mt-3">
<div class="flex items-center gap-3">
<span class="text-4xl font-semibold">
184.78K
</span>
<span class="text-success font-medium">
+3.24%
</span>
</div>
<span class="text-base-content/60 text-sm">
Tổng doanh thu trong năm nay
</span>
</div>
</div>
<div id="revenue-statics-chart"></div>
</div>
<div class="mt-3">
<div class="flex items-center gap-3">
<span class="text-4xl font-semibold">
$184.78K
</span>
<span class="text-success font-medium">
+3.24%
</div>
<!-- End: Revenue Statistic -->
</div>
<div class="xl:col-span-5">
<!-- Start: Customer Acquisition -->
<div class="card bg-base-100 shadow">
<div class="card-body p-0">
<div class="flex items-center justify-between px-5 pt-5">
<span class="font-medium">
Truy cập khách hàng
</span>
<div class="inline-flex items-center gap-2">
<div class="text-base-content/60 w-6 border border-dashed"></div>
<span class="text-base-content/80 text-xs">
Dự đoán
</span>
</div>
</div>
<div class="mt-4 py-3">
<div class="divide-base-300 grid grid-cols-2 gap-5 px-5 sm:grid-cols-3 sm:divide-x">
<div class="text-center">
<p>Advertise</p>
<p class="mt-0.5 text-xl font-medium">
$148
</p>
<div class="text-success mt-0.5 inline-flex items-center gap-1">
<span class="iconify lucide--arrow-up size-3"></span>
<p class="text-xs">4.78%</p>
</div>
</div>
<div class="hidden text-center sm:block">
<p>Customers</p>
<p class="mt-0.5 text-xl font-medium">
427
</p>
<div class="text-success mt-0.5 inline-flex items-center gap-1">
<span class="iconify lucide--arrow-up size-3"></span>
<p class="text-xs">3.15%</p>
</div>
</div>
</div>
</div>
<div class="-mt-25 sm:mx-5">
<div id="customer-acquisition-chart"></div>
</div>
<span class="text-base-content/60 text-sm">
Total income in this year
</span>
</div>
</div>
<div id="revenue-statics-chart"></div>
<!-- End: Customer Acquisition -->
</div>
</div>
<!-- End: Revenue Statistic -->
<div class="mt-3">
<!-- Start: Lịch sử chỉnh sửa -->
<div aria-label="Card" class="card bg-base-100 shadow">
<div class="card-body p-0">
<div class="flex items-center gap-3 px-5 pt-5">
<span class="iconify lucide--shopping-bag size-4.5"></span>
<span class="font-medium">Lịch sử chỉnh sửa</span>
<button class="btn btn-outline btn-sm ms-auto btn-view">
Xem danh sách
<span class="iconify lucide--plus-circle size-3.5"></span>
</button>
</div>
<div class="mt-2 overflow-auto">
<table class="table *:text-nowrap">
<thead>
<tr>
<td> STT </td>
<td> Người dùng </td>
<td> Nội dung </td>
<td> Thời gian </td>
<td> Xem chi tiết </td>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> uyentt@hurasoft.com </td>
<td> Chỉnh sửa trang chủ website laptoptcc </td>
<td> 24/11/2023 </td>
<td>
<a href="" class="btn btn-outline btn-view">Xem</a>
</td>
</tr>
<tr>
<td> 1 </td>
<td> uyentt@hurasoft.com </td>
<td> Chỉnh sửa trang chủ website laptoptcc </td>
<td> 24/11/2023 </td>
<td>
<a href="" class="btn btn-outline btn-view">Xem</a>
</td>
</tr>
<tr>
<td> 1 </td>
<td> uyentt@hurasoft.com </td>
<td> Chỉnh sửa trang chủ website laptoptcc </td>
<td> 24/11/2023 </td>
<td>
<a href="" class="btn btn-outline btn-view">Xem</a>
</td>
</tr>
<tr>
<td> 1 </td>
<td> uyentt@hurasoft.com </td>
<td> Chỉnh sửa trang chủ website laptoptcc </td>
<td> 24/11/2023 </td>
<td>
<a href="" class="btn btn-outline btn-view">Xem</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- End: Recent Orders -->
</div>
</div>
<div class="xl:col-span-5">
<!-- Start: Customer Acquisition -->
<div class="col-span-4">
<div class="bg-white shadow p-3 rounded-sm">
<div id="js-admin-home-tab" class="admin-home-tab flex items-center justify-end mb-3">
<a href="#js-report-most-viewed-products" class=" btn btn-sm btn-active">Sản phẩm xem nhiều</a>
<a href="#js-report-introduce-web" class="btn btn-sm"> Web giới thiệu</a>
<a href="#js-report-key-word" class="btn btn-sm"> Từ khóa</a>
<a href="#js-report-article" class="btn btn-sm"> Bài viết</a>
</div>
<div class="card bg-base-100 shadow">
<div class="card-body p-0">
<div class="flex items-center justify-between px-5 pt-5">
<span class="font-medium">
Customer Acquisition
</span>
<div class="inline-flex items-center gap-2">
<div class="text-base-content/60 w-6 border border-dashed"></div>
<span class="text-base-content/80 text-xs">
Prediction
</span>
</div>
<div class="home-report-holder block overflow-x-auto rounded-box border border-base-content/5 bg-base-10"
id="js-report-most-viewed-products">
<table class="table">
<thead class="bg-base-200">
<td width="50">STT</td>
<td>Sản phẩm</td>
<td width="75">Lượt xem</td>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> <a href="" class="line-clamp-1"> Laptop Asus ZenBook UX3402VALaptop
Asus ZenBook
UX3402VALaptop
Asus ZenBook UX3402VA </a> </td>
<td> 30.000 </td>
</tr>
<tr>
<td>2
<td><a href="" class="line-clamp-1"> Laptop Asus ZenBook UX3402VALaptop
Asus ZenBook
UX3402VALaptop
Asus ZenBook UX3402VA </a>
<td>30.000
<tr>
<td>3
<td><a href="" class="line-clamp-1"> Laptop Asus ZenBook UX3402VALaptop
Asus ZenBook
UX3402VALaptop
Asus ZenBook UX3402VA </a>
<td>30.000
</tbody>
</table>
</div>
<div class="home-report-holder hidden" id="js-report-introduce-web">
<b class="text-23">Truy cập website</b>
<div class="px-5 pt-5 pb-2">
<div id="gradient-donut-chart"></div>
</div>
<div class="mt-4 py-3">
<div class="divide-base-300 grid grid-cols-2 gap-5 px-5 sm:grid-cols-3 sm:divide-x">
<div class="text-center">
<p>Advertise</p>
<p class="mt-0.5 text-xl font-medium">
$148
</p>
<div class="text-success mt-0.5 inline-flex items-center gap-1">
<span class="iconify lucide--arrow-up size-3"></span>
<p class="text-xs">4.78%</p>
</div>
</div>
<div class="hidden text-center sm:block">
<p>Customers</p>
<p class="mt-0.5 text-xl font-medium">
427
</p>
<div class="text-success mt-0.5 inline-flex items-center gap-1">
<span class="iconify lucide--arrow-up size-3"></span>
<p class="text-xs">3.15%</p>
</div>
</div>
</div>
</div>
<div class="-mt-25 sm:mx-5">
<div id="customer-acquisition-chart"></div>
</div>
<div class="home-report-holder hidden" id="js-report-key-word">
<div class="flex flex-wrap gap-2">
<a href="" class="btn btn btn-dash btn-outline">Laptop, Máy Tính Xách Tay</a>
<a href="" class="btn btn btn-dash btn-outline">Laptop, Máy Tính Xách Tay</a>
<a href="" class="btn btn btn-dash btn-outline">Laptop, Máy Tính Xách Tay</a>
<a href="" class="btn btn btn-dash btn-outline">Laptop, Máy Tính Xách Tay</a>
<a href="" class="btn btn btn-dash btn-outline">Laptop, Máy Tính Xách Tay</a>
<a href="" class="btn btn btn-dash btn-outline">Laptop, Máy Tính Xách Tay</a>
</div>
</div>
<div class="home-report-holder hidden" id="js-report-article">
<table class="table">
<thead class="bg-base-200">
<td>STT</td>
<td>Bài viết</td>
<td>Lượt xem</td>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> <a href="" class="line-clamp-1"> Laptop Asus ZenBook UX3402VALaptop Asus ZenBook
UX3402VALaptop
Asus ZenBook UX3402VA </a> </td>
<td class="link-primary"> 30.000 </td>
</tr>
<tr>
<td>2
<td><a href="" class="line-clamp-1"> Laptop Asus ZenBook UX3402VALaptop Asus ZenBook
UX3402VALaptop
Asus ZenBook UX3402VA </a>
<td class="link-primary">30.000</td>
</tr>
<tr>
<td>3
<td><a href="" class="line-clamp-1"> Laptop Asus ZenBook UX3402VALaptop Asus ZenBook
UX3402VALaptop
Asus ZenBook UX3402VA </a>
<td class="link-primary">30.000</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="bg-white shadow p-3 mt-3 rounded-sm">
<div class="flex items-center justify-between">
<b class="font-medium">Ghi nhắc việc làm cá nhân</b>
<input type="date" value="2025-11-26" class="input w-[30%]" />
</div>
<form class="flex items-center justify-between mt-3">
<input type="text" placeholder="Nhập việc cần làm của bạn" class="input w-[78%]" />
<button type="button" class="btn btn-active">Tạo mới</button>
</form>
<div class="overflow-x-auto border border-base-content/5 mt-3">
<table class="table">
<thead class="bg-base-200">
<td> STT </td>
<td> Nội dung </td>
<td> Hết hạn </td>
<td> Trạng thái </td>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td class="whitespace-nowrap"> Sửa trang chủ websiteLaptoptcc </td>
<td> 28/11/2023 </td>
<td>
<div class="badge badge-success badge-sm badge-soft whitespace-nowrap">Đang triển khai
</div>
</td>
</tr>
<tr>
<td> 2 </td>
<td class="whitespace-nowrap"> Sửa trang chủ websiteLaptoptcc </td>
<td> 28/11/2023 </td>
<td>
<div class="badge badge-error badge-sm badge-soft whitespace-nowrap">Đang triển khai
</div>
</td>
</tr>
<tr>
<td> 3 </td>
<td class="whitespace-nowrap"> Sửa trang chủ websiteLaptoptcc </td>
<td> 28/11/2023 </td>
<td>
<div class="badge badge-sm badge-ghost whitespace-nowrap">Đang triển khai</div>
</td>
</tr>
<tr>
<td> 4 </td>
<td class="whitespace-nowrap"> Sửa trang chủ websiteLaptoptcc </td>
<td> 28/11/2023 </td>
<td>
<div class="badge badge-info badge-sm badge-soft whitespace-nowrap">Đang triển khai
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- End: Customer Acquisition -->
</div>
</div>
<div class="mt-6 grid grid-cols-1 gap-6 xl:grid-cols-5 2xl:grid-cols-12">
<div class="xl:col-span-3 2xl:col-span-5">
<!-- Start: Recent Orders -->
<div aria-label="Card" class="card bg-base-100 shadow">
<div class="card-body p-0">
<div class="flex items-center gap-3 px-5 pt-5">
<span class="iconify lucide--shopping-bag size-4.5"></span>
<span class="font-medium">Recent Orders</span>
<button class="btn btn-outline border-base-300 btn-sm ms-auto">
<span class="iconify lucide--download size-3.5"></span>
Report
</button>
</div>
<div class="mt-2 overflow-auto">
<table class="table *:text-nowrap">
<thead>
<tr>
<th>
<input aria-label="checked-all-order" class="checkbox checkbox-sm"
type="checkbox" />
</th>
<th>Product</th>
<th>Price</th>
<th>Date</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<th>
<input aria-label="checked-order" class="checkbox checkbox-sm" type="checkbox" />
</th>
<td class="flex items-center space-x-3 truncate">
<img alt="order image" class="mask mask-squircle bg-base-200 size-7.5"
src="./images/apps/ecommerce/products/1.jpg" />
<p>Men's tracking shoes</p>
</td>
<td class="font-medium">$99</td>
<td class="text-xs">25 Jun 2024</td>
<td>
<div class="badge badge-success badge-sm badge-soft">
Delivered
</div>
</td>
<td>
<div class="flex items-center gap-1">
<button aria-label="Show product" class="btn btn-square btn-ghost btn-xs">
<span class="iconify lucide--eye text-base-content/60 size-4"></span>
</button>
<button aria-label="Show product"
class="btn btn-square btn-error btn-outline btn-xs border-transparent">
<span class="iconify lucide--trash size-4"></span>
</button>
</div>
</td>
</tr>
<tr>
<th>
<input aria-label="checked-order" class="checkbox checkbox-sm" type="checkbox" />
</th>
<td class="flex items-center space-x-3 truncate">
<img alt="order image" class="mask mask-squircle bg-base-200 size-7.5"
src="./images/apps/ecommerce/products/2.jpg" />
<p>Cocooil body oil</p>
</td>
<td class="font-medium">$75</td>
<td class="text-xs">22 Jun 2024</td>
<td>
<div class="badge badge-info badge-sm badge-soft">
On Going
</div>
</td>
<td>
<div class="flex items-center gap-1">
<button aria-label="Show product" class="btn btn-square btn-ghost btn-xs">
<span class="iconify lucide--eye text-base-content/60 size-4"></span>
</button>
<button aria-label="Show product"
class="btn btn-square btn-error btn-outline btn-xs border-transparent">
<span class="iconify lucide--trash size-4"></span>
</button>
</div>
</td>
</tr>
<tr>
<th>
<input aria-label="checked-order" class="checkbox checkbox-sm" type="checkbox" />
</th>
<td class="flex items-center space-x-3 truncate">
<img alt="order image" class="mask mask-squircle bg-base-200 size-7.5"
src="./images/apps/ecommerce/products/3.jpg" />
<p>Freeze Air</p>
</td>
<td class="font-medium">$47</td>
<td class="text-xs">17 Jun 2024</td>
<td>
<div class="badge badge-primary badge-sm badge-soft">
Confirmed
</div>
</td>
<td>
<div class="flex items-center gap-1">
<button aria-label="Show product" class="btn btn-square btn-ghost btn-xs">
<span class="iconify lucide--eye text-base-content/60 size-4"></span>
</button>
<button aria-label="Show product"
class="btn btn-square btn-error btn-outline btn-xs border-transparent">
<span class="iconify lucide--trash size-4"></span>
</button>
</div>
</td>
</tr>
<tr>
<th>
<input aria-label="checked-order" class="checkbox checkbox-sm" type="checkbox" />
</th>
<td class="flex items-center space-x-3 truncate">
<img alt="order image" class="mask mask-squircle bg-base-200 size-7.5"
src="./images/apps/ecommerce/products/4.jpg" />
<p>Ladies's shoes</p>
</td>
<td class="font-medium">$52</td>
<td class="text-xs">23 Jun 2024</td>
<td>
<div class="badge badge-error badge-sm badge-soft">
Canceled
</div>
</td>
<td>
<div class="flex items-center gap-1">
<button aria-label="Show product" class="btn btn-square btn-ghost btn-xs">
<span class="iconify lucide--eye text-base-content/60 size-4"></span>
</button>
<button aria-label="Show product"
class="btn btn-square btn-error btn-outline btn-xs border-transparent">
<span class="iconify lucide--trash size-4"></span>
</button>
</div>
</td>
</tr>
<tr>
<th>
<input aria-label="checked-order" class="checkbox checkbox-sm" type="checkbox" />
</th>
<td class="flex items-center space-x-3 truncate">
<img alt="order image" class="mask mask-squircle bg-base-200 size-7.5"
src="./images/apps/ecommerce/products/10.jpg" />
<p>Choco's cookie</p>
</td>
<td class="font-medium">$24</td>
<td class="text-xs">21 Jun 2024</td>
<td>
<div class="badge badge-secondary badge-sm badge-soft">
Waiting
</div>
</td>
<td>
<div class="flex items-center gap-1">
<button aria-label="Show product" class="btn btn-square btn-ghost btn-xs">
<span class="iconify lucide--eye text-base-content/60 size-4"></span>
</button>
<button aria-label="Show product"
class="btn btn-square btn-error btn-outline btn-xs border-transparent">
<span class="iconify lucide--trash size-4"></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- End: Recent Orders -->
</div>
<div class="xl:col-span-2 2xl:col-span-3">
<!-- Start: Quick Chat -->
<div class="card bg-base-100 shadow">
<div class="card-body pb-3">
<div class="flex items-center gap-3">
<span class="iconify lucide--messages-square size-4.5"></span>
<span class="font-medium">Quick Chat</span>
<a href="./apps/chat.html" class="btn btn-outline btn-sm border-base-300 ms-auto">
Go To Chat
</a>
</div>
<div class="-mx-2 mt-2 space-y-0.5">
<div
class="rounded-box hover:bg-base-200 flex cursor-pointer items-center gap-3 px-2 py-2 transition-all active:scale-[.98]">
<img alt="chat" class="bg-base-200 mask mask-squircle size-11" src="./images/avatars/1.png" />
<div class="grow">
<div class="flex gap-1">
<p class="grow">Mia Johnson</p>
<span class="text-base-content/60 text-xs">
11:35 AM
</span>
</div>
<p class="text-base-content/80 line-clamp-1 text-sm text-ellipsis">
It's called 'Dreamscape.' A must-watch!
</p>
</div>
</div>
<div
class="rounded-box hover:bg-base-200 flex cursor-pointer items-center gap-3 px-2 py-2 transition-all active:scale-[.98]">
<img alt="chat" class="bg-base-200 mask mask-squircle size-11" src="./images/avatars/2.png" />
<div class="grow">
<div class="flex gap-1">
<p class="grow">Ethan Patel</p>
<span class="text-base-content/60 text-xs">
09:58 AM
</span>
</div>
<p class="text-base-content/80 line-clamp-1 text-sm text-ellipsis">
Just got a new book. Excited to start
reading.
</p>
</div>
</div>
<div
class="rounded-box hover:bg-base-200 flex cursor-pointer items-center gap-3 px-2 py-2 transition-all active:scale-[.98]">
<img alt="chat" class="bg-base-200 mask mask-squircle size-11" src="./images/avatars/3.png" />
<div class="grow">
<div class="flex gap-1">
<p class="grow">Sophia Nguyen</p>
<span class="text-base-content/60 text-xs">
08:20 AM
</span>
</div>
<p class="text-base-content/80 line-clamp-1 text-sm text-ellipsis">
How's your day going?
</p>
</div>
</div>
<div
class="rounded-box hover:bg-base-200 flex cursor-pointer items-center gap-3 px-2 py-2 transition-all active:scale-[.98]">
<img alt="chat" class="bg-base-200 mask mask-squircle size-11" src="./images/avatars/4.png" />
<div class="grow">
<div class="flex gap-1">
<p class="grow">Emily Chen</p>
<span class="text-base-content/60 text-xs">
06:21 PM
</span>
</div>
<p class="text-base-content/80 line-clamp-1 text-sm text-ellipsis">
Did you see that amazing sunset
yesterday?
</p>
</div>
</div>
<div
class="rounded-box hover:bg-base-200 flex cursor-pointer items-center gap-3 px-2 py-2 transition-all active:scale-[.98]">
<img alt="chat" class="bg-base-200 mask mask-squircle size-11" src="./images/avatars/5.png" />
<div class="grow">
<div class="flex gap-1">
<p class="grow">Kelvin S.</p>
<span class="text-base-content/60 text-xs">
08:15 AM
</span>
</div>
<p class="text-base-content/80 line-clamp-1 text-sm text-ellipsis">
Not sure, what you talking about...
</p>
</div>
</div>
</div>
</div>
</div>
<!-- End: Quick Chat -->
</div>
<div class="xl:col-span-3 2xl:col-span-4">
<!-- Start: Global Sales -->
<div class="card bg-base-100 shadow">
<div class="card-body gap-0 p-0">
<div class="flex items-center gap-3 px-5 pt-5">
<span class="iconify lucide--globe-2 size-4.5"></span>
<span class="font-medium">Global Sales (%)</span>
<button class="btn btn-ghost btn-outline border-base-300 btn-sm z-1 ms-auto">
<span class="iconify lucide--eye size-4"></span>
Overview
</button>
</div>
<div class="me-5 -mt-5 mb-1">
<div id="global-sales-chart"></div>
</div>
</div>
</div>
<!-- End: Global Sales -->
</div>
</div>

629
template/javascript/homepage.html
View File

@@ -1,282 +1,393 @@
<script>
const initCustomerAcquisitionChart = () => {
const chartOptions = {
chart: {
height: 356,
sparkline: {
enabled: false,
},
toolbar: {
show: false,
},
zoom: {
enabled: false,
},
background: "transparent",
},
forecastDataPoints: {
count: 2,
dashArray: [6, 4],
},
grid: {
show: false,
},
yaxis: {
show: false,
min: 125,
max: 181,
},
xaxis: {
categories: Array.from({ length: 15 }, (_, index) => index + 1),
},
tooltip: {
y: {
formatter: (val) => val.toString(),
},
},
stroke: {
curve: "stepline",
width: [2, 1.5],
},
colors: ["#167bff", "rgba(150,150,150,0.3)"],
series: [
{
name: "Customer",
data: [144, 150, 146, 154, 150, 155, 160, 155, 140, 155, 160, 180, 170, 165, 165],
},
{
name: "Advertise",
data: [140, 142, 142, 140, 146, 148, 150, 136, 130, 133, 145, 148, 158, 150, 150],
},
],
}
if (document.getElementById("customer-acquisition-chart")) {
new ApexCharts(document.getElementById("customer-acquisition-chart"), chartOptions).render()
}
}
const initRevenueStatisticsChart = () => {
const chartOptions = {
chart: {
height: 288,
type: "bar",
stacked: true,
background: "transparent",
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
borderRadius: 8,
borderRadiusApplication: "end",
borderRadiusWhenStacked: "last",
colors: {
backgroundBarColors: ["rgba(150,150,150,0.07)"],
backgroundBarRadius: 8,
},
columnWidth: "45%",
barHeight: "100%",
},
},
dataLabels: {
const chartOptions = {
chart: {
height: 356,
sparkline: {
enabled: false,
},
colors: ["#ff8b4b", "#6c74f8"],
legend: {
show: true,
horizontalAlign: "center",
offsetX: 0,
offsetY: 6,
},
series: [
{
name: "Orders",
data: [10, 12, 14, 16, 18, 20, 14, 16, 24, 12],
},
{
name: "Revenue",
data: [15, 24, 21, 28, 30, 40, 22, 32, 48, 20],
},
],
xaxis: {
categories: [
new Date("1/1/2016"),
new Date("1/1/2017"),
new Date("1/1/2018"),
new Date("1/1/2019"),
new Date("1/1/2020"),
new Date("1/1/2021"),
new Date("1/1/2022"),
new Date("1/1/2023"),
new Date("1/1/2024"),
new Date("1/1/2025"),
],
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
formatter: (val) => {
return new Date(val).getFullYear().toString()
},
},
},
yaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
tooltip: {
enabled: true,
shared: true,
intersect: false,
},
grid: {
toolbar: {
show: false,
},
responsive: [
{
breakpoint: 450,
options: {
plotOptions: {
bar: {
borderRadius: 4,
},
},
xaxis: {
tickAmount: 3,
},
},
},
],
}
if (document.getElementById("revenue-statics-chart")) {
new ApexCharts(document.getElementById("revenue-statics-chart"), chartOptions).render()
}
zoom: {
enabled: false,
},
background: "transparent",
},
forecastDataPoints: {
count: 2,
dashArray: [6, 4],
},
grid: {
show: false,
},
yaxis: {
show: false,
min: 125,
max: 181,
},
xaxis: {
categories: Array.from({ length: 15 }, (_, index) => index + 1),
},
tooltip: {
y: {
formatter: (val) => val.toString(),
},
},
stroke: {
curve: "stepline",
width: [2, 1.5],
},
colors: ["#167bff", "rgba(150,150,150,0.3)"],
series: [
{
name: "Khách hàng",
data: [144, 150, 146, 154, 150, 155, 160, 155, 140, 155, 160, 180, 170, 165, 165],
},
{
name: "Quảng cáo",
data: [140, 142, 142, 140, 146, 148, 150, 136, 130, 133, 145, 148, 158, 150, 150],
},
],
}
const initGlobalSalesChart = () => {
const data = [
{
name: "Turkey",
orders: 9,
},
{
name: "India",
orders: 12,
},
{
name: "Canada",
orders: 13,
},
{
name: "US",
orders: 16,
},
{
name: "Netherlands",
orders: 14,
},
{
name: "Italy",
orders: 17,
},
{
name: "Other",
orders: 19,
},
]
if (document.getElementById("customer-acquisition-chart")) {
new ApexCharts(document.getElementById("customer-acquisition-chart"), chartOptions).render()
}
}
const chartOptions = {
chart: {
height: 344,
type: "bar",
parentHeightOffset: 0,
background: "transparent",
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
horizontal: true,
borderRadius: 4,
distributed: true,
borderRadiusApplication: "end",
},
},
dataLabels: {
enabled: true,
textAnchor: "start",
style: {
colors: ["#fff"],
},
formatter: function (val, opt) {
return opt.w.globals.labels[opt.dataPointIndex] + ": " + val
},
offsetX: -10,
dropShadow: {
enabled: false,
},
},
series: [
{
data: data.map((country) => country.orders),
},
],
legend: {
const initRevenueStatisticsChart = () => {
const chartOptions = {
chart: {
height: 288,
type: "bar",
stacked: true,
background: "transparent",
toolbar: {
show: false,
},
stroke: {
width: 0,
},
plotOptions: {
bar: {
borderRadius: 8,
borderRadiusApplication: "end",
borderRadiusWhenStacked: "last",
colors: {
backgroundBarColors: ["rgba(150,150,150,0.07)"],
backgroundBarRadius: 8,
},
columnWidth: "45%",
barHeight: "100%",
},
},
dataLabels: {
enabled: false,
},
colors: ["#ff8b4b", "#6c74f8"],
legend: {
show: true,
horizontalAlign: "center",
offsetX: 0,
offsetY: 6,
},
series: [
{
name: "Đơn hàng",
data: [10, 12, 14, 16, 18, 20, 14, 16, 24, 12],
},
{
name: "Doanh thu",
data: [15, 24, 21, 28, 30, 40, 22, 32, 48, 20],
},
],
xaxis: {
categories: [
new Date("1/1/2016"),
new Date("1/1/2017"),
new Date("1/1/2018"),
new Date("1/1/2019"),
new Date("1/1/2020"),
new Date("1/1/2021"),
new Date("1/1/2022"),
new Date("1/1/2023"),
new Date("1/1/2024"),
new Date("1/1/2025"),
],
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
formatter: (val) => {
return new Date(val).getFullYear().toString()
},
},
},
yaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
tooltip: {
enabled: true,
shared: true,
intersect: false,
},
grid: {
show: false,
},
responsive: [
{
breakpoint: 450,
options: {
plotOptions: {
bar: {
borderRadius: 4,
},
},
xaxis: {
tickAmount: 3,
},
},
},
],
}
if (document.getElementById("revenue-statics-chart")) {
new ApexCharts(document.getElementById("revenue-statics-chart"), chartOptions).render()
}
}
const initGlobalSalesChart = () => {
const data = [
{
name: "Turkey",
orders: 9,
},
{
name: "India",
orders: 12,
},
{
name: "Canada",
orders: 13,
},
{
name: "US",
orders: 16,
},
{
name: "Netherlands",
orders: 14,
},
{
name: "Italy",
orders: 17,
},
{
name: "Other",
orders: 19,
},
]
const chartOptions = {
chart: {
height: 344,
type: "bar",
parentHeightOffset: 0,
background: "transparent",
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
horizontal: true,
borderRadius: 4,
distributed: true,
borderRadiusApplication: "end",
},
},
dataLabels: {
enabled: true,
textAnchor: "start",
style: {
colors: ["#fff"],
},
xaxis: {
categories: data.map((country) => country.name),
formatter: function (val, opt) {
return opt.w.globals.labels[opt.dataPointIndex] + ": " + val
},
yaxis: {
labels: {
show: false,
},
offsetX: -10,
dropShadow: {
enabled: false,
},
grid: {
},
series: [
{
data: data.map((country) => country.orders),
},
],
legend: {
show: false,
},
stroke: {
width: 0,
colors: ["#fff"],
},
xaxis: {
categories: data.map((country) => country.name),
},
yaxis: {
labels: {
show: false,
},
},
grid: {
show: false,
},
tooltip: {
theme: "dark",
x: {
show: false,
},
y: {
formatter: (val) => `${val}%`,
},
tooltip: {
theme: "dark",
x: {
show: false,
},
colors: ["#7179ff", "#4bcd89", "#ff6c88", "#5cb7ff", "#9071ff", "#ff5892", "#ff8b4b"],
}
if (document.getElementById("global-sales-chart")) {
new ApexCharts(document.getElementById("global-sales-chart"), chartOptions).render()
}
y: {
formatter: (val) => `${val}%`,
},
},
colors: ["#7179ff", "#4bcd89", "#ff6c88", "#5cb7ff", "#9071ff", "#ff5892", "#ff8b4b"],
}
document.addEventListener("DOMContentLoaded", () => {
initCustomerAcquisitionChart()
initRevenueStatisticsChart()
initGlobalSalesChart()
})
if (document.getElementById("global-sales-chart")) {
new ApexCharts(document.getElementById("global-sales-chart"), chartOptions).render()
}
}
const initGradientDonutChart = () => {
const seriesData = [35.1, 23.5, 2.4, 5.4]
const chartOptions = {
chart: {
type: "donut",
height: 380,
toolbar: {
show: false,
},
background: "transparent",
},
title: {
text: "Truy cập website",
style: { fontWeight: "500" },
align: "right",
},
stroke: {
show: true,
width: 1,
colors: ["var(--color-base-100)"],
},
fill: {
type: "solid",
},
plotOptions: {
pie: {
startAngle: -45,
endAngle: 315,
donut: {
size: "60%",
labels: {
show: true,
value: {
formatter: (value) => `${value}K`,
color: "var(--color-base-content)",
},
total: {
show: true,
color: "#FF4560",
formatter: () => `${seriesData.reduce((acc, cur) => acc + cur, 0)}K`,
},
},
},
},
},
tooltip: {
enabled: true,
y: {
formatter: (value) => `${value}K`,
},
},
responsive: [
{
breakpoint: 480,
options: {
chart: {
width: 200,
},
legend: {
position: "bottom",
},
},
},
],
labels: [
"Trực tiếp",
"Quảng cáo",
"Liên kết",
"Qua email",
],
colors: ["#0041E8", "#6DC580", "#FFC700", "#E00000"],
series: seriesData,
}
if (document.getElementById("gradient-donut-chart")) {
new ApexCharts(document.getElementById("gradient-donut-chart"), chartOptions).render()
}
}
function initAdminHomeTab() {
document.querySelectorAll("#js-admin-home-tab a").forEach(function (link) {
link.addEventListener("click", function (event) {
event.preventDefault();
// Xóa class current ở tất cả các tab
document.querySelectorAll("#js-admin-home-tab a").forEach(function (el) {
el.classList.remove("btn-active");
});
// Gán class current vào tab đang click
this.classList.add("btn-active");
// Lấy ID từ href để show nội dung
var id = this.getAttribute("href");
// Ẩn tất cả nội dung
document.querySelectorAll(".home-report-holder").forEach(function (holder) {
holder.style.display = "none";
});
// Hiện phần tương ứng
document.querySelector(id).style.display = "block";
});
});
}
document.addEventListener("DOMContentLoaded", () => {
initCustomerAcquisitionChart()
initRevenueStatisticsChart()
initGlobalSalesChart()
initGradientDonutChart()
initAdminHomeTab()
})
</script>

2
template/javascript/index.html
View File

@@ -1,11 +1,9 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts/dist/apexcharts.min.css" />
<script src="https://cdn.jsdelivr.net/npm/apexcharts/dist/apexcharts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplebar/6.2.7/simplebar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simplebar/6.2.7/simplebar.css" />
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="{{'main.js' | asset_url }}"></script>
{% if global.module == 'home' %}

149
template/other/header.html
View File

@@ -342,126 +342,35 @@
</div>
</div>
</div>
<div class="drawer drawer-end">
<input id="topbar-profile-drawer" type="checkbox" class="drawer-toggle" />
<div class="drawer-content">
<label for="topbar-profile-drawer" class="btn btn-ghost flex items-center gap-2 px-1.5">
<div class="avatar">
<div class="bg-base-200 mask mask-squircle w-8">
<img src="../../assets/images/avatars/1.png" alt="Avatar" />
</div>
</div>
<div class="text-start">
<p class="text-sm/none text-white">Denish</p>
<p class="text-base-content/50 mt-0.5 text-xs/none text-white">Team</p>
</div>
</label>
</div>
<div class="drawer-side">
<label for="topbar-profile-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
<div class="h-full w-72 p-2 sm:w-84">
<div class="bg-base-100 rounded-box relative flex h-full flex-col pt-4 sm:pt-8">
<label for="topbar-profile-drawer"
class="btn btn-xs btn-circle btn-ghost absolute start-2 top-2" aria-label="Close">
<span class="iconify lucide--x size-4"></span>
</label>
<div class="flex flex-col items-center">
<div class="relative">
<div
class="avatar bg-base-200 isolate size-20 cursor-pointer overflow-hidden rounded-full px-1 pt-1 md:size-24">
<img src="/images/avatars/1.png" alt="User Avatar" />
</div>
<div
class="bg-base-100 absolute end-0 bottom-0 flex items-center justify-center rounded-full p-1.5 shadow-sm">
<span class="iconify lucide--pencil size-4"></span>
</div>
</div>
<p class="mt-4 text-lg/none font-medium sm:mt-8">John Doe</p>
<p class="text-base-content/60 mt-1 text-sm">john@company.com</p>
<div class="mt-4 flex items-center gap-2 *:cursor-pointer sm:mt-6">
<div class="avatar bg-base-200 size-10 overflow-hidden rounded-full px-1 pt-1">
<img src="/images/avatars/2.png" alt="Team member" />
</div>
<div class="avatar bg-base-200 size-10 overflow-hidden rounded-full px-1 pt-1">
<img src="/images/avatars/3.png" alt="Team member" />
</div>
<div class="avatar bg-base-200 size-10 overflow-hidden rounded-full px-1 pt-1">
<img src="/images/avatars/4.png" alt="Team member" />
</div>
<div
class="bg-base-200 border-base-300 flex size-10 items-center justify-center rounded-full border border-dashed">
<span class="iconify lucide--plus size-4.5"></span>
</div>
</div>
</div>
<div class="border-base-300 mt-4 grow overflow-auto border-t border-dashed px-2 sm:mt-6">
<ul class="menu w-full p-2">
<li class="menu-title">Account</li>
<li>
<a href="#">
<span class="iconify lucide--user size-4.5"></span>
<span>View Profile</span>
</a>
</li>
<li>
<a href="#">
<span class="iconify lucide--users size-4.5"></span>
<span>Team</span>
</a>
</li>
<li>
<a href="#">
<span class="iconify lucide--mail-plus size-4.5"></span>
<span>Invites</span>
<div class="badge badge-sm">4</div>
</a>
</li>
<li class="menu-title">Platform</li>
<li>
<a href="#">
<span class="iconify lucide--settings size-4.5"></span>
<span>Settings</span>
</a>
</li>
<li>
<a href="#">
<span class="iconify lucide--credit-card size-4.5"></span>
<span>Billing</span>
</a>
</li>
<li>
<a href="#">
<span class="iconify lucide--help-circle size-4.5"></span>
<span>Support</span>
</a>
</li>
<li>
<a class="text-error hover:bg-error/10" href="#">
<span class="iconify lucide--log-out size-4.5"></span>
<span>Sign Out</span>
</a>
</li>
</ul>
</div>
<div
class="rounded-box from-primary to-secondary text-primary-content m-4 mt-auto flex cursor-pointer flex-col items-center justify-center bg-linear-to-br p-4 text-center transition-all hover:opacity-95 sm:p-6">
<div
class="bg-primary-content/10 border-primary-content/10 flex items-center justify-center rounded-full border p-1.5 sm:p-2.5">
<span class="iconify lucide--zap size-5 sm:size-6"></span>
</div>
<p
class="mt-2 font-mono text-[11px] font-medium tracking-wider uppercase opacity-70 sm:mt-4">
Upgrade your plan
</p>
<p class="mt-1 leading-none font-medium sm:text-lg">
Save
<span class="font-semibold underline">30%</span>
today
</p>
</div>
<div class="dropdown dropdown-bottom dropdown-end w-full">
<div tabindex="0" role="button"
class="hover:bg-base-300 rounded-box mx-2 mt-0 flex cursor-pointer items-center gap-2.5 transition-all group">
<div class="avatar">
<div class="bg-base-200 mask mask-squircle w-8">
<img src="../../assets/images/avatars/1.png" alt="Avatar" />
</div>
</div>
<div class="grow -space-y-0.5">
<p class="text-sm font-medium text-white">Denish N</p>
<p class="text-base-content/60 text-xs text-white">@withden</p>
</div>
<span class="iconify lucide--chevrons-up-down text-base-content/60 size-4 text-white"></span>
</div>
<ul role="menu" tabindex="0"
class="dropdown-content menu bg-base-100 rounded-box shadow-base-content/4 mb-1 w-48 p-1 shadow-[0px_-10px_40px_0px]">
<li>
<a href="./pages/settings.html">
<span class="iconify lucide--user size-4"></span>
<span>Tài khoản</span>
</a>
</li>
<li>
<a href="/admin/system/settings">
<span class="iconify lucide--settings size-4"></span>
<span>Cài đặt hệ thống</span>
</a>
</li>
</ul>
</div>
</div>
</div>
@@ -469,12 +378,13 @@
<ul class="menu menu-horizontal">
<li>
<div class="flex items-center gap-3">
<span class=""></span>
<span class="iconify lucide--home tw-tsa"></span>
<a href="/"><span class="grow">Home</span></a>
</div>
</li>
{% for _menu_item in global.main_menu %}
{% assign _menu_children = _menu_item.menu %}
{% if _menu_item.id != 'system' %}
<li
class="{%- for _item in _menuArray -%}{%- if _item.url == global.url -%} active {%- endif -%} {%- endfor -%}">
<div class="flex items-center gap-3">
@@ -490,9 +400,10 @@
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
</div>

3
template/theme.html
View File

@@ -20,7 +20,6 @@
console.log(err)
}
</script>
<link rel="stylesheet" href="{{'style.css' | asset_url}}?{{ 'now' | date : '%Y-%m-%d.%H.%M.%S' }}">
</head>
@@ -55,4 +54,4 @@
</body>
</html>
</html>