Lompat ke isi
CirccaHIG

Komponen / Tampilan data

DueDate

Tenggat dengan status aman, dekat, terlambat, atau selesai: jatuh tempo termin invoice, batas BAST, perpanjangan lisensi.
React · BetaFigma · siapFigmaSumber

Kapan dipakai

Gunakan

  • Pakai untuk tanggal yang menuntut tindakan sebelum lewat: jatuh tempo termin, batas BAST, perpanjangan lisensi.
  • Beri `done` begitu termin lunas atau tugas selesai agar tenggat lama tidak terus tampil merah.
  • Samakan `soonDays` per jenis tenggat di seluruh aplikasi (mis. invoice 3 hari, perpanjangan lisensi 30 hari).

Hindari

  • Jangan memakai DueDate untuk tanggal yang sekadar dicatat (tanggal PO, tanggal dibuat) — tulis dengan formatDate biasa.
  • Jangan menyampaikan terlambat hanya lewat warna merah pada tanggal; biarkan ikon dan teks "Terlambat 2 hari" tampil.
  • Jangan menghitung status di klien dengan jam perangkat untuk laporan resmi — kirim `today` atau `state` dari server.

Contoh benar & salah

Termin 2Tenggat terlewat: Terlambat 2 hari,
GunakanIkon peringatan dan teks "Terlambat 2 hari" di samping tanggal.
Termin 26 Okt 2026
HindariHanya tanggal yang diwarnai merah; tidak terbaca tanpa warna.
Termin 1 · lunasSelesai:
GunakanTermin lunas memakai Done: abu dengan ikon centang.
Termin 1 · lunasTenggat terlewat: Terlambat 13 hari,
HindariTermin yang sudah lunas tetap tampil terlambat.

Penulisan

  • Tanggal memakai format pendek "12 Okt 2026"; tanggal panjang ada di tooltip (`title`).
  • Teks relatif: "Hari ini", "Besok", "3 hari lagi", "Terlambat 2 hari" — kalimat pendek, angka hari kalender.

Komponen terkait

Esc
↑↓ pilih↵ buka12 hasil