<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 -->