Review UI TMS dan Platform

Karlo punya dua aplikasi yang sama-sama hidup dan dikerjakan tim berbeda: Platform (karlo_platform, React) dan TMS (Karlo-Platform, SvelteKit). Komponen tidak bisa dipakai bersama karena framework-nya beda. Yang bisa disamakan: aturan dan ukurannya, dicatat di satu tempat (karlo-design).

Halaman ini membandingkan TMS dengan Platform per topik. Acuan awalnya adalah library komponen Platform yang paling baru (src/components/ui, ada di Storybook). Di topik yang Platform sendiri belum konsisten, keputusan di sini berlaku untuk dua aplikasi. Kalau salah satu tim mendesain ulang, perubahannya masuk ke karlo-design dulu, lalu kedua aplikasi mengikuti.

Isi nama Anda di atas. Jawaban tersimpan otomatis dan terlihat oleh semua orang yang membuka halaman ini.
Grup A butuh keputusan PM dan desain. Grup B cukup dikonfirmasi: TMS mengikuti komponen platform, kecuali ada catatan.
Setiap kartu punya rekomendasi. Pilih rekomendasi, pilihan lain, atau tulis catatan. Ukuran dan nama file ada di bagian Untuk engineering (tertutup).

Label di screenshot Platform: 'Platform, library' = halaman yang memakai library komponen (Spot Order, onboarding, Customer List); 'Platform, versi lama' = halaman lama tanpa library (Gudang Saya, modal Create Customer, popup SweetAlert). Keterangan ukuran di bawah screenshot ditulis dalam bahasa Inggris seperti saat diukur.

Ringkasan keputusan

Satu baris per topik, satu kolom per orang yang sudah menjawab. Klik topik untuk membuka kartunya.

Topik	Grup
1. Umpan balik setelah aksi	A
2. Error di form	A
3. Hapus, nonaktifkan, batalkan	A
4. Dialog dan panel samping	A
5. Kosong, loading, dan error	A
6. Unggah file	A
7. Bahasa, keyboard, dan layar kecil	A
8. Nama status	A
9. Aturan server di UI	A
10. Tab status di daftar	A
11. Aksi di daftar	A
12. Langkah proses (stepper)	A
13. Judul halaman	A
14. Kerangka aplikasi: top bar dan sidebar	B
15. Tombol	B
16. Tabel	B
17. Badge status	B
18. Tab	B
19. Isian form dan switch	B

Seberapa konsisten kedua aplikasi

Angka dari kode sumber kedua aplikasi (30 Oktober 2026). Library = komponen bersama; buatan sendiri = halaman yang membuat versinya sendiri.

Topik	Platform (React)	TMS (Svelte)
Umpan balik setelah aksi	BannerToast (library) dipakai di 3 file; popup SweetAlert 863 panggilan di 164 file	Satu fungsi toast() dipakai 201 kali di 32 file, plus banner hijau dan diam (tanpa pesan) di beberapa layar
Lebar dialog	Default 672px, tapi 30 dialog memakai 10 lebar berbeda	4 lebar (420, 620, 760, 1080) dan 12 file membuat dialog sendiri
Panel samping	2 versi: ui/Sheet 512px dan Sheet lama 633px (admin)	1 drawer 420px tanpa peran dialog (pembaca layar tidak tahu)
Switch	ui/Switch (Geofencing) dan switch lama di Settings	2 gaya: hijau 50x26 dan biru 40x22
Tombol	Library Button; warna tombol bahaya #EF5350 kontrasnya kurang (catatan token platform sendiri bilang #D04141)	Button dipakai 118 kali, tombol buatan sendiri 246 kali; ukuran 44 dan 46 berdampingan
Tabel	ui/Table di halaman baru; tabel lama bergradasi biru di Gudang Saya dan My Shipper	DataTable dipakai di 3 file, 51 tabel buatan sendiri; My Fleet menyalin tabel lama platform
Loading	Spinner; belum ada komponen skeleton	Spinner, 'Memuat...', 'Loading...', atau kosong

Matriks 28 layar TMS: berapa versi setiap bagian

Screen	Page title7 versionsTarget: PageHeader: 20px 600 uppercase, parent part lighter, no icon box	UI language3 versionsTarget: Bahasa Indonesia only	Table header4 versionsTarget: #FAFAFA, black, 12px 600, no uppercase, no title bar	Tabs3 versionsTarget: List: FilterTabs (5px indicator). Detail: filled tabs	Primary button2 versionsTarget: 40px (md), radius 24, 14px 500	Empty state2 versionsTarget: Title, one line of help, one action, in Indonesian	Form error7 versionsTarget: Red border + message under the field (patterns: validation)	After saving3 versionsTarget: Toast for a finished action (patterns: feedback)	Delete confirm5 versionsTarget: Dialog: question title naming the object, consequence, Batal + red verb
/t/order/kontrak	'Parent, long dash, Page'	Indonesian	gray fill, UPPERCASE	underline, 13 to 13.5px	44px, radius 20, 600	·	·	·	·
/t/order/kontrak/:id	uppercase breadcrumb (closest to spec)	Indonesian	·	underline, 12 to 12.5px	44px, radius 20, 600	·	·	no feedback	·
/t/internal-order	24px bold	both on one screen	·	·	44px, radius 20, 600	·	dark toast, first error only	dark toast	·
/t/customer-list	icon box + long dash	both on one screen	navy title bar on top	·	44px, radius 20, 600	·	submit disabled, no reason	dark toast	'Hapus X?' + 'Ya, ...' 420px
/t/fleet/truck-list	24px bold	English	blue gradient title bar	·	44px, radius 20, 600	·	·	dark toast	'Hapus X?' + 'Ya, ...' 420px
/t/profile/company	24px bold	Indonesian	·	·	·	·	dark toast, first error only	dark toast	·
/t/settings	24px bold + icon box	English	·	·	·	·	none (empty saved as ok)	green banner, also when nothing saved	·
/t/users	24px bold + icon box	English	navy title bar on top	·	44px, radius 20, 600	·	submit disabled, no reason	·	·
/t/planner	no title	both on one screen	gray fill, UPPERCASE	underline, 12 to 12.5px	·	·	dark toast, first error only	dark toast	·
/t/control-tower	no title	both on one screen	white fill, UPPERCASE	underline, 12 to 12.5px	·	·	·	·	·
/t/empty-order	24px bold	English	gray fill, UPPERCASE	underline, 13 to 13.5px	44px, radius 20, 600	·	·	·	·
/t/my-shipper	24px bold + icon box	both on one screen	gray fill, UPPERCASE	·	44px, radius 20, 600	·	pink note inside modal	dark toast	'Hapus x' + X close
/t/my-cargo	24px bold + icon box	English	gray fill, UPPERCASE	·	44px, radius 20, 600	·	nothing happens	no feedback	title 'Hapus' only, no consequence
/t/agreement	'Parent, long dash, Page'	both on one screen	gray fill, UPPERCASE	underline, 13 to 13.5px	44px, radius 20, 600	·	·	·	·
/t/transporter-list	24px bold + icon box	English	gray fill, UPPERCASE	·	·	icon + English line	·	·	·
/t/fleet/insight	20px regular	English	·	underline, 12 to 12.5px	·	·	·	·	·
/t/vehicle-group	'Parent, long dash, Page'	Indonesian	gray fill, UPPERCASE	·	44px, radius 20, 600	·	submit disabled, no reason	no feedback	'Hapus entri' 620px
/t/trip-allowance/configuration	'Parent, long dash, Page'	both on one screen	·	·	·	·	submit disabled, no reason	dark toast	'Hapus X?' + 'Ya, ...' 420px
/t/trip-allowance/driver-allowance	'Parent, long dash, Page'	both on one screen	gray fill, UPPERCASE	·	·	·	·	·	·
/t/trip-allowance/reconciliation	'Parent, long dash, Page'	both on one screen	gray fill, UPPERCASE	·	·	·	·	·	·
/t/roles	24px bold + icon box	English	navy title bar on top	underline, 13 to 13.5px	44px, radius 20, 600	·	submit disabled, no reason	no feedback	English 'Remove role'
/t/api-keys	24px bold + icon box	Indonesian	·	·	·	icon + Indonesian line	·	·	·
/t/form-config	24px bold + icon box	English	·	filled pill buttons	46px, radius 20, 600	·	raw server text	no feedback	·
/t/drivers	24px bold + icon box	English	gray fill, UPPERCASE	underline, 13 to 13.5px	44px, radius 20, 600	·	·	·	·
/t/drivers/onboarding	24px bold + icon box	both on one screen	blue gradient title bar	underline, 13 to 13.5px	44px, radius 20, 600	·	red banner at page top	·	·
/t/fleet/truck-list/create	24px bold + icon box	both on one screen	·	·	46px, radius 20, 600	·	red banner at page top	no feedback	·
/t/order/spot/:id	uppercase breadcrumb (closest to spec)	both on one screen	·	underline, 13 to 13.5px	·	·	·	·	·
/t/agreement/create	24px bold	both on one screen	·	·	44px, radius 20, 600	·	dark toast, first error only	·	·

