feat: add logo image and RTL support styles

- Added logo image to assets.
- Implemented RTL support styles in rtlSupport.scss for various components including breadcrumb, datatable, and tree node toggle button.

chore: configure environment files for production, staging, and development

- Created environment.prod.ts for production settings.
- Created environment.staging.ts for staging settings.
- Created environment.ts for local development settings.

feat: define custom theme preset

- Added presets.ts to define a custom theme preset using PrimeUIX with specific component styles and semantic colors.

chore: set up proxy configuration for local development

src/app/shared/components/breadcrumb.component.html

@@ -0,0 +1,6 @@
+<p-breadcrumb [model]="items"></p-breadcrumb>
+<div class="absolute left-0 inset-y-0">
+  <div class="me-4 flex items-center justify-center h-full">
+    <i class="pi pi-question-circle" pTooltip="محتوای آموزشی" tooltipPosition="bottom"></i>
+  </div>
+</div>

src/app/shared/components/breadcrumb.component.ts

@@ -0,0 +1,23 @@
+import { BreadcrumbService } from '@/core/services/breadcrumb.service';
+import { Component, inject } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { BreadcrumbModule } from 'primeng/breadcrumb';
+import { TooltipModule } from 'primeng/tooltip';
+
+@Component({
+  selector: 'app-breadcrumb',
+  standalone: true,
+  imports: [BreadcrumbModule, TooltipModule],
+  templateUrl: './breadcrumb.component.html',
+  host: { class: 'block w-full relative' },
+})
+export class BreadcrumbComponent {
+  private breadcrumbService = inject(BreadcrumbService);
+
+  get items(): MenuItem[] {
+    return this.breadcrumbService.items.map((item) => ({
+      ...item,
+      label: item.title || '',
+    }));
+  }
+}

src/app/shared/components/card-data.component.html

@@ -0,0 +1,23 @@
+<p-card>
+  <ng-template #title>
+    <ng-container [ngTemplateOutlet]="header">
+      <div class="flex items-center gap-10 justify-between">
+        <span>{{ cardTitle }}</span>
+        <div class="flex items-center gap-2 shrink-0">
+          <ng-container [ngTemplateOutlet]="moreAction"></ng-container>
+          @if (editable) {
+            <button
+              pButton
+              type="button"
+              [icon]="`pi ${editMode ? 'pi-times' : 'pi-pencil'}`"
+              class="p-button-text p-button-plain"
+              (click)="onEditClick()"
+            ></button>
+          }
+        </div>
+      </div>
+    </ng-container>
+    <hr />
+  </ng-template>
+  <ng-content></ng-content>
+</p-card>

src/app/shared/components/card-data.component.ts

@@ -0,0 +1,34 @@
+import { Maybe } from '@/core';
+import { CommonModule } from '@angular/common';
+import { Component, ContentChild, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
+import { ButtonDirective } from 'primeng/button';
+import { Card } from 'primeng/card';
+
+@Component({
+  selector: 'app-card-data',
+  standalone: true,
+  templateUrl: './card-data.component.html',
+  imports: [Card, CommonModule, ButtonDirective],
+})
+export class AppCardComponent {
+  @Input() cardTitle!: string;
+  @Input() editable: boolean = false;
+  @Input() editMode: boolean = false;
+
+  @Output() onEdit = new EventEmitter<void>();
+
+  @ContentChild('header', { static: true }) header?: Maybe<TemplateRef<any>>;
+  @ContentChild('moreAction', { static: true }) moreAction?: Maybe<TemplateRef<any>>;
+
+  constructor() {
+    if (this.editable) {
+      if (!this.onEdit) {
+        throw new Error('onEdit output must be bound when editable is true');
+      }
+    }
+  }
+
+  onEditClick() {
+    this.onEdit.emit();
+  }
+}

src/app/shared/components/formFooterActions/form-footer-actions.component.html

@@ -0,0 +1,4 @@
+<div class="flex justify-end gap-2">
+  <p-button [label]="cancelLabel" severity="secondary" (click)="cancel()" />
+  <p-button [label]="submitLabel" type="submit" [loading]="loading" (onClick)="submit()" />
+</div>

src/app/shared/components/formFooterActions/form-footer-actions.component.ts

@@ -0,0 +1,25 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Button } from 'primeng/button';
+
+@Component({
+  selector: 'app-form-footer-actions',
+  templateUrl: './form-footer-actions.component.html',
+  imports: [Button],
+})
+export class FormFooterActionsComponent {
+  @Input() submitLabel = 'تایید';
+  @Input() cancelLabel = 'لغو';
+  @Input() loading = false;
+  @Output() onSubmit = new EventEmitter<void>();
+  @Output() onCancel = new EventEmitter<void>();
+
+  constructor() {}
+
+  submit() {
+    this.onSubmit.emit();
+  }
+
+  cancel() {
+    this.onCancel.emit();
+  }
+}

