139 lines
4.2 KiB
TypeScript
139 lines
4.2 KiB
TypeScript
import { Component } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'app-main-report',
|
|
templateUrl: './main-report.component.html',
|
|
standalone: false,
|
|
styleUrls: ['./main-report.component.css']
|
|
})
|
|
export class MainReportComponent {
|
|
readonly reportRange = {
|
|
start: '1 มิถุนายน 2567',
|
|
end: '30 มิถุนายน 2567'
|
|
};
|
|
|
|
readonly summaryCards = [
|
|
{ label: 'รายรับรวม', value: '฿1,284,500', detail: '+12.4% MoM', tone: 'mint' },
|
|
{ label: 'รายจ่ายรวม', value: '฿732,800', detail: '-4.1% MoM', tone: 'amber' },
|
|
{ label: 'กำไรสุทธิ', value: '฿551,700', detail: 'Margin 42.9%', tone: 'indigo' },
|
|
{ label: 'บันทึกรายการ', value: '86 รายการ', detail: '32 รายรับ · 54 รายจ่าย', tone: 'slate' }
|
|
];
|
|
|
|
readonly ledgerRecords = [
|
|
{
|
|
date: '01 มิ.ย. 2567',
|
|
doc: 'RCPT-9101',
|
|
type: 'income',
|
|
topic: 'ค่าบริการที่ปรึกษา',
|
|
category: 'บริการ',
|
|
amount: 145000
|
|
},
|
|
{
|
|
date: '02 มิ.ย. 2567',
|
|
doc: 'EXP-4407',
|
|
type: 'expense',
|
|
topic: 'ค่าวัสดุโครงการ A',
|
|
category: 'ต้นทุนโครงการ',
|
|
amount: -38900
|
|
},
|
|
{
|
|
date: '06 มิ.ย. 2567',
|
|
doc: 'RCPT-9110',
|
|
type: 'income',
|
|
topic: 'รับเงินมัดจำโครงการ',
|
|
category: 'สัญญาใหม่',
|
|
amount: 220000
|
|
},
|
|
{
|
|
date: '09 มิ.ย. 2567',
|
|
doc: 'EXP-4412',
|
|
type: 'expense',
|
|
topic: 'เงินเดือนพนักงาน',
|
|
category: 'บุคลากร',
|
|
amount: -180000
|
|
},
|
|
{
|
|
date: '12 มิ.ย. 2567',
|
|
doc: 'EXP-4416',
|
|
type: 'expense',
|
|
topic: 'ค่าเช่าออฟฟิศ',
|
|
category: 'ค่าใช้จ่ายคงที่',
|
|
amount: -48000
|
|
},
|
|
{
|
|
date: '19 มิ.ย. 2567',
|
|
doc: 'RCPT-9122',
|
|
type: 'income',
|
|
topic: 'ค่าสัญญาบริการรายปี',
|
|
category: 'บริการ',
|
|
amount: 325000
|
|
},
|
|
{
|
|
date: '23 มิ.ย. 2567',
|
|
doc: 'EXP-4425',
|
|
type: 'expense',
|
|
topic: 'ค่าโฆษณาออนไลน์',
|
|
category: 'การตลาด',
|
|
amount: -72000
|
|
},
|
|
{
|
|
date: '28 มิ.ย. 2567',
|
|
doc: 'RCPT-9133',
|
|
type: 'income',
|
|
topic: 'รายรับจากคู่ค้าใหม่',
|
|
category: 'พันธมิตร',
|
|
amount: 210500
|
|
}
|
|
];
|
|
|
|
readonly expenseBreakdown = [
|
|
{ label: 'ต้นทุนโครงการ', value: 34, color: '#10b981' },
|
|
{ label: 'บุคลากร', value: 26, color: '#6366f1' },
|
|
{ label: 'การตลาด', value: 18, color: '#f97316' },
|
|
{ label: 'ค่าใช้จ่ายคงที่', value: 14, color: '#0ea5e9' },
|
|
{ label: 'อื่นๆ', value: 8, color: '#e11d48' }
|
|
];
|
|
|
|
readonly previewTotals = [
|
|
{ label: 'รายรับรวม', value: '฿1,284,500' },
|
|
{ label: 'รายจ่ายรวม', value: '฿732,800' },
|
|
{ label: 'กำไรสุทธิ', value: '฿551,700' }
|
|
];
|
|
|
|
printPreviewOpen = false;
|
|
|
|
get expenseGradient(): string {
|
|
let current = 0;
|
|
const segments = this.expenseBreakdown
|
|
.map(slice => {
|
|
const start = current;
|
|
const end = current + slice.value;
|
|
current = end;
|
|
return `${slice.color} ${start}% ${end}%`;
|
|
})
|
|
.join(', ');
|
|
return `conic-gradient(${segments})`;
|
|
}
|
|
|
|
get formattedRecords() {
|
|
return this.ledgerRecords.map(record => ({
|
|
...record,
|
|
displayAmount: this.formatCurrency(record.amount),
|
|
tone: record.type === 'income' ? 'income' : 'expense'
|
|
}));
|
|
}
|
|
|
|
openPreview(): void {
|
|
this.printPreviewOpen = true;
|
|
}
|
|
|
|
closePreview(): void {
|
|
this.printPreviewOpen = false;
|
|
}
|
|
|
|
private formatCurrency(amount: number): string {
|
|
const formatter = new Intl.NumberFormat('th-TH', { style: 'currency', currency: 'THB', maximumFractionDigits: 0 });
|
|
return formatter.format(amount);
|
|
}
|
|
}
|