ipv6-sims/ke_hoach_ipv6.md

# Kế hoạch dự án IPV6 (Next.js App Router) — Tạo mới & Chuyển đổi từ HTML

## 1) Mục tiêu & phạm vi

- **Mục tiêu**: Tạo project frontend mới tên **IPV6** dựa trên “format sẵn” của codebase Next.js hiện tại, chuyển các trang HTML tĩnh sang Next.js (TypeScript/TSX), tách component, tách static data (JSON), và chuẩn hoá routing theo nghiệp vụ doanh nghiệp.
- **Phạm vi**: Frontend בלבד (chưa làm backend). Các API gọi ra ngoài/CMS (nếu có trong codebase cũ) sẽ **loại bỏ hoặc chuyển thành static JSON** cho đúng scope.
- **Yêu cầu chung**:
  - **Ngôn ngữ UI mặc định**: English (có thể để song ngữ EN/VI như UI toggle, nhưng content/label phải chuẩn hoá).
  - **Design system thống nhất**: màu sắc, font chữ, spacing, width/height chuẩn (không lệch giữa trang).
  - **Responsive**: hiển thị tốt trên desktop/tablet/mobile, kiểm tra layout với các breakpoint phổ biến.

## 2) Hiện trạng codebase (để bám “format sẵn”)

- Đang dùng **Next.js App Router**: có thư mục `app/`.
- Có layout sẵn `app/layout.tsx` đang import CSS global và render `Header` + `Footer`.
- Có nhiều phần liên quan LAMS (metadata, service/api, pages/route cũ…).
- Các file HTML nguồn cho IPV6 đang nằm ở root:
  - `test.html` (Trang chủ)
  - `registration.html` (Form đăng ký)
  - `feedback.html` (Form feedback)
  - `sponsor.html` (Kêu gọi đóng góp)
  - `admin.html` (Trang quản lý request — nội bộ coder)

## 3) Outcome mong muốn (cấu trúc thư mục đề xuất)

> Mục tiêu: rõ ràng, tách bạch component/page/data/styles; dễ maintain; đúng App Router.

Đề xuất skeleton (có thể điều chỉnh theo format hiện tại):

- `app/`
  - `(site)/`
    - `layout.tsx` (site shell: Header/Footer dùng cho public pages)
    - `page.tsx` (**Home** từ `test.html`)
    - `registration/page.tsx`
    - `feedback/page.tsx`
    - `sponsor/page.tsx`
  - `(internal)/admin/`
    - `page.tsx` (**Admin** từ `admin.html`, route group để tách nội bộ)
  - `globals.css` (CSS global/tokens)
  - `not-found.tsx` (tuỳ chọn)
- `app/components/`
  - `layout/` (`Header`, `Footer`, `Container`, `Section`, `Nav`, …)
  - `home/` (các section của home)
  - `forms/` (shared form fields/validation UI)
  - `ui/` (Button, Input, Card, Modal, Badge…)
- `app/data/` (static JSON)
  - `site.json` (brand, links, footer)
  - `home.json` (hero, agenda, speakers, stats, venue, …)
  - `sponsor.json`
  - `registration.json` (copy text, options)
  - `feedback.json`
  - `admin.json` (cột bảng, status mapping…)
- `public/`
  - `assets/` (img/icons/fonts nếu có)

## 4) Quy ước routing (đảm bảo nghiệp vụ doanh nghiệp)

### 4.1 Public pages (khách truy cập)

- `/` → **Home** (từ `test.html`)
- `/registration` → **Registration form** (từ `registration.html`)
- `/feedback` → **Feedback form** (từ `feedback.html`)
- `/sponsor` → **Sponsor/Donate** (từ `sponsor.html`)

### 4.2 Internal pages (chỉ coder nội bộ)

- `/(internal)/admin` → **Admin request management** (từ `admin.html`)
  - Yêu cầu “chỉ nội bộ”: vì không có backend, sẽ dùng **cơ chế chặn tối thiểu** (xem mục 9).

## 5) Chuyển đổi Component (HTML → TSX)

### 5.1 Nguyên tắc tách component

- Tách theo **layout shell** (Header/Footer) và theo **section** của từng page.
- Mỗi component:
  - Props typed (TypeScript).
  - Không hardcode text/data nếu có thể đưa vào JSON.
  - Không nhúng `<script>` DOM manipulation kiểu HTML (sẽ chuyển sang state + event trong React).

### 5.2 Trang chủ — `test.html`

**Yêu cầu đặc biệt**: “Tách ra trang home riêng, header và footer có components được tách riêng”.

- Tạo `app/(site)/page.tsx` làm Home.
- Tách Header/Footer:
  - `app/components/layout/Header/*`
  - `app/components/layout/Footer/*`