Grup A: perlu keputusan PM dan desain

Platform sendiri punya beberapa versi untuk hal ini, jadi tidak ada acuan tunggal. Keputusan di sini berlaku untuk TMS dan platform.

Umpan balik setelah aksi

Setelah pengguna menyimpan, menghapus, atau gagal: apa yang ditampilkan?

Grup AMemutuskan: Desain, dikonsultasikan: PM

Kenapa perlu diputuskan

Platform memakai popup SweetAlert hampir di semua layar, BannerToast hanya di 3 file. TMS memakai toast gelap di bawah, banner hijau di Settings, atau tidak menampilkan apa pun (tambah truk, cargo, grup, role). Toast TMS juga dipakai untuk instruksi dan 'fitur segera hadir'.

Rekomendasi

BannerToast untuk setiap aksi yang selesai, hijau kalau berhasil dan merah kalau gagal, tidak pernah diam. Penjelasan panjang masuk ke baris detail. StatusBanner untuk keadaan halaman dan instruksi. Dialog hanya kalau pengguna harus memutuskan. Pesan error dalam bahasa biasa, tanpa kode status. SweetAlert tidak dipakai lagi.

Rekomendasi, digambar dari token

Truk B 9003 KRL dinonaktifkan

Gagal menyimpanPeriksa koneksi lalu coba lagi.

ui/BannerToast: top center, hides after 8 s. Most platform screens still use SweetAlert popups.

TMS hari ini, dari nilai yang diukur

✓ Truck B 9003 KRL sekarang Non-aktif

✓ Fitur Filter akan segera hadir

(add truck, cargo item, group, role: nothing)

Komponen dan usulan baru

Platform hari ini: 4 versi

SweetAlert (Planner assign)

Modal + toast at once (E-POD)

Delete success in red

Server error as SweetAlert with '400 :'

Kasus per kasus: TMS dan Platform berdampingan (4)

Tersimpan atau terhapus

Keduanya campur

TMS

Dark toast with checktruck, customer, warehouse add, pairing, assign, profile, toggles

Green banner at topSettings; also shown when an empty name was NOT saved

Nothingadd truck, cargo item, group, role, delete warehouse or role, Uang Sangu edit, Form Configuration

Platform

SweetAlert 'Success' Platform, versi lamaPlanner, pairing (to be removed)

Illustration dialog Platform, libraryGanti Armada

Green banner Platform, libraryPort settings

Red banner for a success Platform, libraryPort delete

Fitur belum siap

Berbeda

TMS

TMS'Fitur Filter akan segera hadir' with a SUCCESS check, toasts stack

Platform

Platform Platform, library'Filter, segera hadir' toast at the top

Pesan panjang

Hanya di TMS

TMS

TMS geofencing2-line text in a full pill (560x70)

Platform

Tidak ditemukan di Platform.

Instruksi

Hanya di TMS

TMS

TMS pairing'Pilih driver untuk dipasangkan' shown as a toast

Platform

Tidak ditemukan di Platform.

Untuk engineering: ukuran, token, dan file

Success and info feedback	Platform	TMS
Success	BannerToast (top banner, hides after 8 s) in 3 files; SweetAlert popup almost everywhere else	dark toast, green banner, or nothing
Errors	inline, plain language	same dark toast as success, with a cross
Icon	by tone	check also on 'coming soon'

Perbaikan: One feedback for every finished action, never silent: BannerToast (platform library) unless design picks otherwise; StatusBanner for page state and instructions; no SweetAlert, no toast for instructions.

Feedback after an action (BannerToast)	Token	Nilai
Width	`--banner-toast-width`	770px
Top	`--banner-toast-top`	24px
Radius	`--banner-toast-radius`	20px
Title	`--banner-toast-title-font-size`	16px
Detail	`--banner-toast-detail-font-size`	14px
Hides after	`--banner-toast-duration`	8000ms
Success	`--status-banner-success-bg`	#baeaca
Error	`--status-banner-error-bg`	#ffc9c9

After every finished action: success or error, never silent.
Short title names the object ('Truk B 9003 KRL dinonaktifkan'); a long explanation goes in the detail line (this replaces the TMS 2-line pill).
Never for instructions or 'coming soon'.
SweetAlert success and error popups are replaced over time (platform) and not copied (TMS).

Inline message (StatusBanner)	Token	Nilai
Radius	`--status-banner-radius`	20px
Padding	`--status-banner-padding-x`	30px
Text	`--status-banner-font-size`	14px
Warning	`--status-banner-warning-bg`	#fff5c9
Info (proposed)	`--status-banner-info-bg`	#eff8ff

Stays as long as the state is true, right above the area it is about.
The way out ('Batal') sits on the right (trailing).
Also for messages too long for a BannerToast.

File TMS (repo Karlo-Platform, src/)

lib/stores/ui.ts (toast(), 201 panggilan di 32 file: cukup diubah di satu tempat)
lib/pages/SettingsPage.svelte (banner 'Profile saved.')

File Platform (karlo_platform, src/)

components/ui/BannerToast
components/ui/StatusBanner
SweetAlert: 164 file

RekomendasiSesuai rekomendasi di atas.BannerToast hanya di atas dialog, toast kecil di halaman biasaLainnya

Error di form

Bagaimana form menandai isian yang salah, dan kapan tandanya hilang?

Grup AMemutuskan: Desain, dikonsultasikan: Engineering

Kenapa perlu diputuskan

Platform punya empat perilaku: border abu dengan teks merah kecil, border merah di satu isian saja, teks tanpa border, dan pola Negosiasi (border merah langsung, pesan, tombol nonaktif). Error sering tetap tampil setelah isian diperbaiki. TMS punya enam cara: toast, banner di atas yang tidak terlihat, catatan merah muda di modal, tombol nonaktif tanpa alasan, diam, dan teks error mentah dari server.

Rekomendasi

Border merah dan satu pesan di bawah isian. Dicek saat submit, lalu langsung saat mengetik; error hilang begitu isian benar. Form bertab menandai tabnya dan fokus ke error pertama.

Rekomendasi, digambar dari token

Estimasi Jadwal Muat

Pilih tanggal

Wajib diisi

Nama Warehouse

Wajib diisi

All errors at once, under each field, first one focused

TMS hari ini, dari nilai yang diukur

✕ Item's Name wajib diisi di semua baris

disabled, no reason

Platform hari ini: 4 versi

Profile: gray border, text only

Harga Layanan: border on price only

Onboarding: error stays after fix

Negosiasi: live, inline (model)

Kasus per kasus: TMS dan Platform berdampingan (3)

Isian wajib kosong

Keduanya campur

TMS

Dark toastInput Order, Profile, Agreement: one toast for the first error, field not marked

Red banner at page topAdd Truck, Driver registration: off screen when you press Confirm at the bottom

Pink note in modalWarehouse: below the fold inside the modal

Disabled submitCustomer, Group, Roles, Users: no reason shown

NothingCargo item: empty 'Add Item' does nothing

Platform

SweetAlert (legacy) Platform, versi lamaCustomer: popup on top of the modal

Red text under field Platform, libraryOnboarding profile: text only, gray border

Red text under each field Platform, libraryAdd Truck: every error at once

Model Platform, libraryNegosiasi: live red border + message

Aturan antar isian

Berbeda

TMS

TMS3-line toast squeezed into a pill

Platform

Platform Platform, librarymessage under the field

Server menolak isian

Berbeda

TMS

TMS Form Configurationraw text 'validation failed: fieldconfig: "" is not a requirement'; stays after fixing

Platform

Platform Platform, versi lamaSweetAlert with a status code (to be removed)

Untuk engineering: ukuran, token, dan file

Form errors	Platform	TMS
Where	under the field	toast, top banner, modal note, disabled button, nothing
How many	all at once	first error only
Field	red border, aria-invalid, focused	never marked or focused

Perbaikan: Red border plus one message under the field, focus the first error, clear live; disabled submit only with a visible reason; server errors in plain Indonesian.

File TMS (repo Karlo-Platform, src/)

lib/components/ui/Field.svelte
lib/components/revamp/WarehouseFormModal.svelte
lib/pages/FormConfigPage.svelte (teks error server mentah)

File Platform (karlo_platform, src/)

components/ui/Input (state danger)
components/ui/Select (pesan 10px)

RekomendasiSesuai rekomendasi di atas.Pesan saja, hilang saat submit berikutnyaLainnya

Hapus, nonaktifkan, batalkan

Bagaimana kita meminta konfirmasi sebelum menghapus, menonaktifkan, membatalkan, atau menolak?

Grup AMemutuskan: Desain, dikonsultasikan: PM

Kenapa perlu diputuskan

Platform: banner di atas halaman, dialog dengan tombol bahaya di kiri, konfirmasi biru di kanan, atau tanpa konfirmasi (Tolak E-POD, geofencing). TMS punya 5 versi dialog hapus ('Hapus Truck?', 'Hapus warehouse', 'Hapus', 'Hapus entri', 'Remove role'), dan setelah hapus kadang ada toast, kadang tidak. Order Kontrak di TMS tidak bisa dibatalkan.

