Executive Price Fight & Sales Dashboard 🧪 Env: MOCKUP

Zero-Data Cloudflare Shell • Microsoft OAuth Ready • Build V2.0 (2026-11-11 09:39)

☁️ ยังไม่เชื่อมต่อข้อมูล

🔒 รอตรวจสอบสิทธิ์

🛡️ Zero-Data HTML Shell • Cloudflare Hosted

ระบบวิเคราะห์ Price Fight & ยอดขายองค์กร (Zero-Data Architecture)

ไฟล์ HTML นี้ถูกถอดข้อมูลธุรกิจและ Mockup Data ออกทั้งหมด 100% เพื่อความปลอดภัยสูงสุดบนโฮสต์ Cloudflare ข้อมูลจะถูกดึงเข้าสู่หน่วยความจำชั่วคราว (In-Memory RAM) เฉพาะผู้ที่ยืนยันตัวตนผ่าน Microsoft Entra ID ขององค์กรและมีสิทธิ์เข้าถึงไฟล์ Excel เท่านั้น

✅ ไม่มีข้อมูลฝังในโค้ดเว็บ: ปลอดภัยต่อการเปิดเผยโค้ดบนโฮสต์สาธารณะ
✅ สลับลิงก์ Mockup ➔ UAT ➔ Production: เปลี่ยนได้ทันทีโดยไม่ต้องแก้โค้ด HTML
✅ ตรวจสิทธิ์อัตโนมัติ: Read/Edit นำเข้าข้อมูลซิงก์กลับ OneDrive ได้ • Read-Only ดูกราฟได้อย่างเดียว
✅ รองรับ Import 2 ชีทอัจฉริยะ: คู่แข่งล้างทับใหม่ • ยอดขายข้ามวันที่ซ้ำ & เรียงวันที่มากไปน้อย

เริ่มต้นเชื่อมต่อแหล่งข้อมูล Excel

ตรวจสอบสถานะ Config ปัจจุบันก่อนลงชื่อเข้าใช้ด้วยบัญชี Microsoft องค์กร

Environment ที่ใช้งาน: Mockup (OneDrive)

Microsoft Client ID: ยังไม่ระบุ

ลิงก์ไฟล์ Excel เป้าหมาย: ยังไม่ระบุลิงก์ OneDrive/SharePoint

หรือทดสอบระบบก่อนต่อ OAuth (Pre-OAuth QA)

ระดับเวลา:

Area:

Store:

Price Fight:

📅 เลือกเดือนสำหรับดูรายวัน (ป้องกันกราฟล้น):

Sales Total CYยอดขายปีปัจจุบัน

฿ 0.0M

LY: ฿ 0.0M +0.0%

Profit & %Front Marginกำไร & มาร์จิ้นจริงเทียบ LY

0.00%

กำไร CY: ฿0M (LY: 0.0%) +0.00%

Price Fight Indexราคาเทียบคู่แข่ง (เฉลี่ย)

฿0.00

เรา: ฿0 / คู่แข่ง: ฿0 ชนะ 0%

Data Scope (In-Memory)ช่วงข้อมูลล่าสุด

0 SKUs

ยอดขาย: 0 แถว | ล่าสุด: - 0 Comp

📂 รายการสินค้า (Dynamic Hierarchy)

0/0 รายการ

กลุ่ม / คลาส / สินค้า	mk_pr	com_pr	%diff	Sales CY	%Margin

Sales Total by Period (VS. LY Calendar)

Sales Total LY

Sales Total CY

%Front Margin by Period (VS. Real LY Margin)

LY Front Margin% (Real profit_ly)

CY Front Margin%

Price Fight & Competitive Gap (mk_price vs com_price)

Competitor Price

Makro Price

1. เลือก Environment เป้าหมาย (Mockup ➔ UAT ➔ Production)

ลิงก์ไฟล์ Excel (วางปุ่ม "Copy Link" จาก OneDrive หรือ SharePoint ได้ทุกรูปแบบ):

2. ตั้งค่า Microsoft Entra ID (OAuth 2.0 PKCE) — ไม่มี Secret

Application (Client) ID (จากหน้า Overview บรรทัดบน):

