feat: Implement product categories, stores, suppliers, and users management features

- Added ProductCategoriesService for handling product category API interactions.
- Created components for listing and viewing product categories.
- Implemented UI for managing product categories with a data list component.
- Developed StoresService for managing store-related API calls.
- Created components for listing and viewing stores with appropriate UI.
- Added SuppliersService for handling supplier API interactions.
- Implemented components for managing suppliers with a data list component.
- Developed UsersService for managing user-related API calls.
- Created components for listing and viewing users with appropriate UI.
- Enhanced not found page with improved layout and navigation options.

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

@@ -7,8 +7,8 @@
       class="flex flex-col items-center justify-center px-12 py-10 h-auto bg-surface-card border border-surface-border rounded-lg shadow w-full max-w-md"
     >
       <div class="flex flex-col gap-4 text-center mb-10 items-center justify-center">
-        <img [src]="logo" alt="امتحانات شبه نهایی سنجش" class="w-20 h-auto" />
-        <span class="text-lg font-bold"> به پنل امتحانات شبه نهایی سنجش خوش آمدید. </span>
+        <img [src]="logo" alt="صندوق فروشگاهی" class="w-20 h-auto" />
+        <span class="text-lg font-bold"> به پنل صندوق فروشگاهی خوش آمدید. </span>
       </div>
 
       @if (activeStep() === "login") {

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

@@ -0,0 +1,14 @@
+<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.firstName" name="firstName" />
+    <app-input label="نام خانوادگی" [control]="form.controls.lastName" name="lastName" />
+    <app-input label="ایمیل" [control]="form.controls.email" name="email" type="email" />
+    <app-input label="شماره موبایل" [control]="form.controls.mobileNumber" name="mobileNumber" type="mobile" />
+    <app-input label="آدرس" [control]="form.controls.address" name="address" />
+    <app-input label="شهر" [control]="form.controls.city" name="city" />
+    <app-input label="استان" [control]="form.controls.state" name="state" />
+    <app-input label="کشور" [control]="form.controls.country" name="country" />
+    <app-input label="فعال" [control]="form.controls.isActive" name="isActive" type="switch" />
+    <app-form-footer-actions [submitLabel]="'ذخیره'" [loading]="form.disabled" (onCancel)="close()" />
+  </form>
+</p-dialog>

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

@@ -0,0 +1,74 @@
+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';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Dialog } from 'primeng/dialog';
+import { ICustomerRequest, ICustomerResponse } from '../models';
+import { CustomersService } from '../services/main.service';
+
+@Component({
+  selector: 'customer-form',
+  templateUrl: './form.component.html',
+  imports: [ReactiveFormsModule, Dialog, InputComponent, FormFooterActionsComponent],
+})
+export class CustomerFormComponent {
+  @Input() initialValues?: ICustomerResponse;
+
+  @Input()
+  set visible(v: boolean) {
+    this.visibleSignal.set(!!v);
+  }
+  get visible() {
+    return this.visibleSignal();
+  }
+  private visibleSignal = signal(false);
+
+  @Output() visibleChange = new EventEmitter<boolean>();
+  @Output() onSubmit = new EventEmitter<ICustomerResponse>();
+
+  private fb = inject(FormBuilder);
+  constructor(private service: CustomersService) {
+    effect(() => {
+      const v = this.visibleSignal();
+      if (!v) this.form.reset();
+    });
+  }
+
+  form = this.fb.group({
+    firstName: [this.initialValues?.firstName || null, [Validators.required]],
+    lastName: [this.initialValues?.lastName || null, [Validators.required]],
+    email: [this.initialValues?.email || null, [Validators.required, Validators.email]],
+    mobileNumber: [this.initialValues?.mobileNumber || null, [Validators.required]],
+    address: [this.initialValues?.address || null, [Validators.required]],
+    city: [this.initialValues?.city || null, [Validators.required]],
+    state: [this.initialValues?.state || null, [Validators.required]],
+    country: [this.initialValues?.country || null, [Validators.required]],
+    isActive: [this.initialValues?.isActive || false, [Validators.required]],
+  });
+
+  submitLoading = signal(false);
+
+  submit() {
+    this.form.markAllAsTouched();
+    if (this.form.valid) {
+      this.form.disable();
+      this.submitLoading.set(true);
+      this.service.create(this.form.value as ICustomerRequest).subscribe({
+        next: (res) => {
+          this.submitLoading.set(false);
+          this.form.enable();
+          this.form.reset();
+          this.onSubmit.emit(res);
+        },
+        error: () => {
+          this.submitLoading.set(false);
+          this.form.enable();
+        },
+      });
+    }
+  }
+
+  close() {
+    this.visibleChange.emit(false);
+  }
+}

src/app/modules/customers/constants/apiRoutes/index.ts

@@ -0,0 +1,6 @@
+const baseUrl = '/api/v1/customers';
+
+export const CUSTOMERS_API_ROUTES = {
+  list: () => `${baseUrl}`,
+  single: (customerId: string) => `${baseUrl}/${customerId}`,
+};

src/app/modules/customers/constants/index.ts

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

src/app/modules/customers/constants/routes/index.ts

@@ -0,0 +1,25 @@
+import { NamedRoutes } from '@/core';
+import { Routes } from '@angular/router';
+
+export type TCustomersRouteNames = 'customers' | 'customer';
+
+export const customersNamedRoutes: NamedRoutes<TCustomersRouteNames> = {
+  customers: {
+    path: 'customers',
+    loadComponent: () => import('../../views/list.component').then((m) => m.CustomersComponent),
+    meta: {
+      title: 'مشتریان',
+      pagePath: () => '/customers',
+    },
+  },
+  customer: {
+    path: 'customers/:customerId',
+    loadComponent: () => import('../../views/single.component').then((m) => m.CustomerComponent),
+    meta: {
+      title: 'مشتری',
+      pagePath: () => '/customers/:customerId',
+    },
+  },
+};
+
+export const CUSTOMERS_ROUTES: Routes = Object.values(customersNamedRoutes);

src/app/modules/customers/models/index.ts

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

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

@@ -0,0 +1,29 @@
+export interface ICustomerRawResponse {
+  id: number;
+  firstName: string;
+  lastName: string;
+  email: string;
+  mobileNumber: string;
+  address: string;
+  city: string;
+  state: string;
+  country: string;
+  isActive: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+  deletedAt: Date;
+}
+
+export interface ICustomerResponse extends ICustomerRawResponse {}
+
+export interface ICustomerRequest {
+  firstName: string;
+  lastName: string;
+  email: string;
+  mobileNumber: string;
+  address: string;
+  city: string;
+  state: string;
+  country: string;
+  isActive: boolean;
+}

src/app/modules/customers/services/main.service.ts

@@ -0,0 +1,24 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { CUSTOMERS_API_ROUTES } from '../constants';
+import { ICustomerRawResponse, ICustomerRequest, ICustomerResponse } from '../models';
+
+@Injectable({ providedIn: 'root' })
+export class CustomersService {
+  constructor(private http: HttpClient) {}
+
+  private apiRoutes = CUSTOMERS_API_ROUTES;
+
+  getAll(): Observable<ICustomerResponse[]> {
+    return this.http.get<ICustomerRawResponse[]>(this.apiRoutes.list());
+  }
+
+  getSingle(customerId: string): Observable<ICustomerResponse> {
+    return this.http.get<ICustomerRawResponse>(this.apiRoutes.single(customerId));
+  }
+
+  create(data: ICustomerRequest): Observable<ICustomerResponse> {
+    return this.http.post<ICustomerRawResponse>(this.apiRoutes.list(), data);
+  }
+}

src/app/modules/customers/views/index.ts

@@ -0,0 +1,2 @@
+export * from './list.component';
+export * from './single.component';

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

@@ -0,0 +1,12 @@
+<app-page-data-list
+  [pageTitle]="'مدیریت مشتریان'"
+  [addNewCtaLabel]="'افزودن مشتری جدید'"
+  [columns]="columns"
+  [showAdd]="true"
+  emptyPlaceholderTitle="مشتری‌ای یافت نشد"
+  emptyPlaceholderDescription="برای افزودن مشتری جدید، روی دکمهٔ بالا کلیک کنید."
+  [items]="items()"
+  [loading]="loading()"
+  [showDetails]="true"
+>
+</app-page-data-list>

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

@@ -0,0 +1,45 @@
+import {
+  IColumn,
+  PageDataListComponent,
+} from '@/shared/components/pageDataList/page-data-list.component';
+import { Component, signal } from '@angular/core';
+import { ICustomerResponse } from '../models';
+import { CustomersService } from '../services/main.service';
+
+@Component({
+  selector: 'app-customers',
+  templateUrl: './list.component.html',
+  imports: [PageDataListComponent],
+})
+export class CustomersComponent {
+  constructor(private customerService: CustomersService) {
+    this.getData();
+  }
+
+  columns = [
+    { field: 'id', header: 'شناسه' },
+    { field: 'firstName', header: 'نام' },
+    { field: 'lastName', header: 'نام خانوادگی' },
+    { field: 'email', header: 'ایمیل' },
+    { field: 'mobileNumber', header: 'شماره موبایل' },
+    { field: 'address', header: 'آدرس' },
+    { field: 'city', header: 'شهر' },
+    { field: 'state', header: 'استان' },
+    { field: 'country', header: 'کشور' },
+    { field: 'isActive', header: 'فعال' },
+    { field: 'createdAt', header: 'تاریخ ایجاد' },
+    { field: 'updatedAt', header: 'تاریخ به‌روزرسانی' },
+    { field: 'actions' },
+  ] as IColumn[];
+
+  loading = signal(false);
+  items = signal<ICustomerResponse[]>([]);
+
+  getData() {
+    this.loading.set(true);
+    this.customerService.getAll().subscribe((res) => {
+      this.loading.set(false);
+      this.items.set(res);
+    });
+  }
+}

src/app/modules/customers/views/single.component.html

@@ -0,0 +1 @@
+<div class=""></div>

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

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-customer',
+  templateUrl: './single.component.html',
+})
+export class CustomerComponent {
+  constructor() {}
+}

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

