# Mes Budgets Participatifs

Une application web moderne pour gérer des campagnes de budgets participatifs, permettant aux collectifs de décider collectivement de leurs dépenses budgétaires.

## 🚀 Technologies utilisées

- **Frontend**: Next.js 15 avec TypeScript et App Router
- **UI/UX**: Tailwind CSS 4 + Shadcn/ui + Lucide React
- **Base de données**: PostgreSQL via Supabase
- **Authentification**: Supabase Auth
- **Email**: Nodemailer avec support SMTP
- **Déploiement**: Compatible Vercel, Netlify, etc.

## 📋 Fonctionnalités

### ✅ Implémentées

#### 🏠 **Page d'accueil**
- Présentation moderne de l'application
- Design responsive avec sections Hero, Features et CTA
- Navigation vers l'espace administration sécurisé

#### 🔐 **Authentification**
- **Connexion sécurisée** : Authentification Supabase avec email/mot de passe
- **Protection des routes admin** : Toutes les pages d'administration sont protégées
- **Session persistante** : Maintien de la connexion entre les pages
- **Interface moderne** : Formulaire de connexion avec Shadcn/ui

#### 🛠️ **Administration complète**
- **Gestion des campagnes** : Création, modification, suppression
- **États de campagne** : Dépôt de propositions, vote, terminé
- **Statistiques en temps réel** : Nombre de propositions, participants, taux de participation
- **Recherche** : Filtrage des campagnes par titre ou description
- **Interface moderne** : Design Shadcn/ui avec cartes et badges

#### 📝 **Gestion des propositions**
- **Page dédiée** : Interface complète pour gérer les propositions par campagne
- **CRUD complet** : Création, lecture, modification, suppression
- **Informations détaillées** : Auteur, email, date de création
- **Interface moderne** : Cartes avec avatars et badges

#### 👥 **Gestion des participants**
- **Page dédiée** : Interface complète pour gérer les participants par campagne
- **Statuts de vote** : Indication visuelle des participants ayant voté
- **Liens de vote personnels** : URLs uniques pour chaque participant
- **Statistiques** : Taux de participation et budget total voté

#### 🌐 **Pages publiques**
- **Dépôt de propositions** : Interface publique pour soumettre des propositions
  - URL unique et partageable
  - Formulaire avec validation
  - Informations d'auteur obligatoires
- **Vote public** : Interface de vote pour les participants
  - Slider interactif pour les choix de budget
  - Validation du budget total
  - Sauvegarde des votes

#### 📧 **Système d'email**
- **Configuration SMTP** : Interface d'administration pour configurer les paramètres email
- **Envoi d'emails** : Notifications aux participants
- **Test d'envoi** : Fonctionnalité de test des paramètres SMTP
- **Templates personnalisables** : Messages d'email configurables

#### 🎨 **Interface moderne**
- **Shadcn/ui** : Composants modernes et accessibles
- **Design responsive** : Adaptation mobile/desktop
- **Thème sombre** : Support du mode sombre
- **Animations** : Transitions fluides
- **Icônes Lucide** : Icônes modernes et cohérentes

### 🔄 Fonctionnalités avancées
- **URLs publiques** : Liens partageables pour le dépôt et le vote
- **Copie de liens** : Boutons pour copier les URLs dans le presse-papiers
- **Validation en temps réel** : Vérification des budgets lors du vote
- **Gestion d'erreurs** : Messages d'erreur informatifs
- **États de chargement** : Feedback visuel pendant les opérations

## 🛠️ Installation

### Prérequis
- Node.js 18+ 
- npm ou yarn
- Compte Supabase

### 1. Cloner le projet
```bash
git clone <votre-repo>
cd mes-budgets-participatifs
```

### 2. Installer les dépendances
```bash
npm install
```

### 3. Configuration Supabase

