@goat-bravos/intern-hub-layout 1.0.0

package/src/libs/layouts/main-layout-test/main-layout-test.component.ts

@@ -0,0 +1,121 @@
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterOutlet } from '@angular/router';
+
+import { ApprovalListItemInterface } from '../../shared/components/approval/approval-list-item/approval-list-item.model';
+import { ButtonContainerComponent } from '../../shared/components/button/button-container/button-container.component';
+import { InputTextComponent } from '../../shared/components/input/input-text/input-text.component';
+import { InputCalendarComponent } from '../../shared/components/input/input-calendar/input-calendar.component';
+import { ApprovalListComponent } from '../../shared/components/approval/approval-list/approval-list.component';
+import { PopUpConfirmComponent } from '../../shared/components/pop-up/pop-up-confirm/pop-up-confirm.component';
+import { InputStepperComponent } from '../../shared/components/input/input-stepper/input-stepper.component';
+import { TableBodyComponent } from '../../shared/components/table/table-body/table-body.component';
+import {
+  ColumnConfig,
+  TableHeaderComponent,
+} from '../../shared/components/table/table-header/table-header.component';
+
+@Component({
+  selector: 'app-main-layout-test',
+  standalone: true,
+  imports: [
+    CommonModule,
+    RouterOutlet,
+    ButtonContainerComponent,
+    ApprovalListComponent,
+    InputTextComponent,
+    InputCalendarComponent,
+    PopUpConfirmComponent,
+    InputStepperComponent,
+    TableBodyComponent,
+    TableHeaderComponent,
+  ],
+  templateUrl: './main-layout-test.component.html',
+  styleUrls: ['./main-layout-test.component.scss'],
+})
+export class MainLayoutTestComponent {
+  @ViewChild('textRight', { static: true })
+  textRight!: TemplateRef<any>;
+
+  @ViewChild('buttonRight', { static: true })
+  buttonRight!: TemplateRef<any>;
+
+  // Sample data for approval list
+  approvalRows: ApprovalListItemInterface[] = [
+    { name: 'Nguyễn Văn A', date: new Date('2026-01-15') },
+    { name: 'Trần Thị B', date: new Date('2026-01-20') },
+    { name: 'Lê Văn C', date: new Date('2026-01-25') },
+    { name: 'Phạm Thị D', date: new Date('2026-01-28') },
+  ];
+  tableBackgroundColor = 'var(--brand-600)';
+
+  columns: ColumnConfig[] = [
+    { key: 'name', header: 'Tên', width: '20%' },
+    { key: 'role', header: 'Chức vụ', width: '15%' },
+    { key: 'status', header: 'Trạng thái', width: '15%' },
+    { key: 'email', header: 'Email', width: '30%' },
+    { key: 'date', header: 'Ngày', width: '20%' },
+  ];
+
+  rows = [
+    {
+      name: 'Nguyễn Văn A',
+      role: 'Developer',
+      status: 'Active',
+      email: 'a.nguyen@example.com',
+      date: '15/01/2026',
+    },
+    {
+      name: 'Trần Thị B',
+      role: 'Tester',
+      status: 'Inactive',
+      email: 'b.tran@example.com',
+      date: '20/01/2026',
+    },
+    {
+      name: 'Lê Văn C',
+      role: 'Manager',
+      status: 'Active',
+      email: 'c.le@example.com',
+      date: '25/01/2026',
+    },
+    {
+      name: 'Phạm Thị D',
+      role: 'Designer',
+      status: 'Pending',
+      email: 'd.pham@example.com',
+      date: '28/01/2026',
+    },
+  ];
+
+  showPopup = false;
+
+  onButtonClick(buttonName: string): void {
+    console.log(`Button clicked: ${buttonName}`);
+    this.showPopup = true;
+  }
+
+  onPopupConfirm(): void {
+    console.log('✅ Popup confirmed!');
+    this.showPopup = false;
+  }
+
+  onPopupCancel(): void {
+    console.log('❌ Popup cancelled!');
+    this.showPopup = false;
+  }
+
+  // Password toggle logic demo
+  passwordType: 'text' | 'password' = 'password';
+  passwordIcon: string = 'fa-solid fa-eye-slash';
+
+  togglePassword(): void {
+    if (this.passwordType === 'password') {
+      this.passwordType = 'text';
+      this.passwordIcon = 'fa-solid fa-eye';
+    } else {
+      this.passwordType = 'password';
+      this.passwordIcon = 'fa-solid fa-eye-slash';
+    }
+  }
+}

package/src/libs/layouts/sidebar/sidebar.component.html

