Magnolia Commercial App

Đang tải...

🌟 DASHBOARD — Tháng X/YYYY

Tổng Doanh số (4 sales)

—

C.S — Current Outlets

—

Nam: —

Bắc+Trung: —

C.A — New Outlets

—

Nam: —

Bắc+Trung: —

Outlet mở mới trong tháng

—

Đơn hàng mới trong ngày

—

📈 So sánh theo miền

Doanh số theo miền — Target vs Actual

📅 Xu hướng tháng

Doanh số hàng ngày trong tháng

Hoạt động ghé thăm theo ngày — từng salesman

🏆 Top outlets

Top 10 outlets theo doanh số (kỳ này)

📊 Tỉ trọng sales trong Top 10

Sales	Outlets	DT	%

🏷️ Tỉ trọng SP theo format trong Top 10

Sản phẩm	Mã SP	Format	DT	%
Đang tải…

🔻 Phễu bán hàng tổng

PHỄU C.A (New Outlets) — Raw Lead → Won

PHỄU C.S (Current Outlets) — New Opening → Reactive

📊 SUMMARY — Tháng X/YYYY

📊 Biểu đồ tổng hợp

1. DOANH SỐ — Target vs Actual

2.A TIẾN ĐỘ TUẦN — C.A (Won)

2.B TIẾN ĐỘ TUẦN — C.S

⏱ TIẾN ĐỘ THỜI GIAN vs DOANH SỐ

📋 Bảng chi tiết theo team & salesman

🎯 TARGET — Tháng

Target tháng + 4 tuần theo salesman × phễu × stage

STT	Salesman	Phễu	Stage	TỔNG THÁNG		W1		W2		W3		W4
STT	Salesman	Phễu	Stage	SL	DT	SL	DT	SL	DT	SL	DT	SL	DT
Đang tải...

👥 TEAM MIỀN NAM

Phúc + Nguyên

👤 Phễu theo team & cá nhân

🆕 PHỄU C.A — Tổng hợp Target · Actual · Plan

Salesman	Stage	Loại	Tgt	Act	Plan	Còn	%
Đang tải...

🔄 PHỄU C.S — Tổng hợp Target · Actual · Plan

Salesman	Stage	Loại	Tgt	Act	Plan	Còn	%
Đang tải...

📋 Chi tiết outlets phễu C.A

STT	NV	Outlet	Stage hiện tại	Stage FC	SL	DT	Nguồn
Đang tải...

📋 Chi tiết outlets phễu C.S

STT	NV	Outlet	Stage hiện tại	Stage FC	SL	DT	Nguồn
Đang tải...

📅 Plan/Next step C.A (từ MISA)

STT	NV	Outlet	Stage	Ngày ghé	Next step / Mô tả	Nguồn
Đang tải...

📅 Plan/Next step C.S (từ MISA)

STT	NV	Outlet	Stage	Ngày ghé	Next step / Mô tả	Nguồn
Đang tải...

👥 TEAM BẮC + TRUNG

Linh + Thịnh

📍 Phễu theo Miền

👤 Phễu theo team & cá nhân

🆕 PHỄU C.A — Tổng hợp Target · Actual · Plan

Salesman	Stage	Loại	Tgt	Act	Plan	Còn	%
Đang tải...

🔄 PHỄU C.S — Tổng hợp Target · Actual · Plan

Salesman	Stage	Loại	Tgt	Act	Plan	Còn	%
Đang tải...

📋 Chi tiết outlets phễu C.A

STT	NV	Outlet	Stage hiện tại	Stage FC	SL	DT	Nguồn
Đang tải...

📋 Chi tiết outlets phễu C.S

STT	NV	Outlet	Stage hiện tại	Stage FC	SL	DT	Nguồn
Đang tải...

📅 Plan/Next step C.A (từ MISA)

STT	NV	Outlet	Stage	Ngày ghé	Next step / Mô tả	Nguồn
Đang tải...

📅 Plan/Next step C.S (từ MISA)

STT	NV	Outlet	Stage	Ngày ghé	Next step / Mô tả	Nguồn
Đang tải...

Đang generate báo cáo...

