first

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

@@ -0,0 +1,220 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
+import { GeneralService } from '../../services/generalservice';
+
+@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;
+
+
+  readonly ownerName = 'Nuttakit';
+
+  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();
+  }
+
+  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})`;
+  }
+}