cosmic-kasir

bykasi rkuu

bikin apk kasir

Landing
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirements Document for cosmic-kasir

1. Introduction

cosmic-kasir adalah aplikasi kasir (APK) untuk toko pupuk Ngudi Makmur 5. Aplikasi ini dirancang untuk mencatat data petani, mengelola stok pupuk urea dan NPK per petani, mencatat pengambilan pupuk, dan mengirimkan jumlah pupuk yang tersisa ke WhatsApp petani.

Produk ini menyasar petugas kasir toko dan pengelola data petani yang bekerja cepat di balik meja toko, sering kali dengan petani menunggu di depan, kadang dengan koneksi internet yang kurang stabil dan cahaya matahari yang terang. Karena itu, aplikasi menekankan keterbacaan sekilas, alur kerja yang singkat, dan pencatatan yang dapat dipercaya — terutama karena NIK dan nomor WhatsApp adalah data resmi yang harus akurat.

Aplikasi ini adalah sistem informasi kecil milik sebuah institusi toko: bukan dasbor startup, melainkan buku besar koperasi yang hidup. Setiap layar harus menjawab tiga pertanyaan dengan cepat: petani mana, pupuk apa, berapa sisanya.

Page 1 of 32

2. System Overview

cosmic-kasir adalah aplikasi web yang diakses melalui browser di ponsel atau laptop kasir. Aplikasi dimiliki dan dioperasikan oleh toko Ngudi Makmur 5.

Aktor manusia yang diterima:

  • Petugas Kasir Toko — melayani petani yang mengambil pupuk, mencatat pengambilan, dan mengirim sisa stok ke WhatsApp.
  • Pengelola Data Petani dan Stok — mengelola data petani (termasuk impor/ekspor CSV) dan memantau stok urea serta NPK per petani.

Aktor non-persona:

  • WhatsApp — tujuan eksternal untuk pengiriman pesan sisa stok. Aplikasi tidak mengirim pesan secara langsung; aplikasi membuka tautan wa.me/<nomor> yang sudah terisi pesan sisa stok, dan pengiriman akhir dilakukan di dalam WhatsApp.

Perilaku yang diterima (ringkas):

  • Pencatatan data petani dengan nama petani, NIK, dan nomor WhatsApp.
  • Pengelolaan stok pupuk urea dan NPK per petani.
  • Impor dan ekspor data petani dalam format CSV.
  • Pencatatan pengambilan pupuk yang secara otomatis mengurangi stok pupuk yang diambil.
  • Pengiriman jumlah pupuk yang tersisa ke WhatsApp.

Batasan sempit yang dikecualikan:

  • Impor dan ekspor data petani hanya dalam format CSV — tidak ada format lain.
  • Stok yang dikelola hanya urea dan NPK.
  • Aplikasi ditujukan untuk toko Ngudi Makmur 5.
Page 2 of 32

2a. Product Interpretation and Delivery Boundary

Aplikasi ini adalah alat kerja internal toko, bukan layanan publik. Halaman Landing adalah halaman masuk anonim yang menjelaskan aplikasi kasir untuk toko Ngudi Makmur 5 dan fungsi pencatatan petani, stok, serta pengambilan pupuk. Karena catatan petani, transaksi pengambilan, dan stok bersifat durable dan harus terikat pada orang yang benar, aplikasi memiliki identitas miliknya sendiri: pengguna mendaftar sendiri melalui Sign Up dan kembali memverifikasi identitas melalui Login sebelum mengakses data dan transaksi durable.

Pengiriman sisa stok ke WhatsApp adalah handoff ke tujuan eksternal. Aplikasi menyiapkan pesan dan membuka WhatsApp dengan nomor petani yang sudah terisi; pengiriman akhir terjadi di dalam WhatsApp, di luar kendali aplikasi.

Semua pekerjaan yang dijelaskan di dokumen ini adalah lingkup saat ini. Tidak ada fitur masa depan yang didefinisikan dalam sumber.

2b. Source Content Inventory

Tidak ada direktif referensi dengan content_source yang diberikan, sehingga tidak ada inventaris konten sumber yang disertakan.

2c. Page Content and Component Coverage

Page 3 of 32

Landing

  • Informasi/state: Penjelasan anonim aplikasi kasir untuk toko Ngudi Makmur 5 — pencatatan petani, stok urea dan NPK per petani, pengambilan pupuk, dan pengiriman sisa stok ke WhatsApp. Identitas toko "NGUDI MAKMUR 5" ditampilkan sebagai penanda pemilik.
  • Aksi utama: Masuk ke aplikasi kasir (menuju Login).
  • Aksi pendukung: Menuju Sign Up bagi pengguna yang belum memiliki akses.
  • Entitas domain: Toko (Ngudi Makmur 5), aplikasi kasir.
  • Tanggung jawab komponen: Hero dengan headline empat baris dan diagram transit empat perhentian (Petani → Pengambilan → Stok → WA); penanda identitas toko; tombol CTA masuk kasir.
  • State: Loading (kerangka hero), empty (tidak berlaku — konten statis), success (hero tampil penuh), error (gagal memuat aset — tampilkan teks hero tanpa gambar dekoratif), recovery (muat ulang halaman).

Login

  • Informasi/state: Form verifikasi identitas untuk melanjutkan akses ke catatan petani, transaksi pengambilan, dan stok durable.
  • Aksi utama: Verifikasi identitas dan masuk ke Dashboard.
  • Aksi pendukung: Menuju Sign Up bagi pengguna yang belum terdaftar.
  • Entitas domain: Akun pengguna (Petugas Kasir Toko atau Pengelola Data Petani dan Stok).
  • Tanggung jawab komponen: Field identitas dan kata sandi; tombol masuk; tautan ke Sign Up; pesan kesalahan.
  • State: Loading (tombol masuk dalam proses), empty (field kosong — tombol nonaktif), success (dialihkan ke Dashboard), error (kredensial tidak cocok — pesan kesalahan dan field dapat diperbaiki), recovery (coba lagi atau menuju Sign Up).
Page 4 of 32

