# FORMAT

# UX/UI DOCUMENTATION

## Page: [Page/Screen Name]
### Description: [Brief overview of the page's purpose.]
### Elements:
* **[Element Name 1]** (`[Type of Element]`): [Brief description and key properties/states.]
* **[Element Name 2]** (`[Type of Element]`): [Brief description and key properties/states.]
* ...
### Flow:
1.  [User Action 1] -> [Resulting UI Change/Navigation]
2.  [User Action 2] -> [Resulting UI Change/Data Update]
3.  ... (Can also link to flow diagrams)
### User Stories/Scenarios Supported:
* [Link/Reference to User Story/Scenario 1]
* [Link/Reference to User Story/Scenario 2]
### Accessibility Notes:
* [Brief notes on accessibility considerations for this page.]
### References:
* [Link to Figma/Sketch/Adobe XD file]
* [Link to related specifications]

## Thiết kế giao diện

## 1. User-Facing Pages

### Homepage
- Giới thiệu campaign
- Thông tin về các team
- CTA đăng ký

### Registration Page
- Form đăng ký chi tiết
- Upload ảnh
- Đồng ý điều khoản

### Result Page
- Nhập access code hoặc truy cập qua personal link
- Hiển thị 3 kết quả matching
- Nút chọn/từ chối

## 2. Admin Pages

### Login Page
- Form đăng nhập admin

### Reporting Dashboard
- Thống kê người dùng
- Số lượng matching theo team
- Biểu đồ hoạt động

### Campaign Management
- Timeline campaign
- Trigger các action (bắt đầu matching, gửi thông báo...)

### Gift Management
- Danh sách quà tặng
- Thêm/sửa/xóa quà
- Danh sách người trúng thưởng

## 3. UI Components
- **Form Controls**: Input, Select, Checkbox, File Upload
- **Cards**: Hiển thị profile matching
- **Modals**: Điều khoản, thông báo
- **Loading Indicators**: Khi xử lý matching

## 4. UX Flow
1. Đăng ký → Xác nhận email
2. Chờ matching → Nhận thông báo
3. Xem kết quả → Chọn/từ chối
4. (Nếu trúng) Nhận thông báo quà tặng

## Color Scheme
| Purpose        | Color Code |
|----------------|------------|
| Primary        | #4361EE    |
| Success        | #4CC9F0    |
| Warning        | #F8961E    |
| Danger         | #F72585    |
| [Other Purpose] | [Color Code] |

## Component Library

### Component: [Name]
#### Description: [Brief description of the Goal Card component's purpose.]
#### Props/Parameters:
* `title` (`string`): [Description of the title prop.]
* `progress` (`number`): [Description of the progress prop (e.g., 0.0 to 1.0).]
* `deadline` (`string`): [Description of the deadline prop (e.g., format).]
#### States:
* Default
* Completed (visual changes)
#### Usage Guidelines:
[Brief instructions on when and how to use the Goal Card]
---