<app-page-header
title="HRM Dashboard"
title1="HRM 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">
<div class="box-body">
<div class="flex">
<div class="ltr:mr-3 rtl:ml-3">
<div class="avatar rounded-sm text-primary p-2.5 bg-primary/20">
<i class="ti ti-users text-2xl leading-none"></i>
</div>
</div>
<div class="flex-1">
<p class="text-sm">Total Employees</p>
<div class="flex justify-between items-center">
<h5
class="mb-0 text-2xl font-semibold text-gray-800 dark:text-white"
>
1,238
</h5>
<span class="text-success badge bg-success/20 rounded-sm p-1"
><i class="ti ti-trending-up leading-none"></i> +1.03%</span
>
</div>
<span class="text-xs text-gray-500 dark:text-white/70"
>This Month</span
>
</div>
</div>
</div>
</div>
</div>
<div class="col-span-12 md:col-span-6 xxl:col-span-3">
<div class="box">
<div class="box-body">
<div class="flex">
<div class="ltr:mr-3 rtl:ml-3">
<div class="avatar rounded-sm text-primary p-2.5 bg-primary/20">
<i class="ti ti-users-minus text-2xl leading-none"></i>
</div>
</div>
<div class="flex-1">
<p class="text-sm">Employees In Leave</p>
<div class="flex justify-between items-center">
<h5
class="mb-0 text-2xl font-semibold text-gray-800 dark:text-white"
>
116
</h5>
<span class="text-success badge bg-success/20 rounded-sm p-1"
><i class="ti ti-trending-up leading-none"></i> +0.36%</span
>
</div>
<span class="text-gray-500 dark:text-white/70 text-xs"
>This Month</span
>
</div>
</div>
</div>
</div>
</div>
<div class="col-span-12 md:col-span-6 xxl:col-span-3">
<div class="box">
<div class="box-body">
<div class="flex">
<div class="ltr:mr-3 rtl:ml-3">
<div class="avatar rounded-sm text-primary p-2.5 bg-primary/20">
<i class="ti ti-briefcase text-2xl leading-none"></i>
</div>
</div>
<div class="flex-1">
<p class="text-sm">Total Clients</p>
<div class="flex justify-between items-center">
<h5
class="mb-0 text-2xl font-semibold text-gray-800 dark:text-white"
>
2,159
</h5>
<span class="text-danger badge bg-danger/20 rounded-sm p-1"
><i class="ti ti-trending-down leading-none"></i> -1.28%</span
>
</div>
<span class="text-gray-500 dark:text-white/70 text-xs"
>This Month</span
>
</div>
</div>
</div>
</div>
</div>
<div class="col-span-12 md:col-span-6 xxl:col-span-3">
<div class="box">
<div class="box-body">
<div class="flex">
<div class="ltr:mr-3 rtl:ml-3">
<div class="avatar rounded-sm text-primary p-2.5 bg-primary/20">
<i class="ti ti-chart-bar text-2xl leading-none"></i>
</div>
</div>
<div class="flex-1">
<p class="text-sm">New Leads</p>
<div class="flex justify-between items-center">
<h5
class="mb-0 text-2xl font-semibold text-gray-800 dark:text-white"
>
773
</h5>
<span class="text-success badge bg-success/20 rounded-sm p-1"
><i class="ti ti-trending-down leading-none"></i>+4.25%</span
>
</div>
<span class="text-gray-500 dark:text-white/70 text-xs"
>This Month</span
>
</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 xxl:col-span-6">
<div class="box">
<div class="box-header">
<div class="sm:flex justify-between sm:space-y-0 space-y-2">
<h5 class="box-title my-auto">Sales Overview</h5>
<div class="inline-flex rounded-md shadow-sm">
<button
type="button"
class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-soft-primary"
>
1D
</button>
<button
type="button"
class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-soft-primary"
>
1W
</button>
<button
type="button"
class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-soft-primary"
>
1M
</button>
<button
type="button"
class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-soft-primary"
>
3M
</button>
<button
type="button"
class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-soft-primary"
>
6M
</button>
<button
type="button"
class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-primary"
>
1Y
</button>
</div>
</div>
</div>
<div class="box-body">
<div id="performanceReport">
<apx-chart
[series]="chartOptions.series"
[chart]="chartOptions.chart"
[stroke]="chartOptions.stroke"
[dataLabels]="chartOptions.dataLabels"
[plotOptions]="chartOptions.plotOptions"
[xaxis]="chartOptions.xaxis"
[colors]="chartOptions.colors"
[fill]="chartOptions.fill"
[yaxis]="chartOptions.yaxis"
[dataLabels]="chartOptions.dataLabels"
[legend]="chartOptions.legend"
></apx-chart>
</div>
</div>
</div>
</div>
<div class="col-span-12 md:col-span-6 xxl:col-span-3">
<div class="box">
<div class="box-header justify-between flex">
<div class="box-title my-auto">Upcoming Events</div>
<div>
<button
type="button"
aria-label="button"
class="ti-btn ti-btn-soft-primary ltr:mr-2 rtl:ml-2 py-1 m-0"
>
View All
</button>
</div>
</div>
<div class="box-body">
<div class="overflow-x-auto">
<ul class="list-unstyled timeline-widget mb-0">
<li class="ti-list-group border-0 p-0 w-full timeline-widget-list">
<div class="flex w-full">
<div class="ltr:mr-12 rtl:ml-12 text-center">
<span class="block text-sm font-semibold">02</span>
<span class="block text-xs text-gray-500 dark:text-white/70"
>Mon</span
>
</div>
<div
class="flex flex-wrap flex-auto items-center justify-between"
>
<div>
<a href="javascript:void(0);">
<p
class="mb-1 timeline-widget-content text-sm text-wrap !max-w-[15rem] truncate"
>
You have an announcement - Ipsum Est Diam Eirmod
</p>
<p
class="mb-0 text-xs leading-none text-gray-500 dark:text-white/70"
>
10:00AM<span
class="badge bg-primary/10 ltr:ml-2 rtl:mr-2 py-1 text-xs text-primary rounded-sm"
>Announcement</span
>
</p>
</a>
</div>
<div class="hs-dropdown ti-dropdown">
<a
aria-label="anchor"
href="javascript:void(0);"
class="text-lg leading-none text-gray-500"
>
<i class="ri-more-2-line"></i>
</a>
<div class="hs-dropdown-menu ti-dropdown-menu hidden">
<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>
</li>
<li class="ti-list-group border-0 p-0 w-full timeline-widget-list">
<div class="flex w-full">
<div class="ltr:mr-12 rtl:ml-12 text-center">
<span class="block text-sm font-semibold">15</span>
<span class="block text-xs text-gray-500 dark:text-white/70"
>Sun</span
>
</div>
<div
class="flex flex-wrap flex-auto items-center justify-between"
>
<div>
<a href="javascript:void(0);">
<p
class="mb-1 truncate timeline-widget-content text-sm text-wrap !max-w-[15rem]"
>
National holiday - Vero Jayanti
</p>
<p
class="mb-0 text-xs leading-none text-gray-500 dark:text-white/70"
>
<span
class="badge bg-warning/10 ltr:ml-2 rtl:mr-2 py-1 text-xs text-warning rounded-sm"
>Holiday</span
>
</p>
</a>
</div>
<div class="hs-dropdown ti-dropdown">
<a
aria-label="anchor"
href="javascript:void(0);"
class="text-lg leading-none text-gray-500"
>
<i class="ri-more-2-line"></i>
</a>
<div class="hs-dropdown-menu ti-dropdown-menu hidden">
<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>
</li>
<li class="ti-list-group border-0 p-0 w-full timeline-widget-list">
<div class="flex w-full">
<div class="ltr:mr-12 rtl:ml-12 text-center">
<span class="block text-sm font-semibold">23</span>
<span class="block text-xs text-gray-500 dark:text-white/70"
>Mon</span
>
</div>
<div
class="flex flex-wrap flex-auto items-center justify-between"
>
<div>
<a href="javascript:void(0);">
<p
class="mb-1 truncate timeline-widget-content text-sm text-wrap !max-w-[15rem]"
>
John pup birthday - Team Member
</p>
<p
class="mb-4 text-xs leading-none text-gray-500 dark:text-white/70"
>
09:00AM<span
class="badge bg-success/10 ltr:ml-2 rtl:mr-2"
>Birthday</span
>
</p>
<p
class="mb-1 truncate timeline-widget-content text-sm text-wrap !max-w-[15rem]"
>
Amet sed no dolor kasd - Et Dolores Tempor Erat
</p>
<p
class="mb-0 text-xs leading-none text-gray-500 dark:text-white/70"
>
04:00PM<span
class="badge bg-primary/10 ltr:ml-2 rtl:mr-2 py-1 text-xs text-primary rounded-sm"
>Announcement</span
>
</p>
</a>
</div>
<div class="hs-dropdown ti-dropdown">
<a
aria-label="anchor"
href="javascript:void(0);"
class="text-lg leading-none text-gray-500"
>
<i class="ri-more-2-line"></i>
</a>
<div class="hs-dropdown-menu ti-dropdown-menu hidden">
<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>
</li>
<li class="ti-list-group border-0 p-0 w-full timeline-widget-list">
<div class="flex w-full">
<div class="ltr:mr-12 rtl:ml-12 text-center">
<span class="block text-sm font-semibold">31</span>
<span class="block text-xs text-gray-500 dark:text-white/70"
>Tue</span
>
</div>
<div
class="flex flex-wrap flex-auto items-center justify-between"
>
<div>
<a href="javascript:void(0);">
<p
class="mb-1 truncate timeline-widget-content text-sm text-wrap !max-w-[15rem]"
>
National Holiday - Dolore Ipsum
</p>
<p
class="mb-0 text-xs leading-none text-gray-500 dark:text-white/70"
>
<span
class="badge bg-warning/10 ltr:ml-2 rtl:mr-2 py-1 text-xs text-warning rounded-sm"
>Holiday</span
>
</p>
</a>
</div>
<div class="hs-dropdown ti-dropdown">
<a
aria-label="anchor"
href="javascript:void(0);"
class="text-lg leading-none text-gray-500"
>
<i class="ri-more-2-line"></i>
</a>
<div class="hs-dropdown-menu ti-dropdown-menu hidden">
<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>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-span-12 md:col-span-6 xxl:col-span-3">
<div class="box">
<div class="box-header justify-between flex">
<div class="box-title my-auto">Notice Board</div>
<div>
<button
type="button"
aria-label="button"
class="ti-btn ti-btn-soft-primary ltr:mr-2 rtl:ml-2 py-1 m-0"
>
View All
</button>
</div>
</div>
<div class="box-body">
<ul class="list-unstyled mb-0">
<li class="ti-list-group mb-6 border-0 p-0 w-full">
<div class="flex border-0">
<div class="ltr:mr-3 rtl:ml-3">
<div class="calendar-icon icons">
<div
class="avatar bg-primary/20 text-primary text-sm rounded-sm text-center p-1.5 leading-none"
>
<span class="block mb-1">10</span>
<span class="block">April</span>
</div>
</div>
</div>
<div class="ltr:ml-1 rtl:mr-1 my-auto">
<div
class="font-semibold text-sm text-gray-800 dark:text-white"
>
Board meeting Completed
</div>
<small
class="text-xs font-normal text-gray-500 dark:text-white/70"
>attend the company mangers...</small
>
</div>
</div>
</li>
<li class="ti-list-group mb-6 border-0 p-0 w-full">
<div class="flex border-0">
<div class="ltr:mr-3 rtl:ml-3">
<div class="calendar-icon icons">
<div
class="avatar bg-info/20 text-info text-sm rounded-sm text-center p-1.5 leading-none"
>
<span class="block mb-1">07</span>
<span class="block">April</span>
</div>
</div>
</div>
<div class="ltr:ml-1 rtl:mr-1 my-auto">
<div
class="font-semibold text-sm text-gray-800 dark:text-white"
>
Good Friday
</div>
<small
class="text-xs font-normal text-gray-500 dark:text-white/70"
>participate the all employess</small
>
</div>
</div>
</li>
<li class="ti-list-group mb-6 border-0 p-0 w-full">
<div class="flex border-0">
<div class="ltr:mr-3 rtl:ml-3">
<div class="calendar-icon icons">
<div
class="avatar bg-secondary/20 text-secondary text-sm rounded-sm text-center p-1.5 leading-none"
>
<span class="block mb-1">16</span>
<span class="block">April</span>
</div>
</div>
</div>
<div class="ltr:ml-1 rtl:mr-1 my-auto">
<div
class="font-semibold text-sm text-gray-800 dark:text-white"
>
Updated the Company Policy
</div>
<small
class="text-xs font-normal text-gray-500 dark:text-white/70"
>some changes & add the terms & conditions</small
>
</div>
</div>
</li>
<li class="ti-list-group mb-6 border-0 p-0 w-full">
<div class="flex border-0">
<div class="ltr:mr-3 rtl:ml-3">
<div class="calendar-icon icons">
<div
class="avatar bg-warning/20 text-warning text-sm rounded-sm text-center p-1.5 leading-none"
>
<span class="block mb-1">20</span>
<span class="block">April</span>
</div>
</div>
</div>
<div class="ltr:ml-1 rtl:mr-1 my-auto">
<div
class="font-semibold text-sm text-gray-800 dark:text-white"
>
Office Timings Changed
</div>
<small
class="text-xs font-normal text-gray-500 dark:text-white/70"
>this effetct after May 01st 9:00 Am To 5:00 Pm</small
>
</div>
</div>
</li>
<li class="ti-list-group mb-0 border-0 p-0 w-full">
<div class="flex border-0">
<div class="ltr:mr-3 rtl:ml-3">
<div class="calendar-icon icons">
<div
class="avatar bg-danger/20 text-danger text-sm rounded-sm text-center p-1.5 leading-none"
>
<span class="block mb-1">01</span>
<span class="block">May</span>
</div>
</div>
</div>
<div class="ltr:ml-1 rtl:mr-1 my-auto">
<div
class="font-semibold text-sm text-gray-800 dark:text-white"
>
May Day
</div>
<small
class="text-xs font-normal text-gray-500 dark:text-white/70"
>participate the all employess</small
>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- End::row-2 -->
<!-- Start::row-3 -->
<div class="grid grid-cols-12 gap-x-5">
<div class="col-span-12">
<div class="box">
<div class="box-body p-0">
<div class="grid grid-cols-12">
<div
class="col-span-12 sm:col-span-6 xl:col-span-3 sm:border-b-0 ltr:border-r rtl:border-l border-b border-gray-200 dark:border-white/10"
>
<div class="flex flex-wrap p-6 items-center">
<div class="ltr:mr-3 rtl:ml-3 leading-none">
<span
class="avatar inline-flex justify-center items-center rounded-full bg-primary/20 text-primary shadow-sm"
>
<i class="ti ti-package text-lg"></i>
</span>
</div>
<div class="flex-1 font-semibold">
<div class="flex justify-between items-center mb-2">
<p class="mb-0 text-gray-800 dark:text-white">Projects</p>
<span>85/120</span>
</div>
<div class="ti-main-progress bg-gray-200 dark:bg-black/20 mb-2">
<div
class="ti-main-progress-bar bg-primary text-xs text-white text-center"
role="progressbar"
style="width: 55%"
aria-valuenow="55"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<a
href="javascript:void(0);"
class="text-gray-500 dark:text-white/70 text-xs flex"
>Full Details<i
class="ri-arrow-right-s-line ltr:ml-2 rtl:mr-2"
></i
></a>
</div>
</div>
</div>
<div
class="col-span-12 sm:col-span-6 xl:col-span-3 sm:border-b-0 ltr:border-r rtl:border-l border-b border-gray-200 dark:border-white/10"
>
<div class="flex flex-wrap p-6 items-center">
<div class="ltr:mr-3 rtl:ml-3 leading-none">
<span
class="avatar inline-flex justify-center items-center rounded-full bg-secondary/20 text-secondary shadow-sm"
>
<i class="ti ti-ticket text-lg"></i>
</span>
</div>
<div class="flex-1 font-semibold">
<div class="flex justify-between items-center mb-2">
<p class="mb-0 text-gray-800 dark:text-white">Open Tickets</p>
<span>350/390</span>
</div>
<div class="ti-main-progress bg-gray-200 dark:bg-black/20 mb-2">
<div
class="ti-main-progress-bar bg-secondary text-xs text-white text-center"
role="progressbar"
style="width: 75%"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<a
href="javascript:void(0);"
class="text-gray-500 dark:text-white/70 text-xs flex"
>Full Details<i
class="ri-arrow-right-s-line ltr:ml-2 rtl:mr-2"
></i
></a>
</div>
</div>
</div>
<div
class="col-span-12 sm:col-span-6 xl:col-span-3 sm:border-b-0 ltr:border-r rtl:border-l border-b border-gray-200 dark:border-white/10"
>
<div class="flex flex-wrap p-6 items-center">
<div class="ltr:mr-3 rtl:ml-3 leading-none">
<span
class="avatar inline-flex justify-center items-center rounded-full bg-danger/20 text-danger shadow-sm"
>
<i class="ti ti-file-invoice text-lg"></i>
</span>
</div>
<div class="flex-1 font-semibold">
<div class="flex justify-between items-center mb-2">
<p class="mb-0 text-gray-800 dark:text-white">Invoices</p>
<span>110/200</span>
</div>
<div class="ti-main-progress bg-gray-200 dark:bg-black/20 mb-2">
<div
class="ti-main-progress-bar bg-danger text-xs text-white text-center"
style="width: 75%"
role="progressbar"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<a
href="javascript:void(0);"
class="text-gray-500 dark:text-white/70 text-xs flex"
>Full Details<i
class="ri-arrow-right-s-line ltr:ml-2 rtl:mr-2"
></i
></a>
</div>
</div>
</div>
<div class="col-span-12 sm:col-span-6 xl:col-span-3">
<div class="flex flex-wrap p-6 items-center">
<div class="ltr:mr-3 rtl:ml-3 leading-none">
<span
class="avatar inline-flex justify-center items-center rounded-full bg-info/20 text-info shadow-sm"
>
<i class="ti ti-vocabulary text-lg"></i>
</span>
</div>
<div class="flex-1 font-semibold">
<div class="flex justify-between items-center mb-2">
<p class="mb-0 text-gray-800 dark:text-white">Tasks</p>
<span>100/200</span>
</div>
<div class="ti-main-progress bg-gray-200 dark:bg-black/20 mb-2">
<div
class="ti-main-progress-bar bg-info text-xs text-white text-center"
style="width: 55%"
role="progressbar"
aria-valuenow="55"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<a
href="javascript:void(0);"
class="text-gray-500 dark:text-white/70 text-xs flex"
>Full Details<i
class="ri-arrow-right-s-line ltr:ml-2 rtl:mr-2"
></i
></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End::row-3 -->
<!-- Start::row-4 -->
<div class="grid grid-cols-12 gap-x-5">
<div class="col-span-12 lg:col-span-5">
<div class="box">
<div class="box-header flex justify-between">
<div class="box-title my-auto">Attendance</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 p-0 attendance-table">
<div class="overflow-auto">
<table class="ti-custom-table ti-custom-table-head whitespace-nowrap">
<thead>
<tr>
<th scope="col">S.no</th>
<th scope="col">Employee</th>
<th scope="col">Status</th>
<th scope="col">Checkin</th>
<th scope="col">Checkout</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr class="">
<td>1</td>
<td>
<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="block w-full my-auto">
<span
class="block text-sm font-semibold text-gray-800 dark:text-gray-300 max-w-[180px] truncate"
>Alice Rex</span
>
<span
class="block text-xs text-gray-400 dark:text-white/80 !font-normal"
>Tester</span
>
</div>
</div>
</td>
<td>
<span
class="whitespace-nowrap inline-block py-1 px-3 rounded-sm text-xs font-medium bg-success/10 text-success/80"
>Present</span
>
</td>
<td>09:30 Am</td>
<td>06:30 Pm</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-phone"></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"
>
Call
</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-message-circle"></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"
>
Chat
</span>
</a>
</div>
</td>
</tr>
<tr class="">
<td>2</td>
<td>
<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="block w-full my-auto">
<span
class="block text-sm font-semibold text-gray-800 dark:text-gray-300 max-w-[180px] truncate"
>Rehna Eni</span
>
<span
class="block text-xs text-gray-400 dark:text-white/80 !font-normal"
>UI/UX Designer
</span>
</div>
</div>
</td>
<td>
<span
class="whitespace-nowrap inline-block py-1 px-3 rounded-sm text-xs font-medium bg-success/10 text-success/80"
>Present</span
>
</td>
<td>09:45 Am</td>
<td>06:50 Pm</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-phone"></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"
>
Call
</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-message-circle"></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"
>
Chat
</span>
</a>
</div>
</td>
</tr>
<tr class="">
<td>3</td>
<td>
<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="block w-full my-auto">
<span
class="block text-sm font-semibold text-gray-800 dark:text-gray-300 max-w-[180px] truncate"
>
Bob Upt</span
>
<span
class="block text-xs text-gray-400 dark:text-white/80 !font-normal"
>Backend
</span>
</div>
</div>
</td>
<td>
<span
class="whitespace-nowrap inline-block py-1 px-3 rounded-sm text-xs font-medium bg-danger/10 text-danger/80"
>Absent</span
>
</td>
<td>00:00 Am</td>
<td>00:00 Pm</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-phone"></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"
>
Call
</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-message-circle"></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"
>
Chat
</span>
</a>
</div>
</td>
</tr>
<tr class="">
<td>4</td>
<td>
<div class="flex space-x-3 rtl:space-x-reverse w-full">
<img
class="avatar avatar-sm rounded-sm"
src="./assets/img/users/15.jpg"
alt="Image Description"
/>
<div class="block w-full my-auto truncate">
<span
class="block text-sm font-semibold text-gray-800 dark:text-gray-300 max-w-[180px] truncate"
>Charlie Davieson</span
>
<span
class="block text-xs text-gray-400 dark:text-white/80 !font-normal"
>Team Lead
</span>
</div>
</div>
</td>
<td>
<span
class="whitespace-nowrap inline-block py-1 px-3 rounded-sm text-xs font-medium bg-success/10 text-success/80"
>Present</span
>
</td>
<td>10:00 Am</td>
<td>07:00 Pm</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-phone"></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"
>
Call
</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-message-circle"></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"
>
Chat
</span>
</a>
</div>
</td>
</tr>
<tr class="">
<td>5</td>
<td>
<div class="flex space-x-3 rtl:space-x-reverse w-full">
<img
class="avatar avatar-sm rounded-sm"
src="./assets/img/users/21.jpg"
alt="Image Description"
/>
<div class="block w-full my-auto">
<span
class="block text-sm font-semibold text-gray-800 dark:text-gray-300 max-w-[180px] truncate"
>Suzika Stallone</span
>
<span
class="block text-xs text-gray-400 dark:text-white/80 !font-normal"
>UI Designer
</span>
</div>
</div>
</td>
<td>
<span
class="whitespace-nowrap inline-block py-1 px-3 rounded-sm text-xs font-medium bg-success/10 text-success/80"
>Present</span
>
</td>
<td>09:30 Am</td>
<td>05:15 Pm</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-phone"></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"
>
Call
</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-message-circle"></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"
>
Chat
</span>
</a>
</div>
</td>
</tr>
<tr class="">
<td>6</td>
<td>
<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="block w-full my-auto">
<span
class="block text-sm font-semibold text-gray-800 dark:text-gray-300 max-w-[180px] truncate"
>Mc Greggor</span
>
<span
class="block text-xs text-gray-400 dark:text-white/80 !font-normal"
>Java Developer
</span>
</div>
</div>
</td>
<td>
<span
class="whitespace-nowrap inline-block py-1 px-3 rounded-sm text-xs font-medium bg-danger/10 text-danger/80"
>Absent</span
>
</td>
<td>00:00 Am</td>
<td>00:00 Pm</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-phone"></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"
>
Call
</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-message-circle"></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"
>
Chat
</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-7">
<div class="box">
<div class="box-header flex justify-between">
<div class="box-title my-auto">Leave Request</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 p-0">
<div class="overflow-auto">
<table class="ti-custom-table ti-custom-table-head whitespace-nowrap">
<thead>
<tr>
<th scope="col">Employee</th>
<th scope="col">Type</th>
<th scope="col">From</th>
<th scope="col">To</th>
<th scope="col">Status</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr class="">
<td>
<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="block w-full my-auto">
<span
class="block text-sm font-semibold text-gray-800 dark:text-gray-300 max-w-[180px] truncate"
>Socrates Itumay</span
>
<span
class="block text-xs text-gray-400 dark:text-white/80 !font-normal"
>Team Lead</span
>
</div>
</div>
</td>
<td>Sick Leave</td>
<td>05-04-2023</td>
<td>08-04-2023</td>
<td>
<span
class="whitespace-nowrap inline-block py-1 px-3 rounded-sm text-xs font-medium bg-success/10 text-success"
>Approved</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"
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"
>
<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>
<tr class="">
<td>
<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="block w-full my-auto">
<span
class="block text-sm font-semibold text-gray-800 dark:text-gray-300 max-w-[180px] truncate"
>Samantha Paul</span
>
<span
class="block text-xs text-gray-400 dark:text-white/80 !font-normal"
>Sr.UI Developer</span
>
</div>
</div>
</td>
<td>Casual Leave</td>
<td>20-04-2023</td>
<td>24-04-2023</td>
<td>
<span
class="whitespace-nowrap inline-block py-1 px-3 rounded-sm text-xs font-medium bg-warning/10 text-warning"
>Pending</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"
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"
>
<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>
<tr class="">
<td>
<div class="flex space-x-3 rtl:space-x-reverse w-full">
<img
class="avatar avatar-sm rounded-sm"
src="./assets/img/users/14.jpg"
alt="Image Description"
/>
<div class="block w-full my-auto">
<span
class="block text-sm font-semibold text-gray-800 dark:text-gray-300 max-w-[180px] truncate"
>Gray Noal</span
>
<span
class="block text-xs text-gray-400 dark:text-white/80 !font-normal"
>Java Developer</span
>
</div>
</div>
</td>
<td>Paternity Leave</td>
<td>18-04-2023</td>
<td>24-04-2023</td>
<td>
<span
class="whitespace-nowrap inline-block py-1 px-3 rounded-sm text-xs font-medium bg-success/10 text-success"
>Approved</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"
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"
>
<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>
<tr class="">
<td>
<div class="flex space-x-3 rtl:space-x-reverse w-full">
<img
class="avatar avatar-sm rounded-sm"
src="./assets/img/users/15.jpg"
alt="Image Description"
/>
<div class="block w-full my-auto">
<span
class="block text-sm font-semibold text-gray-800 dark:text-gray-300 max-w-[180px] truncate"
>Gray Noal</span
>
<span
class="block text-xs text-gray-400 dark:text-white/80 !font-normal"
>React Developer</span
>
</div>
</div>
</td>
<td>Personal Leave</td>
<td>05-04-2023</td>
<td>06-04-2023</td>
<td>
<span
class="whitespace-nowrap inline-block py-1 px-3 rounded-sm text-xs font-medium bg-danger/10 text-danger"
>Rejected</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"
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"
>
<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>
<tr class="">
<td>
<div class="flex space-x-3 rtl:space-x-reverse w-full">
<img
class="avatar avatar-sm rounded-sm"
src="./assets/img/users/8.jpg"
alt="Image Description"
/>
<div class="block w-full my-auto">
<span
class="block text-sm font-semibold text-gray-800 dark:text-gray-300 max-w-[180px] truncate"
>Emiley Jackson</span
>
<span
class="block text-xs text-gray-400 dark:text-white/80 !font-normal"
>Full Stack Developer</span
>
</div>
</div>
</td>
<td>Maternity Leave</td>
<td>05-04-2023</td>
<td>06-06-2023</td>
<td>
<span
class="whitespace-nowrap inline-block py-1 px-3 rounded-sm text-xs font-medium bg-success/10 text-success"
>Approved</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"
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"
>
<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>
<tr class="">
<td>
<div class="flex space-x-3 rtl:space-x-reverse w-full">
<img
class="avatar avatar-sm rounded-sm"
src="./assets/img/users/16.jpg"
alt="Image Description"
/>
<div class="block w-full my-auto">
<span
class="block text-sm font-semibold text-gray-800 dark:text-gray-300 max-w-[180px] truncate"
>Pope Johnson</span
>
<span
class="block text-xs text-gray-400 dark:text-white/80 !font-normal"
>Jr.Java Developer</span
>
</div>
</div>
</td>
<td>Gifted Leave</td>
<td>06-04-2023</td>
<td>20-04-2023</td>
<td>
<span
class="whitespace-nowrap inline-block py-1 px-3 rounded-sm text-xs font-medium bg-warning/10 text-warning"
>Pending</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"
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"
>
<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-4 -->
<!-- Start::row-5 -->
<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">Employee Salary Details</h5>
<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>
<div class="box-body">
<div class="table-bordered 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">Employee Details</th>
<th scope="col" class="dark:text-white/80">Department</th>
<th scope="col" class="dark:text-white/80">Designation</th>
<th scope="col" class="dark:text-white/80">Salary</th>
<th scope="col" class="dark:text-white/80">Leaves</th>
<th scope="col" class="dark:text-white/80">Net Salary</th>
<th scope="col" class="dark:text-white/80">Status</th>
<th scope="col" class="dark:text-white/80">Actions</th>
</tr>
</thead>
<tbody class="" *ngFor="let salary of Salaries">
<tr>
<td>{{ salary.id }}</td>
<td>
<div
class="flex space-x-3 rtl:space-x-reverse w-full min-w-[200px]"
>
<img
class="avatar avatar-sm rounded-sm"
src="{{ salary.src }}"
alt="Image Description"
/>
<div class="block w-full my-auto">
<span
class="block text-sm font-semibold text-gray-800 dark:text-gray-300 max-w-[180px] truncate"
>{{ salary.name }}</span
>
<span
class="block text-xs text-gray-400 dark:text-white/80 !font-normal"
>{{ salary.mail }}</span
>
</div>
</div>
</td>
<td>
<span>{{ salary.department }}</span>
</td>
<td>
<span>{{ salary.designation }}</span>
</td>
<td>
<span>{{ salary.sal }}</span>
</td>
<td>
<span>{{ salary.leaves }}</span>
</td>
<td>
<span>{{ salary.netsal }}</span>
</td>
<td>
<span
class="whitespace-nowrap inline-block py-1 px-3 rounded-sm text-xs font-medium bg-{{
salary.background
}}/10 text-{{ salary.textcolor }}"
>{{ salary.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"
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)="click1(salary.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-5 -->