Sign Up

  • Informasi/state: Form pendaftaran mandiri bagi pengguna yang mulai memakai aplikasi.
  • Aksi utama: Membuat akun dan melanjutkan ke Dashboard.
  • Aksi pendukung: Menuju Login bagi pengguna yang sudah terdaftar.
  • Entitas domain: Akun pengguna.
  • Tanggung jawab komponen: Field pendaftaran; tombol daftar; tautan ke Login; pesan kesalahan.
  • State: Loading (tombol daftar dalam proses), empty (field kosong — tombol nonaktif), success (akun dibuat dan dialihkan ke Dashboard), error (data tidak valid atau akun sudah ada — pesan kesalahan), recovery (perbaiki data atau menuju Login).

Dashboard

  • Informasi/state: Ringkasan dan titik navigasi untuk pekerjaan kasir, data petani, pengambilan, dan stok.
  • Aksi utama: Menuju Petani, Pengambilan, Stok, dan Impor/Ekspor.
  • Aksi pendukung: Keluar dari sesi.
  • Entitas domain: Petani, stok urea, stok NPK, transaksi pengambilan.
  • Tanggung jawab komponen: Band stasiun bernomor dengan judul halaman; rail kiri bernomor (01 Dashboard, 02 Petani, 03 Pengambilan, 04 Stok, 05 Impor/Ekspor) yang runtuh menjadi tab bar bawah di ponsel; ringkasan angka stok.
  • State: Loading (kerangka ringkasan), empty (belum ada petani — arahkan ke Petani Baru atau Impor Petani), success (ringkasan tampil), error (gagal memuat ringkasan — tampilkan pesan dan tombol coba lagi), recovery (muat ulang).
Page 5 of 32

Petani

  • Informasi/state: Daftar data petani yang mencakup nama petani, NIK, dan nomor WhatsApp, beserta sisa urea dan NPK per petani.
  • Aksi utama: Memilih petani untuk melihat atau memperbarui datanya.
  • Aksi pendukung: Menuju Petani Baru untuk menambah petani; menuju Impor Petani; menuju Ekspor Petani.
  • Entitas domain: Petani (nama petani, NIK, nomor WhatsApp), sisa urea, sisa NPK.
  • Tanggung jawab komponen: Tabel ledger dengan baris tabular (NIK, Nama, No. WA, Sisa Urea, Sisa NPK) dan angka tabular; aturan vertikal 4px hijau untuk baris urea dan oranye untuk baris NPK; pada ponsel tabel menjadi baris berlabel bertumpuk (label 13px caps muted, nilai 18px ink).
  • State: Loading (kerangka tabel), empty (belum ada petani — arahkan ke Petani Baru atau Impor Petani), success (daftar tampil), error (gagal memuat daftar — pesan dan tombol coba lagi), recovery (muat ulang atau impor ulang).

Petani Baru

  • Informasi/state: Form terfokus untuk menambahkan atau memperbarui data petani yang diperlukan dalam pencatatan pengambilan.
  • Aksi utama: Menyimpan data petani (nama petani, NIK, nomor WhatsApp).
  • Aksi pendukung: Membatalkan dan kembali ke Petani.
  • Entitas domain: Petani (nama petani, NIK, nomor WhatsApp).
  • Tanggung jawab komponen: Field nama petani, NIK, nomor WhatsApp dengan micro-label 13px caps; tombol simpan; pesan validasi.
  • State: Loading (tombol simpan dalam proses), empty (field kosong — tombol nonaktif), success (data tersimpan dan kembali ke Petani), error (NIK atau nomor WhatsApp tidak valid, atau data duplikat — pesan kesalahan pada field terkait), recovery (perbaiki field dan simpan ulang).
Page 6 of 32

Impor Petani

  • Informasi/state: Alur khusus untuk memasukkan data petani dari berkas CSV, disajikan sebagai "Line A: Impor" dengan diagram panah skematik.
  • Aksi utama: Memilih berkas CSV dan mengimpor data petani.
  • Aksi pendukung: Menuju Ekspor Petani; kembali ke Petani.
  • Entitas domain: Petani (nama petani, NIK, nomor WhatsApp), berkas CSV.
  • Tanggung jawab komponen: Pemilih berkas CSV; ringkasan hasil impor (jumlah baris berhasil dan gagal); daftar baris bermasalah.
  • State: Loading (berkas sedang diproses), empty (belum ada berkas dipilih), success (data petani tersedia dan tampil di Petani), error (format berkas bukan CSV atau baris tidak valid — tampilkan baris yang gagal tanpa membatalkan baris yang berhasil), recovery (perbaiki berkas dan impor ulang).

Ekspor Petani

  • Informasi/state: Alur khusus untuk mengekspor data petani ke berkas CSV, disajikan sebagai "Line B: Ekspor" dengan diagram panah skematik.
  • Aksi utama: Mengekspor data petani ke berkas CSV.
  • Aksi pendukung: Menuju Impor Petani; kembali ke Petani.
  • Entitas domain: Petani (nama petani, NIK, nomor WhatsApp), berkas CSV.
  • Tanggung jawab komponen: Tombol ekspor; indikator berkas sedang disiapkan; konfirmasi berkas terunduh.
  • State: Loading (berkas sedang disiapkan), empty (belum ada data petani untuk diekspor — pesan informatif), success (berkas CSV terunduh), error (gagal menyiapkan berkas — pesan dan tombol coba lagi), recovery (coba ekspor ulang).
Page 7 of 32

Stok

  • Informasi/state: Tampilan stok urea dan NPK per petani, termasuk hasil pengurangan setelah pengambilan.
  • Aksi utama: Melihat sisa urea dan NPK per petani.
  • Aksi pendukung: Menuju Pengambilan untuk mencatat pengambilan; menuju Sisa Stok untuk mengirim sisa ke WhatsApp.
  • Entitas domain: Petani, stok urea, stok NPK.
  • Tanggung jawab komponen: Baris stok tabular dengan aturan vertikal 4px hijau (urea) dan oranye (NPK); angka tabular yang sejajar seperti jadwal; penanda stok rendah dengan transit-yellow #E8B93B.
  • State: Loading (kerangka baris stok), empty (belum ada petani atau stok — arahkan ke Petani Baru atau Impor Petani), success (stok tampil), error (gagal memuat stok — pesan dan tombol coba lagi), recovery (muat ulang).
