System Requirements Document for keanggotaan-absensi

1. Introduction

keanggotaan-absensi adalah aplikasi administrasi komunitas anggota yang menyatukan lima hal pokok dalam satu tempat: data diri dan status keanggotaan, absensi kehadiran, pembayaran uang kas melalui QRIS, kartu tanda anggota, serta rekapan kehadiran dan uang kas. Aplikasi ini ditujukan untuk komunitas anggota di Indonesia — misalnya perkumpulan warga, komunitas, sanggar, atau koperasi — yang perlu mencatat siapa anggotanya, siapa yang hadir, dan siapa yang sudah membayar kas bulanan.

Audiens produk terdiri dari dua peran aktif:

• Anggota — pengguna utama yang melihat dan mengelola data dirinya, memeriksa status keanggotaannya, mencatat kehadiran, membayar uang kas lewat QRIS, dan menampilkan kartu tanda anggota.
• Pengurus/Bendahara — pengguna yang memantau rekapan kehadiran dan rekapan uang kas seluruh anggota, serta memastikan pembayaran kas via QRIS tercatat.

Produk ini adalah buku catatan komunitas yang jujur dan dapat dipercaya: buku besar kehadiran dan kas, dengan lencana klub tercetak di atasnya.

2. System Overview

keanggotaan-absensi adalah aplikasi web dengan antarmuka kustom milik aplikasi sendiri. Aplikasi menyediakan identitas milik aplikasi (pendaftaran mandiri dan verifikasi kembali melalui Login) karena data keanggotaan, riwayat kehadiran, dan status pembayaran kas harus terikat pada anggota yang benar dan dapat dilihat kembali.

Aktor aktif (manusia):

• Anggota — melihat dan mengelola data diri, melihat status keanggotaan, mencatat dan meninjau absensi kehadiran, melakukan pembayaran uang kas via QRIS, menampilkan kartu tanda anggota.
• Pengurus/Bendahara — melihat rekapan kehadiran seluruh anggota dan rekapan uang kas serta pembayaran anggota.

Aktor non-persona (sistem/penyedia):

• Penyedia QRIS — pihak eksternal yang memproses pembayaran QRIS; aplikasi menampilkan QR, menerima hasil pembayaran, dan mencatat statusnya.
• Sistem aplikasi — menyimpan data anggota, catatan kehadiran, catatan pembayaran, dan menghasilkan rekapan.

Perilaku yang dicakup saat ini: data diri anggota, status keanggotaan, absensi kehadiran, pembayaran uang kas menggunakan QRIS, kartu tanda anggota, rekapan kehadiran, dan rekapan uang kas.

Batasan sempit: aplikasi tidak menambahkan modul di luar tujuh cakupan yang diminta (misalnya manajemen acara, pengumuman, atau fitur keuangan lain di luar uang kas). Pembayaran QRIS diproses oleh penyedia QRIS; aplikasi menampilkan QR, menerima hasil, dan mencatat status pembayaran.

2a. Product Interpretation and Delivery Boundary

Aplikasi ini dimiliki dan dijalankan sebagai antarmuka kustom milik aplikasi sendiri. Karena data keanggotaan, riwayat kehadiran, dan status pembayaran kas harus tetap terikat pada anggota yang benar dan dapat dibuka kembali, aplikasi menyediakan identitas milik aplikasi: pengguna pertama kali melakukan pendaftaran mandiri, dan pengguna yang kembali melakukan verifikasi melalui Login sebelum mengakses data dan fitur terlindungi.

Halaman Landing dapat diakses tanpa identitas dan menjelaskan aplikasi, sasaran pengguna, serta fitur data anggota, absensi, pembayaran QRIS, kartu anggota, dan rekapan. Halaman Login dan Sign Up juga merupakan permukaan masuk tanpa identitas. Halaman Profile, Membership, Attendance, Cash Payment, dan Member Card adalah area kerja Anggota yang terlindungi. Halaman Attendance Summary dan Cash Summary adalah area kerja Pengurus/Bendahara yang terlindungi dan hanya dapat diakses oleh akun dengan peran berwenang.

Pembayaran QRIS diproses oleh penyedia QRIS di luar aplikasi; aplikasi menampilkan kode QR, menerima hasil pembayaran, dan mencatat status pembayaran yang dapat ditinjau kembali.

Seluruh cakupan yang diminta berada pada horizon saat ini. Tidak ada permintaan fitur masa depan yang dinyatakan secara eksplisit dalam sumber.

2c. Page Content and Component Coverage

Landing

