{children}
);
const H2 = ({ icon, children }) => (
{children}
; const Li = ({ children }) =>| {h} | )}
|---|
SEO SOP System là một Single-Page Application (SPA) thuần frontend, không cần backend server. Toàn bộ logic được xử lý trên trình duyệt (client-side), dữ liệu được lưu trữ qua RESTful Table API của nền tảng.
window.* vì các file được load theo thứ tự trong HTML.window.Store (pub/sub đơn giản) thay vì Redux/Zustand để tránh dependency phức tạp.Hệ thống được thiết kế như một static site đơn giản, chạy được trực tiếp mà không cần build step. Babel CDN cho phép viết JSX và ES2022 mà không cần cài đặt node_modules. Điều này giúp:
Babel CDN transpile JSX ở runtime, nên lần tải đầu sẽ chậm hơn (~1-2s). Để production tốt hơn, có thể pre-compile JSX bằng Babel CLI và thay type="text/babel" bằng type="text/javascript".
Hệ thống sử dụng 6 bảng dữ liệu chính. Tất cả đều có field id (UUID) và các system fields tự động (created_at, updated_at).
Toàn bộ tương tác với dữ liệu đi qua window.API (js/api.js) — wrapper xung quanh Fetch API.
{`// Lấy danh sách (có phân trang và filter)
await API.get('domains', { limit: 100, page: 1 });
// Returns: { data: [], total, page, limit, table, schema }
// Lấy 1 record
await API.getOne('domains', domainId);
// Returns: record object
// Tạo record mới
await API.post('domains', { id: uuid(), ...data });
// Returns: created record
// Cập nhật một phần
await API.patch('checklist_items', itemId, { status: 'done' });
// Returns: updated record
// Xoá
await API.del('keywords', keywordId);
// Returns: void (204)`}
{`uuid() // Tạo UUID v4
toast(msg, type, duration) // type: 'success'|'error'|'warning'|'info'
formatDate(ts) // Timestamp → 'DD/MM/YYYY HH:mm'
formatDateShort(ts) // Timestamp → 'DD/MM/YYYY'
logAction(action, details, domainId, domainName, phase, itemKey)
computeProgress(checklistItems) // → { overall: 0-100, byPhase: {} }
getPhaseItemKeys(phaseId) // → ['p1_01', 'p1_02', ...]
domainStatusBadge(status) // → { cls, label }
siteTypeBadge(type) // → { cls, label }`}
{`/
├── index.html # Entry point — load CDN + scripts theo thứ tự
├── css/
│ └── app.css # Toàn bộ styles (CSS Variables + components)
├── js/
│ ├── sop-data.js # SOP_PHASES data + getPhaseItemKeys()
│ ├── api.js # window.API — fetch wrapper
│ ├── store.js # window.Store, uuid, toast, formatDate, logAction
│ ├── App.jsx # Root component — auth, routing, seed
│ ├── components/
│ │ ├── ui.jsx # Modal, Badge, ProgressBar, Spinner, Tabs...
│ │ └── layout.jsx # Sidebar, Topbar
│ └── pages/
│ ├── Login.jsx # Trang đăng nhập
│ ├── Dashboard.jsx # Dashboard (stats, recent domains, logs)
│ ├── Domains.jsx # Danh sách domain + form tạo/sửa
│ ├── DomainDetail.jsx# Checklist SOP + Comments + Domain info
│ ├── Keywords.jsx # Keyword tracking table
│ ├── Users.jsx # Quản lý user (admin only)
│ ├── Progress.jsx # Tiến độ team (admin only)
│ ├── Logs.jsx # Activity logs (admin only)
│ ├── Guide.jsx # User guide
│ └── Docs.jsx # Developer documentation (trang này)
└── README.md`}
Các file phải được load theo đúng thứ tự trong index.html vì không có module system:
{`
`}
Hệ thống có 2 role với quyền truy cập khác nhau. Phân quyền được kiểm tra ở cả frontend (UI) và logic nghiệp vụ.
{`// Kiểm tra admin
const isAdmin = Store.isAdmin(); // user?.role === 'admin'
const user = Store.getUser();
// Trong UI — ẩn/hiện button
{isAdmin && }
// Trong logic — filter data
let doms = domsRes.data || [];
if (!isAdmin) {
doms = doms.filter(d => d.assigned_to === user.id);
}
// Trong sidebar — ẩn admin-only items
{ id:'users', adminOnly: true }
navItems.map(item => {
if (item.adminOnly && !isAdmin) return null;
...
})`}
⚠️ Đây là static site không có backend server-side authentication. Mật khẩu được lưu plain text và xác thực trên client-side. Không dùng cho môi trường production yêu cầu bảo mật cao. Để production: cần thêm backend API với JWT + bcrypt.
Toàn bộ CRUD đi qua fetch() đến endpoint tables/{'{table}'} (relative URL).
{`// Base URL là relative — tự match với domain hiện tại
fetch('tables/domains?limit=100')
fetch('tables/checklist_items', { method: 'POST', body: JSON.stringify(data) })`}
Hiện tại hệ thống nhập rank thủ công. Để tích hợp tự động:
{`// Thêm function gọi rank checker API (nếu có CORS)
async function syncRankFromAPI(keyword, domainName) {
const res = await fetch('https://your-rank-api.com/check', {
method: 'POST',
body: JSON.stringify({ keyword, domain: domainName })
});
const { rank } = await res.json();
await API.patch('keywords', keywordId, { current_rank: rank });
}
// Gọi trong Keywords.jsx sau khi load`}
Mở js/sop-data.js và thêm object vào mảng SOP_PHASES:
{`window.SOP_PHASES = [
// ... existing phases ...
{
id: 14,
name: "Tên giai đoạn mới",
icon: "fa-star",
color: "#e11d48",
desc: "Mô tả giai đoạn",
sections: [
{
title: "Tên section",
items: [
{ key: "p14_01", label: "Bước 1", hasInput: false },
{ key: "p14_02", label: "Bước có input", hasInput: true, placeholder: "Nhập..." },
]
}
]
}
];`}
{`// 1. Tạo file js/pages/NewPage.jsx
window.NewPage = function({ user, onNavigate }) {
return (
Trang mới
{/* ... content ... */}
);
};
// 2. Thêm script tag vào index.html (trước App.jsx)
// 3. Thêm nav item vào js/components/layout.jsx
{ id:'new-page', icon:'fa-star', label:'Trang mới' }
// 4. Thêm case vào App.jsx renderPage()
case 'new-page': return ;`}
{`// 1. Định nghĩa schema (TableSchemaUpdate tool)
// 2. Seed initial data (TableDataAdd tool)
// 3. Dùng API trong component:
const data = await API.get('new_table', { limit: 100 });
const item = await API.post('new_table', { id: uuid(), ...fields });`}
Trong DomainDetail.jsx, tìm select dropdown và thêm option mới. Cập nhật các maps typeLabels và typeClsMap.
Tất cả màu sắc được quản lý qua CSS variables trong css/app.css:
{`:root {
--primary: #4f46e5; /* Màu chủ đạo */
--cyan: #06b6d4; /* Màu phụ */
--green: #10b981; /* Success */
--yellow: #f59e0b; /* Warning */
--red: #ef4444; /* Danger */
--bg: #f1f5f9; /* Background */
--card: #ffffff; /* Card background */
--sidebar: #0f172a; /* Sidebar background */
}`}