update
This commit is contained in:
@@ -1,299 +1,501 @@
|
||||
<div class="content-holder xl:gap-[16px] 2xl:gap-[10px] grid 2xl:grid-cols-10">
|
||||
<!-- Start: Dashboard Stats Widget -->
|
||||
|
||||
<!-- col-left -->
|
||||
<div class="2xl:col-span-7 grid grid-cols-4 max-[1620px]:gap-[10px] gap-[16px] xl:col-span-10 diagram">
|
||||
|
||||
{% include 'home/components/main_stat' %}
|
||||
|
||||
<div
|
||||
class="bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] p-[16px] max-[1620px]:p-[10px] col-span-4">
|
||||
<p class="inline-block text-[20px] text-custom-22 font-bold leading-[36px] mb-[16px] mr-[18px]"> Lịch sử
|
||||
chỉnh
|
||||
sửa </p>
|
||||
|
||||
<a href=""
|
||||
class="group inline-flex items-center px-[15px] mb-[16px] leading-[36px] text-[#0041E8] font-[500] rounded-[4px] bg-[#F5F7FF] hover:bg-[#0041E8] hover:text-white duration-100">
|
||||
<span class="mr-[5px]">Xem danh sách</span>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none">
|
||||
<path class="group-hover:fill-[#fff]" fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M6.5 1C3.46243 1 1 3.46243 1 6.5C1 9.53757 3.46243 12 6.5 12C9.53757 12 12 9.53757 12 6.5C12 3.46243 9.53757 1 6.5 1ZM0 6.5C0 2.91015 2.91015 0 6.5 0C10.0899 0 13 2.91015 13 6.5C13 10.0899 10.0899 13 6.5 13C2.91015 13 0 10.0899 0 6.5Z"
|
||||
fill="#0041E8" />
|
||||
<path class="group-hover:fill-[#fff]" fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M6.52779 4.02767C6.72306 3.83241 7.03964 3.83241 7.2349 4.02767L9.35365 6.14642C9.54891 6.34168 9.54891 6.65827 9.35365 6.85353L7.2349 8.97228C7.03964 9.16754 6.72306 9.16754 6.52779 8.97228C6.33253 8.77702 6.33253 8.46043 6.52779 8.26517L8.29299 6.49998L6.52779 4.73478C6.33253 4.53952 6.33253 4.22293 6.52779 4.02767Z"
|
||||
fill="#0041E8" />
|
||||
<path class="group-hover:fill-[#fff]" fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M3.5 6.5C3.5 6.22386 3.72386 6 4 6H9C9.27614 6 9.5 6.22386 9.5 6.5C9.5 6.77614 9.27614 7 9 7H4C3.72386 7 3.5 6.77614 3.5 6.5Z"
|
||||
fill="#0041E8" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<div class="2xl:w-full lg:w-full md:w-full overflow-x-auto whitespace-nowrap">
|
||||
<table class="table text-custom-16">
|
||||
<thead align="center" class="bg-[#F6F6F6] font-700 text-[14px] text-[#000]">
|
||||
<td width="50"> STT </td>
|
||||
<td width="265"> Người dùng </td>
|
||||
<td> Nội dung </td>
|
||||
<td width="150"> Thời gian </td>
|
||||
<td width="100"> Xem chi tiết </td>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
{% for item in page.lich_su_chinh_sua %}
|
||||
<tr>
|
||||
<td class="text-center"> {{ item.id }} </td>
|
||||
<td> {{ item.email }} </td>
|
||||
<td> {{ item.content }} </td>
|
||||
<td> {{ item.time }} </td>
|
||||
<td>
|
||||
<a href=""
|
||||
class="block text-center rounded-[4px] border border-[#0041E8] bg-[#F5F7FF] text-[#0041E8] font-[500] leading-[36px] hover:bg-[#0041E8] hover:text-[#fff]">
|
||||
Xem </a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{% endfor %}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- col-right -->
|
||||
<div class="2xl:col-span-3 xl:col-span-10">
|
||||
<div
|
||||
class="bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] p-[16px] max-[1620px]:p-[10px] mb-[16px]">
|
||||
<div id="js-admin-home-tab"
|
||||
class="admin-home-tab rounded-[8px] bg-[#FAFAFA] mb-[16px] text-custom-14 text-[12px] font-[500] flex items-center">
|
||||
<a href="#js-report-most-viewed-products" class="current">Sản phẩm
|
||||
xem
|
||||
nhiều</a>
|
||||
<a href="#js-report-introduce-web"> Web giới thiệu</a>
|
||||
<a href="#js-report-key-word"> Từ khóa</a>
|
||||
<a href="#js-report-article"> Bài viết</a>
|
||||
</div>
|
||||
|
||||
<div class="home-report-holder block" id="js-report-most-viewed-products">
|
||||
<table class="table text-custom-16">
|
||||
<thead class="bg-[#f6f6f6] text-[14px] text-custom-16 font-700 text-[#000]">
|
||||
<td width="50" class="text-center">STT</td>
|
||||
<td>Sản phẩm</td>
|
||||
<td width="75">Lượt xem</td>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-center"> 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 class="text-center">2
|
||||
<td><a href="" class="line-clamp-1"> Laptop Asus ZenBook UX3402VALaptop Asus ZenBook
|
||||
UX3402VALaptop
|
||||
Asus ZenBook UX3402VA </a>
|
||||
<td>30.000
|
||||
<tr>
|
||||
<td class="text-center">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" id="js-report-introduce-web">
|
||||
<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="font-bold leading-[20px] text-[16px] mb-[15px] text-custom-18">Truy cập website</p>
|
||||
|
||||
<div>
|
||||
<div class="flex" id="devices">
|
||||
<label class="flex items-center me-4 cursor-pointer">
|
||||
<input id="web_1" type="checkbox" value="web_1" class="checkbox checkbox-success">
|
||||
<span for="web_1" class="text-custom-16 label-text ml-[10px]">Web 1</span>
|
||||
</label>
|
||||
|
||||
<label class="flex items-center me-4 cursor-pointer">
|
||||
<input id="web_2" type="checkbox" value="web_2" class="checkbox checkbox-success">
|
||||
<span for="web_2" class="label-text ml-[10px]">Web 2</span>
|
||||
</label>
|
||||
|
||||
<label class="flex items-center me-4 cursor-pointer">
|
||||
<input id="web_3" type="checkbox" value="web_3" class="checkbox checkbox-success">
|
||||
<span for="web_3" class="label-text ml-[10px]">Web 3</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Donut Chart -->
|
||||
<div class="py-6" id="js-introduce-web-chart"></div>
|
||||
|
||||
<div
|
||||
class="grid grid-cols-1 items-center border-gray-200 border-t dark:border-gray-700 justify-between">
|
||||
<div class="flex justify-between items-center pt-5">
|
||||
<select>
|
||||
<option value=""> Last 7 days </option>
|
||||
<option value=""> Yesterday </option>
|
||||
<option value=""> Today </option>
|
||||
<option value=""> Last 7 days </option>
|
||||
<option value=""> Last 30 days </option>
|
||||
<option value=""> Last 90 days </option>
|
||||
</select>
|
||||
<a href="#"
|
||||
class="uppercase text-sm font-semibold inline-flex items-center rounded-lg text-blue-600 hover:text-blue-700 dark:hover:text-blue-500 hover:bg-gray-100 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700 px-3 py-2">
|
||||
Traffic analysis
|
||||
<svg class="w-2.5 h-2.5 ms-1.5 rtl:rotate-180" aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2" d="m1 9 4-4-4-4" />
|
||||
</svg>
|
||||
</a>
|
||||
<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="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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-report-holder" id="js-report-key-word">
|
||||
<a href=""
|
||||
class="inline-block text-[#9E9E9E] font-[500] leading-[20px] p-[8px] rounded-[4px] border-[#9E9E9E] border border-dashed m-[0_6px_6px_0] hover:bg-[#0041E8] hover:text-[#fff] hover:border-[#0041E8] duration-100">
|
||||
Laptop, Máy Tính Xách Tay
|
||||
</a>
|
||||
|
||||
<a href=""
|
||||
class="inline-block text-[#9E9E9E] font-[500] leading-[20px] p-[8px] rounded-[4px] border-[#9E9E9E] border border-dashed m-[0_6px_6px_0] hover:bg-[#0041E8] hover:text-[#fff] hover:border-[#0041E8] duration-100">
|
||||
Máy Tính Bảng </a><a href=""
|
||||
class="inline-block text-[#9E9E9E] font-[500] leading-[20px] p-[8px] rounded-[4px] border-[#9E9E9E] border border-dashed m-[0_6px_6px_0] hover:bg-[#0041E8] hover:text-[#fff] hover:border-[#0041E8] duration-100">
|
||||
Điện thoại iPhone </a><a href=""
|
||||
class="inline-block text-[#9E9E9E] font-[500] leading-[20px] p-[8px] rounded-[4px] border-[#9E9E9E] border border-dashed m-[0_6px_6px_0] hover:bg-[#0041E8] hover:text-[#fff] hover:border-[#0041E8] duration-100">
|
||||
Máy Đọc Sách </a><a href=""
|
||||
class="inline-block text-[#9E9E9E] font-[500] leading-[20px] p-[8px] rounded-[4px] border-[#9E9E9E] border border-dashed m-[0_6px_6px_0] hover:bg-[#0041E8] hover:text-[#fff] hover:border-[#0041E8] duration-100">
|
||||
Macbook </a><a href=""
|
||||
class="inline-block text-[#9E9E9E] font-[500] leading-[20px] p-[8px] rounded-[4px] border-[#9E9E9E] border border-dashed m-[0_6px_6px_0] hover:bg-[#0041E8] hover:text-[#fff] hover:border-[#0041E8] duration-100">
|
||||
Linh kiện máy tính </a>
|
||||
</div>
|
||||
|
||||
<div class="home-report-holder" id="js-report-article">
|
||||
<table class="table text-custom-16">
|
||||
<thead class="bg-[#F6F6F6] text-[14px] font-700 text-[#000]">
|
||||
<td width="50" class="text-center">STT</td>
|
||||
<td>Bài viết</td>
|
||||
<td width="75">Lượt xem</td>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-center"> 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 class="text-center">2
|
||||
<td><a href="" class="line-clamp-1"> Laptop Asus ZenBook UX3402VALaptop Asus ZenBook
|
||||
UX3402VALaptop
|
||||
Asus ZenBook UX3402VA </a>
|
||||
<td>30.000
|
||||
<tr>
|
||||
<td class="text-center">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>
|
||||
|
||||
<div class="bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] p-[16px] max-[1620px]:p-[10px]">
|
||||
<div class="flex flex-wrap items-center justify-between mb-[10px]">
|
||||
<p class="font-[500] text-[14px] text-custom-16">Ghi nhắc việc làm cá nhân</p>
|
||||
|
||||
<div
|
||||
class="relative rounded-[4px] max-w-[120px] bg-white leading-[32px] border border-[#d8d8d8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0px_9px_0px_30px]">
|
||||
<svg class="absolute top-[8px] left-[9px]" xmlns="http://www.w3.org/2000/svg" width="13" height="14"
|
||||
viewBox="0 0 13 14" fill="none">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M1.90909 2.54545C1.55764 2.54545 1.27273 2.83036 1.27273 3.18181V12.0909C1.27273 12.4424 1.55764 12.7273 1.90909 12.7273H10.8182C11.1696 12.7273 11.4545 12.4424 11.4545 12.0909V3.18181C11.4545 2.83036 11.1696 2.54545 10.8182 2.54545H1.90909ZM0 3.18181C0 2.12745 0.854729 1.27272 1.90909 1.27272H10.8182C11.8725 1.27272 12.7273 2.12745 12.7273 3.18181V12.0909C12.7273 13.1453 11.8725 14 10.8182 14H1.90909C0.854729 14 0 13.1453 0 12.0909V3.18181Z"
|
||||
fill="#7E7E7E" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M8.90907 0C9.26052 0 9.54543 0.28491 9.54543 0.636364V3.18182C9.54543 3.53327 9.26052 3.81818 8.90907 3.81818C8.55761 3.81818 8.27271 3.53327 8.27271 3.18182V0.636364C8.27271 0.28491 8.55761 0 8.90907 0Z"
|
||||
fill="#7E7E7E" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M3.81813 0C4.16958 0 4.45449 0.28491 4.45449 0.636364V3.18182C4.45449 3.53327 4.16958 3.81818 3.81813 3.81818C3.46667 3.81818 3.18176 3.53327 3.18176 3.18182V0.636364C3.18176 0.28491 3.46667 0 3.81813 0Z"
|
||||
fill="#7E7E7E" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M0 5.72728C0 5.37582 0.28491 5.09091 0.636364 5.09091H12.0909C12.4424 5.09091 12.7273 5.37582 12.7273 5.72728C12.7273 6.07873 12.4424 6.36364 12.0909 6.36364H0.636364C0.28491 6.36364 0 6.07873 0 5.72728Z"
|
||||
fill="#7E7E7E" />
|
||||
</svg>
|
||||
|
||||
<input type="text" value="23/11/2023" class="w-[100%] h-[32px]">
|
||||
<div class="bg-base-200 rounded-box flex items-center p-2">
|
||||
<span class="iconify lucide--circle-dollar-sign size-5"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="flex items-center justify-between mb-[10px]">
|
||||
<input type="text" placeholder="Nhập việc cần làm của bạn"
|
||||
class="border border-[#ECECEC] h-[36px] mr-[10px] p-[0px_12px] rounded-[4px] w-[calc(100%-87px)]">
|
||||
<button type="button" class="bg-[#0041E8] font-[500] h-[36px] rounded-[4px] text-[#fff] w-[77px]">Tạo
|
||||
mới</button>
|
||||
</form>
|
||||
|
||||
<div class="home-todo-list overflow-x-auto 2xl:whitespace-normal sm:whitespace-nowrap">
|
||||
<table class="table text-custom-16">
|
||||
<thead class="bg-[#F6F6F6] text-[14px] text-[#000] font-700">
|
||||
<td class="text-center"> STT </td>
|
||||
<td> Nội dung </td>
|
||||
<td> Hết hạn </td>
|
||||
<td class="w-[100px]"> Trạng thái </td>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
|
||||
|
||||
<tr>
|
||||
<td class="text-center"> 2 </td>
|
||||
<td> Sửa trang chủ websiteLaptoptcc </td>
|
||||
<td> 28/11/2023 </td>
|
||||
<td>
|
||||
<span
|
||||
class="bg-[#F9F2F2] border-[#E00000] text-[#E00000] block border font-[500] p-[0px_5px] rounded-[50px] text-[12px] text-center">
|
||||
Quá hạn </span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="text-center"> 3 </td>
|
||||
<td> Sửa trang chủ websiteLaptoptcc </td>
|
||||
<td> 28/11/2023 </td>
|
||||
<td>
|
||||
<span
|
||||
class="bg-[#F7F5FF] border-[#0041E8] text-[#0041E8] block border font-[500] p-[0px_5px] rounded-[50px] text-[12px] text-center">
|
||||
Đã xong </span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="text-center"> 4 </td>
|
||||
<td> Sửa trang chủ websiteLaptoptcc </td>
|
||||
<td> 28/11/2023 </td>
|
||||
<td>
|
||||
<span
|
||||
class="whitespace-nowrap bg-[#FCFAF1] border-[#FFC700] text-[#FFC700] block border font-[500] p-[0px_5px] rounded-[50px] text-[12px] text-center">
|
||||
Sắp hết hạn </span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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">
|
||||
Sales
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-base-200 rounded-box flex items-center p-2">
|
||||
<span class="iconify lucide--package size-5"></span>
|
||||
</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="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>
|
||||
</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="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>
|
||||
</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-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>
|
||||
</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">
|
||||
Total income in this year
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="revenue-statics-chart"></div>
|
||||
</div>
|
||||
</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">
|
||||
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>
|
||||
<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>
|
||||
</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>
|
||||
Reference in New Issue
Block a user