@@ -0,0 +1,8 @@
+<p-dialog header="فرم انبار" [(visible)]="visible" [modal]="true" [style]="{ width: '500px' }" [closable]="true">
+  <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.location" name="location" />
+    <app-input label="فعال" [control]="form.controls.isActive" name="isActive" type="switch" />
+    <app-form-footer-actions [submitLabel]="'ذخیره'" [loading]="form.disabled" (onCancel)="close()" />
+  </form>
+</p-dialog>

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

@@ -0,0 +1,68 @@
+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';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Dialog } from 'primeng/dialog';
+import { IInventoryRequest, IInventoryResponse } from '../models';
+import { InventoriesService } from '../services/main.service';
+
+@Component({
+  selector: 'inventory-form',
+  templateUrl: './form.component.html',
+  imports: [ReactiveFormsModule, Dialog, InputComponent, FormFooterActionsComponent],
+})
+export class InventoryFormComponent {
+  @Input() initialValues?: IInventoryResponse;
+
+  @Input()
+  set visible(v: boolean) {
+    this.visibleSignal.set(!!v);
+  }
+  get visible() {
+    return this.visibleSignal();
+  }
+  private visibleSignal = signal(false);
+
+  @Output() visibleChange = new EventEmitter<boolean>();
+  @Output() onSubmit = new EventEmitter<IInventoryResponse>();
+
+  private fb = inject(FormBuilder);
+  constructor(private service: InventoriesService) {
+    effect(() => {
+      const v = this.visibleSignal();
+      if (!v) this.form.reset();
+    });
+  }
+
+  form = this.fb.group({
+    name: [this.initialValues?.name || null, [Validators.required]],
+    location: [this.initialValues?.location || null, [Validators.required]],
+    isActive: [this.initialValues?.isActive || false, [Validators.required]],
+  });
+
+  submitLoading = signal(false);
+
+  submit() {
+    this.form.markAllAsTouched();
+    if (this.form.valid) {
+      this.form.disable();
+      this.submitLoading.set(true);
+      this.service.create(this.form.value as IInventoryRequest).subscribe({
+        next: (res) => {
+          this.submitLoading.set(false);
+          this.form.enable();
+          this.form.reset();
+          this.onSubmit.emit(res);
+        },
+        error: () => {
+          this.submitLoading.set(false);
+          this.form.enable();
+        },
+      });
+    }
+  }
+
+  close() {
+    this.visibleChange.emit(false);
+  }
+}

src/app/modules/inventories/constants/apiRoutes/index.ts

@@ -0,0 +1,6 @@
+const baseUrl = '/api/v1/inventories';
+
+export const INVENTORIES_API_ROUTES = {
+  list: () => `${baseUrl}`,
+  single: (inventoryId: string) => `${baseUrl}/${inventoryId}`,
+};

src/app/modules/inventories/constants/index.ts

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

src/app/modules/inventories/constants/routes/index.ts

@@ -0,0 +1,25 @@
+import { NamedRoutes } from '@/core';
+import { Routes } from '@angular/router';
+
+export type TInventoriesRouteNames = 'inventories' | 'inventory';
+
+export const inventoriesNamedRoutes: NamedRoutes<TInventoriesRouteNames> = {
+  inventories: {
+    path: 'inventories',
+    loadComponent: () => import('../../views/list.component').then((m) => m.InventoriesComponent),
+    meta: {
+      title: 'انبارها',
+      pagePath: () => '/inventories',
+    },
+  },
+  inventory: {
+    path: 'inventories/:inventoryId',
+    loadComponent: () => import('../../views/single.component').then((m) => m.InventoryComponent),
+    meta: {
+      title: 'انبار',
+      pagePath: () => '/inventories/:inventoryId',
+    },
+  },
+};
+
+export const INVENTORIES_ROUTES: Routes = Object.values(inventoriesNamedRoutes);

