<app-page-header
title="Dashboard"
title1="Dashboard"
activeitem="Home"
></app-page-header>
<!-- Start::row-1 -->
<div class="grid grid-cols-12 gap-x-5">
<div class="col-span-12 md:col-span-6 xxl:col-span-3">
<div class="box overflow-hidden">
<div class="box-body">
<div class="flex">
<div class="flex space-x-3 rtl:space-x-reverse">
<div class="avatar p-2 rounded-sm bg-primary/10">
<svg
class="fill-primary"
xmlns="http://www.w3.org/2000/svg"
enable-background="new 0 0 24 24"
viewBox="0 0 24 24"
>
<path
class="fill-primary"
d="M9,10h2.5c0.276123,0,0.5-0.223877,0.5-0.5S11.776123,9,11.5,9H10V8c0-0.276123-0.223877-0.5-0.5-0.5S9,7.723877,9,8v1c-1.1045532,0-2,0.8954468-2,2s0.8954468,2,2,2h1c0.5523071,0,1,0.4476929,1,1s-0.4476929,1-1,1H7.5C7.223877,15,7,15.223877,7,15.5S7.223877,16,7.5,16H9v1.0005493C9.0001831,17.2765503,9.223999,17.5001831,9.5,17.5h0.0006104C9.7765503,17.4998169,10.0001831,17.276001,10,17v-1c1.1045532,0,2-0.8954468,2-2s-0.8954468-2-2-2H9c-0.5523071,0-1-0.4476929-1-1S8.4476929,10,9,10z M21.5,12H17V2.5c0.000061-0.0875244-0.0228882-0.1735229-0.0665283-0.2493896c-0.1375732-0.2393188-0.4431152-0.3217773-0.6824951-0.1842041l-3.2460327,1.8603516L9.7481079,2.0654297c-0.1536865-0.0878906-0.3424072-0.0878906-0.4960938,0l-3.256897,1.8613281L2.7490234,2.0664062C2.6731567,2.0227661,2.5871582,1.9998779,2.4996338,1.9998779C2.2235718,2.000061,1.9998779,2.223938,2,2.5v17c0.0012817,1.380188,1.119812,2.4987183,2.5,2.5H19c1.6561279-0.0018311,2.9981689-1.3438721,3-3v-6.5006104C21.9998169,12.2234497,21.776001,11.9998169,21.5,12z M4.5,21c-0.828064-0.0009155-1.4990845-0.671936-1.5-1.5V3.3623047l2.7412109,1.5712891c0.1575928,0.0872192,0.348877,0.0875854,0.5068359,0.0009766L9.5,3.0761719l3.2519531,1.8583984c0.157959,0.0866089,0.3492432,0.0862427,0.5068359-0.0009766L16,3.3623047V19c0.0008545,0.7719116,0.3010864,1.4684448,0.7803345,2H4.5z M21,19c0,1.1045532-0.8954468,2-2,2s-2-0.8954468-2-2v-6h4V19z"
></path>
</svg>
</div>
<h6
class="text-lg font-medium text-gray-800 mb-2 dark:text-white my-auto"
>
Total Revenue
</h6>
</div>
<span
class="badge bg-primary/10 text-primary py-1 ltr:ml-auto rtl:mr-auto !my-auto"
>
<i class="ti ti-trending-up"></i> 20%
</span>
</div>
<div class="mt-2">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white">
$26,35,262
</h2>
<p class="text-xs text-gray-400">in last week</p>
</div>
</div>
</div>
</div>
<div class="col-span-12 md:col-span-6 xxl:col-span-3">
<div class="box overflow-hidden">
<div class="box-body">
<div class="flex">
<div class="flex space-x-3 rtl:space-x-reverse">
<div class="avatar p-2 rounded-sm bg-secondary/10">
<svg
class="fill-secondary"
xmlns="http://www.w3.org/2000/svg"
enable-background="new 0 0 24 24"
viewBox="0 0 24 24"
>
<path
class="fill-secondary"
d="M9.5,7h7C16.776123,7,17,6.776123,17,6.5S16.776123,6,16.5,6h-7C9.223877,6,9,6.223877,9,6.5S9.223877,7,9.5,7z M7.5,11h9c0.276123,0,0.5-0.223877,0.5-0.5S16.776123,10,16.5,10h-9C7.223877,10,7,10.223877,7,10.5S7.223877,11,7.5,11z M20.5,2H3.4993896C3.2234497,2.0001831,2.9998169,2.223999,3,2.5v19c-0.000061,0.1124268,0.0378418,0.2216187,0.1074829,0.3098755c0.1710205,0.2167358,0.4853516,0.2537231,0.7020874,0.0827026l2.8652344-2.2617188l2.3583984,1.7695312c0.1777954,0.1328125,0.421814,0.1328125,0.5996094,0L12,19.625l2.3671875,1.7753906c0.1777954,0.1328125,0.421814,0.1328125,0.5996094,0l2.3583984-1.7695312l2.8652344,2.2617188C20.2785034,21.9623413,20.3876343,22.0002441,20.5,22h0.0006104C20.7766113,21.9998169,21.0001831,21.7759399,21,21.5V2.4993896C20.9998169,2.2234497,20.776001,1.9998169,20.5,2z M20,20.46875l-2.3574219-1.8613281c-0.0882568-0.069519-0.1972656-0.1072998-0.3095703-0.1074219c-0.1080933-0.000061-0.2132568,0.0349121-0.2998047,0.0996094L14.6669922,20.375l-2.3671875-1.7753906c-0.1777954-0.1328125-0.421814-0.1328125-0.5996094,0L9.3330078,20.375l-2.3662109-1.7753906c-0.1817017-0.1348877-0.4311523-0.1317139-0.609375,0.0078125L4,20.46875V3h16V20.46875z M7.5,15h9c0.276123,0,0.5-0.223877,0.5-0.5S16.776123,14,16.5,14h-9C7.223877,14,7,14.223877,7,14.5S7.223877,15,7.5,15z"
></path>
</svg>
</div>
<h6
class="text-lg font-medium text-gray-800 mb-2 dark:text-white my-auto"
>
Total Sales
</h6>
</div>
<span
class="badge bg-secondary/10 text-secondary py-1 ltr:ml-auto rtl:mr-auto !my-auto"
><i class="ti ti-trending-up"></i> 1.8%</span
>
</div>
<div class="mt-2">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white">
$56,35,262
</h2>
<p class="text-xs text-gray-400">in last week</p>
</div>
</div>
</div>
</div>
<div class="col-span-12 md:col-span-6 xxl:col-span-3">
<div class="box overflow-hidden">
<div class="box-body">
<div class="flex">
<div class="flex space-x-3 rtl:space-x-reverse">
<div class="avatar p-2 rounded-sm bg-warning/10">
<svg
class="fill-warning"
xmlns="http://www.w3.org/2000/svg"
enable-background="new 0 0 24 24"
viewBox="0 0 24 24"
id="shopping-bag"
>
<path
class="fill-warning"
fill="#4B5563"
d="M19.5,7H16V5.9169922c0-2.2091064-1.7908325-4-4-4s-4,1.7908936-4,4V7H4.5C4.4998169,7,4.4996338,7,4.4993896,7C4.2234497,7.0001831,3.9998169,7.223999,4,7.5V19c0.0018311,1.6561279,1.3438721,2.9981689,3,3h10c1.6561279-0.0018311,2.9981689-1.3438721,3-3V7.5c0-0.0001831,0-0.0003662,0-0.0006104C19.9998169,7.2234497,19.776001,6.9998169,19.5,7z M9,5.9169922c0-1.6568604,1.3431396-3,3-3s3,1.3431396,3,3V7H9V5.9169922z M19,19c-0.0014038,1.1040039-0.8959961,1.9985962-2,2H7c-1.1040039-0.0014038-1.9985962-0.8959961-2-2V8h3v2.5C8,10.776123,8.223877,11,8.5,11S9,10.776123,9,10.5V8h6v2.5c0,0.0001831,0,0.0003662,0,0.0005493C15.0001831,10.7765503,15.223999,11.0001831,15.5,11c0.0001831,0,0.0003662,0,0.0006104,0C15.7765503,10.9998169,16.0001831,10.776001,16,10.5V8h3V19z"
></path>
</svg>
</div>
<h6
class="text-lg font-medium text-gray-800 mb-2 dark:text-white my-auto"
>
Total Products
</h6>
</div>
<span
class="badge bg-warning/10 text-warning py-1 ltr:ml-auto rtl:mr-auto !my-auto"
><i class="ti ti-trending-down"></i> 1.8%</span
>
</div>
<div class="mt-2">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white">
$4,262
</h2>
<p class="text-xs text-gray-400">in last week</p>
</div>
</div>
</div>
</div>
<div class="col-span-12 md:col-span-6 xxl:col-span-3">
<div class="box overflow-hidden">
<div class="box-body">
<div class="flex">
<div class="flex space-x-3 rtl:space-x-reverse">
<div class="avatar p-2 rounded-sm bg-success/10">
<svg
class="fill-success"
xmlns="http://www.w3.org/2000/svg"
enable-background="new 0 0 24 24"
viewBox="0 0 24 24"
>
<path
class="fill-success"
d="M10.75,8H12h0.0006104H15.5C15.776123,8,16,7.776123,16,7.5S15.776123,7,15.5,7h-3V5.5C12.5,5.223877,12.276123,5,12,5s-0.5,0.223877-0.5,0.5V7h-0.75C9.2312012,7,8,8.2312012,8,9.75s1.2312012,2.75,2.75,2.75h2.5c0.9664917,0,1.75,0.7835083,1.75,1.75S14.2164917,16,13.25,16H8.5C8.223877,16,8,16.223877,8,16.5S8.223877,17,8.5,17h3v1.5c0,0.0001831,0,0.0003662,0,0.0005493C11.5001831,18.7765503,11.723999,19.0001831,12,19c0.0001831,0,0.0003662,0,0.0006104,0c0.2759399-0.0001831,0.4995728-0.223999,0.4993896-0.5V17h0.75c1.5187988,0,2.75-1.2312012,2.75-2.75s-1.2312012-2.75-2.75-2.75h-2.5C9.7835083,11.5,9,10.7164917,9,9.75S9.7835083,8,10.75,8z M12,1C5.9248657,1,1,5.9248657,1,12s4.9248657,11,11,11c6.0722656-0.0068359,10.9931641-4.9277344,11-11C23,5.9248657,18.0751343,1,12,1z M12,22C6.4771729,22,2,17.5228271,2,12S6.4771729,2,12,2c5.5201416,0.0064697,9.9935303,4.4798584,10,10C22,17.5228271,17.5228271,22,12,22z"
></path>
</svg>
</div>
<h6
class="text-lg font-medium text-gray-800 mb-2 dark:text-white my-auto"
>
Total Expenses
</h6>
</div>
<span
class="badge bg-success/10 text-success py-1 ltr:ml-auto rtl:mr-auto !my-auto"
><i class="ti ti-trending-up"></i> 1.2%</span
>
</div>
<div class="mt-2">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white">
$35,262
</h2>
<p class="text-xs text-gray-400">in last week</p>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-12 gap-x-5">
<div class="col-span-12 lg:col-span-12 xxl:col-span-6">
<div class="box">
<div class="box-header">
<div class="flex">
<h5 class="box-title my-auto">Sales Over View</h5>
<div
class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
>
<button
type="button"
aria-label="button"
class="hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-2 bg-white !border border-gray-200 text-gray-500 hover:bg-gray-100 focus:ring-gray-200 dark:bg-black/20 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10"
>
<i class="text-sm leading-none ti ti-dots-vertical"></i>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu">
<a class="ti-dropdown-item" href="javascript:void(0)">Download</a>
<a class="ti-dropdown-item" href="javascript:void(0)">Import</a>
<a class="ti-dropdown-item" href="javascript:void(0)">Export</a>
</div>
</div>
</div>
</div>
<div class="box-body">
<ul class="sm:flex flex-wrap sm:space-x-6 sm:rtl:space-x-reverse">
<li>
<p class="inline-flex items-center">
<span
class="block w-3 h-3 rounded-full ltr:mr-2 rtl:ml-2 border-4 border-primary pointer-events-none"
></span>
<span class="flex items-center">
<span
class="text-2xl text-gray-800 dark:text-white font-semibold ltr:mr-2 rtl:ml-2 pointer-events-none"
>$9.65K</span
>
<span class="text-sm text-gray-400 dark:text-white/80"
>/ Income</span
>
</span>
</p>
</li>
<li>
<p class="inline-flex items-center">
<span
class="block w-3 h-3 rounded-full ltr:mr-2 rtl:ml-2 border-4 border-gray-200 pointer-events-none"
></span>
<span class="flex items-center">
<span
class="text-2xl text-gray-800 dark:text-white font-semibold ltr:mr-2 rtl:ml-2 pointer-events-none"
>$3.75K</span
>
<span class="text-sm text-gray-400 dark:text-white/80"
>/ Expenses</span
>
</span>
</p>
</li>
</ul>
<div id="salesOverview">
<apx-chart
[series]="chartOptions1.series"
[chart]="chartOptions1.chart"
[xaxis]="chartOptions1.xaxis"
[stroke]="chartOptions1.stroke"
[tooltip]="chartOptions1.tooltip"
[dataLabels]="chartOptions1.dataLabels"
[legend]="chartOptions1.legend"
[markers]="chartOptions1.markers"
[grid]="chartOptions1.grid"
[yaxis]="chartOptions1.yaxis"
[plotOptions]="chartOptions1.plotOptions"
></apx-chart>
</div>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-6 xxl:col-span-3">
<div class="box">
<div class="box-header">
<div class="flex">
<h5 class="box-title my-auto">Top Customers</h5>
<div
class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
>
<button
type="button"
aria-label="button"
class="hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-2 bg-white !border border-gray-200 text-gray-500 hover:bg-gray-100 focus:ring-gray-200 dark:bg-black/20 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10"
>
<i class="text-sm leading-none ti ti-dots-vertical"></i>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu">
<a class="ti-dropdown-item" href="javascript:void(0)">Download</a>
<a class="ti-dropdown-item" href="javascript:void(0)">Import</a>
<a class="ti-dropdown-item" href="javascript:void(0)">Export</a>
</div>
</div>
</div>
</div>
<div class="box-body">
<ul class="flex flex-col">
<li
class="px-0 pt-0 ti-list-group border-0 text-gray-800 dark:text-white"
>
<a
href="javascript:void(0);"
class="flex justify-between items-center w-full"
>
<div class="flex space-x-3 rtl:space-x-reverse w-full">
<img
class="avatar avatar-sm rounded-sm"
src="./assets/img/users/2.jpg"
alt="Image Description"
/>
<div class="flex w-full">
<div class="block my-auto">
<p
class="block text-sm font-semibold text-gray-800 hover:text-gray-900 my-auto dark:text-white dark:hover:text-gray-200"
>
Socrates Itumay
</p>
<p
class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal"
>
15 Purchases
</p>
</div>
</div>
</div>
<div class="">
<span class="text-sm font-medium">$1,835</span>
</div>
</a>
</li>
<li
class="px-0 pt-3 ti-list-group border-0 text-gray-800 dark:text-white"
>
<a
href="javascript:void(0);"
class="flex justify-between items-center w-full"
>
<div class="flex space-x-3 rtl:space-x-reverse w-full">
<img
class="avatar avatar-sm rounded-sm"
src="./assets/img/users/3.jpg"
alt="Image Description"
/>
<div class="flex w-full">
<div class="block my-auto">
<p
class="block text-sm font-semibold text-gray-800 hover:text-gray-900 my-auto dark:text-white dark:hover:text-gray-200"
>
Json Taylor
</p>
<p
class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal"
>
18 Purchases
</p>
</div>
</div>
</div>
<div class="">
<span class="text-sm font-medium">$2,415</span>
</div>
</a>
</li>
<li
class="px-0 pt-3 ti-list-group border-0 text-gray-800 dark:text-white"
>
<a
href="javascript:void(0);"
class="flex justify-between items-center w-full"
>
<div class="flex space-x-3 rtl:space-x-reverse w-full">
<img
class="avatar avatar-sm rounded-sm"
src="./assets/img/users/4.jpg"
alt="Image Description"
/>
<div class="flex w-full">
<div class="block my-auto">
<p
class="block text-sm font-semibold text-gray-800 hover:text-gray-900 my-auto dark:text-white dark:hover:text-gray-200"
>
Suzika Stallone
</p>
<p
class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal"
>
21 Purchases
</p>
</div>
</div>
</div>
<div class="">
<span class="text-sm font-medium">$2,341</span>
</div>
</a>
</li>
<li
class="px-0 pt-3 ti-list-group border-0 text-gray-800 dark:text-white"
>
<a
href="javascript:void(0);"
class="flex justify-between items-center w-full"
>
<div class="flex space-x-3 rtl:space-x-reverse w-full">
<img
class="avatar avatar-sm rounded-sm"
src="./assets/img/users/5.jpg"
alt="Image Description"
/>
<div class="flex w-full">
<div class="block my-auto">
<p
class="block text-sm font-semibold text-gray-800 hover:text-gray-900 my-auto dark:text-white dark:hover:text-gray-200"
>
Angelina Hose
</p>
<p
class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal"
>
24 Purchases
</p>
</div>
</div>
</div>
<div class=""><span class="text-sm font-medium">2,624</span></div>
</a>
</li>
<li
class="px-0 pt-3 ti-list-group border-0 text-gray-800 dark:text-white"
>
<a
href="javascript:void(0);"
class="flex justify-between items-center w-full"
>
<div class="flex space-x-3 rtl:space-x-reverse w-full">
<img
class="avatar avatar-sm rounded-sm"
src="./assets/img/users/6.jpg"
alt="Image Description"
/>
<div class="flex w-full">
<div class="block my-auto">
<p
class="block text-sm font-semibold text-gray-800 hover:text-gray-900 my-auto dark:text-white dark:hover:text-gray-200"
>
Selena Deoyl
</p>
<p
class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal"
>
12 Purchases
</p>
</div>
</div>
</div>
<div class="">
<span class="text-sm font-medium">$1,035</span>
</div>
</a>
</li>
<li
class="px-0 pt-3 pb-0 ti-list-group border-0 text-gray-800 dark:text-white"
>
<a
href="javascript:void(0);"
class="flex justify-between items-center w-full"
>
<div class="flex space-x-3 rtl:space-x-reverse w-full">
<img
class="avatar avatar-sm rounded-sm"
src="./assets/img/users/10.jpg"
alt="Image Description"
/>
<div class="flex w-full">
<div class="block my-auto">
<p
class="block text-sm font-semibold text-gray-800 hover:text-gray-900 my-auto dark:text-white dark:hover:text-gray-200"
>
Charlie Davieson
</p>
<p
class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal"
>
15 Purchases
</p>
</div>
</div>
</div>
<div class="">
<span class="text-sm font-medium">$1,835</span>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-6 xxl:col-span-3">
<div class="box">
<div class="box-header">
<div class="flex">
<h5 class="box-title my-auto">Sale Value</h5>
<div
class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
>
<button
type="button"
aria-label="button"
class="hs-dropdown-toggle ti-dropdown-toggle rounded-md p-2 bg-white !border border-gray-200 text-gray-500 hover:bg-gray-100 focus:ring-gray-200 dark:bg-black/20 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10"
>
<i class="text-sm leading-none ti ti-dots-vertical"></i>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu">
<a class="ti-dropdown-item" href="javascript:void(0)">Download</a>
<a class="ti-dropdown-item" href="javascript:void(0)">Import</a>
<a class="ti-dropdown-item" href="javascript:void(0)">Export</a>
</div>
</div>
</div>
</div>
<div class="box-body pb-0 px-0">
<div
class="sales-value relative border-b border-gray-200 dark:border-white/10 pb-6"
>
<apx-chart
[series]="optionsCircle1.series"
[chart]="optionsCircle1.chart"
[xaxis]="optionsCircle1.xaxis"
[colors]="optionsCircle1.colors"
[labels]="optionsCircle1.labels"
[legend]="optionsCircle1.legend"
[stroke]="optionsCircle1.stroke"
[tooltip]="optionsCircle1.tooltip"
[plotOptions]="optionsCircle1.plotOptions"
[dataLabels]="optionsCircle1.dataLabels"
></apx-chart>
<div
class="chart-circle-value circle-style absolute border-2 border-dashed border-primary inset-0 flex justify-center items-center sales-values leading-[70px] rounded-full text-5xl mx-auto my-auto"
>
<div class="text-xl font-bold">75%</div>
</div>
</div>
<div class="grid grid-cols-2">
<div
class="p-5 ltr:border-r rtl:border-l border-gray-200 dark:border-white/10"
>
<div
class="text-sm text-gray-500 dark:text-white/80 text-center font-medium"
>
Sale Items
</div>
<div class="text-center">
<p class="text-gray-800 dark:text-white text-2xl font-semibold">
567
</p>
<span class="text-success font-semibold"
><i class="ri-arrow-up-s-fill align-middle"></i>0.23%</span
>
</div>
</div>
<div class="p-5">
<div
class="text-sm text-gray-500 dark:text-white/80 text-center font-medium"
>
Sale Revenue
</div>
<div class="text-center">
<p class="text-gray-800 dark:text-white text-2xl font-semibold">
$11,197
</p>
<span class="text-danger font-semibold">
<i class="ri-arrow-down-s-fill align-middle"></i>0.15%
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End::row-1 -->
<!-- Start::row-2 -->
<div class="grid grid-cols-12 gap-x-5">
<div class="col-span-12 lg:col-span-6 xxl:col-span-3">
<div class="box">
<div class="box-header">
<div class="flex">
<h5 class="box-title my-auto">Upcoming Products</h5>
<div
class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
>
<button
type="button"
aria-label="button"
class="hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-2 bg-white !border border-gray-200 text-gray-500 hover:bg-gray-100 focus:ring-gray-200 dark:bg-black/20 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10"
>
<i class="text-sm leading-none ti ti-dots-vertical"></i>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu">
<a class="ti-dropdown-item" href="javascript:void(0)">Download</a>
<a class="ti-dropdown-item" href="javascript:void(0)">Import</a>
<a class="ti-dropdown-item" href="javascript:void(0)">Export</a>
</div>
</div>
</div>
</div>
<div class="box-body">
<ul class="flex flex-col">
<li
class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white"
>
<a href="javascript:void(0);" class="w-full">
<div class="flex items-center">
<div class="leading-none">
<img
class="avatar avatar-sm rounded-full"
src="./assets/img/ecommerce/jpg/1.jpg"
alt="image"
/>
</div>
<div class="flex-auto ltr:ml-2 rtl:mr-2">
<p class="text-sm font-semibold mb-0">Smart Phone</p>
<p
class="text-xs text-gray-400 dark:text-white/80 mb-0 !font-normal"
>
Mobiles
</p>
</div>
<div class="block text-end">
<span class="text-sm text-success font-semibold"
>$199.99</span
>
<p
class="text-xs text-gray-400 dark:text-white/80 !font-normal"
>
<i class="ti ti-clock-hour-2 ltr:mr-1 rtl:mr-1"></i>01 Apr,
2023
</p>
</div>
</div>
</a>
</li>
<li
class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white"
>
<a href="javascript:void(0);" class="w-full">
<div class="flex items-center">
<div class="leading-none">
<img
class="avatar avatar-sm rounded-full"
src="./assets/img/ecommerce/jpg/2.jpg"
alt="image"
/>
</div>
<div class="flex-auto ltr:ml-2 rtl:mr-2">
<p class="text-sm font-semibold mb-0">Headphones</p>
<p
class="text-xs text-gray-400 dark:text-white/80 mb-0 !font-normal"
>
Music
</p>
</div>
<div class="block text-end">
<span class="text-sm text-success font-semibold">$79.49</span>
<p
class="text-xs text-gray-400 dark:text-white/80 !font-normal"
>
<i class="ti ti-clock-hour-2 ltr:mr-1 rtl:mr-1"></i>01 Apr,
2023
</p>
</div>
</div>
</a>
</li>
<li
class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white"
>
<a href="javascript:void(0);" class="w-full">
<div class="flex items-center">
<div class="leading-none">
<img
class="avatar avatar-sm rounded-full"
src="./assets/img/ecommerce/jpg/3.jpg"
alt="image"
/>
</div>
<div class="flex-auto ltr:ml-2 rtl:mr-2">
<p class="text-sm font-semibold mb-0">Stop Watch</p>
<p
class="text-xs text-gray-400 dark:text-white/80 mb-0 !font-normal"
>
Electronics
</p>
</div>
<div class="block text-end">
<span class="text-sm text-success font-semibold">$49.29</span>
<p
class="text-xs text-gray-400 dark:text-white/80 !font-normal"
>
<i class="ti ti-clock-hour-2 ltr:mr-1 rtl:mr-1"></i>01 Apr,
2023
</p>
</div>
</div>
</a>
</li>
<li
class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white"
>
<a href="javascript:void(0);" class="w-full">
<div class="flex items-center">
<div class="leading-none">
<img
class="avatar avatar-sm rounded-full"
src="./assets/img/ecommerce/jpg/4.jpg"
alt="image"
/>
</div>
<div class="flex-auto ltr:ml-2 rtl:mr-2">
<p class="text-sm font-semibold mb-0">Kikon Camera</p>
<p
class="text-xs text-gray-400 dark:text-white/80 mb-0 !font-normal"
>
Electronics
</p>
</div>
<div class="block text-end">
<span class="text-sm text-success font-semibold"
>$1,699.00</span
>
<p
class="text-xs text-gray-400 dark:text-white/80 !font-normal"
>
<i class="ti ti-clock-hour-2 ltr:mr-1 rtl:mr-1"></i>01 Apr,
2023
</p>
</div>
</div>
</a>
</li>
<li
class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white"
>
<a href="javascript:void(0);" class="w-full">
<div class="flex items-center">
<div class="leading-none">
<img
class="avatar avatar-sm rounded-full"
src="./assets/img/ecommerce/jpg/6.jpg"
alt="image"
/>
</div>
<div class="flex-auto ltr:ml-2 rtl:mr-2">
<p class="text-sm font-semibold mb-0">Kids shoes</p>
<p
class="text-xs text-gray-400 dark:text-white/80 mb-0 !font-normal"
>
Clothing
</p>
</div>
<div class="block text-end">
<span class="text-sm text-success font-semibold"
>$149.00</span
>
<p
class="text-xs text-gray-400 dark:text-white/80 !font-normal"
>
<i class="ti ti-clock-hour-2 ltr:mr-1 rtl:mr-1"></i>01 Apr,
2023
</p>
</div>
</div>
</a>
</li>
<li
class="p-0 mb-0 ti-list-group border-0 text-gray-800 dark:text-white"
>
<a href="javascript:void(0);" class="w-full">
<div class="flex items-center">
<div class="leading-none">
<img
class="avatar avatar-sm rounded-full"
src="./assets/img/ecommerce/jpg/5.jpg"
alt="image"
/>
</div>
<div class="flex-auto ltr:ml-2 rtl:mr-2">
<p class="text-sm font-semibold mb-0">Photo Frame</p>
<p
class="text-xs text-gray-400 dark:text-white/80 mb-0 !font-normal"
>
Furniture
</p>
</div>
<div class="block text-end">
<span class="text-sm text-success font-semibold">$29.99</span>
<p
class="text-xs text-gray-400 dark:text-white/80 !font-normal"
>
<i class="ti ti-clock-hour-2 ltr:mr-1 rtl:mr-1"></i>01 Apr,
2023
</p>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-6 xxl:col-span-4">
<div class="box">
<div class="box-header">
<div class="flex">
<h5 class="box-title my-auto">Social Visitors</h5>
<div
class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
>
<button
type="button"
class="hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-1 px-3 !border border-gray-200 text-gray-400 hover:text-gray-500 hover:bg-gray-200 hover:border-gray-200 focus:ring-gray-200 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10"
>
This Week <i class="ti ti-chevron-down"></i>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu">
<a class="ti-dropdown-item" href="javascript:void(0)"
>This Week</a
>
<a class="ti-dropdown-item" href="javascript:void(0)"
>This Month</a
>
<a class="ti-dropdown-item" href="javascript:void(0)"
>This Year</a
>
</div>
</div>
</div>
</div>
<div class="box-body p-2">
<div id="visitors">
<apx-chart
[series]="chartOptions2.series"
[chart]="chartOptions2.chart"
[dataLabels]="chartOptions2.dataLabels"
[plotOptions]="chartOptions2.plotOptions"
[xaxis]="chartOptions2.xaxis"
></apx-chart>
</div>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-12 xxl:col-span-5">
<div class="box">
<div class="box-header flex">
<h5 class="box-title my-auto">Top Selling Products</h5>
<div
class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
>
<button
type="button"
aria-label="button"
class="hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-2 bg-white !border border-gray-200 text-gray-500 hover:bg-gray-100 focus:ring-gray-200 dark:bg-black/20 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10"
>
<i class="text-sm leading-none ti ti-dots-vertical"></i>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu">
<a class="ti-dropdown-item" href="javascript:void(0)">Action</a>
<a class="ti-dropdown-item" href="javascript:void(0)"
>Another Action</a
>
<a class="ti-dropdown-item" href="javascript:void(0)"
>Something else here</a
>
</div>
</div>
</div>
<div class="box-body p-0">
<div class="overflow-auto">
<table class="ti-custom-table ti-custom-table-head">
<thead>
<tr>
<th scope="col" class="text-center !p-[0.65rem]">Product</th>
<th scope="col" class="!p-[0.65rem]">Category</th>
<th scope="col" class="!p-[0.65rem]">Stock</th>
<th scope="col" class="!p-[0.65rem]">TotalSales</th>
</tr>
</thead>
<tbody>
<tr>
<td
class="leading-none !text-gray-800 dark:!text-white !p-[0.65rem] min-w-[180px] truncate"
>
<img
src="./assets/img/ecommerce/products/13.png"
class="avatar avatar-sm p-2 rounded-full bg-gray-100 dark:bg-black/20 ltr:mr-2 rtl:ml-2"
alt="Image Description"
/>Ethnic School bag for children (24L)
</td>
<td class="!p-[0.65rem]">Bags</td>
<td class="!p-[0.65rem] text-sm">
<span
class="badge leading-none bg-success/10 text-success rounded-sm"
>In Stock</span
>
</td>
<td class="!p-[0.65rem]">
<span class="text-sm font-semibold">5,093</span>
</td>
</tr>
<tr>
<td
class="leading-none !text-gray-800 dark:!text-white !p-[0.65rem] min-w-[180px] truncate"
>
<img
src="./assets/img/ecommerce/products/14.png"
class="avatar avatar-sm p-2 rounded-full bg-gray-100 dark:bg-black/20 ltr:mr-2 rtl:ml-2"
alt="Image Description"
/>Leather jacket for men (S,M,L,XL)
</td>
<td class="!p-[0.65rem]">Clothing</td>
<td class="!p-[0.65rem] text-sm">
<span
class="badge leading-none bg-success/10 text-success rounded-sm"
>In Stock</span
>
</td>
<td class="!p-[0.65rem]">
<span class="text-sm font-semibold">6,890</span>
</td>
</tr>
<tr>
<td
class="leading-none !text-gray-800 dark:!text-white !p-[0.65rem] min-w-[180px] truncate"
>
<img
src="./assets/img/ecommerce/products/15.png"
class="avatar avatar-sm p-2 rounded-full bg-gray-100 dark:bg-black/20 ltr:mr-2 rtl:ml-2"
alt="Image Description"
/>Childrens Teddy toy of high quality
</td>
<td class="!p-[0.65rem]">Toys</td>
<td class="!p-[0.65rem] text-sm">
<span
class="badge leading-none bg-danger/10 text-danger rounded-sm"
>Out Of Stock</span
>
</td>
<td class="!p-[0.65rem]">
<span class="text-sm font-semibold">5,423</span>
</td>
</tr>
<tr>
<td
class="leading-none !text-gray-800 dark:!text-white !p-[0.65rem] min-w-[180px] truncate"
>
<img
src="./assets/img/ecommerce/products/16.png"
class="avatar avatar-sm p-2 rounded-full bg-gray-100 dark:bg-black/20 ltr:mr-2 rtl:ml-2"
alt="Image Description"
/>Orange smart watch (24mm)
</td>
<td class="!p-[0.65rem]">Fashion</td>
<td class="!p-[0.65rem] text-sm">
<span
class="badge leading-none bg-danger/10 text-danger rounded-sm"
>Out Of Stock</span
>
</td>
<td class="!p-[0.65rem]">
<span class="text-sm font-semibold">10,234</span>
</td>
</tr>
<tr>
<td
class="leading-none !text-gray-800 dark:!text-white !p-[0.65rem] min-w-[180px] truncate"
>
<img
src="./assets/img/ecommerce/products/17.png"
class="avatar avatar-sm p-2 rounded-full bg-gray-100 dark:bg-black/20 ltr:mr-2 rtl:ml-2"
alt="Image Description"
/>Black Camera
</td>
<td class="!p-[0.65rem]">Electronic</td>
<td class="!p-[0.65rem] text-sm">
<span
class="badge leading-none bg-success/10 text-success rounded-sm"
>In Stock</span
>
</td>
<td class="!p-[0.65rem]">
<span class="text-sm font-semibold">10,234</span>
</td>
</tr>
<tr>
<td
class="leading-none !text-gray-800 dark:!text-white !p-[0.65rem] min-w-[180px] truncate"
>
<img
src="./assets/img/ecommerce/products/18.png"
class="avatar avatar-sm p-2 rounded-full bg-gray-100 dark:bg-black/20 ltr:mr-2 rtl:ml-2"
alt="Image Description"
/>Hand Bag For Ladies
</td>
<td class="!p-[0.65rem]">Fashion</td>
<td class="!p-[0.65rem] text-sm">
<span
class="badge leading-none bg-danger/10 text-danger rounded-sm"
>Out Of Stock</span
>
</td>
<td class="!p-[0.65rem]">
<span class="text-sm font-semibold">1,034</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- End::row-2 -->
<!-- Start::row-3 -->
<div class="grid grid-cols-12 gap-x-6">
<div class="col-span-12">
<div class="box">
<div class="box-header">
<div class="flex">
<h5 class="box-title my-auto">Recent Order Details</h5>
<div
class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
>
<button
type="button"
class="hs-dropdown-toggle ti-dropdown-toggle rounded-md p-1 px-3 !border border-gray-200 text-gray-400 hover:text-gray-500 hover:bg-gray-200 hover:border-gray-200 focus:ring-gray-200 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10"
>
View All <i class="ti ti-chevron-down"></i>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu">
<a class="ti-dropdown-item" href="javascript:void(0)">Download</a>
<a class="ti-dropdown-item" href="javascript:void(0)">Import</a>
<a class="ti-dropdown-item" href="javascript:void(0)">Export</a>
</div>
</div>
</div>
</div>
<div class="box-body">
<div
class="table-bordered rounded-sm ti-custom-table-head overflow-auto"
>
<table class="ti-custom-table ti-custom-table-head whitespace-nowrap">
<thead class="bg-gray-50 dark:bg-black/20">
<tr class="">
<th scope="col" class="dark:text-white/80">S.no</th>
<th scope="col" class="dark:text-white/80">Item Details</th>
<th scope="col" class="dark:text-white/80">Customer ID</th>
<th scope="col" class="dark:text-white/80 min-w-[300px]">
Customer Details
</th>
<th scope="col" class="dark:text-white/80">Ordered Date</th>
<th scope="col" class="dark:text-white/80">Status</th>
<th scope="col" class="dark:text-white/80">Price</th>
<th scope="col" class="dark:text-white/80">Action</th>
</tr>
</thead>
<tbody class="">
<tr class="" *ngFor="let item of Itemdata">
<td>{{ item.id }}</td>
<td>
<div class="flex space-x-3 rtl:space-x-reverse w-full">
<img
class="avatar rounded-md bg-gray-100 dark:bg-black/20 p-2"
src="{{ item.productsrc }}"
alt="Image Description"
/>
<div class="block w-full my-auto">
<span
class="block text-sm font-semibold text-gray-800 dark:text-gray-300 min-w-[180px] truncate"
>{{ item.product }}
</span>
<span
class="block text-xs text-gray-400 dark:text-white/80 !font-normal"
>{{ item.userid }}</span
>
</div>
</div>
</td>
<td class="!text-success font-semibold text-base">
{{ item.user }}
</td>
<td>
<div class="flex space-x-3 rtl:space-x-reverse text-start">
<img
class="avatar avatar-sm rounded-md"
src="{{ item.src }}"
alt="Image Description"
/>
<div class="block my-auto">
<p
class="block text-sm font-semibold my-auto text-gray-800 dark:text-white"
>
{{ item.name }}
</p>
<span
class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto"
>{{ item.mail }}</span
>
</div>
</div>
</td>
<td>{{ item.date }}</td>
<td>
<span
class="truncate whitespace-nowrap inline-block py-1 px-3 rounded-full text-xs font-medium bg-{{item.bg}}/10 text-{{item.bg}}/80"
>{{ item.status}}</span
>
</td>
<td>{{ item.price }}</td>
<td class="font-medium space-x-2 rtl:space-x-reverse">
<div class="hs-tooltip ti-main-tooltip">
<a
href="javascript:void(0);"
class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-primary"
>
<i class="ti ti-eye"></i>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700"
role="tooltip"
>
View
</span>
</a>
</div>
<div class="hs-tooltip ti-main-tooltip">
<a
href="javascript:void(0);"
class="customer-edit m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-secondary"
>
<i class="ti ti-pencil"></i>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700"
role="tooltip"
>
Edit
</span>
</a>
</div>
<div class="hs-tooltip ti-main-tooltip">
<a
href="javascript:void(0);"
class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-danger"
(click)="click(item.id)"
>
<i class="ti ti-trash"></i>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700"
role="tooltip"
>
Delete
</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- End::row-3 -->