System Requirements Document for ga-web-aplikasi

1. Introduction

ga-web-aplikasi adalah aplikasi web profesional untuk pekerjaan GA (General Affairs) di lingkungan industri/kantor. Produk ini dibangun untuk tim GA yang bekerja 8 jam sehari dengan data operasional yang padat, berulang, dan sensitif terhadap audit: distribusi barang, pencatatan inventory, peminjaman PPE dan tools, pelabelan asset, administrasi kendaraan, fuel voucher, SOP, transmittal, master data, serta pengaturan akun, sinkronisasi/backup, dan log audit.

Maksud produk (source-derived): menyediakan satu konsol operasional GA yang menyatukan seluruh menu dan sub-menu yang diminta, dengan dashboard KPI yang mengumpulkan data penting dari setiap menu/sub-menu, header operasional yang selalu terlihat (ganti mode Siang/Malam, lampu indikator Sync, tanggal & jam aktual, profil user login, tombol logout), serta desain yang keren, bagus, menarik, profesional, dan modern. Permintaan perbaikan menyeluruh atas stabilitas, prioritas, kualitas kode & maintainability, bug & masalah logika, keamanan (temuan kritis), fitur, arsitektur & alur data diperlakukan sebagai komitmen produk saat ini.

Audiens: staf/operator GA harian, supervisor/admin GA, petugas asset & pelabelan, dan system administrator — pengguna yang menghargai kejelasan tingkat engineering, bukan dekorasi.

2. System Overview

ga-web-aplikasi adalah aplikasi web first-party dengan identitas milik aplikasi (self-service enrollment + verifikasi kembali melalui Login) dan UI kustom. Seluruh menu dan sub-menu yang diminta menjadi destination yang dapat dinavigasi dari left rail tetap, dikelompokkan tepat sesuai 8 menu sumber. Dashboard menjadi halaman kerja utama setelah login dan menampilkan KPI lintas menu serta header operasional.

Aktor: empat persona aktif (GA Staff / Operator GA, GA Supervisor / Admin GA, Asset & Labeling Officer, System Administrator). Backend bertindak sebagai aktor non-persona yang menyimpan transaksi durable, menjaga konsistensi inventory, menjalankan sinkronisasi & backup, dan menulis jejak audit.

Perilaku yang diterima: dashboard KPI; distribusi & inventory untuk Alat tulis kantor, Groseri, PPE, Tools; peminjaman PPE & Tools; list asset & pelabelan asset dengan nomor QR; administrasi kendaraan & list commuting; pengambilan/penyerahan fuel & laporan pemakaian fuel; SOP pekerjaan, transmittal, dan administrasi lainnya; master data karyawan & kendaraan; manajemen akun, sync & backup, log riwayat audit; header dengan lima kontrol yang diminta.

Pengecualian sempit: tidak ada modul di luar daftar menu/sub-menu yang diminta. Tidak ada integrasi pihak ketiga, marketplace, atau kanal eksternal yang tidak disebutkan sumber. Tidak ada fitur akun tambahan di luar enrollment, login, dan manajemen akun yang diminta.

2a. Product Interpretation and Delivery Boundary

Aplikasi ini adalah konsol operasional internal, bukan situs publik. Halaman Landing adalah entry anonim yang menjelaskan aplikasi GA sebelum autentikasi; Login adalah verifikasi kembali untuk mengakses data GA durable. Setelah login, seluruh destination operasional (Dashboard, Distribusi dan Inventory, Asset, Manajemen Kendaraan, Fuel Voucher, Administrasi, Master Data, Pengaturan) berada di balik identitas aplikasi dan hanya dapat diakses sesuai peran yang ditetapkan.

Kepemilikan delivery bersifat first-party: aplikasi memiliki identitas, sesi, data operasional, sinkronisasi, backup, dan audit. Tidak ada permintaan untuk menyerahkan pekerjaan ini ke provider eksternal atau kanal headless. Batas horizon saat ini mencakup seluruh menu, sub-menu, header, dan perbaikan kualitas yang diminta; tidak ada horizon masa depan yang dinyatakan sumber, sehingga tidak ada bagian future yang ditulis.

2b. Source Content Inventory

Tidak ada reference directive dengan content_source pada sumber, sehingga section ini tidak disertakan.

2c. Page Content and Component Coverage

Landing

• Informasi/state: penjelasan singkat aplikasi GA, cakupan menu (distribusi & inventory, asset, kendaraan, fuel voucher, administrasi, master data, pengaturan), dan manfaat dashboard KPI. Tidak menampilkan data operasional apa pun.
• Aksi utama: tombol menuju Login untuk verifikasi kembali; tautan menuju self-service enrollment untuk pengguna baru.
• Aksi pendukung: navigasi ke bagian penjelasan cakupan; toggle mode Siang/Malam pada header publik.
• Entitas domain: tidak ada entitas operasional; hanya metadata aplikasi.
• Tanggung jawab komponen: hero band off-white dengan headline Archivo flush-left; strip penjelasan cakupan sebagai baris spec-sheet (label kiri, nilai kanan); tombol primary tunggal berwarna signal orange.
• State: loading (skeleton teks), empty (tidak berlaku — konten statis), success (halaman tampil), error (fallback teks statis bila konten gagal dimuat), recovery (retry memuat konten).

Login

• Informasi/state: form verifikasi kembali (kredensial), pesan error inline, tautan ke self-service enrollment.
• Aksi utama: submit kredensial untuk masuk.
• Aksi pendukung: toggle tampil/sembunyikan kata sandi; tautan ke enrollment.
• Entitas domain: identitas pengguna (email/username, kata sandi).
• Tanggung jawab komponen: form 2px radius, label caps 11px, tombol primary signal orange tunggal, pesan error di bawah field.
• State: loading (tombol disabled + indikator), empty (form kosong), success (redirect ke Dashboard), error (kredensial salah / akun tidak ditemukan), recovery (pesan jelas + retry tanpa kehilangan input).

Dashboard

• Informasi/state: KPI strip 5 sel hairline-divided (mis. total transaksi distribusi bulan ini, nilai inventory, peminjaman aktif, fuel terpakai, asset terlabel); panel "Transaksi Terakhir"; panel "Stok Kritis"; panel "Peminjaman Jatuh Tempo"; panel pemakaian fuel full-width; header operasional dengan lima kontrol.
• Aksi utama: satu primary action per view (mis. "Catat Transaksi" menuju Distribusi).
• Aksi pendukung: filter periode KPI; klik baris untuk membuka detail; toggle mode; logout.
• Entitas domain: transaksi distribusi, item inventory, peminjaman, fuel voucher, asset, kendaraan.
• Tanggung jawab komponen: KPI strip full-bleed tanpa card/radius/shadow dengan numeral 48px tabular; panel grid 8/4; tabel dengan header sticky; sparkline 12 bulan di belakang numeral KPI; delta orange di bawah numeral.
• State: loading (skeleton numeral + tabel), empty (pesan "Belum ada transaksi pada periode ini"), success (data tampil), error (banner error + retry), recovery (retry per panel tanpa memuat ulang seluruh halaman).

Distribusi dan Inventory

• Informasi/state: ringkasan menu induk dengan baris spec-sheet per kategori (Alat tulis kantor, Groseri, PPE, Tools) berisi jumlah item, stok kritis, dan transaksi terakhir.
• Aksi utama: membuka kategori (Alat tulis kantor / Groseri / PPE / Tools).
• Aksi pendukung: filter periode ringkasan.
• Entitas domain: kategori barang, item inventory, transaksi distribusi.
• Tanggung jawab komponen: daftar baris label-kiri/nilai-kanan dengan hairline; active-nav marker 2px orange.
• State: loading, empty (belum ada kategori terdaftar), success, error + retry.

Alat tulis kantor

• Informasi/state: ringkasan kategori ATK dengan baris menuju Distribusi dan Inventory, plus KPI kecil (total item, stok kritis).
• Aksi utama: membuka Distribusi atau Inventory untuk kategori ATK.
• Aksi pendukung: filter periode.
• Entitas domain: item ATK, transaksi distribusi ATK, saldo inventory ATK.
• Tanggung jawab komponen: spec-sheet rows; KPI strip 3 sel.
• State: loading, empty, success, error + retry.

Distribusi

• Informasi/state: form transaksi distribusi (kategori, item, jumlah, penerima, tanggal, catatan) dan tabel transaksi distribusi lintas kategori dengan kolom konsisten (tanggal, kategori, item, jumlah, penerima, status).
• Aksi utama: menyimpan transaksi distribusi.
• Aksi pendukung: filter kategori/periode; ekspor daftar; buka detail transaksi.
• Entitas domain: transaksi distribusi, item, penerima (karyawan), kategori.
• Tanggung jawab komponen: filter bar label/value; form 2px radius; tabel 0px radius dengan hairline; badge status.
• State: loading, empty ("Belum ada transaksi distribusi"), success (baris baru muncul + stok berkurang), error (validasi jumlah > stok, field wajib kosong) + recovery (pesan inline, data form dipertahankan), recovery (retry simpan).

Inventory

• Informasi/state: daftar item inventory lintas kategori dengan saldo, satuan, lokasi, dan status stok; riwayat pergerakan per item.
• Aksi utama: mencatat penyesuaian inventory (masuk/keluar/koreksi).
• Aksi pendukung: filter kategori/lokasi/status; pencarian item; buka riwayat pergerakan.
• Entitas domain: item inventory, saldo, pergerakan inventory, kategori.
• Tanggung jawab komponen: tabel dengan kolom kuantitas right-aligned tabular; badge stok kritis orange; panel detail item.
• State: loading, empty, success, error (penyesuaian gagal karena konflik saldo) + recovery (muat ulang saldo terbaru dan minta konfirmasi ulang).

Groseri

• Informasi/state: ringkasan kategori Groseri dengan baris menuju Distribusi dan Inventory, plus KPI kecil.
• Aksi utama: membuka Distribusi atau Inventory untuk kategori Groseri.
• Aksi pendukung: filter periode.
• Entitas domain: item groseri, transaksi distribusi groseri, saldo inventory groseri.
• Tanggung jawab komponen: spec-sheet rows; KPI strip 3 sel.
• State: loading, empty, success, error + retry.

PPE

