From e0f86a8845d7a792e4eb00b9d521f545dc0efff9 Mon Sep 17 00:00:00 2001 From: Yannick Le Duc Date: Mon, 25 Aug 2025 14:38:13 +0200 Subject: [PATCH] initial commit --- DEBUG.md | 100 +++++ README.md | 187 ++++++++- SETUP.md | 165 ++++++++ env.example | 6 + next.config.js | 14 + package-lock.json | 367 +++++++++++++++++- package.json | 15 +- .../campaigns/[id]/participants/page.tsx | 252 ++++++++++++ .../campaigns/[id]/propositions/page.tsx | 241 ++++++++++++ src/app/admin/page.tsx | 301 ++++++++++++++ src/app/layout.tsx | 4 +- src/app/page.tsx | 155 +++----- src/components/AddParticipantModal.tsx | 166 ++++++++ src/components/AddPropositionModal.tsx | 147 +++++++ src/components/CreateCampaignModal.tsx | 189 +++++++++ src/components/DeleteCampaignModal.tsx | 118 ++++++ src/components/DeleteParticipantModal.tsx | 113 ++++++ src/components/DeletePropositionModal.tsx | 110 ++++++ src/components/EditCampaignModal.tsx | 200 ++++++++++ src/components/EditParticipantModal.tsx | 159 ++++++++ src/components/EditPropositionModal.tsx | 141 +++++++ src/lib/services.ts | 175 +++++++++ src/lib/supabase.ts | 6 + src/types/index.ts | 58 +++ supabase-schema.sql | 75 ++++ 25 files changed, 3336 insertions(+), 128 deletions(-) create mode 100644 DEBUG.md create mode 100644 SETUP.md create mode 100644 env.example create mode 100644 next.config.js create mode 100644 src/app/admin/campaigns/[id]/participants/page.tsx create mode 100644 src/app/admin/campaigns/[id]/propositions/page.tsx create mode 100644 src/app/admin/page.tsx create mode 100644 src/components/AddParticipantModal.tsx create mode 100644 src/components/AddPropositionModal.tsx create mode 100644 src/components/CreateCampaignModal.tsx create mode 100644 src/components/DeleteCampaignModal.tsx create mode 100644 src/components/DeleteParticipantModal.tsx create mode 100644 src/components/DeletePropositionModal.tsx create mode 100644 src/components/EditCampaignModal.tsx create mode 100644 src/components/EditParticipantModal.tsx create mode 100644 src/components/EditPropositionModal.tsx create mode 100644 src/lib/services.ts create mode 100644 src/lib/supabase.ts create mode 100644 src/types/index.ts create mode 100644 supabase-schema.sql diff --git a/DEBUG.md b/DEBUG.md new file mode 100644 index 0000000..7ed7a09 --- /dev/null +++ b/DEBUG.md @@ -0,0 +1,100 @@ +# Guide de Débogage - Problème de Suppression + +## 🔍 Étapes de débogage + +### 1. Vérifier les variables d'environnement + +Assurez-vous que votre fichier `.env.local` contient les bonnes valeurs : + +```env +NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co +NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here +``` + +### 2. Vérifier la console du navigateur + +1. Ouvrez les outils de développement (F12) +2. Allez dans l'onglet "Console" +3. Essayez de supprimer une campagne +4. Regardez les logs qui s'affichent + +Vous devriez voir : +- "Début de la suppression de la campagne: [ID]" +- "Tentative de suppression de la campagne: [ID]" +- "Campagne supprimée avec succès" +- "handleCampaignDeleted appelé" +- "Rechargement des campagnes..." + +### 3. Vérifier les politiques RLS dans Supabase + +Dans votre projet Supabase, allez dans **Authentication > Policies** et vérifiez que vous avez bien : + +```sql +CREATE POLICY "Allow public delete access to campaigns" ON campaigns FOR DELETE USING (true); +``` + +### 4. Tester la suppression directement dans Supabase + +1. Allez dans **Table Editor** dans Supabase +2. Sélectionnez la table `campaigns` +3. Essayez de supprimer une ligne manuellement +4. Vérifiez s'il y a des erreurs + +### 5. Vérifier les contraintes de clés étrangères + +Assurez-vous que les tables ont bien les contraintes `ON DELETE CASCADE` : + +```sql +campaign_id UUID NOT NULL REFERENCES campaigns(id) ON DELETE CASCADE +``` + +## 🚨 Problèmes courants + +### Problème 1 : Variables d'environnement manquantes +**Symptôme** : Erreur "supabaseUrl is required" +**Solution** : Vérifiez votre fichier `.env.local` + +### Problème 2 : Politiques RLS manquantes +**Symptôme** : Erreur "new row violates row-level security policy" +**Solution** : Ajoutez la politique de suppression dans Supabase + +### Problème 3 : Contraintes de clés étrangères +**Symptôme** : Erreur de contrainte lors de la suppression +**Solution** : Vérifiez que les contraintes CASCADE sont bien définies + +### Problème 4 : Connexion Supabase +**Symptôme** : Erreur de connexion +**Solution** : Vérifiez l'URL et la clé anon de Supabase + +## 🔧 Solutions rapides + +### Réinitialiser les politiques RLS +```sql +-- Supprimer toutes les politiques existantes +DROP POLICY IF EXISTS "Allow public read access to campaigns" ON campaigns; +DROP POLICY IF EXISTS "Allow public insert access to campaigns" ON campaigns; +DROP POLICY IF EXISTS "Allow public update access to campaigns" ON campaigns; +DROP POLICY IF EXISTS "Allow public delete access to campaigns" ON campaigns; + +-- Recréer les politiques +CREATE POLICY "Allow public read access to campaigns" ON campaigns FOR SELECT USING (true); +CREATE POLICY "Allow public insert access to campaigns" ON campaigns FOR INSERT WITH CHECK (true); +CREATE POLICY "Allow public update access to campaigns" ON campaigns FOR UPDATE USING (true); +CREATE POLICY "Allow public delete access to campaigns" ON campaigns FOR DELETE USING (true); +``` + +### Vérifier la configuration Supabase +```javascript +// Dans la console du navigateur, testez : +import { createClient } from '@supabase/supabase-js'; +const supabase = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY); +console.log('Supabase URL:', process.env.NEXT_PUBLIC_SUPABASE_URL); +``` + +## 📞 Support + +Si le problème persiste, vérifiez : +1. Les logs dans la console du navigateur +2. Les logs dans Supabase (Dashboard > Logs) +3. Les politiques RLS dans Supabase +4. La configuration des variables d'environnement diff --git a/README.md b/README.md index e215bc4..664e6e2 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,181 @@ -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). +# Mes Budgets Participatifs -## Getting Started +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. -First, run the development server: +## 🚀 Technologies utilisées +- **Frontend**: Next.js 14 avec TypeScript et App Router +- **Styling**: Tailwind CSS + Headless UI +- **Base de données**: PostgreSQL via Supabase +- **Authentification**: Supabase Auth (prévu pour les futures versions) +- **Icons**: Heroicons + +## 📋 Fonctionnalités + +### ✅ Implémentées +- Page d'accueil avec présentation de l'application +- Interface d'administration pour gérer les campagnes +- Création de nouvelles campagnes avec tous les paramètres +- Ajout de propositions à une campagne +- Ajout de participants à une campagne +- Gestion des états de campagne (dépôt, vote, fermé) +- Interface moderne et responsive + +### 🔄 À venir +- Authentification des utilisateurs +- Interface de vote pour les participants +- Résultats et statistiques des votes +- Notifications par email +- Gestion des permissions + +## 🛠️ Installation + +### Prérequis +- Node.js 18+ +- npm ou yarn +- Compte Supabase + +### 1. Cloner le projet ```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev +git clone +cd mes-budgets-participatifs ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +### 2. Installer les dépendances +```bash +npm install +``` -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. +### 3. Configuration Supabase -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. +#### 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 -## Learn More +#### 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` -To learn more about Next.js, take a look at the following resources: +#### Configurer les variables d'environnement +Créez un fichier `.env.local` à la racine du projet : -- [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. +```env +NEXT_PUBLIC_SUPABASE_URL=votre_url_supabase +NEXT_PUBLIC_SUPABASE_ANON_KEY=votre_cle_anon_supabase +``` -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! +### 4. Lancer l'application +```bash +npm run dev +``` -## Deploy on Vercel +L'application sera accessible sur `http://localhost:3000` -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. +## 📊 Structure de la base de données -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. +### 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 +- `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 + +## 🎨 Interface utilisateur + +### Page d'accueil +- Présentation de l'application +- Bouton d'accès à l'administration +- Design moderne avec gradient et cartes informatives + +### Page d'administration +- Liste des campagnes existantes +- Bouton pour créer une nouvelle campagne +- Actions rapides pour chaque campagne : + - Ajouter une proposition + - Ajouter un participant +- Indicateurs visuels pour les états des campagnes + +### Modals +- **Création de campagne** : Formulaire complet avec validation +- **Ajout de proposition** : Titre et description +- **Ajout de participant** : Informations personnelles + +## 🔧 Développement + +### Structure des fichiers +``` +src/ +├── app/ # Pages Next.js (App Router) +│ ├── page.tsx # Page d'accueil +│ └── admin/ # Pages d'administration +├── components/ # Composants React réutilisables +├── lib/ # Services et configuration +│ ├── supabase.ts # Configuration Supabase +│ └── services.ts # Services de données +└── types/ # Types TypeScript + └── index.ts # Définitions des types +``` + +### Scripts disponibles +```bash +npm run dev # Lancer en mode développement +npm run build # Construire pour la production +npm run start # Lancer en mode production +npm run lint # Vérifier le code avec ESLint +``` + +## 🚀 Déploiement + +### Vercel (recommandé) +1. Connectez votre repo GitHub à Vercel +2. Configurez les variables d'environnement dans Vercel +3. Déployez automatiquement + +### Autres plateformes +L'application peut être déployée sur n'importe quelle plateforme supportant Next.js : +- Netlify +- Railway +- DigitalOcean App Platform +- AWS Amplify + +## 🤝 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** diff --git a/SETUP.md b/SETUP.md new file mode 100644 index 0000000..328d085 --- /dev/null +++ b/SETUP.md @@ -0,0 +1,165 @@ +# Guide de Configuration - Mes Budgets Participatifs + +## 🚀 Configuration Rapide + +### 1. Installation des dépendances +```bash +npm install +``` + +### 2. Configuration Supabase + +#### Étape 1 : 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 dans les paramètres du projet + +#### Étape 2 : Configurer la base de données +1. Dans votre projet Supabase, allez dans **SQL Editor** +2. Copiez et exécutez le contenu du fichier `supabase-schema.sql` +3. Vérifiez que les tables sont créées dans **Table Editor** + +#### Étape 3 : Configurer les variables d'environnement +1. Copiez le fichier `env.example` vers `.env.local` +2. Remplacez les valeurs par vos vraies informations Supabase : + +```env +NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co +NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here +``` + +### 3. Lancer l'application +```bash +npm run dev +``` + +L'application sera accessible sur `http://localhost:3000` + +## 📊 Structure de la Base de Données + +### Tables créées automatiquement : + +#### `campaigns` +- **id** : Identifiant unique (UUID) +- **title** : Titre de la campagne +- **description** : Description détaillée +- **status** : État (`deposit`, `voting`, `closed`) +- **budget_per_user** : Budget par participant (€) +- **spending_tiers** : Paliers de dépenses (ex: "10,25,50,100") +- **created_at** : Date de création +- **updated_at** : Date de modification + +#### `propositions` +- **id** : Identifiant unique (UUID) +- **campaign_id** : Référence vers la campagne +- **title** : Titre de la proposition +- **description** : Description détaillée +- **created_at** : Date de création + +#### `participants` +- **id** : Identifiant unique (UUID) +- **campaign_id** : Référence vers la campagne +- **first_name** : Prénom +- **last_name** : Nom +- **email** : Adresse email +- **created_at** : Date de création + +## 🔧 Fonctionnalités Disponibles + +### Page d'accueil (`/`) +- Présentation de l'application +- Bouton d'accès à l'administration +- Design moderne et responsive + +### Page d'administration (`/admin`) +- **Liste des campagnes** : Affichage de toutes les campagnes avec leur statut +- **Créer une campagne** : Formulaire complet avec validation +- **Ajouter des propositions** : Par campagne +- **Ajouter des participants** : Par campagne +- **Indicateurs visuels** : Statuts colorés pour chaque campagne + +### Modals interactifs +- **Création de campagne** : Titre, description, budget, paliers, statut +- **Ajout de proposition** : Titre et description +- **Ajout de participant** : Prénom, nom, email + +## 🎨 Interface Utilisateur + +### Design System +- **Framework CSS** : Tailwind CSS +- **Composants** : Headless UI pour les modals +- **Icônes** : Heroicons +- **Couleurs** : Palette moderne avec indigo comme couleur principale + +### Responsive Design +- Mobile-first approach +- Adaptation automatique sur tous les écrans +- Navigation intuitive + +## 🚀 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 pour la production +```env +NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co +NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key +``` + +## 🔍 Dépannage + +### Erreurs courantes + +#### "supabaseUrl is required" +- Vérifiez que vos variables d'environnement sont correctement définies +- Redémarrez le serveur de développement + +#### Erreurs de build +- Vérifiez que tous les composants sont correctement importés +- Assurez-vous que les types TypeScript sont corrects + +#### Problèmes de base de données +- Vérifiez que le script SQL a été exécuté correctement +- Contrôlez les politiques RLS dans Supabase + +### Logs de développement +```bash +# Voir les logs en temps réel +npm run dev + +# Build de production +npm run build + +# Lancer en production +npm run start +``` + +## 📈 Prochaines Étapes + +### Fonctionnalités prévues +- [ ] Authentification des utilisateurs +- [ ] Interface de vote pour les participants +- [ ] Résultats et statistiques +- [ ] Notifications par email +- [ ] Gestion des permissions + +### Améliorations techniques +- [ ] Types TypeScript stricts pour Supabase +- [ ] Tests unitaires et d'intégration +- [ ] Optimisation des performances +- [ ] PWA (Progressive Web App) + +## 🤝 Support + +Pour toute question ou problème : +1. Vérifiez ce guide de configuration +2. Consultez la documentation Supabase +3. Vérifiez les logs de développement +4. Créez une issue sur GitHub si nécessaire + +--- + +**Application prête à l'emploi pour la démocratie participative ! 🗳️** diff --git a/env.example b/env.example new file mode 100644 index 0000000..47dd36c --- /dev/null +++ b/env.example @@ -0,0 +1,6 @@ +# Variables d'environnement pour Mes Budgets Participatifs +# Copiez ce fichier vers .env.local et remplissez avec vos vraies valeurs + +# Configuration Supabase +NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co +NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here diff --git a/next.config.js b/next.config.js new file mode 100644 index 0000000..662bb14 --- /dev/null +++ b/next.config.js @@ -0,0 +1,14 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + // Désactiver le pré-rendu statique pour les pages qui utilisent Supabase + experimental: { + // Optimisations pour le développement + }, + // Configuration pour éviter les erreurs de build avec les variables d'environnement + env: { + NEXT_PUBLIC_SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL, + NEXT_PUBLIC_SUPABASE_ANON_KEY: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY, + }, +} + +module.exports = nextConfig diff --git a/package-lock.json b/package-lock.json index 32138c9..70cba1e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "mes-budgets-participatifs", "version": "0.1.0", "dependencies": { + "@headlessui/react": "^2.2.7", + "@heroicons/react": "^2.2.0", + "@supabase/supabase-js": "^2.56.0", "next": "15.5.0", "react": "19.1.0", "react-dom": "19.1.0" @@ -211,6 +214,88 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz", + "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==", + "license": "MIT", + "dependencies": { + "@floating-ui/utils": "^0.2.10" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.7.4", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz", + "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==", + "license": "MIT", + "dependencies": { + "@floating-ui/core": "^1.7.3", + "@floating-ui/utils": "^0.2.10" + } + }, + "node_modules/@floating-ui/react": { + "version": "0.26.28", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz", + "integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==", + "license": "MIT", + "dependencies": { + "@floating-ui/react-dom": "^2.1.2", + "@floating-ui/utils": "^0.2.8", + "tabbable": "^6.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.6.tgz", + "integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==", + "license": "MIT", + "dependencies": { + "@floating-ui/dom": "^1.7.4" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.10", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz", + "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==", + "license": "MIT" + }, + "node_modules/@headlessui/react": { + "version": "2.2.7", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.2.7.tgz", + "integrity": "sha512-WKdTymY8Y49H8/gUc/lIyYK1M+/6dq0Iywh4zTZVAaiTDprRfioxSgD0wnXTQTBpjpGJuTL1NO/mqEvc//5SSg==", + "license": "MIT", + "dependencies": { + "@floating-ui/react": "^0.26.16", + "@react-aria/focus": "^3.20.2", + "@react-aria/interactions": "^3.25.0", + "@tanstack/react-virtual": "^3.13.9", + "use-sync-external-store": "^1.5.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^18 || ^19 || ^19.0.0-rc", + "react-dom": "^18 || ^19 || ^19.0.0-rc" + } + }, + "node_modules/@heroicons/react": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz", + "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==", + "license": "MIT", + "peerDependencies": { + "react": ">= 16 || ^19.0.0-rc" + } + }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", @@ -963,6 +1048,103 @@ "node": ">=12.4.0" } }, + "node_modules/@react-aria/focus": { + "version": "3.21.0", + "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.21.0.tgz", + "integrity": "sha512-7NEGtTPsBy52EZ/ToVKCu0HSelE3kq9qeis+2eEq90XSuJOMaDHUQrA7RC2Y89tlEwQB31bud/kKRi9Qme1dkA==", + "license": "Apache-2.0", + "dependencies": { + "@react-aria/interactions": "^3.25.4", + "@react-aria/utils": "^3.30.0", + "@react-types/shared": "^3.31.0", + "@swc/helpers": "^0.5.0", + "clsx": "^2.0.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + } + }, + "node_modules/@react-aria/interactions": { + "version": "3.25.4", + "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.25.4.tgz", + "integrity": "sha512-HBQMxgUPHrW8V63u9uGgBymkMfj6vdWbB0GgUJY49K9mBKMsypcHeWkWM6+bF7kxRO728/IK8bWDV6whDbqjHg==", + "license": "Apache-2.0", + "dependencies": { + "@react-aria/ssr": "^3.9.10", + "@react-aria/utils": "^3.30.0", + "@react-stately/flags": "^3.1.2", + "@react-types/shared": "^3.31.0", + "@swc/helpers": "^0.5.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + } + }, + "node_modules/@react-aria/ssr": { + "version": "3.9.10", + "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.10.tgz", + "integrity": "sha512-hvTm77Pf+pMBhuBm760Li0BVIO38jv1IBws1xFm1NoL26PU+fe+FMW5+VZWyANR6nYL65joaJKZqOdTQMkO9IQ==", + "license": "Apache-2.0", + "dependencies": { + "@swc/helpers": "^0.5.0" + }, + "engines": { + "node": ">= 12" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + } + }, + "node_modules/@react-aria/utils": { + "version": "3.30.0", + "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.30.0.tgz", + "integrity": "sha512-ydA6y5G1+gbem3Va2nczj/0G0W7/jUVo/cbN10WA5IizzWIwMP5qhFr7macgbKfHMkZ+YZC3oXnt2NNre5odKw==", + "license": "Apache-2.0", + "dependencies": { + "@react-aria/ssr": "^3.9.10", + "@react-stately/flags": "^3.1.2", + "@react-stately/utils": "^3.10.8", + "@react-types/shared": "^3.31.0", + "@swc/helpers": "^0.5.0", + "clsx": "^2.0.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + } + }, + "node_modules/@react-stately/flags": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@react-stately/flags/-/flags-3.1.2.tgz", + "integrity": "sha512-2HjFcZx1MyQXoPqcBGALwWWmgFVUk2TuKVIQxCbRq7fPyWXIl6VHcakCLurdtYC2Iks7zizvz0Idv48MQ38DWg==", + "license": "Apache-2.0", + "dependencies": { + "@swc/helpers": "^0.5.0" + } + }, + "node_modules/@react-stately/utils": { + "version": "3.10.8", + "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.8.tgz", + "integrity": "sha512-SN3/h7SzRsusVQjQ4v10LaVsDc81jyyR0DD5HnsQitm/I5WDpaSr2nRHtyloPFU48jlql1XX/S04T2DLQM7Y3g==", + "license": "Apache-2.0", + "dependencies": { + "@swc/helpers": "^0.5.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + } + }, + "node_modules/@react-types/shared": { + "version": "3.31.0", + "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.31.0.tgz", + "integrity": "sha512-ua5U6V66gDcbLZe4P2QeyNgPp4YWD1ymGA6j3n+s8CGExtrCPe64v+g4mvpT8Bnb985R96e4zFT61+m0YCwqMg==", + "license": "Apache-2.0", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + } + }, "node_modules/@rtsao/scc": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz", @@ -977,6 +1159,80 @@ "dev": true, "license": "MIT" }, + "node_modules/@supabase/auth-js": { + "version": "2.71.1", + "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.71.1.tgz", + "integrity": "sha512-mMIQHBRc+SKpZFRB2qtupuzulaUhFYupNyxqDj5Jp/LyPvcWvjaJzZzObv6URtL/O6lPxkanASnotGtNpS3H2Q==", + "license": "MIT", + "dependencies": { + "@supabase/node-fetch": "^2.6.14" + } + }, + "node_modules/@supabase/functions-js": { + "version": "2.4.5", + "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.4.5.tgz", + "integrity": "sha512-v5GSqb9zbosquTo6gBwIiq7W9eQ7rE5QazsK/ezNiQXdCbY+bH8D9qEaBIkhVvX4ZRW5rP03gEfw5yw9tiq4EQ==", + "license": "MIT", + "dependencies": { + "@supabase/node-fetch": "^2.6.14" + } + }, + "node_modules/@supabase/node-fetch": { + "version": "2.6.15", + "resolved": "https://registry.npmjs.org/@supabase/node-fetch/-/node-fetch-2.6.15.tgz", + "integrity": "sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==", + "license": "MIT", + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=6.0.0" + } + }, + "node_modules/@supabase/postgrest-js": { + "version": "1.21.3", + "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-1.21.3.tgz", + "integrity": "sha512-rg3DmmZQKEVCreXq6Am29hMVe1CzemXyIWVYyyua69y6XubfP+DzGfLxME/1uvdgwqdoaPbtjBDpEBhqxq1ZwA==", + "license": "MIT", + "dependencies": { + "@supabase/node-fetch": "^2.6.14" + } + }, + "node_modules/@supabase/realtime-js": { + "version": "2.15.1", + "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.15.1.tgz", + "integrity": "sha512-edRFa2IrQw50kNntvUyS38hsL7t2d/psah6om6aNTLLcWem0R6bOUq7sk7DsGeSlNfuwEwWn57FdYSva6VddYw==", + "license": "MIT", + "dependencies": { + "@supabase/node-fetch": "^2.6.13", + "@types/phoenix": "^1.6.6", + "@types/ws": "^8.18.1", + "ws": "^8.18.2" + } + }, + "node_modules/@supabase/storage-js": { + "version": "2.11.0", + "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.11.0.tgz", + "integrity": "sha512-Y+kx/wDgd4oasAgoAq0bsbQojwQ+ejIif8uczZ9qufRHWFLMU5cODT+ApHsSrDufqUcVKt+eyxtOXSkeh2v9ww==", + "license": "MIT", + "dependencies": { + "@supabase/node-fetch": "^2.6.14" + } + }, + "node_modules/@supabase/supabase-js": { + "version": "2.56.0", + "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.56.0.tgz", + "integrity": "sha512-XqwhHSyVnkjdliPN61CmXsmFGnFHTX2WDdwjG3Ukvdzuu3Trix+dXupYOQ3BueIyYp7B6t0yYpdQtJP2hIInyg==", + "license": "MIT", + "dependencies": { + "@supabase/auth-js": "2.71.1", + "@supabase/functions-js": "2.4.5", + "@supabase/node-fetch": "2.6.15", + "@supabase/postgrest-js": "1.21.3", + "@supabase/realtime-js": "2.15.1", + "@supabase/storage-js": "^2.10.4" + } + }, "node_modules/@swc/helpers": { "version": "0.5.15", "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz", @@ -1262,6 +1518,33 @@ "tailwindcss": "4.1.12" } }, + "node_modules/@tanstack/react-virtual": { + "version": "3.13.12", + "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.12.tgz", + "integrity": "sha512-Gd13QdxPSukP8ZrkbgS2RwoZseTTbQPLnQEn7HY/rqtM+8Zt95f7xKC7N0EsKs7aoz0WzZ+fditZux+F8EzYxA==", + "license": "MIT", + "dependencies": { + "@tanstack/virtual-core": "3.13.12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/@tanstack/virtual-core": { + "version": "3.13.12", + "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz", + "integrity": "sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, "node_modules/@tybys/wasm-util": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.0.tgz", @@ -1298,12 +1581,17 @@ "version": "20.19.11", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.11.tgz", "integrity": "sha512-uug3FEEGv0r+jrecvUUpbY8lLisvIjg6AAic6a2bSP5OEOLeJsDSnvhCDov7ipFFMXS3orMpzlmi0ZcuGkBbow==", - "dev": true, "license": "MIT", "dependencies": { "undici-types": "~6.21.0" } }, + "node_modules/@types/phoenix": { + "version": "1.6.6", + "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.6.tgz", + "integrity": "sha512-PIzZZlEppgrpoT2QgbnDU+MMzuR6BbCjllj0bM70lWoejMeNJAxCchxnv7J3XFkI8MpygtRpzXrIlmWUBclP5A==", + "license": "MIT" + }, "node_modules/@types/react": { "version": "19.1.11", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.11.tgz", @@ -1324,6 +1612,15 @@ "@types/react": "^19.0.0" } }, + "node_modules/@types/ws": { + "version": "8.18.1", + "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz", + "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==", + "license": "MIT", + "dependencies": { + "@types/node": "*" + } + }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "8.40.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.40.0.tgz", @@ -2311,6 +2608,15 @@ "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==", "license": "MIT" }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/color": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", @@ -5703,6 +6009,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/tabbable": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", + "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==", + "license": "MIT" + }, "node_modules/tailwindcss": { "version": "4.1.12", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.12.tgz", @@ -5803,6 +6115,12 @@ "node": ">=8.0" } }, + "node_modules/tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==", + "license": "MIT" + }, "node_modules/ts-api-utils": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz", @@ -5963,7 +6281,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": { @@ -6011,6 +6328,31 @@ "punycode": "^2.1.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz", + "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==", + "license": "MIT", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==", + "license": "BSD-2-Clause" + }, + "node_modules/whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", + "license": "MIT", + "dependencies": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", @@ -6126,6 +6468,27 @@ "node": ">=0.10.0" } }, + "node_modules/ws": { + "version": "8.18.3", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz", + "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==", + "license": "MIT", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": ">=5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, "node_modules/yallist": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz", diff --git a/package.json b/package.json index 03f95ec..33be69a 100644 --- a/package.json +++ b/package.json @@ -9,19 +9,22 @@ "lint": "eslint" }, "dependencies": { + "@headlessui/react": "^2.2.7", + "@heroicons/react": "^2.2.0", + "@supabase/supabase-js": "^2.56.0", + "next": "15.5.0", "react": "19.1.0", - "react-dom": "19.1.0", - "next": "15.5.0" + "react-dom": "19.1.0" }, "devDependencies": { - "typescript": "^5", + "@eslint/eslintrc": "^3", + "@tailwindcss/postcss": "^4", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", - "@tailwindcss/postcss": "^4", - "tailwindcss": "^4", "eslint": "^9", "eslint-config-next": "15.5.0", - "@eslint/eslintrc": "^3" + "tailwindcss": "^4", + "typescript": "^5" } } diff --git a/src/app/admin/campaigns/[id]/participants/page.tsx b/src/app/admin/campaigns/[id]/participants/page.tsx new file mode 100644 index 0000000..aea6958 --- /dev/null +++ b/src/app/admin/campaigns/[id]/participants/page.tsx @@ -0,0 +1,252 @@ +'use client'; + +import { useState, useEffect } from 'react'; +import Link from 'next/link'; +import { useParams } from 'next/navigation'; +import { Campaign, Participant } from '@/types'; +import { campaignService, participantService } from '@/lib/services'; +import AddParticipantModal from '@/components/AddParticipantModal'; +import EditParticipantModal from '@/components/EditParticipantModal'; +import DeleteParticipantModal from '@/components/DeleteParticipantModal'; + +// Force dynamic rendering to avoid SSR issues with Supabase +export const dynamic = 'force-dynamic'; + +export default function CampaignParticipantsPage() { + const params = useParams(); + const campaignId = params.id as string; + + const [campaign, setCampaign] = useState(null); + const [participants, setParticipants] = useState([]); + const [loading, setLoading] = useState(true); + const [showAddModal, setShowAddModal] = useState(false); + const [showEditModal, setShowEditModal] = useState(false); + const [showDeleteModal, setShowDeleteModal] = useState(false); + const [selectedParticipant, setSelectedParticipant] = useState(null); + + useEffect(() => { + if (campaignId) { + loadData(); + } + }, [campaignId]); + + const loadData = async () => { + try { + setLoading(true); + const [campaignData, participantsData] = await Promise.all([ + campaignService.getAll().then(campaigns => campaigns.find(c => c.id === campaignId)), + participantService.getByCampaign(campaignId) + ]); + + setCampaign(campaignData || null); + setParticipants(participantsData); + } catch (error) { + console.error('Erreur lors du chargement des données:', error); + } finally { + setLoading(false); + } + }; + + const handleParticipantAdded = () => { + setShowAddModal(false); + loadData(); + }; + + const handleParticipantEdited = () => { + setShowEditModal(false); + setSelectedParticipant(null); + loadData(); + }; + + const handleParticipantDeleted = () => { + setShowDeleteModal(false); + setSelectedParticipant(null); + loadData(); + }; + + if (loading) { + return ( +
+
+
+

