@duyanhdev/mvp-ifs-ui-kit 21.0.0

package/src/app/pages/dashboard/dashboard.html

@@ -0,0 +1,191 @@
+<div class="dashboard-wrap">
+    <!-- ══════════════ HEADER ══════════════ -->
+    <div class="dash-header">
+        <div class="dash-header-left">
+            <div class="dash-title">
+                <span class="dash-icon-badge">📊</span>
+                Dashboard Tổng Quan
+            </div>
+            <div class="dash-subtitle">
+                <span class="live-dot"></span>
+                Cập nhật thời gian thực &nbsp;·&nbsp; MIAT Kakotora IT Department
+            </div>
+        </div>
+        <button class="btn-create" (click)="openNewTicket()"><i class="pi pi-plus"></i> Tạo ticket mới</button>
+    </div>
+
+    <!-- ══════════════ STAT CARDS ══════════════ -->
+    <div class="stat-grid">
+        <div class="stat-card stat-blue" (mouseenter)="hoverCard('total')" (mouseleave)="leaveCard()">
+            <div class="stat-glow glow-blue"></div>
+            <div class="stat-icon-wrap icon-blue">🎫</div>
+            <div class="stat-label">Tổng Ticket</div>
+            <div class="stat-value">{{ totalTickets }}</div>
+            <div class="stat-trend trend-up">↑ +3 hôm nay</div>
+            <div class="sparkline">
+                <div class="spark-bar" *ngFor="let v of sparkTotal" [style.height.%]="v" [style.background]="'var(--dash-blue)'"></div>
+            </div>
+        </div>
+
+        <div class="stat-card stat-orange" (mouseenter)="hoverCard('open')" (mouseleave)="leaveCard()">
+            <div class="stat-glow glow-orange"></div>
+            <div class="stat-icon-wrap icon-orange">🔴</div>
+            <div class="stat-label">Đang Mở</div>
+            <div class="stat-value">{{ openTickets }}</div>
+            <div class="stat-trend trend-warn">⚠ Cần xử lý ngay</div>
+            <div class="sparkline">
+                <div class="spark-bar" *ngFor="let v of sparkOpen" [style.height.%]="v" [style.background]="'var(--dash-orange)'"></div>
+            </div>
+        </div>
+
+        <div class="stat-card stat-violet" (mouseenter)="hoverCard('progress')" (mouseleave)="leaveCard()">
+            <div class="stat-glow glow-violet"></div>
+            <div class="stat-icon-wrap icon-violet">⚡</div>
+            <div class="stat-label">Đang Xử Lý</div>
+            <div class="stat-value">{{ progressTickets }}</div>
+            <div class="stat-trend trend-info">🔵 Đang theo dõi</div>
+            <div class="sparkline">
+                <div class="spark-bar" *ngFor="let v of sparkProgress" [style.height.%]="v" [style.background]="'var(--dash-violet)'"></div>
+            </div>
+        </div>
+
+        <div class="stat-card stat-emerald" (mouseenter)="hoverCard('done')" (mouseleave)="leaveCard()">
+            <div class="stat-glow glow-emerald"></div>
+            <div class="stat-icon-wrap icon-emerald">✅</div>
+            <div class="stat-label">Hoàn Thành</div>
+            <div class="stat-value">{{ doneTickets }}</div>
+            <div class="stat-trend trend-up">↑ Tốt hơn tuần trước</div>
+            <div class="sparkline">
+                <div class="spark-bar" *ngFor="let v of sparkDone" [style.height.%]="v" [style.background]="'var(--dash-emerald)'"></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- ══════════════ CHARTS ROW ══════════════ -->
+    <div class="charts-row">
+        <!-- Line Chart -->
+        <div class="panel panel-accent-blue chart-panel">
+            <div class="panel-head">
+                <span class="panel-title">📈 Ticket 7 ngày gần nhất</span>
+                <div class="legend-row">
+                    <span class="legend-dot" style="background: var(--dash-blue)"></span><span class="legend-label">Tạo mới</span> <span class="legend-dot" style="background: var(--dash-emerald)"></span><span class="legend-label">Hoàn thành</span>
+                </div>
+            </div>
+            <div class="panel-body chart-body">
+                <p-chart type="line" [data]="lineChartData" [options]="lineChartOptions"></p-chart>
+            </div>
+        </div>
+
+        <!-- Doughnut Chart -->
+        <div class="panel panel-accent-violet chart-panel">
+            <div class="panel-head">
+                <span class="panel-title">🍩 Phân bố trạng thái</span>
+            </div>
+            <div class="panel-body chart-body donut-body">
+                <p-chart type="doughnut" [data]="doughnutData" [options]="doughnutOptions"></p-chart>
+                <div class="donut-legend">
+                    <div class="donut-legend-item" *ngFor="let item of doughnutLegend">
+                        <span class="legend-dot" [style.background]="item.color"></span>
+                        <span class="legend-label">{{ item.label }}</span>
+                        <span class="legend-val">{{ item.value }}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- ══════════════ BAR CHART (Full Width) ══════════════ -->
+    <div class="panel panel-accent-emerald mb-4">
+        <div class="panel-head">
+            <span class="panel-title">📊 Thống kê theo loại yêu cầu</span>
+            <span class="panel-sub">Tổng số ticket từng danh mục</span>
+        </div>
+        <div class="panel-body chart-body">
+            <p-chart type="bar" [data]="barChartData" [options]="barChartOptions"></p-chart>
+        </div>
+    </div>
+
+    <!-- ══════════════ TWO COL PANELS ══════════════ -->
+    <div class="two-col">
+        <!-- Recent Tickets -->
+        <div class="panel panel-accent-blue">
+            <div class="panel-head">
+                <span class="panel-title">🕐 Ticket Gần Đây</span>
+                <button class="btn-ghost" (click)="viewAll()">Xem tất cả →</button>
+            </div>
+            <div class="panel-body p-0">
+                <div class="recent-item" *ngFor="let ticket of recentTickets; let last = last" [class.last]="last">
+                    <div class="ri-avatar" [style.background]="ticket.avatarBg" [style.color]="ticket.avatarText">{{ getInitials(ticket.requester) }}</div>
+                    <div class="ri-info">
+                        <div class="ri-title">{{ ticket.title }}</div>
+                        <div class="ri-meta">{{ ticket.id }} · {{ ticket.requester }}</div>
+                    </div>
+                    <span class="st-badge" [ngClass]="getStatusClass(ticket.status)">
+                        <span class="st-dot" [ngClass]="getDotClass(ticket.status)"></span>
+                        {{ getStatusText(ticket.status) }}
+                    </span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Type breakdown -->
+        <div class="panel panel-accent-violet">
+            <div class="panel-head">
+                <span class="panel-title">📦 Theo Loại Yêu Cầu</span>
+            </div>
+            <div class="panel-body">
+                <div class="type-row" *ngFor="let item of typeBreakdown">
+                    <span class="type-name">{{ item.type }}</span>
+                    <div class="type-bar-bg">
+                        <div class="type-bar" [style.width.%]="item.percent" [style.background]="item.color"></div>
+                    </div>
+                    <span class="type-count">{{ item.count }}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- ══════════════ PRIORITY TABLE ══════════════ -->
+    <div class="panel panel-accent-orange mb-4">
+        <div class="panel-head">
+            <span class="panel-title">🚨 Ticket Ưu Tiên Cao</span>
+            <span class="panel-sub">Cần xử lý trong hôm nay</span>
+        </div>
+        <div class="panel-body p-0">
+            <table class="dash-table">
+                <thead>
+                    <tr>
+                        <th>ID</th>
+                        <th>Tiêu đề</th>
+                        <th>Người yêu cầu</th>
+                        <th>Phòng ban</th>
+                        <th>Loại</th>
+                        <th>Trạng thái</th>
+                        <th>Ngày tạo</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr *ngFor="let t of highPriorityTickets" class="table-row">
+                        <td><span class="ticket-id">{{ t.id }}</span></td>
+                        <td class="ticket-title-cell">{{ t.title }}</td>
+                        <td>
+                            <div class="table-avatar-wrap">
+                                <div class="table-avatar" [style.background]="t.avatarBg" [style.color]="t.avatarText">{{ getInitials(t.requester) }}</div>
+                                <span>{{ t.requester }}</span>
+                            </div>
+                        </td>
+                        <td><span class="dept-badge">{{ t.dept }}</span></td>
+                        <td><span class="type-chip" [style.color]="getTypeColor(t.type)">{{ t.type }}</span></td>
+                        <td>
+                            <span class="st-badge" [ngClass]="getStatusClass(t.status)">
+                                <span class="st-dot" [ngClass]="getDotClass(t.status)"></span>
+                                {{ getStatusText(t.status) }}
+                            </span>
+                        </td>
+                        <td class="date-cell">{{ t.created }}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>