Page 8 of 32

Pengambilan

  • Informasi/state: Ruang kerja kasir untuk memilih petani dan mencatat pengambilan pupuk urea serta NPK. Nama petani adalah elemen terbesar di layar ini.
  • Aksi utama: Memilih petani, memasukkan jumlah urea dan/atau NPK yang diambil, dan menyimpan pengambilan.
  • Aksi pendukung: Menuju Sisa Stok setelah pengambilan tersimpan.
  • Entitas domain: Petani, pengambilan urea, pengambilan NPK, stok urea, stok NPK.
  • Tanggung jawab komponen: Pemilih petani; field jumlah urea dan NPK; tombol simpan; momen decrement — angka sisa stok bergulir turun selama 240ms dan berkedip oranye sekali setelah pengambilan tersimpan.
  • State: Loading (data petani sedang dimuat), empty (belum ada petani — arahkan ke Petani Baru atau Impor Petani), success (pengambilan tersimpan, stok berkurang otomatis, angka bergulir turun dan berkedip oranye), error (jumlah melebihi sisa stok atau data tidak valid — pesan kesalahan dan pengambilan tidak disimpan), recovery (perbaiki jumlah dan simpan ulang).
Page 9 of 32

Sisa Stok

  • Informasi/state: Halaman lanjutan untuk menampilkan sisa pupuk setelah transaksi dan memulai pengiriman jumlah tersebut ke WhatsApp. Ditampilkan sebagai perhentian oranye terakhir pada diagram transit.
  • Aksi utama: Mengirim sisa stok ke WhatsApp petani melalui tautan wa.me/<nomor> yang sudah terisi pesan sisa stok.
  • Aksi pendukung: Kembali ke Pengambilan atau Stok.
  • Entitas domain: Petani (nama petani, nomor WhatsApp), sisa urea, sisa NPK, pesan sisa stok.
  • Tanggung jawab komponen: Ringkasan sisa urea dan NPK; tombol "Kirim sisa stok ke WA" sebagai terminus oranye; pratinjau pesan sisa stok yang akan dikirim.
  • State: Loading (sisa stok sedang dimuat), empty (tidak ada transaksi pengambilan untuk ditindaklanjuti — arahkan ke Pengambilan), success (WhatsApp terbuka dengan pesan terisi; pengiriman akhir dilakukan di WhatsApp), error (nomor WhatsApp petani tidak tersedia — arahkan ke Petani Baru untuk melengkapi nomor), recovery (lengkapi nomor WhatsApp lalu coba lagi).

3. Functional Requirements

Page 10 of 32

FR-01 — Aplikasi kasir untuk toko Ngudi Makmur 5

As a Petugas Kasir Toko I should menggunakan aplikasi kasir yang ditujukan untuk toko Ngudi Makmur 5 so that pencatatan petani, stok, dan pengambilan pupuk dilakukan dalam satu sistem milik toko.

  • Provenance: explicit
  • Trigger/input: Pengguna membuka aplikasi.
  • Observable result: Aplikasi menampilkan identitas toko Ngudi Makmur 5 dan fungsi pencatatan petani, stok, serta pengambilan pupuk.
  • Access state: Landing dapat diakses tanpa login; pekerjaan durable memerlukan login.
  • Failure/recovery: Jika aplikasi gagal dimuat, pengguna dapat memuat ulang halaman.
  • Continuation: Pengguna melanjutkan ke Login atau Sign Up.

FR-02 — Data petani dengan nama petani, NIK, dan nomor WhatsApp

As a Pengelola Data Petani dan Stok I should mencatat data petani yang mencakup nama petani, NIK, dan nomor WhatsApp so that setiap petani dapat diidentifikasi dengan benar saat mengambil pupuk.

  • Provenance: explicit
  • Trigger/input: Pengelola membuka Petani Baru dan mengisi nama petani, NIK, dan nomor WhatsApp.
  • Observable result: Data petani tersimpan dan tampil di daftar Petani.
  • Access state: Memerlukan login.
  • Failure/recovery: Jika NIK atau nomor WhatsApp tidak valid atau data duplikat, pesan kesalahan ditampilkan pada field terkait dan pengelola dapat memperbaiki lalu menyimpan ulang.
  • Continuation: Petani tersedia untuk dipilih pada Pengambilan.
Page 11 of 32

FR-03 — Stok pupuk urea dan NPK per petani

As a Pengelola Data Petani dan Stok I should mengelola stok pupuk urea dan NPK per petani so that jumlah pupuk yang tersedia untuk setiap petani akurat.

  • Provenance: explicit
  • Trigger/input: Pengelola membuka Stok.
  • Observable result: Stok urea dan NPK per petani ditampilkan dengan angka tabular yang sejajar.
  • Access state: Memerlukan login.
  • Failure/recovery: Jika stok gagal dimuat, pesan dan tombol coba lagi ditampilkan.
  • Continuation: Pengelola dapat menuju Pengambilan atau Sisa Stok.

FR-04 — Impor data petani dalam format CSV

As a Pengelola Data Petani dan Stok I should mengimpor data petani dari berkas CSV so that data petani dapat dimasukkan tanpa mengetik satu per satu.

  • Provenance: explicit
  • Trigger/input: Pengelola memilih berkas CSV pada Impor Petani.
  • Observable result: Data petani yang diimpor tersedia dalam format CSV dan tampil di daftar Petani.
  • Access state: Memerlukan login.
  • Failure/recovery: Jika format berkas bukan CSV atau ada baris tidak valid, baris yang gagal ditampilkan tanpa membatalkan baris yang berhasil; pengelola dapat memperbaiki berkas dan mengimpor ulang.
  • Continuation: Petani hasil impor dapat dipilih pada Pengambilan.
Page 12 of 32

FR-05 — Ekspor data petani dalam format CSV

As a Pengelola Data Petani dan Stok I should mengekspor data petani ke berkas CSV so that data petani dapat disimpan atau dipindahkan di luar aplikasi.

  • Provenance: explicit
  • Trigger/input: Pengelola menekan tombol ekspor pada Ekspor Petani.
  • Observable result: Berkas CSV berisi data petani terunduh.
  • Access state: Memerlukan login.
  • Failure/recovery: Jika berkas gagal disiapkan, pesan dan tombol coba lagi ditampilkan.
  • Continuation: Pengelola dapat melanjutkan pekerjaan lain atau mengekspor ulang.

