update

src/app/domains/consumer/components/invoices/shared-saleInvoice.component.html

@@ -1,5 +1,8 @@
 <div class="flex flex-col gap-6">
-  <app-card-data cardTitle="اطلاعات فاکتور" [editable]="false" [(editMode)]="editMode">
+  <app-card-data cardTitle="اطلاعات فاکتور" [editable]="false">
+    <ng-template #moreActions>
+      <button pButton type="button" label="چاپ" icon="pi pi-print" outlined (click)="printInvoice()"></button>
+    </ng-template>
     <div class="flex flex-col gap-4">
       <div class="grid grid-cols-3 gap-4 items-center">
         <app-key-value label="کد رهگیری" [value]="invoice()?.code" />
@@ -46,4 +49,15 @@
       }
     </div>
   </app-card-data>
+  <app-card-data cardTitle="کالاهای خریداری شده" [editable]="false">
+    <app-page-data-list
+      [columns]="columns"
+      [expandColumns]="expandableColumns"
+      [expandable]="true"
+      expandableItemKey="payload"
+      [items]="invoice()?.items"
+      [loading]="loading"
+      pageTitle=""
+    />
+  </app-card-data>
 </div>

src/app/domains/consumer/components/invoices/shared-saleInvoice.component.ts

@@ -0,0 +1,87 @@
+import { AppCardComponent, KeyValueComponent } from '@/shared/components';
+import {
+  IColumn,
+  PageDataListComponent,
+} from '@/shared/components/pageDataList/page-data-list.component';
+import { getGoodUnitTypeProperties } from '@/utils';
+import { Component, Input } from '@angular/core';
+import { Badge } from 'primeng/badge';
+import { ButtonDirective } from 'primeng/button';
+import { Divider } from 'primeng/divider';
+import { TableModule } from 'primeng/table';
+
+export type TConsumerSaleInvoice = 'full' | 'customer' | 'pos';
+
+@Component({
+  selector: 'consumer-saleInvoice-shared',
+  templateUrl: './shared-saleInvoice.component.html',
+  imports: [
+    AppCardComponent,
+    KeyValueComponent,
+    Badge,
+    Divider,
+    ButtonDirective,
+    PageDataListComponent,
+    TableModule,
+  ],
+})
+export class ConsumerSaleInvoiceSharedComponent {
+  @Input({ required: true }) loading!: boolean;
+  @Input({ required: true }) invoice!: any;
+  @Input() variant: TConsumerSaleInvoice = 'full';
+
+  printInvoice = () => {
+    window.print();
+  };
+
+  columns: IColumn[] = [
+    {
+      field: '',
+      header: '',
+      type: 'index',
+    },
+    {
+      field: 'name',
+      header: 'عنوان',
+      type: 'nested',
+      nestedPath: 'good.name',
+    },
+    {
+      field: 'unit_price',
+      header: 'قیمت واحد',
+      type: 'price',
+    },
+    {
+      field: 'quantity',
+      header: 'مقدار',
+      customDataModel(item) {
+        return `${item.quantity} ${getGoodUnitTypeProperties(item.good.unit_type).quantitySymbolText}`;
+      },
+    },
+    {
+      field: 'total_amount',
+      header: 'قیمت نهایی',
+      type: 'price',
+    },
+  ];
+
+  expandableColumns: IColumn[] = [
+    {
+      field: 'commission',
+      header: 'کارمزد',
+      type: 'price',
+    },
+    {
+      field: 'profit',
+      header: 'سود',
+      type: 'price',
+    },
+    {
+      field: 'wages',
+      header: 'اجرت',
+      type: 'price',
+    },
+  ];
+
+  expandedRows: { [key: string]: boolean } = {};
+}

src/app/domains/consumer/components/invoices/single.component.ts