📋 GAP — Outlet còn thiếu để đạt target

Click sub-tab sales để xem danh sách outlet cần đẩy doanh thu trong tháng. Data sync trực tiếp từ MISA — không cần dấu thời gian xuất.

Đang tính gap…

📅 PLAN — C.A + C.S outlet plan

Nhập plan cho từng sales: outlet · stage · doanh thu dự kiến theo tuần (C.A) · tuần dự kiến visit (C.S)

📊 Tổng C.A + C.S — tháng hiện tại

🆕 Plan C.A — outlet mới sales đang push

📆 Tháng hiện tại — follow

🗓️ Tháng tiếp theo — plan ahead

📊 Phễu C.A — Target vs Plan (tháng hiện tại)

📊 Phễu C.S — Target vs Plan (tháng hiện tại)

📆 Bảng plan tháng hiện tại

Chọn sales để xem plan...

🗓️ Bảng plan tháng tiếp theo

—

💡 Click row trong bảng để sửa

🔄 Plan C.S — outlets hiện hữu (target + actual)

📆 Tháng hiện tại — follow

🗓️ Tháng tiếp theo — plan ahead

📆 Bảng plan tháng hiện tại

Đang tải C.S forecast…

🗓️ Bảng plan tháng tiếp theo

—

🗓️ WORKING SCHEDULE — Kế hoạch đi tuyến

Lịch đi tuyến tuần cho team sales · 23 cột mirror template Excel · outlet mới C.A hiện đỏ

Năm	Tháng	Tuần	Ngày đi tuyến	PIC	Outlet Type	Outlets	Stage hiện tại ↻ đi tuyến về cập nhật	Stage mục tiêu từ Plan	Hoàn thành mục tiêu	Đường	Quận	Tỉnh/Thành Phố	Channel	Channel Segmentation	Tổng lần ghé	Note	Loại hành động	Nội dung hành động	Deadline HĐ	Ngày thực tế	Kết quả HĐ	Đánh giá	Ghi nhận nội dung	Kết quả	Tiềm năng outlet
Chọn sales để xem lịch…

📋

Commercial Plan

Workspace mới — chờ brief task cụ thể. Sau khi bạn mô tả yêu cầu, tôi sẽ build nội dung vào đây mà không ảnh hưởng tab Sales OS.

🎁 Incentive

Đang tải…

🎨 Design Tools

AI design + asset library chạy 100% trong browser. Gõ prompt → Claude gen HTML design ngay. Quản lý asset, task, export data Magnolia.

📑 Mục lục: 1. Workspace này có gì 2. Dùng AI Studio 3. Dùng tab Asset Library 4. Dùng tab Tasks 5. Dùng tab Export Data 6. Workflow end-to-end 7. FAQ

1️⃣ Workspace này có gì?

Workspace Design Tools = AI design + asset library trong browser. Không cần cài app desktop nào. Gồm 5 tab:

📖 Hướng dẫn

Tab bạn đang xem.

🤖 AI Studio

Gõ prompt → Claude gen HTML design. Dùng Claude Max subscription qua local bridge (free) hoặc Anthropic API (per-token).

📦 Asset Library

Lưu trữ file design (PNG/PDF/HTML/AI/PSD…) lên cloud, share team, search nhanh.

📋 Tasks

Bảng kanban quản lý task design: TODO → Đang làm → Review → Done.

📤 Export Data

Tải data Magnolia (outlet, SKU, brand color) về để dùng trong prompt.

2️⃣ Dùng tab 🤖 AI Studio — design bằng Claude Max subscription

Có Claude Pro/Max subscription? Chạy bridge script local 1 lần → AI Studio gen unlimited KHÔNG tốn token. Hoặc fallback dùng Anthropic API trả phí.

💻 Setup Claude Max bridge KHUYÊN DÙNG

Dùng subscription đã trả ($20-100/tháng) → unlimited Claude, 0$ thêm. Setup 1 lần ~5 phút.

1

Cài Node.js (nếu chưa có) — môi trường chạy bridge script

Vào 🔗 nodejs.org/download → chọn Windows Installer (.msi) — LTS (bản chẵn 20.x hoặc 22.x) → tải về → chạy → bấm Next/Next/Next/Install/Finish.

