@duyanhdev/mvp-ifs-ui-kit 21.0.0

package/src/app/pages/tickets/tickets-list/ticket-list.ts

@@ -0,0 +1,178 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+export type TicketStatus   = 'open' | 'progress' | 'done';
+export type TicketPriority = 'high' | 'medium' | 'low';
+
+export interface Ticket {
+  id:        string;
+  title:     string;
+  sub?:      string;
+  type:      string;
+  priority:  TicketPriority;
+  requester: string;
+  dept:      string;
+  status:    TicketStatus;
+  created:   string;
+}
+
+interface FilterOption {
+  label:     string;
+  value:     string;
+  dotColor?: string;
+}
+
+@Component({
+  selector: 'app-ticket-list',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  templateUrl: './ticket-list.html',
+  styleUrls: ['./ticket-list.scss'],
+})
+export class TicketListComponent implements OnInit {
+
+  // ── State ────────────────────────────────────────────────────
+  searchQuery  = '';
+  activeFilter = 'all';
+  currentPage  = 1;
+  perPage      = 10;
+
+  filters: FilterOption[] = [
+    { label: 'Tất cả',   value: 'all' },
+    { label: 'Mở',       value: 'open',     dotColor: '#ef4444' },
+    { label: 'Xử lý',    value: 'progress', dotColor: '#f59e0b' },
+    { label: 'Xong',     value: 'done',     dotColor: '#10b981' },
+  ];
+
+  // ── Data (thay bằng service thực tế) ────────────────────────
+  data: Ticket[] = [
+    { id:'TK-001', title:'Màn hình không hiển thị',       sub:'Dell P2419H',        type:'Hardware',   priority:'high',   requester:'Nguyễn Văn An',    dept:'Kế toán',      status:'open',     created:'2025-07-01' },
+    { id:'TK-002', title:'Không kết nối được VPN',        sub:'HP EliteBook',        type:'Mạng',       priority:'high',   requester:'Trần Thị Bình',    dept:'Kinh doanh',   status:'progress', created:'2025-07-02' },
+    { id:'TK-003', title:'Cài đặt phần mềm MISA',         sub:'PC-KT-03',            type:'Software',   priority:'medium', requester:'Lê Minh Cường',    dept:'Kế toán',      status:'done',     created:'2025-07-02' },
+    { id:'TK-004', title:'Quên mật khẩu Windows',         sub:'Lenovo ThinkPad',     type:'Tài khoản',  priority:'medium', requester:'Phạm Thu Dung',    dept:'Nhân sự',      status:'done',     created:'2025-07-03' },
+    { id:'TK-005', title:'Máy in offline',                sub:'HP LaserJet M404',    type:'Máy in',     priority:'low',    requester:'Hoàng Văn Em',     dept:'Vận hành',     status:'open',     created:'2025-07-03' },
+    { id:'TK-006', title:'Email gửi đi bị spam',          sub:'—',                   type:'Email',      priority:'medium', requester:'Vũ Thị Phương',    dept:'Marketing',    status:'progress', created:'2025-07-04' },
+    { id:'TK-007', title:'CPU quá nóng 95°C',             sub:'PC-IT-07',            type:'Hardware',   priority:'high',   requester:'Đỗ Quang Hưng',    dept:'IT',           status:'open',     created:'2025-07-05' },
+    { id:'TK-008', title:'Mất file sau khi format',       sub:'Dell XPS 15',         type:'Software',   priority:'high',   requester:'Ngô Thanh Lan',    dept:'Ban giám đốc', status:'progress', created:'2025-07-05' },
+    { id:'TK-009', title:'WiFi yếu tầng 3',               sub:'—',                   type:'Mạng',       priority:'low',    requester:'Bùi Văn Minh',     dept:'Vận hành',     status:'done',     created:'2025-07-06' },
+    { id:'TK-010', title:'CRM không mở được',             sub:'PC-KD-10',            type:'Software',   priority:'medium', requester:'Lý Ngọc Nam',      dept:'Kinh doanh',   status:'open',     created:'2025-07-07' },
+    { id:'TK-011', title:'Tạo tài khoản nhân viên mới',   sub:'—',                   type:'Tài khoản',  priority:'low',    requester:'Trần Văn Oai',     dept:'Nhân sự',      status:'done',     created:'2025-07-07' },
+    { id:'TK-012', title:'BSOD khi chạy Excel',           sub:'PC-KT-12',            type:'Hardware',   priority:'high',   requester:'Đinh Thị Phúc',    dept:'Kế toán',      status:'progress', created:'2025-07-08' },
+    { id:'TK-013', title:'Không vào được portal nội bộ',  sub:'—',                   type:'Mạng',       priority:'high',   requester:'Cao Minh Quân',    dept:'IT',           status:'open',     created:'2025-07-08' },
+    { id:'TK-014', title:'Outlook không đồng bộ lịch',    sub:'PC-HR-05',            type:'Email',      priority:'medium', requester:'Phan Thị Ry',      dept:'Nhân sự',      status:'progress', created:'2025-07-09' },
+    { id:'TK-015', title:'Màn hình thứ 2 không nhận',     sub:'Dell U2722',          type:'Hardware',   priority:'low',    requester:'Lê Anh Sơn',       dept:'Thiết kế',     status:'open',     created:'2025-07-09' },
+    { id:'TK-016', title:'Không in được file PDF',        sub:'HP Color LaserJet',   type:'Máy in',     priority:'medium', requester:'Nguyễn Thu Thảo',  dept:'Marketing',    status:'done',     created:'2025-07-10' },
+    { id:'TK-017', title:'VPN ngắt kết nối liên tục',     sub:'—',                   type:'Mạng',       priority:'high',   requester:'Trịnh Văn Uy',     dept:'Kinh doanh',   status:'progress', created:'2025-07-10' },
+    { id:'TK-018', title:'Quên mã PIN máy tính bảng',     sub:'iPad Pro',            type:'Tài khoản',  priority:'low',    requester:'Bùi Thị Vân',      dept:'Ban giám đốc', status:'done',     created:'2025-07-11' },
+    { id:'TK-019', title:'Phần mềm kế toán bị lỗi',       sub:'MISA SME',            type:'Software',   priority:'high',   requester:'Đặng Văn Xuân',    dept:'Kế toán',      status:'open',     created:'2025-07-11' },
+    { id:'TK-020', title:'Máy scan không nhận driver',    sub:'Canon DR-C240',       type:'Máy in',     priority:'medium', requester:'Hoàng Thị Yến',    dept:'Hành chính',   status:'progress', created:'2025-07-12' },
+  ];
+
+  filteredData: Ticket[] = [];
+  pagedData:    Ticket[] = [];
+
+  // ── Lifecycle ────────────────────────────────────────────────
+  ngOnInit(): void { this.applyFilter(); }
+
+  // ── Filter / Search ──────────────────────────────────────────
+  onSearch(): void { this.currentPage = 1; this.applyFilter(); }
+
+  setFilter(value: string): void {
+    this.activeFilter = value;
+    this.currentPage  = 1;
+    this.applyFilter();
+  }
+
+  private applyFilter(): void {
+    const q = this.searchQuery.toLowerCase().trim();
+    this.filteredData = this.data.filter(t => {
+      const mf = this.activeFilter === 'all' || t.status === this.activeFilter;
+      const ms = !q || [t.id, t.title, t.requester, t.dept].some(v => v.toLowerCase().includes(q));
+      return mf && ms;
+    });
+    this.buildPage();
+  }
+
+  // ── Pagination ───────────────────────────────────────────────
+  get totalPages(): number {
+    return Math.max(1, Math.ceil(this.filteredData.length / this.perPage));
+  }
+
+  get rangeFrom(): number {
+    return this.filteredData.length === 0 ? 0 : (this.currentPage - 1) * this.perPage + 1;
+  }
+
+  get rangeTo(): number {
+    return Math.min(this.currentPage * this.perPage, this.filteredData.length);
+  }
+
+  get pageRange(): number[] {
+    const total = this.totalPages;
+    const cur   = this.currentPage;
+    const set   = new Set<number>([1, total, cur]);
+    if (cur > 1) set.add(cur - 1);
+    if (cur < total) set.add(cur + 1);
+    return [...set].sort((a, b) => a - b);
+  }
+
+  goPage(p: number): void {
+    if (p < 1 || p > this.totalPages) return;
+    this.currentPage = p;
+    this.buildPage();
+  }
+
+  onPerPageChange(): void {
+    this.currentPage = 1;
+    this.buildPage();
+  }
+
+  private buildPage(): void {
+    const start    = (this.currentPage - 1) * this.perPage;
+    this.pagedData = this.filteredData.slice(start, start + this.perPage);
+  }
+
+  // ── Status update ────────────────────────────────────────────
+  onStatusChange(ticket: Ticket, event: Event): void {
+    const select = event.target as HTMLSelectElement;
+    ticket.status = select.value as TicketStatus;
+    this.applyFilter();
+  }
+
+  // ── Helpers ──────────────────────────────────────────────────
+  private readonly typeClassMap: Record<string, string> = {
+    'Hardware':   'tb-hw',
+    'Software':   'tb-sw',
+    'Mạng':       'tb-net',
+    'Tài khoản':  'tb-acc',
+    'Máy in':     'tb-prt',
+    'Email':      'tb-eml',
+  };
+
+  private readonly statusLabels: Record<TicketStatus, string> = {
+    open:     'Mở',
+    progress: 'Đang xử lý',
+    done:     'Hoàn thành',
+  };
+
+  private readonly priorityLabels: Record<TicketPriority, string> = {
+    high:   'Cao',
+    medium: 'Trung bình',
+    low:    'Thấp',
+  };
+
+  getTypeClass(type: string): string      { return this.typeClassMap[type] ?? 'tb-def'; }
+  getStatusClass(s: TicketStatus): string { return `st-${s}`; }
+  getStatusLabel(s: TicketStatus): string { return this.statusLabels[s] ?? s; }
+  getPriorityClass(p: TicketPriority): string { return `pri-${p}`; }
+  getPriorityLabel(p: TicketPriority): string { return this.priorityLabels[p] ?? p; }
+
+  countByStatus(status: TicketStatus): number {
+    return this.data.filter(t => t.status === status).length;
+  }
+
+  onView(ticket: Ticket): void {
+    console.log('View ticket:', ticket);
+    // TODO: navigate hoặc mở dialog chi tiết
+  }
+}

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