#### Créer un projet Supabase
1. Allez sur [supabase.com](https://supabase.com)
2. Créez un nouveau projet
3. Notez votre URL et votre clé anon

#### Configurer la base de données
1. Dans votre projet Supabase, allez dans l'éditeur SQL
2. Copiez et exécutez le contenu du fichier `supabase-schema.sql`

#### Configurer l'authentification
1. Dans Supabase Dashboard > Authentication > Settings
2. Activez l'authentification par email
3. Créez un utilisateur admin via l'interface Supabase ou l'API

#### Configurer les variables d'environnement
Créez un fichier `.env.local` à la racine du projet :

```env
NEXT_PUBLIC_SUPABASE_URL=votre_url_supabase
NEXT_PUBLIC_SUPABASE_ANON_KEY=votre_cle_anon_supabase
```

### 4. Lancer l'application
```bash
npm run dev
```

L'application sera accessible sur `http://localhost:3000`

## 📊 Structure de la base de données

### Table `campaigns`
- `id`: Identifiant unique (UUID)
- `title`: Titre de la campagne
- `description`: Description détaillée
- `status`: État de la campagne (`deposit`, `voting`, `closed`)
- `budget_per_user`: Budget alloué par participant (en euros)
- `spending_tiers`: Paliers de dépenses disponibles (séparés par des virgules)
- `created_at`: Date de création
- `updated_at`: Date de dernière modification

### Table `propositions`
- `id`: Identifiant unique (UUID)
- `campaign_id`: Référence vers la campagne
- `title`: Titre de la proposition
- `description`: Description détaillée
- `author_first_name`: Prénom de l'auteur
- `author_last_name`: Nom de l'auteur
- `author_email`: Email de l'auteur
- `created_at`: Date de création

### Table `participants`
- `id`: Identifiant unique (UUID)
- `campaign_id`: Référence vers la campagne
- `first_name`: Prénom du participant
- `last_name`: Nom du participant
- `email`: Adresse email
- `created_at`: Date de création

### Table `votes`
- `id`: Identifiant unique (UUID)
- `participant_id`: Référence vers le participant
- `proposition_id`: Référence vers la proposition
- `amount`: Montant voté (en euros)
- `created_at`: Date de création
- `updated_at`: Date de dernière modification

### Table `settings`
- `key`: Clé de configuration
- `value`: Valeur de configuration
- `category`: Catégorie (email, general, etc.)
- `description`: Description de la configuration

## 🎨 Interface utilisateur

### Page d'accueil
- **Design moderne** : Hero section avec gradient et call-to-action
- **Présentation claire** : Fonctionnalités principales expliquées
- **Navigation intuitive** : Accès à l'administration sécurisée

### Espace d'administration (protégé)
- **Dashboard complet** : Vue d'ensemble avec statistiques
- **Gestion des campagnes** : CRUD complet avec interface moderne
- **Navigation fluide** : Liens vers les pages de gestion détaillées
- **Recherche** : Filtrage en temps réel des campagnes
- **Paramètres** : Configuration SMTP et autres paramètres

### Pages de gestion détaillées
- **Propositions** : Interface complète avec avatars et informations détaillées
- **Participants** : Gestion avec statuts de vote et liens personnels
- **Statistiques** : Métriques en temps réel (participation, budget voté)

### Pages publiques
- **Dépôt de propositions** : Interface épurée et accessible
- **Vote** : Interface intuitive avec slider et validation

## 🔧 Architecture technique

### Structure des fichiers
```
src/
├── app/                           # Pages Next.js (App Router)
│   ├── page.tsx                  # Page d'accueil
│   ├── admin/                    # Pages d'administration (protégées)
│   │   ├── page.tsx             # Dashboard principal
│   │   ├── settings/            # Paramètres SMTP
│   │   └── campaigns/[id]/      # Pages de gestion par campagne
│   ├── api/                     # API Routes
│   │   ├── send-participant-email/
│   │   ├── test-email/
│   │   └── test-smtp/
│   └── campaigns/[id]/          # Pages publiques
│       ├── propose/             # Dépôt de propositions
│       └── vote/[participantId] # Vote public
├── components/                   # Composants React
│   ├── ui/                      # Composants Shadcn/ui
│   ├── AuthGuard.tsx           # Protection des routes
│   ├── Navigation.tsx          # Navigation principale
│   ├── SmtpSettingsForm.tsx    # Configuration SMTP
│   └── [Modals]               # Modales de gestion
├── lib/                         # Services et configuration
│   ├── supabase.ts            # Configuration Supabase
│   ├── services.ts            # Services de données
│   ├── email.ts               # Service d'envoi d'emails
│   ├── encryption.ts          # Chiffrement des données sensibles
│   └── utils.ts               # Utilitaires
└── types/                      # Types TypeScript
    └── index.ts               # Définitions des types
```

### Services de données
- **campaignService** : Gestion des campagnes et statistiques
- **propositionService** : CRUD des propositions
- **participantService** : CRUD des participants
- **voteService** : Gestion des votes et statuts
- **settingsService** : Gestion des paramètres de configuration

### Authentification
- **AuthGuard** : Composant de protection des routes
- **Supabase Auth** : Authentification sécurisée
- **Session management** : Gestion des sessions utilisateur

### Système d'email
- **Configuration SMTP** : Interface d'administration
- **Envoi d'emails** : Service Nodemailer
- **Chiffrement** : Protection des mots de passe SMTP
- **Templates** : Messages personnalisables

## 🚀 Déploiement

### Vercel (recommandé)
1. Connectez votre repo GitHub à Vercel
2. Configurez les variables d'environnement dans Vercel
3. Déployez automatiquement

### Variables d'environnement de production
```env
NEXT_PUBLIC_SUPABASE_URL=votre_url_supabase_production
NEXT_PUBLIC_SUPABASE_ANON_KEY=votre_cle_anon_supabase_production
```

### Autres plateformes
L'application peut être déployée sur n'importe quelle plateforme supportant Next.js :
- Netlify
- Railway
- DigitalOcean App Platform
- AWS Amplify

## 🔒 Sécurité

### Authentification
- **Routes protégées** : Toutes les pages admin nécessitent une authentification
- **Session sécurisée** : Gestion des sessions via Supabase
- **Pas d'inscription publique** : Seuls les comptes pré-autorisés peuvent accéder

### Base de données
- **Row Level Security (RLS)** : Protection des données au niveau de la base
- **Validation côté serveur** : Vérification des données avant sauvegarde
- **URLs sécurisées** : Liens publics avec identifiants uniques

### Données sensibles
- **Chiffrement SMTP** : Mots de passe SMTP chiffrés en base
- **Variables d'environnement** : Configuration sécurisée
- **Validation des entrées** : Protection contre les injections

## 🎯 Workflow d'utilisation

### 1. Configuration initiale
1. Créer un compte Supabase
2. Configurer la base de données
3. Créer un utilisateur admin
4. Configurer les paramètres SMTP (optionnel)
5. Déployer l'application

### 2. Création d'une campagne
1. Se connecter à l'administration
2. Créer une nouvelle campagne
3. Définir le budget et les paliers
4. Passer en mode "Dépôt de propositions"

### 3. Collecte des propositions
1. Partager le lien public de dépôt
2. Les participants soumettent leurs propositions
3. Gérer les propositions via l'interface admin

### 4. Phase de vote
1. Ajouter les participants
2. Passer en mode "En cours de vote"
3. Partager les liens de vote personnels
4. Suivre la participation en temps réel
5. Envoyer des rappels par email (optionnel)

### 5. Résultats
1. Consulter les statistiques de vote
2. Analyser les résultats
3. Clôturer la campagne

## 📚 Documentation supplémentaire

- **SETUP.md** : Guide de configuration détaillé
- **SETTINGS.md** : Documentation des paramètres et configurations

## 🤝 Contribution

1. Fork le projet
2. Créez une branche pour votre fonctionnalité
3. Committez vos changements
4. Poussez vers la branche
5. Ouvrez une Pull Request

## 📝 Licence

Ce projet est sous licence MIT. Voir le fichier `LICENSE` pour plus de détails.

## 🆘 Support

Pour toute question ou problème :
1. Vérifiez la documentation Supabase
2. Consultez les issues GitHub
3. Créez une nouvelle issue si nécessaire

---

**Développé avec ❤️ pour faciliter la démocratie participative**

*Application complète et prête pour la production avec authentification, interface moderne, système d'email et toutes les fonctionnalités de gestion de budgets participatifs.*