System Requirements Document for sewa-nokos

1. Introduction

sewa-nokos adalah aplikasi sewa nokos (nomor kosong) — layanan yang mempertemukan orang yang membutuhkan nomor telepon sementara dengan pihak yang memiliki stok nomor tersebut untuk disewakan. Aplikasi ini dibangun sebagai marketplace utilitas dua sisi: satu sisi untuk Penyewa Nokos yang mencari, memilih, dan menyewa nomor kosong, dan sisi lain untuk Penyedia/Penjual Nokos yang menambahkan serta mengelola stok nomor kosong beserta status ketersediaannya.

Produk ini menyasar pengguna di Indonesia yang membutuhkan nomor kosong untuk dipakai sementara, serta penyedia yang ingin menawarkan stok nomornya. Fokus saat ini adalah alur inti: menelusuri nokos yang tersedia, menyelesaikan sewa, menerima detail nomor yang disewa, dan mengelola stok nokos dari sisi penyedia.

2. System Overview

Aplikasi sewa-nokos adalah aplikasi web dengan antarmuka kustom milik aplikasi sendiri, dengan identitas akun yang dimiliki aplikasi. Dua peran manusia aktif beroperasi di dalamnya:

• Penyewa Nokos — menelusuri daftar nokos yang tersedia, memilih nomor, menyelesaikan pemesanan/sewa, dan menerima detail nomor yang disewa.
• Penyedia/Penjual Nokos — menambahkan nokos baru dan mengelola daftar stok nokos beserta status ketersediaannya.

Aktor non-manusia: layanan backend aplikasi yang menyimpan data nokos, status ketersediaan, dan hasil sewa.

2a. Product Interpretation and Delivery Boundary

Kepemilikan pengiriman. Aplikasi ini adalah aplikasi web milik sendiri (first-party) dengan antarmuka kustom. Identitas akun dimiliki oleh aplikasi: penyewa dan penyedia mendaftar sendiri (self-service) melalui halaman Sign Up, lalu memverifikasi kembali identitas mereka melalui halaman Login saat mengakses pemesanan atau stok nokos mereka. Tidak ada batas provisioning dari sumber, sehingga pendaftaran bersifat mandiri untuk kedua peran.

Batas akses. Halaman Landing, Login, dan Sign Up dapat diakses tanpa identitas (anonim). Halaman Nokos dan Sewa Nokos dibatasi untuk peran Penyewa Nokos. Halaman Stok Nokos dan Tambah Nokos dibatasi untuk peran Penyedia/Penjual Nokos yang telah dikenali sebagai peran berwenang. Interaksi yang menetapkan akses ke halaman terlindungi (Login/Sign Up) tidak dimiliki oleh halaman terlindungi itu sendiri, melainkan oleh permukaan akses anonim tersendiri.

Batas saat ini vs. masa depan. Semua perilaku yang dijelaskan dalam dokumen ini adalah lingkup saat ini (current). Tidak ada fitur masa depan yang ditetapkan oleh sumber.

Pengecualian sempit. Dokumen ini tidak menambahkan modul di luar alur inti sewa nokos dan pengelolaan stok nokos. Tidak ada kapabilitas manajemen akun tambahan (mis. pengaturan profil, lupa kata sandi, verifikasi email) yang ditetapkan sumber, sehingga tidak dimasukkan sebagai lingkup saat ini.

2c. Page Content and Component Coverage

Landing

• Informasi/state: Penjelasan aplikasi sewa nokos, sasaran penyewa dan penyedia, serta alur utama produk. Headline besar "Sewa nomor kosong, tanpa ribet", subteks singkat, dan ilustrasi modular ponsel/kartu nomor.
• Aksi utama: CTA pil coral "Cari Nokos" (menuju alur penyewa) dan CTA pil outlined "Jadi Penyedia" (menuju alur penyedia).
• Aksi pendukung: Tautan ke Login dan Sign Up dari bilah navigasi pil.
• Entitas domain: Nokos (representasi kartu nomor), peran pengguna (penyewa, penyedia).
• Tanggung jawab komponen: Hero split dua kolom (headline + CTA di kiri, ilustrasi berlapis di kanan); bilah navigasi pil dengan indikator aktif coral; kartu nomor contoh dengan strip coral dan titik ketersediaan teal; blob dekoratif coral/teal yang meluber keluar tepi.
• State: Loading (kerangka hero), empty (tidak berlaku — konten statis), success (halaman tampil penuh), error (fallback konten statis jika aset ilustrasi gagal dimuat), recovery (ilustrasi diganti placeholder bentuk sederhana).

Login

