Siera

Siera is the platform Veterantech built for PKKMB, the new student orientation program at Universitas Pembangunan Nasional “Veteran” Jakarta (UPNVJ). It carries the whole program: events and attendance, mentoring groups, assignments, announcements, violations, graduation, and fundraising. Four roles share one application, admin, mentor, mentee, and stakeholder, each with its own routes and permissions.

I joined the team as a frontend contributor. Work arrived as Linear issues, shipped as pull requests, and went through code review before merge.

What I built

• Admin attendance monitoring. A list of attendance-enabled sessions with present/total counts and completion. Opening one gives a summary header and attendance donut, a mentee tab with group rollups and the attendee list, a group drilldown route, and a staff tab with division rollups. Coordinators can correct a staff record to present, absent, or excused behind a confirm dialog.
• Fundraising merch orders and reports. Order management with searchable group filters, sort and filter drawers, status badges, a detail drawer with the item breakdown, preview-only payment proof, and confirm/cancel flows that capture a cancel reason. Reports add stat and revenue cards, an overview chart, a per-mentee table, and Excel export.
• Admin profile editing. Photo upload with cropping, and a save button that stays disabled until a field actually changes.
• Shared UI fixes. Drawers that left a stuck backdrop behind, alert dialog footers that broke on narrow viewports, and an error path that hid the reason a violation report failed.

Decisions in my modules

Attendance state lives in the URL, not in component state. Search text, status filters, ordering, and page number all round-trip through query params. A filtered group view is a link, so a coordinator can send it to someone else and they open the same rows.

The UI reads its display labels and status maps from the generated API client’s enums. Nothing retypes that vocabulary by hand, so when the backend adds an attendance status the label appears instead of a blank cell.

The drawer work started as a bug report and ended as a small hook. Two components closed a drawer by animating it out and then unmounting it, and each kept its own 500ms timer so the unmount still ran if the animation event never fired. Neither cleared that timer when the component went away. I moved the logic into useDrawerCloseSafety, which owns the timer and clears it on unmount. A separate fix keeps a closed backdrop inert while it is still mounted, covered by unit tests in drawer-overlay.test.ts.

Current status

Siera is live at siera.veterantech.id. The repository is private and the app is login-gated, so there is no public demo of the admin screens described here.