src/app/modules/inventories/models/index.ts

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

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

@@ -0,0 +1,14 @@
+export interface IInventoryRawResponse {
+  id: number;
+  name: string;
+  location: string;
+  isActive: boolean;
+}
+
+export interface IInventoryResponse extends IInventoryRawResponse {}
+
+export interface IInventoryRequest {
+  name: string;
+  location: string;
+  isActive: boolean;
+}

src/app/modules/inventories/services/main.service.ts

@@ -0,0 +1,24 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { INVENTORIES_API_ROUTES } from '../constants';
+import { IInventoryRawResponse, IInventoryRequest, IInventoryResponse } from '../models';
+
+@Injectable({ providedIn: 'root' })
+export class InventoriesService {
+  constructor(private http: HttpClient) {}
+
+  private apiRoutes = INVENTORIES_API_ROUTES;
+
+  getAll(): Observable<IInventoryResponse[]> {
+    return this.http.get<IInventoryRawResponse[]>(this.apiRoutes.list());
+  }
+
+  getSingle(inventoryId: string): Observable<IInventoryResponse> {
+    return this.http.get<IInventoryRawResponse>(this.apiRoutes.single(inventoryId));
+  }
+
+  create(data: IInventoryRequest): Observable<IInventoryResponse> {
+    return this.http.post<IInventoryRawResponse>(this.apiRoutes.list(), data);
+  }
+}

src/app/modules/inventories/views/index.ts

@@ -0,0 +1,2 @@
+export * from './list.component';
+export * from './single.component';

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

@@ -0,0 +1,12 @@
+<app-page-data-list
+  [pageTitle]="'مدیریت انبارها'"
+  [addNewCtaLabel]="'افزودن انبار جدید'"
+  [columns]="columns"
+  [showAdd]="true"
+  emptyPlaceholderTitle="انباری یافت نشد"
+  emptyPlaceholderDescription="برای افزودن انبار جدید، روی دکمهٔ بالا کلیک کنید."
+  [items]="items()"
+  [loading]="loading()"
+  [showDetails]="true"
+>
+</app-page-data-list>

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

@@ -0,0 +1,37 @@
+import {
+  IColumn,
+  PageDataListComponent,
+} from '@/shared/components/pageDataList/page-data-list.component';
+import { Component, signal } from '@angular/core';
+import { IInventoryResponse } from '../models';
+import { InventoriesService } from '../services/main.service';
+
+@Component({
+  selector: 'app-inventories',
+  templateUrl: './list.component.html',
+  imports: [PageDataListComponent],
+})
+export class InventoriesComponent {
+  constructor(private inventoryService: InventoriesService) {
+    this.getData();
+  }
+
+  columns = [
+    { field: 'id', header: 'شناسه' },
+    { field: 'name', header: 'نام' },
+    { field: 'location', header: 'موقعیت' },
+    { field: 'isActive', header: 'فعال' },
+    { field: 'actions' },
+  ] as IColumn[];
+
+  loading = signal(false);
+  items = signal<IInventoryResponse[]>([]);
+
+  getData() {
+    this.loading.set(true);
+    this.inventoryService.getAll().subscribe((res) => {
+      this.loading.set(false);
+      this.items.set(res);
+    });
+  }
+}

src/app/modules/inventories/views/single.component.html

@@ -0,0 +1 @@
+<div class=""></div>

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

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-inventory',
+  templateUrl: './single.component.html',
+})
+export class InventoryComponent {
+  constructor() {}
+}

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

@@ -0,0 +1,8 @@
+<p-dialog header="فرم برند محصول" [(visible)]="visible" [modal]="true" [style]="{ width: '500px' }" [closable]="true">
+  <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" />
+    <app-input label="URL تصویر" [control]="form.controls.imageUrl" name="imageUrl" />
+    <app-form-footer-actions [submitLabel]="'ذخیره'" [loading]="form.disabled" (onCancel)="close()" />
+  </form>
+</p-dialog>

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

@@ -0,0 +1,68 @@
+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';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Dialog } from 'primeng/dialog';
+import { IProductBrandRequest, IProductBrandResponse } from '../models';
+import { ProductBrandsService } from '../services/main.service';
+
+@Component({
+  selector: 'product-brand-form',
+  templateUrl: './form.component.html',
+  imports: [ReactiveFormsModule, Dialog, InputComponent, FormFooterActionsComponent],
+})
+export class ProductBrandFormComponent {
+  @Input() initialValues?: IProductBrandResponse;
+
+  @Input()
+  set visible(v: boolean) {
+    this.visibleSignal.set(!!v);
+  }
+  get visible() {
+    return this.visibleSignal();
+  }
+  private visibleSignal = signal(false);
+
+  @Output() visibleChange = new EventEmitter<boolean>();
+  @Output() onSubmit = new EventEmitter<IProductBrandResponse>();
+
+  private fb = inject(FormBuilder);
+  constructor(private service: ProductBrandsService) {
+    effect(() => {
+      const v = this.visibleSignal();
+      if (!v) this.form.reset();
+    });
+  }
+
+  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]],
+  });
+
+  submitLoading = signal(false);
+
+  submit() {
+    this.form.markAllAsTouched();
+    if (this.form.valid) {
+      this.form.disable();
+      this.submitLoading.set(true);
+      this.service.create(this.form.value as IProductBrandRequest).subscribe({
+        next: (res) => {
+          this.submitLoading.set(false);
+          this.form.enable();
+          this.form.reset();
+          this.onSubmit.emit(res);
+        },
+        error: () => {
+          this.submitLoading.set(false);
+          this.form.enable();
+        },
+      });
+    }
+  }
+
+  close() {
+    this.visibleChange.emit(false);
+  }
+}

src/app/modules/productBrands/constants/apiRoutes/index.ts

@@ -0,0 +1,6 @@
+const baseUrl = '/api/v1/product-brands';
+
+export const PRODUCT_BRANDS_API_ROUTES = {
+  list: () => `${baseUrl}`,
+  single: (brandId: string) => `${baseUrl}/${brandId}`,
+};

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

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

src/app/modules/productBrands/constants/routes/index.ts

@@ -0,0 +1,26 @@
+import { NamedRoutes } from '@/core';
+import { Routes } from '@angular/router';
+
+export type TProductBrandsRouteNames = 'productBrands' | 'productBrand';
+
+export const productBrandsNamedRoutes: NamedRoutes<TProductBrandsRouteNames> = {
+  productBrands: {
+    path: 'product-brands',
+    loadComponent: () => import('../../views/list.component').then((m) => m.ProductBrandsComponent),
+    meta: {
+      title: 'برندهای محصول',
+      pagePath: () => '/product-brands',
+    },
+  },
+  productBrand: {
+    path: 'product-brands/:brandId',
+    loadComponent: () =>
+      import('../../views/single.component').then((m) => m.ProductBrandComponent),
+    meta: {
+      title: 'برند محصول',
+      pagePath: () => '/product-brands/:brandId',
+    },
+  },
+};
+
+export const PRODUCT_BRANDS_ROUTES: Routes = Object.values(productBrandsNamedRoutes);

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

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

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