• Informasi/state: Formulir verifikasi kembali untuk penyewa dan penyedia yang mengakses pemesanan atau stok nokos mereka.
• Aksi utama: Masuk dengan kredensial akun.
• Aksi pendukung: Tautan ke Sign Up bagi yang belum punya akun; tautan kembali ke Landing.
• Entitas domain: Akun pengguna, peran (penyewa/penyedia).
• Tanggung jawab komponen: Formulir satu kolom terpusat dengan padding lega; input radius 16px; tombol pil coral; pesan galat inline.
• State: Loading (tombol menampilkan status proses), empty (formulir kosong siap diisi), success (dialihkan ke halaman sesuai peran — Nokos/Sewa Nokos untuk penyewa, Stok Nokos untuk penyedia), error (kredensial salah ditampilkan inline tanpa menghapus isian), recovery (pengguna dapat memperbaiki isian dan mencoba lagi).

Sign Up

• Informasi/state: Formulir pendaftaran mandiri bagi penyewa maupun penyedia.
• Aksi utama: Membuat akun baru dengan memilih peran (penyewa atau penyedia).
• Aksi pendukung: Tautan ke Login bagi yang sudah punya akun; tautan kembali ke Landing.
• Entitas domain: Akun pengguna, peran (penyewa/penyedia).
• Tanggung jawab komponen: Formulir satu kolom terpusat; pemilih peran; input radius 16px; tombol pil coral; pesan galat inline.
• State: Loading (tombol menampilkan status proses), empty (formulir kosong siap diisi), success (akun dibuat dan pengguna diarahkan ke halaman sesuai peran), error (mis. isian tidak valid atau akun sudah ada — ditampilkan inline), recovery (pengguna dapat memperbaiki isian dan mencoba lagi).

Nokos

• Informasi/state: Daftar nokos yang tersedia untuk ditinjau dan dipilih oleh penyewa. Setiap nokos ditampilkan sebagai kartu "stiker" dengan strip coral berisi nomor, titik ketersediaan teal, dan tombol pil "Sewa".
• Aksi utama: Memilih nokos untuk disewa (menuju Sewa Nokos).
• Aksi pendukung: Menelusuri/menyaring daftar nokos yang tersedia.
• Entitas domain: Nokos (nomor, status ketersediaan).
• Tanggung jawab komponen: Grid kartu responsif (1 kolom mobile, 2 kolom tablet, 3 kolom desktop); kartu nokos dengan bayangan offset lembut yang membesar saat hover; indikator ketersediaan teal.
• State: Loading (kerangka kartu), empty (ilustrasi karakter memegang baki SIM kosong dengan pesan tidak ada nokos tersedia), success (grid kartu nokos tampil), error (pesan gagal memuat daftar dengan tombol coba lagi), recovery (memuat ulang daftar).

Sewa Nokos

• Informasi/state: Ruang kerja untuk memilih nokos, menyelesaikan pemesanan atau penyewaan, dan menerima detail nokos yang disewa. Menampilkan ringkasan nokos terpilih dan status pemesanan.
• Aksi utama: Menyelesaikan pemesanan/sewa nokos terpilih; menerima detail nomor yang disewa.
• Aksi pendukung: Menyalin nomor yang disewa ke clipboard melalui pil copy-to-clipboard; kembali ke daftar Nokos.
• Entitas domain: Nokos, pemesanan/sewa, status pemesanan, detail nomor yang disewa.
• Tanggung jawab komponen: Kartu nomor besar yang berputar masuk dengan animasi spring saat konfirmasi, menampilkan nokos yang disewa dan pil copy-to-clipboard; panel ringkasan pemesanan.
• State: Loading (status pemesanan sedang diproses), empty (belum ada nokos terpilih — arahkan kembali ke Nokos), success (kartu nomor tampil dengan detail nokos yang disewa), error (pemesanan gagal — pesan dan opsi coba lagi), recovery (kembali ke pemilihan nokos atau ulangi pemesanan).

Stok Nokos

• Informasi/state: Halaman pengelolaan berulang untuk meninjau stok nokos milik penyedia dan status ketersediaannya. Ditampilkan sebagai panel modular bertumpuk, bukan tabel padat.
• Aksi utama: Meninjau stok nokos dan status ketersediaannya; membuka Tambah Nokos untuk menambah/memperbarui nokos.
• Aksi pendukung: Memperbarui status ketersediaan nokos.
• Entitas domain: Nokos (nomor, status ketersediaan), kepemilikan stok oleh penyedia.
• Tanggung jawab komponen: Panel modular bertumpuk dengan judul micro-label DM Sans huruf kapital dan lencana jumlah coral; empty state berilustrasi (karakter memegang baki SIM kosong).
• State: Loading (kerangka panel), empty (ilustrasi karakter memegang baki SIM kosong dengan ajakan menambah nokos), success (panel stok tampil dengan daftar nokos), error (pesan gagal memuat stok dengan tombol coba lagi), recovery (memuat ulang stok).