• Informasi/state: penjelasan aplikasi, sasaran pengguna (komunitas anggota), dan fitur yang tersedia — data anggota, absensi, pembayaran QRIS, kartu anggota, serta rekapan kehadiran dan uang kas. Pita rekapan menampilkan nama-nama anggota yang bergerak perlahan.
• Aksi utama: masuk ke Login atau Sign Up melalui tombol "Masuk / Daftar".
• Aksi pendukung: membaca penjelasan fitur; melihat pita rekapan nama anggota.
• Entitas domain: anggota (nama pada pita rekapan), fitur aplikasi.
• Tanggung jawab komponen: band denim dengan lencana klub dan judul bertumpuk; strip tiga panel buku besar bergaris ("Anggota", "Hadir bulan ini", "Kas terkumpul"); tombol CTA oranye; pita marquee nama anggota.
• State: loading — kerangka panel buku besar; empty — bila belum ada data rekapan, panel menampilkan nilai nol; success — penjelasan dan panel tampil; error — bila data rekapan gagal dimuat, panel menampilkan nilai tidak tersedia; recovery — pengguna tetap dapat menuju Login/Sign Up.

Login

• Informasi/state: formulir verifikasi kembali untuk Anggota dan Pengurus/Bendahara.
• Aksi utama: memverifikasi identitas untuk mengakses data dan rekapan yang tersimpan.
• Aksi pendukung: menuju Sign Up bila belum memiliki akun.
• Entitas domain: akun pengguna, peran (Anggota, Pengurus/Bendahara).
• Tanggung jawab komponen: kolom identitas dan kata sandi; tombol masuk; tautan ke Sign Up; pesan kesalahan.
• State: loading — tombol masuk dalam keadaan memproses; empty — formulir kosong; success — pengguna diarahkan ke area kerja sesuai perannya; error — kredensial tidak cocok, pesan kesalahan tampil; recovery — pengguna dapat mencoba lagi atau menuju Sign Up.

Sign Up

• Informasi/state: formulir pendaftaran mandiri bagi pengguna pertama kali.
• Aksi utama: membuat akun baru.
• Aksi pendukung: menuju Login bila sudah memiliki akun.
• Entitas domain: akun pengguna, data diri awal, peran.
• Tanggung jawab komponen: kolom data pendaftaran; tombol daftar; tautan ke Login; pesan kesalahan.
• State: loading — tombol daftar dalam keadaan memproses; empty — formulir kosong; success — akun dibuat dan pengguna diarahkan untuk melanjutkan; error — data tidak lengkap atau sudah terdaftar, pesan kesalahan tampil; recovery — pengguna dapat memperbaiki data atau menuju Login.

Profile

• Informasi/state: data diri anggota yang tersimpan.
• Aksi utama: melihat dan mengelola data diri.
• Aksi pendukung: berpindah ke tab lain (Absensi, Kas, Kartu).
• Entitas domain: anggota, data diri (nama, identitas, kontak).
• Tanggung jawab komponen: panel judul dengan bar denim dan garis oranye; baris buku besar berlabel kiri dan nilai rata kanan; tab strip lencana (Profil, Absensi, Kas, Kartu).
• State: loading — baris buku besar dalam keadaan memuat; empty — data diri belum lengkap, ditandai bidang kosong; success — data diri tampil; error — data gagal dimuat, pesan tampil; recovery — pengguna dapat memuat ulang.

Membership

• Informasi/state: status keanggotaan anggota.
• Aksi utama: melihat status keanggotaan.
• Aksi pendukung: berpindah ke tab lain.
• Entitas domain: anggota, status keanggotaan, nomor keanggotaan.
• Tanggung jawab komponen: panel judul; baris buku besar status; stempel status.
• State: loading — status dalam keadaan memuat; empty — status belum ditetapkan; success — status keanggotaan tampil; error — status gagal dimuat, pesan tampil; recovery — pengguna dapat memuat ulang.

Attendance

• Informasi/state: kisi stempel kehadiran bulanan; setiap hari hadir adalah lingkaran oranye penuh dengan centang putih, hari tidak hadir lingkaran clay bergaris, hari izin titik mustard, dan sel hari ini berbingkai garis putus-putus; hitungan kehadiran bulan berjalan di header panel.
• Aksi utama: mencatat absensi kehadiran dengan menekan hari.
• Aksi pendukung: meninjau riwayat kehadiran bulan berjalan.
• Entitas domain: catatan kehadiran, tanggal, status kehadiran (hadir, tidak hadir, izin).
• Tanggung jawab komponen: kisi stempel 7 kolom; header panel dengan hitungan; animasi stempel 220ms saat kehadiran dicatat.
• State: loading — kisi dalam keadaan memuat; empty — belum ada catatan pada bulan berjalan; success — stempel muncul dan hitungan bertambah; error — pencatatan gagal, pesan tampil; recovery — pengguna dapat menekan ulang hari tersebut.

Cash Payment

