Patterns/Date Label

Date Label

● Needs Review Web Nuxt 4 + Mobile React Native

Konvensi format lencana tanggal untuk jadwal pengerjaan try out dan tanggal kedaluwarsa akses. Bukan komponen Vue tersendiri — ini pola markup + format teks yang disusun dari elemen dasar (ikon + teks).

Contoh tampilan

Dua kondisi paling umum: tanggal jadwal biasa, dan tanggal yang mendekati kedaluwarsa (butuh penekanan warna warning).

16 Agu 2026Berakhir dlm 3 Hari

html

<span class="inline-flex items-center gap-1.5 ...">
  <AppIcon name="calendar" :size="14" />
  <span>16 Agu 2026</span>
</span>

Kenapa halaman ini "Needs Review"

Tidak ada komponen AppDateLabel yang sesungguhnya di balik pola ini — ini kumpulan markup dan aturan format tanggal yang diulang di beberapa tempat, belum dibungkus jadi satu komponen yang bisa diimpor. Halaman ini didokumentasikan sebagai konvensi konten/format, bukan sebagai referensi API komponen, sampai ada keputusan apakah pola ini layak dijadikan komponen nyata atau tetap sebagai pedoman format teks.

Format tanggal selalu D MMM YYYY dalam Bahasa Indonesia (mis. "16 Agu 2026"), tidak pernah angka murni (16/08/2026) yang ambigu untuk audiens lintas region.
Gunakan warna warning hanya ketika sisa waktu kurang dari 3 hari — di luar itu, tetap warna netral.
Sertakan ikon (calendar atau hourglass-high) di samping teks — jangan mengandalkan warna saja untuk membedakan kondisi normal vs. mendekati kedaluwarsa.