Tambah Nokos

• Informasi/state: Formulir terfokus untuk menambahkan atau memperbarui detail dan status satu nokos.
• Aksi utama: Menyimpan nokos baru atau perubahan detail/status nokos.
• Aksi pendukung: Membatalkan dan kembali ke Stok Nokos.
• Entitas domain: Nokos (nomor, detail, status ketersediaan).
• Tanggung jawab komponen: Formulir satu kolom terpusat dengan padding lega; input radius 16px; pemilih status ketersediaan; tombol pil coral; pesan galat inline.
• State: Loading (tombol menampilkan status proses), empty (formulir kosong untuk nokos baru), success (nokos tersimpan dan kembali ke Stok Nokos), error (isian tidak valid — ditampilkan inline), recovery (pengguna dapat memperbaiki isian dan menyimpan ulang).

3. Functional Requirements

FR-01 — Menyediakan aplikasi sewa nokos [explicit] As a pengguna aplikasi, I should dapat menggunakan aplikasi sewa nokos (nomor kosong) sebagai produk yang mempertemukan penyewa dan penyedia nomor kosong.

• Aktor: Penyewa Nokos, Penyedia/Penjual Nokos
• Trigger/input: Pengguna membuka aplikasi.
• Hasil yang dapat diamati: Aplikasi sewa nokos tersedia dan dapat digunakan.
• Akses: Publik (Landing).
• Kegagalan/pemulihan: Jika aplikasi tidak dapat dimuat, pengguna dapat memuat ulang.
• Kelanjutan: Pengguna melanjutkan ke alur sesuai perannya.

FR-02 — Pendaftaran dan login penyewa sebelum memesan [required_inference] As a Penyewa Nokos, I should mendaftar atau login sebelum membuat pemesanan dan menerima detail nokos yang disewa.

• Aktor: Penyewa Nokos
• Trigger/input: Penyewa membuka Sign Up atau Login.
• Hasil yang dapat diamati: Penyewa memiliki akun dan sesi yang dikenali; pemesanan dan detail nokos terikat pada akunnya.
• Akses: Sign Up dan Login dapat diakses anonim; Nokos dan Sewa Nokos memerlukan identitas penyewa.
• Kegagalan/pemulihan: Jika kredensial salah atau pendaftaran gagal, pesan galat ditampilkan inline dan pengguna dapat mencoba lagi.
• Kelanjutan: Setelah terverifikasi, penyewa diarahkan ke Nokos/Sewa Nokos.

FR-03 — Pendaftaran dan login penyedia sebelum mengelola stok [required_inference] As a Penyedia/Penjual Nokos, I should mendaftar atau login sebelum menambahkan dan mengelola stok nokos.

• Aktor: Penyedia/Penjual Nokos
• Trigger/input: Penyedia membuka Sign Up atau Login.
• Hasil yang dapat diamati: Penyedia memiliki akun dan sesi yang dikenali; stok nokos terikat pada akunnya.
• Akses: Sign Up dan Login dapat diakses anonim; Stok Nokos dan Tambah Nokos memerlukan identitas penyedia.
• Kegagalan/pemulihan: Jika kredensial salah atau pendaftaran gagal, pesan galat ditampilkan inline dan pengguna dapat mencoba lagi.
• Kelanjutan: Setelah terverifikasi, penyedia diarahkan ke Stok Nokos.

FR-04 — Pengenalan peran penyedia berwenang [required_inference] As a Penyedia/Penjual Nokos, I should dikenali sebagai peran yang berwenang sebelum halaman pengelolaan stok dapat digunakan.

• Aktor: Penyedia/Penjual Nokos
• Trigger/input: Penyedia login dengan akun berperan penyedia.
• Hasil yang dapat diamati: Halaman Stok Nokos dan Tambah Nokos dapat digunakan; akses tanpa peran penyedia ditolak.
• Akses: Stok Nokos dan Tambah Nokos dibatasi peran.
• Kegagalan/pemulihan: Jika peran tidak dikenali, pengguna diarahkan ke Login.
• Kelanjutan: Penyedia mengelola stok nokosnya.

FR-05 — Mempertahankan status nokos dan hasil sewa [required_inference] As a Penyewa Nokos, I should memiliki status nokos dan hasil sewa yang dipertahankan agar dapat dilanjutkan atau ditinjau kembali.