package/src/app/pages/dashboard/dashboard.ts

@@ -0,0 +1,348 @@
+import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ChartModule } from 'primeng/chart';
+
+interface Ticket {
+    id: string;
+    title: string;
+    type: string;
+    priority: string;
+    requester: string;
+    dept: string;
+    status: string;
+    device: string;
+    desc: string;
+    created: string;
+    avatarBg?: string;
+    avatarText?: string;
+}
+
+@Component({
+    selector: 'app-dashboard',
+    standalone: true,
+    imports: [CommonModule, ChartModule],
+    templateUrl: './dashboard.html',
+    styleUrls: ['./dashboard.css']
+})
+export class DashboardComponent implements OnInit, OnDestroy {
+    // ─── Sparklines ───────────────────────────────────
+    sparkTotal = [40, 60, 45, 70, 55, 80, 100];
+    sparkOpen = [80, 65, 70, 50, 60, 75, 90];
+    sparkProgress = [30, 50, 60, 45, 70, 55, 65];
+    sparkDone = [20, 40, 55, 70, 80, 90, 100];
+
+    // ─── Raw data ─────────────────────────────────────
+    data: Ticket[] = [
+        { id: 'TK-001', title: 'Màn hình không hiển thị', type: 'Hardware', priority: 'high', requester: 'Nguyễn Văn An', dept: 'Kế toán', status: 'open', device: 'Dell P2419H', desc: 'Màn hình mất tín hiệu', created: '2025-07-01' },
+        { id: 'TK-002', title: 'Không kết nối được VPN', type: 'Mạng', priority: 'high', requester: 'Trần Thị Bình', dept: 'Kinh doanh', status: 'progress', device: 'HP EliteBook', desc: 'VPN lỗi authentication', created: '2025-07-02' },
+        { id: 'TK-003', title: 'Cài đặt phần mềm MISA', type: 'Software', priority: 'medium', requester: 'Lê Minh Cường', dept: 'Kế toán', status: 'done', device: 'PC-KT-03', desc: 'Cài MISA SME 2024', created: '2025-07-02' },
+        { id: 'TK-004', title: 'Quên mật khẩu Windows', type: 'Tài khoản', priority: 'medium', requester: 'Phạm Thu Dung', dept: 'Nhân sự', status: 'done', device: 'Lenovo ThinkPad', desc: 'Không đăng nhập được', created: '2025-07-03' },
+        { id: 'TK-005', title: 'Máy in offline', type: 'Máy in', priority: 'low', requester: 'Hoàng Văn Em', dept: 'Vận hành', status: 'open', device: 'HP LaserJet M404', desc: 'Không nhận lệnh in', created: '2025-07-03' },
+        { id: 'TK-006', title: 'Email gửi đi bị spam', type: 'Email', priority: 'medium', requester: 'Vũ Thị Phương', dept: 'Marketing', status: 'progress', device: '', desc: 'Email bị spam filter chặn', created: '2025-07-04' },
+        { id: 'TK-007', title: 'CPU quá nóng 95°C', type: 'Hardware', priority: 'high', requester: 'Đỗ Quang Hưng', dept: 'IT', status: 'open', device: 'PC-IT-07', desc: 'Máy tự tắt sau 30 phút', created: '2025-07-05' },
+        { id: 'TK-008', title: 'Mất file sau khi format', type: 'Software', priority: 'high', requester: 'Ngô Thanh Lan', dept: 'Ban giám đốc', status: 'progress', device: 'Dell XPS 15', desc: 'Cần khôi phục dữ liệu', created: '2025-07-05' },
+        { id: 'TK-009', title: 'WiFi yếu tầng 3', type: 'Mạng', priority: 'low', requester: 'Bùi Văn Minh', dept: 'Vận hành', status: 'done', device: '', desc: 'Tín hiệu không ổn định', created: '2025-07-06' },
+        { id: 'TK-010', title: 'CRM không mở được', type: 'Software', priority: 'medium', requester: 'Lý Ngọc Nam', dept: 'Kinh doanh', status: 'open', device: 'PC-KD-10', desc: 'Lỗi runtime module', created: '2025-07-07' },
+        { id: 'TK-011', title: 'Tạo tài khoản nhân viên mới', type: 'Tài khoản', priority: 'low', requester: 'Trần Văn Oai', dept: 'Nhân sự', status: 'done', device: '', desc: '3 nhân viên onboard mới', created: '2025-07-07' },
+        { id: 'TK-012', title: 'BSOD khi chạy Excel', type: 'Hardware', priority: 'high', requester: 'Đinh Thị Phúc', dept: 'Kế toán', status: 'progress', device: 'PC-KT-12', desc: 'Màn hình xanh liên tục', created: '2025-07-08' },
+        { id: 'TK-013', title: 'Không vào được portal nội bộ', type: 'Mạng', priority: 'high', requester: 'Cao Minh Quân', dept: 'Kinh doanh', status: 'open', device: 'Asus Laptop', desc: 'Sau khi đổi mật khẩu WiFi', created: '2025-07-09' },
+        { id: 'TK-014', title: 'Cài Canva Pro', type: 'Software', priority: 'low', requester: 'Phan Thị Thảo', dept: 'Marketing', status: 'done', device: 'MacBook Air M2', desc: 'License cho team marketing', created: '2025-07-09' },
+        { id: 'TK-015', title: 'Setup backup server tự động', type: 'Khác', priority: 'medium', requester: 'Trịnh Văn Ước', dept: 'IT', status: 'progress', device: 'Dell PowerEdge', desc: 'Backup hàng tuần tối thứ 6', created: '2025-07-10' }
+    ];
+
+    tickets: Ticket[] = [];
+
+    // ─── Stats ────────────────────────────────────────
+    get totalTickets() {
+        return this.tickets.length;
+    }
+    get openTickets() {
+        return this.tickets.filter((t) => t.status === 'open').length;
+    }
+    get progressTickets() {
+        return this.tickets.filter((t) => t.status === 'progress').length;
+    }
+    get doneTickets() {
+        return this.tickets.filter((t) => t.status === 'done').length;
+    }
+    get recentTickets() {
+        return this.tickets.slice(0, 6);
+    }
+    get highPriorityTickets() {
+        return this.tickets.filter((t) => t.priority === 'high');
+    }
+
+    get typeBreakdown() {
+        const map = new Map<string, number>();
+        for (const t of this.tickets) map.set(t.type, (map.get(t.type) ?? 0) + 1);
+        const arr = Array.from(map.entries())
+            .map(([type, count]) => ({ type, count, color: this.getTypeColor(type) }))
+            .sort((a, b) => b.count - a.count);
+        const max = Math.max(...arr.map((x) => x.count));
+        return arr.map((x) => ({ ...x, percent: max ? (x.count / max) * 100 : 0 }));
+    }
+
+    // ─── Charts ───────────────────────────────────────
+    lineChartData: any;
+    lineChartOptions: any;
+    doughnutData: any;
+    doughnutOptions: any;
+    barChartData: any;
+    barChartOptions: any;
+
+    doughnutLegend = [
+        { label: 'Đang mở', color: '#f97316', value: 0 },
+        { label: 'Đang xử lý', color: '#8b5cf6', value: 0 },
+        { label: 'Hoàn thành', color: '#10b981', value: 0 }
+    ];
+
+    isDark = false;
+
+    // ─── MutationObserver để watch theme changes ──────
+    private themeObserver!: MutationObserver;
+
+    ngOnInit(): void {
+        this.tickets = this.data.map((t) => {
+            const [bg, color] = this.avatarColor(t.requester);
+            return { ...t, avatarBg: bg, avatarText: color };
+        });
+
+        this.doughnutLegend[0].value = this.openTickets;
+        this.doughnutLegend[1].value = this.progressTickets;
+        this.doughnutLegend[2].value = this.doneTickets;
+
+        this.syncTheme();
+        this.buildCharts();
+
+        // Lắng nghe khi PrimeNG toggle class p-dark trên <html>
+        this.themeObserver = new MutationObserver(() => {
+            const wasDark = this.isDark;
+            this.syncTheme();
+            if (wasDark !== this.isDark) {
+                this.buildCharts();
+            }
+        });
+
+        this.themeObserver.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class', 'data-theme']
+        });
+        // Cũng observe <body> phòng khi PrimeNG gắn vào body
+        this.themeObserver.observe(document.body, {
+            attributes: true,
+            attributeFilter: ['class']
+        });
+    }
+
+    ngOnDestroy(): void {
+        this.themeObserver?.disconnect();
+    }
+
+    /** Đọc trạng thái dark mode hiện tại từ DOM */
+    private syncTheme(): void {
+        this.isDark = document.documentElement.classList.contains('p-dark') || document.body.classList.contains('p-dark') || document.documentElement.getAttribute('data-theme') === 'dark';
+    }
+
+    private buildCharts(): void {
+        const textColor = this.isDark ? '#94a3b8' : '#64748b';
+        const gridColor = this.isDark ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.07)';
+        const tooltipBg = this.isDark ? '#1e293b' : '#ffffff';
+        const tooltipBorder = this.isDark ? '#334155' : '#e2e8f0';
+
+        // ── Line chart ──────────────────────────────────
+        this.lineChartData = {
+            labels: ['T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'CN'],
+            datasets: [
+                {
+                    label: 'Ticket tạo mới',
+                    data: [3, 5, 4, 7, 2, 6, 4],
+                    borderColor: '#3b82f6',
+                    backgroundColor: 'rgba(59,130,246,0.12)',
+                    borderWidth: 2.5,
+                    tension: 0.45,
+                    pointBackgroundColor: '#3b82f6',
+                    pointRadius: 4,
+                    pointHoverRadius: 7,
+                    fill: true
+                },
+                {
+                    label: 'Hoàn thành',
+                    data: [2, 3, 4, 5, 2, 4, 5],
+                    borderColor: '#10b981',
+                    backgroundColor: 'rgba(16,185,129,0.10)',
+                    borderWidth: 2.5,
+                    tension: 0.45,
+                    pointBackgroundColor: '#10b981',
+                    pointRadius: 4,
+                    pointHoverRadius: 7,
+                    fill: true
+                }
+            ]
+        };
+
+        this.lineChartOptions = {
+            responsive: true,
+            maintainAspectRatio: false,
+            interaction: { mode: 'index', intersect: false },
+            plugins: {
+                legend: { display: false },
+                tooltip: {
+                    backgroundColor: tooltipBg,
+                    borderColor: tooltipBorder,
+                    borderWidth: 1,
+                    titleColor: textColor,
+                    bodyColor: textColor,
+                    padding: 12,
+                    cornerRadius: 10
+                }
+            },
+            scales: {
+                x: {
+                    ticks: { color: textColor, font: { size: 12 } },
+                    grid: { color: gridColor },
+                    border: { dash: [4, 4] }
+                },
+                y: {
+                    ticks: { color: textColor, font: { size: 12 }, stepSize: 1 },
+                    grid: { color: gridColor },
+                    border: { dash: [4, 4] },
+                    min: 0
+                }
+            }
+        };
+
+        // ── Doughnut chart ──────────────────────────────
+        this.doughnutData = {
+            labels: ['Đang mở', 'Đang xử lý', 'Hoàn thành'],
+            datasets: [
+                {
+                    data: [this.openTickets, this.progressTickets, this.doneTickets],
+                    backgroundColor: ['rgba(249,115,22,0.85)', 'rgba(139,92,246,0.85)', 'rgba(16,185,129,0.85)'],
+                    borderColor: ['#f97316', '#8b5cf6', '#10b981'],
+                    borderWidth: 2,
+                    hoverOffset: 10
+                }
+            ]
+        };
+
+        this.doughnutOptions = {
+            responsive: true,
+            maintainAspectRatio: false,
+            cutout: '72%',
+            plugins: {
+                legend: { display: false },
+                tooltip: {
+                    backgroundColor: tooltipBg,
+                    borderColor: tooltipBorder,
+                    borderWidth: 1,
+                    titleColor: textColor,
+                    bodyColor: textColor,
+                    padding: 12,
+                    cornerRadius: 10
+                }
+            }
+        };
+
+        // ── Bar chart ───────────────────────────────────
+        const typeData = this.typeBreakdown;
+        this.barChartData = {
+            labels: typeData.map((t) => t.type),
+            datasets: [
+                {
+                    label: 'Số ticket',
+                    data: typeData.map((t) => t.count),
+                    backgroundColor: typeData.map((t) => t.color + 'bb'),
+                    borderColor: typeData.map((t) => t.color),
+                    borderWidth: 2,
+                    borderRadius: 8,
+                    borderSkipped: false
+                }
+            ]
+        };
+
+        this.barChartOptions = {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: { display: false },
+                tooltip: {
+                    backgroundColor: tooltipBg,
+                    borderColor: tooltipBorder,
+                    borderWidth: 1,
+                    titleColor: textColor,
+                    bodyColor: textColor,
+                    padding: 12,
+                    cornerRadius: 10
+                }
+            },
+            scales: {
+                x: {
+                    ticks: { color: textColor, font: { size: 12 } },
+                    grid: { display: false }
+                },
+                y: {
+                    ticks: { color: textColor, stepSize: 1 },
+                    grid: { color: gridColor },
+                    border: { dash: [4, 4] },
+                    min: 0
+                }
+            }
+        };
+    }
+
+    // ─── Helpers ──────────────────────────────────────
+    getInitials(name: string): string {
+        return name
+            ?.split(' ')
+            .slice(-2)
+            .map((w) => w[0])
+            .join('')
+            .toUpperCase();
+    }
+
+    avatarColor(name: string = ''): [string, string] {
+        const palette: [string, string][] = [
+            ['rgba(59,130,246,.22)', '#93c5fd'],
+            ['rgba(139,92,246,.22)', '#c4b5fd'],
+            ['rgba(236,72,153,.22)', '#f9a8d4'],
+            ['rgba(6,182,212,.22)', '#67e8f9'],
+            ['rgba(16,185,129,.22)', '#6ee7b7'],
+            ['rgba(245,158,11,.22)', '#fcd34d']
+        ];
+        return palette[(name?.charCodeAt(0) ?? 0) % palette.length];
+    }
+
+    getTypeColor(type: string): string {
+        const map: Record<string, string> = {
+            Software: '#a78bfa',
+            Hardware: '#60a5fa',
+            Mạng: '#22d3ee',
+            'Tài khoản': '#f472b6',
+            'Máy in': '#fbbf24',
+            Email: '#34d399',
+            Khác: '#94a3b8'
+        };
+        return map[type] ?? '#94a3b8';
+    }
+
+    getStatusClass(status: string): string {
+        return { open: 'st-open', progress: 'st-progress', done: 'st-done' }[status] ?? 'st-done';
+    }
+
+    getDotClass(status: string): string {
+        return { open: 'dot-red', progress: 'dot-amber', done: 'dot-green' }[status] ?? 'dot-green';
+    }
+
+    getStatusText(status: string): string {
+        return { open: 'Mở', progress: 'Đang xử lý', done: 'Hoàn thành' }[status] ?? status;
+    }
+
+    openNewTicket() {
+        console.log('Open new ticket modal');
+    }
+    viewAll() {
+        console.log('View all tickets');
+    }
+    hoverCard(_: string) {}
+    leaveCard() {}
+}

