19/6/2026
Test
Bạn hãy kiểm tra toàn bộ project hiện tại của website landing page **guut.com.vn**, sau đó tạo thêm một **trang Dashboard quản trị nội dung** để admin có thể quản lý dữ liệu hiển thị trên landing page.
Yêu cầu chung:
* Dashboard phải có giao diện quản trị rõ ràng, dễ dùng, responsive.
* Có sidebar hoặc tab navigation.
* Gồm các tab chính:
1. Tin tức
2. Dự án
3. Đội ngũ
4. Quy trình làm việc
5. Dịch vụ
* Mỗi tab phải có chức năng CRUD đầy đủ: **thêm, xem danh sách, sửa, xóa**.
* Khi xóa phải có confirm trước khi xóa.
* Form thêm/sửa phải có validation cơ bản.
* Ảnh phải có chức năng upload hoặc chọn file ảnh, hiển thị preview trước khi lưu.
* Nếu project đã có backend/database/API thì tích hợp theo kiến trúc hiện tại.
* Nếu project hiện tại chưa có backend/database, hãy tạo cấu trúc dữ liệu tạm bằng local state/localStorage hoặc mock API rõ ràng, dễ thay thế bằng API thật sau này.
* Không được phá layout landing page hiện tại.
* Code phải sạch, chia component hợp lý, dễ bảo trì.
* Ưu tiên dùng style/design đồng bộ với website guut.com.vn.
---
## 1. Tab Tin tức
Đây là phần quản trị blog/bài viết.
Mỗi tin tức/bài viết có các trường:
* `date`: ngày/tháng/năm viết bài.
* Nếu user không nhập thì mặc định tự lấy ngày hiện tại.
* `title`: tiêu đề chính của bài viết.
* `coverImage`: ảnh nền/ảnh đại diện tiêu đề.
* `content`: nội dung bài viết.
Chức năng cần có:
* Danh sách bài viết.
* Thêm bài viết mới.
* Sửa bài viết.
* Xóa bài viết.
* Upload/preview ảnh nền tiêu đề.
* Phần viết bài nên là textarea lớn hoặc rich text editor nếu project đã có thư viện phù hợp.
* Hiển thị ngày viết ở định dạng dễ đọc, ví dụ: `19/06/2026`.
---
## 2. Tab Dự án
Đây là phần quản trị các dự án đã thực hiện.
Mỗi dự án có các trường:
* `projectType`: loại dự án.
* Cho phép chọn một trong các giá trị:
* Nội thất
* Kiến trúc
* Thi công
* Xây dựng
* `projectName`: tên dự án, ví dụ: `CT5`.
* `location`: địa điểm.
* `area`: diện tích.
* `completedAt`: thời gian hoàn thành.
* `images`: danh sách nhiều ảnh chụp dự án.
Chức năng cần có:
* Danh sách dự án.
* Thêm dự án.
* Sửa dự án.
* Xóa dự án.
* Upload nhiều ảnh cho một dự án.
* Preview danh sách ảnh đã upload.
* Có thể xóa từng ảnh trong lúc thêm/sửa dự án.
* Trong danh sách dự án nên hiển thị nhanh: tên dự án, loại dự án, địa điểm, diện tích, hoàn thành, ảnh đại diện đầu tiên.
---
## 3. Tab Đội ngũ
Đây là phần quản trị nhân sự/đội ngũ hiển thị trên landing page.
Mỗi thành viên có các trường:
* `avatar`: ảnh thành viên.
* `position`: chức vụ.
* `name`: tên thành viên.
Chức năng cần có:
* Danh sách thành viên.
* Thêm thành viên.
* Sửa thành viên.
* Xóa thành viên.
* Upload/preview ảnh thành viên.
* Trong danh sách nên hiển thị dạng card gồm ảnh, tên, chức vụ.
---
## 4. Tab Quy trình làm việc
Đây là phần quản trị các bước/quy trình làm việc của công ty.
Mỗi quy trình có các trường:
* `processName`: tên quy trình.
* `icon`: icon của quy trình.
* Có thể cho nhập tên icon, chọn icon, hoặc upload icon tùy theo cấu trúc project hiện tại.
* `motto`: châm ngôn quy trình.
* `description`: mô tả chi tiết.
* `summary`: danh sách các ý tóm tắt dạng gạch đầu dòng.
Yêu cầu riêng cho `summary`:
* Vì `summary` là danh sách gạch đầu dòng nên phải có CRUD riêng bên trong form.
* Người dùng có thể:
* Thêm một dòng tóm tắt.
* Sửa nội dung từng dòng tóm tắt.
* Xóa từng dòng tóm tắt.
* Khi lưu quy trình, `summary` phải được lưu dưới dạng array string, ví dụ:
```js
summary: [
"Khảo sát nhu cầu khách hàng",
"Tư vấn giải pháp phù hợp",
"Triển khai đúng tiến độ"
]
```
Chức năng cần có:
* Danh sách quy trình.
* Thêm quy trình.
* Sửa quy trình.
* Xóa quy trình.
* Hiển thị icon, tên quy trình, châm ngôn và các gạch đầu dòng tóm tắt.
---
## 5. Tab Dịch vụ
Đây là phần quản trị các dịch vụ của công ty.
Mỗi dịch vụ có các trường:
* `image`: ảnh dịch vụ.
* `serviceName`: tên dịch vụ.
* `slogan`: slogan dịch vụ.
* `summaryBullets`: 3 gạch đầu dòng tóm tắt.
* `stats`: 4 thông số dạng string.
Yêu cầu cho `summaryBullets`:
* Bắt buộc có đúng 3 dòng tóm tắt.
* Mỗi dòng là một string.
* Cho phép sửa nội dung từng dòng.
Ví dụ:
```js
summaryBullets: [
"Thiết kế tối ưu theo nhu cầu",
"Đội ngũ thi công chuyên nghiệp",
"Bảo hành rõ ràng sau bàn giao"
]
```
Yêu cầu cho `stats`:
* Mỗi dịch vụ chỉ được chọn đúng 4 thông số.
* 4 thông số này chỉ được chọn từ danh sách sau:
```js
[
"Dự án hoàn thiện",
"Năm kinh nghiệm",
"Khách hàng hài lòng",
"Đối tác uy tín",
"Công trình tiêu biểu",
"Năm hoạt động",
"Giải thưởng",
"Kiến trúc sư",
"Công nhân tay nghề",
"Xưởng sản xuất",
"Bảo hành",
"Tiến độ"
]
```
* Không cho chọn quá 4.
* Không cho chọn trùng.
* Nếu chưa chọn đủ 4 thì không cho lưu.
* Các thông số lưu dạng array string, ví dụ:
```js
stats: [
"Dự án hoàn thiện",
"Năm kinh nghiệm",
"Khách hàng hài lòng",
"Bảo hành"
]
```
Chức năng cần có:
* Danh sách dịch vụ.
* Thêm dịch vụ.
* Sửa dịch vụ.
* Xóa dịch vụ.
* Upload/preview ảnh dịch vụ.
* Validate đúng 3 gạch đầu dòng tóm tắt.
* Validate đúng 4 thông số đã chọn.
---
## Gợi ý cấu trúc dữ liệu
Nếu cần tạo mock data hoặc schema, có thể dùng cấu trúc sau:
```js
news: {
id: string,
date: string,
title: string,
coverImage: string,
content: string
}
project: {
id: string,
projectType: "Nội thất" | "Kiến trúc" | "Thi công" | "Xây dựng",
projectName: string,
location: string,
area: string,
completedAt: string,
images: string[]
}
teamMember: {
id: string,
avatar: string,
position: string,
name: string
}
workProcess: {
id: string,
processName: string,
icon: string,
motto: string,
description: string,
summary: string[]
}
service: {
id: string,
image: string,
serviceName: string,
slogan: string,
summaryBullets: string[],
stats: string[]
}
```
---
## Yêu cầu UI
* Dashboard nên có layout:
* Sidebar bên trái hoặc tab phía trên.
* Khu vực content bên phải.
* Mỗi tab có nút “Thêm mới”.
* Danh sách item có nút “Sửa” và “Xóa”.
* Form thêm/sửa có thể dùng modal hoặc trang riêng.
* Các trường nhập liệu phải có label tiếng Việt.
* Các nút dùng tiếng Việt:
* Thêm mới
* Lưu
* Cập nhật
* Hủy
* Sửa
* Xóa
* Thêm ảnh
* Thêm dòng
* Khi thao tác thành công nên có thông báo đơn giản.
* Trường bắt buộc phải báo lỗi nếu để trống.
---
## Yêu cầu kỹ thuật
* Hãy tự nhận diện stack hiện tại của project.
BE ưu tiên golang framwork gin, DB ưu tiên sqllite.
* Nếu là React/Next.js thì tạo component dashboard phù hợp với cấu trúc routes hiện tại.
* Nếu là plain HTML/CSS/JS thì tạo file dashboard riêng và tổ chức code rõ ràng.
* Không cài thêm thư viện nặng nếu không cần thiết.
* Nếu cần thêm thư viện upload/rich text/icon thì phải giải thích ngắn gọn trong comment hoặc README.
* Code phải chạy được ngay sau khi hoàn thành.
* Sau khi code xong, hãy kiểm tra lỗi build/lint cơ bản nếu project có script tương ứng.
* Cuối cùng, tóm tắt lại các file đã tạo/sửa và cách truy cập dashboard.\