Đã cài rồi? Kiểm tra bằng cách mở PowerShell (bước 2) → gõ node -v → ra v20.x.x là OK, qua bước 3.

2

Mở PowerShell — công cụ chạy lệnh

Bấm phím ⊞ Win trên bàn phím → gõ PowerShell → Enter. Cửa sổ đen/xanh mở ra.

Để bridge "biết" thư mục lưu script, vào folder bạn muốn: cd Desktop (lưu Desktop) hoặc giữ nguyên (Home).

3

Cài Claude Code CLI — công cụ chính thức của Anthropic

npm install -g @anthropic-ai/claude-code

Paste vào PowerShell → Enter → đợi 30-60s. Khi hiện added X packages là xong.

4

Login Claude Max subscription

claude login

Browser tự mở → đăng nhập claude.ai account đang có Max → bấm Authorize → quay về PowerShell thấy "Logged in" là OK.

5

Tải bridge script về máy

📥 Tải claude-cli-bridge.mjs

Trình duyệt sẽ hiện hộp thoại Save As → lưu vào cùng thư mục bạn đang ở trong PowerShell (vd Desktop). Nhớ tên file: claude-cli-bridge.mjs.

6

Chạy bridge — mỗi session làm việc chạy 1 lần

node claude-cli-bridge.mjs

Paste → Enter → PowerShell hiện banner 🌉 Claude CLI Bridge — RUNNING. KHÔNG đóng cửa sổ PowerShell này khi đang dùng AI Studio.

7

Verify trong Magnolia AI Studio

Mở Magnolia → tab Design Tools → tab 🤖 AI Studio → sidebar bên trái hiện ✅ Bridge đang chạy (màu xanh) là xong. Bắt đầu gen design.

Hiện ⚠️ Bridge chưa chạy đỏ? Kiểm tra: PowerShell vẫn mở? bridge có hiện RUNNING? URL Magnolia đúng magnolia-sales.pages.dev?

Tắt bridge: nhấn Ctrl+C trong PowerShell. Lần sau dùng AI Studio: mở PowerShell, cd vào folder chứa script, chạy lại lệnh bước 6.

✨ Generate design

Sidebar → provider 💻 Claude Max (local bridge) (default)
Chọn 1 trong 5 template (POSM/Slide BOD/Mockup app/Wireframe/Banner)
Sửa prompt nếu muốn (tiếng Việt OK)
Bấm ✨ Generate → bridge gọi Claude CLI → đợi 10-20s
Preview HTML hiện ngay trong iframe, bấm {} Source xem code

🌐 Fallback: Anthropic API

Không có Claude Max? Dùng API key trả phí per-token:

Tạo key tại console.anthropic.com
AI Studio → đổi provider sang 🌐 Anthropic API
Paste sk-ant-... → 💾 Lưu

Model	~/design
Sonnet 4.5 ⭐	$0.10
Opus 4.5	$0.50
Haiku 4.5	$0.03

$5 credit miễn phí khi đăng ký (~50 design Sonnet). Key lưu localStorage, không gửi server Magnolia.

📥 Save Asset

Sau khi gen xong, bấm 📥 Save Asset → file HTML tự upload Asset Library.

Vào tab 📦 Asset Library → thấy file ai-design-2026-06-17.html → click để mở/preview/share team.

File HTML mở trong Chrome → Ctrl+P → Save as PDF nếu cần in.

3️⃣ Tab Asset Library — lưu file design lên cloud

Mỗi lần design xong, đẩy file lên đây để team xem + dùng chung. Có 2 cách upload:

🔄 Auto-sync folder (KHUYÊN DÙNG)

Tab 📦 Asset Library → bấm 🔄 Auto-sync folder
Browser hỏi chọn folder → chọn folder lưu design local (vd ảnh chụp, scan, file team gửi qua chat) → Allow
Status bar màu xanh xuất hiện → browser tự quét folder mỗi 15 giây
Mọi file mới (PNG/PDF/AI/PSD…) tự upload lên cloud, tag auto-sync

⚠️ Browser phải mở tab Magnolia. Đóng tab = dừng sync. Lần sau mở: bấm "▶ Tiếp tục" trong bar.

