898 lines
48 KiB
HTML
898 lines
48 KiB
HTML
|
<div class="content-holder gap-[16px] max-[1620px]:gap-[10px] grid grid-cols-10">
|
||
|
|
|
||
|
|
<!-- col-left -->
|
||
|
|
<div class="col-span-7 grid grid-cols-4 max-[1620px]:gap-[10px] gap-[16px]">
|
||
|
|
<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">
|
||
|
|
<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]">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>
|
||
|
|
|
||
|
|
<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] 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>
|
||
|
|
|
||
|
|
<table class="table-fixed border border-[#ECECEC] w-[100%] leading-[20px]">
|
||
|
|
<thead align="center" class="bg-[#F6F6F6] font-[500]">
|
||
|
|
<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> {{ item.id }} </td>
|
||
|
|
<td> {{ item.email }} </td>
|
||
|
|
<td> {{ item.content }} </td>
|
||
|
|
<td> {{ item.time }} </td>
|
||
|
|
<td>
|
||
|
|
<a href=""
|
||
|
|
class="block 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>
|
||
|
|
|
||
|
|
<!-- col-right -->
|
||
|
|
<div class="col-span-3">
|
||
|
|
<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-[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-fixed text-center">
|
||
|
|
<thead>
|
||
|
|
<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=""> Laptop Asus ZenBook UX3402VALaptop Asus ZenBook UX3402VALaptop
|
||
|
|
Asus ZenBook UX3402VA </a> </td>
|
||
|
|
<td> 30.000 </td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>2
|
||
|
|
<td><a href=""> Laptop Asus ZenBook UX3402VALaptop Asus ZenBook UX3402VALaptop
|
||
|
|
Asus ZenBook UX3402VA </a>
|
||
|
|
<td>30.000
|
||
|
|
<tr>
|
||
|
|
<td>3
|
||
|
|
<td><a href=""> 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>
|
||
|
|
<p class="font-bold leading-[20px] text-[16px] mb-[15px]">Truy cập website</p>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div class="flex" id="devices">
|
||
|
|
<div class="flex items-center me-4">
|
||
|
|
<input id="web_1" type="checkbox" value="web_1"
|
||
|
|
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||
|
|
<label for="web_1"
|
||
|
|
class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Web
|
||
|
|
1</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex items-center me-4">
|
||
|
|
<input id="web_2" type="checkbox" value="web_2"
|
||
|
|
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||
|
|
<label for="web_2"
|
||
|
|
class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Web
|
||
|
|
2</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex items-center me-4">
|
||
|
|
<input id="web_3" type="checkbox" value="web_3"
|
||
|
|
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||
|
|
<label for="web_3"
|
||
|
|
class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Web
|
||
|
|
3</label>
|
||
|
|
</div>
|
||
|
|
</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>
|
||
|
|
</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-fixed text-center">
|
||
|
|
<thead>
|
||
|
|
<td width="50">STT</td>
|
||
|
|
<td>Bài viết</td>
|
||
|
|
<td width="75">Lượt xem</td>
|
||
|
|
</thead>
|
||
|
|
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td> 1 </td>
|
||
|
|
<td> <a href=""> Laptop Asus ZenBook UX3402VALaptop Asus ZenBook UX3402VALaptop
|
||
|
|
Asus ZenBook UX3402VA </a> </td>
|
||
|
|
<td> 30.000 </td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>2
|
||
|
|
<td><a href=""> Laptop Asus ZenBook UX3402VALaptop Asus ZenBook UX3402VALaptop
|
||
|
|
Asus ZenBook UX3402VA </a>
|
||
|
|
<td>30.000
|
||
|
|
<tr>
|
||
|
|
<td>3
|
||
|
|
<td><a href=""> 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]">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>
|
||
|
|
</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">
|
||
|
|
<table class="table-fixed leading-[20px]">
|
||
|
|
<thead class="bg-[#F6F6F6] font-[500] leading-[48px]">
|
||
|
|
<td> STT </td>
|
||
|
|
<td> Nội dung </td>
|
||
|
|
<td> Hết hạn </td>
|
||
|
|
<td> Trạng thái </td>
|
||
|
|
</thead>
|
||
|
|
|
||
|
|
<tbody>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td> 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> 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> 4 </td>
|
||
|
|
<td> Sửa trang chủ websiteLaptoptcc </td>
|
||
|
|
<td> 28/11/2023 </td>
|
||
|
|
<td>
|
||
|
|
<span
|
||
|
|
class="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>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="{{ 'charts.js' | asset_url }}"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function () {
|
||
|
|
revenue_chart(); // Doanh thu
|
||
|
|
|
||
|
|
access_chart(); // Truy cập
|
||
|
|
|
||
|
|
introduce_web_chart(); // web giới thiệu
|
||
|
|
|
||
|
|
$("#js-admin-home-tab a").click(function () {
|
||
|
|
event.preventDefault();
|
||
|
|
|
||
|
|
$("#js-admin-home-tab a").removeClass('current');
|
||
|
|
$(this).addClass('current');
|
||
|
|
|
||
|
|
var id = $(this).attr('href');
|
||
|
|
$('.home-report-holder').hide();
|
||
|
|
$(id).show();
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
// Doanh thu
|
||
|
|
function revenue_chart() {
|
||
|
|
let options = {
|
||
|
|
chart: {
|
||
|
|
maxWidth: "100%",
|
||
|
|
height: "320px",
|
||
|
|
type: "area",
|
||
|
|
fontFamily: "Inter, sans-serif",
|
||
|
|
dropShadow: {
|
||
|
|
enabled: false,
|
||
|
|
},
|
||
|
|
toolbar: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
enabled: true,
|
||
|
|
x: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
fill: {
|
||
|
|
type: "gradient",
|
||
|
|
gradient: {
|
||
|
|
opacityFrom: 0.55,
|
||
|
|
opacityTo: 0,
|
||
|
|
shade: "#1C64F2",
|
||
|
|
gradientToColors: ["#1C64F2"],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
dataLabels: {
|
||
|
|
enabled: false,
|
||
|
|
},
|
||
|
|
stroke: {
|
||
|
|
width: 6,
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
show: false,
|
||
|
|
strokeDashArray: 4,
|
||
|
|
padding: {
|
||
|
|
left: 2,
|
||
|
|
right: 2,
|
||
|
|
top: 0
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: "New users",
|
||
|
|
data: [6500, 6418, 6456, 6526, 6356, 6456],
|
||
|
|
color: "#0041E8",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
xaxis: {
|
||
|
|
categories: [
|
||
|
|
'01 February',
|
||
|
|
'02 February',
|
||
|
|
'03 February',
|
||
|
|
'04 February',
|
||
|
|
'05 February',
|
||
|
|
'06 February',
|
||
|
|
'07 February'
|
||
|
|
],
|
||
|
|
labels: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisBorder: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisTicks: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
if (document.getElementById("js-revenue-chart") && typeof ApexCharts !== 'undefined') {
|
||
|
|
const chart = new ApexCharts(document.getElementById("js-revenue-chart"), options);
|
||
|
|
chart.render();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// Truy cập
|
||
|
|
function access_chart() {
|
||
|
|
const options = {
|
||
|
|
colors: ["#0041E8", "#FFC700"],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: "Organic",
|
||
|
|
color: "#0041E8",
|
||
|
|
data: [
|
||
|
|
{ x: "Mon", y: 231 },
|
||
|
|
{ x: "Tue", y: 122 },
|
||
|
|
{ x: "Wed", y: 63 },
|
||
|
|
{ x: "Thu", y: 421 },
|
||
|
|
{ x: "Fri", y: 122 },
|
||
|
|
{ x: "Sat", y: 323 },
|
||
|
|
{ x: "Sun", y: 111 },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "Social media",
|
||
|
|
color: "#FFC700",
|
||
|
|
data: [
|
||
|
|
{ x: "Mon", y: 232 },
|
||
|
|
{ x: "Tue", y: 113 },
|
||
|
|
{ x: "Wed", y: 341 },
|
||
|
|
{ x: "Thu", y: 224 },
|
||
|
|
{ x: "Fri", y: 522 },
|
||
|
|
{ x: "Sat", y: 411 },
|
||
|
|
{ x: "Sun", y: 243 },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
chart: {
|
||
|
|
type: "bar",
|
||
|
|
height: "320px",
|
||
|
|
fontFamily: "Inter, sans-serif",
|
||
|
|
toolbar: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
plotOptions: {
|
||
|
|
bar: {
|
||
|
|
horizontal: false,
|
||
|
|
columnWidth: "70%",
|
||
|
|
borderRadiusApplication: "end",
|
||
|
|
borderRadius: 8,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
shared: true,
|
||
|
|
intersect: false,
|
||
|
|
style: {
|
||
|
|
fontFamily: "Inter, sans-serif",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
states: {
|
||
|
|
hover: {
|
||
|
|
filter: {
|
||
|
|
type: "darken",
|
||
|
|
value: 1,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
stroke: {
|
||
|
|
show: true,
|
||
|
|
width: 0,
|
||
|
|
colors: ["transparent"],
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
show: false,
|
||
|
|
strokeDashArray: 4,
|
||
|
|
padding: {
|
||
|
|
left: 2,
|
||
|
|
right: 2,
|
||
|
|
top: -14
|
||
|
|
},
|
||
|
|
},
|
||
|
|
dataLabels: {
|
||
|
|
enabled: false,
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
xaxis: {
|
||
|
|
floating: false,
|
||
|
|
labels: {
|
||
|
|
show: true,
|
||
|
|
style: {
|
||
|
|
fontFamily: "Inter, sans-serif",
|
||
|
|
cssClass: 'text-xs font-normal fill-gray-500 dark:fill-gray-400'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisBorder: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisTicks: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
fill: {
|
||
|
|
opacity: 1,
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
if (document.getElementById("js-access-chart") && typeof ApexCharts !== 'undefined') {
|
||
|
|
const chart = new ApexCharts(document.getElementById("js-access-chart"), options);
|
||
|
|
chart.render();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// web giới thiệu
|
||
|
|
function introduce_web_chart() {
|
||
|
|
const getChartOptions = () => {
|
||
|
|
return {
|
||
|
|
series: [35.1, 23.5, 2.4, 5.4],
|
||
|
|
colors: ["#0041E8", "#6DC580", "#FFC700", "#E00000"],
|
||
|
|
chart: {
|
||
|
|
height: 320,
|
||
|
|
width: "100%",
|
||
|
|
type: "donut",
|
||
|
|
},
|
||
|
|
stroke: {
|
||
|
|
colors: ["transparent"],
|
||
|
|
lineCap: "",
|
||
|
|
},
|
||
|
|
plotOptions: {
|
||
|
|
pie: {
|
||
|
|
donut: {
|
||
|
|
labels: {
|
||
|
|
show: true,
|
||
|
|
name: {
|
||
|
|
show: true,
|
||
|
|
fontFamily: "Inter, sans-serif",
|
||
|
|
offsetY: 20,
|
||
|
|
},
|
||
|
|
total: {
|
||
|
|
showAlways: true,
|
||
|
|
show: true,
|
||
|
|
label: "Lượt truy cập",
|
||
|
|
fontFamily: "Inter, sans-serif",
|
||
|
|
formatter: function (w) {
|
||
|
|
const sum = w.globals.seriesTotals.reduce((a, b) => {
|
||
|
|
return a + b
|
||
|
|
}, 0)
|
||
|
|
return `${sum}k`
|
||
|
|
},
|
||
|
|
},
|
||
|
|
value: {
|
||
|
|
show: true,
|
||
|
|
fontFamily: "Inter, sans-serif",
|
||
|
|
offsetY: -20,
|
||
|
|
formatter: function (value) {
|
||
|
|
return value + "k"
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
size: "80%",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
padding: {
|
||
|
|
top: -2,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
labels: ["Trực tiếp", "Quảng cáo", "Liên kết", "Qua Email"],
|
||
|
|
dataLabels: {
|
||
|
|
enabled: false,
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
position: "bottom",
|
||
|
|
fontFamily: "Inter, sans-serif",
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
labels: {
|
||
|
|
formatter: function (value) {
|
||
|
|
return value + "k"
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
xaxis: {
|
||
|
|
labels: {
|
||
|
|
formatter: function (value) {
|
||
|
|
return value + "k"
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisTicks: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisBorder: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (document.getElementById("js-introduce-web-chart") && typeof ApexCharts !== 'undefined') {
|
||
|
|
const chart = new ApexCharts(document.getElementById("js-introduce-web-chart"), getChartOptions());
|
||
|
|
chart.render();
|
||
|
|
|
||
|
|
// Get all the checkboxes by their class name
|
||
|
|
const checkboxes = document.querySelectorAll('#devices input[type="checkbox"]');
|
||
|
|
|
||
|
|
// Function to handle the checkbox change event
|
||
|
|
function handleCheckboxChange(event, chart) {
|
||
|
|
const checkbox = event.target;
|
||
|
|
if (checkbox.checked) {
|
||
|
|
switch (checkbox.value) {
|
||
|
|
case 'web_1':
|
||
|
|
chart.updateSeries([15.1, 22.5, 4.4, 8.4]);
|
||
|
|
break;
|
||
|
|
case 'web_2':
|
||
|
|
chart.updateSeries([25.1, 26.5, 1.4, 3.4]);
|
||
|
|
break;
|
||
|
|
case 'web_3':
|
||
|
|
chart.updateSeries([45.1, 27.5, 8.4, 2.4]);
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
chart.updateSeries([55.1, 28.5, 1.4, 5.4]);
|
||
|
|
}
|
||
|
|
|
||
|
|
} else {
|
||
|
|
chart.updateSeries([35.1, 23.5, 2.4, 5.4]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Attach the event listener to each checkbox
|
||
|
|
checkboxes.forEach((checkbox) => {
|
||
|
|
checkbox.addEventListener('change', (event) => handleCheckboxChange(event, chart));
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|