หน้าจอ ทะเบียนบริษัท > สาขาและหน่วยธุรกิจ > ทะเบียนฝ่าย

src/app/components/company-registration/branch-business-unit/branch-business-unit.component.html

+<div class="head-title">
+    รายละเอียดสาขาและหน่วยธุรกิจ
+</div>
+<div class="body-content">
+    <ul class="nav-tabs">
+        <li class="nav-item" *ngFor="let item of [{id:'tab1',text:'ทะเบียนฝ่าย'},
+            {id:'tab2',text:'ทะเบียนแผนก'},
+            {id:'tab3',text:'ทะเบียนส่วน'},
+            {id:'tab4',text:'ส่วนย่อย1'},
+            {id:'tab5',text:'ส่วนย่อย2'},
+            {id:'tab6',text:'ส่วนย่อย3'},
+            {id:'tab7',text:'ส่วนย่อย4'}]" (click)="changeTab(item)">
+            <a [class.active]="activeTab === item.id" class="nav-link">{{item.text}}</a>
+        </li>
+    </ul>
+    <div class="tab-content">
+        <div *ngIf="activeTab === 'tab1'" class="tab-pane">
+            <app-department-register></app-department-register>
+        </div>
+        <div *ngIf="activeTab === 'tab2'" class="tab-pane">
+            <p>เนื้อหาของ Tab 2</p>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/components/company-registration/branch-business-unit/branch-business-unit.component.scss

+/* สไตล์ของแถบเมนู */
+.nav-tabs {
+    display: flex;
+    border-bottom: 2px solid #ccc; /* เส้นใต้ */
+    width: 100%;
+    cursor: pointer;
+}
+
+.nav-item {
+    list-style: none;
+    margin-right: 10px; /* ช่องว่างระหว่างเมนู */
+}
+
+.nav-link {
+    text-decoration: none;
+    padding: 10px 20px;
+    display: inline-block;
+    font-size: large;
+    border-width: 2px 2px 0px 2px;
+    border-style: solid;
+    border-color: #ccc;
+    border-radius: 5px 5px 0px 0px;
+}
+
+.nav-link:hover {
+    background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
+}
+
+.nav-link.active {
+    color: #ffffff; /* สีตัวอักษรในสถานะ active */
+    font-size: large;
+    border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
+    background-color: rgb(var(--color-primary));
+    border-width: 2px 2px 0px 2px;
+    border-style: solid;
+    border-color: rgb(var(--color-primary));
+    border-radius: 5px 5px 0px 0px;
+}
+
+.tab-content {
+    margin-top: 20px;
+}
+
+.tab-pane.active {
+    display: block;
+}

src/app/components/company-registration/branch-business-unit/branch-business-unit.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-branch-business-unit',
+  templateUrl: './branch-business-unit.component.html',
+  styleUrls: ['./branch-business-unit.component.scss']
+})
+export class BranchBusinessUnitComponent {
+  @Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'สาขาและหน่วยธุรกิจ']
+  @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
+  activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
+
+  // ฟังก์ชันในการเปลี่ยนแท็บ
+  changeTab(tab: { id: string, text: string }) {
+    this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'สาขาและหน่วยธุรกิจ', tab.text])
+    this.activeTab = tab.id;
+  }
+}

src/app/components/company-registration/branch-business-unit/department-register/department-register.component.scss

+/* สไตล์ของแถบเมนู */
+.nav-tabs {
+  display: flex;
+  border-bottom: 2px solid #ccc; /* เส้นใต้ */
+  width: 100%;
+  cursor: pointer;
+}
+
+.nav-item {
+  list-style: none;
+  margin-right: 10px; /* ช่องว่างระหว่างเมนู */
+}
+
+.nav-link {
+  text-decoration: none;
+  padding: 10px 20px;
+  display: inline-block;
+  font-size: large;
+  border-width: 2px 2px 0px 2px;
+  border-style: solid;
+  border-color: #ccc;
+  border-radius: 5px 5px 0px 0px;
+}
+
+.nav-link:hover {
+  background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
+}
+
+.nav-link.active {
+  color: #ffffff; /* สีตัวอักษรในสถานะ active */
+  font-size: large;
+  border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
+  background-color: rgb(var(--color-primary));
+  border-width: 2px 2px 0px 2px;
+  border-style: solid;
+  border-color: rgb(var(--color-primary));
+  border-radius: 5px 5px 0px 0px;
+}
+
+.tab-content {
+  margin-top: 20px;
+}
+
+.tab-pane.active {
+  display: block;
+}
+
+.nav-item-text {
+  list-style: none;
+  margin-right: 10px; /* ช่องว่างระหว่างเมนู */
+}
+.nav-link-text {
+  text-decoration: none;
+  display: inline-block;
+  font-size: large;
+  color: #569bf5;
+  border-bottom: 3.5px solid #569bf5;
+}