📤 Upload tay

Bấm 📤 Upload tay
Chọn 1 hoặc nhiều file
Đợi vài giây → file xuất hiện trong grid

Dùng khi chỉ có vài file lẻ, không cần sync nguyên folder.

🔍 Tìm + lọc

Search: gõ tên file hoặc tag
Campaign filter: vd "Tết 2026"
Sort: mới nhất / A→Z / size

✏️ Sửa info / xoá

Click thumbnail asset → modal mở
Sửa: tên, tags (cách nhau dấu phẩy), campaign, SKU, mô tả
Bấm 💾 Lưu hoặc 🗑 Xoá
Tải về asset: bấm ⬇️ Tải về

4️⃣ Tab Tasks — kanban quản lý task design

4 cột: TODO → Đang làm → Review → Done. Mỗi cột là 1 trạng thái workflow.

➕ Tạo task mới

Bấm ➕ Task mới
Điền: tiêu đề, mô tả, priority, assignee, due date, SKU/campaign, local path
Lưu → task xuất hiện ở cột TODO

🚦 Chuyển trạng thái

Kéo thả task giữa các cột:

Bắt đầu làm: kéo từ TODO → Đang làm
Xong chờ duyệt: kéo Đang làm → Review
Đã duyệt: kéo Review → Done

💬 Comment + feedback

Click task để mở modal
Cuộn xuống mục 💬 Comments
Gõ comment → bấm Gửi
Team thấy ngay khi mở task

🔍 Lọc

Search: gõ từ khoá trong tên/mô tả
Assignee: lọc task của 1 người
Priority: Urgent/High/Normal/Low

Due date đỏ = quá hạn, cam = sắp tới (≤3 ngày).

5️⃣ Tab Export Data — data Magnolia làm context cho prompt

Tải data thật về để paste/đính kèm vào prompt AI Studio, hoặc dùng cho công cụ khác:

Nút	Lấy gì	Dùng cho gì
📄 Outlets CSV	819 outlet (tên, địa chỉ, channel, tier)	Prompt "tạo POSM cho outlet X" — paste data outlet vào
{} Outlets JSON	Same data format JSON	Dev/tool advanced
{} SKU JSON	17 SKU bia (mã, tên, định lượng)	Reference SKU đúng tên khi gen menu
{} Brand tokens JSON	Màu/font/spacing Magnolia (chuẩn W3C)	Prompt sẽ ra design đúng brand color
CSS variables	Same tokens dạng CSS	Web dev
📄 Top outlets CSV	Top 50 outlet doanh thu tháng này	Quyết định ưu tiên thiết kế POSM cho outlet nào trước

6️⃣ Workflow end-to-end (ví dụ: làm POSM menu cho Tết 2026)

(1 lần duy nhất) Mở terminal → node scripts/claude-cli-bridge.mjs → giữ tab terminal mở. Bridge sẽ đứng nền nghe lệnh từ browser.
📋 Tasks tab: tạo task "POSM menu Tết 2026 — Outlet GOURMET SHOP" → priority High, due 25/01/2026, gán cho designer.
📤 Export Data tab: tải SKU JSON + Brand tokens JSON → mở file để copy nội dung.
🤖 AI Studio tab: sidebar đã hiện ✅ Bridge đang chạy → bấm template 📋 POSM menu → prompt prefilled SKU + màu Magnolia. Bổ sung nếu cần: paste 17 SKU JSON, sửa giá Tết.
Bấm ✨ Generate → đợi 10-20s → preview HTML hiện ngay. Không tốn token vì dùng Claude Max subscription.
Ưng → bấm 📥 Save Asset → file HTML upload tự động vào Asset Library với tên ai-design-2026-06-17_HH-mm-ss.html.
📋 Tasks tab: kéo task từ "Đang làm" → "Review". Trong modal task: dán link Asset Library file POSM vừa gen, gọi sếp/CH vào duyệt qua comment.
Sau duyệt: kéo task sang "Done". Sales gửi file HTML cho outlet (mở trong browser) hoặc save as PDF để in.