• Aktor: Penyewa Nokos
• Trigger/input: Penyewa memulai atau menyelesaikan pemesanan.
• Hasil yang dapat diamati: Status pemesanan dan detail nokos yang disewa tersimpan dan dapat ditinjau kembali.
• Akses: Memerlukan identitas penyewa.
• Kegagalan/pemulihan: Jika pemuatan status gagal, penyewa dapat memuat ulang.
• Kelanjutan: Penyewa dapat melanjutkan atau meninjau kembali hasil sewa.

FR-06 — Menelusuri daftar nokos yang tersedia [required_inference] As a Penyewa Nokos, I should melihat daftar nokos yang tersedia untuk ditinjau dan dipilih.

• Aktor: Penyewa Nokos
• Trigger/input: Penyewa membuka halaman Nokos.
• Hasil yang dapat diamati: Daftar nokos tersedia ditampilkan sebagai kartu dengan nomor dan status ketersediaan.
• Akses: Memerlukan identitas penyewa.
• Kegagalan/pemulihan: Jika daftar gagal dimuat, pesan galat dengan tombol coba lagi ditampilkan; jika tidak ada nokos, empty state berilustrasi ditampilkan.
• Kelanjutan: Penyewa memilih nokos untuk disewa.

FR-07 — Memilih nokos [required_inference] As a Penyewa Nokos, I should memilih nomor dari daftar nokos yang tersedia.

• Aktor: Penyewa Nokos
• Trigger/input: Penyewa menekan tombol "Sewa" pada kartu nokos.
• Hasil yang dapat diamati: Nokos terpilih dibawa ke ruang kerja Sewa Nokos.
• Akses: Memerlukan identitas penyewa.
• Kegagalan/pemulihan: Jika nokos tidak lagi tersedia, pesan ditampilkan dan penyewa kembali ke daftar.
• Kelanjutan: Penyewa menyelesaikan pemesanan.

FR-08 — Menyelesaikan pemesanan/sewa nokos [required_inference] As a Penyewa Nokos, I should menyelesaikan pemesanan atau penyewaan nokos terpilih.

• Aktor: Penyewa Nokos
• Trigger/input: Penyewa mengonfirmasi pemesanan di Sewa Nokos.
• Hasil yang dapat diamati: Pemesanan tercatat dengan status yang dapat diamati.
• Akses: Memerlukan identitas penyewa.
• Kegagalan/pemulihan: Jika pemesanan gagal, pesan galat dan opsi coba lagi ditampilkan.
• Kelanjutan: Penyewa menerima detail nokos yang disewa.

FR-09 — Menerima detail nokos yang disewa [required_inference] As a Penyewa Nokos, I should menerima detail nomor yang disewa setelah pemesanan selesai.

• Aktor: Penyewa Nokos
• Trigger/input: Pemesanan selesai.
• Hasil yang dapat diamati: Kartu nomor besar menampilkan nokos yang disewa dengan pil copy-to-clipboard.
• Akses: Memerlukan identitas penyewa.
• Kegagalan/pemulihan: Jika detail gagal dimuat, penyewa dapat memuat ulang.
• Kelanjutan: Penyewa dapat menyalin nomor dan meninjau kembali hasil sewa.

FR-10 — Menambahkan nokos [required_inference] As a Penyedia/Penjual Nokos, I should menambahkan nokos baru beserta detail dan status ketersediaannya.

• Aktor: Penyedia/Penjual Nokos
• Trigger/input: Penyedia membuka Tambah Nokos dan mengisi detail nokos.
• Hasil yang dapat diamati: Nokos baru tersimpan dan muncul di Stok Nokos.
• Akses: Memerlukan identitas dan peran penyedia.
• Kegagalan/pemulihan: Jika isian tidak valid, pesan galat inline ditampilkan dan penyedia dapat memperbaiki.
• Kelanjutan: Penyedia kembali ke Stok Nokos.

FR-11 — Mengelola stok nokos dan status ketersediaan [required_inference] As a Penyedia/Penjual Nokos, I should mengelola daftar nokos beserta status ketersediaannya.

• Aktor: Penyedia/Penjual Nokos
• Trigger/input: Penyedia membuka Stok Nokos.
• Hasil yang dapat diamati: Panel modular menampilkan stok nokos dan status ketersediaannya; status dapat diperbarui.
• Akses: Memerlukan identitas dan peran penyedia.
• Kegagalan/pemulihan: Jika stok gagal dimuat, pesan galat dengan tombol coba lagi ditampilkan; jika belum ada stok, empty state berilustrasi ditampilkan.
• Kelanjutan: Penyedia dapat menambah atau memperbarui nokos.

4. User Personas

Penyewa Nokos

