Karlo Design System

Satu set warna, ukuran, dan komponen untuk semua aplikasi Karlo, supaya tombol, status, atau konfirmasi hapus tampil dan bekerja sama di mana pun pengguna berada. Hari ini Platform dan TMS masing-masing punya versinya sendiri, dan dua file Figma juga berbeda dari keduanya.

2 aplikasi hari ini

Platform (React) dan TMS (Svelte), dikerjakan tim yang berbeda. Aplikasi React ketiga menyusul.

Platform jadi acuan

Library komponen Platform menentukan nama dan tampilan. TMS mengikutinya.

Satu tempat

Halaman ini: token, komponen, dan aturan di satu tempat, untuk desain dan engineering.

Cara kerja

Nilai dan aturan ditulis sekali di sini. Tempat-tempat di bawah menyalinnya; tidak ada yang mengetik warna dua kali.

karlo-design

Token (warna, ukuran) dan spesifikasi komponen di halaman ini.

Desain

Library Figma

Satu file bersama. Desainer tinggal menarik Button, Dialog, StatusBadge, tidak menggambarnya ulang. Warna masuk sebagai Figma variables.

Engineer Platform

Storybook Platform

Komponen React asli milik Platform. Implementasi acuan.

Engineer TMS

Storybook TMS

Komponen Svelte milik TMS, dibangun dengan spek dan nama yang sama.

Komponen atau varian baru: disetujui desain, ditambahkan ke spek di sini, lalu Figma dan setiap aplikasi mengikuti. Tidak ada yang baru langsung masuk ke satu aplikasi saja.

Siapa mengerjakan apa

Desain

Pemilik tampilan. Mengelola library Figma, menyetujui setiap komponen atau varian baru, menjawab keputusan yang masih terbuka.

PM

Pemilik kata-kata dan alur: nama status, pesan, kapan perlu konfirmasi. Menentukan apa yang dilihat pengguna setelah sebuah aksi.

Engineer Platform

Menjaga library acuan dan Storybook-nya. Merapikan item untuk Platform saat menyentuh komponen tersebut.

Engineer TMS

Membangun library TMS sesuai spek, dengan nama dari Platform. Mengganti tombol, dialog, dan tabel buatan halaman dengan komponen library.

Kondisi hari ini

Kenapa ini perlu sekarang, dalam angka dari kode.

lebar dialog di Platform, diatur per dialog. Spek punya 3.

warna hex langsung di StatusBadge Platform saja, bukan token.

file TMS yang membuat tombol sendiri, bukan memakai Button.

sumber yang tidak sama: Storybook Platform, Figma Shipper, dan Figma Transporter.

komponen Figma yang ditandai siap untuk development.

cara berbeda TMS menampilkan error di form.

Fondasi

Bagian terkecil. Setiap komponen dibangun hanya dari ini. Nama-nama ini yang dilihat desainer di Figma dan dipakai engineer di kode.

Brand

primary#4193d0

primary-dark#2e7ab5

accent#3b9fe0

ink#0c1424

Teks

text-primary#212121

text-secondary#424242

text-subtle#757575

text-muted#9e9e9e

text-inactive#bdbdbd

Latar dan garis tepi

bg-page#f9fafb

bg-card#ffffff

bg-surface#fafafa

bg-input-filled#e8f4fd

border#eaeaea

border-input#d9d9d9

Status

status-info#2e90fa

status-success#027a48

status-warning#f79009

status-danger#d04141

status-neutral#344054

status-purple#7a5af8

Ukuran teks

Aaxs12px

Aasm13px

Aabase14px

Aamd15px

Aalg16px

Aaxl20px

Aa2xl32px

Jarak

xs4px

sm8px

md16px

lg24px

xl32px

2xl48px

Sudut membulat

sm8px

md12px

xl12px

2xl16px

lg20px

pill24px

Diurutkan berdasarkan ukuran. Nama di Platform tidak berurutan: xl sama dengan md, dan lg (20) lebih besar dari 2xl (16). Desain perlu menamai ulang skalanya sekali; sampai saat itu, pakai sm, md, lg, dan pill untuk pekerjaan baru.

Komponen

Komponen inti adalah design system-nya: ada di library Figma dan di setiap aplikasi. Pola dibangun dari komponen inti. Tabel menunjukkan posisi tiap aplikasi; bagian di bawahnya menjelaskan setiap komponen secara lengkap.