• Informasi/state: kode QR QRIS di dalam bingkai oranye tebal dengan tanda potong di sudut; strip keterangan denim "KAS BULAN INI — Rp 25.000"; stempel "LUNAS" miring -8 derajat yang mendarat saat status pembayaran berubah.
• Aksi utama: melakukan pembayaran uang kas menggunakan QRIS.
• Aksi pendukung: melihat pencatatan pembayaran.
• Entitas domain: pembayaran kas, nominal, status pembayaran, tanggal.
• Tanggung jawab komponen: bingkai QR dengan tanda potong; strip keterangan denim; stempel LUNAS; daftar pencatatan pembayaran.
• State: loading — kode QR dalam keadaan dimuat; empty — belum ada pembayaran tercatat; success — status pembayaran berubah dan stempel LUNAS mendarat; error — pembayaran gagal atau tidak terkonfirmasi, pesan tampil; recovery — pengguna dapat mencoba lagi dan status pembayaran tetap dapat ditinjau.

Member Card

• Informasi/state: kartu tanda anggota berukuran 340x214px dengan muka denim, bingkai tinta 3px, segel klub bulat berring oranye di kiri atas, nama anggota dalam Alfa Slab One kapital, nomor keanggotaan dalam angka tabular Oswald 700, dan blok QR di kanan bawah di dalam tanda potong oranye; kartu kedua miring -4 derajat dan bergeser 10px di belakangnya pada desktop.
• Aksi utama: menampilkan kartu tanda anggota.
• Aksi pendukung: berpindah ke tab lain.
• Entitas domain: anggota, nomor keanggotaan, kartu tanda anggota.
• Tanggung jawab komponen: muka kartu denim; segel klub; blok QR; tumpukan kartu.
• State: loading — kartu dalam keadaan dimuat; empty — nomor keanggotaan belum tersedia; success — kartu tampil; error — kartu gagal dimuat, pesan tampil; recovery — pengguna dapat memuat ulang.

Attendance Summary

• Informasi/state: rekapan kehadiran seluruh anggota.
• Aksi utama: melihat rekapan kehadiran seluruh anggota.
• Aksi pendukung: meninjau baris per anggota.
• Entitas domain: anggota, catatan kehadiran, periode rekapan.
• Tanggung jawab komponen: panel judul dengan bar denim dan garis oranye; tabel buku besar bergaris dengan header kapital; baris bergantian warna kertas/krem.
• State: loading — tabel dalam keadaan memuat; empty — belum ada catatan kehadiran pada periode; success — rekapan tampil; error — rekapan gagal dimuat, pesan tampil; recovery — pengurus dapat memuat ulang.

Cash Summary

• Informasi/state: rekapan uang kas dan pembayaran anggota; buku besar dua kolom (tanggal | nominal) dengan garis tinta 1px, baris bergantian warna kertas/krem, saldo berjalan di margin kanan setiap baris, dan footer lengket denim menampilkan "Saldo kas" dengan total dalam angka tabular Oswald 700.
• Aksi utama: melihat rekapan uang kas dan pembayaran anggota.
• Aksi pendukung: mencatat pembayaran melalui tombol oranye "Catat pembayaran".
• Entitas domain: pembayaran kas, anggota, nominal, saldo kas, tanggal.
• Tanggung jawab komponen: buku besar dua kolom; saldo berjalan; footer lengket denim; tombol "Catat pembayaran".
• State: loading — buku besar dalam keadaan memuat; empty — belum ada pembayaran pada periode; success — rekapan dan saldo tampil; error — rekapan gagal dimuat, pesan tampil; recovery — pengurus dapat memuat ulang.

3. Functional Requirements

FR-01 — Data diri anggota As an Anggota I should melihat dan mengelola data diri saya so that data keanggotaan saya tercatat dengan benar.

• Provenance: explicit
• Trigger/input: Anggota membuka Profile dan mengisi atau memperbarui data dirinya.
• Observable result: data diri tersimpan dan tampil kembali pada baris buku besar.
• Access: area terlindungi bagi Anggota.
• Failure/recovery: bila data gagal dimuat atau disimpan, pesan kesalahan tampil dan Anggota dapat memuat ulang atau memperbaiki isian.
• Continuation: Anggota dapat berpindah ke Membership, Attendance, Cash Payment, atau Member Card.

FR-02 — Status keanggotaan As an Anggota I should melihat status keanggotaan saya so that saya tahu kedudukan keanggotaan saya.

• Provenance: explicit
• Trigger/input: Anggota membuka Membership.
• Observable result: status keanggotaan dan nomor keanggotaan tampil.
• Access: area terlindungi bagi Anggota.
• Failure/recovery: bila status gagal dimuat, pesan tampil dan Anggota dapat memuat ulang.
• Continuation: Anggota dapat menampilkan kartu tanda anggota atau mencatat kehadiran.

FR-03 — Absensi kehadiran As an Anggota I should mencatat dan meninjau absensi kehadiran saya so that kehadiran saya tercatat per hari.

• Provenance: explicit
• Trigger/input: Anggota membuka Attendance dan menekan hari pada kisi stempel.
• Observable result: hari tersebut berubah menjadi stempel kehadiran dan hitungan kehadiran bulan berjalan bertambah.
• Access: area terlindungi bagi Anggota.
• Failure/recovery: bila pencatatan gagal, pesan tampil dan Anggota dapat menekan ulang hari tersebut.
• Continuation: Anggota dapat meninjau riwayat kehadiran bulan berjalan atau berpindah tab.

