ptechcore_ui 1.0.1 → 1.0.2

package/src/pages/organizations/ListOrganizations.tsx

@@ -1,270 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { 
-  Building2, 
-  Plus, 
-  Search, 
-  MoreVertical, 
-  Edit, 
-  Trash2, 
-  Eye,
-  Phone,
-  Mail,
-  MapPin,
-  Calendar
-} from 'lucide-react';
-import { useToast } from '../../contexts/ToastContext';
-import { useSession } from '../../contexts/SessionContext';
-import {  OrganizationServices } from '../../services/OrganizationServices';
-import { Organization } from '../../models/Organization';
-import PrimaryButton from '../../components/common/Buttons';
-
-const ListOrganizations: React.FC = () => {
-  const [organizations, setOrganizations] = useState<Organization[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [searchTerm, setSearchTerm] = useState('');
-  const [dropdownOpen, setDropdownOpen] = useState<number | null>(null);
-  
-  const navigate = useNavigate();
-  const { success, error: showError } = useToast();
-  const { token } = useSession();
-
-  useEffect(() => {
-    loadOrganizations();
-  }, []);
-
-  const loadOrganizations = async () => {
-    if (!token) {
-      showError('Vous devez etre connecté pour voir les organisations');
-      return;
-    }
-
-    try {
-      setLoading(true);
-      const result = await OrganizationServices.getUserOrganizations(token) as {success: boolean, data: Organization[] };
-      setOrganizations(result.data);
-    } catch (error: any) {
-      showError('Erreur lors du chargement des organisations');
-      console.error(error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleDeleteOrganization = async (id: number, name: string) => {
-    if (!token) return;
-    
-    if (!window.confirm(`�tes-vous s�r de vouloir supprimer l'organisation "${name}" ?`)) {
-      return;
-    }
-
-    try {
-      await OrganizationServices.deleteOrganization(id, token);
-      success('Organisation supprimée avec succès');
-      loadOrganizations();
-    } catch (error: any) {
-      showError('Erreur lors de la suppression de l\'organisation');
-    }
-  };
-
-  const filteredOrganizations = organizations.filter(org =>
-    org.legal_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    (org.trading_name && org.trading_name.toLowerCase().includes(searchTerm.toLowerCase()))
-  );
-
-  const formatDate = (dateString: string) => {
-    return new Date(dateString).toLocaleDateString('fr-FR', {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric'
-    });
-  };
-
-  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 organisations...</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold text-gray-900">Mes Organisations</h1>
-          <p className="text-gray-600 mt-2">
-            Gérez vos organisations et leurs entités
-          </p>
-        </div>
-        <PrimaryButton onClick={() => navigate('/organizations/new')} >
-    <Plus className="w-4 h-4" />
-          <span>Nouvelle Organisation</span>
-        </PrimaryButton>
-        
-      </div>
-
-      {/* Search */}
-      <div className="relative max-w-md">
-        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
-        <input
-          type="text"
-          placeholder="Rechercher une organisation..."
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-          className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#8290A9] focus:border-transparent"
-        />
-      </div>
-
-      {/* Organizations Grid */}
-      {filteredOrganizations.length === 0 ? (
-        <div className="text-center py-12">
-          <Building2 className="w-16 h-16 text-gray-300 mx-auto mb-4" />
-          <h3 className="text-lg font-medium text-gray-900 mb-2">
-            {searchTerm ? 'Aucune organisation trouv�e' : 'Aucune organisation'}
-          </h3>
-          <p className="text-gray-600 mb-6">
-            {searchTerm 
-              ? 'Essayez de modifier votre recherche' 
-              : 'Commencez par cr�er votre premi�re organisation'
-            }
-          </p>
-          {!searchTerm && (
-            <button
-              onClick={() => navigate('/create-organization')}
-              className="bg-[#8290A9] text-white px-6 py-2 rounded-lg hover:bg-[#6B7C92] transition-colors"
-            >
-              Créer une organisation
-            </button>
-          )}
-        </div>
-      ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {filteredOrganizations.map((organization) => (
-            <div
-              key={organization.id}
-              className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow"
-            >
-              {/* Card Header */}
-              <div className="flex items-start justify-between mb-4">
-                <div className="flex items-center space-x-3">
-                  <div className="w-12 h-12 bg-[#8290A9] rounded-full flex items-center justify-center">
-                    <Building2 className="w-6 h-6 text-white" />
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <h3 className="text-lg font-semibold text-gray-900 truncate">
-                      {organization.legal_name}
-                    </h3>
-                    {organization.trading_name && (
-                      <p className="text-sm text-gray-600 truncate">
-                        {organization.trading_name}
-                      </p>
-                    )}
-                  </div>
-                </div>
-                
-                <div className="relative">
-                  <button
-                    onClick={() => setDropdownOpen(dropdownOpen === organization.id ? null : organization.id)}
-                    className="p-1 rounded-full hover:bg-gray-100 transition-colors"
-                  >
-                    <MoreVertical className="w-4 h-4 text-gray-400" />
-                  </button>
-                  
-                  {dropdownOpen === organization.id && (
-                    <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-10">
-                      <button
-                        onClick={() => {
-                          navigate(`/organizations/${organization.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={() => {
-                          navigate(`/organizations/${organization.id}/edit`);
-                          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"
-                      >
-                        <Edit className="w-4 h-4" />
-                        <span>Modifier</span>
-                      </button>
-                      <button
-                        onClick={() => {
-                          handleDeleteOrganization(organization.id, organization.legal_name);
-                          setDropdownOpen(null);
-                        }}
-                        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>
-              </div>
-
-              {/* Contact Info */}
-              <div className="space-y-2 mb-4">
-                {organization.email && (
-                  <div className="flex items-center space-x-2 text-sm text-gray-600">
-                    <Mail className="w-4 h-4" />
-                    <span className="truncate">{organization.email}</span>
-                  </div>
-                )}
-                {organization.phone && (
-                  <div className="flex items-center space-x-2 text-sm text-gray-600">
-                    <Phone className="w-4 h-4" />
-                    <span>{organization.phone}</span>
-                  </div>
-                )}
-                {organization.address && (
-                  <div className="flex items-start space-x-2 text-sm text-gray-600">
-                    <MapPin className="w-4 h-4 mt-0.5 flex-shrink-0" />
-                    <span className="line-clamp-2">{organization.address}</span>
-                  </div>
-                )}
-              </div>
-
-              {/* Footer */}
-              <div className="pt-4 border-t border-gray-100">
-                <div className="flex items-center justify-between text-xs text-gray-500">
-                  <div className="flex items-center space-x-1">
-                    <Calendar className="w-3 h-3" />
-                    <span>Créé le {formatDate(organization.created_at)}</span>
-                  </div>
-                  <button
-                    onClick={() => navigate(`/organizations/${organization.id}`)}
-                    className="text-[#8290A9] hover:text-[#6B7C92] font-medium"
-                  >
-                    Voir 
-                  </button>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {/* Click outside to close dropdown */}
-      {dropdownOpen && (
-        <div
-          className="fixed inset-0 z-5"
-          onClick={() => setDropdownOpen(null)}
-        />
-      )}
-    </div>
-  );
-};
-
-export default ListOrganizations;