FR-06 — Pengurangan stok otomatis setelah pengambilan

As a Petugas Kasir Toko I should mencatat pengambilan pupuk urea dan/atau NPK oleh petani so that stok pupuk yang diambil otomatis berkurang.

  • Provenance: explicit
  • Trigger/input: Kasir memilih petani, memasukkan jumlah urea dan/atau NPK yang diambil, dan menyimpan.
  • Observable result: Pengambilan tersimpan dan stok pupuk yang diambil berkurang otomatis; angka sisa stok bergulir turun selama 240ms dan berkedip oranye sekali.
  • Access state: Memerlukan login.
  • Failure/recovery: Jika jumlah melebihi sisa stok atau data tidak valid, pengambilan tidak disimpan dan pesan kesalahan ditampilkan; kasir dapat memperbaiki jumlah dan menyimpan ulang.
  • Continuation: Kasir melanjutkan ke Sisa Stok.
Page 13 of 32

FR-07 — Pengiriman jumlah pupuk yang tersisa ke WhatsApp

As a Petugas Kasir Toko I should mengirim jumlah pupuk yang tersisa ke WhatsApp petani so that petani menerima catatan sisa stoknya setelah pengambilan.

  • Provenance: explicit
  • Trigger/input: Kasir menekan tombol "Kirim sisa stok ke WA" pada Sisa Stok.
  • Observable result: WhatsApp terbuka melalui tautan wa.me/<nomor> dengan pesan sisa stok yang sudah terisi; pengiriman akhir dilakukan di dalam WhatsApp.
  • Access state: Memerlukan login.
  • Failure/recovery: Jika nomor WhatsApp petani tidak tersedia, kasir diarahkan untuk melengkapi nomor tersebut; setelah dilengkapi, kasir dapat mencoba lagi.
  • Continuation: Kasir kembali ke Pengambilan atau Stok untuk melayani petani berikutnya.

FR-08 — Pendaftaran mandiri sebelum penggunaan pertama

As a Petugas Kasir Toko I should menyelesaikan pendaftaran mandiri sebelum penggunaan pertama so that saya memiliki akses ke catatan petani, transaksi pengambilan, dan stok durable.

  • Provenance: required_inference
  • Trigger/input: Pengguna baru membuka Sign Up dan mengisi data pendaftaran.
  • Observable result: Akun dibuat dan pengguna diarahkan ke Dashboard.
  • Access state: Sign Up dapat diakses tanpa login.
  • Failure/recovery: Jika data tidak valid atau akun sudah ada, pesan kesalahan ditampilkan dan pengguna dapat memperbaiki data atau menuju Login.
  • Continuation: Pengguna mulai menggunakan aplikasi.
Page 14 of 32

FR-09 — Verifikasi kembali melalui Login

As a Petugas Kasir Toko I should melakukan verifikasi kembali melalui Login so that saya dapat melanjutkan akses ke data dan transaksi durable.

  • Provenance: required_inference
  • Trigger/input: Pengguna terdaftar membuka Login dan memasukkan kredensial.
  • Observable result: Pengguna diarahkan ke Dashboard dan dapat mengakses catatan petani, transaksi pengambilan, dan stok durable.
  • Access state: Login dapat diakses tanpa login.
  • Failure/recovery: Jika kredensial tidak cocok, pesan kesalahan ditampilkan dan pengguna dapat mencoba lagi atau menuju Sign Up.
  • Continuation: Pengguna melanjutkan pekerjaan kasir atau pengelolaan data.

FR-10 — Data petani yang diimpor tersedia dalam format CSV

As a Pengelola Data Petani dan Stok I should memastikan data petani yang diimpor tersedia dalam format CSV so that data dapat dipertukarkan dengan alat lain di luar aplikasi.

  • Provenance: required_inference
  • Trigger/input: Pengelola mengimpor berkas CSV pada Impor Petani.
  • Observable result: Data petani hasil impor tersimpan dan dapat diekspor kembali sebagai CSV.
  • Access state: Memerlukan login.
  • Failure/recovery: Jika berkas bukan CSV, impor ditolak dengan pesan kesalahan; pengelola dapat memilih berkas CSV yang benar.
  • Continuation: Pengelola dapat mengekspor data tersebut melalui Ekspor Petani.
Page 15 of 32

FR-11 — Handoff pengiriman sisa stok ke WhatsApp sebagai tujuan eksternal

As a Petugas Kasir Toko I should menggunakan nomor WhatsApp petani untuk membuka WhatsApp dengan pesan sisa stok yang sudah terisi so that pengiriman sisa stok terjadi melalui tujuan eksternal yang benar.

  • Provenance: required_inference
  • Trigger/input: Kasir menekan tombol kirim pada Sisa Stok.
  • Observable result: WhatsApp terbuka dengan nomor petani dan pesan sisa stok terisi.
  • Access state: Memerlukan login.
  • Failure/recovery: Jika nomor WhatsApp tidak tersedia atau tautan gagal dibuka, kasir dapat melengkapi nomor atau mencoba lagi.
  • Continuation: Kasir menyelesaikan pengiriman di WhatsApp dan kembali ke aplikasi.

4. User Personas

Page 16 of 32

Petugas Kasir Toko

Konteks produk: Bekerja di balik meja toko Ngudi Makmur 5, sering berdiri dengan petani menunggu di depan, menggunakan ponsel atau laptop sederhana, kadang dengan koneksi internet yang kurang stabil dan cahaya matahari yang terang. Kecepatan dan ketepatan sekilas adalah segalanya.

Tujuan utama: Melayani petani yang mengambil pupuk dengan cepat — mencatat pengambilan, memastikan stok berkurang otomatis, dan mengirimkan sisa stok ke WhatsApp petani.

Tanggung jawab yang diterima:

  • Memilih atau mencatat petani (nama petani, NIK, nomor WhatsApp) saat melayani pengambilan.
  • Mencatat pengambilan pupuk urea dan NPK.
  • Memastikan stok berkurang otomatis setelah pengambilan tersimpan.
  • Mengirimkan jumlah pupuk yang tersisa ke WhatsApp petani.