src/app/components/company-registration/branch-business-unit/department-register/department-register.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-department-register',
+  templateUrl: './department-register.component.html',
+  styleUrls: ['./department-register.component.scss']
+})
+export class DepartmentRegisterComponent {
+}

src/app/components/company-registration/company-registration.component.html

+<app-page-header [pathTitle]="pathTitle"></app-page-header>
+<div class="bg-card-white">
+</div>
+<div class="block-main-content">
+    <div class="head-title">
+        ทะเบียนบริษัท
+    </div>
+    <div class="body-content">
+        <ul class="nav-tabs">
+            <li class="nav-item" *ngFor="let item of [{id:'tab1',text:'ทะเบียนบริษัท'},
+            {id:'tab2',text:'สาขาและหน่วยธุรกิจ'}]" (click)="changeTab(item)">
+                <a [class.active]="activeTab === item.id" class="nav-link">{{item.text}}</a>
+            </li>
+        </ul>
+        <div class="tab-content">
+            <div *ngIf="activeTab === 'tab1'" class="tab-pane">
+                <p>ทะเบียนบริษัท</p>
+            </div>
+            <div *ngIf="activeTab === 'tab2'" class="tab-pane">
+                <div class="mt-5"></div>
+                <app-branch-business-unit [pathTitle]="pathTitle"
+                    (sendPathTitle)="pathTitle=$event"></app-branch-business-unit>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/components/company-registration/company-registration.component.scss

+/* สไตล์ของแถบเมนู */
+.nav-tabs {
+    display: flex;
+    border-bottom: 2px solid #ccc; /* เส้นใต้ */
+    width: 100%;
+    cursor: pointer;
+}
+
+.nav-item {
+    list-style: none;
+    margin-right: 10px; /* ช่องว่างระหว่างเมนู */
+}
+
+.nav-link {
+    text-decoration: none;
+    padding: 10px 20px;
+    display: inline-block;
+    font-size: large;
+}
+
+.nav-link:hover {
+    background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
+}
+
+.nav-link.active {
+    color: #569bf5; /* สีตัวอักษรในสถานะ active */
+    font-size: large;
+    border-bottom: 3.5px solid #569bf5; /* เส้นใต้ */
+}
+
+.tab-content {
+    margin-top: 20px;
+}
+
+.tab-pane.active {
+    display: block;
+}

src/app/components/company-registration/company-registration.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-company-registration',
+  templateUrl: './company-registration.component.html',
+  styleUrls: ['./company-registration.component.scss']
+})
+export class CompanyRegistrationComponent {
+  pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'ทะเบียนบริษัท']
+  activeTab: string = 'tab1';
+
+  // ฟังก์ชันในการเปลี่ยนแท็บ
+  changeTab(tab: { id: string, text: string }) {
+    this.pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', tab.text]
+    this.activeTab = tab.id
+  }
+}

src/app/components/dashboard/dashboard-routing.module.ts

@@ -12,28 +12,29 @@ import { PersonalComponent } from './personal/personal.component';
 import { ProjectsComponent } from './projects/projects.component';
 import { StocksComponent } from './stocks/stocks.component';
 import { CourseComponent } from './course/course.component';
