Implement envelope-based budget management application

[Copilot]

Implements a budget management web application using the envelope budgeting method with Next.js, allowing users to track income, fixed expenses, and categorized spending limits.

Implementation

Application Structure

• Next.js 16 with TypeScript and App Router
• Tailwind CSS 4 with PostCSS plugin
• Firebase/Firestore for persistence with localStorage fallback
• Type definitions for User, Envelope, and Expense entities

Core Components

• Onboarding.tsx: 3-step wizard for initial setup (salary, fixed expenses, envelope creation)
• Dashboard.tsx: Main view with budget overview banner and envelope cards grid
• Budget calculation logic with automatic percentage tracking and remaining amounts

Data Layer

• Firebase service layer with timeout handling (3s)
• Automatic localStorage fallback when Firebase unavailable or misconfigured
• Secure ID generation using crypto.randomUUID()
• Error handling for corrupted localStorage data

// Budget calculation example
export function calculateBudget(user: User, expenses: Expense[]): BudgetCalculation {
  const remainingToLive = user.monthlySalary - user.fixedExpenses - totalEnvelopeBudget;
  const envelopes = user.envelopes.map(envelope => ({
    spent: expenses.filter(e => e.envelopeId === envelope.id).reduce((sum, e) => sum + e.amount, 0),
    percentage: (spent / envelope.monthlyLimit) * 100,
    // ...
  }));
  return { remainingToLive, envelopes, ... };
}

Screenshots

Onboarding Flow

Dashboard Views

Configuration

Firebase optional—configure via .env.local or runs standalone with localStorage. See .env.local.example for setup.

Original prompt

Agis en tant que développeur Full Stack expert en Next.js et Tailwind CSS. Je souhaite créer une application web de gestion de budget basée sur la méthode des enveloppes.

Voici les spécificités de l'application : 1. Structure des données : Un utilisateur a un salaire mensuel et des dépenses récurrentes fixes. Le reste est réparti dans des "Enveloppes" (catégories comme Courses, Essence, Loisirs) avec un montant plafond. 2. Flux d'onboarding : Au premier lancement, l'utilisateur doit saisir son salaire, ses frais fixes, puis créer ses catégories avec leurs limites mensuelles. 3. Dashboard : - En haut : Une bannière affichant le "Reste à vivre" total pour le mois. - Grille de tuiles : Chaque catégorie est une carte affichant le nom, une icône, le montant dépensé / montant total, et une barre de progression en pourcentage. 4. Fonctionnalités : Un bouton "+" pour ajouter une dépense en sélectionnant une catégorie et un montant. 5. Persistance : Utilise Fireblase

Peux-tu me générer le code pour le composant principal Dashboard et la logique de calcul des dépenses ?

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.