diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md new file mode 100644 index 0000000..df0bc85 --- /dev/null +++ b/.github/copilot-instructions.md @@ -0,0 +1,17 @@ +# Envelope Budgeting App - Project Setup + +- [x] Verify that the copilot-instructions.md file in the .github directory is created. +- [x] Clarify Project Requirements: Envelope budgeting app with React/Next.js +- [x] Scaffold the Project: Next.js project created with TypeScript, Tailwind CSS, ESLint, and App Router +- [x] Customize the Project: Created envelope budgeting dashboard with React components, state management, and Tailwind styling +- [x] Install Required Extensions: No extensions specified in project setup info +- [x] Compile the Project: Project compiled successfully without errors +- [x] Create and Run Task: Standard Next.js scripts available, no custom task needed +- [x] Launch the Project: Development server started successfully +- [x] Ensure Documentation is Complete: README.md updated with project information and copilot-instructions.md cleaned up + +## Development Guidelines + +- Work through each checklist item systematically. +- Keep communication concise and focused. +- Follow development best practices. \ No newline at end of file diff --git a/README.md b/README.md index e215bc4..f72929d 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,125 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). +# Envelope Budgeting App + +A modern web-based envelope budgeting application built with Next.js, TypeScript, and Tailwind CSS. This app helps you manage your finances using the traditional envelope budgeting method in a digital format. + +## Features + +- **Envelope Management**: Create and manage budget envelopes for different spending categories +- **Visual Progress Tracking**: See spending progress with color-coded progress bars +- **Transaction History**: Track and view recent transactions +- **Data Input Options**: + - **Manual Entry**: Add individual transactions with amount, description, date, and envelope assignment + - **File Import**: Import transactions from bank exports (CSV, OFX, QFX, QBO formats) +- **Transaction Editing**: Edit existing transactions with full details +- **Envelope Creation**: Add new budget envelopes with custom colors and allocations +- **Data Export**: Export all data to CSV or JSON formats for backup or analysis +- **Budget Overview**: Monitor total allocated, spent, and remaining amounts +- **Responsive Design**: Works seamlessly on desktop and mobile devices ## Getting Started -First, run the development server: +### Prerequisites +- Node.js 18+ and npm + +### Installation + +1. Clone the repository: ```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev +git clone +cd budget ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +2. Install dependencies: +```bash +npm install +``` -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. +3. Run the development server: +```bash +npm run dev +``` -This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. +4. Open [http://localhost:7654](http://localhost:7654) in your browser. -## Learn More +## Available Scripts -To learn more about Next.js, take a look at the following resources: +- `npm run dev` - Start the development server +- `npm run build` - Build the project for production +- `npm run start` - Start the production server +- `npm run lint` - Run ESLint for code quality checks -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. +## Project Structure -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! +``` +src/ +├── app/ +│ ├── layout.tsx # Root layout component +│ ├── page.tsx # Main budgeting dashboard +│ └── globals.css # Global styles +public/ # Static assets +``` -## Deploy on Vercel +## Technologies Used -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. +- **Next.js 16** - React framework with App Router +- **TypeScript** - Type-safe JavaScript +- **Tailwind CSS** - Utility-first CSS framework +- **React 19** - UI library +- **ESLint** - Code linting -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. +## How to Use + +1. **View Dashboard**: The main page shows your budget overview and envelope cards +2. **Add Transactions**: + - **Manual Entry**: Click "Manual Entry" and fill in transaction details + - **File Import**: Click "Import from File", select your bank export format, and upload the file +3. **Monitor Envelopes**: Each envelope displays allocated amount, spent amount, and remaining balance +4. **Track Progress**: Visual progress bars show spending percentage for each envelope +5. **View Transactions**: Recent transactions are listed with envelope associations + +## Data Import + +### Supported File Formats + +- **CSV**: Comma-separated values with columns: Date, Amount, Description, Category (optional) +- **OFX/QFX**: Standard bank export formats from most financial institutions +- **QBO**: QuickBooks Online format +- **PDF**: Coming soon (statement parsing) + +### CSV Format Example +```csv +Date,Amount,Description,Category +2024-01-15,-25.50,Weekly groceries,Groceries +2024-01-16,-12.00,Gas station,Transportation +2024-01-17,1500.00,Salary deposit,Income +``` + +## Advanced Features + +### Transaction Editing +- Click the edit icon (pencil) next to any transaction to modify its details +- Update amount, description, date, and envelope assignment +- Changes automatically update envelope spending calculations + +### Envelope Management +- Click "Add Envelope" to create new budget categories +- Choose from multiple colors for visual organization +- Set custom budget allocations for each envelope + +### Data Export +- Export all transactions and envelopes to CSV for spreadsheet analysis +- Export to JSON format for data backup or integration +- Includes complete transaction history and envelope details + +## Contributing + +1. Fork the repository +2. Create a feature branch +3. Make your changes +4. Run tests and linting +5. Submit a pull request + +## License + +This project is licensed under the MIT License. diff --git a/firestore.rules b/firestore.rules new file mode 100644 index 0000000..86cbd0b --- /dev/null +++ b/firestore.rules @@ -0,0 +1,14 @@ +rules_version = '2'; +service cloud.firestore { + match /databases/{database}/documents { + // Allow authenticated users to read and write their own data + match /users/{userId} { + allow read, write: if request.auth != null && request.auth.uid == userId; + } + + // Allow public read/write for development (less secure) + match /{document=**} { + allow read, write: if true; + } + } +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 1a5b696..7d69fd8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "budget", "version": "0.1.0", "dependencies": { + "firebase": "^12.4.0", "next": "16.0.0", "react": "19.2.0", "react-dom": "19.2.0" @@ -454,6 +455,645 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@firebase/ai": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@firebase/ai/-/ai-2.4.0.tgz", + "integrity": "sha512-YilG6AJ/nYpCKtxZyvEzBRAQv5bU+2tBOKX4Ps0rNNSdxN39aT37kGhjATbk1kq1z5Lq7mkWglw/ajAF3lOWUg==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/app-check-interop-types": "0.3.3", + "@firebase/component": "0.7.0", + "@firebase/logger": "0.5.0", + "@firebase/util": "1.13.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "@firebase/app": "0.x", + "@firebase/app-types": "0.x" + } + }, + "node_modules/@firebase/analytics": { + "version": "0.10.19", + "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.10.19.tgz", + "integrity": "sha512-3wU676fh60gaiVYQEEXsbGS4HbF2XsiBphyvvqDbtC1U4/dO4coshbYktcCHq+HFaGIK07iHOh4pME0hEq1fcg==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.7.0", + "@firebase/installations": "0.6.19", + "@firebase/logger": "0.5.0", + "@firebase/util": "1.13.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@firebase/app": "0.x" + } + }, + "node_modules/@firebase/analytics-compat": { + "version": "0.2.25", + "resolved": "https://registry.npmjs.org/@firebase/analytics-compat/-/analytics-compat-0.2.25.tgz", + "integrity": "sha512-fdzoaG0BEKbqksRDhmf4JoyZf16Wosrl0Y7tbZtJyVDOOwziE0vrFjmZuTdviL0yhak+Nco6rMsUUbkbD+qb6Q==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/analytics": "0.10.19", + "@firebase/analytics-types": "0.8.3", + "@firebase/component": "0.7.0", + "@firebase/util": "1.13.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@firebase/app-compat": "0.x" + } + }, + "node_modules/@firebase/analytics-types": { + "version": "0.8.3", + "resolved": "https://registry.npmjs.org/@firebase/analytics-types/-/analytics-types-0.8.3.tgz", + "integrity": "sha512-VrIp/d8iq2g501qO46uGz3hjbDb8xzYMrbu8Tp0ovzIzrvJZ2fvmj649gTjge/b7cCCcjT0H37g1gVtlNhnkbg==", + "license": "Apache-2.0" + }, + "node_modules/@firebase/app": { + "version": "0.14.4", + "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.14.4.tgz", + "integrity": "sha512-pUxEGmR+uu21OG/icAovjlu1fcYJzyVhhT0rsCrn+zi+nHtrS43Bp9KPn9KGa4NMspCUE++nkyiqziuIvJdwzw==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.7.0", + "@firebase/logger": "0.5.0", + "@firebase/util": "1.13.0", + "idb": "7.1.1", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=20.0.0" + } + }, + "node_modules/@firebase/app-check": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/@firebase/app-check/-/app-check-0.11.0.tgz", + "integrity": "sha512-XAvALQayUMBJo58U/rxW02IhsesaxxfWVmVkauZvGEz3vOAjMEQnzFlyblqkc2iAaO82uJ2ZVyZv9XzPfxjJ6w==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.7.0", + "@firebase/logger": "0.5.0", + "@firebase/util": "1.13.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "@firebase/app": "0.x" + } + }, + "node_modules/@firebase/app-check-compat": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@firebase/app-check-compat/-/app-check-compat-0.4.0.tgz", + "integrity": "sha512-UfK2Q8RJNjYM/8MFORltZRG9lJj11k0nW84rrffiKvcJxLf1jf6IEjCIkCamykHE73C6BwqhVfhIBs69GXQV0g==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/app-check": "0.11.0", + "@firebase/app-check-types": "0.5.3", + "@firebase/component": "0.7.0", + "@firebase/logger": "0.5.0", + "@firebase/util": "1.13.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "@firebase/app-compat": "0.x" + } + }, + "node_modules/@firebase/app-check-interop-types": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/@firebase/app-check-interop-types/-/app-check-interop-types-0.3.3.tgz", + "integrity": "sha512-gAlxfPLT2j8bTI/qfe3ahl2I2YcBQ8cFIBdhAQA4I2f3TndcO+22YizyGYuttLHPQEpWkhmpFW60VCFEPg4g5A==", + "license": "Apache-2.0" + }, + "node_modules/@firebase/app-check-types": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/@firebase/app-check-types/-/app-check-types-0.5.3.tgz", + "integrity": "sha512-hyl5rKSj0QmwPdsAxrI5x1otDlByQ7bvNvVt8G/XPO2CSwE++rmSVf3VEhaeOR4J8ZFaF0Z0NDSmLejPweZ3ng==", + "license": "Apache-2.0" + }, + "node_modules/@firebase/app-compat": { + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.5.4.tgz", + "integrity": "sha512-T7ifGmb+awJEcp542Ek4HtNfBxcBrnuk1ggUdqyFEdsXHdq7+wVlhvE6YukTL7NS8hIkEfL7TMAPx/uCNqt30g==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/app": "0.14.4", + "@firebase/component": "0.7.0", + "@firebase/logger": "0.5.0", + "@firebase/util": "1.13.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=20.0.0" + } + }, + "node_modules/@firebase/app-types": { + "version": "0.9.3", + "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.9.3.tgz", + "integrity": "sha512-kRVpIl4vVGJ4baogMDINbyrIOtOxqhkZQg4jTq3l8Lw6WSk0xfpEYzezFu+Kl4ve4fbPl79dvwRtaFqAC/ucCw==", + "license": "Apache-2.0" + }, + "node_modules/@firebase/auth": { + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-1.11.0.tgz", + "integrity": "sha512-5j7+ua93X+IRcJ1oMDTClTo85l7Xe40WSkoJ+shzPrX7OISlVWLdE1mKC57PSD+/LfAbdhJmvKixINBw2ESK6w==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.7.0", + "@firebase/logger": "0.5.0", + "@firebase/util": "1.13.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "@firebase/app": "0.x", + "@react-native-async-storage/async-storage": "^1.18.1" + }, + "peerDependenciesMeta": { + "@react-native-async-storage/async-storage": { + "optional": true + } + } + }, + "node_modules/@firebase/auth-compat": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@firebase/auth-compat/-/auth-compat-0.6.0.tgz", + "integrity": "sha512-J0lGSxXlG/lYVi45wbpPhcWiWUMXevY4fvLZsN1GHh+po7TZVng+figdHBVhFheaiipU8HZyc7ljw1jNojM2nw==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/auth": "1.11.0", + "@firebase/auth-types": "0.13.0", + "@firebase/component": "0.7.0", + "@firebase/util": "1.13.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "@firebase/app-compat": "0.x" + } + }, + "node_modules/@firebase/auth-interop-types": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/@firebase/auth-interop-types/-/auth-interop-types-0.2.4.tgz", + "integrity": "sha512-JPgcXKCuO+CWqGDnigBtvo09HeBs5u/Ktc2GaFj2m01hLarbxthLNm7Fk8iOP1aqAtXV+fnnGj7U28xmk7IwVA==", + "license": "Apache-2.0" + }, + "node_modules/@firebase/auth-types": { + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/@firebase/auth-types/-/auth-types-0.13.0.tgz", + "integrity": "sha512-S/PuIjni0AQRLF+l9ck0YpsMOdE8GO2KU6ubmBB7P+7TJUCQDa3R1dlgYm9UzGbbePMZsp0xzB93f2b/CgxMOg==", + "license": "Apache-2.0", + "peerDependencies": { + "@firebase/app-types": "0.x", + "@firebase/util": "1.x" + } + }, + "node_modules/@firebase/component": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/@firebase/component/-/component-0.7.0.tgz", + "integrity": "sha512-wR9En2A+WESUHexjmRHkqtaVH94WLNKt6rmeqZhSLBybg4Wyf0Umk04SZsS6sBq4102ZsDBFwoqMqJYj2IoDSg==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/util": "1.13.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=20.0.0" + } + }, + "node_modules/@firebase/data-connect": { + "version": "0.3.11", + "resolved": "https://registry.npmjs.org/@firebase/data-connect/-/data-connect-0.3.11.tgz", + "integrity": "sha512-G258eLzAD6im9Bsw+Qm1Z+P4x0PGNQ45yeUuuqe5M9B1rn0RJvvsQCRHXgE52Z+n9+WX1OJd/crcuunvOGc7Vw==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/auth-interop-types": "0.2.4", + "@firebase/component": "0.7.0", + "@firebase/logger": "0.5.0", + "@firebase/util": "1.13.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@firebase/app": "0.x" + } + }, + "node_modules/@firebase/database": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@firebase/database/-/database-1.1.0.tgz", + "integrity": "sha512-gM6MJFae3pTyNLoc9VcJNuaUDej0ctdjn3cVtILo3D5lpp0dmUHHLFN/pUKe7ImyeB1KAvRlEYxvIHNF04Filg==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/app-check-interop-types": "0.3.3", + "@firebase/auth-interop-types": "0.2.4", + "@firebase/component": "0.7.0", + "@firebase/logger": "0.5.0", + "@firebase/util": "1.13.0", + "faye-websocket": "0.11.4", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=20.0.0" + } + }, + "node_modules/@firebase/database-compat": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@firebase/database-compat/-/database-compat-2.1.0.tgz", + "integrity": "sha512-8nYc43RqxScsePVd1qe1xxvWNf0OBnbwHxmXJ7MHSuuTVYFO3eLyLW3PiCKJ9fHnmIz4p4LbieXwz+qtr9PZDg==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.7.0", + "@firebase/database": "1.1.0", + "@firebase/database-types": "1.0.16", + "@firebase/logger": "0.5.0", + "@firebase/util": "1.13.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=20.0.0" + } + }, + "node_modules/@firebase/database-types": { + "version": "1.0.16", + "resolved": "https://registry.npmjs.org/@firebase/database-types/-/database-types-1.0.16.tgz", + "integrity": "sha512-xkQLQfU5De7+SPhEGAXFBnDryUWhhlFXelEg2YeZOQMCdoe7dL64DDAd77SQsR+6uoXIZY5MB4y/inCs4GTfcw==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/app-types": "0.9.3", + "@firebase/util": "1.13.0" + } + }, + "node_modules/@firebase/firestore": { + "version": "4.9.2", + "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-4.9.2.tgz", + "integrity": "sha512-iuA5+nVr/IV/Thm0Luoqf2mERUvK9g791FZpUJV1ZGXO6RL2/i/WFJUj5ZTVXy5pRjpWYO+ZzPcReNrlilmztA==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.7.0", + "@firebase/logger": "0.5.0", + "@firebase/util": "1.13.0", + "@firebase/webchannel-wrapper": "1.0.5", + "@grpc/grpc-js": "~1.9.0", + "@grpc/proto-loader": "^0.7.8", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "@firebase/app": "0.x" + } + }, + "node_modules/@firebase/firestore-compat": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/@firebase/firestore-compat/-/firestore-compat-0.4.2.tgz", + "integrity": "sha512-cy7ov6SpFBx+PHwFdOOjbI7kH00uNKmIFurAn560WiPCZXy9EMnil1SOG7VF4hHZKdenC+AHtL4r3fNpirpm0w==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.7.0", + "@firebase/firestore": "4.9.2", + "@firebase/firestore-types": "3.0.3", + "@firebase/util": "1.13.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "@firebase/app-compat": "0.x" + } + }, + "node_modules/@firebase/firestore-types": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-3.0.3.tgz", + "integrity": "sha512-hD2jGdiWRxB/eZWF89xcK9gF8wvENDJkzpVFb4aGkzfEaKxVRD1kjz1t1Wj8VZEp2LCB53Yx1zD8mrhQu87R6Q==", + "license": "Apache-2.0", + "peerDependencies": { + "@firebase/app-types": "0.x", + "@firebase/util": "1.x" + } + }, + "node_modules/@firebase/functions": { + "version": "0.13.1", + "resolved": "https://registry.npmjs.org/@firebase/functions/-/functions-0.13.1.tgz", + "integrity": "sha512-sUeWSb0rw5T+6wuV2o9XNmh9yHxjFI9zVGFnjFi+n7drTEWpl7ZTz1nROgGrSu472r+LAaj+2YaSicD4R8wfbw==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/app-check-interop-types": "0.3.3", + "@firebase/auth-interop-types": "0.2.4", + "@firebase/component": "0.7.0", + "@firebase/messaging-interop-types": "0.2.3", + "@firebase/util": "1.13.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "@firebase/app": "0.x" + } + }, + "node_modules/@firebase/functions-compat": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@firebase/functions-compat/-/functions-compat-0.4.1.tgz", + "integrity": "sha512-AxxUBXKuPrWaVNQ8o1cG1GaCAtXT8a0eaTDfqgS5VsRYLAR0ALcfqDLwo/QyijZj1w8Qf8n3Qrfy/+Im245hOQ==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.7.0", + "@firebase/functions": "0.13.1", + "@firebase/functions-types": "0.6.3", + "@firebase/util": "1.13.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "@firebase/app-compat": "0.x" + } + }, + "node_modules/@firebase/functions-types": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/@firebase/functions-types/-/functions-types-0.6.3.tgz", + "integrity": "sha512-EZoDKQLUHFKNx6VLipQwrSMh01A1SaL3Wg6Hpi//x6/fJ6Ee4hrAeswK99I5Ht8roiniKHw4iO0B1Oxj5I4plg==", + "license": "Apache-2.0" + }, + "node_modules/@firebase/installations": { + "version": "0.6.19", + "resolved": "https://registry.npmjs.org/@firebase/installations/-/installations-0.6.19.tgz", + "integrity": "sha512-nGDmiwKLI1lerhwfwSHvMR9RZuIH5/8E3kgUWnVRqqL7kGVSktjLTWEMva7oh5yxQ3zXfIlIwJwMcaM5bK5j8Q==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.7.0", + "@firebase/util": "1.13.0", + "idb": "7.1.1", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@firebase/app": "0.x" + } + }, + "node_modules/@firebase/installations-compat": { + "version": "0.2.19", + "resolved": "https://registry.npmjs.org/@firebase/installations-compat/-/installations-compat-0.2.19.tgz", + "integrity": "sha512-khfzIY3EI5LePePo7vT19/VEIH1E3iYsHknI/6ek9T8QCozAZshWT9CjlwOzZrKvTHMeNcbpo/VSOSIWDSjWdQ==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.7.0", + "@firebase/installations": "0.6.19", + "@firebase/installations-types": "0.5.3", + "@firebase/util": "1.13.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@firebase/app-compat": "0.x" + } + }, + "node_modules/@firebase/installations-types": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/@firebase/installations-types/-/installations-types-0.5.3.tgz", + "integrity": "sha512-2FJI7gkLqIE0iYsNQ1P751lO3hER+Umykel+TkLwHj6plzWVxqvfclPUZhcKFVQObqloEBTmpi2Ozn7EkCABAA==", + "license": "Apache-2.0", + "peerDependencies": { + "@firebase/app-types": "0.x" + } + }, + "node_modules/@firebase/logger": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.5.0.tgz", + "integrity": "sha512-cGskaAvkrnh42b3BA3doDWeBmuHFO/Mx5A83rbRDYakPjO9bJtRL3dX7javzc2Rr/JHZf4HlterTW2lUkfeN4g==", + "license": "Apache-2.0", + "dependencies": { + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=20.0.0" + } + }, + "node_modules/@firebase/messaging": { + "version": "0.12.23", + "resolved": "https://registry.npmjs.org/@firebase/messaging/-/messaging-0.12.23.tgz", + "integrity": "sha512-cfuzv47XxqW4HH/OcR5rM+AlQd1xL/VhuaeW/wzMW1LFrsFcTn0GND/hak1vkQc2th8UisBcrkVcQAnOnKwYxg==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.7.0", + "@firebase/installations": "0.6.19", + "@firebase/messaging-interop-types": "0.2.3", + "@firebase/util": "1.13.0", + "idb": "7.1.1", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@firebase/app": "0.x" + } + }, + "node_modules/@firebase/messaging-compat": { + "version": "0.2.23", + "resolved": "https://registry.npmjs.org/@firebase/messaging-compat/-/messaging-compat-0.2.23.tgz", + "integrity": "sha512-SN857v/kBUvlQ9X/UjAqBoQ2FEaL1ZozpnmL1ByTe57iXkmnVVFm9KqAsTfmf+OEwWI4kJJe9NObtN/w22lUgg==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.7.0", + "@firebase/messaging": "0.12.23", + "@firebase/util": "1.13.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@firebase/app-compat": "0.x" + } + }, + "node_modules/@firebase/messaging-interop-types": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/@firebase/messaging-interop-types/-/messaging-interop-types-0.2.3.tgz", + "integrity": "sha512-xfzFaJpzcmtDjycpDeCUj0Ge10ATFi/VHVIvEEjDNc3hodVBQADZ7BWQU7CuFpjSHE+eLuBI13z5F/9xOoGX8Q==", + "license": "Apache-2.0" + }, + "node_modules/@firebase/performance": { + "version": "0.7.9", + "resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.7.9.tgz", + "integrity": "sha512-UzybENl1EdM2I1sjYm74xGt/0JzRnU/0VmfMAKo2LSpHJzaj77FCLZXmYQ4oOuE+Pxtt8Wy2BVJEENiZkaZAzQ==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.7.0", + "@firebase/installations": "0.6.19", + "@firebase/logger": "0.5.0", + "@firebase/util": "1.13.0", + "tslib": "^2.1.0", + "web-vitals": "^4.2.4" + }, + "peerDependencies": { + "@firebase/app": "0.x" + } + }, + "node_modules/@firebase/performance-compat": { + "version": "0.2.22", + "resolved": "https://registry.npmjs.org/@firebase/performance-compat/-/performance-compat-0.2.22.tgz", + "integrity": "sha512-xLKxaSAl/FVi10wDX/CHIYEUP13jXUjinL+UaNXT9ByIvxII5Ne5150mx6IgM8G6Q3V+sPiw9C8/kygkyHUVxg==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.7.0", + "@firebase/logger": "0.5.0", + "@firebase/performance": "0.7.9", + "@firebase/performance-types": "0.2.3", + "@firebase/util": "1.13.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@firebase/app-compat": "0.x" + } + }, + "node_modules/@firebase/performance-types": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/@firebase/performance-types/-/performance-types-0.2.3.tgz", + "integrity": "sha512-IgkyTz6QZVPAq8GSkLYJvwSLr3LS9+V6vNPQr0x4YozZJiLF5jYixj0amDtATf1X0EtYHqoPO48a9ija8GocxQ==", + "license": "Apache-2.0" + }, + "node_modules/@firebase/remote-config": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/@firebase/remote-config/-/remote-config-0.7.0.tgz", + "integrity": "sha512-dX95X6WlW7QlgNd7aaGdjAIZUiQkgWgNS+aKNu4Wv92H1T8Ue/NDUjZHd9xb8fHxLXIHNZeco9/qbZzr500MjQ==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.7.0", + "@firebase/installations": "0.6.19", + "@firebase/logger": "0.5.0", + "@firebase/util": "1.13.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@firebase/app": "0.x" + } + }, + "node_modules/@firebase/remote-config-compat": { + "version": "0.2.20", + "resolved": "https://registry.npmjs.org/@firebase/remote-config-compat/-/remote-config-compat-0.2.20.tgz", + "integrity": "sha512-P/ULS9vU35EL9maG7xp66uljkZgcPMQOxLj3Zx2F289baTKSInE6+YIkgHEi1TwHoddC/AFePXPpshPlEFkbgg==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.7.0", + "@firebase/logger": "0.5.0", + "@firebase/remote-config": "0.7.0", + "@firebase/remote-config-types": "0.5.0", + "@firebase/util": "1.13.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@firebase/app-compat": "0.x" + } + }, + "node_modules/@firebase/remote-config-types": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/@firebase/remote-config-types/-/remote-config-types-0.5.0.tgz", + "integrity": "sha512-vI3bqLoF14L/GchtgayMiFpZJF+Ao3uR8WCde0XpYNkSokDpAKca2DxvcfeZv7lZUqkUwQPL2wD83d3vQ4vvrg==", + "license": "Apache-2.0" + }, + "node_modules/@firebase/storage": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/@firebase/storage/-/storage-0.14.0.tgz", + "integrity": "sha512-xWWbb15o6/pWEw8H01UQ1dC5U3rf8QTAzOChYyCpafV6Xki7KVp3Yaw2nSklUwHEziSWE9KoZJS7iYeyqWnYFA==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.7.0", + "@firebase/util": "1.13.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "@firebase/app": "0.x" + } + }, + "node_modules/@firebase/storage-compat": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@firebase/storage-compat/-/storage-compat-0.4.0.tgz", + "integrity": "sha512-vDzhgGczr1OfcOy285YAPur5pWDEvD67w4thyeCUh6Ys0izN9fNYtA1MJERmNBfqjqu0lg0FM5GLbw0Il21M+g==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.7.0", + "@firebase/storage": "0.14.0", + "@firebase/storage-types": "0.8.3", + "@firebase/util": "1.13.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "@firebase/app-compat": "0.x" + } + }, + "node_modules/@firebase/storage-types": { + "version": "0.8.3", + "resolved": "https://registry.npmjs.org/@firebase/storage-types/-/storage-types-0.8.3.tgz", + "integrity": "sha512-+Muk7g9uwngTpd8xn9OdF/D48uiQ7I1Fae7ULsWPuKoCH3HU7bfFPhxtJYzyhjdniowhuDpQcfPmuNRAqZEfvg==", + "license": "Apache-2.0", + "peerDependencies": { + "@firebase/app-types": "0.x", + "@firebase/util": "1.x" + } + }, + "node_modules/@firebase/util": { + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.13.0.tgz", + "integrity": "sha512-0AZUyYUfpMNcztR5l09izHwXkZpghLgCUaAGjtMwXnCg3bj4ml5VgiwqOMOxJ+Nw4qN/zJAaOQBcJ7KGkWStqQ==", + "hasInstallScript": true, + "license": "Apache-2.0", + "dependencies": { + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=20.0.0" + } + }, + "node_modules/@firebase/webchannel-wrapper": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-1.0.5.tgz", + "integrity": "sha512-+uGNN7rkfn41HLO0vekTFhTxk61eKa8mTpRGLO0QSqlQdKvIoGAvLp3ppdVIWbTGYJWM6Kp0iN+PjMIOcnVqTw==", + "license": "Apache-2.0" + }, + "node_modules/@grpc/grpc-js": { + "version": "1.9.15", + "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.15.tgz", + "integrity": "sha512-nqE7Hc0AzI+euzUwDAy0aY5hCp10r734gMGRdU+qOPX0XSceI2ULrcXB5U2xSc5VkWwalCj4M7GzCAygZl2KoQ==", + "license": "Apache-2.0", + "dependencies": { + "@grpc/proto-loader": "^0.7.8", + "@types/node": ">=12.12.47" + }, + "engines": { + "node": "^8.13.0 || >=10.10.0" + } + }, + "node_modules/@grpc/proto-loader": { + "version": "0.7.15", + "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.7.15.tgz", + "integrity": "sha512-tMXdRCfYVixjuFK+Hk0Q1s38gV9zDiDJfWL3h1rv4Qc39oILCu1TRTDt7+fGUI8K4G1Fj125Hx/ru3azECWTyQ==", + "license": "Apache-2.0", + "dependencies": { + "lodash.camelcase": "^4.3.0", + "long": "^5.0.0", + "protobufjs": "^7.2.5", + "yargs": "^17.7.2" + }, + "bin": { + "proto-loader-gen-types": "build/bin/proto-loader-gen-types.js" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", @@ -1189,6 +1829,70 @@ "node": ">=12.4.0" } }, + "node_modules/@protobufjs/aspromise": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz", + "integrity": "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==", + "license": "BSD-3-Clause" + }, + "node_modules/@protobufjs/base64": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz", + "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==", + "license": "BSD-3-Clause" + }, + "node_modules/@protobufjs/codegen": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz", + "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==", + "license": "BSD-3-Clause" + }, + "node_modules/@protobufjs/eventemitter": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz", + "integrity": "sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==", + "license": "BSD-3-Clause" + }, + "node_modules/@protobufjs/fetch": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz", + "integrity": "sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==", + "license": "BSD-3-Clause", + "dependencies": { + "@protobufjs/aspromise": "^1.1.1", + "@protobufjs/inquire": "^1.1.0" + } + }, + "node_modules/@protobufjs/float": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz", + "integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==", + "license": "BSD-3-Clause" + }, + "node_modules/@protobufjs/inquire": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz", + "integrity": "sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==", + "license": "BSD-3-Clause" + }, + "node_modules/@protobufjs/path": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz", + "integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==", + "license": "BSD-3-Clause" + }, + "node_modules/@protobufjs/pool": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz", + "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==", + "license": "BSD-3-Clause" + }, + "node_modules/@protobufjs/utf8": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz", + "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==", + "license": "BSD-3-Clause" + }, "node_modules/@rtsao/scc": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz", @@ -1512,7 +2216,6 @@ "version": "20.19.23", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.23.tgz", "integrity": "sha512-yIdlVVVHXpmqRhtyovZAcSy0MiPcYWGkoO4CGe/+jpP0hmNuihm4XhHbADpK++MsiLHP5MVlv+bcgdF99kSiFQ==", - "dev": true, "license": "MIT", "dependencies": { "undici-types": "~6.21.0" @@ -2148,11 +2851,19 @@ "url": "https://github.com/sponsors/epoberezkin" } }, + "node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/ansi-styles": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, "license": "MIT", "dependencies": { "color-convert": "^2.0.1" @@ -2582,11 +3293,24 @@ "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==", "license": "MIT" }, + "node_modules/cliui": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", + "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==", + "license": "ISC", + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.1", + "wrap-ansi": "^7.0.0" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, "license": "MIT", "dependencies": { "color-name": "~1.1.4" @@ -2599,7 +3323,6 @@ "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true, "license": "MIT" }, "node_modules/concat-map": { @@ -3007,7 +3730,6 @@ "version": "3.2.0", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz", "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==", - "dev": true, "license": "MIT", "engines": { "node": ">=6" @@ -3511,6 +4233,18 @@ "reusify": "^1.0.4" } }, + "node_modules/faye-websocket": { + "version": "0.11.4", + "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz", + "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==", + "license": "Apache-2.0", + "dependencies": { + "websocket-driver": ">=0.5.1" + }, + "engines": { + "node": ">=0.8.0" + } + }, "node_modules/file-entry-cache": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz", @@ -3554,6 +4288,42 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/firebase": { + "version": "12.4.0", + "resolved": "https://registry.npmjs.org/firebase/-/firebase-12.4.0.tgz", + "integrity": "sha512-/chNgDQ6ppPPGOQO4jctxOa/5JeQxuhaxA7Y90K0I+n/wPfoO8mRveedhVUdo7ExLcWUivnnow/ouSLYSI5Icw==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/ai": "2.4.0", + "@firebase/analytics": "0.10.19", + "@firebase/analytics-compat": "0.2.25", + "@firebase/app": "0.14.4", + "@firebase/app-check": "0.11.0", + "@firebase/app-check-compat": "0.4.0", + "@firebase/app-compat": "0.5.4", + "@firebase/app-types": "0.9.3", + "@firebase/auth": "1.11.0", + "@firebase/auth-compat": "0.6.0", + "@firebase/data-connect": "0.3.11", + "@firebase/database": "1.1.0", + "@firebase/database-compat": "2.1.0", + "@firebase/firestore": "4.9.2", + "@firebase/firestore-compat": "0.4.2", + "@firebase/functions": "0.13.1", + "@firebase/functions-compat": "0.4.1", + "@firebase/installations": "0.6.19", + "@firebase/installations-compat": "0.2.19", + "@firebase/messaging": "0.12.23", + "@firebase/messaging-compat": "0.2.23", + "@firebase/performance": "0.7.9", + "@firebase/performance-compat": "0.2.22", + "@firebase/remote-config": "0.7.0", + "@firebase/remote-config-compat": "0.2.20", + "@firebase/storage": "0.14.0", + "@firebase/storage-compat": "0.4.0", + "@firebase/util": "1.13.0" + } + }, "node_modules/flat-cache": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz", @@ -3652,6 +4422,15 @@ "node": ">=6.9.0" } }, + "node_modules/get-caller-file": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", + "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", + "license": "ISC", + "engines": { + "node": "6.* || 8.* || >= 10.*" + } + }, "node_modules/get-intrinsic": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz", @@ -3903,6 +4682,18 @@ "hermes-estree": "0.25.1" } }, + "node_modules/http-parser-js": { + "version": "0.5.10", + "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.10.tgz", + "integrity": "sha512-Pysuw9XpUq5dVc/2SMHpuTY01RFl8fttgcyunjL7eEMhGM3cI4eOmiCycJDVCo/7O7ClfQD3SaI6ftDzqOXYMA==", + "license": "MIT" + }, + "node_modules/idb": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz", + "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==", + "license": "ISC" + }, "node_modules/ignore": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", @@ -4139,6 +4930,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/is-generator-function": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz", @@ -4816,6 +5616,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash.camelcase": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz", + "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==", + "license": "MIT" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -4823,6 +5629,12 @@ "dev": true, "license": "MIT" }, + "node_modules/long": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz", + "integrity": "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==", + "license": "Apache-2.0" + }, "node_modules/loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -5359,6 +6171,30 @@ "react-is": "^16.13.1" } }, + "node_modules/protobufjs": { + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.5.4.tgz", + "integrity": "sha512-CvexbZtbov6jW2eXAvLukXjXUW1TzFaivC46BpWc/3BpcCysb5Vffu+B3XHMm8lVEuy2Mm4XGex8hBSg1yapPg==", + "hasInstallScript": true, + "license": "BSD-3-Clause", + "dependencies": { + "@protobufjs/aspromise": "^1.1.2", + "@protobufjs/base64": "^1.1.2", + "@protobufjs/codegen": "^2.0.4", + "@protobufjs/eventemitter": "^1.1.0", + "@protobufjs/fetch": "^1.1.0", + "@protobufjs/float": "^1.0.2", + "@protobufjs/inquire": "^1.1.0", + "@protobufjs/path": "^1.1.2", + "@protobufjs/pool": "^1.1.0", + "@protobufjs/utf8": "^1.1.0", + "@types/node": ">=13.7.0", + "long": "^5.0.0" + }, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -5462,6 +6298,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/require-directory": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", + "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/resolve": { "version": "1.22.11", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz", @@ -5558,6 +6403,26 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/safe-buffer": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT" + }, "node_modules/safe-push-apply": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz", @@ -5843,6 +6708,26 @@ "node": ">= 0.4" } }, + "node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "license": "MIT", + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/string-width/node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "license": "MIT" + }, "node_modules/string.prototype.includes": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz", @@ -5956,6 +6841,18 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "license": "MIT", + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/strip-bom": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", @@ -6307,7 +7204,6 @@ "version": "6.21.0", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz", "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==", - "dev": true, "license": "MIT" }, "node_modules/unrs-resolver": { @@ -6386,6 +7282,35 @@ "punycode": "^2.1.0" } }, + "node_modules/web-vitals": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz", + "integrity": "sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==", + "license": "Apache-2.0" + }, + "node_modules/websocket-driver": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz", + "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==", + "license": "Apache-2.0", + "dependencies": { + "http-parser-js": ">=0.5.1", + "safe-buffer": ">=5.1.0", + "websocket-extensions": ">=0.1.1" + }, + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/websocket-extensions": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz", + "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==", + "license": "Apache-2.0", + "engines": { + "node": ">=0.8.0" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", @@ -6501,6 +7426,32 @@ "node": ">=0.10.0" } }, + "node_modules/wrap-ansi": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, + "node_modules/y18n": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", + "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", + "license": "ISC", + "engines": { + "node": ">=10" + } + }, "node_modules/yallist": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", @@ -6508,6 +7459,33 @@ "dev": true, "license": "ISC" }, + "node_modules/yargs": { + "version": "17.7.2", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", + "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==", + "license": "MIT", + "dependencies": { + "cliui": "^8.0.1", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.3", + "y18n": "^5.0.5", + "yargs-parser": "^21.1.1" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/yargs-parser": { + "version": "21.1.1", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz", + "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==", + "license": "ISC", + "engines": { + "node": ">=12" + } + }, "node_modules/yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", diff --git a/package.json b/package.json index b69ab76..4321341 100644 --- a/package.json +++ b/package.json @@ -3,25 +3,26 @@ "version": "0.1.0", "private": true, "scripts": { - "dev": "next dev", + "dev": "next dev -p 7654", "build": "next build", "start": "next start", "lint": "eslint" }, "dependencies": { + "firebase": "^12.4.0", + "next": "16.0.0", "react": "19.2.0", - "react-dom": "19.2.0", - "next": "16.0.0" + "react-dom": "19.2.0" }, "devDependencies": { - "babel-plugin-react-compiler": "1.0.0", - "typescript": "^5", + "@tailwindcss/postcss": "^4", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", - "@tailwindcss/postcss": "^4", - "tailwindcss": "^4", + "babel-plugin-react-compiler": "1.0.0", "eslint": "^9", - "eslint-config-next": "16.0.0" + "eslint-config-next": "16.0.0", + "tailwindcss": "^4", + "typescript": "^5" } } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f7fa87e..929e383 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -13,8 +13,8 @@ const geistMono = Geist_Mono({ }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "Envelope Budgeting App", + description: "A modern envelope budgeting application to help you manage your finances effectively", }; export default function RootLayout({ diff --git a/src/app/page.tsx b/src/app/page.tsx index 295f8fd..4161d93 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,65 +1,379 @@ -import Image from "next/image"; +'use client'; + +import { useState, useEffect } from 'react'; +import { onAuthStateChanged, signOut, User } from 'firebase/auth'; +import { auth } from '../lib/firebase'; +import { DataService } from '../lib/dataService'; +import DataInput from '../components/DataInput'; +import TransactionEdit from '../components/TransactionEdit'; +import EnvelopeCreate from '../components/EnvelopeCreate'; +import EnvelopeEdit from '../components/EnvelopeEdit'; +import DataExport from '../components/DataExport'; +import AuthModal from '../components/AuthModal'; +import SetupWizard from '../components/SetupWizard'; +import AccountManagement from '../components/AccountManagement'; +import GetPaid from '../components/GetPaid'; + +interface Account { + id: string; + name: string; + type: 'checking' | 'savings' | 'credit_card' | 'mortgage' | 'investment' | 'loan'; + balance: number; + institution?: string; + accountNumber?: string; + color: string; + isActive: boolean; + defaultPaycheckAmount?: number; +} + +interface Envelope { + id: string; + name: string; + allocated: number; + spent: number; + color: string; + accountId: string; + incomeAllocation?: number; // Percentage (0-100) or fixed amount if negative + incomeAllocationType?: 'percentage' | 'fixed'; // How to interpret incomeAllocation +} + +interface Transaction { + id: string; + envelopeId?: string; + amount: number; + description: string; + date: Date; + accountId: string; +} + +type ViewMode = 'dashboard' | 'accounts' | 'transactions' | 'envelopes' | 'settings'; + +export default function BudgetDashboard() { + const [currentView, setCurrentView] = useState('dashboard'); + const [user, setUser] = useState(null); + const [loading, setLoading] = useState(true); + const [showAuthModal, setShowAuthModal] = useState(false); + const [showSetupWizard, setShowSetupWizard] = useState(false); + + const [accounts, setAccounts] = useState([]); + const [envelopes, setEnvelopes] = useState([]); + const [transactions, setTransactions] = useState([]); + const [setupCompleted, setSetupCompleted] = useState(false); + + // Modal states + const [editingTransaction, setEditingTransaction] = useState(null); + const [showCreateEnvelope, setShowCreateEnvelope] = useState(false); + const [editingEnvelope, setEditingEnvelope] = useState(null); + + // Initialize Firebase auth listener + useEffect(() => { + const unsubscribe = onAuthStateChanged(auth, async (user) => { + setUser(user); + if (user) { + // Load user data from Firestore + try { + const userData = await DataService.loadUserData(user.uid); + if (userData) { + setAccounts(userData.accounts || []); + setEnvelopes(userData.envelopes || []); + setTransactions(userData.transactions || []); + setSetupCompleted(userData.setupCompleted || false); + setShowSetupWizard(!(userData.setupCompleted || false)); + } else { + // New user - show setup wizard + setShowSetupWizard(true); + } + } catch (error) { + console.error('Error loading user data:', error); + // On error, assume new user and show setup wizard + setShowSetupWizard(true); + } + } else { + // Clear data when user logs out + setAccounts([]); + setEnvelopes([]); + setTransactions([]); + setSetupCompleted(false); + setShowSetupWizard(false); + } + setLoading(false); + }); + + return () => unsubscribe(); + }, []); + + // Save data to Firestore whenever data changes + useEffect(() => { + if (user && (accounts.length > 0 || envelopes.length > 0 || transactions.length > 0 || setupCompleted)) { + const saveData = async () => { + try { + await DataService.saveUserData(user.uid, { accounts, envelopes, transactions, setupCompleted }); + } catch (error) { + console.error('Error saving user data:', error); + } + }; + saveData(); + } + }, [user, accounts, envelopes, transactions, setupCompleted]); + + const handleTransactionsAdded = (newTransactions: Transaction[]) => { + const allTransactions = [...newTransactions]; + + // Process income transactions - automatically allocate to envelopes + newTransactions.forEach(transaction => { + if (transaction.amount > 0 && !transaction.envelopeId) { + // This is income - allocate to envelopes based on custom settings or proportionally + const accountEnvelopes = envelopes.filter(env => env.accountId === transaction.accountId); + const envelopesWithAllocation = accountEnvelopes.filter(env => env.incomeAllocation && env.incomeAllocationType); + + if (envelopesWithAllocation.length > 0) { + // Validate allocations before processing + const validation = validateIncomeAllocation(envelopesWithAllocation, transaction.amount); + if (!validation.isValid) { + console.warn('Invalid income allocation detected, falling back to proportional'); + // Fall back to proportional allocation if validation fails + const totalAllocated = accountEnvelopes.reduce((sum, env) => sum + env.allocated, 0); + if (accountEnvelopes.length > 0 && totalAllocated > 0) { + accountEnvelopes.forEach(envelope => { + const proportion = envelope.allocated / totalAllocated; + const allocatedAmount = transaction.amount * proportion; + if (allocatedAmount > 0) { + allTransactions.push({ + id: `allocation-${envelope.id}-${Date.now()}-${Math.random()}`, + envelopeId: envelope.id, + amount: allocatedAmount, + description: `Income allocation - ${envelope.name}`, + date: transaction.date, + accountId: transaction.accountId, + }); + } + }); + } + } else { + // Use custom allocation settings + envelopesWithAllocation.forEach(envelope => { + let allocatedAmount = 0; + if (envelope.incomeAllocationType === 'percentage') { + allocatedAmount = transaction.amount * (envelope.incomeAllocation! / 100); + } else if (envelope.incomeAllocationType === 'fixed') { + allocatedAmount = Math.min(envelope.incomeAllocation!, transaction.amount); + } + + if (allocatedAmount > 0) { + allTransactions.push({ + id: `allocation-${envelope.id}-${Date.now()}-${Math.random()}`, + envelopeId: envelope.id, + amount: allocatedAmount, + description: `Income allocation - ${envelope.name}`, + date: transaction.date, + accountId: transaction.accountId, + }); + } + }); + } + } else { + // No specific envelope allocation found, fall back to proportional allocation + const totalAllocated = accountEnvelopes.reduce((sum, env) => sum + env.allocated, 0); + if (accountEnvelopes.length > 0 && totalAllocated > 0) { + accountEnvelopes.forEach(envelope => { + const proportion = envelope.allocated / totalAllocated; + const allocatedAmount = transaction.amount * proportion; + if (allocatedAmount > 0) { + allTransactions.push({ + id: `allocation-${envelope.id}-${Date.now()}-${Math.random()}`, + envelopeId: envelope.id, + amount: allocatedAmount, + description: `Income allocation - ${envelope.name}`, + date: transaction.date, + accountId: transaction.accountId, + }); + } + }); + } + } + } + }); + + // Add all processed transactions at once + setTransactions(prevTransactions => [...prevTransactions, ...allTransactions]); + }; + + const validateIncomeAllocation = (envelopes: Envelope[], totalAmount: number) => { + let fixedTotal = 0; + let percentageTotal = 0; + let hasFixed = false; + let hasPercentage = false; + + envelopes.forEach(envelope => { + if (envelope.incomeAllocationType === 'fixed') { + fixedTotal += envelope.incomeAllocation!; + hasFixed = true; + } else if (envelope.incomeAllocationType === 'percentage') { + percentageTotal += envelope.incomeAllocation!; + hasPercentage = true; + } + }); + + // Check for conflicting allocation types + if (hasFixed && hasPercentage) { + return { isValid: false, message: 'Conflicting allocation types (fixed and percentage) detected.' }; + } + + // Validate fixed allocations + if (hasFixed && fixedTotal !== totalAmount) { + return { isValid: false, message: 'Fixed allocations do not sum up to the total amount.' }; + } + + // Validate percentage allocations + if (hasPercentage && (percentageTotal < 0 || percentageTotal > 100)) { + return { isValid: false, message: 'Percentage allocations must be between 0 and 100.' }; + } + + return { isValid: true }; + }; + + const handleSignOut = async () => { + setLoading(true); + try { + await signOut(auth); + } catch (error) { + console.error('Error signing out:', error); + } + setLoading(false); + }; + + const handleAuthSuccess = () => { + setShowAuthModal(false); + }; + + const handleSetupComplete = (setupData: { + accounts: Account[]; + envelopes: Envelope[]; + transactions: Transaction[]; + }) => { + setAccounts(setupData.accounts); + setEnvelopes(setupData.envelopes); + setTransactions(setupData.transactions); + setSetupCompleted(true); + setShowSetupWizard(false); + }; + + const handleAccountUpdate = (updatedAccount: Account) => { + setAccounts(prevAccounts => prevAccounts.map(acc => acc.id === updatedAccount.id ? updatedAccount : acc)); + }; + + const handleAccountAdd = (newAccount: Account) => { + setAccounts(prevAccounts => [...prevAccounts, newAccount]); + }; + + const handleAccountDelete = (accountId: string) => { + setAccounts(prevAccounts => prevAccounts.filter(acc => acc.id !== accountId)); + }; + + const handleEnvelopeUpdate = (updatedEnvelope: Envelope) => { + setEnvelopes(prevEnvelopes => prevEnvelopes.map(env => env.id === updatedEnvelope.id ? updatedEnvelope : env)); + }; + + const handleTransactionEdit = (updatedTransaction: Transaction) => { + setTransactions(prevTransactions => prevTransactions.map(tx => tx.id === updatedTransaction.id ? updatedTransaction : tx)); + }; + + const handleTransactionDelete = (transactionId: string) => { + setTransactions(prevTransactions => prevTransactions.filter(tx => tx.id !== transactionId)); + }; + + const handleCreateEnvelope = (newEnvelope: Envelope) => { + setEnvelopes(prevEnvelopes => [...prevEnvelopes, newEnvelope]); + }; + + const handleDeleteEnvelope = (envelopeId: string) => { + setEnvelopes(prevEnvelopes => prevEnvelopes.filter(env => env.id !== envelopeId)); + }; + + const handleDataExport = (exportData: { accounts: Account[]; envelopes: Envelope[]; transactions: Transaction[] }) => { + // Implement data export logic here (e.g., download CSV, send to server, etc.) + console.log('Exporting data:', exportData); + }; -export default function Home() { return ( -
-
- Next.js logo + {/* Render components based on current view */} + {currentView === 'dashboard' &&
Dashboard View
} + {currentView === 'accounts' &&
Accounts View
} + {currentView === 'transactions' &&
Transactions View
} + {currentView === 'envelopes' &&
Envelopes View
} + {currentView === 'settings' &&
Settings View
} + + {/* Auth modal */} + {showAuthModal && setShowAuthModal(false)} onSuccess={handleAuthSuccess} />} + + {/* Setup wizard */} + {showSetupWizard && } + + {/* Data input component */} + { + // Handle imported data (e.g., from CSV) + console.log('Imported data:', importedData); + }} + /> + + {/* Transaction edit component */} + {editingTransaction && ( + { + handleTransactionEdit(updatedTransaction); + setEditingTransaction(null); + }} + onCancel={() => setEditingTransaction(null)} /> -
-

- To get started, edit the page.tsx file. -

-

- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -

-
- -
+ )} + + {/* Envelope create/edit component */} + {showCreateEnvelope && ( + { + handleCreateEnvelope(newEnvelope); + setShowCreateEnvelope(false); + }} + onCancel={() => setShowCreateEnvelope(false)} + /> + )} + {editingEnvelope && ( + { + handleEnvelopeUpdate(updatedEnvelope); + setEditingEnvelope(null); + }} + onCancel={() => setEditingEnvelope(null)} + /> + )} + + {/* Data export component */} + + + {/* Account management component */} + + + {/* Get Paid component */} +
); } diff --git a/src/components/AccountManagement.tsx b/src/components/AccountManagement.tsx new file mode 100644 index 0000000..d5f1e74 --- /dev/null +++ b/src/components/AccountManagement.tsx @@ -0,0 +1,320 @@ +'use client'; + +import { useState } from 'react'; + +interface Account { + id: string; + name: string; + type: 'checking' | 'savings' | 'credit_card' | 'mortgage' | 'investment' | 'loan'; + balance: number; + institution?: string; + accountNumber?: string; + color: string; + isActive: boolean; +} + +interface AccountManagementProps { + accounts: Account[]; + onAccountAdd: (account: Account) => void; + onAccountUpdate: (account: Account) => void; + onAccountDelete: (accountId: string) => void; +} + +const accountTypes = [ + { value: 'checking', label: 'Checking Account', icon: '🏦' }, + { value: 'savings', label: 'Savings Account', icon: '💰' }, + { value: 'credit_card', label: 'Credit Card', icon: '💳' }, + { value: 'mortgage', label: 'Mortgage', icon: '🏠' }, + { value: 'investment', label: 'Investment', icon: '📈' }, + { value: 'loan', label: 'Loan', icon: '📋' }, +]; + +const accountColors = [ + 'bg-blue-500', 'bg-green-500', 'bg-purple-500', 'bg-orange-500', + 'bg-red-500', 'bg-yellow-500', 'bg-pink-500', 'bg-indigo-500' +]; + +export default function AccountManagement({ accounts, onAccountAdd, onAccountUpdate, onAccountDelete }: AccountManagementProps) { + const [showAddForm, setShowAddForm] = useState(false); + const [editingAccount, setEditingAccount] = useState(null); + const [formData, setFormData] = useState>({ + type: 'checking', + balance: 0, + color: 'bg-blue-500', + isActive: true, + }); + + const resetForm = () => { + setFormData({ + type: 'checking', + balance: 0, + color: 'bg-blue-500', + isActive: true, + }); + setEditingAccount(null); + setShowAddForm(false); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + + if (!formData.name || !formData.type) { + alert('Please fill in all required fields'); + return; + } + + const account: Account = { + id: editingAccount?.id || `${formData.type}-${Date.now()}`, + name: formData.name, + type: formData.type as Account['type'], + balance: formData.balance || 0, + institution: formData.institution, + accountNumber: formData.accountNumber, + color: formData.color || 'bg-blue-500', + isActive: formData.isActive ?? true, + }; + + if (editingAccount) { + onAccountUpdate(account); + } else { + onAccountAdd(account); + } + + resetForm(); + }; + + const handleEdit = (account: Account) => { + setFormData(account); + setEditingAccount(account); + setShowAddForm(true); + }; + + const handleDelete = (accountId: string) => { + if (confirm('Are you sure you want to delete this account? This action cannot be undone.')) { + onAccountDelete(accountId); + } + }; + + const totalBalance = accounts.reduce((sum, acc) => sum + acc.balance, 0); + + return ( +
+ {/* Header */} +
+
+

Account Management

+

Manage your financial accounts and track balances

+
+ +
+ + {/* Summary Cards */} +
+
+

Total Accounts

+

{accounts.length}

+
+
+

Total Balance

+

${totalBalance.toFixed(2)}

+
+
+

Active Accounts

+

{accounts.filter(acc => acc.isActive).length}

+
+
+ + {/* Accounts List */} +
+
+

Your Accounts

+
+ + {accounts.length === 0 ? ( +
+
🏦
+

No accounts yet

+

Add your first account to start tracking your finances

+ +
+ ) : ( +
+ {accounts.map((account) => ( +
+
+
+
+

{account.name}

+

+ {accountTypes.find(t => t.value === account.type)?.icon} {account.type.replace('_', ' ').toUpperCase()} + {account.institution && ` • ${account.institution}`} +

+
+
+ +
+
+

${account.balance.toFixed(2)}

+

+ {account.isActive ? 'Active' : 'Inactive'} +

+
+ +
+ + +
+
+
+ ))} +
+ )} +
+ + {/* Add/Edit Account Modal */} + {showAddForm && ( +
+
+

+ {editingAccount ? 'Edit Account' : 'Add New Account'} +

+ +
+
+ + setFormData(prev => ({ ...prev, name: e.target.value }))} + className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + placeholder="e.g., Main Checking" + required + /> +
+ +
+ + +
+ +
+ + setFormData(prev => ({ ...prev, balance: parseFloat(e.target.value) || 0 }))} + className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + placeholder="0.00" + /> +
+ +
+ + setFormData(prev => ({ ...prev, institution: e.target.value }))} + className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + placeholder="e.g., Bank of America" + /> +
+ +
+ + setFormData(prev => ({ ...prev, accountNumber: e.target.value }))} + className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + placeholder="Last 4 digits" + /> +
+ +
+ +
+ {accountColors.map((color) => ( +
+
+ +
+ setFormData(prev => ({ ...prev, isActive: e.target.checked }))} + className="mr-2" + /> + +
+ +
+ + +
+
+
+
+ )} +
+ ); +} \ No newline at end of file diff --git a/src/components/AuthModal.tsx b/src/components/AuthModal.tsx new file mode 100644 index 0000000..854419b --- /dev/null +++ b/src/components/AuthModal.tsx @@ -0,0 +1,131 @@ +'use client'; + +import { useState } from 'react'; +import { signInWithEmailAndPassword, createUserWithEmailAndPassword, signOut } from 'firebase/auth'; +import { auth } from '../lib/firebase'; + +interface AuthModalProps { + isOpen: boolean; + onClose: () => void; + onAuthSuccess: () => void; +} + +export default function AuthModal({ isOpen, onClose, onAuthSuccess }: AuthModalProps) { + const [isLogin, setIsLogin] = useState(true); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [confirmPassword, setConfirmPassword] = useState(''); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(''); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setLoading(true); + setError(''); + + try { + if (isLogin) { + await signInWithEmailAndPassword(auth, email, password); + } else { + if (password !== confirmPassword) { + throw new Error('Passwords do not match'); + } + await createUserWithEmailAndPassword(auth, email, password); + } + onAuthSuccess(); + onClose(); + } catch (error: any) { + setError(error.message); + } finally { + setLoading(false); + } + }; + + if (!isOpen) return null; + + return ( +
+
+
+

+ {isLogin ? 'Sign In' : 'Create Account'} +

+ +
+ +
+
+ + setEmail(e.target.value)} + className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + required + /> +
+ +
+ + setPassword(e.target.value)} + className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + required + minLength={6} + /> +
+ + {!isLogin && ( +
+ + setConfirmPassword(e.target.value)} + className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + required + minLength={6} + /> +
+ )} + + {error && ( +
{error}
+ )} + + +
+ +
+ +
+
+
+ ); +} \ No newline at end of file diff --git a/src/components/DataExport.tsx b/src/components/DataExport.tsx new file mode 100644 index 0000000..055eaa6 --- /dev/null +++ b/src/components/DataExport.tsx @@ -0,0 +1,158 @@ +'use client'; + +import { useState } from 'react'; + +interface Envelope { + id: string; + name: string; + allocated: number; + spent: number; + color: string; +} + +interface Transaction { + id: string; + envelopeId?: string; + amount: number; + description: string; + date: Date; +} + +interface DataExportProps { + envelopes: Envelope[]; + transactions: Transaction[]; +} + +export default function DataExport({ envelopes, transactions }: DataExportProps) { + const [exportFormat, setExportFormat] = useState<'csv' | 'json'>('csv'); + + const exportToCSV = () => { + // Export transactions + const transactionHeaders = ['Date', 'Description', 'Amount', 'Envelope', 'Type']; + const transactionRows = transactions.map(t => { + const envelope = envelopes.find(e => e.id === t.envelopeId); + return [ + t.date.toISOString().split('T')[0], + t.description, + t.amount.toFixed(2), + envelope?.name || 'Unassigned', + t.amount >= 0 ? 'Income' : 'Expense' + ]; + }); + + // Export envelopes + const envelopeHeaders = ['Name', 'Allocated', 'Spent', 'Remaining', 'Color']; + const envelopeRows = envelopes.map(e => [ + e.name, + e.allocated.toFixed(2), + e.spent.toFixed(2), + (e.allocated - e.spent).toFixed(2), + e.color + ]); + + const csvContent = [ + 'TRANSACTIONS', + transactionHeaders.join(','), + ...transactionRows.map(row => row.map(cell => `"${cell}"`).join(',')), + '', + 'ENVELOPES', + envelopeHeaders.join(','), + ...envelopeRows.map(row => row.map(cell => `"${cell}"`).join(',')) + ].join('\n'); + + downloadFile(csvContent, 'budget-data.csv', 'text/csv'); + }; + + const exportToJSON = () => { + const data = { + exportDate: new Date().toISOString(), + envelopes, + transactions: transactions.map(t => ({ + ...t, + date: t.date.toISOString() + })) + }; + + const jsonContent = JSON.stringify(data, null, 2); + downloadFile(jsonContent, 'budget-data.json', 'application/json'); + }; + + const downloadFile = (content: string, filename: string, mimeType: string) => { + const blob = new Blob([content], { type: mimeType }); + const url = URL.createObjectURL(blob); + const link = document.createElement('a'); + link.href = url; + link.download = filename; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + URL.revokeObjectURL(url); + }; + + const handleExport = () => { + if (exportFormat === 'csv') { + exportToCSV(); + } else { + exportToJSON(); + } + }; + + return ( +
+

Export Data

+ +
+
+ +
+ + +
+
+ +
+

What gets exported:

+
    +
  • • All transactions with dates, amounts, and descriptions
    • +
  • • Envelope assignments for each transaction
    • +
  • • All envelope details (allocated amounts, spending, colors)
    • +
  • • Export timestamp for reference
    • +
+
+ + +
+ +
+

File formats:

+
    +
  • CSV: Compatible with Excel, Google Sheets, and most spreadsheet applications
    • +
  • JSON: Structured data format for developers or data analysis tools
    • +
+
+
+ ); +} \ No newline at end of file diff --git a/src/components/DataInput.tsx b/src/components/DataInput.tsx new file mode 100644 index 0000000..1b45534 --- /dev/null +++ b/src/components/DataInput.tsx @@ -0,0 +1,106 @@ +'use client'; + +import { useState } from 'react'; +import FileUpload, { ParsedTransaction } from './FileUpload'; +import ManualEntry from './ManualEntry'; + +interface DataInputProps { + onTransactionsAdded: (transactions: Array<{ + id: string; + envelopeId?: string; + amount: number; + description: string; + date: Date; + accountId: string; + }>) => void; + envelopes: { id: string; name: string }[]; + accounts: { id: string; name: string }[]; +} + +type InputMode = 'file' | 'manual'; + +export default function DataInput({ onTransactionsAdded, envelopes, accounts }: DataInputProps) { + const [inputMode, setInputMode] = useState('manual'); + + const handleFileTransactionsParsed = (parsedTransactions: ParsedTransaction[]) => { + const transactions = parsedTransactions.map((t, index) => ({ + id: `imported-${Date.now()}-${index}`, + amount: t.amount, + description: t.description, + date: t.date, + envelopeId: undefined, // User can assign envelopes later + accountId: accounts?.[0]?.id || 'default-account', // Default to first account + })); + + onTransactionsAdded(transactions); + }; + + const handleManualTransactionAdded = (transaction: { + amount: number; + description: string; + date: Date; + envelopeId?: string; + accountId: string; + }) => { + const newTransaction = { + id: `manual-${Date.now()}`, + ...transaction, + }; + + onTransactionsAdded([newTransaction]); + }; + + return ( +
+
+

Add Transactions

+ + {/* Mode Selection */} +
+ + +
+
+ + {/* Content based on selected mode */} + {inputMode === 'manual' ? ( + + ) : ( + + )} + + {/* Help Text */} +
+

Tips:

+
    +
  • • Manual Entry: Perfect for quick transactions and cash expenses
    • +
  • • File Import: Great for bulk transactions from your bank statements
    • +
  • • You can assign transactions to envelopes immediately or categorize them later
    • +
  • • Negative amounts are expenses, positive amounts are income
    • +
+
+
+ ); +} \ No newline at end of file diff --git a/src/components/EnvelopeCreate.tsx b/src/components/EnvelopeCreate.tsx new file mode 100644 index 0000000..8e1e7d3 --- /dev/null +++ b/src/components/EnvelopeCreate.tsx @@ -0,0 +1,235 @@ +'use client'; + +import { useState } from 'react'; + +interface EnvelopeCreateProps { + onEnvelopeCreated: (envelope: { + id: string; + name: string; + allocated: number; + spent: number; + color: string; + accountId: string; + incomeAllocation?: number; + incomeAllocationType?: 'percentage' | 'fixed'; + }) => void; + onCancel: () => void; + accounts: { id: string; name: string }[]; +} + +const colorOptions = [ + { value: 'bg-green-500', label: 'Green', color: '#10B981' }, + { value: 'bg-blue-500', label: 'Blue', color: '#3B82F6' }, + { value: 'bg-purple-500', label: 'Purple', color: '#8B5CF6' }, + { value: 'bg-orange-500', label: 'Orange', color: '#F97316' }, + { value: 'bg-red-500', label: 'Red', color: '#EF4444' }, + { value: 'bg-yellow-500', label: 'Yellow', color: '#EAB308' }, + { value: 'bg-pink-500', label: 'Pink', color: '#EC4899' }, + { value: 'bg-indigo-500', label: 'Indigo', color: '#6366F1' }, +]; + +export default function EnvelopeCreate({ onEnvelopeCreated, onCancel, accounts }: EnvelopeCreateProps) { + const [name, setName] = useState(''); + const [allocated, setAllocated] = useState(''); + const [selectedColor, setSelectedColor] = useState(colorOptions[0].value); + const [selectedAccount, setSelectedAccount] = useState(accounts[0]?.id || ''); + const [incomeAllocationType, setIncomeAllocationType] = useState<'percentage' | 'fixed'>('percentage'); + const [incomeAllocation, setIncomeAllocation] = useState(''); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + + const numAllocated = parseFloat(allocated); + if (!name.trim() || isNaN(numAllocated) || numAllocated <= 0) { + alert('Please enter a valid envelope name and positive allocated amount'); + return; + } + + // Validate income allocation + if (incomeAllocation) { + const allocationValue = parseFloat(incomeAllocation); + if (isNaN(allocationValue) || allocationValue < 0) { + alert('Please enter a valid income allocation amount'); + return; + } + if (incomeAllocationType === 'percentage' && allocationValue > 100) { + alert('Percentage allocation cannot exceed 100%'); + return; + } + } + + const newEnvelope = { + id: `envelope-${Date.now()}`, + name: name.trim(), + allocated: numAllocated, + spent: 0, + color: selectedColor, + accountId: selectedAccount, + incomeAllocation: incomeAllocation ? parseFloat(incomeAllocation) : undefined, + incomeAllocationType: incomeAllocation ? incomeAllocationType : undefined, + }; + + onEnvelopeCreated(newEnvelope); + + // Reset form + setName(''); + setAllocated(''); + setSelectedColor(colorOptions[0].value); + setSelectedAccount(accounts[0]?.id); + setIncomeAllocationType('percentage'); + setIncomeAllocation(''); + }; + + return ( +
+
+

Create New Envelope

+ +
+
+ + setName(e.target.value)} + placeholder="e.g., Groceries, Transportation" + className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + required + /> +
+ +
+ +
+ $ + setAllocated(e.target.value)} + placeholder="0.00" + className="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + required + /> +
+
+ +
+ +
+ {colorOptions.map((color) => ( +
+

+ Selected: {colorOptions.find(c => c.value === selectedColor)?.label} +

+
+ +
+ + +
+ +
+ +
+
+ + +
+
+ + {incomeAllocationType === 'percentage' ? '%' : '$'} + + setIncomeAllocation(e.target.value)} + placeholder={incomeAllocationType === 'percentage' ? 'e.g., 25' : 'e.g., 100.00'} + className="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + /> +
+

+ {incomeAllocationType === 'percentage' + ? 'Percentage of income to allocate to this envelope automatically' + : 'Fixed dollar amount to allocate to this envelope automatically' + } +

+
+
+ +
+ + +
+
+
+
+ ); +} \ No newline at end of file diff --git a/src/components/EnvelopeEdit.tsx b/src/components/EnvelopeEdit.tsx new file mode 100644 index 0000000..88de869 --- /dev/null +++ b/src/components/EnvelopeEdit.tsx @@ -0,0 +1,236 @@ +'use client'; + +import { useState, useEffect } from 'react'; + +interface EnvelopeEditProps { + envelope: { + id: string; + name: string; + allocated: number; + spent: number; + color: string; + accountId: string; + incomeAllocation?: number; + incomeAllocationType?: 'percentage' | 'fixed'; + }; + accounts: { id: string; name: string }[]; + onEnvelopeUpdated: (envelope: { + id: string; + name: string; + allocated: number; + spent: number; + color: string; + accountId: string; + incomeAllocation?: number; + incomeAllocationType?: 'percentage' | 'fixed'; + }) => void; + onCancel: () => void; +} + +const colorOptions = [ + { value: 'bg-green-500', label: 'Green', color: '#10B981' }, + { value: 'bg-blue-500', label: 'Blue', color: '#3B82F6' }, + { value: 'bg-purple-500', label: 'Purple', color: '#8B5CF6' }, + { value: 'bg-orange-500', label: 'Orange', color: '#F97316' }, + { value: 'bg-red-500', label: 'Red', color: '#EF4444' }, + { value: 'bg-yellow-500', label: 'Yellow', color: '#EAB308' }, + { value: 'bg-pink-500', label: 'Pink', color: '#EC4899' }, + { value: 'bg-indigo-500', label: 'Indigo', color: '#6366F1' }, +]; + +export default function EnvelopeEdit({ envelope, onEnvelopeUpdated, onCancel, accounts }: EnvelopeEditProps) { + const [name, setName] = useState(envelope.name); + const [allocated, setAllocated] = useState(envelope.allocated.toString()); + const [selectedColor, setSelectedColor] = useState(envelope.color); + const [selectedAccount, setSelectedAccount] = useState(envelope.accountId); + const [incomeAllocationType, setIncomeAllocationType] = useState<'percentage' | 'fixed'>(envelope.incomeAllocationType || 'percentage'); + const [incomeAllocation, setIncomeAllocation] = useState(envelope.incomeAllocation?.toString() || ''); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + + const numAllocated = parseFloat(allocated); + if (!name.trim() || isNaN(numAllocated) || numAllocated <= 0) { + alert('Please enter a valid envelope name and positive allocated amount'); + return; + } + + // Validate income allocation + if (incomeAllocation) { + const allocationValue = parseFloat(incomeAllocation); + if (isNaN(allocationValue) || allocationValue < 0) { + alert('Please enter a valid income allocation amount'); + return; + } + if (incomeAllocationType === 'percentage' && allocationValue > 100) { + alert('Percentage allocation cannot exceed 100%'); + return; + } + } + + const updatedEnvelope = { + ...envelope, + name: name.trim(), + allocated: numAllocated, + color: selectedColor, + accountId: selectedAccount, + incomeAllocation: incomeAllocation ? parseFloat(incomeAllocation) : undefined, + incomeAllocationType: incomeAllocation ? incomeAllocationType : undefined, + }; + + onEnvelopeUpdated(updatedEnvelope); + }; + + return ( +
+
+

Edit Envelope

+ +
+
+ + setName(e.target.value)} + placeholder="e.g., Groceries, Transportation" + className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + required + /> +
+ +
+ +
+ $ + setAllocated(e.target.value)} + placeholder="0.00" + className="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + required + /> +
+
+ +
+ +
+ {colorOptions.map((color) => ( +
+

+ Selected: {colorOptions.find(c => c.value === selectedColor)?.label} +

+
+ +
+ + +
+ +
+ +
+
+ + +
+
+ + {incomeAllocationType === 'percentage' ? '%' : '$'} + + setIncomeAllocation(e.target.value)} + placeholder={incomeAllocationType === 'percentage' ? 'e.g., 25' : 'e.g., 100.00'} + className="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + /> +
+

+ {incomeAllocationType === 'percentage' + ? 'Percentage of income to allocate to this envelope automatically' + : 'Fixed dollar amount to allocate to this envelope automatically' + } +

+
+
+ +
+ + +
+
+
+
+ ); +} \ No newline at end of file diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx new file mode 100644 index 0000000..232334f --- /dev/null +++ b/src/components/FileUpload.tsx @@ -0,0 +1,279 @@ +'use client'; + +import { useState } from 'react'; + +interface FileUploadProps { + onTransactionsParsed: (transactions: ParsedTransaction[]) => void; + accounts: { id: string; name: string }[]; +} + +export interface ParsedTransaction { + date: Date; + amount: number; + description: string; + category?: string; + accountId?: string; +} + +export default function FileUpload({ onTransactionsParsed, accounts }: FileUploadProps) { + const [selectedFile, setSelectedFile] = useState(null); + const [fileType, setFileType] = useState('csv'); + const [isProcessing, setIsProcessing] = useState(false); + const [selectedAccountId, setSelectedAccountId] = useState(''); + + const supportedFormats = [ + { value: 'csv', label: 'CSV (Comma Separated Values)', extensions: '.csv' }, + { value: 'ofx', label: 'OFX (Open Financial Exchange)', extensions: '.ofx' }, + { value: 'qfx', label: 'QFX (Quicken Financial Exchange)', extensions: '.qfx' }, + { value: 'qbo', label: 'QBO (QuickBooks Online)', extensions: '.qbo' }, + { value: 'pdf', label: 'PDF Statement', extensions: '.pdf' }, + ]; + + const handleFileChange = (event: React.ChangeEvent) => { + const file = event.target.files?.[0]; + if (file) { + setSelectedFile(file); + } + }; + + const parseCSV = (content: string): ParsedTransaction[] => { + const lines = content.split('\n'); + const transactions: ParsedTransaction[] = []; + + // Try to detect header row and column positions + const firstLine = lines[0]?.trim(); + if (!firstLine) return transactions; + + const headers = firstLine.split(',').map(h => h.trim().toLowerCase()); + const dateIndex = headers.findIndex(h => h.includes('date') || h.includes('dt')); + const amountIndex = headers.findIndex(h => h.includes('amount') || h.includes('amt') || h.includes('value')); + const descIndex = headers.findIndex(h => h.includes('description') || h.includes('desc') || h.includes('memo') || h.includes('reference')); + const categoryIndex = headers.findIndex(h => h.includes('category') || h.includes('cat')); + + // Skip header row + for (let i = 1; i < lines.length; i++) { + const line = lines[i].trim(); + if (!line) continue; + + const columns = line.split(','); + if (columns.length >= 3) { + const dateStr = columns[dateIndex]?.trim(); + const amountStr = columns[amountIndex]?.trim(); + const descStr = columns[descIndex]?.trim(); + const categoryStr = columns[categoryIndex]?.trim(); + + if (!dateStr || !amountStr || !descStr) continue; + + // Try multiple date formats + let date: Date | null = null; + const dateFormats = [ + // MM/DD/YYYY + () => { + const parts = dateStr.split('/'); + if (parts.length === 3) { + return new Date(parseInt(parts[2]), parseInt(parts[0]) - 1, parseInt(parts[1])); + } + return null; + }, + // YYYY-MM-DD + () => new Date(dateStr + 'T00:00:00'), + // MM-DD-YYYY + () => { + const parts = dateStr.split('-'); + if (parts.length === 3) { + return new Date(parseInt(parts[2]), parseInt(parts[0]) - 1, parseInt(parts[1])); + } + return null; + }, + // DD/MM/YYYY + () => { + const parts = dateStr.split('/'); + if (parts.length === 3) { + return new Date(parseInt(parts[2]), parseInt(parts[1]) - 1, parseInt(parts[0])); + } + return null; + } + ]; + + for (const formatFn of dateFormats) { + date = formatFn(); + if (date && !isNaN(date.getTime())) break; + } + + const amount = parseFloat(amountStr.replace(/[$,]/g, '')); + + if (date && !isNaN(date.getTime()) && !isNaN(amount)) { + transactions.push({ + date, + amount, + description: descStr, + category: categoryStr || undefined, + accountId: selectedAccountId || undefined, + }); + } + } + } + + return transactions; + }; + + const parseOFX = (content: string): ParsedTransaction[] => { + // Basic OFX parsing - this would need to be more robust for production + const transactions: ParsedTransaction[] = []; + const transactionRegex = /[\s\S]*?<\/STMTTRN>/g; + const matches = content.match(transactionRegex); + + if (matches) { + matches.forEach(match => { + const dateMatch = match.match(/(.*?)<\/DTPOSTED>/); + const amountMatch = match.match(/(.*?)<\/TRNAMT>/); + const descMatch = match.match(/(.*?)<\/MEMO>/) || match.match(/(.*?)<\/NAME>/); + + if (dateMatch && amountMatch && descMatch) { + const dateStr = dateMatch[1].substring(0, 8); // YYYYMMDD format + const date = new Date( + parseInt(dateStr.substring(0, 4)), + parseInt(dateStr.substring(4, 6)) - 1, + parseInt(dateStr.substring(6, 8)) + ); + const amount = parseFloat(amountMatch[1]); + const description = descMatch[1]; + + transactions.push({ + date, + amount, + description, + }); + } + }); + } + + return transactions; + }; + + const handleUpload = async () => { + if (!selectedFile) return; + + setIsProcessing(true); + + try { + const content = await selectedFile.text(); + let transactions: ParsedTransaction[] = []; + + switch (fileType) { + case 'csv': + transactions = parseCSV(content); + break; + case 'ofx': + case 'qfx': + transactions = parseOFX(content); + break; + case 'qbo': + // QBO parsing would be similar to OFX + transactions = parseOFX(content); + break; + case 'pdf': + // PDF parsing would require a PDF parsing library + alert('PDF parsing is not yet implemented. Please use CSV or OFX format.'); + setIsProcessing(false); + return; + default: + alert('Unsupported file format'); + setIsProcessing(false); + return; + } + + onTransactionsParsed(transactions); + setSelectedFile(null); + // Reset file input + const fileInput = document.getElementById('file-upload') as HTMLInputElement; + if (fileInput) fileInput.value = ''; + + } catch (error) { + console.error('Error parsing file:', error); + alert('Error parsing file. Please check the format and try again.'); + } finally { + setIsProcessing(false); + } + }; + + return ( +
+

Import Bank Transactions

+ +
+
+ + +
+ +
+ + f.value === fileType)?.extensions} + onChange={handleFileChange} + className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + /> + {selectedFile && ( +

+ Selected: {selectedFile.name} +

+ )} +
+ +
+ + +
+ + +
+ +
+

Supported formats:

+
    +
  • CSV: Date, Amount, Description columns
    • +
  • OFX/QFX: Standard bank export formats
    • +
  • QBO: QuickBooks Online format
    • +
  • PDF: Coming soon
    • +
+
+
+ ); +} \ No newline at end of file diff --git a/src/components/GetPaid.tsx b/src/components/GetPaid.tsx new file mode 100644 index 0000000..77c68d4 --- /dev/null +++ b/src/components/GetPaid.tsx @@ -0,0 +1,446 @@ +'use client'; + +import { useState } from 'react'; + +interface Account { + id: string; + name: string; + type: 'checking' | 'savings' | 'credit_card' | 'mortgage' | 'investment' | 'loan'; + balance: number; + institution?: string; + accountNumber?: string; + color: string; + isActive: boolean; + defaultPaycheckAmount?: number; +} + +interface Envelope { + id: string; + name: string; + allocated: number; + spent: number; + color: string; + accountId: string; +} + +interface Transaction { + id: string; + envelopeId?: string; + amount: number; + description: string; + date: Date; + accountId: string; +} + +interface GetPaidProps { + accounts: Account[]; + envelopes: Envelope[]; + onIncomeAdded: (transactions: Transaction[]) => void; + onAccountUpdate?: (account: Account) => void; +} + +export default function GetPaid({ accounts, envelopes, onIncomeAdded, onAccountUpdate }: GetPaidProps) { + const [isOpen, setIsOpen] = useState(false); + const [amount, setAmount] = useState(''); + const [selectedAccountId, setSelectedAccountId] = useState(''); + const [description, setDescription] = useState('Paycheck'); + const [distributionMethod, setDistributionMethod] = useState<'proportional' | 'equal' | 'custom'>('proportional'); + const [customAllocations, setCustomAllocations] = useState<{ [envelopeId: string]: number }>({}); + const [showDefaultAmountField, setShowDefaultAmountField] = useState(false); + const [defaultAmountInput, setDefaultAmountInput] = useState(''); + + if (!accounts || accounts.length === 0) { + return ( +
+

Get Paid

+

Please add an account first to record paychecks.

+
+ ); + } + + if (!envelopes) { + return ( +
+

Get Paid

+

Loading...

+
+ ); + } + + const accountEnvelopes = selectedAccountId ? envelopes.filter(env => env.accountId === selectedAccountId) : []; + const totalAllocated = accountEnvelopes.reduce((sum, env) => sum + env.allocated, 0); + + const calculateDistribution = () => { + const paycheckAmount = parseFloat(amount); + if (!paycheckAmount || accountEnvelopes.length === 0) return {}; + + const distribution: { [envelopeId: string]: number } = {}; + + if (distributionMethod === 'equal') { + const equalAmount = paycheckAmount / accountEnvelopes.length; + accountEnvelopes.forEach(env => { + distribution[env.id] = equalAmount; + }); + } else if (distributionMethod === 'proportional') { + accountEnvelopes.forEach(env => { + const proportion = env.allocated / totalAllocated; + distribution[env.id] = paycheckAmount * proportion; + }); + } else if (distributionMethod === 'custom') { + return customAllocations; + } + + return distribution; + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + + const paycheckAmount = parseFloat(amount); + if (!paycheckAmount || !selectedAccountId) { + alert('Please enter a valid amount and select an account'); + return; + } + + const distribution = calculateDistribution(); + const transactions: Transaction[] = []; + + // Add the main paycheck transaction to the account + transactions.push({ + id: `paycheck-${Date.now()}`, + amount: paycheckAmount, + description: description || 'Paycheck', + date: new Date(), + accountId: selectedAccountId, + }); + + // Add allocation transactions to envelopes + Object.entries(distribution).forEach(([envelopeId, allocatedAmount]) => { + if (allocatedAmount > 0) { + transactions.push({ + id: `allocation-${envelopeId}-${Date.now()}`, + envelopeId, + amount: allocatedAmount, + description: `Paycheck allocation - ${envelopes.find(e => e.id === envelopeId)?.name}`, + date: new Date(), + accountId: selectedAccountId, + }); + } + }); + + onIncomeAdded(transactions); + setIsOpen(false); + setAmount(''); + setDescription('Paycheck'); + setCustomAllocations({}); + setShowDefaultAmountField(false); + setDefaultAmountInput(''); + }; + + const handleSetDefaultAmount = () => { + const defaultAmount = parseFloat(defaultAmountInput); + if (!defaultAmount || defaultAmount <= 0) { + alert('Please enter a valid default amount'); + return; + } + + const selectedAccount = accounts.find(acc => acc.id === selectedAccountId); + if (!selectedAccount) return; + + const updatedAccount = { + ...selectedAccount, + defaultPaycheckAmount: defaultAmount + }; + + if (onAccountUpdate) { + onAccountUpdate(updatedAccount); + alert(`Default paycheck amount set to $${defaultAmount.toFixed(2)} for this account`); + setShowDefaultAmountField(false); + setDefaultAmountInput(''); + } else { + alert('Unable to save default amount - account update not available'); + } + }; + + const handleUseDefaultAmount = () => { + const selectedAccount = accounts.find(acc => acc.id === selectedAccountId); + if (selectedAccount?.defaultPaycheckAmount) { + setAmount(selectedAccount.defaultPaycheckAmount.toString()); + } + }; + + const distribution = calculateDistribution(); + const totalDistributed = Object.values(distribution).reduce((sum, amt) => sum + amt, 0); + const remaining = parseFloat(amount) - totalDistributed; + + return ( + <> + + + {isOpen && ( +
+
+

Record Paycheck

+ +
+ {/* Basic Info */} +
+
+ +
+ $ + setAmount(e.target.value)} + className="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + placeholder="0.00" + required + /> +
+ {selectedAccountId && accounts.find(acc => acc.id === selectedAccountId)?.defaultPaycheckAmount && ( + + )} + {selectedAccountId && ( + + )} + {showDefaultAmountField && ( +
+
+ $ + setDefaultAmountInput(e.target.value)} + className="w-full pl-8 pr-3 py-1 text-sm border border-gray-300 rounded" + placeholder="0.00" + /> +
+ +
+ )} +
+ +
+ + +
+
+ +
+ + setDescription(e.target.value)} + className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + placeholder="Paycheck description" + /> +
+ + {/* Distribution Method */} + {selectedAccountId && accountEnvelopes.length > 0 && ( + <> +
+ +
+ + + +
+
+ + {/* Distribution Preview */} +
+

Income Distribution Preview

+
+ {accountEnvelopes.map((envelope) => { + const allocatedAmount = distribution[envelope.id] || 0; + const percentage = parseFloat(amount) > 0 ? (allocatedAmount / parseFloat(amount)) * 100 : 0; + + return ( +
+
+
+ {envelope.name} +
+
+ {distributionMethod === 'custom' ? ( + setCustomAllocations(prev => ({ + ...prev, + [envelope.id]: parseFloat(e.target.value) || 0 + }))} + className="w-20 px-2 py-1 text-sm border border-gray-300 rounded" + placeholder="0.00" + /> + ) : ( + ${allocatedAmount.toFixed(2)} + )} + ({percentage.toFixed(1)}%) +
+
+ ); + })} +
+ +
+
+ Total Distributed: + + ${totalDistributed.toFixed(2)} + +
+ {Math.abs(remaining) >= 0.01 && ( +
+ Remaining: + = 0 ? 'text-orange-600' : 'text-red-600'}`}> + ${remaining.toFixed(2)} + +
+ )} +
+
+ + )} + + {/* Default Amount */} + {selectedAccountId && ( +
+ + + {showDefaultAmountField && ( +
+

Default Paycheck Amount

+
+ setDefaultAmountInput(e.target.value)} + className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + placeholder="0.00" + /> + +
+ +
+ +
+
+ )} +
+ )} + + {/* Actions */} +
+ + +
+
+
+
+ )} + + ); +} \ No newline at end of file diff --git a/src/components/ManualEntry.tsx b/src/components/ManualEntry.tsx new file mode 100644 index 0000000..fc90e69 --- /dev/null +++ b/src/components/ManualEntry.tsx @@ -0,0 +1,196 @@ +'use client'; + +import { useState, useEffect } from 'react'; + +interface ManualEntryProps { + onTransactionAdded: (transaction: { + amount: number; + description: string; + date: Date; + envelopeId?: string; + accountId: string; + }) => void; + envelopes: { id: string; name: string }[]; + accounts: { id: string; name: string }[]; +} + +export default function ManualEntry({ onTransactionAdded, envelopes, accounts }: ManualEntryProps) { + const [amount, setAmount] = useState(''); + const [description, setDescription] = useState(''); + const [date, setDate] = useState(new Date().toISOString().split('T')[0]); + const [selectedEnvelope, setSelectedEnvelope] = useState(''); + const [selectedAccount, setSelectedAccount] = useState(accounts?.[0]?.id || ''); + const [isExpense, setIsExpense] = useState(true); + + // Update selected account when accounts change + useEffect(() => { + if (accounts && accounts.length > 0 && !selectedAccount) { + setSelectedAccount(accounts[0].id); + } + }, [accounts, selectedAccount]); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + + const numAmount = parseFloat(amount); + if (isNaN(numAmount) || !description.trim()) { + alert('Please enter a valid amount and description'); + return; + } + + const transactionAmount = isExpense ? -Math.abs(numAmount) : Math.abs(numAmount); + + onTransactionAdded({ + amount: transactionAmount, + description: description.trim(), + date: new Date(date), + envelopeId: selectedEnvelope || undefined, + accountId: selectedAccount, + }); + + // Reset form + setAmount(''); + setDescription(''); + setDate(new Date().toISOString().split('T')[0]); + setSelectedEnvelope(''); + setSelectedAccount(accounts?.[0]?.id || ''); + }; + + if (!accounts || accounts.length === 0) { + return ( +
+

Manual Transaction Entry

+

Please add an account first to enter transactions.

+
+ ); + } + + if (!envelopes) { + return ( +
+

Manual Transaction Entry

+

Loading...

+
+ ); + } + + return ( +
+

Manual Transaction Entry

+ +
+
+
+ +
+ $ + setAmount(e.target.value)} + placeholder="0.00" + className="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + required + /> +
+
+ +
+ + setDate(e.target.value)} + className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + required + /> +
+
+ +
+ + setDescription(e.target.value)} + placeholder="Enter transaction description" + className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + required + /> +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+ ); +} \ No newline at end of file diff --git a/src/components/SetupWizard.tsx b/src/components/SetupWizard.tsx new file mode 100644 index 0000000..e120034 --- /dev/null +++ b/src/components/SetupWizard.tsx @@ -0,0 +1,816 @@ +'use client'; + +import { useState } from 'react'; +import { DataService } from '../lib/dataService'; + +interface Account { + id: string; + name: string; + type: 'checking' | 'savings' | 'credit_card' | 'mortgage' | 'investment' | 'loan'; + balance: number; + institution?: string; + accountNumber?: string; + color: string; + isActive: boolean; +} + +interface Envelope { + id: string; + name: string; + allocated: number; + spent: number; + color: string; + accountId: string; + incomeAllocation?: number; + incomeAllocationType?: 'percentage' | 'fixed'; +} + +interface SetupWizardProps { + onComplete: (accounts: Account[], envelopes: Envelope[]) => void; + onSkip: () => void; +} + +type WizardStep = 'welcome' | 'data-source' | 'accounts' | 'envelopes' | 'income-setup' | 'get-paid-setup' | 'complete'; + +export default function SetupWizard({ onComplete, onSkip }: SetupWizardProps) { + const [currentStep, setCurrentStep] = useState('welcome'); + const [dataSource, setDataSource] = useState<'import' | 'manual' | null>(null); + const [accounts, setAccounts] = useState([]); + const [envelopes, setEnvelopes] = useState([]); + + // Account creation state + const [showAddAccount, setShowAddAccount] = useState(false); + const [newAccount, setNewAccount] = useState>({ + type: 'checking', + balance: 0, + color: 'bg-blue-500', + isActive: true, + }); + + // Envelope creation state + const [showAddEnvelope, setShowAddEnvelope] = useState(false); + const [newEnvelope, setNewEnvelope] = useState>({ + allocated: 0, + spent: 0, + color: 'bg-green-500', + }); + + // Income allocation state + const [incomeAllocations, setIncomeAllocations] = useState<{ [envelopeId: string]: { type: 'percentage' | 'fixed'; value: number } }>({}); + const [defaultPaycheckAmounts, setDefaultPaycheckAmounts] = useState<{ [accountId: string]: number }>({}); + + const accountTypes = [ + { value: 'checking', label: 'Checking Account', icon: '🏦' }, + { value: 'savings', label: 'Savings Account', icon: '💰' }, + { value: 'credit_card', label: 'Credit Card', icon: '💳' }, + { value: 'mortgage', label: 'Mortgage', icon: '🏠' }, + { value: 'investment', label: 'Investment', icon: '📈' }, + { value: 'loan', label: 'Loan', icon: '📋' }, + ]; + + const envelopeColors = [ + 'bg-green-500', 'bg-blue-500', 'bg-purple-500', 'bg-orange-500', + 'bg-red-500', 'bg-yellow-500', 'bg-pink-500', 'bg-indigo-500' + ]; + + const handleAddAccount = () => { + if (newAccount.name && newAccount.type) { + const account: Account = { + id: `${newAccount.type}-${Date.now()}`, + name: newAccount.name, + type: newAccount.type as Account['type'], + balance: newAccount.balance || 0, + institution: newAccount.institution, + accountNumber: newAccount.accountNumber, + color: newAccount.color || 'bg-blue-500', + isActive: true, + }; + setAccounts(prev => [...prev, account]); + setNewAccount({ + type: 'checking', + balance: 0, + color: 'bg-blue-500', + isActive: true, + }); + setShowAddAccount(false); + } + }; + + const handleAddEnvelope = () => { + if (newEnvelope.name && newEnvelope.accountId && newEnvelope.allocated !== undefined) { + const envelope: Envelope = { + id: `env-${Date.now()}`, + name: newEnvelope.name, + allocated: newEnvelope.allocated, + spent: 0, + color: newEnvelope.color || 'bg-green-500', + accountId: newEnvelope.accountId, + }; + setEnvelopes(prev => [...prev, envelope]); + setNewEnvelope({ + allocated: 0, + spent: 0, + color: 'bg-green-500', + }); + setShowAddEnvelope(false); + } + }; + + const handleComplete = async () => { + try { + // Apply income allocation settings to envelopes + const envelopesWithAllocations = envelopes.map(envelope => { + const allocation = incomeAllocations[envelope.id]; + if (allocation) { + return { + ...envelope, + incomeAllocation: allocation.value, + incomeAllocationType: allocation.type, + }; + } + return envelope; + }); + + // Apply default paycheck amounts to accounts + const accountsWithDefaults = accounts.map(account => { + const defaultAmount = defaultPaycheckAmounts[account.id]; + if (defaultAmount) { + return { + ...account, + defaultPaycheckAmount: defaultAmount, + }; + } + return account; + }); + + await DataService.saveUserData('current-user-id', { + accounts: accountsWithDefaults, + envelopes: envelopesWithAllocations, + transactions: [], + setupCompleted: true, + }); + onComplete(accountsWithDefaults, envelopesWithAllocations); + } catch (error) { + console.error('Error saving setup data:', error); + } + }; + + const renderWelcome = () => ( +
+
+
💰
+

Welcome to Envelope Budgeting

+

Let's set up your budget to get started with secure, organized financial tracking.

+
+ +
+ + +
+
+ ); + + const renderDataSource = () => ( +
+
+

How would you like to set up your data?

+

Choose how you'd like to get started with your budget.

+
+ +
+ + + +
+ + +
+ ); + + const renderAccounts = () => ( +
+
+

Set Up Your Accounts

+

Add your bank accounts, credit cards, and other financial accounts.

+
+ + {/* Existing Accounts */} +
+

Your Accounts

+ {accounts.length === 0 ? ( +

No accounts added yet

+ ) : ( +
+ {accounts.map((account) => ( +
+
+
+
+

{account.name}

+

{account.type.replace('_', ' ').toUpperCase()}

+
+
+

${account.balance.toFixed(2)}

+
+ ))} +
+ )} +
+ + {/* Add Account Button */} +
+ +
+ + {/* Navigation */} +
+ + +
+ + {/* Add Account Modal */} + {showAddAccount && ( +
+
+

Add Account

+ +
+
+ + setNewAccount(prev => ({ ...prev, name: e.target.value }))} + className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + placeholder="e.g., Main Checking" + /> +
+ +
+ + +
+ +
+ + setNewAccount(prev => ({ ...prev, balance: parseFloat(e.target.value) || 0 }))} + className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + placeholder="0.00" + /> +
+ +
+ + setNewAccount(prev => ({ ...prev, institution: e.target.value }))} + className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + placeholder="e.g., Bank of America" + /> +
+ +
+ +
+ {envelopeColors.slice(0, 6).map((color) => ( +
+
+
+ +
+ + +
+
+
+ )} +
+ ); + + const renderEnvelopes = () => ( +
+
+

Create Your Envelopes

+

Set up budget categories for different spending areas.

+
+ + {/* Existing Envelopes */} +
+

Your Envelopes

+ {envelopes.length === 0 ? ( +

No envelopes created yet

+ ) : ( +
+ {envelopes.map((envelope) => { + const account = accounts.find(acc => acc.id === envelope.accountId); + return ( +
+
+
+
+

{envelope.name}

+

{account?.name}

+
+
+

${envelope.allocated.toFixed(2)}

+
+ ); + })} +
+ )} +
+ + {/* Add Envelope Button */} +
+ +
+ + {/* Navigation */} +
+ + +
+ + {/* Add Envelope Modal */} + {showAddEnvelope && ( +
+
+

Add Envelope

+ +
+
+ + setNewEnvelope(prev => ({ ...prev, name: e.target.value }))} + className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + placeholder="e.g., Groceries" + /> +
+ +
+ + +
+ +
+ + setNewEnvelope(prev => ({ ...prev, allocated: parseFloat(e.target.value) || 0 }))} + className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + placeholder="0.00" + /> +
+ +
+ +
+ {envelopeColors.map((color) => ( +
+
+
+ +
+ + +
+
+
+ )} +
+ ); + + const renderIncomeSetup = () => ( +
+
+

Income Allocation Setup

+

Set up how your income is automatically allocated to envelopes.

+
+ + {/* Income Allocation Settings */} +
+

Envelope Income Allocations

+

+ Configure how much of your income goes to each envelope automatically when you get paid. + You can set percentages or fixed amounts. +

+ +
+ {envelopes.map((envelope) => { + const account = accounts.find(acc => acc.id === envelope.accountId); + const allocation = incomeAllocations[envelope.id]; + + return ( +
+
+
+
+
+

{envelope.name}

+

{account?.name}

+
+
+
+

${envelope.allocated.toFixed(2)} allocated

+
+
+ +
+
+ + +
+ +
+ + setIncomeAllocations(prev => ({ + ...prev, + [envelope.id]: { + type: allocation?.type || 'percentage', + value: parseFloat(e.target.value) || 0 + } + }))} + placeholder={allocation?.type === 'fixed' ? '0.00' : '0'} + className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + /> +
+ +
+ +
+
+
+ ); + })} +
+
+ + {/* Navigation */} +
+ + +
+
+ ); + + const renderGetPaidSetup = () => ( +
+
+

Get Paid Setup

+

Set up your default paycheck amounts for quick income entry.

+
+ + {/* Default Paycheck Amounts */} +
+

Default Paycheck Amounts

+

+ Set default amounts for each account to speed up paycheck entry. You can always change these later. +

+ +
+ {accounts.filter(acc => acc.type !== 'credit_card' && acc.type !== 'mortgage' && acc.type !== 'loan').map((account) => { + const defaultAmount = defaultPaycheckAmounts[account.id]; + + return ( +
+
+
+
+
+

{account.name}

+

{account.type.replace('_', ' ')}

+
+
+
+ +
+
+ +
+ $ + setDefaultPaycheckAmounts(prev => ({ + ...prev, + [account.id]: parseFloat(e.target.value) || 0 + }))} + placeholder="0.00" + className="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + /> +
+
+
+ +
+
+
+ ); + })} +
+
+ + {/* Navigation */} +
+ + +
+
+ ); + + const renderComplete = () => ( +
+
+
🎉
+

Setup Complete!

+

Your envelope budgeting system is ready to use.

+
+ +
+

Your Setup Summary

+
+
+

Accounts

+

{accounts.length}

+
+
+

Envelopes

+

{envelopes.length}

+
+
+

Total Balance

+

+ ${accounts.reduce((sum, acc) => sum + acc.balance, 0).toFixed(2)} +

+
+
+

Monthly Budget

+

+ ${envelopes.reduce((sum, env) => sum + env.allocated, 0).toFixed(2)} +

+
+
+
+ +
+ + +
+
+ ); + + return ( +
+
+ {/* Progress Indicator */} +
+
+ {['welcome', 'data-source', 'accounts', 'envelopes', 'income-setup', 'get-paid-setup', 'complete'].map((step, index) => ( +
+
= index + ? 'bg-blue-600 text-white' + : 'bg-gray-200 text-gray-600' + }`}> + {index + 1} +
+ {index < 6 && ( +
index + ? 'bg-blue-600' + : 'bg-gray-200' + }`} /> + )} +
+ ))} +
+
+ {currentStep === 'welcome' && 'Welcome'} + {currentStep === 'data-source' && 'Choose Setup Method'} + {currentStep === 'accounts' && 'Add Your Accounts'} + {currentStep === 'envelopes' && 'Create Budget Envelopes'} + {currentStep === 'income-setup' && 'Configure Income Allocation'} + {currentStep === 'get-paid-setup' && 'Set Up Get Paid'} + {currentStep === 'complete' && 'Setup Complete'} +
+
+ + {/* Step Content */} + {currentStep === 'welcome' && renderWelcome()} + {currentStep === 'data-source' && renderDataSource()} + {currentStep === 'accounts' && renderAccounts()} + {currentStep === 'envelopes' && renderEnvelopes()} + {currentStep === 'income-setup' && renderIncomeSetup()} + {currentStep === 'get-paid-setup' && renderGetPaidSetup()} + {currentStep === 'complete' && renderComplete()} +
+
+ ); +} \ No newline at end of file diff --git a/src/components/TransactionEdit.tsx b/src/components/TransactionEdit.tsx new file mode 100644 index 0000000..54a293e --- /dev/null +++ b/src/components/TransactionEdit.tsx @@ -0,0 +1,177 @@ +'use client'; + +import { useState } from 'react'; + +interface Transaction { + id: string; + envelopeId?: string; + amount: number; + description: string; + date: Date; + accountId: string; +} + +interface TransactionEditProps { + transaction: Transaction; + envelopes: { id: string; name: string }[]; + accounts: { id: string; name: string }[]; + onSave: (updatedTransaction: Transaction) => void; + onCancel: () => void; +} + +export default function TransactionEdit({ transaction, envelopes, accounts, onSave, onCancel }: TransactionEditProps) { + const [amount, setAmount] = useState(Math.abs(transaction.amount).toString()); + const [description, setDescription] = useState(transaction.description); + const [date, setDate] = useState(transaction.date.toISOString().split('T')[0]); + const [selectedEnvelope, setSelectedEnvelope] = useState(transaction.envelopeId || ''); + const [selectedAccount, setSelectedAccount] = useState(transaction.accountId); + const [isExpense, setIsExpense] = useState(transaction.amount < 0); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + + const numAmount = parseFloat(amount); + if (isNaN(numAmount) || !description.trim()) { + alert('Please enter a valid amount and description'); + return; + } + + const transactionAmount = isExpense ? -Math.abs(numAmount) : Math.abs(numAmount); + + onSave({ + ...transaction, + amount: transactionAmount, + description: description.trim(), + date: new Date(date), + envelopeId: selectedEnvelope || undefined, + accountId: selectedAccount, + }); + }; + + return ( +
+
+

Edit Transaction

+ +
+
+ +
+ $ + setAmount(e.target.value)} + placeholder="0.00" + className="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + required + /> +
+
+ +
+ + setDate(e.target.value)} + className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + required + /> +
+ +
+ + setDescription(e.target.value)} + placeholder="Enter transaction description" + className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + required + /> +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+
+
+ ); +} \ No newline at end of file diff --git a/src/lib/crypto.ts b/src/lib/crypto.ts new file mode 100644 index 0000000..8657cab --- /dev/null +++ b/src/lib/crypto.ts @@ -0,0 +1,81 @@ +// Simple encryption utility using Web Crypto API +// Note: In production, consider using a more robust encryption library + +const encoder = new TextEncoder(); +const decoder = new TextDecoder(); + +export async function encryptData(data: string, key: string): Promise { + const keyMaterial = await crypto.subtle.importKey( + 'raw', + encoder.encode(key), + 'PBKDF2', + false, + ['deriveBits', 'deriveKey'] + ); + + const salt = crypto.getRandomValues(new Uint8Array(16)); + const derivedKey = await crypto.subtle.deriveKey( + { + name: 'PBKDF2', + salt: salt, + iterations: 100000, + hash: 'SHA-256', + }, + keyMaterial, + { name: 'AES-GCM', length: 256 }, + false, + ['encrypt'] + ); + + const iv = crypto.getRandomValues(new Uint8Array(12)); + const encrypted = await crypto.subtle.encrypt( + { name: 'AES-GCM', iv: iv }, + derivedKey, + encoder.encode(data) + ); + + // Combine salt, iv, and encrypted data + const combined = new Uint8Array(salt.length + iv.length + encrypted.byteLength); + combined.set(salt, 0); + combined.set(iv, salt.length); + combined.set(new Uint8Array(encrypted), salt.length + iv.length); + + return btoa(String.fromCharCode(...combined)); +} + +export async function decryptData(encryptedData: string, key: string): Promise { + const combined = new Uint8Array(atob(encryptedData).split('').map(c => c.charCodeAt(0))); + + const salt = combined.slice(0, 16); + const iv = combined.slice(16, 28); + const encrypted = combined.slice(28); + + const keyMaterial = await crypto.subtle.importKey( + 'raw', + encoder.encode(key), + 'PBKDF2', + false, + ['deriveBits', 'deriveKey'] + ); + + const derivedKey = await crypto.subtle.deriveKey( + { + name: 'PBKDF2', + salt: salt, + iterations: 100000, + hash: 'SHA-256', + }, + keyMaterial, + { name: 'AES-GCM', length: 256 }, + false, + ['decrypt'] + ); + + const decrypted = await crypto.subtle.decrypt( + { name: 'AES-GCM', iv: iv }, + derivedKey, + encrypted + ); + + return decoder.decode(decrypted); +} \ No newline at end of file diff --git a/src/lib/dataService.ts b/src/lib/dataService.ts new file mode 100644 index 0000000..e116d8e --- /dev/null +++ b/src/lib/dataService.ts @@ -0,0 +1,132 @@ +import { doc, getDoc, setDoc, updateDoc } from 'firebase/firestore'; +import { db } from './firebase'; +import { encryptData, decryptData } from './crypto'; + +interface Envelope { + id: string; + name: string; + allocated: number; + spent: number; + color: string; + accountId: string; // Link envelope to specific account + incomeAllocation?: number; // Percentage (0-100) or fixed amount if negative + incomeAllocationType?: 'percentage' | 'fixed'; // How to interpret incomeAllocation +} + +interface Transaction { + id: string; + envelopeId?: string; + accountId: string; // Link transaction to specific account + amount: number; + description: string; + date: Date; + category?: string; +} + +interface Account { + id: string; + name: string; + type: 'checking' | 'savings' | 'credit_card' | 'mortgage' | 'investment' | 'loan'; + balance: number; + institution?: string; + accountNumber?: string; + color: string; + isActive: boolean; + defaultPaycheckAmount?: number; +} + +interface UserData { + accounts: Account[]; + envelopes: Envelope[]; + transactions: Transaction[]; + setupCompleted: boolean; +} + +const ENCRYPTION_KEY = process.env.NEXT_PUBLIC_ENCRYPTION_KEY || 'default-key-change-in-production'; + +export class DataService { + private static async encryptUserData(data: UserData): Promise { + return await encryptData(JSON.stringify(data), ENCRYPTION_KEY); + } + + private static async decryptUserData(encryptedData: string): Promise { + const decrypted = await decryptData(encryptedData, ENCRYPTION_KEY); + return JSON.parse(decrypted); + } + + static async saveUserData(userId: string, data: UserData): Promise { + try { + const encryptedData = await this.encryptUserData(data); + const userDocRef = doc(db, 'users', userId); + await setDoc(userDocRef, { + data: encryptedData, + lastUpdated: new Date(), + }); + } catch (error) { + console.error('Error saving user data:', error); + throw error; + } + } + + static async loadUserData(userId: string): Promise { + try { + const userDocRef = doc(db, 'users', userId); + const userDoc = await getDoc(userDocRef); + + if (userDoc.exists()) { + const encryptedData = userDoc.data()?.data; + if (encryptedData) { + return await this.decryptUserData(encryptedData); + } + } + + // Return default data if no data exists + return { + accounts: [ + { + id: 'checking-1', + name: 'Main Checking', + type: 'checking' as const, + balance: 2500.00, + institution: 'Bank of America', + color: 'bg-blue-500', + isActive: true, + }, + { + id: 'savings-1', + name: 'Emergency Savings', + type: 'savings' as const, + balance: 5000.00, + institution: 'Bank of America', + color: 'bg-green-500', + isActive: true, + }, + ], + envelopes: [ + { id: '1', name: 'Groceries', allocated: 500, spent: 0, color: 'bg-green-500', accountId: 'checking-1' }, + { id: '2', name: 'Transportation', allocated: 300, spent: 0, color: 'bg-blue-500', accountId: 'checking-1' }, + { id: '3', name: 'Entertainment', allocated: 200, spent: 0, color: 'bg-purple-500', accountId: 'checking-1' }, + { id: '4', name: 'Utilities', allocated: 250, spent: 0, color: 'bg-orange-500', accountId: 'checking-1' }, + ], + transactions: [], + setupCompleted: false, + }; + } catch (error) { + console.error('Error loading user data:', error); + throw error; + } + } + + static async updateUserData(userId: string, updates: Partial): Promise { + try { + const currentData = await this.loadUserData(userId); + if (currentData) { + const updatedData = { ...currentData, ...updates }; + await this.saveUserData(userId, updatedData); + } + } catch (error) { + console.error('Error updating user data:', error); + throw error; + } + } +} \ No newline at end of file diff --git a/src/lib/firebase.ts b/src/lib/firebase.ts new file mode 100644 index 0000000..c4170aa --- /dev/null +++ b/src/lib/firebase.ts @@ -0,0 +1,21 @@ +import { initializeApp } from 'firebase/app'; +import { getAuth } from 'firebase/auth'; +import { getFirestore } from 'firebase/firestore'; + +const firebaseConfig = { + apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY, + authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, + projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID, + storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET, + messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID, + appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID, +}; + +// Initialize Firebase +const app = initializeApp(firebaseConfig); + +// Initialize Firebase services +export const auth = getAuth(app); +export const db = getFirestore(app); + +export default app; \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index cf9c65d..1a096dc 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,7 +1,11 @@ { "compilerOptions": { "target": "ES2017", - "lib": ["dom", "dom.iterable", "esnext"], + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], "allowJs": true, "skipLibCheck": true, "strict": true, @@ -19,7 +23,9 @@ } ], "paths": { - "@/*": ["./src/*"] + "@/*": [ + "./src/*" + ] } }, "include": [ @@ -28,7 +34,11 @@ "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts", - "**/*.mts" + "**/*.mts", + ".next\\dev/types/**/*.ts", + ".next\\dev/types/**/*.ts" ], - "exclude": ["node_modules"] + "exclude": [ + "node_modules" + ] }