Komponen	Jenis	Platform	TMS	Figma
Aksi
Button	Inti	Sesuai spek	Berbeda	tahap 1
ActionBar (aksi menempel di bawah)	Pola	Sesuai spek ActionBar	Tidak perlu	nanti
Form
Input	Inti	Sesuai spek	Berbeda Input + DecimalInput	tahap 1
Textarea	Inti	Perlu dirapikan	Belum ada	tahap 2
Select	Inti	Perlu dirapikan	Berbeda	tahap 1
Combobox (select dengan pencarian)	Inti	Perlu dirapikan Combobox	Belum ada	tahap 2
Checkbox	Inti	Sesuai spek	Belum ada	tahap 1
RadioGroup	Inti	Perlu dirapikan	Belum ada	tahap 1
Switch	Inti	Sesuai spek	Gabungkan Toggle	tahap 1
Field (label, bantuan, error)	Pola	Berbeda Label	Sesuai spek Field	tahap 1
FileUploadCard	Pola	Sesuai spek	Gabungkan FileField + FileUpload	tahap 2
ChipInput	Pola	Perlu dirapikan	Tidak perlu	nanti
Umpan balik
BannerToast	Inti	Berbeda	Berbeda fungsi toast()	tahap 1
StatusBanner (peringatan di halaman)	Inti	Perlu dirapikan StatusBanner	Belum ada	tahap 1
Spinner	Inti	Sesuai spek	Berbeda	tahap 2
EmptyState	Inti	Belum ada	Sesuai spek	tahap 2
Tooltip	Inti	Sesuai spek	Belum ada	tahap 2
Lapisan (dialog, panel)
Dialog	Inti	Berbeda	Berbeda Modal	tahap 1
ConfirmDialog	Pola	Perlu dirapikan DocumentConfirmDialog	Belum ada	tahap 1
Sheet (panel samping)	Inti	Berbeda Sheet	Berbeda DispatchPanel, AllowancePanel	tahap 2
Navigasi
Tabs	Inti	Sesuai spek	Gabungkan Tabs + SegmentedControl	tahap 1
FilterTabs (filter status dengan jumlah)	Pola	Perlu dirapikan FilterTabs	Gabungkan PillTab	tahap 1
Breadcrumb	Inti	Sesuai spek	Belum ada	tahap 2
Daftar infinite scroll	Pola	Sesuai spek usePaginatedList (hook)	Berbeda pager di DataTable	nanti
Stepper	Pola	Belum ada	Berbeda	tahap 2
App shell (top bar, sidebar)	Inti	Berbeda (di luar library)	Berbeda (di luar library)	tahap 1
Tampilan data
Table	Inti	Perlu dirapikan	Berbeda DataTable + RowActions	tahap 1
StatusBadge	Inti	Perlu dirapikan	Berbeda	tahap 1
Avatar	Inti	Perlu dirapikan	Berbeda	tahap 2
Card	Inti	Belum ada	Sesuai spek	tahap 2
StatCard	Pola	Sesuai spek	Berbeda	nanti
Timeline	Pola	Perlu dirapikan	Tidak perlu	nanti
Accordion	Inti	Sesuai spek	Tidak perlu	nanti
FilterPanel	Pola	Tidak perlu	Sesuai spek	nanti
Lightbox, PhotoGrid, Carousel	Pola	Perlu dirapikan	Tidak perlu	nanti
Tata letak
PageHeader	Pola	Belum ada	Sesuai spek	tahap 1
Separator	Inti	Sesuai spek	Tidak perlu

Bukan bagian design system: bagian milik satu area produk. Boleh tetap di Storybook aplikasinya, tapi dibangun dari komponen di atas dan tidak ada di library Figma.

FormGrid: TMS FormGrid
FadeScrollArea: Platform FadeScrollArea
CountdownBadge, TimerBar (SLA): Platform CountdownBadge, TimerBar
Bagian Spot Order: Platform DocumentCard, DriverCard, FleetCard, NegotiationTimeline, OfferInput
Bagian fitur TMS: TMS AgreementVersions, MapView, TruckMatrix

Setiap komponen secara lengkap

Gambar di sini statis, seperti story 'All Variants' di Storybook. Untuk mencoba props secara langsung, buka Storybook tiap aplikasi: di sana kodenya asli. Storybook Platform ditautkan di setiap bagian.

Button

Storybook Platform

Menjalankan aksi. Satu tombol primary per area; sisanya secondary, outline, atau ghost.

	sm	md	lg	icon
primary	Simpan	Simpan	Simpan	+
secondary	Simpan	Simpan	Simpan	+
outline	Simpan	Simpan	Simpan	+
ghost	Simpan	Simpan	Simpan	+
danger	Simpan	Simpan	Simpan	+

