diff --git a/src/context/AppContext.jsx b/src/context/AppContext.jsx
deleted file mode 100644
index 81607a1..0000000
--- a/src/context/AppContext.jsx
+++ /dev/null
@@ -1,579 +0,0 @@
-import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
-import { supabase } from '../lib/supabase';
-
-const AppContext = createContext();
-
-const INITIAL_USERS = [
- { id: 1, name: 'Steven', pin: '1234', color: '#007AFF' },
- { id: 2, name: 'Girlfriend', pin: '5678', color: '#FF2D55' },
-];
-
-const INITIAL_DATA = {
- banks: [
- { id: 1, name: 'Youju Bank', value: 12500.50 },
- { id: 2, name: 'Sinopac Bank', value: 8700.25 },
- { id: 3, name: 'Mega Bank', value: 45000.00 },
- ],
- transactions: [
- { id: 1, type: 'expense', category: 'Food', amount: 45.50, date: new Date().toISOString(), bankId: 1, userId: 1 },
- { id: 2, type: 'expense', category: 'Rent', amount: 1200, date: new Date().toISOString(), bankId: 2, userId: 1 },
- { id: 3, type: 'income', category: 'Salary', amount: 5000, date: new Date().toISOString(), bankId: 1, userId: 1 },
- ],
- budget: {
- monthlyLimit: 3000,
- },
- monthlyBudget: 30000,
- categoryBudgets: [
- { id: 1, category: 'Food', limit: 500 },
- { id: 2, category: 'Entertainment', limit: 200 },
- ],
- customCategories: [
- { id: 1, name: 'Housing', icon: 'Home', color: '#007AFF', type: 'expense' },
- { id: 2, name: 'Food', icon: 'Coffee', color: '#FF9500', type: 'expense' },
- { id: 3, name: 'Transport', icon: 'Car', color: '#34C759', type: 'expense' },
- { id: 4, name: 'Entertainment', icon: 'Tv', color: '#AF52DE', type: 'expense' },
- { id: 5, name: 'Salary', icon: 'Briefcase', color: '#34C759', type: 'income' },
- { id: 6, name: 'Investments', icon: 'TrendingUp', color: '#007AFF', type: 'income' }
- ],
- savingsGoals: [
- { id: 1, name: 'Emergency Fund', target: 10000, saved: 4500, icon: 'ShieldCheck', color: '#34C759' },
- { id: 2, name: 'Paris Vacation', target: 5000, saved: 1200, icon: 'Plane', color: '#007AFF' }
- ],
- subscriptions: [
- { id: 1, name: 'Netflix', amount: 330, category: 'Entertainment', frequency: 'monthly', icon: 'Tv' },
- { id: 2, name: 'Spotify', amount: 149, category: 'Entertainment', frequency: 'monthly', icon: 'Music' },
- ],
- bills: [
- { id: 1, name: 'Rent', amount: 15000, dueDate: 5, category: 'Housing', isPaid: false },
- { id: 2, name: 'Electric', amount: 1200, dueDate: 15, category: 'Utilities', isPaid: false },
- ]
-};
-
-export const AppProvider = ({ children }) => {
- const [activeScreen, setActiveScreen] = useState('dashboard');
- const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth());
- const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
- const [currency, setCurrency] = useState(localStorage.getItem('currency') || 'TWD');
- const [exchangeRate, setExchangeRate] = useState(null);
-
- const [currentUser, setCurrentUser] = useState(() => {
- const saved = localStorage.getItem('moneyPlannerUser');
- return saved ? JSON.parse(saved) : null;
- });
-
- const [data, setData] = useState(() => {
- const saved = localStorage.getItem('moneyPlannerData');
- if (!saved) return INITIAL_DATA;
- try {
- const parsed = JSON.parse(saved);
- if (parsed.banks) {
- parsed.banks = parsed.banks.map(b => ({...b, currency: b.currency || 'TWD'}));
- }
- return {
- ...INITIAL_DATA,
- ...parsed,
- banks: Array.isArray(parsed.banks) ? parsed.banks : INITIAL_DATA.banks,
- transactions: Array.isArray(parsed.transactions) ? parsed.transactions : INITIAL_DATA.transactions,
- subscriptions: Array.isArray(parsed.subscriptions) ? parsed.subscriptions : INITIAL_DATA.subscriptions,
- bills: Array.isArray(parsed.bills) ? parsed.bills : INITIAL_DATA.bills,
- categoryBudgets: Array.isArray(parsed.categoryBudgets) ? parsed.categoryBudgets : INITIAL_DATA.categoryBudgets,
- savingsGoals: Array.isArray(parsed.savingsGoals) ? parsed.savingsGoals : INITIAL_DATA.savingsGoals,
- customCategories: Array.isArray(parsed.customCategories) ? parsed.customCategories : INITIAL_DATA.customCategories,
- };
- } catch (e) {
- console.error("Failed to parse saved data", e);
- return INITIAL_DATA;
- }
- });
-
- // Fetch live exchange rate
- useEffect(() => {
- const fetchRate = async () => {
- try {
- // Using a free public API for exchange rates
- const res = await fetch('https://open.er-api.com/v6/latest/TWD');
- const result = await res.json();
- if (result && result.rates && result.rates.IDR) {
- setExchangeRate(result.rates.IDR);
- console.log("Fetched TWD to IDR rate:", result.rates.IDR);
- } else {
- setExchangeRate(495); // Fallback offline IDR rate
- }
- } catch (e) {
- console.error("Failed to fetch exchange rate", e);
- setExchangeRate(495); // Fallback offline IDR rate
- }
- };
- fetchRate();
- // Refresh every hour
- const interval = setInterval(fetchRate, 3600000);
- return () => clearInterval(interval);
- }, []);
-
- // Supabase Data Fetching
- useEffect(() => {
- const loadSupabaseData = async () => {
- if (!currentUser) return;
-
- try {
- const { data: supabaseData, error } = await supabase
- .from('user_data')
- .select('content')
- .eq('user_id', currentUser.id)
- .single();
-
- if (error && error.code !== 'PGRST116') {
- console.error('Error fetching Supabase data:', error);
- return;
- }
-
- if (supabaseData?.content) {
- // Merge Supabase content with local, prioritizing Supabase for existing keys
- // but keeping local state if Supabase is missing something
- setData(prev => {
- const merged = { ...prev, ...supabaseData.content };
- // Ensure we don't lose transactions or other arrays if they were updated locally
- // This is a simple merge; a more complex one would compare timestamps
- return merged;
- });
- console.log('Successfully synced data from Supabase');
- }
- } catch (err) {
- console.error('Failed to load data from Supabase:', err);
- }
- };
-
- loadSupabaseData();
- }, [currentUser]);
-
- // Supabase Syncing
- useEffect(() => {
- const syncToSupabase = async () => {
- if (!currentUser) return;
-
- try {
- // Double check configuration before attempting sync
- if (!import.meta.env.VITE_SUPABASE_URL || import.meta.env.VITE_SUPABASE_URL.includes('your-project')) {
- return;
- }
-
- const { error } = await supabase
- .from('user_data')
- .upsert({
- user_id: currentUser.id,
- content: data,
- updated_at: new Date().toISOString()
- }, { onConflict: 'user_id' });
-
- if (error) {
- console.error('Error syncing to Supabase:', error);
- }
- } catch (err) {
- console.error('Failed to sync to Supabase:', err);
- }
- };
-
- const timeout = setTimeout(syncToSupabase, 1000); // Debounce sync
- return () => clearTimeout(timeout);
- }, [data, currentUser]);
-
- useEffect(() => {
- localStorage.setItem('moneyPlannerData', JSON.stringify(data));
- }, [data]);
-
- useEffect(() => {
- localStorage.setItem('moneyPlannerUser', JSON.stringify(currentUser));
- }, [currentUser]);
-
- useEffect(() => {
- localStorage.setItem('theme', theme);
- document.documentElement.setAttribute('data-theme', theme);
- }, [theme]);
-
- useEffect(() => {
- localStorage.setItem('currency', currency);
- }, [currency]);
-
- const login = (userId, pin) => {
- const user = INITIAL_USERS.find(u => u.id === userId && u.pin === pin);
- if (user) {
- setCurrentUser(user);
- return true;
- }
- return false;
- };
-
- const logout = () => {
- setCurrentUser(null);
- setActiveScreen('dashboard');
- };
-
- const addBank = (name, initialValue = 0, bankCurrency = 'TWD') => {
- const newBank = {
- id: Date.now(),
- name,
- value: initialValue,
- currency: bankCurrency
- };
-
- setData(prev => ({
- ...prev,
- banks: [...prev.banks, newBank]
- }));
- };
-
- const deleteBank = (id) => {
- setData(prev => ({
- ...prev,
- banks: prev.banks.filter(b => b.id !== id),
- // Clean up transactions associated with this bank? Or keep them?
- // Usually better to keep but mark as 'No Bank' if id is missing.
- // For simplicity here, we'll just filter them or keep them.
- }));
- };
-
- const addTransaction = (transaction) => {
- // If we are in IDR mode, we convert the IDR input back to TWD for storage
- const amountInTWD = (currency === 'IDR' && exchangeRate)
- ? transaction.amount / exchangeRate
- : transaction.amount;
-
- const newTransaction = {
- ...transaction,
- amount: amountInTWD, // Store as TWD
- id: transaction.id || Date.now(),
- date: new Date().toISOString(),
- userId: currentUser?.id
- };
-
- setData(prev => ({
- ...prev,
- transactions: [newTransaction, ...prev.transactions],
- banks: prev.banks.map(bank => {
- if (bank.id === Number(transaction.bankId)) {
- const modification = (bank.currency === 'IDR' && exchangeRate) ? amountInTWD * exchangeRate : amountInTWD;
- return { ...bank, value: bank.value + (transaction.type === 'income' ? modification : -modification) };
- }
- return bank;
- })
- }));
- };
-
- const deleteTransaction = (id) => {
- const transaction = data.transactions.find(t => t.id === id);
- if (!transaction) return;
-
- setData(prev => ({
- ...prev,
- transactions: prev.transactions.filter(t => t.id !== id),
- banks: prev.banks.map(bank => {
- if (bank.id === Number(transaction.bankId)) {
- const amountInTWD = transaction.amount;
- const modification = (bank.currency === 'IDR' && exchangeRate) ? amountInTWD * exchangeRate : amountInTWD;
- return { ...bank, value: bank.value - (transaction.type === 'income' ? modification : -modification) };
- }
- return bank;
- })
- }));
- };
-
- const updateTransaction = (id, updates) => {
- const oldTransaction = data.transactions.find(t => t.id === id);
- if (!oldTransaction) return;
-
- // Convert new amount to TWD if needed
- const amountInTWD = (updates.amount !== undefined)
- ? ((currency === 'IDR' && exchangeRate) ? updates.amount / exchangeRate : updates.amount)
- : oldTransaction.amount;
-
- setData(prev => {
- // Revert old transaction effect on banks
- let newBanks = prev.banks.map(bank => {
- if (bank.id === Number(oldTransaction.bankId)) {
- const oldAmountTWD = oldTransaction.amount;
- const oldMod = (bank.currency === 'IDR' && exchangeRate) ? oldAmountTWD * exchangeRate : oldAmountTWD;
- return { ...bank, value: bank.value - (oldTransaction.type === 'income' ? oldMod : -oldMod) };
- }
- return bank;
- });
-
- // Apply new transaction effect on banks
- const newType = updates.type || oldTransaction.type;
- const newBankId = Number(updates.bankId || oldTransaction.bankId);
-
- newBanks = newBanks.map(bank => {
- if (bank.id === newBankId) {
- const newMod = (bank.currency === 'IDR' && exchangeRate) ? amountInTWD * exchangeRate : amountInTWD;
- return { ...bank, value: bank.value + (newType === 'income' ? newMod : -newMod) };
- }
- return bank;
- });
-
- return {
- ...prev,
- transactions: prev.transactions.map(t => t.id === id ? { ...t, ...updates, amount: amountInTWD } : t),
- banks: newBanks
- };
- });
- };
-
- const updateBank = (bankId, updates) => {
- setData(prev => ({
- ...prev,
- banks: prev.banks.map(bank => {
- if (bank.id === bankId) {
- // Native Currency Bank update! No automatic exchange rate division here.
- return { ...bank, ...updates };
- }
- return bank;
- })
- }));
- };
-
- const addSavingsGoal = (goal) => {
- setData(prev => ({
- ...prev,
- savingsGoals: [...(prev.savingsGoals || []), { ...goal, id: Date.now(), saved: 0 }]
- }));
- };
-
- const updateSavingsGoal = (id, updates) => {
- setData(prev => ({
- ...prev,
- savingsGoals: prev.savingsGoals.map(g => g.id === id ? { ...g, ...updates } : g)
- }));
- };
-
- const deleteSavingsGoal = (id) => {
- setData(prev => ({
- ...prev,
- savingsGoals: prev.savingsGoals.filter(g => g.id !== id)
- }));
- };
-
- const fundSavingsGoal = (goalId, amount, bankId) => {
- // 1. Generate an expense transaction
- const transaction = {
- type: 'expense',
- category: 'Savings Transfer',
- amount: Number(amount),
- bankId: Number(bankId),
- notes: `Funded goal ID: ${goalId}`,
- };
-
- // Convert to TWD if needed (assuming user inputs in their selected currency)
- const amountInTWD = (currency === 'IDR' && exchangeRate)
- ? transaction.amount / exchangeRate
- : transaction.amount;
-
- const newTransaction = {
- ...transaction,
- amount: amountInTWD,
- id: Date.now(),
- date: new Date().toISOString(),
- userId: currentUser?.id
- };
-
- setData(prev => {
- // 2. Decrement bank balance
- const newBanks = prev.banks.map(bank => {
- if (bank.id === Number(bankId)) {
- const modification = (bank.currency === 'IDR' && exchangeRate) ? amountInTWD * exchangeRate : amountInTWD;
- return { ...bank, value: bank.value - modification };
- }
- return bank;
- });
-
- // 3. Increment goal progress
- const newGoals = prev.savingsGoals.map(goal =>
- goal.id === goalId
- ? { ...goal, saved: goal.saved + amountInTWD }
- : goal
- );
-
- return {
- ...prev,
- transactions: [newTransaction, ...prev.transactions],
- banks: newBanks,
- savingsGoals: newGoals
- };
- });
- };
-
- const addSubscription = (sub) => {
- setData(prev => ({
- ...prev,
- subscriptions: [...prev.subscriptions, { ...sub, id: Date.now() }]
- }));
- };
-
- const addBill = (bill) => {
- setData(prev => ({
- ...prev,
- bills: [...prev.bills, { ...bill, id: Date.now(), isPaid: false }]
- }));
- };
-
- const toggleBillStatus = (id) => {
- setData(prev => ({
- ...prev,
- bills: prev.bills.map(b => b.id === id ? { ...b, isPaid: !b.isPaid } : b)
- }));
- };
-
- const payBill = (billId, bankId) => {
- const bill = data.bills.find(b => b.id === billId);
- if (!bill) return;
-
- const amountInTWD = (currency === 'IDR' && exchangeRate)
- ? bill.amount / exchangeRate
- : bill.amount;
-
- const transaction = {
- type: 'expense',
- category: bill.category || 'Bills',
- amount: amountInTWD,
- bankId: Number(bankId),
- notes: `Auto-paid bill: ${bill.name}`,
- id: Date.now(),
- date: new Date().toISOString(),
- userId: currentUser?.id
- };
-
- setData(prev => {
- const newBanks = prev.banks.map(bank => {
- if (bank.id === Number(bankId)) {
- const modification = (bank.currency === 'IDR' && exchangeRate) ? amountInTWD * exchangeRate : amountInTWD;
- return { ...bank, value: bank.value - modification };
- }
- return bank;
- });
-
- const newBills = prev.bills.map(b =>
- b.id === billId ? { ...b, isPaid: true } : b
- );
-
- return {
- ...prev,
- transactions: [transaction, ...prev.transactions],
- banks: newBanks,
- bills: newBills
- };
- });
- };
-
- const deleteRecurring = (type, id) => {
- setData(prev => ({
- ...prev,
- [type]: prev[type].filter(item => item.id !== id)
- }));
- };
-
- const saveCategoryBudget = (budget) => {
- setData(prev => {
- // If it exists, update it. Else, add it.
- const exists = prev.categoryBudgets.find(b => b.category.toLowerCase() === budget.category.toLowerCase());
- if (exists) {
- return {
- ...prev,
- categoryBudgets: prev.categoryBudgets.map(b => b.id === exists.id ? { ...b, limit: budget.limit } : b)
- };
- } else {
- return {
- ...prev,
- categoryBudgets: [...prev.categoryBudgets, { ...budget, id: Date.now() }]
- };
- }
- });
- };
-
- const deleteCategoryBudget = (id) => {
- setData(prev => ({
- ...prev,
- categoryBudgets: prev.categoryBudgets.filter(b => b.id !== id)
- }));
- };
-
- const addCategory = (categoryObj) => {
- setData(prev => ({
- ...prev,
- customCategories: [...(prev.customCategories || []), { ...categoryObj, id: Date.now() }]
- }));
- };
-
- const deleteCategory = (id) => {
- setData(prev => ({
- ...prev,
- customCategories: (prev.customCategories || []).filter(c => c.id !== id)
- }));
- };
-
- const setMonthlyBudget = (amount) => {
- setData(prev => ({ ...prev, monthlyBudget: Number(amount) }));
- };
-
- const getMonthlyTotals = (month) => {
- const currentYear = new Date().getFullYear();
- const monthTransactions = data.transactions.filter(t => {
- const d = new Date(t.date);
- return d.getMonth() === month && d.getFullYear() === currentYear;
- });
-
- // Filter to show ONLY Current User's transactions
- const visibleTransactions = monthTransactions.filter(t => t.userId === currentUser?.id);
-
- const income = visibleTransactions.filter(t => t.type === 'income').reduce((acc, t) => acc + t.amount, 0);
- const expenses = visibleTransactions.filter(t => t.type === 'expense').reduce((acc, t) => acc + t.amount, 0);
-
- return { income, expenses, transactions: visibleTransactions };
- };
-
- const formatCurrency = (amount) => {
- // Convert to display value if using IDR
- const displayAmount = (currency === 'IDR' && exchangeRate) ? amount * exchangeRate : amount;
-
- const symbol = currency === 'TWD' ? 'NT$' : 'Rp';
-
- return `${symbol} ${new Intl.NumberFormat('en-US', {
- minimumFractionDigits: 0,
- maximumFractionDigits: 0
- }).format(displayAmount)}`;
- };
-
- const value = {
- activeScreen, setActiveScreen,
- selectedMonth, setSelectedMonth,
- theme, setTheme,
- currency, setCurrency,
- exchangeRate,
- currentUser, login, logout,
- users: INITIAL_USERS,
- data,
- addTransaction,
- updateTransaction,
- deleteTransaction,
- addBank,
- deleteBank,
- updateBank,
- addSavingsGoal,
- updateSavingsGoal,
- deleteSavingsGoal,
- fundSavingsGoal,
- addSubscription,
- addBill,
- toggleBillStatus,
- payBill,
- deleteRecurring,
- saveCategoryBudget,
- deleteCategoryBudget,
- addCategory,
- deleteCategory,
- getMonthlyTotals,
- formatCurrency,
- setMonthlyBudget
- };
-
- return
{children};
-};
-
-export const useAppContext = () => useContext(AppContext);
diff --git a/src/lib/crypto.js b/src/lib/crypto.js
new file mode 100644
index 0000000..ecfd6df
--- /dev/null
+++ b/src/lib/crypto.js
@@ -0,0 +1,55 @@
+const PBKDF2_ITERATIONS = 210000;
+const SALT_BYTES = 16;
+const KEY_BITS = 256;
+
+const toBase64 = (bytes) => {
+ let binary = '';
+ for (let i = 0; i < bytes.length; i += 1) binary += String.fromCharCode(bytes[i]);
+ return btoa(binary);
+};
+
+const fromBase64 = (b64) => {
+ const binary = atob(b64);
+ const bytes = new Uint8Array(binary.length);
+ for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
+ return bytes;
+};
+
+const deriveBits = async (secret, saltBytes, iterations) => {
+ const enc = new TextEncoder();
+ const keyMaterial = await crypto.subtle.importKey(
+ 'raw',
+ enc.encode(secret),
+ 'PBKDF2',
+ false,
+ ['deriveBits']
+ );
+ return new Uint8Array(
+ await crypto.subtle.deriveBits(
+ { name: 'PBKDF2', salt: saltBytes, iterations, hash: 'SHA-256' },
+ keyMaterial,
+ KEY_BITS
+ )
+ );
+};
+
+export const hashSecret = async (secret) => {
+ const salt = crypto.getRandomValues(new Uint8Array(SALT_BYTES));
+ const bits = await deriveBits(secret, salt, PBKDF2_ITERATIONS);
+ return {
+ hash: toBase64(bits),
+ salt: toBase64(salt),
+ iterations: PBKDF2_ITERATIONS
+ };
+};
+
+export const verifySecret = async (secret, stored) => {
+ if (!stored || !stored.hash || !stored.salt) return false;
+ const iterations = stored.iterations || PBKDF2_ITERATIONS;
+ const bits = await deriveBits(secret, fromBase64(stored.salt), iterations);
+ const expected = fromBase64(stored.hash);
+ if (bits.length !== expected.length) return false;
+ let diff = 0;
+ for (let i = 0; i < bits.length; i += 1) diff |= bits[i] ^ expected[i];
+ return diff === 0;
+};
diff --git a/src/lib/crypto.test.js b/src/lib/crypto.test.js
new file mode 100644
index 0000000..a8a4c0a
--- /dev/null
+++ b/src/lib/crypto.test.js
@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest';
+import { hashSecret, verifySecret } from './crypto';
+
+describe('crypto', () => {
+ it('hashSecret produces base64 hash + salt with iterations', async () => {
+ const out = await hashSecret('1234');
+ expect(typeof out.hash).toBe('string');
+ expect(typeof out.salt).toBe('string');
+ expect(out.hash.length).toBeGreaterThan(0);
+ expect(out.salt.length).toBeGreaterThan(0);
+ expect(out.iterations).toBeGreaterThanOrEqual(100000);
+ });
+
+ it('produces different hashes for the same secret (salted)', async () => {
+ const a = await hashSecret('1234');
+ const b = await hashSecret('1234');
+ expect(a.hash).not.toBe(b.hash);
+ expect(a.salt).not.toBe(b.salt);
+ });
+
+ it('verifySecret returns true for the correct secret', async () => {
+ const stored = await hashSecret('2815');
+ expect(await verifySecret('2815', stored)).toBe(true);
+ });
+
+ it('verifySecret returns false for the wrong secret', async () => {
+ const stored = await hashSecret('2815');
+ expect(await verifySecret('2816', stored)).toBe(false);
+ expect(await verifySecret('', stored)).toBe(false);
+ });
+
+ it('verifySecret returns false for a missing or malformed stored entry', async () => {
+ expect(await verifySecret('1234', null)).toBe(false);
+ expect(await verifySecret('1234', {})).toBe(false);
+ expect(await verifySecret('1234', { hash: 'x' })).toBe(false);
+ });
+});
diff --git a/src/lib/supabase.js b/src/lib/supabase.js
index 99f610b..0967fb4 100644
--- a/src/lib/supabase.js
+++ b/src/lib/supabase.js
@@ -3,8 +3,20 @@ import { createClient } from '@supabase/supabase-js';
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
-if (!supabaseUrl || !supabaseAnonKey) {
- console.warn('Supabase URL or Anon Key is missing. Please add VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY to your .env.local file.');
+const isConfigured =
+ typeof supabaseUrl === 'string' &&
+ typeof supabaseAnonKey === 'string' &&
+ supabaseUrl.length > 0 &&
+ supabaseAnonKey.length > 0 &&
+ !supabaseUrl.includes('your-project') &&
+ !supabaseAnonKey.includes('your-anon');
+
+if (!isConfigured) {
+ console.warn(
+ 'Supabase is not configured. Cloud sync is disabled. ' +
+ 'Set VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY in .env.local to enable.'
+ );
}
-export const supabase = createClient(supabaseUrl || 'https://your-project.supabase.co', supabaseAnonKey || 'your-anon-key');
+export const supabase = isConfigured ? createClient(supabaseUrl, supabaseAnonKey) : null;
+export const isSupabaseConfigured = isConfigured;
diff --git a/src/screens/Login.jsx b/src/screens/Login.jsx
index a5353f3..f8bc76b 100644
--- a/src/screens/Login.jsx
+++ b/src/screens/Login.jsx
@@ -4,16 +4,21 @@ import { motion, AnimatePresence } from 'framer-motion';
import { Users, User, ArrowRight, ShieldCheck, Coins, ChevronLeft, Delete, ScanFace, CheckCircle2 } from 'lucide-react';
const Login = () => {
- const { setCurrentUser, userBiometrics } = useStore();
+ const { setCurrentUser, userBiometrics, hasUserPin, setUserPin, verifyUserPin } = useStore();
const [selectedUser, setSelectedUser] = useState(null);
const [pin, setPin] = useState('');
const [error, setError] = useState(false);
const [status, setStatus] = useState('idle'); // 'idle', 'loading', 'scanning', 'success', 'failed'
+ // Setup flow: 'verify' (user has a PIN), 'setup-new' (no PIN yet), 'setup-confirm' (confirming new PIN)
+ const [mode, setMode] = useState('verify');
+ const [pendingPin, setPendingPin] = useState('');
const handleUserSelect = (user) => {
setSelectedUser(user);
setPin('');
setError(false);
+ setPendingPin('');
+ setMode(hasUserPin(user.id) ? 'verify' : 'setup-new');
};
const handlePinPress = (val) => {
@@ -21,7 +26,7 @@ const Login = () => {
const newPin = pin + val;
setPin(newPin);
if (newPin.length === 4) {
- validatePin(newPin);
+ handlePinComplete(newPin);
}
}
};
@@ -31,8 +36,42 @@ const Login = () => {
setError(false);
};
- const validatePin = (inputPin) => {
- if (inputPin === selectedUser.pin) {
+ const handlePinComplete = async (inputPin) => {
+ if (mode === 'setup-new') {
+ setPendingPin(inputPin);
+ setPin('');
+ setMode('setup-confirm');
+ return;
+ }
+ if (mode === 'setup-confirm') {
+ if (inputPin === pendingPin) {
+ try {
+ await setUserPin(selectedUser.id, inputPin);
+ handleLoginSuccess();
+ } catch (err) {
+ console.error('Failed to set PIN:', err);
+ setError(true);
+ setTimeout(() => {
+ setPin('');
+ setPendingPin('');
+ setMode('setup-new');
+ setError(false);
+ }, 500);
+ }
+ } else {
+ setError(true);
+ setTimeout(() => {
+ setPin('');
+ setPendingPin('');
+ setMode('setup-new');
+ setError(false);
+ }, 500);
+ }
+ return;
+ }
+ // mode === 'verify'
+ const ok = await verifyUserPin(selectedUser.id, inputPin);
+ if (ok) {
handleLoginSuccess();
} else {
setError(true);
@@ -154,8 +193,16 @@ const Login = () => {
}}>
{selectedUser.id === 'girl' ?
:
}
+ {mode === 'setup-new' && `Pick a 4-digit PIN for ${selectedUser.name}`}
+ {mode === 'setup-confirm' && 'Re-enter the PIN to confirm'}
+ {mode === 'verify' && `Identify yourself, ${selectedUser.name}`}
+
{/* PIN Dots */}
diff --git a/src/store/useStore.js b/src/store/useStore.js
index b086b9f..7c89b10 100644
--- a/src/store/useStore.js
+++ b/src/store/useStore.js
@@ -1,6 +1,7 @@
import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import { supabase } from '../lib/supabase';
+import { hashSecret, verifySecret } from '../lib/crypto';
const INITIAL_DATA = {
banks: [
@@ -22,8 +23,8 @@ const INITIAL_DATA = {
};
export const USERS = [
- { id: 'steven', name: 'Steven', color: '#007AFF', avatar: 'S', pin: '2815', role: 'Owner' },
- { id: 'girl', name: 'Priscilla', color: '#FF3B30', avatar: 'G', pin: '2424', role: 'Family' }
+ { id: 'steven', name: 'Steven', color: '#007AFF', avatar: 'S', role: 'Owner' },
+ { id: 'girl', name: 'Priscilla', color: '#FF3B30', avatar: 'G', role: 'Family' }
];
export const useStore = create(
@@ -39,6 +40,7 @@ export const useStore = create(
theme: 'light',
userThemes: {}, // {userId: 'light' | 'dark'}
userBiometrics: {}, // {userId: boolean}
+ userPinHashes: {}, // {userId: {hash, salt, iterations}} โ never plaintext
lastActive: Date.now(),
isSyncing: false,
lastSyncedAt: null,
@@ -57,6 +59,21 @@ export const useStore = create(
});
},
logout: () => set({ currentUser: null, activeScreen: 'dashboard' }),
+ hasUserPin: (userId) => {
+ const entry = get().userPinHashes?.[userId];
+ return !!(entry && entry.hash && entry.salt);
+ },
+ setUserPin: async (userId, pin) => {
+ const entry = await hashSecret(pin);
+ set((state) => ({
+ userPinHashes: { ...state.userPinHashes, [userId]: entry }
+ }));
+ },
+ verifyUserPin: async (userId, pin) => {
+ const entry = get().userPinHashes?.[userId];
+ if (!entry) return false;
+ return verifySecret(pin, entry);
+ },
toggleTheme: () => {
const { theme, currentUser, userThemes } = get();
const newTheme = theme === 'light' ? 'dark' : 'light';
@@ -166,6 +183,16 @@ export const useStore = create(
return { data: newData };
}),
+ updateTransaction: (id, updates) => set((state) => {
+ const newData = {
+ ...state.data,
+ transactions: state.data.transactions.map(t =>
+ t.id === id ? { ...t, ...updates, id: t.id, userId: t.userId } : t
+ )
+ };
+ return { data: newData };
+ }),
+
deleteTransaction: (id) => set((state) => {
const newData = {
...state.data,
@@ -250,8 +277,9 @@ export const useStore = create(
syncWithSupabase: async () => {
const state = get();
if (!state.currentUser) return;
+ if (!supabase) return; // Cloud sync disabled (env not configured)
set({ isSyncing: true });
-
+
try {
const { data: dbData, error } = await supabase
.from('user_data')
@@ -310,13 +338,15 @@ export const useStore = create(
{
name: 'money-planner-storage',
storage: createJSONStorage(() => localStorage),
- partialize: (state) => ({
- data: state.data,
- currentUser: state.currentUser,
+ // currentUser is intentionally not persisted: auth must be re-established
+ // on every reload, matching the idle-timeout security model in App.jsx.
+ partialize: (state) => ({
+ data: state.data,
currency: state.currency,
theme: state.theme,
userThemes: state.userThemes,
- userBiometrics: state.userBiometrics
+ userBiometrics: state.userBiometrics,
+ userPinHashes: state.userPinHashes
})
}
)
diff --git a/src/store/useStore.test.js b/src/store/useStore.test.js
new file mode 100644
index 0000000..6645c5c
--- /dev/null
+++ b/src/store/useStore.test.js
@@ -0,0 +1,90 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useStore } from './useStore';
+
+const resetStore = () => {
+ useStore.setState({
+ currentUser: { id: 'steven' },
+ data: {
+ banks: [{ id: 1, name: 'Bank TWD', value: 1000, currency: 'TWD', userId: 'steven' }],
+ transactions: [],
+ savingsGoals: [],
+ budgets: [],
+ customCategories: [],
+ subscriptions: [],
+ bills: [],
+ emergencyFund: 0
+ },
+ userPinHashes: {}
+ });
+};
+
+describe('useStore transactions', () => {
+ beforeEach(resetStore);
+
+ it('addTransaction prepends a transaction with id + userId + date', () => {
+ useStore.getState().addTransaction({
+ type: 'expense',
+ category: 'Food',
+ amount: 50,
+ bankId: 1
+ });
+ const txns = useStore.getState().data.transactions;
+ expect(txns).toHaveLength(1);
+ expect(txns[0].userId).toBe('steven');
+ expect(txns[0].amount).toBe(50);
+ expect(txns[0].id).toBeDefined();
+ expect(txns[0].date).toMatch(/^\d{4}-\d{2}-\d{2}$/);
+ });
+
+ it('updateTransaction merges fields but preserves id and userId', () => {
+ useStore.getState().addTransaction({
+ type: 'expense', category: 'Food', amount: 50, bankId: 1
+ });
+ const original = useStore.getState().data.transactions[0];
+ useStore.getState().updateTransaction(original.id, {
+ amount: 75, category: 'Transport', id: 999, userId: 'attacker'
+ });
+ const updated = useStore.getState().data.transactions[0];
+ expect(updated.id).toBe(original.id);
+ expect(updated.userId).toBe('steven');
+ expect(updated.amount).toBe(75);
+ expect(updated.category).toBe('Transport');
+ });
+
+ it('updateTransaction is a no-op when id is unknown', () => {
+ useStore.getState().addTransaction({
+ type: 'expense', category: 'Food', amount: 50, bankId: 1
+ });
+ const before = useStore.getState().data.transactions;
+ useStore.getState().updateTransaction(99999, { amount: 0 });
+ expect(useStore.getState().data.transactions).toEqual(before);
+ });
+
+ it('deleteTransaction removes a transaction by id', () => {
+ useStore.getState().addTransaction({
+ type: 'expense', category: 'Food', amount: 50, bankId: 1
+ });
+ const id = useStore.getState().data.transactions[0].id;
+ useStore.getState().deleteTransaction(id);
+ expect(useStore.getState().data.transactions).toHaveLength(0);
+ });
+});
+
+describe('useStore pin actions', () => {
+ beforeEach(resetStore);
+
+ it('hasUserPin is false before a PIN is set', () => {
+ expect(useStore.getState().hasUserPin('steven')).toBe(false);
+ });
+
+ it('setUserPin stores a hash and verifyUserPin round-trips', async () => {
+ await useStore.getState().setUserPin('steven', '2815');
+ expect(useStore.getState().hasUserPin('steven')).toBe(true);
+ expect(await useStore.getState().verifyUserPin('steven', '2815')).toBe(true);
+ expect(await useStore.getState().verifyUserPin('steven', '0000')).toBe(false);
+ });
+
+ it('verifyUserPin returns false when no hash exists', async () => {
+ expect(await useStore.getState().verifyUserPin('ghost', '0000')).toBe(false);
+ });
+});
diff --git a/test_ocr.js b/test_ocr.js
deleted file mode 100644
index 2b74cc2..0000000
--- a/test_ocr.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Tesseract from 'tesseract.js';
-import path from 'path';
-
-// Use the user-provided receipt image
-const imagePath = 'd:\\Money Planner\\test_receipt.png';
-
-console.log('Testing OCR on:', imagePath);
-console.log('---');
-
-Tesseract.recognize(
- imagePath,
- 'chi_tra+eng',
- {
- logger: m => {
- if (m.status === 'recognizing text') {
- process.stdout.write(`\rProgress: ${Math.round(m.progress * 100)}%`);
- }
- }
- }
-).then(({ data: { text } }) => {
- console.log('\n\n=== RAW OCR TEXT ===');
- console.log(text);
- console.log('=== END RAW TEXT ===\n');
-
- // Now test parsing
- const lines = text.split('\n').map(l => l.trim()).filter(l => l.length > 0);
- console.log('=== PARSED LINES ===');
- lines.forEach((line, i) => console.log(`${i}: "${line}"`));
- console.log('=== END LINES ===\n');
-
-}).catch(err => {
- console.error('OCR Error:', err);
-});
diff --git a/vite.config.js b/vite.config.js
index beafd9f..ff5bd22 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -42,4 +42,9 @@ export default defineConfig({
host: true,
port: 5173,
},
+ test: {
+ environment: 'jsdom',
+ globals: true,
+ include: ['src/**/*.test.{js,jsx}'],
+ },
})