-
+import { CompanyRegistrationComponent } from '../company-registration/company-registration.component';
 const routes: Routes = [
+  {
+    path: "",
+    children: [
+      { path: "dashboard/analytics", component: AnalyticsComponent },
+      { path: "dashboard/crypto", component: CryptoComponent },
+      { path: "dashboard/ecommerce", component: EcommerceComponent },
+      { path: "dashboard/sales", component: SalesComponent },
+      { path: "dashboard/crm", component: CrmComponent },
+      { path: "dashboard/jobs", component: JobsComponent },
+      { path: "dashboard/hrm", component: HrmComponent },
+      { path: "dashboard/personal", component: PersonalComponent },
+      { path: "dashboard/nft", component: NftComponent },
+      { path: "dashboard/projects", component: ProjectsComponent },
+      { path: "dashboard/stocks", component: StocksComponent },
+      { path: "dashboard/course", component: CourseComponent },
 
-{  path:"",
-  children:[
-    {path:"dashboard/analytics", component:AnalyticsComponent},
-    {path:"dashboard/crypto",component: CryptoComponent},
-    {path:"dashboard/ecommerce",component: EcommerceComponent},
-    {path:"dashboard/sales",component: SalesComponent},
-    {path:"dashboard/crm",component: CrmComponent},
-    {path:"dashboard/jobs",component:JobsComponent },
-   {path:"dashboard/hrm",component:HrmComponent },
-   {path:"dashboard/personal",component:PersonalComponent },
-   {path:"dashboard/nft",component:NftComponent },
-   {path:"dashboard/projects",component:ProjectsComponent },
-   {path:"dashboard/stocks",component:StocksComponent },
-   {path:"dashboard/course",component:CourseComponent },
-
-  ]}
-
+      // myComponent
+      { path: "company-registration", component: CompanyRegistrationComponent },
+    ]
+  }
 ];
-
 @NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]

src/app/components/dashboard/dashboard.module.ts

@@ -20,6 +20,9 @@ import { CarouselModule } from 'ngx-owl-carousel-o';
 import { SharedModule } from 'src/app/shared/sharedmodule';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { NgSelectModule } from '@ng-select/ng-select';
+import { CompanyRegistrationComponent } from '../company-registration/company-registration.component';
+import { DepartmentRegisterComponent } from '../company-registration/branch-business-unit/department-register/department-register.component';
+import { BranchBusinessUnitComponent } from '../company-registration/branch-business-unit/branch-business-unit.component';
 @NgModule({
   declarations: [
     SalesComponent,
@@ -34,6 +37,11 @@ import { NgSelectModule } from '@ng-select/ng-select';
     PersonalComponent,
     StocksComponent,
     CourseComponent,
+
+    // my Component
+    CompanyRegistrationComponent,
+    BranchBusinessUnitComponent,
+    DepartmentRegisterComponent
   ],
   imports: [
     CommonModule,
@@ -46,4 +54,4 @@ import { NgSelectModule } from '@ng-select/ng-select';
     NgSelectModule,
   ],
 })
-export class DashboardModule {}
+export class DashboardModule { }

src/app/shared/components/page-header/page-header.component.html

-    <!-- Page Header -->
+<ng-container *ngTemplateOutlet="title ? pageHeaderOriginal : pageHeaderNew"></ng-container>
+
+
+<ng-template #pageHeaderNew>
+  <!-- Page Header New -->
+  <div class="block justify-between page-header sm:flex">
+    <ol class="flex items-center whitespace-nowrap min-w-0">
+      <li class="text-sm text-gray-500 hover:text-primary dark:text-white/70 " aria-current="page"
+        *ngFor="let item of pathTitle;let l = last">
+        <span class="flex items-center">
+          {{item}}
+          <i *ngIf="!l" class="ri-arrow-right-s-line mx-3 text-gray-500"></i>
+        </span>
+      </li>
+    </ol>
+  </div>
+  <!-- Page Header Close -->
+</ng-template>
+
+
+<ng-template #pageHeaderOriginal>
+  <!-- Page Header Original -->
   <div class="block justify-between page-header sm:flex">
     <div>
-          <h3 class="text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-white text-2xl font-medium">{{title}}</h3>
+      <h3 class="text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-white text-2xl font-medium">{{title}}
+      </h3>
     </div>
     <ol class="flex items-center whitespace-nowrap min-w-0">
       <li class="text-sm">
