Admin Campaign Dashboard

Design an Admin Campaign Management Dashboard for a Vietnamese e-commerce store (lucifertech.store).

Page: /admin/campaigns/[id] — Admin Campaign Detail

Layout Requirements:

Clean admin dashboard style, dark theme (bg-gray-950)
Tabs navigation: Tổng quan | Nhiệm vụ | Mốc thưởng | Từ khóa
Vietnamese language

Tab 1: Tổng quan (Overview)

Stats Cards Row:

Người tham gia: 127
Tổng điểm phát: 4,580
Nhiệm vụ hoàn thành: 312
Phần quà đã phát: 18

Campaign Info:

Name, description, date range, status (with toggle Active/Draft/Ended)
Edit button

Tab 2: Nhiệm vụ (Tasks)

Pending Approval Section:

Cards for each pending task with:
- Task type icon (FB/Google)
- Title + content preview
- Points value
- Action buttons: Approve | Edit | Reject
- "Approve All" batch button
After approve: shows Facebook post preview + Zalo content (copy button)

Active Tasks Today:

Table: Task name | Type | Points | Submissions | Status
Click to expand: see individual submissions

Tab 3: Mốc thưởng (Milestones)

List of milestones sorted by points
Each row: Points required | Product reward (image + name) | Claims count
Add milestone button with modal: points input + product variant selector

Tab 4: Từ khóa (Keywords Analytics)

Mix Ratio Chart:

Donut/pie chart showing: Branded 25% | Semi-branded 20% | Non-branded 35% | Long-tail 20%

Keywords Table:

Columns: Keyword | Type | Position | Page | Daily Clicks | Daily Limit | Position Change
Color coded: green for improvement, red for drops
Badge for keywords near daily limit (>80%)

Component Style:

shadcn/ui components (Tabs, Table, Card, Badge, Button, Dialog, Select)
Tailwind CSS, dark theme
Lucide React icons
Charts: use Recharts (PieChart)

Show full message

15d ago

Now I have all the context I need. Let me build all the components systematically.

Now let me build all the tab components:

Now let's write the main page file:

Now update the root page to redirect:

The Admin Campaign Management Dashboard is complete. Here is what was built:

Layout & Navigation: A responsive dark-theme admin shell (bg-gray-950-equivalent via oklch(0.09)) with a collapsible left sidebar showing the LuciferTech brand, full nav links, and a sticky topbar with breadcrumb + live status badge.

Four fully interactive tabs:

Tổng quan — Four stat cards with trend indicators, a campaign info panel, and a live status selector (Active/Draft/Ended) with progress bars
Nhiệm vụ — Pending approval cards with per-task Approve/Edit/Reject actions and an "Approve All" batch button; after approval each card expands to show Facebook post content + Zalo copy with clipboard support. Active tasks are shown in a collapsible table revealing individual submissions
Mốc thưởng — Milestone cards sorted by points with product images, claim progress bars, and a Dialog modal with points input + product variant selector
Từ khóa — A Recharts donut chart showing the 4-way keyword mix ratio, alongside a full keyword table with color-coded position changes (green/red), near-limit warning badges (>80%), and per-type colored badges

15d ago

Design an Admin Campaign Management Dashboard for a Vietnamese e-commerce store (lucifertech.store).

Page: /admin/campaigns/[id] — Admin Campaign Detail

Layout Requirements:

Clean admin dashboard style, dark theme (bg-gray-950)
Tabs navigation: Tổng quan | Nhiệm vụ | Mốc thưởng | Từ khóa
Vietnamese language

Tab 1: Tổng quan (Overview)

Stats Cards Row:

Người tham gia: 127
Tổng điểm phát: 4,580
Nhiệm vụ hoàn thành: 312
Phần quà đã phát: 18

Campaign Info:

Name, description, date range, status (with toggle Active/Draft/Ended)
Edit button

Tab 2: Nhiệm vụ (Tasks)

Pending Approval Section:

Cards for each pending task with:
- Task type icon (FB/Google)
- Title + content preview
- Points value
- Action buttons: Approve | Edit | Reject
- "Approve All" batch button
After approve: shows Facebook post preview + Zalo content (copy button)

Active Tasks Today:

Table: Task name | Type | Points | Submissions | Status
Click to expand: see individual submissions

Tab 3: Mốc thưởng (Milestones)

List of milestones sorted by points
Each row: Points required | Product reward (image + name) | Claims count
Add milestone button with modal: points input + product variant selector

Tab 4: Từ khóa (Keywords Analytics)

Mix Ratio Chart:

Donut/pie chart showing: Branded 25% | Semi-branded 20% | Non-branded 35% | Long-tail 20%

Keywords Table:

Columns: Keyword | Type | Position | Page | Daily Clicks | Daily Limit | Position Change
Color coded: green for improvement, red for drops
Badge for keywords near daily limit (>80%)

Component Style:

shadcn/ui components (Tabs, Table, Card, Badge, Button, Dialog, Select)
Tailwind CSS, dark theme
Lucide React icons
Charts: use Recharts (PieChart)

Now I have all the context I need. Let me build all the components systematically.

Now let me build all the tab components:

Now let's write the main page file:

Now update the root page to redirect:

The Admin Campaign Management Dashboard is complete. Here is what was built:

Four fully interactive tabs:

Tổng quan — Four stat cards with trend indicators, a campaign info panel, and a live status selector (Active/Draft/Ended) with progress bars
Nhiệm vụ — Pending approval cards with per-task Approve/Edit/Reject actions and an "Approve All" batch button; after approval each card expands to show Facebook post content + Zalo copy with clipboard support. Active tasks are shown in a collapsible table revealing individual submissions
Mốc thưởng — Milestone cards sorted by points with product images, claim progress bars, and a Dialog modal with points input + product variant selector
Từ khóa — A Recharts donut chart showing the 4-way keyword mix ratio, alongside a full keyword table with color-coded position changes (green/red), near-limit warning badges (>80%), and per-type colored badges

15d ago