biz-admin-leads-dashboard

name

biz-admin-leads-dashboard

description

Scaffold trang `/admin` CRM-style trực quan vào Next.js project (Supabase backend) — KHÔNG còn variant Vercel KV. Layout 1CRM-inspired: sidebar 3 tab (Tổng quan / Khách hàng / Email marketing) + popup nhập mã đăng nhập. **Tab Tổng quan**: 4 KPI cards (Tổng leads / Đã thanh toán / Tỷ lệ chuyển đổi / Doanh thu) có delta arrow vs kỳ trước, line chart leads+paid+revenue theo ngày dùng `recharts`, donut trạng thái paid/pending/expired, period selector pill 7d/30d/90d, list 5 thanh toán gần nhất. **Tab Khách hàng**: bảng leads + search + filter trạng thái + filter ngày + CSV export. **Tab Email marketing**: form soạn chiến dịch (tên + tiêu đề + body chọn định dạng **văn bản thường HOẶC HTML** + placeholder `{{name}}` + audience 4 loại all/paid/pending/last_days + tên người gửi) — có nút **Xem trước** mở modal iframe render đúng email thật (text → auto convert + wrap khung; HTML fragment → wrap khung, HTML đầy đủ giữ nguyên) → gửi bulk qua SMTP (reuse `nodemailer` của `biz-email-setup` — KHÔNG cài provider mới), log per-recipient vào Supabase, bảng lịch sử chiến dịch hiển thị thành công/thất bại/thời gian (bấm 1 row để xem trước email đã gửi). Workflow 6 phase: (0) detect Next.js App Router + verify `lib/leads-supabase.ts` đã có (nếu không → bảo user chạy `/biz-setup-sepay-payment` trước), verify SMTP env vars đã có (nếu không → bảo chạy `/biz-email-setup` trước), (1) HỎI user password (mặc định `123456`, khuyến nghị mạnh hơn cho production), (2) cài `recharts` (npm install recharts) — `nodemailer` đã có từ `biz-email-setup`, (3) chạy `templates/supabase-migration-admin.sql` trong Supabase SQL Editor tạo bảng `campaigns` + `campaign_sends` (RLS deny-all), (4) append `ADMIN_PASSWORD` vào `.env.local` + .gitignore, (5) scaffold 9 file: `lib/admin-auth.ts` (timing-safe pass check), `lib/admin-stats.ts` (KPI + time-series + deltas), `lib/campaigns.ts` (CRUD + audience query), `lib/mailer.ts` (nodemailer transporter + plain→HTML wrapper + opt-out footer + throttle 200ms), `app/admin/page.tsx` (1CRM 3-tab UI client component), `app/api/admin/leads/route.ts`, `app/api/admin/dashboard/route.ts`, `app/api/admin/campaigns/route.ts` (GET list + POST create&send đồng bộ, throttle 200ms/email, maxDuration 60s). (6) hướng dẫn test 3 cấp (curl dashboard, UI smoke, gửi test campaign cho email riêng của owner). Pages Router KHÔNG còn support trong skill này — user dùng Pages Router phải port manual hoặc convert sang App Router. Output: 8 file + 1 SQL migration + 1 env var + npm dep recharts + 3 test plans. Tiếng Việt thuần (xưng anh/chị), columns tiếng Việt, charm pricing VND, email opt-out footer tiếng Việt 'Reply HỦY để ngừng nhận'. USE WHEN user says: 'tạo trang admin', 'admin dashboard CRM', 'admin xem leads', 'dashboard kiểu 1CRM', 'admin có biểu đồ', 'theo dõi leads theo ngày tuần tháng', 'tỷ lệ chuyển đổi admin', 'admin có chart', 'admin gửi email quảng cáo', 'email marketing dashboard', 'gửi email bulk cho khách', 'campaign email cho lead', 'email khuyến mãi cho khách hàng', 'admin xem ai đã thanh toán', 'admin popup nhập mã', 'biz-admin-leads-dashboard', 'CRM lite Next.js', 'admin Supabase + email'. KHÔNG dùng khi: (a) project chưa có `lib/leads-supabase.ts` — phải chạy `/biz-setup-sepay-payment` chọn Supabase trước, (b) project dùng Vercel KV thay Supabase — skill version này KHÔNG còn support KV, (c) cần multi-user role-based admin — skill này 1 password chung, (d) cần email tracking mở/click chi tiết — chỉ track sent/failed.

Biz Admin Leads Dashboard — CRM-style /admin cho Supabase

Scaffold trang /admin kiểu 1CRM vào Next.js project (App Router). 3 tab — Tổng quan (KPI + chart), Khách hàng (bảng + filter), Email marketing (soạn + gửi bulk + history).

Triết lý: Đơn giản hơn 1CRM (1 password chung, không multi-user), nhưng có đủ chart + delta + email marketing để chủ doanh nghiệp 1-2 người dùng được. Mọi state lưu Supabase, file scaffold độc lập với project hiện có.

/admin → popup "Nhập mã quản trị" → các tab gọi /api/admin/{leads|dashboard|campaigns}
                                  → mỗi request gửi header x-admin-pass
                                  → server timing-safe compare với ADMIN_PASSWORD env

Password lưu trong React state — refresh page = popup hiện lại (intended, đơn giản, không cần session cookie).

Chỉ Supabase — KV variant đã bị bỏ. Lý do: campaigns + campaign_sends cần SQL join + service_role bypass RLS; KV không native hỗ trợ.

---

Khi nào dùng skill này

• Project đã có Sepay payment + lead store qua lib/leads-supabase.ts (từ biz-setup-sepay-payment chọn Supabase) → cần view layer + dashboard + email marketing.
• User muốn page CRM-style: KPI cards có delta, line chart theo ngày, donut conversion, gửi email khuyến mãi cho khách đã đăng ký.

KHÔNG dùng khi:

• Project chưa có lib/leads-supabase.ts → bảo user chạy /biz-setup-sepay-payment (chọn Supabase) trước.
• Project dùng Vercel KV thay Supabase → skill này KHÔNG còn support KV. User chỉ có 2 lựa chọn: migrate sang Supabase hoặc tự port manual.
• Cần multi-admin với role/permission → skill 1 password chung, không phù hợp.
• Cần email tracking chi tiết (mở/click per recipient) → skill chỉ track sent/failed. User cần Resend/SendGrid/Brevo bulk có tracking.

---

Workflow (6 phase)

Phase 0: DETECT Next.js App Router + verify lib/leads-supabase.ts + verify SMTP env
Phase 1: HỎI user password (default 123456) — GATE
Phase 2: INSTALL npm dep `recharts`
Phase 3: CHẠY supabase-migration-admin.sql trong Supabase SQL Editor — GATE
Phase 4: WRITE ADMIN_PASSWORD vào .env.local
Phase 5: SCAFFOLD 9 file code (5 lib + 4 route + 1 page)
Phase 6: TEST 3 cấp (curl dashboard, UI smoke, gửi test campaign)

---

Phase 0 — Detect + verify dependencies

# Check Next.js + App Router
test -f next.config.js -o -f next.config.mjs -o -f next.config.ts &&  
 -d app &&   || {  ;  1; }


 -f lib/leads-supabase.ts &&   || {  ;  1; }
 -f lib/leads-store.ts &&  
 -f lib/supabase-admin.ts &&  


grep -E  .env.local &&   || {  ;  1; }
grep -E  .env.local
grep -E  .env.local
grep -E  .env.local


grep  package.json &&  
grep  package.json &&