setSelectedId(null)} onSetup={() => setModal({ kind:'setup', bank:selected })} onAdd={(kind) => setModal({ kind:'transaction', bank:selected, transactionKind:kind })} onPhoto={setPhoto} toast={toast} modal={modal} setModal={setModal} photo={photo} setPhoto={setPhoto} />; } const total = fresh.banks.reduce((sum, bank) => sum + piggyBalance(bank), 0); return (

OUR SAVINGS

Little jars, lovely plans

Keep every shared goal in its own place and watch it grow together.

Total saved{baht(total)}

Your kitty banks

{fresh.banks.length} savings jars

{fresh.banks.map((bank, index) => { const balance = piggyBalance(bank); const last = bank.transactions[0]; const themeColor = bankThemeColor(bank); return ( ); })}

{modal?.kind === 'new-bank' && setModal(null)} toast={toast} />}

); } function PiggyBankDetail({ bank, onBack, onSetup, onAdd, onPhoto, toast, modal, setModal, photo, setPhoto }) { const balance = piggyBalance(bank); const themeColor = bankThemeColor(bank); const moneyIn = bank.transactions.filter(tx => tx.kind === 'income').reduce((s,tx) => s + Number(tx.amount || 0), 0); const moneyOut = bank.transactions.filter(tx => tx.kind === 'expense').reduce((s,tx) => s + Number(tx.amount || 0), 0); return (

SAVINGS JAR

{bank.name}

Current balance{baht(balance)}

Money in+{baht(moneyIn)}

Money out−{baht(moneyOut)}

Transactions{bank.transactions.length}

Activity log

{bank.transactions.length === 0 ? (

No activity yet

Add money to start growing this kitty bank.

) : (

{bank.transactions.map(tx => (

{tx.kind === 'income' ? '+' : '−'}

{tx.kind === 'income' ? `From ${tx.person || 'Unknown'}` : `Spent by ${tx.person || 'Unknown'}`}

{relDate(tx.date)}{tx.note ? ` · ${tx.note}` : ''}

{tx.photo && }

{tx.kind === 'income' ? '+' : '−'}{baht(tx.amount)}

))}

)} {modal?.kind === 'setup' && setModal(null)} toast={toast} />} {modal?.kind === 'transaction' && setModal(null)} toast={toast} />} {photo && setPhoto(null)} />}

); } function OpeningBalanceModal({ bank, onClose, toast }) { const [amount, setAmount] = usePiggyState(bank.openingBalance == null ? '' : bank.openingBalance); function save() { if (amount === '' || Number(amount) < 0) return toast('Enter the opening amount'); Store.updatePiggyBank(bank.id, { openingBalance:Number(amount) }); toast('Opening amount saved ✨'); onClose(); } return ( }>

How much is already inside “{bank.name}” right now?

Starting balance (THB)

฿setAmount(e.target.value)} placeholder="0" />

); } function NewPiggyBankModal({ onClose, toast }) { const [name, setName] = usePiggyState(''); const [amount, setAmount] = usePiggyState(''); const [color, setColor] = usePiggyState(PIGGY_COLORS[0]); function save() { if (!name.trim()) return toast('Name your kitty bank'); Store.addPiggyBank({ name:name.trim(), openingBalance:amount === '' ? null : Number(amount), color }); toast('New kitty bank added ✨'); onClose(); } return ( }>

NamesetName(e.target.value)} placeholder="e.g. New laptop" />

Opening amount (optional)

฿setAmount(e.target.value)} placeholder="0" />

Color

{PIGGY_COLORS.map(c=>

); } function PiggyTransactionModal({ bank, kind, onClose, toast }) { const [amount, setAmount] = usePiggyState(''); const [person, setPerson] = usePiggyState(''); const [note, setNote] = usePiggyState(''); const [date, setDate] = usePiggyState(new Date().toISOString().slice(0,10)); const [photo, setPhoto] = usePiggyState(''); const [photoBusy, setPhotoBusy] = usePiggyState(false); const income = kind === 'income'; async function choosePhoto(e) { const file = e.target.files && e.target.files[0]; if (!file) return; setPhotoBusy(true); try { setPhoto(await compressPiggyPhoto(file)); } catch (err) { toast(err.message || 'Could not add that photo'); } setPhotoBusy(false); } function save() { if (!amount || Number(amount) <= 0) return toast('Enter an amount'); if (!date) return toast('Choose a date'); if (photo && Store.exportJSON().length + photo.length > 420000) { return toast('Photo storage is nearly full. Save this entry without the photo.'); } Store.addPiggyTransaction(bank.id, { kind, amount:Number(amount), person:person.trim(), note:note.trim(), date, photo }); toast(income ? 'Money added ✨' : 'Spending recorded'); onClose(); } return ( {income?'+':'−'}}>

Amount (THB)

฿setAmount(e.target.value)} placeholder="0" />

{income ? 'Received from' : 'Spent by'}setPerson(e.target.value)} placeholder="View, Mimi, someone else…" />

DatesetDate(e.target.value)} />

Note (optional)

setNote(e.target.value)} placeholder={income ? 'What is this money for?' : 'What did you spend it on?'} /></div>
      <div className="field"><label>Photo (optional)</label>
        {photo ? <div className="piggy-photo-preview"><img src={photo} alt="Attachment preview"/><button onClick={()=>setPhoto('')}>Remove</button></div> :
          <label className="piggy-photo-picker">{photoBusy ? 'Preparing photo…' : '＋ Add a receipt or photo'}<input type="file" accept="image/*" onChange={choosePhoto} disabled={photoBusy}/></label>}
        <p className="faint piggy-photo-help">Photos are compressed before syncing to keep the shared ledger light.</p>
      </div>
      <button className={`btn piggy-full ${income?'piggy-save-in':'piggy-save-out'}`} onClick={save}>{income ? 'Add money' : 'Record spending'}</button>
    </Modal>
  );
}

function PhotoViewer({ photo, onClose }) {
  return <div className="piggy-photo-viewer" onClick={onClose}><button aria-label="Close photo">×</button><img src={photo} alt="Attached receipt" onClick={e=>e.stopPropagation()} /></div>;
}

Object.assign(window, { PiggyBankPage, KittyProjectIcon });