FR-04 — Pembayaran uang kas menggunakan QRIS As an Anggota I should melakukan pembayaran uang kas menggunakan QRIS so that kewajiban kas saya terbayar dan tercatat.

• Provenance: explicit
• Trigger/input: Anggota membuka Cash Payment dan memindai kode QR QRIS yang ditampilkan.
• Observable result: status pembayaran berubah dan stempel "LUNAS" mendarat pada layar; pembayaran tercatat.
• Access: area terlindungi bagi Anggota.
• Failure/recovery: bila pembayaran gagal atau tidak terkonfirmasi, pesan tampil dan Anggota dapat mencoba lagi; status pembayaran tetap dapat ditinjau.
• Continuation: Anggota dapat meninjau pencatatan pembayaran pada halaman yang sama.

FR-05 — Kartu tanda anggota As an Anggota I should menampilkan kartu tanda anggota saya so that saya dapat menunjukkan bukti keanggotaan.

• Provenance: explicit
• Trigger/input: Anggota membuka Member Card.
• Observable result: kartu tanda anggota tampil dengan nama, nomor keanggotaan, segel klub, dan blok QR.
• Access: area terlindungi bagi Anggota.
• Failure/recovery: bila kartu gagal dimuat, pesan tampil dan Anggota dapat memuat ulang.
• Continuation: Anggota dapat berpindah tab.

FR-06 — Rekapan kehadiran As a Pengurus/Bendahara I should melihat rekapan kehadiran seluruh anggota so that saya dapat mengelola organisasi berdasarkan data kehadiran yang akurat.

• Provenance: explicit
• Trigger/input: Pengurus/Bendahara membuka Attendance Summary.
• Observable result: tabel rekapan kehadiran seluruh anggota tampil untuk periode yang ditinjau.
• Access: area terlindungi bagi akun dengan peran berwenang.
• Failure/recovery: bila rekapan gagal dimuat, pesan tampil dan pengurus dapat memuat ulang.
• Continuation: pengurus dapat berpindah ke Cash Summary.

FR-07 — Rekapan uang kas As a Pengurus/Bendahara I should melihat rekapan uang kas dan pembayaran anggota so that saya dapat memastikan kas komunitas tercatat akurat.

• Provenance: explicit
• Trigger/input: Pengurus/Bendahara membuka Cash Summary.
• Observable result: buku besar dua kolom dengan saldo berjalan dan total saldo kas tampil.
• Access: area terlindungi bagi akun dengan peran berwenang.
• Failure/recovery: bila rekapan gagal dimuat, pesan tampil dan pengurus dapat memuat ulang.
• Continuation: pengurus dapat mencatat pembayaran melalui tombol "Catat pembayaran".

FR-08 — Pendaftaran mandiri As a calon pengguna I should melakukan pendaftaran mandiri sebelum penggunaan pertama apabila belum memiliki akun so that saya dapat mulai menggunakan aplikasi.

• Provenance: required_inference
• Trigger/input: pengguna pertama kali membuka Sign Up dan mengisi data pendaftaran.
• Observable result: akun dibuat dan pengguna dapat melanjutkan.
• Access: permukaan tanpa identitas.
• Failure/recovery: bila data tidak lengkap atau sudah terdaftar, pesan kesalahan tampil dan pengguna dapat memperbaiki isian atau menuju Login.
• Continuation: pengguna melanjutkan ke Login untuk verifikasi kembali.

FR-09 — Verifikasi kembali melalui Login As an Anggota atau Pengurus/Bendahara I should melakukan verifikasi kembali melalui Login so that saya dapat melanjutkan akses ke data dan fitur terlindungi.

• Provenance: required_inference
• Trigger/input: pengguna memasukkan kredensial pada Login.
• Observable result: pengguna diarahkan ke area kerja sesuai perannya.
• Access: permukaan tanpa identitas.
• Failure/recovery: bila kredensial tidak cocok, pesan kesalahan tampil dan pengguna dapat mencoba lagi atau menuju Sign Up.
• Continuation: Anggota melanjutkan ke Profile, Membership, Attendance, Cash Payment, atau Member Card; Pengurus/Bendahara melanjutkan ke Attendance Summary atau Cash Summary.

FR-10 — Peran berwenang untuk rekapan As a Pengurus/Bendahara I should memiliki peran yang berwenang sebelum mengakses rekapan kehadiran dan uang kas so that rekapan hanya dibuka oleh pengelola yang bertanggung jawab.

• Provenance: required_inference
• Trigger/input: akun dengan peran berwenang membuka Attendance Summary atau Cash Summary.
• Observable result: rekapan tampil bagi akun berwenang; akun tanpa peran berwenang tidak dapat membuka rekapan.
• Access: area terlindungi dengan pembatasan peran.
• Failure/recovery: bila akun tidak berwenang, akses ditolak dan pengguna diarahkan kembali.
• Continuation: pengurus dapat meninjau rekapan dan mencatat pembayaran.

