System Requirements Document for osispace

1. Introduction

OSISPACE is a modern, mobile-first digital hub for a junior high school (SMP) in Indonesia, built for two audiences: students and the student council (OSIS). Its product intent is to be the single place where the school community finds school information, celebrates student achievement, follows official OSIS updates, discovers upcoming school events, and sends student aspirations to OSIS.

The product is explicitly designed to feel like a real mobile app rather than a school website: a dark-mode, Gen Z aesthetic with black/dark-charcoal grounds, purple (#7C3AED), electric blue (#38BDF8), and white, rounded cards and buttons, a clean, minimal, youthful, slightly futuristic tone, and a smooth modern interface. The entire app is written in Indonesian.

OSISPACE is a digital hub for school information, student achievements, OSIS updates, school events, and student suggestions. It ships with sample/demo data so the app looks complete immediately, and it is responsive and optimized for smartphone screens.

2. System Overview

OSISPACE is delivered as a first-party application with custom UI. Students use five public destinations — Home, School MVP, Events, Updates, and Voice — reachable from a fixed five-tab bottom navigation. OSIS members use a small, role-restricted Admin area, reached after returning verification on Login.

Current accepted behavior:

• Home is the public entry surface: it greets students, features the current School MVP, surfaces the latest OSIS update and an upcoming event, and offers quick buttons to School MVP, Events, and Voice.
• School MVP is a monthly achievement recognition system with two categories — Individual MVP and Extracurricular MVP — driven by achievement points awarded by competition level and result, and showing the current month's MVP, nominees, points, achievement history, individual achievements, extracurricular achievements, and full MVP profiles.
• Events lists upcoming school events as cards with name, date, time, location, description, poster, and status.
• Updates publishes official OSIS updates such as School MVP announcements, program progress, completed programs, and upcoming activities — and never exposes private OSIS information, internal discussions, private student data, or financial details.
• Voice is the student suggestion/aspiration form covering ideas, facility suggestions, event suggestions, student activity suggestions, and other feedback, with anonymous submissions allowed and the identity of submitting students never publicly displayed.
• Admin lets OSIS add/edit School MVP data, add achievements, add events, add OSIS updates, review student suggestions, and update suggestion status.

Actors: the accepted active human personas are Student and OSIS Admin. No other human personas are in scope.

Narrow exclusions: OSISPACE does not publish private OSIS information, internal discussions, private student data, or financial details; it does not publicly display the identity of students who submit feedback; and it does not provide account management beyond the identity needed for OSIS administrative access.

2a. Product Interpretation and Delivery Boundary

OSISPACE is a first-party application with its own custom UI. The five student-facing destinations (Home, School MVP, Events, Updates, Voice) are publicly reachable without an account — students browse achievements, events, and updates, and submit aspirations, without signing in. This matches the source: students are never asked to create an account, and anonymous Voice submissions are explicitly allowed.

The one place where identity is indispensable is the Admin area. Admin manages shared, durable school content (MVP data, achievements, events, updates) and reviews private student suggestions, so administrative access must remain bound to the correct OSIS member. OSIS admin accounts are provisioned or invited before administrative access, and OSIS admins complete returning verification on Login before entering Admin. Login is an anonymous entry surface: it establishes access to Admin but does not itself require prior access. No self-service student accounts, profile management, or adjacent account features are in scope.

Everything described in this document is current. No future-horizon features were accepted by the source.

2b. Source Content Inventory

Not applicable — no reference directive in this project declares a content_source, so no external factual inventory is carried into the SRD. All displayed content is the sample/demo data required by the source.

2c. Page Content and Component Coverage

Home

• Information/state: greeting "Hi, Students\x20\xf0\x9f\x91\x8b"; "Welcome to OSISPACE"; featured School MVP card (current month's MVP); latest OSIS update; upcoming event; quick buttons for School MVP, Events, and Voice.
• Primary actions: open School MVP via quick button or featured card; open Events via quick button or upcoming-event card; open Voice via quick button; open Updates via the latest-update card or bottom navigation.
• Supporting actions: switch tabs via the fixed five-tab bottom navigation (Home, School MVP, Events, Updates, Voice).
• Domain entities: MVP (individual/extracurricular), OSIS update, event.
• Component responsibilities: hero greeting block; featured MVP glass card (avatar ring, crown badge, points gauge); latest-update card; upcoming-event card; quick-button row; bottom navigation bar with glowing active pill.
• States: loading (skeleton cards for MVP, update, event); empty (no featured MVP / no update / no upcoming event — show a neutral placeholder in Indonesian); success (all three cards populated from demo data); error (a card fails to load — show an inline retry on that card only, leaving the rest of Home usable); recovery (retry reloads the failed card).

School MVP

• Information/state: current month's MVP (Individual and Extracurricular); MVP nominees; achievement points; achievement history; individual achievements; extracurricular achievements; MVP profile fields — name, class, photo, achievement points, competition achievements, competition level, month of MVP.
• Primary actions: switch between Individual MVP and Extracurricular MVP categories; open an MVP profile; view achievement history.
• Supporting actions: read the point breakdown by competition level and result.
• Domain entities: MVP profile, achievement, competition level, competition result, achievement points, month.
• Component responsibilities: category toggle (Individual / Extracurricular); current-MVP feature card with circular glowing points gauge and tabular score; nominee list; achievement-history list; individual-achievement list; extracurricular-achievement list; MVP profile panel with name, class, photo (circular avatar with violet ring and blue tick, or initial-monogram tile when no photo), points, competition achievements, competition level, and month of MVP.
• States: loading (gauge and list skeletons); empty (no MVP or no nominees for the selected month — show an Indonesian placeholder); success (MVP, nominees, points, and history populated); error (failed load — inline retry preserving the selected category); recovery (retry restores the selected category's data).

Events

• Information/state: upcoming school events as cards, each with event name, date, time, location, description, event poster, and status.
• Primary actions: browse upcoming events; open an event card to read its full description.
• Supporting actions: read the status chip (Akan Datang / Berlangsung / Selesai).
• Domain entities: event (name, date, time, location, description, poster, status).
• Component responsibilities: event card grid/list; dark duotone poster image with luminous frame; status chip in the top-right corner; date/time/location metadata row; description text.
• States: loading (poster and card skeletons); empty (no upcoming events — Indonesian placeholder); success (event cards rendered with posters and statuses); error (poster or card fails — show a monogram/placeholder poster and keep the text readable, with inline retry); recovery (retry reloads the failed card).

Updates

• Information/state: official OSIS updates, including School MVP announcements, program progress, completed programs, and upcoming activities.
• Primary actions: browse the update feed; open an update to read it in full.
• Supporting actions: distinguish update types (announcement, program progress, completed program, upcoming activity).
• Domain entities: OSIS update (title, body, type, date).
• Component responsibilities: update feed list; update card with type label and date; detail view.
• States: loading (feed skeletons); empty (no updates — Indonesian placeholder); success (feed populated); error (feed fails — inline retry); recovery (retry reloads the feed). Private OSIS information, internal discussions, private student data, and financial details never appear in any state.

Voice

• Information/state: the student suggestion/aspiration form with the suggestion categories — ideas, facility suggestions, event suggestions, student activity suggestions, and other feedback; an anonymous-submission option.
• Primary actions: choose a suggestion category; write the suggestion; choose anonymous submission; submit the suggestion.
• Supporting actions: read the confirmation that the suggestion was received.
• Domain entities: suggestion (category, message, anonymous flag, status).
• Component responsibilities: category selector; message field; anonymous toggle; submit button; confirmation panel.
• States: loading (submitting — disabled submit with progress); empty (blank form with category unselected); success (confirmation that the aspiration was sent, without revealing identity); error (submission fails — keep the typed message and offer retry); recovery (retry resubmits the preserved message). The identity of students who submit feedback is never publicly displayed in any state.

Login

• Information/state: the returning-verification entry for OSIS admins; no protected Admin state is available before verification succeeds.
• Primary actions: enter OSIS admin credentials; submit verification.
• Supporting actions: read the invitation/provisioning notice explaining that OSIS admin accounts are provisioned or invited before access.
• Domain entities: OSIS admin identity, session.
• Component responsibilities: credential fields; submit control; provisioning/invitation notice; error messaging.
• States: loading (verifying — disabled submit); empty (blank credential fields); success (verification accepted, Admin becomes reachable); error (invalid credentials — Indonesian error message, fields preserved); recovery (correct credentials and resubmit).

Admin

• Information/state: OSIS content-management workspace covering School MVP data, achievements, events, OSIS updates, and student suggestions with their statuses.
• Primary actions: add/edit School MVP data; add achievements; add events; add OSIS updates; review student suggestions; update suggestion status.
• Supporting actions: navigate between the management sections; leave Admin.
• Domain entities: MVP record, achievement, event, OSIS update, suggestion, suggestion status.
• Component responsibilities: section navigation; MVP data form/list; achievement form/list; event form/list; update form/list; suggestion review list with status control.
• States: loading (section skeletons); empty (no records in a section — Indonesian placeholder with the add action); success (records saved and listed); error (save or load fails — inline error with retry, entered values preserved); recovery (retry completes the save or reload). Admin is role-restricted: it is reachable only after successful returning verification on Login.

3. Functional Requirements

FR-1 — Product hub and language As a Student, I should use OSISPACE as a digital hub for school information, student achievements, OSIS updates, school events, and student suggestions, presented entirely in Indonesian, so that everything about school life is in one place in my language.

• Provenance: explicit
• Lifecycle: trigger — opening OSISPACE; observable result — the hub surfaces school information, achievements, updates, events, and suggestions; continuation — navigate to any of the five destinations.
• Acceptance: all user-facing copy is in Indonesian; the five destinations Home, School MVP, Events, Updates, and Voice are reachable from the bottom navigation.

FR-2 — Bottom navigation As a Student, I should navigate between Home, School MVP, Events, Updates, and Voice using a fixed five-tab bottom navigation, so that I can move between the app's main areas with one thumb.

• Provenance: explicit
• Lifecycle: trigger — tapping a tab; observable result — the selected destination is shown and the active tab is indicated; continuation — the selected destination's content is usable.
• Acceptance: exactly five tabs exist in the order Home, School MVP, Events, Updates, Voice; the active tab is visually distinguished.

FR-3 — Home greeting and welcome As a Student, I should see "Hi, Students\x20\xf0\x9f\x91\x8b" and "Welcome to OSISPACE" on Home, so that the app greets me personally the moment I open it.

• Provenance: explicit
• Lifecycle: trigger — opening Home; observable result — the greeting and welcome text are displayed; continuation — the rest of Home is available below.
• Acceptance: both strings appear on Home exactly as specified.

FR-4 — Home featured School MVP card As a Student, I should see a featured School MVP card on Home, so that the current month's top achiever is the first thing I notice.

• Provenance: explicit
• Lifecycle: trigger — opening Home; observable result — the featured MVP card shows the current month's MVP; continuation — tapping the card opens School MVP.
• Acceptance: the featured card reflects the current month's MVP and links to School MVP.

FR-5 — Home latest OSIS update As a Student, I should see the latest OSIS update on Home, so that I stay current with official announcements without opening Updates.

• Provenance: explicit
• Lifecycle: trigger — opening Home; observable result — the most recent official OSIS update is shown; continuation — tapping it opens Updates.
• Acceptance: the latest update is displayed and links to Updates.

FR-6 — Home upcoming event As a Student, I should see an upcoming event on Home, so that I know what is happening next at school.

• Provenance: explicit
• Lifecycle: trigger — opening Home; observable result — the next upcoming event is shown; continuation — tapping it opens Events.
• Acceptance: the next upcoming event is displayed and links to Events.

FR-7 — Home quick buttons As a Student, I should use quick buttons on Home for School MVP, Events, and Voice, so that I can jump straight to the areas I use most.

• Provenance: explicit
• Lifecycle: trigger — tapping a quick button; observable result — the corresponding destination opens; continuation — the destination's content is usable.
• Acceptance: three quick buttons exist for School MVP, Events, and Voice.

FR-8 — Monthly School MVP recognition with two categories As a Student, I should see a monthly achievement recognition system with an Individual MVP category (students who collect the most achievement points) and an Extracurricular MVP category (extracurricular clubs/teams that contribute the most achievements to the school), so that both individual students and clubs get recognized.

• Provenance: explicit
• Lifecycle: trigger — opening School MVP; observable result — both categories are presented for the current month; continuation — switch between categories.
• Acceptance: Individual MVP and Extracurricular MVP are both available and clearly distinguished.

FR-9 — Achievement points by competition level and result As a Student, I should see achievement points awarded by competition level and result — International 1st place 100 points, National 1st place 80, Provincial 1st place 60, City/Regency 1st place 40, with lower placements receiving proportionally fewer points — so that I understand how the MVP is earned.

• Provenance: explicit
• Lifecycle: trigger — viewing an achievement or MVP profile; observable result — the points for that competition level and result are shown; continuation — the points contribute to the MVP standing.
• Acceptance: the four stated level/result values are honored exactly, and lower placements receive proportionally fewer points.

FR-10 — School MVP content set As a Student, I should see the current month's MVP, MVP nominees, achievement points, achievement history, individual achievements, and extracurricular achievements on School MVP, so that I can follow the full recognition picture.

• Provenance: explicit
• Lifecycle: trigger — opening School MVP; observable result — all six content sets are available; continuation — open a profile or history entry for detail.
• Acceptance: all six content sets are present and populated from demo data.

FR-11 — MVP profile fields As a Student, I should see each MVP profile showing name, class, photo, achievement points, competition achievements, competition level, and month of MVP, so that I know exactly who is being recognized and why.

• Provenance: explicit
• Lifecycle: trigger — opening an MVP profile; observable result — all seven fields are displayed; continuation — return to the MVP list.
• Acceptance: name, class, photo, achievement points, competition achievements, competition level, and month of MVP all appear on the profile.

FR-12 — Events cards with full event details As a Student, I should see upcoming school events in cards, each including event name, date, time, location, description, event poster, and status, so that I can decide whether to attend.

• Provenance: explicit
• Lifecycle: trigger — opening Events; observable result — upcoming events render as cards with all seven fields; continuation — open a card for the full description.
• Acceptance: every event card carries name, date, time, location, description, poster, and status.

FR-13 — Official OSIS updates As a Student, I should read official OSIS updates such as School MVP announcements, program progress, completed programs, and upcoming activities, so that I know what OSIS is doing and what is coming.

• Provenance: explicit
• Lifecycle: trigger — opening Updates; observable result — official updates are listed by type; continuation — open an update to read it in full.
• Acceptance: the four stated update types are supported and displayed.

FR-14 — Updates privacy constraint As a Student, I should never see private OSIS information, internal discussions, private student data, or financial details in Updates, so that the public feed stays safe and appropriate.

• Provenance: explicit
• Lifecycle: trigger — any Updates render; observable result — only public official updates appear; failure/recovery — if such content would be shown, it is withheld rather than displayed.
• Acceptance: no private OSIS information, internal discussions, private student data, or financial details appear anywhere in Updates.

FR-15 — Voice suggestion form with categories As a Student, I should submit ideas, facility suggestions, event suggestions, student activity suggestions, and other feedback through the Voice form, so that my aspirations reach OSIS.

• Provenance: explicit
• Lifecycle: trigger — opening Voice and choosing a category; observable result — the suggestion is submitted and confirmed; continuation — submit another suggestion or leave Voice.
• Acceptance: all five categories are selectable and submittable.

FR-16 — Anonymous submissions As a Student, I should be able to submit my suggestion anonymously, so that I can speak freely without attaching my name.

• Provenance: explicit
• Lifecycle: trigger — enabling anonymous submission before sending; observable result — the suggestion is recorded as anonymous; continuation — the confirmation does not reveal my identity.
• Acceptance: anonymous submission is allowed and the resulting record carries no publicly displayed student identity.

FR-17 — Voice identity protection As a Student, I should never have my identity publicly displayed when I submit feedback, so that submitting an aspiration is safe.

• Provenance: explicit
• Lifecycle: trigger — any Voice submission; observable result — no student identity is publicly shown; failure/recovery — identity is withheld rather than displayed.
• Acceptance: the identity of students who submit feedback is not publicly displayed.

FR-18 — OSIS admin content management As an OSIS Admin, I should add/edit School MVP data, add achievements, add events, add OSIS updates, review student suggestions, and update suggestion status in a simple admin area, so that I can keep OSISPACE current.

• Provenance: explicit
• Lifecycle: trigger — opening Admin after verification; observable result — the six management capabilities are available and changes are saved; continuation — return to any section to continue managing content.
• Acceptance: all six capabilities are present and functional.

FR-19 — Suggestion review and status update As an OSIS Admin, I should review student suggestions and update their status, so that students' aspirations are tracked and acted on.

• Provenance: explicit
• Lifecycle: trigger — opening the suggestion review list; observable result — suggestions are listed and a status can be changed and saved; continuation — the updated status persists for the next review.
• Acceptance: suggestions are reviewable and their status is updatable; reviewing a suggestion does not publicly display the submitting student's identity.

FR-20 — Sample/demo data As a Student, I should see the app populated with sample/demo data, so that OSISPACE looks complete immediately.

• Provenance: explicit
• Lifecycle: trigger — first open of any destination; observable result — MVP, achievements, events, updates, and suggestions are already populated; continuation — browse normally.
• Acceptance: no destination appears empty on first use because of missing demo data.

FR-21 — Responsive smartphone optimization As a Student, I should use OSISPACE comfortably on a smartphone screen, so that the app feels like a real mobile app.

• Provenance: explicit
• Lifecycle: trigger — opening OSISPACE on a phone; observable result — layout, cards, and controls fit and remain readable; continuation — all destinations remain usable.
• Acceptance: the app is responsive and optimized for smartphone screens.

FR-22 — OSIS admin provisioning and returning verification As an OSIS Admin, I should have my account provisioned or invited, and complete returning verification on Login before entering Admin, so that administrative access stays bound to the correct OSIS member.

• Provenance: required_inference
• Lifecycle: trigger — an OSIS member receives provisioning/invitation and later opens Login; observable result — successful verification makes Admin reachable; failure/recovery — invalid credentials show an Indonesian error and the fields are preserved for retry; continuation — proceed into Admin.
• Acceptance: Admin is unreachable before successful verification; Login itself is reachable without prior access.

4. User Personas

Student

Product context. A junior high school student in Indonesia who opens OSISPACE on a phone to keep up with school life. Students are the primary audience of the five public destinations and never need an account to use them.

Primary goal. Stay informed about school achievements and activities, and have their aspirations heard without their identity being publicly displayed.

Distinct accepted responsibilities.

• Browse the Home hub for the greeting, featured School MVP, latest OSIS update, upcoming event, and quick buttons.
• Follow the monthly School MVP in both categories — Individual MVP and Extracurricular MVP — including the current month's MVP, nominees, achievement points, achievement history, individual achievements, and extracurricular achievements.
• Read MVP profiles with name, class, photo, achievement points, competition achievements, competition level, and month of MVP.
• Check upcoming school events with name, date, time, location, description, poster, and status.
• Read official OSIS updates — School MVP announcements, program progress, completed programs, and upcoming activities.
• Submit ideas, facility suggestions, event suggestions, student activity suggestions, and other feedback through Voice, optionally anonymously.

Relevant inputs or decisions. Which category of MVP to view; which event or update to open; which suggestion category to choose; whether to submit anonymously; what to write in the suggestion.

Interactions with other accepted participants. Students are the audience for content that OSIS Admins publish (MVP data, achievements, events, updates) and the senders of suggestions that OSIS Admins review and whose status they update. Students never see the identity of other students who submitted feedback, and they never see private OSIS information, internal discussions, private student data, or financial details.

Observable success. The student finds the current MVP, the next event, and the latest official update without effort, and receives confirmation that a suggestion — anonymous or not — was sent, with no public exposure of identity.

OSIS Admin

Product context. A member of the student council (OSIS) responsible for keeping OSISPACE's shared content accurate and for handling student feedback. This is the only role that requires identity: OSIS admin accounts are provisioned or invited, and returning verification on Login is required before entering Admin.

Primary goal. Keep school information, recognition, and event listings current while handling student feedback, without exposing private OSIS information, internal discussions, private student data, or financial details.

Distinct accepted responsibilities.

• Add and edit School MVP data.
• Add achievements.
• Add events.
• Add OSIS updates.
• Review student suggestions.
• Update suggestion status.

Relevant inputs or decisions. Which MVP record, achievement, event, or update to create or edit; what content is appropriate for the public Updates feed; which suggestion to review and what status to assign.

Interactions with other accepted participants. OSIS Admins publish the content Students consume on Home, School MVP, Events, and Updates, and they are the only participants who see and act on submitted suggestions. Their work is bound to the correct OSIS member through provisioning/invitation and returning verification.

Observable success. Saved MVP data, achievements, events, and updates appear correctly in the student-facing destinations, and suggestion statuses reflect the council's handling — all without leaking private or financial information.

5. Core User Flows

Flow 1 — Student opens OSISPACE and orients on Home

1. The Student opens OSISPACE on a phone. Home loads with the greeting "Hi, Students\x20\xf0\x9f\x91\x8b" and "Welcome to OSISPACE".
2. The Student sees the featured School MVP card for the current month, the latest OSIS update, and an upcoming event, all populated from demo data.
3. The Student taps the featured MVP card (or the School MVP quick button) and lands on School MVP.
4. Next step: continue into Flow 2, or use the bottom navigation to reach Events, Updates, or Voice.

Flow 2 — Student follows the monthly School MVP

1. From Home or the bottom navigation, the Student opens School MVP.
2. The Student sees the current month's MVP and switches between the Individual MVP and Extracurricular MVP categories.
3. The Student reviews the MVP nominees, achievement points, achievement history, individual achievements, and extracurricular achievements.
4. The Student opens an MVP profile and reads the name, class, photo, achievement points, competition achievements, competition level, and month of MVP. Points reflect the stated scale — International 1st place 100, National 1st place 80, Provincial 1st place 60, City/Regency 1st place 40 — with lower placements receiving proportionally fewer points.
5. Observable result: the Student understands who is recognized this month and why.
6. Failure/recovery: if the MVP data fails to load, an inline retry appears and the previously selected category is preserved; retrying restores the data.
7. Next step: return to Home or move to Events or Updates.

Flow 3 — Student checks upcoming events

1. The Student opens Events from the bottom navigation, a Home quick button, or the Home upcoming-event card.
2. The Student browses upcoming school events as cards, each showing event name, date, time, location, description, event poster, and status.
3. The Student opens an event card to read the full description and checks the status chip (Akan Datang / Berlangsung / Selesai).
4. Observable result: the Student knows what is happening, when, where, and whether it is still upcoming.
5. Failure/recovery: if a poster fails to load, a placeholder keeps the card readable and an inline retry reloads it.
6. Next step: return to Home or open Updates.

Flow 4 — Student reads official OSIS updates

1. The Student opens Updates from the bottom navigation or the Home latest-update card.
2. The Student reads official OSIS updates — School MVP announcements, program progress, completed programs, and upcoming activities.
3. The Student opens an update to read it in full.
4. Observable result: the Student is current with official OSIS communication.
5. Constraint in effect: private OSIS information, internal discussions, private student data, and financial details never appear in the feed.
6. Failure/recovery: if the feed fails to load, an inline retry reloads it.
7. Next step: return to Home or move to Voice.

Flow 5 — Student submits a suggestion through Voice

1. The Student opens Voice from the bottom navigation or a Home quick button.
2. The Student chooses a suggestion category: ideas, facility suggestions, event suggestions, student activity suggestions, or other feedback.
3. The Student writes the suggestion and decides whether to submit anonymously.
4. The Student submits. Observable result: a confirmation appears that the aspiration was received, and the Student's identity is not publicly displayed.
5. Failure/recovery: if submission fails, the typed message is preserved and a retry is offered; retrying resubmits the preserved message.
6. Next step: submit another suggestion or leave Voice.

Flow 6 — OSIS Admin verifies and enters Admin

1. The OSIS member's account has been provisioned or invited beforehand.
2. The OSIS Admin opens Login — an anonymous entry surface reachable without prior access.
3. The OSIS Admin enters credentials and submits returning verification.
4. Observable result: verification succeeds and Admin becomes reachable. Before this point, no protected Admin state is available.
5. Failure/recovery: invalid credentials show an Indonesian error with the fields preserved; the Admin corrects them and resubmits.
6. Next step: proceed into Admin (Flow 7).

Flow 7 — OSIS Admin manages content

1. From Admin, the OSIS Admin chooses a management section.
2. The OSIS Admin adds or edits School MVP data, adds achievements, adds events, or adds OSIS updates.
3. The OSIS Admin saves. Observable result: the saved content appears in the corresponding student-facing destination (Home, School MVP, Events, or Updates).
4. Failure/recovery: if a save or load fails, an inline error appears with a retry and the entered values are preserved; retrying completes the save.
5. Next step: move to another section or leave Admin.

Flow 8 — OSIS Admin reviews suggestions and updates status

1. From Admin, the OSIS Admin opens the suggestion review list.
2. The OSIS Admin reads submitted suggestions — including anonymous ones — without any public display of the submitting student's identity.
3. The OSIS Admin assigns or changes a suggestion's status and saves.
4. Observable result: the updated status persists for the next review.
5. Failure/recovery: if the status update fails, an inline error appears with a retry; retrying saves the status.
6. Next step: continue reviewing further suggestions or leave Admin.

6. Visuals Colors and Theme

Muse and headline. Gleb Kuznetsov — a cinematic future-tech HUD for a school OSIS hub. Dark voids, glowing volumetric forms, HUD-like data, and motion as the hero, tuned for 13–15 year olds on phones.

Mode. Dark mode only, as mandated by the brief.

Colour tokens (exact hex by role).

Contrast: #F5F3FF on #0A0A0F ≈ 18:1; #38BDF8 on #0A0A0F ≈ 9:1; body copy #B7B5C9 stays above 7:1. Glow is used at low opacity behind the hero and MVP card only — never as a full-page gradient wash.

Typography.

• Headings: Space Grotesk, 600–700, tight tracking (-0.02em). Micro-labels: uppercase 11–12px with +0.18em letterspacing (e.g. MVP BULAN INI, STATUS, LEVEL).
• Body: Plus Jakarta Sans, 400/500/600 at 15–17px with 1.6 line-height. Numerals use Plus Jakarta Sans with tabular figures for points and dates.
• Scale (1.25 modular): 44/34/26/20/17/15/13 mobile → 64/48/34/24/17/15/13 desktop. Display headline: clamp(2.5rem, 8vw, 4rem).

Shape language. Rounded-rectangle cards at 20–24px radius (mobile bottom sheets 28px top corners); pill buttons and chips (999px); thin 1px luminous strokes; circular MVP avatars and gauge rings; small hexagon/diamond corner notches on featured cards. No hard 90° corners on interactive surfaces; no blobs; no soft-shadow-only cards — every card gets a hairline border plus an optional 1px accent top-edge.

Spacing rhythm. 4px base unit; 8/12/16/24/32/48 steps; 16px mobile gutters, 24px desktop gutters; 12–16px vertical rhythm between stacked cards.

Layout. Mobile-first single column with a fixed 5-tab bottom nav (Home, School MVP, Events, Updates, Voice) in a translucent charcoal bar with a glowing active pill. Desktop ≥1024px becomes a 12-column grid: left rail with the OSISPACE wordmark and section nav, content in a 7-column center, right 3-column HUD panel showing the achievement point leaderboard and next event countdown. Cards stack 1 column at 375px, 2 at 768px, 3 in the Events grid at 1280px. Every headline and control wraps or scales with clamp() so nothing is cropped at 375px.

Imagery style. Abstract dark 3D forms and HUD graphics rather than stock school photos: a low-poly glass torus/ring as the hero object, radial gauge rings for achievement points, thin topographic line fields, and event posters treated as dark duotone (violet→blue) images with a luminous frame. Student MVP photos are circular avatars with a violet ring and blue tick; if a photo is missing, a generated initial-monogram tile in violet on charcoal.

7. Signature Design Concept

The Home hero as a continuous HUD composition. Home opens as a full-bleed dark scene, not a centred SaaS stack. A large glassy 3D ring/torus rendered in violet-to-blue light floats off the right edge, partially cropped by the viewport, with a slow 20s rotation and a soft radial glow behind it. Over it, left-aligned and bottom-anchored, the greeting "Hi, Students\x20\xf0\x9f\x91\x8b" sits as a small uppercase micro-label with a live blue dot, then "Welcome to OSISPACE" as a clamp(2.5rem, 8vw, 4rem) Space Grotesk headline in two stacked lines that span the viewport width, and beneath it a single violet pill CTA "Lihat School MVP".

The featured School MVP card then overlaps the bottom edge of the hero as a glass panel with a 1px violet border, a violet crown badge, a blue tick on the avatar ring, and a diagonal luminous hairline cutting the card corner — so the hero and the MVP are one continuous composition rather than two stacked blocks. The signature moves carry through the rest of the app: HUD micro-labels preceding every section title, achievement points rendered as a circular glowing gauge ring with a tabular score readout, the translucent bottom bar with a single glowing violet pill sliding between the five tabs, and event cards with dark duotone posters and colour-coded status chips.

This concept only recomposes accepted content, states, and controls — the greeting, the welcome headline, the School MVP entry point, and the featured MVP card. It introduces no new behavior, page, or destination.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: cinematic Hero Dimensionality: webgl

Landing Hero Motion Brief (Home).

• Focal subject: the large glassy 3D ring/torus in violet-to-blue light, floating off the right edge and partially cropped by the viewport, with a soft radial glow behind it.
• Input → transformation → outcome thesis: as the Student opens Home, the ring's slow 20s rotation and the radial glow drift establish depth; the greeting micro-label, the two-line "Welcome to OSISPACE" headline, and the "Lihat School MVP" pill reveal in a one-time stagger; the featured School MVP card then settles over the hero's bottom edge with its points gauge sweeping once. The outcome is a single continuous hero-plus-MVP composition that reads as an instrument panel, not a web page.
• Motion vocabulary: slow 20s radial glow drift; one-time staggered reveal of hero headline lines and MVP stat counters; scroll-linked parallax between hero layers (0.15–0.3 factor); needle-sweep on the point gauge; 180ms luminous border pulse on tab change. No bounce, no particle storms.
• Composed first frame: dark #0A0A0F ground; the glassy ring cropped at the right edge with a faint violet glow; "Hi, Students\x20\xf0\x9f\x91\x8b" as an 11px uppercase micro-label with a live blue dot; "Welcome to OSISPACE" in two stacked Space Grotesk lines; the violet pill CTA; the featured MVP glass card overlapping the hero's bottom edge.
• Reduced-motion state: all loops freeze, the ring holds a static pose, the glow stops drifting, counters show their final values immediately, and the hero renders as a still composed frame with no parallax.

Landing Hero 3D Scene Brief — DIRECTION-DERIVED. One crafted real-time object: a low-poly glass torus rendered in violet-to-blue light, floating off the right edge of the Home hero and partially cropped by the viewport. It rotates slowly (20s period) with a soft radial glow behind it, showing the product's defining state — the School MVP recognition moment — as a luminous ring that visually rhymes with the achievement-point gauge rings used throughout School MVP. The scene is a single object with restrained lighting, no particle systems, and a static fallback pose under prefers-reduced-motion.

9. Non-Functional Requirements

NFR-1 — Mobile-first responsiveness. The app must be responsive and optimized for smartphone screens, with layouts, cards, and controls fitting and remaining readable at 375px, 768px, and 1280px. Provenance: explicit. Rationale: the source requires smartphone optimization and a real-mobile-app feel.

NFR-2 — Readable text and controls stay whole. Headlines, wordmarks, labels, numbers, card text, and controls must stay entirely inside the viewport and their container at every breakpoint, wrapping or scaling (for example font-size: clamp(...)) to fit, and no other element may cover any part of them. Imagery, decoration, and motion may be cropped, bled, rotated, or overlapped as the creative direction asks, provided they cover no readable text or control. Provenance: explicit (creative direction). Rationale: legibility is a hard constraint of the direction.

NFR-3 — Dark mode. The app is dark-mode only, on a near-black charcoal ground, per the brief. Provenance: explicit.

NFR-4 — Indonesian language. All user-facing copy is in Indonesian. Provenance: explicit.

NFR-5 — Privacy of Updates. Updates must never expose private OSIS information, internal discussions, private student data, or financial details. Provenance: explicit. Rationale: hard source constraint.

NFR-6 — Privacy of Voice submitters. The identity of students who submit feedback must not be publicly displayed, and anonymous submissions must be allowed. Provenance: explicit. Rationale: hard source constraint.

NFR-7 — Demo data completeness. Sample/demo data must populate MVP, achievements, events, updates, and suggestions so the app looks complete immediately. Provenance: explicit.

NFR-8 — Accessible contrast. Text and interactive elements must meet accessible contrast on the dark ground: #F5F3FF on #0A0A0F ≈ 18:1, #38BDF8 on #0A0A0F ≈ 9:1, body copy #B7B5C9 above 7:1. Provenance: explicit (creative direction). Rationale: the direction specifies these contrast ratios.

NFR-9 — Reduced motion. Under prefers-reduced-motion, all loops freeze, parallax stops, counters show final values, and moving or scrollable content stops and shows whole items (wrapping into rows or sitting in a horizontally scrollable row). Provenance: explicit (creative direction).

NFR-10 — Admin access control. Admin is role-restricted and reachable only after successful returning verification on Login; OSIS admin accounts are provisioned or invited beforehand. Provenance: required_inference. Rationale: administrative work changes shared durable content and handles private suggestions, so access must remain bound to the correct OSIS member.

10. Tech Stack

• Frontend: React (mobile-first web app with custom UI), styled to the dark HUD direction with Space Grotesk and Plus Jakarta Sans.
• 3D hero: WebGL / React Three Fiber for the Home hero ring, with a static fallback under prefers-reduced-motion.
• Backend: Python / FastAPI serving MVP data, achievements, events, updates, suggestions, and admin operations.
• Storage: a database appropriate to the content set (MVP records, achievements, events, updates, suggestions with statuses, and OSIS admin identities).
• Identity: application-owned identity for OSIS admins only — provisioned/invited accounts with returning verification on Login. Student-facing destinations require no account.
• Packaging: Docker / docker-compose for local and deployment use.

No other technology choices were specified by the source; the above are the minimum needed to deliver the accepted behavior.

11. Assumptions and Constraints

• Assumption (narrow): The five student-facing destinations are publicly reachable without an account, because the source never asks students to sign in and explicitly allows anonymous Voice submissions. Labeled as an access assumption derived from the source.
• Assumption (narrow): OSIS admin accounts are provisioned or invited rather than self-registered, because the source describes a simple admin area for OSIS without any self-service signup. Labeled required_inference.
• Assumption (narrow): "Lower placements receive proportionally fewer points" is implemented as a decreasing scale below each stated 1st-place value; the exact per-placement values beyond the four stated examples are not specified by the source and remain unspecified.
• Constraint: Updates must never expose private OSIS information, internal discussions, private student data, or financial details.
• Constraint: The identity of students who submit feedback must not be publicly displayed; anonymous submissions must be allowed.
• Constraint: All user-facing copy is in Indonesian.
• Constraint: The app is dark-mode only, using black/dark charcoal, purple (#7C3AED), electric blue (#38BDF8), and white.
• Constraint: The app must be responsive and optimized for smartphone screens.
• Constraint: Sample/demo data must make the app look complete immediately.
• Constraint: Admin is role-restricted and reachable only after successful returning verification on Login.
• Out of scope: private OSIS information, internal discussions, private student data, and financial details are never published; no self-service student accounts, profile management, or adjacent account features are included.

12. Glossary

• OSISPACE — the product: a mobile-first digital hub for a junior high school in Indonesia.
• OSIS — the student council (Organisasi Siswa Intra Sekolah) of the school.
• Student — a junior high school student who uses the five public destinations.
• OSIS Admin — a student council member who manages content and reviews suggestions in Admin.
• School MVP — the monthly achievement recognition system with Individual MVP and Extracurricular MVP categories.
• Individual MVP — the student who collects the most achievement points in a month.
• Extracurricular MVP — the extracurricular club/team that contributes the most achievements to the school in a month.
• Achievement points — points awarded by competition level and result (International 1st place 100, National 1st place 80, Provincial 1st place 60, City/Regency 1st place 40; lower placements proportionally fewer).
• Nominee — a student or club considered for the month's MVP.
• Achievement history — the record of achievements over time.
• Event — an upcoming school activity with name, date, time, location, description, poster, and status.
• Status (event) — the event's state: Akan Datang, Berlangsung, or Selesai.
• Update — an official OSIS publication such as a School MVP announcement, program progress, completed program, or upcoming activity.
• Voice — the student suggestion/aspiration form covering ideas, facility suggestions, event suggestions, student activity suggestions, and other feedback.
• Suggestion status — the state an OSIS Admin assigns to a reviewed suggestion.
• Anonymous submission — a Voice submission recorded without publicly displaying the submitting student's identity.
• Login — the anonymous entry surface where OSIS admins complete returning verification.
• Admin — the role-restricted OSIS content-management and suggestion-review area.