@duyanhdev/mvp-ifs-ui-kit 21.0.0

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

@@ -0,0 +1,150 @@
+<div class="tl-wrap">
+    <!-- ── Header ─────────────────────────────────────────────────── -->
+    <div class="tl-header">
+        <div class="tl-header-left">
+            <div class="tl-header-title">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2" />
+                    <rect x="9" y="3" width="6" height="4" rx="1" />
+                    <path d="M9 12h6M9 16h4" />
+                </svg>
+                Danh sách ticket
+            </div>
+            <div class="tl-header-sub">Quản lý và theo dõi tất cả yêu cầu hỗ trợ</div>
+        </div>
+
+        <div class="tl-header-stats">
+            <div class="hstat hstat-open">
+                <span class="hstat-dot hstat-dot--open"></span>
+                {{ countByStatus('open') }} Mở
+            </div>
+            <div class="hstat hstat-prog">
+                <span class="hstat-dot hstat-dot--prog"></span>
+                {{ countByStatus('progress') }} Đang xử lý
+            </div>
+            <div class="hstat hstat-done">
+                <span class="hstat-dot hstat-dot--done"></span>
+                {{ countByStatus('done') }} Hoàn thành
+            </div>
+        </div>
+    </div>
+
+    <!-- ── Toolbar ─────────────────────────────────────────────────── -->
+    <div class="tl-toolbar">
+        <div class="tl-search">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="11" cy="11" r="8" />
+                <path d="m21 21-4.35-4.35" />
+            </svg>
+            <input type="text" [(ngModel)]="searchQuery" (ngModelChange)="onSearch()" placeholder="Tìm theo ID, tên, từ khóa..." />
+        </div>
+
+        <div class="pills">
+            <button *ngFor="let f of filters" class="pill" [class.on]="activeFilter === f.value" (click)="setFilter(f.value)">
+                <span *ngIf="f.dotColor" class="pill-dot" [style.background]="f.dotColor"></span>
+                {{ f.label }}
+            </button>
+        </div>
+    </div>
+
+    <!-- ── Table ──────────────────────────────────────────────────── -->
+    <div class="tl-table-wrap">
+        <table>
+            <thead>
+                <tr>
+                    <th class="col-id">ID</th>
+                    <th class="col-title">Tiêu đề</th>
+                    <th class="col-type">Loại</th>
+                    <th class="col-pri">Ưu tiên</th>
+                    <th class="col-req">Người yêu cầu</th>
+                    <th class="col-dept">Phòng ban</th>
+                    <th class="col-st">Trạng thái</th>
+                    <th class="col-date">Ngày tạo</th>
+                    <th class="col-upd">Cập nhật</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr *ngIf="pagedData.length === 0">
+                    <td colspan="9">
+                        <div class="empty">Không tìm thấy ticket nào</div>
+                    </td>
+                </tr>
+                <tr *ngFor="let t of pagedData" (click)="onView(t)">
+                    <td><span class="id-chip">{{ t.id }}</span></td>
+
+                    <td class="col-title-cell">
+                        <div class="row-title" [title]="t.title">{{ t.title }}</div>
+                        <div class="row-sub">{{ t.sub || '—' }}</div>
+                    </td>
+
+                    <td>
+                        <span class="type-badge" [ngClass]="getTypeClass(t.type)">{{ t.type }}</span>
+                    </td>
+
+                    <td>
+                        <span class="pri" [ngClass]="getPriorityClass(t.priority)">
+                            <span class="pri-dot"></span>
+                            {{ getPriorityLabel(t.priority) }}
+                        </span>
+                    </td>
+
+                    <td class="col-req-cell" [title]="t.requester">{{ t.requester }}</td>
+
+                    <td class="col-dept-cell">{{ t.dept }}</td>
+
+                    <td>
+                        <span class="st-badge" [ngClass]="getStatusClass(t.status)">
+                            <span class="st-dot"></span>
+                            {{ getStatusLabel(t.status) }}
+                        </span>
+                    </td>
+
+                    <td class="col-date-cell">{{ t.created }}</td>
+
+                    <td class="col-upd-cell" (click)="$event.stopPropagation()">
+                        <select class="upd-select" [value]="t.status" (change)="onStatusChange(t, $event)">
+                            <option value="open">Mở</option>
+                            <option value="progress">Đang xử lý</option>
+                            <option value="done">Hoàn thành</option>
+                        </select>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <!-- ── Footer / Phân trang ────────────────────────────────────── -->
+    <div class="tl-footer">
+        <div class="footer-left">
+            <span class="footer-info"> Hiển thị <strong>{{ rangeFrom }}–{{ rangeTo }}</strong> / <strong>{{ filteredData.length }}</strong> tickets </span>
+            <div class="per-page">
+                <span>Hiển thị</span>
+                <select class="per-select" [(ngModel)]="perPage" (ngModelChange)="onPerPageChange()">
+                    <option [value]="5">5</option>
+                    <option [value]="10">10</option>
+                    <option [value]="20">20</option>
+                </select>
+                <span>dòng</span>
+            </div>
+        </div>
+
+        <div class="pgn">
+            <button class="pg-btn" (click)="goPage(currentPage - 1)" [disabled]="currentPage === 1">
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="m15 18-6-6 6-6" />
+                </svg>
+            </button>
+
+            <ng-container *ngFor="let p of pageRange; let i = index">
+                <span *ngIf="i > 0 && pageRange[i] - pageRange[i-1] > 1" class="pg-sep">…</span>
+                <button class="pg-btn" [class.active]="p === currentPage" (click)="goPage(p)">{{ p }}</button>
+            </ng-container>
+
+            <button class="pg-btn" (click)="goPage(currentPage + 1)" [disabled]="currentPage === totalPages">
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="m9 18 6-6-6-6" />
+                </svg>
+            </button>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,392 @@
+/* ───────────────── Wrapper ───────────────── */
+.tl-wrap {
+    background: var(--surface-card);
+    border-radius: 12px;
+    border: 1px solid var(--surface-border);
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    padding: 20px;
+    margin: 0 20px;
+}
+
+/* ───────────────── Header ───────────────── */
+.tl-header {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 12px;
+    padding: 16px 20px;
+    background: var(--surface-ground);
+    border-bottom: 1px solid var(--surface-border);
+}
+
+.tl-header-left {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.tl-header-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-color);
+
+    svg {
+        color: var(--primary-color);
+    }
+}
+
+.tl-header-sub {
+    font-size: 12px;
+    color: var(--text-color-secondary);
+}
+
+/* ───── Stats ───── */
+.tl-header-stats {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+}
+
+.hstat {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 500;
+    border: 1px solid var(--surface-border);
+    background: var(--surface-ground);
+}
+
+.hstat-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+}
+
+.hstat-open {
+    color: #ef4444;
+}
+
+.hstat-prog {
+    color: #f59e0b;
+}
+
+.hstat-done {
+    color: #10b981;
+}
+
+/* ───────────────── Toolbar ───────────────── */
+.tl-toolbar {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    padding: 12px 16px;
+    background: var(--surface-ground);
+    border-bottom: 1px solid var(--surface-border);
+}
+
+/* Search */
+.tl-search {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: var(--surface-ground);
+    border: 1px solid var(--surface-border);
+    border-radius: 20px;
+    padding: 0 14px;
+    height: 34px;
+    flex: 1;
+
+    svg {
+        color: var(--text-color-secondary);
+    }
+
+    input {
+        border: none;
+        background: transparent;
+        outline: none;
+        width: 100%;
+        color: var(--text-color);
+
+        &::placeholder {
+            color: var(--text-color-secondary);
+        }
+    }
+}
+
+/* Pills */
+.pills {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+}
+
+.pill {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 14px;
+    border-radius: 20px;
+    border: 1px solid var(--surface-border);
+    background: transparent;
+    color: var(--text-color-secondary);
+    font-size: 12px;
+    cursor: pointer;
+    transition: 0.2s;
+
+    &:hover {
+        background: var(--surface-hover);
+        color: var(--text-color);
+    }
+
+    &.on {
+        background: var(--primary-color);
+        border-color: var(--primary-color);
+        color: #fff;
+    }
+}
+
+.pill-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+}
+
+/* ───────────────── Table ───────────────── */
+.tl-table-wrap {
+    overflow-x: auto;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+}
+
+thead tr {
+    background: var(--surface-ground);
+}
+
+th {
+    padding: 10px 14px;
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: .5px;
+    color: var(--text-color-secondary);
+    border-bottom: 1px solid var(--surface-border);
+}
+
+td {
+    padding: 10px 14px;
+    font-size: 13px;
+    color: var(--text-color);
+    border-bottom: 1px solid var(--surface-border);
+}
+
+tbody tr {
+    cursor: pointer;
+    transition: 0.2s;
+}
+
+tbody tr:hover td {
+    background: var(--surface-hover);
+}
+
+/* ───── Column width ───── */
+.col-id {
+    width: 80px;
+}
+
+.col-type {
+    width: 110px;
+}
+
+.col-pri {
+    width: 110px;
+}
+
+.col-req {
+    width: 150px;
+}
+
+.col-dept {
+    width: 120px;
+}
+
+.col-st {
+    width: 130px;
+}
+
+.col-date {
+    width: 110px;
+}
+
+.col-upd {
+    width: 140px;
+}
+
+/* ───── Title ───── */
+.row-title {
+    font-weight: 500;
+    color: var(--text-color);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.row-sub {
+    font-size: 11px;
+    color: var(--text-color-secondary);
+}
+
+/* ───── ID ───── */
+.id-chip {
+    font-weight: 600;
+    color: var(--primary-color);
+}
+
+/* ───── Type ───── */
+.type-badge {
+    padding: 3px 8px;
+    border-radius: 6px;
+    font-size: 11px;
+    background: var(--surface-ground);
+    border: 1px solid var(--surface-border);
+}
+
+/* ───── Priority ───── */
+.pri {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.pri-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+}
+
+.pri-high {
+    color: #ef4444;
+}
+
+.pri-medium {
+    color: #f59e0b;
+}
+
+.pri-low {
+    color: #10b981;
+}
+
+/* ───── Status ───── */
+.st-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 4px 10px;
+    border-radius: 20px;
+    font-size: 11px;
+    font-weight: 600;
+}
+
+.st-open {
+    background: color-mix(in srgb, #ef4444 20%, transparent);
+    color: #ef4444;
+}
+
+.st-progress {
+    background: color-mix(in srgb, #f59e0b 20%, transparent);
+    color: #f59e0b;
+}
+
+.st-done {
+    background: color-mix(in srgb, #10b981 20%, transparent);
+    color: #10b981;
+}
+
+/* ───── Select ───── */
+.upd-select {
+    background: var(--surface-ground);
+    border: 1px solid var(--surface-border);
+    border-radius: 8px;
+    color: var(--text-color);
+    padding: 5px 10px;
+    cursor: pointer;
+
+    &:hover {
+        border-color: var(--primary-color);
+    }
+}
+
+/* ───── Empty ───── */
+.empty {
+    text-align: center;
+    padding: 40px;
+    color: var(--text-color-secondary);
+}
+
+/* ───────────────── Footer ───────────────── */
+.tl-footer {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 10px;
+    padding: 12px 16px;
+    background: var(--surface-ground);
+    border-top: 1px solid var(--surface-border);
+}
+
+.footer-info {
+    font-size: 12px;
+    color: var(--text-color-secondary);
+}
+
+/* ───── Pagination ───── */
+.pgn {
+    display: flex;
+    gap: 4px;
+}
+
+.pg-btn {
+    width: 30px;
+    height: 30px;
+    border-radius: 6px;
+    border: 1px solid var(--surface-border);
+    background: transparent;
+    color: var(--text-color-secondary);
+    cursor: pointer;
+
+    &:hover {
+        background: var(--surface-hover);
+        color: var(--text-color);
+    }
+
+    &.active {
+        background: var(--primary-color);
+        color: #fff;
+        border-color: var(--primary-color);
+    }
+}
+
+/* ───────────────── Responsive ───────────────── */
+@media (max-width: 768px) {
+
+    .col-dept,
+    .col-req {
+        display: none;
+    }
+
+    .tl-toolbar,
+    .tl-header,
+    .tl-footer {
+        flex-direction: column;
+        align-items: stretch;
+    }
+}