@duyanhdev/mvp-ifs-ui-kit 21.0.0

package/src/app/pages/tickets/tickets-create/tickets-create.html

@@ -0,0 +1,140 @@
+<div class="wrapper">
+    <div class="container">
+        <div class="hero">
+            <div class="hero-left">
+                <div class="badge-live">
+                    <span class="live-dot"></span>
+                    Hệ thống IT Helpdesk
+                </div>
+                <p class="page-title">Tạo ticket hỗ trợ mới</p>
+                <p class="page-sub">Điền đầy đủ thông tin để được hỗ trợ nhanh nhất có thể</p>
+            </div>
+            <div class="stats-row">
+                <div class="stat-pill">
+                    <span class="stat-num">12</span>
+                    <span class="stat-lbl">Đang mở</span>
+                </div>
+                <div class="stat-pill">
+                    <span class="stat-num">3</span>
+                    <span class="stat-lbl">Hôm nay</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <div class="card-progress-bar"></div>
+            <div class="card-header">
+                <div class="card-header-left">
+                    <div class="header-icon">
+                        <i class="pi pi-ticket"></i>
+                    </div>
+                    <span class="card-title">Thông tin ticket</span>
+                </div>
+                <span class="req-badge"><span class="req">*</span> Bắt buộc điền</span>
+            </div>
+
+            <div class="card-body">
+                <p class="section-label">Thông tin cơ bản</p>
+
+                <div class="form-grid">
+                    <div class="form-group full">
+                        <label class="form-label">Tiêu đề <span class="req">*</span></label>
+                        <input class="form-input" [(ngModel)]="form.title" placeholder="Mô tả ngắn gọn vấn đề cần hỗ trợ..." />
+                    </div>
+
+                    <div class="form-group">
+                        <label class="form-label">Loại yêu cầu <span class="req">*</span></label>
+                        <select class="form-input" [(ngModel)]="form.type">
+                            <option value="">-- Chọn loại yêu cầu --</option>
+                            <option>Hardware</option>
+                            <option>Software</option>
+                            <option>Mạng</option>
+                            <option>Tài khoản</option>
+                            <option>Máy in</option>
+                            <option>Email</option>
+                            <option>Bảo mật</option>
+                            <option>Khác</option>
+                        </select>
+                    </div>
+
+                    <div class="form-group">
+                        <label class="form-label">Mức ưu tiên</label>
+                        <div class="pri-row">
+                            <button class="pri-btn" [class.active-high]="form.priority === 'high'" (click)="setPri('high')">🔴 Cao</button>
+                            <button class="pri-btn" [class.active-medium]="form.priority === 'medium'" (click)="setPri('medium')">🟡 Trung bình</button>
+                            <button class="pri-btn" [class.active-low]="form.priority === 'low'" (click)="setPri('low')">🟢 Thấp</button>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <label class="form-label">Người yêu cầu <span class="req">*</span></label>
+                        <input class="form-input" [(ngModel)]="form.requester" placeholder="Họ và tên đầy đủ" />
+                    </div>
+
+                    <div class="form-group">
+                        <label class="form-label">Phòng ban</label>
+                        <select class="form-input" [(ngModel)]="form.department">
+                            <option value="">-- Chọn phòng ban --</option>
+                            <option>Kế toán</option>
+                            <option>Nhân sự</option>
+                            <option>Kinh doanh</option>
+                            <option>Marketing</option>
+                            <option>IT</option>
+                            <option>Vận hành</option>
+                            <option>Ban giám đốc</option>
+                        </select>
+                    </div>
+
+                    <div class="form-group">
+                        <label class="form-label">Thiết bị liên quan</label>
+                        <input class="form-input" [(ngModel)]="form.device" placeholder="Tên máy, model, số serial..." />
+                    </div>
+
+                    <div class="form-group full">
+                        <label class="form-label">Mô tả chi tiết</label>
+                        <textarea class="form-input" [(ngModel)]="form.description" placeholder="Mô tả chi tiết vấn đề, các bước tái hiện lỗi..."></textarea>
+                    </div>
+
+                    <div class="form-group full">
+                        <label class="form-label">Ảnh đính kèm</label>
+                        <input type="file" #fileInput accept="image/*" multiple style="display: none" (change)="handleFiles($event)" />
+                        <div class="upload-zone" [class.drag-over]="isDragging" (click)="fileInput.click()" (dragover)="onDragOver($event)" (dragleave)="onDragLeave()" (drop)="onDrop($event)">
+                            <div class="upload-icon-wrap">
+                                <svg width="22" height="22" fill="none" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+                                    <path
+                                        d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586
+                           a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6
+                           a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                                    />
+                                </svg>
+                            </div>
+                            <span class="upload-label">Kéo thả ảnh vào đây hoặc nhấn để chọn</span>
+                            <span class="upload-hint">Hỗ trợ PNG, JPG, GIF — tối đa 5 ảnh</span>
+                        </div>
+
+                        <div class="preview-grid" *ngIf="previews.length > 0">
+                            <div class="preview-item" *ngFor="let p of previews; let i = index">
+                                <img [src]="p.url" [alt]="p.name" />
+                                <button class="preview-remove" (click)="removeFile(i)" title="Xóa">✕</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="actions">
+                    <button class="btn-primary" (click)="submitTicket()">
+                        <i class="pi pi-check-circle"></i>
+                        Tạo ticket
+                    </button>
+                    <button class="btn-ghost" (click)="clearForm()">
+                        <i class="pi pi-refresh"></i>
+                        Xóa form
+                    </button>
+                </div>
+
+                <div class="toast toast-success" *ngIf="toast.show && toast.type === 'success'"><i class="pi pi-check-circle"></i> {{ toast.message }}</div>
+                <div class="toast toast-error" *ngIf="toast.show && toast.type === 'error'"><i class="pi pi-times-circle"></i> {{ toast.message }}</div>
+            </div>
+        </div>
+    </div>
+</div>