Rekomendasi

Selalu dialog. Judul berupa pertanyaan yang menyebut objeknya ('Hapus truk B 9911 RVW?'). Isi menyebut apa yang hilang. Batal (outline) di kiri, kata kerjanya di tombol merah di kanan. Kolom alasan kalau pihak lain perlu tahu. Setelahnya selalu umpan balik. Nonaktifkan memakai dialog yang sama dan menyebut bahwa bisa diaktifkan lagi.

Rekomendasi, digambar dari token

Hapus truk B 9911 RVW?

Truk dihapus dari armada dan pairing driver-nya dilepas. Tindakan ini tidak bisa dibatalkan.

Truk B 9911 RVW dihapus

TMS hari ini, dari nilai yang diukur

Hapus Truck?Ya, Hapus

Hapus warehouse×Hapus

Hapus×Hapus

Hapus entri×Hapus

Remove role×Remove

Five versions; after deleting: toast or nothing

Komponen dan usulan baru

Konfirmasi nonaktifkan

Tidak ada di platform

Nonaktifkan truk B 9003 KRL?

Truk tidak bisa ditugaskan ke order baru. Order yang sedang berjalan tetap jalan. Anda bisa mengaktifkannya lagi kapan saja.

Off asks first; on is instant. Both end with feedback.

Platform hari ini: 4 versi

Top banner (Harga Layanan)

Danger left (Hapus Dokumen)

Blue confirm right (Cancel Order)

No confirm (E-POD Tolak)

Kasus per kasus: TMS dan Platform berdampingan (3)

Menghapus data

Keduanya campur

TMS

Hapus Truck?'Ya, Hapus', no X, consequence

Hapus warehouseno '?', lowercase, X, 'Hapus'

Hapustitle is just 'Hapus', no consequence

Hapus entri620px wide

Remove roleEnglish, borderless Cancel, technical text

Platform

Hapus Dokumen Ini Platform, libraryred icon, red confirm on the LEFT

Hapus Rute Pelabuhan Platform, libraryillustration, BLUE confirm

Confirm Delete (legacy) Platform, versi lamaSweetAlert, 'No' / 'Yes' blue

Menonaktifkan

Hanya di TMS

TMS

Nonaktifkan Truck?good: consequence, Batal + red; turning it back on has no confirm

Nonaktifkan customersame

Nonaktifkan TKM?switch off asks, switch on does not

Platform

Tidak ditemukan di Platform.

Menolak atau membatalkan dengan alasan

Tidak ada di TMS

TMS

TMS belum punya.

Platform

Tolak Penawaran Platform, libraryreason list, red confirm

Batalkan Order? Platform, libraryreason field

Untuk engineering: ukuran, token, dan file

Delete, deactivate, cancel	Platform	TMS
Title	question naming the object	'Hapus Truck?', 'Hapus warehouse', 'Hapus', 'Hapus entri', 'Remove role'
Confirm label	the verb	'Ya, Hapus', 'Hapus', 'Remove', 'Ya, Nonaktifkan'
Consequence	always	missing on cargo item
Width	one	420 and 620
After	toast	toast (truck, cargo, group) or nothing (warehouse, role)

Perbaikan: One ConfirmDialog: 'Hapus <nama>?', consequence line, Batal outline left, red verb right, toast after. Add Batalkan Order with a reason.

Deactivate confirm	Token	Nilai
Width	`--dialog-width-sm`	448px
Confirm button	`--button-danger-bg`	#d04141

Title names the object: 'Nonaktifkan truk B 9003 KRL?'.
Body says what stops working and that it can be turned on again.
Batal (outline) and 'Nonaktifkan' (danger).
Turning it back on: no confirm. Both directions end with feedback.

File TMS (repo Karlo-Platform, src/)

lib/components/revamp/ConfirmModal.svelte (11 file memakainya; dialog lain dibuat sendiri)

File Platform (karlo_platform, src/)

components/ui/Dialog
components/ui/DocumentConfirmDialog

RekomendasiSesuai rekomendasi di atas.Tombol konfirmasi di kiriLainnya

Dialog dan panel samping

Berapa ukuran dialog yang dipakai, dan kapan memakai panel samping?

Grup AMemutuskan: Desain, dikonsultasikan: Engineering

Kenapa perlu diputuskan

Komponen Dialog platform punya default 672px, tapi 30 dialog memakai 10 lebar berbeda. TMS punya 4 lebar, radius 20, judul 16.5px, dan fokus keyboard tidak masuk ke modal. Platform punya dua panel samping (ui/Sheet 512px, Sheet lama 633px); TMS punya drawer 420px tanpa peran dialog. Popup info TMS (Uang Sangu, Rekonsiliasi) tidak punya tombol X.

Rekomendasi

Tiga lebar: 448 (konfirmasi), 672 (form, default), 1024 (memilih dari tabel). Lebih besar dari itu jadi halaman. Nilai lain mengikuti ui/Dialog: radius 12, padding 24, judul 18px, X selalu ada, fokus masuk ke dialog. Panel samping memakai ui/Sheet 512px dari kanan.

Rekomendasi, digambar dari token

Tugaskan truk B 9003 KRL?

Order ORM261030770003 ditugaskan ke Driver 1. Driver menerima notifikasi.

ui/Dialog: radius 12, padding 24, X, title 18px 600, buttons centered, focus inside

TMS hari ini, dari nilai yang diukur

Tugaskan Truck?

Order ORM261030770003 akan ditugaskan ke truck B 9003 KRL dengan driver Driver 1.

No X here; widths 420 / 620 / 760 / 1080; focus stays behind

Komponen dan usulan baru

Ukuran dialog

Platform campurui/Dialog

Tugaskan truk B 9003 KRL?

Order ORM261030770003 ditugaskan ke Driver 1. Driver menerima notifikasi.

sm 448: confirmmd 672: form (component default)lg 1024: pick from a table

Widths drawn at half size

Panel samping (Sheet)

Platform sudah punyaui/Sheet

Uang Sangu ORM261030770003×

Driver: Driver 1
Truk: B 9003 KRL
Rute: Semarang ke Salatiga
Uang Sangu: Rp 0
Status: Belum dibayar

ui/Sheet: 512px from the right, title 18px 700, red X, body scrolls, footer pinned

Kasus per kasus: TMS dan Platform berdampingan (4)

Konfirmasi aksi biasa

Berbeda

TMS

TMS Tugaskan Truck?420px r20, title 16.5px 700, Batal outline + blue 'Ya, Tugaskan'; focus stays behind

Platform

Platform Selesaikan Pesanan? Platform, libraryicon, title, body, two buttons

Platform assign result Platform, versi lamaSweetAlert 'Success' with purple OK (to be removed)

Memilih dari daftar

Berbeda

TMS

TMS Agreement List1080px modal, tabs + table + 'Pilih' 36px buttons

Platform

Platform Pick Driver Platform, versi lamanarrow panel with order info, Back / Submit

Platform pick transporter Platform, libraryinline cards on the page, no modal

Panel samping

Berbeda

TMS

TMS + Empty Orderright drawer 420px, no radius, NO dialog role

Platform

Platform admin sheet Platform, libraryright sheet with tabs and close X

Popup info dengan tautan lanjut

Hanya di TMS

TMS

TMS Uang Sangu620px, no close X, 'Tutup' + 'Buka di Detail Order'

TMS Rekonsiliasisame, no X

Platform

Tidak ditemukan di Platform.

Untuk engineering: ukuran, token, dan file

Dialog, picker and drawer	Platform	TMS
Radius	12px	20px
Padding	24px	26 / 28px
Title	18px 600 (TitleBar)	16.5px 700
Widths	default 672, but 10 widths in use	420, 620, 760, 1080 and a 420 drawer
Close X	always (ui/Dialog default)	some have it, info popups do not
Focus	moves into the dialog	stays behind (all TMS modals)
Label	aria-labelledby	missing

Perbaikan: ui/Dialog values: radius 12, padding 24, title 18px 600, X always, focus inside; three widths (see Gaps: Dialog sizes); ui/Sheet for side panels.

Dialog sizes	Token	Nilai
Small	`--dialog-width-sm`	448px
Medium	`--dialog-width-md`	672px
Large	`--dialog-width-lg`	1024px
Radius	`--dialog-radius`	12px
Padding	`--dialog-padding`	24px
Title	`--dialog-title-font-size`	18px
Title weight	`--dialog-title-font-weight`	600
Overlay	`--dialog-overlay`	rgba(0, 0, 0, 0.50)
Shadow	`--dialog-shadow`	0px 20px 25px -5px #0000001A, 0px 8px 10px -6px #0000001A

sm 448: confirm and short questions. md 672 (the default): forms. lg 1024: pick from a table.
Wider than lg, or more than one step: a page.
Radius 12, padding 24, X top right, title 18px 600, buttons centered (as ui/Dialog does today).

