@goat-bravos/intern-hub-layout 1.0.2 → 1.0.3

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

@@ -1,96 +0,0 @@
-// Header Component - System Design Format
-
-.app-header {
-  height: 70px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 8px;
-  width: 100%;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-}
-
-.logo {
-  height: 46px;
-  width: 93px;
-  object-fit: contain;
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-// Icon Button
-.header-btn {
-  position: relative;
-  width: 36px;
-  height: 36px;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  background: transparent;
-  border-radius: var(--radius-full);
-  border: none;
-
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-}
-
-.header-btn:hover {
-  background-color: var(--neutral-color-100);
-}
-
-.icon {
-  font-size: var(--font-lg);
-}
-
-// User Section
-.header-user {
-  margin-left: 8px;
-}
-
-.user-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-
-  padding: 4px 8px;
-
-  background: transparent;
-  border: none;
-  border-radius: var(--radius-full);
-
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-}
-
-.user-btn:hover {
-  background-color: var(--neutral-color-100);
-}
-
-.avatar {
-  width: 28px;
-  height: 28px;
-  border-radius: var(--radius-full);
-  object-fit: cover;
-}
-
-.user-name {
-  font-size: var(--font-sm);
-  font-weight: 500;
-  color: var(--neutral-color-875);
-  white-space: nowrap;
-}
-
-.caret {
-  font-size: var(--font-xs);
-  color: var(--neutral-color-600);
-}

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

@@ -1,13 +0,0 @@
-import { Component } from "@angular/core";
-
-@Component({
-  selector: 'app-header-component',
-  standalone: true,
-
-  templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss']
-})
-export class HeaderComponent {
-        
-
-}

package/src/libs/layouts/main-layout/main-layout.component.html

@@ -1,15 +0,0 @@
-<div class="web-container">
-  <div class="main-layout">
-    <app-header-component></app-header-component>
-
-    <div class="layout-body">
-      <div class="layout-body-sidebar">
-        <app-sidebar [menuItems]="sidebarItems"></app-sidebar>
-      </div>
-
-      <div class="layout-body-content">
-        <router-outlet />
-      </div>
-    </div>
-  </div>
-</div>

package/src/libs/layouts/main-layout/main-layout.component.scss

@@ -1,35 +0,0 @@
-// Main Layout Component - System Design Format
-
-.web-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--brand-100);
-}
-
-.main-layout {
-  background-color: var(--brand-100);
-  min-height: 100vh; /* Grow with content */
-  display: flex;
-  flex-direction: column;
-  padding: 4px;
-  max-width: 1370px;
-  min-width: 1370px;
-  width: 1370px;
-}
-
-.layout-body {
-  padding: 16px 8px;
-  margin: 0;
-  display: flex;
-  height: 100%;
-  justify-content: space-between;
-}
-
-.layout-body-content {
-  flex: 1;
-}
-
-.layout-body-sidebar {
-  margin-right: 20px;
-}

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

@@ -1,17 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterOutlet } from '@angular/router';
-
-import { HeaderComponent } from '../header/header.component';
-import { SidebarComponent, SidebarItem } from '../sidebar/sidebar.component';
-
-@Component({
-  selector: 'app-main-layout',
-  standalone: true,
-  imports: [CommonModule, RouterOutlet, HeaderComponent, SidebarComponent],
-  templateUrl: './main-layout.component.html',
-  styleUrls: ['./main-layout.component.scss'],
-})
-export class MainLayoutComponent {
-  @Input() sidebarItems: SidebarItem[] = [];
-}

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

