feat: add Master Admin application functionality

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

@@ -6,16 +6,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DataTableCellDirective } from '../../directives/data-table-cell.directive';
 import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedPosition } from '@angular/cdk/overlay';
-import { TooltipDirective } from '../../directives/tooltip/tooltip.directive';
 
 import { DataTableAction, DataTableActionEvent, DataTableCellContext, DataTableColumn, DataTablePageEvent, DataTableRecord, DataTableSortEvent } from './data-table.types';
 
 import { Button } from '../button/button';
+import { contentChild } from '@angular/core';
+
+import { DataTableToolbarDirective } from '../../directives/data-table-toolbar/data-table-toolbar.directive';
 
 @Component({
   selector: 'app-data-table',
-  imports: [NgTemplateOutlet, MatPaginatorModule, CdkOverlayOrigin,
-    CdkConnectedOverlay, Button, TooltipDirective],
+  imports: [NgTemplateOutlet,
+    MatPaginatorModule,
+    CdkOverlayOrigin,
+    CdkConnectedOverlay,
+    Button],
   templateUrl: './data-table.html',
   styleUrl: './data-table.scss',
   standalone: true
@@ -27,6 +32,7 @@ export class DataTable<T extends DataTableRecord = DataTableRecord> {
   private readonly searchTerms$ = new Subject<string>();
 
   readonly cellTemplates = contentChildren(DataTableCellDirective);
+  readonly toolbarTemplate = contentChild(DataTableToolbarDirective);
 
   private readonly defaultRowClasses = [
     'table-primary',
@@ -86,21 +92,24 @@ export class DataTable<T extends DataTableRecord = DataTableRecord> {
 
   totalRecords = input(0);
   pageIndex = input(1);
-  pageSize = input(10);
-  pageSizeOptions = input<number[]>([5, 10, 20, 50]);
+  pageSize = input(15);
+  pageSizeOptions = input<number[]>([10, 15, 20, 50]);
   showPaginator = input(true);
 
   /*---------------------------*/
 
-  tableTitle  = input<string>('');
+  tableTitle = input<string>('');
+  toolTip = input<string>('');
   buttonTitle = input<string>('');
 
   /* --------- Search inputs ---- */
   showSearch = input<boolean>(false);
+  showformSelect = input<boolean>(false);
   showAddButton = input<boolean>(false);
   searchPlaceholder = input('Search...');
   searchDebounceTime = input(300);
   emptyMessage = input('No records found');
+  emptyDescription = input('There is currently no data to display.');
   /*---------------------------*/
 
   /* --------- Permission inputs ---- */
@@ -119,7 +128,7 @@ export class DataTable<T extends DataTableRecord = DataTableRecord> {
   sortDirection = signal<'asc' | 'desc'>('asc');
   openActionRowId = signal<string | number | null>(null);
 
-  tableClass = input<string>('table table-hover whitespace-nowrap min-w-full');
+  tableClass = input<string>('table table-bordered whitespace-nowrap min-w-full');
   tableHeadClass = input<string>('');
   tableBodyClass = input<string>('');
   trHeadClass = input<string>('border-b border-defaultborder bg-primary/10 dark:bg-primary/15 dark:border-defaultborder/10');
@@ -133,7 +142,7 @@ export class DataTable<T extends DataTableRecord = DataTableRecord> {
   actionCellClass = input<string>('!text-center');
   addClicked = output<void>();
 
-  colspan = computed(() => this.columns().length + (this.actions().length > 0 ? 1 : 0));
+  totalVisibleColumns = computed(() => this.columns().length + (this.actions().length > 0 ? 1 : 0));
 
   allowedPermissionSet = computed(() => new Set(this.allowedPermissions()));
 
@@ -383,7 +392,7 @@ export class DataTable<T extends DataTableRecord = DataTableRecord> {
   }
 
   getHeaderClass(column: DataTableColumn<T>): string {
-    return this.composeClass(this.defaultThClass(), this.getAlignClass(column.align), column.headerClass);
+    return this.composeClass(this.defaultThClass(), this.getAlignClass(column.headerAlign), column.headerClass);
   }
 
   getCellClass(column: DataTableColumn<T>): string {