Chargement des participants...

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

Campagne non trouvée

+

La campagne demandée n'existe pas.

+ + Retour à l'administration + +
+
+ ); + } + + return ( +
+
+ {/* Header */} +
+
+
+
+ + + + + Retour + +
+

Participants

+

+ Campagne : {campaign.title} +

+
+
+
+ +
+
+ + {/* Participants */} + {participants.length === 0 ? ( +
+ + + +

Aucun participant

+

Commencez par ajouter votre premier participant.

+
+ +
+
+ ) : ( +
+
+

+ Participants ({participants.length}) +

+

+ Liste de tous les participants pour cette campagne +

+
+
    + {participants.map((participant) => ( +
  • +
    +
    +
    +
    +
    + + {participant.first_name.charAt(0)}{participant.last_name.charAt(0)} + +
    +
    +
    +

    + {participant.first_name} {participant.last_name} +

    +

    + {participant.email} +

    +
    +
    +

    + Inscrit le {new Date(participant.created_at).toLocaleDateString('fr-FR')} +

    +
    +
    + + +
    +
    +
    • + ))} +
+
+ )} +
+ + {/* Modals */} + {showAddModal && ( + setShowAddModal(false)} + onSuccess={handleParticipantAdded} + campaignId={campaignId} + campaignTitle={campaign.title} + /> + )} + + {showEditModal && selectedParticipant && ( + setShowEditModal(false)} + onSuccess={handleParticipantEdited} + participant={selectedParticipant} + /> + )} + + {showDeleteModal && selectedParticipant && ( + setShowDeleteModal(false)} + onSuccess={handleParticipantDeleted} + participant={selectedParticipant} + /> + )} +
+ ); +} diff --git a/src/app/admin/campaigns/[id]/propositions/page.tsx b/src/app/admin/campaigns/[id]/propositions/page.tsx new file mode 100644 index 0000000..edc9fe8 --- /dev/null +++ b/src/app/admin/campaigns/[id]/propositions/page.tsx @@ -0,0 +1,241 @@ +'use client'; + +import { useState, useEffect } from 'react'; +import Link from 'next/link'; +import { useParams } from 'next/navigation'; +import { Campaign, Proposition } from '@/types'; +import { campaignService, propositionService } from '@/lib/services'; +import AddPropositionModal from '@/components/AddPropositionModal'; +import EditPropositionModal from '@/components/EditPropositionModal'; +import DeletePropositionModal from '@/components/DeletePropositionModal'; + +// Force dynamic rendering to avoid SSR issues with Supabase +export const dynamic = 'force-dynamic'; + +export default function CampaignPropositionsPage() { + const params = useParams(); + const campaignId = params.id as string; + + const [campaign, setCampaign] = useState(null); + const [propositions, setPropositions] = useState([]); + const [loading, setLoading] = useState(true); + const [showAddModal, setShowAddModal] = useState(false); + const [showEditModal, setShowEditModal] = useState(false); + const [showDeleteModal, setShowDeleteModal] = useState(false); + const [selectedProposition, setSelectedProposition] = useState(null); + + useEffect(() => { + if (campaignId) { + loadData(); + } + }, [campaignId]); + + const loadData = async () => { + try { + setLoading(true); + const [campaignData, propositionsData] = await Promise.all([ + campaignService.getAll().then(campaigns => campaigns.find(c => c.id === campaignId)), + propositionService.getByCampaign(campaignId) + ]); + + setCampaign(campaignData || null); + setPropositions(propositionsData); + } catch (error) { + console.error('Erreur lors du chargement des données:', error); + } finally { + setLoading(false); + } + }; + + const handlePropositionAdded = () => { + setShowAddModal(false); + loadData(); + }; + + const handlePropositionEdited = () => { + setShowEditModal(false); + setSelectedProposition(null); + loadData(); + }; + + const handlePropositionDeleted = () => { + setShowDeleteModal(false); + setSelectedProposition(null); + loadData(); + }; + + if (loading) { + return ( +
+
+
+