State. Saat loading, lebar tombol tetap.

	default	hover	focus	disabled	loading
primary	Simpan	Simpan	Simpan	Simpan	Simpan
outline	Simpan	Simpan	Simpan	Simpan	Simpan
danger	Simpan	Simpan	Simpan	Simpan	Simpan

Prop (nama di Platform)	Nilai	Default	Catatan
`variant`	primary, secondary, outline, ghost, danger	primary	danger hanya untuk aksi yang menghapus atau tidak bisa dibatalkan.
`size`	sm, md, lg, icon	md	sm di tabel dan toolbar padat, lg untuk form lebar penuh ala mobile. icon = persegi, hanya ikon, wajib aria-label.
`disabled`	boolean	false	Opasitas 60%, tanpa hover.
`asChild`	boolean	false	Dirender sebagai link (react-router Link) dengan gaya tombol.
`type`	button, submit, reset	button

Lakukan

Label berupa kata kerja dalam bahasa Indonesia: 'Simpan', 'Tambah Truk', bukan 'OK'.
Bentuk pill (bulat penuh) di semua ukuran.
Di footer dialog: batal pakai outline, konfirmasi pakai primary atau danger. Urutan: lihat Dialog.
Loading: lebar tetap, Spinner menggantikan label, tombol dinonaktifkan.

Jangan

Jangan menambah warna lewat className. Tampilan baru = varian baru, disetujui desain.
Jangan memakai <button> mentah dengan gaya sendiri di halaman.

Perubahan di TMS

Hapus varian cta dan ctaFilled (sama dengan outline dan primary).
Tambah secondary, ukuran sm, md, lg, icon, dan loading.
Ganti <button> mentah di 65 file.

Catatan token: danger memakai #D04141 (teks putih 4.6:1). Button Platform merender bg-danger, yaitu #EF5350 (3.3:1, terlalu rendah untuk teks). Platform sebaiknya pindah ke token danger-strong.

Loading belum ada di Button Platform. Dicantumkan di sini supaya TMS dan Platform membuatnya dengan cara yang sama.

StatusBadge

Storybook Platform

Menampilkan status sebuah data (order, dokumen, truk). Hanya teks, tidak bisa diklik.

Daftar status lengkap beserta labelnya menunggu topik review 4 (nama status). Label di bawah hanya contoh.

Draftneutral

Dalam Perjalananinfo

Selesaisuccess

Menunggu Konfirmasiwarning

Dibatalkandanger

Negosiasipurple

Prop (nama di Platform)	Nilai	Default	Catatan
`variant`	neutral, info, success, warning, danger, purple	neutral	Warna nadanya. Status mana dapat warna apa ditentukan oleh satu daftar bersama.
`children`	teks		Label status dalam bahasa Indonesia.

Lakukan

Warna punya arti: success = selesai, warning = menunggu pihak lain, danger = gagal atau batal, info = sedang berjalan, neutral = draf atau tidak aktif, purple = negosiasi.
Satu label per kode status, sama di semua aplikasi.
Pill, bergaris tepi, 13px medium, satu baris.

Jangan

Jangan memilih warna per halaman. Daftar status yang menentukan.
Jangan memakai warna hex langsung (StatusBadge Platform punya 18; pakai token badge).

Perubahan di TMS

Tetap menerima kode status, tapi warna dan label diambil dari daftar status bersama.
Pakai token badge.

Input

Storybook Platform

Isian teks atau angka satu baris. Selalu di dalam Field yang punya label.

Kapan error muncul dan hilang menunggu topik review 2 (error di form).

	default	filled	focus	error	disabled	suffix
sm	Contoh: 1200	1200	1200	abc	1200	1200Kg
md	Contoh: 1200	1200	1200	abc	1200	1200Kg
lg	Contoh: 1200	1200	1200	abc	1200	1200Kg

Prop (nama di Platform)	Nilai	Default	Catatan
`variant`	default, error	default	error membuat garis tepi merah. Pesannya ditampilkan oleh Field.
`size`	sm, md, lg	md	Tinggi sama dengan Button: 32, 40, 48.
`prefix / suffix`	teks atau node		Pill biru sebelum atau sesudah isian, untuk satuan: 'Rp', 'Kg'.
`disabled`	boolean	false

Lakukan

Bentuk pill, sama dengan Button, supaya sejajar dalam satu baris.
Satuan ditaruh di prefix atau suffix, bukan di placeholder.
Placeholder adalah contoh, bukan label.

Jangan

Jangan hanya menaruh label di placeholder.
Jangan menampilkan teks merah di bawah input tanpa varian error.

