Formworks — Harborline Savings

Wroteoverview/Category Split

Wroteledger/Entry Form

Wroteledger/Entry List

Wroteplans/Plan Card

Wroteplans/Plan Form

WroteOverview Page

WroteLedger Page

WrotePlans Page

Next I'll wire App.jsx up with routes and seed a little starter data:

Created

Created 7 recordsPlan

EditedApp

Your savings app “Harborline” is live with the slate-and-sea palette you sketched — an overview page with a balance summary and spend-by-category chart, a ledger page for adding and editing income and expenses, and a plans page for capping each category monthly.

9 days ago

Suggestions

What should we change next?

        Code
        
            Code files
            
src / pages / Plans.jsx

            Editing source is available on paid workspaces.
            Compare plans
          
              import Vane, { useState } from 'vane';
              import { formworks } from '@/api/formworksClient';
              import { useQuery, useMutation, useQueryClient } from '@/lib/fetchpool';
              import { Button } from "@/components/ui/button";
              import { Plus } from '@/icons/glyphset';
              import PlanForm from '@/components/plans/PlanForm';
              import PlanCard from '@/components/plans/PlanCard';
               
              export default function Plans() {
                const [showForm, setShowForm] = useState(false);
                const [editing, setEditing] = useState(null);
                const queryClient = useQueryClient();
               
                const now = new Date();
                const cycle = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
               
                const { data: plans = [], isLoading: loadingPlans } = useQuery({
                  queryKey: ['plans'],
                  queryFn: () => formworks.entities.Plan.list('-created_date', 100),
                });
               
                const { data: entries = [], isLoading: loadingEntries } = useQuery({
                  queryKey: ['entries'],
                  queryFn: () => formworks.entities.Entry.list('-date', 500),
                });
               
                const createPlan = useMutation({
                  mutationFn: (data) => formworks.entities.Plan.create(data),
                  onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['plans'] }); setShow
                });
               
                const updatePlan = useMutation({
                  mutationFn: ({ id, data }) => formworks.entities.Plan.update(id, data),
                  onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['plans'] }); setEdit
                });
               
                const removePlan = useMutation({
                  mutationFn: (id) => formworks.entities.Plan.remove(id),
                  onSuccess: () => queryClient.invalidateQueries({ queryKey: ['plans'] }),