\n \n \n \n\n",[],[257,259],"cc27e53c-3333-11f0-8536-9e149126039e","TransactionList.tsx","cc27e5f0-3333-11f0-8536-9e149126039e","602c15ba-76a9-4b69-9abd-cf0195891bfe",13,["D",1747495800996],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Transaction, Envelope } from \"../../shared/types.ts\";\n\ninterface TransactionListProps {\n transactions: Transaction[];\n envelopes: Envelope[];\n onAssign: (transactionId: string, envelopeId: string) => void;\n}\n\nconst TransactionList: React.FC = ({ \n transactions, \n envelopes,\n onAssign\n}) => {\n const [selectedTransaction, setSelectedTransaction] = useState(null);\n \n if (transactions.length === 0) {\n return (\n

📊

No transactions yet

\n Import your bank statement to see transactions\n

\n );\n }\n \n // Group transactions by date\n const groupedTransactions: Record = {};\n \n transactions.forEach(transaction => {\n const date = new Date(transaction.date).toLocaleDateString();\n if (!groupedTransactions[date]) {\n groupedTransactions[date] = [];\n }\n groupedTransactions[date].push(transaction);\n });\n \n // Sort dates in descending order\n const sortedDates = Object.keys(groupedTransactions).sort((a, b) => {\n return new Date(b).getTime() - new Date(a).getTime();\n });\n \n const handleAssign = (transactionId: string, envelopeId: string) => {\n onAssign(transactionId, envelopeId);\n setSelectedTransaction(null);\n };\n \n return (\n