@@ -0,0 +1,17 @@
+export interface IProductBrandRawResponse {
+  id: number;
+  name: string;
+  description: string;
+  imageUrl: string;
+  createdAt: Date;
+  updatedAt: Date;
+  deletedAt: Date;
+}
+
+export interface IProductBrandResponse extends IProductBrandRawResponse {}
+
+export interface IProductBrandRequest {
+  name: string;
+  description: string;
+  imageUrl: string;
+}

src/app/modules/productBrands/services/main.service.ts

@@ -0,0 +1,24 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { PRODUCT_BRANDS_API_ROUTES } from '../constants';
+import { IProductBrandRawResponse, IProductBrandRequest, IProductBrandResponse } from '../models';
+
+@Injectable({ providedIn: 'root' })
+export class ProductBrandsService {
+  constructor(private http: HttpClient) {}
+
+  private apiRoutes = PRODUCT_BRANDS_API_ROUTES;
+
+  getAll(): Observable<IProductBrandResponse[]> {
+    return this.http.get<IProductBrandRawResponse[]>(this.apiRoutes.list());
+  }
+
+  getSingle(brandId: string): Observable<IProductBrandResponse> {
+    return this.http.get<IProductBrandRawResponse>(this.apiRoutes.single(brandId));
+  }
+
+  create(data: IProductBrandRequest): Observable<IProductBrandResponse> {
+    return this.http.post<IProductBrandRawResponse>(this.apiRoutes.list(), data);
+  }
+}

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

@@ -0,0 +1,2 @@
+export * from './list.component';
+export * from './single.component';

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

@@ -0,0 +1,12 @@
+<app-page-data-list
+  [pageTitle]="'مدیریت برندهای محصول'"
+  [addNewCtaLabel]="'افزودن برند جدید'"
+  [columns]="columns"
+  [showAdd]="true"
+  emptyPlaceholderTitle="برندی یافت نشد"
+  emptyPlaceholderDescription="برای افزودن برند جدید، روی دکمهٔ بالا کلیک کنید."
+  [items]="items()"
+  [loading]="loading()"
+  [showDetails]="true"
+>
+</app-page-data-list>

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

@@ -0,0 +1,39 @@
+import {
+  IColumn,
+  PageDataListComponent,
+} from '@/shared/components/pageDataList/page-data-list.component';
+import { Component, signal } from '@angular/core';
+import { IProductBrandResponse } from '../models';
+import { ProductBrandsService } from '../services/main.service';
+
+@Component({
+  selector: 'app-product-brands',
+  templateUrl: './list.component.html',
+  imports: [PageDataListComponent],
+})
+export class ProductBrandsComponent {
+  constructor(private productBrandService: ProductBrandsService) {
+    this.getData();
+  }
+
+  columns = [
+    { field: 'id', header: 'شناسه' },
+    { field: 'name', header: 'نام' },
+    { field: 'description', header: 'توضیحات' },
+    { field: 'imageUrl', header: 'تصویر' },
+    { field: 'createdAt', header: 'تاریخ ایجاد' },
+    { field: 'updatedAt', header: 'تاریخ به‌روزرسانی' },
+    { field: 'actions' },
+  ] as IColumn[];
+
+  loading = signal(false);
+  items = signal<IProductBrandResponse[]>([]);
+
+  getData() {
+    this.loading.set(true);
+    this.productBrandService.getAll().subscribe((res) => {
+      this.loading.set(false);
+      this.items.set(res);
+    });
+  }
+}

src/app/modules/productBrands/views/single.component.html

@@ -0,0 +1 @@
+<div class=""></div>

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

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-product-brand',
+  templateUrl: './single.component.html',
+})
+export class ProductBrandComponent {
+  constructor() {}
+}

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

@@ -0,0 +1,14 @@
+<p-dialog
+  header="فرم دسته‌بندی محصول"
+  [(visible)]="visible"
+  [modal]="true"
+  [style]="{ width: '500px' }"
+  [closable]="true"
+>
+  <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" />
+    <app-input label="URL تصویر" [control]="form.controls.imageUrl" name="imageUrl" />
+    <app-form-footer-actions [submitLabel]="'ذخیره'" [loading]="form.disabled" (onCancel)="close()" />
+  </form>
+</p-dialog>

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

@@ -0,0 +1,68 @@
+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';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Dialog } from 'primeng/dialog';
+import { IProductCategoryRequest, IProductCategoryResponse } from '../models';
+import { ProductCategoriesService } from '../services/main.service';
+
+@Component({
+  selector: 'product-category-form',
+  templateUrl: './form.component.html',
+  imports: [ReactiveFormsModule, Dialog, InputComponent, FormFooterActionsComponent],
+})
+export class ProductCategoryFormComponent {
+  @Input() initialValues?: IProductCategoryResponse;
+
+  @Input()
+  set visible(v: boolean) {
+    this.visibleSignal.set(!!v);
+  }
+  get visible() {
+    return this.visibleSignal();
+  }
+  private visibleSignal = signal(false);
+
+  @Output() visibleChange = new EventEmitter<boolean>();
+  @Output() onSubmit = new EventEmitter<IProductCategoryResponse>();
+
+  private fb = inject(FormBuilder);
+  constructor(private service: ProductCategoriesService) {
+    effect(() => {
+      const v = this.visibleSignal();
+      if (!v) this.form.reset();
+    });
+  }
+
+  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]],
+  });
+
+  submitLoading = signal(false);
+
+  submit() {
+    this.form.markAllAsTouched();
+    if (this.form.valid) {
+      this.form.disable();
+      this.submitLoading.set(true);
+      this.service.create(this.form.value as IProductCategoryRequest).subscribe({
+        next: (res) => {
+          this.submitLoading.set(false);
+          this.form.enable();
+          this.form.reset();
+          this.onSubmit.emit(res);
+        },
+        error: () => {
+          this.submitLoading.set(false);
+          this.form.enable();
+        },
+      });
+    }
+  }
+
+  close() {
+    this.visibleChange.emit(false);
+  }
+}

src/app/modules/productCategories/constants/apiRoutes/index.ts

@@ -0,0 +1,6 @@
+const baseUrl = '/api/v1/product-categories';
+
+export const PRODUCT_CATEGORIES_API_ROUTES = {
+  list: () => `${baseUrl}`,
+  single: (categoryId: string) => `${baseUrl}/${categoryId}`,
+};

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

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

src/app/modules/productCategories/constants/routes/index.ts