Konteks produk. Penyewa Nokos adalah orang yang ingin menyewa nomor kosong (nokos) untuk dipakai sementara. Ia datang ke aplikasi dengan kebutuhan praktis: menemukan nomor yang tersedia, memastikan nomornya bisa disewa, lalu mendapatkan akses ke nomor tersebut.

Tujuan utama. Berhasil menyewa nokos dan mendapatkan akses ke nomor tersebut.

Tanggung jawab yang diterima. Menelusuri daftar nokos yang tersedia, memilih nomor, melakukan pemesanan/sewa, dan menerima detail nomor yang disewa. Ia juga mendaftar atau login sebelum memesan agar pemesanan dan detail nokos terikat pada akunnya dan dapat ditinjau kembali.

Input dan keputusan. Ia memutuskan nokos mana yang dipilih dari daftar yang tersedia, dan mengonfirmasi pemesanan di ruang kerja Sewa Nokos.

Interaksi dengan peserta lain. Ia bergantung pada stok nokos yang disediakan oleh Penyedia/Penjual Nokos; ketersediaan nomor yang ia lihat berasal dari stok yang dikelola penyedia.

Keberhasilan yang dapat diamati. Ia berhasil menyewa nokos dan menerima detail nomor yang disewa, dengan status pemesanan yang dapat ditinjau kembali.

Yang membedakan perannya. Fokus kerjanya adalah memilih dan mengambil nomor dari stok yang ada — bukan menyediakan stok. Ia berinteraksi dengan daftar ketersediaan dan alur pemesanan, bukan dengan pengelolaan inventaris.

Penyedia/Penjual Nokos

Konteks produk. Penyedia/Penjual Nokos adalah pihak yang menyediakan stok nomor kosong agar dapat disewakan kepada penyewa. Ia datang ke aplikasi untuk memasukkan dan memelihara inventaris nomornya.

Tujuan utama. Stok nokosnya tersedia di aplikasi dan dapat disewa oleh penyewa.

Tanggung jawab yang diterima. Menambahkan nokos baru beserta detail dan status ketersediaannya, serta mengelola daftar nokos dan status ketersediaannya secara berulang. Ia mendaftar atau login sebelum menambahkan dan mengelola stok, dan harus dikenali sebagai peran berwenang sebelum halaman pengelolaan stok dapat digunakan.

Input dan keputusan. Ia memasukkan detail nokos dan memutuskan status ketersediaan setiap nomor.

Interaksi dengan peserta lain. Stok yang ia kelola menjadi sumber nomor yang dilihat dan disewa oleh Penyewa Nokos.

Keberhasilan yang dapat diamati. Stok nokosnya tampil di aplikasi dengan status ketersediaan yang benar dan dapat disewa oleh penyewa.

Yang membedakan perannya. Fokus kerjanya adalah menyediakan dan memelihara inventaris nomor — bukan mencari atau menyewa. Ia berinteraksi dengan panel pengelolaan stok dan formulir detail nokos, bukan dengan alur pemesanan.

5. Core User Flows

Alur 1 — Penyewa Nokos menyewa nokos

1. Konteks awal: Penyewa Nokos membuka aplikasi dan tiba di Landing sebagai pengunjung anonim.
2. Aksi: Ia menekan CTA pil coral "Cari Nokos".
3. Keputusan/input: Karena pemesanan memerlukan identitas, ia diarahkan untuk mendaftar di Sign Up (memilih peran penyewa) atau memverifikasi kembali di Login.
4. Hasil yang dapat diamati: Setelah akun dibuat atau kredensial diverifikasi, ia masuk sebagai Penyewa Nokos dan diarahkan ke Nokos.
5. Aksi: Di Nokos, ia meninjau daftar nokos yang tersedia, ditampilkan sebagai kartu dengan strip coral berisi nomor dan titik ketersediaan teal.
6. Keputusan: Ia memilih satu nomor dengan menekan tombol pil "Sewa" pada kartu.
7. Hasil yang dapat diamati: Nokos terpilih dibawa ke ruang kerja Sewa Nokos.
8. Aksi: Di Sewa Nokos, ia mengonfirmasi pemesanan.
9. Hasil yang dapat diamati: Pemesanan tercatat dengan status yang dapat diamati, dan kartu nomor besar berputar masuk dengan animasi spring menampilkan nokos yang disewa beserta pil copy-to-clipboard.
10. Kegagalan/pemulihan: Jika nokos tidak lagi tersedia saat dipilih, pesan ditampilkan dan ia kembali ke daftar Nokos. Jika pemesanan gagal, pesan galat dan opsi coba lagi ditampilkan.
11. Kelanjutan: Ia menyalin nomor yang disewa dan dapat meninjau kembali hasil sewa karena status pemesanan dan detail nokos dipertahankan pada akunnya.