Sheet (side panel)	Token	Nilai
Width	`--sheet-width`	512px
Side	`--sheet-side`	right
Header padding	`--sheet-header-padding-y`	20px
Title weight	`--sheet-header-title-font-weight`	700
Side padding	`--sheet-padding-x`	24px
Footer padding	`--sheet-footer-padding-y`	16px
Close X	`--sheet-close-fg`	#9d2222
Overlay	`--dialog-overlay`	rgba(0, 0, 0, 0.50)

Use for: a row's details or preview, long filters, a form that needs the list in view.
Not for confirms (Dialog) or multi-step forms (a page).
TMS info popups with a link onward (Uang Sangu, Rekonsiliasi) become a Sheet with 'Buka Detail Order' in the footer, or the row opens the detail page directly as on the platform.
Radix gives role=dialog, focus inside, Esc to close and focus back to the row.

File TMS (repo Karlo-Platform, src/)

lib/components/ui/Modal.svelte (7 file)
lib/components/revamp/AgreementPickerModal.svelte (1080px)
12 file dengan dialog buatan sendiri

File Platform (karlo_platform, src/)

components/ui/Dialog
components/ui/Sheet
components/General/Sheet (lama)

RekomendasiSesuai rekomendasi di atas.Empat lebar (tambah 512)Lainnya

Kosong, loading, dan error

Seperti apa tampilan data kosong, sedang dimuat, dan gagal dimuat?

Grup AMemutuskan: Desain, dikonsultasikan: PM

Kenapa perlu diputuskan

Platform: 'Data not found' merah, teks abu, spinner dengan 'Data Kosong', dan request gagal tampil seperti hasil kosong. TMS: ikon dengan teks satu baris (sebagian Inggris), tanpa tombol aksi; loading berupa spinner satu halaman penuh, 'Memuat...', 'Loading...', atau kosong. Platform punya Spinner, belum punya skeleton.

Rekomendasi

EmptyState: apa yang belum ada dan aksi berikutnya ('Belum ada pesanan. Buat Spot Order'). Kosong karena filter menawarkan 'Hapus Filter'. Error menyebut data gagal dimuat dan menawarkan 'Coba Lagi'. Loading: kerangka halaman tetap tampil, Spinner di area yang dimuat setelah 300 ms.

Rekomendasi, digambar dari token

Belum ada transporter

Transporter yang bekerja sama dengan perusahaan Anda muncul di sini.

Tidak ada hasil untuk "ZZZ999"

Shell stays; ui/Spinner in the area that loads (16 / 24 / 32px). No skeleton component yet.

TMS hari ini, dari nilai yang diukur

✉No transporters linked to your company yet

📦Tidak ada Spot Order pada kategori ini.

🚚Tidak ada Empty Order yang cocok.

Memuat...

Plus a full page spinner and blank areas

Platform hari ini: 3 versi

Red 'Data not found'

Gray text (admin)

Server error shown as empty

Kasus per kasus: TMS dan Platform berdampingan (4)

Belum ada data

Keduanya campur

TMS

Spot Orderemoji box + 'Tidak ada Spot Order pada kategori ini.'

Transporter Listicon + English line

API Keyicon + Indonesian line

Platform

Platform Harga Layanan Platform, libraryyellow banner + action

Platform port settings Platform, libraryempty table

Pencarian tanpa hasil

Berbeda

TMS

TMS Empty Ordertruck emoji + 'Tidak ada Empty Order yang cocok.'; tab count still '(1)'

Platform

Platform shipper list Platform, libraryred bar 'Data not found' (English)

Platform admin Platform, librarygray 'Tidak ada data yang cocok'

Halaman pertama dimuat

Keduanya campur

TMS

TMSfull page spinner 'Loading...' with an empty shell

TMS from Plannerblank white main area

Platform

Platform Platform, libraryblank gray page, no shell

Tabel dimuat ulang

Keduanya campur

TMS

TMS Customer Listspinner inside the table

TMS My Fleet'Memuat...' row above old rows

TMS MyWarehouse'Loading...' text in the side list

TMS Order Kontraklist area empty

Platform

Platform Platform, libraryspinner inside the table

Untuk engineering: ukuran, token, dan file

Empty and no-result states	Platform	TMS
Look	EmptyState: what is missing + action	emoji, icon, plain text
Language	Indonesian	mixed
Action	always one	none
After filter	'Hapus Filter'	nothing

Perbaikan: One EmptyState (title, one help line, one action); filtered empty offers 'Hapus Filter'.

Loading	Platform	TMS
Page load	shell + Spinner (ui/Spinner; no skeleton component exists)	full page spinner or blank
Table reload	Spinner in the table area	spinner, 'Memuat...', 'Loading...', or blank

Perbaikan: Shell always visible; ui/Spinner in the area that loads, shown after 300 ms; skeleton rows for tables only if design wants them (not in the platform library yet); one Indonesian word if text is needed.

File TMS (repo Karlo-Platform, src/)

lib/components/ui/EmptyState.svelte (5 file)
lib/components/ui/Spinner.svelte (12 file)

File Platform (karlo_platform, src/)

components/ui/Spinner

RekomendasiSesuai rekomendasi di atas.Rekomendasi, plus baris skeleton di tabel (komponen baru)Lainnya

Unggah file

Satu aturan untuk unggah file: jenis, ukuran, dan di mana error tampil.

Grup AMemutuskan: Engineering, dikonsultasikan: Desain, PM

Kenapa perlu diputuskan

Platform: batas 2 MB (truk) dan 5 MB (lainnya), sebagian slot menerima PDF dan sebagian tidak, foto cargo menerima .txt, error tampil sebagai SweetAlert, banner atas, alert bawaan browser, atau teks. TMS menerima .txt di Unggah Resi dan menampilkan toast berhasil.

Rekomendasi

Dua jenis: foto (JPG, PNG, 5 MB) dan dokumen (JPG, PNG, PDF, 5 MB), dicek di browser dan server. Pesan di bawah slot unggah. Berhasil ditandai kartu file, tanpa popup.

Rekomendasi, digambar dari token

Unggah ResiJPG, PNG atau PDF, maks. 5 MB

resi.txt tidak didukung. Gunakan JPG, PNG atau PDF.

TMS hari ini, dari nilai yang diukur

Unggah Resiresi-salah.txt

✓ Unggah Resi: resi-salah.txt dipilih

Wrong type accepted

Platform hari ini: 3 versi

SweetAlert (documents tab)

Top banner (logo)

Inline (truck, Upload Bukti)

Kasus per kasus: TMS dan Platform berdampingan (2)

Jenis file salah

Bug

TMS

TMS Unggah Resia .txt is ACCEPTED with a success toast

TMSthe .txt is listed as the receipt

Platform

Platform Platform, versi lamarefused, but in a SweetAlert

Platform uploaded Platform, libraryfile card, no popup

Isian file

Berbeda

TMS

TMS customernative file input in the OS language

TMS Add Truck'Choose a file' (English)

Platform

Platform Platform, libraryphoto slots with a drawing

Untuk engineering: ukuran, token, dan file

Uploads	Platform	TMS
Type check	client and server	none on Unggah Resi
Message	under the slot	success toast even for wrong files

Perbaikan: Two upload kinds (photo, document) with type and size checks; message under the slot; file card on success.

File TMS (repo Karlo-Platform, src/)

lib/components/ui/FileField.svelte
lib/revamp/documentUpload.js
lib/pages/OrderKontrakDetailPage.svelte (Unggah Resi menerima .txt)

File Platform (karlo_platform, src/)

components/ui/FileUploadCard

RekomendasiSesuai rekomendasi di atas.Lainnya

Bahasa, keyboard, dan layar kecil

Bahasa Indonesia di semua layar, dan batas minimum untuk keyboard dan layar kecil?

Grup AMemutuskan: PM, dikonsultasikan: Desain, Engineering

Kenapa perlu diputuskan

10 dari 28 layar TMS seluruhnya berbahasa Inggris dan 13 campuran ('Tambah Customer' di samping 'Add Truck'). Platform juga punya teks Inggris ('Data not found', 'Cancel Order', 'Geofencing ON'). Fokus keyboard tidak terlihat di banyak kontrol dan tidak masuk ke modal TMS. Belum ada tata letak di bawah lebar desktop.

Rekomendasi

Semua teks UI dalam Bahasa Indonesia, termasuk label switch (AKTIF / NONAKTIF). Cincin fokus terlihat di setiap kontrol. Dukung penuh sampai 1280px; tablet dan ponsel diputuskan per layar nanti.

Rekomendasi, digambar dari token

PERAN DAN AKSES

Aktif

TMS hari ini, dari nilai yang diukur

Roles & Permissions

ActiveAktif

"Tambah Customer" next to "Add Truck"

Platform hari ini: 3 versi

Keyboard into the date picker

Status column clipped

768 and 390 px

Kasus per kasus: TMS dan Platform berdampingan (2)

Layar penuh berbahasa Inggris

Keduanya campur

TMS

TMS Add RoleEnglish modal, permission codes shown