@@ -0,0 +1,27 @@
+import { NamedRoutes } from '@/core';
+import { Routes } from '@angular/router';
+
+export type TProductCategoriesRouteNames = 'productCategories' | 'productCategory';
+
+export const productCategoriesNamedRoutes: NamedRoutes<TProductCategoriesRouteNames> = {
+  productCategories: {
+    path: 'product-categories',
+    loadComponent: () =>
+      import('../../views/list.component').then((m) => m.ProductCategoriesComponent),
+    meta: {
+      title: 'دسته‌بندی محصولات',
+      pagePath: () => '/product-categories',
+    },
+  },
+  productCategory: {
+    path: 'product-categories/:categoryId',
+    loadComponent: () =>
+      import('../../views/single.component').then((m) => m.ProductCategoryComponent),
+    meta: {
+      title: 'دسته‌بندی محصول',
+      pagePath: () => '/product-categories/:categoryId',
+    },
+  },
+};
+
+export const PRODUCT_CATEGORIES_ROUTES: Routes = Object.values(productCategoriesNamedRoutes);

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

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

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

@@ -0,0 +1,15 @@
+export interface IProductCategoryRawResponse {
+  id: number;
+  name: string;
+  description: string;
+  imageUrl: string;
+  createdAt: Date;
+}
+
+export interface IProductCategoryResponse extends IProductCategoryRawResponse {}
+
+export interface IProductCategoryRequest {
+  name: string;
+  description: string;
+  imageUrl: string;
+}

src/app/modules/productCategories/services/main.service.ts

@@ -0,0 +1,28 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { PRODUCT_CATEGORIES_API_ROUTES } from '../constants';
+import {
+  IProductCategoryRawResponse,
+  IProductCategoryRequest,
+  IProductCategoryResponse,
+} from '../models';
+
+@Injectable({ providedIn: 'root' })
+export class ProductCategoriesService {
+  constructor(private http: HttpClient) {}
+
+  private apiRoutes = PRODUCT_CATEGORIES_API_ROUTES;
+
+  getAll(): Observable<IProductCategoryResponse[]> {
+    return this.http.get<IProductCategoryRawResponse[]>(this.apiRoutes.list());
+  }
+
+  getSingle(categoryId: string): Observable<IProductCategoryResponse> {
+    return this.http.get<IProductCategoryRawResponse>(this.apiRoutes.single(categoryId));
+  }
+
+  create(data: IProductCategoryRequest): Observable<IProductCategoryResponse> {
+    return this.http.post<IProductCategoryRawResponse>(this.apiRoutes.list(), data);
+  }
+}

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

@@ -0,0 +1,2 @@
+export * from './list.component';
+export * from './single.component';

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

@@ -0,0 +1,12 @@
+<app-page-data-list
+  [pageTitle]="'مدیریت دسته‌بندی محصولات'"
+  [addNewCtaLabel]="'افزودن دسته‌بندی جدید'"
+  [columns]="columns"
+  [showAdd]="true"
+  emptyPlaceholderTitle="دسته‌بندی یافت نشد"
+  emptyPlaceholderDescription="برای افزودن دسته‌بندی جدید، روی دکمهٔ بالا کلیک کنید."
+  [items]="items()"
+  [loading]="loading()"
+  [showDetails]="true"
+>
+</app-page-data-list>

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

@@ -0,0 +1,38 @@
+import {
+  IColumn,
+  PageDataListComponent,
+} from '@/shared/components/pageDataList/page-data-list.component';
+import { Component, signal } from '@angular/core';
+import { IProductCategoryResponse } from '../models';
+import { ProductCategoriesService } from '../services/main.service';
+
+@Component({
+  selector: 'app-product-categories',
+  templateUrl: './list.component.html',
+  imports: [PageDataListComponent],
+})
+export class ProductCategoriesComponent {
+  constructor(private productCategoryService: ProductCategoriesService) {
+    this.getData();
+  }
+
+  columns = [
+    { field: 'id', header: 'شناسه' },
+    { field: 'name', header: 'نام' },
+    { field: 'description', header: 'توضیحات' },
+    { field: 'imageUrl', header: 'تصویر' },
+    { field: 'createdAt', header: 'تاریخ ایجاد' },
+    { field: 'actions' },
+  ] as IColumn[];
+
+  loading = signal(false);
+  items = signal<IProductCategoryResponse[]>([]);
+
+  getData() {
+    this.loading.set(true);
+    this.productCategoryService.getAll().subscribe((res) => {
+      this.loading.set(false);
+      this.items.set(res);
+    });
+  }
+}

src/app/modules/productCategories/views/single.component.html

@@ -0,0 +1 @@
+<div class=""></div>

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

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-product-category',
+  templateUrl: './single.component.html',
+})
+export class ProductCategoryComponent {
+  constructor() {}
+}

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

@@ -0,0 +1,8 @@
+<p-dialog header="فرم فروشگاه" [(visible)]="visible" [modal]="true" [style]="{ width: '500px' }" [closable]="true">
+  <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.location" name="location" />
+    <app-input label="فعال" [control]="form.controls.isActive" name="isActive" type="switch" />
+    <app-form-footer-actions [submitLabel]="'ذخیره'" [loading]="form.disabled" (onCancel)="close()" />
+  </form>
+</p-dialog>

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

@@ -0,0 +1,68 @@
+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';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Dialog } from 'primeng/dialog';
+import { IStoreRequest, IStoreResponse } from '../models';
+import { StoresService } from '../services/main.service';
+
+@Component({
+  selector: 'store-form',
+  templateUrl: './form.component.html',
+  imports: [ReactiveFormsModule, Dialog, InputComponent, FormFooterActionsComponent],
+})
+export class StoreFormComponent {
+  @Input() initialValues?: IStoreResponse;
+
+  @Input()
+  set visible(v: boolean) {
+    this.visibleSignal.set(!!v);
+  }
+  get visible() {
+    return this.visibleSignal();
+  }
+  private visibleSignal = signal(false);
+
+  @Output() visibleChange = new EventEmitter<boolean>();
+  @Output() onSubmit = new EventEmitter<IStoreResponse>();
+
+  private fb = inject(FormBuilder);
+  constructor(private service: StoresService) {
+    effect(() => {
+      const v = this.visibleSignal();
+      if (!v) this.form.reset();
+    });
+  }
+
+  form = this.fb.group({
+    name: [this.initialValues?.name || null, [Validators.required]],
+    location: [this.initialValues?.location || null, [Validators.required]],
+    isActive: [this.initialValues?.isActive || false, [Validators.required]],
+  });
+
+  submitLoading = signal(false);
+
+  submit() {
+    this.form.markAllAsTouched();
+    if (this.form.valid) {
+      this.form.disable();
+      this.submitLoading.set(true);
+      this.service.create(this.form.value as IStoreRequest).subscribe({
+        next: (res) => {
+          this.submitLoading.set(false);
+          this.form.enable();
+          this.form.reset();
+          this.onSubmit.emit(res);
+        },
+        error: () => {
+          this.submitLoading.set(false);
+          this.form.enable();
+        },
+      });
+    }
+  }
+
+  close() {
+    this.visibleChange.emit(false);
+  }
+}

src/app/modules/stores/constants/apiRoutes/index.ts

