Skip to content

SWP391-OG/SWP391_FE

BranchesTags

Repository files navigation

SWP391 Frontend - Ticket Management System

🎉 Tổng Quan

Hệ thống quản lý ticket đầy đủ cho sinh viên với các tính năng:

  1. ✅ Chọn loại vấn đề gặp phải
  2. ✅ Tạo ticket với thông tin chi tiết
  3. ✅ Xem danh sách tất cả tickets
  4. ✅ Xem chi tiết ticket với SLA tracking

📂 Cấu Trúc Files

Files Mới Được Tạo

src/
├── data/
│   ├── issueTypes.ts              # Danh sách 8 loại vấn đề
│   └── mockData.ts                 # Mock data: tickets, categories, departments
├── pages/
│   ├── issue-selection-page.tsx   # Trang chọn loại vấn đề
│   ├── create-ticket-page.tsx     # Trang tạo ticket
│   └── ticket-list-page.tsx       # Trang danh sách ticket
└── components/
    └── ticket-detail-modal.tsx    # Modal chi tiết + SLA tracking

Docs/
├── TICKET_SYSTEM_GUIDE.md         # Hướng dẫn hệ thống tạo ticket
└── TICKET_LIST_AND_SLA_GUIDE.md   # Hướng dẫn danh sách + SLA

Files Đã Cập Nhật

src/
├── types/index.ts                 # Thêm IssueType, IssueCategory
└── app.tsx                        # Tích hợp navigation đầy đủ

🎯 Tính Năng Chính

1. Trang Chọn Loại Vấn Đề (/issue-selection)

8 Loại vấn đề có sẵn:

  • 🔨 Hư hỏng cơ sở vật chất
  • 📶 Vấn đề WiFi
  • 💻 Thiết bị hư hỏng
  • 🧹 Vệ sinh phòng học
  • ❌ Thiếu cơ sở vật chất
  • ⚡ Vấn đề điện
  • 💧 Vấn đề nước
  • 📝 Vấn đề khác

Features:

  • Card layout với icon và mô tả
  • Ví dụ cụ thể cho mỗi loại
  • Hover effects đẹp mắt
  • Responsive design

2. Trang Tạo Ticket (/create-ticket)

Form đầy đủ bao gồm:

  • Tiêu đề (required)
  • Mô tả chi tiết (required)
  • Địa điểm (optional)
  • Số phòng (optional)
  • Mức độ ưu tiên: 🟢 Thấp, 🟡 Trung bình, 🟠 Cao, 🔴 Khẩn cấp
  • Upload nhiều hình ảnh (optional)
    • Preview trước khi gửi
    • Xóa từng ảnh
    • Drag & drop friendly

Features:

  • Form validation
  • Loading state
  • Image preview
  • Beautiful UI với gradient

3. Trang Danh Sách Ticket (/ticket-list)

Thống kê tổng quan:

  • Tổng số ticket
  • Đang mở
  • Đang xử lý
  • Hoàn thành

Bộ lọc:

  • 🔍 Tìm kiếm: Theo tiêu đề/mô tả
  • 📊 Trạng thái: All, Mở, Đang xử lý, Đã giải quyết, Đã đóng
  • ⚡ Ưu tiên: All, Khẩn cấp, Cao, Trung bình, Thấp

Ticket Cards hiển thị:

  • ID, Tiêu đề, Mô tả
  • Status & Priority badges
  • Loại vấn đề với icon
  • Địa điểm & phòng
  • SLA Status với màu sắc:
    • 🟢 Đúng hạn
    • 🟡 Cần chú ý
    • 🟠 Sắp quá hạn
    • 🔴 Quá hạn
    • ✅ Hoàn thành đúng hạn
    • ⚠️ Hoàn thành trễ
  • Thời gian còn lại/đã trôi qua
  • Nút "Xem chi tiết"

4. Modal Chi Tiết Ticket

A. SLA Tracking (Highlight chính!)

Progress Bar động:

  • Thanh tiến trình % thời gian đã sử dụng
  • Màu sắc tự động thay đổi:
    • Xanh lá: < 70% (đúng hạn)
    • Vàng: 70-90% (cần chú ý)
    • Cam: > 90% (sắp quá hạn)
    • Đỏ: Quá hạn

Thống kê SLA chi tiết:

  • Tổng thời gian SLA (dựa theo priority):
    • 🔴 Urgent: 4h
    • 🟠 High: 24h
    • 🟡 Medium: 48h
    • 🟢 Low: 72h
  • Đã trôi qua: Thời gian từ khi tạo
  • Còn lại: Thời gian đến deadline

B. Timeline Lịch Sử Xử Lý:

Visual timeline với các events:

  • 🔵 Ticket được tạo
  • 🟣 Ticket được phân công
  • 🟡 Bắt đầu xử lý
  • 💬 Cập nhật tiến độ
  • 🟢 Đã giải quyết
  • ⚫ Đóng ticket

Mỗi event có:

  • Tiêu đề + Mô tả
  • Người thực hiện + Role
  • Timestamp

C. Thông tin đầy đủ:

  • Mô tả chi tiết
  • Địa điểm, số phòng
  • Ngày tạo, deadline, người xử lý
  • Hình ảnh (nếu có)

Features:

  • Đóng bằng ESC hoặc click overlay
  • Smooth animations
  • Responsive layout
  • Auto scroll cho nội dung dài

