feat: add Master Admin application functionality

src/app/shared/components/data-table/data-table.html

@@ -1,28 +1,37 @@
 <!-- Start::row-1 -->
-<div class="grid grid-cols-12">
+<div class="grid grid-cols-12 data-table-modern">
   <div class="xl:col-span-12 col-span-12">
     <div class="box overflow-visible">
-      <div class="box-header justify-between">
-        <div class="box-title">
+      <div class="box-header justify-between items-center gap-3">
+        <h5 class="box-title">
           {{ tableTitle () }}
-        </div>
-        <div class="flex flex-wrap gap-2">
+        </h5>
+        <div class="flex flex-wrap items-center gap-3">
           @if(showAddButton()){
-
-          <app-button action="add" [label]="buttonTitle()" size="sm" iconClass="!text-[1rem]"
-            (buttonClicked)="onAddClick($event)" appTooltip="Add Country"/>
-          }
-          @if (showSearch()) {
           <div>
-            <input #searchInput class="form-control form-control-sm" type="text" [placeholder]="searchPlaceholder()"
-              aria-label="table search" (input)="onSearch(searchInput.value)">
+            <app-button action="add" [label]="buttonTitle()" size="sm" iconClass="!text-[1rem]"
+              className="!rounded-full shadow-sm" (buttonClicked)="onAddClick($event)" />
+
+          </div>
+          }
+          <!-- @if (toolbarTemplate(); as toolbar) {
+          <div>
+            <ng-container [ngTemplateOutlet]="toolbar.templateRef" />
+          </div>
+          } -->
+          @if (showSearch()) {
+          <div class="search-wrapper">
+            <i class="ri-search-line search-icon"></i>
+            <input #searchInput class="form-control form-control-sm brdr-clr" type="text"
+              [placeholder]="searchPlaceholder()" aria-label="table search" (input)="onSearch(searchInput.value)">
           </div>
           }
 
         </div>
       </div>
-      <div class="box-body !p-0">
-        <div class="table-responsive overflow-x-auto overflow-y-visible">
+
+      <div class="box-body !p-0 modern-table-body">
+        <div class="table-responsive overflow-x-auto overflow-y-visible modern-table-wrapper">
           <table [class]="tableClass()">
             <thead>
               <tr [class]="trHeadClass()">
@@ -48,7 +57,7 @@
             <tbody>
               @if (loading()) {
               <tr class="border-b border-defaultborder">
-                <td [attr.colspan]="colspan()" class="py-10">
+                <td [attr.colspan]="totalVisibleColumns()" class="py-10">
                   <div class="flex flex-col items-center justify-center gap-3 text-center">
                     <i class="ti ti-loader-2 animate-spin text-[1.5rem]"></i>
                     <span class="text-[0.875rem]">Loading data...</span>
@@ -56,9 +65,24 @@
                 </td>
               </tr>
               } @else if (rows().length === 0) {
-              <tr class="border-b border-defaultborder">
-                <td [attr.colspan]="colspan()" class="py-10 text-center">
-                  <span class="text-[0.875rem]">{{ emptyMessage() }}</span>
+              <tr class="border-b border-defaultborder bg-light/30 dark:bg-black/10">
+                <td [attr.colspan]="totalVisibleColumns()" class="p-0">
+                  <div class="flex min-h-[140px] flex-col items-center justify-center px-4 py-8 text-center">
+                    <div
+                      class="mb-3 inline-flex h-11 w-11 items-center justify-center rounded-full bg-primary/10 text-primary dark:bg-primary/15">
+                      <i class="ti ti-database-off text-[1.25rem]" aria-hidden="true"></i>
+                    </div>
+
+                    <p class="text-sm font-semibold text-defaulttextcolor dark:text-white/80">
+                      {{ emptyMessage() }}
+                    </p>
+
+                    @if (emptyDescription()) {
+                    <p class="mt-1 max-w-md text-sm text-textmuted">
+                      {{ emptyDescription() }}
+                    </p>
+                    }
+                  </div>
                 </td>
               </tr>
               } @else
@@ -87,10 +111,10 @@
                     <button type="button" cdkOverlayOrigin #actionMenuOrigin="cdkOverlayOrigin" data-action-menu-trigger
                       class="
           ti-btn ti-btn-icon ti-btn-sm ti-btn-primary
-          !m-0 !h-8 !w-8 !p-0
+          !m-0 !h-6 !w-6 !p-0
         " aria-label="Open row actions" aria-haspopup="menu" [attr.aria-controls]="getActionMenuId(row)"
                       [attr.aria-expanded]="isActionMenuOpen(row)" (click)="toggleActionMenu($event, row)">
-                      <i class="ri-more-2-fill text-lg"></i>
+                      <i class="ri-more-2-fill text-sm"></i>
                     </button>
 
                     <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="actionMenuOrigin"
@@ -145,7 +169,7 @@
         </div>
       </div>
       @if (showPaginator()) {
-      <div class="box-footer border-t-0">
+      <div class="box-footer border-t-0 modern-table-footer">
         <div class="flex items-center justify-between flex-wrap gap-3">
 
           <!-- Record details and page-size selection -->