System Requirements Document for cosmic-alumni

1. Introduction

SIDIK Rayon IKSASS PROMAL (Sistem Informasi Database IKSASS khusus wilayah Pasuruan, Probolinggo, Malang, Lumajang) is a Single Page Application (SPA) that gives the IKSASS alumni community of Pondok Pesantren P2S3 in the Rayon PROMAL region a single, dignified place to register themselves, sign in, and maintain an accurate alumni record.

The product intent is a community arsip — a living alumni registry — rather than a government-style form. Alumni of all ages, many of them mobile-first users on mid-range Android devices, must be able to volunteer their data with confidence, and verified members must be able to review and refresh that data over time. The audience is therefore:

• Alumni of IKSASS / P2S3 in the Rayon PROMAL region (Pasuruan, Probolinggo, Malang, Lumajang) who are not yet registered and want to join the database.
• Registered members who need to authenticate and reach their member area.
• Verified alumni members who review and update their own profile record.

The application is delivered as one modular, ready-to-run HTML file using HTML5, pure JavaScript, and Tailwind CSS, with Lucide Icons or FontAwesome for iconography.

2. System Overview

SIDIK Rayon IKSASS PROMAL is a three-step SPA. A fixed top bar carries the IKSASS mark, the wordmark "SIDIK PROMAL", and a three-step tab rail — Pendaftaran · Masuk · Profil — where the active step is a solid emerald pill riding on a translucent glass track.

The three steps are:

1. Formulir Pendaftaran Alumni — the public entry surface. It presents the IKSASS logo and the title "Pendaftaran Alumni P2S3 - Rayon PROMAL", and collects the alumni registration record: sub-rayon, identity data, tiered domicile address, full address, pesantren history, a personal photo upload, and a truthfulness declaration, submitted with the green Kirim Pendaftaran button. An alternative link, "Sudah daftar? Login", leads to the login step.
2. Halaman Login / Member Area — the identity access surface. It shows the IKSASS logo with the greeting "Selamat Datang - Silahkan masukkan username dan password anda.", accepts a username or email/No. WA plus a password, and offers the green full-width Login button along with the help links "Lupa password? Klik Disini" and "Belum punya akun? Klik Untuk Daftar".
3. Dashboard Profil Alumni Terverifikasi — the protected member area. It greets the member with "Halo [Nama Alumni] - Selamat datang di halaman member area SIDIK PROMAL" over an IKSASS banner, and lays out a two-column view on desktop (stacked on mobile): a left Card Profil Ringkas with the profile photo, the green TELAH DIVERIFIKASI badge, the masked NIK, a short address, and social media links; and a right Formulir Detail Data Alumni with the RAYON IKSASS PROMAL badge, the orange Perbahrui Data button at the top right, and the full detail data grid.

Actors. The accepted active human personas are the Calon Anggota / Alumni Pendaftar, the Pengguna Login / Anggota Terdaftar, and the Alumni Terverifikasi (Member Area). The application itself owns identity, storage, retrieval, and update of alumni records through a backend.

Ownership. All three surfaces are application-owned custom pages. The registration and login surfaces are openly reachable; the verified alumni dashboard is reachable only after successful authentication.

Exclusions. The navigation structure is limited to exactly three main steps/pages. The Sub-Rayon dropdown and the Kabupaten/Kota dropdown are limited to Pasuruan, Probolinggo, Malang, and Lumajang. No additional pages, modules, or adjacent account-management capabilities are part of the current scope.

2a. Product Interpretation and Delivery Boundary

SIDIK Rayon IKSASS PROMAL is delivered as a single-file SPA that runs directly in the browser. The application owns its own identity: an alumnus establishes a record by completing the registration form, and later proves that identity on the login surface with a username or email/No. WA and a password. Because the member area must remain bound to the correct alumnus and must be resumable across visits, the dashboard is protected and only becomes available after successful authentication.

The registration surface and the login surface are both openly reachable — an alumnus who has not yet registered must be able to reach the form, and a registered member who is not yet signed in must be able to reach the login form. The verified alumni dashboard is the only protected destination; its content is never shown before identity is established.

The current delivery horizon covers the three accepted steps and the backend work needed to store registrations, authenticate members, and retrieve and update alumni profile data. Nothing beyond these three steps — no administration console, no reporting module, no messaging, no public directory — is part of the current scope.

2c. Page Content and Component Coverage

Formulir Pendaftaran Alumni

Purpose and information/state. The public entry surface and the first step of the SPA. It explains the product and simultaneously begins the registration itself: the hero is the form, not a promise of it. It holds the in-progress registration record and the truthfulness declaration state.

Primary actions.