Perubahan di TMS

Tambah varian error, ukuran, prefix, dan suffix.
DecimalInput tetap ada, dibangun di atas Input.

Switch

Storybook Platform

Menyalakan atau mematikan pengaturan saat itu juga, tanpa tombol simpan.

mati

menyala

disabled mati

disabled menyala

AktifLabeledSwitch

Prop (nama di Platform)	Nilai	Default	Catatan
`checked`	boolean	false
`onCheckedChange`	function
`disabled`	boolean	false
`LabeledSwitch`	label		Komponen terpisah: Switch dengan label, hijau saat menyala.

Lakukan

Pakai jika perubahan langsung berlaku. Jika pengguna harus menekan Simpan setelahnya, pakai Checkbox.
Tampilkan toast atau hasil di tempat jika perubahan disimpan ke server.

Jangan

Jangan memakai Switch di dalam form yang punya tombol Simpan.

Perubahan di TMS

Ganti nama Toggle menjadi Switch, ukuran sama (40 x 25).

Tabs

Storybook Platform

Berpindah antar tampilan di halaman yang sama. Tab aktif berupa blok biru dengan sudut atas membulat, di atas satu garis bawah bersama.

DetailDokumenRiwayatTagihan

Tab keempat menunjukkan state disabled.

Prop (nama di Platform)	Nilai	Default	Catatan
`size`	sm, md	md	Tinggi 32 dan 34.
`value / onValueChange`	string		Radix Tabs.

Lakukan

Label tab berupa kata benda: 'Detail', 'Dokumen', 'Riwayat'.
Untuk memfilter daftar per status dengan jumlah, pakai FilterTabs, bukan Tabs.

Jangan

Jangan membuat tab garis bawah atau tab pill sendiri per halaman.

Perubahan di TMS

Gabungkan SegmentedControl ke dalam Tabs.
Ganti nama PillTab menjadi FilterTabs.

Dialog

Storybook Platform

Tugas atau pertanyaan yang fokus, tampil di atas halaman. Terdiri dari header, isi, dan footer.

Pola dan kata-kata konfirmasi untuk hapus, nonaktifkan, dan batalkan menunggu topik review 3. Urutan tombol di atas adalah usulan.

sm 448pxKonfirmasi, pertanyaan singkat

md 672pxForm (default)

lg 1024pxTabel, dua kolom

Tiga lebar dialog, sesuai skala.

md, form

Tambah Truk×

Nomor Polisi

B 1234 XYZ

Kapasitas

0Kg

BatalSimpan

sm, konfirmasi hapus

Hapus Dokumen?×

Dokumen yang dihapus tidak dapat dikembalikan.

BatalYa, Hapus

Urutan footer sama di keduanya: batal di kiri, konfirmasi di kanan.

Prop (nama di Platform)	Nilai	Default	Catatan
`DialogContent className`	lebar maksimum	md (672)	Lebar hanya dari tiga ukuran: sm 448, md 672, lg 1024.
`DialogHeader size`	compact, comfortable	compact	Padding header.
`DialogHeader align`	start, center	start	center untuk konfirmasi singkat dengan ikon.
`DialogHeader icon, title, subtitle`	node
`showCloseButton`	boolean	true	Sembunyikan hanya jika pengguna wajib memilih.

Lakukan

sm: konfirmasi dan pertanyaan singkat. md: form. lg: tabel atau isi dua kolom.
Tombol footer: batal (outline) lalu konfirmasi (primary atau danger), konfirmasi di kanan, sama di semua dialog.
Isi bisa di-scroll di dalam dialog; header dan footer tetap.

Jangan

Jangan memakai lebar di luar tiga ukuran (Platform kini punya 10, diatur lewat className).
Jangan menukar urutan tombol per dialog.

Perubahan di TMS

Ganti nama Modal menjadi Dialog dengan ukuran sm, md, lg (sekarang md dan lg tampil dengan lebar yang sama).

Table

Storybook Platform

Menampilkan daftar data. Daftar memuat data berikutnya saat di-scroll (lihat daftar infinite scroll); tidak ada pager nomor halaman.

No. Order	Asal	Tujuan	Harga (Rp)	Status
ORM261029690002	Jakarta	Surabaya	12.500.000	Dalam Perjalanan	⋯
ORM261029080003	Bekasi	Semarang	8.200.000	Dibatalkan	⋯
ORM261029260006	Bandung	Cirebon	3.750.000	Selesai	⋯
Memuat data...

Baris terakhir: memuat data berikutnya saat pengguna scroll.