💡 Tip: File HTML có thể mở trong Chrome/Edge → Ctrl+P → Save as PDF cho menu giấy in. Hoặc full-page screenshot để có PNG. Tắt bridge: Ctrl+C trong terminal.

7️⃣ FAQ

Tôi có Claude Max rồi, có tốn thêm tiền nào không?

Không. Bridge dùng subscription đã trả → Claude Max ($100/tháng) cho ~1000+ design/tháng, Pro ($20/tháng) cho ~200 design/tháng. Magnolia 0$, không API token, không phí ẩn.

Phải mở terminal mỗi lần dùng AI Studio à?

Chỉ chạy node scripts/claude-cli-bridge.mjs 1 lần mỗi session làm việc. Sau đó AI Studio dùng thoải mái. Tắt máy = bridge dừng → lần sau mở terminal chạy lại. Có thể thiết lập startup script để bridge tự chạy khi mở máy.

Chưa có Claude Pro/Max, dùng được không?

Được. Đổi provider sang 🌐 Anthropic API → tạo key tại console.anthropic.com. Free tier $5 (~50 design Sonnet). Sau đó trả per-token ~$0.10/design.

Bridge có an toàn không?

Bridge chỉ chạy trên localhost:3002, máy khác trong mạng KHÔNG truy cập được. CORS chỉ cho domain Magnolia (magnolia-sales.pages.dev) gọi. Spawn process claude --print với prompt user nhập — không thực thi shell command bừa bãi.

Prompt tiếng Việt có được không?

Được 100%. Gõ "menu bia chai 33cl phong cách tối giản, màu navy + gold" → Claude hiểu + gen đúng. Claude đọc tên SKU tiếng Việt OK (vd "Bia Tươi Vàng").

File design nào upload được vào Asset Library?

Bucket cho phép tới 50MB, mọi định dạng: PNG/JPG/SVG/PDF/HTML/AI/PSD/ZIP/MP4. Asset Library hiện icon mặc định cho file không phải ảnh, click download để mở.

Auto-sync folder làm gì?

Chọn 1 folder local → browser tự upload file mới lên Asset Library mỗi 15s. Hữu ích khi bạn có nhiều file design lưu local (ảnh chụp POSM thật, scan tài liệu, file team gửi qua chat) muốn share lên cloud nhanh.

Ai xoá được asset/task của tôi?

Chỉ chính bạn hoặc admin/super_admin. Người khác chỉ xem được.

⚙️ Provider

Dùng Claude Pro/Max — KHÔNG tốn token. Cần chạy bridge trên máy.

⏳ Đang check bridge...

📖 Xem hướng dẫn setup chi tiết 7 bước →

📥 Tải bridge script

🎨 Template prompt

🖼️ Preview

Đang tải…

📌 TODO 0

⚙️ Đang làm 0

👀 Review 0

✅ Done 0

📍 Outlets

Export danh sách outlet với địa chỉ, channel, tier, miền.

🍺 SKU danh sách

17 SKU bia Magnolia với mã, tên, định lượng. Paste vào prompt AI Studio để gen menu/POSM có đủ SKU.

🎨 Brand Tokens

Màu sắc, font, spacing theo brand Magnolia. Format chuẩn design tokens (W3C).

📊 Top outlet/month

Top 50 outlet theo doanh thu tháng này — dùng làm priority cho POSM design.

📦 Kho vận

—

🏢 Kho 📅 Thời gian

Đang khởi tạo...

📥

Nhập kho từ NM

Form tạo phiếu nhập từ nhà máy — multi-line, validate SKU, auto-fill giá vốn.

Phase 2

🔄

Chuyển kho

Workflow 2 bước: tạo lệnh → kho nhận confirm → trigger tự sinh 2 phiếu.

Phase 2

🔁

Đổi bia

Workflow status machine: dispatched → inspected → returned → completed.

Phase 3

🧪

Bia mẫu

Sales request → admin approve → tự xuất kho theo giá vốn.

Phase 3

🛢️

Vỏ KEG tracking

Theo dõi vỏ keg đang ở mỗi outlet, lần giao/thu cuối.

Phase 3

Đang khởi tạo...

📋

Lịch sử giao dịch