src/app/shared/components/index.ts

@@ -0,0 +1,6 @@
+export * from './breadcrumb.component';
+export * from './card-data.component';
+export * from './inlineConfirmation/inline-confirmation.component';
+export * from './input/input.component';
+export * from './key-value.component/key-value.component';
+export * from './table-action-row.component';

src/app/shared/components/inlineConfirmation/inline-confirmation.component.html

@@ -0,0 +1,9 @@
+<div class="inline-flex items-center gap-2 flex-wrap">
+  <p-badge
+    [value]="value ? confirmedMessage : rejectedMessage"
+    [severity]="value ? 'success' : 'danger'"
+    class="cursor-pointer"
+    (click)="onClick($event)"
+  />
+  <p-confirmpopup />
+</div>

src/app/shared/components/inlineConfirmation/inline-confirmation.component.ts

@@ -0,0 +1,55 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ConfirmationService } from 'primeng/api';
+import { Badge } from 'primeng/badge';
+import { ConfirmPopup } from 'primeng/confirmpopup';
+
+@Component({
+  selector: 'inline-confirmation',
+  templateUrl: './inline-confirmation.component.html',
+  imports: [ConfirmPopup, Badge],
+  providers: [ConfirmationService],
+})
+export class InlineConfirmationComponent {
+  @Input() value!: boolean;
+  @Input() confirmedMessage?: string = 'اطلاعات تایید شده است';
+  @Input() rejectedMessage?: string = 'اطلاعات تایید نشده است';
+  @Input() loading?: boolean = false;
+  @Input() onConfirmMessage: string = 'آیا از تایید این اطلاعات اطمینان دارید؟';
+  @Input() onRejectMessage: string = 'آیا از رد این اطلاعات اطمینان دارید؟';
+  @Input() confirmationHeader: string = 'تایید تغییر وضعیت';
+  @Input() confirmationIcon: string = 'pi pi-exclamation-triangle';
+  @Input() acceptCTALabel: string = 'بله';
+  @Input() rejectCTALabel: string = 'خیر';
+
+  @Output() onConfirm = new EventEmitter<void>();
+  @Output() onReject = new EventEmitter<void>();
+
+  constructor(private confirmationService: ConfirmationService) {}
+
+  toggle = () => {
+    if (this.value) {
+      this.onReject.emit();
+    } else {
+      this.onConfirm.emit();
+    }
+  };
+
+  onClick($event: Event) {
+    this.showConfirmation($event);
+  }
+
+  showConfirmation(event: Event) {
+    this.confirmationService.confirm({
+      target: (event.target as HTMLElement)?.parentNode?.parentNode!,
+      message: this.value ? this.onRejectMessage : this.onConfirmMessage,
+      header: this.confirmationHeader,
+      icon: this.confirmationIcon,
+      acceptLabel: this.acceptCTALabel,
+      rejectLabel: this.rejectCTALabel,
+      rejectButtonProps: {
+        variant: 'outlined',
+      },
+      accept: () => this.toggle(),
+    });
+  }
+}