Prop (nama di Platform)	Nilai	Default	Catatan
`header`	array kolom		Label, perataan, bisa diurutkan.
`data`	array baris
`onClickRow`	function		Klik baris membuka detail.
`handleSort`	function		Ikon urut di header.
`selectableRows, handleSelect`	boolean, function	false	Kolom checkbox.
`row border`	DANGER, WARNING, SUCCESS		Garis tepi berwarna pada baris, untuk SLA atau masalah.

Lakukan

Header 12px semibold dengan latar abu muda; sel 12px, padding 16 x 12.
Angka dan uang rata kanan.
Status memakai StatusBadge, aksi berupa tombol ikon di ujung baris.
Di akhir daftar: baris loading saat memuat, lalu tidak ada apa-apa (tidak perlu teks 'habis').

Jangan

Jangan memakai #FAFAFA langsung (Table Platform punya 8 warna hex; pakai token tabel).

Perubahan di TMS

Hapus pager Prev/Next DataTable yang tidak dipakai; muat data saat di-scroll.
Pakai token tabel untuk warna header dan baris.

Field

Usulan dari TMS

Membungkus satu kontrol form beserta label, teks bantuan, dan pesan error, supaya semua form punya jarak dan posisi error yang sama.

Kapan error muncul (saat keluar dari isian atau saat submit) dan kapan hilang menunggu topik review 2. Platform belum punya Field: ini komponen TMS, diusulkan untuk keduanya.

Nomor Polisi *

B 1234 XYZ

Sesuai STNK.

Nomor Polisi *

Nomor polisi wajib diisi.

Kapasitas

12000Kg

Berat maksimal muatan.

Normal dengan teks bantuan, wajib diisi dengan error, dan dengan suffix satuan.

Prop (nama di Platform)	Nilai	Default	Catatan
`label`	teks		13px medium, di atas kontrol (Label Platform).
`required`	boolean	false	Tanda * merah setelah label.
`help`	teks		Baris abu-abu di bawah kontrol.
`error`	teks		Baris merah di bawah kontrol, menggantikan help. Kontrolnya memakai varian error.
`wide`	boolean	false	Melebar dua kolom di form dua kolom.

Lakukan

Setiap Input, Select, Textarea, dan unggahan berada di dalam Field.
Teks error menyebut apa yang harus diperbaiki: 'Nomor polisi wajib diisi', bukan 'Invalid'.
Help dan error memakai tempat yang sama di bawah kontrol, supaya tata letak tidak bergeser.

Jangan

Jangan menaruh label di samping kontrol di satu form dan di atas di form lain.
Jangan menampilkan error hanya lewat toast.

Perubahan di Platform

Tambah Field (membungkus Label) saat form berikutnya dibuat atau diubah.

Perubahan di TMS

Sudah punya Field. Sesuaikan nama props setelah Platform mengadopsinya.

Select

Storybook Platform

Memilih satu nilai dari daftar tetap. Untuk daftar panjang atau perlu pencarian, pakai Combobox.

Pilih jenis trukplaceholder

Wingboxterpilih

Pilih jenis truktidak valid

Wingboxterbuka

Platform hari ini: sudut 8px. Input di sebelahnya berbentuk pill (lihat catatan).

1200Wingbox

Prop (nama di Platform)	Nilai	Default	Catatan
`SelectTrigger invalid`	boolean	false	Garis tepi merah, sama seperti error Input.
`SelectContent position`	popper, item-aligned	popper	Daftar terbuka di bawah pemicu dengan lebar yang sama.
`SelectItem`	value, teks

Lakukan

Placeholder menyebut apa yang dipilih: 'Pilih jenis truk'.
Di dalam Field, sama seperti Input.

Jangan

Jangan memakai <select> bawaan dengan gaya sendiri.

Perubahan di TMS

Ganti select bawaan dengan select ala Radix (bits-ui) yang sesuai Platform.

Bentuk tidak seragam di Platform: Select berupa persegi membulat (8px, teks 12px semibold) sedangkan Input berbentuk pill (14px regular). Dalam satu baris form keduanya tidak sejajar. Desain perlu memilih satu bentuk untuk keduanya; gambar di atas menunjukkan Platform apa adanya.

Checkbox

Storybook Platform

Menyalakan atau mematikan opsi di form yang disimpan belakangan, atau memilih baris di tabel.

Tidak dicentang✓DicentangSebagianDisabled✓Disabled dicentangTidak valid

Prop (nama di Platform)	Nilai	Default	Catatan
`checked`	true, false, 'indeterminate'	false	Indeterminate untuk 'pilih semua' saat sebagian baris terpilih.
`onCheckedChange`	function
`disabled`	boolean	false
`aria-invalid`	boolean		Garis tepi merah.

