-accouting Wep

2025-11-21 15:01:21 +07:00
parent 1c7729ab99
commit 45259f7b8d
21 changed files with 590 additions and 350 deletions
--- a/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.css
+++ b/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.css
@@ -281,6 +281,23 @@
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }

+.quick-log__form select,
+.quick-log__form textarea {
+  border: 1px solid #e2e8f0;
+  border-radius: 14px;
+  padding: 0.75rem 1rem;
+  font-family: inherit;
+  font-size: 0.95rem;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.quick-log__form select:focus,
+.quick-log__form textarea:focus {
+  border-color: #0ea5e9;
+  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
+  outline: none;
+}
+
 .quick-log__form input:focus,
 .quick-log__form textarea:focus {
  border-color: #0ea5e9;
@@ -643,4 +660,4 @@
  max-height: 25rem;
  overflow-y: auto;
  padding-right: 0.5rem;
-}
+}
--- a/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.html
+++ b/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.html
@@ -19,14 +19,14 @@
    <div class="bg-white border border-gray-200 rounded-2xl p-5 shadow-sm hover:shadow-md transition">
      <div class="text-gray-500 text-sm">รายรับทั้งหมด</div>
      <div class="text-3xl font-bold text-green-600 mt-1">
-        {{ 11000 | number:'1.0-2' }} บาท
+        {{ myActSumData.summary.totalIncome || 0 | number:'1.0-2' }} บาท
      </div>
    </div>

    <div class="bg-white border border-gray-200 rounded-2xl p-5 shadow-sm hover:shadow-md transition">
      <div class="text-gray-500 text-sm">รายจ่ายทั้งหมด</div>
      <div class="text-3xl font-bold text-red-600 mt-1">
-        {{ 1000 | number:'1.0-2' }} บาท
+        {{ myActSumData.summary.totalExpense || 0 | number:'1.0-2' }} บาท
      </div>
    </div>

@@ -34,9 +34,9 @@
      <div class="text-gray-500 text-sm">คงเหลือ</div>
      <div
        class="text-3xl font-bold mt-1"
-        [ngClass]="100 >= 0 ? 'text-blue-600' : 'text-red-600'"
+        [ngClass]="myActSumData.summary.netProfit >= 0 ? 'text-blue-600' : 'text-red-600'"
      >
-        {{ 10000 | number:'1.0-2' }} บาท
+        {{ myActSumData.summary.netProfit | number:'1.0-2' }} บาท
      </div>
    </div>

@@ -81,63 +81,129 @@
    </article>
  </section> -->

-  <section class="ledger-grid">
-    <article class="panel quick-log">
-      <div class="panel__header">
-        <div>
-          <h2>บันทึกรายการแบบรวดเร็ว</h2>
-          <p>จดรายรับรายจ่ายภายในไม่กี่คลิก</p>
-        </div>
-      </div>
-      <form class="quick-log__form">
-        <label>
-          <span>ประเภท</span>
-          <div class="quick-log__toggle">
-            <button type="button" class="toggle-btn" [ngClass]="{ 'is-active': mode == 'i' }" (click)="mode = 'i'">รายรับ</button>
-            <button type="button" class="toggle-btn" [ngClass]="{ 'is-active': mode == 'e' }" (click)="mode = 'e'">รายจ่าย</button>
-          </div>
-        </label>
-        <label>
-          <span>วันที่</span>
-          <!-- <input type="text" disabled placeholder="10/04/2025 เวลา 12:00"/> -->
+  <div class="ledger-grid" [formGroup]="saveFrm">
+      <form class="panel quick-log" [formGroup]="saveFrm">
+  <div class="panel__header">
+    <div>
+      <h2>บันทึกรายการแบบรวดเร็ว</h2>
+      <p>จดรายรับรายจ่ายภายในไม่กี่คลิก</p>
+    </div>
+  </div>

-          <input type="datetime-local"/>
+  <!-- เปลี่ยน form ด้านในเป็น div แทน เพื่อไม่ให้ form ซ้อน form -->
+  <div class="quick-log__form">
+
+    <!-- 1. ส่วนเลือกประเภท (รายรับ/รายจ่าย) -->
+    <label>
+      <span>ประเภท</span>
+      <div class="quick-log__toggle">
+        <button type="button" class="toggle-btn" [ngClass]="{ 'is-active': mode == 'i' }" (click)="mode = 'i'; saveFrm.get('actcat')?.reset()">รายรับ</button>
+        <button type="button" class="toggle-btn" [ngClass]="{ 'is-active': mode == 'e' }" (click)="mode = 'e'; saveFrm.get('actcat')?.reset()">รายจ่าย</button>
+      </div>
+    </label>
+
+    <!-- 2. ส่วนวันที่ -->
+    <div class="mb-2">
+        <label>
+        <span>วันที่ <span class="text-red-500">*</span></span>
+        <input type="datetime-local" formControlName="actacpdtm"
+               [class.border-red-500]="saveFrm.get('actacpdtm')?.invalid && (saveFrm.get('actacpdtm')?.value || saveFrm.get('actacpdtm')?.touched)"/>
        </label>
