-เชื่อมโยง api search กับ frontend

-ปรับปรุงระบบ state
-เพิ่ม ระบบ pipe dtmtodatetime

accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.html

@@ -125,22 +125,51 @@
           <span>ยอดเงิน</span>
           <span>บันทึก</span>
         </div>
-        <div class="ledger-row" *ngFor="let idx of ledgerEntries; let i = index;">
-          <div class="ledger-main">
-            <span class="pill" [ngClass]="idx.type == 'i' ? 'pill--income' : 'pill--expense'">
-              {{ idx.type == 'i' ? 'รับ' : 'จ่าย' }}
-            </span>
-            <div>
-              <p class="ledger-title">{{ idx.title }}</p>
-              <p class="ledger-date">{{ idx.date }}</p>
+      <!-- @for (idx of myActData; track i; let i = $index) {
+          <div class="ledger-row">
+            <div class="ledger-main">
+              <span class="pill" [ngClass]="idx.acttyp === 'i' ? 'pill--income' : 'pill--expense'">
+                {{ idx.type === 'i' ? 'รับ' : 'จ่าย' }}
+              </span>
+
+              <div>
+                <p class="ledger-title">{{ idx.title }}</p>
+                <p class="ledger-date">{{ idx.date }}</p>
+              </div>
             </div>
+
+            <span class="ledger-category">{{ idx.category }}</span>
+
+            <span class="ledger-amount" [ngClass]="idx.type === 'i' ? 'is-credit' : 'is-debit'">
+              {{ idx.amount }}
+            </span>
+
+            <span class="ledger-note">{{ idx.note }}</span>
           </div>
-          <span class="ledger-category">{{ idx.category }}</span>
-          <span class="ledger-amount" [ngClass]="idx.type == 'i' ? 'is-credit' : 'is-debit'">
-            {{ idx.amount }}
-          </span>
-          <span class="ledger-note">{{ idx.note }}</span>
-        </div>
+        } -->
+          @for (idx of myActData; track idx.actseq; let i = $index) {
+            <div class="ledger-row">
+
+              <div class="ledger-main">
+                <span class="pill" [ngClass]="idx.acttyp === 'i' ? 'pill--income' : 'pill--expense'">
+                  {{ idx.acttyp === 'i' ? 'รับ' : 'จ่าย' }}
+                </span>
+
+                <div>
+                  <p class="ledger-title">{{ idx.acttypnam }}</p>
+                  <p class="ledger-date">{{ (idx.actacpdtm ?? '') | dtmtodatetime }}</p>
+                </div>
+              </div>
+
+              <span class="ledger-category">{{ idx.actcatnam }}</span>
+
+              <span class="ledger-amount" [ngClass]="idx.acttyp === 'i' ? 'is-credit' : 'is-debit'">
+                {{ idx.actqty }}
+              </span>
+
+              <span class="ledger-note">{{ idx.actcmt }}</span>
+            </div>
+          }
       </div>
     </article>
   </section>

accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.ts

@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { GeneralService } from '../../services/generalservice';
-import { IDropAct, IStateDrop, IStateResultResponse } from '../../interfaces/dashboard.interface'
+import { IDropAct, IStateDrop, IStateResultResponse, IActData } from '../../interfaces/dashboard.interface'
 import { DashboardStateService } from '../../services/state/dashboard-state.service';
 
 @Component({
@@ -17,6 +17,7 @@ export class MainDashboardComponent implements OnInit {
   isSubmitting: boolean = false;
   arrearsForm!: FormGroup;
   saveFrm!: FormGroup;
+  myActData: IActData[] = [];
   // myDropAct: IStateDrop[] = [];
   myDropAct: IStateDrop = { income: [], expense: [] };
 
@@ -191,6 +192,12 @@ export class MainDashboardComponent implements OnInit {
         this.myDropAct = data;
       }
     });
+
+    this.dashboardStateService.getStateAccountResult().subscribe(data => {
+      if (data) {
+        this.myActData = data;
+      }
+    });
   }
 
   setupFormControl(){