Directory (Tenant) ID หรือ organizations:

Redirect URI (ต้องตรงกับ Azure Portal SPA):

ชุดสิทธิ์ Microsoft Graph API (Scopes):

📖 คู่มือตั้งค่า App Registration ใน Microsoft Azure / Entra ID (ทำครั้งเดียว 3 นาที)

ไปที่ portal.azure.com ➔ Microsoft Entra ID ➔ App registrations ➔ New registration
ตั้งชื่อ เช่น PriceFight-Dashboard และเลือก Account types: Accounts in this organizational directory only
ตรง Redirect URI เลือกแพลตฟอร์มเป็น Single-page application (SPA) แล้ววางค่า Redirect URI ด้านบน (-)
กดสร้าง แล้วคัดลอก Application (client) ID และ Directory (tenant) ID มาวางในช่องด้านบน
ในเมนู API permissions เพิ่ม Microsoft Graph (Delegated): User.Read และ Files.ReadWrite.All (หรือ Files.ReadWrite)
เสร็จแล้วกด ดาวน์โหลด config.json ด้านล่างไปวางคู่กับ index.html บน Cloudflare Pages เพื่อใช้งานถาวรโดยไม่ต้องกรอกใหม่

ชั้นที่ 1 (Web Host)

☁️

Cloudflare Pages

เก็บไฟล์ index.html เปล่า (Zero-Data Shell ~65KB) และ config.json เพื่อเปลี่ยนลิงก์ Mockup ➔ UAT ➔ Prod ได้ทันที

ชั้นที่ 2 (Auth)

🔐

Microsoft OAuth

ยืนยันตัวตนด้วยบัญชีองค์กรผ่าน MSAL.js PKCE (Token อยู่ใน Session เท่านั้น) พร้อมรองรับการเปิดผ่านมือถือจากภายนอก

ชั้นที่ 3 (Storage)

📊

OneDrive / SharePoint

Auto Share-Link Resolver แปลงลิงก์เป็น Graph API อัตโนมัติ และตรวจสิทธิ์จริงว่า Read/Edit หรือ Read-Only

ชั้นที่ 4 (RAM + DLP)

⚡

In-Memory & Sync

Read/Edit Import 2 ชีทซิงก์กลับ OneDrive ได้ • Read-Only ล็อกดาวน์โหลด คลิกขวา คัดลอก และสั่งพิมพ์

🛡️

ทำไมโครงสร้างนี้ถึงปลอดภัยระดับองค์กรเมื่อขึ้น Cloudflare?
1. Zero-Data HTML: ต่อให้บุคคลภายนอกเปิดซอร์สโค้ดหน้าเว็บบน Cloudflare ก็ไม่พบข้อมูลสินค้า ยอดขาย หรือราคาคู่แข่งแม้แต่ตัวเดียว
2. Permission-Driven Access: การเข้าถึงข้อมูลควบคุมโดยตรงที่สิทธิ์ไฟล์ใน OneDrive/SharePoint ผ่าน OAuth Token ของผู้ใช้แต่ละคน
3. Seamless Promotion: เมื่อเทสต์ Mockup ผ่าน ➔ ล้าง Mockup ใส่ข้อมูลจริงทำ UAT ➔ ย้ายขึ้น SharePoint Production แค่เปลี่ยน URL ใน config.json หรือในหน้าตั้งค่าเว็บเท่านั้น

ระบบวิเคราะห์ Price Fight & ยอดขายองค์กร (Zero-Data Architecture)

เริ่มต้นเชื่อมต่อแหล่งข้อมูล Excel

Sales Total by Period (VS. LY Calendar)

%Front Margin by Period (VS. Real LY Margin)

Price Fight & Competitive Gap (mk_price vs com_price)

⚙️ ตั้งค่าการเชื่อมต่อ OneDrive / SharePoint & สลับ Environment

📤 Import ข้อมูล 2 ชีทอัจฉริยะ & ซิงก์กลับ OneDrive/SharePoint

🗺️ สถาปัตยกรรมระบบ V2 (Zero-Data Cloudflare + Microsoft OAuth + OneDrive/SharePoint)