update ux writing

src/app/components/pos-display/pos-display.component.html

@@ -6,7 +6,7 @@
   </ng-template>
 
   <div class="flex flex-col gap-4">
-    <div class="grid grid-cols-3 gap-4 items-center">
+    <div class="listKeyValue">
       @for (field of visibleFields(); track field) {
         @if (isFieldVisible(field)) {
           <app-key-value [label]="fieldLabels[field]" [value]="getFieldValue(field)" />

src/app/domains/consumer/constants/menuItems.const.ts

@@ -23,7 +23,7 @@ export const CONSUMER_MENU_ITEMS = [
         routerLink: ['/consumer/sale_invoices'],
       },
       {
-        label: 'مشتریان',
+        label: 'مشتری‌ها',
         icon: 'pi pi-fw pi-home',
         routerLink: ['/consumer/customers'],
       },

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

@@ -1,7 +1,7 @@
 <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">
+      <div class="listKeyValue">
         <app-key-value label="نام کاربری" [value]="account()?.account?.username" />
       </div>
     </div>

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

@@ -35,7 +35,7 @@ export class ConsumerBusinessActivityListComponent extends AbstractList<IBusines
     },
     {
       field: 'license_info',
-      header: 'انقضای مجوز',
+      header: 'انقضا مجوز',
       type: 'nested',
       nestedOption: { path: 'license_info.expires_at', type: 'date' },
     },

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

@@ -1,7 +1,7 @@
 <div class="flex flex-col gap-6">
   <app-card-data cardTitle="اطلاعات شعبه" [editable]="true" [(editMode)]="editMode">
     <div class="flex flex-col gap-4">
-      <div class="grid grid-cols-3 gap-4 items-center">
+      <div class="listKeyValue">
         <app-key-value label="عنوان" [value]="complex()?.name" />
         <app-key-value label="کد شعبه" [value]="complex()?.branch_code" />
         <app-key-value label="آدرس" [value]="complex()?.address" />

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

@@ -4,13 +4,13 @@
       <a routerLink pButton [routerLink]="goodsPageRoute()" outlined>مدیریت کالاها</a>
     </ng-template>
     <div class="flex flex-col gap-4">
-      <div class="grid grid-cols-3 gap-4 items-center">
+      <div class="listKeyValue">
         <app-key-value label="عنوان" [value]="business()?.name" />
         <app-key-value label="کد اقتصادی" [value]="business()?.economic_code" />
         <app-key-value label="صنف" [value]="business()?.guild?.name" />
       </div>
       <p-divider align="center">اطلاعات لایسنس</p-divider>
-      <div class="grid grid-cols-3 gap-4 items-center">
+      <div class="listKeyValue">
         <app-key-value label="تاریخ پایان لایسنس" [value]="business()?.license_info?.expires_at" type="date" />
         <app-key-value label="محدودیت کاربر" [value]="business()?.license_info?.accounts_limit" />
         <app-key-value label="تعداد کاربران ایجاد شده" [value]="business()?.license_info?.allocated_account_count" />

src/app/domains/consumer/modules/customers/components/list.component.html

@@ -1,5 +1,5 @@
 <app-page-data-list
-  [pageTitle]="'لیست مشتریان'"
+  [pageTitle]="'لیست مشتری‌ها'"
   [columns]="columns"
   emptyPlaceholderTitle="مشتری‌ای یافت نشد"
   [items]="items()"

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

@@ -10,7 +10,7 @@ export const consumerCustomersNamedRoutes: NamedRoutes<TConsumerCustomersRouteNa
     loadComponent: () =>
       import('../../views/list.component').then((m) => m.ConsumerCustomersComponent),
     meta: {
-      title: 'مشتریان',
+      title: 'مشتری‌ها',
       pagePath: () => 'consumer/customers',
     },
   },

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