@@ -0,0 +1,7 @@
+<div class="sidebar-wrapper">
+  <aside class="sidebar">
+    @for (item of menuItems; track $index) {
+      <app-functional-label [icon]="item.icon" [content]="item.content"></app-functional-label>
+    }
+  </aside>
+</div>

package/src/libs/layouts/sidebar/sidebar.component.scss

@@ -0,0 +1,38 @@
+// Sidebar Component - System Design Format
+:host {
+  display: block;
+  height: 100%; // Đảm bảo component chiếm hết chiều cao của cha
+}
+
+.sidebar-wrapper {
+  width: 56px;
+  height: 100%;
+  transition: width 0.3s ease;
+}
+
+.sidebar {
+  width: 56px;
+  height: 100%;
+  padding: 8px;
+  box-sizing: border-box; // Giữ nguyên chiều cao khi thay đổi padding
+
+  background-color: var(--brand-600);
+  // Bo góc trên, nhưng bỏ bo góc dưới để tràn xuống
+  border-radius: 16px;
+
+  overflow: hidden;
+
+  transition:
+    width 0.3s ease,
+    padding 0.3s ease,
+    background-color 0.3s ease;
+}
+
+.sidebar-wrapper:hover {
+  width: 344px;
+  .sidebar {
+    width: 344px;
+    padding: 16px;
+    background-color: var(--theme-neutral-light-100);
+  }
+}

package/src/libs/layouts/sidebar/sidebar.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FunctionalLabelComponent } from '../../shared/components/functional-label/functional-label.component';
+
+export interface SidebarItem {
+  icon: string;
+  content: string;
+}
+
+@Component({
+  selector: 'app-sidebar',
+  standalone: true,
+  imports: [CommonModule, FunctionalLabelComponent],
+  templateUrl: './sidebar.component.html',
+  styleUrls: ['./sidebar.component.scss'],
+})
+export class SidebarComponent {
+  @Input() menuItems: SidebarItem[] = [];
+}

package/src/libs/shared/components/approval/approval-list/approval-list.component.html

@@ -0,0 +1,19 @@
+<div class="approval-list" [style.width]="width">
+  <div class="approval-list-header">
+    <span class="approval-list-header-left">{{ headerContentRight }}</span>
+    <div>
+      <p>{{ headerContentLeft }}</p>
+    </div>
+  </div>
+
+  <div class="approval-list-content" [style.width]="width">
+    <app-approval-list-item
+      *ngFor="let row of rows"
+      [name]="row.name"
+      [date]="row.date"
+      [rightTemplate]="row.rightTemplate"
+      [rightContext]="row.rightContext"
+    >
+    </app-approval-list-item>
+  </div>
+</div>

package/src/libs/shared/components/approval/approval-list/approval-list.component.scss

@@ -0,0 +1,24 @@
+.approval-list {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--theme-neutral-light-100);
+  border-radius: 16px;
+}
+
+.approval-list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 8px;
+  height: fit-content;
+}
+
+.approval-list-header span {
+  font-size: 20px;
+  color: var(--brand-600);
+  font-weight: bold;
+}
+
+.approval-list-header p {
+  font-size: var(--font-sm);
+}

package/src/libs/shared/components/approval/approval-list/approval-list.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ApprovalListItemInterface } from '../approval-list-item/approval-list-item.model';
+import { ApprovalListItemComponent } from '../approval-list-item/approval-list-item.component';
+
+@Component({
+  selector: 'app-approval-list',
+  standalone: true,
+  imports: [CommonModule, ApprovalListItemComponent],
+  templateUrl: './approval-list.component.html',
+  styleUrls: ['./approval-list.component.scss'],
+})
+export class ApprovalListComponent {
+  @Input() rows: ApprovalListItemInterface[] = [];
+
+  @Input() headerContentRight!: string;
+  @Input() headerContentLeft!: string;
+  @Input() width!: string;
+}

package/src/libs/shared/components/approval/approval-list-item/approval-list-item.component.html

@@ -0,0 +1,21 @@
+<div class="approval-item">
+  <!-- LEFT -->
+  <div class="approval-item-left">
+    <span class="approval-item-left-name">{{ name }}</span>
+    <span class="approval-item-left-date">
+      <span class="approval-item-left-date-title">Ngày tạo đơn:</span>
+      {{ date | date: 'dd/MM/yyyy' }}
+    </span>
+  </div>
+
+  <div class="approval-item-right">
+    <ng-container *ngIf="rightTemplate; else defaultRight">
+      <ng-container *ngTemplateOutlet="rightTemplate; context: rightContext">
+      </ng-container>
+    </ng-container>
+
+    <ng-template #defaultRight>
+      <span class="text-gray-400">—</span>
+    </ng-template>
+  </div>
+</div>