Bảng đầy đủ + filter theo loại / kho / ngày / MISA synced. Export Excel.

Phase 2

🔗

MISA Sync

Trạng thái push chứng từ kho lên MISA — retry, reconcile, manual trigger.

Phase 3

⚙️

Danh mục kho

CRUD kho + giá vốn SP + map MISA codes. Import từ Excel.

Phase 3

➕ Thêm outlet C.A

👥 Quản lý user

Thêm user mới

🔑 Đổi mật khẩu

🌟 DASHBOARD — Tháng X/YYYY

📈 So sánh theo miền

Doanh số theo miền — Target vs Actual

📅 Xu hướng tháng

Doanh số hàng ngày trong tháng

Hoạt động ghé thăm theo ngày — từng salesman

🏆 Top outlets

Top 10 outlets theo doanh số (kỳ này) 📋 Xem tất cả outlet

📊 Tỉ trọng sales trong Top 10

🏷️ Tỉ trọng SP theo format trong Top 10

🔻 Phễu bán hàng tổng

PHỄU C.A (New Outlets) — Raw Lead → Won

PHỄU C.S (Current Outlets) — New Opening → Reactive

📊 SUMMARY — Tháng X/YYYY

📊 Biểu đồ tổng hợp

1. DOANH SỐ — Target vs Actual

2.A TIẾN ĐỘ TUẦN — C.A (Won)

2.B TIẾN ĐỘ TUẦN — C.S

⏱ TIẾN ĐỘ THỜI GIAN vs DOANH SỐ

📋 Bảng chi tiết theo team & salesman

🎯 TARGET — Tháng

👥 TEAM MIỀN NAM

👤 Phễu theo team & cá nhân

🆕 PHỄU C.A — Tổng hợp Target · Actual · Plan

🔄 PHỄU C.S — Tổng hợp Target · Actual · Plan

📋 Chi tiết outlets phễu C.A

📋 Chi tiết outlets phễu C.S

📅 Plan/Next step C.A (từ MISA)

📅 Plan/Next step C.S (từ MISA)

👥 TEAM BẮC + TRUNG

📍 Phễu theo Miền

👤 Phễu theo team & cá nhân

🆕 PHỄU C.A — Tổng hợp Target · Actual · Plan

🔄 PHỄU C.S — Tổng hợp Target · Actual · Plan

📋 Chi tiết outlets phễu C.A

📋 Chi tiết outlets phễu C.S

📅 Plan/Next step C.A (từ MISA)

📅 Plan/Next step C.S (từ MISA)

📋 GAP — Outlet còn thiếu để đạt target

📅 PLAN — C.A + C.S outlet plan

📊 Tổng C.A + C.S — tháng hiện tại

🆕 Plan C.A — outlet mới sales đang push

📆 Bảng plan tháng hiện tại

🗓️ Bảng plan tháng tiếp theo

🔄 Plan C.S — outlets hiện hữu (target + actual)

📆 Bảng plan tháng hiện tại

🗓️ Bảng plan tháng tiếp theo

🗓️ WORKING SCHEDULE — Kế hoạch đi tuyến

🔐 Đăng nhập MISA

➕ Thêm visit

📋 Chi tiết visit

Tải bằng chứng

Commercial Plan

🎁 Incentive

🎨 Design Tools

1️⃣ Workspace này có gì?

📖 Hướng dẫn

🤖 AI Studio

📦 Asset Library

📋 Tasks

📤 Export Data

2️⃣ Dùng tab 🤖 AI Studio — design bằng Claude Max subscription

💻 Setup Claude Max bridge KHUYÊN DÙNG

✨ Generate design

🌐 Fallback: Anthropic API

📥 Save Asset

3️⃣ Tab Asset Library — lưu file design lên cloud

🔄 Auto-sync folder (KHUYÊN DÙNG)

📤 Upload tay

🔍 Tìm + lọc

✏️ Sửa info / xoá

4️⃣ Tab Tasks — kanban quản lý task design

➕ Tạo task mới

🚦 Chuyển trạng thái

💬 Comment + feedback

🔍 Lọc

Top 10 outlets theo doanh số (kỳ này)