<app-page-header
title="Personal Dashboard"
title1="Personal 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">
<div class="flex justify-between">
<div class="flex-1">
<h6 class="mb-2 text-base font-medium">Total Balance</h6>
<h5
class="mb-1 text-3xl text-gray-800 dark:text-white font-medium"
>
$75,234
<span
class="text-xs text-gray-500 dark:text-white/70 font-normal"
>/ month</span
>
</h5>
<span class="text-gray-500 dark:text-white/70"
><i class="ti ti-trending-up text-success"></i> +5% than last
month</span
>
</div>
<div class="ltr:ml-auto rtl:mr-auto">
<span class="avatar rounded-sm bg-primary text-white p-3"
><i class="ri-wallet-2-line text-2xl leading-none"></i
></span>
</div>
</div>
</div>
</div>
</div>
<div class="col-span-12 xl:col-span-4">
<div class="box">
<div class="box-body">
<div class="flex justify-between">
<div class="flex-1">
<h6 class="mb-2 text-base font-medium">Total Income</h6>
<h5
class="mb-1 text-3xl text-gray-800 dark:text-white font-medium"
>
$45,234
<span
class="text-xs text-gray-500 dark:text-white/70 font-normal"
>/ month</span
>
</h5>
<span class="text-gray-500 dark:text-white/70"
><i class="ti ti-trending-up text-success"></i> +5% than last
month</span
>
</div>
<div class="ltr:ml-auto rtl:mr-auto">
<span class="avatar rounded-sm bg-primary text-white p-3"
><i class="ri-currency-line text-2xl leading-none"></i
></span>
</div>
</div>
</div>
</div>
</div>
<div class="col-span-12 xl:col-span-4">
<div class="box">
<div class="box-body">
<div class="flex justify-between">
<div class="flex-1">
<h6 class="mb-2 text-base font-medium">Total Expenses</h6>
<h5
class="mb-1 text-3xl text-gray-800 dark:text-white font-medium"
>
$35,234
<span
class="text-xs text-gray-500 dark:text-white/70 font-normal"
>/ month</span
>
</h5>
<span class="text-gray-500 dark:text-white/70"
><i class="ti ti-trending-down text-danger"></i> -10% than
last month</span
>
</div>
<div class="ltr:ml-auto rtl:mr-auto">
<span class="avatar rounded-sm bg-primary text-white p-3"
><i class="ri-numbers-line text-2xl leading-none"></i
></span>
</div>
</div>
</div>
</div>
</div>
<div class="col-span-12 xl:col-span-8">
<div class="box">
<div class="box-header">
<div class="sm:flex justify-between">
<h5 class="box-title my-auto">Statistics</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-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-soft-primary"
>
1Y
</button>
</div>
</div>
</div>
<div class="box-body">
<div id="statistics">
<apx-chart
[series]="chartOptions.series"
[chart]="chartOptions.chart"
[xaxis]="chartOptions.xaxis"
[stroke]="chartOptions.stroke"
[tooltip]="chartOptions.tooltip"
[dataLabels]="chartOptions.dataLabels"
[legend]="chartOptions.legend"
[markers]="chartOptions.markers"
[grid]="chartOptions.grid"
[yaxis]="chartOptions.yaxis"
[plotOptions]="chartOptions.plotOptions"
></apx-chart>
</div>
</div>
</div>
</div>
<div class="col-span-12 xl:col-span-4">
<div class="box">
<div class="box-header">
<div class="flex">
<h5 class="box-title my-auto">Contacts</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>
<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 w-full"
>
<div class="">
<a
routerLink="/profile/home"
class="flex items-center space-x-3 rtl:space-x-reverse"
>
<img
class="avatar avatar-sm rounded-sm"
src="./assets/img/users/2.jpg"
alt="Image Description"
/>
<div class="flex">
<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"
>
+(72)-86976972
</p>
</div>
</div>
</a>
</div>
<div
class="ltr:ml-auto rtl:mr-auto space-x-2 rtl:space-x-reverse"
>
<a
aria-label="anchor"
routerLink="/page/contacts"
class="text-gray-500 dark:text-white/70"
>
<i class="ri-heart-line text-base hover:text-danger"></i>
</a>
<a
aria-label="anchor"
routerLink="/page/contacts"
class="text-gray-500 dark:text-white/70 rtl:rotate-180 inline-flex"
>
<i class="ri-arrow-right-s-line text-base"></i>
</a>
</div>
</li>
<li
class="px-0 ti-list-group border-0 text-gray-800 dark:text-white w-full"
>
<div class="">
<a
routerLink="/profile/home"
class="flex items-center space-x-3 rtl:space-x-reverse"
>
<img
class="avatar avatar-sm rounded-sm"
src="./assets/img/users/3.jpg"
alt="Image Description"
/>
<div class="flex">
<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"
>
Ryan Gercia
</p>
<p
class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal"
>
+(12)-05147532
</p>
</div>
</div>
</a>
</div>
<div
class="ltr:ml-auto rtl:mr-auto space-x-2 rtl:space-x-reverse"
>
<a
aria-label="anchor"
routerLink="/page/contacts"
class="text-danger"
>
<i class="ri-heart-line text-base"></i>
</a>
<a
aria-label="anchor"
routerLink="/page/contacts"
class="text-gray-500 dark:text-white/70 rtl:rotate-180 inline-flex"
>
<i class="ri-arrow-right-s-line text-base"></i>
</a>
</div>
</li>
<li
class="px-0 ti-list-group border-0 text-gray-800 dark:text-white w-full"
>
<div class="">
<a
routerLink="/profile/home"
class="flex items-center space-x-3 rtl:space-x-reverse"
>
<img
class="avatar avatar-sm rounded-sm"
src="./assets/img/users/10.jpg"
alt="Image Description"
/>
<div class="flex">
<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"
>
Prax Bhav
</p>
<p
class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal"
>
+(12)-05147532
</p>
</div>
</div>
</a>
</div>
<div
class="ltr:ml-auto rtl:mr-auto space-x-2 rtl:space-x-reverse"
>
<a
aria-label="anchor"
routerLink="/page/contacts"
class="text-danger"
>
<i class="ri-heart-line text-base"></i>
</a>
<a
aria-label="anchor"
routerLink="/page/contacts"
class="text-gray-500 dark:text-white/70 rtl:rotate-180 inline-flex"
>
<i class="ri-arrow-right-s-line text-base"></i>
</a>
</div>
</li>
<li
class="px-0 ti-list-group border-0 text-gray-800 dark:text-white w-full"
>
<div class="">
<a
routerLink="/profile/home"
class="flex items-center space-x-3 rtl:space-x-reverse"
>
<img
class="avatar avatar-sm rounded-sm"
src="./assets/img/users/12.jpg"
alt="Image Description"
/>
<div class="flex">
<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"
>
Jackie Chen
</p>
<p
class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal"
>
+(12)-26556658
</p>
</div>
</div>
</a>
</div>
<div
class="ltr:ml-auto rtl:mr-auto space-x-2 rtl:space-x-reverse"
>
<a
aria-label="anchor"
routerLink="/page/contacts"
class="text-gray-500 dark:text-white/70"
>
<i class="ri-heart-line text-base hover:text-danger"></i>
</a>
<a
aria-label="anchor"
routerLink="/page/contacts"
class="text-gray-500 dark:text-white/70 rtl:rotate-180 inline-flex"
>
<i class="ri-arrow-right-s-line text-base"></i>
</a>
</div>
</li>
<li
class="px-0 ti-list-group border-0 text-gray-800 dark:text-white w-full"
>
<div class="">
<a
routerLink="/profile/home"
class="flex items-center space-x-3 rtl:space-x-reverse"
>
<img
class="avatar avatar-sm rounded-sm"
src="./assets/img/users/5.jpg"
alt="Image Description"
/>
<div class="flex">
<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"
>
Samantha Sam
</p>
<p
class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal"
>
+(12)-26556658
</p>
</div>
</div>
</a>
</div>
<div
class="ltr:ml-auto rtl:mr-auto space-x-2 rtl:space-x-reverse"
>
<a
aria-label="anchor"
routerLink="/page/contacts"
class="text-gray-500 dark:text-white/70"
>
<i class="ri-heart-line text-base hover:text-danger"></i>
</a>
<a
aria-label="anchor"
routerLink="/page/contacts"
class="text-gray-500 dark:text-white/70 rtl:rotate-180 inline-flex"
>
<i class="ri-arrow-right-s-line text-base"></i>
</a>
</div>
</li>
<li
class="px-0 ti-list-group border-0 text-gray-800 dark:text-white w-full"
>
<div class="">
<a
routerLink="/profile/home"
class="flex items-center space-x-3 rtl:space-x-reverse"
>
<img
class="avatar avatar-sm rounded-sm"
src="./assets/img/users/15.jpg"
alt="Image Description"
/>
<div class="flex">
<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"
>
Robert Lewis
</p>
<p
class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal"
>
+(12)-26556658
</p>
</div>
</div>
</a>
</div>
<div
class="ltr:ml-auto rtl:mr-auto space-x-2 rtl:space-x-reverse"
>
<a
aria-label="anchor"
routerLink="/page/contacts"
class="text-gray-500 dark:text-white/70"
>
<i class="ri-heart-line text-base hover:text-danger"></i>
</a>
<a
aria-label="anchor"
routerLink="/page/contacts"
class="text-gray-500 dark:text-white/70 rtl:rotate-180 inline-flex"
>
<i class="ri-arrow-right-s-line text-base"></i>
</a>
</div>
</li>
<li
class="px-0 pb-0 ti-list-group border-0 text-gray-800 dark:text-white w-full"
>
<div class="">
<a
routerLink="/profile/home"
class="flex items-center space-x-3 rtl:space-x-reverse"
>
<img
class="avatar avatar-sm rounded-sm"
src="./assets/img/users/3.jpg"
alt="Image Description"
/>
<div class="flex">
<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"
>
Ryan Gercia
</p>
<p
class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal"
>
+(12)-05147532
</p>
</div>
</div>
</a>
</div>
<div
class="ltr:ml-auto rtl:mr-auto space-x-2 rtl:space-x-reverse"
>
<a
aria-label="anchor"
routerLink="/page/contacts"
class="text-danger"
>
<i class="ri-heart-line text-base"></i>
</a>
<a
aria-label="anchor"
routerLink="/page/contacts"
class="text-gray-500 dark:text-white/70 rtl:rotate-180 inline-flex"
>
<i class="ri-arrow-right-s-line text-base"></i>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-span-12 xxl:col-span-3">
<div class="box text-white overflow-hidden">
<div
class="block absolute w-full h-full before:bg-primary/70 before:absolute before:w-full before:h-full"
>
<img
src="./assets/img/png-images/16.png"
alt=""
class="w-full xxl:h-full sm:h-auto h-full"
/>
</div>
<div class="box-body relative">
<div class="flex justify-between mb-4">
<div class="ltr:mr-1 rtl:ml-1">
<h6 class="text-base font-medium">Primary Account</h6>
<a href="javascript:void(0);" class="text-xs text-white/70"
>Change<i
class="ri-share-forward-line text-xs ltr:ml-1 rtl:mr-1"
></i
></a>
</div>
<div class="min-w-fit">
<div class="avatar bg-white/20 text-white rounded-sm p-3 ring-0">
<i class="ri-paypal-line text-2xl leading-none"></i>
</div>
</div>
</div>
<h5 class="text-3xl text-white font-semibold">$1,29,389.00</h5>
<p class="mb-1 text-sm text-white/70">Sarah Jahn SP</p>
<div class="flex justify-between text-white/70">
<span>XXXX XXXX XXXX 1116</span>
<span>12/30</span>
</div>
</div>
</div>
<div class="box">
<div class="box-header">
<div class="flex justify-between">
<h5 class="box-title my-auto">On Going Tasks</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"
>
Today <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)">Today</a>
<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="list-unstyled mb-0">
<li class="ti-list-group mb-6 border-0 p-0 w-full">
<div class="flex w-full">
<div class="ltr:mr-3 rtl:ml-3">
<div class="flex">
<input
type="checkbox"
class="ti-form-checkbox mt-0.5"
id="hs-default-checkbox"
/>
</div>
</div>
<div class="flex-1">
<div class="flex items-center justify-between mb-1">
<h5
class="mb-1 text-sm font-semibold text-gray-800 dark:text-white"
>
Designing a landing page
</h5>
<div
class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
>
<button
type="button"
aria-label="button"
class="shadow-none hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-0 bg-transparent border-0 text-gray-500 dark:bg-transparent"
>
<i class="text-sm leading-none ti ti-dots-vertical"></i>
</button>
<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 class="flex items-center justify-between">
<div class="flex -space-x-2 rtl:space-x-reverse">
<img
class="inline-block avatar w-6 h-6 rounded-full"
src="./assets/img/users/8.jpg"
alt="Image Description"
/>
<img
class="inline-block avatar w-6 h-6 rounded-full"
src="./assets/img/users/4.jpg"
alt="Image Description"
/>
<img
class="inline-block avatar w-6 h-6 rounded-full"
src="./assets/img/users/6.jpg"
alt="Image Description"
/>
<img
class="inline-block avatar w-6 h-6 rounded-full"
src="./assets/img/users/7.jpg"
alt="Image Description"
/>
</div>
<span class="text-gray-500 dark:text-white/70 flex text-xs"
><i class="ri-time-line ltr:mr-1 rtl:ml-1 my-auto"></i
>10-04-23</span
>
</div>
</div>
</div>
</li>
<li class="ti-list-group mb-6 border-0 p-0 w-full">
<div class="flex w-full">
<div class="ltr:mr-3 rtl:ml-3">
<div class="flex">
<input
type="checkbox"
class="ti-form-checkbox mt-0.5"
id="hs-default-checkbox2"
/>
</div>
</div>
<div class="flex-1">
<div class="flex items-center justify-between mb-1">
<h5
class="mb-1 text-sm font-semibold text-gray-800 dark:text-white"
>
Fixing Responsive Issues
</h5>
<div
class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
>
<button
type="button"
aria-label="button"
class="shadow-none hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-0 bg-transparent border-0 text-gray-500 dark:bg-transparent"
>
<i class="text-sm leading-none ti ti-dots-vertical"></i>
</button>
<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 class="flex items-center justify-between">
<div class="flex -space-x-2 rtl:space-x-reverse">
<img
class="inline-block avatar w-6 h-6 rounded-full"
src="./assets/img/users/8.jpg"
alt="Image Description"
/>
<img
class="inline-block avatar w-6 h-6 rounded-full"
src="./assets/img/users/4.jpg"
alt="Image Description"
/>
<img
class="inline-block avatar w-6 h-6 rounded-full"
src="./assets/img/users/6.jpg"
alt="Image Description"
/>
<span
class="inline-flex items-center justify-center avatar w-6 h-6 rounded-full bg-gray-100 border-2 border-gray-200 dark:bg-black/20 dark:border-white/10"
>
<span
class="font-medium text-gray-500 leading-none dark:text-white/70"
>9+</span
>
</span>
</div>
<span class="text-gray-500 dark:text-white/70 flex text-xs"
><i class="ri-time-line ltr:mr-1 rtl:ml-1 my-auto"></i
>10-04-23</span
>
</div>
</div>
</div>
</li>
<li class="ti-list-group mb-6 border-0 p-0 w-full">
<div class="flex w-full">
<div class="ltr:mr-3 rtl:ml-3">
<div class="flex">
<input
type="checkbox"
class="ti-form-checkbox mt-0.5"
id="hs-default-checkbox3"
/>
</div>
</div>
<div class="flex-1">
<div class="flex items-center justify-between mb-1">
<h5
class="mb-1 text-sm font-semibold text-gray-800 dark:text-white"
>
Fixing Bugs
</h5>
<div
class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
>
<button
type="button"
aria-label="button"
class="shadow-none hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-0 bg-transparent border-0 text-gray-500 dark:bg-transparent"
>
<i class="text-sm leading-none ti ti-dots-vertical"></i>
</button>
<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 class="flex items-center justify-between">
<div class="flex -space-x-2 rtl:space-x-reverse">
<img
class="inline-block avatar w-6 h-6 rounded-full"
src="./assets/img/users/8.jpg"
alt="Image Description"
/>
<img
class="inline-block avatar w-6 h-6 rounded-full"
src="./assets/img/users/4.jpg"
alt="Image Description"
/>
</div>
<span class="text-gray-500 dark:text-white/70 flex text-xs"
><i class="ri-time-line ltr:mr-1 rtl:ml-1 my-auto"></i
>10-04-23</span
>
</div>
</div>
</div>
</li>
<li class="ti-list-group mb-6 border-0 p-0 w-full">
<div class="flex w-full">
<div class="ltr:mr-3 rtl:ml-3">
<div class="flex">
<input
type="checkbox"
class="ti-form-checkbox mt-0.5"
id="hs-default-checkbox4"
/>
</div>
</div>
<div class="flex-1">
<div class="flex items-center justify-between mb-1">
<h5
class="mb-1 text-sm font-semibold text-gray-800 dark:text-white"
>
Fixing Javascript Issues
</h5>
<div
class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
>
<button
type="button"
aria-label="button"
class="shadow-none hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-0 bg-transparent border-0 text-gray-500 dark:bg-transparent"
>
<i class="text-sm leading-none ti ti-dots-vertical"></i>
</button>
<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 class="flex items-center justify-between">
<div class="flex -space-x-2 rtl:space-x-reverse">
<img
class="inline-block avatar w-6 h-6 rounded-full"
src="./assets/img/users/8.jpg"
alt="Image Description"
/>
<img
class="inline-block avatar w-6 h-6 rounded-full"
src="./assets/img/users/4.jpg"
alt="Image Description"
/>
<img
class="inline-block avatar w-6 h-6 rounded-full"
src="./assets/img/users/21.jpg"
alt="Image Description"
/>
</div>
<span class="text-gray-500 dark:text-white/70 flex text-xs"
><i class="ri-time-line ltr:mr-1 rtl:ml-1 my-auto"></i
>10-04-23</span
>
</div>
</div>
</div>
</li>
<li class="ti-list-group mb-0 border-0 p-0 w-full">
<div class="flex w-full">
<div class="ltr:mr-3 rtl:ml-3">
<div class="flex">
<input
type="checkbox"
class="ti-form-checkbox mt-0.5"
id="hs-default-checkbox5"
/>
</div>
</div>
<div class="flex-1">
<div class="flex items-center justify-between mb-1">
<h5
class="mb-1 text-sm font-semibold text-gray-800 dark:text-white"
>
Adding New Pages
</h5>
<div
class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
>
<button
type="button"
aria-label="button"
class="shadow-none hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-0 bg-transparent border-0 text-gray-500 dark:bg-transparent"
>
<i class="text-sm leading-none ti ti-dots-vertical"></i>
</button>
<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 class="flex items-center justify-between">
<div class="flex -space-x-2 rtl:space-x-reverse">
<img
class="inline-block avatar w-6 h-6 rounded-full"
src="./assets/img/users/8.jpg"
alt="Image Description"
/>
<img
class="inline-block avatar w-6 h-6 rounded-full"
src="./assets/img/users/4.jpg"
alt="Image Description"
/>
<img
class="inline-block avatar w-6 h-6 rounded-full"
src="./assets/img/users/21.jpg"
alt="Image Description"
/>
</div>
<span class="text-gray-500 dark:text-white/70 flex text-xs"
><i class="ri-time-line ltr:mr-1 rtl:ml-1 my-auto"></i
>10-04-23</span
>
</div>
</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-3">
<div class="box">
<div class="box-header">
<div class="flex justify-between">
<h5 class="box-title my-auto">Recent Messages</h5>
<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="">
<li
class="p-0 mb-5 ti-list-group border-0 text-gray-800 dark:text-white w-full"
>
<div class="flex items-start w-full">
<a routerLink="/mail/chat" class="ltr:mr-2 rtl:ml-2 avatar rounded-full">
<img
src="./assets/img/users/17.jpg"
alt="img"
class="rounded-full"
/>
</a>
<div class="flex justify-between relative w-full">
<a
aria-label="anchor"
routerLink="/mail/chat"
class="absolute h-full w-full inset-0"
></a>
<div class="">
<h5
class="text-sm text-gray-800 dark:text-white font-semibold"
>
Elon Isk
</h5>
<span class="text-xs text-gray-500 dark:text-white/70"
>Hello there! How are you doing? Call me when...</span
>
</div>
<div class="min-w-fit ltr:ml-2 rtl:mr-2 text-end">
<p class="text-xs text-gray-500 dark:text-white/70 mb-1">
2 min
</p>
<span
class="relative inline-flex rounded-full h-5 w-5 bg-primary text-white justify-center items-center"
>2</span
>
</div>
</div>
</div>
</li>
<li
class="p-0 mb-5 ti-list-group border-0 text-gray-800 dark:text-white w-full"
>
<div class="flex items-start w-full">
<a routerLink="/mail/chat" class="ltr:mr-2 rtl:ml-2 avatar rounded-full">
<img
src="./assets/img/users/2.jpg"
alt="img"
class="rounded-full"
/>
</a>
<div class="flex justify-between relative w-full">
<a
aria-label="anchor"
routerLink="/mail/chat"
class="absolute h-full w-full inset-0"
></a>
<div class="">
<h5
class="text-sm text-gray-800 dark:text-white font-semibold"
>
Shakira Sen
</h5>
<span class="text-xs text-gray-500 dark:text-white/70"
>I would like to discuss about that assets...</span
>
</div>
<div class="min-w-fit ltr:ml-2 rtl:mr-2 text-end">
<p class="text-xs text-gray-500 dark:text-white/70 mb-1">
09:43
</p>
</div>
</div>
</div>
</li>
<li
class="p-0 mb-5 ti-list-group border-0 text-gray-800 dark:text-white w-full"
>
<div class="flex items-start w-full">
<a routerLink="/mail/chat" class="ltr:mr-2 rtl:ml-2 avatar rounded-full">
<img
src="./assets/img/users/21.jpg"
alt="img"
class="rounded-full"
/>
</a>
<div class="flex justify-between relative w-full">
<a
aria-label="anchor"
routerLink="/mail/chat"
class="absolute h-full w-full inset-0"
></a>
<div class="">
<h5
class="text-sm text-gray-800 dark:text-white font-semibold"
>
Sebastian
</h5>
<span class="text-xs text-gray-500 dark:text-white/70"
>Shall we go to the cafe at downtown...</span
>
</div>
<div class="min-w-fit ltr:ml-2 rtl:mr-2 text-end">
<p class="text-xs text-gray-500 dark:text-white/70 mb-1">
yesterday
</p>
<span
class="relative inline-flex rounded-full h-5 w-5 bg-primary text-white justify-center items-center"
>2</span
>
</div>
</div>
</div>
</li>
<li
class="p-0 mb-5 ti-list-group border-0 text-gray-800 dark:text-white w-full"
>
<div class="flex items-start w-full">
<a routerLink="/mail/chat" class="ltr:mr-2 rtl:ml-2 avatar rounded-full">
<img
src="./assets/img/users/11.jpg"
alt="img"
class="rounded-full"
/>
</a>
<div class="flex justify-between relative w-full">
<a
aria-label="anchor"
routerLink="/mail/chat"
class="absolute h-full w-full inset-0"
></a>
<div class="">
<h5
class="text-sm text-gray-800 dark:text-white font-semibold"
>
Charlie Davieson
</h5>
<span class="text-xs text-gray-500 dark:text-white/70"
>Lorem ipsum dolor sit amet, consectetur</span
>
</div>
<div class="min-w-fit ltr:ml-2 rtl:mr-2 text-end">
<p class="text-xs text-gray-500 dark:text-white/70 mb-1">
yesterday
</p>
</div>
</div>
</div>
</li>
<li
class="p-0 mb-0 ti-list-group border-0 text-gray-800 dark:text-white w-full"
>
<div class="flex items-start w-full">
<a routerLink="/mail/chat" class="ltr:mr-2 rtl:ml-2 avatar rounded-full">
<img
src="./assets/img/users/3.jpg"
alt="img"
class="rounded-full"
/>
</a>
<div class="flex justify-between relative w-full">
<a
aria-label="anchor"
routerLink="/mail/chat"
class="absolute h-full w-full inset-0"
></a>
<div class="">
<h5
class="text-sm text-gray-800 dark:text-white font-semibold"
>
Selena Deoyl
</h5>
<span class="text-xs text-gray-500 dark:text-white/70"
>Phasellus vehicula at enim a pulvinar</span
>
</div>
<div class="min-w-fit ltr:ml-2 rtl:mr-2 text-end">
<p class="text-xs text-gray-500 dark:text-white/70 mb-1">
yesterday
</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-span-12 md:col-span-6 xxl:col-span-3">
<div class="box">
<div class="box-header">
<div class="flex">
<h5 class="box-title my-auto">Pending Bills</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>
<div class="box-body">
<ul class="flex flex-col">
<li
class="flex flex-col gap-x-3.5 bg-white text-gray-800 dark:bg-bgdark dark:border-white/10 dark:text-white pb-1 rounded-sm mb-3"
>
<a href="javascript:void(0);">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3 rtl:space-x-reverse">
<div>
<span
class="avatar avatar-sm bg-primary/20 text-primary rounded-sm p-2.5"
>
<i class="ri ri-bill-line leading-none text-xl"></i>
</span>
</div>
<div class="ltr:ml-3 rtl:mr-3">
<h3 class="text-sm font-semibold">Bills</h3>
<p class="text-xs text-gray-500 dark:text-white/70">$250</p>
</div>
</div>
<div class="space-x-2">
<i
class="ri ri-arrow-right-s-line text-gray-500 dark:text-white/70 text-lg rtl:rotate-180"
></i>
</div>
</div>
</a>
</li>
<li
class="flex flex-col gap-x-3.5 bg-white text-gray-800 dark:bg-bgdark dark:border-white/10 dark:text-white py-1 rounded-sm mb-3"
>
<a href="javascript:void(0);">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3 rtl:space-x-reverse">
<div>
<span
class="avatar avatar-sm bg-secondary/20 text-secondary rounded-sm p-2.5"
>
<i
class="ri ri-shopping-basket-line leading-none text-xl"
></i>
</span>
</div>
<div class="ltr:ml-3 rtl:mr-3">
<h3 class="text-sm font-semibold">Shopping</h3>
<p class="text-xs text-gray-500 dark:text-white/70">$236</p>
</div>
</div>
<div class="space-x-2">
<i
class="ri ri-arrow-right-s-line text-gray-500 dark:text-white/70 text-lg rtl:rotate-180"
></i>
</div>
</div>
</a>
</li>
<li
class="flex flex-col gap-x-3.5 bg-white text-gray-800 dark:bg-bgdark dark:border-white/10 dark:text-white py-1 rounded-sm mb-3"
>
<a href="javascript:void(0);">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3 rtl:space-x-reverse">
<div>
<span
class="avatar avatar-sm bg-warning/20 text-warning rounded-sm p-2.5"
>
<i class="ri ri-compass-line leading-none text-xl"></i>
</span>
</div>
<div class="ltr:ml-3 rtl:mr-3">
<h3 class="text-sm font-semibold">Travel</h3>
<p class="text-xs text-gray-500 dark:text-white/70">$236</p>
</div>
</div>
<div class="space-x-2">
<i
class="ri ri-arrow-right-s-line text-gray-500 dark:text-white/70 text-lg rtl:rotate-180"
></i>
</div>
</div>
</a>
</li>
<li
class="flex flex-col gap-x-3.5 bg-white text-gray-800 dark:bg-bgdark dark:border-white/10 dark:text-white py-1 rounded-sm mb-3"
>
<a href="javascript:void(0);">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3 rtl:space-x-reverse">
<div>
<span
class="avatar avatar-sm bg-info/20 text-info rounded-sm p-2.5"
>
<i class="ri ri-cake-3-line leading-none text-xl"></i>
</span>
</div>
<div class="ltr:ml-3 rtl:mr-3">
<h3 class="text-sm font-semibold">Food</h3>
<p class="text-xs text-gray-500 dark:text-white/70">
$2635
</p>
</div>
</div>
<div class="space-x-2">
<i
class="ri ri-arrow-right-s-line text-gray-500 dark:text-white/70 text-lg rtl:rotate-180"
></i>
</div>
</div>
</a>
</li>
<li
class="flex flex-col gap-x-3.5 bg-white text-gray-800 dark:bg-bgdark dark:border-white/10 dark:text-white py-1 rounded-sm mb-3"
>
<a href="javascript:void(0);">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3 rtl:space-x-reverse">
<div>
<span
class="avatar avatar-sm bg-danger/20 text-danger rounded-sm p-2.5"
>
<i class="ri ri-bit-coin-line leading-none text-xl"></i>
</span>
</div>
<div class="ltr:ml-3 rtl:mr-3">
<h3 class="text-sm font-semibold">Stocks</h3>
<p class="text-xs text-gray-500 dark:text-white/70">
$2663
</p>
</div>
</div>
<div class="space-x-2">
<i
class="ri ri-arrow-right-s-line text-gray-500 dark:text-white/70 text-lg rtl:rotate-180"
></i>
</div>
</div>
</a>
</li>
<li
class="flex flex-col gap-x-3.5 bg-white text-gray-800 dark:bg-bgdark dark:border-white/10 dark:text-white pt-1 rounded-sm"
>
<a href="javascript:void(0);">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3 rtl:space-x-reverse">
<div>
<span
class="avatar avatar-sm bg-success/20 text-success rounded-sm p-2.5"
>
<i class="ri ri-more-line leading-none text-xl"></i>
</span>
</div>
<div class="ltr:ml-3 rtl:mr-3">
<h3 class="text-sm font-semibold">Others</h3>
<p class="text-xs text-gray-500 dark:text-white/70">
$3656
</p>
</div>
</div>
<div class="space-x-2">
<i
class="ri ri-arrow-right-s-line text-gray-500 dark:text-white/70 text-lg rtl:rotate-180"
></i>
</div>
</div>
</a>
</li>
</ul>
</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"
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 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 truncate timeline-widget-content text-sm text-wrap !max-w-[15rem]"
>
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 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">Quick Transfer</div>
<div>
<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="lg:grid hidden grid-cols-5 mb-2">
<a href="javascript:void(0);">
<img
class="avatar avatar-sm rounded-full"
src="./assets/img/users/2.jpg"
alt="Image Description"
/>
</a>
<a href="javascript:void(0);">
<img
class="avatar avatar-sm rounded-full"
src="./assets/img/users/12.jpg"
alt="Image Description"
/>
</a>
<a href="javascript:void(0);">
<img
class="avatar avatar-sm rounded-full"
src="./assets/img/users/4.jpg"
alt="Image Description"
/>
</a>
<a href="javascript:void(0);">
<img
class="avatar avatar-sm rounded-full"
src="./assets/img/users/3.jpg"
alt="Image Description"
/>
</a>
<a
href="javascript:void(0);"
aria-label="anchor"
class="m-0 w-[2.375rem] h-[2.375rem] rounded-full ti-btn bg-gray-100 text-gray-500 hover:text-gray-600 hover:bg-gray-200 ring-offset-white focus:ring-gray-500 dark:bg-black/20 dark:hover:bg-black/30 dark:focus:ring-gray-600 dark:text-white/70 dark:focus:ring-offset-white/10"
>
<i class="ri-arrow-right-s-line rtl:rotate-180"></i>
</a>
</div>
<div class="mb-2">
<label for="input-label" class="ti-form-label">Send To</label>
<input
type="text"
id="input-label"
class="ti-form-input"
placeholder="Account Number"
value="2563658568556"
/>
</div>
<div class="mb-2">
<label for="input-label2" class="ti-form-label">Enter Amount</label>
<input
type="number"
id="input-label2"
class="ti-form-input"
placeholder="Enter Amount"
value="2350"
/>
</div>
<div class="mb-2">
<label for="input-label2" class="ti-form-label">Enter Notes</label>
<textarea
class="ti-form-input"
rows="1"
placeholder="Add some notes here"
></textarea>
</div>
<div class="flex justify-between">
<a
href="javascript:void(0);"
class="mb-0 w-full ti-btn ti-btn-primary"
>Send Money</a
>
<a href="javascript:void(0);" class="mb-0 w-full ti-btn ti-btn-danger"
>Cancel</a
>
</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 Trasaction history</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">Recipient</th>
<th scope="col" class="dark:text-white/80">Transaction Id</th>
<th scope="col" class="dark:text-white/80">Date</th>
<th scope="col" class="dark:text-white/80">Amount</th>
<th scope="col" class="dark:text-white/80">Type</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 transaction of Transactions">
<td>{{ transaction.id }}</td>
<td>
<div class="flex space-x-3 rtl:space-x-reverse text-start">
<img
class="avatar avatar-sm rounded-sm"
src="{{ transaction.src }}"
alt="Image Description"
/>
<div class="block my-auto truncate">
<p
class="block text-sm font-semibold my-auto text-gray-800 dark:text-white"
>
{{ transaction.name }}
</p>
<span
class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto min-w-[180px]"
>{{ transaction.mail }}</span
>
</div>
</div>
</td>
<td>{{ transaction.tranId }}</td>
<td>{{ transaction.date }}</td>
<td>{{ transaction.amount }}</td>
<td>{{ transaction.type }}</td>
<td>
<span
class="truncate whitespace-nowrap inline-block py-1 px-3 rounded-full text-xs font-medium bg-{{
transaction.background
}}/10 text-{{ transaction.textcolor }}/80"
>{{ transaction.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="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(transaction.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="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 -->