@@ -0,0 +1,6 @@
+const baseUrl = '/api/v1/stores';
+
+export const STORES_API_ROUTES = {
+  list: () => `${baseUrl}`,
+  single: (storeId: string) => `${baseUrl}/${storeId}`,
+};

src/app/modules/stores/constants/index.ts

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

src/app/modules/stores/constants/routes/index.ts

@@ -0,0 +1,25 @@
+import { NamedRoutes } from '@/core';
+import { Routes } from '@angular/router';
+
+export type TStoresRouteNames = 'stores' | 'store';
+
+export const storesNamedRoutes: NamedRoutes<TStoresRouteNames> = {
+  stores: {
+    path: 'stores',
+    loadComponent: () => import('../../views/list.component').then((m) => m.StoresComponent),
+    meta: {
+      title: 'فروشگاه‌ها',
+      pagePath: () => '/stores',
+    },
+  },
+  store: {
+    path: 'stores/:storeId',
+    loadComponent: () => import('../../views/single.component').then((m) => m.StoreComponent),
+    meta: {
+      title: 'فروشگاه',
+      pagePath: () => '/stores/:storeId',
+    },
+  },
+};
+
+export const STORES_ROUTES: Routes = Object.values(storesNamedRoutes);

src/app/modules/stores/models/index.ts

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

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

@@ -0,0 +1,16 @@
+export interface IStoreRawResponse {
+  id: number;
+  name: string;
+  location: string;
+  isActive: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+export interface IStoreResponse extends IStoreRawResponse {}
+
+export interface IStoreRequest {
+  name: string;
+  location: string;
+  isActive: boolean;
+}

src/app/modules/stores/services/main.service.ts

@@ -0,0 +1,24 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { STORES_API_ROUTES } from '../constants';
+import { IStoreRawResponse, IStoreRequest, IStoreResponse } from '../models';
+
+@Injectable({ providedIn: 'root' })
+export class StoresService {
+  constructor(private http: HttpClient) {}
+
+  private apiRoutes = STORES_API_ROUTES;
+
+  getAll(): Observable<IStoreResponse[]> {
+    return this.http.get<IStoreRawResponse[]>(this.apiRoutes.list());
+  }
+
+  getSingle(storeId: string): Observable<IStoreResponse> {
+    return this.http.get<IStoreRawResponse>(this.apiRoutes.single(storeId));
+  }
+
+  create(data: IStoreRequest): Observable<IStoreResponse> {
+    return this.http.post<IStoreRawResponse>(this.apiRoutes.list(), data);
+  }
+}

src/app/modules/stores/views/index.ts

@@ -0,0 +1,2 @@
+export * from './list.component';
+export * from './single.component';

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

@@ -0,0 +1,12 @@
+<app-page-data-list
+  [pageTitle]="'مدیریت فروشگاه‌ها'"
+  [addNewCtaLabel]="'افزودن فروشگاه جدید'"
+  [columns]="columns"
+  [showAdd]="true"
+  emptyPlaceholderTitle="فروشگاهی یافت نشد"
+  emptyPlaceholderDescription="برای افزودن فروشگاه جدید، روی دکمهٔ بالا کلیک کنید."
+  [items]="items()"
+  [loading]="loading()"
+  [showDetails]="true"
+>
+</app-page-data-list>

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

@@ -0,0 +1,39 @@
+import {
+  IColumn,
+  PageDataListComponent,
+} from '@/shared/components/pageDataList/page-data-list.component';
+import { Component, signal } from '@angular/core';
+import { IStoreResponse } from '../models';
+import { StoresService } from '../services/main.service';
+
+@Component({
+  selector: 'app-stores',
+  templateUrl: './list.component.html',
+  imports: [PageDataListComponent],
+})
+export class StoresComponent {
+  constructor(private storeService: StoresService) {
+    this.getData();
+  }
+
+  columns = [
+    { field: 'id', header: 'شناسه' },
+    { field: 'name', header: 'نام' },
+    { field: 'location', header: 'موقعیت' },
+    { field: 'isActive', header: 'فعال' },
+    { field: 'createdAt', header: 'تاریخ ایجاد' },
+    { field: 'updatedAt', header: 'تاریخ به‌روزرسانی' },
+    { field: 'actions' },
+  ] as IColumn[];
+
+  loading = signal(false);
+  items = signal<IStoreResponse[]>([]);
+
+  getData() {
+    this.loading.set(true);
+    this.storeService.getAll().subscribe((res) => {
+      this.loading.set(false);
+      this.items.set(res);
+    });
+  }
+}

src/app/modules/stores/views/single.component.html

@@ -0,0 +1 @@
+<div class=""></div>

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

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-store',
+  templateUrl: './single.component.html',
+})
+export class StoreComponent {
+  constructor() {}
+}

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

@@ -0,0 +1,14 @@
+<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.firstName" name="firstName" />
+    <app-input label="نام خانوادگی" [control]="form.controls.lastName" name="lastName" />
+    <app-input label="ایمیل" [control]="form.controls.email" name="email" type="email" />
+    <app-input label="شماره موبایل" [control]="form.controls.mobileNumber" name="mobileNumber" type="mobile" />
+    <app-input label="آدرس" [control]="form.controls.address" name="address" />
+    <app-input label="شهر" [control]="form.controls.city" name="city" />
+    <app-input label="استان" [control]="form.controls.state" name="state" />
+    <app-input label="کشور" [control]="form.controls.country" name="country" />
+    <app-input label="فعال" [control]="form.controls.isActive" name="isActive" type="switch" />
+    <app-form-footer-actions [submitLabel]="'ذخیره'" [loading]="form.disabled" (onCancel)="close()" />
+  </form>
+</p-dialog>

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

@@ -0,0 +1,74 @@
+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';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Dialog } from 'primeng/dialog';
+import { ISupplierRequest, ISupplierResponse } from '../models';
+import { SuppliersService } from '../services/main.service';
+
+@Component({
+  selector: 'supplier-form',
+  templateUrl: './form.component.html',
+  imports: [ReactiveFormsModule, Dialog, InputComponent, FormFooterActionsComponent],
+})
+export class SupplierFormComponent {
+  @Input() initialValues?: ISupplierResponse;
+
+  @Input()
+  set visible(v: boolean) {
+    this.visibleSignal.set(!!v);
+  }
+  get visible() {
+    return this.visibleSignal();
+  }
+  private visibleSignal = signal(false);
+
+  @Output() visibleChange = new EventEmitter<boolean>();
+  @Output() onSubmit = new EventEmitter<ISupplierResponse>();
+
+  private fb = inject(FormBuilder);
+  constructor(private service: SuppliersService) {
+    effect(() => {
+      const v = this.visibleSignal();
+      if (!v) this.form.reset();
+    });
+  }
+
+  form = this.fb.group({
+    firstName: [this.initialValues?.firstName || null, [Validators.required]],
+    lastName: [this.initialValues?.lastName || null, [Validators.required]],
+    email: [this.initialValues?.email || null, [Validators.required, Validators.email]],
+    mobileNumber: [this.initialValues?.mobileNumber || null, [Validators.required]],
+    address: [this.initialValues?.address || null, [Validators.required]],
+    city: [this.initialValues?.city || null, [Validators.required]],
+    state: [this.initialValues?.state || null, [Validators.required]],
+    country: [this.initialValues?.country || null, [Validators.required]],
+    isActive: [this.initialValues?.isActive || false, [Validators.required]],
+  });
+
+  submitLoading = signal(false);
+
+  submit() {
+    this.form.markAllAsTouched();
+    if (this.form.valid) {
+      this.form.disable();
+      this.submitLoading.set(true);
+      this.service.create(this.form.value as ISupplierRequest).subscribe({
+        next: (res) => {
+          this.submitLoading.set(false);
+          this.form.enable();
+          this.form.reset();
+          this.onSubmit.emit(res);
+        },
+        error: () => {
+          this.submitLoading.set(false);
+          this.form.enable();
+        },
+      });
+    }
+  }
+
+  close() {
+    this.visibleChange.emit(false);
+  }
+}

