feat: add bank accounts and branches management

- Implemented bank accounts management with form and list components.
- Added bank branches management with form and list components.
- Created services for bank accounts and branches to handle API interactions.
- Updated routing to include bank accounts and branches.
- Enhanced UI with new select fields for banks and branches.
- Added necessary models and constants for bank accounts and branches.
- Improved state management for banks using a store pattern.
- Updated menu items to include links for bank accounts and branches.

src/app.routes.ts

@@ -1,4 +1,6 @@
 import { AuthComponent } from '@/modules/auth/pages/auth.component';
+import { BANK_ACCOUNTS_ROUTES } from '@/modules/bankAccounts/constants';
+import { BANK_BRANCHES_ROUTES } from '@/modules/bankBranches/constants';
 import { CARDEX_ROUTES } from '@/modules/cardex/constants';
 import { CUSTOMERS_ROUTES } from '@/modules/customers/constants';
 import { INVENTORIES_ROUTES } from '@/modules/inventories/constants';
@@ -30,6 +32,8 @@ export const appRoutes: Routes = [
       ...INVENTORIES_ROUTES,
       ...PRODUCTS_ROUTES,
       ...CARDEX_ROUTES,
+      ...BANK_BRANCHES_ROUTES,
+      ...BANK_ACCOUNTS_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/menuItems.const.ts

@@ -57,9 +57,14 @@ export const MENU_ITEMS = [
     icon: 'pi pi-fw pi-cog',
     items: [
       {
-        label: 'فروشگاه‌ها',
-        icon: 'pi pi-fw pi-store',
-        routerLink: ['/stores'],
+        label: 'شعب بانک‌ها',
+        icon: 'pi pi-fw pi-building',
+        routerLink: ['/bankBranches'],
+      },
+      {
+        label: 'حساب‌های بانکی',
+        icon: 'pi pi-fw pi-credit-card',
+        routerLink: ['/bankAccounts'],
       },
       {
         label: 'کاربران',

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

@@ -0,0 +1,18 @@
+<p-dialog
+  header="فرم حساب بانکی"
+  [(visible)]="visible"
+  [modal]="true"
+  [style]="{ width: '600px', zIndex: '100000' }"
+  appendTo="body"
+  [closable]="true"
+>
+  <form [formGroup]="form" (submit)="submit()" class="flex flex-col gap-4">
+    <app-input label="نام" [control]="form.controls.name" name="name" />
+    <bank-branches-select-field [control]="form.controls.branchId" name="branchId" />
+    <app-input label="شماره کارت" [control]="form.controls.cardNumber" name="cardNumber" />
+    <app-input label="شماره حساب" [control]="form.controls.accountNumber" name="accountNumber" />
+    <app-input label="شماره شبا" [control]="form.controls.iban" name="iban" />
+
+    <app-form-footer-actions [submitLabel]="'ذخیره'" [loading]="form.disabled" (onCancel)="close()" />
+  </form>
+</p-dialog>

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

@@ -0,0 +1,102 @@
+import { ToastService } from '@/core/services/toast.service';
+import { BankBranchesSelectComponent } from '@/modules/bankBranches/components/select/select.component';
+import { BanksSelectComponent } from '@/shared/catalog/banks';
+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 { IBankAccountsRequest, IBankAccountsResponse } from '../models';
+import { BankAccountsService } from '../services/main.service';
+
+@Component({
+  selector: 'bank-account-form',
+  templateUrl: './form.component.html',
+  imports: [
+    ReactiveFormsModule,
+    Dialog,
+    InputComponent,
+    FormFooterActionsComponent,
+    BanksSelectComponent,
+    BankBranchesSelectComponent,
+  ],
+})
+export class BankAccountFormComponent {
+  @Input() initialValues?: IBankAccountsResponse;
+
+  @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<IBankAccountsResponse>();
+
+  private fb = inject(FormBuilder);
+  constructor(
+    private service: BankAccountsService,
+    private toastService: ToastService,
+  ) {
+    effect(() => {
+      const v = this.visibleSignal();
+      if (!v) this.form.reset();
+    });
+  }
+
+  form = this.fb.group({
+    name: this.fb.control<string>(this.initialValues?.name || '', {
+      nonNullable: true,
+      validators: Validators.required,
+    }),
+    branchId: this.fb.control<number>(this.initialValues?.branchId || 0, {
+      nonNullable: true,
+      validators: Validators.required,
+    }),
+    cardNumber: this.fb.control<string>(this.initialValues?.cardNumber || '', {
+      nonNullable: true,
+      validators: Validators.required,
+    }),
+    accountNumber: this.fb.control<string>(this.initialValues?.accountNumber || '', {
+      nonNullable: true,
+      validators: Validators.required,
+    }),
+    iban: this.fb.control<string>(this.initialValues?.iban || '', {
+      nonNullable: true,
+      validators: 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 IBankAccountsRequest).subscribe({
+        next: (res) => {
+          this.toastService.success({
+            text: `حساب بانکی ${this.form.value.name} با موفقیت ایجاد شد`,
+          });
+          this.close();
+          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/bankAccounts/components/select/select.component.html

@@ -0,0 +1,30 @@
+<uikit-field label="حساب بانکی" [control]="control" [showLabel]="showLabel" [showErrors]="showErrors">
+  <p-select
+    [loading]="loading()"
+    [options]="items()"
+    optionLabel="name"
+    [optionValue]="selectOptionValue"
+    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>
+  <bank-account-form [(visible)]="isOpenFormDialog" (onSubmit)="refresh()" />
+</uikit-field>

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

@@ -0,0 +1,34 @@
+import { AbstractSelectComponent } from '@/shared/components';
+import { UikitFieldComponent } from '@/uikit';
+import { Component } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { Button } from 'primeng/button';
+import { Select } from 'primeng/select';
+import { IBankAccountsResponse } from '../../models';
+import { BankAccountsService } from '../../services/main.service';
+import { BankAccountFormComponent } from '../form.component';
+
+@Component({
+  selector: 'bank-accounts-select-field',
+  templateUrl: './select.component.html',
+  imports: [ReactiveFormsModule, Select, UikitFieldComponent, Button, BankAccountFormComponent],
+})
+export class BankAccountsSelectComponent extends AbstractSelectComponent<IBankAccountsResponse> {
+  constructor(private service: BankAccountsService) {
+    super();
+    this.getData();
+  }
+
+  getData() {
+    this.loading.set(true);
+    this.service.getAll().subscribe({
+      next: (res) => {
+        this.items.set(res.data);
+        this.loading.set(false);
+      },
+      error: () => {
+        this.loading.set(false);
+      },
+    });
+  }
+}

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

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

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

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

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

@@ -0,0 +1,25 @@
+import { NamedRoutes } from '@/core';
+import { Routes } from '@angular/router';
+
+export type TBankAccountsRouteNames = 'bankAccounts' | 'bankAccount';
+
+export const bankAccountsNamedRoutes: NamedRoutes<TBankAccountsRouteNames> = {
+  bankAccounts: {
+    path: 'bankAccounts',
+    loadComponent: () => import('../../views/list.component').then((m) => m.BankAccountsComponent),
+    meta: {
+      title: 'حساب‌های بانکی',
+      pagePath: () => '/bankAccounts',
+    },
+  },
+  bankAccount: {
+    path: 'bankAccount',
+    loadComponent: () => import('../../views/single.component').then((m) => m.BankAccountComponent),
+    meta: {
+      title: 'حساب‌ بانکی',
+      pagePath: () => '/bankAccount',
+    },
+  },
+};
+
+export const BANK_ACCOUNTS_ROUTES: Routes = Object.values(bankAccountsNamedRoutes);

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

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

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

@@ -0,0 +1,21 @@
+export interface IBankAccountsRawResponse {
+  id: number;
+  name: string;
+  branchId: number;
+  accountNumber?: string;
+  iban?: string;
+  cardNumber?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  deletedAt?: string;
+}
+
+export interface IBankAccountsResponse extends IBankAccountsRawResponse {}
+
+export interface IBankAccountsRequest {
+  name: string;
+  branchId: number;
+  accountNumber?: string;
+  iban?: string;
+  cardNumber?: string;
+}

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

@@ -0,0 +1,21 @@
+import { IPaginatedResponse } from '@/core/models/service.model';
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { BANK_ACCOUNTS_API_ROUTES } from '../constants';
+import { IBankAccountsRawResponse, IBankAccountsRequest, IBankAccountsResponse } from '../models';
+
+@Injectable({ providedIn: 'root' })
+export class BankAccountsService {
+  constructor(private http: HttpClient) {}
+
+  private apiRoutes = BANK_ACCOUNTS_API_ROUTES;
+
+  getAll(): Observable<IPaginatedResponse<IBankAccountsResponse>> {
+    return this.http.get<IPaginatedResponse<IBankAccountsRawResponse>>(this.apiRoutes.list());
+  }
+
+  create(data: IBankAccountsRequest): Observable<IBankAccountsResponse> {
+    return this.http.post<IBankAccountsRawResponse>(this.apiRoutes.list(), data);
+  }
+}

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

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

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

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

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

@@ -0,0 +1,76 @@
+import {
+  IColumn,
+  PageDataListComponent,
+} from '@/shared/components/pageDataList/page-data-list.component';
+import { Component, signal } from '@angular/core';
+import { BankAccountFormComponent } from '../components/form.component';
+import { IBankAccountsResponse } from '../models';
+import { BankAccountsService } from '../services/main.service';
+
+@Component({
+  selector: 'app-bank-accounts',
+  templateUrl: './list.component.html',
+  imports: [PageDataListComponent, BankAccountFormComponent],
+})
+export class BankAccountsComponent {
+  constructor(private service: BankAccountsService) {
+    this.getData();
+  }
+
+  columns = [
+    { field: 'id', header: 'شناسه', width: '60px' },
+    {
+      field: 'name',
+      header: 'نام',
+      minWidth: '100px',
+    },
+    {
+      field: 'bank',
+      header: 'شعبه',
+      customDataModel(item) {
+        return `شعبه‌ی ${item.branch?.name} بانک ${item.branch?.bank?.name}`;
+      },
+      minWidth: '200px',
+    },
+    {
+      field: 'accountNumber',
+      header: 'شماره حساب بانکی',
+      canCopy: true,
+      minWidth: '160px',
+    },
+    {
+      field: 'iban',
+      header: 'شماره شبا',
+      canCopy: true,
+      minWidth: '200px',
+    },
+    {
+      field: 'cardNumber',
+      header: 'شماره کارت بانکی',
+      canCopy: true,
+      minWidth: '160px',
+    },
+    { field: 'createdAt', header: 'تاریخ ایجاد', type: 'date' },
+    { field: 'updatedAt', header: 'تاریخ به‌روزرسانی', type: 'date' },
+  ] as IColumn[];
+
+  loading = signal(false);
+  items = signal<IBankAccountsResponse[]>([]);
+  visibleForm = signal(false);
+
+  refresh() {
+    this.getData();
+  }
+
+  getData() {
+    this.loading.set(true);
+    this.service.getAll().subscribe((res) => {
+      this.loading.set(false);
+      this.items.set(res.data);
+    });
+  }
+
+  openAddForm() {
+    this.visibleForm.set(true);
+  }
+}

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

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

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

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

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

@@ -0,0 +1,15 @@
+<p-dialog
+  header="فرم شعبه بانک"
+  [(visible)]="visible"
+  [modal]="true"
+  [style]="{ width: '600px', zIndex: '100000' }"
+  appendTo="body"
+  [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.code" name="code" />
+    <banks-select-field [control]="form.controls.bankId" name="bankId" />
+    <app-form-footer-actions [submitLabel]="'ذخیره'" [loading]="form.disabled" (onCancel)="close()" />
+  </form>
+</p-dialog>

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

@@ -0,0 +1,92 @@
+import { ToastService } from '@/core/services/toast.service';
+import { BanksSelectComponent } from '@/shared/catalog/banks';
+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 { IBankBranchRequest, IBankBranchResponse } from '../models';
+import { BankBranchesService } from '../services/main.service';
+
+@Component({
+  selector: 'bank-branch-form',
+  templateUrl: './form.component.html',
+  imports: [
+    ReactiveFormsModule,
+    Dialog,
+    InputComponent,
+    FormFooterActionsComponent,
+    BanksSelectComponent,
+  ],
+})
+export class BankBranchFormComponent {
+  @Input() initialValues?: IBankBranchResponse;
+
+  @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<IBankBranchResponse>();
+
+  private fb = inject(FormBuilder);
+  constructor(
+    private service: BankBranchesService,
+    private toastService: ToastService,
+  ) {
+    effect(() => {
+      const v = this.visibleSignal();
+      if (!v) this.form.reset();
+    });
+  }
+
+  form = this.fb.group({
+    name: this.fb.control<string>(this.initialValues?.name || '', {
+      nonNullable: true,
+      validators: Validators.required,
+    }),
+    code: this.fb.control<string>(this.initialValues?.code || '', {
+      nonNullable: true,
+      validators: Validators.required,
+    }),
+    bankId: this.fb.control<number>(this.initialValues?.bank?.id || 0, {
+      nonNullable: true,
+      validators: 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 IBankBranchRequest).subscribe({
+        next: (res) => {
+          this.toastService.success({
+            text: `شعبه بانک ${this.form.value.name} با موفقیت ایجاد شد`,
+          });
+          this.close();
+          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/bankBranches/components/select/select.component.html

@@ -0,0 +1,30 @@
+<uikit-field label="شعبه‌ی بانک" [control]="control" [showLabel]="showLabel" [showErrors]="showErrors">
+  <p-select
+    [loading]="loading()"
+    [options]="items()"
+    optionLabel="name"
+    [optionValue]="selectOptionValue"
+    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>
+  <bank-branch-form [(visible)]="isOpenFormDialog" (onSubmit)="refresh()" />
+</uikit-field>

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

@@ -0,0 +1,34 @@
+import { AbstractSelectComponent } from '@/shared/components';
+import { UikitFieldComponent } from '@/uikit';
+import { Component } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { Button } from 'primeng/button';
+import { Select } from 'primeng/select';
+import { IBankBranchResponse } from '../../models';
+import { BankBranchesService } from '../../services/main.service';
+import { BankBranchFormComponent } from '../form.component';
+
+@Component({
+  selector: 'bank-branches-select-field',
+  templateUrl: './select.component.html',
+  imports: [ReactiveFormsModule, Select, UikitFieldComponent, Button, BankBranchFormComponent],
+})
+export class BankBranchesSelectComponent extends AbstractSelectComponent<IBankBranchResponse> {
+  constructor(private service: BankBranchesService) {
+    super();
+    this.getData();
+  }
+
+  getData() {
+    this.loading.set(true);
+    this.service.getAll().subscribe({
+      next: (res) => {
+        this.items.set(res.data);
+        this.loading.set(false);
+      },
+      error: () => {
+        this.loading.set(false);
+      },
+    });
+  }
+}

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

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

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

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

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

@@ -0,0 +1,17 @@
+import { NamedRoutes } from '@/core';
+import { Routes } from '@angular/router';
+
+export type TBankBranchesRouteNames = 'bankBranches';
+
+export const bankBranchesNamedRoutes: NamedRoutes<TBankBranchesRouteNames> = {
+  bankBranches: {
+    path: 'bankBranches',
+    loadComponent: () => import('../../views/list.component').then((m) => m.BankBranchesComponent),
+    meta: {
+      title: 'شعب بانک',
+      pagePath: () => '/bankBranches',
+    },
+  },
+};
+
+export const BANK_BRANCHES_ROUTES: Routes = Object.values(bankBranchesNamedRoutes);

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

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

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

@@ -0,0 +1,19 @@
+import { IBankResponse } from '@/shared/catalog/banks/models';
+
+export interface IBankBranchRawResponse {
+  id: number;
+  name: string;
+  code: string;
+  bank: IBankResponse;
+  createdAt: Date;
+  updatedAt: Date;
+  deletedAt: Date;
+}
+
+export interface IBankBranchResponse extends IBankBranchRawResponse {}
+
+export interface IBankBranchRequest {
+  name: string;
+  code: string;
+  bankId: number;
+}

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

@@ -0,0 +1,21 @@
+import { IPaginatedResponse } from '@/core/models/service.model';
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { BANK_BRANCHES_API_ROUTES } from '../constants';
+import { IBankBranchRawResponse, IBankBranchRequest, IBankBranchResponse } from '../models';
+
+@Injectable({ providedIn: 'root' })
+export class BankBranchesService {
+  constructor(private http: HttpClient) {}
+
+  private apiRoutes = BANK_BRANCHES_API_ROUTES;
+
+  getAll(): Observable<IPaginatedResponse<IBankBranchResponse>> {
+    return this.http.get<IPaginatedResponse<IBankBranchRawResponse>>(this.apiRoutes.list());
+  }
+
+  create(data: IBankBranchRequest): Observable<IBankBranchResponse> {
+    return this.http.post<IBankBranchRawResponse>(this.apiRoutes.list(), data);
+  }
+}

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

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

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

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

src/app/modules/bankBranches/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 { BankBranchFormComponent } from '../components/form.component';
+import { IBankBranchResponse } from '../models';
+import { BankBranchesService } from '../services/main.service';
+
+@Component({
+  selector: 'app-bank-branches',
+  templateUrl: './list.component.html',
+  imports: [PageDataListComponent, BankBranchFormComponent],
+})
+export class BankBranchesComponent {
+  constructor(private service: BankBranchesService) {
+    this.getData();
+  }
+
+  columns = [
+    { field: 'id', header: 'شناسه' },
+    { field: 'name', header: 'نام' },
+    { field: 'code', header: 'کد شعبه' },
+    { field: 'bank', header: 'بانک', type: 'nested', nestedPath: 'name' },
+    { field: 'createdAt', header: 'تاریخ ایجاد', type: 'date' },
+    { field: 'updatedAt', header: 'تاریخ به‌روزرسانی', type: 'date' },
+  ] as IColumn[];
+
+  loading = signal(false);
+  items = signal<IBankBranchResponse[]>([]);
+  visibleForm = signal(false);
+
+  refresh() {
+    this.getData();
+  }
+
+  getData() {
+    this.loading.set(true);
+    this.service.getAll().subscribe((res) => {
+      this.loading.set(false);
+      this.items.set(res.data);
+    });
+  }
+
+  openAddForm() {
+    this.visibleForm.set(true);
+  }
+}

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

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

src/app/modules/bankBranches/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/purchases/components/receiptTemplate/purchase-receipt-template.component.html

@@ -60,7 +60,7 @@
           </div>
           <div class="w-full flex items-center gap-2 h-10">
             <span [class]="formIsSubmitted() && form.controls.buyAt.invalid ? ' text-error' : 'text-muted-color'">
-              تاریخ رسید:
+              تاریخ خرید:
             </span>
             <shared-inline-edit>
               <ng-template #data>

src/app/modules/purchases/components/receiptTemplate/purchase-receipt-template.component.ts

@@ -94,7 +94,8 @@ export class PurchaseReceiptTemplateComponent {
   form = this.fb.group({
     totalAmount: [0, [Validators.required, Validators.min(0)]],
     code: ['', [Validators.required]],
-    isSettled: [false],
+    isSettled: this.fb.control(false, { validators: [Validators.required] }),
+    paidAmount: this.fb.control(0, { validators: [Validators.required, Validators.min(0)] }),
     buyAt: [dayjs().calendar('jalali').format('YYYY/MM/DD'), Validators.required],
     description: [''],
     products: this.fb.array([
@@ -115,14 +116,20 @@ export class PurchaseReceiptTemplateComponent {
     private toastService: ToastService,
   ) {
     this.form.controls.products.valueChanges.subscribe((products) => {
-      console.log('first');
-
       let totalAmount = 0;
       products.forEach((p: any) => {
         totalAmount += p.total || 0;
       });
       this.form.controls.totalAmount.setValue(totalAmount);
     });
+
+    this.form.controls.isSettled.valueChanges.subscribe((isSettled) => {
+      if (isSettled) {
+        this.form.controls.paidAmount.setValue(this.totalAmount);
+      } else {
+        this.form.controls.paidAmount.setValue(0);
+      }
+    });
   }
 
   formIsSubmitted = signal(false);

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

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

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

@@ -0,0 +1,14 @@
+<uikit-field label="بانک" [control]="control" [showLabel]="showLabel" [showErrors]="showErrors">
+  <p-select
+    [loading]="loading()"
+    [options]="items()"
+    optionLabel="name"
+    [optionValue]="selectOptionValue"
+    placeholder="انتخاب بانک"
+    [formControl]="control"
+    [showClear]="true"
+    [filter]="true"
+    appendTo="body"
+  >
+  </p-select>
+</uikit-field>

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

@@ -0,0 +1,34 @@
+import { AbstractSelectComponent } from '@/shared/components';
+import { UikitFieldComponent } from '@/uikit';
+import { Component } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { Select } from 'primeng/select';
+import { IBankResponse } from '../../models';
+import { BanksStore } from '../../store/main.store';
+
+@Component({
+  selector: 'banks-select-field',
+  templateUrl: './select.component.html',
+  imports: [ReactiveFormsModule, Select, UikitFieldComponent],
+})
+export class BanksSelectComponent extends AbstractSelectComponent<IBankResponse> {
+  constructor(private store: BanksStore) {
+    super();
+    this.getData();
+  }
+
+  getData() {
+    this.loading.set(true);
+    this.store.getItems().subscribe({
+      next: (res) => {
+        console.log(res);
+
+        this.items.set(res || []);
+        this.loading.set(false);
+      },
+      error: () => {
+        this.loading.set(false);
+      },
+    });
+  }
+}

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

@@ -0,0 +1,3 @@
+<span>
+  {{ selectedBank?.name }}
+</span>

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

@@ -0,0 +1,16 @@
+import { Component, inject, Input } from '@angular/core';
+import { BanksStore } from '../../store/main.store';
+
+@Component({
+  selector: 'app-catalog-banks-tag',
+  templateUrl: './tag.component.html',
+})
+export class CatalogBanksComponent {
+  @Input() bankId!: number;
+
+  private readonly store = inject(BanksStore);
+
+  banks = this.store.banks;
+
+  selectedBank = this.banks().find((bank) => bank.id === this.bankId);
+}

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

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

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

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

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

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

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

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

src/app/shared/catalog/banks/models/io.d.ts

@@ -0,0 +1,19 @@
+export interface IBankRawResponse {
+  id: number;
+  name: string;
+  shortName: string;
+}
+
+export interface IBankResponse extends IBankRawResponse {}
+
+export interface IBankRequest {
+  firstName: string;
+  lastName: string;
+  email: string;
+  mobileNumber: string;
+  address: string;
+  city: string;
+  state: string;
+  country: string;
+  isActive: boolean;
+}

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

@@ -0,0 +1,17 @@
+import { IPaginatedResponse } from '@/core/models/service.model';
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { BANKS_API_ROUTES } from '../constants';
+import { IBankRawResponse, IBankResponse } from '../models';
+
+@Injectable({ providedIn: 'root' })
+export class BanksService {
+  constructor(private http: HttpClient) {}
+
+  private apiRoutes = BANKS_API_ROUTES;
+
+  getAll(): Observable<IPaginatedResponse<IBankResponse>> {
+    return this.http.get<IPaginatedResponse<IBankRawResponse>>(this.apiRoutes.list());
+  }
+}

src/app/shared/catalog/banks/store/main.store.ts

@@ -0,0 +1,63 @@
+import { BaseState, BaseStore } from '@/core/state';
+import { computed, Injectable } from '@angular/core';
+import { of } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
+import { IBankResponse } from '../models';
+import { BanksService } from '../services/main.service';
+
+export interface banksState extends BaseState<IBankResponse[]> {}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class BanksStore extends BaseStore<banksState> {
+  constructor(private service: BanksService) {
+    super({
+      loading: false,
+      initialized: false,
+      error: null,
+      isRefreshing: false,
+      items: [],
+    });
+    this.initial();
+  }
+
+  readonly banks = computed(() => this.getCurrentState().items || []);
+
+  reset(): void {
+    this.setState({
+      loading: false,
+      initialized: false,
+      error: null,
+      isRefreshing: false,
+      items: [],
+    });
+  }
+
+  initial() {
+    this.getItems().subscribe();
+  }
+
+  getItems() {
+    if (this.getCurrentState().items?.length === 0) {
+      this.setLoading(true);
+      return this.service.getAll().pipe(
+        map((res: { data: IBankResponse[] }) => {
+          this.patchState({
+            items: res.data,
+            initialized: true,
+          });
+          this.setLoading(false);
+          return res.data;
+        }),
+        catchError((err: any) => {
+          this.setError(err.message || 'Failed to load banks');
+          this.setLoading(false);
+          return of([] as IBankResponse[]);
+        }),
+      );
+    } else {
+      return of(this.getCurrentState().items);
+    }
+  }
+}

src/app/shared/components/pageDataList/page-data-list.component.ts

@@ -24,7 +24,8 @@ export interface IColumn<T = any> {
   width?: string;
   minWidth?: string;
   canCopy?: boolean;
-  type?: 'text' | 'price' | 'boolean' | 'date';
+  type?: 'text' | 'price' | 'boolean' | 'date' | 'nested';
+  nestedPath?: string;
   customDataModel?: TemplateRef<any> | ((item: T) => string | number | boolean);
 }
 
@@ -130,6 +131,18 @@ export class PageDataListComponent<I> {
           return data ? 'بله' : 'خیر';
         case 'price':
           return formatWithCurrency(data, false, 'ریال');
+        case 'nested': {
+          const path = column.nestedPath;
+          if (!path) return '-';
+          const nestedData = path
+            .split('.')
+            .reduce(
+              (obj, key) => (obj && obj[key] !== undefined ? obj[key] : null),
+              item[String(field)],
+            );
+
+          return nestedData || '-';
+        }
         default:
           break;
       }

src/app/uikit/copy/copy.component.html

@@ -1,5 +1,5 @@
 <div
-  class="relative w-full flex items-center justify-center gap-2 cursor-pointer"
+  class="relative w-full flex items-center justify-start gap-2 cursor-pointer"
   (click)="copy($event)"
   aria-label="کپی"
 >