Alur 2 — Penyedia/Penjual Nokos menambahkan dan mengelola stok nokos

1. Konteks awal: Penyedia/Penjual Nokos membuka aplikasi dan tiba di Landing sebagai pengunjung anonim.
2. Aksi: Ia menekan CTA pil outlined "Jadi Penyedia".
3. Keputusan/input: Karena pengelolaan stok memerlukan identitas dan peran penyedia, ia diarahkan untuk mendaftar di Sign Up (memilih peran penyedia) atau memverifikasi kembali di Login.
4. Hasil yang dapat diamati: Setelah akun dibuat atau kredensial diverifikasi, ia dikenali sebagai peran penyedia berwenang dan diarahkan ke Stok Nokos.
5. Aksi: Di Stok Nokos, ia meninjau panel modular yang menampilkan stok nokos dan status ketersediaannya.
6. Keputusan: Jika stoknya masih kosong, ia melihat empty state berilustrasi (karakter memegang baki SIM kosong) dan memutuskan untuk menambah nokos.
7. Aksi: Ia membuka Tambah Nokos dan mengisi detail nokos beserta status ketersediaannya.
8. Hasil yang dapat diamati: Nokos baru tersimpan dan muncul di Stok Nokos.
9. Kegagalan/pemulihan: Jika isian tidak valid, pesan galat inline ditampilkan dan ia dapat memperbaiki isian lalu menyimpan ulang.
10. Kelanjutan: Ia kembali ke Stok Nokos untuk memperbarui status ketersediaan nokos, sehingga stoknya dapat dilihat dan disewa oleh Penyewa Nokos.

Alur 3 — Penyedia/Penjual Nokos memperbarui status ketersediaan nokos

1. Konteks awal: Penyedia/Penjual Nokos sudah login dan berada di Stok Nokos.
2. Aksi: Ia meninjau panel modular stok dan menemukan nokos yang statusnya perlu diubah.
3. Keputusan/input: Ia membuka Tambah Nokos untuk memperbarui detail dan status satu nokos.
4. Hasil yang dapat diamati: Perubahan status ketersediaan tersimpan dan tercermin di Stok Nokos.
5. Kegagalan/pemulihan: Jika penyimpanan gagal, pesan galat inline ditampilkan dan ia dapat mencoba lagi.
6. Kelanjutan: Status ketersediaan yang diperbarui memengaruhi nokos yang tampil sebagai tersedia bagi Penyewa Nokos di Nokos.

6. Visuals Colors and Theme

Muse: Pablo Stanley. Headline arah: Friendly modular clarity for renting empty numbers — bahasa ilustrasi modular yang hangat, bentuk membulat, dan warna yang murah hati untuk alat konsumen yang approachable.

Mode: Light mode.

Warna (token peran):

Proporsi warna: ~70% krem/putih, ~20% coral, ~10% teal. Coral dan teal dipakai sebagai isian datar (flat fill), tidak pernah gradien.

Tipografi:

• Heading: Nunito — Nunito ExtraBold (800), tracking rapat dengan terminal membulat; sentence case untuk nada ramah; micro-label huruf kapital sesekali memakai DM Sans Medium dengan tracking 0.08em.
• Body: DM Sans.
• Skala: modular 1.25 — ukuran 40/32/24/18/16/14. Headline mobile 32px, desktop 48px. Body 16px dengan line-height 1.6.

Bahasa bentuk: Radius besar di mana-mana — kartu 24px, tombol pil (999px), input 16px. Bayangan offset lembut 0 4px 0 rgba(31,41,51,0.08) memberi kesan stiker yang taktil. Bentuk blob dan kapsul muncul sebagai aksen dekoratif di belakang ilustrasi. Tidak ada sudut 90° keras kecuali pada detail ikon kecil.

Ritme spasi: Layout mobile-first satu kolom yang melebar ke grid 12 kolom di desktop. Landing memakai hero split; daftar Nokos memakai grid kartu responsif (1 kolom mobile, 2 kolom tablet, 3 kolom desktop) dengan spasi lega; formulir terpusat satu kolom dengan padding murah hati; dasbor penyedia memakai panel modular bertumpuk, bukan tabel padat.

Gaya citra: Ilustrasi vektor modular dalam semangat Humaaans/Open Peeps — karakter membulat sederhana memegang ponsel, kartu nomor abstrak, gelembung obrolan, bentuk mirip SIM. Ilustrasi memakai coral, teal, dan krem dengan garis luar gelap. Tanpa hero berbasis fotografi; tanpa render 3D. Tanda aksen kecil bergaya tangan (squiggle, titik) boleh menghiasi pembuka bagian.