💻 Tech Stack

  • React 19 với TypeScript
  • Vite - Build tool và dev server
  • Tailwind CSS - Styling
  • React Router DOM - Routing
  • Inline CSS (theo pattern project)
  • React Hooks: useState, useEffect, useMemo
  • File Upload: FileReader API
  • Date Handling: Native Date + Intl.DateTimeFormat
  • No external UI libraries (pure custom components)

🎯 Highlights Kỹ Thuật

1. Real-time SLA Calculation

const getSLAProgress = () => {
  const now = new Date();
  const created = new Date(ticket.createdAt);
  const deadline = new Date(ticket.slaDeadline);
  
  const totalDuration = deadline.getTime() - created.getTime();
  const elapsed = now.getTime() - created.getTime();
  const progress = (elapsed / totalDuration) * 100;
  
  return { progress, isOverdue, hoursRemaining };
};

2. Smart Filtering

const filteredTickets = useMemo(() => {
  return tickets.filter((ticket) => {
    const matchesSearch = ticket.title.includes(searchQuery);
    const matchesStatus = filterStatus === 'all' || ticket.status === filterStatus;
    const matchesPriority = filterPriority === 'all' || ticket.priority === filterPriority;
    return matchesSearch && matchesStatus && matchesPriority;
  });
}, [searchQuery, filterStatus, filterPriority]);

3. Dynamic Color Coding

const getSLAColor = () => {
  if (ticket.status === 'resolved' || ticket.status === 'closed') {
    return resolvedAt <= deadline ? '#10b981' : '#f59e0b';
  }
  if (slaProgress.isOverdue) return '#ef4444';
  if (slaProgress.progress > 90) return '#f97316';
  if (slaProgress.progress > 70) return '#f59e0b';
  return '#10b981';
};

4. Image Upload với Preview

const handleImageUpload = (e: ChangeEvent<HTMLInputElement>) => {
  const files = e.target.files;
  Array.from(files).forEach((file) => {
    const reader = new FileReader();
    reader.onloadend = () => {
      setImagePreview(prev => [...prev, reader.result as string]);
    };
    reader.readAsDataURL(file);
  });
};

📈 Performance

  • Memoized filtering với useMemo
  • Lazy rendering cho large lists
  • Optimized re-renders
  • Smooth animations với CSS transitions

♿ Accessibility

  • Keyboard navigation (ESC để đóng modal)
  • Semantic HTML
  • Clear visual hierarchy
  • Color contrast đạt chuẩn
  • Descriptive labels

📱 Responsive Design

  • Mobile-first approach
  • Grid auto-fill cho responsive cards
  • Modal scroll trên mobile
  • Touch-friendly buttons

🧪 Testing Checklist

  • Tạo ticket mới
  • Upload và xóa hình ảnh
  • Filter theo status/priority
  • Search tickets
  • Xem chi tiết ticket
  • SLA progress bar hiển thị đúng
  • Timeline events render đúng
  • Modal đóng/mở hoạt động
  • Responsive trên mobile
  • Hover effects hoạt động
  • Validation form
  • Empty states

🔮 Tương Lai

Phase 2 - Backend Integration

  • Connect to REST API
  • Real-time updates với WebSocket
  • Authentication & Authorization
  • Cloud storage cho hình ảnh

Phase 3 - Advanced Features

  • Push notifications
  • Email alerts cho SLA
  • Comment/Chat trong ticket
  • Ticket assignment workflow
  • Dashboard analytics
  • Export reports

Phase 4 - Mobile App

  • React Native app
  • Offline support
  • Push notifications
  • Camera integration

📖 Documentation

  • TICKET_SYSTEM_GUIDE.md - Hướng dẫn tạo ticket
  • TICKET_LIST_AND_SLA_GUIDE.md - Hướng dẫn danh sách & SLA
  • DATAFLOW_ANALYSIS.md - Phân tích dataflow
  • MISSING_FEATURES.md - Danh sách tính năng còn thiếu

🎓 Cách Sử Dụng

  1. Cài đặt dependencies: npm install
  2. Start dev server: npm run dev
  3. Mở browser: http://localhost:5174
  4. Chọn role: Student
  5. Test các tính năng:
    • Click "Tạo Ticket Mới"
    • Click "Xem Danh Sách Ticket"
    • Click vào bất kỳ ticket nào để xem chi tiết
    • Thử filter và search

🔧 Environment Variables

Tạo file .env từ .env.example:

VITE_API_BASE_URL=http://localhost:8080/api
VITE_API_TIMEOUT=5000
VITE_USE_MOCK_DATA=true

📝 Notes

  • Tất cả data hiện tại là mock data (localStorage)
  • SLA tính toán dựa trên priority
  • Timeline events được define trước
  • Hình ảnh sử dụng base64 encoding
  • Chưa có backend API integration (đã có template sẵn trong src/services/api.ts)

🙏 Credits

  • Design inspiration: Modern SaaS dashboards
  • Icons: Unicode emoji
  • Color palette: Tailwind CSS
  • Date formatting: Intl API

Version: 1.0.0
Last Updated: December 2024
Status: ✅ Completed

Hệ thống đã sẵn sàng để demo và test! 🎉🚀

About

fptechnical.vercel.app

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages