ng-tablekit 1.0.0

package/src/app/templates/master-page/master-page.component.ts

@@ -0,0 +1,290 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { CurrencyPipe, Location } from '@angular/common';
+import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { ArrowLeftOutline, DeleteOutline, EditOutline, EyeOutline, FileExcelOutline, FilePdfOutline, FilterOutline, FormOutline, PlusOutline, SearchOutline } from '@ant-design/icons-angular/icons';
+import { jsPDF } from 'jspdf';
+import * as XLSX from 'xlsx';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzIconModule, provideNzIconsPatch } from 'ng-zorro-antd/icon';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzTableModule, NzTableQueryParams } from 'ng-zorro-antd/table';
+import { NzTagModule } from 'ng-zorro-antd/tag';
+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { NzDrawerModule } from 'ng-zorro-antd/drawer';
+import { NzDividerModule } from 'ng-zorro-antd/divider';
+import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { PAGE_SIZE_OPTIONS, STANDARD_COLUMNS, STANDARD_ACTIONS } from '@core/config/table.config';
+import { TABLE_RECORDS } from '@core/data/record.data';
+import { TableRecord } from '@core/models/table.models';
+import { createColumnSortFn, formatDateValue, getStatusColor, globalRecordSearch } from '@core/utils/table.utils';
+import { CopyTemplateButtonComponent } from '@shared/copy-template-button/copy-template-button.component';
+
+import { MasterRecordDrawerComponent } from './master-record-drawer.component';
+import { MasterMapDrawerComponent } from './master-map-drawer.component';
+
+@Component({
+  selector: 'app-master-page',
+  standalone: true,
+  imports: [
+    CurrencyPipe, FormsModule, ReactiveFormsModule, NzButtonModule, NzFormModule, NzIconModule,
+    NzInputModule, NzSelectModule, NzTableModule, NzTagModule, NzDatePickerModule,
+    NzRadioModule, NzDividerModule, NzPopconfirmModule,
+    CopyTemplateButtonComponent, MasterRecordDrawerComponent, MasterMapDrawerComponent
+  ],
+  providers: [...provideNzIconsPatch([ArrowLeftOutline, DeleteOutline, EditOutline, EyeOutline, FileExcelOutline, FilePdfOutline, FilterOutline, FormOutline, PlusOutline, SearchOutline])],
+  templateUrl: './master-page.component.html',
+  styleUrl: './master-page.component.css'
+})
+export class MasterPageComponent {
+  private readonly fb = inject(FormBuilder);
+  private readonly message = inject(NzMessageService);
+  private readonly location = inject(Location);
+
+  protected readonly columns = STANDARD_COLUMNS;
+  protected readonly actions = STANDARD_ACTIONS;
+  protected readonly pageSizeOptions = PAGE_SIZE_OPTIONS;
+  protected readonly getStatusColor = getStatusColor;
+  protected readonly formatDateValue = formatDateValue;
+  protected readonly sortBy = createColumnSortFn<TableRecord>;
+  protected readonly categories = ['Category A', 'Category B', 'Category C', 'Category D'];
+  protected readonly statuses = ['Active', 'Inactive', 'Pending', 'Approved', 'Rejected'];
+
+
+  /* =================================================================
+                HEADER CONTROLS
+     =================================================================*/
+
+  protected reportTitle = 'Master Page';
+  protected showFilter = true;
+  protected showExcel = true;
+  protected showPdf = true;
+  protected showAddAction = true;
+  protected showCategoryFilter = true;
+  protected showMultiselectFilter = true;
+  protected showDateFilter = true;
+  protected showDateRangeFilter = true;
+  protected showRadioFilter = true;
+
+  /* =================================================================
+                  ACTION CONTROLS
+     =================================================================*/
+
+  protected showViewAction = false;
+  protected showEditAction = true;
+  protected showDeleteAction = false;
+  protected showMapAction = true;
+
+  protected readonly filterForm = this.fb.nonNullable.group({
+    category: '',
+    categories: [[] as string[]],
+    date: [null as Date | null],
+    dateRange: [[] as Date[]],
+    status: ''
+  });
+
+  protected filterVisible = false;
+  protected searchText = '';
+  protected pageIndex = 1;
+  private allRecords: TableRecord[] = TABLE_RECORDS.map(record => ({ ...record }));
+  protected records: TableRecord[] = [...this.allRecords];
+  protected currentSort: { key: string | null; value: string | null } = { key: null, value: null };
+
+  // Drawer State
+  protected isDrawerVisible = false;
+  protected drawerMode: 'add' | 'edit' = 'add';
+  protected drawerTitle = '';
+  protected editingRecord: TableRecord | null = null;
+
+  // Map Drawer State
+  protected isMapDrawerVisible = false;
+  protected mappingRecord: TableRecord | null = null;
+
+  protected toggleFilter(): void { this.filterVisible = !this.filterVisible; }
+  protected goBack(): void { this.location.back(); }
+  protected getCurrencyValue(value: unknown): string | number {
+    return typeof value === 'string' || typeof value === 'number' ? value : 0;
+  }
+  protected onSearch(): void { this.applyQuery(); }
+  protected applyFilters(): void {
+    this.applyQuery();
+    this.filterVisible = false;
+  }
+  protected clearFilters(): void {
+    this.filterForm.reset({ category: '', categories: [], date: null, dateRange: [], status: '' });
+    this.applyQuery();
+    this.filterVisible = false;
+  }
+
+  protected onQueryParamsChange(params: NzTableQueryParams): void {
+    const sort = params.sort.find((item: any) => item.value !== null);
+    this.currentSort = { key: sort?.key ?? null, value: sort?.value ?? null };
+  }
+
+  // Drawer Methods
+  protected openAddDrawer(): void {
+    this.drawerMode = 'add';
+    this.drawerTitle = 'Add New Record';
+    this.editingRecord = null;
+    this.isDrawerVisible = true;
+  }
+
+  protected viewRecord(record: TableRecord): void {
+    this.message.info(`Viewing record: ${record.name}`);
+  }
+
+  protected mapRecord(record: TableRecord): void {
+    this.mappingRecord = record;
+    this.isMapDrawerVisible = true;
+  }
+
+  protected closeMapDrawer(): void {
+    this.isMapDrawerVisible = false;
+  }
+
+  protected openEditDrawer(record: TableRecord): void {
+    this.drawerMode = 'edit';
+    this.drawerTitle = 'Update Record';
+    this.editingRecord = record;
+    this.isDrawerVisible = true;
+  }
+
+  protected closeDrawer(): void {
+    this.isDrawerVisible = false;
+  }
+
+  protected saveRecord(event: { mode: 'add' | 'edit', data: any }): void {
+    if (event.mode === 'add') {
+      const nextId = Math.max(0, ...this.allRecords.map(record => record.id)) + 1;
+      const record: TableRecord = {
+        id: nextId,
+        name: event.data.name,
+        code: event.data.code,
+        category: event.data.category || 'Uncategorised',
+        type: 'Standard',
+        referenceNumber: `REF-${String(nextId).padStart(6, '0')}`,
+        sequence: nextId,
+        createdDate: new Date().toISOString(),
+        assignedTo: 'Unassigned',
+        amount: 0,
+        status: event.data.isActive ? 'Active' : 'Inactive',
+        active: event.data.isActive,
+        description: ''
+      };
+      this.allRecords = [record, ...this.allRecords];
+      this.message.success('Record added successfully');
+    } else if (this.editingRecord) {
+      const editedId = this.editingRecord.id;
+      this.allRecords = this.allRecords.map(record => record.id === editedId ? {
+        ...record,
+        name: event.data.name,
+        code: event.data.code,
+        category: event.data.category || 'Uncategorised',
+        status: event.data.isActive ? 'Active' : 'Inactive',
+        active: event.data.isActive
+      } : record);
+      this.message.success('Record updated successfully');
+    }
+    this.applyQuery();
+    this.closeDrawer();
+  }
+
+  protected deleteRecord(record: TableRecord): void {
+    this.allRecords = this.allRecords.filter(item => item.id !== record.id);
+    this.applyQuery();
+    this.message.success(`Record ${record.code} deleted successfully`);
+  }
+
+  private getSortedRecords(): TableRecord[] {
+    if (!this.currentSort.key || !this.currentSort.value) return this.records;
+    return [...this.records].sort((a: any, b: any) => {
+      const valA = a[this.currentSort.key!];
+      const valB = b[this.currentSort.key!];
+      if (valA === valB) return 0;
+      const isAsc = this.currentSort.value === 'ascend';
+      return valA < valB ? (isAsc ? -1 : 1) : (isAsc ? 1 : -1);
+    });
+  }
+
+  protected downloadExcel(): void {
+    const rows = this.getSortedRecords().map(record => ({
+      Name: record.name,
+      Code: record.code,
+      Category: record.category,
+      'Created Date': formatDateValue(record.createdDate),
+      Status: record.status
+    }));
+    const sheet = XLSX.utils.json_to_sheet(rows);
+    const workbook = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(workbook, sheet, 'Report');
+    XLSX.writeFile(workbook, 'master-page.xlsx');
+  }
+
+  protected downloadPdf(): void {
+    const document = new jsPDF({ orientation: 'landscape', unit: 'mm', format: 'a4' });
+    const columns = [
+      { label: 'Name', x: 14, width: 58 },
+      { label: 'Code', x: 75, width: 34 },
+      { label: 'Category', x: 112, width: 42 },
+      { label: 'Created Date', x: 157, width: 38 },
+      { label: 'Status', x: 198, width: 34 }
+    ];
+    const drawHeader = (): number => {
+      document.setFont('helvetica', 'bold');
+      document.setFontSize(16);
+      document.text(this.reportTitle, 14, 16);
+      document.setFontSize(10);
+      columns.forEach(column => document.text(column.label, column.x, 26));
+      document.line(14, 29, 232, 29);
+      document.setFont('helvetica', 'normal');
+      return 35;
+    };
+    let y = drawHeader();
+    for (const record of this.getSortedRecords()) {
+      if (y > 195) {
+        document.addPage();
+        y = drawHeader();
+      }
+      const values = [record.name, record.code, record.category, formatDateValue(record.createdDate), record.status];
+      values.forEach((value, index) => {
+        const column = columns[index];
+        const text = document.splitTextToSize(String(value), column.width)[0] ?? '';
+        document.text(text, column.x, y);
+      });
+      y += 7;
+    }
+    document.save('master-page.pdf');
+  }
+
+  private applyQuery(): void {
+    this.pageIndex = 1;
+    const search = this.searchText.trim();
+    const { category, categories, date, dateRange, status } = this.filterForm.getRawValue();
+    this.records = this.allRecords.filter(record => {
+      let pass = true;
+      if (!globalRecordSearch(record, search)) pass = false;
+      if (category && record.category !== category) pass = false;
+      if (categories && categories.length > 0 && !categories.includes(record.category)) pass = false;
+      if (status && record.status !== status) pass = false;
+
+      if (date) {
+        const recordDate = new Date(record.createdDate).setHours(0, 0, 0, 0);
+        const filterDate = new Date(date).setHours(0, 0, 0, 0);
+        if (recordDate !== filterDate) pass = false;
+      }
+
+      if (dateRange && dateRange.length === 2) {
+        const recordDate = new Date(record.createdDate).setHours(0, 0, 0, 0);
+        const start = new Date(dateRange[0]).setHours(0, 0, 0, 0);
+        const end = new Date(dateRange[1]).setHours(0, 0, 0, 0);
+        if (recordDate < start || recordDate > end) pass = false;
+      }
+
+      return pass;
+    });
+  }
+}

