Panitia Report

Inspiration

A neighborhood treasurer looks after events such as Independence Day. She volunteers. There is no pay. Keeping the money clear is her contribution to the people who live around her: she collects donations, pays for food and printing, and has to show where the money went.

She has no computer skills and no computer. Her only tool is a phone. She writes the money in and the money out as one messy note, in whatever shape is fastest to type. Dots land in the wrong place. A quantity times a price is written by hand. Last year's leftover cash sits in the same list as the donors. She cannot use Word or Excel, and there is no printer at home. Today someone else turns that note into the report the neighborhood keeps. Panitia Report is the phone page that lets her finish the job herself.

What it does

She pastes the two notes as she already sent them, money in and money out. The page turns that messy text into transaction lines and keeps her original wording beside each reading. A clear line is ready. A doubtful line stays marked. A few lines from a note look like this:

75. Kas sisa 2024 : Rp. 500.000
102. Bpk H. Warga F : Rp.2000.0000
Konsumsi panitia 10x @Rp.11.000 = 100.000

One real pattern is an amount written Rp.2000.0000: read carelessly it becomes 20 million; read as 2 million it matches the total she wrote. An expense line that multiplies portions by a unit price is checked against the amount written at the end. Leftover cash becomes the opening balance, not a donation. A bank line is set aside until she says it is a transaction.

The page shows four numbers: opening balance, donations, expenses, and a closing balance that neither note contains. Download stays off while a line still needs her or a total does not match. She can correct any line. She is free to fix a mistake in how the page read the messy text. When the figures match, she downloads one PDF: money in grouped by neighborhood block (RT), a short expense list, and a summary with no donor names on that last part. She can send the file from her phone or take it to a print shop.

How we built it

I planned the proof of concept with the Devpost Learn skill pack before writing the page: who it is for, the behavior, and the technical plan, in scope.md, prd.md, and spec.md. I then built it with a coding agent in Cursor, in small slices I could try in the browser.

The proof of concept is one phone page: HTML, CSS, and JavaScript. No account and no server. The phone browser stores the report. A line reader turns the pasted text into rows. pdf-lib draws the PDF. The labels on the page are in English so the check is easy to follow. The pasted note stays in the words she typed.

Challenges we ran into

The messy text is the product, not something to clean up in private. Rp.2000.0000 has to stay on screen and ask her, instead of being silently rewritten as 20 million. A multiplied expense line can disagree with the amount written at the end, and she has to choose. Leftover cash belongs in the opening balance and still has to count toward the total she wrote. Hiding it made the download look blocked for the wrong reason.

A real income note is 100 to 200 lines, and expenses stay under 30. A long page of large buttons is not something she can check on a phone. The list had to stay compact, grouped by RT, with the detail opening only on the line she taps. The PDF had to look like the report a committee keeps, not a single page of four numbers. The download control had to stay next to those four numbers, because a button under 200 lines is a button she will not find.

Accomplishments that we're proud of

She can go from the note she already sent to a report the neighborhood can read, on the phone she already owns. Doubtful lines stay visible until she confirms them. The closing balance is calculated, never copied out of a note. The PDF groups donors by RT and keeps their names off the summary. Nothing is installed, and she never has to learn a spreadsheet.

What we learned

I have been writing software for years. This project was practice at planning a small product with a coding agent, then building only the slice that proves the idea. The plan mattered most when it named the one behavior that must not be faked: stop on the line a normal app would hide.

A report people trust is a check, not a file format. The treasurer does not need more software. She needs to see her original words, correct a bad reading, and leave with totals that match what she wrote.

What's next for Panitia Report

The next proof is her own phone, on the next neighborhood event, with the note she actually sent. A Word file is the first addition, so the print shop can adjust the layout slightly before printing. She still does not edit that file herself.

New note shapes will keep appearing, and line rules will not cover them all. The next step is one large language model (LLM). It only proposes a reading of each line. The page still checks the multiplication, the total she wrote, the leftover cash, and the closing balance. Every doubtful line stays marked until she confirms it, and the report stays on her phone.

Built With

• css
• cursor
• html5
• javascript
• pdf-lib