src/app/shared/components/input/input.component.html

@@ -0,0 +1,17 @@
+<uikit-field [label]="label" [name]="name" [control]="control">
+  <input
+    pInputText
+    [attr.id]="name"
+    [formControl]="control"
+    [attr.name]="name"
+    [attr.placeholder]="placeholder"
+    [attr.inputmode]="inputMode"
+    [attr.maxlength]="maxLength || null"
+    [attr.type]="htmlType"
+    [attr.autocomplete]="autocomplete"
+    [class]="`${inputClass} w-full ${size === 'large' ? 'p-inputtext-lg' : size === 'small' ? 'p-inputtext-sm' : ''}`"
+    [required]="isRequired"
+    [invalid]="control.invalid && (control.touched || control.dirty)"
+    (input)="onInput($event)"
+  />
+</uikit-field>

src/app/shared/components/input/input.component.ts

@@ -0,0 +1,96 @@
+import { Maybe } from '@/core';
+import { UikitFieldComponent } from '@/uikit/uikit-field.component';
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { InputTextModule } from 'primeng/inputtext';
+
+@Component({
+  selector: 'app-input',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, InputTextModule, UikitFieldComponent],
+  templateUrl: './input.component.html',
+})
+export class InputComponent {
+  @Input() type: 'simple' | 'postalCode' | 'mobile' | 'phone' | 'email' = 'simple';
+  @Input() control!: FormControl<Maybe<any>>;
+  @Input() name!: string;
+  @Input() label: string = '';
+  @Input() customPlaceholder?: string;
+  @Input() required = false;
+  @Input() disabled = false;
+  @Input() size?: 'small' | 'large';
+  @Input() autocomplete?: string = 'off';
+  @Output() valueChange = new EventEmitter<string>();
+
+  onInput(ev: Event) {
+    const v = (ev.target as HTMLInputElement).value;
+    this.valueChange.emit(v);
+  }
+
+  get placeholder(): string | null {
+    if (this.customPlaceholder) return this.customPlaceholder;
+    switch (this.type) {
+      case 'mobile':
+        return '09xxxxxxxx';
+      case 'postalCode':
+        return 'کد پستی (۱۰ رقم)';
+      case 'phone':
+        return 'شماره تلفن';
+      case 'email':
+        return 'آدرس ایمیل خود را وارد کنید';
+      default:
+        return '';
+    }
+  }
+
+  get inputMode(): string | null {
+    switch (this.type) {
+      case 'mobile':
+      case 'phone':
+      case 'postalCode':
+        return 'numeric';
+      default:
+        return 'text';
+    }
+  }
+
+  get maxLength(): number | null {
+    switch (this.type) {
+      case 'mobile':
+        return 11;
+      case 'postalCode':
+        return 10;
+      case 'phone':
+        return 11;
+      default:
+        return null;
+    }
+  }
+
+  get inputClass(): string {
+    switch (this.type) {
+      case 'mobile':
+      case 'phone':
+        return 'ltrInput';
+      case 'email':
+      case 'postalCode':
+        return 'ltrInput rtlPlaceholder';
+      default:
+        return '';
+    }
+  }
+
+  get htmlType(): string {
+    switch (this.type) {
+      case 'email':
+        return 'email';
+      default:
+        return 'text';
+    }
+  }
+
+  get isRequired(): boolean {
+    return this.required || this.control.hasValidator(Validators.required);
+  }
+}

src/app/shared/components/key-value.component/key-value.component.html

@@ -0,0 +1,6 @@
+<div class="inline-flex gap-2 items-center w-full">
+  <span class="text-muted-color text-base font-normal shrink-0">{{ label }}:</span>
+  <ng-content>
+    <span class="text-text-color text-base font-bold grow">{{ value || "-" }}</span>
+  </ng-content>
+</div>