Lakukan

Persegi 16px, sudut 4px, biru saat dicentang.
Labelnya juga bisa diklik.

Jangan

Jangan memakai Checkbox untuk pengaturan yang langsung tersimpan (pakai Switch).

Perubahan di TMS

Tambah Checkbox; ganti input checkbox mentah di 16 file.

RadioGroup

Storybook Platform

Memilih satu dari 2 sampai 5 opsi yang perlu terlihat sekaligus.

Tarif per tripTarif per kgTarif per km

Prop (nama di Platform)	Nilai	Default	Catatan
`RadioGroup value / onValueChange`	string
`RadioGroupItem value`	string

Lakukan

Daftar vertikal dengan jarak 12px.
Lebih dari 5 opsi: pakai Select.

Jangan

Jangan memakai garis tepi #D0D5DD langsung (pakai token border input).

Perubahan di TMS

Tambah RadioGroup; ganti input radio mentah di 3 file.

Titik terpilih memakai warna accent, bukan primary. Perlu dikonfirmasi desain (Checkbox memakai primary).

BannerToast

Storybook Platform

Memberi tahu pengguna hasil sebuah aksi (tersimpan, terhapus, gagal). Muncul di tengah atas dan hilang setelah 8 detik.

Toast, banner, atau popup, dan apakah ada aksi yang boleh tanpa pesan, adalah topik review 1.

Tengah atas, lebar 770px (90% di layar kecil), hilang setelah 8 detik. Judul saja, atau judul dan detail.

Prop (nama di Platform)	Nilai	Default	Catatan
`showBanner(tone, title, detail)`	function		Dari hook useBannerToast.
`tone`	success, danger, error, warning
`align`	center, left	center

Lakukan

Setelah setiap aksi selesai: berhasil atau gagal, tidak pernah diam.
Judul menyebut objeknya: 'Truk B 9003 KRL dinonaktifkan'. Penjelasan lebih panjang di baris detail.
Dibangun di atas StatusBanner, jadi warnanya sama.

Jangan

Jangan memakai popup SweetAlert untuk berhasil atau gagal di layar baru.
Jangan memakai toast untuk instruksi atau 'segera hadir'.

Perubahan di TMS

Ganti toast() gelap di bawah dengan BannerToast setelah topik 1 diputuskan.
Tambahkan pesan pada penyimpanan yang hari ini tidak menampilkan apa pun.

StatusBanner

Storybook Platform

Pesan yang tetap tampil selama suatu keadaan berlaku: dokumen ditolak, langkah yang belum selesai, peringatan tentang order.

Dokumen SIM ditolak. Unggah ulang sebelum 30 Okt.danger

Nada 'error': artinya sama dengan danger, tampilannya beda.error

Semua dokumen sudah diverifikasi.success

Order ini menunggu konfirmasi transporter.Lihat orderwarning

Lengkapi profil perusahaan untuk mulai menerima order.warningSoft

Prop (nama di Platform)	Nilai	Default	Catatan
`tone`	danger, error, success, warning, warningSoft	danger
`icon`	node
`trailing`	node		Aksi di kanan, misalnya 'Lihat' atau 'Batal'.

Lakukan

Tepat di atas area yang dibahas.
Tetap tampil sampai keadaannya berubah; tanpa tombol tutup kecuali hanya informasi.

Jangan

Jangan menggambar kotak berwarna sendiri per halaman.

Perubahan di TMS

Tambah StatusBanner; ganti kotak berwarna buatan sendiri.

Platform punya 5 nada untuk 4 arti: danger dan error tampil berbeda tapi artinya sama. Usulan: pertahankan danger, hapus error; putuskan apakah warningSoft tetap ada.

ConfirmDialog

Usulan API, pengganti DocumentConfirmDialogStorybook Platform

Meminta pengguna mengonfirmasi aksi yang sulit atau tidak bisa dibatalkan: hapus, nonaktifkan, batalkan order.

Pola dan kata-kata untuk hapus, nonaktifkan, dan batalkan adalah topik review 3.

Ubah dokumen sekarang?

Data dokumen yang tersimpan akan diperbarui.

BatalYa, Ubah

🗑

Hapus dokumen SIM?

Dokumen yang dihapus tidak dapat dikembalikan.

BatalYa, Hapus

Tata letak dan urutan tombol sama untuk kedua nada.

