ptechcore_ui 1.0.1 → 1.0.2

package/src/pages/organizations/DetailOrganizations.tsx

@@ -1,1628 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
-import {
-    ArrowLeft,
-    Building2,
-    Edit,
-    Trash2,
-    Plus,
-    MapPin,
-    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 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>
-    );
-};