src/app/shared/components/key-value.component/key-value.component.ts

@@ -0,0 +1,16 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-key-value',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './key-value.component.html',
+  host: {
+    class: 'w-full block',
+  },
+})
+export class KeyValueComponent {
+  @Input() label!: string;
+  @Input() value?: string = '-';
+}

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

@@ -0,0 +1,139 @@
+<div class="h-full bg-surface-overlay">
+  <div class="h-full flex flex-col gap-4">
+    <p-table
+      [columns]="columns"
+      [scrollable]="true"
+      [value]="items"
+      [loading]="loading"
+      columnResizeMode="fit"
+      stripedRows
+      [showFirstLastIcon]="false"
+      class="grow !flex flex-col overflow-hidden"
+      [tableStyleClass]="!items.length && !loading ? 'h-full' : ''"
+    >
+      @if (pageTitle || showAdd || filter || caption) {
+        <ng-template pTemplate="caption">
+          <ng-container [ngTemplateOutlet]="caption">
+            <div class="flex justify-between items-center gap-4">
+              <h5 class="font-bold">{{ pageTitle }}</h5>
+              @if (showAdd || filter) {
+                <div class="flex items-center gap-2">
+                  @if (filter) {
+                    <p-button
+                      label="فیلتر"
+                      icon="pi pi-filter"
+                      variant="outlined"
+                      badgeSeverity="info"
+                      [badge]="isFiltered ? '1' : undefined"
+                      (click)="openFilter()"
+                    ></p-button>
+                  }
+                  @if (showAdd) {
+                    <p-button label="{{ addNewCtaLabel }}" icon="pi pi-plus" (click)="openAddForm()"></p-button>
+                  }
+                </div>
+              }
+            </div>
+          </ng-container>
+        </ng-template>
+      }
+
+      <ng-template #header let-columns>
+        <tr>
+          @for (col of columns; track col.header) {
+            <th [style]="{ width: col.width, minWidth: col.minWidth }">{{ col.header }}</th>
+          }
+          @if (actionsCount()) {
+            <th type="th" [style]="{ width: `${actionsCount() * 2 + (actionsCount() - 1) * 0.25}rem` }"></th>
+          }
+        </tr>
+      </ng-template>
+
+      <ng-template #body let-item>
+        <tr>
+          @for (col of columns; track col.field) {
+            <td>
+              @if (getTemplate(col)) {
+                <ng-container
+                  [ngTemplateOutlet]="getTemplate(col)"
+                  [ngTemplateOutletContext]="{ $implicit: item }"
+                ></ng-container>
+              } @else if (col.canCopy) {
+                <uikit-copy [text]="getCell(item, col)"></uikit-copy>
+              } @else {
+                <span>
+                  {{ getCell(item, col) }}
+                </span>
+              }
+            </td>
+          }
+          @if (actionsCount()) {
+            <td
+              table-action-row
+              type="td"
+              [showDetails]="showDetails"
+              [showDelete]="showDelete"
+              [showEdit]="showEdit"
+              (edit)="edit(item)"
+              (delete)="remove(item)"
+              (details)="details(item)"
+            ></td>
+          }
+        </tr>
+      </ng-template>
+
+      <ng-template #emptymessage>
+        <tr class="h-full">
+          <td [colSpan]="columns.length.toString()" class="w-full">
+            <uikit-empty-state
+              [title]="emptyPlaceholderTitle"
+              [description]="emptyPlaceholderDescription"
+              [ctaLabel]="emptyPlaceholderCtaLabel || addNewCtaLabel"
+              [showCTA]="showAdd"
+              (ctaClick)="openAddForm()"
+            ></uikit-empty-state>
+          </td>
+        </tr>
+      </ng-template>
+
+      <ng-template #loadingbody let-columns>
+        @for (i of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; track i) {
+          <tr style="height: 46px">
+            @for (col of columns; track col) {
+              <td>
+                <p-skeleton></p-skeleton>
+              </td>
+            }
+            @if (actionsCount()) {
+              <td>
+                <p-skeleton></p-skeleton>
+              </td>
+            }
+          </tr>
+        }
+      </ng-template>
+    </p-table>
+    @if (showPaginator) {
+      <app-paginator
+        [currentPage]="currentPage || 1"
+        [totalRecords]="totalRecords"
+        [perPage]="perPage || 10"
+        [loading]="loading"
+        (onChange)="onPage($event)"
+      />
+    }
+  </div>
+  @if (filter) {
+    <p-drawer
+      [visible]="filterDrawerVisible()"
+      (onHide)="closeFilter()"
+      header="فیلتر"
+      class="contnet"
+      styleClass="!w-[80vw] md:!w-96 md:!max-w-96 !max-w-sm"
+    >
+      <div class="pt-2">
+        <ng-container [ngTemplateOutlet]="filter" [ngTemplateOutletContext]="{ $implicit: columns }"> </ng-container>
+      </div>
+    </p-drawer>
+  }
+</div>

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