Prop (nama di Platform)	Nilai	Catatan
`tone`	warning, danger	danger untuk hapus dan batalkan, warning untuk perubahan yang menimpa data.
`title`	teks	Menyebut objeknya: 'Hapus dokumen SIM?'
`body`	teks	Apa yang akan terjadi dan apakah bisa dibatalkan.
`confirmLabel`	teks	Kata kerja dan objek: 'Ya, Hapus'.
`onConfirm, onCancel`	function

Lakukan

Dialog ukuran sm, ikon dan teks di tengah.
Batal (outline) di kiri, konfirmasi di kanan, untuk semua nada.
Setelah dikonfirmasi: BannerToast dengan hasilnya.

Jangan

Jangan meminta konfirmasi untuk aksi yang mudah dibatalkan (menyalakan kembali).
Jangan mengubah urutan tombol per nada (DocumentConfirmDialog melakukan ini sekarang).

Perubahan di Platform

Ubah DocumentConfirmDialog menjadi ConfirmDialog dengan teks dari luar; ganti #FFBB10 langsung.

Perubahan di TMS

Tambah ConfirmDialog; pakai di setiap hapus, nonaktifkan, dan batalkan (sebagian belum ada konfirmasi).

FilterTabs

Storybook Platform

Memfilter daftar per status, dengan jumlah per status. Diletakkan di atas tabel.

Semua (24)Menunggu Konfirmasi (5)Dalam Perjalanan (12)Selesai (7)Dibatalkan (0)

Prop (nama di Platform)	Nilai	Catatan
`tabs`	{ key, label, count }[]	count opsional.
`activeKey`	string
`onChange`	function

Lakukan

12px semibold; yang aktif teks gelap dengan garis biru 5px di bawahnya.
Bisa di-scroll ke samping di layar kecil (memudar di tepi).
Label memakai nama status dari daftar bersama.

Jangan

Jangan memakai #909090 langsung untuk teks tidak aktif (pakai token).

Perubahan di TMS

Ganti nama PillTab menjadi FilterTabs dan samakan tampilannya.

PageHeader

Usulan dari TMS

Baris judul di setiap halaman: ikon, judul, subjudul opsional, dan aksi halaman di kanan.

Platform belum punya PageHeader; judul halamannya datang dari shell (huruf kapital). Mana yang dipakai adalah topik review tentang judul halaman. Ini komponen TMS sebagai usulan.

▦

Daftar TrukKelola armada dan dokumen truk

ExportTambah Truk

Prop (nama di Platform)	Nilai	Catatan
`title`	teks
`icon`	komponen	Kotak biru muda 44px.
`subtitle`	teks
`actions`	node	Tombol di kanan, primary paling akhir.

Lakukan

Setiap halaman punya satu, supaya pengguna selalu tahu posisinya.
Maksimal satu tombol primary di aksi.

Jangan

Jangan menulis judul sendiri per halaman dengan ukuran sendiri.

Perubahan di Platform

Putuskan bersama desain apakah halaman memakai PageHeader atau tetap judul dari shell.

Perubahan di TMS

Sudah punya PageHeader.

App shell

Bingkai di sekeliling setiap halaman: top bar navy, sidebar putih dengan menu ikon, area halaman.

karloGiga Transport · Admin

Orders / Spot Order

Diperkecil. Top bar 64px navy, sidebar 240px, item aktif pill biru muda, judul halaman huruf kapital.

Prop (nama di Platform)	Nilai	Catatan
`top bar`	64px, navy
`sidebar`	240px, diciutkan 80px
`nav item`	pill, kotak ikon 30px	Hover dan aktif: biru muda.
`page title`	20px semibold huruf kapital	Level induk abu-abu lebih muda.

Lakukan

Bingkai sama di setiap aplikasi, supaya pengguna yang berpindah aplikasi tetap merasa familiar.
Grup sidebar terbuka di tempat; halaman aktif selalu ditandai.

Jangan

Jangan membuat navigasi kedua di dalam halaman.

Perubahan di TMS

Terapkan token shell: warna dan tinggi top bar, bentuk dan warna aktif item sidebar.

Shell ada di layout masing-masing aplikasi, bukan di library komponen. Nilainya di tokens/component/shell.json, diukur dari Platform.

Langkah berikutnya

Apa yang dikerjakan setiap kelompok, berurutan. Tidak ada yang saling menghambat.

Keputusan terbuka untuk PM dan desain

Empat pertanyaan yang hanya bisa dijawab PM dan desain, karena Platform sendiri punya lebih dari satu jawaban hari ini. Pertanyaannya ada di halaman review, lengkap dengan screenshot dan tempat menjawab.

Umpan balik setelah aksi

