feat: add product management features and integrate role selection

- Added PRODUCTS_ROUTES to app routing.
- Removed roles.const.ts and related references to central-auth-roles.
- Updated login component to remove role selection logic.
- Integrated ToastService for success notifications in customer, inventory, product brand, product category, supplier, and user forms.
- Implemented product and category selection fields in product form.
- Created reusable select components for product brands and categories.
- Enhanced user form with password validation and role selection.
- Established roles service for fetching roles from the API.

src/app/modules/auth/constants/central-auth-roles.const.ts

@@ -1,5 +0,0 @@
-import rolesConst from '@/core/constants/roles.const';
-
-export const CENTRAL_AUTH_ROLES = [
-  ...Object.values(rolesConst).filter((role) => role.key !== 'ADMIN'),
-];

src/app/modules/auth/pages/login/login.component.html

@@ -1,15 +1,4 @@
 <form [formGroup]="loginForm" class="w-full flex flex-col gap-4" (ngSubmit)="submit()">
-  @if (!defaultRole) {
-    <div class="flex items-center gap-4 justify-center mb-10">
-      @for (role of centralAuthRoles; track role.key) {
-        <div class="flex items-center gap-1">
-          <p-radiobutton [inputId]="role.key" name="role" [value]="role.key" formControlName="role" size="small" />
-          <uikit-label [name]="role.key" class="cursor-pointer">{{ role.title }}</uikit-label>
-        </div>
-      }
-    </div>
-  }
-
   <uikit-field name="username" pSize="large" [control]="loginForm.controls.username" label="نام کاربری">
     <input
       pInputText

src/app/modules/auth/pages/login/login.component.ts

@@ -16,7 +16,7 @@ import { Password } from 'primeng/password';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
 import { RadioButtonModule } from 'primeng/radiobutton';
 import { CaptchaService } from 'src/app/core/services/captcha.service';
