add product and entity type

2025-11-20 00:03:08 +01:00
parent a8ef23845c
commit d7bb559f95
47 changed files with 1721 additions and 5 deletions
--- a/admin/src/app/app.routes.ts
+++ b/admin/src/app/app.routes.ts
@@ -1,10 +1,28 @@
 import { Routes } from '@angular/router';
 import { LoginComponent } from './components/login/login.component';
 import { AuthGuard } from './auth/auth.guard';
-import { HomeComponent } from './components/home/home.component'; // Assuming you have a HomeComponent
+import { HomeComponent } from './components/home/home.component';
+import { EventTypeFormComponent } from "./features/event-type/components/event-type-form/event-type-form.component";
+import { EventTypeDetailsComponent } from "./features/event-type/components/event-type-details/event-type-details.component";
+import { EventTypeTableComponent } from "./features/event-type/components/event-type-table/event-type-table.component";
+import { EventTypeListComponent } from "./features/event-type/components/event-type-list/event-type-list.component";
+import { ProductFormComponent } from "./features/products/components/product-form/product-form.component";
+import { ProductDetailsComponent } from "./features/products/components/product-details/product-details.component";
+import { ProductTableComponent } from "./features/products/components/product-table/product-table.component";
+import { ProductListComponent } from "./features/products/components/product-list/product-list.component";

 export const routes: Routes = [
-  { path: 'login', component: LoginComponent },
+    { path: 'products', component: ProductListComponent },
+    { path: 'products/table', component: ProductTableComponent },
+    { path: 'products/:id', component: ProductDetailsComponent },
+    { path: 'products/:id/edit', component: ProductFormComponent },
+    { path: 'products/new', component: ProductFormComponent },
+    { path: 'event-type', component: EventTypeListComponent },
+    { path: 'event-type/table', component: EventTypeTableComponent },
+    { path: 'event-type/new', component: EventTypeFormComponent },
+    { path: 'event-type/:id', component: EventTypeDetailsComponent },
+    { path: 'event-type/:id/edit', component: EventTypeFormComponent },
+    { path: 'login', component: LoginComponent },
  { path: '', component: HomeComponent, canActivate: [AuthGuard] },
  { path: '**', redirectTo: '' } // Redirect to home for any other route
 ];
