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, IActData, IActSumData, QuickRatio} from '../../interfaces/dashboard.interface' import { DashboardStateService } from '../../services/state/dashboard-state.service'; @Component({ selector: 'app-main-dashboard', standalone: false, templateUrl: './main-dashboard.component.html', styleUrl: './main-dashboard.component.css' }) export class MainDashboardComponent implements OnInit { @Output() saveEventSubmit = new EventEmitter(); mode: string = 'i'; isModalOpen: boolean = false; isSubmitting: boolean = false; arrearsForm!: FormGroup; saveFrm!: FormGroup; myActData: IActData[] = []; quickRatios: QuickRatio[] = []; // myDropAct: IStateDrop[] = []; myDropAct: IStateDrop = { income: [], expense: [] }; myActSumData: IActSumData = { summary: { totalIncome: '', totalExpense: '', netProfit: 0, profitRate: '', adjustedProfitRate: '', period: '' }, pie: { income: [], expense: [] } }; ActSumDataGradient: any ownerName = localStorage.getItem('username') || 'ชนกนันต์'; constructor( private dashboardStateService: DashboardStateService ){} // readonly revenueTrend = [ // { label: 'ม.ค.', value: 52 }, // { label: 'ก.พ.', value: 61 }, // { label: 'มี.ค.', value: 73 }, // { label: 'เม.ย.', value: 68 }, // { label: 'พ.ค.', value: 82 }, // { label: 'มิ.ย.', value: 77 } // ]; // readonly quickRatios = [ // { label: 'กระแสเงินสด', value: '+฿312K', status: 'positive' }, // { label: 'วงเงินคงเหลือ', value: '฿890K', status: 'neutral' }, // { label: 'ค่าใช้จ่ายเดือนนี้', value: '฿412K', status: 'warning' } // ]; // ฟังก์ชันนี้ควรเรียกหลังจากได้รับข้อมูล myActSumData แล้ว (เช่นใน subscribe หรือ ngOnChanges) // เพิ่มใน Class Component isNumber(val: any): boolean { return typeof val === 'number'; } // readonly ledgerEntries = [ // { // type: 'i', // title: 'ค่าบริการที่ปรึกษา', // category: 'บริการ', // amount: '+฿85,000', // date: 'วันนี้ · 10:15', // note: 'โครงการ Warehouse Automation' // }, // { // type: 'e', // title: 'ค่าเช่าออฟฟิศ', // category: 'ค่าใช้จ่ายคงที่', // amount: '-฿48,000', // date: 'วันนี้ · 09:00', // note: 'สำนักงานพระราม 9' // }, // { // type: 'i', // title: 'รับเงินมัดจำ', // category: 'สัญญาใหม่', // amount: '+฿120,000', // date: 'เมื่อวาน', // note: 'ลูกค้า Urbane CoWorking' // }, // { // type: 'e', // title: 'ค่าวัตถุดิบ', // category: 'ต้นทุนโครงการ', // amount: '-฿27,500', // date: '12 มิ.ย.', // note: 'สั่งผ่าน Blue Supply' // } // ]; ngOnInit(): void { this.setupFormControl(); this.dashboardStateService.getStateResult().subscribe(data => { if (data) { this.myDropAct = data; } }); // ผลลับท์ ของ รายการ this.dashboardStateService.getStateAccountResult().subscribe(data => { if (data) { this.myActData = data; } }); // ผลลัพการ คำนวณ ของ ปัญชี ต่างๆ this.dashboardStateService.getStateSumResult().subscribe(data => { if (data) { this.myActSumData = data; this.ActSumDataGradient = this.buildExpenseGradient() this.updateQuickRatios(); } }); } setupFormControl(){ this.arrearsForm = new FormGroup({ // email: new FormControl('',[Validators.required, Validators.email, Validators.maxLength(100)]), amount: new FormControl('',[Validators.required, Validators.maxLength(20)]), expdtm: new FormControl('',[Validators.required, Validators.maxLength(12)]), note: new FormControl('',[Validators.maxLength(200)]), reason: new FormControl('',[Validators.required, Validators.maxLength(200)]) }); this.saveFrm = new FormGroup({ actacpdtm: new FormControl('',[Validators.required]), actqty: new FormControl('',[Validators.required]), actcat: new FormControl('',[Validators.required, Validators.maxLength(1)]), actcmt: new FormControl('',[Validators.maxLength(200)]) }); } updateQuickRatios() { const summary = this.myActSumData.summary; // แปลงค่า netProfit เป็นตัวเลขเพื่อเช็คเงื่อนไข (รองรับทั้ง string และ number) const netProfitVal = parseFloat(String(summary.netProfit)); const profitRateVal = parseFloat(summary.profitRate.replace('%', '')); // ลบ % ออกก่อนเช็ค this.quickRatios = [ { label: 'รายรับรวม', value: summary.totalIncome, colorClass: 'text-green-600' // รายรับสีเขียวเสมอ (หรือจะใช้สีดำ text-gray-700 ก็ได้) }, { label: 'รายจ่ายรวม', value: summary.totalExpense, colorClass: 'text-red-500' // รายจ่ายสีแดงอ่อน หรือสีปกติ }, { label: 'คงเหลือสุทธิ', // หรือ กำไรสุทธิ value: netProfitVal, // ส่งเป็นตัวเลขไปให้ Pipe format // ถ้า >= 0 สีน้ำเงิน, ถ้าติดลบ สีแดง colorClass: netProfitVal >= 0 ? 'text-blue-600' : 'text-red-600 font-bold' }, { label: 'อัตรากำไร', value: summary.profitRate, // เช็ค % ถ้าติดลบให้แดง colorClass: profitRateVal >= 0 ? 'text-blue-600' : 'text-red-600' }, { label: 'ระยะเวลา', value: summary.period, colorClass: 'text-gray-500' } ]; } onSaveSubmit(){ const rawDate = this.saveFrm.get('actacpdtm')?.value; // ค่าดิบ: "2025-11-21T14:23" let arysave = { actacpdtm: rawDate ? rawDate.replace(/[-T:]/g, '') : '', actqty: this.saveFrm.get('actqty')?.value, actcat: this.saveFrm.get('actcat')?.value, actcmt: this.saveFrm.get('actcmt')?.value, acttyp: this.mode } this.SaveEventSubmit(arysave); } SaveEventSubmit(event: any){ this.saveEventSubmit.emit(event); } onArrearsSubmit(){ } private buildExpenseGradient(): string { if (!this.myActSumData?.pie?.expense?.length) return ''; let current = 0; const segments = this.myActSumData.pie.expense .map(part => { const start = current; const percent = parseFloat(part.percent); // แปลงจาก string → number const end = current + percent; current = end; return `${part.color} ${start}% ${end}%`; }) .join(', '); return `conic-gradient(${segments})`; } }