Halaman detail

Satu catatan dilihat seluruhnya: datanya, riwayatnya, dan tindakan yang bisa dilakukan padanya.

Contoh

Kepala halaman dengan jejak dan status, data sebagai pasangan label–nilai, riwayat di kolom sendiri, dan perubahan kecil yang dibuka di Drawer tanpa meninggalkan halaman.

PU-0042

Selesai

Kantor Bekasi · 21 Sep 2026

Detail penjemputan

Lokasi
Kantor Bekasi
Alamat
Jl. Ahmad Yani No. 12, Bekasi Selatan
PIC lokasi
Rini Hartati
Armada
B 1234 XYZ
Petugas
Bagus Nugroho
Material
Anorganik
Berat tercatat
2.100 kg
Residu
0

Catatan

Pagar samping, hubungi satpam sebelum masuk.

Riwayat

  1. 21 Sep 2026, 08.40 · Rini Hartati

    Permintaan dibuat

  2. 21 Sep 2026, 09.10 · Sistem

    Armada dijadwalkan

    Truk B 1234 XYZ, keberangkatan 13.30.

  3. 21 Sep 2026, 14.05 · Bagus Nugroho

    Timbangan dicatat

    2.100 kg anorganik.

  4. 21 Sep 2026, 15.20 · Bagus Nugroho

    Pickup selesai

Ubah catatan

Dibaca petugas sebelum berangkat.

Susunannya

  • Satu judul di satu tempat.Breadcrumb + judul + status ada di halaman, dan AppShell sengaja tidak punya prop title supaya judulnya tidak tergambar dua kali (#061).
  • Aksi diurutkan dari yang paling sering. Salin dan Ubah terlihat; sisanya masuk DropdownMenu, dan yang merusak data ditandai danger di bawah pemisah.
  • Data pakai DescriptionList, bukan tabel. Tabel untuk banyak baris sejenis; satu catatan adalah pasangan label–nilai. layout="inline" dengan dua kolom memuat delapan field tanpa halaman jadi panjang.
  • Riwayat memakai Timeline, bukan Stepper. Yang digambar sudah terjadi.
  • Perubahan kecil tidak pindah halaman. Drawer menyimpan konteks di belakangnya; pakai halaman terpisah hanya kalau yang diubah banyak dan berisiko.

Field yang belum terisi

Jangan menghilangkan barisnya. DescriptionList menggambar emptyText (—) supaya jelas bahwa field itu ada tetapi belum diisi — baris yang hilang terbaca sebagai data yang gagal dimuat. Angka 0 tetap dihitung sebagai nilai.