Input dan keputusan: Memilih petani dari daftar; memasukkan jumlah urea dan/atau NPK yang diambil; memutuskan apakah pengambilan valid (tidak melebihi sisa stok); memutuskan kapan mengirim sisa stok ke WhatsApp.

Interaksi dengan peserta lain: Berinteraksi langsung dengan petani di meja toko; berbagi data petani dan stok dengan Pengelola Data Petani dan Stok; menyerahkan pengiriman akhir pesan ke WhatsApp sebagai tujuan eksternal.

Keberhasilan yang terlihat: Transaksi pengambilan tercatat, stok berkurang otomatis dengan angka yang bergulir turun dan berkedip oranye sekali, dan pemberitahuan sisa stok terkirim ke WhatsApp petani.

Yang membedakan peran ini: Kasir adalah satu-satunya peran yang menjalankan transaksi pengambilan dan pengiriman sisa stok; pekerjaannya diukur dalam detik dan terjadi di depan petani yang menunggu.

Page 17 of 32

Pengelola Data Petani dan Stok

Konteks produk: Bekerja di belakang meja toko atau di ruang belakang, sering kali pada laptop, dengan waktu yang lebih tenang untuk merapikan data. Berurusan dengan berkas CSV dan angka stok yang harus konsisten.

Tujuan utama: Menjaga data petani dan stok urea serta NPK per petani tetap akurat dan konsisten, sehingga pencatatan pengambilan dan pengurangan stok otomatis berjalan benar.

Tanggung jawab yang diterima:

  • Mengelola data petani termasuk nama petani, NIK, dan nomor WhatsApp.
  • Mengimpor data petani dari berkas CSV.
  • Mengekspor data petani ke berkas CSV.
  • Memantau stok pupuk urea dan NPK per petani.

Input dan keputusan: Berkas CSV untuk impor; data petani untuk ditambahkan atau diperbarui; keputusan tentang baris mana yang perlu diperbaiki setelah impor; pemantauan stok rendah.

Interaksi dengan peserta lain: Menyediakan data petani dan stok yang akurat bagi Petugas Kasir Toko; berbagi data melalui ekspor CSV ke alat lain di luar aplikasi.

Keberhasilan yang terlihat: Data petani dan stok tetap konsisten; impor CSV berhasil dengan baris yang gagal terlihat jelas; ekspor CSV menghasilkan berkas yang dapat digunakan.

Yang membedakan peran ini: Pengelola adalah satu-satunya peran yang menangani impor dan ekspor CSV serta pemantauan stok; pekerjaannya bersifat pemeliharaan data, bukan pelayanan langsung di meja.

5. Core User Flows

Page 18 of 32

Alur 1 — Pengguna baru mendaftar dan mulai menggunakan aplikasi (Petugas Kasir Toko)

  1. Kasir membuka aplikasi dan melihat Landing dengan penjelasan aplikasi kasir untuk toko Ngudi Makmur 5, fungsi pencatatan petani, stok, dan pengambilan pupuk.
  2. Kasir menekan tombol masuk kasir dan tiba di Login.
  3. Karena belum memiliki akun, kasir menuju Sign Up.
  4. Kasir mengisi data pendaftaran dan menekan tombol daftar.
  5. Hasil yang terlihat: Akun dibuat dan kasir diarahkan ke Dashboard.
  6. Jika gagal: Data tidak valid atau akun sudah ada — pesan kesalahan ditampilkan; kasir memperbaiki data atau menuju Login.
  7. Lanjutan: Kasir mulai menggunakan aplikasi untuk melayani petani.

Alur 2 — Kasir kembali masuk ke aplikasi (Petugas Kasir Toko)

  1. Kasir membuka aplikasi dan tiba di Landing.
  2. Kasir menuju Login dan memasukkan kredensial.
  3. Hasil yang terlihat: Kasir diarahkan ke Dashboard dan dapat mengakses catatan petani, transaksi pengambilan, dan stok durable.
  4. Jika gagal: Kredensial tidak cocok — pesan kesalahan ditampilkan; kasir mencoba lagi atau menuju Sign Up.
  5. Lanjutan: Kasir melanjutkan pekerjaan kasir.
Page 19 of 32

Alur 3 — Pengelola menambahkan data petani baru (Pengelola Data Petani dan Stok)

  1. Pengelola masuk melalui Login dan tiba di Dashboard.
  2. Pengelola menuju Petani dan melihat daftar data petani dengan nama petani, NIK, nomor WhatsApp, serta sisa urea dan NPK.
  3. Pengelola menuju Petani Baru.
  4. Pengelola mengisi nama petani, NIK, dan nomor WhatsApp, lalu menekan simpan.
  5. Hasil yang terlihat: Data petani tersimpan dan tampil di daftar Petani.
  6. Jika gagal: NIK atau nomor WhatsApp tidak valid, atau data duplikat — pesan kesalahan ditampilkan pada field terkait; pengelola memperbaiki lalu menyimpan ulang.
  7. Lanjutan: Petani tersedia untuk dipilih pada Pengambilan.

Alur 4 — Pengelola mengimpor data petani dari CSV (Pengelola Data Petani dan Stok)

  1. Pengelola masuk melalui Login dan tiba di Dashboard.
  2. Pengelola menuju Impor Petani (Line A: Impor) dan melihat diagram panah skematik.
  3. Pengelola memilih berkas CSV.
  4. Hasil yang terlihat: Data petani yang diimpor tersedia dalam format CSV dan tampil di daftar Petani; ringkasan hasil impor menampilkan jumlah baris berhasil dan gagal.
  5. Jika gagal: Format berkas bukan CSV atau ada baris tidak valid — baris yang gagal ditampilkan tanpa membatalkan baris yang berhasil; pengelola memperbaiki berkas dan mengimpor ulang.
  6. Lanjutan: Petani hasil impor dapat dipilih pada Pengambilan.
Page 20 of 32