src/app/modules/suppliers/constants/apiRoutes/index.ts

@@ -0,0 +1,6 @@
+const baseUrl = '/api/v1/suppliers';
+
+export const SUPPLIERS_API_ROUTES = {
+  list: () => `${baseUrl}`,
+  single: (supplierId: string) => `${baseUrl}/${supplierId}`,
+};

src/app/modules/suppliers/constants/index.ts

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

src/app/modules/suppliers/constants/routes/index.ts

@@ -0,0 +1,25 @@
+import { NamedRoutes } from '@/core';
+import { Routes } from '@angular/router';
+
+export type TSuppliersRouteNames = 'suppliers' | 'supplier';
+
+export const suppliersNamedRoutes: NamedRoutes<TSuppliersRouteNames> = {
+  suppliers: {
+    path: 'suppliers',
+    loadComponent: () => import('../../views/list.component').then((m) => m.SuppliersComponent),
+    meta: {
+      title: 'تامین‌کنندگان',
+      pagePath: () => '/suppliers',
+    },
+  },
+  supplier: {
+    path: 'suppliers/:supplierId',
+    loadComponent: () => import('../../views/single.component').then((m) => m.SupplierComponent),
+    meta: {
+      title: 'تامین‌کننده',
+      pagePath: () => '/suppliers/:supplierId',
+    },
+  },
+};
+
+export const SUPPLIERS_ROUTES: Routes = Object.values(suppliersNamedRoutes);

src/app/modules/suppliers/models/index.ts

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

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

@@ -0,0 +1,29 @@
+export interface ISupplierRawResponse {
+  id: number;
+  firstName: string;
+  lastName: string;
+  email: string;
+  mobileNumber: string;
+  address: string;
+  city: string;
+  state: string;
+  country: string;
+  isActive: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+  deletedAt: Date;
+}
+
+export interface ISupplierResponse extends ISupplierRawResponse {}
+
+export interface ISupplierRequest {
+  firstName: string;
+  lastName: string;
+  email: string;
+  mobileNumber: string;
+  address: string;
+  city: string;
+  state: string;
+  country: string;
+  isActive: boolean;
+}

src/app/modules/suppliers/services/main.service.ts

@@ -0,0 +1,24 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { SUPPLIERS_API_ROUTES } from '../constants';
+import { ISupplierRawResponse, ISupplierRequest, ISupplierResponse } from '../models';
+
+@Injectable({ providedIn: 'root' })
+export class SuppliersService {
+  constructor(private http: HttpClient) {}
+
+  private apiRoutes = SUPPLIERS_API_ROUTES;
+
+  getAll(): Observable<ISupplierResponse[]> {
+    return this.http.get<ISupplierRawResponse[]>(this.apiRoutes.list());
+  }
+
+  getSingle(supplierId: string): Observable<ISupplierResponse> {
+    return this.http.get<ISupplierRawResponse>(this.apiRoutes.single(supplierId));
+  }
+
+  create(data: ISupplierRequest): Observable<ISupplierResponse> {
+    return this.http.post<ISupplierRawResponse>(this.apiRoutes.list(), data);
+  }
+}

src/app/modules/suppliers/views/index.ts

@@ -0,0 +1,2 @@
+export * from './list.component';
+export * from './single.component';

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

@@ -0,0 +1,12 @@
+<app-page-data-list
+  [pageTitle]="'مدیریت تامین‌کنندگان'"
+  [addNewCtaLabel]="'افزودن تامین‌کننده جدید'"
+  [columns]="columns"
+  [showAdd]="true"
+  emptyPlaceholderTitle="تامین‌کننده‌ای یافت نشد"
+  emptyPlaceholderDescription="برای افزودن تامین‌کننده جدید، روی دکمهٔ بالا کلیک کنید."
+  [items]="items()"
+  [loading]="loading()"
+  [showDetails]="true"
+>
+</app-page-data-list>

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

@@ -0,0 +1,45 @@
+import {
+  IColumn,
+  PageDataListComponent,
+} from '@/shared/components/pageDataList/page-data-list.component';
+import { Component, signal } from '@angular/core';
+import { ISupplierResponse } from '../models';
+import { SuppliersService } from '../services/main.service';
+
+@Component({
+  selector: 'app-suppliers',
+  templateUrl: './list.component.html',
+  imports: [PageDataListComponent],
+})
+export class SuppliersComponent {
+  constructor(private supplierService: SuppliersService) {
+    this.getData();
+  }
+
+  columns = [
+    { field: 'id', header: 'شناسه' },
+    { field: 'firstName', header: 'نام' },
+    { field: 'lastName', header: 'نام خانوادگی' },
+    { field: 'email', header: 'ایمیل' },
+    { field: 'mobileNumber', header: 'شماره موبایل' },
+    { field: 'address', header: 'آدرس' },
+    { field: 'city', header: 'شهر' },
+    { field: 'state', header: 'استان' },
+    { field: 'country', header: 'کشور' },
+    { field: 'isActive', header: 'فعال' },
+    { field: 'createdAt', header: 'تاریخ ایجاد' },
+    { field: 'updatedAt', header: 'تاریخ به‌روزرسانی' },
+    { field: 'actions' },
+  ] as IColumn[];
+
+  loading = signal(false);
+  items = signal<ISupplierResponse[]>([]);
+
+  getData() {
+    this.loading.set(true);
+    this.supplierService.getAll().subscribe((res) => {
+      this.loading.set(false);
+      this.items.set(res);
+    });
+  }
+}

src/app/modules/suppliers/views/single.component.html

@@ -0,0 +1 @@
+<div class=""></div>

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

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-supplier',
+  templateUrl: './single.component.html',
+})
+export class SupplierComponent {
+  constructor() {}
+}

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

