ทำความรู้จัก Interface

หน้าจอของ Main WMS แบ่งออกเป็น 3 ส่วนหลัก ที่จะเหมือนกันในทุกหน้า:

1. Sidebar (เมนูด้านซ้าย)

เมนูหลักทั้งหมดของระบบจะอยู่ที่ด้านซ้ายมือ จัดกลุ่มตามฟังก์ชันงาน:

• Dashboard — ภาพรวมและสถิติ
• Master Data — สินค้า, Locations, Warehouses, UOMs, Partners
• Inbound — ASN, GRN, Putaway
• Outbound — Orders, Waves, Pick Tasks, Shipments
• Inventory — Stock, Movements, Adjustments, Cycle Counts
• Returns — RMA
• Approvals — เอกสารรออนุมัติ
• Settings — Profile, Language, WMS Config

ย่อ/ขยาย Sidebar

กดปุ่ม ☰ มุมซ้ายบนเพื่อย่อ Sidebar ให้แสดงเฉพาะไอคอน — เพิ่มพื้นที่หน้าจอ

2. Top Bar (แถบด้านบน)

• ชื่อหน้าปัจจุบัน — ทางซ้าย
• Search — ค้นหาแบบ Global (กด Ctrl + K)
• Notifications — กระดิ่ง แจ้งเตือนงานที่รออนุมัติ / Wave ที่ assign ให้คุณ ฯลฯ
• Language Switcher — ไทย/English
• Profile Menu — รูปอวตาร → Profile, Settings, Logout

3. Main Content (พื้นที่หลัก)

พื้นที่ทำงานหลักของแต่ละหน้า ปกติประกอบด้วย:

List View (หน้ารายการ)

• Filter Bar — ค้นหาและกรองข้อมูล
• Action Bar — ปุ่ม Create, Bulk Edit, Export
• Data Table — แสดงรายการ พร้อม pagination

Detail View (หน้ารายละเอียด)

• Header — ชื่อ/รหัสเอกสาร + สถานะ
• Tabs — ข้อมูลย่อย เช่น Items, History, Attachments
• Action Buttons — Save, Submit, Approve, Cancel

ภาษาภาพ — สีและสถานะ

ระบบใช้สีเพื่อสื่อสารสถานะของเอกสาร/งานตาม convention:

สี	ความหมาย	ตัวอย่าง
🟢 เขียว	สำเร็จ / Completed	GRN ที่รับครบแล้ว
🔵 น้ำเงิน	กำลังดำเนินการ / In Progress	Pick Task ที่กำลังหยิบ
🟡 เหลือง	รออนุมัติ / Pending	Adjustment รอ Manager อนุมัติ
🔴 แดง	ผิดพลาด / Cancelled	Order ที่ถูกยกเลิก
⚪ เทา	ฉบับร่าง / Draft	ASN ที่ยังไม่ Submit

คีย์ลัด (Keyboard Shortcuts)

ลัด	ทำงาน
Ctrl + K	เปิด Global Search
Ctrl + S	บันทึก (ในหน้า Edit)
Esc	ปิด Modal / ยกเลิก
?	แสดงรายการคีย์ลัดทั้งหมด

โหมดมืด (Dark Mode)

ในหน้า Settings → Profile สามารถสลับ Light / Dark mode ตามความสบายตา

Responsive — ใช้บนมือถือได้

ระบบรองรับการใช้งานบนหน้าจอเล็ก (Tablet, Mobile):

• Sidebar จะย่อเป็นเมนู Drawer
• ตารางจะเลื่อนแนวนอนได้
• ปุ่มจะปรับขนาดให้แตะง่ายขึ้น

เหมาะสำหรับพนักงานหยิบสินค้าที่ใช้ Mobile Scanner

ขั้นตอนถัดไป

• เปลี่ยนภาษา
• แดชบอร์ด