-        <div class="quick-log__grid">
-          <label>
-            <span>หมวดหมู่</span>
+
+        <!-- Validate วันที่ -->
+        @if (saveFrm.get('actacpdtm')?.invalid && (saveFrm.get('actacpdtm')?.value || saveFrm.get('actacpdtm')?.touched)) {
+            <div class="flex items-center text-red-600 text-xs mt-1 transition-all">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3 h-3 mr-1">
+                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+                </svg>
+                <span>กรุณาระบุวันที่</span>
+            </div>
+        }
+    </div>
+
+    <div class="quick-log__grid">
+      <!-- 3. ส่วนหมวดหมู่ -->
+      <div class="flex flex-col">
+          <label class="h-full">
+            <span>หมวดหมู่ <span class="text-red-500">*</span></span>
+
            @if(mode == 'i'){
-                <select class="w-full h-full px-4 py-2 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-50 transition-all bg-white">
+                <select formControlName="actcat"
+                        class="w-full h-auto px-4 py-2 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-50 transition-all bg-white"
+                        [class.border-red-500]="saveFrm.get('actcat')?.invalid && (saveFrm.get('actcat')?.dirty || saveFrm.get('actcat')?.touched)">
                <option value="">ไม่เลือก</option>
                @for (item of myDropAct.income; track item.dtlcod) {
-                  <option [value]="item.dtlcod">
-                    {{ item.dtlnam }}
-                  </option>
+                    <option [value]="item.dtlcod">{{ item.dtlnam }}</option>
                }
-              </select>
+                </select>
            }@else if(mode == 'e'){
-                <select class="w-full h-full px-4 py-2 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-50 transition-all bg-white">
+                <select formControlName="actcat"
+                        class="w-full h-auto px-4 py-2 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-50 transition-all bg-white"
+                        [class.border-red-500]="saveFrm.get('actcat')?.invalid && (saveFrm.get('actcat')?.dirty || saveFrm.get('actcat')?.touched)">
                <option value="">ไม่เลือก</option>
                @for (item of myDropAct.expense; track item.dtlcod) {
-                  <option [value]="item.dtlcod">
-                    {{ item.dtlnam }}
-                  </option>
+                    <option [value]="item.dtlcod">{{ item.dtlnam }}</option>
                }
-              </select>
+                </select>
            }
          </label>
+
+          <!-- Validate หมวดหมู่ -->
+          @if (saveFrm.get('actcat')?.invalid && (saveFrm.get('actcat')?.dirty || saveFrm.get('actcat')?.touched)) {
+            <div class="flex items-center text-red-600 text-xs mt-1 transition-all">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3 h-3 mr-1">
+                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+                </svg>
+                <span>กรุณาเลือกหมวดหมู่</span>
+            </div>
+          }
+      </div>
+
+      <!-- 4. ส่วนยอดเงิน -->
+      <div class="flex flex-col">
          <label>
-            <span>ยอดเงิน (฿)</span>
-            <input type="number" placeholder="0.00" />
+            <span>ยอดเงิน (฿) <span class="text-red-500">*</span></span>
+            <input type="number" formControlName="actqty" placeholder="0.00"
+                   [class.border-red-500]="saveFrm.get('actqty')?.invalid && (saveFrm.get('actqty')?.dirty || saveFrm.get('actqty')?.touched)"/>
          </label>
-        </div>
+
+          <!-- Validate ยอดเงิน -->
+          @if (saveFrm.get('actqty')?.invalid && (saveFrm.get('actqty')?.dirty || saveFrm.get('actqty')?.touched)) {
+            <div class="flex items-center text-red-600 text-xs mt-1 transition-all">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3 h-3 mr-1">
+                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+                </svg>
+                <span>กรุณาระบุยอดเงิน</span>
+            </div>
+          }
+      </div>
+    </div>
+
+    <!-- 5. ส่วนบันทึกเพิ่มเติม -->
+    <div class="mb-2">
        <label>
-          <span>บันทึกเพิ่มเติม</span>
-          <textarea rows="3" placeholder="รายละเอียดการรับ/จ่าย"></textarea>
+        <span>บันทึกเพิ่มเติม</span>
+        <textarea rows="3" formControlName="actcmt" placeholder="รายละเอียดการรับ/จ่าย"
+                  [class.border-red-500]="saveFrm.get('actcmt')?.invalid"></textarea>
        </label>