Alur 5 — Pengelola mengekspor data petani ke CSV (Pengelola Data Petani dan Stok)

  1. Pengelola masuk melalui Login dan tiba di Dashboard.
  2. Pengelola menuju Ekspor Petani (Line B: Ekspor) dan melihat diagram panah skematik.
  3. Pengelola menekan tombol ekspor.
  4. Hasil yang terlihat: Berkas CSV berisi data petani terunduh.
  5. Jika gagal: Berkas gagal disiapkan — pesan dan tombol coba lagi ditampilkan; pengelola mencoba ekspor ulang.
  6. Lanjutan: Pengelola dapat melanjutkan pekerjaan lain.

Alur 6 — Pengelola memantau stok urea dan NPK per petani (Pengelola Data Petani dan Stok)

  1. Pengelola masuk melalui Login dan tiba di Dashboard.
  2. Pengelola menuju Stok dan melihat stok urea dan NPK per petani dengan angka tabular yang sejajar.
  3. Hasil yang terlihat: Stok urea ditandai aturan vertikal 4px hijau dan stok NPK ditandai aturan vertikal 4px oranye; stok rendah ditandai transit-yellow #E8B93B.
  4. Jika gagal: Stok gagal dimuat — pesan dan tombol coba lagi ditampilkan; pengelola memuat ulang.
  5. Lanjutan: Pengelola dapat menuju Pengambilan atau Sisa Stok.
Page 21 of 32

Alur 7 — Kasir mencatat pengambilan pupuk dan stok berkurang otomatis (Petugas Kasir Toko)

  1. Kasir masuk melalui Login dan tiba di Dashboard.
  2. Kasir menuju Pengambilan; nama petani adalah elemen terbesar di layar ini.
  3. Kasir memilih petani dari daftar.
  4. Kasir memasukkan jumlah urea dan/atau NPK yang diambil.
  5. Kasir menekan simpan.
  6. Hasil yang terlihat: Pengambilan tersimpan dan stok pupuk yang diambil berkurang otomatis; angka sisa stok bergulir turun selama 240ms dan berkedip oranye sekali, lalu tenang.
  7. Jika gagal: Jumlah melebihi sisa stok atau data tidak valid — pengambilan tidak disimpan dan pesan kesalahan ditampilkan; kasir memperbaiki jumlah dan menyimpan ulang.
  8. Lanjutan: Kasir melanjutkan ke Sisa Stok.

Alur 8 — Kasir mengirim sisa stok ke WhatsApp petani (Petugas Kasir Toko)

  1. Setelah pengambilan tersimpan, kasir tiba di Sisa Stok dan melihat ringkasan sisa urea dan NPK.
  2. Kasir melihat pratinjau pesan sisa stok yang akan dikirim.
  3. Kasir menekan tombol "Kirim sisa stok ke WA" — terminus oranye terakhir pada diagram transit.
  4. Hasil yang terlihat: WhatsApp terbuka melalui tautan wa.me/<nomor> dengan pesan sisa stok yang sudah terisi.
  5. Jika gagal: Nomor WhatsApp petani tidak tersedia — kasir diarahkan untuk melengkapi nomor tersebut melalui Petani Baru; setelah dilengkapi, kasir mencoba lagi.
  6. Lanjutan: Kasir menyelesaikan pengiriman di dalam WhatsApp dan kembali ke Pengambilan atau Stok untuk melayani petani berikutnya.
Page 22 of 32

6. Visuals Colors and Theme

Arah kreatif proyek ini adalah "Typographic infrastructure for a village fertilizer counter — Fira Sans signage over ledger-green", dengan Erik Spiekermann sebagai muse. Bahasa visualnya adalah tipografi sebagai infrastruktur: sistem sans humanis, jalur bernomor, warna sinyal yang dipakai seperti rute transit, dan kehangatan yang tertahan di dalam keteraturan. Ini adalah sistem informasi sebuah institusi kecil — buku besar koperasi, bukan dasbor startup.

Palet (light mode)

PeranHexPenggunaan
Background#EFEAD9Ground kertas kraft hangat — warna buku besar koperasi, tidak pernah putih
Surface#FBF7EAPermukaan kartu yang sedikit lebih terang
Text#1C1A16Teks ink-black-brown untuk keterbacaan maksimal di cahaya matahari
Primary#0F5132Hijau ledger/padi tua — chrome aplikasi, bar wordmark toko, dan rute Urea
Accent#E4572EOranye sinyal — rute NPK, aksi "Kirim ke WA", dan angka stok yang berkurang
Muted#6E6A5CMicro-label dan data key
Warning#E8B93BTransit-yellow untuk peringatan stok rendah

Proporsi: 70% paper ground, 20% green, 8% ink, 2% orange/yellow. Setiap warna adalah hex spesifik — tanpa gradien, tanpa glass.

Page 23 of 32

Tipografi

  • Headings: Fira Sans Condensed — Bold (700) dan SemiBold (600), flush-left ragged-right, tight tracking (-0.01em), sentence case untuk heading dan ALL-CAPS dengan +0.08em letterspacing untuk micro-label dan data key (NIK, NO. WA, UREA, NPK).
  • Body: Fira Sans.
  • Angka: Tabular figures sehingga kolom stok sejajar seperti jadwal.
  • Skala: 1.333 modular — 56/42/32/24/18/16/14. Display 56px mobile → 96px desktop via clamp(3.5rem, 7vw, 6rem); section heading 32/42; farmer-name row 24/32; body 16/18; micro-label 13px caps.
  • Headline scale: Besar dan percaya diri — nama petani adalah hal terbesar di layar Pengambilan.

Shape Language

  • Kontrol rounded-rectangle dengan radius 10px (sudut tiket transit, bukan pill).
  • Border solid ink 1.5px pada kartu dan input, bukan shadow.
  • Band warna bertepi keras untuk header seksi.
  • Satu aturan vertikal 4px hijau atau oranye yang berjalan di kiri setiap baris petani dan setiap baris stok — "transit line" yang mengkodekan pupuk mana yang dimiliki baris tersebut.
  • Tombol persegi panjang dengan solid shadow offset 2px (efek papan cetak), tidak pernah soft blur.
Page 24 of 32

Layout