• Informasi/state: ringkasan kategori PPE dengan baris menuju Distribusi, Peminjaman, dan Inventory, plus KPI kecil (stok, peminjaman aktif, jatuh tempo).
• Aksi utama: membuka Distribusi, Peminjaman, atau Inventory untuk kategori PPE.
• Aksi pendukung: filter periode.
• Entitas domain: item PPE, transaksi distribusi PPE, peminjaman PPE, saldo inventory PPE.
• Tanggung jawab komponen: spec-sheet rows; KPI strip 3 sel; badge jatuh tempo orange.
• State: loading, empty, success, error + retry.

Peminjaman

• Informasi/state: daftar peminjaman PPE dan Tools (peminjam, item, jumlah, tanggal pinjam, tanggal jatuh tempo, status), form peminjaman baru, dan aksi pengembalian.
• Aksi utama: mencatat peminjaman baru.
• Aksi pendukung: mencatat pengembalian; filter status/kategori/periode; buka detail peminjaman.
• Entitas domain: peminjaman, item (PPE/Tools), peminjam (karyawan), status peminjaman.
• Tanggung jawab komponen: tabel dengan kolom tanggal right-aligned; badge status (aktif/jatuh tempo/dikembalikan); form 2px radius.
• State: loading, empty ("Belum ada peminjaman"), success (peminjaman tercatat, stok tersedia berkurang), error (jumlah melebihi stok tersedia, tanggal tidak valid) + recovery (pesan inline, form dipertahankan), recovery (retry simpan).

Tools

• Informasi/state: ringkasan kategori Tools dengan baris menuju Distribusi, Peminjaman, dan Inventory, plus KPI kecil.
• Aksi utama: membuka Distribusi, Peminjaman, atau Inventory untuk kategori Tools.
• Aksi pendukung: filter periode.
• Entitas domain: item tools, transaksi distribusi tools, peminjaman tools, saldo inventory tools.
• Tanggung jawab komponen: spec-sheet rows; KPI strip 3 sel.
• State: loading, empty, success, error + retry.

Asset

• Informasi/state: ringkasan menu asset dengan baris menuju List Asset dan Pelabelan Asset, plus KPI kecil (total asset, asset terlabel, asset belum terlabel).
• Aksi utama: membuka List Asset atau Pelabelan Asset.
• Aksi pendukung: filter periode/kategori asset.
• Entitas domain: asset, status pelabelan.
• Tanggung jawab komponen: spec-sheet rows; KPI strip 3 sel.
• State: loading, empty, success, error + retry.

List Asset

• Informasi/state: daftar asset dengan kode asset, nama, kategori, lokasi, penanggung jawab, status, dan status pelabelan; detail asset.
• Aksi utama: menambah/memperbarui data asset.
• Aksi pendukung: filter kategori/lokasi/status pelabelan; pencarian; buka detail asset; menuju Pelabelan Asset untuk asset terpilih.
• Entitas domain: asset, kategori asset, lokasi, penanggung jawab (karyawan), status pelabelan.
• Tanggung jawab komponen: tabel 0px radius dengan hairline; badge status pelabelan; panel detail asset.
• State: loading, empty ("Belum ada asset terdaftar"), success, error (validasi kode asset duplikat / field wajib kosong) + recovery (pesan inline, form dipertahankan).

Pelabelan Asset

• Informasi/state: preview label cetak 40×40mm dengan blok QR nyata, kode asset dalam caps mono 13px, dan data asset terkait; status pelabelan per asset.
• Aksi utama: tombol primary "CETAK LABEL" berwarna signal orange (satu-satunya tombol orange di halaman).
• Aksi pendukung: memilih asset dari daftar; memperbarui status pelabelan setelah cetak; pratinjau ulang QR.
• Entitas domain: asset, nomor QR, status pelabelan.
• Tanggung jawab komponen: preview label printable; generator QR; tombol primary tunggal; tabel asset belum terlabel.
• State: loading (generate QR), empty (semua asset sudah terlabel), success (label tercetak + status diperbarui), error (QR gagal dibuat / asset tidak ditemukan) + recovery (retry generate, pilih asset lain).

Manajemen Kendaraan

• Informasi/state: ringkasan menu kendaraan dengan baris menuju Administrasi Kendaraan dan List Commuting, plus KPI kecil (jumlah kendaraan, commuting aktif).
• Aksi utama: membuka Administrasi Kendaraan atau List Commuting.
• Aksi pendukung: filter periode.
• Entitas domain: kendaraan, commuting.
• Tanggung jawab komponen: spec-sheet rows; KPI strip 3 sel.
• State: loading, empty, success, error + retry.

Administrasi Kendaraan

• Informasi/state: data administrasi kendaraan (nomor polisi, jenis, merek/model, masa berlaku pajak/STNK/KIR, penanggung jawab, status) dan riwayat administrasi.
• Aksi utama: mencatat/memperbarui administrasi kendaraan.
• Aksi pendukung: filter status/masa berlaku; pencarian; buka detail kendaraan.
• Entitas domain: kendaraan, dokumen administrasi, tanggal berlaku, penanggung jawab.
• Tanggung jawab komponen: tabel dengan kolom tanggal right-aligned; badge peringatan masa berlaku (orange); form 2px radius.
• State: loading, empty, success, error (validasi field wajib / tanggal tidak valid) + recovery (pesan inline, form dipertahankan).

List Commuting

• Informasi/state: daftar commuting (kendaraan, pengemudi, tujuan, tanggal/waktu, status) dan form pencatatan commuting.
• Aksi utama: mencatat commuting baru.
• Aksi pendukung: filter kendaraan/periode/status; pencarian; buka detail commuting.
• Entitas domain: commuting, kendaraan, pengemudi (karyawan), status.
• Tanggung jawab komponen: tabel dengan kolom tanggal/waktu right-aligned; badge status; form 2px radius.
• State: loading, empty ("Belum ada commuting tercatat"), success, error (validasi kendaraan/pengemudi wajib) + recovery (pesan inline, form dipertahankan).

Fuel Voucher

• Informasi/state: ringkasan menu fuel voucher dengan baris menuju Pengambilan dan Penyerahan Fuel dan Laporan Pemakaian Fuel, plus KPI kecil (voucher aktif, fuel terpakai bulan ini).
• Aksi utama: membuka Pengambilan dan Penyerahan Fuel atau Laporan Pemakaian Fuel.
• Aksi pendukung: filter periode.
• Entitas domain: fuel voucher, transaksi fuel.
• Tanggung jawab komponen: spec-sheet rows; KPI strip 3 sel.
• State: loading, empty, success, error + retry.

Pengambilan dan Penyerahan Fuel

• Informasi/state: form pencatatan pengambilan fuel (voucher, kendaraan, jumlah, tanggal/waktu, pengambil) dan penyerahan fuel (penerima, jumlah diserahkan, selisih, catatan); daftar transaksi pengambilan/penyerahan.
• Aksi utama: mencatat pengambilan fuel.
• Aksi pendukung: mencatat penyerahan fuel; filter periode/kendaraan; buka detail transaksi.
• Entitas domain: fuel voucher, transaksi pengambilan, transaksi penyerahan, kendaraan, pengambil/penerima (karyawan).
• Tanggung jawab komponen: form 2px radius; tabel dengan kolom kuantitas right-aligned tabular; badge status (diambil/diserahkan); indikator selisih.
• State: loading, empty, success (pengambilan/penyerahan tercatat), error (voucher tidak valid / jumlah tidak sesuai) + recovery (pesan inline, form dipertahankan), recovery (retry simpan).

Laporan Pemakaian Fuel

• Informasi/state: laporan pemakaian fuel per periode/kendaraan/voucher dengan total, rata-rata, dan tren; grafik garis konsumsi fuel graphite dengan satu titik data orange.
• Aksi utama: menampilkan laporan untuk periode terpilih.
• Aksi pendukung: filter periode/kendaraan; ekspor laporan.
• Entitas domain: transaksi fuel, kendaraan, voucher, periode.
• Tanggung jawab komponen: filter bar label/value; grafik garis graphite + titik orange; tabel ringkasan dengan kolom kuantitas right-aligned.
• State: loading, empty ("Belum ada pemakaian fuel pada periode ini"), success, error (gagal memuat laporan) + recovery (retry dengan filter dipertahankan).

Administrasi

• Informasi/state: ringkasan menu administrasi dengan baris menuju SOP Pekerjaan, Transmittal, dan Lainnya.
• Aksi utama: membuka salah satu sub-menu administrasi.
• Aksi pendukung: filter periode.
• Entitas domain: SOP, transmittal, dokumen administrasi lainnya.
• Tanggung jawab komponen: spec-sheet rows.
• State: loading, empty, success, error + retry.

SOP Pekerjaan

• Informasi/state: daftar SOP pekerjaan (judul, kategori, versi, tanggal berlaku, status, pemilik) dan detail SOP.
• Aksi utama: menambah/memperbarui SOP pekerjaan.
• Aksi pendukung: filter kategori/status; pencarian; buka detail SOP.
• Entitas domain: SOP, versi, kategori, pemilik (karyawan), status.
• Tanggung jawab komponen: tabel dengan hairline; badge status; form 2px radius.
• State: loading, empty ("Belum ada SOP terdaftar"), success, error (validasi field wajib) + recovery (pesan inline, form dipertahankan).

Transmittal

• Informasi/state: daftar transmittal (nomor, pengirim, penerima, tanggal, perihal, status) dan detail transmittal.
• Aksi utama: mencatat transmittal baru.
• Aksi pendukung: filter periode/status; pencarian; buka detail transmittal.
• Entitas domain: transmittal, pengirim/penerima (karyawan), status, tanggal.
• Tanggung jawab komponen: tabel dengan kolom tanggal right-aligned; badge status; form 2px radius.
• State: loading, empty, success, error (validasi field wajib) + recovery (pesan inline, form dipertahankan).

Lainnya

• Informasi/state: daftar administrasi lain yang termasuk dalam scope (mis. dokumen/administrasi pendukung GA) dengan judul, kategori, tanggal, status.
• Aksi utama: mencatat administrasi lainnya.
• Aksi pendukung: filter kategori/periode; pencarian; buka detail.
• Entitas domain: dokumen administrasi, kategori, status, tanggal.
• Tanggung jawab komponen: tabel dengan hairline; badge status; form 2px radius.
• State: loading, empty, success, error (validasi field wajib) + recovery (pesan inline, form dipertahankan).

Master Data