-        <button type="button" class="btn btn--primary">บันทึกรายการ</button>
-      </form>
-    </article>
+
+        <!-- Validate ความยาวตัวอักษร (ถ้ามี) -->
+        @if (saveFrm.get('actcmt')?.hasError('maxlength')) {
+            <div class="flex items-center text-red-600 text-xs mt-1 transition-all">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3 h-3 mr-1">
+                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+                </svg>
+                <span>พิมพ์ได้สูงสุด 200 ตัวอักษร</span>
+            </div>
+        }
+    </div>
+
+    <button type="button" class="btn btn--primary" (click)="onSaveSubmit()">บันทึกรายการ</button>
+  </div>
+</form>
+
+
+

    <article class="panel ledger-panel">
      <div class="panel__header">
@@ -201,7 +267,7 @@
          }
      </div>
    </article>
-  </section>
+  </div>

  <section class="dashboard__grid">
    <!-- <article class="panel panel--main">
@@ -248,7 +314,7 @@
      </div>
    </article>
    <!-- ตัวเลขซ้อนทับกัน -->
-    <article class="panel panel--side">
+    <!-- <article class="panel panel--side">
      <div class="panel__header">
        <div>
          <h2>สรุปสภาพคล่อง</h2>
@@ -265,8 +331,38 @@
          </div>
        </div>
      </div>
-    </article>
+    </article> -->

+      <article class="bg-white border border-gray-200 rounded-2xl p-5 shadow-sm">
+  <div class="flex justify-between items-center mb-4">
+    <div>
+      <h2 class="text-lg font-bold text-gray-800">สรุปสภาพคล่อง</h2>
+      <p class="text-xs text-gray-400">อัปเดตล่าสุดเมื่อสักครู่</p>
+    </div>
+  </div>
+
+  <div class="space-y-3">
+    <div *ngFor="let ratio of quickRatios"
+         class="flex justify-between items-center p-2 hover:bg-gray-50 rounded-lg transition">
+
+      <p class="text-gray-600 text-sm font-medium flex-1 truncate">
+        {{ ratio.label }}
+      </p>
+
+      <span class="text-base font-semibold" [ngClass]="ratio.colorClass">
+        <ng-container *ngIf="isNumber(ratio.value); else textVal">
+           {{ ratio.value | number:'1.2-2' }}
+           <span *ngIf="ratio.label !== 'อัตรากำไร'" class="text-xs font-normal text-gray-400">บาท</span>
+        </ng-container>
+
+        <ng-template #textVal>
+          {{ ratio.value }}
+        </ng-template>
+      </span>
+
+    </div>
+  </div>
+</article>
    <!-- <article class="panel alerts-panel">
      <div class="panel__header">
        <div>
--- a/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.ts
+++ b/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.ts
@@ -1,7 +1,7 @@
 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 } from '../../interfaces/dashboard.interface'
+import { IDropAct, IStateDrop, IStateResultResponse, IActData, IActSumData, QuickRatio} from '../../interfaces/dashboard.interface'
 import { DashboardStateService } from '../../services/state/dashboard-state.service';

@Component({
@@ -11,20 +11,21 @@ import { DashboardStateService } from '../../services/state/dashboard-state.serv
  styleUrl: './main-dashboard.component.css'
 })
 export class MainDashboardComponent implements OnInit {
-
+ @Output() saveEventSubmit = new EventEmitter<any>();
  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: '',
+      netProfit: 0,
      profitRate: '',
      adjustedProfitRate: '',
      period: ''
@@ -34,10 +35,11 @@ export class MainDashboardComponent implements OnInit {
      expense: []
    }
  };
+
  ActSumDataGradient: any


-  readonly ownerName = 'Nuttakit';
+  ownerName = localStorage.getItem('username') || 'ชนกนันต์';

  constructor(
    private dashboardStateService: DashboardStateService
@@ -83,12 +85,19 @@ export class MainDashboardComponent implements OnInit {
  //   { label: 'มิ.ย.', value: 77 }
  // ];

-  readonly quickRatios = [
-    { label: 'กระแสเงินสด', value: '+฿312K', status: 'positive' },
-    { label: 'วงเงินคงเหลือ', value: '฿890K', status: 'neutral' },
-    { label: 'ค่าใช้จ่ายเดือนนี้', value: '฿412K', status: 'warning' }
-  ];
+  // 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 periodSummaries = [
    {
      label: 'รายปี',
@@ -217,8 +226,10 @@ export class MainDashboardComponent implements OnInit {
      if (data) {
        this.myActSumData = data;
        this.ActSumDataGradient = this.buildExpenseGradient()
+        this.updateQuickRatios();
      }
    });
+
  }
  setupFormControl(){
    this.arrearsForm = new FormGroup({
@@ -230,15 +241,66 @@ export class MainDashboardComponent implements OnInit {
    });

    this.saveFrm = new FormGroup({
-      actacpdtm: new FormControl('',[Validators.required, Validators.maxLength(12)]),
+      actacpdtm: new FormControl('',[Validators.required]),
      actqty: new FormControl('',[Validators.required]),
      actcat: new FormControl('',[Validators.required, Validators.maxLength(1)]),
      actcmt: new FormControl('',[Validators.maxLength(200)])
    });
  }

-  onSaveSubmit(){
+  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(){