<app-page-header title="CRM Dashboard" title1="CRM Dashboard" activeitem="Home"></app-page-header>
<!-- Start::row-1 -->
<div class="grid grid-cols-12 gap-x-5">
<div class="col-span-12 xxl:col-span-9">
<div class="grid grid-cols-12 gap-x-5">
<div class="col-span-12 xl:col-span-4">
<div class="box">
<div class="box-body space-y-4">
<div
class="flex space-x-4 rtl:space-x-reverse justify-between items-center"
>
<div>
<p class="text-gray-500 dark:text-white/70 text-base mb-2">
Total Customers
</p>
<div class="flex items-center">
<h5
class="text-gray-800 dark:text-white text-2xl font-semibold"
>
1,1125
</h5>
<span class="text-success text-sm ltr:ml-2 rtl:mr-2"
><i class="ti ti-arrow-up-right"></i>+12.86%</span
>
</div>
</div>
<div>
<span class="avatar rounded-sm bg-primary/20 p-3 text-primary">
<i class="ti ti-users text-xl leading-none"></i>
</span>
</div>
</div>
<div class="flex items-center">
<div class="ti-main-progress h-2 bg-gray-200 dark:bg-black/20">
<div
class="ti-main-progress-bar bg-primary text-xs text-white text-center"
role="progressbar"
style="width: 50%"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<span class="font-semibold text-sm ltr:ml-2 rtl:mr-2">50%</span>
</div>
</div>
</div>
</div>
<div class="col-span-12 xl:col-span-4">
<div class="box">
<div class="box-body space-y-4">
<div
class="flex space-x-4 rtl:space-x-reverse justify-between items-center"
>
<div>
<p class="text-gray-500 dark:text-white/70 text-base mb-2">
Total Deals
</p>
<div class="flex items-center">
<h5
class="text-gray-800 dark:text-white text-2xl font-semibold"
>
968
</h5>
<span class="text-success text-sm ltr:ml-2 rtl:mr-2"
><i class="ti ti-arrow-up-right"></i>+5.46%</span
>
</div>
</div>
<div>
<span
class="avatar rounded-sm bg-secondary/20 p-3 text-secondary"
>
<i class="ti ti-briefcase text-xl leading-none"></i>
</span>
</div>
</div>
<div class="flex items-center">
<div class="ti-main-progress h-2 bg-gray-200 dark:bg-black/20">
<div
class="ti-main-progress-bar bg-secondary text-xs text-white text-center"
role="progressbar"
style="width: 80%"
aria-valuenow="80"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<span class="font-semibold text-sm ltr:ml-2 rtl:mr-2">80%</span>
</div>
</div>
</div>
</div>
<div class="col-span-12 xl:col-span-4">
<div class="box">
<div class="box-body space-y-4">
<div
class="flex space-x-4 rtl:space-x-reverse justify-between items-center"
>
<div>
<p class="text-gray-500 dark:text-white/70 text-base mb-2">
Conversion Ratio
</p>
<div class="flex items-center">
<h5
class="text-gray-800 dark:text-white text-2xl font-semibold"
>
12.08%
</h5>
<span class="text-success text-sm ltr:ml-2 rtl:mr-2"
><i class="ti ti-arrow-up-right"></i>+3.20%</span
>
</div>
</div>
<div>
<span class="avatar rounded-sm bg-info/20 p-3 text-info">
<i class="ti ti-wave-square text-xl leading-none"></i>
</span>
</div>
</div>
<div class="flex items-center">
<div class="ti-main-progress h-2 bg-gray-200 dark:bg-black/20">
<div
class="ti-main-progress-bar bg-info text-xs text-white text-center"
role="progressbar"
style="width: 65%"
aria-valuenow="65"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<span class="font-semibold text-sm ltr:ml-2 rtl:mr-2">65%</span>
</div>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-12 xl:col-span-5">
<div class="box">
<div class="box-header">
<div class="flex">
<h5 class="box-title my-auto">Top Deals</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"
>
socratesitumay@gmail.com
</p>
</div>
</div>
</div>
<div class="">
<span class="text-sm font-bold">$1,835</span>
</div>
</a>
</li>
<li
class="px-0 pt-2 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"
>
jsontaylor2416@gmail.com
</p>
</div>
</div>
</div>
<div class="">
<span class="text-sm font-bold">$2,415</span>
</div>
</a>
</li>
<li
class="px-0 pt-2 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"
>
suzikastallone3214@gmail.com
</p>
</div>
</div>
</div>
<div class="">
<span class="text-sm font-bold">$2,341</span>
</div>
</a>
</li>
<li
class="px-0 pt-2 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"
>
AngelinaHose3214@gmail.com
</p>
</div>
</div>
</div>
<div class="">
<span class="text-sm font-bold">2,624</span>
</div>
</a>
</li>
<li
class="px-0 pt-2 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"
>
selenadeoyl114@gmail.com
</p>
</div>
</div>
</div>
<div class="">
<span class="text-sm font-bold">$1,035</span>
</div>
</a>
</li>
<li
class="px-0 pt-2 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"
>
charliedavieson@gmail.com
</p>
</div>
</div>
</div>
<div class="">
<span class="text-sm font-bold">$1,835</span>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-12 xl:col-span-7">
<div class="box">
<div class="box-header">
<div class="flex">
<h5 class="box-title my-auto">Revenue</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 Year <i class="ti ti-chevron-down"></i>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu hidden">
<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">
<ul class="flex flex-wrap space-x-6 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-bold ltr:mr-2 rtl:ml-2 pointer-events-none"
>$12.36K</span
>
<span class="text-sm text-gray-400 dark:text-white/80"
>/ Current Period</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-bold ltr:mr-2 rtl:ml-2 pointer-events-none"
>$8.25K</span
>
<span class="text-sm text-gray-400 dark:text-white/80"
>/ Previous Period</span
>
</span>
</p>
</li>
</ul>
<div id="revenue">
<apx-chart
[series]="chartOptions.series"
[chart]="chartOptions.chart"
[yaxis]="chartOptions.yaxis"
[xaxis]="chartOptions.xaxis"
[labels]="chartOptions.labels"
[stroke]="chartOptions.stroke"
[title]="chartOptions.title"
[dataLabels]="chartOptions.dataLabels"
[fill]="chartOptions.fill"
[tooltip]="chartOptions.tooltip"
[legend]="chartOptions.legend"
[plotOptions]="chartOptions.plotOptions"
></apx-chart>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-span-12 xxl:col-span-3">
<div class="box">
<div class="box-header flex justify-between">
<div class="box-title my-auto">Recent Activities</div>
<div class="block ltr:ml-auto rtl:mr-auto my-auto">
<button
type="button"
class="ti-btn m-0 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"
>
View All
</button>
</div>
</div>
<div class="box-body">
<ul class="list-unstyled mb-0 crm-recent-activity">
<li class="crm-recent-activity-content">
<div class="flex items-top">
<div class="ltr:mr-3 rtl:ml-3">
<span
class="avatar w-5 h-5 text-primary rounded-full inline-flex"
>
<i
class="ri-checkbox-blank-circle-fill leading-none text-xs opacity-50 mx-auto my-auto"
></i>
</span>
</div>
<div class="crm-timeline-content">
<span class="font-semibold"
>Update of calendar events &</span
><span
><a
href="javascript:void(0);"
class="text-primary font-semibold"
>
Added new events in next week.</a
></span
>
</div>
<div class="flex-auto text-end">
<span
class="block text-gray-500 dark:text-white/70 text-xs opacity-70"
>4:45PM</span
>
</div>
</div>
</li>
<li class="crm-recent-activity-content">
<div class="flex items-top">
<div class="ltr:mr-3 rtl:ml-3">
<span
class="avatar w-5 h-5 text-secondary rounded-full inline-flex"
>
<i
class="ri-checkbox-blank-circle-fill leading-none text-xs opacity-50 mx-auto my-auto"
></i>
</span>
</div>
<div class="crm-timeline-content">
<span
>New theme for
<span class="font-semibold">Spruko Website</span>
completed</span
>
<span class="block fs-12 text-muted"
>Lorem ipsum, dolor sit amet.</span
>
</div>
<div class="flex-auto text-end">
<span
class="block text-gray-500 dark:text-white/70 text-xs opacity-70"
>3 hrs</span
>
</div>
</div>
</li>
<li class="crm-recent-activity-content">
<div class="flex items-top">
<div class="ltr:mr-3 rtl:ml-3">
<span
class="avatar w-5 h-5 text-success rounded-full inline-flex"
>
<i
class="ri-checkbox-blank-circle-fill leading-none text-xs opacity-50 mx-auto my-auto"
></i>
</span>
</div>
<div class="crm-timeline-content">
<span
>Created a
<span class="text-success font-semibold">New Task</span> today
<span
class="avatar w-5 h-5 bg-purple-transparent rounded-full inline-flex ms-1"
><i class="ri-add-fill text-purple fs-12"></i></span
></span>
</div>
<div class="flex-auto text-end">
<span
class="block text-gray-500 dark:text-white/70 text-xs opacity-70"
>22 hrs</span
>
</div>
</div>
</li>
<li class="crm-recent-activity-content">
<div class="flex items-top">
<div class="ltr:mr-3 rtl:ml-3">
<span
class="avatar w-5 h-5 text-danger rounded-full inline-flex"
>
<i
class="ri-checkbox-blank-circle-fill leading-none text-xs opacity-50 mx-auto my-auto"
></i>
</span>
</div>
<div class="crm-timeline-content">
<span
>New member
<span class="badge bg-primary/20 text-primary p-1 rounded-sm"
>@andreas gurrero</span
>
added today to AI Summit.</span
>
</div>
<div class="flex-auto text-end">
<span
class="block text-gray-500 dark:text-white/70 text-xs opacity-70"
>Today</span
>
</div>
</div>
</li>
<li class="crm-recent-activity-content">
<div class="flex items-top">
<div class="ltr:mr-3 rtl:ml-3">
<span
class="avatar w-5 h-5 text-warning rounded-full inline-flex"
>
<i
class="ri-checkbox-blank-circle-fill leading-none text-xs opacity-50 mx-auto my-auto"
></i>
</span>
</div>
<div class="crm-timeline-content">
<span>32 New people joined summit.</span>
</div>
<div class="flex-auto text-end">
<span
class="block text-gray-500 dark:text-white/70 text-xs opacity-70"
>22 hrs</span
>
</div>
</div>
</li>
<li class="crm-recent-activity-content">
<div class="flex items-top">
<div class="ltr:mr-3 rtl:ml-3">
<span class="avatar w-5 h-5 text-info rounded-full inline-flex">
<i
class="ri-checkbox-blank-circle-fill leading-none text-xs opacity-50 mx-auto my-auto"
></i>
</span>
</div>
<div class="crm-timeline-content">
<span
>Neon Tarly added
<span class="text-info font-semibold">Robert Bright</span> to
AI summit project.</span
>
</div>
<div class="flex-auto text-end">
<span
class="block text-gray-500 dark:text-white/70 text-xs opacity-70"
>12 hrs</span
>
</div>
</div>
</li>
<li class="crm-recent-activity-content">
<div class="flex items-top">
<div class="ltr:mr-3 rtl:ml-3">
<span
class="avatar w-5 h-5 text-pink-500 rounded-full inline-flex"
>
<i
class="ri-checkbox-blank-circle-fill leading-none text-xs opacity-50 mx-auto my-auto"
></i>
</span>
</div>
<div class="crm-timeline-content">
<span
>Replied to new support request
<i
class="ri-checkbox-circle-line text-success fs-16 align-middle"
></i
></span>
</div>
<div class="flex-auto text-end">
<span
class="block text-gray-500 dark:text-white/70 text-xs opacity-70"
>4 hrs</span
>
</div>
</div>
</li>
<li class="crm-recent-activity-content">
<div class="flex items-top">
<div class="ltr:mr-3 rtl:ml-3">
<span
class="avatar w-5 h-5 text-primary rounded-full inline-flex"
>
<i
class="ri-checkbox-blank-circle-fill leading-none text-xs opacity-50 mx-auto my-auto"
></i>
</span>
</div>
<div class="crm-timeline-content">
<span class="font-semibold"
>Update of calendar events &</span
><span
><a
href="javascript:void(0);"
class="text-primary font-semibold"
>
Added new events in next week.</a
></span
>
</div>
<div class="flex-auto text-end">
<span
class="block text-gray-500 dark:text-white/70 text-xs opacity-70"
>4:45PM</span
>
</div>
</div>
</li>
<li class="crm-recent-activity-content">
<div class="flex items-top">
<div class="ltr:mr-3 rtl:ml-3">
<span
class="avatar w-5 h-5 text-secondary rounded-full inline-flex"
>
<i
class="ri-checkbox-blank-circle-fill leading-none text-xs opacity-50 mx-auto my-auto"
></i>
</span>
</div>
<div class="crm-timeline-content">
<span
>New theme for
<span class="font-semibold">Spruko Website</span>
completed</span
>
<span class="block fs-12 text-muted"
>Lorem ipsum, dolor sit amet.</span
>
</div>
<div class="flex-auto text-end">
<span
class="block text-gray-500 dark:text-white/70 text-xs opacity-70"
>3 hrs</span
>
</div>
</div>
</li>
<li class="crm-recent-activity-content">
<div class="flex items-top">
<div class="ltr:mr-3 rtl:ml-3">
<span
class="avatar w-5 h-5 text-success rounded-full inline-flex"
>
<i
class="ri-checkbox-blank-circle-fill leading-none text-xs opacity-50 mx-auto my-auto"
></i>
</span>
</div>
<div class="crm-timeline-content">
<span
>Created a
<span class="text-success font-semibold">New Task</span> today
<span
class="avatar w-5 h-5 bg-purple-transparent rounded-full inline-flex ms-1"
><i class="ri-add-fill text-purple fs-12"></i></span
></span>
</div>
<div class="flex-auto text-end">
<span
class="block text-gray-500 dark:text-white/70 text-xs opacity-70"
>22 hrs</span
>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- End::row-1 -->
<!-- Start::row-2 -->
<div class="grid grid-cols-12 gap-x-5">
<div class="col-span-12 md:col-span-6 xxl:col-span-4">
<div class="box">
<div class="box-header">
<div class="flex">
<h5 class="box-title my-auto">Leads By Source</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 hidden">
<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-0">
<div class="px-3">
<div id="leads">
<apx-chart
[series]="chartOptions2.series"
[chart]="chartOptions2.chart"
[dataLabels]="chartOptions2.dataLabels"
[plotOptions]="chartOptions2.plotOptions"
[xaxis]="chartOptions2.xaxis"
[grid]="chartOptions2.grid"
></apx-chart>
</div>
</div>
</div>
</div>
</div>
<div class="col-span-12 md:col-span-6 xxl:col-span-5">
<div class="box">
<div class="box-header flex">
<h5 class="box-title my-auto">Deals Overview</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">Deal</th>
<th scope="col" class="">Amount</th>
<th scope="col" class="">Probability</th>
<th scope="col" class="">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="leading-none !text-gray-800 dark:!text-white">
<div class="flex space-x-3 rtl:space-x-reverse text-start">
<img
class="avatar avatar-sm rounded-sm"
src="./assets/img/users/2.jpg"
alt="Image Description"
/>
<div class="block my-auto">
<p
class="block text-sm font-semibold my-auto text-gray-800 dark:text-white"
>
Socrates Itumay
</p>
<span
class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto"
>socratesitumay@gmail.com</span
>
</div>
</div>
</td>
<td class="">$54,900</td>
<td class="">24%</td>
<td class="text-sm">
<span
class="badge leading-none bg-primary/10 text-primary rounded-sm"
>Qualified</span
>
</td>
</tr>
<tr>
<td class="leading-none !text-gray-800 dark:!text-white">
<div class="flex space-x-3 rtl:space-x-reverse text-start">
<img
class="avatar avatar-sm rounded-sm"
src="./assets/img/users/3.jpg"
alt="Image Description"
/>
<div class="block my-auto">
<p
class="block text-sm font-semibold my-auto text-gray-800 dark:text-white"
>
Json Taylor
</p>
<span
class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto"
>jsontaylor2416@gmail.com</span
>
</div>
</div>
</td>
<td class="">$16,800</td>
<td class="">70%</td>
<td class="text-sm">
<span
class="badge leading-none bg-warning/10 text-warning rounded-sm"
>Review</span
>
</td>
</tr>
<tr>
<td class="leading-none !text-gray-800 dark:!text-white">
<div class="flex space-x-3 rtl:space-x-reverse text-start">
<img
class="avatar avatar-sm rounded-sm"
src="./assets/img/logos/1.png"
alt="Image Description"
/>
<div class="block my-auto">
<p
class="block text-sm font-semibold my-auto text-gray-800 dark:text-white"
>
Inferno Tech Et.
</p>
<span
class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto"
>InfernoTech@gmail.com</span
>
</div>
</div>
</td>
<td class="">$12,000</td>
<td class="">90%</td>
<td class="text-sm">
<span
class="badge leading-none bg-success/10 text-success rounded-sm"
>Closed Won</span
>
</td>
</tr>
<tr>
<td class="leading-none !text-gray-800 dark:!text-white">
<div class="flex space-x-3 rtl:space-x-reverse text-start">
<img
class="avatar avatar-sm rounded-sm"
src="./assets/img/users/13.jpg"
alt="Image Description"
/>
<div class="block my-auto">
<p
class="block text-sm font-semibold my-auto text-gray-800 dark:text-white"
>
Andrew Garfield
</p>
<span
class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto"
>andrewgarfield@gmail.com</span
>
</div>
</div>
</td>
<td class="">$16,800</td>
<td class="">70%</td>
<td class="text-sm">
<span
class="badge leading-none bg-danger/10 text-danger rounded-sm"
>Closed Lost</span
>
</td>
</tr>
<tr>
<td class="leading-none !text-gray-800 dark:!text-white">
<div class="flex space-x-3 rtl:space-x-reverse text-start">
<img
class="avatar avatar-sm rounded-sm"
src="./assets/img/logos/8.png"
alt="Image Description"
/>
<div class="block my-auto">
<p
class="block text-sm font-semibold my-auto text-gray-800 dark:text-white"
>
Jack Pvt.Ltd
</p>
<span
class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto"
>JackTech@gmail.com</span
>
</div>
</div>
</td>
<td class="">$12,000</td>
<td class="">90%</td>
<td class="text-sm">
<span
class="badge leading-none bg-success/10 text-success rounded-sm"
>Closed Won</span
>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-span-12 xxl:col-span-3">
<div class="box">
<div class="box-header flex justify-between">
<div class="box-title my-auto">Leads Response</div>
<div class="block ltr:ml-auto rtl:mr-auto my-auto">
<button
type="button"
class="ti-btn m-0 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"
>
View All
</button>
</div>
</div>
<div class="box-body">
<div class="flex items-center">
<div class="ltr:mr-3 rtl:ml-3">
<div class="text-primary">
<i class="ti ti-clock-hour-4 text-3xl"></i>
</div>
</div>
<div class="flex-1">
<h5 class="text-xl text-gray-800 dark:text-white font-semibold">
3.54
</h5>
<p class="text-sm text-gray-500 dark:text-white/70">
Average Lead Response Time
</p>
</div>
</div>
<ul class="flex flex-col mt-6">
<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="w-full">
<div class="flex items-center justify-between mb-1 text-sm">
<p class="mb-0">Helen Beth</p>
<span>2.7</span>
</div>
<div
class="ti-main-progress h-2 bg-gray-200 dark:bg-black/20"
>
<div
class="ti-main-progress-bar bg-primary text-xs text-white text-center"
role="progressbar"
style="width: 70%"
aria-valuenow="70"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
</div>
</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/12.jpg"
alt="Image Description"
/>
<div class="w-full">
<div class="flex items-center justify-between mb-1 text-sm">
<p class="mb-0">Bickle Travis</p>
<span>1.7</span>
</div>
<div
class="ti-main-progress h-2 bg-gray-200 dark:bg-black/20"
>
<div
class="ti-main-progress-bar bg-primary text-xs text-white text-center"
role="progressbar"
style="width: 50%"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
</div>
</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="w-full">
<div class="flex items-center justify-between mb-1 text-sm">
<p class="mb-0">Json Taylor</p>
<span>1.8</span>
</div>
<div
class="ti-main-progress h-2 bg-gray-200 dark:bg-black/20"
>
<div
class="ti-main-progress-bar bg-primary text-xs text-white text-center"
role="progressbar"
style="width: 80%"
aria-valuenow="80"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
</div>
</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/13.jpg"
alt="Image Description"
/>
<div class="w-full">
<div class="flex items-center justify-between mb-1 text-sm">
<p class="mb-0">Andrew Garfield</p>
<span>2.5</span>
</div>
<div
class="ti-main-progress h-2 bg-gray-200 dark:bg-black/20"
>
<div
class="ti-main-progress-bar bg-primary text-xs text-white text-center"
role="progressbar"
style="width: 50%"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
</div>
</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/4.jpg"
alt="Image Description"
/>
<div class="w-full">
<div class="flex items-center justify-between mb-1 text-sm">
<p class="mb-0">Socrates Itumay</p>
<span>2.1</span>
</div>
<div
class="ti-main-progress h-2 bg-gray-200 dark:bg-black/20"
>
<div
class="ti-main-progress-bar bg-primary text-xs text-white text-center"
role="progressbar"
style="width: 30%"
aria-valuenow="53"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
</div>
</div>
</a>
</li>
</ul>
</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">Leads Report</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"
>
View All <i class="ti ti-chevron-down"></i>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu hidden">
<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">Lead</th>
<th scope="col" class="dark:text-white/80">Phone Number</th>
<th scope="col" class="dark:text-white/80">Company Name</th>
<th scope="col" class="dark:text-white/80">Location</th>
<th scope="col" class="dark:text-white/80">date</th>
<th scope="col" class="dark:text-white/80">Status</th>
<th scope="col" class="dark:text-white/80">Action</th>
</tr>
</thead>
<tbody class="">
<tr class="" *ngFor="let employee of employees">
<td>{{ employee.id }}</td>
<td>
<div
class="flex space-x-3 rtl:space-x-reverse text-start min-w-[200px]"
>
<img
class="avatar avatar-sm rounded-sm"
src="{{ employee.src }}"
alt="Image Description"
/>
<div class="block my-auto">
<p
class="block text-sm font-semibold my-auto text-gray-800 dark:text-white"
>
{{ employee.name }}
</p>
<span
class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto"
>{{ employee.mail }}</span
>
</div>
</div>
</td>
<td>{{ employee.phone }}</td>
<td>{{ employee.company }}</td>
<td>
<div class="inline-flex items-center">
<i
class="ri-map-pin-fill text-gray-500 dark:text-white/70 text-xs"
></i>
<span class="ltr:ml-1 rtl:mr-1">{{
employee.location
}}</span>
</div>
</td>
<td>{{ employee.date }}</td>
<td>
<span
class="truncate whitespace-nowrap inline-block py-1 px-3 rounded-full text-xs font-medium bg-{{
employee.background
}}/10 text-{{ employee.textcolor }}/80"
>{{ employee.status }}</span
>
</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 hidden"
role="tooltip"
data-popper-placement="top"
style="
position: fixed;
inset: auto auto 0px 0px;
margin: 0px;
transform: translate(1686px, -243px);
"
>
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(employee.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 class="box-footer">
<div class="sm:flex items-center">
<div class="">
showing 5 Entries
<i class="ri-arrow-right-line ml-2 font-semibold"></i>
</div>
<div class="ltr:ml-auto rtl:mr-auto">
<nav
class="flex justify-center items-center space-x-2 rtl:space-x-reverse"
>
<a
class="text-gray-500 hover:text-primary e py-1 px-2 leading-none inline-flex items-center gap-2 rounded-sm"
href="javascript:void(0);"
>
<span aria-hidden="true">Prev</span>
<span class="sr-only">Previous</span>
</a>
<a
class="bg-primary text-white py-1 px-2 leading-none inline-flex items-center text-sm font-medium rounded-sm"
href="javascript:void(0);"
aria-current="page"
>1</a
>
<a
class="text-gray-500 hover:text-primary e py-1 px-2 leading-none inline-flex items-center text-sm font-medium rounded-sm"
href="javascript:void(0);"
>2</a
>
<a
class="text-gray-500 hover:text-primary e py-1 px-2 leading-none inline-flex items-center text-sm font-medium rounded-sm"
href="javascript:void(0);"
>3</a
>
<a
class="text-gray-500 hover:text-primary e py-1 px-2 leading-none inline-flex items-center gap-2 rounded-sm"
href="javascript:void(0);"
>
<span class="sr-only">Next</span>
<span aria-hidden="true">Next</span>
</a>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End::row-3 -->