@@ -6,14 +6,14 @@
   >
     <div class="flex flex-col gap-4">
       @if (customer()?.type === "LEGAL") {
-        <div class="grid grid-cols-3 gap-4 items-center">
+        <div class="listKeyValue">
           <app-key-value label="عنوان" [value]="customer()?.legal?.company_name" />
           <app-key-value label="کد اقتصادی" [value]="customer()?.legal?.economic_code" />
           <app-key-value label="شماره ثبت" [value]="customer()?.legal?.registration_number" />
           <app-key-value label="کد پستی" [value]="customer()?.legal?.postal_code" />
         </div>
       } @else if (customer()?.type === "INDIVIDUAL") {
-        <div class="grid grid-cols-3 gap-4 items-center">
+        <div class="listKeyValue">
           <app-key-value label="نام" [value]="customer()?.individual?.first_name" />
           <app-key-value label="نام خانوادگی" [value]="customer()?.individual?.last_name" />
           <app-key-value label="عنوان" [value]="customer()?.individual?.national_id" />

src/app/domains/partner/constants/menuItems.const.ts

@@ -13,7 +13,7 @@ export const PARTNER_MENU_ITEMS = [
         routerLink: ['/partner/accounts'],
       },
       {
-        label: 'مشتریان',
+        label: 'مشتری‌ها',
         icon: 'pi pi-fw pi-home',
         routerLink: ['/partner/consumers'],
       },

src/app/domains/partner/modules/accounts/views/single.component.html

@@ -1,7 +1,7 @@
 <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">
+      <div class="listKeyValue">
         <app-key-value label="نام کاربری" [value]="account()?.account?.username" />
         <app-key-value label="نقش" [value]="account()?.role" />
         <app-key-value label="وضعیت" [value]="account()?.account?.status" />

src/app/domains/partner/modules/consumers/components/accounts/list.component.ts

@@ -25,10 +25,10 @@ export class ConsumerAccountListComponent extends AbstractList<IConsumerAccountR
       type: 'nested',
       nestedOption: { path: 'account.username' },
     },