- Tách các section của Home (đề xuất theo nội dung `test.html`):
  - `HeroSection`
  - `VisionGoalsSection`
  - `StatsSection`
  - `AgendaSection`
  - `StakeholdersSection`
  - `RegistrationCTASection` (nếu Home có form/CTA)
  - (Nếu có `Speakers`, `Venue` trong HTML thì tách tương tự)
- Thay logic mobile menu:
  - HTML đang dùng script toggle class `hidden` → chuyển sang `useState` và className theo state.
- Chuẩn hoá anchor navigation:
  - Link `#agenda`, `#stats`, … giữ nguyên trong trang Home, đảm bảo scroll behavior trong CSS global.

### 5.3 Trang Registration — `registration.html`

- Tạo `app/(site)/registration/page.tsx`
- Tách:
  - `RegistrationForm` (client component)
  - Shared inputs: `TextField`, `SelectField`, `TextareaField`, `PhoneField`
- Form scope frontend-only:
  - Submit tạm: `console.log` + toast/alert (hoặc disable submit) tuỳ yêu cầu.
  - Chuẩn bị shape data để sau này nối backend.

### 5.4 Trang Feedback — `feedback.html`

- Tạo `app/(site)/feedback/page.tsx`
- Tách `FeedbackForm` tương tự Registration.

### 5.5 Trang Sponsor — `sponsor.html`

- Tạo `app/(site)/sponsor/page.tsx`
- Tách:
  - `SponsorHero`
  - `SponsorPackages`
  - `SponsorCTA`
  - `SponsorFAQ` (nếu có)

### 5.6 Trang Admin — `admin.html` (folder riêng)

- Tạo `app/(internal)/admin/page.tsx`
- Tách:
  - `RequestsTable`
  - `RequestFilters`
  - `RequestDetailDrawer` (tuỳ)
- Vì chưa backend:
  - Data bảng lấy từ `app/data/admin.json` (static).
  - Chuẩn hoá model “Request”: id, createdAt, name, email, company, status…

## 6) JSON hoá static data (tách data ra file riêng)

### 6.1 Nguyên tắc

- Mọi text/cấu hình lặp lại (nav items, footer links, section headings, stats items, agenda items…) → đưa vào JSON.
- JSON đặt trong `app/data/` (hoặc `src/data/` nếu codebase đang dùng `src/`).
- Page/Component đọc JSON theo hướng server component:
  - Page (server) import JSON → pass props xuống components.
  - Form components là client, chỉ nhận props cần thiết.

### 6.2 Danh mục data đề xuất

- `site.json`: brandName, navLinks, footerLinks, social, legal, languages…
- `home.json`: hero, vision, stats, agenda, stakeholders, venue, contact…
- `registration.json`: copy + options.
- `feedback.json`: copy + categories.
- `sponsor.json`: tiers/packages + benefits.
- `admin.json`: columns + seed rows + status label/color mapping.

## 7) Styling — CSS chung & thống nhất design system

### 7.1 Quyết định kỹ thuật (theo codebase hiện tại)

Codebase hiện có:
- Đang import `./globals.css` và có pipeline SCSS build sang `public/assets/css/main.css`.
- Có `tailwindcss` trong devDependencies, nhưng HTML nguồn (`test.html`) đang dùng **Tailwind CDN** + inline `<style>`.

Kế hoạch:
- **Không dùng Tailwind CDN trong Next.js** (loại bỏ script CDN).
- Chọn 1 hướng (ưu tiên nhất quán):
  - **Hướng A (khuyến nghị)**: cấu hình Tailwind nội bộ (tailwind.config + postcss) rồi chuyển class từ HTML qua TSX giữ nguyên nhiều utility class, đồng thời đưa token màu/font vào tailwind theme.
  - **Hướng B**: giữ SCSS/CSS thuần, chuyển utility class sang class semantic (tốn công hơn).

> Chọn A sẽ giúp chuyển đổi nhanh nhất vì `test.html` đã viết theo Tailwind.

### 7.2 Design tokens cần chuẩn hoá

- **Colors**: primary (gold), background (dark), surface containers, on-surface… (đang có trong `test.html` tailwind config).
- **Typography**: font families (Space Grotesk, Inter, JetBrains Mono), size scale (fluid typography).
- **Layout**: container max width (HD 1920/1800), gutter responsive.
- **Border radius / shadows**: thống nhất.

### 7.3 Checklist responsive

- Breakpoints tối thiểu: 360, 390, 414, 768, 1024, 1280, 1536, 1920.
- Kiểm tra:
  - Header: menu desktop vs mobile drawer, body scroll lock.
  - Hero: text không tràn, CTA stack đúng.
  - Grid sections: số cột thay đổi đúng.
  - Form: label/input spacing, focus state, error state.

