210 lines
9.4 KiB
HTML
210 lines
9.4 KiB
HTML
|
<div
|
||
|
|
class="sm:col-span-2 2xl:col-span-1 item-stat bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] transition duration-300 hover:shadow-[0px_1px_5px_0px_rgba(0,0,0,0.20)]">
|
||
|
|
<div class="border-b border-b-[#FAFAFB] p-[10px_10px_15px_13px]">
|
||
|
|
<div class="flex justify-between leading-[16px] min-h-[32px]">
|
||
|
|
<p class="mr-[10px] w-[calc(100%-36px)] text-[#B1B1B1] text-[12px] text-custom-16 uppercase">
|
||
|
|
Đơn
|
||
|
|
hàng
|
||
|
|
mới</p>
|
||
|
|
|
||
|
|
<a href=""
|
||
|
|
class="bg-[#F0F8FF] flex h-[26px] items-center justify-center rounded-[4px] text-center w-[26px]">
|
||
|
|
<i class="icons icon-cart"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="text-[28px] max-[1620px]:text-[22px] leading-[36px] font-[600]">10.000.000</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex items-center p-[8px_13px]">
|
||
|
|
<div
|
||
|
|
class="bg-[#E8F7F2] bg-green-100 flex font-[700] inline-flex items-center leading-[24px] mr-[10px] px-[5px] rounded-[4px] text-[#299D00] text-[14px]">
|
||
|
|
<i class="icons icon-increase"></i>
|
||
|
|
<b class="font-[700]"> 10% </b>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="text-[#C5C5C5] text-custom-16 text-[12px]">Hôm qua</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="sm:col-span-2 2xl:col-span-1 item-stat bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] transition duration-300 hover:shadow-[0px_1px_5px_0px_rgba(0,0,0,0.20)]">
|
||
|
|
<div class="border-b border-b-[#FAFAFB] p-[10px_10px_15px_13px]">
|
||
|
|
<div class="flex justify-between leading-[16px] min-h-[32px]">
|
||
|
|
<p class="w-[calc(100%-36px)] mr-[10px] text-[#B1B1B1] text-[12px] text-custom-16 uppercase">Khách
|
||
|
|
hàng
|
||
|
|
liên hệ qua website</p>
|
||
|
|
|
||
|
|
<a href=""
|
||
|
|
class="bg-[#F0F9F2] flex h-[26px] items-center justify-center rounded-[4px] text-center w-[26px]">
|
||
|
|
<i class="icons icon-contact"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="text-[22px] text-custom-28 leading-[36px] font-[600]">10.000.000</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex items-center p-[8px_13px]">
|
||
|
|
<div
|
||
|
|
class="bg-[#E8F7F2] bg-green-100 flex font-[700] inline-flex items-center leading-[24px] mr-[10px] px-[5px] rounded-[4px] text-[#299D00] text-[14px]">
|
||
|
|
<i class="icons icon-increase"></i>
|
||
|
|
<b class="font-[700]"> 10% </b>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="text-[#C5C5C5] text-custom-16 text-[12px]">Hôm qua</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="sm:col-span-2 2xl:col-span-1 item-stat bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] transition duration-300 hover:shadow-[0px_1px_5px_0px_rgba(0,0,0,0.20)]">
|
||
|
|
<div class="border-b border-b-[#FAFAFB] p-[10px_10px_15px_13px]">
|
||
|
|
<div class="flex justify-between leading-[16px] min-h-[32px]">
|
||
|
|
<p class="w-[calc(100%-36px)] mr-[10px] text-[#B1B1B1] text-custom-16 text-[12px] uppercase">Đơn
|
||
|
|
trả
|
||
|
|
góp</p>
|
||
|
|
|
||
|
|
<a href=""
|
||
|
|
class="bg-[#F7F5FF] flex h-[26px] items-center justify-center rounded-[4px] text-center w-[26px]">
|
||
|
|
<i class="icons icon-pay"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="text-[28px] max-[1620px]:text-[22px] leading-[36px] font-[600]">10.000.000</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex items-center p-[8px_13px]">
|
||
|
|
<div
|
||
|
|
class="bg-[#FFEEEB] bg-[red]-100 flex font-[700] inline-flex items-center leading-[24px] mr-[10px] px-[5px] rounded-[4px] text-[#E00000] text-[14px]">
|
||
|
|
<i class="icons icon-reduce"></i>
|
||
|
|
<b class="font-[700]"> 10% </b>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="text-[#C5C5C5] text-custom-16 text-[12px]">Hôm qua</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="sm:col-span-2 2xl:col-span-1 item-stat bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] transition duration-300 hover:shadow-[0px_1px_5px_0px_rgba(0,0,0,0.20)]">
|
||
|
|
<div class="border-b border-b-[#FAFAFB] p-[10px_10px_15px_13px]">
|
||
|
|
<div class="flex justify-between leading-[16px] min-h-[32px]">
|
||
|
|
<p class="w-[calc(100%-36px)] mr-[10px] text-[#B1B1B1] text-custom-16 text-[12px] uppercase">Đơn
|
||
|
|
hoàn
|
||
|
|
trả</p>
|
||
|
|
|
||
|
|
<a href=""
|
||
|
|
class="bg-[#F9F2F2] flex h-[26px] items-center justify-center rounded-[4px] text-center w-[26px]">
|
||
|
|
<i class="icons icon-installment"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="text-[28px] max-[1620px]:text-[22px] leading-[36px] font-[600]">10.000.000</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex items-center p-[8px_13px]">
|
||
|
|
<div
|
||
|
|
class="bg-[#FFEEEB] bg-[red]-100 flex font-[700] inline-flex items-center leading-[24px] mr-[10px] px-[5px] rounded-[4px] text-[#E00000] text-[14px]">
|
||
|
|
<i class="icons icon-reduce"></i>
|
||
|
|
<b class="font-[700]"> 10% </b>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="text-[#C5C5C5] text-custom-16 text-[12px]">Hôm qua</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="sm:col-span-2 item-chart bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] p-[16px] max-[1620px]:p-[10px] col-span-2">
|
||
|
|
<div class="flex justify-between min-h-[100px]">
|
||
|
|
<div>
|
||
|
|
<h5 class="leading-[30px] text-[24px] font-[600]">32.4k</h5>
|
||
|
|
<p class="text-custom-16 text-[14px] text-[#7E7E7E]">Doanh thu trong tuần này</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="flex items-center px-2.5 py-0.5 text-base font-semibold text-green-500 dark:text-green-500 text-center">
|
||
|
|
12%
|
||
|
|
<i class="fa-solid fa-arrow-up ml-[5px]"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="js-revenue-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">
|
||
|
|
Users Report
|
||
|
|
<i class="fa-solid fa-angle-right ml-[5px]"></i>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="sm:col-span-2 item-chart bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] p-[16px] max-[1620px]:p-[10px] col-span-2">
|
||
|
|
<div class="pb-[14px] mb-[10px] border-b border-gray-200 dark:border-gray-700">
|
||
|
|
<h5 class="leading-[30px] text-[24px] font-[600]">3.4k</h5>
|
||
|
|
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<p class="text-[14px] text-[#7E7E7E] text-custom-16">Truy cập web trong tuần này</p>
|
||
|
|
|
||
|
|
<span
|
||
|
|
class="bg-green-100 text-green-800 text-xs font-medium inline-flex items-center px-2.5 py-1 rounded-md dark:bg-green-900 dark:text-green-300">
|
||
|
|
<svg class="w-2.5 h-2.5 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||
|
|
viewBox="0 0 10 14">
|
||
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
|
|
d="M5 13V1m0 0L1 5m4-4 4 4" />
|
||
|
|
</svg>
|
||
|
|
42.5%
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid grid-cols-2">
|
||
|
|
<dl class="flex items-center">
|
||
|
|
<dt class="text-gray-500 dark:text-gray-400 text-sm font-normal me-1">Lượt truy cập:
|
||
|
|
</dt>
|
||
|
|
<dd class="text-gray-900 text-sm dark:text-white font-semibold">1.458</dd>
|
||
|
|
</dl>
|
||
|
|
|
||
|
|
<dl class="flex items-center justify-end">
|
||
|
|
<dt class="text-gray-500 dark:text-gray-400 text-sm font-normal me-1">Người xem:</dt>
|
||
|
|
<dd class="text-gray-900 text-sm dark:text-white font-semibold">2.130</dd>
|
||
|
|
</dl>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="js-access-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">
|
||
|
|
Leads Report
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|