put in new file

UI/src/app/app.config.ts

@@ -1,11 +1,30 @@
-import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
-import { provideRouter } from '@angular/router';
-
+import { ApplicationConfig, provideBrowserGlobalErrorListeners ,
+  provideAppInitializer} from '@angular/core';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
+import { providePrimeNG } from 'primeng/config';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { ConfirmationService, MessageService } from 'primeng/api';
 import { routes } from './app.routes';
+import MyPreset from './mythem';
+import { JwtInterceptor, ErrorInterceptor, initializeApp } from './shares';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
-    provideRouter(routes)
+     MessageService, ConfirmationService,
+     provideAppInitializer(initializeApp()),
+     provideHttpClient(withInterceptors([JwtInterceptor, ErrorInterceptor])),
+    provideRouter(routes, withComponentInputBinding()),
+     providePrimeNG({
+            theme: {
+                preset: MyPreset,
+                options: {
+                  cssLayer: {
+                    name: 'primeng',
+                    order: 'theme, base, primeng'
+                }
+              }
+            }
+        }),
   ]
 };

UI/src/app/mythem.ts

@@ -0,0 +1,71 @@
+
+
+//mypreset.ts
+import { definePreset } from '@primeuix/themes';
+import Aura from '@primeuix/themes/aura';
+import { primitive } from '@primeuix/themes/aura/base';
+
+const MyPreset = definePreset(Aura, {
+    semantic: {
+        colorScheme: {
+            primitive: {
+                cyan: {
+                    50: '{cyan.50}',
+                    100: '{cyan.100}',
+                    200: '{cyan.200}',
+                    300: '{cyan.300}',
+                   400: '{cyan.400}',
+                    500: '{cyan.500}',
+                   }
+
+            },
+             primary: {
+            50: '{zinc.50}',
+            100: '{zinc.100}',
+            200: '{zinc.200}',
+            300: '{zinc.300}',
+            400: '{zinc.400}',
+            500: '{zinc.500}',
+            600: '{zinc.600}',
+            700: '{zinc.700}',
+            800: '{zinc.800}',
+            900: '{zinc.900}',
+            950: '{zinc.950}'
+        },
+            light: {
+                surface: {
+                    0: '#ffffff',
+                    50: '{zinc.50}',
+                    100: '{zinc.100}',
+                    200: '{zinc.200}',
+                    300: '{zinc.300}',
+                    400: '{zinc.400}',
+                    500: '{zinc.500}',
+                    600: '{zinc.600}',
+                    700: '{zinc.700}',
+                    800: '{zinc.800}',
+                    900: '{zinc.900}',
+                    950: '{zinc.950}'
+                }
+            },
+            dark: {
+                surface: {
+                    0: '#ffffff',
+                    50: '{slate.50}',
+                    100: '{slate.100}',
+                    200: '{slate.200}',
+                    300: '{slate.300}',
+                    400: '{slate.400}',
+                    500: '{slate.500}',
+                    600: '{slate.600}',
+                    700: '{slate.700}',
+                    800: '{slate.800}',
+                    900: '{slate.900}',
+                    950: '{slate.950}'
+                }
+            }
+        }
+    }
+});
+
+export default MyPreset;

UI/src/app/staff/staff.edit.component.ts

@@ -24,7 +24,7 @@ export class StaffEditComponent implements OnInit, OnDestroy {
 	_error ='';
 	_id= -1;
 	Roles: Code[] = [];
-	id =  input(0, { transform: numberAttribute });
+	id =  input(0);
 	isNew = false;
 	validationPoints?: Code[];
 	private staffService = inject(StaffService);
@@ -48,14 +48,12 @@ export class StaffEditComponent implements OnInit, OnDestroy {
 		password: [''],
 		active: [false], //Validators.required
 		
-		roleType: [0,[Validators.required,  Validators.min(1)]],
-	
+		roleType: [0,[Validators.required,  Validators.min(1)]],	
 	});
-constructor(
-	) {
+constructor() {
 		this.fillRole();
 	}
-fillRole() :void 
+fillRole() : void 
 {
 	this.Roles = [];
 	let item:Code = {id:userRole.Admin, name: 'Admin', status:'Admin'};	
@@ -69,7 +67,8 @@ fillRole() :void
 	//item = {id:userRole.Normal, name: 'Switch', status:'Switch'};
 	//this.Roles.push(item);
 }
-getClassForRequire(prev:string,name:string){
+
+getClassForRequire(prev:string,name:string): string {
   const notok = !this.adminuserForm.controls[name].valid &&
    this.adminuserForm.controls[name].touched;
   let str =prev;
@@ -77,7 +76,8 @@ getClassForRequire(prev:string,name:string){
     str += " ng-invalid ng-dirty";
   return str;
 }
-ngOnInit():void {
+
+ngOnInit(): void {
 	this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
 	const id =  this.id(); // Number(this.route.snapshot.paramMap.get('id'));
 	// now load thing up
@@ -104,9 +104,9 @@ ngOnInit():void {
 	else
 	{
 		this.isNew = true;
-	}
-	
+	}	
 }
+
 getEditText(): string {
 	if (this._id > 0)
 		return "Edit Staff";