FR-11 — Status pembayaran QRIS yang dapat dicatat dan ditinjau As an Anggota I should mendapatkan status pembayaran yang dapat dicatat dan ditinjau kembali setelah pembayaran QRIS so that saya dan bendahara dapat memastikan pembayaran tercatat.

• Provenance: required_inference
• Trigger/input: hasil pembayaran QRIS diterima dari penyedia QRIS.
• Observable result: status pembayaran tercatat dan tampil pada Cash Payment serta rekapan uang kas.
• Access: area terlindungi bagi Anggota; rekapan bagi Pengurus/Bendahara.
• Failure/recovery: bila hasil pembayaran tidak terkonfirmasi, status tetap dapat ditinjau dan Anggota dapat mencoba lagi.
• Continuation: Anggota meninjau pencatatan; pengurus melihatnya pada rekapan uang kas.

4. User Personas

Anggota

Konteks produk: Anggota adalah pengguna utama aplikasi. Ia biasanya membuka aplikasi dari ponsel Android kelas menengah untuk mengecek keanggotaannya, mencatat kehadiran, membayar kas bulanan, dan menunjukkan kartu tanda anggota.

Tujuan utama: memastikan data keanggotaan, riwayat kehadiran, dan status pembayaran kasnya tercatat dan dapat dilihat kembali.

Tanggung jawab yang diterima:

• Melihat dan mengelola data diri (FR-01).
• Melihat status keanggotaan (FR-02).
• Mencatat dan meninjau absensi kehadiran (FR-03).
• Melakukan pembayaran uang kas menggunakan QRIS (FR-04).
• Menampilkan kartu tanda anggota (FR-05).
• Meninjau status pembayaran yang tercatat (FR-11).

Input dan keputusan: mengisi data diri; menekan hari pada kisi stempel kehadiran; memindai kode QR QRIS dan menyelesaikan pembayaran; memutuskan untuk mencoba lagi bila pembayaran gagal.

Interaksi dengan peserta lain: hasil pembayaran QRIS yang dicatat Anggota menjadi bahan rekapan uang kas yang ditinjau Pengurus/Bendahara; catatan kehadiran Anggota menjadi bahan rekapan kehadiran.

Keberhasilan yang dapat diamati: data keanggotaan, riwayat kehadiran, dan status pembayaran kasnya tampil dan dapat dibuka kembali.

Yang membedakan peran ini: Anggota adalah pemilik catatan pribadinya — ia yang mengisi data diri, menandai kehadiran, dan membayar kas; ia tidak melihat rekapan seluruh anggota.

Pengurus/Bendahara

Konteks produk: Pengurus/Bendahara bertanggung jawab atas pembukuan komunitas. Ia bekerja dengan rekapan, bukan dengan catatan pribadi satu anggota.

Tujuan utama: memastikan rekapan kehadiran dan keuangan kas tersedia akurat sebagai dasar pengelolaan organisasi.

Tanggung jawab yang diterima:

• Melihat rekapan kehadiran seluruh anggota (FR-06).
• Melihat rekapan uang kas dan pembayaran anggota (FR-07).
• Mencatat pembayaran pada rekapan uang kas (FR-07).
• Mengakses rekapan dengan peran berwenang (FR-10).

Input dan keputusan: memilih periode rekapan yang ditinjau; memeriksa baris per anggota; mencatat pembayaran melalui tombol "Catat pembayaran".

Interaksi dengan peserta lain: rekapan yang ia tinjau berasal dari catatan kehadiran dan pembayaran QRIS yang dilakukan Anggota.

Keberhasilan yang dapat diamati: rekapan kehadiran dan rekapan uang kas tampil dengan saldo kas yang akurat.

Yang membedakan peran ini: Pengurus/Bendahara melihat seluruh anggota sekaligus dan bertanggung jawab atas kebenaran saldo kas; ia tidak mencatat kehadiran atau membayar kas untuk dirinya sendiri melalui alur Anggota.

5. Core User Flows

Alur 1 — Anggota baru mendaftar dan masuk

1. Calon pengguna membuka Landing tanpa identitas dan membaca penjelasan aplikasi serta fitur data anggota, absensi, pembayaran QRIS, kartu anggota, dan rekapan.
2. Ia menekan tombol "Masuk / Daftar" dan diarahkan ke Sign Up.
3. Ia mengisi data pendaftaran dan mengirimkannya. Bila data tidak lengkap atau sudah terdaftar, pesan kesalahan tampil dan ia memperbaiki isian.
4. Setelah akun dibuat, ia melanjutkan ke Login dan memasukkan kredensialnya.
5. Bila kredensial tidak cocok, pesan kesalahan tampil dan ia mencoba lagi. Bila cocok, ia diarahkan ke area kerja Anggota.
6. Langkah berikutnya: melengkapi data diri pada Profile.

Alur 2 — Anggota melengkapi data diri dan melihat status keanggotaan

