ptechcore_ui 0.0.0

package/src/pages/organizations/DetailOrganizations.tsx

@@ -0,0 +1,1629 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import {
+    ArrowLeft,
+    Building2,
+    Edit,
+    Trash2,
+    Plus,
+    MapPin,
+    User as UserIcon,
+    Eye,
+    CreditCard,
+    FileText,
+    MoreVertical,
+    X,
+} from 'lucide-react';
+import { useToast } from '../../contexts/ToastContext';
+import { useSession } from '../../contexts/SessionContext';
+import { OrganizationServices, EntityServices } from '../../services/OrganizationServices';
+import { RewiseBasicCard } from '../../components/common/Cards';
+import { InputField, TextInput, SelectInput } from '../../components/common/Inputs';
+import ListPricing from '../pricings/ListPricing';
+import { Entity, Organization } from '../../models/Organization';
+import { Module } from '../../models/Plan';
+import { ModuleServices } from '../../services/PlanSubscriptionServices';
+import PrimaryButton, { SecondaryButton } from '../../components/common/Buttons';
+import Modal from '../../components/common/Modals';
+
+
+const DetailOrganizations: React.FC = () => {
+    const { id } = useParams<{ id: string }>();
+    const [organization, setOrganization] = useState<Organization | null>(null);
+    const [formData, setFormData] = useState<Partial<Organization | null>>(null);
+    const [entities, setEntities] = useState<Entity[]>([]);
+    const [modules, setModules] = useState<Module[]>([]);
+    const [modulesLoading, setModulesLoading] = useState(true);
+    const [selectedEntity, setSelectedEntity] = useState<Entity | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [entitiesLoading, setEntitiesLoading] = useState(true);
+    const [dropdownOpen, setDropdownOpen] = useState<number | null>(null);
+    const [showEntityModal, setShowEntityModal] = useState(false);
+    const [showModulePurchaseModal, setShowModulePurchaseModal] = useState(false);
+    const [selectedModuleForPurchase, setSelectedModuleForPurchase] = useState<Module | null>(null);
+    const [processingModulePurchase, setProcessingModulePurchase] = useState(false);
+    const [showPlanChangeModal, setShowPlanChangeModal] = useState(false);
+    const [availablePlans, setAvailablePlans] = useState<any[]>([]);
+    const [plansLoading, setPlansLoading] = useState(false);
+    const [processingPlanChange, setProcessingPlanChange] = useState(false);
+
+    const [errors, setErrors] = useState<Partial<Record<keyof Organization, string>>>({});
+
+    const navigate = useNavigate();
+    const { success, error: showError } = useToast();
+    const { token } = useSession();
+
+
+
+    const [activeTab, setActiveTab] = useState<'entities' | 'modules' | 'billing'>('entities');
+    const tabs = [
+        { id: 'entities', label: 'Entités', icon: Building2 },
+        { id: 'modules', label: 'Plan & Modules', icon: FileText },
+        { id: 'billing', label: 'Paiements', icon: CreditCard }
+    ];
+
+
+    useEffect(() => {
+        if (id) {
+            loadOrganizationDetails();
+            loadOrganizationEntities();
+            loadModules();
+        }
+    }, [id]);
+
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({ ...prev, [name]: value }));
+        if (errors[name as keyof Organization]) {
+            setErrors(prev => ({ ...prev, [name]: undefined }));
+        }
+    };
+
+    const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({ ...prev, [name]: value }));
+        if (errors[name as keyof Organization]) {
+            setErrors(prev => ({ ...prev, [name]: undefined }));
+        }
+    };
+
+
+    const loadOrganizationDetails = async () => {
+        if (!token || !id) return;
+
+        try {
+            setLoading(true);
+            const result = await OrganizationServices.getOrganization(parseInt(id), token) as { success: boolean, message: string, data: Organization };
+            setOrganization(result.data);
+            setFormData(result.data);
+            console.log(result.data);
+
+        } catch (error: any) {
+            showError('Erreur lors du chargement des détails de l\'organisation');
+            console.error(error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const loadOrganizationEntities = async () => {
+        if (!token || !id) return;
+
+        try {
+            setEntitiesLoading(true);
+            const result = await EntityServices.getOrganizationEntities(parseInt(id), token) as { success: boolean, message: string, data: Entity[] };
+            setEntities(result.data);
+        } catch (error: any) {
+            showError('Erreur lors du chargement des entités');
+            console.error(error);
+        } finally {
+            setEntitiesLoading(false);
+        }
+    };
+    const loadModules = async () => {
+        if (!token || !id) return;
+
+        try {
+            setModulesLoading(true);
+            const result = await ModuleServices.getAllModules(token) as { success: boolean, message: string, data: Module[] };
+            setModules(result.data);
+        } catch (error: any) {
+            showError('Erreur lors du chargement des modules');
+            console.error(error);
+        } finally {
+            setModulesLoading(false);
+        }
+    };
+
+    const handleDeleteOrganization = async () => {
+        if (!token || !organization) return;
+
+        if (!window.confirm(`Êtes-vous sûr de vouloir supprimer l'organisation "${organization.legal_name}" ?`)) {
+            return;
+        }
+
+        try {
+            await OrganizationServices.deleteOrganization(organization.id, token);
+            success('Organisation supprimée avec succès');
+            navigate('/organizations');
+        } catch (error: any) {
+            showError('Erreur lors de la suppression de l\'organisation');
+        }
+    };
+
+    const handleDeleteEntity = async (entityId: number, entityName: string) => {
+        if (!token) return;
+
+        if (!window.confirm(`Êtes-vous sûr de vouloir supprimer l'entité "${entityName}" ?`)) {
+            return;
+        }
+
+        try {
+            await EntityServices.deleteEntity(entityId, token);
+            success('Entité supprimée avec succès');
+            loadOrganizationEntities();
+        } catch (error: any) {
+            showError('Erreur lors de la suppression de l\'entit�');
+        }
+    };
+
+
+    const formatCurrency = (currency?: string) => {
+        const currencyMap: Record<string, string> = {
+            'EUR': '€',
+            'USD': '$',
+            'GBP': '£',
+            'CAD': 'CAD',
+            'CHF': 'CHF',
+            'XOF': 'XOF',
+            'XAF': 'XAF'
+        };
+        return currencyMap[currency || ''] || currency || 'Non spécifié';
+    };
+
+    const handlePurchaseModule = (module: Module) => {
+        if (!organization?.active_subscription) {
+            showError('Aucun abonnement actif trouvé');
+            return;
+        }
+
+        setSelectedModuleForPurchase(module);
+        setShowModulePurchaseModal(true);
+    };
+
+    const confirmModulePurchase = async () => {
+        if (!selectedModuleForPurchase || !organization || !token) return;
+
+        setProcessingModulePurchase(true);
+        try {
+            // Simuler l'achat du module via l'API
+            await OrganizationServices.subscribe(organization.id, {
+                plan: organization.active_subscription!.plan.id,
+                billing_cycle: 'monthly',
+                extra_modules: [
+                    ...(
+                        Array.isArray(organization.active_subscription!.extra_modules)
+                            ? organization.active_subscription!.extra_modules.map(m =>
+                                typeof m === 'object' && m !== null && 'id' in m ? m.id : m
+                            )
+                            : []
+                    ),
+                    selectedModuleForPurchase.id
+                ]
+            }, token);
+
+            success(`Module "${selectedModuleForPurchase.name}" ajouté avec succès !`);
+            setShowModulePurchaseModal(false);
+            setSelectedModuleForPurchase(null);
+
+            // Recharger les détails de l'organisation pour mettre à jour la liste des modules
+            loadOrganizationDetails();
+        } catch (error) {
+            showError('Erreur lors de l\'achat du module');
+            console.error(error);
+        } finally {
+            setProcessingModulePurchase(false);
+        }
+    };
+
+    const calculateModulePrice = (module: Module, withTax: boolean = true): number => {
+        const basePrice = module.price_monthly;
+        return withTax ? basePrice * 1.18 : basePrice; // TVA 18%
+    };
+
+    const loadAvailablePlans = async () => {
+        if (!token) return;
+
+        try {
+            setPlansLoading(true);
+            // Utiliser les plans depuis ListPricing
+            const pricingCategories = [
+                {
+                    id: 'personnel',
+                    name: 'Personnel',
+                    plans: [
+                        {
+                            id: 1,
+                            code: 'rewise_pro',
+                            name: 'Pro',
+                            description: 'Améliorez la productivité et l\'apprentissage avec un accès supplémentaire.',
+                            price: 100000,
+                            originalPrice: 83333,
+                            currency: 'FCFA',
+                            period: '/ mois',
+                            features: [
+                                { name: '1 entité', included: true },
+                                { name: 'jusqu\'à 5 utilisateurs', included: true },
+                                { name: 'CRM, Comptabilité et Facturation', included: true },
+                                { name: '+1 module au choix', included: false },
+                            ]
+                        },
+                        {
+                            id: 2,
+                            code: 'rewise_max',
+                            name: 'Max',
+                            description: 'Débloquez toutes les capacités avec un accès anticipé aux nouveaux produits.',
+                            price: 200000,
+                            originalPrice: 166667,
+                            currency: 'FCFA',
+                            period: '/ mois',
+                            popular: true,
+                            features: [
+                                { name: 'jusqu\'à 3 entités', included: true },
+                                { name: 'jusqu\'à 15 utilisateurs', included: true },
+                                { name: 'CRM, Comptabilité et Facturation', included: true },
+                                { name: '+1 module au choix', included: true },
+                            ]
+                        }
+                    ]
+                }
+            ];
+
+            setAvailablePlans(pricingCategories[0].plans);
+        } catch (error: any) {
+            showError('Erreur lors du chargement des plans');
+            console.error(error);
+        } finally {
+            setPlansLoading(false);
+        }
+    };
+
+    const handleChangePlan = () => {
+        if (!organization?.active_subscription) {
+            showError('Aucun abonnement actif trouvé');
+            return;
+        }
+
+        loadAvailablePlans();
+        setShowPlanChangeModal(true);
+    };
+
+    const confirmPlanChange = async (newPlan: any) => {
+        if (!organization || !token) return;
+
+        setProcessingPlanChange(true);
+        try {
+            await OrganizationServices.subscribe(organization.id, {
+                plan: newPlan.id,
+                billing_cycle: 'monthly',
+                extra_modules: Array.isArray(organization.active_subscription!.extra_modules)
+                    ? organization.active_subscription!.extra_modules.map(m =>
+                        typeof m === 'object' && m !== null && 'id' in m ? m.id : m
+                    )
+                    : []
+            }, token);
+
+            success(`Plan changé vers "${newPlan.name}" avec succès !`);
+            setShowPlanChangeModal(false);
+
+            // Recharger les détails de l'organisation
+            loadOrganizationDetails();
+        } catch (error) {
+            showError('Erreur lors du changement de plan');
+            console.error(error);
+        } finally {
+            setProcessingPlanChange(false);
+        }
+    };
+
+
+    const renderTabContent = () => {
+        switch (activeTab) {
+            case 'entities':
+                return (
+                    <RewiseBasicCard title={
+                        <div className="w-full flex items-center justify-between">
+                            <div>
+                                <h6 className="">Entités</h6>
+
+                            </div>
+                            <PrimaryButton
+                                type="button"
+                                onClick={() => setShowEntityModal(true)}
+                            >
+                                <Plus className="w-4 h-4" /><span>Nouvelle Entité</span>
+                            </PrimaryButton>
+                        </div>
+                    } >
+
+
+                        <div className="">
+                            {entitiesLoading ? (
+                                <div className="text-center py-8">
+                                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#8290A9] mx-auto mb-4"></div>
+                                    <p className="text-gray-600">Chargement des entités...</p>
+                                </div>
+                            ) : entities.length === 0 ? (
+                                <div className="text-center py-12">
+                                    <Building2 className="w-12 h-12 text-gray-300 mx-auto mb-4" />
+                                    <h3 className="text-lg font-medium text-gray-900 mb-2">Aucune entité</h3>
+                                    <p className="text-gray-600 mb-6">
+                                        Cette organisation n'a pas encore d'entités associées.
+                                    </p>
+                                    <button
+                                        onClick={() => navigate(`/organizations/${organization!.id}/entities/create`)}
+                                        className="bg-[#8290A9] text-white px-6 py-2 rounded-lg hover:bg-[#6B7C92] transition-colors"
+                                    >
+                                        Créer une entité
+                                    </button>
+                                </div>
+                            ) : (
+                                <div className="overflow-x-auto">
+                                    <table className="min-w-full divide-y divide-gray-200">
+                                        <thead className="bg-gray-50">
+                                            <tr>
+                                                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Raison sociale</th>
+                                                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Nom commercial</th>
+                                                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Email</th>
+                                                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Téléphone</th>
+                                                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Pays / Ville</th>
+                                                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Devise</th>
+                                                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Actions</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody className="bg-white divide-y divide-gray-100">
+                                            {entities.map((entity) => (
+                                                <tr key={entity.id} className="hover:bg-gray-50">
+                                                    <td className="px-4 py-2 font-medium text-gray-900">{entity.legal_name}</td>
+                                                    <td className="px-4 py-2 text-gray-600">{entity.trading_name || '-'}</td>
+                                                    <td className="px-4 py-2 text-gray-600">{entity.email || '-'}</td>
+                                                    <td className="px-4 py-2 text-gray-600">{entity.phone || '-'}</td>
+                                                    <td className="px-4 py-2 text-gray-600">
+                                                        {entity.country || '-'}
+                                                        {entity.city ? `, ${entity.city}` : ''}
+                                                    </td>
+                                                    <td className="px-4 py-2 text-gray-600">{formatCurrency(entity.currency)}</td>
+                                                    <td className="px-4 py-2">
+                                                        <div className="relative">
+                                                            <button
+                                                                onClick={() => setDropdownOpen(dropdownOpen === entity.id ? null : entity.id)}
+                                                                className="p-1 rounded-full hover:bg-gray-100 transition-colors"
+                                                            >
+                                                                <MoreVertical className="w-4 h-4 text-gray-400" />
+                                                            </button>
+
+                                                            {dropdownOpen === entity.id && (
+                                                                <div className="fixed right-3 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-10">
+                                                                    <button
+                                                                        onClick={() => { navigate(`/entities/${entity.id}`); setDropdownOpen(null); }}
+                                                                        className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center space-x-2"
+                                                                    >
+                                                                        <Eye className="w-4 h-4" />
+                                                                        <span>Voir les détails</span>
+                                                                    </button>
+                                                                    <button
+                                                                        onClick={() => { setSelectedEntity(entity); setShowEntityModal(true); }}
+                                                                        className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center space-x-2"
+                                                                    >
+                                                                        <Edit className="w-4 h-4" />
+                                                                        <span>Modifier</span>
+                                                                    </button>
+                                                                    <button
+                                                                        onClick={() => handleDeleteEntity(entity.id, entity.legal_name)}
+                                                                        className="w-full px-4 py-2 text-left text-sm text-red-600 hover:bg-red-50 flex items-center space-x-2"
+                                                                    >
+                                                                        <Trash2 className="w-4 h-4" />
+                                                                        <span>Supprimer</span>
+                                                                    </button>
+                                                                </div>
+                                                            )}
+                                                        </div>
+
+                                                    </td>
+                                                </tr>
+                                            ))}
+                                        </tbody>
+                                    </table>
+                                </div>
+                            )}
+                        </div>
+
+
+                    </RewiseBasicCard>
+                );
+
+
+
+            case 'modules':
+                return (
+                    <RewiseBasicCard title={
+                        <div className="w-full flex items-center justify-between">
+                            <div>
+                                <h6 className="">Plan & Modules</h6>
+                            </div>
+
+                        </div>
+
+
+                    }>
+                        {/* <p>Gestion des modules et fonctionnalités activées pour cette organisation.</p> */}
+                        {organization?.active_subscription && (
+                            <div className="mb-6">
+                                <div className="bg-[#F5F7FA] rounded-lg p-4 flex items-center justify-between shadow-sm">
+                                    <div>actif
+                                        <div className="font-semibold text-lg text-[#8290A9]">{organization.active_subscription.plan.name}</div>
+                                        <div className="text-sm text-gray-500">{organization.active_subscription.plan.description}</div>
+                                        <div className="text-sm text-gray-700">
+                                            {organization.active_subscription.plan.price_monthly} / mois
+                                        </div>
+                                    </div>
+                                    <button
+                                        className="bg-[#8290A9] text-white px-4 py-2 rounded-lg hover:bg-[#6B7C92] transition-colors"
+                                        onClick={handleChangePlan}
+                                    >
+                                        Changer de plan
+                                    </button>
+                                </div>
+                            </div>
+                        )}
+
+
+                        <div className=" gap-4">
+                            <div className="">
+                                {modulesLoading ? (
+                                    <div className="text-center py-8">
+                                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#8290A9] mx-auto mb-4"></div>
+                                        <p className="text-gray-600">Chargement des modules...</p>
+                                    </div>
+                                ) : modules.length === 0 ? (
+                                    <div className="text-center py-12">
+                                        <Building2 className="w-12 h-12 text-gray-300 mx-auto mb-4" />
+                                        <h3 className="text-lg font-medium text-gray-900 mb-2">Aucun module</h3>
+                                        <p className="text-gray-600 mb-6">
+                                            Aucun module n'est disponible pour le moment.
+                                        </p>
+                                        <button
+                                            onClick={() => navigate(`/organizations/${organization!.id}/modules/create`)}
+                                            className="bg-[#8290A9] text-white px-6 py-2 rounded-lg hover:bg-[#6B7C92] transition-colors"
+                                        >
+                                            Créer une entité
+                                        </button>
+                                    </div>
+                                ) : (
+                                    <div className="overflow-x-auto">
+                                        <table className="min-w-full divide-y divide-gray-200">
+                                            <thead className="bg-gray-50">
+                                                <tr>
+                                                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">nom</th>
+                                                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">description</th>
+                                                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Montant</th>
+
+                                                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Action</th>
+
+                                                </tr>
+                                            </thead>
+                                            <tbody className="bg-white divide-y divide-gray-100">
+                                                {modules.map((module) => (
+                                                    <tr key={module.id} className="hover:bg-gray-50">
+                                                        <td className="px-4 py-2 font-medium text-gray-900">{module.name}</td>
+                                                        <td className="px-4 py-2 text-gray-600">{module.description || '-'}</td>
+                                                        <td className="px-4 py-2 text-gray-600">{module.price_monthly}</td>
+
+                                                        <td className="px-4 py-2 text-gray-600">
+                                                            {organization?.active_subscription && !organization!.modules!.some(m => m.id === module.id) ? (
+                                                                <PrimaryButton onClick={() => handlePurchaseModule(module)} >Obtenir</PrimaryButton>
+                                                            ) : organization?.active_subscription && organization!.modules!.some(m => m.id === module.id) ? (
+                                                                <span className="text-green-600 text-sm font-medium">✓ Activé</span>
+                                                            ) : (
+                                                                <span className="text-gray-400 text-sm">Non disponible</span>
+                                                            )}
+                                                        </td>
+                                                    </tr>
+                                                ))}
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                )}
+                            </div>
+
+                        </div>
+                    </RewiseBasicCard>
+                );
+            case 'billing':
+                return (
+                    <RewiseBasicCard title={<h6>Paiements</h6>}>
+                        <div className="">
+                            {entitiesLoading ? (
+                                <div className="text-center py-8">
+                                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#8290A9] mx-auto mb-4"></div>
+                                    <p className="text-gray-600">Chargement des entités...</p>
+                                </div>
+                            ) : entities.length === 0 ? (
+                                <div className="text-center py-12">
+                                    <Building2 className="w-12 h-12 text-gray-300 mx-auto mb-4" />
+                                    <h3 className="text-lg font-medium text-gray-900 mb-2">Aucune entité</h3>
+                                    <p className="text-gray-600 mb-6">
+                                        Cette organisation n'a pas encore d'entités associées.
+                                    </p>
+                                    <button
+                                        onClick={() => navigate(`/organizations/${organization!.id}/entities/create`)}
+                                        className="bg-[#8290A9] text-white px-6 py-2 rounded-lg hover:bg-[#6B7C92] transition-colors"
+                                    >
+                                        Créer une entité
+                                    </button>
+                                </div>
+                            ) : (
+                                <div className="overflow-x-auto">
+                                    <table className="min-w-full divide-y divide-gray-200">
+                                        <thead className="bg-gray-50">
+                                            <tr>
+                                                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
+                                                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Methode de paiement</th>
+                                                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Montant</th>
+                                                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">statut</th>
+                                                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Factures</th>
+                                                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Recu de paiement</th>
+
+                                            </tr>
+                                        </thead>
+                                        <tbody className="bg-white divide-y divide-gray-100">
+                                            {[].map((payment) => (
+                                                <tr key={payment.id} className="hover:bg-gray-50">
+                                                    <td className="px-4 py-2 font-medium text-gray-900">{payment.date}</td>
+                                                    <td className="px-4 py-2 text-gray-600">{payment.method || '-'}</td>
+                                                    <td className="px-4 py-2 text-gray-600">{formatCurrency(payment.amount)}</td>
+                                                    <td className="px-4 py-2 text-gray-600">{payment.status || '-'}</td>
+                                                    <td className="px-4 py-2 text-gray-600">
+                                                        {payment.invoice || '-'}
+                                                    </td>
+                                                    <td className="px-4 py-2 text-gray-600">{formatCurrency(payment.receipt)}</td>
+
+                                                </tr>
+                                            ))}
+                                        </tbody>
+                                    </table>
+                                </div>
+                            )}
+                        </div>
+                    </RewiseBasicCard>
+                );
+
+            default:
+                return null;
+        }
+    };
+
+
+
+
+
+    if (loading) {
+        return (
+            <div className="space-y-6">
+                <div className="flex items-center justify-center min-h-[400px]">
+                    <div className="text-center">
+                        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#8290A9] mx-auto mb-4"></div>
+                        <p className="text-gray-600">Chargement des détails de l'organisation...</p>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    if (organization && organization.active_subscription === null) {
+        return (
+            <div id='' className="relative space-y-6">
+                <X onClick={() => navigate('/organizations')} className="absolute right-4 top-4 w-8 h-8 text-gray-300 mx-auto mb-4" />
+                <ListPricing organizationId={organization.id} />
+            </div>
+        );
+    }
+
+    if (!organization) {
+        return (
+            <div className="space-y-6">
+                <div className="flex items-center justify-center min-h-[400px]">
+                    <div className="text-center">
+                        <Building2 className="w-16 h-16 text-gray-300 mx-auto mb-4" />
+                        <h3 className="text-lg font-medium text-gray-900 mb-2">Organisation non trouvée</h3>
+                        <p className="text-gray-600 mb-6">L'organisation demandée n'existe pas ou vous n'y avez pas accès.</p>
+                        <button
+                            onClick={() => navigate('/organizations')}
+                            className="bg-[#8290A9] text-white px-6 py-2 rounded-lg hover:bg-[#6B7C92] transition-colors"
+                        >
+                            Retour aux organisations
+                        </button>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-6">
+            {/* Header */}
+            <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-4">
+                    <button
+                        onClick={() => navigate('/organizations')}
+                        className="flex items-center text-gray-600 hover:text-gray-900 transition-colors"
+                    >
+                        <ArrowLeft className="w-4 h-4 mr-2" />
+                        Retour aux organisations
+                    </button>
+                </div>
+
+                <div className="flex items-center space-x-3">
+                    <button
+                        onClick={() => navigate(`/organizations/${organization.id}/edit`)}
+                        className="bg-[#8290A9] text-white px-4 py-2 rounded-lg hover:bg-[#6B7C92] transition-colors flex items-center space-x-2"
+                    >
+                        <Edit className="w-4 h-4" />
+                        <span>Modifier</span>
+                    </button>
+                    <button
+                        onClick={handleDeleteOrganization}
+                        className="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors flex items-center space-x-2"
+                    >
+                        <Trash2 className="w-4 h-4" />
+                        <span>Supprimer</span>
+                    </button>
+                </div>
+            </div>
+
+            {/* Organization Details */}
+            <RewiseBasicCard title={<h6>Détails de l'organisation</h6>}>
+
+                <div className="flex items-center space-x-3 mb-6">
+
+                    <div className='w-[60%]'>
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-3">
+
+                            {/* Raison sociale */}
+                            <TextInput
+                                label="Raison sociale"
+                                name="legal_name"
+                                value={formData?.legal_name ?? ''}
+                                placeholder="Nom légal de l'organisation"
+                                required
+                                error={errors.legal_name}
+                                onChange={handleInputChange}
+                            />
+
+                            {/* Nom commercial */}
+                            <TextInput
+                                label="Nom commercial"
+                                name="trading_name"
+                                value={formData?.trading_name ?? ''}
+                                placeholder="Nom commercial (optionnel)"
+                                onChange={handleInputChange}
+                            />
+
+                        </div>
+
+                        {/* Contact */}
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-3">
+                            <InputField
+                                label="Téléphone"
+                                name="phone"
+                                type="tel"
+                                value={formData?.phone ?? ''}
+                                placeholder="+225 XX XX XXX XXX"
+                                onChange={handleInputChange}
+                            />
+
+                            <InputField
+                                label="Email"
+                                name="email"
+                                type="email"
+                                value={formData?.email ?? ''}
+                                placeholder="contact@organisation.com"
+                                error={errors.email}
+                                onChange={handleInputChange}
+                            />
+                        </div>
+
+
+
+                    </div>
+
+                    <div className="w-[40%]">
+                        {/* Adresse */}
+                        <div>
+                            <label className="block text-sm font-medium text-gray-700 mb-2">
+                                Adresse
+                            </label>
+                            <textarea
+                                name="address"
+                                value={formData?.address ?? ''}
+                                onChange={handleTextareaChange}
+                                rows={4}
+                                className="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#6B7C92] focus:border-transparent placeholder-gray-400"
+                                placeholder="Adresse complète de l'organisation"
+                            />
+                        </div>
+                    </div>
+
+                </div>
+            </RewiseBasicCard>
+
+
+
+
+            <div className="border-b border-gray-200">
+                <nav className="flex space-x-8 px-6">
+                    {tabs.map((tab) => {
+                        const Icon = tab.icon;
+                        return (
+                            <button
+                                key={tab.id}
+                                onClick={() => setActiveTab(tab.id as any)}
+                                className={`
+                                        flex items-center space-x-2 py-4 px-2 text-sm font-medium border-b-2 transition-colors
+                                        ${activeTab === tab.id
+                                        ? 'border-[#6A8A82] text-[#6A8A82]'
+                                        : 'border-transparent text-[#767676] hover:text-[#6A8A82] hover:border-[#6A8A82]/30'
+                                        }
+                                    `}
+                            >
+                                <Icon className="w-4 h-4 inline mr-2" />
+                                {tab.label}
+                            </button>
+                        );
+                    })}
+                </nav>
+            </div>
+
+            {renderTabContent()}
+
+
+
+
+
+
+            {/* Click outside to close dropdown */}
+            {dropdownOpen && (
+                <div
+                    className="fixed inset-0 z-5"
+                    onClick={() => setDropdownOpen(null)}
+                />
+            )}
+
+            {/* Entity Modal */}
+            {showEntityModal && (
+                <EntityModal
+                    key={`entity-modal-${selectedEntity ? selectedEntity.id : 'new'}-${organization?.id}`}
+                    object={selectedEntity}
+                    isOpen={showEntityModal}
+                    onClose={() => setShowEntityModal(false)}
+                    organization={organization}
+                />
+            )}
+
+            {/* Module Purchase Modal */}
+            {showModulePurchaseModal && selectedModuleForPurchase && (
+                <ModulePurchaseModal
+                    module={selectedModuleForPurchase}
+                    organization={organization}
+                    isOpen={showModulePurchaseModal}
+                    onClose={() => {
+                        setShowModulePurchaseModal(false);
+                        setSelectedModuleForPurchase(null);
+                    }}
+                    onConfirm={confirmModulePurchase}
+                    processing={processingModulePurchase}
+                />
+            )}
+
+            {/* Plan Change Modal */}
+            {showPlanChangeModal && (
+                <PlanChangeModal
+                    plans={availablePlans}
+                    currentPlan={organization?.active_subscription?.plan}
+                    organization={organization}
+                    isOpen={showPlanChangeModal}
+                    onClose={() => setShowPlanChangeModal(false)}
+                    onConfirm={confirmPlanChange}
+                    processing={processingPlanChange}
+                    plansLoading={plansLoading}
+                />
+            )}
+        </div>
+    );
+};
+
+export default DetailOrganizations;
+
+
+
+// EntityModal Component
+const EntityModal: React.FC<{ isOpen: boolean; onClose: () => void; object: Entity | null; organization: Organization | null }> = ({
+    isOpen,
+    onClose,
+    object,
+    organization
+}) => {
+
+
+    const [formData, setFormData] = useState<Partial<Entity>>(object || {
+        organization: organization?.id,
+        legal_name: '',
+        trading_name: '',
+        phone: '',
+        email: '',
+        country: '',
+        city: '',
+        address: '',
+        rib: '',
+        iban: '',
+        bank_name: '',
+        bank_address: '',
+        tax_account: '',
+        rccm: '',
+        currency: 'EUR',
+    });
+
+    const [errors, setErrors] = useState<Partial<Record<keyof Entity, string>>>({});
+    const [activeTab, setActiveTab] = useState<'general' | 'location' | 'banking' | 'fne'>('general');
+    const [loading, setLoading] = useState(false);
+    const { token } = useSession();
+    const { success, error: showError } = useToast();
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({ ...prev, [name]: value }));
+        if (errors[name as keyof Entity]) {
+            setErrors(prev => ({ ...prev, [name]: undefined }));
+        }
+    };
+
+    const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({ ...prev, [name]: value }));
+    };
+
+    const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({ ...prev, [name]: value }));
+    };
+
+    const validateForm = (): boolean => {
+        const newErrors: Partial<Record<keyof Entity, string>> = {};
+
+        if (!formData.legal_name?.trim()) {
+            newErrors.legal_name = 'La raison sociale est obligatoire';
+        }
+
+        if (formData.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+            newErrors.email = 'Format d\'email invalide';
+        }
+
+        if (formData.iban && formData.iban.length > 0 && formData.iban.length < 15) {
+            newErrors.iban = 'Format IBAN invalide';
+        }
+
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+
+    const handleSaveEntity = async (entityData: Partial<Entity>) => {
+
+
+        try {
+            if (object && object.id) {
+                // Modification
+                await EntityServices.updateEntity(object.id, entityData as any, token);
+                success('Entité modifiée avec succès !');
+            } else {
+                // Création
+                await EntityServices.createEntity(organization!.id, entityData as any, token);
+                success('Entité créée avec succès !');
+            }
+            onClose();
+        } catch (error: any) {
+            console.error(error);
+            showError('Erreur lors de l\'enregistrement de l\'entité');
+        }
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!validateForm()) return;
+
+        setLoading(true);
+        try {
+            await handleSaveEntity(formData);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const tabs = [
+        { id: 'general', label: 'Général', icon: Building2 },
+        { id: 'location', label: 'Localisation', icon: MapPin },
+        { id: 'banking', label: 'Bancaire', icon: CreditCard },
+        { id: 'fne', label: 'FNE', icon: FileText }
+    ];
+
+    const currencies = [
+        { value: 'EUR', label: 'Euro (€)' },
+        { value: 'USD', label: 'Dollar US ($)' },
+        { value: 'GBP', label: 'Livre Sterling (£)' },
+        { value: 'CAD', label: 'Dollar Canadien (CAD)' },
+        { value: 'CHF', label: 'Franc Suisse (CHF)' },
+        { value: 'XOF', label: 'Franc CFA (XOF)' },
+        { value: 'XAF', label: 'Franc CFA Central (XAF)' }
+    ];
+
+    const renderTabContent = () => {
+        switch (activeTab) {
+            case 'general':
+                return (
+                    <div className="space-y-4">
+                        <TextInput
+                            label="Raison sociale"
+                            name="legal_name"
+                            value={formData.legal_name || ''}
+                            placeholder="Nom légal de l'entité"
+                            required
+                            error={errors.legal_name}
+                            onChange={handleInputChange}
+                        />
+
+                        <TextInput
+                            label="Nom commercial"
+                            name="trading_name"
+                            value={formData.trading_name || ''}
+                            placeholder="Nom commercial (optionnel)"
+                            onChange={handleInputChange}
+                        />
+
+
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <TextInput
+                                label="Numéro d'identification fiscale (NCC)"
+                                name="tax_account"
+                                value={formData.tax_account || ''}
+                                placeholder="Numéro d'identification fiscale"
+                                onChange={handleInputChange}
+                            />
+
+                            <TextInput
+                                label="RCCM"
+                                name="rccm"
+                                value={formData.rccm || ''}
+                                placeholder="Registre du Commerce et du Crédit Mobilier"
+                                onChange={handleInputChange}
+                            />
+
+                            <InputField
+                                label="Téléphone"
+                                name="phone"
+                                type="tel"
+                                value={formData.phone || ''}
+                                placeholder="+33 1 23 45 67 89"
+                                onChange={handleInputChange}
+                            />
+
+                            <InputField
+                                label="Email"
+                                name="email"
+                                type="email"
+                                value={formData.email || ''}
+                                placeholder="contact@entite.com"
+                                error={errors.email}
+                                onChange={handleInputChange}
+                            />
+                        </div>
+                    </div>
+                );
+
+            case 'location':
+                return (
+                    <div className="space-y-4">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <TextInput
+                                label="Pays"
+                                name="country"
+                                value={formData.country || ''}
+                                placeholder="Cote d'Ivoire"
+                                onChange={handleInputChange}
+                            />
+
+                            <TextInput
+                                label="Ville"
+                                name="city"
+                                value={formData.city || ''}
+                                placeholder="Abidjan"
+                                onChange={handleInputChange}
+                            />
+                        </div>
+
+                        <div>
+                            <label className="block text-sm font-medium text-gray-700 mb-2">
+                                Adresse complète
+                            </label>
+                            <textarea
+                                name="address"
+                                value={formData.address || ''}
+                                onChange={handleTextareaChange}
+                                rows={3}
+                                className="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#6B7C92] focus:border-transparent placeholder-gray-400"
+                                placeholder="Adresse complète de l'entité"
+                            />
+                        </div>
+                    </div>
+                );
+
+            case 'banking':
+                return (
+                    <div className="space-y-4">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <TextInput
+                                label="RIB"
+                                name="rib"
+                                value={formData.rib || ''}
+                                placeholder="Relevé d'Identité Bancaire"
+                                onChange={handleInputChange}
+                            />
+
+                            <TextInput
+                                label="IBAN"
+                                name="iban"
+                                value={formData.iban || ''}
+                                placeholder="FR76 1234 5678 9012 3456 789"
+                                error={errors.iban}
+                                onChange={handleInputChange}
+                            />
+                        </div>
+
+                        <TextInput
+                            label="Nom de la banque"
+                            name="bank_name"
+                            value={formData.bank_name || ''}
+                            placeholder="Nom de la banque"
+                            onChange={handleInputChange}
+                        />
+
+                        <div>
+                            <label className="block text-sm font-medium text-gray-700 mb-2">
+                                Adresse de la banque
+                            </label>
+                            <textarea
+                                name="bank_address"
+                                value={formData.bank_address || ''}
+                                onChange={handleTextareaChange}
+                                rows={2}
+                                className="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#6B7C92] focus:border-transparent placeholder-gray-400"
+                                placeholder="Adresse de la banque"
+                            />
+                        </div>
+
+                        <SelectInput
+                            label="Devise"
+                            name="currency"
+                            value={formData.currency || 'EUR'}
+                            options={currencies}
+                            onChange={handleSelectChange}
+                        />
+                    </div>
+                );
+
+            case 'fne':
+                return (
+                    <div className="space-y-4">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <TextInput
+                                label="Regime Fiscal"
+                                name="regime_taxes"
+                                value={formData.regime_taxes || ''}
+                                placeholder=""
+                                onChange={handleInputChange}
+                            />
+                            <TextInput
+                                label="Centre de taxe"
+                                name="centers_taxes"
+                                value={formData.centers_taxes || ''}
+                                placeholder=""
+                                onChange={handleInputChange}
+                            />
+                            <TextInput
+                                label="Centre de taxe"
+                                name="centers_taxes"
+                                value={formData.centers_taxes || ''}
+                                placeholder=""
+                                onChange={handleInputChange}
+                            />
+
+
+                            <TextInput
+                                label={`Etablissement`}
+                                name="establishment"
+                                value={formData.establishment ?? ''}
+                                onChange={handleInputChange}
+                            />
+
+                            <TextInput
+                                label={`Point de vente`}
+                                name="point_of_sale"
+                                value={formData.point_of_sale ?? ''}
+                                onChange={handleInputChange}
+                            />
+
+                            <TextInput
+                                label={`Clé d'authentification FNE`}
+                                name="fne_auth_key"
+                                value={formData.fne_auth_key ?? ''}
+                                onChange={handleInputChange}
+                            />
+
+                            <SelectInput
+                                label={`STATUT FNE`}
+                                name="fne_url"
+                                value={formData.fne_url ?? ''}
+                                options={[
+                                    { value: 'test', label: 'test' },
+                                    { value: 'prod', label: 'production' },
+                                ]}
+                                onChange={handleInputChange}
+                            />
+
+
+                        </div>
+                    </div>
+                );
+
+            default:
+                return null;
+        }
+    };
+
+    if (!isOpen) return null;
+
+    return (
+        <Modal
+            title="Créer une entité"
+            description={`la création de l'entité  pour l'organisation ${organization?.legal_name}.`}
+            open={isOpen}
+            onClose={onClose}
+        >
+
+
+
+            {/* Tabs */}
+            <div className="border-b border-gray-200">
+                <nav className="flex space-x-8 px-6">
+                    {tabs.map((tab) => {
+                        const Icon = tab.icon;
+                        return (
+                            <button
+                                type='button'
+                                key={tab.id}
+                                onClick={() => setActiveTab(tab.id as any)}
+                                className={`
+                                        flex items-center space-x-2 py-4 px-2 text-sm font-medium border-b-2 transition-colors
+                                        ${activeTab === tab.id
+                                        ? 'border-[#6A8A82] text-[#6A8A82]'
+                                        : 'border-transparent text-[#767676] hover:text-[#6A8A82] hover:border-[#6A8A82]/30'
+                                        }
+                                    `}
+                            >
+                                <Icon className="w-4 h-4 inline mr-2" />
+                                <span>{tab.label}</span>
+                                {tab.badge && (
+                                    <span className="ml-2 px-2 py-1 text-xs bg-red-100 text-red-600 rounded-full">
+                                        {tab.badge}
+                                    </span>
+                                )}
+                            </button>
+                        );
+                    })}
+                </nav>
+            </div>
+
+            {/* Content */}
+            <form onSubmit={handleSubmit} className="p-6">
+                {renderTabContent()}
+
+                {/* Actions */}
+                <div className="flex justify-between pt-6 border-t border-gray-200 mt-8">
+                    <button
+                        type="button"
+                        onClick={onClose}
+                        className="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+                    >
+                        Annuler
+                    </button>
+
+
+
+                    <PrimaryButton
+                        type="submit"
+                        disabled={loading}
+                    >
+
+                        {loading ? 'chargement...' : 'Enregistrer l\'entité'}
+                    </PrimaryButton>
+                </div>
+            </form>
+
+
+
+
+
+        </Modal>
+
+    );
+};
+
+// ModulePurchaseModal Component
+interface ModulePurchaseModalProps {
+    module: Module;
+    organization: Organization | null;
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    processing: boolean;
+}
+
+const ModulePurchaseModal: React.FC<ModulePurchaseModalProps> = ({
+    module,
+    organization,
+    isOpen,
+    onClose,
+    onConfirm,
+    processing
+}) => {
+    const calculateModulePrice = (module: Module, withTax: boolean = true): number => {
+        const basePrice = module.price_monthly;
+        return withTax ? basePrice * 1.18 : basePrice; // TVA 18%
+    };
+
+    const formatPrice = (price: number): string => {
+        return new Intl.NumberFormat('fr-FR', {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0,
+        }).format(price);
+    };
+
+    if (!isOpen) return null;
+
+    const basePrice = module.price_monthly;
+    const tax = basePrice * 0.18;
+    const totalPrice = calculateModulePrice(module, true);
+
+    return (
+        <Modal
+            title="Achat de Module"
+            description={`Confirmez l'achat du module ${module.name} pour l'organisation ${organization?.legal_name}.`}
+            open={isOpen}
+            onClose={onClose}
+        >
+
+
+            {/* Content */}
+            <div className="p-6">
+                {/* Module Info */}
+                <div className="mb-6">
+                    <h3 className="text-lg font-semibold text-gray-900 mb-2">{module.name}</h3>
+                    <p className="text-sm text-gray-600 mb-4">{module.description}</p>
+
+                    {/* Module Features */}
+                    <div className="bg-gray-50 rounded-lg p-4 mb-4">
+                        <h4 className="text-sm font-medium text-gray-700 mb-2">Fonctionnalités incluses:</h4>
+                        <ul className="text-sm text-gray-600 space-y-1">
+                            <li>• Accès complet au module {module.name}</li>
+                            <li>• Intégration avec les modules existants</li>
+                            <li>• Support technique inclus</li>
+                            <li>• Mises à jour automatiques</li>
+                        </ul>
+                    </div>
+                </div>
+
+                {/* Price Breakdown */}
+                <div className="bg-gray-50 rounded-lg p-4 mb-6">
+                    <h4 className="text-sm font-semibold text-gray-700 mb-3">Détail du prix:</h4>
+                    <div className="space-y-2">
+                        <div className="flex justify-between text-sm">
+                            <span className="text-gray-600">Prix du module:</span>
+                            <span className="font-medium">{formatPrice(basePrice)} FCFA</span>
+                        </div>
+                        <div className="flex justify-between text-sm">
+                            <span className="text-gray-600">TVA (18%):</span>
+                            <span className="font-medium">{formatPrice(tax)} FCFA</span>
+                        </div>
+                        <div className="border-t border-gray-200 pt-2 mt-2">
+                            <div className="flex justify-between text-base font-semibold">
+                                <span className="text-gray-900">Total:</span>
+                                <span className="text-[#8290A9]">{formatPrice(totalPrice)} FCFA/mois</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Warning */}
+                <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
+                    <div className="flex">
+                        <div className="ml-3">
+                            <h5 className="text-sm font-medium text-blue-800">Information</h5>
+                            <p className="text-sm text-blue-700 mt-1">
+                                Ce module sera ajouté à votre abonnement actuel et facturé mensuellement.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Actions */}
+            <div className="flex justify-between p-6 border-t border-gray-200">
+                <button
+                    type="button"
+                    onClick={onClose}
+                    disabled={processing}
+                    className="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                    Annuler
+                </button>
+
+                <button
+                    type="button"
+                    onClick={onConfirm}
+                    disabled={processing}
+                    className="px-6 py-2 bg-[#8290A9] text-white rounded-lg hover:bg-[#6B7C92] transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2"
+                >
+                    {processing ? (
+                        <>
+                            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                            <span>Traitement...</span>
+                        </>
+                    ) : (
+                        <>
+                            <CreditCard className="w-4 h-4" />
+                            <span>Confirmer l'achat</span>
+                        </>
+                    )}
+                </button>
+            </div>
+        </Modal>
+    );
+};
+
+// PlanChangeModal Component
+interface PlanChangeModalProps {
+    plans: any[];
+    currentPlan: any;
+    organization: Organization | null;
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: (plan: any) => void;
+    processing: boolean;
+    plansLoading: boolean;
+}
+
+const PlanChangeModal: React.FC<PlanChangeModalProps> = ({
+    plans,
+    currentPlan,
+    organization,
+    isOpen,
+    onClose,
+    onConfirm,
+    processing,
+    plansLoading
+}) => {
+    const [selectedPlan, setSelectedPlan] = useState<any>(null);
+
+    const formatPrice = (price: number): string => {
+        return new Intl.NumberFormat('fr-FR', {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0,
+        }).format(price);
+    };
+
+    const handlePlanSelect = (plan: any) => {
+        if (plan.id === currentPlan?.id) return; // Ne pas permettre de sélectionner le plan actuel
+        setSelectedPlan(plan);
+    };
+
+    const handleConfirm = () => {
+        if (selectedPlan) {
+            onConfirm(selectedPlan);
+        }
+    };
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+            <div className="bg-white rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto">
+                {/* Header */}
+                <div className="p-6 border-b border-gray-200">
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center space-x-3">
+                            <div className="w-10 h-10 bg-[#8290A9] rounded-full flex items-center justify-center">
+                                <CreditCard className="w-5 h-5 text-white" />
+                            </div>
+                            <div>
+                                <h2 className="text-xl font-semibold text-gray-900">Changer de Plan</h2>
+                                <p className="text-sm text-gray-600">
+                                    Organisation: <span className="font-medium">{organization?.legal_name}</span>
+                                </p>
+                            </div>
+                        </div>
+                        <button
+                            onClick={onClose}
+                            disabled={processing}
+                            className="text-gray-400 hover:text-gray-600 transition-colors disabled:opacity-50"
+                        >
+                            <X className="w-6 h-6" />
+                        </button>
+                    </div>
+                </div>
+
+                {/* Content */}
+                <div className="p-6">
+                    {plansLoading ? (
+                        <div className="text-center py-8">
+                            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#8290A9] mx-auto mb-4"></div>
+                            <p className="text-gray-600">Chargement des plans...</p>
+                        </div>
+                    ) : (
+                        <>
+                            {/* Current Plan Info */}
+                            <div className="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+                                <h3 className="text-sm font-medium text-blue-800 mb-1">Plan actuel</h3>
+                                <p className="text-sm text-blue-700">
+                                    <span className="font-semibold">{currentPlan?.name}</span> - {formatPrice(currentPlan?.price_monthly || 0)} FCFA/mois
+                                </p>
+                            </div>
+
+                            {/* Plans Grid */}
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+                                {plans.map((plan) => {
+                                    const isCurrentPlan = plan.id === currentPlan?.id;
+                                    const isSelected = selectedPlan?.id === plan.id;
+
+                                    return (
+                                        <div
+                                            key={plan.id}
+                                            onClick={() => !isCurrentPlan && handlePlanSelect(plan)}
+                                            className={`relative p-6 rounded-lg border-2 transition-all cursor-pointer ${isCurrentPlan
+                                                    ? 'border-gray-300 bg-gray-50 cursor-not-allowed opacity-75'
+                                                    : isSelected
+                                                        ? 'border-[#8290A9] bg-[#8290A9]/5'
+                                                        : 'border-gray-200 hover:border-[#8290A9]/50'
+                                                }`}
+                                        >
+                                            {/* Popular Badge */}
+                                            {plan.popular && (
+                                                <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
+                                                    <span className="bg-teal-100 text-teal-700 px-3 py-1 rounded-full text-xs font-medium">
+                                                        Populaire
+                                                    </span>
+                                                </div>
+                                            )}
+
+                                            {/* Current Plan Badge */}
+                                            {isCurrentPlan && (
+                                                <div className="absolute -top-3 right-4">
+                                                    <span className="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-xs font-medium">
+                                                        Plan actuel
+                                                    </span>
+                                                </div>
+                                            )}
+
+                                            {/* Selected indicator */}
+                                            {isSelected && (
+                                                <div className="absolute top-4 right-4">
+                                                    <div className="w-6 h-6 bg-[#8290A9] rounded-full flex items-center justify-center">
+                                                        <div className="w-2 h-2 bg-white rounded-full"></div>
+                                                    </div>
+                                                </div>
+                                            )}
+
+                                            {/* Plan Content */}
+                                            <div className="mb-4">
+                                                <h3 className="text-xl font-bold text-gray-900 mb-2">{plan.name}</h3>
+                                                <div className="mb-3">
+                                                    <span className="text-2xl font-bold text-gray-900">
+                                                        {formatPrice(plan.price)} FCFA
+                                                    </span>
+                                                    <span className="text-gray-600 ml-1">{plan.period}</span>
+                                                    {plan.originalPrice && (
+                                                        <div className="text-sm text-gray-500">
+                                                            {formatPrice(plan.originalPrice)} FCFA lorsque facturé annuellement
+                                                        </div>
+                                                    )}
+                                                </div>
+                                                <p className="text-gray-600 text-sm">{plan.description}</p>
+                                            </div>
+
+                                            {/* Features */}
+                                            <ul className="space-y-2">
+                                                {plan.features.slice(0, 3).map((feature: any, index: number) => (
+                                                    <li key={index} className="flex items-center space-x-2 text-sm">
+                                                        <div className="w-4 h-4 rounded-full bg-green-100 flex items-center justify-center">
+                                                            <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+                                                        </div>
+                                                        <span className="text-gray-700">{feature.name}</span>
+                                                    </li>
+                                                ))}
+                                                {plan.features.length > 3 && (
+                                                    <li className="text-sm text-gray-500 ml-6">
+                                                        +{plan.features.length - 3} autres fonctionnalités
+                                                    </li>
+                                                )}
+                                            </ul>
+                                        </div>
+                                    );
+                                })}
+                            </div>
+
+                            {/* Warning */}
+                            {selectedPlan && (
+                                <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
+                                    <div className="flex">
+                                        <div className="ml-3">
+                                            <h5 className="text-sm font-medium text-yellow-800">Changement de plan</h5>
+                                            <p className="text-sm text-yellow-700 mt-1">
+                                                Le changement de plan prendra effet immédiatement.
+                                                {selectedPlan.price > currentPlan?.price_monthly && (
+                                                    " La différence de prix sera facturée au prorata."
+                                                )}
+                                                {selectedPlan.price < currentPlan?.price_monthly && (
+                                                    " Le crédit restant sera appliqué à votre prochaine facture."
+                                                )}
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            )}
+                        </>
+                    )}
+                </div>
+
+                {/* Actions */}
+                <div className="flex justify-between p-6 border-t border-gray-200">
+                    <button
+                        type="button"
+                        onClick={onClose}
+                        disabled={processing}
+                        className="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                        Annuler
+                    </button>
+
+                    <button
+                        type="button"
+                        onClick={handleConfirm}
+                        disabled={processing || !selectedPlan || plansLoading}
+                        className="px-6 py-2 bg-[#8290A9] text-white rounded-lg hover:bg-[#6B7C92] transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2"
+                    >
+                        {processing ? (
+                            <>
+                                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                                <span>Traitement...</span>
+                            </>
+                        ) : (
+                            <>
+                                <CreditCard className="w-4 h-4" />
+                                <span>Confirmer le changement</span>
+                            </>
+                        )}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};