Sistem bernomor yang dipimpin kolom. Aplikasi adalah grid yang terlihat: rail kiri persisten di desktop (bernomor 01 Dashboard, 02 Petani, 03 Pengambilan, 04 Stok, 05 Impor/Ekspor) yang runtuh menjadi bottom tab bar di ponsel. Setiap layar dibuka dengan band warna full-width yang membawa nomor dan judulnya dalam condensed caps — papan stasiun. Catatan petani bersifat tabular: NIK, Nama, No. WA, Sisa Urea, Sisa NPK, dengan hairline rules dan angka tabular yang sejajar. Di ponsel tabel menjadi baris berlabel bertumpuk (label 13px caps muted, nilai 18px ink) sehingga tidak ada yang terpotong. Impor/Ekspor CSV disajikan sebagai dua "line" bernomor (Line A: Impor, Line B: Ekspor) dengan diagram panah skematik.

Imagery

Diagrammatic, bukan fotografis. Hero dan empty state menggunakan pictogram garis tebal dalam palet ink/hijau/oranye: karung urea, karung NPK, kartu ID petani, ponsel dengan panah kirim WhatsApp. Satu diagram 'flow' skematik menunjukkan loop inti — Petani → Pengambilan → Stok berkurang → Kirim WA — digambar sebagai garis transit horizontal dengan empat perhentian, hijau dengan terminus oranye. Tanpa stok foto orang, tanpa 3D blob, tanpa foto sawah.

Page 25 of 32

7. Signature Design Concept

Hero Landing: "Garis Transit Pupuk"