1. Anggota yang sudah masuk membuka Profile.
2. Ia melihat data dirinya pada baris buku besar dan memperbarui isian yang perlu diperbaiki.
3. Ia menyimpan perubahan; data diri tampil kembali. Bila penyimpanan gagal, pesan kesalahan tampil dan ia dapat mencoba lagi.
4. Ia berpindah ke Membership dan melihat status keanggotaan serta nomor keanggotaannya.
5. Langkah berikutnya: mencatat kehadiran pada Attendance atau membayar kas pada Cash Payment.

Alur 3 — Anggota mencatat dan meninjau absensi kehadiran

1. Anggota membuka Attendance dan melihat kisi stempel kehadiran bulan berjalan.
2. Ia menekan hari yang ingin dicatat. Hari tersebut berubah menjadi stempel kehadiran dan hitungan kehadiran bulan berjalan bertambah.
3. Bila pencatatan gagal, pesan tampil dan ia menekan ulang hari tersebut.
4. Ia meninjau riwayat kehadiran bulan berjalan pada kisi yang sama.
5. Langkah berikutnya: berpindah ke Cash Payment atau Member Card.

Alur 4 — Anggota membayar uang kas menggunakan QRIS

1. Anggota membuka Cash Payment dan melihat kode QR QRIS di dalam bingkai oranye dengan strip keterangan "KAS BULAN INI — Rp 25.000".
2. Ia memindai kode QR dengan aplikasi pembayaran dan menyelesaikan pembayaran melalui penyedia QRIS.
3. Setelah status pembayaran berubah, stempel "LUNAS" mendarat pada layar dan pembayaran tercatat.
4. Bila pembayaran gagal atau tidak terkonfirmasi, pesan tampil dan ia dapat mencoba lagi; status pembayaran tetap dapat ditinjau pada halaman yang sama.
5. Langkah berikutnya: menampilkan kartu tanda anggota pada Member Card.

Alur 5 — Anggota menampilkan kartu tanda anggota

1. Anggota membuka Member Card.
2. Kartu tanda anggota tampil dengan nama dalam kapital, nomor keanggotaan dalam angka tabular, segel klub, dan blok QR.
3. Bila kartu gagal dimuat, pesan tampil dan ia dapat memuat ulang.
4. Ia menunjukkan kartu tersebut sebagai bukti keanggotaan.
5. Langkah berikutnya: kembali ke tab lain bila perlu.

Alur 6 — Pengurus/Bendahara meninjau rekapan kehadiran

1. Pengurus/Bendahara masuk melalui Login dengan akun berperan berwenang dan diarahkan ke area kerjanya.
2. Ia membuka Attendance Summary dan memilih periode rekapan yang ditinjau.
3. Tabel rekapan kehadiran seluruh anggota tampil dengan baris per anggota. Bila belum ada catatan pada periode tersebut, tabel menampilkan keadaan kosong; bila rekapan gagal dimuat, pesan tampil dan ia dapat memuat ulang.
4. Ia memeriksa baris per anggota untuk menilai kehadiran.
5. Langkah berikutnya: berpindah ke Cash Summary.

Alur 7 — Pengurus/Bendahara meninjau dan mencatat rekapan uang kas

1. Pengurus/Bendahara membuka Cash Summary.
2. Buku besar dua kolom tampil dengan tanggal, nominal, saldo berjalan di margin kanan setiap baris, dan footer lengket denim menampilkan "Saldo kas" beserta totalnya.
3. Bila belum ada pembayaran pada periode tersebut, buku besar menampilkan keadaan kosong; bila rekapan gagal dimuat, pesan tampil dan ia dapat memuat ulang.
4. Ia menekan tombol oranye "Catat pembayaran" untuk mencatat pembayaran anggota.
5. Ia memastikan pembayaran kas via QRIS yang dilakukan Anggota tercatat pada rekapan.
6. Langkah berikutnya: kembali ke Attendance Summary atau keluar dari aplikasi.

6. Visuals Colors and Theme

Arah kreatif proyek ini mengikuti Aaron Draplin: buku besar lapangan yang tebal, jujur, dan dibuat dengan tangan untuk komunitas anggota. Ini adalah buku catatan yang terasa seperti buku besar fisik dengan lencana klub tercetak di atasnya — bukan dasbor SaaS korporat.

Palet (mode terang):

Kertas kraft selalu menjadi dasar halaman; krem adalah permukaan kartu/panel; tinta untuk semua teks dan garis; denim untuk band header, segel lencana, tombol utama, dan muka kartu anggota; oranye hanya sebagai satu sinyal panas (stempel, segel "LUNAS", garis bawah tab aktif, bingkai QRIS) pada sekitar 8% layar dan tidak pernah sebagai latar bidang; clay untuk label sekunder, garis rambut, dan keadaan nonaktif; mustard dan forest hanya sebagai titik status kecil untuk "hadir" dan "izin". Tidak ada dasar biru-di-atas-putih.