-import { CENTRAL_AUTH_ROLES } from '../../constants/central-auth-roles.const';
+// import { CENTRAL_AUTH_ROLES } from '../../constants/central-auth-roles.const';
 
 @Component({
   selector: 'app-login',
@@ -56,14 +56,14 @@ export class LoginComponent {
   readonly isCaptchaExpired = this.captchaService.captchaIsExpired;
   readonly isCaptchaLoading = this.captchaService.loading;
   readonly captchaImageSrc = this.captchaService.captchaImageSrc;
-  readonly centralAuthRoles = CENTRAL_AUTH_ROLES;
+  // readonly centralAuthRoles = CENTRAL_AUTH_ROLES;
 
   readonly loginForm = this.fb.group({
     username: ['', [Validators.required]],
     password: ['', [Validators.required]],
     rememberMe: [false],
     captcha: ['', [Validators.required]],
-    role: [this.defaultRole || this.centralAuthRoles[0].key, [Validators.required]],
+    role: [this.defaultRole, [Validators.required]],
   });
 
   selectedRole = signal<TRoles>('SCHOOL');

src/app/modules/customers/components/form.component.ts

@@ -1,3 +1,4 @@
+import { ToastService } from '@/core/services/toast.service';
 import { InputComponent } from '@/shared/components';
 import { FormFooterActionsComponent } from '@/shared/components/formFooterActions/form-footer-actions.component';
 import { Component, effect, EventEmitter, inject, Input, Output, signal } from '@angular/core';
@@ -27,7 +28,10 @@ export class CustomerFormComponent {
   @Output() onSubmit = new EventEmitter<ICustomerResponse>();
 
   private fb = inject(FormBuilder);
-  constructor(private service: CustomersService) {
+  constructor(
+    private service: CustomersService,
+    private toastService: ToastService,
+  ) {
     effect(() => {
       const v = this.visibleSignal();
       if (!v) this.form.reset();
@@ -55,6 +59,10 @@ export class CustomerFormComponent {
       this.submitLoading.set(true);
       this.service.create(this.form.value as ICustomerRequest).subscribe({
         next: (res) => {
+          this.toastService.success({
+            text: `مشتری ${this.form.value.firstName} با موفقیت ایجاد شد`,
+          });
+          this.close();
           this.submitLoading.set(false);
           this.form.enable();
           this.form.reset();

src/app/modules/customers/views/list.component.ts

@@ -30,7 +30,6 @@ export class CustomersComponent {
     { field: 'isActive', header: 'فعال' },
     { field: 'createdAt', header: 'تاریخ ایجاد' },
     { field: 'updatedAt', header: 'تاریخ به‌روزرسانی' },
-    { field: 'actions' },
   ] as IColumn[];
 
   loading = signal(false);

src/app/modules/inventories/components/form.component.ts

@@ -1,3 +1,4 @@
+import { ToastService } from '@/core/services/toast.service';
 import { InputComponent } from '@/shared/components';
 import { FormFooterActionsComponent } from '@/shared/components/formFooterActions/form-footer-actions.component';
 import { Component, effect, EventEmitter, inject, Input, Output, signal } from '@angular/core';
@@ -27,7 +28,10 @@ export class InventoryFormComponent {
   @Output() onSubmit = new EventEmitter<IInventoryResponse>();
 
   private fb = inject(FormBuilder);
-  constructor(private service: InventoriesService) {
+  constructor(
+    private service: InventoriesService,
+    private toastService: ToastService,
+  ) {
     effect(() => {
       const v = this.visibleSignal();
       if (!v) this.form.reset();
@@ -49,6 +53,10 @@ export class InventoryFormComponent {
       this.submitLoading.set(true);
       this.service.create(this.form.value as IInventoryRequest).subscribe({
         next: (res) => {
+          this.toastService.success({
+            text: `انبار ${this.form.value.name} با موفقیت ایجاد شد`,
+          });
+          this.close();
           this.submitLoading.set(false);
           this.form.enable();
           this.form.reset();

src/app/modules/inventories/views/list.component.ts

@@ -22,7 +22,6 @@ export class InventoriesComponent {
     { field: 'name', header: 'نام' },
     { field: 'location', header: 'موقعیت' },
     { field: 'isActive', header: 'فعال' },
-    { field: 'actions' },
   ] as IColumn[];
 
   loading = signal(false);

src/app/modules/productBrands/components/form.component.html

@@ -1,4 +1,11 @@
-<p-dialog header="فرم برند محصول" [(visible)]="visible" [modal]="true" [style]="{ width: '500px' }" [closable]="true">
+<p-dialog
+  header="فرم برند محصول"
+  [(visible)]="visible"
+  [modal]="true"
+  [style]="{ width: '500px' }"
+  [closable]="true"
+  appendTo="body"
+>
   <form [formGroup]="form" (submit)="submit()" class="flex flex-col gap-4">
     <app-input label="نام" [control]="form.controls.name" name="name" />
     <app-input label="توضیحات" [control]="form.controls.description" name="description" />

src/app/modules/productBrands/components/form.component.ts

@@ -1,3 +1,4 @@
+import { ToastService } from '@/core/services/toast.service';
 import { InputComponent } from '@/shared/components';
 import { FormFooterActionsComponent } from '@/shared/components/formFooterActions/form-footer-actions.component';
 import { Component, effect, EventEmitter, inject, Input, Output, signal } from '@angular/core';
@@ -27,7 +28,10 @@ export class ProductBrandFormComponent {
   @Output() onSubmit = new EventEmitter<IProductBrandResponse>();
 
   private fb = inject(FormBuilder);
-  constructor(private service: ProductBrandsService) {
+  constructor(
+    private service: ProductBrandsService,
+    private toastService: ToastService,
+  ) {
     effect(() => {
       const v = this.visibleSignal();
       if (!v) this.form.reset();
@@ -36,8 +40,8 @@ export class ProductBrandFormComponent {
 
   form = this.fb.group({
     name: [this.initialValues?.name || null, [Validators.required]],
-    description: [this.initialValues?.description || null, [Validators.required]],
-    imageUrl: [this.initialValues?.imageUrl || null, [Validators.required]],
+    description: [this.initialValues?.description || null],
+    imageUrl: [this.initialValues?.imageUrl || null],
   });
 
   submitLoading = signal(false);
@@ -49,6 +53,10 @@ export class ProductBrandFormComponent {
       this.submitLoading.set(true);
       this.service.create(this.form.value as IProductBrandRequest).subscribe({
         next: (res) => {
+          this.toastService.success({
+            text: `برند ${this.form.value.name} با موفقیت ایجاد شد`,
+          });
+          this.close();
           this.submitLoading.set(false);
           this.form.enable();
           this.form.reset();

src/app/modules/productBrands/components/index.ts

@@ -0,0 +1,2 @@
+export * from './form.component';
+export * from './select/select.component';

src/app/modules/productBrands/components/select/select.component.html

@@ -0,0 +1,31 @@
+<div class="">
+  <uikit-field label="برند">
+    <p-select
+      [options]="brands()"
+      optionLabel="name"
+      optionValue="id"
+      placeholder="انتخاب برند"
+      [formControl]="control"
+      [showClear]="true"
+      [filter]="true"
+      appendTo="body"
+    >
+      @if (canInsert) {
+        <ng-template #footer>
+          <div class="p-3">
+            <p-button
+              label="افزودن برند جدید"
+              fluid
+              severity="secondary"
+              text
+              size="small"
+              icon="pi pi-plus"
+              (onClick)="onOpenForm()"
+            />
+          </div>
+        </ng-template>
+      }
+    </p-select>
+  </uikit-field>
+  <product-brand-form [(visible)]="isOpenFormDialog" (onSubmit)="refresh()" />
+</div>

src/app/modules/productBrands/components/select/select.component.ts

@@ -0,0 +1,49 @@
+import { Maybe } from '@/core';
+import { UikitFieldComponent } from '@/uikit';
+import { Component, Input, signal } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { Button } from 'primeng/button';
+import { Select } from 'primeng/select';
+import { IProductBrandResponse } from '../../models';
+import { ProductBrandsService } from '../../services/main.service';
+import { ProductBrandFormComponent } from '../form.component';
+
+@Component({
+  selector: 'product-brands-select-field',
+  templateUrl: './select.component.html',
+  imports: [ReactiveFormsModule, Select, UikitFieldComponent, Button, ProductBrandFormComponent],
+})
+export class ProductBrandsSelectComponent {
+  @Input() control!: FormControl<Maybe<number>>;
+  @Input() canInsert: boolean = false;
+
+  constructor(private service: ProductBrandsService) {
+    this.getData();
+  }
+
+  loading = signal(false);
+  brands = signal<Maybe<IProductBrandResponse[]>>(null);
+
+  isOpenFormDialog = signal(false);
+
+  getData() {
+    this.loading.set(true);
+    this.service.getAll().subscribe({
+      next: (res) => {
+        this.brands.set(res.data);
+        this.loading.set(false);
+      },
+      error: () => {
+        this.loading.set(false);
+      },
+    });
+  }
+
+  refresh() {
+    this.getData();
+  }
+
+  onOpenForm() {
+    this.isOpenFormDialog.set(true);
+  }
+}

src/app/modules/productBrands/views/list.component.ts

@@ -24,7 +24,6 @@ export class ProductBrandsComponent {
     { field: 'imageUrl', header: 'تصویر' },
     { field: 'createdAt', header: 'تاریخ ایجاد' },
     { field: 'updatedAt', header: 'تاریخ به‌روزرسانی' },
-    { field: 'actions' },
   ] as IColumn[];
 
   loading = signal(false);

src/app/modules/productCategories/components/form.component.ts

@@ -1,3 +1,4 @@
+import { ToastService } from '@/core/services/toast.service';
 import { InputComponent } from '@/shared/components';
 import { FormFooterActionsComponent } from '@/shared/components/formFooterActions/form-footer-actions.component';
 import { Component, effect, EventEmitter, inject, Input, Output, signal } from '@angular/core';
@@ -27,7 +28,10 @@ export class ProductCategoryFormComponent {
   @Output() onSubmit = new EventEmitter<IProductCategoryResponse>();
 
   private fb = inject(FormBuilder);
-  constructor(private service: ProductCategoriesService) {
+  constructor(
+    private service: ProductCategoriesService,
+    private toastService: ToastService,
+  ) {
     effect(() => {
       const v = this.visibleSignal();
       if (!v) this.form.reset();
@@ -36,8 +40,8 @@ export class ProductCategoryFormComponent {
 
   form = this.fb.group({
     name: [this.initialValues?.name || null, [Validators.required]],
-    description: [this.initialValues?.description || null, [Validators.required]],
-    imageUrl: [this.initialValues?.imageUrl || null, [Validators.required]],
+    description: [this.initialValues?.description || null],
+    imageUrl: [this.initialValues?.imageUrl || null],
   });
 
   submitLoading = signal(false);
@@ -49,6 +53,10 @@ export class ProductCategoryFormComponent {
       this.submitLoading.set(true);
       this.service.create(this.form.value as IProductCategoryRequest).subscribe({
         next: (res) => {
+          this.toastService.success({
+            text: `دسته‌بندی ${this.form.value.name} با موفقیت ایجاد شد`,
+          });
+          this.close();
           this.submitLoading.set(false);
           this.form.enable();
           this.form.reset();

src/app/modules/productCategories/components/index.ts

@@ -0,0 +1,2 @@
+export * from './form.component';
+export * from './select/select.component';

src/app/modules/productCategories/components/select/select.component.html

@@ -0,0 +1,31 @@
+<div class="">
+  <uikit-field label="دسته‌بندی">
+    <p-select
+      [options]="brands()"
+      optionLabel="name"
+      optionValue="id"
+      placeholder="انتخاب دسته‌بندی"
+      [formControl]="control"
+      [showClear]="true"
+      [filter]="true"
+      appendTo="body"
+    >
+      @if (canInsert) {
+        <ng-template #footer>
+          <div class="p-3">
+            <p-button
+              label="افزودن دسته‌بندی جدید"
+              fluid
+              severity="secondary"
+              text
+              size="small"
+              icon="pi pi-plus"
+              (onClick)="onOpenForm()"
+            />
+          </div>
+        </ng-template>
+      }
+    </p-select>
+  </uikit-field>
+  <product-category-form [(visible)]="isOpenFormDialog" (onSubmit)="refresh()" />
+</div>

src/app/modules/productCategories/components/select/select.component.ts

@@ -0,0 +1,49 @@
+import { Maybe } from '@/core';
+import { UikitFieldComponent } from '@/uikit';
+import { Component, Input, signal } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { Button } from 'primeng/button';
+import { Select } from 'primeng/select';
+import { IProductCategoryResponse } from '../../models';
+import { ProductCategoriesService } from '../../services/main.service';
+import { ProductCategoryFormComponent } from '../form.component';
+
+@Component({
+  selector: 'product-categories-select-field',
+  templateUrl: './select.component.html',
+  imports: [ReactiveFormsModule, Select, UikitFieldComponent, Button, ProductCategoryFormComponent],
+})
+export class ProductCategoriesSelectComponent {
+  @Input() control!: FormControl<Maybe<number>>;
+  @Input() canInsert: boolean = false;
+
+  constructor(private service: ProductCategoriesService) {
+    this.getData();
+  }
+
+  loading = signal(false);
+  brands = signal<Maybe<IProductCategoryResponse[]>>(null);
+
+  isOpenFormDialog = signal(false);
+
+  getData() {
+    this.loading.set(true);
+    this.service.getAll().subscribe({
+      next: (res) => {
+        this.brands.set(res.data);
+        this.loading.set(false);
+      },
+      error: () => {
+        this.loading.set(false);
+      },
+    });
+  }
+
+  refresh() {
+    this.getData();
+  }
+
+  onOpenForm() {
+    this.isOpenFormDialog.set(true);
+  }
+}

src/app/modules/productCategories/views/list.component.ts

@@ -23,7 +23,6 @@ export class ProductCategoriesComponent {
     { field: 'description', header: 'توضیحات' },
     { field: 'imageUrl', header: 'تصویر' },
     { field: 'createdAt', header: 'تاریخ ایجاد' },
-    { field: 'actions' },
   ] as IColumn[];
 
   loading = signal(false);

src/app/modules/products/components/form.component.html

@@ -1,8 +1,10 @@
 <p-dialog header="فرم محصول" [(visible)]="visible" [modal]="true" [style]="{ width: '600px' }" [closable]="true">
   <form [formGroup]="form" (submit)="submit()" class="flex flex-col gap-4">
     <app-input label="نام" [control]="form.controls.name" name="name" />
+    <product-brands-select-field [control]="form.controls.brandId" [canInsert]="true" />
+    <product-categories-select-field [control]="form.controls.categoryId" [canInsert]="true" />
     <app-input label="توضیحات" [control]="form.controls.description" name="description" />
-    <app-input label="نوع محصول" [control]="form.controls.productType" name="productType" />
+    <!-- <app-input label="نوع محصول" [control]="form.controls.productType" name="productType" /> -->
     <!-- <app-input label="برند" [control]="form.controls.brandId" name="brandId" type="" />
     <app-input label="دسته‌بندی" [control]="form.controls.categoryId" name="categoryId" type="number" />
     <app-input label="تامین‌کننده" [control]="form.controls.supplierId" name="supplierId" type="number" /> -->

src/app/modules/products/components/form.component.ts

@@ -1,5 +1,8 @@
+import { ProductBrandsSelectComponent } from '@/modules/productBrands/components';
+import { ProductCategoriesSelectComponent } from '@/modules/productCategories/components';
 import { InputComponent } from '@/shared/components';
 import { FormFooterActionsComponent } from '@/shared/components/formFooterActions/form-footer-actions.component';
+import { UikitFieldComponent } from '@/uikit';
 import { Component, effect, EventEmitter, inject, Input, Output, signal } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { Dialog } from 'primeng/dialog';
@@ -9,7 +12,15 @@ import { ProductsService } from '../services/main.service';
 @Component({
   selector: 'product-form',
   templateUrl: './form.component.html',
-  imports: [ReactiveFormsModule, Dialog, InputComponent, FormFooterActionsComponent],
+  imports: [
+    ReactiveFormsModule,
+    Dialog,
+    InputComponent,
+    FormFooterActionsComponent,
+    UikitFieldComponent,
+    ProductBrandsSelectComponent,
+    ProductCategoriesSelectComponent,
+  ],
 })
 export class ProductFormComponent {
   @Input() initialValues?: IProductResponse;
@@ -36,11 +47,10 @@ export class ProductFormComponent {
 
   form = this.fb.group({
     name: [this.initialValues?.name || null, [Validators.required]],
-    description: [this.initialValues?.description || null, [Validators.required]],
-    productType: [this.initialValues?.productType || null, [Validators.required]],
+    description: [this.initialValues?.description || null],
+    // productType: [this.initialValues?.productType || null, [Validators.required]],
     brandId: [this.initialValues?.brandId || null, [Validators.required]],
-    categoryId: [this.initialValues?.categoryId || null, [Validators.required]],
-    supplierId: [this.initialValues?.supplierId || null, [Validators.required]],
+    categoryId: [this.initialValues?.categoryId || null],
   });
 
   submitLoading = signal(false);

src/app/modules/products/views/list.component.ts

@@ -27,7 +27,6 @@ export class ProductsComponent {
     { field: 'supplierId', header: 'تامین‌کننده' },
     { field: 'createdAt', header: 'تاریخ ایجاد' },
     { field: 'updatedAt', header: 'تاریخ به‌روزرسانی' },
-    { field: 'actions' },
   ] as IColumn[];
 
   loading = signal(false);

src/app/modules/stores/views/list.component.ts

@@ -24,7 +24,6 @@ export class StoresComponent {
     { field: 'isActive', header: 'فعال' },
     { field: 'createdAt', header: 'تاریخ ایجاد' },
     { field: 'updatedAt', header: 'تاریخ به‌روزرسانی' },
-    { field: 'actions' },
   ] as IColumn[];
 
   loading = signal(false);

src/app/modules/suppliers/components/form.component.ts

@@ -1,3 +1,4 @@
+import { ToastService } from '@/core/services/toast.service';
 import { InputComponent } from '@/shared/components';
 import { FormFooterActionsComponent } from '@/shared/components/formFooterActions/form-footer-actions.component';
 import { Component, effect, EventEmitter, inject, Input, Output, signal } from '@angular/core';
@@ -27,7 +28,10 @@ export class SupplierFormComponent {
   @Output() onSubmit = new EventEmitter<ISupplierResponse>();
 
   private fb = inject(FormBuilder);
-  constructor(private service: SuppliersService) {
+  constructor(
+    private service: SuppliersService,
+    private toastService: ToastService,
+  ) {
     effect(() => {
       const v = this.visibleSignal();
       if (!v) this.form.reset();
@@ -55,6 +59,10 @@ export class SupplierFormComponent {
       this.submitLoading.set(true);
       this.service.create(this.form.value as ISupplierRequest).subscribe({
         next: (res) => {
+          this.toastService.success({
+            text: `تأمین‌کننده ${this.form.value.firstName} ${this.form.value.lastName} با موفقیت ایجاد شد`,
+          });
+          this.close();
           this.submitLoading.set(false);
           this.form.enable();
           this.form.reset();

src/app/modules/suppliers/views/list.component.ts

@@ -30,7 +30,6 @@ export class SuppliersComponent {
     { field: 'isActive', header: 'فعال' },
     { field: 'createdAt', header: 'تاریخ ایجاد' },
     { field: 'updatedAt', header: 'تاریخ به‌روزرسانی' },
-    { field: 'actions' },
   ] as IColumn[];
 
   loading = signal(false);

src/app/modules/users/components/form.component.html

@@ -3,7 +3,35 @@
     <app-input label="نام" [control]="form.controls.firstName" name="firstName" />
     <app-input label="نام خانوادگی" [control]="form.controls.lastName" name="lastName" />
     <app-input label="شماره موبایل" [control]="form.controls.mobileNumber" name="mobileNumber" type="mobile" />
-    <app-input label="نقش" [control]="form.controls.roleId" name="roleId" />
+    <catalog-roles-select [control]="form.controls.roleId" />
+    <uikit-field label="رمز عبور" class="" [control]="form.get('password')">
+      <p-password
+        id="password1"
+        name="password"
+        formControlName="password"
+        autocomplete="password"
+        [toggleMask]="true"
+        [fluid]="true"
+        [feedback]="false"
+        [invalid]="form.get('password')?.touched && form.get('password')?.invalid"
+      />
+      <span class="text-xs mt-2 text-muted-color">
+        رمز باید حداقل ۸ کاراکتر بوده و شامل حداقل یک حرف بزرگ، یک حرف کوچک، یک عدد و یک کاراکتر ویژه باشد.
+      </span>
+    </uikit-field>
+
+    <uikit-field label="تکرار رمز عبور" class="" [control]="form.get('confirmPassword')">
+      <p-password
+        id="confirmPassword"
+        name="confirmPassword"
+        formControlName="confirmPassword"
+        autocomplete="new-password"
+        [toggleMask]="true"
+        [fluid]="true"
+        [feedback]="false"
+        [invalid]="form.get('confirmPassword')?.touched && form.get('confirmPassword')?.invalid"
+      />
+    </uikit-field>
     <app-form-footer-actions [submitLabel]="'ذخیره'" [loading]="form.disabled" (onCancel)="close()" />
   </form>
 </p-dialog>

src/app/modules/users/components/form.component.ts

@@ -1,10 +1,13 @@
-import { mobileValidator } from '@/core/validators';
+import { ToastService } from '@/core/services/toast.service';
+import { mobileValidator, MustMatch, password } from '@/core/validators';
+import { CatalogRolesComponent } from '@/shared/catalog/roles';
 import { InputComponent } from '@/shared/components';
 import { FormFooterActionsComponent } from '@/shared/components/formFooterActions/form-footer-actions.component';
 import { UikitFieldComponent } from '@/uikit';
-import { Component, effect, EventEmitter, inject, Input, Output, signal } from '@angular/core';
+import { Component, EventEmitter, inject, Input, Output, signal } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { Dialog } from 'primeng/dialog';
+import { Password } from 'primeng/password';
 import { IUserRequest, IUserResponse } from '../models';
 import { UsersService } from '../services/main.service';
 
@@ -14,9 +17,11 @@ import { UsersService } from '../services/main.service';
   imports: [
     ReactiveFormsModule,
     Dialog,
-    UikitFieldComponent,
     InputComponent,
     FormFooterActionsComponent,
+    CatalogRolesComponent,
+    UikitFieldComponent,
+    Password,
   ],
 })
 export class UserFormComponent {
@@ -35,23 +40,33 @@ export class UserFormComponent {
   @Output() onSubmit = new EventEmitter<IUserResponse>();
 
   private fb = inject(FormBuilder);
-  constructor(private service: UsersService) {
-    effect(() => {
-      const v = this.visibleSignal();
-      // this.visibleChange.emit(v);
-      if (!v) this.form.reset();
-    });
+  constructor(
+    private service: UsersService,
+    private toastService: ToastService,
+  ) {
+    // effect(() => {
+    //   const v = this.visibleSignal();
+    //   // this.visibleChange.emit(v);
+    //   if (!v) this.form.reset();
+    // });
   }
 
-  form = this.fb.group({
-    firstName: [this.initialValues?.firstName || null, [Validators.required]],
-    lastName: [this.initialValues?.lastName || null, [Validators.required]],
-    mobileNumber: [
-      this.initialValues?.mobileNumber || null,
-      [Validators.required, mobileValidator()],
-    ],
-    roleId: [this.initialValues?.roleId || null, [Validators.required]],
-  });
+  form = this.fb.group(
+    {
+      firstName: [this.initialValues?.firstName || '', [Validators.required]],
+      lastName: [this.initialValues?.lastName || '', [Validators.required]],
+      mobileNumber: [
+        this.initialValues?.mobileNumber || '',
+        [Validators.required, mobileValidator()],
+      ],
+      roleId: [this.initialValues?.role.id || null, [Validators.required]],
+      password: ['', [Validators.required, password()]],
+      confirmPassword: ['', [Validators.required]],
+    },
+    {
+      validators: [MustMatch('password', 'confirmPassword')],
+    },
+  );
 
   submitLoading = signal(false);
 
@@ -60,8 +75,13 @@ export class UserFormComponent {
     if (this.form.valid) {
       this.form.disable();
       this.submitLoading.set(true);
-      this.service.create(this.form.value as IUserRequest).subscribe({
+      const { confirmPassword, ...rest } = this.form.value;
+      this.service.create(rest as IUserRequest).subscribe({
         next: (res) => {
+          this.toastService.success({
+            text: `کاربر ${this.form.value.firstName} با موفقیت ایجاد شد`,
+          });
+          this.close();
           this.submitLoading.set(false);
           this.form.enable();
           this.form.reset();

src/app/modules/users/models/io.d.ts

@@ -1,9 +1,11 @@
+import { IRoleResponse } from '@/shared/catalog/roles';
+
 export interface IUserRawResponse {
   mobileNumber: string;
   firstName: string;
   lastName: string;
   id: number;
-  roleId: number;
+  role: IRoleResponse;
 }
 export interface IUserResponse extends IUserRawResponse {}
 

src/app/modules/users/views/list.component.html

@@ -10,6 +10,9 @@
   [showDetails]="true"
   [showAdd]="true"
   (onAdd)="openAddForm()"
-/>
-
+>
+  <ng-template #role let-data>
+    <catalog-role-tag [role]="data.role" />
+  </ng-template>
+</app-page-data-list>
 <user-form [(visible)]="visibleForm" (onSubmit)="refresh()" />

src/app/modules/users/views/list.component.ts

@@ -1,8 +1,9 @@
+import { CatalogRoleTagComponent } from '@/shared/catalog/roles';
 import {
   IColumn,
   PageDataListComponent,
 } from '@/shared/components/pageDataList/page-data-list.component';
-import { Component, signal } from '@angular/core';
+import { Component, signal, TemplateRef, ViewChild } from '@angular/core';
 import { UserFormComponent } from '../components/form.component';
 import { IUserResponse } from '../models';
 import { UsersService } from '../services/main.service';
@@ -10,20 +11,25 @@ import { UsersService } from '../services/main.service';
 @Component({
   selector: 'app-users',
   templateUrl: './list.component.html',
-  imports: [PageDataListComponent, UserFormComponent],
+  imports: [PageDataListComponent, UserFormComponent, CatalogRoleTagComponent],
 })
 export class UsersComponent {
   constructor(private userService: UsersService) {
     this.getData();
   }
+  @ViewChild('role', { static: true }) roleTpl!: TemplateRef<any>;
 
   columns = [
     { field: 'id', header: 'شناسه' },
     { field: 'firstName', header: 'نام' },
     { field: 'lastName', header: 'نام خانوادگی' },
     { field: 'mobileNumber', header: 'شماره موبایل' },
-    { field: 'roleId', header: 'نقش' },
-    { field: 'actions' },
+    // { field: 'role', header: 'نقش', customDataModel: this.roleTpl },
+    {
+      field: 'role',
+      header: 'نقش',
+      customDataModel: (item: IUserResponse) => item.role.name ?? '-',
+    },
   ] as IColumn[];
 
   loading = signal(false);