@@ -0,0 +1,170 @@
+import { PaginatorComponent, UikitCopyComponent, UikitEmptyStateComponent } from '@/uikit';
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  computed,
+  ContentChild,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  Renderer2,
+  signal,
+  TemplateRef,
+} from '@angular/core';
+import { ButtonModule } from 'primeng/button';
+import { DrawerModule } from 'primeng/drawer';
+import { PaginatorModule } from 'primeng/paginator';
+import { SkeletonModule } from 'primeng/skeleton';
+import { TableModule } from 'primeng/table';
+import { TableActionRowComponent } from '../table-action-row.component';
+
+export interface IColumn {
+  field: string;
+  header: string;
+  width?: string;
+  minWidth?: string;
+  canCopy?: boolean;
+  customDataModel?: TemplateRef<any> | ((item: any) => string | number | boolean);
+}
+
+@Component({
+  selector: 'app-page-data-list',
+  templateUrl: './page-data-list.component.html',
+  imports: [
+    CommonModule,
+    TableActionRowComponent,
+    UikitEmptyStateComponent,
+    TableModule,
+    ButtonModule,
+    SkeletonModule,
+    PaginatorModule,
+    DrawerModule,
+    PaginatorComponent,
+    UikitCopyComponent,
+  ],
+})
+export class PageDataListComponent<I> {
+  constructor(
+    private host: ElementRef,
+    private renderer: Renderer2,
+  ) {}
+
+  @Input() pageTitle!: string;
+  @Input() addNewCtaLabel?: string;
+  @Input() columns!: IColumn[];
+  @Input() items!: I[];
+  @Input() loading!: boolean;
+  @Input() emptyPlaceholderTitle: string = 'موردی برای نمایش وجود ندارد';
+  @Input() emptyPlaceholderDescription?: string = '';
+  @Input() emptyPlaceholderCtaLabel?: string;
+  @Input() totalRecords!: number;
+  @Input() perPage?: number = 10;
+  @Input() currentPage?: number = 1;
+  @Input() showEdit: boolean = false;
+  @Input() showDelete: boolean = false;
+  @Input() showDetails: boolean = false;
+  @Input() showAdd: boolean = false;
+  @Input() isFiltered: boolean = false;
+  @Input() fullHeight: boolean = false;
+
+  @ContentChild('filter', { static: true }) filter!: TemplateRef<any> | null;
+  @ContentChild('caption', { static: true }) caption!: TemplateRef<any> | null;
+
+  @Output() onEdit = new EventEmitter<I>();
+  @Output() onDelete = new EventEmitter<I>();
+  @Output() onDetails = new EventEmitter<I>();
+  @Output() onAdd = new EventEmitter<void>();
+  @Output() pageChange = new EventEmitter<any>();
+
+  filterDrawerVisible = signal<boolean>(false);
+
+  ngOnInit() {
+    if (this.fullHeight) {
+      this.renderer.setStyle(this.host.nativeElement, 'height', '100cqmin');
+    }
+  }
+
+  edit = (item: I) => {
+    this.onEdit.emit(item);
+  };
+
+  remove = (item: I) => {
+    this.onDelete.emit(item);
+  };
+
+  details = (item: I) => {
+    this.onDetails.emit(item);
+  };
+
+  openAddForm = () => {
+    this.onAdd.emit();
+  };
+
+  openFilter = () => {
+    this.filterDrawerVisible.set(true);
+  };
+
+  closeFilter = () => {
+    this.filterDrawerVisible.set(false);
+  };
+
+  onPage = ($event: any) => {
+    this.pageChange.emit($event);
+  };
+
+  get showPaginator() {
+    return !!(this.totalRecords && this.perPage && this.totalRecords > this.perPage);
+  }
+
+  getCell(item: Record<string, any>, column: IColumn): any {
+    if (!item || !column) return '';
+    try {
+      const { field } = column;
+      if (column.customDataModel) {
+        return this.renderCustom(column, item);
+      }
+      const data = item[field];
+      if (data === undefined || data === null) {
+        return '-';
+      }
+      if (typeof data === 'object') {
+        return data.title || '-';
+      }
+      return data || '-';
+    } catch (e) {
+      return '-';
+    }
+  }
+
+  getTemplate(col: IColumn): TemplateRef<any> | null {
+    const v = col.customDataModel;
+
+    return v instanceof TemplateRef ? (v as TemplateRef<any>) : null;
+  }
+
+  renderCustom(column: IColumn, item: any): any {
+    const v = column.customDataModel;
+
+    if (!v) {
+      return null;
+    }
+    if (typeof v === 'function') {
+      try {
+        return (v as (item: any) => any)(item);
+      } catch {
+        return '-';
+      }
+    }
+    if (typeof v === 'string') return v;
+    return null;
+  }
+
+  actionsCount = computed(() => {
+    let totalCount = 0;
+    if (this.showEdit) totalCount += 1;
+    if (this.showDelete) totalCount += 1;
+    if (this.showDetails) totalCount += 1;
+    return totalCount;
+  });
+}

