....

ng-ttc-frontend/src/app/content/login-content/login-content.component.css

@@ -0,0 +1,19 @@
+:host {
+  display: block;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;         /* ครอบเต็มหน้าจอ */
+  overflow: hidden;      /* ปิด scroll bar */
+  box-sizing: border-box;
+}
+
+.login-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;   /* ✅ แก้ตรงนี้ จาก row → column */
+  align-items: center;      /* ✅ จัดให้อยู่กลางแนวนอน */
+  justify-content: center;  /* ✅ จัดให้อยู่กลางแนวตั้ง */
+  text-align: center;       /* ✅ ให้ข้อความตรงกลาง */
+}

ng-ttc-frontend/src/app/content/login-content/login-content.component.html

@@ -0,0 +1,11 @@
+<div class="justify-content-center flex-column">
+    <!-- <h2>Login | เข้าสู่ระบบ ({{ mode }})</h2> -->
+  @if (mode == "default") {
+    <app-login-page [mode]="mode" (signedIn)="onSignInSubmit($event)"></app-login-page>
+  } @else if(mode == "forgot-password"){
+    <app-login-forgot (otpEventSubmit)="onOtpSendSubmit($event)" (otpVerifyEventSubmit)="onVerifySubmit($event)"></app-login-forgot>
+  }
+  <!-- @else {
+
+  } -->
+</div>

ng-ttc-frontend/src/app/content/login-content/login-content.component.ts

@@ -0,0 +1,140 @@
+import { Component, OnInit, ViewChild  } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { GeneralService } from '../../services/generalservice';
+import { LoginForgotComponent } from '../../../app/component/login-forgot/login-forgot.component';
+import { LoginPageComponent } from '../../../app/component/login-page/login-page.component';
+import { finalize } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-login-content',
+  standalone: false,
+  templateUrl: './login-content.component.html',
+  styleUrl: './login-content.component.css'
+})
+export class LoginContentComponent implements OnInit {
+ @ViewChild(LoginForgotComponent) loginForgotComponent!: LoginForgotComponent;
+ @ViewChild(LoginPageComponent) loginPageComponent!: LoginPageComponent;
+  mode: 'forgot-password' | 'default' = 'default';
+
+  constructor(
+    private generalService: GeneralService,
+    private route: ActivatedRoute,
+    private router: Router
+  ) {}
+
+  ngOnInit(): void {
+     let param = this.route.snapshot.paramMap.get('mode');
+
+    if (param === 'forgot-password') {
+      this.mode = 'forgot-password';
+    } else {
+      // this.router.navigate(['/login']); // This can cause navigation loops
+      this.mode = 'default';
+    }
+  }
+
+  onSignInSubmit(value: any){
+    const uri = '/api/login/login';
+    const request = {
+      username: value.username,
+      password: value.password
+    };
+
+    if (this.loginPageComponent) {
+      this.loginPageComponent.busy = true;
+      this.loginPageComponent.message = '';
+    }
+
+    this.generalService.postRequest(uri, request)
+    .pipe(
+      finalize(() => {
+        if (this.loginPageComponent) {
+          this.loginPageComponent.busy = false;
+        }
+      })
+    ).subscribe({
+      next: (result: any) => {
+        if (result.code === '200' && result.data?.token) {
+          this.generalService.trowApi(result);
+          localStorage.setItem('access_token', result.data.token);
+          this.router.navigate(['main/dashboard']);
+        } else {
+          const errorMessage = result.message_th || result.message || 'Sign-in failed.';
+          if (this.loginPageComponent) {
+            this.loginPageComponent.message = errorMessage;
+          }
+          this.generalService.trowApi(result);
+        }
+      },
+      error: (error: any) => {
+        const errorMessage = error?.error?.message_th || error?.error?.message || 'An error occurred.';
+        if (this.loginPageComponent) {
+          this.loginPageComponent.message = errorMessage;
+        }
+        this.generalService.trowApi(error);
+      }
+    });
+  }
+
+
+  onOtpSendSubmit(value: any){
+    let uri = '/api/login/otp/send';
+    let request = {
+      email: value.email
+      // otp: value.otp
+    }
+
+    this.loginForgotComponent.isLoading = true;
+    this.generalService.postRequest(uri, request)
+    .pipe(
+      // ✅ finalize จะทำงานทุกกรณี (ทั้ง success/error)
+      finalize(() => {
+        this.loginForgotComponent.isLoading = false;
+      })
+    ).subscribe({
+      next: (result: any) => {
+        if (result.code === '200') {
+          this.generalService.trowApi(result);
+          console.log(`✅ OTP ส่งไปที่ ${value.email}`);
+        } else {
+          console.warn('⚠️ ไม่สามารถส่ง OTP ได้:', result.message_th);
+        }
+      },
+      error: (error: any) => {
+        this.loginForgotComponent.isSendOtp = false;
+        this.loginForgotComponent.isLoading = false;
+        this.generalService.trowApi(error);
+        console.error('❌ Error sending OTP:', error);
+      },
+      complete: () => {
+        this.loginForgotComponent.isLoading = false;
+        this.loginForgotComponent.isSendOtp = true;
+        console.log('📨 OTP send request completed');
+      }
+    });
+  }
+
+  onVerifySubmit(value: any){
+      let uri = '/api/login/otp/verify';
+      let request = {
+        email: value.email,
+        otp: value.otp
+    }
+    this.generalService.postRequest(uri, request).subscribe({
+      next: (result: any) => {
+        if (result.code === '200') {
+          console.log(`OTP ส่งไปยืนยันสำเร็จ`);
+        } else {
+          console.warn('⚠️ ไม่สามารถส่ง OTP ได้:', result.message_th);
+        }
+      },
+      error: (error: any) => {
+        console.error('❌ Error sending OTP:', error);
+      },
+      complete: () => {
+        this.router.navigate(['/login']);
+        console.log('📨 OTP send request completed');
+      }
+    });
+  }
+}

