DL Finance Manager

This is a Next.js application built with Firebase Studio to help you manage your personal finances effectively.

Core Features

• Income/Expense Tracking: Manually record income and expenses, or import data from CSV/Excel.
• Transaction Categorization: Categorize transactions for clear spending visualization and see totals per category.
• Budgeting Alerts: Set monthly spending limits for categories and receive notifications.
• Savings Goals: Define savings goals with target amounts and deadlines, and track your progress.
• Predictive Analysis Tool (GenAI): An AI tool analyzes spending habits to predict future savings or overspending, offering smart suggestions.
• Data Export: Export financial data in PDF, Excel, and CSV formats.
• Security and Authentication: Secure user accounts with email/password authentication. (Currently bypassed for development purposes - see src/contexts/AuthContext.tsx)

Getting Started

1. Set up Firebase:

   • Create a Firebase project at https://console.firebase.google.com/.
   • In your Firebase project, go to Build > Authentication and enable the Email/Password sign-in method.
   • (Optional) If using Firestore, go to Build > Firestore Database, create a database, and set up security rules.
   • Navigate to Project settings (click the gear icon next to Project Overview).
   • In the General tab, under "Your apps", click the Web icon (</>) to register a web app if you haven't already.
   • After registering, you'll find your Firebase project configuration (apiKey, authDomain, etc.) in the firebaseConfig object.
   • Crucial Step: Create a file named .env.local in the root directory of this project.
   • Copy and paste your Firebase configuration into the .env.local file, prefixing each key with NEXT_PUBLIC_:

     NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
     NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
     NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
     NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
     NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
     NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

     Replace your_api_key, your_auth_domain, etc., with the actual values from your Firebase project. Note: Even if authentication is bypassed in the code, these variables are still expected by the Firebase SDK initialization. Incorrect or missing values will lead to Firebase initialization errors.

2. Install dependencies:

   npm install
   # or
   yarn install

3. Run the development server:

   npm run dev
   # or
   yarn dev

   The application will be available at http://localhost:9002. Important: After creating or modifying the .env.local file, you must restart your development server for the changes to take effect.

4. Explore the app:

   • The application will redirect to /dashboard due to authentication being bypassed.
   • To re-enable authentication, modify src/contexts/AuthContext.tsx and ensure Firebase is correctly configured in .env.local.

Troubleshooting

Firebase: Error (auth/invalid-api-key) or (auth/api-key-not-valid)

If you encounter an error message like Firebase: Error (auth/invalid-api-key) or Firebase: Error (auth/api-key-not-valid.-please-pass-a-valid-api-key.) when the application starts or during auth operations (if re-enabled), it means the application is not able to correctly connect to your Firebase project. This is almost always due to one of the following:

1. .env.local file is missing or incorrectly named: Ensure you have a file named exactly .env.local (note the leading dot) in the root of your project.
2. Firebase configuration variables are missing or incorrect: Double-check that all the NEXT_PUBLIC_FIREBASE_... variables are present in your .env.local file and that their values exactly match those from your Firebase project settings.
3. Development server was not restarted: After creating or making changes to the .env.local file, you must stop and restart the Next.js development server (e.g., stop npm run dev and run it again).

Please re-verify Step 1 of the "Getting Started" section carefully.

Project Structure

• src/app: Contains the Next.js App Router pages and layouts.
  • (app): Authenticated routes and layout.
  • (auth): Authentication-related routes (login, signup).
• src/components: Reusable UI components.
  • features: Components specific to application features (dashboard, transactions, etc.).
  • layout: Layout components like Sidebar and Header.
  • ui: ShadCN UI components.
• src/contexts: React contexts (e.g., AuthContext).
• src/lib: Utility functions, Firebase setup, type definitions.
• src/ai: Genkit AI flows and configuration.
• public: Static assets.

UI Style

The application follows a modern design language:

• Primary Color: Modern Teal
• Secondary Color: Light Grey (for backgrounds)
• Accent Color: Vibrant Green (for positive indicators)
• Typography: Clean, modern sans-serif (Geist font)
• Iconography: Simple, intuitive icons from lucide-react
• Layout: Clean, responsive, and adaptive

Built with Next.js, Tailwind CSS, ShadCN UI, and Firebase.