package/src/libs/shared/components/approval/approval-list-item/approval-list-item.component.scss

@@ -0,0 +1,28 @@
+.approval-item {
+  display: flex;
+  justify-content: space-between;
+  min-width: 400px;
+  height: fit-content;
+  align-items: center;
+  padding: 16px 8px;
+}
+
+.approval-item-left-date-title {
+  color: var(--theme-neutral-500);
+}
+
+.approval-item-right p {
+  color: var(--secondary-800);
+  font-weight: 500;
+}
+
+.approval-item-left {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+span,
+p {
+  font-size: var(--font-sm);
+}

package/src/libs/shared/components/approval/approval-list-item/approval-list-item.component.ts

@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, TemplateRef } from '@angular/core';
+
+@Component({
+  selector: 'app-approval-list-item',
+  templateUrl: './approval-list-item.component.html',
+  styleUrls: ['./approval-list-item.component.scss'],
+  imports: [CommonModule],
+  standalone: true
+})
+export class ApprovalListItemComponent {
+  @Input() name!: string;
+  @Input() date!: Date;
+  @Input() rightTemplate?: TemplateRef<any>;
+  @Input() rightContext: any = {};
+
+  get parsedDate(): Date {
+    return new Date(this.date);
+  }
+}

package/src/libs/shared/components/approval/approval-list-item/approval-list-item.model.ts

@@ -0,0 +1,8 @@
+import { TemplateRef } from '@angular/core';
+
+export interface ApprovalListItemInterface {
+  name: string;
+  date: Date;
+  rightTemplate?: TemplateRef<any>;
+  rightContext?: any;
+}

package/src/libs/shared/components/button/button-container/button-container.component.html

@@ -0,0 +1,20 @@
+<button class="button-container" [style.minWidth]="sizeStyle.minWidth" [style.minHeight]="sizeStyle.minHeight" [style.color]="color"
+    [style.backgroundColor]="backgroundColor" [style.borderColor]="borderColor" (click)="handleClick()">
+    
+    @if(leftIcon){
+    <i class="button-icon" [style.width]="sizeStyle.iconSize" [style.height]="sizeStyle.iconSize" [style.fontSize]="sizeStyle.iconSize">
+        {{leftIcon}}
+    </i>
+    }
+
+    <span class="button-content" [style.minWidth]="sizeStyle.contentWidth" [style.minHeight]="sizeStyle.contentHeight" 
+        [style.fontSize]="fontSize || sizeStyle.fontSize" [style.color]="color">
+        {{ content }}
+    </span>
+
+    @if(rightIcon){
+    <i class="button-icon" [style.width]="sizeStyle.iconSize" [style.height]="sizeStyle.iconSize" [style.fontSize]="sizeStyle.iconSize" [style.color]="color">
+        {{rightIcon}}
+    </i>
+    }
+</button>

package/src/libs/shared/components/button/button-container/button-container.component.scss

@@ -0,0 +1,49 @@
+// Button Container Component - System Design Format
+
+.button-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  padding: 8px 16px;
+  border: none;
+  font-weight: 500;
+  transition:
+    filter 0.15s ease,
+    transform 0.1s ease;
+
+  // Hover: sáng hơn một chút
+  &:hover {
+    filter: brightness(1.1);
+  }
+
+  // Active/Pressing: tối hơn một chút
+  &:active {
+    filter: brightness(0.9);
+    transform: scale(0.98);
+  }
+
+  // Focus state
+  &:focus {
+    outline: 2px solid var(--brand-600);
+    outline-offset: 2px;
+  }
+}
+
+.button-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.button-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}

package/src/libs/shared/components/button/button-container/button-container.component.ts

@@ -0,0 +1,38 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+    ButtonSize,
+    BUTTON_SIZE_MAP
+} from './button-container.model';
+
+@Component({
+    selector: 'app-button-container',
+    standalone: true,
+    imports: [CommonModule],
+    templateUrl: './button-container.component.html',
+    styleUrls: ['./button-container.component.scss']
+})
+export class ButtonContainerComponent {
+
+    @Input() size: ButtonSize = 'md';
+    @Input() content = '';
+
+    @Input() fontSize?: string;
+
+    @Input() leftIcon?: string;
+    @Input() rightIcon?: string;
+
+    @Input() color = 'var(--brand-100)';
+    @Input() backgroundColor = 'var(--utility-900)';
+    @Input() borderColor = 'var(--brand-100)';
+
+    @Output() buttonClick = new EventEmitter<any>();
+
+    get sizeStyle() {
+        return BUTTON_SIZE_MAP[this.size];
+    }
+
+    handleClick(): void {
+        this.buttonClick.emit();
+    }
+}

