flowchart TB
  classDef front fill:#fef2f2,stroke:#e32321,color:#171717,rx:8,ry:8;
  classDef back fill:#171717,stroke:#f59e0b,color:#e5e5e7,rx:8,ry:8;
  classDef sys fill:#dcfce7,stroke:#00a63e,color:#171717,rx:8,ry:8;
  classDef line fill:#f5f5f7,stroke:#72757e,stroke-dasharray:5 4,color:#72757e;

  subgraph FRONT["🛍️ เบื้องหน้า · ลูกค้า (พลอย)"]
    direction LR
    F1["ดูสินค้า
ในแอป"] --> F2["เห็นสต็อกเรียลไทม์
ที่ร้านใกล้เคียง 3 สาขา"] --> F3["จอง ·
กันสินค้าไว้ 2 ชม."] --> F4["ขับรถไปร้าน"] --> F5["แตะ 'ฉันมาถึงแล้ว'
รับถึงรถ"] --> F6["รับสินค้าและจ่ายเงิน"]
  end

  LV["— — — — —  เส้นแบ่งการมองเห็น  — — — — —"]:::line

  subgraph BACK["🧑‍🏭 เบื้องหลัง · พนักงานร้าน (สมชาย)"]
    direction LR
    B1["รับงานจัดสินค้า
บนแท็บเล็ต"] --> B2["หาที่ชั้นวาง
โซน + ช่อง"] --> B3["หยิบสินค้า"] --> B4["นำไปวางที่
จุดรับถึงรถ"] --> B5["ส่งมอบและ
ยืนยันการชำระเงิน"]
  end

  subgraph SYS["⚙️ ระบบ · สต็อกและออร์เดอร์"]
    direction LR
    S1["Inventory API
อ่านสต็อกเรียลไทม์"] --> S2["กันสินค้าไว้ให้
(หมดอายุใน 2 ชม.)"] --> S3["สถานะออร์เดอร์
จองแล้ว→กำลังจัด→พร้อมรับ"] --> S4["ปล่อยการกัน /
ปิดออร์เดอร์"]
  end

  F2 -.->|ตรวจสอบสต็อก| S1
  F3 -.->|สร้างการกันสินค้า| S2
  S2 -.->|แจ้งเตือนแท็บเล็ต| B1
  B3 -.->|ตัดสต็อก / ยืนยัน| S3
  S3 -.->|แจ้งเตือน "พร้อมให้รับแล้ว"| F5
  F6 -.->|เสร็จสิ้น| S4

  class F1,F2,F3,F4,F5,F6 front;
  class B1,B2,B3,B4,B5 back;
  class S1,S2,S3,S4 sys;