supphakitd/micro-frontend
1
0
Fork 0
forked from ttc/micro-frontend
Code Pull Requests Activity

-แก้ไขระบบ trow api และ ยิง

Browse Source
This commit is contained in:
x2Skyz
2025-11-16 21:45:57 +07:00
parent 60662d88d4
commit ccab40852c
9 changed files with 786 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
accounting-ng-nuttakit/src/app/component/main-report/main-report.component.html Normal file
View File

@@ -0,0 +1,142 @@
<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>