@@ -1,296 +0,0 @@
-<ng-template #textRight let-content>
-  <p class="text-gray-700">{{ content }}</p>
-</ng-template>
-
-<ng-template #buttonRight let-onClick="onClick">
-  <button class="px-4 py-2 bg-black text-white rounded hover:bg-gray-800" (click)="onClick()">
-    Xem chi tiết
-  </button>
-</ng-template>
-
-<!-- DEMO BUTTON AREA -->
-<div class="demo-buttons">
-  <!-- Row 1: Brand buttons -->
-  <app-button-container
-    size="xs"
-    content="XS"
-    backgroundColor="var(--brand-600)"
-    color="#fff"
-    (buttonClick)="onButtonClick('XS Brand')"
-  ></app-button-container>
-  <app-button-container
-    size="sm"
-    content="SM Button"
-    leftIcon="◀"
-    rightIcon="▶"
-    backgroundColor="var(--brand-600)"
-    color="#fff"
-    (buttonClick)="onButtonClick('SM Brand')"
-  ></app-button-container>
-  <app-button-container
-    size="md"
-    content="MD Button"
-    leftIcon="◀"
-    rightIcon="▶"
-    backgroundColor="var(--brand-600)"
-    color="#fff"
-    (buttonClick)="onButtonClick('MD Brand')"
-  ></app-button-container>
-  <app-button-container
-    size="lg"
-    content="LG Button"
-    leftIcon="◀"
-    rightIcon="▶"
-    backgroundColor="var(--brand-600)"
-    color="#fff"
-    (buttonClick)="onButtonClick('LG Brand')"
-  ></app-button-container>
-</div>
-
-<div class="demo-buttons">
-  <!-- Row 2: Primary buttons -->
-  <app-button-container
-    size="xs"
-    content="XS"
-    backgroundColor="var(--primary-600)"
-    color="#fff"
-    (buttonClick)="onButtonClick('XS Primary')"
-  ></app-button-container>
-  <app-button-container
-    size="sm"
-    content="SM Button"
-    leftIcon="★"
-    rightIcon="★"
-    backgroundColor="var(--primary-600)"
-    color="#fff"
-    (buttonClick)="onButtonClick('SM Primary')"
-  ></app-button-container>
-  <app-button-container
-    size="md"
-    content="MD Button"
-    leftIcon="★"
-    rightIcon="★"
-    backgroundColor="var(--primary-600)"
-    color="#fff"
-    (buttonClick)="onButtonClick('MD Primary')"
-  ></app-button-container>
-  <app-button-container
-    size="lg"
-    content="LG Button"
-    leftIcon="★"
-    rightIcon="★"
-    backgroundColor="var(--primary-600)"
-    color="#fff"
-    (buttonClick)="onButtonClick('LG Primary')"
-  ></app-button-container>
-</div>
-
-<!-- APPROVAL LIST DEMO -->
-<div class="demo-approval-list">
-  <app-approval-list
-    [rows]="approvalRows"
-    headerContentLeft="Thao tác"
-    headerContentRight="Danh sách chờ duyệt"
-    width="600px"
-  >
-  </app-approval-list>
-</div>
-
-<!-- INPUT TEXT DEMO SECTION -->
-<div class="demo-section">
-  <h3 class="demo-section-title">INPUT TEXT</h3>
-  <div class="input-text-demo-grid">
-    <!-- Row 1: Basic inputs -->
-    <app-input-text
-      headerInput="Input Label"
-      placeholder="Placeholder..."
-      [required]="true"
-      width="100%"
-      icon="dsi dsi-anchor-line dsi-theme-red-600"
-    ></app-input-text>
-
-    <app-input-text
-      headerInput="Input Label"
-      placeholder="Placeholder..."
-      [required]="true"
-      width="100%"
-    ></app-input-text>
-
-    <app-input-text placeholder="Placeholder..." width="100%"></app-input-text>
-
-    <app-input-text placeholder="Placeholder..." width="100%" [readonly]="true"></app-input-text>
-
-    <!-- Row 2: With helper text and character limit -->
-    <app-input-text
-      headerInput="Input Label"
-      placeholder="Placeholder..."
-      [required]="true"
-      [maxLength]="500"
-      [showLimit]="true"
-      width="100%"
-    ></app-input-text>
-
-    <app-input-text
-      headerInput="Input Label"
-      placeholder="Placeholder..."
-      [required]="true"
-      [maxLength]="500"
-      [showLimit]="true"
-      width="100%"
-    ></app-input-text>
-
-    <app-input-text
-      placeholder="Placeholder..."
-      [maxLength]="500"
-      [showLimit]="true"
-      width="100%"
-    ></app-input-text>
-
-    <app-input-text
-      placeholder="Placeholder..."
-      [maxLength]="500"
-      [showLimit]="true"
-      width="100%"
-      [readonly]="true"
-    ></app-input-text>
-  </div>
-</div>
-
-<!-- PASSWORD DEMO SECTION -->
-<div class="demo-section">
-  <h3 class="demo-section-title">PASSWORD INPUT</h3>
-  <div class="input-text-demo-grid">
-    <app-input-text
-      headerInput="Mật khẩu"
-      placeholder="Nhập mật khẩu..."
-      [typeInput]="passwordType"
-      [icon]="passwordIcon"
-      (iconClick)="togglePassword()"
-      [required]="true"
-      width="250px"
-    ></app-input-text>
-
-    <app-input-text
-      headerInput="Tìm kiếm"
-      placeholder="Tìm kiếm theo tên..."
-      icon="fa-solid fa-magnifying-glass"
-      width="250px"
-    ></app-input-text>
-  </div>
-</div>
-
-<!-- CALENDAR DEMO SECTION -->
-<div class="demo-section">
-  <h3 class="demo-section-title">CALENDAR INPUT</h3>
-  <div class="input-text-demo-grid">
-    <app-input-calendar
-      headerInput="Ngày sinh"
-      placeholder="dd/mm/yyyy"
-      [required]="true"
-    ></app-input-calendar>
-
-    <app-input-calendar
-      headerInput="Date Picker"
-      placeholder="dd/mm/yyyy"
-      [required]="true"
-    ></app-input-calendar>
-  </div>
-</div>
-
-<!-- STEPPER DEMO SECTION -->
-<div class="demo-section">
-  <h3 class="demo-section-title">INPUT STEPPER</h3>
-  <div class="stepper-demo-grid">
-    <!-- Default State -->
-    <app-input-stepper
-      headerInput="Input Label"
-      helperText="Placeholder of hint text to help"
-      [min]="0"
-      [max]="100"
-      [step]="1"
-      [value]="0"
-      [required]="true"
-      width="250px"
-    ></app-input-stepper>
-
-    <!-- Negative State -->
-    <app-input-stepper
-      headerInput="Input Label"
-      helperText="Placeholder of hint text to help"
-      state="negative"
-      [min]="0"
-      [max]="100"
-      [step]="1"
-      [value]="0"
-      [required]="true"
-      width="250px"
-    ></app-input-stepper>
-
-    <!-- Positive State -->
-    <app-input-stepper
-      headerInput="Input Label"
-      helperText="Placeholder of hint text to help"
-      state="positive"
-      [min]="0"
-      [max]="100"
-      [step]="1"
-      [value]="0"
-      [required]="true"
-      width="250px"
-    ></app-input-stepper>
-
-    <!-- Disabled State -->
-    <app-input-stepper
-      headerInput="Input Label"
-      helperText="Placeholder of hint text to help"
-      [disabled]="true"
-      [min]="0"
-      [max]="100"
-      [step]="1"
-      [value]="0"
-      [required]="true"
-      width="250px"
-    ></app-input-stepper>
-  </div>
-</div>
-
-<!-- TABLE DEMO SECTION -->
-<div class="demo-section">
-  <h3 class="demo-section-title">TABLE</h3>
-  <ng-template #statusTemplate let-status>
-    <app-button-container
-      [content]="status"
-      [backgroundColor]="status === 'Active' ? 'var(--brand-600)' : 'var(--neutral-color-100)'"
-      [color]="status === 'Active' ? 'var(--neutral-color-100)' : 'var(--neutral-color-600)'"
-      borderColor="transparent"
-    ></app-button-container>
-  </ng-template>
-
-  <table>
-    <thead>
-      <tr app-table-header [columns]="columns" [backgroundColor]="tableBackgroundColor"></tr>
-    </thead>
-
-    <tbody
-      app-table-body
-      [rows]="rows"
-      [columns]="columns"
-      [columnTemplates]="{ status: statusTemplate }"
-    ></tbody>
-  </table>
-</div>
-
-<!-- ROUTER CONTENT (keep it for children if any, though likely unused now) -->
-<router-outlet />
-
-@if (showPopup) {
-  <app-pop-up-confirm
-    imgUrl="/Bộ icon message (1).svg"
-    title="Xác nhận hành động"
-    content="Bạn có chắc chắn muốn thực hiện hành động này không?"
-    colorButton="var(--brand-600)"
-    (confirmClick)="onPopupConfirm()"
-    (cancelClick)="onPopupCancel()"
-  >
-  </app-pop-up-confirm>
-}

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

