ptechcore_ui 0.0.0

package/src/pages/organizations/ListOrganizations.tsx

@@ -0,0 +1,270 @@
+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;