TMS Tambah ItemIndonesian title, English labels and buttons

Platform

Platform Create New Customer Platform, versi lamaEnglish too (legacy)

Platform Settings Platform, libraryEnglish titles

Teks sistem mentah

Berbeda

TMS

TMS timeline'Offer Updated By Transporter', 'Payment in Progress'

TMSraw validation text

Platform

Platform Platform, library'Disbursement Success' (English status)

Untuk engineering: ukuran, token, dan file

One language	Platform	TMS
English screens	none	10 of 28
Mixed on one screen	none	13 of 28
Dates	one format	'05 November 2026, 10.00 WIB' and '2026-11-04' on one review step

Perbaikan: All copy Indonesian from one string file; one date format; status words from the status map.

File TMS (repo Karlo-Platform, src/)

lib/constants/nav.ts (nama menu)
lib/constants/status.ts
semua halaman di lib/pages (63 file)

File Platform (karlo_platform, src/)

components/ui/Switch/LabeledSwitch (menulis ON/OFF)

RekomendasiSesuai rekomendasi di atas.Lainnya

Nama status

Siapa pemilik daftar status, dan dalam bahasa apa?

Grup AMemutuskan: PM, dikonsultasikan: Engineering, Desain

Kenapa perlu diputuskan

Satu status punya beberapa nama ('User Terverifikasi' dan 'Lolos Verifikasi'), bahasa Inggris masuk ('Disbursement Success'), ada salah ketik ('Terkonfimasi Selesai'). Di TMS, status linimasa tampil sebagai teks Inggris mentah dan sebagian status tampil sebagai teks biasa tanpa badge.

Rekomendasi

PM memegang satu peta status: kode, nama Indonesia, warna, siapa yang melihat. Daftar, detail, tab, breadcrumb, admin, dan email membaca dari peta itu. Warna menurut arti: biru berjalan, kuning menunggu pengguna, hijau selesai, merah gagal atau batal, abu ditutup.

Platform hari ini: 3 versi

English status

Set 'User Terverifikasi', shows 'Lolos Verifikasi'

Kadaluarsa tab, Negosiasi badges

Kasus per kasus: TMS dan Platform berdampingan (2)

Status sebagai teks biasa

Berbeda

TMS

TMS My Fleet'No Pairing' red text, 'Pending' badge in the same row

TMS Driverslowercase 'active' badge

Platform

Platform Gudang Saya (legacy) Platform, versi lama'Accepted' green text, no badge

Teks sistem mentah

Berbeda

TMS

TMS timeline'Offer Updated By Transporter', 'Payment in Progress'

TMSraw validation text

Platform

Platform Platform, library'Disbursement Success' (English status)

Untuk engineering: ukuran, token, dan file

File TMS (repo Karlo-Platform, src/)

lib/constants/status.ts
lib/components/ui/StatusBadge.svelte

File Platform (karlo_platform, src/)

components/ui/StatusBadge

RekomendasiSesuai rekomendasi di atas.Lainnya

Aturan server di UI

Apakah UI mencegah hal yang pasti ditolak server, dan menjelaskan alasannya?

Grup AMemutuskan: Engineering, dikonsultasikan: PM

Kenapa perlu diputuskan

Beberapa alur membiarkan pengguna mengisi form sampai selesai lalu gagal di server (Ganti Truk, Spot Order tanpa jenis truk). Harga Layanan menimpa rute yang sudah ada tanpa bilang. Di TMS, pilihan 'All' di Form Configuration menghasilkan teks error server mentah.

Rekomendasi

Setiap aturan ada di server dan dicerminkan di UI: aksi disembunyikan atau dinonaktifkan dengan alasan satu baris sebelum pengguna mulai. Data ganda ditolak, bukan ditimpa.

Platform hari ini: 4 versi

Ganti Truk refused after the form

No truck type: server 400

Existing route overwritten

Konfirmasi on a finalised order

Kasus per kasus: TMS dan Platform berdampingan (1)

Server menolak isian

Berbeda

TMS

TMS Form Configurationraw text 'validation failed: fieldconfig: "" is not a requirement'; stays after fixing

Platform

Platform Platform, versi lamaSweetAlert with a status code (to be removed)

Untuk engineering: ukuran, token, dan file

File TMS (repo Karlo-Platform, src/)

lib/pages/FormConfigPage.svelte

RekomendasiSesuai rekomendasi di atas.Hanya di server, dengan teks error yang lebih baikLainnya

Tab status di daftar

Berapa banyak tab status di sebuah daftar?

Grup AMemutuskan: PM, dikonsultasikan: Desain

Kenapa perlu diputuskan

Daftar Spot Order transporter di platform punya 20 tab yang bergeser ke samping, shipper 9. Jumlah di tab tidak sama dengan badge. TMS memakai tab garis bawah yang sama untuk daftar dan detail.

Rekomendasi

Lima tab fase (Negosiasi, Pembayaran, Pengiriman, Selesai, Dibatalkan) ditambah Semua. Status rinci tetap di badge dan di filter status.

Platform hari ini: 2 versi

Transporter list, 20 tabs

Shipper list

Kasus per kasus: TMS dan Platform berdampingan (1)

Tab filter daftar

Berbeda

TMS

TMS Spot Order25 status tabs, 13.5px, blue text + 2.5px underline

Platform

Platform Spot list Platform, libraryFilterTabs: 12px 600, active dark text, 5px rounded indicator (decision: 5 phase tabs)

Untuk engineering: ukuran, token, dan file

File TMS (repo Karlo-Platform, src/)

lib/components/ui/Tabs.svelte

File Platform (karlo_platform, src/)

components/ui/FilterTabs

RekomendasiSesuai rekomendasi di atas.Satu tab per statusLainnya

Aksi di daftar

Aksi di daftar: tombol berlabel atau ikon saja?

Grup AMemutuskan: Desain, dikonsultasikan: PM

Kenapa perlu diputuskan

Platform: tombol Filter, Import, Export berlabel yang hanya bilang 'segera hadir'; tombol ekspor ikon saja yang nonaktif tanpa penjelasan; tombol 'x' merah di setiap baris My Fleet. TMS: ikon 26, 30, dan 32px di baris, dan toast 'Fitur akan segera hadir' dengan tanda centang.

Rekomendasi

Tombol outline berlabel dengan ikon (Button outline sm). Fitur yang belum siap disembunyikan, bukan ditampilkan sebagai 'segera hadir'. Hapus baris ada di menu baris dengan konfirmasi.

Platform hari ini: 3 versi

Labeled, not working (transporter)

Icon-only (shipper)

Red 'x' per row (My Fleet)

Kasus per kasus: TMS dan Platform berdampingan (2)

Aksi per baris

Berbeda

TMS

TMS Customer Listtext links 'Edit', 'Undang ke Karlo', red 'Nonaktifkan'

TMS My Fleet5 icon buttons per row, 28px

Platform

Platform Customer List Platform, libraryfilled blue 'Edit' and red 'Delete' pills

Platform Truck List (legacy) Platform, versi lamared X square + gray and blue icon squares

Fitur belum siap

Berbeda

TMS

TMS'Fitur Filter akan segera hadir' with a SUCCESS check, toasts stack

Platform

Platform Platform, library'Filter, segera hadir' toast at the top

Untuk engineering: ukuran, token, dan file

File TMS (repo Karlo-Platform, src/)

lib/components/ui/RowActions.svelte (belum dipakai)
lib/components/ui/Button.svelte

File Platform (karlo_platform, src/)

components/ui/Button
components/ui/Tooltip

RekomendasiSesuai rekomendasi di atas.Ikon dengan tooltipLainnya

Langkah proses (stepper)

Satu desain stepper, dan dari mana langkah saat ini diambil?

Grup AMemutuskan: Desain, dikonsultasikan: Engineering

Kenapa perlu diputuskan

Platform punya empat desain stepper dan halaman onboarding tidak sepakat langkah ke berapa. TMS memakai WizardSteps di form Internal Order; komponen Stepper di library TMS belum dipakai.

Rekomendasi

Lingkaran bernomor dengan label, langkah selesai bercentang, langkah saat ini berwarna utama. Langkah diambil dari server, jadi semua halaman menunjukkan langkah yang sama.

Platform hari ini: 3 versi

Text with bar (onboarding home)

Numbered circles (verify)

Harga Layanan shows step 3

Untuk engineering: ukuran, token, dan file

File TMS (repo Karlo-Platform, src/)

lib/components/revamp/WizardSteps.svelte
lib/components/ui/Stepper.svelte (belum dipakai)

RekomendasiSesuai rekomendasi di atas.Teks dengan barLainnya

Judul halaman

Judul halaman: breadcrumb atau judul biasa?

Grup AMemutuskan: Desain

Kenapa perlu diputuskan

Platform: tiga dari empat layar Spot Order memakai breadcrumb (huruf besar), daftar shipper memakai judul buatan sendiri. TMS: 'Induk, garis, Halaman' 24px, kotak ikon di 12 dari 28 layar, sebagian layar tanpa judul (Planner, Control Tower).