Toast, banner, atau popup, dan apakah ada yang boleh tanpa pesan?

Lihat spek terkait

Error di form

Bagaimana tampilnya, dan kapan muncul serta hilang.

Lihat spek terkait

Hapus, nonaktifkan, batalkan

Pola konfirmasi dan kata-katanya.

Lihat spek terkait

Nama status

Satu daftar status, label, dan warna untuk semua aplikasi.

Lihat spek terkait

Jawab di halaman review

Library Figma, berurutan

Tahap 1: paling sering dipakai. Mulai dari sini.

Button
Input
Select
Checkbox
RadioGroup
Switch
Field (label, bantuan, error)
BannerToast
StatusBanner (peringatan di halaman)
Dialog
ConfirmDialog
Tabs
FilterTabs (filter status dengan jumlah)
App shell (top bar, sidebar)
Table
StatusBadge
PageHeader

Tahap 2: umum, setelah tahap 1.

Textarea
Combobox (select dengan pencarian)
FileUploadCard
Spinner
EmptyState
Tooltip
Sheet (panel samping)
Breadcrumb
Stepper
Avatar
Card

Saat desainer membutuhkannya.

ChipInput
Daftar infinite scroll
StatCard
Timeline
Accordion
ActionBar (aksi menempel di bawah)
FilterPanel
Lightbox, PhotoGrid, Carousel

Perapian per pemilik

Desain dan spek (8)

Input: putuskan suffix satuan (Figma punya isian 'Kg').
Field (label, bantuan, error): Field (label, bantuan, error) dari TMS, dinamai ala Platform. Bentuk akhirnya menunggu topik review 2 (error di form).
Dialog: sepakati 3 ukuran (topik review tentang dialog).
ConfirmDialog: menunggu topik review 3 (hapus, nonaktifkan, batalkan).
Daftar infinite scroll: hapus Pagination dari file Figma (Karlo Product Design): tidak ada aplikasi yang memakai halaman bernomor.
Stepper: satu Stepper dari Progress Bar di Figma (topik review tentang stepper).
App shell (top bar, sidebar): token shell sudah ada (tokens/component/shell.json); setiap aplikasi membangun shell-nya sendiri dari token ini.
StatusBadge: daftar dan nama status (topik review 4).

Kedua aplikasi (1)

BannerToast: menunggu topik review 1 (umpan balik setelah aksi).

Engineer Platform (9)

StatusBanner (peringatan di halaman): gabungkan error ke danger, putuskan nasib warningSoft.
EmptyState: tambah EmptyState saat ada layar yang butuh (spek dari TMS).
Dialog: hentikan pengaturan lebar lewat className.
ConfirmDialog: ubah DocumentConfirmDialog menjadi ConfirmDialog dengan teks dari luar.
Table: ganti warna hex dengan token.
StatusBadge: ganti warna hex dengan token.
Card: tambah Card saat ada layar yang butuh (tokens/component/card.json).
PageHeader: tambah PageHeader saat ada layar yang butuh (spek dari TMS).
Bagian Spot Order: pindahkan ke components/SpotOrder, story tetap ada.

Engineer TMS (15)

Button: hapus cta dan ctaFilled, tambah secondary, ukuran, dan loading.
Button: ganti <button> mentah di halaman dengan Button.
Input: tambah state error dan ukuran.
Textarea: tambah Textarea.
Switch: ganti nama Toggle menjadi Switch.
FileUploadCard: hapus FileUpload yang tidak dipakai, perbaiki pengecekan tipe file.
StatusBanner (peringatan di halaman): tambah StatusBanner.
Spinner: ukuran sm, md, lg seperti Platform.
EmptyState: teks bawaan dalam bahasa Indonesia.
Dialog: ganti nama Modal menjadi Dialog, ukuran seperti Platform (memperbaiki md = lg).
Sheet (panel samping): tambah Sheet, bangun ulang panel-panelnya di atas Sheet.
Tabs: gabungkan SegmentedControl ke Tabs sebagai satu gaya.
FilterTabs (filter status dengan jumlah): ganti nama PillTab menjadi FilterTabs.
Daftar infinite scroll: hapus pager DataTable yang tidak dipakai, muat data saat di-scroll seperti Platform.
Bagian fitur TMS: pindahkan ke folder fitur masing-masing.

Dibaca dari kode sumber Platform dan TMS pada 2026-11-02. Untuk nanti: aplikasi React baru (Vite, TypeScript, Tailwind) juga akan memakai design system ini. Bisa dimulai dari komponen inti Platform yang diubah ke TypeScript. Belum ada yang perlu dilakukan sekarang.