@@ -1,20 +0,0 @@
-import { AppCardComponent, KeyValueComponent } from '@/shared/components';
-import { Component, Input, signal } from '@angular/core';
-import { Badge } from 'primeng/badge';
-import { Divider } from 'primeng/divider';
-
-export type TConsumerSaleInvoice = 'full' | 'customer' | 'pos';
-
-@Component({
-  selector: 'consumer-saleInvoice-shared',
-  templateUrl: './single.component.html',
-  imports: [AppCardComponent, KeyValueComponent, Badge, Divider],
-})
-export class ConsumerSaleInvoiceSharedComponent {
-  @Input({ required: true }) loading!: boolean;
-  @Input({ required: true }) invoice!: any;
-  @Input() editable = false;
-  @Input() variant: TConsumerSaleInvoice = 'full';
-
-  editMode = signal<boolean>(false);
-}

src/app/domains/consumer/modules/businessActivities/components/list.component.ts

@@ -21,7 +21,7 @@ export class ConsumerBusinessActivityListComponent extends AbstractList<IBusines
   @Input() header: IColumn[] = [
     { field: 'id', header: 'شناسه', type: 'id' },
     { field: 'name', header: 'عنوان' },
-    { field: 'guild', header: 'صنف', type: 'nested', nestedPath: 'name' },
+    { field: 'guild', header: 'صنف', type: 'nested', nestedPath: 'guild.name' },
     {
       field: 'created_at',
       header: 'تاریخ ایجاد',

src/app/domains/consumer/modules/businessActivities/views/poses/single.component.html

@@ -1,6 +1,6 @@
 <div class="flex flex-col gap-6">
   <app-card-data cardTitle="اطلاعات پایانه‌ی فروش" [editable]="true" [(editMode)]="editMode">
-    <ng-template #moreAction>
+    <ng-template #moreActions>
       <p-button type="button" variant="outlined" (onClick)="toPosLanding()"> ورود به پایانه </p-button>
     </ng-template>
     <div class="flex flex-col gap-4">

src/app/domains/consumer/modules/businessActivities/views/single.component.html

@@ -1,6 +1,6 @@
 <div class="flex flex-col gap-6">
   <app-card-data cardTitle="اطلاعات فعالیت اقتصادی" [editable]="true" [(editMode)]="editMode">
-    <ng-template #moreAction> </ng-template>
+    <ng-template #moreActions> </ng-template>
     <div class="flex flex-col gap-4">
       <div class="grid grid-cols-3 gap-4 items-center">
         <app-key-value label="عنوان" [value]="business()?.name" />

src/app/domains/consumer/modules/customers/views/saleInvoices/single.component.html

@@ -1,38 +1 @@
-<div class="flex flex-col gap-6">
-  <app-card-data cardTitle="اطلاعات فاکتور" [editable]="false" [(editMode)]="editMode">
-    <div class="flex flex-col gap-4">
-      <div class="grid grid-cols-3 gap-4 items-center">
-        <app-key-value label="کد رهگیری" [value]="invoice()?.code" />
-        <app-key-value label="تاریخ فاکتور" [value]="invoice()?.invoice_date" type="dateTime" />
-        <app-key-value label="تاریخ ایجاد فاکتور" [value]="invoice()?.created_at" type="dateTime" />
-        <app-key-value label="وضعیت صدور به سامانه‌ی مودیان">
-          <p-badge value="ارسال نشده" severity="danger" />
-        </app-key-value>
-        <div class="col-span-3">
-          <app-key-value label="توضیحات" [value]="invoice()?.notes" />
-        </div>
-      </div>
-      <p-divider align="center"> اطلاعات پرداخت </p-divider>
-      <div class="grid grid-cols-3 gap-4 items-center">
-        <app-key-value label="مجموع قابل پرداخت" [value]="invoice()?.total_amount" type="price" />
-        @for (payment of invoice()?.payments; track $index) {
-          <app-key-value
-            [label]="
-              `${payment.payment_method === 'SET_OF' ? 'تهاتر' : payment.payment_method === 'TERMINAL' ? 'پایانه' : 'نقدی'}`
-            "
-            [value]="payment.amount"
-            type="price"
-          />
-        }
-      </div>
-
-      <p-divider align="center"> اطلاعات صادر کننده </p-divider>
-      <div class="grid grid-cols-3 gap-4 items-center">
-        <app-key-value label="کسب و کار" [value]="invoice()?.pos!.complex.business_activity.name" />
-        <app-key-value label="مجموعه" [value]="invoice()?.pos!.complex.name" />
-        <app-key-value label="پایانه‌ی فروش" [value]="invoice()?.pos!.name" />
-        <app-key-value label="ایجاد کننده" [value]="invoice()?.consumer_account?.account?.username" />
-      </div>
-    </div>
-  </app-card-data>
-</div>
+<consumer-saleInvoice-shared [loading]="loading()" [invoice]="invoice" variant="customer" />

src/app/domains/consumer/modules/customers/views/saleInvoices/single.component.ts

@@ -1,17 +1,15 @@
 import { BreadcrumbService } from '@/core/services';
-import { AppCardComponent, KeyValueComponent } from '@/shared/components';
+import { ConsumerSaleInvoiceSharedComponent } from '@/domains/consumer/components/invoices/shared-saleInvoice.component';
 import pageParamsUtils from '@/utils/page-params.utils';
 import { Component, computed, effect, inject, signal } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Badge } from 'primeng/badge';
-import { Divider } from 'primeng/divider';
 import { ConsumerCustomerStore } from '../../store/customer.store';
 import { ConsumerCustomerSaleInvoiceStore } from '../../store/saleInvoice.store';
 
 @Component({
   selector: 'consumer-customer-saleInvoice',
   templateUrl: './single.component.html',
-  imports: [AppCardComponent, KeyValueComponent, Divider, Badge],
+  imports: [ConsumerSaleInvoiceSharedComponent],
 })
 export class ConsumerCustomerSaleInvoiceComponent {
   private readonly route = inject(ActivatedRoute);
@@ -25,6 +23,7 @@ export class ConsumerCustomerSaleInvoiceComponent {
   editMode = signal<boolean>(false);
 
   readonly invoice = computed(() => this.store.entity());
+  readonly loading = computed(() => this.store.loading());
 
   constructor() {
     effect(() => {

src/app/domains/consumer/modules/poses/views/single.component.html

@@ -1,6 +1,6 @@
 <div class="flex flex-col gap-6">
   <app-card-data cardTitle="اطلاعات پایانه‌ی فروش" [editable]="true" [(editMode)]="editMode">
-    <ng-template #moreAction>
+    <ng-template #moreActions>
       <p-button type="button" variant="outlined" (onClick)="toPosLanding()"> ورود به پایانه </p-button>
     </ng-template>
     <div class="flex flex-col gap-4">

src/app/domains/consumer/modules/saleInvoices/views/single.component.ts

@@ -1,5 +1,5 @@
 import { BreadcrumbService } from '@/core/services';
-import { ConsumerSaleInvoiceSharedComponent } from '@/domains/consumer/components/invoices/single.component';
+import { ConsumerSaleInvoiceSharedComponent } from '@/domains/consumer/components/invoices/shared-saleInvoice.component';
 import pageParamsUtils from '@/utils/page-params.utils';
 import { Component, computed, effect, inject, signal } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';

src/app/domains/pos/layouts/layout.component.html

@@ -18,7 +18,7 @@
         <div class="">
           <p-menu #menu [model]="profileMenuItems" [popup]="true" />
           <button pButton (click)="menu.toggle($event)" icon="pi pi-user" severity="contrast">
-            {{ userInfo()?.username }}
+            {{ posProfile()?.account?.username }}
           </button>
         </div>
       </div>

src/app/domains/pos/layouts/layout.component.ts

@@ -8,7 +8,8 @@ import { ButtonDirective } from 'primeng/button';
 import { Card } from 'primeng/card';
 import { Menu } from 'primeng/menu';
 import images from 'src/assets/images';
-import { PosStore } from '../pos.store';
+import { PosProfileStore } from '../store';
+import { PosStore } from '../store/pos.store';
 import { PosChooseCardsComponent } from './choose-pos.component';
 
 @Component({
@@ -27,13 +28,19 @@ import { PosChooseCardsComponent } from './choose-pos.component';
 export class PosLayoutComponent {
   constructor() {}
 
-  private readonly store = inject(PosStore);
+  private readonly posInfoStore = inject(PosStore);
+  private readonly posProfileStore = inject(PosProfileStore);
   private readonly authService = inject(AuthService);
 
-  readonly loading = computed(() => this.store.loading());
-  readonly posInfo = computed(() => this.store.entity());
-  readonly error = computed(() => this.store.error());
-  readonly userInfo = computed(() => this.authService.currentAccount());
+  readonly posInfoLoading = computed(() => this.posInfoStore.loading());
+  readonly posInfo = computed(() => this.posInfoStore.entity());
+  readonly posInfoError = computed(() => this.posInfoStore.error());
+  readonly posProfileLoading = computed(() => this.posProfileStore.loading());
+  readonly posProfile = computed(() => this.posProfileStore.entity());
+  readonly posProfileError = computed(() => this.posProfileStore.error());
+
+  readonly loading = computed(() => this.posInfoLoading() || this.posProfileLoading());
+  readonly error = computed(() => this.posInfoError() || this.posProfileError());
 
   logout = () => {
     this.authService.logout();
@@ -57,7 +64,8 @@ export class PosLayoutComponent {
   now = new Date();
 
   getData() {
-    this.store.getData().subscribe();
+    this.posProfileStore.getData().subscribe();
+    this.posInfoStore.getData().subscribe();
   }
 
   onChoosePos() {

src/app/domains/pos/models/index.ts

@@ -0,0 +1,3 @@
+export * from './good.io';
+export * from './pos.io';
+export * from './profile.io';

src/app/domains/pos/models/pos.io.ts

@@ -1,7 +1,7 @@
 import ISummary from '@/core/models/summary';
 
 export interface IPosInfoRawResponse {
-  name: true;
+  name: string;
   complex: {
     id: string;
     name: string;

src/app/domains/pos/models/profile.io.ts

@@ -0,0 +1,17 @@
+import ISummary from '@/core/models/summary';
+
+export interface IPosProfileRawResponse {
+  id: string;
+  role: string;
+  account: { username: string };
+  consumer: {
+    first_name: string;
+    last_name: string;
+  };
+}
+
+export interface IPosProfileResponse extends IPosProfileRawResponse {}
+
+interface Complex extends ISummary {
+  business_activity: ISummary;
+}

src/app/domains/pos/modules/landing/constants/apiRoutes/index.ts

@@ -1,6 +1,7 @@
 const baseUrl = '/api/v1/pos';
 
 export const POS_API_ROUTES = {
+  profile: () => `${baseUrl}/me`,
   info: () => `${baseUrl}`,
   accessible: () => `${baseUrl}/accessible`,
   goods: () => `${baseUrl}/goods`,

src/app/domains/pos/modules/landing/models/payload.ts

@@ -5,9 +5,6 @@ export interface IGoldPayload {
   wages: number;
   profit: number;
   commission: number;
-  // wages_amount: number;
-  // profit_amount: number;
-  // commission_amount: number;
 }
 
 export interface IStandardPayload {}

src/app/domains/pos/modules/landing/services/main.service.ts

@@ -11,6 +11,7 @@ import {
   IPosInfoRawResponse,
   IPosInfoResponse,
 } from '@/domains/pos/models/pos.io';
+import { IPosProfileRawResponse, IPosProfileResponse } from '@/domains/pos/models/profile.io';
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
@@ -23,6 +24,10 @@ export class PosService {
 
   private apiRoutes = POS_API_ROUTES;
 
+  getProfile(): Observable<IPosProfileResponse> {
+    return this.http.get<IPosProfileRawResponse>(this.apiRoutes.profile());
+  }
+
   getInfo(): Observable<IPosInfoResponse> {
     return this.http.get<IPosInfoRawResponse>(this.apiRoutes.info());
   }

src/app/domains/pos/modules/landing/views/root.component.ts

@@ -1,5 +1,5 @@
 // import { CatalogRoleTagComponent } from '@/shared/catalog/roles';
-import { PosStore } from '@/domains/pos/pos.store';
+import { PosStore } from '@/domains/pos/store/pos.store';
 import { Component, computed, inject } from '@angular/core';
 import { PosGoodsComponent } from '../components/goods.component';
 import { PosOrderSectionComponent } from '../components/order/order-section.component';

src/app/domains/pos/store/index.ts

@@ -0,0 +1,2 @@
+export * from './me.store';
+export * from './pos.store';

src/app/domains/pos/store/me.store.ts

@@ -0,0 +1,49 @@
+import { defaultBaseStateData, EntityState, EntityStore } from '@/core/state';
+import { HttpErrorResponse } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+import { catchError, finalize, map } from 'rxjs';
+import { IPosProfileResponse } from '../models';
+import { PosService } from '../modules/landing/services/main.service';
+
+interface PosProfileState extends EntityState<IPosProfileResponse> {}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PosProfileStore extends EntityStore<IPosProfileResponse, PosProfileState> {
+  private readonly service = inject(PosService);
+
+  constructor() {
+    super({
+      ...defaultBaseStateData,
+    });
+  }
+
+  getData() {
+    this.patchState({ loading: true });
+    return this.service.getProfile().pipe(
+      finalize(() => {
+        this.patchState({ loading: false });
+      }),
+
+      catchError((err: HttpErrorResponse) => {
+        this.setError(err);
+        // if (err.status === 403) debugger;
+        throw err;
+      }),
+
+      map((entity: IPosProfileResponse) => {
+        if (entity) {
+          this.setEntity(entity);
+        }
+        return entity;
+      }),
+    );
+  }
+
+  override reset(): void {
+    this.setState({
+      ...defaultBaseStateData,
+    });
+  }
+}

src/app/domains/pos/store/pos.store.ts

@@ -4,8 +4,8 @@ import { computed, inject, Injectable } from '@angular/core';
 import { CookieService } from 'ngx-cookie-service';
 import { catchError, finalize, map } from 'rxjs';
 import { COOKIE_KEYS } from 'src/assets/constants';
-import { IPosInfoResponse } from './models/pos.io';
-import { PosService } from './modules/landing/services/main.service';
+import { IPosInfoResponse } from '../models/pos.io';
+import { PosService } from '../modules/landing/services/main.service';
 
 interface PosState extends EntityState<IPosInfoResponse> {
   posId: string;

src/app/domains/superAdmin/modules/consumers/views/single.component.html

@@ -1,6 +1,6 @@
 <div class="flex flex-col gap-6">
   <app-card-data cardTitle="اطلاعات مشتری" [editable]="true" [(editMode)]="editMode">
-    <ng-template #moreAction> </ng-template>
+    <ng-template #moreActions> </ng-template>
     <div class="flex flex-col gap-4">
       <div class="grid grid-cols-3 gap-4 items-center">
         <app-key-value label="نام مشتری" [value]="consumer()?.fullname" />

src/app/domains/superAdmin/modules/guilds/views/single.component.html

@@ -8,10 +8,10 @@
     </div>
   </app-card-data>
 
-  <div class="max-h-[500px] flex">
+  <div class="max-h-125 flex">
     <admin-guild-good-categories-list [guildId]="guildId()" class="w-full" />
   </div>
-  <div class="max-h-[500px] flex">
+  <div class="max-h-125 flex">
     <admin-guild-goods-list [guildId]="guildId()" class="w-full" />
   </div>
 

src/app/domains/superAdmin/modules/licenses/components/form.component.ts

@@ -16,7 +16,7 @@ export class LicenseFormComponent extends AbstractFormDialog<ILicenseRequest, IL
   private service = inject(LicensesService);
 
   form = this.fb.group({
-    name: [this.initialValues?.name || '', [Validators.required]],
+    name: ['', [Validators.required]],
   });
 
   override submitForm(payload: ILicenseRequest) {

src/app/domains/superAdmin/modules/licenses/models/io.d.ts

@@ -1,9 +1,27 @@
+import ISummary from '@/core/models/summary';
+
 export interface ILicenseRawResponse {
   id: string;
-  name: string;
+  starts_at: string;
+  expires_at: string;
+  consumer: Consumer;
+  license: License;
 }
 export interface ILicenseResponse extends ILicenseRawResponse {}
 
 export interface ILicenseRequest {
   name: string;
 }
+
+interface License {
+  id: string;
+  charged_license_transaction: {
+    partner: ISummary;
+  };
+}
+interface Consumer {
+  first_name: string;
+  last_name: string;
+  mobile_number: string;
+  status: string;
+}

src/app/domains/superAdmin/modules/licenses/views/list.component.ts

@@ -2,7 +2,7 @@
 import { AbstractList } from '@/shared/abstractClasses/abstract-list';
 import { PageDataListComponent } from '@/shared/components/pageDataList/page-data-list.component';
 import { Component, inject } from '@angular/core';
-import { ILicenseResponse } from '../models';
+import { ILicenseRawResponse, ILicenseResponse } from '../models';
 import { LicensesService } from '../services/main.service';
 
 @Component({
@@ -23,14 +23,15 @@ export class LicensesComponent extends AbstractList<ILicenseResponse> {
           return `${item.consumer.first_name} ${item.consumer.last_name}`;
         },
       },
-      { field: 'expires_at', header: 'تاریخ انقضا', type: 'date' },
       {
         field: 'partner',
         header: 'ارایه شده توسط',
-        customDataModel(item) {
-          return item.partner?.name || 'برند نرم‌افزار';
+        customDataModel(item: ILicenseRawResponse) {
+          return item.license.charged_license_transaction.partner.name || 'برند نرم‌افزار';
         },
       },
+      { field: 'expires_at', header: 'تاریخ انقضا', type: 'date' },
+      { field: 'created_at', header: 'تاریخ ایجاد', type: 'date' },
     ];
   }
 

src/app/domains/superAdmin/modules/partners/components/chargeLicenseTransactions/list.component.ts

@@ -17,9 +17,13 @@ export class AdminPartnerChargeLicenseTransactionListComponent extends AbstractL
 
   override setColumns(): void {
     this.columns = [
-      { field: 'id', header: 'شناسه', type: 'id' },
-      { field: 'charged_license_count', header: 'تعداد لایسنس خریداری شده' },
-      { field: 'remained_license_count', header: 'تعداد لایسنس فروخته نشده' },
+      { field: 'tracking_code', header: 'کد پیگیری' },
+      { field: 'charged_license_count', header: 'لایسنس‌های خریداری شده' },
+      { field: 'remained_license_count', header: 'لایسنس‌های باقی‌مانده' },
+      {
+        field: 'activated_license_count',
+        header: 'لایسنس‌های فروخته شده',
+      },
       {
         field: 'activation_expires_at',
         header: 'تاریخ انقضا',

src/app/domains/superAdmin/modules/partners/models/chargeLicenseTransactions_io.d.ts

@@ -1,8 +1,10 @@
 export interface IPartnerChargeLicenseTransactionRawResponse {
   id: string;
   created_at: string;
+  tracking_code: string;
   activation_expires_at: string;
   charged_license_count: number;
+  activated_license_count: number;
   remained_license_count: number;
 }
 export interface IPartnerChargeLicenseTransactionResponse extends IPartnerChargeLicenseTransactionRawResponse {}

src/app/domains/superAdmin/modules/partners/views/single.component.html

@@ -1,6 +1,6 @@
 <div class="flex flex-col gap-6">
   <app-card-data cardTitle="اطلاعات شریک تجاری" [editable]="true" [(editMode)]="editMode">
-    <ng-template #moreAction>
+    <ng-template #moreActions>
       <p-button outlined size="small" (onClick)="openChargeDialog()"> شارژ لایسنس‌ </p-button>
     </ng-template>
     <div class="flex flex-col gap-4">
@@ -22,15 +22,15 @@
     </div>
   </app-card-data>
 
-  <div class="max-h-[500px] flex">
+  <div class="max-h-125 flex">
     <admin-partner-licenses [partnerId]="partnerId()" class="w-full" />
   </div>
 
-  <div class="max-h-[500px] flex">
+  <div class="max-h-125 flex">
     <admin-partner-chargeLicenseTransaction-list [partnerId]="partnerId()" class="w-full" />
   </div>
 
-  <div class="max-h-[500px] flex">
+  <div class="max-h-125 flex">
     <superAdmin-partner-account-list [partnerId]="partnerId()" class="w-full" />
   </div>
 </div>

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

@@ -4,7 +4,7 @@
       <div class="flex items-center gap-10 justify-between">
         <h5 class="font-bold">{{ cardTitle }}</h5>
         <div class="flex items-center gap-2 shrink-0">
-          <ng-container [ngTemplateOutlet]="moreAction"></ng-container>
+          <ng-container [ngTemplateOutlet]="moreActions"></ng-container>
           @if (editable) {
             <button
               pButton

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

@@ -34,7 +34,7 @@ export class AppCardComponent {
   @Output() editModeChange = new EventEmitter<boolean>();
 
   @ContentChild('header', { static: true }) header?: Maybe<TemplateRef<any>>;
-  @ContentChild('moreAction', { static: true }) moreAction?: Maybe<TemplateRef<any>>;
+  @ContentChild('moreActions', { static: true }) moreActions?: Maybe<TemplateRef<any>>;
 
   // constructor() {
   //   if (this.editable) {

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

@@ -25,7 +25,12 @@ export class KeyValueComponent {
     | 'date'
     | 'dateTime'
     | 'duration'
+    | 'id'
+    | 'thumbnail'
+    | 'nested'
+    | 'index'
     | 'simple' = 'simple';
+
   @Input() trueValueToShow?: string;
   @Input() falseValueToShow?: string;
   @Input() variant?: 'badge' | 'text';

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

@@ -8,6 +8,8 @@
       columnResizeMode="fit"
       stripedRows
       [showFirstLastIcon]="false"
+      [expandedRowKeys]="expandedRows"
+      [dataKey]="dataKey"
       class="grow flex! flex-col overflow-hidden"
       [tableStyleClass]="!items.length && !loading ? 'h-full' : ''"
     >
@@ -55,10 +57,13 @@
           @if (actionsCount()) {
             <th type="th" [style]="{ width: `${actionsCount() * 2 + (actionsCount() - 1) * 0.25}rem` }"></th>
           }
+          @if (expandable) {
+            <th style="width: 3rem"></th>
+          }
         </tr>
       </ng-template>
 
-      <ng-template #body let-item let-i="rowIndex">
+      <ng-template #body let-item let-i="rowIndex" let-expanded="expanded">
         <tr>
           @for (col of columns; track col.field) {
             <td>
@@ -99,9 +104,121 @@
               (details)="details(item)"
             ></td>
           }
+
+          @if (expandable) {
+            <td>
+              <p-button
+                type="button"
+                pRipple
+                [pRowToggler]="item"
+                [text]="true"
+                [rounded]="true"
+                [plain]="true"
+                [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"
+              />
+            </td>
+          }
         </tr>
       </ng-template>
 
+      @if (expandable && expandColumns && expandableItemKey) {
+        <ng-template #expandedrow let-item>
+          <tr>
+            <td [attr.colspan]="columns.length + 1">
+              <div class="px-4">
+                @if (item[expandableItemKey]?.length) {
+                  <p-table
+                    [columns]="expandColumns || []"
+                    [scrollable]="true"
+                    [value]="item[expandableItemKey]"
+                    [loading]="loading"
+                    columnResizeMode="fit"
+                    stripedRows
+                    [showFirstLastIcon]="false"
+                    [expandedRowKeys]="expandedRows"
+                    class="grow flex! flex-col overflow-hidden"
+                    [tableStyleClass]="!item.items?.length && !loading ? 'h-full' : ''"
+                  >
+                    <ng-template #header let-columns>
+                      <tr>
+                        @for (col of expandColumns; track col.header) {
+                          <th
+                            [style]="
+                              col.type === 'index'
+                                ? { width: '3rem', minWidth: '3rem' }
+                                : { width: col.width, minWidth: col.minWidth }
+                            "
+                          >
+                            {{ col.header }}
+                          </th>
+                        }
+                      </tr>
+                    </ng-template>
+
+                    <ng-template #body let-item let-i="rowIndex">
+                      <tr>
+                        @for (col of expandColumns; track col.field) {
+                          <td>
+                            {{ item.name }}
+                            @if (col.type === "index") {
+                              {{ i * (currentPage || 1) + 1 }}
+                            } @else if (col.type === "thumbnail") {
+                              <div
+                                class="w-20 h-20 rounded-2xl overflow-hidden bg-surface-50 cursor-pointer"
+                                (click)="openThumbnailModal(item)"
+                              >
+                                @if (item[col.field]) {
+                                  <img [src]="item[col.field]" class="w-full h-full object-cover" />
+                                }
+                              </div>
+                            } @else 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 [class]="getPreviewClasses(item, col)">
+                                {{ getCell(item, col) }}
+                              </span>
+                            }
+                          </td>
+                        }
+                      </tr>
+                    </ng-template>
+
+                    <ng-template #emptymessage>
+                      <tr class="">
+                        <td [colSpan]="(expandColumns.length + 1).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>
+                  </p-table>
+                } @else {
+                  <div class="grid grid-cols-3 gap-4 py-2">
+                    @for (col of expandColumns; track $index) {
+                      <app-key-value
+                        [label]="col.header"
+                        [value]="item[expandableItemKey][col.field]"
+                        [type]="col.type || 'simple'"
+                      />
+                    }
+                  </div>
+                }
+              </div>
+            </td>
+          </tr>
+        </ng-template>
+      }
+
       <ng-template #emptymessage>
         <tr class="">
           <td [colSpan]="(columns.length + 1).toString()" class="w-full">

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

@@ -1,3 +1,4 @@
+import { Maybe } from '@/core';
 import { PaginatorComponent, UikitCopyComponent, UikitEmptyStateComponent } from '@/uikit';
 import { formatJalali, formatWithCurrency, jalaliDiff } from '@/utils';
 import { CommonModule } from '@angular/common';
@@ -18,6 +19,7 @@ import { DrawerModule } from 'primeng/drawer';
 import { PaginatorModule } from 'primeng/paginator';
 import { SkeletonModule } from 'primeng/skeleton';
 import { TableModule } from 'primeng/table';
+import { KeyValueComponent } from '../key-value.component/key-value.component';
 import { TableActionRowComponent } from '../table-action-row.component';
 
 export interface IColumn<T = any> {
@@ -26,7 +28,7 @@ export interface IColumn<T = any> {
   width?: string;
   minWidth?: string;
   canCopy?: boolean;
-  type?: 'text' | 'price' | 'boolean' | 'date' | 'nested' | 'index' | 'id' | 'thumbnail';
+  type?: 'simple' | 'price' | 'boolean' | 'date' | 'nested' | 'index' | 'id' | 'thumbnail';
   nestedPath?: string;
   thumbnailOptions?: {
     editable: boolean;
@@ -58,6 +60,7 @@ export interface IColumn<T = any> {
     DrawerModule,
     PaginatorComponent,
     UikitCopyComponent,
+    KeyValueComponent,
   ],
 })
 export class PageDataListComponent<I> {
@@ -84,10 +87,15 @@ export class PageDataListComponent<I> {
   @Input() isFiltered: boolean = false;
   @Input() fullHeight?: boolean = false;
   @Input() height: string = '';
+  @Input() expandable?: boolean = false;
+  @Input() expandableItemKey?: string = '';
+  @Input() expandColumns?: Maybe<IColumn[]> = null;
+  @Input() dataKey?: string = 'items';
 
   @ContentChild('filter', { static: true }) filter!: TemplateRef<any> | null;
   @ContentChild('caption', { static: true }) caption!: TemplateRef<any> | null;
   @ContentChild('moreActions', { static: true }) moreActions!: TemplateRef<any> | null;
+  @ContentChild('expandableTemp', { static: false }) expandableTemp!: TemplateRef<any> | null;
 
   @Output() onEdit = new EventEmitter<I>();
   @Output() onDelete = new EventEmitter<I>();
@@ -97,6 +105,7 @@ export class PageDataListComponent<I> {
   @Output() onThumbnailClick = new EventEmitter<I>();
 
   filterDrawerVisible = signal<boolean>(false);
+  expandedRows: { [key: string]: boolean } = {};
 
   ngOnInit() {
     if (this.height)