• Kirim Pendaftaran — solid emerald (#046A38) primary button with a white 16px label; full width on mobile, 280px on desktop, pinned at the bottom of the glass card. Submits the registration record.
• Sudah daftar? Login — the only orange text on the screen; navigates to the login step.

Supporting actions.

• Selecting a Sub-Rayon from the dropdown (Pasuruan, Probolinggo, Malang, Lumajang).
• Entering identity text fields: NIK, Nama Lengkap, Tempat Lahir, Tanggal Lahir, No. Telp/WA.
• Selecting the tiered domicile address: Provinsi (default Jawa Timur), Kabupaten/Kota (Pasuruan, Probolinggo, Malang, Lumajang), Kecamatan, Desa.
• Entering the Alamat Lengkap textarea.
• Selecting pesantren history: Tahun Masuk Mondok and Tahun Keluar Mondok.
• Uploading the personal photo (Unggah Pasfoto Diri).
• Ticking the declaration checkbox: "Dengan ini saya menyatakan bahwa data ini benar."

Domain entities. Alumni registration record (sub-rayon, NIK, nama lengkap, tempat lahir, tanggal lahir, no. telp/WA, provinsi, kabupaten/kota, kecamatan, desa, alamat lengkap, tahun masuk mondok, tahun keluar mondok, pasfoto), truthfulness declaration.

Component responsibilities.

• Top bar (56px, fixed): IKSASS mark at 44px, wordmark "SIDIK PROMAL", three-step tab rail with the active step as a solid emerald pill on a translucent glass track.
• Hero panel (28px radius glass): oversized two-line title in Plus Jakarta Sans 600 at clamp(28px, 6vw, 61px) — "Pendaftaran Alumni" over "P2S3 — Rayon PROMAL", with "Rayon PROMAL" in emerald and the rest in ink; one 16px muted line of context beneath; a horizontal row of four rayon chips (Pasuruan, Probolinggo, Malang, Lumajang) as small glass pills.
• Registration glass card: contains the first three real fields — Sub-Rayon, NIK, Nama Lengkap — and bleeds 24px past the right viewport edge at 1280px, overlapping the title's baseline by 40px.
• Three labelled glass form sections: Data Diri, Domisili, Riwayat Santri, on a 12px gap grid that collapses to one column below 640px, with two-up only for short field pairs (Tempat/Tanggal Lahir, Tahun Masuk/Keluar).
• Field labels: 11px uppercase tracked micro-labels inside the glass panel above each input, with a 1px emerald underline that draws left-to-right on focus; label and rule move together.
• File upload control: Unggah Pasfoto Diri.
• Declaration checkbox with the exact statement text.
• Background composition: a wide emerald-to-teal wash at 20% plus two blurred orbs (orange top-right, emerald bottom-left) at 12% opacity, drifting slowly over 12s.

States.

• Loading: the submit button enters a pending state while the registration is being sent.
• Empty: all fields render empty except Provinsi, which defaults to Jawa Timur.
• Success: the registration is accepted and the alumnus is offered the path onward to login.
• Error: if submission fails, the form retains the entered values and surfaces a recoverable error message; the alumnus can correct and resubmit.
• Recovery: the declaration checkbox must be ticked before the registration can be processed; if it is not, submission is blocked with a clear prompt and the entered data is preserved.

Halaman Login / Member Area

Purpose and information/state. The identity access surface. It establishes the member's session so the protected dashboard can be reached. It holds the credential input state and the authentication outcome state.

Primary actions.

• Login — solid emerald, full-width button. Submits the credentials.

Supporting actions.

• Entering Username atau Email / No. WA.
• Entering Password, with a 150ms show/hide icon swap.
• "Lupa password? Klik Disini" — help link for recovering access.
• "Belum punya akun? Klik Untuk Daftar" — help link that leads to the registration step.

Domain entities. Member credential (username or email/No. WA, password), authenticated session.

Component responsibilities.

• Top bar: IKSASS mark, wordmark "SIDIK PROMAL", three-step tab rail with Masuk as the active emerald pill.
• Login card (glass): IKSASS logo with the greeting "Selamat Datang - Silahkan masukkan username dan password anda."
• Credential fields: username/email/No. WA and password inputs with the tracked micro-label and emerald focus underline treatment.
• Password visibility toggle: Lucide icon at 18px, 1.75 stroke, emerald or muted.
• Full-width emerald Login button.
• Help link row: the two exact help links, with the registration link carrying the orange accent.

States.

• Loading: the Login button shows a pending state while credentials are verified.
• Empty: both fields render empty.
• Success: the member is admitted to the verified alumni dashboard.
• Error: invalid credentials produce a clear, recoverable error message; the entered username is preserved and the password field can be corrected and resubmitted.
• Recovery: the "Lupa password? Klik Disini" link provides the recovery path; "Belum punya akun? Klik Untuk Daftar" routes an unregistered visitor to the registration step.

Dashboard Profil Alumni Terverifikasi

Purpose and information/state. The protected member area. It presents the verified alumnus's own record and lets that alumnus refresh it. It holds the loaded profile state and the update-in-progress state.

Primary actions.

• Perbahrui Data — orange (#E07B39) button at the top right of the right column. Opens the detail data for updating and saves the refreshed record.

Supporting actions.

• Reviewing the left profile card: profile photo, verification badge, masked NIK, short address, social media links.
• Reviewing the right detail grid: NIK KTP, Nama Lengkap, Tempat Tanggal Lahir, No. Telp/WA, Status Nikah, Alamat Lengkap Domisili, Pekerjaan, Tahun Masuk/Keluar Pesantren, Keterangan Rekom, Tanggungan Keluarga, Pendidikan Terakhir, Pengalaman Organisasi.
• Following the Instagram, Twitter, and Facebook social media links.

Domain entities. Verified alumni profile (foto profil, verification status, NIK, alamat ringkas, social media links, and the full detail data set listed above).

Component responsibilities.

• Header greeting: "Halo [Nama Alumni] - Selamat datang di halaman member area SIDIK PROMAL".
• IKSASS banner: deep emerald (#02361F) field carrying the IKSASS dome-and-book mark blown up to 8% opacity and bled off the top-right corner, a 4% diagonal hairline pattern behind it, and one 6px orange keyline along the left edge.
• Left column — Card Profil Ringkas (340px, sticky at ≥1024px): circular avatar with a 3px white ring on glass (or a monogram of the alumnus's initials in white on an emerald disc when no photo is uploaded); green TELAH DIVERIFIKASI pill; masked NIK rendered as a monospace-aligned string 3512************** in 20px tabular numerals with the visible prefix in emerald and the asterisks in muted grey, sitting directly under the verification pill; short address; Instagram, Twitter, and Facebook links.
• Right column — Formulir Detail Data Alumni: RAYON IKSASS PROMAL badge at the top; orange Perbahrui Data button at the top right; a definition grid of the twelve detail fields, two columns at ≥768px and one column below.
• Layout: two columns at ≥1024px, stacked below; long values (alamat lengkap, pengalaman organisasi) wrap inside their container and are never truncated or clipped.

States.

• Loading: the profile and detail grid show a loading state while the record is retrieved.
• Empty: any detail field without a stored value renders an explicit empty indicator rather than a blank gap.
• Success: the verified record renders with the TELAH DIVERIFIKASI badge and the masked NIK.
• Error: if the record cannot be retrieved, a recoverable error state is shown with a retry path; if an update fails, the previously stored values remain intact and the member can retry.
• Recovery: the member can re-open Perbahrui Data and resubmit after a failed update.

3. Functional Requirements

FR-1 — Single Page Application delivery As an alumnus, I should use SIDIK Rayon IKSASS PROMAL as a Single Page Application built with HTML5, pure JavaScript, and Tailwind CSS, with Lucide Icons or FontAwesome for icon components, delivered as modular code in one tidy, ready-to-run HTML file, so that I can access the whole registry from a single page.

• Provenance: explicit.
• Lifecycle: the SPA loads once and switches between the three steps without a full page reload.
• Acceptance: the application runs from one HTML file; the three steps are reachable through the tab rail; icons render from Lucide Icons or FontAwesome.

FR-2 — Three-step navigation As an alumnus, I should move between exactly three main steps — Formulir Pendaftaran Alumni, Halaman Login / Member Area, and Dashboard Profil Alumni Terverifikasi — through a navigation/tab rail, so that I always know where I am in the journey.

• Provenance: explicit.
• Lifecycle: the tab rail is present on all three steps; the active step is a solid emerald pill on a translucent glass track; switching tabs cross-fades the panel with a 6px directional slide.
• Acceptance: exactly three steps exist; the active step is visually marked; no fourth destination is reachable.

FR-3 — Registration header and title As a Calon Anggota / Alumni Pendaftar, I should see the IKSASS logo and the title "Pendaftaran Alumni P2S3 - Rayon PROMAL" at the top of the registration step, so that I know I am in the right place.

• Provenance: explicit.
• Acceptance: the IKSASS logo and the exact title string are rendered in the registration header.

FR-4 — Sub-Rayon selection As a Calon Anggota / Alumni Pendaftar, I should select my Sub-Rayon from a dropdown limited to Pasuruan, Probolinggo, Malang, and Lumajang, so that my registration is filed under the correct rayon.

• Provenance: explicit.
• Acceptance: the dropdown offers exactly those four options and no others.

FR-5 — Identity data entry As a Calon Anggota / Alumni Pendaftar, I should enter my NIK, Nama Lengkap, Tempat Lahir, Tanggal Lahir, and No. Telp/WA as text inputs, so that my identity is recorded.

• Provenance: explicit.
• Acceptance: all five fields are present and accept input; Tempat Lahir and Tanggal Lahir may sit two-up as a short-field pair.

FR-6 — Tiered domicile address As a Calon Anggota / Alumni Pendaftar, I should select my domicile address through dropdowns for Provinsi (default Jawa Timur), Kabupaten/Kota (Pasuruan, Probolinggo, Malang, Lumajang), Kecamatan, and Desa, so that my address is captured in the registry's own regional structure.

• Provenance: explicit.
• Acceptance: Provinsi defaults to Jawa Timur; Kabupaten/Kota offers exactly Pasuruan, Probolinggo, Malang, and Lumajang; Kecamatan and Desa are selectable.

FR-7 — Full address entry As a Calon Anggota / Alumni Pendaftar, I should write my complete address in the Alamat Lengkap textarea, so that my domicile is unambiguous.

• Provenance: explicit.
• Acceptance: the textarea is present and accepts multi-line input.

FR-8 — Pesantren history As a Calon Anggota / Alumni Pendaftar, I should select my Tahun Masuk Mondok and Tahun Keluar Mondok from dropdowns, so that my santri history is recorded.

• Provenance: explicit.
• Acceptance: both dropdowns are present and may sit two-up as a short-field pair.

FR-9 — Personal photo upload As a Calon Anggota / Alumni Pendaftar, I should upload my personal photo (Unggah Pasfoto Diri), so that my profile carries a face.

• Provenance: explicit.
• Acceptance: a file upload control is present and accepts an image file; the uploaded photo becomes the profile photo shown in the member area.

FR-10 — Truthfulness declaration As a Calon Anggota / Alumni Pendaftar, I should tick the checkbox "Dengan ini saya menyatakan bahwa data ini benar." before my registration can be processed, so that my submission carries a deliberate statement of accuracy.

• Provenance: explicit (checkbox and exact text); required_inference (the declaration gates processing).
• Lifecycle: the declaration is a precondition of submission; without it the registration is not processed.
• Acceptance: the checkbox carries the exact statement text; submission is blocked with a clear prompt while it is unticked, and the entered data is preserved.

FR-11 — Submit registration As a Calon Anggota / Alumni Pendaftar, I should press the green Kirim Pendaftaran button to send my registration, so that my record enters the SIDIK PROMAL database.

• Provenance: explicit.
• Lifecycle: trigger — the alumnus presses the button with the declaration ticked; result — the registration is sent and stored; failure — a recoverable error is shown and the entered values are retained; continuation — the alumnus proceeds to login.
• Acceptance: the button is green; on success the registration is accepted and the path to login is offered; on failure the form is preserved and resubmittable.

FR-12 — Alternative login link on registration As a Calon Anggota / Alumni Pendaftar who already registered, I should follow the link "Sudah daftar? Login" to reach the login step, so that I can sign in instead of registering again.

• Provenance: explicit.
• Acceptance: the link carries the exact text and navigates to the login step.

FR-13 — Login header and branding As a Pengguna Login / Anggota Terdaftar, I should see the IKSASS logo with the greeting "Selamat Datang - Silahkan masukkan username dan password anda." on the login step, so that I am welcomed and told what to do.

• Provenance: explicit.
• Acceptance: the IKSASS logo and the exact greeting string are rendered.

FR-14 — Credential entry As a Pengguna Login / Anggota Terdaftar, I should enter my username or email/No. WA and my password, so that I can prove my identity.

• Provenance: explicit (fields); required_inference (credentials are the returning-verification mechanism).
• Lifecycle: the member holds credentials established through registration; the password field supports a 150ms show/hide icon swap.
• Acceptance: both fields are present; the first accepts a username, an email, or a WhatsApp number; the password field masks input and can be revealed.

FR-15 — Login submission As a Pengguna Login / Anggota Terdaftar, I should press the green full-width Login button, so that I enter the member area.

• Provenance: explicit.
• Lifecycle: trigger — the member submits credentials; result — a session is established and the verified alumni dashboard opens; failure — invalid credentials produce a clear, recoverable error with the username preserved; continuation — the member lands on the dashboard.
• Acceptance: the button is green and full width; success opens the dashboard; failure shows a recoverable error and allows correction and resubmission.

FR-16 — Password recovery link As a Pengguna Login / Anggota Terdaftar, I should use the link "Lupa password? Klik Disini" when I cannot sign in, so that I have a path back into my account.

• Provenance: explicit.
• Acceptance: the link carries the exact text and is present on the login step.

FR-17 — Registration link from login As a Pengguna Login / Anggota Terdaftar who has no account, I should use the link "Belum punya akun? Klik Untuk Daftar" to reach the registration step, so that I can register.

• Provenance: explicit.
• Acceptance: the link carries the exact text and navigates to the registration step.

FR-18 — Protected dashboard access As an Alumni Terverifikasi (Member Area), I should reach the verified alumni dashboard only after successful authentication, so that my record stays private to me.

• Provenance: required_inference.
• Lifecycle: the dashboard content is unavailable until a session exists; an unauthenticated visitor is directed to the login step.
• Acceptance: the dashboard never renders profile data before authentication succeeds.

FR-19 — Dashboard greeting and banner As an Alumni Terverifikasi (Member Area), I should see the greeting "Halo [Nama Alumni] - Selamat datang di halaman member area SIDIK PROMAL" with my own name, over an IKSASS banner, so that the member area feels addressed to me.

• Provenance: explicit.
• Acceptance: the greeting substitutes the authenticated alumnus's name; the IKSASS banner renders with the IKSASS mark watermark, the diagonal hairline pattern, and the 6px orange left keyline.

FR-20 — Two-column dashboard layout As an Alumni Terverifikasi (Member Area), I should see the dashboard as two columns on desktop and stacked on mobile, so that it stays readable on any device.

• Provenance: explicit.
• Acceptance: two columns at ≥1024px with the left card sticky at 340px; stacked below that breakpoint; long values wrap and are never truncated or clipped.

FR-21 — Card Profil Ringkas As an Alumni Terverifikasi (Member Area), I should see my profile photo with the green TELAH DIVERIFIKASI badge, my masked NIK, my short address, and my social media links in the left card, so that I can confirm at a glance that I am a verified member.

• Provenance: explicit.
• Lifecycle: the card reflects the stored, verified record; when no photo is uploaded, a monogram of the alumnus's initials in white on an emerald disc is shown instead.
• Acceptance: the badge carries the exact label "TELAH DIVERIFIKASI"; the NIK renders in the masked format 3512************** as a monospace-aligned string in 20px tabular numerals with the visible prefix in emerald and the asterisks in muted grey; Instagram, Twitter, and Facebook links are present.

FR-22 — Formulir Detail Data Alumni As an Alumni Terverifikasi (Member Area), I should see the RAYON IKSASS PROMAL badge and a detail grid containing NIK KTP, Nama Lengkap, Tempat Tanggal Lahir, No. Telp/WA, Status Nikah, Alamat Lengkap Domisili, Pekerjaan, Tahun Masuk/Keluar Pesantren, Keterangan Rekom, Tanggungan Keluarga, Pendidikan Terakhir, and Pengalaman Organisasi, so that I can review my complete record.

• Provenance: explicit.
• Lifecycle: the grid renders the stored record; a field with no stored value shows an explicit empty indicator.
• Acceptance: the badge carries the exact label "RAYON IKSASS PROMAL"; all twelve detail fields are present; the grid is two columns at ≥768px and one column below.

FR-23 — Update alumni data As an Alumni Terverifikasi (Member Area), I should press the orange Perbahrui Data button at the top right of the detail column to refresh my record, so that my data stays accurate and current.

• Provenance: explicit.
• Lifecycle: trigger — the member presses the button; result — the detail data is opened for updating and the refreshed record is saved; failure — the previously stored values remain intact and the member can retry; continuation — the updated record renders in the card and grid.
• Acceptance: the button is orange and positioned at the top right of the right column; a successful update is reflected in the displayed record; a failed update preserves the stored values and offers a retry.

FR-24 — Backend persistence, authentication, and retrieval As the application, I should persist registrations and profiles, authenticate members, and retrieve and update alumni data through a backend, so that the accepted journeys are executable and durable.

• Provenance: required_inference.
• Lifecycle: registration writes a record; login verifies credentials and establishes a session; the dashboard reads the member's record; Perbahrui Data writes the updated record.
• Acceptance: submitted registrations persist; credentials verify against stored members; the dashboard loads the authenticated member's own record; updates persist and re-render.

4. User Personas

Calon Anggota / Alumni Pendaftar

Product context. An IKSASS alumnus of Pondok Pesantren P2S3 who lives in or hails from the Rayon PROMAL region — Pasuruan, Probolinggo, Malang, or Lumajang — and who is not yet in the SIDIK PROMAL database. Many in this group are mobile-first users on mid-range Android devices, and they arrive at the registration step as the very first thing they see.

Primary goal. To get himself into the alumni registry correctly, in one sitting, without having to guess what the form wants.

Distinct accepted responsibilities. This persona owns the entire registration record: choosing the Sub-Rayon, entering NIK, Nama Lengkap, Tempat Lahir, Tanggal Lahir, and No. Telp/WA; walking the tiered domicile dropdowns (Provinsi defaulting to Jawa Timur, then Kabupaten/Kota, Kecamatan, Desa); writing the Alamat Lengkap; selecting Tahun Masuk Mondok and Tahun Keluar Mondok; uploading the pasfoto; and ticking the declaration "Dengan ini saya menyatakan bahwa data ini benar." before pressing Kirim Pendaftaran. No other persona performs this work.

Relevant inputs and decisions. The decision that matters most is the truthfulness declaration — it is the gate that turns a filled form into a processable registration. The Sub-Rayon choice determines which rayon the record is filed under, and the Kabupaten/Kota choice is constrained to the same four regions.

Interactions with other accepted participants. The registration is the handoff into the registry: once it is accepted, the alumnus becomes a Pengguna Login / Anggota Terdaftar and continues through the login step. The registration surface also offers the "Sudah daftar? Login" link for those who already have a record.

Observable success. The registration is accepted and the alumnus is offered the path onward to login. If submission fails, the entered values are preserved and the declaration prompt is clear, so nothing has to be retyped.

Pengguna Login / Anggota Terdaftar

Product context. An alumnus who already has a record in SIDIK PROMAL and now needs to get back into the member area. This persona may be returning after a long gap, may have forgotten the password, or may not be sure whether an account exists at all.

Primary goal. To authenticate successfully and land in the verified alumni dashboard.

Distinct accepted responsibilities. This persona owns the authentication act: entering a username or email/No. WA and a password, revealing the password when needed, and pressing the green full-width Login button. This persona also owns the two help decisions — following "Lupa password? Klik Disini" when access is blocked, and following "Belum punya akun? Klik Untuk Daftar" when no account exists.

Relevant inputs and decisions. The credential itself, entered in any of the three accepted forms (username, email, or WhatsApp number). The recovery decision — recover access versus register — is this persona's alone.

Interactions with other accepted participants. A successful login hands the member over to the Alumni Terverifikasi (Member Area) persona and the protected dashboard. A member who turns out to have no account is routed back to the Calon Anggota / Alumni Pendaftar journey.

Observable success. The dashboard opens with the member's own greeting. On failure, a clear recoverable error appears, the username is preserved, and the member can correct the password and resubmit.

Alumni Terverifikasi (Member Area)

Product context. A verified IKSASS alumnus inside the member area, looking at his own record. He is the reason the registry stays alive: the database is only as good as the alumni who keep their own entries current.

Primary goal. To confirm that his stored record is accurate and complete, and to correct it when it is not.

Distinct accepted responsibilities. This persona owns the review and refresh of the record: reading the Card Profil Ringkas (profile photo, the green TELAH DIVERIFIKASI badge, the masked NIK, the short address, and the Instagram/Twitter/Facebook links), reading the twelve-field detail grid, and pressing the orange Perbahrui Data button to update the data.

Relevant inputs and decisions. The decision of whether the displayed record is still true — a change of address, a new job, a change in marital status, a new dependent, further education, or a new organisational experience all prompt an update.

Interactions with other accepted participants. This persona is the recipient of the registration and login work performed by the other two personas; the record he reviews is the one the Calon Anggota / Alumni Pendaftar submitted and the Pengguna Login / Anggota Terdaftar authenticated into.

Observable success. The record renders with the TELAH DIVERIFIKASI badge and the masked NIK, and after an update the refreshed values appear in both the card and the detail grid. If an update fails, the stored values remain intact and the member can retry.

5. Core User Flows

Flow A — An alumnus registers into SIDIK PROMAL

1. The Calon Anggota / Alumni Pendaftar opens SIDIK Rayon IKSASS PROMAL on a phone. The SPA loads on the Formulir Pendaftaran Alumni step, showing the IKSASS logo and the title "Pendaftaran Alumni P2S3 - Rayon PROMAL", with the oversized two-line hero title and the four rayon chips.
2. The alumnus begins directly in the frosted glass card, which holds the first three real fields. He selects his Sub-Rayon from Pasuruan, Probolinggo, Malang, or Lumajang, then enters his NIK and Nama Lengkap.
3. In the Data Diri section he enters Tempat Lahir, Tanggal Lahir, and No. Telp/WA. The Tempat/Tanggal Lahir pair sits two-up.
4. In the Domisili section he finds Provinsi already set to Jawa Timur, selects his Kabupaten/Kota from Pasuruan, Probolinggo, Malang, or Lumajang, then selects Kecamatan and Desa, and writes his complete address in the Alamat Lengkap textarea.
5. In the Riwayat Santri section he selects his Tahun Masuk Mondok and Tahun Keluar Mondok, and uploads his Pasfoto Diri.
6. He ticks the checkbox "Dengan ini saya menyatakan bahwa data ini benar." — the decision that makes the registration processable.
7. He presses the green Kirim Pendaftaran button. The button enters a pending state while the registration is sent.
8. Observable result. The registration is accepted and stored, and the alumnus is offered the path onward to login. Continuation: he follows the link "Sudah daftar? Login" — the only orange text on the screen — and moves to Flow B.
9. Failure and recovery. If he presses Kirim Pendaftaran without ticking the declaration, submission is blocked with a clear prompt and every entered value is preserved. If the submission itself fails, a recoverable error appears, the form retains its values, and he can correct and resubmit without retyping.

Flow B — A registered member signs in

1. The Pengguna Login / Anggota Terdaftar arrives at the Halaman Login / Member Area step, either from the "Sudah daftar? Login" link or by selecting the Masuk tab. He sees the IKSASS logo and the greeting "Selamat Datang - Silahkan masukkan username dan password anda."
2. He enters his Username atau Email / No. WA and his Password, revealing the password with the show/hide icon if he needs to check it.
3. He presses the green full-width Login button. The button shows a pending state while the credentials are verified.
4. Observable result. Authentication succeeds, a session is established, and the Dashboard Profil Alumni Terverifikasi opens with his own name in the greeting. Continuation: he proceeds to Flow C.
5. Failure and recovery. If the credentials are wrong, a clear recoverable error appears, his username is preserved, and he can correct the password and resubmit. If he cannot recall the password, he follows "Lupa password? Klik Disini" to recover access. If it turns out he has no account at all, he follows "Belum punya akun? Klik Untuk Daftar" and is routed to the registration step to begin Flow A.

Flow C — A verified alumnus reviews and refreshes his record

1. The Alumni Terverifikasi (Member Area) lands on the Dashboard Profil Alumni Terverifikasi after a successful login. The header greets him: "Halo [Nama Alumni] - Selamat datang di halaman member area SIDIK PROMAL", over the IKSASS banner with its watermark mark, hairline pattern, and orange left keyline.
2. On desktop he sees two columns; on mobile the same content is stacked. While the record is retrieved, the profile and detail grid show a loading state.
3. In the left Card Profil Ringkas he confirms his standing: his profile photo (or his initials monogram on an emerald disc if he never uploaded one), the green TELAH DIVERIFIKASI badge, his masked NIK rendered as 3512************** in tabular numerals with the visible prefix in emerald, his short address, and his Instagram, Twitter, and Facebook links.
4. In the right Formulir Detail Data Alumni he reviews the RAYON IKSASS PROMAL badge and the twelve-field detail grid: NIK KTP, Nama Lengkap, Tempat Tanggal Lahir, No. Telp/WA, Status Nikah, Alamat Lengkap Domisili, Pekerjaan, Tahun Masuk/Keluar Pesantren, Keterangan Rekom, Tanggungan Keluarga, Pendidikan Terakhir, and Pengalaman Organisasi. Any field with no stored value shows an explicit empty indicator rather than a blank gap.
5. He decides his record needs refreshing — a new address, a new job, a change in marital status, a new dependent, further education, or new organisational experience.
6. He presses the orange Perbahrui Data button at the top right of the detail column, updates the affected fields, and saves.
7. Observable result. The refreshed values render in both the card and the detail grid. Continuation: he remains in the member area with an accurate, current record.
8. Failure and recovery. If the record cannot be retrieved, a recoverable error state with a retry path is shown. If the update fails, the previously stored values remain intact and he can re-open Perbahrui Data and resubmit.

6. Visuals Colors and Theme

Muse and headline. Michal Malewicz — layered translucency for a santri alumni registry: glass over emerald, orange as the human touch. The requested glassmorphism becomes the whole visual identity rather than a bolted-on effect: frosted panels floating over a soft grey-green ground, so an administrative database reads as an arsip komunitas that an alumnus is proud to share.

Colour tokens (light mode).

Emerald #046A38 is the spine: the primary CTA, the verified badge, the active tab, and the banner field. Orange #E07B39 is rationed to exactly two things — the Perbahrui Data button and the "Sudah daftar? Login" / "Klik Untuk Daftar" links — plus one 6px orange keyline on the dashboard banner.

Glass surfaces. rgba(255,255,255,0.62) fill, 1px rgba(255,255,255,0.75) top border, rgba(4,106,56,0.10) outer border, backdrop-filter: blur(18px) saturate(140%), shadow 0 18px 40px -24px rgba(4,40,24,0.35). Behind the hero sits one very soft emerald→teal wash at 20% plus two blurred orbs (orange top-right, emerald bottom-left) at 12% opacity, so the blur has something to eat. Blur is never below 16px, and body text never sits on a panel under 60% white opacity. At most two translucent layers deep.

Contrast. #0C1F16 on #EEF3EE and on 62% white-glass over the wash both clear 12:1.

Typography. Headings: Plus Jakarta Sans, Semi-bold (600) and Bold (700), tight -0.02em tracking, sentence case for Indonesian headings; uppercase only for micro-labels and badges at 11–12px with +0.14em letterspacing. Body: Manrope. Scale: 1.25 modular, 16px base — 12 / 14 / 16 / 20 / 25 / 31 / 39 / 49 / 61. Page hero title clamp(28px, 6vw, 61px); section titles clamp(20px, 3vw, 31px); field labels 12px uppercase tracked; body 16px/1.7; data values 16–20px; NIK and WA numbers in tabular numerals with 0.02em tracking.

Shape language. Soft and continuous: 20px radius on cards, 28px on the hero panel, 14px on inputs and select boxes, full pill (999px) on every button and badge. Glass panels carry a 1px light border on the top edge only — the classic frosted highlight — and no drop shadow on inner elements, so depth comes from blur and light rather than stacked shadows. One 6px orange rule runs along the left edge of the dashboard banner as the single hard-edged gesture.

Spacing rhythm. A 12px gap grid inside form sections, collapsing to one column below 640px; two-up only for short field pairs (Tempat/Tanggal Lahir, Tahun Masuk/Keluar). A fixed 56px top bar. The dashboard's left card is 340px and sticky at ≥1024px.

Imagery style. No stock photography and no illustrated people. Imagery is the interface itself plus two crafted assets: (1) the IKSASS mark — a simple geometric dome-and-book glyph in emerald, drawn as inline SVG, used in the top bar, the login card, and as a large 8%-opacity watermark bleeding off the top-right of the dashboard banner; (2) a subtle 1px dot-grid or 45° diagonal hairline pattern at 4% opacity inside the banner to give the blur texture. The profile photo is a circular avatar with a 3px white ring on glass; when no photo is uploaded, a monogram of the alumnus's initials in white on an emerald disc. Icons are Lucide at 18px, 1.75 stroke, emerald or muted, never coloured decoratively.

Avoid. No blue or indigo anywhere — no #2563EB, #4F46E5, #6366F1 or their neighbours, not even for focus rings or links. No Inter, Roboto, Arial, Helvetica, Poppins, Open Sans, Lato, or system-ui for headings or body. No gradient-blob hero behind a centred headline, and no grid of identical hover-lift cards. No glass panel stacked on glass panel. No blur below 16px. No decorative imagery of people, mosques, or stock santri photos. No truncation or ellipsis on NIK, alamat, or nama. No confetti, bouncing buttons, or celebratory motion — verification is stated, not performed.

7. Signature Design Concept

The hero is the form.

The first screen is not a centred headline over a blob. It is a split composition on the soft grey-green #EEF3EE ground:

• On the left (60% at 1280px, full width at 375px) sits an oversized two-line title in Plus Jakarta Sans 600 at clamp(28px, 6vw, 61px): "Pendaftaran Alumni" over "P2S3 — Rayon PROMAL", with "Rayon PROMAL" set in emerald #046A38 and the rest in ink #0C1F16. Beneath it, one 16px muted line of context, then a horizontal row of four rayon chips — Pasuruan, Probolinggo, Malang, Lumajang — as small glass pills.
• On the right, overlapping the title's baseline by 40px and bleeding 24px past the right viewport edge, is a frosted glass card (rgba(255,255,255,0.62), 28px radius) that contains the first three real form fields — Sub-Rayon, NIK, Nama Lengkap — so the hero is the beginning of the form, not a promise of it.
• Behind everything: a wide emerald-to-teal wash at 20% and two blurred orbs (orange top-right, emerald bottom-left).
• The primary Kirim Pendaftaran button is solid #046A38 with a white 16px label, full width on mobile and 280px on desktop, pinned at the bottom of the glass card.
• The IKSASS mark sits at 44px in the top-left of the bar, and "Sudah daftar? Login" is the only orange text on the screen.

Supporting signature moves that carry the same idea through the rest of the product:

• A three-step tab rail where the active step is a solid emerald pill riding on a translucent glass track, and switching tabs cross-fades the panel with a 6px directional slide.
• Field labels as 11px uppercase tracked micro-labels sitting inside the glass panel above each input, with a 1px emerald underline that draws left-to-right on focus — the label and the rule move together.
• On the dashboard, the IKSASS dome-and-book mark blown up to 8% opacity and bled off the top-right corner of the emerald banner, with a 4% diagonal hairline pattern behind it, so the banner is a composed surface rather than a flat colour strip.
• The masked NIK rendered as a monospace-aligned string 3512************** in 20px tabular numerals, with the visible prefix in emerald and the asterisks in muted grey, sitting directly under the green TELAH DIVERIFIKASI pill — the one place the interface deliberately looks like an official record.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject. The frosted glass registration card holding the first three real fields — Sub-Rayon, NIK, Nama Lengkap — bleeding off the right viewport edge, with the oversized two-line title running under it.
• Input → transformation → outcome thesis. As the page settles, the glass card rises 12px into place and the three-step tab rail's emerald pill seats itself on the glass track; when the alumnus focuses a field, the glass border warms to emerald and the 11px micro-label lifts with its 1px underline drawing left-to-right. The outcome is that the hero has already become the form — the first act of registration has visibly begun.
• Motion vocabulary. 240–320ms cubic-bezier(0.22, 1, 0.36, 1) on panel entrance (12px rise + 0→1 opacity, staggered 60ms per section); 180ms on input focus; 120ms press-scale 0.98 on buttons; a slow 12s drift on the two background orbs; tab changes cross-fade the step panel with a 6px horizontal slide in the direction of travel; password show/hide is a 150ms icon swap. No bounce, no confetti, no hover-lift on cards.
• Composed first frame. The title at final size on the left, the four rayon chips in a row beneath it, the glass card already overlapping the title's baseline and bleeding past the right edge, the emerald-to-teal wash and both orbs in place behind, and the solid emerald Kirim Pendaftaran button pinned at the bottom of the card. Nothing is mid-animation in the still frame.
• Reduced-motion state. With prefers-reduced-motion, all entrances render at final state, the orb drift stops, and only opacity transitions under 120ms remain. The composition is identical and fully usable.

9. Non-Functional Requirements

NFR-1 — Single-file SPA delivery. The application is delivered as one tidy, ready-to-run HTML file with modular code, using HTML5, pure JavaScript, and Tailwind CSS. Provenance: explicit. Rationale: the source specifies this delivery shape.

NFR-2 — Mobile-first responsive layout. The layout is clean, professional, and responsive, mobile-first. Form sections collapse to one column below 640px; the dashboard is two columns at ≥1024px and stacked below. Provenance: explicit.

NFR-3 — Readable text and controls stay whole. At 375px, 768px, and 1280px, headlines, wordmarks, labels, numbers, card text, and controls stay entirely inside the viewport and their container, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit. No element covers any part of them. Long values — alamat lengkap, pengalaman organisasi, NIK, nama — wrap and are never truncated or clipped. Provenance: explicit (creative direction).

NFR-4 — Icon system. Icons come from Lucide Icons or FontAwesome, rendered at 18px with 1.75 stroke in emerald or muted, never coloured decoratively. Provenance: explicit.

NFR-5 — Glassmorphism surface treatment. Cards and containers use backdrop-filter: blur(18px) saturate(140%) with semi-transparent borders and a soft shadow, at most two translucent layers deep, with blur never below 16px and body text never on a panel under 60% white opacity. Provenance: explicit.

NFR-6 — Colour discipline. Emerald/Forest Green is the primary colour, white/light gray the background, and soft orange the secondary action accent. No blue or indigo appears anywhere, including focus rings and links. Provenance: explicit.

NFR-7 — Typography discipline. Headings use Plus Jakarta Sans; body uses Manrope. Inter, Roboto, Arial, Helvetica, Poppins, Open Sans, Lato, and system-ui are not used for headings or body. Provenance: explicit (creative direction).

NFR-8 — Contrast. Body text meets accessible contrast on both the #EEF3EE ground and 62% white-glass over the wash (both clear 12:1). Provenance: explicit (creative direction).

NFR-9 — Reduced motion. With prefers-reduced-motion, all entrances render at final state, the orb drift stops, and only opacity transitions under 120ms remain. Provenance: explicit (creative direction).

NFR-10 — Backend persistence and authentication. Registrations and profile updates persist; credentials verify against stored members; the dashboard loads only the authenticated member's own record. Provenance: required_inference. Rationale: the accepted registration, login, and update journeys cannot be durable or correctly bound to a participant without it.

NFR-11 — NIK masking. The NIK shown in the Card Profil Ringkas is always rendered in the masked format 3512**************, never in full. Provenance: explicit.

10. Tech Stack

• HTML5 — the single-file SPA shell. (explicit)
• Pure JavaScript — all application logic, step switching, form handling, and state. (explicit)
• Tailwind CSS — styling, responsive layout, and the glassmorphism surface treatment. (explicit)
• Lucide Icons or FontAwesome — icon components. (explicit)
• Backend service — storage of registrations and alumni profiles, credential authentication, and retrieval and update of alumni data. (required_inference — needed to make the accepted journeys durable and correctly bound to each member)

No other framework, build tool, or deployment platform is specified by the source.

11. Assumptions and Constraints

Constraints (explicit, binding).

1. The application is a Single Page Application delivered as one tidy, ready-to-run HTML file.
2. The navigation structure is limited to exactly three main steps/pages (navigation/tabs): Formulir Pendaftaran Alumni, Halaman Login / Member Area, and Dashboard Profil Alumni Terverifikasi.
3. The Sub-Rayon dropdown offers only Pasuruan, Probolinggo, Malang, and Lumajang.
4. The Kabupaten/Kota dropdown offers only Pasuruan, Probolinggo, Malang, and Lumajang.
5. Provinsi defaults to Jawa Timur.
6. The NIK in the Card Profil Ringkas is displayed in the masked format 3512**************.
7. The verification badge reads "TELAH DIVERIFIKASI" and the right-column top badge reads "RAYON IKSASS PROMAL".
8. Kirim Pendaftaran and Login are green; Perbahrui Data is orange.
9. The dashboard uses two columns on desktop and stacks on mobile.
10. The registration cannot be processed until the declaration "Dengan ini saya menyatakan bahwa data ini benar." is ticked.

Assumptions (narrow, labeled).

1. [Assumption] The backend that stores registrations, authenticates members, and serves and updates alumni data is available to the SPA; the source specifies the front-end stack but not the backend technology.
2. [Assumption] A member's credentials are established through the registration journey, so that the login step's username/email/No. WA and password can verify a returning alumnus.
3. [Assumption] The verification status shown by the TELAH DIVERIFIKASI badge is a stored property of the alumnus's record; the source states the badge but does not describe a verification workflow, and none is added here.
4. [Assumption] The Kecamatan and Desa dropdowns are populated with the administrative options belonging to the selected Kabupaten/Kota; the source names the fields but not their option lists.
5. [Assumption] The social media links in the Card Profil Ringkas point to the alumnus's own Instagram, Twitter, and Facebook profiles as stored in the record.

Explicit exclusions. No fourth page, module, or destination is in scope. No administration console, public alumni directory, reporting, or messaging capability is in scope. No blue or indigo colour is used anywhere in the interface.

12. Glossary

• SIDIK — Sistem Informasi Database IKSASS; the alumni database system this application implements.
• IKSASS — the alumni association whose members this registry serves.
• P2S3 — Pondok Pesantren P2S3, the pesantren whose alumni are registered here.
• Rayon PROMAL — the IKSASS rayon covering Pasuruan, Probolinggo, Malang, and Lumajang.
• Sub-Rayon — the regional subdivision within Rayon PROMAL that a registration is filed under: Pasuruan, Probolinggo, Malang, or Lumajang.
• Alumni — a former santri of P2S3 who belongs to the IKSASS community.
• Santri — a student of the pesantren.
• Mondok — to reside and study at the pesantren; Tahun Masuk Mondok and Tahun Keluar Mondok are the years the alumnus entered and left.
• NIK — Nomor Induk Kependudukan, the Indonesian national identity number.
• Pasfoto — a personal portrait photograph, uploaded during registration.
• Keterangan Rekom — the recommendation note held in the alumnus's detail record.
• Tanggungan Keluarga — the number of family dependents held in the alumnus's detail record.
• Card Profil Ringkas — the left-hand summary profile card on the verified alumni dashboard.
• Formulir Detail Data Alumni — the right-hand detail data panel on the verified alumni dashboard.
• Terverifikasi — verified; the status asserted by the green TELAH DIVERIFIKASI badge.
• SPA — Single Page Application; the delivery shape of this product.