package/src/app/templates/master-page/master-record-drawer.component.css

@@ -0,0 +1,3 @@
+.status-switch {
+  min-width: 70px;
+}

package/src/app/templates/master-page/master-record-drawer.component.html

@@ -0,0 +1,52 @@
+<nz-drawer
+  [nzVisible]="visible"
+  [nzTitle]="title"
+  [nzWidth]="400"
+  [nzFooter]="drawerFooter"
+  (nzOnClose)="onClose()"
+>
+  <ng-container *nzDrawerContent>
+    <form [formGroup]="recordForm" nz-form nzLayout="vertical">
+      <nz-form-item>
+        <nz-form-label nzRequired>Name</nz-form-label>
+        <nz-form-control nzErrorTip="Please input the name">
+          <input nz-input formControlName="name" placeholder="Enter name" />
+        </nz-form-control>
+      </nz-form-item>
+      
+      <nz-form-item>
+        <nz-form-label nzRequired>Code</nz-form-label>
+        <nz-form-control nzErrorTip="Please input the code">
+          <input nz-input formControlName="code" placeholder="Enter code" />
+        </nz-form-control>
+      </nz-form-item>
+      
+      <nz-form-item>
+        <nz-form-label>Category</nz-form-label>
+        <nz-form-control>
+          <nz-select formControlName="category" nzAllowClear nzPlaceHolder="Select category">
+            @for(option of categories; track option) {
+              <nz-option [nzLabel]="option" [nzValue]="option"></nz-option>
+            }
+          </nz-select>
+        </nz-form-control>
+      </nz-form-item>
+      
+      <nz-form-item>
+        <nz-form-label>Status</nz-form-label>
+        <nz-form-control>
+          <nz-switch formControlName="isActive" nzCheckedChildren="Active" nzUnCheckedChildren="Inactive" class="status-switch"></nz-switch>
+        </nz-form-control>
+      </nz-form-item>
+    </form>
+  </ng-container>
+</nz-drawer>
+
+<ng-template #drawerFooter>
+  <div style="float: right;">
+    <button nz-button style="margin-right: 8px;" (click)="onClose()">Cancel</button>
+    <button nz-button nzType="primary" (click)="onSave()">
+      {{ mode === 'add' ? 'Save' : 'Update' }}
+    </button>
+  </div>
+</ng-template>