Dihindari: Warna primer/aksen biru/indigo; Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, atau system-ui untuk heading/body; hero gradient-blob atau panel glassmorphism; grid kartu hover-lift identik tanpa ilustrasi atau kepribadian; hero berbasis fotografi atau render 3D yang terasa korporat/telekomunikasi-serius; tabel data padat sebagai permukaan pengelolaan penyedia utama; sudut 90° keras atau tepi brutalist tajam; nada kekanak-kanakan atau terlalu kartun yang merusak kepercayaan pada transaksi sewa berbayar.

Keterbacaan: Teks dan kontrol yang dapat dibaca tetap utuh di setiap viewport — headline, wordmark, label, angka, teks kartu, dan kontrol tetap sepenuhnya di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px, membungkus atau menskalakan (mis. font-size: clamp(...) dengan ukuran mobile-nya) agar pas, dan tidak ada elemen lain yang menutupi bagian mana pun darinya. Citra, dekorasi, dan gerakan mengikuti arah kreatif: boleh dipotong, meluber keluar tepi, diputar, ditumpuk, atau dipotong persis seperti yang diminta arah, selama tidak menutupi teks atau kontrol yang dapat dibaca.

7. Signature Design Concept

Konsep: Kartu nomor sebagai stiker. Layar masuk publik (Landing) dibangun sebagai bidang krem hangat dengan komposisi dua kolom di desktop. Kolom kiri memuat headline bertumpuk dalam Nunito ExtraBold — "Sewa nomor kosong, tanpa ribet" — pada 48px desktop / 32px mobile, subteks singkat dalam DM Sans, dan dua CTA pil: coral primer "Cari Nokos" dan outlined sekunder "Jadi Penyedia". Kolom kanan adalah ilustrasi berlapis: kartu ponsel membulat besar dengan placeholder nomor yang terlihat, lencana ketersediaan teal yang mengambang, dan karakter kecil mengintip dari balik kartu. Bentuk blob dekoratif coral dan teal meluber keluar tepi kanan dan bawah. Di mobile, ilustrasi berada di bawah headline, dipotong untuk hanya menampilkan kartu ponsel dan lencana. Tidak ada gradient blob, tidak ada layout SaaS terpusat.

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

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: layered_2d

Landing Hero Motion Brief

• Subjek fokus: Kartu ponsel membulat besar dengan placeholder nomor, lencana ketersediaan teal yang mengambang, dan karakter kecil yang mengintip dari balik kartu — disusun berlapis di atas bidang krem.
• Tesis input → transformasi → hasil: Saat pengunjung tiba di Landing, lapisan ilustrasi (kartu ponsel, lencana teal, karakter) masuk dengan fade+slide-up cepat (200ms ease-out) dan kemudian berayun idle lembut (2–3s ease-in-out infinite alternate); hasilnya adalah hero yang terasa hidup dan ramah tanpa mengalihkan perhatian dari headline dan CTA.
• Kosakata gerak: Tombol menskalakan 0.97 saat ditekan; kartu terangkat 2px saat hover dengan bayangan yang membesar; ilustrasi berayun idle lembut; transisi halaman memakai fade+slide-up cepat (200ms ease-out).
• Bingkai pertama yang tersusun: Bidang krem dengan headline dan dua CTA pil di kiri, ilustrasi berlapis di kanan (di mobile: headline di atas, ilustrasi terpotong di bawah), blob dekoratif meluber keluar tepi.
• State reduced-motion: Semua loop dekoratif dan hover-lift dinonaktifkan; ilustrasi tampil statis dalam susunan yang tetap dapat digunakan.

9. Non-Functional Requirements

NFR-01 — Keterbacaan lintas viewport [explicit] Teks dan kontrol yang dapat dibaca harus tetap utuh di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px, membungkus atau menskalakan agar pas; tidak ada elemen lain yang boleh menutupi bagian mana pun darinya. Rasional: ditetapkan langsung oleh arah kreatif dan batasan desain pengguna.

NFR-02 — Dukungan prefers-reduced-motion [explicit] Saat prefers-reduced-motion aktif, semua loop dekoratif dan hover-lift harus dinonaktifkan, dan konten yang bergerak/scrollable harus menyediakan susunan statis yang dapat digunakan (membungkus item ke baris atau memungkinkan scroll horizontal) sehingga setiap item dapat dibawa sepenuhnya ke dalam tampilan. Rasional: ditetapkan langsung oleh arah kreatif.

NFR-03 — Konsistensi palet dan tipografi [explicit] Palet harus tetap coral/teal di atas krem sesuai token yang ditetapkan; font heading adalah Nunito dan body adalah DM Sans; font yang dilarang (Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, system-ui) tidak boleh dipakai untuk heading atau body. Rasional: ditetapkan langsung oleh arah kreatif dan batasan desain pengguna.