• Informasi/state: ringkasan menu master data dengan baris menuju List Karyawan dan List Kendaraan.
• Aksi utama: membuka List Karyawan atau List Kendaraan.
• Aksi pendukung: filter periode.
• Entitas domain: karyawan, kendaraan.
• Tanggung jawab komponen: spec-sheet rows.
• State: loading, empty, success, error + retry.

List Karyawan

• Informasi/state: daftar karyawan (NIK, nama, departemen, jabatan, status, kontak) dan detail karyawan.
• Aksi utama: menambah/memperbarui data karyawan.
• Aksi pendukung: filter departemen/status; pencarian; buka detail karyawan.
• Entitas domain: karyawan, departemen, jabatan, status.
• Tanggung jawab komponen: tabel dengan hairline; badge status; form 2px radius.
• State: loading, empty ("Belum ada karyawan terdaftar"), success, error (validasi NIK duplikat / field wajib kosong) + recovery (pesan inline, form dipertahankan).

List Kendaraan

• Informasi/state: daftar kendaraan (nomor polisi, jenis, merek/model, tahun, status, penanggung jawab) dan detail kendaraan.
• Aksi utama: menambah/memperbarui data kendaraan.
• Aksi pendukung: filter jenis/status; pencarian; buka detail kendaraan.
• Entitas domain: kendaraan, jenis, status, penanggung jawab (karyawan).
• Tanggung jawab komponen: tabel dengan hairline; badge status; form 2px radius.
• State: loading, empty, success, error (validasi nomor polisi duplikat / field wajib kosong) + recovery (pesan inline, form dipertahankan).

Pengaturan

• Informasi/state: ringkasan menu pengaturan dengan baris menuju Manajemen Akun, Sync & Backup, dan Log Riwayat Audit.
• Aksi utama: membuka salah satu sub-menu pengaturan.
• Aksi pendukung: filter periode.
• Entitas domain: akun, sinkronisasi, backup, audit.
• Tanggung jawab komponen: spec-sheet rows.
• State: loading, empty, success, error + retry.

Manajemen Akun

• Informasi/state: daftar akun pengguna (nama, email/username, peran, status aktif, terakhir login) dan detail akun.
• Aksi utama: menambah/memperbarui akun pengguna dan menetapkan peran.
• Aksi pendukung: mengaktifkan/menonaktifkan akun; filter peran/status; pencarian; buka detail akun.
• Entitas domain: akun, peran, status aktif, riwayat login.
• Tanggung jawab komponen: tabel dengan hairline; badge status; form 2px radius; kontrol peran.
• State: loading, empty, success, error (validasi email duplikat / peran wajib) + recovery (pesan inline, form dipertahankan).

Sync & Backup

• Informasi/state: status sinkronisasi terakhir, riwayat sinkronisasi, status backup terakhir, riwayat backup, dan kontrol menjalankan sinkronisasi/backup.
• Aksi utama: menjalankan sinkronisasi dan/atau backup.
• Aksi pendukung: melihat riwayat; filter periode.
• Entitas domain: job sinkronisasi, job backup, status, waktu, hasil.
• Tanggung jawab komponen: panel status dengan lampu indikator; tabel riwayat dengan kolom waktu right-aligned; tombol primary tunggal.
• State: loading (job berjalan, indikator sync berdenyut), empty (belum ada riwayat), success (job selesai + riwayat bertambah), error (job gagal) + recovery (pesan error + retry job).

Log Riwayat Audit

• Informasi/state: daftar jejak audit (waktu, aktor, aksi, entitas, nilai sebelum/sesudah, hasil) dengan filter dan pencarian.
• Aksi utama: menampilkan dan memfilter log audit.
• Aksi pendukung: filter aktor/aksi/entitas/periode; pencarian; buka detail entri.
• Entitas domain: entri audit, aktor, aksi, entitas, waktu.
• Tanggung jawab komponen: tabel 0px radius dengan hairline; kolom waktu right-aligned tabular; panel detail entri.
• State: loading, empty ("Belum ada aktivitas audit pada periode ini"), success, error (gagal memuat log) + recovery (retry dengan filter dipertahankan).

3. Functional Requirements

Setiap story point menyertakan provenance, lifecycle facts, dan acceptance yang dapat diamati.

FR-01 — Dashboard KPI lintas menu (explicit) As a GA Supervisor / Admin GA, I should melihat dashboard dengan KPI lengkap yang mengumpulkan data penting dari setiap menu/sub-menu, sehingga saya dapat mengambil keputusan operasional berbasis data.

• Trigger: membuka Dashboard setelah login.
• Observable result: KPI strip 5 sel hairline-divided menampilkan numeral tabular 48px dengan micro-label caps 11px dan delta orange; panel "Transaksi Terakhir", "Stok Kritis", "Peminjaman Jatuh Tempo", dan pemakaian fuel full-width terisi dari data menu terkait.
• Access: login.
• Failure/recovery: bila salah satu panel gagal dimuat, banner error muncul pada panel tersebut dengan tombol retry tanpa memuat ulang seluruh halaman.
• Continuation: klik baris membuka detail entitas terkait.

FR-02 — Distribusi Alat tulis kantor (explicit) As a GA Staff / Operator GA, I should mencatat distribusi alat tulis kantor, sehingga setiap penyerahan ATK tercatat akurat.

• Trigger: membuka Distribusi dari kategori Alat tulis kantor dan menyimpan form.
• Observable result: transaksi distribusi tersimpan, muncul di tabel transaksi, dan saldo inventory ATK berkurang sesuai jumlah.
• Access: role_restricted (GA Staff / Operator GA).
• Failure/recovery: validasi jumlah melebihi stok atau field wajib kosong menampilkan pesan inline dan mempertahankan isi form.
• Continuation: transaksi terlihat di Dashboard dan Inventory.

FR-03 — Inventory Alat tulis kantor (explicit) As a GA Staff / Operator GA, I should mencatat dan memantau inventory alat tulis kantor, sehingga stok ATK tetap konsisten.

• Trigger: membuka Inventory dari kategori Alat tulis kantor.
• Observable result: daftar item ATK dengan saldo, satuan, lokasi, dan status stok; penyesuaian inventory tercatat sebagai pergerakan.
• Access: role_restricted (GA Staff / Operator GA).
• Failure/recovery: konflik saldo saat penyesuaian memicu muat ulang saldo terbaru dan konfirmasi ulang.
• Continuation: saldo terbaru tercermin di Dashboard.

FR-04 — Distribusi Groseri (explicit) As a GA Staff / Operator GA, I should mencatat distribusi groseri, sehingga penyerahan groseri tercatat akurat.

• Trigger: membuka Distribusi dari kategori Groseri dan menyimpan form.
• Observable result: transaksi tersimpan dan saldo inventory groseri berkurang.
• Access: role_restricted (GA Staff / Operator GA).
• Failure/recovery: validasi gagal menampilkan pesan inline dan mempertahankan form.
• Continuation: transaksi terlihat di Dashboard dan Inventory.

FR-05 — Inventory Groseri (explicit) As a GA Staff / Operator GA, I should mencatat dan memantau inventory groseri, sehingga stok groseri tetap konsisten.

• Trigger: membuka Inventory dari kategori Groseri.
• Observable result: daftar item groseri dengan saldo dan status stok; penyesuaian tercatat.
• Access: role_restricted (GA Staff / Operator GA).
• Failure/recovery: konflik saldo memicu muat ulang dan konfirmasi ulang.
• Continuation: saldo terbaru tercermin di Dashboard.

FR-06 — Distribusi PPE (explicit) As a GA Staff / Operator GA, I should mencatat distribusi PPE, sehingga penyerahan PPE tercatat akurat.

• Trigger: membuka Distribusi dari kategori PPE dan menyimpan form.
• Observable result: transaksi tersimpan dan saldo inventory PPE berkurang.
• Access: role_restricted (GA Staff / Operator GA).
• Failure/recovery: validasi gagal menampilkan pesan inline dan mempertahankan form.
• Continuation: transaksi terlihat di Dashboard dan Inventory.

FR-07 — Peminjaman PPE (explicit) As a GA Staff / Operator GA, I should mencatat peminjaman PPE dan pengembaliannya, sehingga peminjaman PPE terlacak.

• Trigger: membuka Peminjaman dari kategori PPE dan menyimpan form peminjaman.
• Observable result: peminjaman tercatat dengan peminjam, item, jumlah, tanggal pinjam, tanggal jatuh tempo, dan status; stok tersedia berkurang; pengembalian memperbarui status dan mengembalikan stok.
• Access: role_restricted (GA Staff / Operator GA).
• Failure/recovery: jumlah melebihi stok tersedia atau tanggal tidak valid menampilkan pesan inline dan mempertahankan form.
• Continuation: peminjaman jatuh tempo muncul di Dashboard.

FR-08 — Inventory PPE (explicit) As a GA Staff / Operator GA, I should mencatat dan memantau inventory PPE, sehingga stok PPE tetap konsisten.

• Trigger: membuka Inventory dari kategori PPE.
• Observable result: daftar item PPE dengan saldo dan status stok; penyesuaian tercatat.
• Access: role_restricted (GA Staff / Operator GA).
• Failure/recovery: konflik saldo memicu muat ulang dan konfirmasi ulang.
• Continuation: saldo terbaru tercermin di Dashboard.

FR-09 — Distribusi Tools (explicit) As a GA Staff / Operator GA, I should mencatat distribusi tools, sehingga penyerahan tools tercatat akurat.

• Trigger: membuka Distribusi dari kategori Tools dan menyimpan form.
• Observable result: transaksi tersimpan dan saldo inventory tools berkurang.
• Access: role_restricted (GA Staff / Operator GA).
• Failure/recovery: validasi gagal menampilkan pesan inline dan mempertahankan form.
• Continuation: transaksi terlihat di Dashboard dan Inventory.

FR-10 — Peminjaman Tools (explicit) As a GA Staff / Operator GA, I should mencatat peminjaman tools dan pengembaliannya, sehingga peminjaman tools terlacak.

• Trigger: membuka Peminjaman dari kategori Tools dan menyimpan form peminjaman.
• Observable result: peminjaman tercatat dengan status; stok tersedia berkurang; pengembalian memperbarui status dan mengembalikan stok.
• Access: role_restricted (GA Staff / Operator GA).
• Failure/recovery: jumlah melebihi stok tersedia atau tanggal tidak valid menampilkan pesan inline dan mempertahankan form.
• Continuation: peminjaman jatuh tempo muncul di Dashboard.