Rekomendasi

Breadcrumb di setiap halaman, juga daftar (satu item). Item terakhir menyebut datanya, bukan statusnya.

Rekomendasi, digambar dari token

MASTER DATA › MY AGREEMENT

SPOT ORDER

TMS hari ini, dari nilai yang diukur

Master Data MyAgreement

▦MyWarehouse

Truck Insight

Planner, Control Tower: no title

Platform hari ini: 3 versi

Breadcrumb (transporter list)

Heading (shipper list)

Two titles stacked

Kasus per kasus: TMS dan Platform berdampingan (4)

Halaman daftar

Berbeda

TMS

MyAgreement'Master Data, long dash, MyAgreement' 24px 700, no icon

MyWarehouseicon box + 24px 700

Insight Truk20px 400

Platform

Platform Spot Order Platform, library'SPOT ORDER' 20px 600 uppercase, ink 75%

Halaman detail

Mirip

TMS

TMS Spot detail'SPOT ORDER > ORDER SELESAI (ORM...)' 12.5px 700 uppercase gray: the only TMS page close to the spec

TMS Kontrak detailoutline pill 'Kembali ke Daftar Order' above a breadcrumb

Platform

Platform Spot detail Platform, library'SPOT ORDER > PENGIRIMAN (ORM...)' 20px, parent lighter; names the status, which patterns say it should not

Halaman form (tambah)

Berbeda

TMS

TMS Add Truckicon box + 'Add Truck' 24px, 'Back' link at the far right

TMS Tambah Agreementsmall text link 'Kembali ke Agreement' above a plain 24px title

Platform

Platform Tambah Armada Platform, librarybreadcrumb 'PROFIL PERUSAHAAN > TAMBAH ARMADA'

Platform Add Warehouse (legacy) Platform, versi lamabar + 'Add Warehouse' 16px, English

Halaman tanpa judul

Berbeda

TMS

Plannerno title

Control Towerno title

Agreement documentno title

Platform

Platform Planner Platform, libraryno title either (map page)

Untuk engineering: ukuran, token, dan file

Page title	Platform	TMS
Size	20px 600	24px 700 (most), 20px 400 (Insight Truk), 12.5px 700 (Spot detail)
Case	UPPERCASE	Title Case, except Spot and Kontrak detail
Parent	breadcrumb, parent lighter	'Parent, long dash, Page' in one color
Icon box	none	on 12 of 28 screens
Back link	breadcrumb only	three kinds: outline pill, text link, right aligned 'Back'

Perbaikan: One PageHeader: breadcrumb, parent ink 50%, page ink 75%, 20px 600 uppercase, no icon box, no separate back button; on every page including Planner and Control Tower.

File TMS (repo Karlo-Platform, src/)

lib/components/ui/PageHeader.svelte (13 file)

File Platform (karlo_platform, src/)

components/ui/Breadcrumb

RekomendasiSesuai rekomendasi di atas.Judul biasaLainnya

Grup B: cukup dikonfirmasi

Platform sudah punya komponennya dan rekomendasinya: TMS membangun komponen yang sama di library-nya sendiri (lihat Rencana library komponen). Tombol di bawah menerima semua rekomendasi grup ini sekaligus; kartu yang Anda ubah tetap memakai pilihan Anda.

Kerangka aplikasi: top bar dan sidebar

TMS membangun dan memakai top bar dan sidebar platform?

Grup BMemutuskan: Desain

Kenapa perlu diputuskan

Top bar TMS bergradasi navy 56px, sidebar dengan item 44px; platform memakai top bar terang dan sidebar dengan ukuran dari token shell.

Rekomendasi

Top bar dan sidebar mengikuti token shell platform (tinggi, warna, item aktif, indentasi submenu).

Rekomendasi, digambar dari token

K-FleetCustomer HelpIDNotifikasi

Insight Orders Spot Order Truck List Settings

TMS hari ini, dari nilai yang diukur

KARLOCustomer HelpIDNotifikasidemo

Insight Orders Spot Order Order Kontrak Master Data

Kasus per kasus: TMS dan Platform berdampingan (3)

Desktop, semua halaman

Berbeda

TMS

TMS56px, gradient #101F42 to #1B3268, no shadow, items 13px 600

Platform

Platform Spot Order list Platform, library64px, flat #0D2555, shadow, white items

Lebar ponsel (390px)

Berbeda

TMS

TMS at 390px'Customer Help' wraps to two lines, sidebar becomes an icon rail

Platform

Platform at 390 and 768px Platform, libraryPlatform also not built for phone (see language-and-a11y decision: desktop only for now)

Navigasi dengan grup terbuka

Berbeda

TMS

TMS248px; parent 44px tall 12px 500 #5B5F67; active fill #D3E3FD + bold; every page sits under a collapsible group

Platform

Platform Platform, library240px; items 14px 400 #1A1A1A; active fill #E1F3FF, no bold; mostly flat list

Untuk engineering: ukuran, token, dan file

Top bar	Platform	TMS
Height	64px	56px
Background	flat #0D2555	gradient #101F42 to #1B3268
Shadow	0 2.4px 28px #3A3B4526	none
Item text	white	#E7ECFB, 13px 600

Perbaikan: Height 64px, background var(--shell-topbar-bg), box-shadow var(--shell-topbar-shadow), item text white.

Sidebar	Platform	TMS
Width	240px	248px
Item	padding 7/10, 14px 400	44px tall, padding 10/14, 12px 500
Color	#1A1A1A	#5B5F67
Radius	100px	24px parent, 16px sub link
Active	fill #E1F3FF only	fill #D3E3FD, #001A41, bold 700

Perbaikan: Width 240, item padding 7px 10px, radius 100px, 14px 400; one active style (fill only).

File TMS (repo Karlo-Platform, src/)

lib/components/layout/Topbar.svelte
lib/components/layout/Sidebar.svelte
lib/components/layout/NavNode.svelte
lib/components/layout/AppHeader.svelte

File Platform (karlo_platform, src/)

containers (AppHeader, AppSidebar)

RekomendasiSesuai rekomendasi di atas.Pertahankan TMSLainnya

Tombol

TMS membangun dan memakai ukuran dan bentuk tombol platform?

Grup BMemutuskan: Desain

Kenapa perlu diputuskan

TMS: tombol 44 dan 46px berdampingan, kecil 38px, tombol ikon 26, 30, 32px, tombol Assign hitam. Platform Button: 32, 40, 48px, pill, berat 500.

Rekomendasi

Satu Button: md 40, sm 32, lg 48, pill, berat 500. Varian: primary, outline, secondary, ghost, danger. Tombol ikon 40x40 (atau 32 di baris).

Rekomendasi, digambar dari token

md 40, sm 32, pill, 500

TMS hari ini, dari nilai yang diukur

44 and 46 side by side, 38 small, icon buttons 26 / 30 / 32

Kasus per kasus: TMS dan Platform berdampingan (4)

Aksi di kepala halaman

Berbeda

TMS

TMS Order Kontrakprimary 44px r20 600; outline 46px with gray border, taller than the primary beside it

Platform

Platform Spot list Platform, libraryoutline sm with icon, primary border

Aksi per baris

Berbeda

TMS

TMS Customer Listtext links 'Edit', 'Undang ke Karlo', red 'Nonaktifkan'

TMS My Fleet5 icon buttons per row, 28px

Platform

Platform Customer List Platform, libraryfilled blue 'Edit' and red 'Delete' pills

Platform Truck List (legacy) Platform, versi lamared X square + gray and blue icon squares

Assign di Planner

Berbeda

TMS

TMS Fleet Catalog'Assign' BLACK pill 34px 11.5px 700, the only black button in TMS; '+ Empty Order' outline 36px

Platform

Platform Planner Platform, versi lamablue filled 'Pilih Driver' button in the row

Tombol di dialog

Berbeda

TMS

TMS Tambah CustomerBatal = borderless text button, Simpan 44px

TMS Tambah WarehouseBatal = outline 46px

TMS inline formBatal 38px, Simpan 36px

Platform

Platform Create Customer (legacy) Platform, versi lamaCancel outline / Submit filled, 36px 12px

Platform confirm Platform, libraryoutline + filled, same height

Untuk engineering: ukuran, token, dan file

Button	Platform	TMS
Heights	32 / 40 / 48	34, 36, 38, 44, 46 (and 22, 26, 28 icon)
Radius	24px pill	20, 16, 999
Weight	500	600 to 700
Outline border	primary	gray #C4C9D4
Colors	primary, outline, danger, ghost	plus a black 'Assign'
Secondary in footers	outline	outline in some modals, borderless text in others

Perbaikan: Button sm 32 / md 40 / lg 48, radius var(--button-radius), weight 500, outline border primary, no black variant; one IconButton size (32).

File TMS (repo Karlo-Platform, src/)

lib/components/ui/Button.svelte (118 pemakaian; 246 tombol lain dibuat sendiri)

File Platform (karlo_platform, src/)

components/ui/Button