Chargement des propositions...

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

Campagne non trouvée

+

La campagne demandée n'existe pas.

+ + Retour à l'administration + +
+
+ ); + } + + return ( +
+
+ {/* Header */} +
+
+
+
+ + + + + Retour + +
+

Propositions

+

+ Campagne : {campaign.title} +

+
+
+
+ +
+
+ + {/* Propositions */} + {propositions.length === 0 ? ( +
+ + + +

Aucune proposition

+

Commencez par ajouter votre première proposition.

+
+ +
+
+ ) : ( +
+
+

+ Propositions ({propositions.length}) +

+

+ Liste de toutes les propositions pour cette campagne +

+
+
    + {propositions.map((proposition) => ( +
  • +
    +
    +

    + {proposition.title} +

    +

    + {proposition.description} +

    +

    + Créée le {new Date(proposition.created_at).toLocaleDateString('fr-FR')} +

    +
    +
    + + +
    +
    +
    • + ))} +
+
+ )} +
+ + {/* Modals */} + {showAddModal && ( + setShowAddModal(false)} + onSuccess={handlePropositionAdded} + campaignId={campaignId} + campaignTitle={campaign.title} + /> + )} + + {showEditModal && selectedProposition && ( + setShowEditModal(false)} + onSuccess={handlePropositionEdited} + proposition={selectedProposition} + /> + )} + + {showDeleteModal && selectedProposition && ( + setShowDeleteModal(false)} + onSuccess={handlePropositionDeleted} + proposition={selectedProposition} + /> + )} +
+ ); +} diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx new file mode 100644 index 0000000..4255a49 --- /dev/null +++ b/src/app/admin/page.tsx @@ -0,0 +1,301 @@ +'use client'; + +import { useState, useEffect } from 'react'; +import Link from 'next/link'; +import { Campaign, CampaignWithStats } from '@/types'; +import { campaignService } from '@/lib/services'; +import CreateCampaignModal from '@/components/CreateCampaignModal'; +import EditCampaignModal from '@/components/EditCampaignModal'; +import DeleteCampaignModal from '@/components/DeleteCampaignModal'; + +// Force dynamic rendering to avoid SSR issues with Supabase +export const dynamic = 'force-dynamic'; + +export default function AdminPage() { + const [campaigns, setCampaigns] = useState([]); + const [loading, setLoading] = useState(true); + const [showCreateModal, setShowCreateModal] = useState(false); + const [showEditModal, setShowEditModal] = useState(false); + const [showDeleteModal, setShowDeleteModal] = useState(false); + const [selectedCampaign, setSelectedCampaign] = useState(null); + + useEffect(() => { + loadCampaigns(); + }, []); + + const loadCampaigns = async () => { + try { + const campaignsData = await campaignService.getAll(); + + // Charger les statistiques pour chaque campagne + const campaignsWithStats = await Promise.all( + campaignsData.map(async (campaign) => { + const stats = await campaignService.getStats(campaign.id); + return { + ...campaign, + stats + }; + }) + ); + + setCampaigns(campaignsWithStats); + } catch (error) { + console.error('Erreur lors du chargement des campagnes:', error); + } finally { + setLoading(false); + } + }; + + const getStatusColor = (status: string) => { + switch (status) { + case 'deposit': + return 'bg-blue-100 text-blue-800'; + case 'voting': + return 'bg-green-100 text-green-800'; + case 'closed': + return 'bg-gray-100 text-gray-800'; + default: + return 'bg-gray-100 text-gray-800'; + } + }; + + const getStatusText = (status: string) => { + switch (status) { + case 'deposit': + return 'Dépôt de propositions'; + case 'voting': + return 'En cours de vote'; + case 'closed': + return 'Fermé'; + default: + return status; + } + }; + + const handleCampaignCreated = () => { + setShowCreateModal(false); + loadCampaigns(); + }; + + const handleCampaignEdited = () => { + setShowEditModal(false); + setSelectedCampaign(null); + loadCampaigns(); + }; + + const handleCampaignDeleted = () => { + console.log('handleCampaignDeleted appelé'); + setShowDeleteModal(false); + setSelectedCampaign(null); + console.log('Rechargement des campagnes...'); + loadCampaigns(); + }; + + if (loading) { + return ( +
+
+
+