package/src/app/templates/master-page/master-record-drawer.component.ts

@@ -0,0 +1,74 @@
+import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
+import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzDrawerModule } from 'ng-zorro-antd/drawer';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { TableRecord } from '@core/models/table.models';
+
+@Component({
+  selector: 'app-master-record-drawer',
+  standalone: true,
+  imports: [
+    FormsModule, ReactiveFormsModule, NzButtonModule, NzDrawerModule,
+    NzFormModule, NzInputModule, NzSelectModule, NzSwitchModule
+  ],
+  templateUrl: './master-record-drawer.component.html',
+  styleUrl: './master-record-drawer.component.css'
+})
+export class MasterRecordDrawerComponent {
+  private readonly fb = inject(FormBuilder);
+
+  @Input() visible = false;
+  @Input() mode: 'add' | 'edit' = 'add';
+  @Input() title = 'Add New Record';
+  
+  @Input()
+  set record(value: TableRecord | null) {
+    if (value) {
+      this.recordForm.patchValue({
+        name: value.name,
+        code: value.code,
+        category: value.category,
+        isActive: value.status === 'Active'
+      });
+    } else {
+      this.recordForm.reset({ isActive: true });
+    }
+  }
+
+  @Input() categories: string[] = [];
+  
+  @Output() close = new EventEmitter<void>();
+  @Output() save = new EventEmitter<{ mode: 'add'|'edit', data: any }>();
+
+  protected readonly recordForm = this.fb.nonNullable.group({
+    name: ['', [Validators.required]],
+    code: ['', [Validators.required]],
+    category: [''],
+    isActive: [true]
+  });
+
+  protected onClose(): void {
+    this.close.emit();
+  }
+
+  protected onSave(): void {
+    if (this.recordForm.invalid) {
+      Object.values(this.recordForm.controls).forEach(control => {
+        if (control.invalid) {
+          control.markAsDirty();
+          control.updateValueAndValidity({ onlySelf: true });
+        }
+      });
+      return;
+    }
+    
+    this.save.emit({
+      mode: this.mode,
+      data: this.recordForm.getRawValue()
+    });
+  }
+}

