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

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 } 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 {

  mode: string = 'i';
  isModalOpen: boolean = false;
  isSubmitting: boolean = false;
  arrearsForm!: FormGroup;
  saveFrm!: FormGroup;
  myActData: IActData[] = [];
  // myDropAct: IStateDrop[] = [];
  myDropAct: IStateDrop = { income: [], expense: [] };


  readonly ownerName = 'Nuttakit';

  constructor(
    private dashboardStateService: DashboardStateService
  ){}

  readonly kpiCards = [
    {
      label: 'รายรับรวม',
      value: '฿1.28M',
      trend: '+12.4%',
      context: 'เทียบกับเดือนก่อน',
      accent: 'mint'
    },
    {
      label: 'รายจ่ายรวม',
      value: '฿732K',
      trend: '-4.1%',
      context: 'จัดการได้ดีขึ้น',
      accent: 'lavender'
    },
    {
      label: 'ยอดค้างชำระ',
      value: '฿184K',
      trend: '-2 ใบแจ้งหนี้',
      context: 'รอติดตาม',
      accent: 'amber'
    },
    {
      label: 'อัตรากำไร',
      value: '37.8%',
      trend: '+1.9 จุด',
      context: 'ระยะ 30 วัน',
      accent: 'teal'
    }
  ];

  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' }
  ];

  readonly periodSummaries = [
    {
      label: 'รายปี',
      note: 'ปี 2567',
      income: '฿9.6M',
      expense: '฿5.1M',
      net: '+฿4.5M',
      trend: '+18%',
      badge: 'year'
    },
    {
      label: 'รายเดือน',
      note: 'มิถุนายน 2567',
      income: '฿1.28M',
      expense: '฿732K',
      net: '+฿548K',
      trend: '+6%',
      badge: 'month'
    },
    {
      label: 'รายสัปดาห์',
      note: 'สัปดาห์ที่ 24',
      income: '฿312K',
      expense: '฿188K',
      net: '+฿124K',
      trend: '+2%',
      badge: 'week'
    }
  ];

  readonly alerts = [
    {
      title: 'ใบแจ้งหนี้ #INV-083 จะครบกำหนด',
      detail: 'ลูกค้า Metro Engineering',
      tag: 'ภายใน 3 วัน'
    },
    {
      title: 'มีเอกสารที่ต้องอนุมัติ 2 รายการ',
      detail: 'เบิกค่าใช้จ่ายฝ่ายการตลาด',
      tag: 'รออนุมัติ'
    },
    {
      title: 'พบรายการใช้จ่ายผิดปกติ',
      detail: 'ค่าใช้จ่ายเดินทางสูงกว่าค่าเฉลี่ย 28%',
      tag: 'ตรวจสอบ'
    }
  ];

  readonly tasks = [
    {
      title: 'กระทบยอดธนาคาร เดือน มิ.ย.',
      due: 'วันนี้ 16:00',
      priority: 'สูง'
    },
    {
      title: 'เตรียมรายงาน VAT',
      due: 'พรุ่งนี้ 10:30',
      priority: 'กลาง'
    },
    {
      title: 'ออกใบเสนอราคา โครงการใหม่',
      due: 'ศุกร์ 14:00',
      priority: 'ต่ำ'
    }
  ];

  // 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'
  //   }
  // ];

  readonly expenseBreakdown = [
    { label: 'ฝ่ายบริหาร', value: 32, color: '#0ea5e9' },
    { label: 'การตลาด', value: 18, color: '#f97316' },
    { label: 'ต้นทุนโครงการ', value: 27, color: '#10b981' },
    { label: 'บุคลากร', value: 15, color: '#a855f7' },
    { label: 'อื่นๆ', value: 8, color: '#e11d48' }
  ];

  readonly expenseGradient = this.buildExpenseGradient();

  ngOnInit(): void {
    this.setupFormControl();
    this.dashboardStateService.getStateResult().subscribe(data => {
      if (data) {
        this.myDropAct = data;
      }
    });

    this.dashboardStateService.getStateAccountResult().subscribe(data => {
      if (data) {
        this.myActData = data;
      }
    });
  }

  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, Validators.maxLength(12)]),
      actqty: new FormControl('',[Validators.required]),
      actcat: new FormControl('',[Validators.required, Validators.maxLength(1)]),
      actcmt: new FormControl('',[Validators.maxLength(200)])
    });
  }

  onSaveSubmit(){

  }

  onArrearsSubmit(){

  }

  private buildExpenseGradient(): string {
    let current = 0;
    const segments = this.expenseBreakdown
      .map(part => {
        const start = current;
        const end = current + part.value;
        current = end;
        return `${part.color} ${start}% ${end}%`;
      })
      .join(', ');
    return `conic-gradient(${segments})`;
  }
}