131 lines
5.8 KiB
HTML
131 lines
5.8 KiB
HTML
|
<div class="w-[100%]">
|
||
|
|
<div class="m-[15px] p-[15px] rounded-[15px]">
|
||
|
|
<h1 class="text-[24px] font-[700] mb-[15px]">Thống kê đơn hàng</h1>
|
||
|
|
|
||
|
|
<div class="flex">
|
||
|
|
<div
|
||
|
|
class="item p-[10px] rounded-[15px] bg-white w-[calc(100%/3)] mr-[7px] shadow-[0px_1px_1px_0px_#0000001A]">
|
||
|
|
<div class="flex items-center justify-between pb-[10px] border-b-[1px] border-[#ECECEC]">
|
||
|
|
<div class="left">
|
||
|
|
<b class="text-[24px] block">1.45K</b>
|
||
|
|
<span class="text-[#7E7E7E]">Truy cập web trong tuần này</span>
|
||
|
|
</div>
|
||
|
|
<div class="right">
|
||
|
|
<div
|
||
|
|
class="flex items-center w-[60px] h-[28px] bg-[#E8F7F2] text-[#299D00] justify-center rounded-[4px]">
|
||
|
|
<span class="mr-[5px] font-[700]">12%</span>
|
||
|
|
<i class="fa-solid fa-arrow-up font-[700]"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="js-revenue-chart" style="min-height: 335px;"></div>
|
||
|
|
|
||
|
|
<div class="pt-[20px] mt-[10px] border-t-[1px] border-[#ECECEC]">
|
||
|
|
<select name="" id="" class="">
|
||
|
|
<option value="">Last 7 days</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="item p-[10px] rounded-[15px] bg-white w-[calc(100%/3)] mx-[7px] shadow-[0px_1px_1px_0px_#0000001A]">
|
||
|
|
<div class="pb-[10px] border-b-[1px] border-[#ECECEC]">
|
||
|
|
<b class="text-[24px] block">Truy cập website</b>
|
||
|
|
<select name="" id="" class="text-[#0041E8]">
|
||
|
|
<option value="">28/12/2023 - 03/01/2024</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="js-chart-pie" style="min-height: 335px;"></div>
|
||
|
|
|
||
|
|
<div class="pt-[20px] mt-[10px] border-t-[1px] border-[#ECECEC]">
|
||
|
|
<select name="" id="" class="">
|
||
|
|
<option value="">Last 7 days</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="item p-[10px] rounded-[15px] bg-white w-[calc(100%/3)] ml-[7px] shadow-[0px_1px_1px_0px_#0000001A]">
|
||
|
|
<div class="pb-[10px] border-b-[1px] border-[#ECECEC]">
|
||
|
|
<b class="text-[24px] block">Truy cập theo tỉnh thành</b>
|
||
|
|
<select name="" id="" class="text-[#0041E8]">
|
||
|
|
<option value="">28/12/2023 - 03/01/2024</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="js-chart-pie" style="min-height: 335px;"></div>
|
||
|
|
|
||
|
|
<div class="pt-[20px] mt-[10px] border-t-[1px] border-[#ECECEC]">
|
||
|
|
<select name="" id="" class="">
|
||
|
|
<option value="">Last 7 days</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="flex mt-[15px]">
|
||
|
|
<div class="w-[700px] mr-[7px] p-[10px] rounded-[15px] shadow-[0px_1px_1px_0px_#0000001A] bg-white">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<p>Khách hàng đăng ký mới trong 30 ngày: </p>
|
||
|
|
<b class="ml-[5px]">11.458</b>
|
||
|
|
</div>
|
||
|
|
<a href=""
|
||
|
|
class="block w-[30px] h-[30px] leading-[30px] border-[1px] border-[#ECECEC] text-center bg-[#F9F9F9] text-[#9E9E9E] rounded-[4px]">
|
||
|
|
<i class="fa-regular fa-file-excel"></i></a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<table class="table mt-[15px]">
|
||
|
|
<thead class="bg-[#f6f6f6] text-[#000] text-[14px] font-500">
|
||
|
|
<tr>
|
||
|
|
<th class="w-[50px]">STT</th>
|
||
|
|
<th>Ngày</th>
|
||
|
|
<th>Số đơn hàng mới</th>
|
||
|
|
<th class="w-[120px]">Tình trạng</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td class="text-center">1</td>
|
||
|
|
<td>05-12-2021</td>
|
||
|
|
<td>235</td>
|
||
|
|
<td>
|
||
|
|
<span class="m-auto w-[14px] h-[14px] block rounded-[50%] bg-[#FFC700]"></span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="text-center">1</td>
|
||
|
|
<td>05-12-2021</td>
|
||
|
|
<td>235</td>
|
||
|
|
<td>
|
||
|
|
<span class="m-auto w-[14px] h-[14px] block rounded-[50%] bg-[#0041E8]"></span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="text-center">1</td>
|
||
|
|
<td>05-12-2021</td>
|
||
|
|
<td>235</td>
|
||
|
|
<td>
|
||
|
|
<span class="m-auto w-[14px] h-[14px] block rounded-[50%] bg-[#FFC700]"></span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="text-center">1</td>
|
||
|
|
<td>05-12-2021</td>
|
||
|
|
<td>235</td>
|
||
|
|
<td>
|
||
|
|
<span class="m-auto w-[14px] h-[14px] block rounded-[50%] bg-[#E00000]"></span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|