\n {sortedDates.map(date => (\n

{date}

\n {groupedTransactions[date].map(transaction => (\n

{transaction.description}

\n {transaction.processed ? (\n \n Assigned to {envelopes.find(e => e.id === transaction.category)?.name}\n \n ) : (\n Unassigned\n )}\n

= 0 ? 'text-green-600' : 'text-red-600'}`}>\n {transaction.amount >= 0 ? '+' : ''}{transaction.amount.toFixed(2)}\n

\n \n {/* Envelope selection */}\n {selectedTransaction === transaction.id && !transaction.processed && (\n

Assign to envelope:

\n {envelopes.map(envelope => (\n handleAssign(transaction.id, envelope.id)}\n >\n {envelope.icon}\n {envelope.name}\n \n ))}\n

\n )}\n \n {/* Action buttons */}\n {!transaction.processed && (\n

\n setSelectedTransaction(\n selectedTransaction === transaction.id ? null : transaction.id\n )}\n >\n {selectedTransaction === transaction.id ? 'Cancel' : 'Assign to Envelope'}\n \n

\n )}\n

\n ))}\n

\n );\n};\n\nexport default TransactionList;",[],[257,275,267],"components","9fce5a0c-3333-11f0-9a57-9e149126039e","Onboarding.tsx","9fce5c0a-3333-11f0-9a57-9e149126039e",10,["D",1747495726590],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface OnboardingProps {\n onCreateUser: (name: string) => void;\n}\n\nconst Onboarding: React.FC = ({ onCreateUser }) => {\n const [name, setName] = useState(\"\");\n const [step, setStep] = useState(0);\n \n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (name.trim()) {\n onCreateUser(name);\n }\n };\n \n const steps = [\n // Step 1: Welcome\n

Welcome to CashStash! 💰

The fun way to manage your money with digital cash stuffing

\n {[\"💸\", \"🏦\", \"💰\", \"💵\", \"🤑\", \"💎\"].map((emoji, i) => (\n

\n {emoji}\n

\n ))}\n

\n \n

,\n \n // Step 2: What is cash stuffing\n

What is Cash Stuffing? 📝

\n Cash stuffing is a budgeting method where you divide your money into different categories or \"envelopes.\"\n

\n 🏠\n

Rent

\n 🍔\n

Food

\n 🎮\n

Fun

\n With CashStash, you'll create digital envelopes and drag money into them to stay on budget!\n

\n \n

,\n \n // Step 3: Create account\n

Create Your Account

\n ];\n \n return (\n

\n {steps[step]}\n

\n );\n};\n\nexport default Onboarding;",[],[257,275,277],"c0928254-3333-11f0-9cce-9e149126039e","EnvelopeList.tsx","c0928312-3333-11f0-9cce-9e149126039e",12,["D",1747495781562],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { Envelope } from \"../../shared/types.ts\";\n\ninterface EnvelopeListProps {\n envelopes: Envelope[];\n onDrop: (envelopeId: string) => void;\n isDragging: boolean;\n}\n\nconst EnvelopeList: React.FC = ({ envelopes, onDrop, isDragging }) => {\n if (envelopes.length === 0) {\n return (\n

📝

No envelopes yet

\n Create your first envelope to start budgeting\n

\n );\n }\n \n return (\n

\n {envelopes.map(envelope => (\n {\n e.preventDefault();\n e.currentTarget.classList.add('border-green-500');\n }}\n onDragLeave={(e) => {\n e.currentTarget.classList.remove('border-green-500');\n }}\n onDrop={(e) => {\n e.preventDefault();\n e.currentTarget.classList.remove('border-green-500');\n onDrop(envelope.id);\n }}\n >\n

\n {envelope.icon}\n

{envelope.name}

\n \n

\n Current\n Budget\n

\n ${envelope.current.toFixed(2)}\n ${envelope.budget.toFixed(2)}\n

\n \n {/* Progress bar */}\n {envelope.budget > 0 && (\n

\n {Math.round((envelope.current / envelope.budget) * 100)}%\n

\n )}\n

\n ))}\n \n );\n};\n\nexport default EnvelopeList;",[],[257,275,285],"b734607e-3333-11f0-a7de-9e149126039e","Dashboard.tsx","b7346146-3333-11f0-a7de-9e149126039e",11,["D",1747495765845],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef } from \"https://esm.sh/react@18.2.0\";\nimport type { User, Envelope, Transaction } from \"../../shared/types.ts\";\nimport EnvelopeList from \"./EnvelopeList.tsx\";\nimport TransactionList from \"./TransactionList.tsx\";\nimport CreateEnvelopeModal from \"./CreateEnvelopeModal.tsx\";\nimport AchievementsList from \"./AchievementsList.tsx\";\n\ninterface DashboardProps {\n user: User;\n onCreateEnvelope: (name: string, icon: string, color: string, budget: number) => void;\n onAllocateMoney: (envelopeId: string, amount: number) => void;\n onImportCSV: () => void;\n onAssignTransaction: (transactionId: string, envelopeId: string) => void;\n}\n\nconst Dashboard: React.FC = ({ \n user, \n onCreateEnvelope, \n onAllocateMoney,\n onImportCSV,\n onAssignTransaction\n}) => {\n const [showCreateModal, setShowCreateModal] = useState(false);\n const [activeTab, setActiveTab] = useState<'envelopes' | 'transactions' | 'achievements'>('envelopes');\n const [dragAmount, setDragAmount] = useState(null);\n const dragGhostRef = useRef(null);\n \n // Create confetti effect\n const createConfetti = () => {\n const container = document.body;\n const confettiCount = 50;\n const colors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722'];\n \n for (let i = 0; i < confettiCount; i++) {\n const confetti = document.createElement('div');\n confetti.className = 'confetti';\n confetti.style.left = `${Math.random() * 100}%`;\n confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];\n confetti.style.width = `${Math.random() * 10 + 5}px`;\n confetti.style.height = `${Math.random() * 10 + 5}px`;\n confetti.style.animationDuration = `${Math.random() * 3 + 2}s`;\n container.appendChild(confetti);\n \n // Remove confetti after animation\n setTimeout(() => {\n confetti.remove();\n }, 5000);\n }\n };\n \n // Handle money drag start\n const handleDragStart = (amount: number) => {\n setDragAmount(amount);\n \n // Create drag ghost element\n if (!dragGhostRef.current) {\n const ghost = document.createElement('div');\n ghost.className = 'drag-ghost';\n ghost.innerHTML = `

$${amount}

`;\n document.body.appendChild(ghost);\n dragGhostRef.current = ghost;\n } else {\n dragGhostRef.current.innerHTML = `

$${amount}

`;\n }\n \n // Update ghost position on mouse move\n const handleMouseMove = (e: MouseEvent) => {\n if (dragGhostRef.current) {\n dragGhostRef.current.style.left = `${e.clientX}px`;\n dragGhostRef.current.style.top = `${e.clientY}px`;\n }\n };\n \n document.addEventListener('mousemove', handleMouseMove);\n \n // Clean up on drag end\n const handleDragEnd = () => {\n document.removeEventListener('mousemove', handleMouseMove);\n document.removeEventListener('mouseup', handleDragEnd);\n \n if (dragGhostRef.current) {\n dragGhostRef.current.remove();\n dragGhostRef.current = null;\n }\n \n setDragAmount(null);\n };\n \n document.addEventListener('mouseup', handleDragEnd);\n };\n \n // Handle dropping money into an envelope\n const handleMoneyDrop = (envelopeId: string) => {\n if (dragAmount && dragAmount > 0) {\n onAllocateMoney(envelopeId, dragAmount);\n createConfetti();\n }\n };\n \n return (\n

\n {/* Header */}\n

CashStash

\n \n BETA\n \n

\n Hello, {user.name}\n

\n \n

\n \n {/* Main Content */}\n

\n {/* Balance Card */}\n

Total Balance

${user.totalBalance.toFixed(2)}

Allocated

\n ${(user.totalBalance - user.unallocated).toFixed(2)}\n

Unallocated

${user.unallocated.toFixed(2)}

\n \n {/* Money to Drag */}\n {activeTab === 'envelopes' && user.unallocated > 0 && (\n

Drag Money to Envelopes

\n {[5, 10, 20, 50, 100].map(amount => (\n user.unallocated >= amount && (\n handleDragStart(amount)}\n onMouseDown={() => handleDragStart(amount)}\n >\n ${amount}\n

\n )\n ))}\n {user.unallocated > 0 && (\n handleDragStart(user.unallocated)}\n onMouseDown={() => handleDragStart(user.unallocated)}\n >\n ${user.unallocated.toFixed(2)}\n

\n )}\n

\n \n )}\n \n {/* Tabs */}\n

\n setActiveTab('envelopes')}\n >\n Envelopes\n \n setActiveTab('transactions')}\n >\n Transactions\n \n setActiveTab('achievements')}\n >\n Achievements\n \n

\n \n

\n {activeTab === 'envelopes' && (\n <>\n

Your Envelopes

\n setShowCreateModal(true)}\n className=\"bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-600 transition-colors\"\n >\n Create Envelope\n \n

\n \n \n )}\n \n {activeTab === 'transactions' && (\n <>\n

Recent Transactions

\n \n \n )}\n \n {activeTab === 'achievements' && (\n <>\n

Your Achievements

\n \n \n )}\n

\n \n \n {/* Create Envelope Modal */}\n {showCreateModal && (\n setShowCreateModal(false)}\n onCreate={onCreateEnvelope}\n />\n )}\n \n );\n};\n\nexport default Dashboard;",[],[257,275,293],"dbf2ca54-3333-11f0-8218-9e149126039e","CreateEnvelopeModal.tsx","dbf2cb08-3333-11f0-8218-9e149126039e",14,["D",1747495827471],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface CreateEnvelopeModalProps {\n onClose: () => void;\n onCreate: (name: string, icon: string, color: string, budget: number) => void;\n}\n\nconst CreateEnvelopeModal: React.FC = ({ onClose, onCreate }) => {\n const [name, setName] = useState(\"\");\n const [icon, setIcon] = useState(\"💰\");\n const [color, setColor] = useState(\"#3B82F6\"); // Default blue\n const [budget, setBudget] = useState(\"\");\n \n const icons = [\"💰\", \"🏠\", \"🍔\", \"🚗\", \"💊\", \"👕\", \"✈️\", \"🎮\", \"📚\", \"🎬\", \"🎵\", \"🎁\", \"💄\", \"🐶\", \"🏋️\", \"💻\"];\n \n const colors = [\n \"#3B82F6\", // blue\n \"#EF4444\", // red\n \"#10B981\", // green\n \"#F59E0B\", // amber\n \"#8B5CF6\", // purple\n \"#EC4899\", // pink\n \"#6366F1\", // indigo\n \"#14B8A6\", // teal\n \"#F97316\", // orange\n \"#06B6D4\", // cyan\n ];\n \n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (name.trim()) {\n onCreate(name, icon, color, budget ? parseFloat(budget) : 0);\n onClose();\n }\n };\n \n return (\n

Create Envelope

\n \n

\n {/* Name */}\n

\n \n Envelope Name\n \n setName(e.target.value)}\n className=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"e.g., Rent, Groceries, Fun\"\n required\n />\n

\n \n {/* Icon */}\n

\n \n Choose an Icon\n \n

\n {icons.map((emoji) => (\n setIcon(emoji)}\n >\n {emoji}\n \n ))}\n

\n \n {/* Color */}\n

\n \n Choose a Color\n \n

\n {colors.map((clr) => (\n setColor(clr)}\n >\n ))}\n

\n \n {/* Budget */}\n

\n \n Monthly Budget (optional)\n \n

\n $\n

\n setBudget(e.target.value)}\n className=\"w-full pl-8 px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"0.00\"\n min=\"0\"\n step=\"0.01\"\n />\n

\n \n {/* Preview */}\n

\n \n Preview\n \n

\n {icon}\n

{name || \"Envelope Name\"}

\n $0.00\n ${budget ? parseFloat(budget).toFixed(2) : \"0.00\"}\n

\n \n {/* Submit */}\n

\n \n Cancel\n \n \n Create Envelope\n \n

\n );\n};\n\nexport default CreateEnvelopeModal;",[],[257,275,301],"f662757e-3333-11f0-9bd3-9e149126039e","CSVImport.tsx","f662763c-3333-11f0-9bd3-9e149126039e",15,["D",1747495871835],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { CSVMapping } from \"../../shared/types.ts\";\n\ninterface CSVImportProps {\n onImport: (csvContent: string, mapping: CSVMapping) => void;\n onCancel: () => void;\n}\n\nconst CSVImport: React.FC = ({ onImport, onCancel }) => {\n const [csvContent, setCsvContent] = useState(\"\");\n const [headers, setHeaders] = useState([]);\n const [mapping, setMapping] = useState({\n date: \"\",\n description: \"\",\n amount: \"\",\n type: \"\"\n });\n const [step, setStep] = useState(1);\n const [error, setError] = useState(\"\");\n \n // Handle file upload\n const handleFileUpload = (e: React.ChangeEvent) => {\n const file = e.target.files?.[0];\n if (!file) return;\n \n const reader = new FileReader();\n reader.onload = (event) => {\n const content = event.target?.result as string;\n setCsvContent(content);\n \n // Extract headers\n const lines = content.split(/\\r?\\n/);\n if (lines.length > 0) {\n const headerLine = lines[0];\n const extractedHeaders = parseCSVRow(headerLine);\n setHeaders(extractedHeaders);\n }\n \n setStep(2);\n };\n reader.readAsText(file);\n };\n \n // Parse CSV row\n const parseCSVRow = (row: string): string[] => {\n const result: string[] = [];\n let current = \"\";\n let inQuotes = false;\n \n for (let i = 0; i < row.length; i++) {\n const char = row[i];\n \n if (char === '\"') {\n inQuotes = !inQuotes;\n } else if (char === ',' && !inQuotes) {\n result.push(current);\n current = \"\";\n } else {\n current += char;\n }\n }\n \n result.push(current);\n return result;\n };\n \n // Handle mapping change\n const handleMappingChange = (field: keyof CSVMapping, value: string) => {\n setMapping(prev => ({ ...prev, [field]: value }));\n };\n \n // Handle import\n const handleImport = () => {\n // Validate required fields\n if (!mapping.date || !mapping.description || !mapping.amount) {\n setError(\"Date, Description, and Amount fields are required\");\n return;\n }\n \n onImport(csvContent, mapping);\n };\n \n // Preview CSV data\n const renderPreview = () => {\n const lines = csvContent.split(/\\r?\\n/).slice(0, 6); // Show first 5 rows + header\n \n return (\n

\n \n \n \n {headers.map((header, index) => (\n \n {header}\n \n ))}\n \n \n \n {lines.slice(1).map((line, rowIndex) => (\n \n {parseCSVRow(line).map((cell, cellIndex) => (\n \n {cell}\n \n ))}\n \n ))}\n \n

\n );\n };\n \n return (\n

Import Bank Statement

\n \n

\n \n {/* Step indicator */}\n

= 1 ? 'text-blue-600' : 'text-gray-400'}`}>\n

= 1 ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-400'\n }`}>\n 1\n

Upload CSV

= 2 ? 'text-blue-600' : 'text-gray-400'}`}>\n

= 2 ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-400'\n }`}>\n 2\n

Map Columns

= 3 ? 'text-blue-600' : 'text-gray-400'}`}>\n

= 3 ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-400'\n }`}>\n 3\n

