ClientCRM - CRM PME

Description

ClientCRM est un CRM simple et efficace pour les PME. Centralise les contacts, entreprises, opportunités et activités commerciales, avec un pipeline lisible et des rappels.

Structure du projet

ClientCRM/
├── src/
│   ├── components/          # Composants React modulaires
│   │   ├── Layout/         # Composants de mise en page
│   │   │   ├── Header.tsx
│   │   │   └── Navigation.tsx
│   │   ├── Dashboard/      # Composants du tableau de bord
│   │   │   ├── Dashboard.tsx
│   │   │   └── StatsCard.tsx
│   │   ├── Contacts/       # Composants de gestion des contacts
│   │   │   ├── ContactCard.tsx
│   │   │   └── ContactsList.tsx
│   │   ├── Pipeline/       # Composants du pipeline
│   │   │   ├── Pipeline.tsx
│   │   │   └── PipelineColumn.tsx
│   │   ├── Tasks/          # Composants de gestion des tâches
│   │   │   └── TasksList.tsx
│   │   └── Modal/          # Composants modaux
│   │       └── AddModal.tsx
│   ├── types/              # Types TypeScript
│   │   └── index.ts
│   ├── utils/              # Fonctions utilitaires
│   │   └── helpers.ts
│   └── data/               # Données de démonstration
│       └── mockData.ts
├── styles/                 # Styles CSS
│   └── globals.css
├── pages/                  # Pages Next.js
│   ├── _app.tsx
│   └── index.tsx
└── configuration files...

Fonctionnalités MVP

• Contacts et entreprises : Fiche complète avec coordonnées, tags et statut
• Pipeline d'opportunités : 6 étapes (À qualifier, En cours, Proposal, Négociation, Gagné, Perdu)
• Gestion des tâches : Priorités, échéances, statut de completion
• Tableau de bord : Statistiques et vue d'ensemble
• Recherche globale : Recherche dans contacts et opportunités
• Interface modulaire : Composants réutilisables et maintenables

Fonctionnalités Avancées

• Interface responsive : Adaptée mobile, tablette et desktop
• Modals dynamiques : Ajout de contacts, opportunités et tâches
• Filtrage intelligent : Recherche en temps réel
• Drag & drop : Déplacement d'opportunités dans le pipeline
• Statistiques en temps réel : Calculs automatiques des valeurs

Installation et démarrage

# Installer les dépendances
npm install

# Lancer en mode développement
npm run dev

# Construire pour la production
npm run build

# Lancer en mode production
npm start

Technologies utilisées

• Next.js 14 : Framework React avec SSR
• TypeScript : Typage statique
• Tailwind CSS : Framework CSS utilitaire
• Lucide React : Icônes modernes
• React Hooks : Gestion d'état moderne

Architecture

Composants principaux

• Header : Barre de navigation avec recherche et bouton d'ajout
• Navigation : Onglets pour naviguer entre les sections
• Dashboard : Vue d'ensemble avec statistiques et activités récentes
• ContactsList : Gestion complète des contacts
• Pipeline : Pipeline Kanban pour les opportunités
• TasksList : Gestion des tâches et rappels

Gestion d'état

• useState pour l'état local
• Props drilling pour la communication entre composants
• Types TypeScript pour la sécurité des types

Styles

• Tailwind CSS pour le styling
• Classes utilitaires pour la cohérence
• Responsive design intégré

Usage

1. Tableau de bord : Vue d'ensemble avec statistiques
2. Contacts : Ajouter, modifier, supprimer des contacts
3. Pipeline : Gérer les opportunités de vente
4. Tâches : Suivre les actions à effectuer

Développement

Ajouter un nouveau composant

1. Créer le fichier dans src/components/
2. Définir les types dans src/types/
3. Ajouter les utilitaires dans src/utils/ si nécessaire
4. Importer et utiliser dans les pages

Modifier les styles

• Utiliser les classes Tailwind dans les composants
• Ajouter des styles personnalisés dans styles/globals.css
• Respecter la cohérence visuelle

Prochaines étapes

• [ ] Authentification utilisateur
• [ ] Persistance des données (base de données)
• [ ] Notifications en temps réel
• [ ] Export/import de données
• [ ] Intégrations (email, calendrier)
• [ ] Fonctionnalités IA avancées