RekomendasiSesuai rekomendasi di atas.Pertahankan TMSLainnya

Tabel

TMS membangun dan memakai tabel platform, termasuk di My Fleet?

Grup BMemutuskan: Desain

Kenapa perlu diputuskan

TMS: header huruf besar 11px, sel 12px, garis zebra; My Fleet menyalin tabel lama platform (header gradasi biru, 5 tombol ikon). Beberapa tabel TMS punya bar judul navy. Tabel platform yang baru tidak punya bar judul.

Rekomendasi

ui/Table: header #FAFAFA 12px 600 tanpa huruf besar, sel 12px dengan padding 12x16. Halaman dengan lebih dari satu tabel memberi judul polos di atas setiap tabel. My Fleet ikut tabel baru, bukan yang lama.

Rekomendasi, digambar dari token

No	ID Order	Rute	Status
1	ORM261029690002	Semarang ke Salatiga	Selesai
2	ORM261029080003	Tuban ke Semarang	Menunggu

TMS hari ini, dari nilai yang diukur

No	ID Order	Rute	Status
1	ORM261029690002	Semarang → Salatiga	Lengkap
2	ORM261029080003	Tuban → Semarang	Perlu Diinput

Roles

Role	Description
Administrator	Full access

Komponen dan usulan baru

Judul di atas tabel

Platform memakai cara lainui/Table

Peran4

Peran	Deskripsi	Status
Administrator	Akses penuh	Aktif
Planner	Order dan armada	Aktif

Only when a page has more than one table

Kasus per kasus: TMS dan Platform berdampingan (5)

Daftar order

Berbeda

TMS

TMS Order Kontrakth #F4F6F9 #5B5F67 11px 700 UPPERCASE; td 12px pad 9/14; zebra #EEF1F5

Platform

Platform Spot list Platform, libraryth #FAFAFA black 12px 600; td pad 12/16; zebra #FAFAFA

Daftar master data

Berbeda

TMS

TMS Customer Listnavy title bar 'Customer List' over search + table, Prev 1/1 Next

Platform

Platform Customer List Platform, libraryspec table: #FAFAFA, black 12/600, row 60px, no title bar, 'Rows per page' pagination

Fleet: dua tabel berdampingan

Keduanya di luar spek

TMS

TMS My Fleettwo cards with BLUE GRADIENT header bars; th #F6F8FC; td 13px (12px elsewhere) with row borders; rows 71 and 55px; 5 icon buttons; red 'No Pairing' text not a badge; numbered square pagination; filters inside the card

Platform

Platform Truck List (legacy) Platform, versi lamanavy header row, big 16px text, red X squares, icon squares

Platform Gudang Saya (legacy) Platform, versi lamasame two-table layout: navy thead, white 16px 700, td 16px #5A5C69, rows 66px

Warehouse dan cargo

Berbeda

TMS

TMS MyWarehouseleft list + map + table, standard gray header

Platform

Platform Gudang Saya (legacy) Platform, versi lamatwo navy tables, no map

Tabel dengan bar judul

Hanya di TMS

TMS

Rolesnavy bar 'Roles'

Driver registrationblue gradient bar 'Riwayat Akun Terdaftar'

Platform

Tidak ditemukan di Platform.

Untuk engineering: ukuran, token, dan file

Table	Platform	TMS
Header fill	#FAFAFA	#F4F6F9; #F6F8FC Fleet; white Control Tower
Header text	black 12px 600, no uppercase	#5B5F67 11px 700 UPPERCASE
Cell	12px, pad 12/16	12px (13px Fleet), pad 9/14
Zebra	#FAFAFA	#EEF1F5
Title bar	none	navy (3 screens), blue gradient (2 screens)
Pagination	one style	'Prev 1/1 Next', numbered squares, 'Semua data sudah dimuat'

Perbaikan: One Table per spec, no title bars, one pagination. My Fleet: trucks and drivers as two tabs of one spec table, status as badges, row actions in a menu.

Table section title	Token	Nilai
Title size	`--table-section-title-font-size`	16px
Title weight	`--table-section-title-font-weight`	600
Gap to table	`--table-section-gap`	12px
Card radius	`--card-radius`	16px

One table on the page: no title.
Two or more: a title row inside each card: title, count, actions on the right.
No navy or gradient bars.

File TMS (repo Karlo-Platform, src/)

lib/components/ui/DataTable.svelte (3 file; 51 tabel lain dibuat sendiri)
lib/pages/FleetPairingPage.svelte (My Fleet)

File Platform (karlo_platform, src/)

components/ui/Table

RekomendasiSesuai rekomendasi di atas.Pertahankan TMSLainnya

Badge status

TMS membangun dan memakai badge status platform, dan kategori memakai tag netral?

Grup BMemutuskan: Desain

Kenapa perlu diputuskan

Badge TMS putih dengan border pucat, 11px tebal; warna status juga dipakai untuk kategori ('Single Shipment', 'Perusahaan'). Badge platform berwarna lembut, border senada, 13px.

Rekomendasi

StatusBadge platform untuk status saja. Kategori memakai tag netral abu.

Rekomendasi, digambar dari token

LengkapPerlu DiinputNegosiasiDibatalkan

Single ShipmentPerusahaan

Categories as a neutral tag

TMS hari ini, dari nilai yang diukur

LengkapPerlu DiinputSingle Shipment

PerusahaanPeroranganEmpty Order

Status colors reused for categories

Kasus per kasus: TMS dan Platform berdampingan (2)

Status di daftar

Berbeda

TMS

TMS Driver Allowancewhite fill, pale border, 11px 700, 34px tall

Platform

Platform Spot list Platform, librarytinted fill, solid border same as text, 13px 500, about 23px

Status sebagai teks biasa

Berbeda

TMS

TMS My Fleet'No Pairing' red text, 'Pending' badge in the same row

TMS Driverslowercase 'active' badge

Platform

Platform Gudang Saya (legacy) Platform, versi lama'Accepted' green text, no badge

Untuk engineering: ukuran, token, dan file

Status badge	Platform	TMS
Fill	tinted	white
Border	same as text	pale tint
Text	13px 500	11px 700
Height	about 23px	34px
Use	status only	also categories ('Single Shipment', 'Perusahaan')

Perbaikan: Badge per spec; categories use a neutral Tag; status words come from one status map (patterns: status).

File TMS (repo Karlo-Platform, src/)

lib/components/ui/StatusBadge.svelte

File Platform (karlo_platform, src/)

components/ui/StatusBadge

RekomendasiSesuai rekomendasi di atas.Pertahankan TMSLainnya

Tab

TMS membangun dan memakai FilterTabs untuk daftar dan Tabs untuk detail, seperti platform?

Grup BMemutuskan: Desain

Kenapa perlu diputuskan

TMS memakai tab garis bawah yang sama untuk daftar dan detail, dan tombol pil sebagai tab di Form Configuration. Platform: FilterTabs (indikator 5px) untuk daftar, Tabs berisi warna untuk detail.

Rekomendasi

FilterTabs untuk memfilter satu daftar, Tabs untuk berganti panel. Tidak ada tombol yang dibuat mirip tab.

Rekomendasi, digambar dari token

Semua (5)Single Shipment (4)Multi Shipment (1)

LinimasaDriverDokumen

Lists: FilterTabs. Detail: filled tabs.

TMS hari ini, dari nilai yang diukur

Semua (5)Single Shipment (4)Multi Shipment (1)

Linimasa OrderDriverDokumen

AgreementOrder

Same underline for lists and detail; pill buttons on Form Configuration

Komponen dan usulan baru

Pindah bagian halaman

Platform memakai cara lainui/Tabs

AgreementOrder

Billing splitTampilkan di form agreementHidden

ui/Tabs, no new component

Kasus per kasus: TMS dan Platform berdampingan (4)

Tab filter daftar

Berbeda

TMS

TMS Spot Order25 status tabs, 13.5px, blue text + 2.5px underline

Platform

Platform Spot list Platform, libraryFilterTabs: 12px 600, active dark text, 5px rounded indicator (decision: 5 phase tabs)

Tab panel detail

Berbeda

TMS

TMS Spot detailLinimasa Order / Driver / Dokumen: same underline as lists

Platform

Platform Spot detail Platform, libraryfilled tabs: active primary fill, white text

Tab di dalam modal

Berbeda

TMS

TMS Agreement pickerunderline tabs Semua / Single / Multi

Platform

Platform dialog Platform, libraryno tabs in platform dialogs

Pindah bagian halaman

Hanya di TMS

TMS

TMS Form Configurationfilled pill buttons 'Agreement' / 'Order' as tabs

Platform

Tidak ditemukan di Platform.

Untuk engineering: ukuran, token, dan file

Tabs	Platform	TMS
List	12px 600, dark active, 5px indicator	13 to 13.5px, blue 700, 2.5px underline
Detail	filled tabs	underline
Height	32 / 34	47 to 51px
Fourth style	none	pill buttons (Form Configuration)

Perbaikan: Lists: FilterTabs with phase groups. Detail, modals and Form Configuration: filled Tabs.