@@ -0,0 +1,254 @@
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MessageService, ConfirmationService } from 'primeng/api';
+import { ButtonModule } from 'primeng/button';
+import { TableModule } from 'primeng/table';
+import { DialogModule } from 'primeng/dialog';
+import { InputTextModule } from 'primeng/inputtext';
+import { InputNumberModule } from 'primeng/inputnumber';
+import { SelectModule } from 'primeng/select';
+import { ToastModule } from 'primeng/toast';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { TagModule } from 'primeng/tag';
+import { TooltipModule } from 'primeng/tooltip';
+import { IconFieldModule } from 'primeng/iconfield';
+import { InputIconModule } from 'primeng/inputicon';
+
+export interface VatTu {
+    id: number;
+    maVatTu: string;
+    tenVatTu: string;
+    donViTinh: string;
+    soLuong: number;
+    donGia: number;
+    nhaCungCap: string;
+    trangThai: 'Con hang' | 'Het hang' | 'Sap het';
+    ngayNhap: Date;
+}
+
+@Component({
+    selector: 'app-button-demo',
+    standalone: true,
+    imports: [CommonModule, FormsModule, ButtonModule, TableModule, DialogModule, InputTextModule, InputNumberModule, SelectModule, ToastModule, ConfirmDialogModule, TagModule, TooltipModule, IconFieldModule, InputIconModule],
+    providers: [MessageService, ConfirmationService],
+    styles: [
+        `
+            :host ::ng-deep .p-paginator {
+                justify-content: flex-end !important;
+            }
+        `
+    ],
+    template: ``
+})
+export class ButtonDemo implements OnInit {
+    @ViewChild('fileInput') fileInput!: ElementRef;
+
+    vatTuList: VatTu[] = [];
+    selectedVatTu: VatTu[] = [];
+    vatTu: VatTu | null = null;
+    importPreview: VatTu[] = [];
+
+    first = 0;
+    rows = 10;
+    searchValue = '';
+
+    showDialog = false;
+    showImportDialog = false;
+    isEditMode = false;
+    isViewMode = false;
+    dialogTitle = '';
+
+    donViTinhOptions = ['Cái', 'Hộp', 'Thùng', 'Kg', 'Lít', 'Mét', 'Tấm', 'Cuộn', 'Bộ'];
+    nhaCungCapOptions = ['Công ty TNHH Thiên Phú', 'Cty CP Minh Long', 'Đại lý Hoàng Gia', 'Nhà máy Đông Nam', 'Tập đoàn Việt Tiến'];
+    trangThaiOptions = [
+        { label: 'Còn hàng', value: 'Con hang' },
+        { label: 'Hết hàng', value: 'Het hang' },
+        { label: 'Sắp hết', value: 'Sap het' }
+    ];
+
+    constructor(
+        private messageService: MessageService,
+        private confirmationService: ConfirmationService
+    ) {}
+
+    ngOnInit() {
+        this.vatTuList = this.getFakeData();
+    }
+
+    // ═══════════════════════════════════════════════════════
+    // EXPORT EXCEL
+    // ═══════════════════════════════════════════════════════
+    exportExcel() {}
+
+    // ═══════════════════════════════════════════════════════
+    // EXPORT PDF
+    // ═══════════════════════════════════════════════════════
+    exportPDF() {}
+
+    // ═══════════════════════════════════════════════════════
+    // IMPORT EXCEL
+    // ═══════════════════════════════════════════════════════
+    onFileImport(event: any) {}
+
+    // ═══════════════════════════════════════════════════════
+    // CRUD
+    // ═══════════════════════════════════════════════════════
+    openNew() {
+        this.vatTu = { id: 0, maVatTu: '', tenVatTu: '', donViTinh: 'Cái', soLuong: 0, donGia: 0, nhaCungCap: '', trangThai: 'Con hang', ngayNhap: new Date() };
+        this.isEditMode = false;
+        this.isViewMode = false;
+        this.dialogTitle = 'Thêm vật tư mới';
+        this.showDialog = true;
+    }
+
+    viewVatTu(vt: VatTu) {
+        this.vatTu = { ...vt };
+        this.isViewMode = true;
+        this.isEditMode = false;
+        this.dialogTitle = 'Chi tiết vật tư';
+        this.showDialog = true;
+    }
+
+    editVatTu(vt: VatTu) {
+        this.vatTu = { ...vt };
+        this.isEditMode = true;
+        this.isViewMode = false;
+        this.dialogTitle = 'Cập nhật vật tư';
+        this.showDialog = true;
+    }
+
+    save() {
+        if (!this.vatTu) return;
+        if (!this.vatTu.maVatTu || !this.vatTu.tenVatTu || !this.vatTu.nhaCungCap) {
+            this.messageService.add({ severity: 'warn', summary: 'Thiếu thông tin', detail: 'Vui lòng điền đầy đủ các trường bắt buộc!' });
+            return;
+        }
+        if (this.isEditMode) {
+            const idx = this.vatTuList.findIndex((v) => v.id === this.vatTu!.id);
+            if (idx !== -1) this.vatTuList[idx] = { ...this.vatTu };
+            this.vatTuList = [...this.vatTuList];
+            this.messageService.add({ severity: 'success', summary: 'Cập nhật thành công', detail: this.vatTu.tenVatTu });
+        } else {
+            this.vatTu.id = Math.max(0, ...this.vatTuList.map((v) => v.id)) + 1;
+            this.vatTu.ngayNhap = new Date();
+            this.vatTuList = [...this.vatTuList, { ...this.vatTu }];
+            this.messageService.add({ severity: 'success', summary: 'Thêm thành công', detail: this.vatTu.tenVatTu });
+        }
+        this.hideDialog();
+    }
+
+    deleteVatTu(vt: VatTu) {
+        this.confirmationService.confirm({
+            message: `Xóa vật tư <b>${vt.tenVatTu}</b>?`,
+            header: 'Xác nhận xóa',
+            icon: 'pi pi-exclamation-triangle',
+            acceptLabel: 'Xóa',
+            rejectLabel: 'Hủy',
+            acceptButtonStyleClass: 'p-button-danger',
+            accept: () => {
+                this.vatTuList = this.vatTuList.filter((v) => v.id !== vt.id);
+                this.messageService.add({ severity: 'success', summary: 'Đã xóa', detail: vt.tenVatTu });
+            }
+        });
+    }
+
+    deleteSelected() {
+        this.confirmationService.confirm({
+            message: `Xóa <b>${this.selectedVatTu.length}</b> vật tư đã chọn?`,
+            header: 'Xác nhận xóa nhiều',
+            icon: 'pi pi-exclamation-triangle',
+            acceptLabel: 'Xóa tất cả',
+            rejectLabel: 'Hủy',
+            acceptButtonStyleClass: 'p-button-danger',
+            accept: () => {
+                const ids = new Set(this.selectedVatTu.map((v) => v.id));
+                this.vatTuList = this.vatTuList.filter((v) => !ids.has(v.id));
+                this.selectedVatTu = [];
+                this.messageService.add({ severity: 'success', summary: 'Đã xóa', detail: 'Xóa các vật tư đã chọn thành công.' });
+            }
+        });
+    }
+
+    hideDialog() {
+        this.showDialog = false;
+        this.vatTu = null;
+        this.isViewMode = false;
+        this.isEditMode = false;
+    }
+
+    // ═══════════════════════════════════════════════════════
+    // HELPERS
+    // ═══════════════════════════════════════════════════════
+    private getDateStr() {
+        return new Date().toISOString().slice(0, 10).replace(/-/g, '');
+    }
+
+    private parseTrangThai(val: string): 'Con hang' | 'Het hang' | 'Sap het' {
+        if (!val) return 'Con hang';
+        const v = val.toLowerCase();
+        if (v.includes('hết hang') || v.includes('het hang')) return 'Het hang';
+        if (v.includes('sắp') || v.includes('sap')) return 'Sap het';
+        return 'Con hang';
+    }
+
+    getSeverity(tt: string): 'success' | 'warn' | 'danger' {
+        return tt === 'Con hang' ? 'success' : tt === 'Sap het' ? 'warn' : 'danger';
+    }
+
+    getLabelTrangThai(tt: string): string {
+        return tt === 'Con hang' ? 'Còn hàng' : tt === 'Sap het' ? 'Sắp hết' : 'Hết hàng';
+    }
+
+    getSoLuongClass(sl: number): string {
+        if (sl === 0) return 'font-bold text-red-600';
+        if (sl <= 10) return 'font-bold text-orange-500';
+        return 'font-bold text-green-600';
+    }
+
+    // ═══════════════════════════════════════════════════════
+    // PAGINATION
+    // ═══════════════════════════════════════════════════════
+    next() {
+        this.first = this.first + this.rows;
+    }
+    prev() {
+        this.first = this.first - this.rows;
+    }
+    reset() {
+        this.first = 0;
+    }
+    pageChange(e: any) {
+        this.first = e.first;
+        this.rows = e.rows;
+    }
+    isLastPage(): boolean {
+        return this.vatTuList ? this.first + this.rows >= this.vatTuList.length : true;
+    }
+    isFirstPage(): boolean {
+        return this.vatTuList ? this.first === 0 : true;
+    }
+
+    confirmImport() {}
+
+    downloadTemplate() {}
+    // ═══════════════════════════════════════════════════════
+    // FAKE DATA
+    // ═══════════════════════════════════════════════════════
+    getFakeData(): VatTu[] {
+        return [
+            { id: 1, maVatTu: 'VT001', tenVatTu: 'Ống thép DN50', donViTinh: 'Mét', soLuong: 250, donGia: 85000, nhaCungCap: 'Công ty TNHH Thiên Phú', trangThai: 'Con hang', ngayNhap: new Date('2024-01-15') },
+            { id: 2, maVatTu: 'VT002', tenVatTu: 'Van cầu inox PN16', donViTinh: 'Cái', soLuong: 8, donGia: 320000, nhaCungCap: 'Cty CP Minh Long', trangThai: 'Sap het', ngayNhap: new Date('2024-02-10') },
+            { id: 3, maVatTu: 'VT003', tenVatTu: 'Dây cáp điện 3x4mm', donViTinh: 'Mét', soLuong: 500, donGia: 42000, nhaCungCap: 'Tập đoàn Việt Tiến', trangThai: 'Con hang', ngayNhap: new Date('2024-01-20') },
+            { id: 4, maVatTu: 'VT004', tenVatTu: 'Bulong M16 x 80', donViTinh: 'Hộp', soLuong: 0, donGia: 155000, nhaCungCap: 'Đại lý Hoàng Gia', trangThai: 'Het hang', ngayNhap: new Date('2023-12-05') },
+            { id: 5, maVatTu: 'VT005', tenVatTu: 'Sơn chống rỉ Jotun', donViTinh: 'Thùng', soLuong: 15, donGia: 1250000, nhaCungCap: 'Nhà máy Đông Nam', trangThai: 'Con hang', ngayNhap: new Date('2024-03-01') },
+            { id: 6, maVatTu: 'VT006', tenVatTu: 'Gioăng cao su DN100', donViTinh: 'Cái', soLuong: 6, donGia: 45000, nhaCungCap: 'Công ty TNHH Thiên Phú', trangThai: 'Sap het', ngayNhap: new Date('2024-02-28') },
+            { id: 7, maVatTu: 'VT007', tenVatTu: 'Tấm thép tấm 5mm', donViTinh: 'Tấm', soLuong: 40, donGia: 780000, nhaCungCap: 'Tập đoàn Việt Tiến', trangThai: 'Con hang', ngayNhap: new Date('2024-01-08') },
+            { id: 8, maVatTu: 'VT008', tenVatTu: 'CB Schneider 3P 100A', donViTinh: 'Cái', soLuong: 12, donGia: 2350000, nhaCungCap: 'Cty CP Minh Long', trangThai: 'Con hang', ngayNhap: new Date('2024-03-10') },
+            { id: 9, maVatTu: 'VT009', tenVatTu: 'Xăng dầu DO 0.05S', donViTinh: 'Lít', soLuong: 0, donGia: 21500, nhaCungCap: 'Đại lý Hoàng Gia', trangThai: 'Het hang', ngayNhap: new Date('2024-02-01') },
+            { id: 10, maVatTu: 'VT010', tenVatTu: 'Bảo hộ lao động bộ', donViTinh: 'Bộ', soLuong: 30, donGia: 185000, nhaCungCap: 'Nhà máy Đông Nam', trangThai: 'Con hang', ngayNhap: new Date('2024-03-05') },
+            { id: 11, maVatTu: 'VT011', tenVatTu: 'Bơm ly tâm 22kW', donViTinh: 'Cái', soLuong: 2, donGia: 18500000, nhaCungCap: 'Tập đoàn Việt Tiến', trangThai: 'Con hang', ngayNhap: new Date('2024-01-25') },
+            { id: 12, maVatTu: 'VT012', tenVatTu: 'Vòng bi SKF 6205', donViTinh: 'Cái', soLuong: 7, donGia: 95000, nhaCungCap: 'Công ty TNHH Thiên Phú', trangThai: 'Sap het', ngayNhap: new Date('2024-02-14') }
+        ];
+    }
+}