Tipografi:

• Judul: Alfa Slab One, kapital, tracking rapat (-0.01em), dengan kesan letterpress.
• Teks: Oswald 300/500/700; label, kepala bagian, dan header tabel kapital dengan letterspacing 0.12em; badan teks huruf normal pada berat 500.
• Angka selalu Oswald 700 agar hitungan kas terbaca seperti buku besar yang dicap.
• Tidak ada huruf miring di mana pun.
• Skala 1.25 modular: display clamp(40px, 9vw, 96px), h1 clamp(28px, 5vw, 48px), h2 24px, body 16px/1.55, label 12px kapital 0.12em, angka buku besar 20px tabular. Batas bawah seluler 40px untuk display dan 15px untuk body.

Bahasa bentuk: bingkai tinta 3px tebal pada setiap panel dan tombol; radius sudut 6px (nyaris tidak membulat — ini kartu yang dicap, bukan pil); bayangan offset keras 4px 4px 0 berwarna tinta, bukan blur lembut; pemisah horizontal 1px bergaris di dalam buku besar; bentuk lencana — lingkaran untuk segel klub dan stempel status, persegi panjang bersudut terpotong untuk kartu anggota. Tekstur titik halftone 8% pada dasar kraft. Tidak ada yang mengkilap atau buram.

Tata letak: tumpukan vertikal seperti poster berisi panel bergaris di dalam kolom maksimum 1200px; tampilan seluler menyusut menjadi satu kolom dengan gutter 16px. Header adalah band denim penuh dengan lencana klub di kiri dan nama anggota + keluar di kanan. Setiap halaman fitur dibuka dengan panel selebar penuh yang judulnya duduk di bar denim dengan garis oranye di bawahnya, lalu konten dalam buku besar bergaris: label di kiri, nilai rata kanan, baris bergantian warna krem/kertas. Absensi adalah kisi stempel 7 kolom. Rekapan kas adalah buku besar dua kolom dengan total berjalan yang dipaku di footer lengket. Kartu anggota adalah lencana 340x214px, terpusat di seluler, bergeser ke kiri dengan kartu kedua miring mengintip di belakang pada desktop.

7. Signature Design Concept

"Buku Besar yang Dicap" — halaman masuk publik dibuka sebagai poster kertas kraft selebar penuh, bukan hero SaaS yang terpusat.

• Band denim biru melintang di dua pertiga bagian atas membawa segel klub berupa lingkaran 96px dengan ring oranye dan inisial klub dalam Alfa Slab One.
• Judul bertumpuk kapital pada clamp(40px, 9vw, 96px) memenuhi lebar: "KARTU. HADIR. KAS." pada tiga baris, masing-masing rata kiri, baris ketiga berwarna oranye.
• Di bawah band, strip horizontal berisi tiga panel buku besar bergaris mengintip dari lipatan — "Anggota 128", "Hadir bulan ini 94", "Kas terkumpul Rp 4.120.000" — masing-masing dengan bingkai tinta tebal dan bayangan offset, disusun bertingkat sehingga panel tengah duduk 12px lebih rendah.
• Satu tombol CTA oranye, "Masuk / Daftar", dipaku di kiri bawah band denim, tidak di tengah.
• Di seluler, band menjadi setinggi penuh, judul turun ke 40px dan membungkus menjadi empat baris, dan tiga panel bergulir horizontal sebagai baris snap.

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

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Subjek fokus: segel klub bulat berring oranye di atas band denim, dengan judul kapital "KARTU. HADIR. KAS." dan strip tiga panel buku besar yang mengintip dari lipatan.
• Tesis input → transformasi → hasil: saat halaman dimuat, baris buku besar meluncur masuk dari kiri selama 180ms dan pita nama anggota bergerak perlahan melintasi layar; hasilnya adalah poster buku besar yang tenang dan dapat dibaca, dengan tombol "Masuk / Daftar" siap ditekan.
• Kosakata gerak: kokoh dan mekanis, sesuai metafora stempel — 140ms ease-out untuk tekanan tombol yang bergeser turun 2px dan menghapus bayangan offset; 180ms slide-in baris buku besar dari kiri; satu keyframe "stamp" (skala 1.25 → 1.0, 220ms) saat kehadiran dicatat atau pembayaran terkonfirmasi; marquee horizontal lambat 40 detik untuk nama anggota pada pita rekapan di Landing. Tidak ada pantulan, tidak ada elemen melayang, tidak ada gradien yang bergerak.
• Bingkai pertama yang tersusun: band denim penuh dengan segel klub di kiri, judul tiga baris rata kiri dengan baris ketiga oranye, tombol CTA oranye di kiri bawah, dan tiga panel buku besar bertingkat di bawah lipatan.
• Keadaan reduced-motion: stempel menjadi perubahan keadaan instan dan marquee menjadi baris statis yang membungkus; tiga panel tetap dapat dijangkau dengan gulir horizontal.

9. Non-Functional Requirements