Chargement des campagnes...

+
+
+ ); + } + + return ( +
+
+ {/* Header */} +
+
+
+

Administration

+

Gérez vos campagnes de budgets participatifs

+
+
+ + + + + Retour + + +
+
+
+ + {/* Campagnes */} + {campaigns.length === 0 ? ( +
+ + + +

Aucune campagne

+

Commencez par créer votre première campagne.

+
+ +
+
+ ) : ( +
+
+

+ Campagnes ({campaigns.length}) +

+

+ Liste de toutes vos campagnes de budgets participatifs +

+
+
    + {campaigns.map((campaign) => ( +
  • +
    +
    +
    +
    +

    {campaign.title}

    + + {getStatusText(campaign.status)} + +
    +
    + +

    {campaign.description}

    + +
    +
    +
    + + + + {campaign.budget_per_user}€ +
    +

    Budget par utilisateur

    +
    + +
    +
    + + + + {campaign.stats.propositions} +
    +

    Propositions

    +
    + +
    +
    + + + + {campaign.stats.participants} +
    +

    Participants

    +
    +
    + +
    + Paliers de dépenses: {campaign.spending_tiers} +
    +
    + +
    + + + + + + Propositions + + + + + + Votants + + +
    +
    +
    • + ))} +
+
+ )} +
+ + {/* Modals */} + {showCreateModal && ( + setShowCreateModal(false)} + onSuccess={handleCampaignCreated} + /> + )} + + {showEditModal && selectedCampaign && ( + setShowEditModal(false)} + onSuccess={handleCampaignEdited} + campaign={selectedCampaign} + /> + )} + + {showDeleteModal && selectedCampaign && ( + setShowDeleteModal(false)} + onSuccess={handleCampaignDeleted} + campaign={selectedCampaign} + /> + )} +
+ ); +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f7fa87e..046d185 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: "Mes budgets participatifs", + description: "Votez pour les dépenses de votre collectif", }; export default function RootLayout({ diff --git a/src/app/page.tsx b/src/app/page.tsx index a932894..d47ace0 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,103 +1,64 @@ -import Image from "next/image"; +import Link from 'next/link'; -export default function Home() { +export default function HomePage() { return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - src/app/page.tsx - - . -
    2. -
  2. - Save and see your changes instantly. -
    3. -
- -
- - Vercel logomark - Deploy now - - - Read our docs - +
+
+
+

+ Mes Budgets Participatifs +

+ +

+ Participez aux décisions budgétaires de vos collectifs +

+ +
+ + + + + + Accès Admin + +
+ +
+
+
+ + + +
+

Déposez vos propositions

+

Soumettez vos idées pour améliorer votre collectif

+
+ +
+
+ + + +
+

Votez collectivement

+

Participez aux décisions avec votre budget alloué

+
+ +
+
+ + + +
+

Suivez les résultats

+

Découvrez quelles propositions ont été sélectionnées

+
+
-
- +
); } diff --git a/src/components/AddParticipantModal.tsx b/src/components/AddParticipantModal.tsx new file mode 100644 index 0000000..bea872c --- /dev/null +++ b/src/components/AddParticipantModal.tsx @@ -0,0 +1,166 @@ +'use client'; + +import { useState } from 'react'; +import { Dialog } from '@headlessui/react'; +import { XMarkIcon } from '@heroicons/react/24/outline'; +import { participantService } from '@/lib/services'; + +interface AddParticipantModalProps { + isOpen: boolean; + onClose: () => void; + onSuccess: () => void; + campaignId: string; + campaignTitle: string; +} + +export default function AddParticipantModal({ + isOpen, + onClose, + onSuccess, + campaignId, + campaignTitle +}: AddParticipantModalProps) { + const [formData, setFormData] = useState({ + first_name: '', + last_name: '', + email: '' + }); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(''); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setLoading(true); + setError(''); + + try { + await participantService.create({ + campaign_id: campaignId, + first_name: formData.first_name, + last_name: formData.last_name, + email: formData.email + }); + onSuccess(); + // Reset form + setFormData({ + first_name: '', + last_name: '', + email: '' + }); + } catch (err) { + setError('Erreur lors de l\'ajout du participant'); + console.error(err); + } finally { + setLoading(false); + } + }; + + const handleChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData(prev => ({ + ...prev, + [name]: value + })); + }; + + return ( + + + ); +} diff --git a/src/components/AddPropositionModal.tsx b/src/components/AddPropositionModal.tsx new file mode 100644 index 0000000..1dbe36f --- /dev/null +++ b/src/components/AddPropositionModal.tsx @@ -0,0 +1,147 @@ +'use client'; + +import { useState } from 'react'; +import { Dialog } from '@headlessui/react'; +import { XMarkIcon } from '@heroicons/react/24/outline'; +import { propositionService } from '@/lib/services'; + +interface AddPropositionModalProps { + isOpen: boolean; + onClose: () => void; + onSuccess: () => void; + campaignId: string; + campaignTitle: string; +} + +export default function AddPropositionModal({ + isOpen, + onClose, + onSuccess, + campaignId, + campaignTitle +}: AddPropositionModalProps) { + const [formData, setFormData] = useState({ + title: '', + description: '' + }); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(''); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setLoading(true); + setError(''); + + try { + await propositionService.create({ + campaign_id: campaignId, + title: formData.title, + description: formData.description + }); + onSuccess(); + // Reset form + setFormData({ + title: '', + description: '' + }); + } catch (err) { + setError('Erreur lors de l\'ajout de la proposition'); + console.error(err); + } finally { + setLoading(false); + } + }; + + const handleChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData(prev => ({ + ...prev, + [name]: value + })); + }; + + return ( + +