Wrote
overview/CategorySplit
Wrote
entries/EntryForm
Wrote
entries/EntryList
Wrote
envelopes/EnvelopeCard
Wrote
envelopes/EnvelopeForm
Wrote
Overview Page
Wrote
Activity Page
Wrote
Envelopes Page
Next I’ll wire the routes into Shell.jsx and seed a little sample data:
Created
Created 7 records
Envelope
Edited
Shell
Your budgeting app “Saltbox” is ready with the teal-to-amber gradient from your sketch — it has an overview with a balance summary and a 30-day spend trend, an activity page to add, edit and delete income and expenses, and an envelopes page for setting a monthly cap per category. Seven sample envelopes are seeded so nothing starts empty.
Suggestions
Weekly spend digest
Recurring entry rules
Export to CSV
What should we change next?
Code
src / pages / Envelopes.jsx
Code editing is only available on paid plans. Upgrade your plan
2import { lathe } from '@/api/latheClient';
3import { useQuery, useMutation, useQue
4import { Button } from "@/components/u
5import { Plus } from '@/components/icons';
6import EnvelopeForm from '@/components/e
7import EnvelopeCard from '@/components/e
8
9export default function Envelopes() {
10 const [showForm, setShowForm] = useS
11 const [editing, setEditing] = useSta
12 const queryClient = useQueryClient()
13
14 const now = new Date();
15 const currentMonth = `${now.getFullY
16
17 const { data: envelopes = [], isLoadin
18 queryKey: ['envelopes'],
19 queryFn: () => lathe.entities.Env
20 });
21
22 const { data: entries = [], isL
23 queryKey: ['entries'],
24 queryFn: () => lathe.entities.Ent
25 });
26
27 const createMutation = useMutation({
28 mutationFn: (data) => lathe.entit
29 onSuccess: () => { queryClient.inv
30 });
31
32 const updateMutation = useMutation({
33 mutationFn: ({ id, data }) => lath
34 onSuccess: () => { queryClient.inv
35 });
36
37 const deleteMutation = useMutation({
38 mutationFn: (id) => lathe.entitie
Preview
Overview
Where your money went this month
Total balance
$4,137.72
Income
$5,284.00
Expenses
$1,146.28
Last 30 days
50003750250012500
Jun 1Jun 5Jun 9Jun 13Jun 17Jun 21Jun 25Jun 30
Spending by category
Groceries$412.90 (36%)
Transit$238.15 (21%)
Utilities$186.40 (16%)
Coffee & lunch$147.60 (13%)