ptechcore_ui 0.0.0

package/src/pages/organizations/DetailEntity.tsx

@@ -0,0 +1,1002 @@
+import { useState, useEffect } from "react";
+import { EntityServices, OrganizationServices } from "../../services/OrganizationServices";
+import { UserServices } from "../../services/UserServices";
+import { useNavigate, useParams } from "react-router-dom";
+import { useToast } from "../../contexts/ToastContext";
+import {useSession } from "../../contexts/SessionContext";
+import { ArrowLeft, Building2, CreditCard, FileText, MapPin, User as UserIcon, X } from "lucide-react";
+import { InputField, SelectInput, TextInput } from "../../components/common/Inputs";
+import { RewiseBasicCard } from "../../components/common/Cards";
+import { Entity } from "../../models/Organization"; 
+import { User } from "../../models/User";
+
+
+
+const DetailEntity: React.FC = () => {
+    const { id } = useParams<{ id: string }>();
+    const [entity, setEntity] = useState<Entity | null>(null);
+    const [formData, setFormData] = useState<Partial<Entity>>({});
+    const [entities, setEntities] = useState<Entity[]>([]);
+    const [users, setUsers] = useState<User[]>([]);
+    const [selectedEntity, setSelectedEntity] = useState<Entity | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [entitiesLoading, setEntitiesLoading] = useState(true);
+    const [usersLoading, setUsersLoading] = useState(true);
+    const [dropdownOpen, setDropdownOpen] = useState<number | null>(null);
+    const [showEntityModal, setShowEntityModal] = useState(false);
+    const [showCreateUserModal, setShowCreateUserModal] = useState(false);
+
+    const [errors, setErrors] = useState<Partial<Record<keyof Entity, string>>>({});
+
+
+    const [activeTab, setActiveTab] = useState<'general' | 'location' | 'banking' | 'fne' | 'modules' | 'billing' | 'users'>('general');
+
+    const navigate = useNavigate();
+    const { success, error: showError } = useToast();
+    const { token } = useSession();
+
+    useEffect(() => {
+        if (id) {
+            loadEntityDetails();
+            loadUsers();
+        }
+    }, [id]);
+
+
+    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 },
+        { id: 'modules', label: 'Modules', icon: FileText },
+        { id: 'billing', label: 'Facturation', icon: CreditCard },
+        { id: 'users', label: 'Utilisateurs', icon: UserIcon }
+    ];
+
+
+
+    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 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 handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({ ...prev, [name]: value }));
+        if (errors[name as keyof Entity]) {
+            setErrors(prev => ({ ...prev, [name]: undefined }));
+        }
+    };
+
+
+    const loadEntityDetails = async () => {
+        if (!token || !id) return;
+
+        try {
+            setLoading(true);
+            const result = await EntityServices.getEntity(parseInt(id), token) as { success: boolean, message: string, data: Entity };
+            setEntity(result.data);
+            setFormData(result.data);
+            console.log(result.data);
+
+        } catch (error: any) {
+            showError('Erreur lors du chargement des détails de l\'entité');
+            console.error(error);
+        } finally {
+            setLoading(false);
+        }
+    };
+    const loadUsers = async () => {
+        if (!token || !id) return;
+
+        try {
+            setUsersLoading(true);
+            const result = await EntityServices.getEntityUsers(parseInt(id), token) as { success: boolean, message: string, data: User[] };
+            setUsers(result.data);
+        } catch (error: any) {
+            showError('Erreur lors du chargement des utilisateurs de l\'entité');
+            console.error(error);
+        } finally {
+            setUsersLoading(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 handleDeleteOrganization = async () => {
+        if (!token || !entity) return;
+
+        if (!window.confirm(`Êtes-vous sûr de vouloir supprimer l'entité "${entity.legal_name}" ?`)) {
+            return;
+        }
+
+        try {
+            await EntityServices.deleteEntity(entity.id, token);
+            success('Entité 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 handleUserCreated = () => {
+        setShowCreateUserModal(false);
+        loadUsers(); // Recharger la liste des utilisateurs
+    };
+
+
+    const handleSaveEntity = async (entityData: Partial<Entity>) => {
+
+
+        try {
+
+            await EntityServices.updateEntity(entity?.id!, entityData as any, token!);
+            success('Entité modifiée avec succès !');
+
+
+        } 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 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>
+
+
+                    </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>
+                );
+
+            case 'modules':
+                return (
+                    <div className="space-y-4">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+
+                        </div>
+                    </div>
+                );
+            case 'billing':
+                return (
+                    <div className="space-y-4">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+
+                        </div>
+                    </div>
+                );
+            case 'users':
+                return (
+                    <div className="space-y-4">
+                        <div className="flex justify-between items-center">
+                            <h4 className="text-lg font-medium text-gray-900">Utilisateurs de l'entité</h4>
+                            {users.length > 0 && (
+                                <button
+                                    onClick={() => setShowCreateUserModal(true)}
+                                    className="bg-[#8290A9] text-white px-4 py-2 rounded-lg hover:bg-[#6B7C92] transition-colors text-sm"
+                                >
+                                    Ajouter un utilisateur
+                                </button>
+                            )}
+                        </div>
+
+                            <div className="">
+                                {usersLoading ? (
+                                    <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 utilisateurs...</p>
+                                    </div>
+                                ) : users.length === 0 ? (
+                                    <div className="text-center py-12">
+                                        <UserIcon className="w-12 h-12 text-gray-300 mx-auto mb-4" />
+                                        <h3 className="text-lg font-medium text-gray-900 mb-2">Aucun utilisateur</h3>
+                                        <p className="text-gray-600 mb-6">
+                                            Cette entité n'a pas encore d'utilisateurs associés.
+                                        </p>
+                                        <button
+                                            onClick={() => setShowCreateUserModal(true)}
+                                            className="bg-[#8290A9] text-white px-6 py-2 rounded-lg hover:bg-[#6B7C92] transition-colors"
+                                        >
+                                            Ajouter un utilisateur
+                                        </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">Prénoms </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">Numero de téléphone</th>
+                                                  
+
+                                                </tr>
+                                            </thead>
+                                            <tbody className="bg-white divide-y divide-gray-100">
+                                                {users.map((user) => (
+                                                    <tr key={user.id} className="hover:bg-gray-50">
+                                                        <td className="px-4 py-2 font-medium text-gray-900">{user.last_name}</td>
+                                                        <td className="px-4 py-2 text-gray-600">{user.first_name || '-'}</td>
+                                                        <td className="px-4 py-2 text-gray-600">{user.email}</td>
+                                                        <td className="px-4 py-2 text-gray-600">{user.phonenumber || '-'}</td>
+                                                       
+                                                   
+
+                                                    </tr>
+                                                ))}
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                )}
+                            </div>
+                       
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <TextInput
+                                label="Nom"
+                                name="name"
+                                value={formData.name || ''}
+                                placeholder=""
+                                onChange={handleInputChange}
+                            />
+                            <TextInput
+                                label="Email"
+                                name="email"
+                                value={formData.email || ''}
+                                placeholder=""
+                                onChange={handleInputChange}
+                            />
+                            <TextInput
+                                label="Téléphone"
+                                name="phone"
+                                value={formData.phone || ''}
+                                placeholder=""
+                                onChange={handleInputChange}
+                            />
+                            <SelectInput
+                                label="Rôle"
+                                name="role"
+                                value={formData.role || ''}
+                                options={[
+                                    { value: 'admin', label: 'Administrateur' },
+                                    { value: 'user', label: 'Utilisateur' },
+                                ]}
+                                onChange={handleInputChange}
+                            />
+                        </div>
+                    </div>
+                );
+
+            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 (!entity) {
+        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">
+
+
+                </div>
+            </div>
+            <RewiseBasicCard title={<h6>Détails de l'entité {entity?.legal_name} </h6>}>
+                <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={`py-4 px-1 border-b-2 font-medium text-sm transition-colors ${activeTab === tab.id
+                                        ? 'border-[#8290A9] text-[#8290A9]'
+                                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                                        }`}
+                                >
+                                    <Icon className="w-4 h-4 inline mr-2" />
+                                    {tab.label}
+                                </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="submit"
+                            disabled={loading}
+                            className="px-6 py-2 bg-[#8290A9] text-white rounded-lg hover:bg-[#6B7C92] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                            {loading ? 'chargement...' : 'Enregistrer l\'entité'}
+                        </button>
+                    </div>
+                </form>
+
+
+            </RewiseBasicCard>
+
+
+
+
+            {/* Click outside to close dropdown */}
+            {dropdownOpen && (
+                <div
+                    className="fixed inset-0 z-5"
+                    onClick={() => setDropdownOpen(null)}
+                />
+            )}
+
+            {/* Create User Modal */}
+            {showCreateUserModal && (
+                <CreateUserModal
+                    isOpen={showCreateUserModal}
+                    onClose={() => setShowCreateUserModal(false)}
+                    onUserCreated={handleUserCreated}
+                    entityId={entity?.id}
+                />
+            )}
+
+        </div>
+    );
+};
+
+// CreateUserModal Component
+interface CreateUserModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onUserCreated: () => void;
+    entityId?: number;
+}
+
+const CreateUserModal: React.FC<CreateUserModalProps> = ({
+    isOpen,
+    onClose,
+    onUserCreated,
+    entityId
+}) => {
+    const [formData, setFormData] = useState<Partial<User>>({
+        username: '',
+        first_name: '',
+        last_name: '',
+        email: '',
+        phonenumber: '',
+        is_active: true,
+        is_staff: false,
+        is_superuser: false,
+        groups: [],
+        user_permissions: [],
+        centers_access: []
+    });
+
+    const [errors, setErrors] = useState<Partial<Record<keyof User, string>>>({});
+    const [loading, setLoading] = useState(false);
+    const [activeTab, setActiveTab] = useState<'general' | 'permissions'>('general');
+
+    const { success, error: showError } = useToast();
+    const { token } = useSession();
+
+    const tabs = [
+        { id: 'general', label: 'Informations générales', icon: UserIcon },
+        { id: 'permissions', label: 'Permissions', icon: Building2 }
+    ];
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value, type, checked } = e.target;
+        setFormData(prev => ({
+            ...prev,
+            [name]: type === 'checkbox' ? checked : value
+        }));
+
+        if (errors[name as keyof User]) {
+            setErrors(prev => ({ ...prev, [name]: undefined }));
+        }
+    };
+
+    const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({ ...prev, [name]: value === 'true' }));
+    };
+
+    const validateForm = (): boolean => {
+        const newErrors: Partial<Record<keyof User, string>> = {};
+
+        if (!formData.username?.trim()) {
+            newErrors.username = 'Le nom d\'utilisateur est obligatoire';
+        }
+
+        if (!formData.first_name?.trim()) {
+            newErrors.first_name = 'Le prénom est obligatoire';
+        }
+
+        if (!formData.last_name?.trim()) {
+            newErrors.last_name = 'Le nom de famille est obligatoire';
+        }
+
+        if (!formData.email?.trim()) {
+            newErrors.email = 'L\'email est obligatoire';
+        } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+            newErrors.email = 'Format d\'email invalide';
+        }
+
+        if (formData.phonenumber && !/^[\+]?[0-9\s\-\(\)]+$/.test(formData.phonenumber)) {
+            newErrors.phonenumber = 'Format de téléphone invalide';
+        }
+
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!validateForm()) return;
+
+        if (!token) {
+            showError('Vous devez être connecté pour créer un utilisateur');
+            return;
+        }
+
+        setLoading(true);
+        try {
+            // Créer l'utilisateur
+            const result = await UserServices.addUser(formData, token) as { success: boolean, data: User };
+
+            // Si un entityId est fourni, associer l'utilisateur à l'entité
+            if (entityId && result.data?.id) {
+                await EntityServices.addUserToEntity(entityId, result.data.id, token);
+            }
+
+            success('Utilisateur créé avec succès !');
+            onUserCreated();
+        } catch (error: any) {
+            console.error(error);
+            showError('Erreur lors de la création de l\'utilisateur');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const renderTabContent = () => {
+        switch (activeTab) {
+            case 'general':
+                return (
+                    <div className="space-y-4">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <TextInput
+                                label="Nom d'utilisateur"
+                                name="username"
+                                value={formData.username || ''}
+                                placeholder="nom.utilisateur"
+                                required
+                                error={errors.username}
+                                onChange={handleInputChange}
+                            />
+
+                            <InputField
+                                label="Email"
+                                name="email"
+                                type="email"
+                                value={formData.email || ''}
+                                placeholder="utilisateur@example.com"
+                                required
+                                error={errors.email}
+                                onChange={handleInputChange}
+                            />
+                        </div>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <TextInput
+                                label="Prénom"
+                                name="first_name"
+                                value={formData.first_name || ''}
+                                placeholder="Prénom"
+                                required
+                                error={errors.first_name}
+                                onChange={handleInputChange}
+                            />
+
+                            <TextInput
+                                label="Nom de famille"
+                                name="last_name"
+                                value={formData.last_name || ''}
+                                placeholder="Nom de famille"
+                                required
+                                error={errors.last_name}
+                                onChange={handleInputChange}
+                            />
+                        </div>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <InputField
+                                label="Téléphone"
+                                name="phonenumber"
+                                type="tel"
+                                value={formData.phonenumber || ''}
+                                placeholder="+225 XX XX XXX XXX"
+                                error={errors.phonenumber}
+                                onChange={handleInputChange}
+                            />
+
+                            <SelectInput
+                                label="Statut"
+                                name="is_active"
+                                value={formData.is_active?.toString() || 'true'}
+                                options={[
+                                    { value: 'true', label: 'Actif' },
+                                    { value: 'false', label: 'Inactif' }
+                                ]}
+                                onChange={handleSelectChange}
+                            />
+                        </div>
+                    </div>
+                );
+
+            case 'permissions':
+                return (
+                    <div className="space-y-4">
+                        <div className="grid grid-cols-1 gap-4">
+                            <label className="flex items-center space-x-3">
+                                <input
+                                    type="checkbox"
+                                    name="is_staff"
+                                    checked={formData.is_staff || false}
+                                    onChange={handleInputChange}
+                                    className="rounded border-gray-300 text-[#8290A9] focus:ring-[#8290A9]"
+                                />
+                                <div>
+                                    <span className="text-sm font-medium text-gray-900">Membre du personnel</span>
+                                    <p className="text-xs text-gray-500">
+                                        Permet d'accéder à l'interface d'administration
+                                    </p>
+                                </div>
+                            </label>
+
+                            <label className="flex items-center space-x-3">
+                                <input
+                                    type="checkbox"
+                                    name="is_superuser"
+                                    checked={formData.is_superuser || false}
+                                    onChange={handleInputChange}
+                                    className="rounded border-gray-300 text-[#8290A9] focus:ring-[#8290A9]"
+                                />
+                                <div>
+                                    <span className="text-sm font-medium text-gray-900">Super utilisateur</span>
+                                    <p className="text-xs text-gray-500">
+                                        Accès complet à toutes les fonctionnalités
+                                    </p>
+                                </div>
+                            </label>
+                        </div>
+                    </div>
+                );
+
+            default:
+                return null;
+        }
+    };
+
+    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-3xl 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">
+                                <UserIcon className="w-5 h-5 text-white" />
+                            </div>
+                            <div>
+                                <h2 className="text-xl font-semibold text-gray-900">Créer un utilisateur</h2>
+                                <p className="text-sm text-gray-600">Ajoutez un nouveau membre à cette entité</p>
+                            </div>
+                        </div>
+                        <button
+                            onClick={onClose}
+                            disabled={loading}
+                            className="text-gray-400 hover:text-gray-600 transition-colors disabled:opacity-50"
+                        >
+                            <X className="w-6 h-6" />
+                        </button>
+                    </div>
+                </div>
+
+                {/* 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
+                                    key={tab.id}
+                                    type="button"
+                                    onClick={() => setActiveTab(tab.id as any)}
+                                    className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
+                                        activeTab === tab.id
+                                            ? 'border-[#8290A9] text-[#8290A9]'
+                                            : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                                    }`}
+                                >
+                                    <Icon className="w-4 h-4 inline mr-2" />
+                                    {tab.label}
+                                </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}
+                            disabled={loading}
+                            className="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50"
+                        >
+                            Annuler
+                        </button>
+
+                        <button
+                            type="submit"
+                            disabled={loading}
+                            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"
+                        >
+                            {loading ? (
+                                <>
+                                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                                    <span>Création...</span>
+                                </>
+                            ) : (
+                                <>
+                                    <UserIcon className="w-4 h-4" />
+                                    <span>Créer l'utilisateur</span>
+                                </>
+                            )}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+export default DetailEntity;