src/app/shared/components/table-action-row.component.html

@@ -0,0 +1,25 @@
+<td class="text-center flex items-center gap-1">
+  @if (showEdit) {
+    <p-button
+      size="small"
+      icon="pi pi-pencil"
+      variant="outlined"
+      severity="primary"
+      (click)="edit.emit()"
+      title="ویرایش"
+    />
+  }
+  @if (showDelete) {
+    <p-button
+      size="small"
+      icon="pi pi-trash"
+      variant="outlined"
+      severity="danger"
+      (click)="delete.emit()"
+      title="حذف"
+    />
+  }
+  @if (showDetails) {
+    <p-button size="small" icon="pi pi-chevron-left" variant="outlined" (click)="details.emit()" title="جزئیات" />
+  }
+</td>

src/app/shared/components/table-action-row.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Button } from 'primeng/button';
+
+@Component({
+  selector: '[table-action-row]',
+  standalone: true,
+  imports: [CommonModule, Button],
+  templateUrl: './table-action-row.component.html',
+})
+export class TableActionRowComponent {
+  @Input() showEdit = false;
+  @Input() showDelete = false;
+  @Input() showDetails = false;
+
+  @Output() edit = new EventEmitter<void>();
+  @Output() delete = new EventEmitter<void>();
+  @Output() details = new EventEmitter<void>();
+
+  get widthStyle(): string {
+    const count = [this.showEdit, this.showDelete, this.showDetails].filter(Boolean).length;
+    return `${count * 2.5 + count - 1 * 0.25}rem`;
+  }
+
+  widthClass: string = '';
+}