Import

\n \n {error && (\n

\n {error}\n

\n )}\n \n {step === 1 && (\n

📊

Upload your bank statement CSV

\n We'll help you map the columns to import your transactions\n

\n \n Select CSV File\n \n \n

\n )}\n \n {step === 2 && (\n

Map Your CSV Columns

\n Tell us which columns contain your transaction data\n

\n \n

\n \n Date Column *\n \n handleMappingChange(\"date\", e.target.value)}\n className=\"w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n required\n >\n \n {headers.map((header, index) => (\n \n ))}\n \n

\n \n

\n \n Description Column *\n \n handleMappingChange(\"description\", e.target.value)}\n className=\"w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n required\n >\n \n {headers.map((header, index) => (\n \n ))}\n \n

\n \n

\n \n Amount Column *\n \n handleMappingChange(\"amount\", e.target.value)}\n className=\"w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n required\n >\n \n {headers.map((header, index) => (\n \n ))}\n \n

\n \n

\n \n Transaction Type Column (optional)\n \n handleMappingChange(\"type\", e.target.value)}\n className=\"w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n {headers.map((header, index) => (\n \n ))}\n \n

\n Use this if your CSV has a column indicating debit/credit\n

\n \n

Preview

\n {renderPreview()}\n

\n \n

\n setStep(1)}\n className=\"px-4 py-2 text-gray-700 font-medium\"\n >\n Back\n \n {\n if (!mapping.date || !mapping.description || !mapping.amount) {\n setError(\"Date, Description, and Amount fields are required\");\n return;\n }\n setError(\"\");\n setStep(3);\n }}\n className=\"px-6 py-2 bg-blue-500 text-white rounded-lg font-medium hover:bg-blue-600 transition-colors\"\n >\n Continue\n \n

\n )}\n \n {step === 3 && (\n

🎉

Ready to Import

\n We'll import your transactions using the following mapping:\n

\n \n

Date: {mapping.date}

Description: {mapping.description}

Amount: {mapping.amount}

\n {mapping.type &&

Type: {mapping.type}

}\n

\n \n

\n setStep(2)}\n className=\"px-4 py-2 text-gray-700 font-medium mr-4\"\n >\n Back\n \n \n Import Transactions\n \n

\n )}\n

\n );\n};\n\nexport default CSVImport;",[],[257,275,309],"93349f86-3333-11f0-a2ac-9e149126039e","App.tsx","9334a01c-3333-11f0-a2ac-9e149126039e",9,["D",1747495705444],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { User, Envelope, Transaction, Achievement } from \"../../shared/types.ts\";\nimport Onboarding from \"./Onboarding.tsx\";\nimport Dashboard from \"./Dashboard.tsx\";\nimport CSVImport from \"./CSVImport.tsx\";\nimport AchievementNotification from \"./AchievementNotification.tsx\";\n\nconst API_BASE_URL = \"/api\";\n\nconst App: React.FC = () => {\n const [user, setUser] = useState(null);\n const [loading, setLoading] = useState(true);\n const [showImport, setShowImport] = useState(false);\n const [newAchievement, setNewAchievement] = useState(null);\n \n // Check for user in localStorage on initial load\n useEffect(() => {\n const userId = localStorage.getItem(\"cashStashUserId\");\n if (userId) {\n fetchUser(userId);\n } else {\n setLoading(false);\n }\n }, []);\n \n // Watch for new achievements\n useEffect(() => {\n if (user && user.achievements) {\n const unlockedToday = user.achievements.find(a => {\n if (!a.unlocked || !a.unlockedDate) return false;\n const unlockDate = new Date(a.unlockedDate).toDateString();\n const today = new Date().toDateString();\n return unlockDate === today;\n });\n \n if (unlockedToday && !newAchievement) {\n setNewAchievement(unlockedToday);\n // Clear notification after 5 seconds\n setTimeout(() => setNewAchievement(null), 5000);\n }\n }\n }, [user]);\n \n const fetchUser = async (userId: string) => {\n try {\n setLoading(true);\n const response = await fetch(`${API_BASE_URL}/users/${userId}`);\n \n if (!response.ok) {\n throw new Error(\"Failed to fetch user\");\n }\n \n const userData = await response.json();\n setUser(userData);\n localStorage.setItem(\"cashStashUserId\", userId);\n } catch (error) {\n console.error(\"Error fetching user:\", error);\n localStorage.removeItem(\"cashStashUserId\");\n } finally {\n setLoading(false);\n }\n };\n \n const createUser = async (name: string) => {\n try {\n setLoading(true);\n const response = await fetch(`${API_BASE_URL}/users`, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ name }),\n });\n \n if (!response.ok) {\n throw new Error(\"Failed to create user\");\n }\n \n const userData = await response.json();\n setUser(userData);\n localStorage.setItem(\"cashStashUserId\", userData.id);\n } catch (error) {\n console.error(\"Error creating user:\", error);\n } finally {\n setLoading(false);\n }\n };\n \n const createEnvelope = async (name: string, icon: string, color: string, budget: number) => {\n if (!user) return;\n \n try {\n const response = await fetch(`${API_BASE_URL}/users/${user.id}/envelopes`, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ name, icon, color, budget }),\n });\n \n if (!response.ok) {\n throw new Error(\"Failed to create envelope\");\n }\n \n // Refresh user data\n fetchUser(user.id);\n } catch (error) {\n console.error(\"Error creating envelope:\", error);\n }\n };\n \n const allocateMoney = async (envelopeId: string, amount: number) => {\n if (!user) return;\n \n try {\n const response = await fetch(`${API_BASE_URL}/users/${user.id}/envelopes/${envelopeId}/allocate`, {\n method: \"PUT\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ amount }),\n });\n \n if (!response.ok) {\n throw new Error(\"Failed to allocate money\");\n }\n \n const updatedUser = await response.json();\n setUser(updatedUser);\n } catch (error) {\n console.error(\"Error allocating money:\", error);\n }\n };\n \n const importTransactions = async (csvContent: string, mapping: any) => {\n if (!user) return;\n \n try {\n setLoading(true);\n const response = await fetch(`${API_BASE_URL}/users/${user.id}/transactions/import`, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ csvContent, mapping }),\n });\n \n if (!response.ok) {\n throw new Error(\"Failed to import transactions\");\n }\n \n const data = await response.json();\n setUser(data.user);\n setShowImport(false);\n } catch (error) {\n console.error(\"Error importing transactions:\", error);\n } finally {\n setLoading(false);\n }\n };\n \n const assignTransaction = async (transactionId: string, envelopeId: string) => {\n if (!user) return;\n \n try {\n const response = await fetch(`${API_BASE_URL}/users/${user.id}/transactions/${transactionId}/assign`, {\n method: \"PUT\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ envelopeId }),\n });\n \n if (!response.ok) {\n throw new Error(\"Failed to assign transaction\");\n }\n \n const updatedUser = await response.json();\n setUser(updatedUser);\n } catch (error) {\n console.error(\"Error assigning transaction:\", error);\n }\n };\n \n if (loading) {\n return (\n

