From 1031b4aa31f3ea123c7e2993a7b309f23d49af82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hu=E1=BB=B3nh=20Th=C6=B0=C6=A1ng?= <252359928+Huynhthuongg@users.noreply.github.com> Date: Thu, 11 Jun 2026 23:42:34 +0700 Subject: [PATCH] feat: polish v1 UI and branding --- .editorconfig | 15 ++ .github/pull_request_template.md | 12 ++ .github/workflows/ci.yml | 32 ++++ .gitignore | 6 + .nvmrc | 1 + .prettierignore | 6 + .prettierrc | 6 + .vscode/extensions.json | 7 + .vscode/settings.json | 7 + CONTRIBUTING.md | 46 +++++ README.md | 290 ++++++++++--------------------- docs/API.md | 82 +++++++++ docs/ARCHITECTURE.md | 60 +++++++ docs/DEVELOPMENT.md | 54 ++++++ index.html | 4 +- package-lock.json | 7 +- package.json | 10 +- public/rkix-logo.svg | 19 ++ src/App.tsx | 139 +++++++++++++-- src/components/RKixLogo.tsx | 29 ++++ src/index.css | 110 ++++++++++++ 21 files changed, 724 insertions(+), 218 deletions(-) create mode 100644 .editorconfig create mode 100644 .github/pull_request_template.md create mode 100644 .github/workflows/ci.yml create mode 100644 .nvmrc create mode 100644 .prettierignore create mode 100644 .prettierrc create mode 100644 .vscode/extensions.json create mode 100644 .vscode/settings.json create mode 100644 CONTRIBUTING.md create mode 100644 docs/API.md create mode 100644 docs/ARCHITECTURE.md create mode 100644 docs/DEVELOPMENT.md create mode 100644 public/rkix-logo.svg create mode 100644 src/components/RKixLogo.tsx diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..ebf0801 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,15 @@ +root = true + +[*] +charset = utf-8 +end_of_line = lf +insert_final_newline = true +indent_style = space +indent_size = 2 +trim_trailing_whitespace = true + +[*.md] +trim_trailing_whitespace = false + +[Makefile] +indent_style = tab diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md new file mode 100644 index 0000000..a5b54bb --- /dev/null +++ b/.github/pull_request_template.md @@ -0,0 +1,12 @@ +## Summary + +- + +## Testing + +- [ ] `npm run lint` +- [ ] `npm run build` + +## Notes + +- diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..e96fa97 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,32 @@ +name: CI + +on: + pull_request: + push: + branches: + - main + - master + +jobs: + verify: + name: Type-check and build + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version-file: .nvmrc + cache: npm + + - name: Install dependencies + run: npm ci + + - name: Type-check + run: npm run lint + + - name: Build + run: npm run build diff --git a/.gitignore b/.gitignore index 5a86d2a..e83137c 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,9 @@ coverage/ *.log .env* !.env.example +data_store.json +*.local +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..209e3ef --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +20 diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..b18a3dc --- /dev/null +++ b/.prettierignore @@ -0,0 +1,6 @@ +dist +build +coverage +node_modules +data_store.json +package-lock.json diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..aedc4b8 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "singleQuote": true, + "semi": true, + "trailingComma": "es5", + "printWidth": 100 +} diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..ad84f89 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,7 @@ +{ + "recommendations": [ + "dbaeumer.vscode-eslint", + "esbenp.prettier-vscode", + "bradlc.vscode-tailwindcss" + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..36cc136 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,7 @@ +{ + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "typescript.tsdk": "node_modules/typescript/lib", + "tailwindCSS.experimental.configFile": null, + "files.eol": "\n" +} diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..d64cf0d --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,46 @@ +# Contributing + +Cảm ơn bạn đã đóng góp cho RKix Storage Center. Hãy dùng quy trình dưới đây để giữ dự án dễ phát triển và dễ review. + +## Thiết lập local + +```bash +npm ci +cp .env.example .env +npm run dev +``` + +## Chuẩn chất lượng + +Trước khi gửi thay đổi, hãy chạy: + +```bash +npm run lint +npm run build +``` + +## Quy ước code + +- Dùng TypeScript cho frontend và backend. +- Giữ kiểu dữ liệu dùng chung trong `src/types.ts` khi UI và API cùng phụ thuộc. +- Không commit secret, `.env`, `data_store.json`, `dist`, `node_modules` hoặc file log. +- Ưu tiên component nhỏ, dễ đọc nếu tách UI mới khỏi `src/App.tsx`. +- Nếu thêm endpoint API, cập nhật `docs/API.md`. +- Nếu thay đổi cấu trúc hệ thống, cập nhật `docs/ARCHITECTURE.md`. + +## Quy ước commit gợi ý + +Dùng commit message ngắn, rõ ràng: + +- `feat: add project search filters` +- `fix: handle missing backup payload` +- `docs: document storage tree api` +- `chore: update development tooling` + +## Checklist pull request + +- [ ] Mô tả thay đổi chính. +- [ ] Cập nhật tài liệu liên quan. +- [ ] Chạy `npm run lint`. +- [ ] Chạy `npm run build`. +- [ ] Kiểm tra UI thủ công nếu thay đổi giao diện. diff --git a/README.md b/README.md index e8e7549..bd24946 100644 --- a/README.md +++ b/README.md @@ -1,195 +1,95 @@ -Dưới đây là khung tài liệu chuẩn cho dự án Terkix RKix -RKix Storage Center -1. Tổng Quan Dự Án -RKix Storage Center là hệ thống quản lý và lưu trữ dự án tập trung. -Mục tiêu: -Quản lý toàn bộ dự án trong một giao diện duy nhất. -Theo dõi trạng thái hoạt động của từng dự án. -Quản lý dung lượng lưu trữ. -Tìm kiếm và truy cập dự án nhanh chóng. -Hỗ trợ backup và archive. -Tích hợp GitHub, GitLab và lưu trữ cục bộ. -Thiết kế hiện đại tương tự IBM Cloud, GitHub và Vercel. -2. Người Dùng Mục Tiêu -Developer -Quản lý source code. -Team Leader -Theo dõi tiến độ dự án. -Administrator -Quản lý toàn bộ hệ thống lưu trữ. -3. Dashboard Tổng Quan -Hiển thị: -Tổng số dự án. -Dự án đang hoạt động. -Dự án đã lưu trữ. -Tổng dung lượng. -Dung lượng đã sử dụng. -Dự án truy cập gần đây. -Hoạt động mới nhất. -Widget: -Project Counter -Storage Usage -Activity Feed -Recent Projects -Backup Status -4. Project Storage Explorer -Cấu trúc: -Storage ├── Active Projects ├── Archived Projects ├── Templates ├── Backups └── Trash -Chức năng: -Tạo thư mục. -Đổi tên. -Xóa. -Di chuyển. -Kéo thả. -Upload. -Download. -5. Quản Lý Dự Án -Mỗi dự án bao gồm: -Tên dự án -ID -Mô tả -Trạng thái -Ngày tạo -Ngày cập nhật -Dung lượng -Repository URL -Tags -Owner -Trạng thái: -Active -Development -Testing -Maintenance -Archived -6. Storage Analytics -Thống kê: -Tổng dung lượng. -Tăng trưởng theo thời gian. -Top dự án chiếm dung lượng. -Phân loại file. -Biểu đồ: -Donut Chart -Area Chart -Timeline Chart -Usage Heatmap -7. Search Engine -Tìm kiếm: -Tên dự án -Tag -Repository URL -File -Owner -Hỗ trợ: -Real-time Search -Fuzzy Search -Smart Suggestion -8. Backup Center -Chức năng: -Backup thủ công. -Backup tự động. -Restore. -Snapshot. -Lịch sử backup. -Loại backup: -Full Backup -Incremental Backup -Snapshot Backup -9. Archive Center -Lưu trữ dự án cũ. -Chức năng: -Archive. -Restore. -Compress. -Export ZIP. -10. Git Integration -Hỗ trợ: -GitHub -GitLab -Bitbucket -Tính năng: -Clone Repository -Pull -Push -Branch Manager -Commit History -11. Notification System -Thông báo: -Backup thành công. -Dung lượng gần đầy. -Dự án mới. -Lỗi hệ thống. -12. Security -Authentication: -Email Login -OAuth -Two-Factor Authentication -Authorization: -Admin -Manager -Developer -Viewer -Bảo mật: -JWT -Encryption -Audit Log -Rate Limit -13. Công Nghệ Đề Xuất -Frontend: -Next.js -React -TailwindCSS -TypeScript -Backend: -Node.js -Express -NestJS -Database: -PostgreSQL -Storage: -MinIO -S3 Compatible Storage -Authentication: -NextAuth -Deployment: -Docker -Nginx -Vercel -VPS -14. Giao Diện -Phong cách: -IBM Cloud -GitHub Enterprise -Vercel Dashboard -Thiết kế: -Dark Mode -Glass Effect nhẹ -Responsive -Mobile Friendly -Màu sắc: -Background: #0A0A0A Card: #111111 Border: #262626 Accent: #00D4FF -15. Roadmap -Phase 1 -Authentication -Dashboard -Project Storage -Phase 2 -Analytics -Backup -Archive -Phase 3 -Git Integration -Notification -Phase 4 -AI Assistant -Auto Optimization -Smart Search -16. Tiêu Chuẩn Hoàn Thành -Không lỗi giao diện. -Responsive 100%. -Lighthouse trên 95. -API dưới 300ms. -Hỗ trợ 10.000+ dự án. -Hỗ trợ 1TB+ dữ liệu. -Có Backup và Restore hoàn chỉnh. -Có phân quyền đầy đủ. ::: -Để đạt mức "đọc là làm được", bước tiếp theo là soạn thêm Database Schema (ERD), API Specification, Folder Structure, UI/UX Design System và kiến trúc hệ thống đầy đủ (frontend, backend, storage, auth, analytics). Những phần đó mới là thứ giúp lập trình viên xây dựng gần như không phải đoán. +