NFR-04 — Identitas dan sesi terikat pada akun [required_inference] Pemesanan dan detail nokos yang disewa harus terikat pada akun Penyewa Nokos, dan stok nokos harus terikat pada akun Penyedia/Penjual Nokos, sehingga status dapat dilanjutkan atau ditinjau kembali. Rasional: diperlukan agar alur yang diterima dapat dieksekusi dan hasil sewa dapat dipertahankan.

NFR-05 — Pembatasan akses berbasis peran [required_inference] Halaman Nokos dan Sewa Nokos hanya dapat digunakan oleh peran Penyewa Nokos; halaman Stok Nokos dan Tambah Nokos hanya dapat digunakan oleh peran Penyedia/Penjual Nokos yang telah dikenali sebagai peran berwenang. Rasional: diperlukan agar halaman pengelolaan stok hanya digunakan oleh peran yang berwenang.

10. Tech Stack

• Frontend: React (aplikasi web dengan antarmuka kustom milik aplikasi).
• Backend: Python/FastAPI untuk melayani data nokos, status ketersediaan, pemesanan, dan hasil sewa.
• Storage: Penyimpanan persisten untuk akun, nokos, status ketersediaan, dan pemesanan/sewa.
• Kontainerisasi: Docker/docker-compose untuk menjalankan aplikasi dan layanan pendukungnya.

Catatan: Sumber tidak menetapkan pilihan teknologi secara eksplisit; item di atas adalah default yang konsisten dengan kebutuhan aplikasi web ber-UI kustom dan integrasi backend. Kubernetes tidak disertakan karena kebutuhan deployment tidak menuntutnya.

11. Assumptions and Constraints

Asumsi:

• A-01 [required_inference] Pendaftaran bersifat mandiri (self-service) untuk kedua peran, karena sumber tidak menetapkan batas provisioning.
• A-02 [required_inference] Identitas dimiliki aplikasi, sehingga Login dan Sign Up adalah permukaan akses anonim tersendiri yang tidak dimiliki oleh halaman terlindungi.
• A-03 [required_inference] Peran (penyewa atau penyedia) dipilih saat pendaftaran, karena akses ke halaman pengelolaan stok memerlukan pengenalan peran berwenang.
• A-04 [required_inference] Detail nokos mencakup nomor dan status ketersediaan, karena kedua hal itu diperlukan agar penyewa dapat meninjau dan memilih nokos.

Batasan:

• C-01 [explicit] Palet harus coral/teal di atas krem; biru/indigo sebagai warna primer atau aksen dilarang.
• C-02 [explicit] Font heading adalah Nunito dan body adalah DM Sans; font yang dilarang tidak boleh dipakai untuk heading atau body.
• C-03 [explicit] Coral dan teal dipakai sebagai isian datar, tidak pernah gradien.
• C-04 [explicit] Tidak ada hero gradient-blob, panel glassmorphism, hero berbasis fotografi, atau render 3D.
• C-05 [explicit] Tidak ada tabel data padat sebagai permukaan pengelolaan penyedia utama; dasbor penyedia memakai panel modular bertumpuk.
• C-06 [explicit] Teks dan kontrol yang dapat dibaca harus tetap utuh di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px.
• C-07 [explicit] Template SaaS indigo/biru-di-atas-putih generik dilarang untuk proyek ini.
• C-08 [required_inference] Halaman Nokos dan Sewa Nokos dibatasi untuk peran Penyewa Nokos; halaman Stok Nokos dan Tambah Nokos dibatasi untuk peran Penyedia/Penjual Nokos.

12. Glossary

• Nokos (nomor kosong): Nomor telepon kosong yang dapat disewakan untuk dipakai sementara.
• Penyewa Nokos: Pengguna yang menyewa nokos; menelusuri, memilih, memesan, dan menerima detail nomor yang disewa.
• Penyedia/Penjual Nokos: Pengguna yang menyediakan stok nokos; menambahkan dan mengelola daftar nokos beserta status ketersediaannya.
• Stok Nokos: Kumpulan nokos yang dimiliki dan dikelola oleh seorang penyedia.
• Status ketersediaan: Kondisi yang menandai apakah sebuah nokos tersedia untuk disewa.
• Sewa Nokos: Ruang kerja tempat penyewa menyelesaikan pemesanan/penyewaan dan menerima detail nokos yang disewa.
• Pemesanan/sewa: Transaksi penyewaan nokos oleh penyewa, dengan status yang dapat diamati dan dipertahankan.
• Peran berwenang: Peran Penyedia/Penjual Nokos yang telah dikenali sehingga halaman pengelolaan stok dapat digunakan.