FR-11 — Inventory Tools (explicit) As a GA Staff / Operator GA, I should mencatat dan memantau inventory tools, sehingga stok tools tetap konsisten.

• Trigger: membuka Inventory dari kategori Tools.
• Observable result: daftar item tools dengan saldo dan status stok; penyesuaian tercatat.
• Access: role_restricted (GA Staff / Operator GA).
• Failure/recovery: konflik saldo memicu muat ulang dan konfirmasi ulang.
• Continuation: saldo terbaru tercermin di Dashboard.

FR-12 — List Asset (explicit) As an Asset & Labeling Officer, I should melihat dan mengelola daftar asset, sehingga seluruh asset terdaftar dengan data lengkap.

• Trigger: membuka List Asset.
• Observable result: daftar asset dengan kode asset, nama, kategori, lokasi, penanggung jawab, status, dan status pelabelan; penambahan/pembaruan tersimpan.
• Access: role_restricted (Asset & Labeling Officer).
• Failure/recovery: kode asset duplikat atau field wajib kosong menampilkan pesan inline dan mempertahankan form.
• Continuation: asset terpilih dapat langsung menuju Pelabelan Asset.

FR-13 — Pelabelan Asset (No QR) (explicit) As an Asset & Labeling Officer, I should melakukan pelabelan asset dengan nomor QR, sehingga seluruh asset terlabel dengan benar.

• Trigger: membuka Pelabelan Asset dan memilih asset.
• Observable result: preview label 40×40mm dengan blok QR nyata dan kode asset caps mono 13px; tombol "CETAK LABEL" berwarna signal orange; status pelabelan asset diperbarui setelah cetak.
• Access: role_restricted (Asset & Labeling Officer).
• Failure/recovery: QR gagal dibuat atau asset tidak ditemukan menampilkan pesan error dengan retry generate atau pilih asset lain.
• Continuation: asset berpindah ke status terlabel dan hilang dari daftar belum terlabel.

FR-14 — Administrasi Kendaraan (explicit) As a GA Staff / Operator GA, I should mencatat administrasi kendaraan, sehingga data administrasi kendaraan selalu mutakhir.

• Trigger: membuka Administrasi Kendaraan dan menyimpan form.
• Observable result: data administrasi kendaraan (nomor polisi, jenis, merek/model, masa berlaku pajak/STNK/KIR, penanggung jawab, status) tersimpan dan riwayat administrasi bertambah.
• Access: role_restricted (GA Staff / Operator GA, GA Supervisor / Admin GA).
• Failure/recovery: field wajib kosong atau tanggal tidak valid menampilkan pesan inline dan mempertahankan form.
• Continuation: masa berlaku mendekati jatuh tempo ditandai badge orange.

FR-15 — List Commuting (explicit) As a GA Staff / Operator GA, I should mencatat dan melihat list commuting, sehingga perjalanan kendaraan terlacak.

• Trigger: membuka List Commuting dan menyimpan form commuting.
• Observable result: commuting tercatat dengan kendaraan, pengemudi, tujuan, tanggal/waktu, dan status.
• Access: role_restricted (GA Staff / Operator GA).
• Failure/recovery: kendaraan/pengemudi wajib kosong menampilkan pesan inline dan mempertahankan form.
• Continuation: commuting terlihat di Dashboard.

FR-16 — Pengambilan dan Penyerahan Fuel (explicit) As a GA Staff / Operator GA, I should mencatat pengambilan dan penyerahan fuel, sehingga aliran fuel voucher terlacak.

• Trigger: membuka Pengambilan dan Penyerahan Fuel dan menyimpan form pengambilan atau penyerahan.
• Observable result: transaksi pengambilan (voucher, kendaraan, jumlah, tanggal/waktu, pengambil) dan penyerahan (penerima, jumlah diserahkan, selisih, catatan) tersimpan dengan status dan indikator selisih.
• Access: role_restricted (GA Staff / Operator GA).
• Failure/recovery: voucher tidak valid atau jumlah tidak sesuai menampilkan pesan inline dan mempertahankan form.
• Continuation: transaksi masuk ke Laporan Pemakaian Fuel.

FR-17 — Laporan Pemakaian Fuel (explicit) As a GA Supervisor / Admin GA, I should melihat laporan pemakaian fuel, sehingga konsumsi fuel dapat dianalisis.

• Trigger: membuka Laporan Pemakaian Fuel dan memilih periode/kendaraan.
• Observable result: laporan menampilkan total, rata-rata, dan tren pemakaian fuel dengan grafik garis graphite dan satu titik data orange, serta tabel ringkasan.
• Access: role_restricted (GA Supervisor / Admin GA).
• Failure/recovery: gagal memuat laporan menampilkan pesan error dengan retry tanpa kehilangan filter.
• Continuation: laporan dapat diekspor.

FR-18 — SOP Pekerjaan (explicit) As a GA Supervisor / Admin GA, I should mengelola SOP pekerjaan, sehingga prosedur GA terdokumentasi dan terkontrol versinya.

• Trigger: membuka SOP Pekerjaan dan menyimpan form.
• Observable result: SOP tercatat dengan judul, kategori, versi, tanggal berlaku, status, dan pemilik.
• Access: role_restricted (GA Supervisor / Admin GA).
• Failure/recovery: field wajib kosong menampilkan pesan inline dan mempertahankan form.
• Continuation: SOP terlihat di daftar dan dapat dibuka detailnya.

FR-19 — Transmittal (explicit) As a GA Supervisor / Admin GA, I should mengelola transmittal, sehingga pengiriman dokumen GA terlacak.

• Trigger: membuka Transmittal dan menyimpan form.
• Observable result: transmittal tercatat dengan nomor, pengirim, penerima, tanggal, perihal, dan status.
• Access: role_restricted (GA Supervisor / Admin GA).
• Failure/recovery: field wajib kosong menampilkan pesan inline dan mempertahankan form.
• Continuation: transmittal terlihat di daftar dan dapat dibuka detailnya.

FR-20 — Administrasi Lainnya (explicit) As a GA Supervisor / Admin GA, I should mencatat administrasi lainnya yang termasuk dalam scope, sehingga dokumen administrasi pendukung GA terdokumentasi.

• Trigger: membuka Lainnya dan menyimpan form.
• Observable result: administrasi tercatat dengan judul, kategori, tanggal, dan status.
• Access: role_restricted (GA Supervisor / Admin GA).
• Failure/recovery: field wajib kosong menampilkan pesan inline dan mempertahankan form.
• Continuation: entri terlihat di daftar dan dapat dibuka detailnya.

FR-21 — List Karyawan (explicit) As a GA Supervisor / Admin GA, I should mengelola master data karyawan, sehingga data karyawan akurat untuk referensi transaksi.

• Trigger: membuka List Karyawan dan menyimpan form.
• Observable result: karyawan tercatat dengan NIK, nama, departemen, jabatan, status, dan kontak.
• Access: role_restricted (GA Supervisor / Admin GA).
• Failure/recovery: NIK duplikat atau field wajib kosong menampilkan pesan inline dan mempertahankan form.
• Continuation: karyawan dapat dipilih sebagai penerima/peminjam di transaksi.

FR-22 — List Kendaraan (explicit) As a GA Supervisor / Admin GA, I should mengelola master data kendaraan, sehingga data kendaraan akurat untuk referensi transaksi.

• Trigger: membuka List Kendaraan dan menyimpan form.
• Observable result: kendaraan tercatat dengan nomor polisi, jenis, merek/model, tahun, status, dan penanggung jawab.
• Access: role_restricted (GA Supervisor / Admin GA).
• Failure/recovery: nomor polisi duplikat atau field wajib kosong menampilkan pesan inline dan mempertahankan form.
• Continuation: kendaraan dapat dipilih di administrasi kendaraan, commuting, dan fuel voucher.

FR-23 — Manajemen Akun (explicit) As a System Administrator, I should mengelola akun pengguna dan perannya, sehingga akses aplikasi terkendali.

• Trigger: membuka Manajemen Akun dan menyimpan form.
• Observable result: akun tercatat dengan nama, email/username, peran, status aktif, dan terakhir login; perubahan peran berlaku pada akses berikutnya.
• Access: role_restricted (System Administrator).
• Failure/recovery: email duplikat atau peran wajib kosong menampilkan pesan inline dan mempertahankan form.
• Continuation: akun aktif dapat login dan mengakses destination sesuai perannya.

FR-24 — Sync & Backup (explicit) As a System Administrator, I should menjalankan sinkronisasi dan backup serta melihat riwayatnya, sehingga data tersinkronisasi dan ter-backup.

• Trigger: membuka Sync & Backup dan menjalankan job.
• Observable result: status sinkronisasi/backup terakhir dan riwayat job tampil; lampu indikator sync berdenyut selama job berjalan dan kembali stabil setelah selesai.
• Access: role_restricted (System Administrator).
• Failure/recovery: job gagal menampilkan pesan error dengan tombol retry.
• Continuation: riwayat job bertambah dan dapat difilter.

FR-25 — Log Riwayat Audit (explicit) As a System Administrator, I should meninjau log riwayat audit, sehingga jejak aktivitas dapat ditelusuri.

• Trigger: membuka Log Riwayat Audit dan menerapkan filter.
• Observable result: daftar entri audit (waktu, aktor, aksi, entitas, nilai sebelum/sesudah, hasil) tampil dan dapat difilter/dicari.
• Access: role_restricted (System Administrator).
• Failure/recovery: gagal memuat log menampilkan pesan error dengan retry tanpa kehilangan filter.
• Continuation: entri dapat dibuka detailnya.

FR-26 — Header operasional (explicit) As a GA Staff / Operator GA, I should melihat header dengan lima kontrol yang diminta, sehingga saya selalu tahu mode tampilan, status sync, waktu, identitas saya, dan dapat keluar.

• Trigger: setiap halaman setelah login.
• Observable result: header graphite 64px menampilkan (1) toggle mode Siang/Malam, (2) lampu indikator Sync 10px hijau #22C55E saat terhubung dan abu-abu #8C8880 saat tidak terhubung, berdenyut 2s hanya saat sinkronisasi berjalan, (3) tanggal & jam aktual tabular yang diperbarui setiap detik, (4) profil user login dengan inisial dalam kotak 2px radius, (5) tombol logout.
• Access: login.
• Failure/recovery: bila koneksi sync terputus, lampu berubah abu-abu tanpa menghentikan pekerjaan; pengguna dapat melanjutkan dan mencoba sync lagi dari Sync & Backup.
• Continuation: logout mengakhiri sesi dan mengembalikan ke Landing.