ng-ttc-frontend/src/app/content/main-dashboard-content/main-dashboard-content.component.html

@@ -0,0 +1 @@
+<app-main-dashboard></app-main-dashboard>

ng-ttc-frontend/src/app/content/main-dashboard-content/main-dashboard-content.component.ts

@@ -0,0 +1,162 @@
+import { DashboardStateService } from './../../services/state/dashboard-state.service';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ChartConfiguration, ChartOptions } from 'chart.js';
+import { BaseChartDirective } from 'ng2-charts';
+import { GeneralService } from '../../services/generalservice';
+import { IDropAct, IStateDrop, IActData, IActSumData } from '../../interfaces/dashboard.interface';
+
+
+@Component({
+  selector: 'app-main-dashboard-content',
+  standalone: false,
+  templateUrl: './main-dashboard-content.component.html',
+  styleUrls: ['./main-dashboard-content.component.css']
+})
+export class MainDashboardContentComponent implements OnInit {
+  @ViewChild(BaseChartDirective) chart?: BaseChartDirective;
+  myDropAct!: IStateDrop;
+  myActData: IActData[] = [];
+  myActSumData: IActSumData = {
+    summary: {
+      totalIncome: '',
+      totalExpense: '',
+      netProfit: '',
+      profitRate: '',
+      adjustedProfitRate: '',
+      period: ''
+    },
+    pie: {
+      income: [],
+      expense: []
+    }
+  };
+
+  constructor(
+    private generalService: GeneralService,
+    private dashboardStateService: DashboardStateService
+  ) {}
+
+  ngOnInit(): void {
+    let token = localStorage.getItem('access_token')
+    this.OnSearchAct(token, true);
+    this.OnSetupDashboard(token, true);
+    this.OnSearchSum(token, true);
+  }
+
+  OnSearchAct(value: any, setupFirst: boolean): void {
+    const uri = '/api/web/accountingSearch';
+    let request = {
+      token: value
+    }
+    this.generalService.postRequest(uri, request).subscribe({
+      next: (result: any) => {
+        if (result.code === '200') {
+          this.generalService.trowApi(result);
+          this.myActData = result.data;
+          this.dashboardStateService.setStateAccountResult(this.myActData);
+        }else{
+          this.generalService.trowApi(result);
+        }
+      },
+      error: (error: any) => {
+        this.generalService.trowApi(error);
+      },
+      complete: () => {
+
+      }
+    });
+  }
+
+
+
+  OnSetupDashboard(value: any, setupFirst: boolean): void {
+    const uri = '/api/web/accountingSetup';
+    let request = {
+      token: value
+    }
+    this.generalService.postRequest(uri, request).subscribe({
+      next: (result: any) => {
+        if (result.code === '200') {
+          this.generalService.trowApi(result);
+          this.myDropAct = result.data
+          this.dashboardStateService.setStateResult(this.myDropAct)
+        }else{
+          this.generalService.trowApi(result);
+        }
+      },
+      error: (error: any) => {
+        this.generalService.trowApi(error);
+      },
+      complete: () => {
+
+      }
+    });
+  }
+
+  OnSearchSum(value: any, setupFirst: boolean): void {
+    const uri = '/api/web/accountingSum';
+    let request = {
+      token: value
+    }
+    this.generalService.postRequest(uri, request).subscribe({
+      next: (result: any) => {
+        if (result.code === '200') {
+          this.generalService.trowApi(result);
+          this.myActSumData = result.data
+          this.dashboardStateService.setStateSumResult(this.myActSumData);
+        }else{
+          this.generalService.trowApi(result);
+        }
+      },
+      error: (error: any) => {
+        this.generalService.trowApi(error);
+      },
+      complete: () => {
+
+      }
+    });
+  }
+
+  // fetchChartData(): void {
+  //   // NOTE: Using a placeholder endpoint as the actual one was not provided.
+  //   const uri = '/api/dashboard/summary-last-6-months';
+
+  //   this.generalService.getRequest(uri).subscribe({
+  //     next: (result: any) => {
+  //       if (result.code === '200' && result.data) {
+  //         this.processChartData(result.data);
+  //       } else {
+  //         console.warn('Could not fetch chart data:', result.message_th);
+  //         // Optionally, display placeholder data or an error message
+  //         this.setupPlaceholderData();
+  //       }
+  //     },
+  //     error: (error: any) => {
+  //       console.error('Error fetching chart data:', error);
+  //       // Display placeholder data on error to show the graph structure
+  //       this.setupPlaceholderData();
+  //     }
+  //   });
+  // }
+
+  // processChartData(data: any[]): void {
+  //   const labels = data.map(item => item.month);
+  //   const revenues = data.map(item => item.revenue);
+
+  //   this.lineChartData.labels = labels;
+  //   this.lineChartData.datasets[0].data = revenues;
+
+  //   this.chart?.update();
+  // }
+
+  // setupPlaceholderData(): void {
+  //   // This function is called if the API fails, to show a sample graph.
+  //   const labels = ['January', 'February', 'March', 'April', 'May', 'June'];
+  //   const revenues = [1200, 1900, 3000, 5000, 2300, 3200]; // Sample data
+
+  //   this.lineChartData.labels = labels;
+  //   this.lineChartData.datasets[0].data = revenues;
+
+  //   this.chart?.update();
+  // }
+}

ng-ttc-frontend/src/app/content/sidebar-content/sidebar-content.component.css

@@ -0,0 +1,11 @@
+.layout {
+  display: flex;
+  height: 100vh;
+  width: 100%;
+}
+.main-container {
+  flex: 1;
+  background: #f5f5f5;
+  overflow-y: auto;
+  padding: 20px;
+}

ng-ttc-frontend/src/app/content/sidebar-content/sidebar-content.component.html

@@ -0,0 +1,9 @@
+<div class="flex h-screen overflow-hidden">
+  <!-- Sidebar (เฉพาะ main) -->
+  <app-sidebar></app-sidebar>
+
+  <!-- Content -->
+  <div class="flex-1 overflow-y-auto bg-gray-50 text-gray-900">
+    <router-outlet></router-outlet>
+  </div>
+</div>

ng-ttc-frontend/src/app/content/sidebar-content/sidebar-content.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-sidebar-content',
+  standalone: false,
+  templateUrl: './sidebar-content.component.html',
+  styleUrl: './sidebar-content.component.css'
+})
+export class SidebarContentComponent {
+
+}