💰

Loading CashStash...

Counting your money...

\n );\n }\n \n if (!user) {\n return ;\n }\n \n return (\n

\n {newAchievement && (\n \n )}\n \n {showImport ? (\n setShowImport(false)} \n />\n ) : (\n setShowImport(true)}\n onAssignTransaction={assignTransaction}\n />\n )}\n

\n );\n};\n\nexport default App;",[],[257,275,317],"fccfbc8c-3333-11f0-a4ac-9e149126039e","AchievementsList.tsx","fccfbd40-3333-11f0-a4ac-9e149126039e",16,["D",1747495882627],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { Achievement } from \"../../shared/types.ts\";\n\ninterface AchievementsListProps {\n achievements: Achievement[];\n}\n\nconst AchievementsList: React.FC = ({ achievements }) => {\n // Sort achievements: unlocked first, then by name\n const sortedAchievements = [...achievements].sort((a, b) => {\n if (a.unlocked && !b.unlocked) return -1;\n if (!a.unlocked && b.unlocked) return 1;\n return a.name.localeCompare(b.name);\n });\n \n return (\n

\n {sortedAchievements.map(achievement => (\n \n

{achievement.icon}

{achievement.name}

{achievement.description}

\n {achievement.unlocked && achievement.unlockedDate && (\n

\n Unlocked on {new Date(achievement.unlockedDate).toLocaleDateString()}\n

\n )}\n

\n ))}\n \n );\n};\n\nexport default AchievementsList;",[],[257,275,325],"04318938-3334-11f0-92e1-9e149126039e","AchievementNotification.tsx","043189ec-3334-11f0-92e1-9e149126039e",17,["D",1747495895010],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { Achievement } from \"../../shared/types.ts\";\n\ninterface AchievementNotificationProps {\n achievement: Achievement;\n}\n\nconst AchievementNotification: React.FC = ({ achievement }) => {\n useEffect(() => {\n // Create confetti effect\n const container = document.body;\n const confettiCount = 30;\n const colors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722'];\n \n for (let i = 0; i < confettiCount; i++) {\n const confetti = document.createElement('div');\n confetti.className = 'confetti';\n confetti.style.left = `${Math.random() * 100}%`;\n confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];\n confetti.style.width = `${Math.random() * 10 + 5}px`;\n confetti.style.height = `${Math.random() * 10 + 5}px`;\n confetti.style.animationDuration = `${Math.random() * 3 + 2}s`;\n container.appendChild(confetti);\n \n // Remove confetti after animation\n setTimeout(() => {\n confetti.remove();\n }, 5000);\n }\n }, []);\n \n return (\n

