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.routes.ts

@@ -2,6 +2,7 @@ import { CUSTOMERS_ROUTES } from '@/modules/customers/constants';
 import { INVENTORIES_ROUTES } from '@/modules/inventories/constants';
 import { PRODUCT_BRANDS_ROUTES } from '@/modules/productBrands/constants';
 import { PRODUCT_CATEGORIES_ROUTES } from '@/modules/productCategories/constants';
+import { PRODUCTS_ROUTES } from '@/modules/products/constants';
 import { STORES_ROUTES } from '@/modules/stores/constants';
 import { SUPPLIERS_ROUTES } from '@/modules/suppliers/constants';
 import { USERS_ROUTES } from '@/modules/users/constants';
@@ -24,6 +25,7 @@ export const appRoutes: Routes = [
       ...PRODUCT_CATEGORIES_ROUTES,
       ...CUSTOMERS_ROUTES,
       ...INVENTORIES_ROUTES,
+      ...PRODUCTS_ROUTES,
       { path: 'uikit', loadChildren: () => import('./app/pages/uikit/uikit.routes') },
       { path: 'documentation', component: Documentation },
       { path: 'pages', loadChildren: () => import('./app/pages/pages.routes') },

src/app/core/constants/index.ts

@@ -1,3 +1,2 @@
 export * from './defaultData.const';
 export * from './menuItems.const';
-export * from './roles.const';

src/app/core/constants/roles.const.ts

@@ -1,20 +0,0 @@
-import { TRoles } from '../models';
-
-export default {
-  ADMIN: {
-    title: 'مدیر سیستم',
-    key: 'ADMIN',
-  },
-  SCHOOL: {
-    title: 'مرکز آموزشی',
-    key: 'SCHOOL',
-  },
-  TEACHER: {
-    title: 'دبیر',
-    key: 'TEACHER',
-  },
-  STUDENTS: {
-    title: 'دانش‌آموز',
-    key: 'STUDENTS',
-  },
-} as Record<TRoles, { title: string; key: TRoles }>;

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]],
+  form = this.fb.group(
+    {
+      firstName: [this.initialValues?.firstName || '', [Validators.required]],
+      lastName: [this.initialValues?.lastName || '', [Validators.required]],
       mobileNumber: [
-      this.initialValues?.mobileNumber || null,
+        this.initialValues?.mobileNumber || '',
         [Validators.required, mobileValidator()],
       ],
-    roleId: [this.initialValues?.roleId || null, [Validators.required]],
-  });
+      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);

src/app/shared/catalog/roles/components/index.ts

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

src/app/shared/catalog/roles/components/select.component.html

@@ -0,0 +1,12 @@
+<uikit-field label="نقش" name="role" [control]="control">
+  <p-select
+    [options]="roles()"
+    [id]="'role'"
+    [optionValue]="'id'"
+    optionLabel="name"
+    [attr.name]="'role'"
+    [formControl]="control"
+    [loading]="loading()"
+    [invalid]="control.invalid && (control.dirty || control.touched)"
+  ></p-select>
+</uikit-field>

src/app/shared/catalog/roles/components/select.component.ts

@@ -0,0 +1,38 @@
+import { Maybe } from '@/core';
+import { UikitFieldComponent } from '@/uikit';
+import { Component, Input, signal } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { Select } from 'primeng/select';
+import { IRoleResponse } from '../models';
+import { RolesService } from '../services';
+
+@Component({
+  selector: 'catalog-roles-select',
+  templateUrl: './select.component.html',
+  imports: [UikitFieldComponent, Select, ReactiveFormsModule],
+})
+export class CatalogRolesComponent {
+  @Input() control!: FormControl<Maybe<number>>;
+
+  constructor(private service: RolesService) {
+    this.getData();
+  }
+
+  roles = signal<IRoleResponse[]>([]);
+  loading = signal<boolean>(false);
+
+  private getData() {
+    this.loading.set(true);
+    return this.service.getAll().subscribe({
+      next: (res) => {
+        this.roles.set(res);
+      },
+      error: () => {
+        this.roles.set([]);
+      },
+      complete: () => {
+        this.loading.set(false);
+      },
+    });
+  }
+}

src/app/shared/catalog/roles/components/tag.component.html

@@ -0,0 +1 @@
+{{ roleTitle() }}

src/app/shared/catalog/roles/components/tag.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+import { IRoleResponse } from '../models';
+
+@Component({
+  selector: 'catalog-role-tag',
+  templateUrl: './tag.component.html',
+})
+export class CatalogRoleTagComponent {
+  @Input() role!: IRoleResponse;
+
+  constructor() {}
+
+  roleTitle() {
+    return this.role.name;
+  }
+}

src/app/shared/catalog/roles/constants/apiRoutes/index.ts

@@ -0,0 +1,5 @@
+const baseUrl = '/api/v1/roles';
+
+export const ROLES_API_ROUTES = {
+  list: () => `${baseUrl}`,
+};

src/app/shared/catalog/roles/constants/index.ts

@@ -0,0 +1 @@
+export * from './apiRoutes';

src/app/shared/catalog/roles/index.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './constants';
+export * from './models';
+export * from './services';

src/app/shared/catalog/roles/models/index.ts

@@ -0,0 +1 @@
+export * from './io';

src/app/shared/catalog/roles/models/io.ts

@@ -0,0 +1,6 @@
+export interface IRoleRawResponse {
+  id: number;
+  name: string;
+  description: string;
+}
+export interface IRoleResponse extends IRoleRawResponse {}

src/app/shared/catalog/roles/services/index.ts

@@ -0,0 +1 @@
+export * from './main.service';

src/app/shared/catalog/roles/services/main.service.ts

@@ -0,0 +1,19 @@
+import { IPaginatedResponse } from '@/core/models/service.model';
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { map, Observable } from 'rxjs';
+import { ROLES_API_ROUTES } from '../constants';
+import { IRoleRawResponse, IRoleResponse } from '../models';
+
+@Injectable({ providedIn: 'root' })
+export class RolesService {
+  constructor(private http: HttpClient) {}
+
+  private apiRoutes = ROLES_API_ROUTES;
+
+  getAll(): Observable<IRoleResponse[]> {
+    return this.http
+      .get<IPaginatedResponse<IRoleRawResponse>>(this.apiRoutes.list())
+      .pipe(map((response) => response.data as IRoleResponse[]));
+  }
+}