Design system
ทุกอย่างในหน้านี้มาจาก component จริงใน src/components/ui และสีจาก design/tokens.json
แบรนด์
“กะดี” = กะ + ดี · ตัว K คือคนสองคน หัวหน้ากับพนักงานที่ไปทางเดียวกัน (สองคน หนึ่งทีม)
ขนาดเล็กสุด 20px · เว้นที่ว่างรอบโลโก้อย่างน้อย ¼ ของความสูง
สี
สีสถานะใช้คู่ fg/bg เสมอ (ตัวอักษรบนพื้นอ่อน) ผ่าน contrast 4.5:1 ทุกคู่ · ห้ามใช้สีนอก token
แบรนด์
พื้นผิวและเส้น
ตัวอักษร
สถานะ
ตัวอักษร
3 ฟอนต์ 3 หน้าที่ ไม่ปนกัน
หัวข้อใหญ่ ตัวเลขเด่น ชื่อแบรนด์
ข้อความทั้งหมด รองรับไทย
ตัวเลข เวลา จำนวนเงิน (tabular) ใช้คลาส num
ป้ายสถานะ
ฟอร์ม
ทุกช่องต้องมี label · ข้อความ error บอกวิธีแก้ ไม่ใช่แค่บอกว่าผิด
ชื่อที่ทีมเรียก แสดงในตารางกะ
ต่ำกว่าค่าแรงขั้นต่ำของกรุงเทพฯ (฿400) ใส่ 400 ขึ้นไป
ระบบสร้างให้อัตโนมัติ
ข้อมูล
คำขอลา
ตาราง + แท็บกรอง
| พนักงาน | ประเภท | วันที่ | วัน | สถานะ |
|---|---|---|---|---|
มะลิ แคชเชียร์ · อารีย์ | ลาพักร้อน | 12–14 พ.ย. | 3 | รออนุมัติ |
ต้นข้าว ครัว · อารีย์ | ลากิจ | 8 พ.ย. | 1 | รออนุมัติ |
แผงและหน้าว่าง
รายละเอียดเปิดเป็น Drawer ด้านขวา ผู้ใช้ไม่หลุดจากรายการ
ไม่มีอะไรรออนุมัติ
หลักการ
หน้าแรกของทุกเมนูต้องตอบว่า “ตอนนี้ต้องทำอะไร” ก่อนจะโชว์กราฟ
เงินเดือน OT ค่าแรง กดดูได้ว่ามาจากชั่วโมงไหน กฎข้อไหน
เขียนแบบที่ผู้จัดการร้านพูด เช่น “สาย 14 นาที” ไม่ใช่ “late_minutes: 14”
ทุกหน้ากรองตามสาขาที่เลือกบน topbar สิทธิ์จริงตรวจที่ API