micro-frontend/accounting-ng-nuttakit/src/app/component/main-report/main-report.component.html

<section class="report">
  <header class="report__header">
    <div>
      <p class="eyebrow">สรุปรายงาน</p>
      <h1>รายงานรายรับรายจ่าย</h1>
      <p class="muted">ช่วงวันที่ {{ reportRange.start }} - {{ reportRange.end }}</p>
    </div>
    <div class="report__actions">
      <button class="btn btn--ghost">ส่งออกเป็น Excel</button>
      <button class="btn btn--primary" (click)="openPreview()">ปริ้นรายงาน</button>
    </div>
  </header>

  <section class="summary-grid">
    <article class="summary-card" *ngFor="let card of summaryCards">
      <p class="summary-card__label">{{ card.label }}</p>
      <h2>{{ card.value }}</h2>
      <p class="summary-card__detail">{{ card.detail }}</p>
      <span class="summary-card__tone" [ngClass]="'tone-' + card.tone"></span>
    </article>
  </section>

  <section class="report__content">
    <article class="panel">
      <div class="panel__header">
        <div>
          <h2>สมุดรายวัน</h2>
          <p>บันทึกรายรับรายจ่ายทั้งหมดในช่วงเวลา</p>
        </div>
        <button class="btn btn--compact btn--ghost">กรองข้อมูล</button>
      </div>
      <div class="table">
        <div class="table__head">
          <span>วันที่</span>
          <span>เลขที่เอกสาร</span>
          <span>หัวข้อ</span>
          <span>หมวดหมู่</span>
          <span class="amount-col">ยอดเงิน</span>
        </div>
        <div class="table__row" *ngFor="let record of formattedRecords">
          <span>{{ record.date }}</span>
          <span class="mono">{{ record.doc }}</span>
          <span>
            <strong>{{ record.topic }}</strong>
            <small class="muted">{{ record.type === 'income' ? 'รายรับ' : 'รายจ่าย' }}</small>
          </span>
          <span>{{ record.category }}</span>
          <span class="amount-col" [ngClass]="record.tone">{{ record.displayAmount }}</span>
        </div>
      </div>
    </article>

    <article class="panel pie-panel">
      <div class="panel__header">
        <div>
          <h2>สัดส่วนค่าใช้จ่าย</h2>
          <p>เปรียบเทียบหมวดหลักของรายจ่ายเดือนนี้</p>
        </div>
      </div>
      <div class="pie-panel__content">
        <div class="pie-chart" [style.background]="expenseGradient">
          <div class="pie-chart__center">
            <p>รวมรายจ่าย</p>
            <strong>฿732K</strong>
          </div>
        </div>
        <ul class="pie-legend">
          <li *ngFor="let part of expenseBreakdown">
            <span class="swatch" [style.background]="part.color"></span>
            <div>
              <p class="legend-label">{{ part.label }}</p>
              <p class="legend-value">{{ part.value }}%</p>
            </div>
          </li>
        </ul>
      </div>
    </article>
  </section>
</section>

<section class="preview-modal" *ngIf="printPreviewOpen">
  <div class="preview-modal__backdrop" (click)="closePreview()"></div>
  <div class="preview-modal__content">
    <header class="preview-modal__header">
      <div>
        <p class="eyebrow">Print Preview</p>
        <h2>รายงานรายรับรายจ่าย</h2>
        <p class="muted">ช่วงวันที่ {{ reportRange.start }} - {{ reportRange.end }}</p>
      </div>
      <div class="preview-modal__actions">
        <button class="btn btn--ghost" (click)="closePreview()">ปิด</button>
        <button class="btn btn--primary">พิมพ์</button>
      </div>
    </header>

    <div class="preview-sheet">
      <div class="preview-sheet__header">
        <div>
          <h3>Accounting Summary</h3>
          <p>Prepared on {{ reportRange.end }}</p>
        </div>
        <div class="preview-totals">
          <div *ngFor="let total of previewTotals">
            <p>{{ total.label }}</p>
            <strong>{{ total.value }}</strong>
          </div>
        </div>
      </div>

      <div class="preview-pie">
        <div class="mini-pie" [style.background]="expenseGradient"></div>
        <ul>
          <li *ngFor="let part of expenseBreakdown">
            <span class="swatch" [style.background]="part.color"></span>
            <span>{{ part.label }} · {{ part.value }}%</span>
          </li>
        </ul>
      </div>

      <table class="preview-table">
        <thead>
          <tr>
            <th>วันที่</th>
            <th>เลขที่</th>
            <th>หัวข้อ</th>
            <th>หมวดหมู่</th>
            <th>ยอดเงิน</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let record of formattedRecords">
            <td>{{ record.date }}</td>
            <td>{{ record.doc }}</td>
            <td>{{ record.topic }}</td>
            <td>{{ record.category }}</td>
            <td [ngClass]="record.tone">{{ record.displayAmount }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</section>