NFR-01 — Keterbacaan di semua viewport Judul, wordmark, label, angka, teks kartu, dan kontrol harus tetap utuh di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px, membungkus atau menskalakan (misalnya font-size: clamp(...) dengan ukuran selulernya) agar muat; tidak ada elemen lain yang menutupi bagian mana pun darinya.

• Provenance: explicit (batasan arah kreatif)
• Rationale: audiens membuka aplikasi dari ponsel Android kelas menengah hingga desktop.

NFR-02 — Gerak yang dapat dikurangi Di bawah prefers-reduced-motion, stempel menjadi perubahan keadaan instan dan marquee menjadi baris statis yang membungkus; konten yang bergulir tetap dapat dibawa sepenuhnya ke dalam tampilan.

• Provenance: explicit (batasan arah kreatif)
• Rationale: menjaga aksesibilitas gerak.

NFR-03 — Identitas milik aplikasi Aplikasi menyediakan pendaftaran mandiri dan verifikasi kembali melalui Login; data keanggotaan, riwayat kehadiran, dan status pembayaran kas terikat pada anggota yang benar dan dapat dibuka kembali.

• Provenance: required_inference
• Rationale: diperlukan agar alur yang diterima dapat dijalankan dan catatan tetap terikat pada peserta yang benar.

NFR-04 — Pembatasan akses rekapan Rekapan kehadiran dan rekapan uang kas hanya dapat diakses oleh akun dengan peran berwenang.

• Provenance: required_inference
• Rationale: rekapan adalah data seluruh anggota yang dikelola pengurus/bendahara.

NFR-05 — Ketahanan pencatatan pembayaran Status pembayaran QRIS harus dapat dicatat dan ditinjau kembali meskipun hasil pembayaran tidak terkonfirmasi.

• Provenance: required_inference
• Rationale: memastikan kas komunitas tetap dapat direkonsiliasi.

10. Tech Stack

• Frontend: React — antarmuka kustom dengan halaman Landing, Login, Sign Up, Profile, Membership, Attendance, Cash Payment, Member Card, Attendance Summary, dan Cash Summary.
• Backend: Python/FastAPI — melayani data anggota, catatan kehadiran, pencatatan pembayaran, dan rekapan.
• Penyimpanan: basis data untuk data anggota, catatan kehadiran, dan catatan pembayaran kas.
• Integrasi eksternal: penyedia QRIS untuk pemrosesan pembayaran QRIS.
• Kontainerisasi: Docker/docker-compose untuk menjalankan aplikasi dan basis data.

11. Assumptions and Constraints

• A-01 — Aplikasi mencakup tepat tujuh cakupan yang diminta: data diri anggota, status keanggotaan, absensi kehadiran, pembayaran uang kas menggunakan QRIS, kartu tanda anggota, rekapan kehadiran, dan rekapan uang kas. Tidak ada modul lain yang ditambahkan.
• A-02 — Pembayaran QRIS diproses oleh penyedia QRIS di luar aplikasi; aplikasi menampilkan kode QR, menerima hasil pembayaran, dan mencatat statusnya.
• A-03 — Identitas milik aplikasi diperlukan agar catatan keanggotaan, kehadiran, dan pembayaran tetap terikat pada anggota yang benar; pendaftaran mandiri dan Login adalah mekanisme masuknya.
• A-04 — Peran berwenang untuk rekapan diberikan kepada akun Pengurus/Bendahara; tidak ada pembatasan peran lain yang dinyatakan dalam sumber.
• A-05 — Nominal kas bulanan yang ditampilkan pada bingkai QRIS mengikuti nilai yang berlaku pada komunitas; sumber tidak menetapkan nominal tetap.
• A-06 — Seluruh cakupan berada pada horizon saat ini; tidak ada permintaan fitur masa depan yang dinyatakan secara eksplisit.

12. Glossary

• Anggota — pengguna utama aplikasi yang memiliki data diri, status keanggotaan, catatan kehadiran, pembayaran kas, dan kartu tanda anggota.
• Pengurus/Bendahara — pengguna berperan berwenang yang meninjau rekapan kehadiran dan rekapan uang kas seluruh anggota.
• Uang kas — iuran kas bulanan yang dibayarkan anggota kepada komunitas.
• QRIS — standar kode QR pembayaran yang digunakan untuk pembayaran uang kas; diproses oleh penyedia QRIS.
• Kartu tanda anggota — kartu lencana keanggotaan berisi nama, nomor keanggotaan, segel klub, dan blok QR.
• Rekapan kehadiran — ringkasan catatan kehadiran seluruh anggota untuk periode yang ditinjau.
• Rekapan uang kas — buku besar pembayaran kas seluruh anggota dengan saldo berjalan dan total saldo kas.
• Stempel kehadiran — penanda pada kisi absensi yang menunjukkan status hari: hadir, tidak hadir, atau izin.
• Stempel "LUNAS" — penanda yang muncul saat status pembayaran kas berubah menjadi terbayar.