FR-27 — Ganti mode Siang/Malam (explicit) As a GA Staff / Operator GA, I should mengganti mode tampilan antara Siang dan Malam, sehingga tampilan nyaman pada kondisi cahaya berbeda.

• Trigger: menekan toggle mode di header.
• Observable result: seluruh surface bertransisi crossfade 180ms antara palet light (#F2F0EB ground, #FFFFFF surface, #1A1A18 text) dan dark (#141413 ground, #1E1E1C surface, #F2F0EB text); semantik warna status (termasuk orange signal) tetap sama.
• Access: login.
• Failure/recovery: bila preferensi gagal disimpan, mode tetap berlaku pada sesi berjalan dan pengguna dapat mencoba lagi.
• Continuation: preferensi mode dipertahankan pada kunjungan berikutnya.

FR-28 — Self-service enrollment (required_inference) As a GA Staff / Operator GA, I should mendaftarkan akun saya sendiri sebelum penggunaan pertama, sehingga saya dapat mengakses data GA yang terlindungi.

• Trigger: membuka tautan enrollment dari Landing atau Login.
• Observable result: akun terbentuk dan pengguna dapat melakukan verifikasi kembali melalui Login.
• Access: anonim (entry).
• Failure/recovery: email sudah terdaftar atau data tidak valid menampilkan pesan inline dan mempertahankan input.
• Continuation: pengguna diarahkan ke Login.

FR-29 — Returning verification melalui Login (required_inference) As a GA Staff / Operator GA, I should melakukan verifikasi kembali melalui Login, sehingga saya dapat mengakses data GA yang terlindungi.

• Trigger: submit kredensial pada Login.
• Observable result: sesi terbentuk dan pengguna diarahkan ke Dashboard.
• Access: anonim (entry).
• Failure/recovery: kredensial salah menampilkan pesan error tanpa mengungkap detail sensitif; pengguna dapat mencoba lagi.
• Continuation: pengguna mengakses destination sesuai perannya.

FR-30 — Otorisasi akses administratif dan lintas-peran (required_inference) As a System Administrator, I should menerapkan akses administratif dan lintas-peran sesuai otorisasi, sehingga data GA hanya dapat diakses oleh peran yang berhak.

• Trigger: pengguna membuka destination yang dibatasi peran.
• Observable result: destination hanya dapat diakses oleh peran yang ditetapkan; percobaan akses di luar peran ditolak.
• Access: login + role_restricted.
• Failure/recovery: akses ditolak menampilkan pesan yang jelas dan mengarahkan kembali ke destination yang diizinkan.
• Continuation: pengguna melanjutkan pekerjaan pada destination yang diizinkan.

FR-31 — Backend durable untuk transaksi, konsistensi, sync, backup, dan audit (required_inference) As a System Administrator, I should mengandalkan backend yang menyimpan transaksi durable, menjaga konsistensi inventory, menjalankan sinkronisasi, backup, dan audit, sehingga data GA dapat dipercaya.

• Trigger: setiap transaksi atau job yang disimpan.
• Observable result: transaksi tersimpan durable; saldo inventory konsisten; job sync/backup tercatat; entri audit tertulis.
• Access: sistem (tanpa interaksi manusia langsung).
• Failure/recovery: kegagalan penyimpanan atau job menampilkan error pada UI terkait dengan retry.
• Continuation: data konsisten tersedia untuk Dashboard dan laporan.

FR-32 — Perbaikan stabilitas, kualitas kode, bug, keamanan, arsitektur & alur data (explicit) As a System Administrator, I should mendapatkan aplikasi dengan stabilitas, prioritas, kualitas kode & maintainability, bug & masalah logika, keamanan (temuan kritis), fitur, arsitektur & alur data yang diperbaiki, sehingga aplikasi dapat diandalkan untuk pekerjaan GA harian.

• Trigger: penggunaan aplikasi sehari-hari dan peninjauan log audit.
• Observable result: tidak ada error tak tertangani pada alur utama; validasi konsisten; alur data transaksi → inventory → dashboard konsisten; temuan keamanan kritis tertangani (kontrol akses per peran, validasi input, sesi aman).
• Access: login.
• Failure/recovery: kegagalan yang terdeteksi menampilkan pesan yang dapat ditindaklanjuti dan tercatat di log audit.
• Continuation: pekerjaan GA berlanjut tanpa kehilangan data.

4. User Personas

GA Staff / Operator GA

• Konteks produk: petugas GA harian yang menjalankan transaksi operasional sepanjang hari kerja — mencatat distribusi dan inventory alat tulis kantor, groseri, PPE, dan tools; menangani peminjaman PPE dan tools; melakukan pengambilan dan penyerahan fuel voucher; mencatat administrasi kendaraan dan list commuting.
• Tujuan utama: setiap transaksi tercatat akurat dan stok/inventory tetap konsisten.
• Tanggung jawab yang diterima: distribusi ATK/groseri/PPE/tools; inventory ATK/groseri/PPE/tools; peminjaman PPE dan tools; administrasi kendaraan; list commuting; pengambilan dan penyerahan fuel.
• Input/keputusan: memilih kategori dan item, jumlah, penerima/peminjam, tanggal, dan catatan; memutuskan kapan mencatat pengembalian; memutuskan penyesuaian inventory saat ada selisih.
• Interaksi dengan peserta lain: menerima data karyawan dan kendaraan dari GA Supervisor / Admin GA; menyerahkan transaksi yang tercatat ke Dashboard untuk dipantau supervisor; berinteraksi dengan Asset & Labeling Officer saat item perlu dirujuk ke asset.
• Keberhasilan yang dapat diamati: transaksi muncul di tabel dan Dashboard, saldo inventory berkurang/bertambah sesuai, dan tidak ada validasi yang gagal tanpa penjelasan.

GA Supervisor / Admin GA

• Konteks produk: penanggung jawab GA yang memantau KPI dashboard, meninjau laporan pemakaian fuel, mengelola SOP pekerjaan dan transmittal, serta mengelola master data karyawan dan kendaraan.
• Tujuan utama: keputusan operasional berbasis data KPI dan laporan yang lengkap.
• Tanggung jawab yang diterima: pemantauan KPI dashboard; laporan pemakaian fuel; SOP pekerjaan; transmittal; administrasi lainnya; master data karyawan; master data kendaraan; administrasi kendaraan (bersama GA Staff).
• Input/keputusan: memilih periode dan filter laporan; memutuskan pembaruan SOP dan versinya; memutuskan pencatatan transmittal; memutuskan pembaruan master data.
• Interaksi dengan peserta lain: menerima transaksi dari GA Staff / Operator GA melalui Dashboard; menyediakan data master karyawan dan kendaraan yang dipakai GA Staff; berkoordinasi dengan System Administrator untuk akun dan audit.
• Keberhasilan yang dapat diamati: KPI dan laporan menampilkan angka yang konsisten dengan transaksi; SOP, transmittal, dan master data mutakhir.

Asset & Labeling Officer

• Konteks produk: petugas yang mengelola daftar asset dan melakukan pelabelan asset dengan nomor QR, termasuk menjaga kelengkapan data asset dan status pelabelan.
• Tujuan utama: seluruh asset terdaftar dan terlabel dengan benar.
• Tanggung jawab yang diterima: list asset; pelabelan asset dengan nomor QR.
• Input/keputusan: data asset (kode, nama, kategori, lokasi, penanggung jawab, status); memutuskan kapan mencetak label; memutuskan pembaruan status pelabelan.
• Interaksi dengan peserta lain: merujuk data karyawan sebagai penanggung jawab asset; menyediakan status asset untuk KPI Dashboard yang dipantau GA Supervisor / Admin GA.
• Keberhasilan yang dapat diamati: asset muncul di daftar dengan status pelabelan yang benar; label tercetak dengan QR nyata dan kode asset yang tepat.

System Administrator

• Konteks produk: pengelola aplikasi yang menangani manajemen akun, sinkronisasi & backup data, serta meninjau log riwayat audit.
• Tujuan utama: akun pengguna terkelola, data tersinkronisasi dan ter-backup, serta jejak audit dapat ditelusuri.
• Tanggung jawab yang diterima: manajemen akun; sync & backup; log riwayat audit; penerapan otorisasi akses administratif dan lintas-peran.
• Input/keputusan: data akun dan peran; memutuskan kapan menjalankan sinkronisasi/backup; memutuskan tindak lanjut atas temuan pada log audit.
• Interaksi dengan peserta lain: menyediakan akun dan peran bagi GA Staff, GA Supervisor, dan Asset & Labeling Officer; menerima jejak audit dari seluruh aktivitas pengguna.
• Keberhasilan yang dapat diamati: akun aktif dapat login sesuai peran; job sync/backup selesai dan tercatat; entri audit dapat difilter dan ditelusuri.

5. Core User Flows

Flow 1 — GA Staff mencatat distribusi alat tulis kantor

1. GA Staff / Operator GA membuka Landing dan memilih masuk.
2. Pada Login, ia melakukan verifikasi kembali dengan kredensialnya; sesi terbentuk dan ia diarahkan ke Dashboard.
3. Di Dashboard, ia melihat KPI strip dan panel "Stok Kritis"; ia memilih primary action menuju Distribusi dan Inventory.
4. Pada Distribusi dan Inventory, ia memilih baris Alat tulis kantor.
5. Pada Alat tulis kantor, ia memilih Distribusi.
6. Pada Distribusi, ia mengisi form (kategori ATK, item, jumlah, penerima, tanggal, catatan) dan menyimpan.
7. Hasil yang dapat diamati: transaksi tersimpan, muncul di tabel transaksi, dan saldo inventory ATK berkurang.
8. Kegagalan/recovery: bila jumlah melebihi stok atau field wajib kosong, pesan inline muncul dan isi form dipertahankan; ia memperbaiki dan menyimpan ulang.
9. Kelanjutan: transaksi terlihat di Dashboard dan pada Inventory ATK.

Flow 2 — GA Staff menyesuaikan inventory groseri

1. GA Staff / Operator GA membuka Distribusi dan Inventory dari left rail.
2. Ia memilih baris Groseri, lalu Inventory.
3. Pada Inventory, ia mencari item, memeriksa saldo, dan mencatat penyesuaian (masuk/keluar/koreksi).
4. Hasil yang dapat diamati: penyesuaian tercatat sebagai pergerakan inventory dan saldo diperbarui.
5. Kegagalan/recovery: bila terjadi konflik saldo, sistem memuat ulang saldo terbaru dan meminta konfirmasi ulang; ia meninjau dan menyimpan ulang.
6. Kelanjutan: saldo terbaru tercermin di Dashboard.

Flow 3 — GA Staff mencatat peminjaman PPE dan pengembaliannya

1. GA Staff / Operator GA membuka Distribusi dan Inventory, memilih PPE, lalu Peminjaman.
2. Pada Peminjaman, ia mengisi form peminjaman (peminjam, item PPE, jumlah, tanggal pinjam, tanggal jatuh tempo) dan menyimpan.
3. Hasil yang dapat diamati: peminjaman tercatat dengan status aktif; stok tersedia berkurang.
4. Kegagalan/recovery: bila jumlah melebihi stok tersedia atau tanggal tidak valid, pesan inline muncul dan form dipertahankan.
5. Ketika peminjam mengembalikan, ia mencatat pengembalian pada baris peminjaman.
6. Hasil yang dapat diamati: status berubah menjadi dikembalikan dan stok kembali.
7. Kelanjutan: peminjaman yang jatuh tempo muncul di panel "Peminjaman Jatuh Tempo" pada Dashboard.

Flow 4 — GA Staff mencatat peminjaman tools

1. GA Staff / Operator GA membuka Distribusi dan Inventory, memilih Tools, lalu Peminjaman.
2. Ia mengisi form peminjaman tools dan menyimpan.
3. Hasil yang dapat diamati: peminjaman tercatat dengan status; stok tersedia berkurang.
4. Kegagalan/recovery: validasi gagal menampilkan pesan inline dan mempertahankan form.
5. Saat tools dikembalikan, ia mencatat pengembalian; status diperbarui dan stok kembali.
6. Kelanjutan: peminjaman aktif terlihat di Dashboard.

Flow 5 — GA Staff mencatat administrasi kendaraan

1. GA Staff / Operator GA membuka Manajemen Kendaraan, lalu Administrasi Kendaraan.
2. Ia memilih kendaraan dari master data dan mengisi data administrasi (nomor polisi, jenis, merek/model, masa berlaku pajak/STNK/KIR, penanggung jawab, status), lalu menyimpan.
3. Hasil yang dapat diamati: data administrasi tersimpan dan riwayat administrasi bertambah.
4. Kegagalan/recovery: field wajib kosong atau tanggal tidak valid menampilkan pesan inline dan mempertahankan form.
5. Kelanjutan: masa berlaku yang mendekati jatuh tempo ditandai badge orange dan terlihat oleh GA Supervisor / Admin GA.

Flow 6 — GA Staff mencatat commuting

1. GA Staff / Operator GA membuka Manajemen Kendaraan, lalu List Commuting.
2. Ia mengisi form commuting (kendaraan, pengemudi, tujuan, tanggal/waktu, status) dan menyimpan.
3. Hasil yang dapat diamati: commuting tercatat dan muncul di daftar.
4. Kegagalan/recovery: kendaraan/pengemudi wajib kosong menampilkan pesan inline dan mempertahankan form.
5. Kelanjutan: commuting terlihat di Dashboard.

Flow 7 — GA Staff mencatat pengambilan dan penyerahan fuel

1. GA Staff / Operator GA membuka Fuel Voucher, lalu Pengambilan dan Penyerahan Fuel.
2. Ia mencatat pengambilan fuel (voucher, kendaraan, jumlah, tanggal/waktu, pengambil) dan menyimpan.
3. Hasil yang dapat diamati: transaksi pengambilan tersimpan dengan status diambil.
4. Ia kemudian mencatat penyerahan fuel (penerima, jumlah diserahkan, selisih, catatan) dan menyimpan.
5. Hasil yang dapat diamati: status berubah menjadi diserahkan dan indikator selisih tampil.
6. Kegagalan/recovery: voucher tidak valid atau jumlah tidak sesuai menampilkan pesan inline dan mempertahankan form.
7. Kelanjutan: transaksi masuk ke Laporan Pemakaian Fuel.

Flow 8 — GA Supervisor memantau KPI dashboard

1. GA Supervisor / Admin GA login melalui Login dan diarahkan ke Dashboard.
2. Ia membaca KPI strip 5 sel (numeral tabular 48px, micro-label caps, delta orange) dan panel "Transaksi Terakhir", "Stok Kritis", "Peminjaman Jatuh Tempo", serta panel pemakaian fuel.
3. Ia memilih filter periode untuk menyesuaikan KPI.
4. Hasil yang dapat diamati: KPI dan panel menampilkan angka yang konsisten dengan transaksi GA Staff.
5. Kegagalan/recovery: bila satu panel gagal dimuat, banner error muncul pada panel tersebut dengan tombol retry tanpa memuat ulang seluruh halaman.
6. Kelanjutan: ia mengklik baris untuk membuka detail entitas terkait.

Flow 9 — GA Supervisor meninjau laporan pemakaian fuel

1. GA Supervisor / Admin GA membuka Fuel Voucher, lalu Laporan Pemakaian Fuel.
2. Ia memilih periode dan kendaraan pada filter bar.
3. Hasil yang dapat diamati: laporan menampilkan total, rata-rata, dan tren dengan grafik garis graphite dan satu titik data orange, serta tabel ringkasan.
4. Kegagalan/recovery: bila laporan gagal dimuat, pesan error muncul dengan retry tanpa kehilangan filter.
5. Kelanjutan: ia mengekspor laporan untuk tindak lanjut.

Flow 10 — GA Supervisor mengelola SOP pekerjaan

1. GA Supervisor / Admin GA membuka Administrasi, lalu SOP Pekerjaan.
2. Ia menambah atau memperbarui SOP (judul, kategori, versi, tanggal berlaku, status, pemilik) dan menyimpan.
3. Hasil yang dapat diamati: SOP tercatat dan muncul di daftar dengan versi yang benar.
4. Kegagalan/recovery: field wajib kosong menampilkan pesan inline dan mempertahankan form.
5. Kelanjutan: ia membuka detail SOP untuk verifikasi.

Flow 11 — GA Supervisor mencatat transmittal

1. GA Supervisor / Admin GA membuka Administrasi, lalu Transmittal.
2. Ia mengisi form transmittal (nomor, pengirim, penerima, tanggal, perihal, status) dan menyimpan.
3. Hasil yang dapat diamati: transmittal tercatat dan muncul di daftar.
4. Kegagalan/recovery: field wajib kosong menampilkan pesan inline dan mempertahankan form.
5. Kelanjutan: ia membuka detail transmittal untuk verifikasi.

Flow 12 — GA Supervisor mengelola master data karyawan dan kendaraan

1. GA Supervisor / Admin GA membuka Master Data, lalu List Karyawan.
2. Ia menambah atau memperbarui karyawan (NIK, nama, departemen, jabatan, status, kontak) dan menyimpan.
3. Hasil yang dapat diamati: karyawan tercatat dan dapat dipilih sebagai penerima/peminjam di transaksi.
4. Kegagalan/recovery: NIK duplikat atau field wajib kosong menampilkan pesan inline dan mempertahankan form.
5. Ia kemudian membuka List Kendaraan, menambah atau memperbarui kendaraan (nomor polisi, jenis, merek/model, tahun, status, penanggung jawab), dan menyimpan.
6. Hasil yang dapat diamati: kendaraan tercatat dan dapat dipilih di administrasi kendaraan, commuting, dan fuel voucher.
7. Kegagalan/recovery: nomor polisi duplikat atau field wajib kosong menampilkan pesan inline dan mempertahankan form.

Flow 13 — Asset & Labeling Officer mengelola list asset

1. Asset & Labeling Officer login melalui Login dan diarahkan ke Dashboard.
2. Ia membuka Asset, lalu List Asset.
3. Ia menambah atau memperbarui asset (kode asset, nama, kategori, lokasi, penanggung jawab, status) dan menyimpan.
4. Hasil yang dapat diamati: asset tercatat dengan status pelabelan yang benar.
5. Kegagalan/recovery: kode asset duplikat atau field wajib kosong menampilkan pesan inline dan mempertahankan form.
6. Kelanjutan: ia memilih asset untuk menuju Pelabelan Asset.

Flow 14 — Asset & Labeling Officer melakukan pelabelan asset dengan nomor QR

1. Asset & Labeling Officer membuka Asset, lalu Pelabelan Asset.
2. Ia memilih asset dari daftar asset belum terlabel.
3. Hasil yang dapat diamati: preview label 40×40mm tampil dengan blok QR nyata dan kode asset caps mono 13px.
4. Ia menekan tombol primary "CETAK LABEL" berwarna signal orange.
5. Hasil yang dapat diamati: label tercetak dan status pelabelan asset diperbarui; asset hilang dari daftar belum terlabel.
6. Kegagalan/recovery: bila QR gagal dibuat atau asset tidak ditemukan, pesan error muncul dengan retry generate atau pilih asset lain.
7. Kelanjutan: ia melanjutkan ke asset berikutnya; KPI asset terlabel di Dashboard diperbarui.

Flow 15 — System Administrator mengelola akun pengguna

1. System Administrator login melalui Login dan diarahkan ke Dashboard.
2. Ia membuka Pengaturan, lalu Manajemen Akun.
3. Ia menambah atau memperbarui akun (nama, email/username, peran, status aktif) dan menyimpan.
4. Hasil yang dapat diamati: akun tercatat dengan peran yang ditetapkan; perubahan peran berlaku pada akses berikutnya.
5. Kegagalan/recovery: email duplikat atau peran wajib kosong menampilkan pesan inline dan mempertahankan form.
6. Kelanjutan: akun aktif dapat login dan mengakses destination sesuai perannya.

Flow 16 — System Administrator menjalankan sinkronisasi dan backup

1. System Administrator membuka Pengaturan, lalu Sync & Backup.
2. Ia menjalankan job sinkronisasi dan/atau backup.
3. Hasil yang dapat diamati: lampu indikator Sync di header berdenyut selama job berjalan, lalu kembali stabil; status dan riwayat job diperbarui.
4. Kegagalan/recovery: bila job gagal, pesan error muncul dengan tombol retry; ia menjalankan ulang.
5. Kelanjutan: riwayat job dapat difilter dan ditinjau.

Flow 17 — System Administrator meninjau log riwayat audit

1. System Administrator membuka Pengaturan, lalu Log Riwayat Audit.
2. Ia menerapkan filter (aktor, aksi, entitas, periode) dan pencarian.
3. Hasil yang dapat diamati: daftar entri audit (waktu, aktor, aksi, entitas, nilai sebelum/sesudah, hasil) tampil sesuai filter.
4. Kegagalan/recovery: bila log gagal dimuat, pesan error muncul dengan retry tanpa kehilangan filter.
5. Kelanjutan: ia membuka detail entri untuk menelusuri aktivitas.

Flow 18 — Pengguna baru melakukan self-service enrollment dan login

1. Calon pengguna membuka Landing dan memilih tautan enrollment.
2. Ia mengisi data enrollment dan mengirimkannya.
3. Hasil yang dapat diamati: akun terbentuk.
4. Kegagalan/recovery: bila email sudah terdaftar atau data tidak valid, pesan inline muncul dan input dipertahankan.
5. Ia diarahkan ke Login dan melakukan verifikasi kembali.
6. Hasil yang dapat diamati: sesi terbentuk dan ia diarahkan ke Dashboard.
7. Kelanjutan: ia mengakses destination sesuai perannya.

Flow 19 — Pengguna mengganti mode Siang/Malam dan logout

1. Pada halaman mana pun setelah login, pengguna menekan toggle mode di header.
2. Hasil yang dapat diamati: seluruh surface bertransisi crossfade 180ms antara palet light dan dark; semantik warna status tetap sama.
3. Kegagalan/recovery: bila preferensi gagal disimpan, mode tetap berlaku pada sesi berjalan dan pengguna dapat mencoba lagi.
4. Pengguna menekan tombol logout di header.
5. Hasil yang dapat diamati: sesi berakhir dan ia kembali ke Landing.

6. Visuals Colors and Theme

Muse: Dieter Rams. Headline: Less, but better — a GA control room built like a Braun instrument panel.

Palet — Light mode

Proporsi: 70% warm off-white ground + white panels, 20% graphite family (rail, header, kontrol primary, inversi dark mode), 8% muted grey (label, metadata sekunder, disabled, hairline), 2% signal orange — hanya untuk status dan aksi: badge stok kritis, peminjaman jatuh tempo, active nav marker, satu tombol primary per view, delta KPI. Orange tidak pernah menjadi background fill berskala dan tidak pernah muncul pada lebih dari satu elemen per card.

Palet — Dark mode

Semantik orange tetap sama di kedua mode. Setiap pasangan teks/background lolos 4.5:1 pada ukuran body; orange hanya dipakai di atas putih atau di atas #3A3A38, tidak pernah di atas orange.

Tipografi

• Headings: Archivo, weight 500 dan 600 saja — tidak pernah light, tidak pernah black. Flush-left, ragged-right, tracking -0.01em. Sentence case untuk page title; UPPERCASE dengan 0.12em tracking untuk micro-label ('INVENTORY', 'TRANSAKSI TERAKHIR', 'KPI · BULAN INI').
• Body: Archivo.
• Angka adalah elemen paling menonjol: KPI dan kolom kuantitas memakai Archivo dengan tabular figures pada weight 600, sehingga '1.240' dan '1.240' sejajar dalam kolom. Semua numeral tabular-nums; kolom kuantitas, mata uang, dan tanggal right-aligned.
• Skala 1.25 modular dengan clamp(): display 32→56px, page title 24→34px, section head 18→22px, KPI numeral 28→48px, body 15→16px, table/label 13→14px, micro-label 11px caps. Line-height 1.15 untuk numeral, 1.45 untuk body, 1.2 untuk caps label.

Shape language: geometri jujur — radius 2px pada input dan tombol (Braun control keys, bukan pill), 6px pada panel, 0px pada data table dan KPI strip agar grid tetap terlihat. Hairline 1px #D8D4CC memisahkan setiap baris dan section — rule adalah perangkat komposisi utama, bukan shadow. Shadow hampir tidak ada: hanya 0 1px 0 rgba(26,26,24,0.06) di bawah sticky header dan 0 8px 24px rgba(26,26,24,0.10) untuk satu elemen mengambang (command palette/modal). Tidak ada blob, tidak ada capsule button, tidak ada rounded-everything.

Layout: grid modular 12 kolom dengan left rail tetap 240px (ikon + label Indonesia, dikelompokkan tepat sesuai 8 menu, collapsible ke 64px icon rail pada 768px, off-canvas drawer pada 375px) dan header 64px. Setiap halaman disusun dari empat blok yang sama dalam urutan yang sama: (1) page header dengan title, breadcrumb, dan satu primary action, (2) KPI strip 3–5 sel sama besar dipisah hairline vertikal, (3) filter bar berisi pasangan label/value sejajar, (4) data table atau form. Dashboard adalah modular panel grid — 4 sel KPI, lalu split 8/4 antara tabel 'Transaksi Terakhir' di samping tumpukan 'Stok Kritis' dan 'Peminjaman Jatuh Tempo', lalu panel pemakaian fuel full-width. Sub-menu tidak pernah menjadi card; sub-menu adalah baris dengan label kiri dan nilai kanan, meniru spec sheet Braun. Tabel menjaga ritme kolom yang sama di setiap modul sehingga mata clerk tidak perlu belajar ulang tata letak antara Alat Tulis, Groseri, PPE, dan Tools.

Imagery: diagrammatic, bukan fotografis. Pictogram line-art 1.5px stroke pada grid 24px untuk delapan grup menu (stationery, grocery, PPE, tools, asset, vehicle, fuel, admin), masing-masing digambar sebagai siluet objek yang jujur, bukan icon set membulat. Data adalah imagery: bar meter horizontal untuk level stok, grafik garis konsumsi fuel graphite dengan satu titik data orange, sparkline 12 bulan di belakang setiap numeral KPI. Label asset QR dirender sebagai blok QR nyata di layar Pelabelan, berukuran preview printable 40×40mm. Tidak ada stock people, tidak ada 3D render, tidak ada ilustrasi demi ilustrasi.

Avoid: primary biru/indigo di atas putih (tidak ada #2563EB, #4F46E5, #7C3AED atau tetangganya, termasuk link dan seri chart); gradient-blob hero, mesh gradient, glassmorphism, frosted panel; grid card identik dengan hover-lift sebagai layout dashboard; pill dan capsule button dengan radius besar (pertahankan radius kontrol 2px); Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, atau system-ui untuk heading atau body; orange sebagai background fill berskala atau pada lebih dari satu elemen per card; animasi entrance dekoratif, scroll reveal, dan hover yang memantul; stock people fotografis, 3D render, dan clip-art.

Readable text and controls: headline, wordmark, label, angka, teks card, dan kontrol tetap utuh di dalam viewport dan container-nya pada 375px, 768px, dan 1280px, membungkus atau menskalakan (mis. font-size: clamp(...) dengan ukuran mobile-nya) agar muat; tidak ada elemen lain yang menutupi bagian mana pun darinya. Imagery, dekorasi, dan motion mengikuti creative direction: foto, artwork, shape, texture, atau animasi boleh di-crop, bleed keluar tepi, diputar, di-overlap, atau dipotong persis seperti yang diminta direction, selama tidak menutupi teks atau kontrol yang dapat dibaca. Konten yang bergerak dan dapat di-scroll (marquee, ticker, carousel, baris yang dapat di-scroll horizontal) boleh melewati tepi viewport atau container secara desain: dinilai dari apakah ia benar-benar bergerak atau di-scroll dan apakah setiap item menjadi sepenuhnya terbaca saat melewatinya, bukan dari item yang terpotong pada still frame. Dengan prefers-reduced-motion, sediakan susunan statis yang dapat digunakan: bungkus item ke baris atau izinkan scroll horizontal agar setiap item dapat dibawa sepenuhnya ke dalam tampilan. Baris yang dapat di-scroll tidak perlu menampilkan semua item sekaligus, termasuk pada mode reduced-motion. overflow-x: auto atau scroll yang didukung sumber, dengan item yang muat di container saat dibawa ke tampilan, adalah scrolling yang valid; jangan menuntut scrollbar yang terlihat atau screenshot terpisah yang sudah di-scroll. Laporkan konten yang tidak dapat diakses hanya ketika sumber atau batas render menunjukkan apa yang mencegahnya menjadi sepenuhnya terbaca melalui motion atau scrolling yang dimaksudkan. Bila direction, requirement, brief, atau temuan meminta teks atau kontrol yang dapat dibaca untuk di-crop, di-clip, ditutupi, atau keluar dari tepi, jaga agar tetap utuh dan bawa gesture tersebut dengan imagery atau dekorasi; untuk teks dan kontrol yang dapat dibaca, aturan ini berlaku lebih dulu.

7. Signature Design Concept

Konsep: Instrument face, bukan dashboard widget.

Layar pertama setelah login adalah Dashboard yang dibangun sebagai satu muka instrumen Braun, bukan kumpulan widget.

• Header graphite sebagai satu strip kontrol beraturan. Bar #3A3A38 setinggi 64px membawa wordmark 'GA · GENERAL AFFAIRS' dalam caps 11px letterspaced di kiri, dan di kanan lima kontrol yang diminta sebagai satu baris pasangan label/value dipisah rule 1px: toggle mode (ikon garis sun/moon), lampu sync (lingkaran 10px, #22C55E terhubung / #8C8880 tidak terhubung, berdenyut 2s hanya saat sync berjalan), tanggal-waktu aktual sebagai numeral tabular yang diperbarui setiap detik ('SEL, 12 NOV 2025 · 14:32:07'), chip profil dengan inisial dalam kotak radius 2px, dan tombol logout. Lampu adalah satu-satunya warna di bar saat terputus.
• Hero band sebagai KPI strip full-bleed. Di bawah header, band off-white solid dengan headline Archivo 56px flush-left — 'RINGKASAN OPERASIONAL GA' — di atas KPI strip full-bleed berisi lima sel dipisah hairline: setiap sel memiliki micro-label caps 11px, numeral tabular 48px, dan delta orange kecil ('▼ 12% vs bulan lalu'). Elemen dominan adalah baris numeral, bukan gambar; strip membentang dari tepi ke tepi viewport tanpa card, tanpa radius, tanpa shadow, sehingga angka terbaca seperti display Braun.
• Panel grid dimulai segera di bawah fold. Tabel 'Transaksi Terakhir' dengan header sticky, baris pertamanya sudah terlihat pada 1280px; di sampingnya tumpukan 'Stok Kritis' dan 'Peminjaman Jatuh Tempo' sebagai baris spec-sheet label-kiri/nilai-kanan; di bawahnya panel pemakaian fuel full-width dengan grafik garis graphite dan satu titik data orange.
• Satu rule orange 2px yang berjalan. Rule ini menjadi active-nav marker di left rail, muncul kembali sebagai underline pada tab aktif dan sebagai border atas baris tabel yang difokuskan, sehingga pengguna selalu tahu persis di mana ia berada dalam sistem.

Konsep ini hanya menyusun ulang konten, state, dan kontrol yang sudah diterima — tidak menambah perilaku, halaman, atau destination baru.

8. Interaction Model & Motion Direction

Interaction Model: Static Motion Tempo: restrained Hero Dimensionality: flat

Landing Hero Motion Brief

• Focal subject: KPI strip full-bleed pada Dashboard sebagai muka instrumen — baris lima numeral tabular 48px dengan micro-label caps dan delta orange, di bawah headline Archivo 56px 'RINGKASAN OPERASIONAL GA'.
• Input → transformation → outcome thesis: saat pengguna login dan Dashboard dimuat, numeral KPI bertransisi dari state loading (skeleton) ke nilai final dalam 200ms tick linear; delta orange muncul setelah numeral stabil; tabel 'Transaksi Terakhir' mengisi barisnya tanpa entrance animation. Outcome: pengguna melihat satu muka instrumen yang tenang dan dapat dipercaya, bukan kumpulan widget yang beranimasi.
• Motion vocabulary: mekanis dan instan — perubahan state 120ms linear tanpa easing flourish; baris ter-highlight, badge muncul, count bertick 200ms; lampu sync berdenyut opacity 1→0.4→1 selama 2s hanya saat sync berjalan lalu berhenti stabil hijau; mode switch adalah crossfade 180ms seluruh surface tanpa slide; tidak ada entrance animation pada tabel, tidak ada scroll reveal, tidak ada hover yang memantul — hover adalah flat #F2F0EB row tint dan underline orange 1px pada link.
• Composed first frame: header graphite 64px dengan wordmark kiri dan lima kontrol kanan sebagai satu strip beraturan; di bawahnya band off-white dengan headline flush-left dan KPI strip lima sel hairline-divided membentang tepi ke tepi; baris pertama tabel 'Transaksi Terakhir' sudah terlihat pada 1280px dengan header sticky.
• Reduced-motion state: dengan prefers-reduced-motion, denyut sync dan semua transisi dihapus, menyisakan pertukaran state instan; KPI strip tetap menampilkan numeral final tanpa tick; mode switch berganti tanpa crossfade.

9. Non-Functional Requirements

• NFR-01 — Indikator Sync (explicit). Lampu indikator Sync harus berwarna hijau #22C55E saat terhubung dan abu-abu #8C8880 saat tidak terhubung; berdenyut opacity 1→0.4→1 selama 2s hanya saat sinkronisasi berjalan, lalu berhenti stabil. Rasional: kontrol status yang diminta pengguna dan sinyal kepercayaan pada data.
• NFR-02 — Mode Siang/Malam (explicit). Mode tampilan harus mendukung Siang dan Malam dengan palet yang ditetapkan; transisi crossfade 180ms; semantik warna status (termasuk orange signal) tetap sama di kedua mode. Rasional: permintaan eksplisit pengguna.
• NFR-03 — Tanggal & jam aktual (explicit). Header harus menampilkan tanggal & jam aktual sebagai numeral tabular yang diperbarui setiap detik. Rasional: permintaan eksplisit pengguna.
• NFR-04 — Profil user login dan logout (explicit). Header harus menampilkan profil user login (inisial dalam kotak radius 2px) dan tombol logout/keluar; logout mengakhiri sesi dan mengembalikan ke Landing. Rasional: permintaan eksplisit pengguna.
• NFR-05 — Keamanan temuan kritis (explicit). Keamanan harus menangani temuan kritis: kontrol akses per peran pada destination yang dibatasi, validasi input pada semua form, sesi aman, dan pesan error yang tidak mengungkap detail sensitif. Rasional: permintaan eksplisit pengguna untuk memperbaiki keamanan (temuan kritis).
• NFR-06 — Stabilitas dan kualitas kode (explicit). Aplikasi harus stabil pada alur utama tanpa error tak tertangani; kode harus maintainable dengan struktur modular yang konsisten; bug dan masalah logika diperbaiki. Rasional: permintaan eksplisit pengguna.
• NFR-07 — Arsitektur & alur data (explicit). Alur data transaksi → inventory → dashboard harus konsisten; backend menyimpan transaksi durable dan menjaga konsistensi inventory. Rasional: permintaan eksplisit pengguna dan kebutuhan konsistensi data GA.
• NFR-08 — Aksesibilitas visual (required_inference). Setiap pasangan teks/background lolos 4.5:1 pada ukuran body; orange hanya dipakai di atas putih atau #3A3A38; teks dan kontrol tetap utuh di dalam viewport dan container pada 375px, 768px, dan 1280px. Rasional: kebutuhan keterbacaan pada pekerjaan padat dan audit-sensitif.
• NFR-09 — Reduced motion (required_inference). Dengan prefers-reduced-motion, denyut sync dan semua transisi dihapus, menyisakan pertukaran state instan. Rasional: menghormati preferensi pengguna tanpa mengubah perilaku produk.
• NFR-10 — Auditabilitas (required_inference). Setiap aksi yang mengubah data harus tercatat di log riwayat audit dengan waktu, aktor, aksi, entitas, dan nilai sebelum/sesudah. Rasional: kebutuhan penelusuran jejak audit yang diminta pengguna.

10. Tech Stack

• Frontend: React (web) dengan UI kustom sesuai creative direction; font Archivo; tabular-nums untuk numeral; clamp() untuk skala tipografi responsif.
• Backend: Python / FastAPI untuk API transaksi, inventory, sync/backup, dan audit.
• Storage: database relasional untuk transaksi durable, saldo inventory, master data, akun, dan entri audit.
• Deployment: Docker dan docker-compose untuk menjalankan aplikasi dan database. Kubernetes tidak disertakan karena tidak ada kebutuhan deployment yang menyatakannya.

11. Assumptions and Constraints

• A-01 (assumption): Aplikasi adalah konsol operasional internal first-party; tidak ada integrasi pihak ketiga, marketplace, atau kanal eksternal yang diminta sumber.
• A-02 (assumption): Identitas dimiliki aplikasi dengan self-service enrollment dan verifikasi kembali melalui Login; ini adalah required_inference untuk membuat journey yang diterima dapat dijalankan.
• A-03 (assumption): Peran (GA Staff / Operator GA, GA Supervisor / Admin GA, Asset & Labeling Officer, System Administrator) menetapkan akses ke destination yang dibatasi peran; ini adalah required_inference untuk otorisasi akses administratif dan lintas-peran.
• A-04 (assumption): Backend diperlukan untuk menyimpan transaksi durable, konsistensi inventory, sinkronisasi, backup, dan audit; ini adalah required_inference.
• C-01 (constraint, explicit): Indikator Sync harus hijau saat terhubung dan abu-abu saat tidak terhubung.
• C-02 (constraint, explicit): Mode tampilan harus mendukung Siang dan Malam.
• C-03 (constraint, explicit): Header harus menampilkan tanggal & jam aktual.
• C-04 (constraint, explicit): Header harus menampilkan profil user login dan tombol logout/keluar.
• C-05 (constraint, explicit): Keamanan harus menangani temuan kritis.
• C-06 (constraint, explicit): Desain tampilan harus keren, bagus, menarik, profesional, dan modern, mengikuti creative direction yang ditetapkan.
• C-07 (constraint, explicit): Tidak ada modul di luar daftar menu/sub-menu yang diminta; tidak ada horizon masa depan yang dinyatakan sumber.
• C-08 (constraint, explicit): Template SaaS indigo/biru-di-atas-putih dilarang untuk proyek ini.

12. Glossary

• GA (General Affairs): fungsi operasional yang menangani distribusi barang, inventory, asset, kendaraan, fuel, administrasi, dan master data di lingkungan kantor/industri.
• ATK (Alat tulis kantor): kategori barang habis pakai kantor.
• Groseri: kategori barang kebutuhan pantry/rumah tangga kantor.
• PPE (Personal Protective Equipment): alat pelindung diri; dapat didistribusikan, dipinjamkan, dan dicatat inventory-nya.
• Tools: peralatan kerja; dapat didistribusikan, dipinjamkan, dan dicatat inventory-nya.
• Distribusi: transaksi penyerahan barang dari inventory kepada penerima.
• Inventory: catatan saldo dan pergerakan barang per kategori.
• Peminjaman: transaksi peminjaman item (PPE/Tools) dengan tanggal pinjam, jatuh tempo, dan pengembalian.
• Asset: barang milik organisasi yang terdaftar dengan kode asset, kategori, lokasi, penanggung jawab, dan status pelabelan.
• Pelabelan Asset (No QR): pembuatan dan pencetakan label asset berisi nomor QR dan kode asset.
• Commuting: perjalanan kendaraan operasional yang dicatat pada List Commuting.
• Fuel Voucher: voucher bahan bakar yang dicatat pada pengambilan dan penyerahan fuel serta laporan pemakaian fuel.
• SOP Pekerjaan: prosedur kerja GA yang terdokumentasi dengan versi dan status.
• Transmittal: pengiriman dokumen GA yang dicatat dengan nomor, pengirim, penerima, tanggal, perihal, dan status.
• Master Data: data referensi utama, yaitu karyawan dan kendaraan.
• Sync & Backup: operasi sinkronisasi data dan pencadangan data beserta riwayatnya.
• Log Riwayat Audit: jejak aktivitas yang mencatat waktu, aktor, aksi, entitas, dan nilai sebelum/sesudah.
• KPI: indikator kinerja yang dikumpulkan dari setiap menu/sub-menu dan ditampilkan pada Dashboard.
• Signal orange: warna aksen #E8590C yang hanya dipakai untuk status dan aksi.
• Hairline rule: garis pemisah 1px #D8D4CC yang menjadi perangkat komposisi utama.