shadcn.io is not affiliated with official shadcn/ui
Receipt Scanner File Upload Block for Vue
A drawn till-roll slip of eight typed lines with a category select per line, category totals as a stacked bar and a list, and Save receipt adding it to a strip of four.
Installation
Overview
Turn a till receipt into categorised expenses, with this receipt filing panel for Vue with Ark UI. It is the categorising step of Slipbook, an expense-tracking app. At the start, a drawn till-roll slip in greys and a mono face, with eight typed lines and their prices. At the end, one row per line with a Native Select that files it under Meals, Travel, Supplies or Other, and under the rows the totals by category as one stacked bar and a list, worked out in whole cents from your choices. Save receipt, a Shine Button, adds the slip to a strip of four places that starts at "Saved (2)"; changing a category makes the slip savable again. A File Upload zone named Scan receipt lists a picked file by name only: nothing is scanned or read. The panel is ruled by Guides. For expense apps, bookkeeping and any list that needs sorting into buckets.
FAQ
Does it scan the receipt?
No. The slip is a typed sample and says so under the drawing; the Scan receipt zone only lists the name of a file you pick. Wire it by sending the file to your OCR service and filling the lines from its result, keeping the select, the totals and the strip.
How are the totals worked out?
Each line holds whole cents, so a category's total is the sum of its lines and the four add up to the slip's total with no rounding. The bar's segments are drawn on that total, so they always fill the bar, and the list under it gives the same figures in words.
What does Save receipt do?
It adds a chip to the strip with the slip's merchant and total, up to four, and says "Saved to the strip. Nothing synced." The strip keeps all four places even when empty, so the panel does not change height. Saving the same slip twice is refused until you change a category.
How do I use my own lines?
Edit ITEMS (an id, a name and the price in cents) and START_PICKS (the first category of each). The slip, the rows, the totals and the bar derive from them.