--- a/admin/src/app/examples/generic-list-example/generic-list-example.css
+++ b/admin/src/app/examples/generic-list-example/generic-list-example.css
--- a/admin/src/app/examples/generic-list-example/generic-list-example.html
+++ b/admin/src/app/examples/generic-list-example/generic-list-example.html
@@ -0,0 +1 @@
+<app-generic-table [config]="listConfig"></app-generic-table>
--- a/admin/src/app/examples/generic-list-example/generic-list-example.spec.ts
+++ b/admin/src/app/examples/generic-list-example/generic-list-example.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GenericListExample } from './generic-list-example';
+
+describe('GenericListExample', () => {
+  let component: GenericListExample;
+  let fixture: ComponentFixture<GenericListExample>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GenericListExample]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GenericListExample);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/admin/src/app/examples/generic-list-example/generic-list-example.ts
+++ b/admin/src/app/examples/generic-list-example/generic-list-example.ts
@@ -0,0 +1,107 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { Product } from '../../features/products/models/product.model';
+import { ColumnDefinition } from '../../components/generic-table/column-definition.interface';
+import { ProductDataProvider } from '../product-data-provider.service';
+import { GenericTable } from '../../components/generic-table/generic-table';
+import { GenericTableConfig } from '../../components/generic-table/generic-table.config';
+import { ActionDefinition, GenericActionColumn } from '../../components/generic-action-column/generic-action-column';
+import { Router } from '@angular/router';
+import { BehaviorSubject } from 'rxjs';
+
+@Component({
+  selector: 'app-generic-list-example',
+  imports: [
+    GenericTable,
+  ],
+  templateUrl: './generic-list-example.html',
+  styleUrl: './generic-list-example.css',
+})
+export class GenericListExample implements OnInit {
+  router = inject(Router);
+  listConfig!: GenericTableConfig<Product>;
+
+  productDataProvider = inject(ProductDataProvider);
+
+  private refresh$ = new BehaviorSubject<void>(undefined);
+  private filter$ = new BehaviorSubject<any>({});
+  private page$ = new BehaviorSubject<number>(1);
+  private limit$ = new BehaviorSubject<number>(10);
+
+  ngOnInit(): void {
+    const actionHandler = (action: ActionDefinition<Product>, item: Product) => {
+      switch (action.action) {
+        case 'view':
+          this.router.navigate(['/products/' + item?.id + '']);
+          break;
+        case 'edit':
+          this.router.navigate(['/products/' + item?.id + '/edit']);
+          break;
+        case 'delete':
+          alert('delete');
+          break;
+      }
+    };
+    this.listConfig = {
+      refresh$: this.refresh$,
+      filter$: this.filter$,
+      page$: this.page$,
+      limit$: this.limit$,
+      dataProvider: this.productDataProvider,
+      columns: [
+        {
+          headerCell: true,
+          attribute: 'name',
+          valueCell: true,
+        },
+        {
+          attribute: 'price',
+          headerCell: {
+            value: '<h1>MyPrice</h1>',
+          },
+          valueCell: {
+            value: item => {
+              return item?.price ? Math.floor(item.price) : '-';
+            },
+          },
+        },
+        {
+          attribute: 'available',
+          headerCell: true ,
+          valueCell: {
+            value: item => {
+              return item?.is_available ? 'yes' : 'no';
+            },
+          },
+        },
+        {
+          attribute: 'actions',
+          headerCell: { value: 'Actions' },
+          valueCell: {
+            component: GenericActionColumn,
+            componentInputs: item => {
+              return {
+                item: item,
+                actions: [
+                  {
+                    action: 'view',
+                    handler: actionHandler,
+                  },
+                  {
+                    action: 'edit',
+                    handler: actionHandler,
+                  },
+                  {
+                    action: 'delete',
+                    handler: actionHandler,
+                  },
+                ] as ActionDefinition<Product>[],
+              };
+            },
+          },
+        },
+      ] as ColumnDefinition<Product>[],
+      tableCssClass: 'product-list-container',
+      rowCssClass: undefined,
+    };
+  }
+}
--- a/admin/src/app/examples/product-data-provider.service.ts
+++ b/admin/src/app/examples/product-data-provider.service.ts
@@ -0,0 +1,18 @@
+import { inject, Injectable } from '@angular/core';
+import { DataProvider, GetDataOptions, GetDataResponse } from '../components/generic-table/data-provider.interface';
+import { Product } from '../features/products/models/product.model';
+import { map, Observable } from 'rxjs';
+import { ProductService } from '../features/products/services/product.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ProductDataProvider implements DataProvider<Product> {
+  private productService = inject(ProductService);
+    getData(options?: GetDataOptions): Observable<GetDataResponse<Product>> {
+        return this.productService.find({
+        ...(options?.params ?? {})
+        }).pipe(map((res) => {return {'data': res}}));
+    }
+
+}
--- a/admin/src/app/features/event-type/components/event-type-details/event-type-details.component.html
+++ b/admin/src/app/features/event-type/components/event-type-details/event-type-details.component.html
@@ -0,0 +1,46 @@
+<!-- dvbooking-cli/src/templates/angular/details.component.html.tpl -->
+
+<!-- Generated by the CLI -->
+<div class="p-4 md:p-8">
+  <ng-container *ngIf="eventType$ | async as eventType; else loading">
+    <div class="card bg-base-100 shadow-xl max-w-2xl mx-auto">
+      <div class="card-body">
+        <h2 class="card-title text-3xl">EventType Details</h2>
+
+        <div class="overflow-x-auto mt-4">
+          <table class="table w-full">
+            <tbody>
+                  <tr>
+                    <th>id</th>
+                    <td>{{ eventType.id }}</td>
+                  </tr>
+                  <tr>
+                    <th>name</th>
+                    <td>{{ eventType.name }}</td>
+                  </tr>
+                  <tr>
+                    <th>description</th>
+                    <td>{{ eventType.description }}</td>
+                  </tr>
+                  <tr>
+                    <th>color</th>
+                    <td>{{ eventType.color }}</td>
+                  </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="card-actions justify-end mt-6">
+          <a routerLink="/event-type" class="btn btn-secondary">Back to List</a>
+          <a routerLink="/event-type/{{ eventType.id }}/edit" class="btn btn-primary">Edit</a>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+
+  <ng-template #loading>
+    <div class="text-center p-8">
+      <span class="loading loading-spinner loading-lg"></span>
+    </div>
+  </ng-template>
+</div>
--- a/admin/src/app/features/event-type/components/event-type-details/event-type-details.component.ts
+++ b/admin/src/app/features/event-type/components/event-type-details/event-type-details.component.ts
@@ -0,0 +1,34 @@
+// dvbooking-cli/src/templates/angular/details.component.ts.tpl
+
+// Generated by the CLI
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ActivatedRoute, RouterModule } from '@angular/router';
+import { Observable } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+import { EventType } from '../../models/event-type.model';
+import { EventTypeService } from '../../services/event-type.service';
+
+@Component({
+  selector: 'app-event-type-details',
+  templateUrl: './event-type-details.component.html',
+  standalone: true,
+  imports: [CommonModule, RouterModule],
+})
+export class EventTypeDetailsComponent implements OnInit {
+  eventType$!: Observable<EventType>;
+
+  constructor(
+    private route: ActivatedRoute,
+    private eventTypeService: EventTypeService
+  ) {}
+
+  ngOnInit(): void {
+    this.eventType$ = this.route.params.pipe(
+      switchMap(params => {
+        const id = params['id'];
+        return this.eventTypeService.findOne(id);
+      })
+    );
+  }
+}
--- a/admin/src/app/features/event-type/components/event-type-filter/event-type-filter.component.html
+++ b/admin/src/app/features/event-type/components/event-type-filter/event-type-filter.component.html
@@ -0,0 +1,18 @@
+<!-- dvbooking-cli/src/templates/angular/filter.component.html.tpl -->
+<!-- Generated by the CLI -->
+<form [formGroup]="filterForm" class="p-4 bg-base-200 rounded-lg shadow">
+<div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
+<div class="form-control"><label class="label"><span class="label-text">name</span></label>
+              <input type="text" formControlName="name" class="input input-bordered w-full" placeholder="Filter by name" /></div>
+
+            <div class="form-control"><label class="label"><span class="label-text">description</span></label>
+              <input type="text" formControlName="description" class="input input-bordered w-full" placeholder="Filter by description" /></div>
+
+            <div class="form-control"><label class="label"><span class="label-text">color</span></label>
+              <input type="text" formControlName="color" class="input input-bordered w-full" placeholder="Filter by color" /></div>
+
+<div class="form-control">
+  <button type="button" (click)="reset()" class="btn btn-secondary">Reset</button>
+</div>
+</div>
+</form>
--- a/admin/src/app/features/event-type/components/event-type-filter/event-type-filter.component.ts
+++ b/admin/src/app/features/event-type/components/event-type-filter/event-type-filter.component.ts
@@ -0,0 +1,39 @@
+// dvbooking-cli/src/templates/angular/filter.component.ts.tpl
+
+// Generated by the CLI
+import { Component, EventEmitter, Output } from '@angular/core';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-event-type-filter',
+  templateUrl: './event-type-filter.component.html',
+  standalone: true,
+  imports: [ReactiveFormsModule]
+})
+export class EventTypeFilterComponent {
+  @Output() filterChanged = new EventEmitter<any>();
+  filterForm: FormGroup;
+
+  constructor(private fb: FormBuilder) {
+    this.filterForm = this.fb.group({
+          name: [''],
+          description: [''],
+          color: ['']
+    });
+
+    this.filterForm.valueChanges.pipe(
+      debounceTime(300),
+      distinctUntilChanged()
+    ).subscribe(values => {
+      const cleanFilter = Object.fromEntries(
+        Object.entries(values).filter(([_, v]) => v != null && v !== '')
+      );
+      this.filterChanged.emit(cleanFilter);
+    });
+  }
+
+  reset() {
+    this.filterForm.reset();
+  }
+}
--- a/admin/src/app/features/event-type/components/event-type-form/event-type-form.component.html
+++ b/admin/src/app/features/event-type/components/event-type-form/event-type-form.component.html
@@ -0,0 +1,31 @@
+<!-- dvbooking-cli/src/templates/angular/form.component.html.tpl -->
+
+<!-- Generated by the CLI -->
+<div class="p-4 md:p-8">
+  <div class="card bg-base-100 shadow-xl max-w-2xl mx-auto">
+    <div class="card-body">
+      <h2 class="card-title text-3xl">
+        {{ isEditMode ? 'Edit' : 'Create' }} EventType
+      </h2>
+
+      <form [formGroup]="form" (ngSubmit)="onSubmit()" class="space-y-4 mt-4">
+
+            <div class="form-control"><label class="label"><span class="label-text">name</span></label>
+              <input type="text" formControlName="name" class="input input-bordered w-full"  /></div>
+
+            <div class="form-control"><label class="label"><span class="label-text">description</span></label>
+              <input type="text" formControlName="description" class="input input-bordered w-full"  /></div>
+
+            <div class="form-control"><label class="label"><span class="label-text">color</span></label>
+              <input type="text" formControlName="color" class="input input-bordered w-full"  /></div>
+
+        <div class="card-actions justify-end mt-6">
+          <a routerLink="/event-type" class="btn btn-ghost">Cancel</a>
+          <button type="submit" class="btn btn-primary" [disabled]="form.invalid">
+            {{ isEditMode ? 'Update' : 'Create' }}
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
--- a/admin/src/app/features/event-type/components/event-type-form/event-type-form.component.ts
+++ b/admin/src/app/features/event-type/components/event-type-form/event-type-form.component.ts
@@ -0,0 +1,87 @@
+// dvbooking-cli/src/templates/angular/form.component.ts.tpl
+
+// Generated by the CLI
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { Observable, of } from 'rxjs';
+import { switchMap, tap } from 'rxjs/operators';
+import { EventType } from '../../models/event-type.model';
+import { EventTypeService } from '../../services/event-type.service';
+
+@Component({
+  selector: 'app-event-type-form',
+  templateUrl: './event-type-form.component.html',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, RouterModule],
+})
+export class EventTypeFormComponent implements OnInit {
+  form: FormGroup;
+  isEditMode = false;
+  id: number | null = null;
+
+  private numericFields = [];
+
+  constructor(
+    private fb: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private eventTypeService: EventTypeService
+  ) {
+    this.form = this.fb.group({
+          name: [null],
+          description: [null],
+          color: [null]
+    });
+  }
+
+  ngOnInit(): void {
+    this.route.params.pipe(
+      tap(params => {
+        if (params['id']) {
+          this.isEditMode = true;
+          this.id = +params['id'];
+        }
+      }),
+      switchMap(() => {
+        if (this.isEditMode && this.id) {
+          return this.eventTypeService.findOne(this.id);
+        }
+        return of(null);
+      })
+    ).subscribe(eventType => {
+      if (eventType) {
+        this.form.patchValue(eventType);
+      }
+    });
+  }
+
+  onSubmit(): void {
+    if (this.form.invalid) {
+      this.form.markAllAsTouched();
+      return;
+    }
+
+    const payload = { ...this.form.value };
+
+     for (const field of this.numericFields) {
+          if (payload[field] != null && payload[field] !== '') {
+            payload[field] = parseFloat(payload[field]);
+          }
+        }
+
+    let action$: Observable<EventType>;
+
+   if (this.isEditMode && this.id) {
+      action$ = this.eventTypeService.update(this.id, payload);
+    } else {
+      action$ = this.eventTypeService.create(payload);
+    }
+
+    action$.subscribe({
+      next: () => this.router.navigate(['/event-type']),
+      error: (err) => console.error('Failed to save event-type', err)
+    });
+  }
+}
--- a/admin/src/app/features/event-type/components/event-type-list/event-type-list.component.html
+++ b/admin/src/app/features/event-type/components/event-type-list/event-type-list.component.html
@@ -0,0 +1,64 @@
+<!-- dvbooking-cli/src/templates/angular/list.component.html.tpl -->
+
+<!-- Generated by the CLI -->
+<div class="p-4 md:p-8 space-y-6">
+  <div class="flex justify-between items-center">
+    <h1 class="text-3xl font-bold">EventTypes</h1>
+    <a routerLink="/event-type/new" class="btn btn-primary">Create New</a>
+  </div>
+
+  <app-event-type-filter (filterChanged)="onFilterChanged($event)"></app-event-type-filter>
+
+  <ng-container *ngIf="paginatedResponse$ | async as response; else loading">
+    <div class="overflow-x-auto bg-base-100 rounded-lg shadow">
+      <table class="table w-full">
+        <thead>
+          <tr>
+              <th>id</th>
+              <th>name</th>
+              <th>description</th>
+              <th>color</th>
+            <th class="text-right">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let item of response.data" class="hover">
+              <td>{{ item.id }}</td>
+              <td>{{ item.name }}</td>
+              <td>{{ item.description }}</td>
+              <td>{{ item.color }}</td>
+            <td class="text-right space-x-2">
+              <a [routerLink]="['/event-type', item.id]" class="btn btn-sm btn-ghost">View</a>
+              <a [routerLink]="['/event-type', item.id, 'edit']" class="btn btn-sm btn-ghost">Edit</a>
+              <button (click)="deleteItem(item.id)" class="btn btn-sm btn-error btn-ghost">Delete</button>
+            </td>
+          </tr>
+          <tr *ngIf="response.data.length === 0">
+            <td colspan="5" class="text-center">No event-type found.</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Pagination Controls -->
+    <div *ngIf="response.meta.totalPages > 1" class="flex justify-center mt-4">
+      <div class="join">
+        <button
+          class="join-item btn"
+          (click)="changePage(response.meta.currentPage - 1)"
+          [disabled]="response.meta.currentPage === 1">«</button>
+        <button class="join-item btn">Page {{ response.meta.currentPage }} of {{ response.meta.totalPages }}</button>
+        <button
+          class="join-item btn"
+          (click)="changePage(response.meta.currentPage + 1)"
+          [disabled]="response.meta.currentPage === response.meta.totalPages">»</button>
+      </div>
+    </div>
+  </ng-container>
+
+  <ng-template #loading>
+    <div class="text-center p-8">
+      <span class="loading loading-spinner loading-lg"></span>
+    </div>
+  </ng-template>
+</div>
--- a/admin/src/app/features/event-type/components/event-type-list/event-type-list.component.ts
+++ b/admin/src/app/features/event-type/components/event-type-list/event-type-list.component.ts
@@ -0,0 +1,68 @@
+// dvbooking-cli/src/templates/angular/list.component.ts.tpl
+
+// Generated by the CLI
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { BehaviorSubject, Observable, combineLatest } from 'rxjs';
+import { switchMap, startWith } from 'rxjs/operators';
+import { EventType, PaginatedResponse } from '../../models/event-type.model';
+import { EventTypeService } from '../../services/event-type.service';
+import { EventTypeFilterComponent } from '../event-type-filter/event-type-filter.component';
+
+@Component({
+  selector: 'app-event-type-list',
+  templateUrl: './event-type-list.component.html',
+  standalone: true,
+  imports: [CommonModule,RouterModule, EventTypeFilterComponent],
+})
+export class EventTypeListComponent implements OnInit {
+
+  private refresh$ = new BehaviorSubject<void>(undefined);
+  private filter$ = new BehaviorSubject<any>({});
+  private page$ = new BehaviorSubject<number>(1);
+
+  paginatedResponse$!: Observable<PaginatedResponse<EventType>>;
+
+  constructor(private eventTypeService: EventTypeService) { }
+
+  ngOnInit(): void {
+    this.paginatedResponse$ = combineLatest([
+      this.refresh$,
+      this.filter$.pipe(startWith({})),
+      this.page$.pipe(startWith(1))
+    ]).pipe(
+      switchMap(([_, filter, page]) => {
+        const query = { ...filter, page, limit: 10 };
+        return this.eventTypeService.find(query);
+      })
+    );
+  }
+
+  onFilterChanged(filter: any): void {
+    this.page$.next(1);
+    this.filter$.next(filter);
+  }
+
+  changePage(newPage: number): void {
+    if (newPage > 0) {
+      this.page$.next(newPage);
+    }
+  }
+
+  deleteItem(id: number): void {
+    if (confirm('Are you sure you want to delete this item?')) {
+      this.eventTypeService.remove(id).subscribe({
+        next: () => {
+          console.log(`Item with ID ${id} deleted successfully.`);
+          this.refresh$.next();
+        },
+        // --- THIS IS THE FIX ---
+        // Explicitly type 'err' to satisfy strict TypeScript rules.
+        error: (err: any) => {
+          console.error(`Error deleting item with ID ${id}:`, err);
+        }
+      });
+    }
+  }
+}
--- a/admin/src/app/features/event-type/components/event-type-table/event-type-data-provider.service.ts
+++ b/admin/src/app/features/event-type/components/event-type-table/event-type-data-provider.service.ts
@@ -0,0 +1,26 @@
+// dvbooking-cli/src/templates/angular-generic/data-provider.service.ts.tpl
+
+// Generated by the CLI
+import { inject, Injectable } from '@angular/core';
+import { DataProvider, GetDataOptions, GetDataResponse } from '../../../../components/generic-table/data-provider.interface';
+import { EventType } from '../../models/event-type.model';
+import { map, Observable } from 'rxjs';
+import { EventTypeService } from '../../services/event-type.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class EventTypeDataProvider implements DataProvider<EventType> {
+  private eventTypeService = inject(EventTypeService);
+
+  getData(options?: GetDataOptions): Observable<GetDataResponse<EventType>> {
+      const {q,page,limit} = options?.params ?? {};
+     // The generic table's params are compatible with our NestJS Query DTO
+     return this.eventTypeService.search(q ?? '',page,limit, ).pipe(
+      map((res) => {
+        // Adapt the paginated response to the GetDataResponse format
+        return { data: res };
+      })
+    );
+  }
+}
--- a/admin/src/app/features/event-type/components/event-type-table/event-type-table.component.html
+++ b/admin/src/app/features/event-type/components/event-type-table/event-type-table.component.html
@@ -0,0 +1,11 @@
+<!-- dvbooking-cli/src/templates/angular-generic/table.component.html.tpl -->
+
+<!-- Generated by the CLI -->
+<div class="p-4 md:p-8 space-y-6">
+  <div class="flex justify-between items-center">
+    <h1 class="text-3xl font-bold">EventTypes (Generic Table)</h1>
+    <a routerLink="/event-type/new" class="btn btn-primary">Create New</a>
+  </div>
+
+  <app-generic-table [config]="tableConfig"></app-generic-table>
+</div>
--- a/admin/src/app/features/event-type/components/event-type-table/event-type-table.component.ts
+++ b/admin/src/app/features/event-type/components/event-type-table/event-type-table.component.ts
@@ -0,0 +1,110 @@
+// dvbooking-cli/src/templates/angular-generic/table.component.ts.tpl
+
+// Generated by the CLI
+import { Component, inject, OnInit } from '@angular/core';
+import { Router, RouterModule } from '@angular/router';
+import { EventType } from '../../models/event-type.model';
+import { EventTypeDataProvider } from './event-type-data-provider.service';
+import { ColumnDefinition } from '../../../../components/generic-table/column-definition.interface';
+import { GenericTable } from '../../../../components/generic-table/generic-table';
+import { GenericTableConfig } from '../../../../components/generic-table/generic-table.config';
+import {
+  ActionDefinition,
+  GenericActionColumn,
+} from '../../../../components/generic-action-column/generic-action-column';
+import { EventTypeService } from '../../services/event-type.service';
+import { BehaviorSubject } from 'rxjs';
+
+@Component({
+  selector: 'app-event-type-table',
+  standalone: true,
+  imports: [GenericTable, RouterModule],
+  templateUrl: './event-type-table.component.html',
+})
+export class EventTypeTableComponent implements OnInit {
+
+  private refresh$ = new BehaviorSubject<void>(undefined);
+    private filter$ = new BehaviorSubject<any>({});
+    private page$ = new BehaviorSubject<number>(1);
+    private limit$ = new BehaviorSubject<number>(10);
+
+  router = inject(Router);
+  tableConfig!: GenericTableConfig<EventType>;
+
+  eventTypeDataProvider = inject(EventTypeDataProvider);
+  eventTypeService = inject(EventTypeService);
+
+  ngOnInit(): void {
+    const actionHandler = (action: ActionDefinition<EventType>, item: EventType) => {
+      switch (action.action) {
+        case 'view':
+          this.router.navigate(['/event-type', item?.id]);
+          break;
+        case 'edit':
+          this.router.navigate(['/event-type', item?.id, 'edit']);
+          break;
+        case 'delete':
+           this.deleteItem(item.id);
+           break;
+      }
+    };
+
+    this.tableConfig = {
+      refresh$: this.refresh$,
+      filter$: this.filter$,
+      page$: this.page$,
+      limit$: this.limit$,
+      dataProvider: this.eventTypeDataProvider,
+      columns: [
+        {
+          attribute: 'name',
+          headerCell: true,
+          valueCell: true,
+        },
+        {
+          attribute: 'description',
+          headerCell: true,
+          valueCell: true,
+        },
+        {
+          attribute: 'color',
+          headerCell: true,
+          valueCell: true,
+        },
+        {
+          attribute: 'actions',
+          headerCell: { value: 'Actions' },
+          valueCell: {
+            component: GenericActionColumn,
+            componentInputs: item => ({
+              item: item,
+              actions: [
+                { action: 'view', handler: actionHandler },
+                { action: 'edit', handler: actionHandler },
+                { action: 'delete', handler: actionHandler },
+              ] as ActionDefinition<EventType>[],
+            }),
+          },
+        },
+      ] as ColumnDefinition<EventType>[],
+      tableCssClass: 'event-type-table-container',
+    };
+  }
+
+   deleteItem(id: number): void {
+      if (confirm('Are you sure you want to delete this item?')) {
+        this.eventTypeService.remove(id).subscribe({
+          next: () => {
+            console.log(`Item with ID ${id} deleted successfully.`);
+            this.refresh$.next();
+          },
+          // --- THIS IS THE FIX ---
+          // Explicitly type 'err' to satisfy strict TypeScript rules.
+          error: (err: any) => {
+            console.error(`Error deleting item with ID ${id}:`, err);
+          }
+        });
+      }
+    }
+
+}
--- a/admin/src/app/features/event-type/models/event-type.model.ts
+++ b/admin/src/app/features/event-type/models/event-type.model.ts
@@ -0,0 +1,20 @@
+// dvbooking-cli/src/templates/angular/model.ts.tpl
+
+// Generated by the CLI
+export interface EventType {
+  id: number;
+  name: string;
+  description: string;
+  color: string;
+}
+
+export interface PaginatedResponse<T> {
+  data: T[];
+  meta: {
+    totalItems: number;
+    itemCount: number;
+    itemsPerPage: number;
+    totalPages: number;
+    currentPage: number;
+  };
+}
--- a/admin/src/app/features/event-type/services/event-type.service.ts
+++ b/admin/src/app/features/event-type/services/event-type.service.ts
@@ -0,0 +1,83 @@
+// dvbooking-cli/src/templates/angular/service.ts.tpl
+
+// Generated by the CLI
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { EventType, PaginatedResponse } from '../models/event-type.model';
+import { ConfigurationService } from '../../../services/configuration.service';
+
+export interface SearchResponse<T> {
+  data: T[];
+  total: number;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EventTypeService {
+  private readonly apiUrl: string;
+
+  constructor(
+    private http: HttpClient,
+    private configService: ConfigurationService
+  ) {
+    this.apiUrl = `${this.configService.getApiUrl()}/event-type`;
+  }
+
+  /**
+   * Find records with pagination and filtering.
+   */
+  public find(filter: Record<string, any>): Observable<PaginatedResponse<EventType>> {
+    // --- THIS IS THE FIX ---
+    // The incorrect line: .filter(([_, v]) for v != null)
+    // is now correctly written with an arrow function.
+    const cleanFilter = Object.fromEntries(
+      Object.entries(filter).filter(([_, v]) => v != null)
+    );
+    // --- END OF FIX ---
+
+    const params = new HttpParams({ fromObject: cleanFilter });
+    return this.http.get<PaginatedResponse<EventType>>(this.apiUrl, { params });
+  }
+
+   /**
+   * Search across multiple fields with a single term.
+   * @param term The search term (q).
+   */
+ public search(term: string, page: number = 1, limit: number = 10): Observable<PaginatedResponse<EventType>> {
+    const params = new HttpParams()
+      .set('q', term)
+      .set('page', page.toString())
+      .set('limit', limit.toString());
+    return this.http.get<PaginatedResponse<EventType>>(`${this.apiUrl}/search`, { params });
+  }
+
+  /**
+   * Find a single record by its ID.
+   */
+  public findOne(id: number): Observable<EventType> {
+    return this.http.get<EventType>(`${this.apiUrl}/${id}`);
+  }
+
+  /**
+   * Create a new record.
+   */
+  public create(data: Omit<EventType, 'id'>): Observable<EventType> {
+    return this.http.post<EventType>(this.apiUrl, data);
+  }
+
+  /**
+   * Update an existing record.
+   */
+  public update(id: number, data: Partial<Omit<EventType, 'id'>>): Observable<EventType> {
+    return this.http.patch<EventType>(`${this.apiUrl}/${id}`, data);
+  }
+
+  /**
+   * Remove a record by its ID.
+   */
+  public remove(id: number): Observable<any> {
+    return this.http.delete(`${this.apiUrl}/${id}`);
+  }
+}
--- a/admin/src/app/features/products/components/product-details/product-details.component.html
+++ b/admin/src/app/features/products/components/product-details/product-details.component.html
@@ -0,0 +1,46 @@
+<!-- dvbooking-cli/src/templates/angular/details.component.html.tpl -->
+
+<!-- Generated by the CLI -->
+<div class="p-4 md:p-8">
+  <ng-container *ngIf="product$ | async as product; else loading">
+    <div class="card bg-base-100 shadow-xl max-w-2xl mx-auto">
+      <div class="card-body">
+        <h2 class="card-title text-3xl">Product Details</h2>
+
+        <div class="overflow-x-auto mt-4">
+          <table class="table w-full">
+            <tbody>
+                  <tr>
+                    <th>id</th>
+                    <td>{{ product.id }}</td>
+                  </tr>
+                  <tr>
+                    <th>name</th>
+                    <td>{{ product.name }}</td>
+                  </tr>
+                  <tr>
+                    <th>price</th>
+                    <td>{{ product.price }}</td>
+                  </tr>
+                  <tr>
+                    <th>is_available</th>
+                    <td>{{ product.is_available }}</td>
+                  </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="card-actions justify-end mt-6">
+          <a routerLink="/products" class="btn btn-secondary">Back to List</a>
+          <a routerLink="/products/{{ product.id }}/edit" class="btn btn-primary">Edit</a>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+
+  <ng-template #loading>
+    <div class="text-center p-8">
+      <span class="loading loading-spinner loading-lg"></span>
+    </div>
+  </ng-template>
+</div>
--- a/admin/src/app/features/products/components/product-details/product-details.component.ts
+++ b/admin/src/app/features/products/components/product-details/product-details.component.ts
@@ -0,0 +1,34 @@
+// dvbooking-cli/src/templates/angular/details.component.ts.tpl
+
+// Generated by the CLI
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ActivatedRoute, RouterModule } from '@angular/router';
+import { Observable } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+import { Product } from '../../models/product.model';
+import { ProductService } from '../../services/product.service';
+
+@Component({
+  selector: 'app-product-details',
+  templateUrl: './product-details.component.html',
+  standalone: true,
+  imports: [CommonModule, RouterModule],
+})
+export class ProductDetailsComponent implements OnInit {
+  product$!: Observable<Product>;
+
+  constructor(
+    private route: ActivatedRoute,
+    private productService: ProductService
+  ) {}
+
+  ngOnInit(): void {
+    this.product$ = this.route.params.pipe(
+      switchMap(params => {
+        const id = params['id'];
+        return this.productService.findOne(id);
+      })
+    );
+  }
+}
--- a/admin/src/app/features/products/components/product-filter/product-filter.component.html
+++ b/admin/src/app/features/products/components/product-filter/product-filter.component.html
@@ -0,0 +1,12 @@
+<!-- dvbooking-cli/src/templates/angular/filter.component.html.tpl -->
+<!-- Generated by the CLI -->
+<form [formGroup]="filterForm" class="p-4 bg-base-200 rounded-lg shadow">
+<div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
+<div class="form-control"><label class="label"><span class="label-text">name</span></label>
+              <input type="text" formControlName="name" class="input input-bordered w-full" placeholder="Filter by name" /></div>
+
+<div class="form-control">
+  <button type="button" (click)="reset()" class="btn btn-secondary">Reset</button>
+</div>
+</div>
+</form>
--- a/admin/src/app/features/products/components/product-filter/product-filter.component.ts
+++ b/admin/src/app/features/products/components/product-filter/product-filter.component.ts
@@ -0,0 +1,37 @@
+// dvbooking-cli/src/templates/angular/filter.component.ts.tpl
+
+// Generated by the CLI
+import { Component, EventEmitter, Output } from '@angular/core';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-product-filter',
+  templateUrl: './product-filter.component.html',
+  standalone: true,
+  imports: [ReactiveFormsModule]
+})
+export class ProductFilterComponent {
+  @Output() filterChanged = new EventEmitter<any>();
+  filterForm: FormGroup;
+
+  constructor(private fb: FormBuilder) {
+    this.filterForm = this.fb.group({
+          name: ['']
+    });
+
+    this.filterForm.valueChanges.pipe(
+      debounceTime(300),
+      distinctUntilChanged()
+    ).subscribe(values => {
+      const cleanFilter = Object.fromEntries(
+        Object.entries(values).filter(([_, v]) => v != null && v !== '')
+      );
+      this.filterChanged.emit(cleanFilter);
+    });
+  }
+
+  reset() {
+    this.filterForm.reset();
+  }
+}
--- a/admin/src/app/features/products/components/product-form/product-form.component.html
+++ b/admin/src/app/features/products/components/product-form/product-form.component.html
@@ -0,0 +1,33 @@
+<!-- dvbooking-cli/src/templates/angular/form.component.html.tpl -->
+
+<!-- Generated by the CLI -->
+<div class="p-4 md:p-8">
+  <div class="card bg-base-100 shadow-xl max-w-2xl mx-auto">
+    <div class="card-body">
+      <h2 class="card-title text-3xl">
+        {{ isEditMode ? 'Edit' : 'Create' }} Product
+      </h2>
+
+      <form [formGroup]="form" (ngSubmit)="onSubmit()" class="space-y-4 mt-4">
+
+            <div class="form-control"><label class="label"><span class="label-text">name</span></label>
+              <input type="text" formControlName="name" class="input input-bordered w-full"  /></div>
+
+            <div class="form-control"><label class="label"><span class="label-text">price</span></label>
+              <input type="number" formControlName="price" class="input input-bordered w-full"  /></div>
+
+            <div class="form-control"><label class="label cursor-pointer justify-start gap-4">
+              <span class="label-text">is_available</span> 
+              <input type="checkbox" formControlName="is_available" class="checkbox" />
+            </label></div>
+
+        <div class="card-actions justify-end mt-6">
+          <a routerLink="/products" class="btn btn-ghost">Cancel</a>
+          <button type="submit" class="btn btn-primary" [disabled]="form.invalid">
+            {{ isEditMode ? 'Update' : 'Create' }}
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
--- a/admin/src/app/features/products/components/product-form/product-form.component.ts
+++ b/admin/src/app/features/products/components/product-form/product-form.component.ts
@@ -0,0 +1,87 @@
+// dvbooking-cli/src/templates/angular/form.component.ts.tpl
+
+// Generated by the CLI
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { Observable, of } from 'rxjs';
+import { switchMap, tap } from 'rxjs/operators';
+import { Product } from '../../models/product.model';
+import { ProductService } from '../../services/product.service';
+
+@Component({
+  selector: 'app-product-form',
+  templateUrl: './product-form.component.html',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, RouterModule],
+})
+export class ProductFormComponent implements OnInit {
+  form: FormGroup;
+  isEditMode = false;
+  id: number | null = null;
+
+  private numericFields = ["price"];
+
+  constructor(
+    private fb: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private productService: ProductService
+  ) {
+    this.form = this.fb.group({
+          name: [null],
+          price: [null],
+          is_available: [null]
+    });
+  }
+
+  ngOnInit(): void {
+    this.route.params.pipe(
+      tap(params => {
+        if (params['id']) {
+          this.isEditMode = true;
+          this.id = +params['id'];
+        }
+      }),
+      switchMap(() => {
+        if (this.isEditMode && this.id) {
+          return this.productService.findOne(this.id);
+        }
+        return of(null);
+      })
+    ).subscribe(product => {
+      if (product) {
+        this.form.patchValue(product);
+      }
+    });
+  }
+
+  onSubmit(): void {
+    if (this.form.invalid) {
+      this.form.markAllAsTouched();
+      return;
+    }
+
+    const payload = { ...this.form.value };
+
+     for (const field of this.numericFields) {
+          if (payload[field] != null && payload[field] !== '') {
+            payload[field] = parseFloat(payload[field]);
+          }
+        }
+
+    let action$: Observable<Product>;
+
+   if (this.isEditMode && this.id) {
+      action$ = this.productService.update(this.id, payload);
+    } else {
+      action$ = this.productService.create(payload);
+    }
+
+    action$.subscribe({
+      next: () => this.router.navigate(['/products']),
+      error: (err) => console.error('Failed to save product', err)
+    });
+  }
+}
--- a/admin/src/app/features/products/components/product-list/product-list.component.html
+++ b/admin/src/app/features/products/components/product-list/product-list.component.html
@@ -0,0 +1,64 @@
+<!-- dvbooking-cli/src/templates/angular/list.component.html.tpl -->
+
+<!-- Generated by the CLI -->
+<div class="p-4 md:p-8 space-y-6">
+  <div class="flex justify-between items-center">
+    <h1 class="text-3xl font-bold">Products</h1>
+    <a routerLink="/products/new" class="btn btn-primary">Create New</a>
+  </div>
+
+  <app-product-filter (filterChanged)="onFilterChanged($event)"></app-product-filter>
+
+  <ng-container *ngIf="paginatedResponse$ | async as response; else loading">
+    <div class="overflow-x-auto bg-base-100 rounded-lg shadow">
+      <table class="table w-full">
+        <thead>
+          <tr>
+              <th>id</th>
+              <th>name</th>
+              <th>price</th>
+              <th>is_available</th>
+            <th class="text-right">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let item of response.data" class="hover">
+              <td>{{ item.id }}</td>
+              <td>{{ item.name }}</td>
+              <td>{{ item.price }}</td>
+              <td>{{ item.is_available }}</td>
+            <td class="text-right space-x-2">
+              <a [routerLink]="['/products', item.id]" class="btn btn-sm btn-ghost">View</a>
+              <a [routerLink]="['/products', item.id, 'edit']" class="btn btn-sm btn-ghost">Edit</a>
+              <button (click)="deleteItem(item.id)" class="btn btn-sm btn-error btn-ghost">Delete</button>
+            </td>
+          </tr>
+          <tr *ngIf="response.data.length === 0">
+            <td colspan="5" class="text-center">No products found.</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Pagination Controls -->
+    <div *ngIf="response.meta.totalPages > 1" class="flex justify-center mt-4">
+      <div class="join">
+        <button
+          class="join-item btn"
+          (click)="changePage(response.meta.currentPage - 1)"
+          [disabled]="response.meta.currentPage === 1">«</button>
+        <button class="join-item btn">Page {{ response.meta.currentPage }} of {{ response.meta.totalPages }}</button>
+        <button
+          class="join-item btn"
+          (click)="changePage(response.meta.currentPage + 1)"
+          [disabled]="response.meta.currentPage === response.meta.totalPages">»</button>
+      </div>
+    </div>
+  </ng-container>
+
+  <ng-template #loading>
+    <div class="text-center p-8">
+      <span class="loading loading-spinner loading-lg"></span>
+    </div>
+  </ng-template>
+</div>
--- a/admin/src/app/features/products/components/product-list/product-list.component.ts
+++ b/admin/src/app/features/products/components/product-list/product-list.component.ts
@@ -0,0 +1,68 @@
+// dvbooking-cli/src/templates/angular/list.component.ts.tpl
+
+// Generated by the CLI
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { BehaviorSubject, Observable, combineLatest } from 'rxjs';
+import { switchMap, startWith } from 'rxjs/operators';
+import { Product, PaginatedResponse } from '../../models/product.model';
+import { ProductService } from '../../services/product.service';
+import { ProductFilterComponent } from '../product-filter/product-filter.component';
+
+@Component({
+  selector: 'app-product-list',
+  templateUrl: './product-list.component.html',
+  standalone: true,
+  imports: [CommonModule,RouterModule, ProductFilterComponent],
+})
+export class ProductListComponent implements OnInit {
+
+  private refresh$ = new BehaviorSubject<void>(undefined);
+  private filter$ = new BehaviorSubject<any>({});
+  private page$ = new BehaviorSubject<number>(1);
+
+  paginatedResponse$!: Observable<PaginatedResponse<Product>>;
+
+  constructor(private productService: ProductService) { }
+
+  ngOnInit(): void {
+    this.paginatedResponse$ = combineLatest([
+      this.refresh$,
+      this.filter$.pipe(startWith({})),
+      this.page$.pipe(startWith(1))
+    ]).pipe(
+      switchMap(([_, filter, page]) => {
+        const query = { ...filter, page, limit: 10 };
+        return this.productService.find(query);
+      })
+    );
+  }
+
+  onFilterChanged(filter: any): void {
+    this.page$.next(1);
+    this.filter$.next(filter);
+  }
+
+  changePage(newPage: number): void {
+    if (newPage > 0) {
+      this.page$.next(newPage);
+    }
+  }
+
+  deleteItem(id: number): void {
+    if (confirm('Are you sure you want to delete this item?')) {
+      this.productService.remove(id).subscribe({
+        next: () => {
+          console.log(`Item with ID ${id} deleted successfully.`);
+          this.refresh$.next();
+        },
+        // --- THIS IS THE FIX ---
+        // Explicitly type 'err' to satisfy strict TypeScript rules.
+        error: (err: any) => {
+          console.error(`Error deleting item with ID ${id}:`, err);
+        }
+      });
+    }
+  }
+}
--- a/admin/src/app/features/products/models/product.model.ts
+++ b/admin/src/app/features/products/models/product.model.ts
@@ -0,0 +1,20 @@
+// dvbooking-cli/src/templates/angular/model.ts.tpl
+
+// Generated by the CLI
+export interface Product {
+  id: number;
+  name: string;
+  price: number;
+  is_available: boolean;
+}
+
+export interface PaginatedResponse<T> {
+  data: T[];
+  meta: {
+    totalItems: number;
+    itemCount: number;
+    itemsPerPage: number;
+    totalPages: number;
+    currentPage: number;
+  };
+}
--- a/admin/src/app/features/products/services/product.service.ts
+++ b/admin/src/app/features/products/services/product.service.ts
@@ -0,0 +1,83 @@
+// dvbooking-cli/src/templates/angular/service.ts.tpl
+
+// Generated by the CLI
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Product, PaginatedResponse } from '../models/product.model';
+import { ConfigurationService } from '../../../services/configuration.service';
+
+export interface SearchResponse<T> {
+  data: T[];
+  total: number;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProductService {
+  private readonly apiUrl: string;
+
+  constructor(
+    private http: HttpClient,
+    private configService: ConfigurationService
+  ) {
+    this.apiUrl = `${this.configService.getApiUrl()}/products`;
+  }
+
+  /**
+   * Find records with pagination and filtering.
+   */
+  public find(filter: Record<string, any>): Observable<PaginatedResponse<Product>> {
+    // --- THIS IS THE FIX ---
+    // The incorrect line: .filter(([_, v]) for v != null)
+    // is now correctly written with an arrow function.
+    const cleanFilter = Object.fromEntries(
+      Object.entries(filter).filter(([_, v]) => v != null)
+    );
+    // --- END OF FIX ---
+
+    const params = new HttpParams({ fromObject: cleanFilter });
+    return this.http.get<PaginatedResponse<Product>>(this.apiUrl, { params });
+  }
+
+   /**
+   * Search across multiple fields with a single term.
+   * @param term The search term (q).
+   */
+ public search(term: string, page: number = 1, limit: number = 10): Observable<PaginatedResponse<Product>> {
+    const params = new HttpParams()
+      .set('q', term)
+      .set('page', page.toString())
+      .set('limit', limit.toString());
+    return this.http.get<PaginatedResponse<Product>>(`${this.apiUrl}/search`, { params });
+  }
+
+  /**
+   * Find a single record by its ID.
+   */
+  public findOne(id: number): Observable<Product> {
+    return this.http.get<Product>(`${this.apiUrl}/${id}`);
+  }
+
+  /**
+   * Create a new record.
+   */
+  public create(data: Omit<Product, 'id'>): Observable<Product> {
+    return this.http.post<Product>(this.apiUrl, data);
+  }
+
+  /**
+   * Update an existing record.
+   */
+  public update(id: number, data: Partial<Omit<Product, 'id'>>): Observable<Product> {
+    return this.http.patch<Product>(`${this.apiUrl}/${id}`, data);
+  }
+
+  /**
+   * Remove a record by its ID.
+   */
+  public remove(id: number): Observable<any> {
+    return this.http.delete(`${this.apiUrl}/${id}`);
+  }
+}
				`@@ -0,0 +1 @@`
				`<app-generic-table [config]="listConfig"></app-generic-table>`