package/src/app/templates/report-page/report-page.component.css

@@ -0,0 +1,274 @@
+:host {
+  display: block;
+  min-width: 0;
+}
+
+/* Table Page Structure */
+.template-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+/* Toolbar */
+.table-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  flex-wrap: wrap;
+  background: transparent;
+  padding: 0;
+}
+
+.table-toolbar__left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.table-toolbar__right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-left: auto;
+}
+
+/* Page Heading */
+.page-heading {
+  margin: 0;
+  font-family: Poppins, Arial, sans-serif;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 24px;
+  color: #1f1f1f;
+}
+
+/* Back Button */
+.back-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px !important;
+  height: 32px !important;
+  min-width: 32px !important;
+  border-radius: 50% !important;
+  padding: 0 !important;
+  border: 1px solid #d9d9d9 !important;
+  background: #ffffff !important;
+  color: #262626 !important;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.back-btn:hover {
+  border-color: #1890ff !important;
+  color: #1890ff !important;
+  background: #ffffff !important;
+}
+
+/* Compact Buttons (Filter, Excel, Actions) */
+.compact-btn {
+  height: 32px !important;
+  min-width: 32px !important;
+  border-radius: 6px !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 0 12px !important;
+  font-size: 12px !important;
+}
+
+.compact-btn.icon-only {
+  padding: 0 !important;
+}
+
+/* Search Field */
+.search-field {
+  width: 260px;
+  margin-bottom: 0;
+}
+
+:host ::ng-deep .search-field .ant-input {
+  height: 32px !important;
+  border-radius: 8px 0 0 8px !important;
+  font-size: 12px;
+}
+
+:host ::ng-deep .search-field .ant-input-group-addon .ant-btn {
+  height: 32px !important;
+  width: 40px !important;
+  border-radius: 0 8px 8px 0 !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Filter Panel */
+.filter-panel {
+  margin: 0 0 14px;
+  padding: 12px 10px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  background: #ffffff;
+}
+
+.filter-panel__grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(180px, 1fr));
+  gap: 12px;
+}
+
+.filter-panel__field {
+  display: inline-block;
+  margin-bottom: 5px;
+  width: 100%;
+  padding: 0 10px;
+}
+
+.filter-panel__field>label {
+  display: block;
+  font-family: Poppins, Arial, sans-serif;
+  color: #333;
+  font-size: 12px;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+:host ::ng-deep .filter-panel__field .ant-select,
+:host ::ng-deep .filter-panel__field .ant-picker,
+:host ::ng-deep .filter-panel__field .ant-input {
+  width: 100%;
+  border-radius: 4px;
+}
+
+:host ::ng-deep .filter-panel__field .ant-radio-wrapper {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 16px;
+}
+
+.filter-panel__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 10px;
+  padding: 0 10px;
+}
+
+/* Table Overrides */
+.data-table {
+  width: 100%;
+}
+
+:host ::ng-deep .ant-table {
+  background: #ffffff !important;
+  font-family: Poppins, Arial, sans-serif;
+}
+
+:host ::ng-deep .ant-table-bordered .ant-table-container {
+  border: 0 !important;
+  border-left: 1px solid #e5e7eb !important;
+}
+
+:host ::ng-deep .ant-table-thead>tr>th {
+  background: #fafafa !important;
+  color: #262626 !important;
+  font-family: Poppins, Arial, sans-serif;
+  font-size: 14px !important;
+  font-weight: 600 !important;
+  white-space: nowrap;
+  padding: 8px 12px !important;
+  border-bottom: 1px solid #e5e7eb !important;
+  vertical-align: middle !important;
+  text-align: center !important;
+}
+
+:host ::ng-deep .ant-table-thead>tr>th .ant-table-filter-column-title {
+  padding: 0 !important;
+  display: flex;
+  align-items: center;
+}
+
+:host ::ng-deep .ant-table-tbody>tr:not(.ant-table-measure-now)>td {
+  color: #333 !important;
+  font-size: 12px !important;
+  font-weight: 400 !important;
+  padding: 6px 12px !important;
+  vertical-align: middle !important;
+  border-bottom: 1px solid #e5e7eb !important;
+}
+
+:host ::ng-deep .ant-table-tbody>tr:not(.ant-table-measure-now):hover>td {
+  background: #fafcff !important;
+}
+
+:host ::ng-deep tr.ant-table-measure-now,
+:host ::ng-deep tr.ant-table-measure-now>td,
+:host ::ng-deep tr.ant-table-measure-now>td>div {
+  height: 0 !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  border: 0 !important;
+  line-height: 0 !important;
+  font-size: 0 !important;
+  visibility: hidden !important;
+}
+
+/* Pagination */
+:host ::ng-deep .ant-pagination {
+  margin-top: 12px !important;
+  display: flex;
+  justify-content: flex-end;
+}
+
+:host ::ng-deep .ant-pagination-item,
+:host ::ng-deep .ant-pagination-prev,
+:host ::ng-deep .ant-pagination-next,
+:host ::ng-deep .ant-pagination-options {
+  font-size: 12px !important;
+}
+
+/* Status Tag */
+.status-tag {
+  min-width: 80px;
+  text-align: center;
+}
+
+/* Responsive */
+@media (max-width: 900px) {
+  .filter-panel__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .filter-panel__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .table-toolbar__left,
+  .table-toolbar__right {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .table-toolbar__right {
+    margin-left: 0;
+  }
+
+  .search-field {
+    width: 100%;
+  }
+}