Design System
Components
Every UI component extracted verbatim from the 4MAN source — exact colors, borders,
hard shadows, and interaction states. Built straight on the FM tokens.
Buttons
TpPrimaryBtnPrimary CTA — yellow, hard 4px offset shadow.
TpGhostBtnSecondary / reset — hairline border, no shadow.
FlowAdvanceButtonGreen "advance stage" pill (normally floats bottom-right).
Status & Labels
StatusPillPhase status with colored dot (PO / billing tables).
รับงาน รอเอกสาร/เงิน เตรียมทีม กำลังทำงาน ปิดงาน พักงาน รอ Boss อนุมัติ
PhaseChipSolid phase color · sizes sm / md / lg.
รับงาน กำลังทำงาน ปิดงาน
FMTagGeneral label · 6 variants.
⚡ ตอนนี้ ✓ จ่ายแล้ว ⏳ รอเงิน 👷 3 คน · 🚜 1 ⏱ ประมาณ 5 วัน ⏳ รอเก็บ
HomeStatusPillTappable status dropdown · 4 semantic colors.
RoleBadge · TpOwnerChipRole + owner identity chips.
4man Manager Office Boss 👤 ช่างเอก
HintMuted helper text under fields.
ตัวอย่างคำอธิบายช่วยเหลือใต้ช่องกรอก
Forms & Inputs
FieldFM portal field · 3px ink input + yellow icon button.
ชื่อลูกค้า*
LoginFieldIcon input · focus flips shadow black → yellow (click in).
HomeField · TpField · FilterFieldThree input scales: brutalist, soft, compact.
ชื่อ-เล่น*
MultiSelectChip multi-select with open panel (shown expanded).
AssignDropdownSingle-select assignee picker · trigger + worker-card modal.
Trigger
Open modal
เลือก 4man
คนที่งานน้อยกว่าเหมาะรับงานใหม่
Cards & Data
PhaseStrip55-tile job progress · done / active / future.
1✓
รับงาน
2✓
เก็บเงิน
3✓
เตรียม
4
ทำงาน
5
ปิดงาน
NextActionBanner"Do this now" hero · yellow + dark CTA.
⚡ ทำตอนนี้
อัปเดตวันนี้ + ถ่ายรูปหน้างาน
เมื่อวานอัปเดต 60% · ปกติคุณอัปเดตทุก 17:30
F_JobCardJob list card · header, thumb, customer, action bar.
J-2026-0142 · เริ่ม 25 พ.ค.⚡ วันนี้
08:14
บจก. ไทยซัพพลายเออร์
📍 ลาดกระบัง ซ.12
HomeItemCardRoster row · avatar, id/name, status, rate, actions.
📷
W-07สมชาย แซ่ตั้ง
ช่างปูน · ฝีมือดี
550 ฿
/ วัน
HomeStatStat tiles · 5 tonal palettes.
งานวันนี้
8
+2 จากเมื่อวาน
รอเก็บเงิน
3
142,500 ฿
เสร็จเดือนนี้
24
ตรงเวลา 92%
PhotoSlot · RowPhoto placeholder + key-value & selectable rows.
รูปหน้างาน
ค่าแรง12,000✓
ค่าวัสดุ8,500
TpPhaseStripSoft-portal phase strip · 2.5px border, no shadow.
1✓
รับงาน
2✓
เก็บเงิน
3✓
เตรียม
4
ทำงาน
5
ปิดงาน
F_DailyUpdate · Progress"อัปเดตรายวัน" — % dial (in-progress + done) with ± steppers + site-photo grid.
In progress · 65%
วันนี้ทำได้
65%
เมื่อวาน 60%
+5%
Done · 100%
✓ งานเสร็จแล้ว
100%
เมื่อวาน 85%
+15%
📷 รูปหน้างาน
2 / 4 รูป
08:14
09:30
Data & Charts
TpSectionTitleSection header with optional right slot.
งานแยกตามสถานะ
ดูทั้งหมด KPI CardBig-number metric tiles · accent per metric.
งานทั้งหมด
42
ในระบบ
มูลค่างานรวม
฿8,452,000
ทุกโครงการ
ค่าใช้จ่ายรวม
฿1,238,500
ที่บันทึก
กำลังทำงาน
7
งานหน้างาน
Bar-Chart Row · Ranked RowStatus distribution + ranked projects.
1
SM-014 · ต่อเติมโรงงาน บางพลี
฿485,000
2
SM-009 · ระบบไฟฟ้าโกดังสินค้า
฿301,200
Total Banner · List-Item RowBrutalist money summary + tappable expense row.
PortalTableDesktop PO table · black header, zebra rows, status pill, actions.
| # | PO No. | โครงการ | ผู้รับเหมา | ประเภท | วันที่ PO | ยอดเงิน (฿) | สถานะ | จัดการ |
|---|---|---|---|---|---|---|---|---|
| 1 | PO-2568-0142 | SM-014 ต่อเติมโรงงาน บางพลี | หจก. ไทยรุ่งเรือง ก่อสร้าง | งานเหล็ก | 12/05/2568 | 485,000.00 | กำลังทำงาน | |
| 2 | PO-2568-0143 | SM-015 ติดตั้งหลังคาเมทัลชีท | บจก. สิริมาตร์ เอ็นจิเนียริ่ง | งานหลังคา | 14/05/2568 | 128,500.00 | รอเอกสาร |
Navigation
TopBar · FMTopBarLight app header (T) vs brutalist header (FM).
4M
งานของคุณ
พุธ · 27 พ.ค. 2569
4M
งานของคุณ
พุธ · 27 พ.ค. 2569 · 08:14
TabBarBottom nav · active tab inverts, center is primary pill.
PortalSidebarDesktop dark rail · active highlight, badges, user chip.
Overlays
PortalToast · HomeStatusSheetDark toast + bottom-sheet status picker.
บันทึกแล้ว
เปลี่ยนสถานะ
นาย A · เอก
HomeDeleteModal · SuccessModalDestructive confirm + animated success (pop).
⚠
ลบ คนงาน?
นาย A · เอก — ประวัติงานเก่ายังอยู่
✓
สร้างงานสำเร็จ!
งานเข้าระบบเรียบร้อย
J-2026-0143
บจก. ไทยซัพพลายเออร์
F_NotifPopupNotification popover · pointer triangle, NEW tags (slide-in).
การแจ้งเตือน 3 ใหม่
NEW
⚠️
ลูกค้าขอเลื่อนเข้าหน้างาน
บจก. ไทยซัพพลายเออร์ · งาน #0142
💰
ได้รับเงินมัดจำแล้ว
งาน #0140 · 142,500 ฿
HomeEditModalCentered add/edit form · yellow header, sticky footer.
แก้ไข · คนงาน
นาย A · เอก
ชื่อ-เล่น *
ค่าแรง/วัน *
ExpenseModalFull-screen expense entry · amount hero, category grid, receipt (slide-up).
รายการใหม่
รายจ่ายหน้างาน
28 พ.ค.
จำนวนเงิน
฿
บาท
หมวด
ใบเสร็จ
Feedback & Empty States
PortalPlaceholderSoft "coming soon" empty state for desktop pages.
🛠️
รายงานค่าใช้จ่าย
หน้านี้กำลังอยู่ระหว่างการพัฒนา เร็ว ๆ นี้คุณจะดูสรุปค่าใช้จ่ายของทุกโครงการได้ที่นี่
กำลังพัฒนา Brutalist Empty StateHard dashed empty state for brutalist surfaces.
💸
ยังไม่มีรายจ่าย
กดปุ่มล่างเพื่อเพิ่มรายการแรก
Note CalloutLeft-accent note / remark box.
หมายเหตุถึง Boss
ลูกค้าเร่งงาน ขออนุมัติเริ่มหน้างานสัปดาห์นี้ ทีมช่างพร้อมแล้วครับ
Info BannerTinted status banner with leading icon (recolorable).