+ RKix Storage Center logo +

+ +

RKix Storage Center

+ +

+ Dark, minimal and AI-ready storage control plane for project teams. +

+ +

+ React + Vite + TypeScript + Gemini AI +

+ +

+ Version + Node + Sponsor + License +

+ +--- + +## Preview + +```bash +npm ci +cp .env.example .env +npm run dev +``` + +Open: **http://localhost:3000** + +> AI Copilot requires a valid `GEMINI_API_KEY` in `.env`. + +## What ships in v1.0 + +- Premium dark UI shell with animated glass background, minimal RKix logo and release-ready landing hero. +- Unified dashboard for projects, storage usage, backups, archives, notifications and audit logs. +- Project registry with search, create/edit/delete, repository connection test and Git action simulations. +- Storage Explorer for virtual folders/files, rename, move, delete and Trash cleanup. +- Backup and Archive centers for snapshot/restore and ZIP export simulations. +- Gemini-powered AI Copilot endpoint with live project/storage context. + +## Stack + +| Layer | Tools | +| --- | --- | +| Frontend | React 19, Vite, TypeScript, Tailwind CSS v4, Recharts, lucide-react, motion | +| Backend | Node.js, Express, TypeScript, tsx, esbuild | +| AI | Google Gemini via `@google/genai` | +| Runtime Store | Local `data_store.json` generated by the server | + +## Commands + +| Command | Purpose | +| --- | --- | +| `npm run dev` | Start Express + Vite development server. | +| `npm run lint` | Type-check with TypeScript. | +| `npm run build` | Build frontend and production server bundle. | +| `npm run check` | Run lint and build together. | +| `npm run start` | Run the production bundle from `dist/server.cjs`. | + +## Project map + +```text +. +├── public/rkix-logo.svg # Minimal RKix logo and favicon source +├── src/components/RKixLogo.tsx # Reusable UI logo component +├── src/App.tsx # Main product UI and workflows +├── src/index.css # Design tokens, animations and global polish +├── server.ts # Express API and Vite/static serving +├── docs/ # Development, architecture and API docs +└── .github/ # CI workflow and PR template +``` + +## Docs + +- [Development Guide](docs/DEVELOPMENT.md) +- [Architecture Overview](docs/ARCHITECTURE.md) +- [API Reference](docs/API.md) +- [Contributing](CONTRIBUTING.md) + +## Sponsors & AI partners + +RKix Storage Center is prepared for sponsor visibility and AI-enabled product demos. Replace the badges above with real sponsor URLs when the public sponsorship page is available. + +## Security notes + +- Never commit `.env`, secrets, `data_store.json`, `dist`, `node_modules` or logs. +- The local JSON store is for demo/development only, not multi-user production persistence. +- Move secrets to a managed secret store before deploying beyond local demo. diff --git a/docs/API.md b/docs/API.md new file mode 100644 index 0000000..0ca48f5 --- /dev/null +++ b/docs/API.md @@ -0,0 +1,82 @@ +# API Reference + +Base URL local: `http://localhost:3000`. + +Tất cả request/response API hiện dùng JSON. Các endpoint mô phỏng thao tác lưu trữ, backup, archive và Git để phục vụ UI dashboard. + +## Projects + +| Method | Path | Mục đích | +| --- | --- | --- | +| `GET` | `/api/projects` | Lấy danh sách project. | +| `POST` | `/api/projects` | Tạo project mới và thư mục storage tương ứng. | +| `PUT` | `/api/projects/:id` | Cập nhật metadata, status, repo URL, tags hoặc branch hiện tại. | +| `DELETE` | `/api/projects/:id` | Xóa project và chuyển thư mục vào Trash. | +| `POST` | `/api/projects/:id/test-connection` | Kiểm tra khả năng truy cập repository URL. | +| `POST` | `/api/projects/:id/git-action` | Mô phỏng thao tác Git như pull, push, branch/sync. | + +### Tạo project + +```json +{ + "name": "rkix-new-service", + "description": "New storage service", + "status": "Development", + "repoUrl": "https://github.com/terkix/rkix-new-service", + "owner": "developer@example.com", + "tags": ["TypeScript", "Storage"] +} +``` + +## Storage Tree + +| Method | Path | Mục đích | +| --- | --- | --- | +| `GET` | `/api/storage-tree` | Lấy cây thư mục/file hiện tại. | +| `POST` | `/api/storage-tree/item` | Tạo file hoặc folder mới trong node cha. | +| `POST` | `/api/storage-tree/move` | Di chuyển node sang folder khác. | +| `POST` | `/api/storage-tree/rename` | Đổi tên node. | +| `DELETE` | `/api/storage-tree/item/:id` | Chuyển node vào Trash hoặc xóa khỏi tree tùy vị trí. | +| `POST` | `/api/storage-tree/empty-trash` | Làm rỗng Trash. | + +## Backups + +| Method | Path | Mục đích | +| --- | --- | --- | +| `GET` | `/api/backups` | Lấy lịch sử backup. | +| `POST` | `/api/backups` | Tạo backup mô phỏng. | +| `POST` | `/api/backups/:id/restore` | Restore từ backup thành công. | + +## Archive + +| Method | Path | Mục đích | +| --- | --- | --- | +| `GET` | `/api/archive/list` | Lấy danh sách archive ZIP đã tạo. | +| `POST` | `/api/archive/zip` | Nén mô phỏng nhiều project thành ZIP archive. | + +## System + +| Method | Path | Mục đích | +| --- | --- | --- | +| `GET` | `/api/system/notifications` | Lấy notification. | +| `POST` | `/api/system/notifications/read` | Đánh dấu một hoặc tất cả notification là đã đọc. | +| `GET` | `/api/system/logs` | Lấy audit log. | +| `GET` | `/api/system/stats` | Lấy thống kê dung lượng và phân loại storage. | + +## AI Assistant + +| Method | Path | Mục đích | +| --- | --- | --- | +| `POST` | `/api/ai/chat` | Gửi câu hỏi tới Gemini với context dự án/storage hiện tại. | + +Request mẫu: + +```json +{ + "message": "Tóm tắt các dự án đang chiếm nhiều dung lượng nhất", + "activeProjectId": "proj-rkix01", + "activeFolderId": "dir-active" +} +``` + +Endpoint này yêu cầu `GEMINI_API_KEY` hợp lệ. diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md new file mode 100644 index 0000000..6ea4ee8 --- /dev/null +++ b/docs/ARCHITECTURE.md @@ -0,0 +1,60 @@ +# Architecture Overview + +RKix Storage Center hiện là ứng dụng TypeScript full-stack nhẹ gồm React frontend, Express backend và lớp lưu trữ JSON mô phỏng. + +## Thành phần chính + +```text +Browser + │ + ▼ +React + Vite UI (src/) + │ fetch /api/* + ▼ +Express server (server.ts) + ├─ Project API + ├─ Storage Tree API + ├─ Backup API + ├─ Archive API + ├─ System stats/logs/notifications API + └─ Gemini AI Assistant API + │ + ▼ +Local JSON runtime store (data_store.json) +``` + +## Frontend + +- `src/main.tsx`: bootstrap React app. +- `src/App.tsx`: shell UI chính, state management phía client và các thao tác gọi API. +- `src/components/DashboardStats.tsx`: widget thống kê dashboard. +- `src/types.ts`: kiểu dữ liệu dùng chung cho project, storage, backup, notification, audit log và archive. +- `src/index.css`: Tailwind CSS v4 theme tokens, font và style nền tảng. + +## Backend + +- `server.ts` khởi tạo Express app, đọc `.env`, mount JSON middleware và phục vụ API. +- Khi `NODE_ENV` không phải production, server dùng Vite middleware để hỗ trợ HMR/dev transform. +- Khi production, server phục vụ static asset từ `dist`. + +## Lưu trữ dữ liệu + +- Dữ liệu mặc định nằm trong constants của `server.ts`. +- Runtime state được ghi vào `data_store.json` bằng `saveDb()`. +- Không dùng `data_store.json` như nguồn dữ liệu production dài hạn. Khi nâng cấp thật, nên thay bằng PostgreSQL + object storage tương thích S3/MinIO. + +## Luồng dữ liệu tiêu biểu + +1. Frontend gọi endpoint `/api/projects` để lấy danh sách project. +2. Người dùng tạo project từ UI. +3. Server validate tên project, tạo metadata, đồng bộ node tương ứng trong storage tree. +4. Server ghi audit log, notification và lưu lại state. +5. Frontend refresh dữ liệu hoặc cập nhật state để hiển thị kết quả. + +## Hướng mở rộng khuyến nghị + +- Tách API route ra các module riêng khi `server.ts` tiếp tục tăng kích thước. +- Thêm schema validation cho request body (ví dụ Zod) trước khi triển khai production. +- Tách seed data thành file riêng để dễ test và reset dữ liệu. +- Thêm test tự động cho helper xử lý storage tree và API critical path. +- Thay JSON store bằng database có migration khi dữ liệu cần bền vững. diff --git a/docs/DEVELOPMENT.md b/docs/DEVELOPMENT.md new file mode 100644 index 0000000..cb30d9b --- /dev/null +++ b/docs/DEVELOPMENT.md @@ -0,0 +1,54 @@ +# Development Guide + +Tài liệu này chuẩn hóa cách chạy, kiểm tra và mở rộng RKix Storage Center trong môi trường local. + +## Yêu cầu môi trường + +- Node.js 20 LTS (xem `.nvmrc`). +- npm 11+ hoặc phiên bản npm đi kèm môi trường triển khai. +- Gemini API key nếu cần sử dụng AI Assistant. + +## Cài đặt nhanh + +```bash +npm ci +cp .env.example .env +npm run dev +``` + +Ứng dụng chạy mặc định tại `http://localhost:3000`. + +## Biến môi trường + +| Biến | Bắt buộc | Mục đích | +| --- | --- | --- | +| `GEMINI_API_KEY` | Chỉ bắt buộc khi dùng `/api/ai/chat` | Khóa API cho Gemini AI Assistant. | +| `APP_URL` | Không bắt buộc ở local | URL public của app khi triển khai. | + +## Lệnh phát triển + +| Lệnh | Mục đích | +| --- | --- | +| `npm run dev` | Chạy Express + Vite middleware ở chế độ phát triển. | +| `npm run lint` | Type-check bằng TypeScript (`tsc --noEmit`). | +| `npm run build` | Build frontend Vite và bundle server bằng esbuild. | +| `npm run start` | Chạy bundle production ở `dist/server.cjs`. | +| `npm run clean` | Xóa output build. | + +## Quy trình khuyến nghị trước khi mở PR + +1. Đồng bộ branch mới nhất. +2. Chạy `npm ci` nếu `package-lock.json` thay đổi. +3. Chạy `npm run lint`. +4. Chạy `npm run build`. +5. Kiểm tra UI thủ công các luồng chính: + - Dashboard tổng quan. + - Tạo/sửa/xóa project. + - Storage Explorer. + - Backup/restore mô phỏng. + - Archive ZIP mô phỏng. + - AI Assistant nếu có `GEMINI_API_KEY`. + +## Ghi chú dữ liệu local + +Server tạo và cập nhật file `data_store.json` tại thư mục gốc khi ứng dụng chạy. File này là dữ liệu runtime local và không nên commit. diff --git a/index.html b/index.html index 21dfe69..bf4be80 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,9 @@ - My Google AI Studio App + + + RKix Storage Center v1.0
diff --git a/package-lock.json b/package-lock.json index 937469b..38ca18c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "react-example", + "name": "rkix-storage-center", "version": "0.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "react-example", + "name": "rkix-storage-center", "version": "0.0.0", "dependencies": { "@google/genai": "^2.4.0", @@ -29,6 +29,9 @@ "tsx": "^4.21.0", "typescript": "~5.8.2", "vite": "^6.2.3" + }, + "engines": { + "node": ">=20 <23" } }, "node_modules/@babel/code-frame": { diff --git a/package.json b/package.json index 9f767ef..48766ba 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "react-example", + "name": "rkix-storage-center", "private": true, "version": "0.0.0", "type": "module", @@ -8,7 +8,9 @@ "build": "vite build && esbuild server.ts --bundle --platform=node --format=cjs --packages=external --sourcemap --outfile=dist/server.cjs", "start": "node dist/server.cjs", "clean": "rm -rf dist server.js", - "lint": "tsc --noEmit" + "lint": "npm run typecheck", + "typecheck": "tsc --noEmit", + "check": "npm run lint && npm run build" }, "dependencies": { "@google/genai": "^2.4.0", @@ -32,5 +34,9 @@ "tsx": "^4.21.0", "typescript": "~5.8.2", "vite": "^6.2.3" + }, + "description": "Centralized project storage and repository management dashboard.", + "engines": { + "node": ">=20 <23" } } diff --git a/public/rkix-logo.svg b/public/rkix-logo.svg new file mode 100644 index 0000000..f03b43e --- /dev/null +++ b/public/rkix-logo.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/App.tsx b/src/App.tsx index 6df2868..5da3d8e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -44,6 +44,7 @@ import { import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip as RechartsTooltip } from 'recharts'; import { Project, ProjectStatus, StorageNode, BackupLog, Notification, AuditLog, StorageStats, ArchiveBundle } from './types'; import DashboardStats from './components/DashboardStats'; +import RKixLogo from './components/RKixLogo'; export default function App() { // Current tab state @@ -1042,8 +1043,68 @@ export default function App() { ); }); + const totalCapacity = stats?.totalCapacityGb ?? 1024; + const usedStorage = stats?.usedGb ?? 0; + const usedStoragePercent = totalCapacity > 0 ? ((usedStorage / totalCapacity) * 100).toFixed(1) : '0.0'; + const activePageMeta = { + overview: { + eyebrow: 'Command Center', + title: 'Bảng điều khiển vận hành RKix v1.0', + description: 'Theo dõi dự án, dung lượng, backup và cảnh báo trên một giao diện tối giản, sang trọng, sẵn sàng demo.', + cta: 'Khởi tạo dự án', + action: () => setIsNewProjectModalOpen(true), + }, + explorer: { + eyebrow: 'Storage Explorer', + title: 'Duyệt không gian lưu trữ trực quan', + description: 'Quản lý cây thư mục, file, Trash và thao tác phân vùng trong trải nghiệm gần với một control plane thực tế.', + cta: 'Thêm bản ghi', + action: () => setIsCreateExplorerOpen(true), + }, + projects: { + eyebrow: 'Project Registry', + title: 'Quản lý vòng đời toàn bộ dự án', + description: 'Tìm kiếm, tạo mới, chỉnh trạng thái, kiểm thử kết nối repository và thao tác Git mô phỏng.', + cta: 'Tạo project', + action: () => setIsNewProjectModalOpen(true), + }, + backup: { + eyebrow: 'Backup Center', + title: 'Sao lưu và phục hồi có kiểm soát', + description: 'Theo dõi checkpoint, restore snapshot và trạng thái an toàn dữ liệu trong một màn hình tập trung.', + cta: 'Đồng bộ dữ liệu', + action: () => fetchAllData(), + }, + archive: { + eyebrow: 'Archive Center', + title: 'Nén, xuất kho và lưu trữ dài hạn', + description: 'Đóng gói project thành archive ZIP mô phỏng, xem cấu trúc bên trong và xuất metadata nhanh.', + cta: 'Đồng bộ archive', + action: () => fetchAllData(true), + }, + security: { + eyebrow: 'Security Ledger', + title: 'Audit log và giám sát thay đổi', + description: 'Quan sát các sự kiện vận hành, notification và dấu vết thao tác quan trọng trên toàn hệ thống.', + cta: 'Làm mới log', + action: () => fetchAllData(true), + }, + ai: { + eyebrow: 'AI Copilot', + title: 'Trợ lý thông minh cho storage team', + description: 'Hỏi nhanh về dung lượng, backup, Git workflow hoặc để AI đề xuất tối ưu cho dự án hiện tại.', + cta: 'Gợi ý câu hỏi', + action: () => handlePresetAiPrompt('Phân tích nhanh tình trạng hệ thống RKix hiện tại và đề xuất 3 việc ưu tiên.'), + }, + }[activeTab]; + return ( -
+
+