<app-page-header title="Analytics Dashboard" title1="Analytics Dashboard" activeitem="Home" ></app-page-header> <!-- Start::row-1 --> <div class="grid grid-cols-12 gap-x-6"> <div class="col-span-12 xxl:col-span-9"> <div class="grid grid-cols-12 gap-x-6"> <div class="col-span-12 md:col-span-4"> <div class="box"> <div class="box-body"> <div class="flex items-start"> <div class="ltr:mr-4 rtl:ml-4"> <span class="avatar bg-primary/20 text-primary text-2xl p-3 rounded-sm" ><i class="ri-flag-2-line leading-none"></i ></span> </div> <div class="flex-1"> <div class="font-medium text-sm mb-1">Total Sessions</div> <div class="flex flex-wrap items-center justify-between mb-1"> <h5 class="text-xl font-bold text-gray-800 dark:text-white"> 1,289 </h5> <span class="badge bg-success/20 text-success rounded-sm py-1" >+12.2%</span > </div> <p class="text-gray-500 dark:text-white/70 mb-0 text-xs"> since last 2 months </p> </div> </div> </div> </div> </div> <div class="col-span-12 md:col-span-4"> <div class="box"> <div class="box-body"> <div class="flex items-start"> <div class="ltr:mr-4 rtl:ml-4"> <span class="avatar bg-secondary/20 text-secondary text-2xl p-3 rounded-sm" ><i class="ri-share-circle-line leading-none"></i ></span> </div> <div class="flex-1"> <div class="font-medium text-sm mb-1">Bounce Rate</div> <div class="flex flex-wrap items-center justify-between mb-1"> <h5 class="text-xl font-bold text-gray-800 dark:text-white"> 19.8% </h5> <span class="badge bg-danger/20 text-danger rounded-sm py-1" >-2.6%</span > </div> <p class="text-gray-500 dark:text-white/70 mb-0 text-xs"> since last 2 months </p> </div> </div> </div> </div> </div> <div class="col-span-12 md:col-span-4"> <div class="box"> <div class="box-body"> <div class="flex items-start"> <div class="ltr:mr-4 rtl:ml-4"> <span class="avatar bg-danger/20 text-danger text-2xl p-3 rounded-sm" ><i class="ri-eye-line leading-none"></i ></span> </div> <div class="flex-1"> <div class="font-medium text-sm mb-1">Page Views</div> <div class="flex flex-wrap items-center justify-between mb-1"> <h5 class="text-xl font-bold text-gray-800 dark:text-white"> 15,250 </h5> <span class="badge bg-success/20 text-success rounded-sm py-1" >+35.6%</span > </div> <p class="text-gray-500 dark:text-white/70 mb-0 text-xs"> since last 2 months </p> </div> </div> </div> </div> </div> <div class="col-span-12 lg:col-span-8"> <div class="box"> <div class="box-header"> <div class="flex justify-between"> <h5 class="box-title my-auto">Session Overview</h5> <div class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto" > <button type="button" class="hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-1 px-3 !border border-gray-200 text-gray-400 hover:text-gray-500 hover:bg-gray-200 hover:border-gray-200 focus:ring-gray-200 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10" > This year <i class="ti ti-chevron-down"></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu hidden"> <a class="ti-dropdown-item" href="javascript:void(0)" >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"> <div id="audienceReport"> <apx-chart [series]="chartOptions4.series" [chart]="chartOptions4.chart" [xaxis]="chartOptions4.xaxis" [stroke]="chartOptions4.stroke" [tooltip]="chartOptions4.tooltip" [dataLabels]="chartOptions4.dataLabels" [markers]="chartOptions4.markers" [grid]="chartOptions4.grid" [yaxis]="chartOptions4.yaxis" [plotOptions]="chartOptions4.plotOptions" ></apx-chart> </div> </div> </div> </div> <div class="col-span-12 lg:col-span-4"> <div class="box"> <div class="box-header"> <div class="flex justify-between"> <h5 class="box-title my-auto">Visitors By Countries</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="flex flex-col"> <li class="p-0 mb-4 ti-list-group border-0 text-gray-800 dark:text-white" > <a href="javascript:void(0);" class="w-full"> <div class="flex items-center"> <div class="avatar avatar-xs rounded-sm"> <img src="./assets/img/flags/10.png" alt="" /> </div> <div class="ltr:ml-3 rtl:mr-3 flex-auto"> <span class="text-sm">United States</span> </div> <div> <span class="badge rounded-sm bg-gray-100 text-gray-500 dark:bg-black/20 dark:text-white" >32,190</span > </div> </div> </a> </li> <li class="p-0 mb-4 ti-list-group border-0 text-gray-800 dark:text-white" > <a href="javascript:void(0);" class="w-full"> <div class="flex items-center"> <div class="avatar avatar-xs rounded-sm"> <img src="./assets/img/flags/1.png" alt="" /> </div> <div class="ltr:ml-3 rtl:mr-3 flex-auto"> <span class="text-sm">Argentina</span> </div> <div> <span class="badge rounded-sm bg-gray-100 text-gray-500 dark:bg-black/20 dark:text-white" >17,578</span > </div> </div> </a> </li> <li class="p-0 mb-4 ti-list-group border-0 text-gray-800 dark:text-white" > <a href="javascript:void(0);" class="w-full"> <div class="flex items-center"> <div class=""> <img src="./assets/img/flags/4.png" alt="" class="avatar avatar-xs rounded-sm" /> </div> <div class="ltr:ml-3 rtl:mr-3 flex-auto"> <span class="text-sm">Germany</span> </div> <div> <span class="badge rounded-sm bg-gray-100 text-gray-500 dark:bg-black/20 dark:text-white" >8,798</span > </div> </div> </a> </li> <li class="p-0 mb-4 ti-list-group border-0 text-gray-800 dark:text-white" > <a href="javascript:void(0);" class="w-full"> <div class="flex items-center"> <div class=""> <img src="./assets/img/flags/5.png" alt="" class="avatar avatar-xs rounded-sm" /> </div> <div class="ltr:ml-3 rtl:mr-3 flex-auto"> <span class="text-sm">Mexico</span> </div> <div> <span class="badge rounded-sm bg-gray-100 text-gray-500 dark:bg-black/20 dark:text-white" >16,885</span > </div> </div> </a> </li> <li class="p-0 mb-4 ti-list-group border-0 text-gray-800 dark:text-white" > <a href="javascript:void(0);" class="w-full"> <div class="flex items-center"> <div class=""> <img src="./assets/img/flags/7.png" alt="" class="avatar avatar-xs rounded-sm" /> </div> <div class="ltr:ml-3 rtl:mr-3 flex-auto"> <span class="text-sm">Russia</span> </div> <div> <span class="badge rounded-sm bg-gray-100 text-gray-500 dark:bg-black/20 dark:text-white" >10,118</span > </div> </div> </a> </li> <li class="p-0 mb-4 ti-list-group border-0 text-gray-800 dark:text-white" > <a href="javascript:void(0);" class="w-full"> <div class="flex items-center"> <div class=""> <img src="./assets/img/flags/2.png" alt="" class="avatar avatar-xs rounded-sm" /> </div> <div class="ltr:ml-3 rtl:mr-3 flex-auto"> <span class="text-sm">Cannada</span> </div> <div> <span class="badge rounded-sm bg-gray-100 text-gray-500 dark:bg-black/20 dark:text-white" >1,678</span > </div> </div> </a> </li> <li class="p-0 mb-0 ti-list-group border-0 text-gray-800 dark:text-white" > <a href="javascript:void(0);" class="w-full"> <div class="flex items-center"> <div class=""> <img src="./assets/img/flags/6.png" alt="" class="avatar avatar-xs rounded-sm" /> </div> <div class="ltr:ml-3 rtl:mr-3 flex-auto"> <span class="text-sm">Malaysia</span> </div> <div> <span class="badge rounded-sm bg-gray-100 text-gray-500 dark:bg-black/20 dark:text-white" >6,578</span > </div> </div> </a> </li> </ul> </div> </div> </div> </div> </div> <div class="col-span-12 xxl:col-span-3"> <div class="box overflow-hidden"> <div class="box-body"> <div class="flex mb-4"> <h5 class="box-title my-auto">Active Users</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 text-gray-500 dark:text-white/70 p-0 border-0 shadow-none" > <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 Acttion</a > <a class="ti-dropdown-item" href="javascript:void(0)" >Something Else Here</a > </div> </div> </div> <div class="flex"> <div class="ltr:mr-2 rtl:ml-2 my-auto"> <span class="avatar rounded-full bg-primary text-white text-xl p-3" ><i class="ri-pulse-line leading-none"></i ></span> </div> <div class="flex-1"> <p class="text-2xl text-gray-800 dark:text-white font-medium"> 12,890<span class="text-success text-xs ltr:ml-2 rtl:mr-2" ><i class="ri-arrow-right-up-line text-xs"></i>10.5%</span > </p> <p class="mb-0 text-xs text-gray-500 dark:text-white/70"> Currently active now </p> </div> </div> </div> </div> <div class="box"> <div class="box-header"> <div class="flex justify-between"> <h5 class="box-title my-auto">Device views</h5> <div class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto" > <button type="button" class="hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-1 px-3 !border border-gray-200 text-gray-400 hover:text-gray-500 hover:bg-gray-200 hover:border-gray-200 focus:ring-gray-200 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10" > This year <i class="ti ti-chevron-down"></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu hidden"> <a class="ti-dropdown-item" href="javascript:void(0)">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"> <div id="sessions"> <apx-chart [series]="chartOptions.series" [chart]="chartOptions.chart" [labels]="chartOptions.labels" [legend]="chartOptions.legend" [colors]="chartOptions.colors" [responsive]="chartOptions.responsive" [dataLabels]="chartOptions.dataLabels" ></apx-chart> </div> </div> </div> </div> </div> <!-- End::row-1 --> <!-- Start::row-2 --> <div class="grid grid-cols-12 gap-x-6"> <div class="col-span-12 xxl:col-span-4"> <div class="box"> <div class="box-header"> <div class="flex"> <h5 class="box-title my-auto">Sessions By Gender</h5> <div class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto" > <button type="button" aria-label="button" class="hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-2 bg-white !border border-gray-200 text-gray-500 hover:bg-gray-100 focus:ring-gray-200 dark:bg-black/20 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10" > <i class="text-sm leading-none ti ti-dots-vertical"></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu"> <a class="ti-dropdown-item" href="javascript:void(0)">Download</a> <a class="ti-dropdown-item" href="javascript:void(0)">Import</a> <a class="ti-dropdown-item" href="javascript:void(0)">Export</a> </div> </div> </div> </div> <div class="box-body"> <div id="session2" class="flex justify-center"> <apx-chart [series]="chartOptions1.series" [chart]="chartOptions1.chart" [labels]="chartOptions1.labels" [colors]="chartOptions1.colors" [fill]="chartOptions1.fill" [legend]="chartOptions1.legend" [stroke]="chartOptions1.stroke" [responsive]="chartOptions1.responsive" ></apx-chart> </div> </div> </div> </div> <div class="col-span-12 xxl:col-span-4"> <div class="box"> <div class="box-header"> <div class="flex"> <h5 class="box-title my-auto">Traffic Sources</h5> <div class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto" > <button type="button" aria-label="button" class="hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-2 bg-white !border border-gray-200 text-gray-500 hover:bg-gray-100 focus:ring-gray-200 dark:bg-black/20 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10" > <i class="text-sm leading-none ti ti-dots-vertical"></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu"> <a class="ti-dropdown-item" href="javascript:void(0)">Download</a> <a class="ti-dropdown-item" href="javascript:void(0)">Import</a> <a class="ti-dropdown-item" href="javascript:void(0)">Export</a> </div> </div> </div> </div> <div class="box-body p-0"> <div class="overflow-auto"> <table class="ti-custom-table ti-custom-table-head"> <thead> <tr> <th scope="col">Browser</th> <th scope="col">Sessions</th> <th scope="col">Traffic</th> </tr> </thead> <tbody> <tr> <td class=""> <div class="flex items-center"> <div class="ltr:mr-2 rtl:ml-2"> <span class="avatar avatar-xs rounded-sm bg-primary/20 text-primary p-1.5" ><i class="ri-chrome-line text-xl leading-none"></i ></span> </div> <p class="mb-0">Chrome</p> </div> </td> <td class=""> 20,937<i class="ri-arrow-up-s-fill ltr:ml-2 rtl:mr-2 text-base text-success my-auto" ></i> </td> <td class=""> <div class="ti-main-progress h-2 bg-gray-200 dark:bg-black/20" > <div class="ti-main-progress-bar bg-primary text-xs text-white text-center" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" ></div> </div> </td> </tr> <tr> <td class=""> <div class="flex items-center"> <div class="ltr:mr-2 rtl:ml-2"> <span class="avatar avatar-xs rounded-sm bg-secondary/20 text-secondary p-1.5" ><i class="ri-safari-line text-xl leading-none"></i ></span> </div> <p class="mb-0">Safari</p> </div> </td> <td class=""> 23,379<i class="ri-arrow-up-s-fill ltr:ml-2 rtl:mr-2 text-base text-success my-auto" ></i> </td> <td class=""> <div class="ti-main-progress h-2 bg-gray-200 dark:bg-black/20" > <div class="ti-main-progress-bar bg-secondary text-xs text-white text-center" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" ></div> </div> </td> </tr> <tr> <td class=""> <div class="flex items-center"> <div class="ltr:mr-2 rtl:ml-2"> <span class="avatar avatar-xs rounded-sm bg-danger/20 text-danger p-1.5" ><i class="ri-opera-line text-xl leading-none"></i ></span> </div> <p class="mb-0">Opera</p> </div> </td> <td class=""> 20,582<i class="ri-arrow-down-s-fill ltr:ml-2 rtl:mr-2 text-base text-danger my-auto" ></i> </td> <td class=""> <div class="ti-main-progress h-2 bg-gray-200 dark:bg-black/20" > <div class="ti-main-progress-bar bg-danger text-xs text-white text-center" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" ></div> </div> </td> </tr> <tr> <td class=""> <div class="flex items-center"> <div class="ltr:mr-2 rtl:ml-2"> <span class="avatar avatar-xs rounded-sm bg-warning/20 text-warning p-1.5" ><i class="ri-firefox-line text-xl leading-none"></i ></span> </div> <p class="mb-0">Firefox</p> </div> </td> <td class=""> 18,120<i class="ri-arrow-up-s-fill ltr:ml-2 rtl:mr-2 text-base text-success my-auto" ></i> </td> <td class=""> <div class="ti-main-progress h-2 bg-gray-200 dark:bg-black/20" > <div class="ti-main-progress-bar bg-warning text-xs text-white text-center" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" ></div> </div> </td> </tr> <tr> <td class=""> <div class="flex items-center"> <div class="ltr:mr-2 rtl:ml-2"> <span class="avatar avatar-xs rounded-sm bg-success/20 text-success p-1.5" ><i class="ri-edge-line text-xl leading-none"></i ></span> </div> <p class="mb-0">Edge</p> </div> </td> <td class=""> 11,352<i class="ri-arrow-up-s-fill ltr:ml-2 rtl:mr-2 text-base text-danger my-auto" ></i> </td> <td class=""> <div class="ti-main-progress h-2 bg-gray-200 dark:bg-black/20" > <div class="ti-main-progress-bar bg-success text-xs text-white text-center" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" ></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="col-span-12 xxl:col-span-4"> <div class="box"> <div class="box-header"> <div class="flex"> <h5 class="box-title my-auto">Audience Overview</h5> <div class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto" > <button type="button" aria-label="button" class="hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-2 bg-white !border border-gray-200 text-gray-500 hover:bg-gray-100 focus:ring-gray-200 dark:bg-black/20 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10" > <i class="text-sm leading-none ti ti-dots-vertical"></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu"> <a class="ti-dropdown-item" href="javascript:void(0)">Download</a> <a class="ti-dropdown-item" href="javascript:void(0)">Import</a> <a class="ti-dropdown-item" href="javascript:void(0)">Export</a> </div> </div> </div> </div> <div class="box-body"> <ul class="flex flex-wrap space-x-6 rtl:space-x-reverse"> <li> <p class="inline-flex items-center"> <span class="block w-3 h-3 rounded-full ltr:mr-2 rtl:ml-2 border-4 border-primary pointer-events-none" ></span> <span class="flex items-center"> <span class="text-base text-gray-800 dark:text-white font-medium ltr:mr-2 rtl:ml-2 pointer-events-none" >New Visitors</span > </span> </p> </li> <li> <p class="inline-flex items-center"> <span class="block w-3 h-3 rounded-full ltr:mr-2 rtl:ml-2 border-4 border-gray-200 pointer-events-none" ></span> <span class="flex items-center"> <span class="text-base text-gray-800 dark:text-white font-medium ltr:mr-2 rtl:ml-2 pointer-events-none" >Online Visitors</span > </span> </p> </li> </ul> <div id="audience"> <apx-chart [series]="chartOptions2.series" [chart]="chartOptions2.chart" [dataLabels]="chartOptions2.dataLabels" [plotOptions]="chartOptions2.plotOptions" [xaxis]="chartOptions2.xaxis" [stroke]="chartOptions2.stroke" [legend]="chartOptions2.legend" ></apx-chart> </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">Visitors By Channel</h5> <div class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto" > <button id="hs-dropdown-custom-icon-trigger" type="button" class="hs-dropdown-toggle px-2 py-1 ti-btn ti-btn-primary" > Sort By<i class="ri-arrow-down-s-line align-middle"></i> </button> <div class="hs-dropdown-menu ti-dropdown-menu hidden" aria-labelledby="hs-dropdown-custom-icon-trigger" > <a class="ti-dropdown-item" href="javascript:void(0)">New</a> <a class="ti-dropdown-item" href="javascript:void(0)">popular</a> <a class="ti-dropdown-item" href="javascript:void(0)">Relevant</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">Channel</th> <th scope="col" class="dark:text-white/80">Sessions</th> <th scope="col" class="dark:text-white/80">Bounce Rate</th> <th scope="col" class="dark:text-white/80"> Avg Session Duration </th> <th scope="col" class="dark:text-white/80">Target Reached</th> <th scope="col" class="dark:text-white/80"> Pages Per Session </th> <th scope="col" class="dark:text-white/80">Action</th> </tr> </thead> <tbody class=""> <tr class="" *ngFor="let channel of Channels"> <td>{{ channel.id }}</td> <td> <div class="flex items-center"> <span class="avatar avatar-xs bg-{{ channel.background }}/20 rounded-full p-2" > <i class="{{ channel.icon }}"></i> </span> <span class="ltr:ml-2 rtl:mr-2"> {{ channel.name }} </span> </div> </td> <td>{{ channel.sessions }}</td> <td>{{ channel.bouncerate }}</td> <td>{{ channel.duration }}</td> <td> <span class="badge bg-primary/20 rounded-sm text-primary">{{ channel.target }}</span> </td> <td>{{ channel.pages }}</td> <td class="font-medium space-x-2 rtl:space-x-reverse"> <div class="hs-tooltip ti-main-tooltip"> <a href="javascript:void(0);" class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-primary" > <i class="ti ti-eye"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > View </span> </a> </div> <div class="hs-tooltip ti-main-tooltip"> <a href="javascript:void(0);" class="customer-edit m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-secondary" > <i class="ti ti-pencil"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Edit </span> </a> </div> <div class="hs-tooltip ti-main-tooltip"> <a href="javascript:void(0);" class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-danger" (click)="click(channel.id)" > <i class="ti ti-trash"></i> <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" > Delete </span> </a> </div> </td> </tr> </tbody> </table> </div> </div> <div class="box-footer"> <div class="sm:flex items-center"> <div class=""> showing 5 Entries <i class="ri-arrow-right-line ml-2 font-semibold"></i> </div> <div class="ltr:ml-auto rtl:mr-auto"> <nav class="flex justify-center items-center space-x-2 rtl:space-x-reverse" > <a class="text-gray-500 hover:text-primary e py-1 px-2 leading-none inline-flex items-center gap-2 rounded-sm" href="javascript:void(0);" > <span aria-hidden="true">Prev</span> <span class="sr-only">Previous</span> </a> <a class="bg-primary text-white py-1 px-2 leading-none inline-flex items-center text-sm font-medium rounded-sm" href="javascript:void(0);" aria-current="page" >1</a > <a class="text-gray-500 hover:text-primary e py-1 px-2 leading-none inline-flex items-center text-sm font-medium rounded-sm" href="javascript:void(0);" >2</a > <a class="text-gray-500 hover:text-primary e py-1 px-2 leading-none inline-flex items-center text-sm font-medium rounded-sm" href="javascript:void(0);" >3</a > <a class="text-gray-500 hover:text-primary e py-1 px-2 leading-none inline-flex items-center gap-2 rounded-sm" href="javascript:void(0);" > <span class="sr-only">Next</span> <span aria-hidden="true">Next</span> </a> </nav> </div> </div> </div> </div> </div> </div> <!-- End::row-3 -->