@@ -0,0 +1,9 @@
+<p-dialog header="فرم کاربر" [(visible)]="visible" [modal]="true" [style]="{ width: '500px' }" [closable]="true">
+  <form [formGroup]="form" (submit)="submit()" class="flex flex-col gap-4">
+    <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" />
+    <app-form-footer-actions [submitLabel]="'ذخیره'" [loading]="form.disabled" (onCancel)="close()" />
+  </form>
+</p-dialog>

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

@@ -0,0 +1,81 @@
+import { mobileValidator } from '@/core/validators';
+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';
+import { IUserRequest, IUserResponse } from '../models';
+import { UsersService } from '../services/main.service';
+
+@Component({
+  selector: 'user-form',
+  templateUrl: './form.component.html',
+  imports: [
+    ReactiveFormsModule,
+    Dialog,
+    UikitFieldComponent,
+    InputComponent,
+    FormFooterActionsComponent,
+  ],
+})
+export class UserFormComponent {
+  @Input() initialValues?: IUserResponse;
+
+  @Input()
+  set visible(v: boolean) {
+    this.visibleSignal.set(!!v);
+  }
+  get visible() {
+    return this.visibleSignal();
+  }
+  private visibleSignal = signal(false);
+
+  @Output() visibleChange = new EventEmitter<boolean>();
+  @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();
+    });
+  }
+
+  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]],
+  });
+
+  submitLoading = signal(false);
+
+  submit() {
+    this.form.markAllAsTouched();
+    if (this.form.valid) {
+      this.form.disable();
+      this.submitLoading.set(true);
+      this.service.create(this.form.value as IUserRequest).subscribe({
+        next: (res) => {
+          this.submitLoading.set(false);
+          this.form.enable();
+          this.form.reset();
+          this.onSubmit.emit(res);
+        },
+        error: () => {
+          this.submitLoading.set(false);
+          this.form.enable();
+        },
+      });
+    }
+  }
+
+  close() {
+    this.visibleChange.emit(false);
+  }
+}

src/app/modules/users/constants/apiRoutes/index.ts

@@ -0,0 +1,6 @@
+const baseUrl = '/api/v1/users';
+
+export const USERS_API_ROUTES = {
+  list: () => `${baseUrl}`,
+  single: (userId: string) => `${baseUrl}/${userId}`,
+};

src/app/modules/users/constants/index.ts

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

src/app/modules/users/constants/routes/index.ts

@@ -0,0 +1,25 @@
+import { NamedRoutes } from '@/core';
+import { Routes } from '@angular/router';
+
+export type TUsersRouteNames = 'users' | 'user';
+
+export const usersNamedRoutes: NamedRoutes<TUsersRouteNames> = {
+  users: {
+    path: 'users',
+    loadComponent: () => import('../../views/list.component').then((m) => m.UsersComponent),
+    meta: {
+      title: 'کاربران',
+      pagePath: () => '/users',
+    },
+  },
+  user: {
+    path: 'users/:userId',
+    loadComponent: () => import('../../views/single.component').then((m) => m.UserComponent),
+    meta: {
+      title: 'کاربر',
+      pagePath: () => '/users/:userId',
+    },
+  },
+};
+
+export const USERS_ROUTES: Routes = Object.values(usersNamedRoutes);

src/app/modules/users/models/index.ts

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

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

@@ -0,0 +1,15 @@
+export interface IUserRawResponse {
+  mobileNumber: string;
+  firstName: string;
+  lastName: string;
+  id: number;
+  roleId: number;
+}
+export interface IUserResponse extends IUserRawResponse {}
+
+export interface IUserRequest {
+  firstName: string;
+  lastName: string;
+  mobileNumber: string;
+  roleId: number;
+}

src/app/modules/users/services/main.service.ts

@@ -0,0 +1,27 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { USERS_API_ROUTES } from '../constants';
+import { IUserRawResponse, IUserRequest, IUserResponse } from '../models';
+
+@Injectable({ providedIn: 'root' })
+export class UsersService {
+  constructor(private http: HttpClient) {}
+
+  private apiRoutes = USERS_API_ROUTES;
+
+  getAll(): Observable<IUserResponse[]> {
+    return this.http.get<IUserRawResponse[]>(this.apiRoutes.list());
+  }
+  getSingle(userId: string): Observable<IUserResponse> {
+    return this.http.get<IUserRawResponse>(this.apiRoutes.single(userId));
+  }
+
+  create(userData: IUserRequest): Observable<IUserResponse> {
+    return this.http.post<IUserResponse>(this.apiRoutes.list(), userData);
+  }
+
+  update(userId: string, userData: IUserRequest): Observable<IUserResponse> {
+    return this.http.patch<IUserResponse>(this.apiRoutes.single(userId), userData);
+  }
+}

src/app/modules/users/views/index.ts

@@ -0,0 +1,2 @@
+export * from './list.component';
+export * from './single.component';

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

@@ -0,0 +1,15 @@
+<app-page-data-list
+  [pageTitle]="'مدیریت کاربران'"
+  [addNewCtaLabel]="'افزودن کاربر جدید'"
+  [columns]="columns"
+  [showAdd]="true"
+  emptyPlaceholderTitle="کاربری یافت نشد"
+  emptyPlaceholderDescription="برای افزودن کاربر جدید، روی دکمهٔ بالا کلیک کنید."
+  [items]="[]"
+  [loading]="loading()"
+  [showDetails]="true"
+  [showAdd]="true"
+  (onAdd)="openAddForm()"
+/>
+
+<user-form [(visible)]="visibleForm" (onSubmit)="refresh()" />

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

@@ -0,0 +1,48 @@
+import {
+  IColumn,
+  PageDataListComponent,
+} from '@/shared/components/pageDataList/page-data-list.component';
+import { Component, signal } from '@angular/core';
+import { UserFormComponent } from '../components/form.component';
+import { IUserResponse } from '../models';
+import { UsersService } from '../services/main.service';
+
+@Component({
+  selector: 'app-users',
+  templateUrl: './list.component.html',
+  imports: [PageDataListComponent, UserFormComponent],
+})
+export class UsersComponent {
+  constructor(private userService: UsersService) {
+    this.getData();
+  }
+
+  columns = [
+    { field: 'id', header: 'شناسه' },
+    { field: 'firstName', header: 'نام' },
+    { field: 'lastName', header: 'نام خانوادگی' },
+    { field: 'mobileNumber', header: 'شماره موبایل' },
+    { field: 'roleId', header: 'نقش' },
+    { field: 'actions' },
+  ] as IColumn[];
+
+  loading = signal(false);
+  items = signal<IUserResponse[]>([]);
+  visibleForm = signal(false);
+
+  refresh() {
+    this.getData();
+  }
+
+  getData() {
+    this.loading.set(true);
+    this.userService.getAll().subscribe((res) => {
+      this.loading.set(false);
+      this.items.set(res);
+    });
+  }
+
+  openAddForm() {
+    this.visibleForm.set(true);
+  }
+}

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

@@ -0,0 +1 @@
+<div class=""></div>

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

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-user',
+  templateUrl: './single.component.html',
+})
+export class UserComponent {
+  constructor() {}
+}