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

update icon homepage

Browse Source
This commit is contained in:
Tieptk
2024-01-23 10:40:23 +07:00
parent 353ee07560
commit 6dc3b5d19f
5 changed files with 88 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
template/home/home.html
View File

@@ -3,197 +3,8 @@
<!-- col-left -->
<div class="col-span-7 grid grid-cols-4 max-[1620px]:gap-[10px] gap-[16px]">
{% include 'home/components/main_stat' %}
<div
class="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] 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]">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0 0.777778C0 0.348223 0.348223 0 0.777778 0H2.16049C2.53125 0 2.85046 0.261691 2.92317 0.625243L3.07466 1.38272H13.2222C13.4918 1.38272 13.7421 1.52229 13.8838 1.75159C14.0256 1.98089 14.0384 2.26722 13.9179 2.50833L11.1525 8.03919C11.0207 8.30269 10.7514 8.46914 10.4568 8.46914H3.86538L2.65551 9.67901H10.4568C11.65 9.67901 12.6173 10.6463 12.6173 11.8395C12.6173 13.0327 11.65 14 10.4568 14C9.26356 14 8.2963 13.0327 8.2963 11.8395C8.2963 11.6295 8.32625 11.4265 8.38213 11.2346H5.61787C5.67375 11.4265 5.7037 11.6295 5.7037 11.8395C5.7037 13.0327 4.73641 14 3.54321 14C2.35001 14 1.38272 13.0327 1.38272 11.8395C1.38272 11.5231 1.45075 11.2225 1.57298 10.9517C0.903709 10.4543 0.723772 9.41089 1.40802 8.72661L2.6989 7.43572L1.52287 1.55556H0.777778C0.348223 1.55556 0 1.20733 0 0.777778ZM4.18084 6.91358H9.9761L11.9638 2.93827H3.38577L4.18084 6.91358ZM3.54321 11.2346C3.2091 11.2346 2.93827 11.5054 2.93827 11.8395C2.93827 12.1736 3.2091 12.4444 3.54321 12.4444C3.87732 12.4444 4.14815 12.1736 4.14815 11.8395C4.14815 11.5054 3.87732 11.2346 3.54321 11.2346ZM10.4568 11.2346C10.1227 11.2346 9.85185 11.5054 9.85185 11.8395C9.85185 12.1736 10.1227 12.4444 10.4568 12.4444C10.7909 12.4444 11.0617 12.1736 11.0617 11.8395C11.0617 11.5054 10.7909 11.2346 10.4568 11.2346Z"
fill="#0041E8"></path>
</svg>
</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]">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="8" viewBox="0 0 14 8" fill="none"
class="mr-[2px]">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7.33333 1.33333C6.96514 1.33333 6.66667 1.03486 6.66667 0.666667C6.66667 0.298477 6.96514 0 7.33333 0H12.6667C13.0349 0 13.3333 0.298477 13.3333 0.666667V6C13.3333 6.36819 13.0349 6.66667 12.6667 6.66667C12.2985 6.66667 12 6.36819 12 6V2.27614L7.80474 6.4714C7.67971 6.59643 7.51014 6.66667 7.33333 6.66667C7.15652 6.66667 6.98695 6.59643 6.86193 6.4714L4.66667 4.27614L1.13807 7.80474C0.877722 8.06509 0.455612 8.06509 0.195262 7.80474C-0.0650874 7.54439 -0.0650874 7.12228 0.195262 6.86193L4.19526 2.86193C4.32029 2.7369 4.48985 2.66667 4.66667 2.66667C4.84348 2.66667 5.01305 2.7369 5.13807 2.86193L7.33333 5.05719L11.0572 1.33333H7.33333Z"
fill="#299D00"></path>
</svg>
<b class="font-[700]"> 10% </b>
</div>
<p class="text-[#C5C5C5] text-[12px]">Hôm qua</p>
</div>
</div>
<div
class="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] 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]">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M4.92593 1.55556C3.82817 1.55556 2.93827 2.44546 2.93827 3.54321C2.93827 4.64096 3.82817 5.53086 4.92593 5.53086C6.02366 5.53086 6.91358 4.64096 6.91358 3.54321C6.91358 2.44546 6.02366 1.55556 4.92593 1.55556ZM1.38272 3.54321C1.38272 1.58635 2.96906 0 4.92593 0C6.88275 0 8.46914 1.58634 8.46914 3.54321C8.46914 5.50008 6.88275 7.08642 4.92593 7.08642C2.96906 7.08642 1.38272 5.50007 1.38272 3.54321ZM11.1481 4.14815C11.5777 4.14815 11.9259 4.49637 11.9259 4.92593V6.22222H13.2222C13.6518 6.22222 14 6.57045 14 7C14 7.42956 13.6518 7.77778 13.2222 7.77778H11.9259V9.07407C11.9259 9.50363 11.5777 9.85185 11.1481 9.85185C10.7186 9.85185 10.3704 9.50363 10.3704 9.07407V7.77778H9.07407C8.64452 7.77778 8.2963 7.42956 8.2963 7C8.2963 6.57045 8.64452 6.22222 9.07407 6.22222H10.3704V4.92593C10.3704 4.49637 10.7186 4.14815 11.1481 4.14815ZM1.55664 12.4444H8.29521C8.24937 10.623 6.75843 9.16049 4.92593 9.16049C3.09341 9.16049 1.60249 10.623 1.55664 12.4444ZM0 12.5309C0 9.81036 2.20541 7.60494 4.92593 7.60494C7.64643 7.60494 9.85185 9.81036 9.85185 12.5309V13.2222C9.85185 13.6518 9.50363 14 9.07407 14H0.777778C0.348223 14 0 13.6518 0 13.2222V12.5309Z"
fill="#299D00" />
</svg>
</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]">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="8" viewBox="0 0 14 8" fill="none"
class="mr-[2px]">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7.33333 1.33333C6.96514 1.33333 6.66667 1.03486 6.66667 0.666667C6.66667 0.298477 6.96514 0 7.33333 0H12.6667C13.0349 0 13.3333 0.298477 13.3333 0.666667V6C13.3333 6.36819 13.0349 6.66667 12.6667 6.66667C12.2985 6.66667 12 6.36819 12 6V2.27614L7.80474 6.4714C7.67971 6.59643 7.51014 6.66667 7.33333 6.66667C7.15652 6.66667 6.98695 6.59643 6.86193 6.4714L4.66667 4.27614L1.13807 7.80474C0.877722 8.06509 0.455612 8.06509 0.195262 7.80474C-0.0650874 7.54439 -0.0650874 7.12228 0.195262 6.86193L4.19526 2.86193C4.32029 2.7369 4.48985 2.66667 4.66667 2.66667C4.84348 2.66667 5.01305 2.7369 5.13807 2.86193L7.33333 5.05719L11.0572 1.33333H7.33333Z"
fill="#299D00"></path>
</svg>
<b class="font-[700]"> 10% </b>
</div>
<p class="text-[#C5C5C5] text-[12px]">Hôm qua</p>
</div>
</div>
<div
class="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] uppercase">Đơn trả
góp</p>
<a href=""
class="bg-[#F7F5FF] flex h-[26px] items-center justify-center rounded-[4px] text-center w-[26px]">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0 3.44444C0 1.54213 1.54213 0 3.44444 0H14.1111C16.0135 0 17.5556 1.54214 17.5556 3.44444V10.5556C17.5556 12.4579 16.0135 14 14.1111 14H3.44444C1.54214 14 0 12.4579 0 10.5556V3.44444ZM1.55556 6V10.5556C1.55556 11.5988 2.40124 12.4444 3.44444 12.4444H14.1111C15.1544 12.4444 16 11.5988 16 10.5556V6H1.55556ZM16 4.44444H1.55556V3.44444C1.55556 2.40124 2.40124 1.55556 3.44444 1.55556H14.1111C15.1543 1.55556 16 2.40124 16 3.44444V4.44444ZM3.55556 9.66667C3.55556 9.23711 3.90378 8.88889 4.33333 8.88889H5.22222C5.65178 8.88889 6 9.23711 6 9.66667C6 10.0962 5.65178 10.4444 5.22222 10.4444H4.33333C3.90378 10.4444 3.55556 10.0962 3.55556 9.66667ZM8 9.66667C8 9.23711 8.34822 8.88889 8.77778 8.88889H9.66667C10.0962 8.88889 10.4444 9.23711 10.4444 9.66667C10.4444 10.0962 10.0962 10.4444 9.66667 10.4444H8.77778C8.34822 10.4444 8 10.0962 8 9.66667Z"
fill="#5A00ED" />
</svg>
</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]">
<svg class="mr-[2px]" xmlns="http://www.w3.org/2000/svg" width="14" height="8" viewBox="0 0 14 8"
fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.167368 0.167368C0.390524 -0.0557892 0.752333 -0.0557892 0.97549 0.167368L4.68571 3.87759L7.02451 1.5388C7.13167 1.43163 7.27702 1.37143 7.42857 1.37143C7.58012 1.37143 7.72547 1.43163 7.83263 1.5388L12.3429 6.04902V1.94286C12.3429 1.62727 12.5987 1.37143 12.9143 1.37143C13.2299 1.37143 13.4857 1.62727 13.4857 1.94286V7.42857C13.4857 7.74416 13.2299 8 12.9143 8H7.42857C7.11298 8 6.85714 7.74416 6.85714 7.42857C6.85714 7.11298 7.11298 6.85714 7.42857 6.85714H11.5347L7.42857 2.75098L5.08977 5.08978C4.98261 5.19694 4.83727 5.25714 4.68571 5.25714C4.53416 5.25714 4.38882 5.19694 4.28165 5.08978L0.167368 0.97549C-0.0557892 0.752333 -0.0557892 0.390524 0.167368 0.167368Z"
fill="#E00000" />
</svg>
<b class="font-[700]"> 10% </b>
</div>
<p class="text-[#C5C5C5] text-[12px]">Hôm qua</p>
</div>
</div>
<div
class="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] uppercase">Đơn hoàn
trả</p>
<a href=""
class="bg-[#F9F2F2] flex h-[26px] items-center justify-center rounded-[4px] text-center w-[26px]">
<svg 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="M4.92593 1.55556C4.59183 1.55556 4.32099 1.8264 4.32099 2.16049C4.32099 2.49459 4.59183 2.76543 4.92593 2.76543H6.30864C6.64275 2.76543 6.91358 2.4946 6.91358 2.16049C6.91358 1.82639 6.64275 1.55556 6.30864 1.55556H4.92593ZM2.90966 1.38272C3.22191 0.573817 4.00691 0 4.92593 0H6.30864C7.22768 0 8.01267 0.57382 8.32491 1.38272H9.07407C10.2673 1.38272 11.2346 2.35001 11.2346 3.54321V5.61728C11.2346 6.04684 10.8863 6.39506 10.4568 6.39506C10.0272 6.39506 9.67901 6.04684 9.67901 5.61728V3.54321C9.67901 3.2091 9.40819 2.93827 9.07407 2.93827H8.32491C8.01267 3.74717 7.22768 4.32099 6.30864 4.32099H4.92593C4.00691 4.32099 3.22191 3.74717 2.90966 2.93827H2.16049C1.8264 2.93827 1.55556 3.20911 1.55556 3.54321V11.8395C1.55556 12.1736 1.82639 12.4444 2.16049 12.4444H9.07407C9.40819 12.4444 9.67901 12.1736 9.67901 11.8395V11.1481C9.67901 10.7186 10.0272 10.3704 10.4568 10.3704C10.8863 10.3704 11.2346 10.7186 11.2346 11.1481V11.8395C11.2346 13.0327 10.2673 14 9.07407 14H2.16049C0.967293 14 0 13.0327 0 11.8395V3.54321C0 2.35 0.967285 1.38272 2.16049 1.38272H2.90966ZM7.54997 5.75867C7.85371 6.06241 7.85371 6.55487 7.54997 6.85861L6.80365 7.60494H11.8395C12.2691 7.60494 12.6173 7.95316 12.6173 8.38272C12.6173 8.81227 12.2691 9.16049 11.8395 9.16049H6.80365L7.54997 9.90682C7.85371 10.2106 7.85371 10.703 7.54997 11.0068C7.24623 11.3105 6.75377 11.3105 6.45003 11.0068L4.37595 8.93269C4.07221 8.62895 4.07221 8.13649 4.37595 7.83274L6.45003 5.75867C6.75377 5.45493 7.24623 5.45493 7.54997 5.75867Z"
fill="#E00000" />
</svg>
</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]">
<svg class="mr-[2px]" xmlns="http://www.w3.org/2000/svg" width="14" height="8" viewBox="0 0 14 8"
fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.167368 0.167368C0.390524 -0.0557892 0.752333 -0.0557892 0.97549 0.167368L4.68571 3.87759L7.02451 1.5388C7.13167 1.43163 7.27702 1.37143 7.42857 1.37143C7.58012 1.37143 7.72547 1.43163 7.83263 1.5388L12.3429 6.04902V1.94286C12.3429 1.62727 12.5987 1.37143 12.9143 1.37143C13.2299 1.37143 13.4857 1.62727 13.4857 1.94286V7.42857C13.4857 7.74416 13.2299 8 12.9143 8H7.42857C7.11298 8 6.85714 7.74416 6.85714 7.42857C6.85714 7.11298 7.11298 6.85714 7.42857 6.85714H11.5347L7.42857 2.75098L5.08977 5.08978C4.98261 5.19694 4.83727 5.25714 4.68571 5.25714C4.53416 5.25714 4.38882 5.19694 4.28165 5.08978L0.167368 0.97549C-0.0557892 0.752333 -0.0557892 0.390524 0.167368 0.167368Z"
fill="#E00000" />
</svg>
<b class="font-[700]"> 10% </b>
</div>
<p class="text-[#C5C5C5] text-[12px]">Hôm qua</p>
</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] 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-[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%
<svg class="w-3 h-3 ms-1" 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>
</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
<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>
<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-2">