-            <a class="flex items-center font-semibold text-primary hover:text-primary dark:text-primary truncate" href="javascript:void(0);">
+        <a class="flex items-center font-semibold text-primary hover:text-primary dark:text-primary truncate"
+          href="javascript:void(0);">
           {{activeitem}}
-              <i class="ti ti-chevrons-right flex-shrink-0 mx-3 overflow-visible text-gray-300 dark:text-gray-300 rtl:rotate-180"></i>
+          <i
+            class="ti ti-chevrons-right flex-shrink-0 mx-3 overflow-visible text-gray-300 dark:text-gray-300 rtl:rotate-180"></i>
         </a>
       </li>
       <li class="text-sm text-gray-500 hover:text-primary dark:text-white/70 " aria-current="page">
@@ -16,3 +40,4 @@
     </ol>
   </div>
   <!-- Page Header Close -->
+</ng-template>
\ No newline at end of file

src/app/shared/components/page-header/page-header.component.ts

@@ -9,6 +9,7 @@ export class PageHeaderComponent {
   @Input() title!: string;
   @Input() title1!:string;
   @Input() activeitem!: string;
+  @Input() pathTitle: string[] = []
   constructor() { }
 
   ngOnInit(): void {

src/app/shared/routes/fullroutes.ts

@@ -6,7 +6,6 @@ export const content: Routes = [
     path: '',
     loadChildren: () => import('../../components/dashboard/dashboard.module').then(m => m.DashboardModule)
   },
-
   {
     path: '',
     loadChildren: () => import('../../components/widgets/widgets.module').then(m => m.WidgetsModule)
@@ -69,4 +68,4 @@ export const content: Routes = [
     loadChildren: () => import('../../components/icons/icons.module').then(m => m.IconsModule)
   },
 
- ];
+];

src/app/shared/services/navservice.ts

@@ -86,13 +86,26 @@ export class NavService implements OnDestroy {
   }
 
   MENUITEMS: Menu[] = [
+    { headTitle: 'การจัดการข้อมูลองค์กร' },
+    {
+      title: 'ทะเบียนบริษัท',
+      type: 'link',
+      selected: false,
+      active: false,
+      path: '/company-registration'
+    },
+
+
+
+
+
     // Dashboard
     { headTitle: 'การประเมินผล' },
     {
       title: 'การประเมินตนเอง',
       icon: 'home-8-line',
       type: 'link',
-      selected : false,
+      selected: false,
       active: false,
       path: '/dashboard/sales',
       // children: [
@@ -113,7 +126,7 @@ export class NavService implements OnDestroy {
       badgeClass: 'badge badge-sm bg-secondary badge-hide',
       badgeValue: 'new',
       path: '/widgets',
-      selected : false,
+      selected: false,
       type: 'link',
     },
     // {

src/styles.scss

@@ -34,7 +34,6 @@
 
 // dark styles start
 
-
 @media (min-width: 992px) {
   [data-nav-layout="horizontal"][dir="rtl"] .main-menu-container {
     .slide-right {
@@ -65,10 +64,7 @@
 }
 
 @media (min-width: 992px) {
-  [data-nav-style="icon-click"][toggled="icon-click-closed"]:not(
-      [data-nav-layout="horizontal"]
-    )
-    .main-menu {
+  [data-nav-style="icon-click"][toggled="icon-click-closed"]:not([data-nav-layout="horizontal"]) .main-menu {
     @apply ltr:ps-[2rem] ltr:pe-[1.219rem] rtl:pe-[2rem] rtl:ps-[1.219rem];
   }
 }
@@ -145,9 +141,7 @@
   .mat-mdc-form-field-infix {
     width: 90px;
   }
-  .timepicker
-    .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined)
-    .mat-mdc-form-field-infix {
+  .timepicker .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix {
     margin-inline-start: 10px;
   }
 }
@@ -233,17 +227,12 @@
 ngx-dropzone {
   @apply border-gray-200 dark:border-white/10 h-20 #{!important};
 }
-.ng-select.ng-select-multiple
-  .ng-select-container
-  .ng-value-container
-  .ng-value
-  .ng-value-icon:hover {
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover {
   @apply bg-primary;
 }
 
 /* custom styles */
 
-
 /* custom styles */
 
 @media (min-width: 992px) {
@@ -251,7 +240,7 @@ ngx-dropzone {
   [data-nav-style="menu-hover"] {
     .app-sidebar {
       .slide.has-sub {
-        .child1>.sub-slide:hover>.child2{
+        .child1 > .sub-slide:hover > .child2 {
           @apply block -mt-[30px] #{!important};
         }
       }
@@ -264,7 +253,7 @@ ngx-dropzone {
 }
 /* advanced forms */
 
-.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container {
+.ng-select.ng-select-focused:not(.ng-select-opened) > .ng-select-container {
   @apply shadow-none;
 }
 
@@ -296,7 +285,7 @@ ngx-dropzone {
     @apply stroke-[#fff];
   }
   .ae-font .ae-picker-label:hover:before {
-    background: linear-gradient(to right,#293549 100%,#293549 100%);
+    background: linear-gradient(to right, #293549 100%, #293549 100%);
   }
   .ae-font.ae-expanded .ae-picker-options {
     @apply border-white/10;
@@ -356,3 +345,154 @@ ngx-dropzone {
   }
 }
 /* colorpicker */
+
+.body-content {
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem 1rem 1rem 1rem;
+}
+.head-title {
+  color: rgb(var(--color-primary));
+  font-weight: 700;
+  display: flex;
+  padding: 1rem 1rem 0.5rem 1rem;
+  font-size: x-large;
+}
+.bg-card-white {
+  background-color: #ffffff;
+  height: 100vh;
+  position: fixed;
+  z-index: -1;
+  width: 100vw;
+  right: 1.5rem;
+}
+.block-main-content {
+  background: white;
+  margin-left: -1.5rem;
+}
+@media (min-width: 480px) {
+  .bg-card-white {
+    background-color: #ffffff;
+    height: 100vh;
+    position: fixed;
+    z-index: -1;
+    width: 100vw;
+    right: 1.75rem;
+  }
+  .block-main-content {
+    background: white;
+    margin-left: -1.75rem;
+  }
+}
+
+.input-wrapper {
+  position: relative;
+  max-width: 20rem;
+  box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 24px;
+  display: flex;
+  align-items: center; // จัดให้อยู่กลางในแนวตั้ง
+  justify-content: space-between; // จัดไอคอนให้ไปอยู่ข้างขวา
+}
+
+.input-wrapper input {
+  font-family: Montserrat !important;
+  padding: 0.5rem;
+  padding-left: 2.5rem; // เพิ่มพื้นที่สำหรับไอคอน
+}
+
+.input-wrapper .icon {
+  position: absolute;
+  left: 1rem; // ตำแหน่งไอคอนที่ซ้าย
+  pointer-events: none; // ไอคอนไม่ทำให้การคลิกใน input หยุด
+}
+
+.button-blue-light {
+  min-width: 5rem;
+  background-color: #e6f0ff;
+  --tw-text-opacity: 1;
+  color: #569bf5;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.25rem;
+  border-width: 1px;
+  border-color: transparent;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 24px;
+}
+.button-purple-light {
+  min-width: 5rem;
+  background-color: #f1e4fe;
+  --tw-text-opacity: 1;
+  color: #9f49f1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.25rem;
+  border-width: 1px;
+  border-color: transparent;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 24px;
+}
+.button-yellow-light {
+  min-width: 5rem;
+  background-color: #fef8bf;
+  --tw-text-opacity: 1;
+  color: #e7a927;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.25rem;
+  border-width: 1px;
+  border-color: transparent;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 24px;
+}
+
+.shadow-gray-smoke {
+  box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 24px;
+}
+
+.head-table {
+  padding: 10px 20px; /* เพิ่มระยะขอบ */
+  font-weight: bold !important;
+  font-size: large !important;
+  background-color: #e6f0ff; /* พื้นหลังสำหรับ header */
+  color: rgb(var(--color-primary));
+}
+
+.head-table-icon {
+  fill: rgb(var(--color-primary)); /* สีไอคอน */
+  margin: auto;
+}
+.body-table-center {
+  display: flex;
+  justify-content: center;
+}