\n {achievement.icon}\n

Achievement Unlocked!

{achievement.name}

{achievement.description}

\n );\n};\n\nexport default AchievementNotification;",[],[257,275,333],"9334ae5e-3333-11f0-a2ac-9e149126039e",["D",1747495705444],[212,213,214,215,216,217,218,219,220],[257,275],"8137279a-3333-11f0-8460-9e149126039e",["D",1747495675266],[211,221,222],[257],["D",1747495899324],[],[18,92],"6c6a77a4-3333-11f0-bdd9-9e149126039e","csv-parser.ts","6c6a789e-3333-11f0-bdd9-9e149126039e",["D",1747495640370],"import type { Transaction, CSVMapping, CSVParseResult } from \"../../shared/types.ts\";\n\n/**\n * Parse a CSV bank statement into transactions\n * \n * @param csvContent The raw CSV content as a string\n * @param mapping Configuration for mapping CSV columns to transaction fields\n * @returns Parsed transactions or error\n */\nexport function parseCSV(csvContent: string, mapping: CSVMapping): CSVParseResult {\n try {\n // Split the CSV into lines\n const lines = csvContent.split(/\\r?\\n/).filter(line => line.trim() !== \"\");\n \n if (lines.length < 2) {\n return { \n success: false, \n error: \"CSV file must contain a header row and at least one data row\" \n };\n }\n \n // Extract header row and find column indices\n const headers = parseCSVRow(lines[0]);\n const dateIndex = headers.indexOf(mapping.date);\n const descriptionIndex = headers.indexOf(mapping.description);\n const amountIndex = headers.indexOf(mapping.amount);\n const typeIndex = mapping.type ? headers.indexOf(mapping.type) : -1;\n \n // Validate required columns exist\n if (dateIndex === -1 || descriptionIndex === -1 || amountIndex === -1) {\n return { \n success: false, \n error: \"Required columns not found in CSV. Please check your mapping configuration.\" \n };\n }\n \n // Parse data rows\n const transactions: Transaction[] = [];\n \n for (let i = 1; i < lines.length; i++) {\n const row = parseCSVRow(lines[i]);\n \n if (row.length <= Math.max(dateIndex, descriptionIndex, amountIndex)) {\n continue; // Skip rows that don't have enough columns\n }\n \n let amount = parseFloat(row[amountIndex].replace(/[^\\d.-]/g, \"\"));\n \n // Handle debit/credit indicator if present\n if (typeIndex !== -1) {\n const type = row[typeIndex].toLowerCase();\n if (type.includes(\"debit\") || type.includes(\"withdrawal\") || type.includes(\"payment\")) {\n amount = -Math.abs(amount);\n }\n }\n \n // Skip rows with invalid amounts\n if (isNaN(amount)) {\n continue;\n }\n \n transactions.push({\n id: crypto.randomUUID(),\n date: formatDate(row[dateIndex]),\n description: row[descriptionIndex],\n amount,\n processed: false\n });\n }\n \n if (transactions.length === 0) {\n return { \n success: false, \n error: \"No valid transactions found in the CSV file\" \n };\n }\n \n return {\n success: true,\n transactions\n };\n \n } catch (error) {\n return {\n success: false,\n error: `Failed to parse CSV: ${error.message}`\n };\n }\n}\n\n/**\n * Parse a CSV row into an array of values, handling quoted values correctly\n */\nfunction parseCSVRow(row: string): string[] {\n const result: string[] = [];\n let current = \"\";\n let inQuotes = false;\n \n for (let i = 0; i < row.length; i++) {\n const char = row[i];\n \n if (char === '\"') {\n // Toggle quote state\n inQuotes = !inQuotes;\n } else if (char === ',' && !inQuotes) {\n // End of field\n result.push(current);\n current = \"\";\n } else {\n current += char;\n }\n }\n \n // Add the last field\n result.push(current);\n \n return result;\n}\n\n/**\n * Try to format a date string into a consistent format (YYYY-MM-DD)\n */\nfunction formatDate(dateStr: string): string {\n // Try to parse the date\n const date = new Date(dateStr);\n \n if (!isNaN(date.getTime())) {\n return date.toISOString().split('T')[0];\n }\n \n // If standard parsing fails, try common formats\n // MM/DD/YYYY\n const mmddyyyy = /(\\d{1,2})\\/(\\d{1,2})\\/(\\d{4})/.exec(dateStr);\n if (mmddyyyy) {\n const [_, month, day, year] = mmddyyyy;\n return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;\n }\n \n // DD/MM/YYYY\n const ddmmyyyy = /(\\d{1,2})\\/(\\d{1,2})\\/(\\d{4})/.exec(dateStr);\n if (ddmmyyyy) {\n const [_, day, month, year] = ddmmyyyy;\n return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;\n }\n \n // Return original if we can't parse it\n return dateStr;\n}",[],[18,83,352],["D",1747495640370],[208],[18,83],"6156eb54-3333-11f0-9159-9e149126039e","queries.ts","6156ec1c-3333-11f0-9159-9e149126039e",4,["D",1747495621787],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { \n USERS_TABLE, \n ENVELOPES_TABLE, \n TRANSACTIONS_TABLE, \n ACHIEVEMENTS_TABLE \n} from \"./migrations.ts\";\nimport type { User, Envelope, Transaction, Achievement } from \"../../shared/types.ts\";\n\n// User queries\nexport async function createUser(name: string): Promise {\n const userId = crypto.randomUUID();\n \n await sqlite.execute(\n `INSERT INTO ${USERS_TABLE} (id, name, total_balance, unallocated) VALUES (?, ?, 0, 0)`,\n [userId, name]\n );\n \n // Create default achievements for the user\n const defaultAchievements = [\n {\n id: \"first_budget\",\n name: \"Budget Beginner\",\n description: \"Created your first budget envelope\",\n icon: \"🏆\"\n },\n {\n id: \"full_allocation\",\n name: \"Money Master\",\n description: \"Allocated 100% of your money to envelopes\",\n icon: \"💰\"\n },\n {\n id: \"saving_streak\",\n name: \"Saving Superstar\",\n description: \"Saved money for 3 weeks in a row\",\n icon: \"⭐\"\n },\n {\n id: \"csv_import\",\n name: \"Data Wizard\",\n description: \"Successfully imported your first bank statement\",\n icon: \"📊\"\n }\n ];\n \n for (const achievement of defaultAchievements) {\n await sqlite.execute(\n `INSERT INTO ${ACHIEVEMENTS_TABLE} (id, user_id, name, description, icon, unlocked) \n VALUES (?, ?, ?, ?, ?, 0)`,\n [achievement.id, userId, achievement.name, achievement.description, achievement.icon]\n );\n }\n \n return getUserById(userId);\n}\n\nexport async function getUserById(userId: string): Promise {\n const userResult = await sqlite.execute(\n `SELECT * FROM ${USERS_TABLE} WHERE id = ?`,\n [userId]\n );\n \n if (userResult.rows.length === 0) {\n return null;\n }\n \n const user = userResult.rows[0];\n \n // Get envelopes\n const envelopes = await getEnvelopesByUserId(userId);\n \n // Get transactions\n const transactions = await getTransactionsByUserId(userId);\n \n // Get achievements\n const achievements = await getAchievementsByUserId(userId);\n \n return {\n id: user.id,\n name: user.name,\n totalBalance: user.total_balance,\n unallocated: user.unallocated,\n envelopes,\n transactions,\n achievements\n };\n}\n\nexport async function updateUserBalance(userId: string, totalBalance: number, unallocated: number): Promise {\n await sqlite.execute(\n `UPDATE ${USERS_TABLE} SET total_balance = ?, unallocated = ? WHERE id = ?`,\n [totalBalance, unallocated, userId]\n );\n}\n\n// Envelope queries\nexport async function createEnvelope(\n userId: string, \n name: string, \n icon: string, \n color: string, \n budget: number = 0\n): Promise {\n const envelopeId = crypto.randomUUID();\n \n await sqlite.execute(\n `INSERT INTO ${ENVELOPES_TABLE} (id, user_id, name, icon, color, budget, current) \n VALUES (?, ?, ?, ?, ?, ?, 0)`,\n [envelopeId, userId, name, icon, color, budget]\n );\n \n // Check for first budget achievement\n await checkAndUnlockAchievement(userId, \"first_budget\");\n \n return {\n id: envelopeId,\n name,\n icon,\n color,\n budget,\n current: 0\n };\n}\n\nexport async function getEnvelopesByUserId(userId: string): Promise {\n const result = await sqlite.execute(\n `SELECT * FROM ${ENVELOPES_TABLE} WHERE user_id = ?`,\n [userId]\n );\n \n return result.rows.map(row => ({\n id: row.id,\n name: row.name,\n icon: row.icon,\n color: row.color,\n budget: row.budget,\n current: row.current\n }));\n}\n\nexport async function updateEnvelopeAmount(envelopeId: string, amount: number): Promise {\n await sqlite.execute(\n `UPDATE ${ENVELOPES_TABLE} SET current = ? WHERE id = ?`,\n [amount, envelopeId]\n );\n}\n\n// Transaction queries\nexport async function addTransactions(\n userId: string, \n transactions: Omit[]\n): Promise {\n const createdTransactions: Transaction[] = [];\n \n for (const transaction of transactions) {\n const transactionId = crypto.randomUUID();\n \n await sqlite.execute(\n `INSERT INTO ${TRANSACTIONS_TABLE} (id, user_id, date, description, amount, category, processed) \n VALUES (?, ?, ?, ?, ?, ?, 0)`,\n [transactionId, userId, transaction.date, transaction.description, transaction.amount, transaction.category || null]\n );\n \n createdTransactions.push({\n id: transactionId,\n date: transaction.date,\n description: transaction.description,\n amount: transaction.amount,\n category: transaction.category,\n processed: false\n });\n }\n \n // Check for CSV import achievement\n if (createdTransactions.length > 0) {\n await checkAndUnlockAchievement(userId, \"csv_import\");\n }\n \n // Update user's total balance\n const totalAmount = transactions.reduce((sum, t) => sum + t.amount, 0);\n const user = await getUserById(userId);\n \n if (user) {\n const newTotal = user.totalBalance + totalAmount;\n const newUnallocated = user.unallocated + totalAmount;\n await updateUserBalance(userId, newTotal, newUnallocated);\n }\n \n return createdTransactions;\n}\n\nexport async function getTransactionsByUserId(userId: string): Promise {\n const result = await sqlite.execute(\n `SELECT * FROM ${TRANSACTIONS_TABLE} WHERE user_id = ? ORDER BY date DESC`,\n [userId]\n );\n \n return result.rows.map(row => ({\n id: row.id,\n date: row.date,\n description: row.description,\n amount: row.amount,\n category: row.category,\n processed: Boolean(row.processed)\n }));\n}\n\nexport async function assignTransactionToEnvelope(\n transactionId: string, \n envelopeId: string\n): Promise {\n await sqlite.execute(\n `UPDATE ${TRANSACTIONS_TABLE} SET envelope_id = ?, processed = 1 WHERE id = ?`,\n [envelopeId, transactionId]\n );\n}\n\n// Achievement queries\nexport async function getAchievementsByUserId(userId: string): Promise {\n const result = await sqlite.execute(\n `SELECT * FROM ${ACHIEVEMENTS_TABLE} WHERE user_id = ?`,\n [userId]\n );\n \n return result.rows.map(row => ({\n id: row.id,\n name: row.name,\n description: row.description,\n icon: row.icon,\n unlocked: Boolean(row.unlocked),\n unlockedDate: row.unlocked_date\n }));\n}\n\nexport async function checkAndUnlockAchievement(userId: string, achievementId: string): Promise {\n const result = await sqlite.execute(\n `SELECT * FROM ${ACHIEVEMENTS_TABLE} WHERE user_id = ? AND id = ?`,\n [userId, achievementId]\n );\n \n if (result.rows.length === 0 || result.rows[0].unlocked) {\n return false;\n }\n \n await sqlite.execute(\n `UPDATE ${ACHIEVEMENTS_TABLE} SET unlocked = 1, unlocked_date = CURRENT_TIMESTAMP WHERE user_id = ? AND id = ?`,\n [userId, achievementId]\n );\n \n return true;\n}\n\n// Check if all money is allocated (for achievement)\nexport async function checkFullAllocation(userId: string): Promise {\n const user = await getUserById(userId);\n \n if (user && user.unallocated === 0 && user.totalBalance > 0) {\n await checkAndUnlockAchievement(userId, \"full_allocation\");\n }\n}",[],[18,67,362],"50baf5f6-3333-11f0-bd48-9e149126039e","migrations.ts","50baf6be-3333-11f0-bd48-9e149126039e",["D",1747495593922],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\n// Table names - use versioning for schema changes\nexport const USERS_TABLE = \"cash_stash_users\";\nexport const ENVELOPES_TABLE = \"cash_stash_envelopes\";\nexport const TRANSACTIONS_TABLE = \"cash_stash_transactions\";\nexport const ACHIEVEMENTS_TABLE = \"cash_stash_achievements\";\n\nexport async function setupDatabase() {\n // Create users table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${USERS_TABLE} (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n total_balance REAL DEFAULT 0,\n unallocated REAL DEFAULT 0,\n created_at TEXT DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n // Create envelopes table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${ENVELOPES_TABLE} (\n id TEXT PRIMARY KEY,\n user_id TEXT NOT NULL,\n name TEXT NOT NULL,\n icon TEXT NOT NULL,\n color TEXT NOT NULL,\n budget REAL DEFAULT 0,\n current REAL DEFAULT 0,\n created_at TEXT DEFAULT CURRENT_TIMESTAMP,\n FOREIGN KEY (user_id) REFERENCES ${USERS_TABLE}(id)\n )\n `);\n\n // Create transactions table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TRANSACTIONS_TABLE} (\n id TEXT PRIMARY KEY,\n user_id TEXT NOT NULL,\n date TEXT NOT NULL,\n description TEXT NOT NULL,\n amount REAL NOT NULL,\n category TEXT,\n envelope_id TEXT,\n processed INTEGER DEFAULT 0,\n created_at TEXT DEFAULT CURRENT_TIMESTAMP,\n FOREIGN KEY (user_id) REFERENCES ${USERS_TABLE}(id),\n FOREIGN KEY (envelope_id) REFERENCES ${ENVELOPES_TABLE}(id)\n )\n `);\n\n // Create achievements table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${ACHIEVEMENTS_TABLE} (\n id TEXT PRIMARY KEY,\n user_id TEXT NOT NULL,\n name TEXT NOT NULL,\n description TEXT NOT NULL,\n icon TEXT NOT NULL,\n unlocked INTEGER DEFAULT 0,\n unlocked_date TEXT,\n created_at TEXT DEFAULT CURRENT_TIMESTAMP,\n FOREIGN KEY (user_id) REFERENCES ${USERS_TABLE}(id)\n )\n `);\n\n // Create default achievements\n await createDefaultAchievements();\n}\n\nasync function createDefaultAchievements() {\n const defaultAchievements = [\n {\n id: \"first_budget\",\n name: \"Budget Beginner\",\n description: \"Created your first budget envelope\",\n icon: \"🏆\"\n },\n {\n id: \"full_allocation\",\n name: \"Money Master\",\n description: \"Allocated 100% of your money to envelopes\",\n icon: \"💰\"\n },\n {\n id: \"saving_streak\",\n name: \"Saving Superstar\",\n description: \"Saved money for 3 weeks in a row\",\n icon: \"⭐\"\n },\n {\n id: \"csv_import\",\n name: \"Data Wizard\",\n description: \"Successfully imported your first bank statement\",\n icon: \"📊\"\n }\n ];\n \n // We don't insert these directly as they need to be associated with users\n // They'll be created when a new user is created\n}",[],[18,67,370],["D",1747495593922],[205,206],[18,67],["D",1747495593922],[204,207,209],[18],["D",1747495480497],{"_11":12,"_150":73},{"_11":12,"_146":-5,"_72":73,"_31":71,"_147":148,"_149":30},{"_42":96,"_13":16,"_36":39,"_138":105,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":14,"_145":12},"ctx",{"_55":-5,"_169":419,"_420":421,"_422":423,"_424":30,"_425":30,"_426":30,"_427":24,"_428":-5,"_429":-7,"_430":-7,"_431":26,"_432":30,"_433":30,"_434":-5,"_435":30,"_436":30,"_437":30,"_438":-5},"ENV",{"_390":391,"_392":393,"_394":16,"_395":396,"_397":398,"_399":400,"_401":402,"_403":404,"_405":406,"_407":408,"_409":410,"_411":412,"_413":414,"_415":416,"_417":418},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · backend