package/src/libs/shared/components/button/button-container/button-container.model.ts

@@ -0,0 +1,58 @@
+export interface ButtonContainerInterface {
+    size: ButtonSize;
+    leftIcon?: string;
+    rightIcon?: string;
+    content: string;
+    event?: string;
+    fontSize?: string;
+    color?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+}
+
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+
+export interface ButtonSizeConfig {
+    minWidth: string;
+    minHeight: string;
+    fontSize: string;
+    iconSize: string;
+    contentWidth: string;
+    contentHeight: string;
+}
+
+export const BUTTON_SIZE_MAP: Record<ButtonSize, ButtonSizeConfig> = {
+    xs: {
+        minWidth: '47px',
+        minHeight: '24px',
+        fontSize: 'var(--font-xs)',
+        iconSize: '14px',
+        contentWidth: '32px',
+        contentHeight: '16px',
+    },
+    sm: {
+        minWidth: '96px',
+        minHeight: '28px',
+        fontSize: 'var(--font-sm)',
+        iconSize: '16px',
+        contentWidth: '44px',
+        contentHeight: '20px',
+    },
+    md: {
+        minWidth: '116px',
+        minHeight: '36px',
+        fontSize: 'var(--font-sm)',
+        iconSize: '20px',
+        contentWidth: '52px',
+        contentHeight: '20px',
+    },
+    lg: {
+        minWidth: '120px',
+        minHeight: '44px',
+        fontSize: 'var(--font-sm)',
+        iconSize: '20px',
+        contentWidth: '52px',
+        contentHeight: '20px',
+    },
+};
+

package/src/libs/shared/components/button/label-button/label-button.component.html

@@ -0,0 +1,11 @@
+<button
+  [style.background-color]="bgColor"
+  [style.border-color]="borderColor"
+  [style.color]="textColor"
+  [style.width]="width"
+  [style.height]="height"
+  class="label-button"
+  type="button"
+>
+  {{ label }}
+</button>

package/src/libs/shared/components/button/label-button/label-button.component.scss

@@ -0,0 +1,13 @@
+.label-button {
+  padding: 16px 8px;
+  border-radius: 16px;
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-color);
+  font-size: var(--font-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-xs);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}

package/src/libs/shared/components/button/label-button/label-button.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-label-button',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './label-button.component.html',
+  styleUrls: ['./label-button.component.scss'],
+})
+export class LabelButtonComponent {
+  @Input() label: string = '';
+  @Input() bgColor: string = '';
+  @Input() borderColor: string = '';
+  @Input() width: string = '100%';
+  @Input() height: string = '28px';
+  @Input() textColor: string = 'var(--neutral-100)';
+}

package/src/libs/shared/components/functional-label/functional-label.component.html

@@ -0,0 +1,4 @@
+<div class="functional-label">
+  <i class="{{ icon }}"></i>
+  <a href="/*" class="color-text-neutral-700">{{ content }}</a>
+</div>

package/src/libs/shared/components/functional-label/functional-label.component.scss

@@ -0,0 +1,58 @@
+// Functional Label Component - System Design Format
+
+.functional-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  height: 36px;
+  gap: 0;
+  padding: 4px 8px;
+  cursor: pointer;
+
+  transition:
+    gap 0.25s ease,
+    justify-content 0.25s ease;
+}
+
+.functional-label-icon {
+  min-width: 20px;
+  height: 20px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  flex-shrink: 0;
+
+  color: var(--neutral-color-200);
+}
+
+.functional-label a {
+  min-width: 100px;
+  white-space: nowrap;
+  display: none;
+  padding: 8px;
+
+  color: var(--neutral-color-200);
+  font-size: var(--font-sm);
+  text-decoration: none;
+
+  opacity: 0;
+  transform: translateX(-8px);
+
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease;
+}
+
+:host-context(.sidebar-wrapper:hover) .functional-label {
+  justify-content: flex-start;
+  gap: 12px;
+}
+
+:host-context(.sidebar-wrapper:hover) .functional-label a {
+  opacity: 1;
+  transform: translateX(0);
+  display: block;
+}

package/src/libs/shared/components/functional-label/functional-label.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-functional-label',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './functional-label.component.html',
+  styleUrls: ['./functional-label.component.scss']
+})
+export class FunctionalLabelComponent {
+  @Input() icon?: string;
+  @Input() content: string = '';
+
+}