@duyanhdev/mvp-ifs-ui-kit 21.0.0

package/src/app/pages/uikit/mediademo.ts

@@ -0,0 +1,1021 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ButtonModule } from 'primeng/button';
+import { InputTextModule } from 'primeng/inputtext';
+import { SelectModule } from 'primeng/select';
+import { DatePickerModule } from 'primeng/datepicker';
+import { TextareaModule } from 'primeng/textarea';
+import { CheckboxModule } from 'primeng/checkbox';
+
+interface City {
+    name: string;
+    code: string;
+}
+interface Code {
+    name: string;
+    code: string;
+}
+
+@Component({
+    selector: 'app-media-demo',
+    standalone: true,
+    imports: [CommonModule, FormsModule, ButtonModule, InputTextModule, SelectModule, DatePickerModule, TextareaModule, CheckboxModule],
+    styles: `
+        /* ══════════════════════════════════
+           LIGHT MODE TOKENS
+        ══════════════════════════════════ */
+        :host {
+            --blue-dark: #1e3a8a;
+            --blue-main: #2563eb;
+            --blue-mid: #3b82f6;
+            --blue-light: #93c5fd;
+            --blue-soft: #eff6ff;
+            --blue-ring: rgba(37, 99, 235, 0.14);
+
+            --bg-page: #f1f5f9;
+            --bg-body: #ffffff;
+            --bg-field: #ffffff;
+            --bg-card: #ffffff;
+            --bg-card-hover: #f8faff;
+
+            --border-color: #e5e7eb;
+            --border-input: #d1d5db;
+
+            --text-primary: #111827;
+            --text-label: #6b7280;
+            --text-item: #374151;
+            --text-placeholder: #9ca3af;
+
+            --divider: linear-gradient(90deg, #bfdbfe, transparent);
+            --shadow-body: 0 8px 32px rgba(0, 0, 0, 0.07);
+        }
+
+        /* ══════════════════════════════════
+           DARK MODE TOKENS
+        ══════════════════════════════════ */
+        :host-context(.app-dark) {
+            --blue-dark: #1d4ed8;
+            --blue-main: #3b82f6;
+            --blue-mid: #60a5fa;
+            --blue-light: #93c5fd;
+            --blue-soft: rgba(59, 130, 246, 0.12);
+            --blue-ring: rgba(59, 130, 246, 0.2);
+
+            --bg-page: #0f172a;
+            --bg-body: #1e293b;
+            --bg-field: #0f172a;
+            --bg-card: #1e293b;
+            --bg-card-hover: #263548;
+
+            --border-color: #334155;
+            --border-input: #334155;
+
+            --text-primary: #f1f5f9;
+            --text-label: #94a3b8;
+            --text-item: #cbd5e1;
+            --text-placeholder: #475569;
+
+            --divider: linear-gradient(90deg, rgba(59, 130, 246, 0.3), transparent);
+            --shadow-body: 0 8px 32px rgba(0, 0, 0, 0.4);
+        }
+
+        /* ══════════════════════════════════
+           LAYOUT
+        ══════════════════════════════════ */
+        .page-wrapper {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 32px 16px 64px;
+            background: var(--bg-page);
+            min-height: 100vh;
+            transition: background 0.3s;
+        }
+
+        /* ── Header ── */
+        .form-header {
+            background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-main) 55%, var(--blue-mid) 100%);
+            border-radius: 20px 20px 0 0;
+            padding: 32px 40px;
+            position: relative;
+            overflow: hidden;
+        }
+        .form-header::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/svg%3E");
+        }
+        .form-header h1 {
+            font-size: clamp(15px, 2.5vw, 21px);
+            font-weight: 800;
+            color: #fff;
+            text-align: center;
+            letter-spacing: 0.5px;
+            position: relative;
+            margin: 0;
+        }
+        .form-header p {
+            text-align: center;
+            color: rgba(255, 255, 255, 0.65);
+            font-size: 13px;
+            margin: 6px 0 0;
+            position: relative;
+        }
+
+        /* ── Body ── */
+        .form-body {
+            background: var(--bg-body);
+            border-radius: 0 0 20px 20px;
+            border: 1px solid var(--border-color);
+            border-top: none;
+            padding: 32px 40px 40px;
+            box-shadow: var(--shadow-body);
+            transition:
+                background 0.3s,
+                border-color 0.3s;
+        }
+
+        /* ── Section title ── */
+        .section-title {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 16px;
+            margin-top: 28px;
+            &:first-child {
+                margin-top: 0;
+            }
+        }
+        .section-num {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, var(--blue-dark), var(--blue-main));
+            color: #fff;
+            font-size: 13px;
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            box-shadow: 0 4px 12px var(--blue-ring);
+        }
+        .section-name {
+            font-size: 14px;
+            font-weight: 700;
+            color: var(--text-primary);
+            letter-spacing: 0.4px;
+            text-transform: uppercase;
+        }
+        .section-divider {
+            height: 1px;
+            background: var(--divider);
+            margin-bottom: 20px;
+        }
+
+        /* ── Fields ── */
+        .field-group {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 18px;
+            margin-bottom: 8px;
+        }
+        .field {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+        .field label {
+            font-size: 11px;
+            font-weight: 700;
+            color: var(--text-label);
+            text-transform: uppercase;
+            letter-spacing: 0.7px;
+        }
+
+        :host ::ng-deep {
+            /* ── Input ── */
+            .p-inputtext {
+                background: var(--bg-field) !important;
+                color: var(--text-primary) !important;
+                border-color: var(--border-input) !important;
+                border-radius: 10px !important;
+                font-size: 13.5px !important;
+                padding: 10px 14px !important;
+                width: 100% !important;
+                transition:
+                    border-color 0.2s,
+                    box-shadow 0.2s,
+                    background 0.3s !important;
+
+                &:hover {
+                    border-color: var(--blue-light) !important;
+                }
+                &:focus {
+                    border-color: var(--blue-main) !important;
+                    box-shadow: 0 0 0 3px var(--blue-ring) !important;
+                }
+                &::placeholder {
+                    color: var(--text-placeholder) !important;
+                }
+            }
+
+            /* ── Select ── */
+            .p-select {
+                background: var(--bg-field) !important;
+                border-color: var(--border-input) !important;
+                border-radius: 10px !important;
+                width: 100% !important;
+                transition:
+                    border-color 0.2s,
+                    background 0.3s !important;
+
+                &:hover {
+                    border-color: var(--blue-light) !important;
+                }
+                &.p-focus {
+                    border-color: var(--blue-main) !important;
+                    box-shadow: 0 0 0 3px var(--blue-ring) !important;
+                }
+
+                .p-select-label {
+                    color: var(--text-primary) !important;
+                    &.p-placeholder {
+                        color: var(--text-placeholder) !important;
+                    }
+                }
+                .p-select-dropdown {
+                    color: var(--text-label) !important;
+                }
+            }
+
+            /* Select panel dropdown */
+            .p-select-overlay {
+                background: var(--bg-body) !important;
+                border-color: var(--border-color) !important;
+                border-radius: 12px !important;
+                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
+
+                .p-select-option {
+                    color: var(--text-item) !important;
+                    &:hover,
+                    &.p-focus {
+                        background: var(--blue-soft) !important;
+                        color: var(--blue-main) !important;
+                    }
+                    &.p-select-option-selected {
+                        background: var(--blue-soft) !important;
+                        color: var(--blue-main) !important;
+                        font-weight: 600 !important;
+                    }
+                }
+            }
+
+            /* ── Datepicker ── */
+            input.p-datepicker-input {
+                background: var(--bg-field) !important;
+                color: var(--text-primary) !important;
+                border-color: var(--border-input) !important;
+                border-radius: 10px !important;
+                width: 100% !important;
+                &:focus {
+                    border-color: var(--blue-main) !important;
+                    box-shadow: 0 0 0 3px var(--blue-ring) !important;
+                }
+                &::placeholder {
+                    color: var(--text-placeholder) !important;
+                }
+            }
+            .p-datepicker-panel {
+                background: var(--bg-body) !important;
+                border-color: var(--border-color) !important;
+                border-radius: 12px !important;
+
+                .p-datepicker-header {
+                    background: var(--bg-body) !important;
+                    color: var(--text-primary) !important;
+                    border-color: var(--border-color) !important;
+                }
+                .p-datepicker-day-view .p-datepicker-day-cell span {
+                    color: var(--text-item) !important;
+                    &:hover {
+                        background: var(--blue-soft) !important;
+                    }
+                }
+                .p-datepicker-day-cell.p-datepicker-today span {
+                    background: var(--blue-soft) !important;
+                    color: var(--blue-main) !important;
+                    font-weight: 700 !important;
+                }
+                .p-datepicker-day-cell.p-datepicker-selected span {
+                    background: var(--blue-main) !important;
+                    color: #fff !important;
+                }
+            }
+
+            /* ── Textarea ── */
+            .p-textarea {
+                background: var(--bg-field) !important;
+                color: var(--text-primary) !important;
+                border-color: var(--border-input) !important;
+                border-radius: 10px !important;
+                width: 100% !important;
+                font-size: 13.5px !important;
+                resize: vertical !important;
+                transition:
+                    border-color 0.2s,
+                    background 0.3s !important;
+
+                &:focus {
+                    border-color: var(--blue-main) !important;
+                    box-shadow: 0 0 0 3px var(--blue-ring) !important;
+                }
+                &::placeholder {
+                    color: var(--text-placeholder) !important;
+                }
+            }
+
+            /* ── Button ── */
+            .p-button:not(.p-button-outlined) {
+                background: var(--blue-main) !important;
+                border-color: var(--blue-main) !important;
+                color: #fff !important;
+                &:hover {
+                    background: var(--blue-dark) !important;
+                    border-color: var(--blue-dark) !important;
+                }
+            }
+            .p-button-outlined {
+                background: transparent !important;
+                color: var(--blue-main) !important;
+                border-color: var(--blue-main) !important;
+                &:hover {
+                    background: var(--blue-soft) !important;
+                }
+            }
+
+            /* ── Checkbox ── */
+            .p-checkbox .p-checkbox-box {
+                background: var(--bg-field) !important;
+                border-color: var(--border-input) !important;
+                transition:
+                    background 0.2s,
+                    border-color 0.2s !important;
+            }
+            .p-checkbox:not(.p-checkbox-checked):hover .p-checkbox-box {
+                border-color: var(--blue-light) !important;
+            }
+            .p-checkbox.p-checkbox-checked .p-checkbox-box {
+                background: var(--blue-main) !important;
+                border-color: var(--blue-main) !important;
+            }
+        }
+
+        /* ── Purchase cards ── */
+        .purchase-grid {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 14px;
+            margin-bottom: 8px;
+        }
+        .purchase-card {
+            border: 1.5px solid var(--border-color);
+            border-radius: 14px;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            background: var(--bg-card);
+            transition:
+                border-color 0.2s,
+                box-shadow 0.2s,
+                background 0.3s;
+
+            &:hover {
+                border-color: var(--blue-light);
+                box-shadow: 0 4px 16px var(--blue-ring);
+                background: var(--bg-card-hover);
+            }
+        }
+        .purchase-header {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 11px 14px;
+            background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-main) 55%, var(--blue-mid) 100%);
+            flex-shrink: 0;
+        }
+        .purchase-num {
+            width: 22px;
+            height: 22px;
+            background: rgba(255, 255, 255, 0.2);
+            border: 1.5px solid rgba(255, 255, 255, 0.35);
+            border-radius: 50%;
+            color: #fff;
+            font-size: 11px;
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+        }
+        .purchase-title {
+            font-size: 11.5px;
+            font-weight: 700;
+            color: #fff;
+            text-transform: uppercase;
+            letter-spacing: 0.4px;
+            margin: 0;
+            line-height: 1.3;
+        }
+        .purchase-body {
+            padding: 10px 12px;
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+            background: var(--bg-card);
+            flex: 1;
+            transition: background 0.3s;
+        }
+        .check-item {
+            display: flex;
+            align-items: flex-start;
+            gap: 9px;
+            padding: 7px 9px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: background 0.15s;
+
+            &:hover {
+                background: var(--blue-soft);
+            }
+
+            label {
+                font-size: 12.5px;
+                color: var(--text-item);
+                cursor: pointer;
+                line-height: 1.45;
+                margin: 0;
+                transition: color 0.15s;
+            }
+            &:has(.p-checkbox-checked) {
+                background: var(--blue-soft);
+                label {
+                    color: var(--blue-main);
+                    font-weight: 600;
+                }
+            }
+        }
+
+        /* ── Footer ── */
+        .form-footer {
+            display: flex;
+            justify-content: flex-end;
+            gap: 12px;
+            margin-top: 28px;
+            padding-top: 22px;
+            border-top: 1px solid var(--border-color);
+        }
+
+        /* ── Responsive ── */
+        @media (max-width: 900px) {
+            .purchase-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+        @media (max-width: 640px) {
+            .field-group {
+                grid-template-columns: 1fr;
+            }
+            .purchase-grid {
+                grid-template-columns: 1fr;
+            }
+            .form-body {
+                padding: 20px;
+            }
+            .form-header {
+                padding: 24px 20px;
+            }
+        }
+    `,
+    template: `
+        <div class="page-wrapper">
+            <!-- Header -->
+            <div class="form-header">
+                <h1>Mẫu Form Ghi Nhận Lỗi Trong Công Việc Mua Hàng</h1>
+                <p>Vui lòng điền đầy đủ thông tin bên dưới</p>
+            </div>
+
+            <!-- Body -->
+            <div class="form-body">
+                <!-- Section 1 -->
+                <div class="section-title">
+                    <div class="section-num">1</div>
+                    <span class="section-name">Thông Tin Chung</span>
+                </div>
+                <div class="section-divider"></div>
+                <div class="field-group">
+                    <div class="field">
+                        <label>Người lập</label>
+                        <input pInputText [(ngModel)]="form.nguoiLap" placeholder="Họ và tên người lập" />
+                    </div>
+                    <div class="field">
+                        <label>Nhóm</label>
+                        <p-select [options]="cities" [(ngModel)]="form.nhom" optionLabel="name" placeholder="Chọn nhóm" />
+                    </div>
+                    <div class="field">
+                        <label>Vị trí / Chức danh</label>
+                        <input pInputText [(ngModel)]="form.viTri" placeholder="Vd: Nhân viên mua hàng" />
+                    </div>
+                    <div class="field">
+                        <label>Nhà cung cấp</label>
+                        <p-select [options]="supplier" [(ngModel)]="form.nhaCungCap" optionLabel="name" placeholder="Chọn nhà cung cấp" />
+                    </div>
+                    <div class="field">
+                        <label>Mã hàng</label>
+                        <p-select [options]="productCode" [(ngModel)]="form.maHang" optionLabel="name" placeholder="Chọn mã hàng" />
+                    </div>
+                    <div class="field">
+                        <label>Ngày phát sinh</label>
+                        <p-datepicker [(ngModel)]="form.ngayPhatSinh" placeholder="dd/mm/yyyy" dateFormat="dd/mm/yy" [showIcon]="true" />
+                    </div>
+                    <div class="field">
+                        <label>Tên lỗi</label>
+                        <p-select [options]="cities" [(ngModel)]="form.tenLoi" optionLabel="name" placeholder="Chọn lỗi" />
+                    </div>
+                    <div class="field">
+                        <label>Bộ phận liên quan</label>
+                        <p-select [options]="cities" [(ngModel)]="form.boPhan" optionLabel="name" placeholder="Chọn bộ phận" />
+                    </div>
+                </div>
+
+                <!-- Section 2 -->
+                <div class="section-title">
+                    <div class="section-num">2</div>
+                    <span class="section-name">Giai Đoạn Phát Sinh & Lỗi Phát Sinh</span>
+                </div>
+                <div class="section-divider"></div>
+                <div class="purchase-grid">
+                    @for (group of purchaseGroups; track group.num) {
+                        <div class="purchase-card">
+                            <div class="purchase-header">
+                                <span class="purchase-num">{{ group.num }}</span>
+                                <p class="purchase-title">{{ group.title }}</p>
+                            </div>
+                            <div class="purchase-body">
+                                @for (item of group.items; track item.id) {
+                                    <div class="check-item">
+                                        <p-checkbox [inputId]="item.id" [name]="'group' + group.num" [value]="item.value" [(ngModel)]="selected" />
+                                        <label [for]="item.id">{{ item.label }}</label>
+                                    </div>
+                                }
+                            </div>
+                        </div>
+                    }
+                </div>
+
+                <!-- Section 3 -->
+                <div class="section-title">
+                    <div class="section-num">3</div>
+                    <span class="section-name">Mô Tả Chi Tiết Lỗi</span>
+                </div>
+                <div class="section-divider"></div>
+                <div class="field">
+                    <label>Nội dung mô tả</label>
+                    <textarea pTextarea [(ngModel)]="form.moTa" rows="4" placeholder="Mô tả chi tiết tình huống xảy ra lỗi…"> </textarea>
+                </div>
+
+                <!-- Section 4 -->
+                <div class="section-title">
+                    <div class="section-num">4</div>
+                    <span class="section-name">Phân loại NGUYÊN NHÂN (Fishbone 6M)</span>
+                </div>
+                <div class="section-divider"></div>
+                <div class="purchase-grid">
+                    @for (group of reason; track group.num) {
+                        <div class="purchase-card">
+                            <div class="check-item">
+                                <p-checkbox [inputId]="'group' + group.num" [name]="'group' + group.num" [value]="group.title" [(ngModel)]="selected" />
+                                <label [for]="group.num">{{ group.title }}</label>
+                            </div>
+                        </div>
+                    }
+                </div>
+
+                <!-- Section 5 -->
+                <div class="section-title">
+                    <div class="section-num">5</div>
+                    <span class="section-name">Ảnh hưởng/Hậu quả</span>
+                </div>
+                <div class="section-divider"></div>
+                <div class="purchase-grid">
+                    @for (group of reason; track group.num) {
+                        <div class="purchase-card">
+                            <div class="check-item">
+                                <p-checkbox [inputId]="'group' + group.num" [name]="'group' + group.num" [value]="group.title" [(ngModel)]="selected" />
+                                <label [for]="group.num">{{ group.title }}</label>
+                            </div>
+                        </div>
+                    }
+                </div>
+
+                <!-- Section 6 -->
+                <div class="section-title">
+                    <div class="section-num">6</div>
+                    <span class="section-name">Cách xử lý khi lỗi đã xảy ra</span>
+                </div>
+                <div class="section-divider"></div>
+                <div class="field">
+                    <label>Nội dung mô tả</label>
+                    <textarea pTextarea [(ngModel)]="form.moTa" rows="4" placeholder="Mô tả chi tiết tình huống xảy ra lỗi…"> </textarea>
+
+                    <div class="mt-2 flex ">
+                        <span class="text-black font-bold text-xl border-b-2 border-black dark:border-white">Xác nhận của cấp trên:</span>
+
+                        @for (option of option; track option.value) {
+                            <div class="purchase-card">
+                                <div class="check-item">
+                                    <p-checkbox [inputId]="'option' + option.value" [name]="'option' + option.value" [value]="option.name" [(ngModel)]="selected" />
+                                    <label [for]="option.value">{{ option.name }}</label>
+                                </div>
+                            </div>
+                        }
+                    </div>
+                </div>
+
+                <!-- Section 7 -->
+                <div class="section-title">
+                    <div class="section-num">7</div>
+                    <span class="section-name">Đối sách</span>
+                </div>
+                <div class="section-divider"></div>
+                <div class="field">
+                    <label>Nội dung mô tả</label>
+                    <textarea pTextarea [(ngModel)]="form.moTa" rows="4" placeholder="Mô tả chi tiết tình huống xảy ra lỗi…"> </textarea>
+                    <div class="mt-2 flex ">
+                        <span class="text-black font-bold text-xl border-b-2 border-black dark:border-white">Xác nhận của cấp trên:</span>
+
+                        @for (option of option; track option.value) {
+                            <div class="purchase-card">
+                                <div class="check-item">
+                                    <p-checkbox [inputId]="'option' + option.value" [name]="'option' + option.value" [value]="option.name" [(ngModel)]="selected" />
+                                    <label [for]="option.value">{{ option.name }}</label>
+                                </div>
+                            </div>
+                        }
+                    </div>
+                </div>
+
+                <!-- Section 8 -->
+                <div class="section-title">
+                    <div class="section-num">8</div>
+                    <span class="section-name"> Quy trình - quy định - biểu mẫu (tham khảo)</span>
+                </div>
+                <div class="section-divider"></div>
+                <div class="purchase-grid">
+                    <div class="purchase-card">
+                        <div class="purchase-header flex items-center">
+                            <span class="purchase-num">1</span>
+                            <p class="purchase-title">Tên quy trình - quy định</p>
+                        </div>
+                        <div class="flex flex-col gap-3">
+                            <div *ngFor="let item of items; let i = index; trackBy: trackByIndex" class="flex items-center gap-2">
+                                <input pInputText [(ngModel)]="items[i]" [name]="'item_' + i" placeholder="Nhập giá trị..." class="flex-1" />
+
+                                <!-- Nút xóa — chỉ hiện khi có hơn 1 ô -->
+                                <button
+                                    *ngIf="items.length > 1"
+                                    type="button"
+                                    (click)="removeItem(i)"
+                                    class="w-8 h-8 flex items-center justify-center
+                       rounded-lg border border-black/15 text-gray-400
+                       hover:bg-red-50 hover:border-red-300 hover:text-red-500
+                       transition-all"
+                                >
+                                    <i class="pi pi-minus text-xs"></i>
+                                </button>
+                            </div>
+
+                            <!-- Nút thêm -->
+                            <button
+                                type="button"
+                                (click)="addItem()"
+                                class="flex items-center gap-2 px-4 py-2 w-fit
+                   rounded-lg border border-dashed border-black/20
+                   text-sm text-gray-400 font-medium
+                   hover:border-black/40 hover:text-black
+                   transition-all dark:border-white/20
+                   dark:hover:border-white/50 dark:hover:text-white"
+                            >
+                                <i class="pi pi-plus text-xs"></i>
+                                Thêm dòng
+                            </button>
+                        </div>
+                    </div>
+                    <div class="purchase-card">
+                        <div class="purchase-header">
+                            <span class="purchase-num">2</span>
+                            <p class="purchase-title">Hiện trạng</p>
+                        </div>
+                        <div class="flex flex-col gap-3">
+                            <div *ngFor="let item of items; let i = index; trackBy: trackByIndex" class="flex items-center gap-2">
+                                <input pInputText [(ngModel)]="items[i]" [name]="'item_' + i" placeholder="Nhập giá trị..." class="flex-1" />
+
+                                <!-- Nút xóa — chỉ hiện khi có hơn 1 ô -->
+                                <button
+                                    *ngIf="items.length > 1"
+                                    type="button"
+                                    (click)="removeItem(i)"
+                                    class="w-8 h-8 flex items-center justify-center
+                       rounded-lg border border-black/15 text-gray-400
+                       hover:bg-red-50 hover:border-red-300 hover:text-red-500
+                       transition-all"
+                                >
+                                    <i class="pi pi-minus text-xs"></i>
+                                </button>
+                            </div>
+
+                            <!-- Nút thêm -->
+                            <button
+                                type="button"
+                                (click)="addItem()"
+                                class="flex items-center gap-2 px-4 py-2 w-fit
+                   rounded-lg border border-dashed border-black/20
+                   text-sm text-gray-400 font-medium
+                   hover:border-black/40 hover:text-black
+                   transition-all dark:border-white/20
+                   dark:hover:border-white/50 dark:hover:text-white"
+                            >
+                                <i class="pi pi-plus text-xs"></i>
+                                Thêm dòng
+                            </button>
+                        </div>
+                    </div>
+                    <div class="purchase-card">
+                        <div class="purchase-header">
+                            <span class="purchase-num">3</span>
+                            <p class="purchase-title">Mô tả ngắn</p>
+                        </div>
+                        <div class="flex flex-col gap-3">
+                            <div *ngFor="let item of items; let i = index; trackBy: trackByIndex" class="flex items-center gap-2">
+                                <input pInputText [(ngModel)]="items[i]" [name]="'item_' + i" placeholder="Nhập giá trị..." class="flex-1" />
+
+                                <!-- Nút xóa — chỉ hiện khi có hơn 1 ô -->
+                                <button
+                                    *ngIf="items.length > 1"
+                                    type="button"
+                                    (click)="removeItem(i)"
+                                    class="w-8 h-8 flex items-center justify-center
+                       rounded-lg border border-black/15 text-gray-400
+                       hover:bg-red-50 hover:border-red-300 hover:text-red-500
+                       transition-all"
+                                >
+                                    <i class="pi pi-minus text-xs"></i>
+                                </button>
+                            </div>
+
+                            <!-- Nút thêm -->
+                            <button
+                                type="button"
+                                (click)="addItem()"
+                                class="flex items-center gap-2 px-4 py-2 w-fit
+                   rounded-lg border border-dashed border-black/20
+                   text-sm text-gray-400 font-medium
+                   hover:border-black/40 hover:text-black
+                   transition-all dark:border-white/20
+                   dark:hover:border-white/50 dark:hover:text-white"
+                            >
+                                <i class="pi pi-plus text-xs"></i>
+                                Thêm dòng
+                            </button>
+                        </div>
+                    </div>
+                    <div class="purchase-card">
+                        <div class="purchase-header">
+                            <span class="purchase-num">4</span>
+                            <p class="purchase-title">Hành động đề xuất</p>
+                        </div>
+                        <div class="flex flex-col gap-3">
+                            <div *ngFor="let item of items; let i = index; trackBy: trackByIndex" class="flex items-center gap-2">
+                                <input pInputText [(ngModel)]="items[i]" [name]="'item_' + i" placeholder="Nhập giá trị..." class="flex-1" />
+
+                                <!-- Nút xóa — chỉ hiện khi có hơn 1 ô -->
+                                <button
+                                    *ngIf="items.length > 1"
+                                    type="button"
+                                    (click)="removeItem(i)"
+                                    class="w-8 h-8 flex items-center justify-center
+                       rounded-lg border border-black/15 text-gray-400
+                       hover:bg-red-50 hover:border-red-300 hover:text-red-500
+                       transition-all"
+                                >
+                                    <i class="pi pi-minus text-xs"></i>
+                                </button>
+                            </div>
+
+                            <!-- Nút thêm -->
+                            <button
+                                type="button"
+                                (click)="addItem()"
+                                class="flex items-center gap-2 px-4 py-2 w-fit
+                   rounded-lg border border-dashed border-black/20
+                   text-sm text-gray-400 font-medium
+                   hover:border-black/40 hover:text-black
+                   transition-all dark:border-white/20
+                   dark:hover:border-white/50 dark:hover:text-white"
+                            >
+                                <i class="pi pi-plus text-xs"></i>
+                                Thêm dòng
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Footer -->
+                <div class="form-footer">
+                    <p-button label="Hủy" severity="secondary" outlined />
+                    <p-button label="Gửi Form" icon="pi pi-send" iconPos="right" (click)="submitForm()" />
+                </div>
+            </div>
+        </div>
+    `
+})
+export class MediaDemo implements OnInit {
+    cities: City[] = [];
+    productCode: Code[] = [];
+    supplier: any[] = [];
+    selected: string[] = [];
+    items: string[] = [''];
+    form = {
+        nguoiLap: '',
+        nhom: '',
+        viTri: '',
+        nhaCungCap: '',
+        maHang: '',
+        ngayPhatSinh: null,
+        tenLoi: '',
+        boPhan: '',
+        moTa: ''
+    };
+
+    purchaseGroups = [
+        {
+            num: 1,
+            title: 'Yêu cầu mua hàng',
+            items: [
+                { id: 'y1', value: 'ban-ve', label: 'Bản vẽ/thông số không rõ ràng' },
+                { id: 'y2', value: 'tieu-chuan', label: 'Thiếu tiêu chuẩn kiểm tra' },
+                { id: 'y3', value: 'sai-ma', label: 'Sai mã / tên sản phẩm' }
+            ]
+        },
+        {
+            num: 2,
+            title: 'Lập PR / Duyệt PR',
+            items: [
+                { id: 'p1', value: 'pr-trung', label: 'PR tạo trùng' },
+                { id: 'p2', value: 'pr-thieu', label: 'Thiếu thông tin PR' },
+                { id: 'p3', value: 'pr-sai-gia', label: 'Sai đơn giá trên PR' }
+            ]
+        },
+        {
+            num: 3,
+            title: 'Tìm kiếm NCC',
+            items: [
+                { id: 'n1', value: 'ncc-nang-luc', label: 'NCC không đủ năng lực' },
+                { id: 'n2', value: 'ncc-audit', label: 'NCC chưa được audit' },
+                { id: 'n3', value: 'ncc-iso', label: 'NCC không có ISO/IATF' }
+            ]
+        },
+        {
+            num: 4,
+            title: 'So sánh giá',
+            items: [
+                { id: 'g1', value: 'bao-gia', label: 'Báo giá không rõ điều kiện' },
+                { id: 'g2', value: 'sai-gia', label: 'Sai giá khi lên PO' },
+                { id: 'g3', value: 'gia-cu', label: 'Không cập nhật giá mới' },
+                { id: 'g4', value: 'phi-phat-sinh', label: 'Giá chưa bao gồm chi phí PS' }
+            ]
+        },
+        {
+            num: 5,
+            title: 'Lập PO / Duyệt PO',
+            items: [
+                { id: 'po1', value: 'po-sai-don-gia', label: 'Sai đơn giá trên PO' },
+                { id: 'po2', value: 'po-thieu-tt', label: 'Thiếu thông tin PO' },
+                { id: 'po3', value: 'po-trung', label: 'PO tạo trùng' },
+                { id: 'po4', value: 'po-sai-ncc', label: 'Sai thông tin NCC' }
+            ]
+        },
+        {
+            num: 6,
+            title: 'Thực hiện mua hàng',
+            items: [
+                { id: 'th1', value: 'th-tre-han', label: 'Trễ hạn giao hàng' },
+                { id: 'th2', value: 'th-sai-sl', label: 'Sai số lượng đặt hàng' },
+                { id: 'th3', value: 'th-khong-xn', label: 'Không xác nhận đơn hàng' },
+                { id: 'th4', value: 'th-sai-dc', label: 'Sai địa chỉ giao hàng' }
+            ]
+        },
+        {
+            num: 7,
+            title: 'Nhận hàng',
+            items: [
+                { id: 'nh1', value: 'nh-thieu', label: 'Thiếu hàng so với PO' },
+                { id: 'nh2', value: 'nh-hong', label: 'Hàng hỏng khi nhận' },
+                { id: 'nh3', value: 'nh-sai-qc', label: 'Không kiểm tra QC đầu vào' },
+                { id: 'nh4', value: 'nh-sai-ma', label: 'Sai mã hàng nhận về' }
+            ]
+        },
+        {
+            num: 8,
+            title: 'Thanh toán',
+            items: [
+                { id: 'tt1', value: 'tt-sai-so', label: 'Sai số tiền thanh toán' },
+                { id: 'tt2', value: 'tt-tre', label: 'Thanh toán trễ hạn' },
+                { id: 'tt3', value: 'tt-thieu-hs', label: 'Thiếu hồ sơ thanh toán' },
+                { id: 'tt4', value: 'tt-sai-tk', label: 'Sai tài khoản thụ hưởng' }
+            ]
+        }
+    ];
+
+    reason = [
+        {
+            num: 1,
+            title: 'Con người (MAN)'
+        },
+        {
+            num: 2,
+            title: 'Lập PR / Duyệt PR'
+        },
+        {
+            num: 3,
+            title: 'Tìm kiếm NCC'
+        },
+        {
+            num: 4,
+            title: 'So sánh giá'
+        },
+        {
+            num: 5,
+            title: 'Lập PO / Duyệt PO'
+        },
+        {
+            num: 6,
+            title: 'Thực hiện mua hàng'
+        },
+        {
+            num: 7,
+            title: 'Nhận hàng'
+        },
+        {
+            num: 8,
+            title: 'Thanh toán'
+        }
+    ];
+
+    option = [
+        {
+            name: 'Hoàn thành',
+            value: 1
+        },
+        {
+            name: 'Chưa hoàn thành',
+            value: 2
+        }
+    ];
+
+    ngOnInit() {
+        this.cities = [
+            { name: 'Vật tư', code: 'VT' },
+            { name: 'Nguyên liệu', code: 'NL' },
+            { name: 'Dịch vụ', code: 'DV' },
+            { name: 'Thiết bị', code: 'TB' }
+        ];
+        this.productCode = [
+            { name: 'MH001', code: '1' },
+            { name: 'MH002', code: '2' },
+            { name: 'MH003', code: '3' }
+        ];
+        this.supplier = [
+            { name: 'NCC An Vũ', code: 'AV' },
+            { name: 'NCC Nông Lâm', code: 'NL' },
+            { name: 'Yamaichi VN', code: 'YM' }
+        ];
+    }
+
+    submitForm() {
+        console.log({ form: this.form, selected: this.selected });
+    }
+
+    addItem() {
+        this.items.push('');
+    }
+
+    removeItem(index: number) {
+        this.items.splice(index, 1);
+    }
+
+    trackByIndex(index: number) {
+        return index;
+    }
+}