Hero Landing adalah bidang kertas hangat full-bleed (#EFEAD9) yang dibelah oleh satu garis transit hijau horizontal (#0F5132) yang berjalan dari tepi ke tepi pada ketinggian 58%.

Di atas garis: headline Fira Sans Condensed flush-left dan oversized, ditumpuk dalam empat baris — "CATAT PETANI. / KURANGI STOK. / KIRIM SISA / KE WHATSAPP." — diatur pada clamp(3.5rem, 7vw, 6rem), ink-black (#1C1A16), tepi kiri sejajar dengan grid, menempati sekitar 9 kolom dari grid 12 kolom.

Di bawah garis, duduk di atas kertas (bukan di dalam kartu): identitas toko "NGUDI MAKMUR 5" dalam 13px green caps dengan penanda kotak hijau kecil, dan CTA persegi panjang berbingkai ink "MASUK KASIR" dengan solid shadow offset 2px.

Di sepertiga kanan: diagram transit skematik empat perhentian (Petani → Pengambilan → Stok → WA) digambar sebagai garis hijau dengan titik terminus oranye (#E4572E) — tanpa ilustrasi, tanpa gradien.

Komposisinya asimetris dan berbobot kiri — tidak ada yang di tengah, tidak ada yang mengambang, dan tidak ada biru di mana pun pada layar pertama. Konsep ini hanya menyusun ulang konten, state, dan kontrol yang sudah diterima — tidak ada perilaku, halaman, atau tujuan baru.

8. Interaction Model & Motion Direction

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

Page 26 of 32

Landing Hero Motion Brief

  • Focal subject: Garis transit hijau horizontal yang membelah bidang kertas hangat, dengan headline empat baris di atasnya dan diagram empat perhentian di sepertiga kanan.
  • Input → transformation → outcome thesis: Saat halaman dimuat, garis transit hijau tergambar dari tepi kiri ke tepi kanan (200ms wipe), headline empat baris muncul flush-left, dan titik terminus oranye menyala di ujung diagram — hasilnya adalah papan stasiun yang tenang dan langsung terbaca, bukan animasi dekoratif.
  • Motion vocabulary: 120–180ms ease-out pada perubahan state; 200ms wipe saat band warna berubah antar seksi; 240ms slide tunggal saat angka stok berkurang setelah Pengambilan disimpan (angka bergulir turun dan berkedip oranye sekali, lalu tenang). Tanpa bounce, tanpa partikel, tanpa parallax.
  • Composed first frame: Bidang kertas #EFEAD9 penuh; garis transit hijau pada 58% tinggi; headline ink-black flush-left menempati 9 kolom; identitas toko dan CTA di bawah garis; diagram empat perhentian di sepertiga kanan dengan terminus oranye.
  • Reduced-motion state: Di bawah prefers-reduced-motion, semua ini menjadi perubahan state instan dengan highlight oranye statis pada angka yang berubah; garis transit dan headline tampil penuh tanpa animasi.

9. Non-Functional Requirements

Page 27 of 32

NFR-01 — Keterbacaan di cahaya matahari terang

  • Provenance: explicit (dari arah kreatif)
  • Constraint: Teks menggunakan ink-black-brown #1C1A16 di atas ground kertas #EFEAD9; tidak ada putih #FFFFFF sebagai ground halaman.
  • Rationale: Kasir bekerja di meja toko dengan cahaya matahari terang; kontras tinggi diperlukan untuk keterbacaan sekilas.

NFR-02 — Angka tabular untuk kolom stok

  • Provenance: explicit (dari arah kreatif)
  • Constraint: Semua angka stok menggunakan tabular figures sehingga kolom sejajar seperti jadwal.
  • Rationale: Kasir dan pengelola harus dapat membandingkan sisa urea dan NPK antar petani dengan cepat.

NFR-03 — Keterbacaan teks dan kontrol di semua viewport

  • Provenance: explicit (dari arah kreatif)
  • Constraint: Headline, wordmark, label, angka, teks kartu, dan kontrol tetap utuh di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px, membungkus atau menskalakan (misalnya font-size: clamp(...) dengan ukuran mobile-nya) agar muat; tidak ada elemen lain yang menutupi bagian mana pun dari teks atau kontrol tersebut.
  • Rationale: Kasir menggunakan ponsel atau laptop sederhana; tabel harus menjadi baris berlabel bertumpuk di ponsel sehingga tidak ada yang terpotong.
Page 28 of 32

NFR-04 — Aksesibilitas gerak

  • Provenance: explicit (dari arah kreatif)
  • Constraint: Di bawah prefers-reduced-motion, semua animasi menjadi perubahan state instan dengan highlight oranye statis pada angka yang berubah.
  • Rationale: Pengguna dengan preferensi gerak tereduksi tetap harus dapat menggunakan aplikasi dengan nyaman.

NFR-05 — Format CSV untuk impor dan ekspor data petani

  • Provenance: explicit
  • Constraint: Impor dan ekspor data petani hanya dalam format CSV.
  • Rationale: Batasan eksplisit dari sumber pengguna.

NFR-06 — Identitas dan kontinuitas sesi

  • Provenance: required_inference
  • Constraint: Catatan petani, transaksi pengambilan, dan stok durable memerlukan login; Landing, Login, dan Sign Up dapat diakses tanpa login.
  • Rationale: Data durable harus terikat pada pengguna yang benar; pendaftaran mandiri diperlukan karena tidak ada batas provisioning atau undangan yang ditetapkan.
Page 29 of 32

NFR-07 — Handoff WhatsApp sebagai tujuan eksternal

  • Provenance: required_inference
  • Constraint: Aplikasi tidak mengirim pesan WhatsApp secara langsung; aplikasi membuka tautan wa.me/<nomor> yang sudah terisi pesan sisa stok, dan pengiriman akhir dilakukan di dalam WhatsApp.
  • Rationale: WhatsApp adalah tujuan eksternal yang dimiliki pihak lain; aplikasi hanya menyiapkan handoff.

10. Tech Stack

  • Frontend: React (aplikasi web yang diakses melalui browser di ponsel atau laptop kasir).
  • Backend: Python/FastAPI untuk melayani data petani, stok, transaksi pengambilan, dan impor/ekspor CSV.
  • Storage: Basis data relasional untuk menyimpan data petani (nama petani, NIK, nomor WhatsApp), stok urea dan NPK per petani, serta transaksi pengambilan.
  • Deployment: Docker/docker-compose untuk menjalankan aplikasi dan basis data.

Tidak ada pilihan teknologi lain yang ditentukan oleh sumber pengguna.

11. Assumptions and Constraints

Page 30 of 32

Asumsi

  • A-01: Pengguna aplikasi adalah Petugas Kasir Toko dan Pengelola Data Petani dan Stok di toko Ngudi Makmur 5. (required_inference)
  • A-02: Setiap petani memiliki satu catatan dengan nama petani, NIK, dan nomor WhatsApp. (explicit)
  • A-03: Stok urea dan NPK dicatat per petani. (explicit)
  • A-04: Pengambilan pupuk dicatat oleh kasir saat petani mengambil pupuk di toko. (explicit)
  • A-05: Nomor WhatsApp petani digunakan sebagai tujuan handoff pengiriman sisa stok. (required_inference)
  • A-06: Pengguna baru mendaftar sendiri melalui Sign Up karena tidak ada batas provisioning atau undangan yang ditetapkan. (required_inference)

Batasan

  • C-01: Aplikasi ditujukan untuk toko Ngudi Makmur 5. (explicit)
  • C-02: Data petani mencakup nama petani, NIK, dan nomor WhatsApp. (explicit)
  • C-03: Stok pupuk yang dikelola adalah urea dan NPK per petani. (explicit)
  • C-04: Impor dan ekspor data petani hanya dalam format CSV. (explicit)
  • C-05: Pengiriman sisa stok ke WhatsApp adalah handoff ke tujuan eksternal; pengiriman akhir dilakukan di dalam WhatsApp. (required_inference)
  • C-06: Tidak ada fitur masa depan yang didefinisikan dalam sumber; semua pekerjaan yang dijelaskan adalah lingkup saat ini. (explicit)
Page 31 of 32

12. Glossary

  • APK: Aplikasi kasir yang dijelaskan dalam sumber pengguna; dalam dokumen ini diwujudkan sebagai aplikasi web yang diakses melalui browser.
  • CSV: Format berkas teks berpemisah koma yang digunakan untuk impor dan ekspor data petani.
  • Impor: Memasukkan data petani dari berkas CSV ke dalam aplikasi.
  • Ekspor: Mengeluarkan data petani dari aplikasi ke berkas CSV.
  • NPK: Salah satu jenis pupuk yang stoknya dikelola per petani, ditandai dengan rute oranye.
  • NIK: Nomor Induk Kependudukan — salah satu field wajib dalam data petani.
  • Pengambilan: Transaksi saat petani mengambil pupuk urea dan/atau NPK di toko, yang secara otomatis mengurangi stok.
  • Petani: Pelanggan toko yang datanya dicatat (nama petani, NIK, nomor WhatsApp) dan yang stok pupuknya dikelola per petani.
  • Sisa Stok: Jumlah pupuk urea dan NPK yang tersisa untuk seorang petani setelah pengambilan; dapat dikirim ke WhatsApp petani.
  • Urea: Salah satu jenis pupuk yang stoknya dikelola per petani, ditandai dengan rute hijau.
  • WhatsApp: Tujuan eksternal untuk pengiriman pesan sisa stok melalui tautan wa.me/<nomor>.
  • Ngudi Makmur 5: Nama toko yang menjadi pemilik dan tujuan aplikasi kasir ini.
Page 32 of 32
Landing design preview
Landing: View cashier app intro
Login: 1. Sign in
Sign Up: 2. Create account
Login: 3. Fix credentials and retry
Dashboard: Review stock summary
Dashboard: Retry loading summary
Petani: 1. View petani list
Petani Baru: 2. Fill nama, NIK, No. WA
Petani Baru: 3. Fix invalid or duplicate data
Impor Petani: 4. Select CSV file
Impor Petani: 5. Review import summary and failed rows
Ekspor Petani: 1. Export petani to CSV
Ekspor Petani: 2. Retry export
Stok: 1. Monitor urea and NPK per petani
Stok: 2. Reload stock on failure
Stok: Open low-stock petani context
Landing design preview
Landing: View cashier app intro
Login: 1. Sign in
Sign Up: 2. Create account
Login: 3. Fix credentials and retry
Dashboard: Review stock summary
Dashboard: Retry loading summary
Petani: 1. View petani list
Petani Baru: 2. Fill nama, NIK, No. WA
Petani Baru: 3. Fix invalid or duplicate data
Impor Petani: 4. Select CSV file
Impor Petani: 5. Review import summary and failed rows
Ekspor Petani: 1. Export petani to CSV
Ekspor Petani: 2. Retry export
Stok: 1. Monitor urea and NPK per petani
Stok: 2. Reload stock on failure
Stok: Open low-stock petani context