package/src/app/pages/documentation/documentation.ts

@@ -0,0 +1,73 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-documentation',
+    standalone: true,
+    imports: [CommonModule],
+    template: `
+        <div class="card">
+            <div class="font-semibold text-2xl mb-4">Documentation</div>
+            <div class="font-semibold text-xl mb-4">Get Started</div>
+            <p class="text-lg mb-4">Sakai is an application template for Angular and is distributed as a CLI project. Current versions are Angular v21 with PrimeNG v21. In case CLI is not installed already, use the command below to set it up.</p>
+            <pre class="app-code">
+<code>npm install -g &#64;angular/cli</code></pre>
+            <p class="text-lg mb-4">
+                Once CLI is ready in your system, extract the contents of the zip file distribution, cd to the directory, install the libraries from npm and then execute "ng serve" to run the application in your local environment.
+            </p>
+            <pre class="app-code">
+<code>git clone https://github.com/primefaces/sakai-ng
+npm install
+ng serve</code></pre>
+
+            <p class="text-lg mb-4">The application should run at <i class="bg-highlight px-2 py-1 rounded-border not-italic text-base">http://localhost:4200/</i> to view the application in your local environment.</p>
+
+            <div class="font-semibold text-xl mb-4">Structure</div>
+            <p class="text-lg mb-4">Templates consists of a couple folders, demos and layout have been separated so that you can easily identify what is necessary for your application.</p>
+            <ul class="leading-normal list-disc pl-8 text-lg mb-4">
+                <li><span class="text-primary font-medium">src/app/layout</span>: Main layout files, needs to be present.</li>
+                <li><span class="text-primary font-medium">src/app/pages</span>: Demo content like Dashboard.</li>
+                <li><span class="text-primary font-medium">src/assets/demo</span>: Assets used in demos</li>
+                <li><span class="text-primary font-medium">src/assets/layout</span>: SCSS files of the main layout</li>
+            </ul>
+
+            <div class="font-semibold text-xl mb-4">Menu</div>
+            <p class="text-lg mb-4">
+                Main menu is defined at <span class="bg-highlight px-2 py-1 rounded-border not-italic text-base">src/app/layout/component/app.menu.ts</span> file. Update the
+                <i class="bg-highlight px-2 py-1 rounded-border not-italic text-base">model</i> property to define your own menu items.
+            </p>
+
+            <div class="font-semibold text-xl mb-4">Layout Service</div>
+            <p class="text-lg mb-4">
+                <span class="bg-highlight px-2 py-1 rounded-border not-italic text-base">src/app/layout/service/layout.service.ts</span> is a service that manages layout state changes, including dark mode, PrimeNG theme, menu modes, and states.
+            </p>
+
+            <div class="font-semibold text-xl mb-4">Tailwind CSS</div>
+            <p class="text-lg mb-4">The demo pages are developed with Tailwind CSS however the core application shell uses custom CSS.</p>
+
+            <div class="font-semibold text-xl mb-4">Variables</div>
+            <p class="text-lg mb-4">
+                CSS variables used in the template are derived from the applied PrimeNG theme. Customize them through the CSS variables in <span class="bg-highlight px-2 py-1 rounded-border not-italic text-base">src/assets/layout/variables</span>.
+            </p>
+        </div>
+    `,
+    styles: `
+        @media screen and (max-width: 991px) {
+            .video-container {
+                position: relative;
+                width: 100%;
+                height: 0;
+                padding-bottom: 56.25%;
+
+                iframe {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+    `
+})
+export class Documentation {}

package/src/app/pages/empty/empty.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-empty',
+    standalone: true,
+    template: ` <div class="card">
+        <div class="font-semibold text-xl mb-4">Empty Page</div>
+        <p>Use this page to start from scratch and place your custom content.</p>
+    </div>`
+})
+export class Empty {}