feat: add expandable rows and accordion details to grid and table views

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

@@ -1,4 +1,4 @@
-<div class="h-full overflow-auto border border-surface-border cardShadow">
+<div [ngClass]="{ 'h-full overflow-auto': true, 'border border-surface-border cardShadow': hasCaption }">
   <div
     [ngClass]="{
       'px-4': hasCaption,
@@ -14,7 +14,7 @@
     <div class="grid grid-cols-1 gap-3" [ngClass]="{ 'pt-4': hasCaption }">
       @for (item of items; track `gridView_${$index}`) {
         <div class="card border border-surface-border bg-surface-0! mb-0! rounded-2xl p-4!">
-          <div class="listKeyValue">
+          <div [ngClass]="{ listKeyValue: true, 'mb-2': expandable }">
             @for (col of columns; track `gridView_${col.field.toString()}_${$index}`) {
               @if (col.type !== "index") {
                 <app-key-value [label]="col.header" [variant]="col.variant">
@@ -23,6 +23,35 @@
               }
             }
           </div>
+          @if (expandable) {
+            <p-accordion [unstyled]="true" [value]="['0']">
+              <p-accordion-panel value="0" class="border! rounded-lg! overflow-hidden">
+                <p-accordion-header class="bg-surface-200! text-text-color! py-2!">
+                  <ng-template #toggleicon let-active="active">
+                    <div class="flex items-center gap-4 w-full">
+                      <i [ngClass]="{ 'pi pi-chevron-left text-xs! transition': true, '-rotate-90': active }"></i>
+                      جزییات بیشتر
+                    </div>
+                  </ng-template>
+                </p-accordion-header>
+                <p-accordion-content>
+                  <div class="listKeyValue pt-4">
+                    @for (col of expandColumns; track `gridView_expand_${col.field.toString()}_${$index}`) {
+                      @if (col.type !== "index") {
+                        <app-key-value [label]="col.header" [variant]="col.variant">
+                          <app-page-data-value
+                            [item]="item[expandableItemKey!]"
+                            [column]="col"
+                            (thumbnailClick)="openThumbnailModal($event)"
+                          />
+                        </app-key-value>
+                      }
+                    }
+                  </div>
+                </p-accordion-content>
+              </p-accordion-panel>
+            </p-accordion>
+          }
           @if (showEdit || showDelete || showDetails) {
             <hr class="my-2" />
             <div class="flex justify-center gap-2 mt-4">