@@ -1,94 +0,0 @@
-.web-container {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  background-color: var(--brand-100);
-  min-height: 100vh;
-  width: 100%;
-}
-
-.main-layout {
-  background-color: var(--brand-100);
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  padding: 4px;
-  width: 100%;
-  max-width: 1370px;
-  margin: 0 auto;
-}
-
-.main-layout-content {
-  background-color: var(--brand-900);
-}
-
-.layout-body {
-  padding: 16px 8px;
-  margin: 0;
-  display: flex;
-  flex: 1;
-  width: 100%;
-  justify-content: flex-start;
-}
-
-.layout-body-sidebar {
-  flex-shrink: 0;
-  width: auto;
-  min-width: 56px;
-}
-
-.demo-buttons {
-  display: flex;
-  gap: 16px;
-  flex-wrap: wrap;
-  align-items: center;
-
-  & + .demo-buttons {
-    margin-top: 16px;
-  }
-}
-
-.layout-body-content {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  margin-left: 12px;
-}
-
-.stepper-demo-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 24px;
-  padding: 24px;
-  background-color: var(--neutral-color-10);
-  border-radius: var(--radius-md);
-}
-
-.demo-section {
-  margin-top: 24px;
-  padding: 24px;
-  background-color: var(--neutral-color-10);
-  border-radius: var(--radius-md);
-  border: 2px dashed var(--neutral-color-200);
-}
-
-.demo-section-title {
-  font-size: var(--font-sm);
-  font-weight: 600;
-  color: var(--neutral-color-600);
-  margin: 0 0 16px 0;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.input-text-demo-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 24px;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  table-layout: fixed;
-}

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

@@ -1,121 +0,0 @@
-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

@@ -1,7 +0,0 @@
-<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>