-    { field: 'role', header: 'نوع حساب' },
+    { field: 'role', header: 'نوع حساب', type: 'nested', nestedOption: { path: 'role.translate' } },
     {
       field: 'pos',
-      header: 'پایانه‌ی مرتبط',
+      header: 'پایانه‌',
       customDataModel(item: IConsumerAccountResponse) {
         if (item.pos) {
           return `${item.pos.name} (${item.pos.complex.name} - ${item.pos.complex.business_activity.name})`;
@@ -40,7 +40,7 @@ export class ConsumerAccountListComponent extends AbstractList<IConsumerAccountR
       field: 'status',
       header: 'وضعیت',
       type: 'nested',
-      nestedOption: { path: 'account.status' },
+      nestedOption: { path: 'account.status.translate' },
     },
     // {
     //   field: 'created_at',

src/app/domains/partner/modules/consumers/components/businessActivities/list.component.ts

@@ -25,7 +25,6 @@ export class ConsumerBusinessActivitiesComponent extends AbstractList<IBusinessA
   @Input({ required: true }) consumerId!: string;
   @Input() fullHeight?: boolean;
   @Input() header: IColumn[] = [
-    { field: 'id', header: 'شناسه', type: 'id' },
     { field: 'name', header: 'عنوان' },
     { field: 'guild', header: 'صنف', type: 'nested', nestedOption: { path: 'guild.name' } },
     { field: 'economic_code', header: 'کد اقتصادی' },
@@ -42,15 +41,10 @@ export class ConsumerBusinessActivitiesComponent extends AbstractList<IBusinessA
     },
     {
       field: 'license_info',
-      header: 'انقضای مجوز',
+      header: 'انقضا مجوز',
       type: 'nested',
       nestedOption: { path: 'license_info.expires_at', type: 'date' },
     },
-    {
-      field: 'created_at',
-      header: 'تاریخ ایجاد',
-      type: 'date',
-    },
   ];
 
   private readonly service = inject(PartnerConsumerBusinessActivitiesService);

src/app/domains/partner/modules/consumers/constants/routes/index.ts

@@ -10,7 +10,7 @@ export const partnerConsumersNamedRoutes: NamedRoutes<TConsumersRouteNames> = {
     path: 'consumers',
     loadComponent: () => import('../../views/list.component').then((m) => m.ConsumersComponent),
     meta: {
-      title: 'مشتریان',
+      title: 'مشتری‌ها',
       pagePath: () => '/partner/consumers',
     },
   },

src/app/domains/partner/modules/consumers/views/businessActivities/single.component.html

@@ -1,10 +1,10 @@
 <div class="flex flex-col gap-6">
   <app-card-data cardTitle="اطلاعات فعالیت اقتصادی" [editable]="true" [(editMode)]="editMode">
     <ng-template #moreActions>
-      <button pButton outlined (click)="showAccountsChargeDialog()">افزایش محدودیت کاربر</button>
+      <button pButton outlined (click)="showAccountsChargeDialog()">شارژ کاربر</button>
     </ng-template>
     <div class="flex flex-col gap-4">
-      <div class="grid grid-cols-3 gap-4 items-center">
+      <div class="listKeyValue">
         <app-key-value label="عنوان" [value]="businessActivity()?.name" />
         <app-key-value label="کد اقتصادی" [value]="businessActivity()?.economic_code" />
         <app-key-value label="صنف" [value]="businessActivity()?.guild?.name" />

src/app/domains/partner/modules/consumers/views/complexes/single.component.html

@@ -1,7 +1,7 @@
 <div class="flex flex-col gap-6">
   <app-card-data cardTitle="اطلاعات شعبه" [editable]="true" [(editMode)]="editMode">
     <div class="flex flex-col gap-4">
-      <div class="grid grid-cols-3 gap-4 items-center">
+      <div class="listKeyValue">
         <app-key-value label="عنوان" [value]="complex()?.name" />
         <app-key-value label="کد شعبه" [value]="complex()?.branch_code" />
         <app-key-value label="آدرس" [value]="complex()?.address" />

src/app/domains/partner/modules/consumers/views/list.component.html

@@ -1,5 +1,5 @@
 <app-page-data-list
-  pageTitle="مدیریت مشتریان"
+  pageTitle="لیست مشتری‌ها"
   [addNewCtaLabel]="'افزودن مشتری جدید'"
   [columns]="columns"
   [showAdd]="true"

src/app/domains/partner/modules/consumers/views/list.component.ts

@@ -12,11 +12,7 @@ import { ConsumersService } from '../services/main.service';
 @Component({
   selector: 'partner-consumers',
   templateUrl: './list.component.html',
-  imports: [
+  imports: [PageDataListComponent, ConsumerUserFormDialogComponent, CreateConsumerWrapperComponent],
-    PageDataListComponent,
-    ConsumerUserFormDialogComponent,
-    CreateConsumerWrapperComponent,
-  ],
 })
 export class ConsumersComponent extends AbstractList<IPartnerConsumerResponse> {
   private readonly service = inject(ConsumersService);
@@ -25,9 +21,9 @@ export class ConsumersComponent extends AbstractList<IPartnerConsumerResponse> {
 
   override setColumns(): void {
     this.columns = [
-      { field: 'id', header: 'شناسه', type: 'id' },
       { field: 'name', header: 'نام' },
-      { field: 'business_counts', header: 'تعداد فعالیت‌های اقتصادی فعال' },
+      { field: 'type', header: 'نوع', type: 'nested', nestedOption: { path: 'type.translate' } },
+      { field: 'business_counts', header: 'تعداد فعالیت‌ اقتصادی فعال' },
 
       {
         field: 'created_at',

src/app/domains/partner/modules/consumers/views/poses/single.component.html

@@ -1,7 +1,7 @@
 <div class="flex flex-col gap-6">
   <app-card-data cardTitle="اطلاعات پایانه‌ فروش" [editable]="true" [(editMode)]="editMode">
     <div class="flex flex-col gap-4">
-      <div class="grid grid-cols-3 gap-4 items-center">
+      <div class="listKeyValue">
         <app-key-value label="عنوان" [value]="pos()?.name" />
       </div>
     </div>

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

@@ -2,23 +2,22 @@
   <app-card-data cardTitle="اطلاعات مشتری" [editable]="true" [(editMode)]="editMode">
     <ng-template #moreActions> </ng-template>
     <div class="flex flex-col gap-4">
-      <div class="grid grid-cols-3 gap-4 items-center">
+      <div class="listKeyValue">
         <app-key-value label="نام مشتری" [value]="consumer()?.name" />
-        <app-key-value label="وضعیت" [value]="consumer()?.status?.translate" />
         <app-key-value label="نوع مشتری" [value]="consumer()?.type?.translate" />
-
         @if (consumer()?.type?.value === "LEGAL") {
           <app-key-value label="شناسه ملی" [value]="consumer()?.legal?.registration_code" />
         } @else {
           <app-key-value label="شماره موبایل" [value]="consumer()?.individual?.mobile_number" />
           <app-key-value label="کد ملی" [value]="consumer()?.individual?.national_code" />
         }
+        <app-key-value label="وضعیت" [value]="consumer()?.status?.translate" />
       </div>
     </div>
   </app-card-data>
 
-  <partner-consumer-account-list [consumerId]="consumerId()" />
   <partner-consumer-businessActivities-list [consumerId]="consumerId()" />
+  <partner-consumer-account-list [consumerId]="consumerId()" />
 
   <partner-consumer-form
     [(visible)]="editMode"

src/app/domains/partner/modules/customers/components/list.component.html

@@ -1,5 +1,5 @@
 <app-page-data-list
-  [pageTitle]="'لیست مشتریان'"
+  [pageTitle]="'لیست مشتری‌ها'"
   [columns]="columns"
   emptyPlaceholderTitle="مشتری‌ای یافت نشد"
   [items]="items()"

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

@@ -9,7 +9,7 @@ export const partnerCustomersNamedRoutes: NamedRoutes<TPartnerCustomersRouteName
     loadComponent: () =>
       import('../../views/list.component').then((m) => m.PartnerCustomersComponent),
     meta: {
-      title: 'مشتریان',
+      title: 'مشتری‌ها',
       pagePath: () => 'partner/customers',
     },
   },

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

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

src/app/domains/partner/modules/dashboard/components/licenseInfo/license-info-template.component.html

@@ -1,6 +1,7 @@
 <p-card class="border border-surface-border bg-surface-card rounded-2xl p-4 text-text-color">
-  <div class="text-center w-full flex items-center justify-center gap-1">
+  <div class="w-full flex items-center justify-between gap-1">
     <span class="text-xl font-semibold">وضعیت {{ title }}</span>
+    <p-badge [value]="`تعداد کل: ${total}`" severity="secondary" size="large"></p-badge>
   </div>
   <hr class="mb-6!" />
   <div class="grid grid-cols-3 gap-2">

src/app/domains/partner/modules/dashboard/components/licenseInfo/license-info-template.component.ts

@@ -1,10 +1,11 @@
 import { Component, Input } from '@angular/core';
+import { Badge } from 'primeng/badge';
 import { Card } from 'primeng/card';
 
 @Component({
   selector: 'partner-license-info-template',
   templateUrl: './license-info-template.component.html',
-  imports: [Card],
+  imports: [Card, Badge],
 })
 export class PartnerLicenseInfoTemplateComponent {
   @Input({ required: true }) title!: string;

src/app/domains/partner/modules/licenses/components/list.component.html

@@ -1,5 +1,5 @@
 <app-page-data-list
-  [pageTitle]="'مدیریت لایسنس‌ها'"
+  [pageTitle]="'لیست لایسنس‌ها'"
   [columns]="columns"
   emptyPlaceholderTitle="تا به حال لایسنسی نفروخته‌اید."
   [currentPage]="responseMetaData()?.page"

src/app/domains/superAdmin/constants/menuItems.const.ts

@@ -9,7 +9,7 @@ export const SUPER_ADMIN_MENU_ITEMS = [
         routerLink: ['/'],
       },
       {
-        label: 'مشتریان',
+        label: 'مشتری‌ها',
         icon: 'pi pi-fw pi-user',
         routerLink: ['/super_admin/consumers'],
       },

src/app/domains/superAdmin/modules/consumers/constants/routes/index.ts

@@ -10,7 +10,7 @@ export const superAdminConsumersNamedRoutes: NamedRoutes<TConsumersRouteNames> =
     path: 'consumers',
     loadComponent: () => import('../../views/list.component').then((m) => m.ConsumersComponent),
     meta: {
-      title: 'مشتریان',
+      title: 'مشتری‌ها',
       pagePath: () => '/super_admin/consumers',
     },
   },

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

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

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

@@ -1,7 +1,7 @@
 <div class="flex flex-col gap-6">
   <app-card-data cardTitle="اطلاعات شعبه" [editable]="true" [(editMode)]="editMode">
     <div class="flex flex-col gap-4">
-      <div class="grid grid-cols-3 gap-4 items-center">
+      <div class="listKeyValue">
         <app-key-value label="عنوان" [value]="complex()?.name" />
         <app-key-value label="کد شعبه" [value]="complex()?.branch_code" />
         <app-key-value label="آدرس" [value]="complex()?.address" />

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

@@ -1,5 +1,5 @@
 <app-page-data-list
-  pageTitle="مدیریت مشتریان"
+  pageTitle="مدیریت مشتری‌ها"
   [columns]="columns"
   emptyPlaceholderTitle="مشتری‌ای یافت نشد"
   [items]="items()"

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

@@ -1,7 +1,7 @@
 <div class="flex flex-col gap-6">
   <app-card-data cardTitle="اطلاعات پایانه‌ فروش" [editable]="true" [(editMode)]="editMode">
     <div class="flex flex-col gap-4">
-      <div class="grid grid-cols-3 gap-4 items-center">
+      <div class="listKeyValue">
         <app-key-value label="عنوان" [value]="pos()?.name" />
       </div>
     </div>

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

@@ -2,7 +2,7 @@
   <app-card-data cardTitle="اطلاعات مشتری" [editable]="true" [(editMode)]="editMode">
     <ng-template #moreActions> </ng-template>
     <div class="flex flex-col gap-4">
-      <div class="grid grid-cols-3 gap-4 items-center">
+      <div class="listKeyValue">
         <app-key-value label="نام مشتری" [value]="consumer()?.name" />
         <app-key-value label="وضعیت" [value]="consumer()?.status?.translate" />
         <app-key-value label="نوع مشتری" [value]="consumer()?.type?.translate" />

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

@@ -1,7 +1,7 @@
 <div class="flex flex-col gap-6">
   <app-card-data cardTitle="اطلاعات صنف" [editable]="true" [(editMode)]="editMode">
     <div class="flex flex-col gap-4">
-      <div class="grid grid-cols-3 gap-4 items-center">
+      <div class="listKeyValue">
         <app-key-value label="عنوان صنف" [value]="guild()?.name" />
         <app-key-value label="کد صنف" [value]="guild()?.code" />
       </div>

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

@@ -1,5 +1,5 @@
 <app-page-data-list
-  [pageTitle]="'مدیریت لایسنس‌ها'"
+  [pageTitle]="'لیست لایسنس‌ها'"
   [columns]="columns"
   emptyPlaceholderTitle="لایسنسی یافت نشد"
   [items]="items()"

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

@@ -15,7 +15,6 @@ export class LicensesComponent extends AbstractList<ILicenseResponse> {
 
   override setColumns(): void {
     this.columns = [
-      { field: 'id', header: 'شناسه', type: 'id' },
       {
         field: 'consumer',
         header: 'مشتری',

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

@@ -5,7 +5,7 @@
       <p-button outlined size="small" (onClick)="openChargeDialog()"> شارژ لایسنس‌ </p-button>
     </ng-template>
     <div class="flex flex-col gap-4">
-      <div class="grid grid-cols-3 gap-4 items-center">
+      <div class="listKeyValue">
         <app-key-value label="عنوان شریک تجاری" [value]="partner()?.name" />
         <app-key-value label="کد شریک تجاری" [value]="partner()?.code" />
 

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

@@ -1,7 +1,7 @@
 <div class="flex flex-col gap-6">
   <app-card-data cardTitle="اطلاعات کاربر" [editable]="true" [(editMode)]="editMode">
     <div class="flex flex-col gap-4">
-      <div class="grid grid-cols-3 gap-4 items-center">
+      <div class="listKeyValue">
         <app-key-value label="نام" [value]="user()?.fullname" />
         <app-key-value label="شماره تماس" [value]="user()?.mobile_number" />
       </div>

src/app/layout/default/app.sidebar.component.html

@@ -4,7 +4,7 @@
   </div>
   <div class="shrink-0 sticky bottom-0">
     <div class="py-2 w-full text-center">
-      <span class="text-muted-color text-sm font-bold">ارایه شده توسط (برند نرم‌افزار)</span>
+      <span class="text-muted-color text-sm font-medium">ارایه شده توسط (برند نرم‌افزار)</span>
     </div>
   </div>
 </div>

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

@@ -47,13 +47,13 @@
             <hr />
             <div class="flex justify-center gap-2 mt-2">
               @if (showEdit) {
-                <p-button icon="pi pi-pencil" label="ویرایش" size="small" (click)="edit(item)"> </p-button>
+                <p-button icon="pi pi-pencil" label="ویرایش" size="small" outlined (click)="edit(item)"> </p-button>
               }
               @if (showDelete) {
-                <p-button icon="pi pi-trash" label="حذف" size="small" (click)="remove(item)"> </p-button>
+                <p-button icon="pi pi-trash" label="حذف" size="small" outlined (click)="remove(item)"> </p-button>
               }
               @if (showDetails) {
-                <p-button icon="pi pi-eye" label="مشاهده" size="small" (click)="details(item)"> </p-button>
+                <p-button icon="pi pi-eye" label="مشاهده" size="small" outlined (click)="details(item)"> </p-button>
               }
             </div>
           }

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

@@ -13,7 +13,7 @@
     [tableStyleClass]="!items.length && !loading ? 'h-full' : ''"
   >
     @if (captionBox) {
-      <ng-template pTemplate="caption">
+      <ng-template #caption>
         <ng-container [ngTemplateOutlet]="captionBox"> </ng-container>
       </ng-template>
     }

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

@@ -17,8 +17,8 @@
       (onDelete)="remove($event)"
       (onDetails)="details($event)"
     >
-      @if (pageTitle || showAdd || filter || caption || showRefresh || moreActions) {
       <ng-template #captionBox>
+        @if (pageTitle || showAdd || filter || caption || showRefresh || moreActions) {
           <ng-container [ngTemplateOutlet]="caption">
             <div class="flex justify-between items-center gap-4">
               <h5 class="font-bold">{{ pageTitle }}</h5>
@@ -51,8 +51,8 @@
               }
             </div>
           </ng-container>
-        </ng-template>
         }
+      </ng-template>
       <ng-template #emptyMessageCard>
         <uikit-empty-state
           [title]="emptyPlaceholderTitle"
@@ -90,8 +90,8 @@
       (onDelete)="remove($event)"
       (onDetails)="details($event)"
     >
-      @if (pageTitle || showAdd || filter || caption || showRefresh || moreActions) {
       <ng-template #captionBox>
+        @if (pageTitle || showAdd || filter || caption || showRefresh || moreActions) {
           <ng-container [ngTemplateOutlet]="caption">
             <div class="flex justify-between items-center gap-4">
               <h5 class="font-bold">{{ pageTitle }}</h5>
@@ -117,15 +117,17 @@
                       label="{{ addNewCtaLabel }}"
                       icon="pi pi-plus"
                       size="small"
+                      class="max-sm:hidden"
                       (click)="openAddForm()"
                     ></p-button>
+                    <p-button icon="pi pi-plus" size="small" class="sm:hidden" (click)="openAddForm()"></p-button>
                   }
                 </div>
               }
             </div>
           </ng-container>
-        </ng-template>
         }
+      </ng-template>
       <ng-template #emptyMessageCard>
         <uikit-empty-state
           [title]="emptyPlaceholderTitle"

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

@@ -20,6 +20,6 @@
     />
   }
   @if (showDetails) {
-    <p-button size="small" icon="pi pi-chevron-left" (click)="details.emit()" title="جزئیات" />
+    <p-button size="small" icon="pi pi-chevron-left" (click)="details.emit()" [title]="showDetailsText" />
   }
 </td>

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

@@ -1,5 +1,5 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { Button } from 'primeng/button';
 
 @Component({
@@ -12,6 +12,7 @@ export class TableActionRowComponent {
   @Input() showEdit = false;
   @Input() showDelete = false;
   @Input() showDetails = false;
+  @Input() showDetailsText: string = 'جزییات';
 
   @Output() edit = new EventEmitter<void>();
   @Output() delete = new EventEmitter<void>();