Section switch	Token	Nilai
Height	`--tabs-height-md`	34px
Active	`--tabs-bg-active`	#4193d0
Text	`--tabs-font-size`	12px

Switching what the page shows: Tabs.
Filtering one list: FilterTabs.
No buttons styled as tabs.

File TMS (repo Karlo-Platform, src/)

lib/components/ui/Tabs.svelte
lib/components/ui/PillTab.svelte
lib/components/ui/SegmentedControl.svelte
lib/pages/FormConfigPage.svelte

File Platform (karlo_platform, src/)

components/ui/FilterTabs
components/ui/Tabs

RekomendasiSesuai rekomendasi di atas.Pertahankan TMSLainnya

Isian form dan switch

TMS membangun dan memakai ukuran isian, label, dan switch platform?

Grup BMemutuskan: Desain

Kenapa perlu diputuskan

TMS: isian 44, 48, dan 50px dalam satu form, label 12.5px abu, petunjuk miring; dua gaya switch. Platform: isian 40px 14px, label 13px 600, switch 40x25.

Rekomendasi

Input md 40px 14px, label dan petunjuk dari token form, edit langsung di halaman detail (modal hanya untuk form tambah yang pendek). Satu Switch 40x25; kalau ada label status, tulis AKTIF / NONAKTIF.

Rekomendasi, digambar dari token

Nama Perusahaan

PT. Karlo Trans

Sesuai akta pendirian

Tipe Truk

Pilih tipe truk

TMS hari ini, dari nilai yang diukur

Nama Perusahaan

DEMO TRANSPORTER

Sesuai akta pendirian

Estimated Load Schedule

Status

IDR 3.800/liter

Komponen dan usulan baru

Switch

Platform sudah punyaui/Switch, ui/Switch/LabeledSwitch

Notifikasi WhatsAppKirim status order ke PICON

GeofencingDriver harus berada di titik tujuanOFF

Plain SwitchWithout a label beside it

ui/Switch 40x25; LabeledSwitch writes ON/OFF and turns green

Kasus per kasus: TMS dan Platform berdampingan (5)

Tambah Truk

Berbeda

TMS

TMS Add Trucklabels 12.5px 600 #5B5F67; inputs 48px pill, date 50px; selects are 48px pill buttons; file 'Choose a file' 36px

Platform

Platform Tambah Armada Platform, librarylabel left with hint under it, input right, info icons; photo slots with truck drawings

Ubah profil perusahaan

Berbeda

TMS

TMSedit in a 620px MODAL from an 'Edit' button at the page bottom

Platform

Platform Platform, libraryedit IN PLACE on the page, Batal / Simpan at the bottom

Tambah customer

Berbeda

TMS

TMS620px modal, 2 columns, native file inputs show the OS language ('ファイルを選択')

Platform

Platform (legacy) Platform, versi lama250px narrow modal, 38px inputs r5.6, 16px labels with yellow info icons

Tambah warehouse

Berbeda

TMS

TMSmodal with map

Platform

Platform (legacy) Platform, versi lamaseparate page, blue header bar 'Warehouse's Info'

Switch

Berbeda

TMS

TMS Settingsgreen 50x26 when on, gray off, 'OFF' label

TMS Trip Allowanceblue 40x22

Platform

Platform Settings Platform, librarygray pill switch with 'OFF' label

Untuk engineering: ukuran, token, dan file

Form field and label	Platform	TMS
Height	40px	44, 48, 50 in one form
Text	14px	13px; date 16px
Label	13px 600 #212121	12.5px 600 #5B5F67
Hint	12px #757575	11.5px italic
Edit pattern	in place	modal (profile, customer, warehouse)
Switch	one (ui/Switch 40x25; LabeledSwitch writes ON/OFF)	green 50x26 and blue 40x22

Perbaikan: Input md 40px, 14px; labels and hints from form tokens; edit in place on detail pages, modals only for short create forms; one Switch.

Switch	Token	Nilai
Size	`--switch-width`	40px
Height	`--switch-height`	25px
Thumb	`--switch-thumb`	22px
On (plain)	`--switch-bg-on`	#4193d0
On (labeled)	`--switch-bg-on-labeled`	#5aae00
Off	`--switch-bg-off`	#fafafa
Label	`--switch-label-font-size`	12px

One Switch everywhere: 40x25, 22px thumb.
Next to a label, write the state like LabeledSwitch ('Geofencing ON').
Takes effect at once and shows feedback. If the change needs a Save button, use a checkbox.
Turning off something with consequences asks first (see Deactivate).

File TMS (repo Karlo-Platform, src/)

lib/components/ui/Field.svelte
lib/components/ui/Input.svelte
lib/components/ui/Select.svelte
lib/components/ui/Toggle.svelte
lib/components/revamp/GeofencingToggle.svelte

File Platform (karlo_platform, src/)

components/ui/Input
components/ui/Select
components/ui/Switch

RekomendasiSesuai rekomendasi di atas.Pertahankan TMSLainnya

Rencana library komponen TMS

TMS baru membangun 20 dari 222 rute. Ini saat termurah untuk membuat satu library komponen sebelum 200 rute lainnya dibuat. Penyimpangan hari ini bukan karena framework: halaman membuat tombol, tabel, dan dialog sendiri alih-alih memakai komponen yang sudah ada.

Prinsip

Satu sumber nilai: tokens.css dan preset Tailwind dari karlo-design, disalin ke TMS. Folder UI_TEMPLATE yang disebut di REMAINING_WORK.md tidak ada di repo; karlo-design menggantikannya.
Dasar komponen: bits-ui (setara Radix di Svelte, yang dipakai Platform). Fokus keyboard, Esc, dan peran ARIA ikut otomatis.
Nama dan props sama dengan library Platform (Button, Dialog, Sheet, BannerToast, StatusBanner, Switch, FilterTabs, Tabs, StatusBadge, Table). Storybook Platform jadi kamus untuk kedua tim.
Varian ditulis dengan tailwind-variants, pola yang sama dengan cva di Platform, supaya kelas per varian bisa dibandingkan baris per baris.

Komponen, berurutan

Urutan	Komponen	Menggantikan di TMS	Topik
1	Button, IconButton	ui/Button.svelte dan 246 tombol buatan sendiri	Tombol
2	BannerToast, StatusBanner	toast() di lib/stores/ui.ts (201 panggilan), banner di SettingsPage	Umpan balik setelah aksi
3	Dialog, ConfirmDialog, Sheet	ui/Modal.svelte, revamp/ConfirmModal.svelte, drawer Empty Order, 12 dialog buatan sendiri	Dialog dan panel samping
4	Field, Input, Select, Switch, Checkbox	ui/Field, Input, Select, Toggle, revamp/GeofencingToggle	Isian form dan switch
5	Table	ui/DataTable.svelte dan 51 tabel buatan sendiri, termasuk My Fleet	Tabel
6	FilterTabs, Tabs	ui/Tabs, PillTab, SegmentedControl	Tab
7	StatusBadge, Tag, peta status	ui/StatusBadge.svelte, lib/constants/status.ts	Nama status
8	Breadcrumb (judul halaman)	ui/PageHeader.svelte	Judul halaman
9	EmptyState, Spinner	ui/EmptyState, ui/Spinner	Kosong, loading, dan error
10	FileUpload	ui/FileField, revamp/documentUpload.js	Unggah file
11	Stepper	revamp/WizardSteps.svelte, ui/Stepper.svelte	Langkah proses (stepper)

Langkah

Salin dist/tokens.css dan dist/tailwind-v3-preset.cjs dari karlo-design ke TMS; tailwind.config.ts memakai preset itu.
Bangun komponen di urutan tabel di atas, di src/lib/components/ui, satu PR per komponen.
Halaman galeri (/dev/ui) atau Storybook untuk Svelte: setiap komponen dengan semua variannya. Desainer mengecek di sini, bukan di 222 layar.
Aturan lint: halaman di lib/pages dan routes tidak boleh memakai button, table, atau dialog mentah; harus lewat library.
Tes screenshot halaman galeri (Playwright), supaya perubahan komponen terlihat di review PR.
Perbaiki 20 rute yang sudah dibangun, lalu rute baru hanya memakai library.

Dua tim, satu acuan

Untuk kedua tim: perubahan desain (warna, ukuran, aturan) masuk ke karlo-design dulu, lalu Platform dan TMS menyalin nilainya. Platform tetap memakai library-nya sendiri; TMS memakai library Svelte dengan nama yang sama.

Belum dicakup

Tambah User (butuh kata sandi), kirim pendaftaran driver (mengirim WhatsApp), tombol Export (mengunduh file).
Platform: simpan customer dan warehouse baru (pilihan kota dan verifikasi warehouse menghalangi data dummy).
Layar TMS untuk peran shipper (akun demo adalah transporter).
Repo TMS (dev) bisa lebih baru dari tms.karlo.id; pengukuran memakai yang live.

Daftar bug (TMS dan Platform) ada di halaman terpisah: bugs.html.