## 8) Routing & layout composition

### 8.1 Layout public

- Dùng `app/(site)/layout.tsx` để wrap Header/Footer cho toàn bộ public pages.
- `app/layout.tsx` giữ nhiệm vụ root (html/head, global css, metadata base).

### 8.2 Layout internal

- `app/(internal)/layout.tsx` (tuỳ) để internal khác theme nếu cần (ví dụ tối giản, ưu tiên bảng).

## 9) Bảo vệ trang Admin (nội bộ coder) khi chưa có backend

Vì chưa backend, không thể “đăng nhập chuẩn” theo doanh nghiệp. Kế hoạch chặn tối thiểu:

- **Phương án 1 (khuyến nghị)**: `middleware.ts` + Basic Auth (HTTP) dựa trên env server
  - `ADMIN_BASIC_AUTH_USER`, `ADMIN_BASIC_AUTH_PASS`
  - Chỉ áp cho path `/admin`
- **Phương án 2**: “secret query”/client guard (không an toàn) — chỉ dùng khi demo nội bộ.

> Mục tiêu: không cho public truy cập đường dẫn admin một cách dễ dàng trong môi trường triển khai.

## 10) Xoá toàn bộ phần không liên quan IPV6 (LAMS)

### 10.1 Nguyên tắc dọn dẹp

- Giữ lại:
  - cấu trúc Next.js/TS/ESLint
  - cấu trúc `app/` và các helper cần thiết
  - pipeline CSS nếu dùng
- Xoá/đổi tên toàn bộ:
  - Metadata/title/description liên quan LAMS
  - Pages/routes/components/services/api types chỉ phục vụ LAMS
  - Static assets LAMS (logo, favicon…) nếu không dùng

### 10.2 Checklist dọn dẹp cụ thể

- `package.json`:
  - đổi `"name"` → `ipv6` (hoặc `ipv6-summit`)
  - rà soát dependency không dùng (axios nếu không cần)
- `app/layout.tsx`:
  - cập nhật metadata sang IPV6
  - cập nhật favicon/logo/fonts đúng theo IPV6
- `app/api/**` (nếu đang gọi CMS cho LAMS):
  - xoá toàn bộ nếu không dùng trong scope frontend-only
- `app/components/**`:
  - thay Header/Footer LAMS bằng Header/Footer IPV6
- Các route/pages LAMS (ví dụ `/contact`, `/student-support`, `/request`, … nếu tồn tại trong `app/`):
  - xoá để tránh rác routing

## 11) Quy trình thực hiện chuyển đổi (giống “lần trước”)

### 11.1 Chuẩn bị

- B1: Snapshot danh sách routes hiện tại (để biết thứ gì cần xoá).
- B2: Xác định style strategy (Tailwind nội bộ vs SCSS).
- B3: Tạo skeleton folders: `(site)`, `(internal)`, `components`, `data`.

### 11.2 Chuyển HTML → TSX theo từng trang

- B4: Home (`test.html`)
  - Tách Header/Footer
  - Tách sections
  - Tách data ra `home.json` + `site.json`
  - Loại bỏ `<script>` và chuyển sang state
- B5: Registration (`registration.html`)
  - Tách form + fields
  - Tách copy/options JSON
- B6: Feedback (`feedback.html`)
- B7: Sponsor (`sponsor.html`)
- B8: Admin (`admin.html`)
  - Tạo route group `(internal)`
  - Dựng table UI từ static JSON
  - Thêm middleware bảo vệ

### 11.3 Chuẩn hoá

- B9: Đồng bộ typography/colors (global CSS + config).
- B10: Responsive pass + pixel polish (width/height, spacing).
- B11: Cleanup LAMS triệt để.

## 12) Test plan (frontend-only)

- **Routing**:
  - `/` home load OK
  - `/registration`, `/feedback`, `/sponsor` load OK
  - `/admin` bị chặn nếu chưa auth (theo middleware)
- **Responsive**:
  - Header: mobile menu hoạt động, không scroll nền khi mở drawer
  - Sections: không overflow-x
  - Forms: input full width mobile, label rõ ràng
- **Accessibility tối thiểu**:
  - Label liên kết input
  - Button type/aria cho menu toggle
  - Focus ring rõ

## 13) Deliverables

- Next.js App Router pages đúng 5 trang yêu cầu.
- Component hoá toàn bộ, Header/Footer tách riêng.
- Static data tách JSON.
- CSS/design system thống nhất + responsive chuẩn.
- Xoá toàn bộ phần LAMS không liên quan, repo gọn chỉ còn IPV6.