reafctor: pages for management and split components

components/admin/users/users-management-page.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import { useState } from "react";
+import { Users, Building2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Team } from "@/services/admin-management-service";
+import { TreeViewPage } from "../management/tree-view-page";
+import { useTreeView } from "@/hooks/use-tree-view";
+import { useFormDialog } from "@/hooks/use-form-dialog";
+import { useUsersManagement } from "@/hooks/use-users-management";
+import { UserFormDialog } from "./user-form-dialog";
+import { UsersList } from "./users-list";
+
+interface UsersManagementPageProps {
+  teams: Team[];
+}
+
+export function UsersManagementPage({ teams }: UsersManagementPageProps) {
+  const [searchTerm, setSearchTerm] = useState("");
+  
+  const { isCreateDialogOpen, openCreateDialog, closeCreateDialog } = useFormDialog();
+  
+  const {
+    users,
+    isLoading,
+    error,
+    userFormData,
+    isSubmitting,
+    setUserFormData,
+    resetForm,
+    handleCreateUser,
+    handleDeleteUser,
+  } = useUsersManagement(teams);
+
+  // Utilisation du hook factorisé pour la vue arborescente
+  const {
+    filteredDataByCategory: filteredUsersByTeam,
+    expandedCategories: expandedTeams,
+    toggleCategory: toggleTeam,
+    expandAll,
+    collapseAll,
+  } = useTreeView({
+    data: users,
+    searchFields: ["firstName", "lastName"],
+    groupBy: (user) => user.teamName || "Sans équipe",
+    searchTerm,
+    onSearchChange: setSearchTerm,
+  });
+
+  const handleCreateSubmit = async () => {
+    const success = await handleCreateUser();
+    if (success) {
+      closeCreateDialog();
+    }
+  };
+
+  const handleOpenCreateDialog = () => {
+    resetForm();
+    openCreateDialog();
+  };
+
+  const headerActions = (
+    <Button onClick={handleOpenCreateDialog}>
+      <Users className="w-4 h-4 mr-2" />
+      Créer un utilisateur
+    </Button>
+  );
+
+  const emptyState = (
+    <div className="text-center py-8">
+      <Users className="w-10 h-10 text-slate-500 mx-auto mb-3" />
+      <h3 className="text-base font-medium text-slate-400 mb-1">
+        {searchTerm ? "Aucun utilisateur trouvé" : "Aucun utilisateur"}
+      </h3>
+      <p className="text-sm text-slate-500">
+        {searchTerm
+          ? "Essayez de modifier vos critères de recherche"
+          : "Commencez par créer votre premier utilisateur"}
+      </p>
+    </div>
+  );
+
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <h2 className="text-2xl font-bold text-white">
+            Gestion des utilisateurs
+          </h2>
+          <Button disabled>
+            <Users className="w-4 h-4 mr-2" />
+            Créer un utilisateur
+          </Button>
+        </div>
+        <div className="space-y-3">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="flex items-center gap-3 p-3">
+              <div className="w-8 h-8 rounded-full bg-slate-700 animate-pulse" />
+              <div className="flex-1 space-y-2">
+                <div className="h-4 bg-slate-700 rounded animate-pulse w-32" />
+                <div className="h-3 bg-slate-700 rounded animate-pulse w-24" />
+              </div>
+              <div className="w-20 h-8 bg-slate-700 rounded animate-pulse" />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <h2 className="text-2xl font-bold text-white">
+            Gestion des utilisateurs
+          </h2>
+        </div>
+        <div className="text-center py-8">
+          <div className="w-12 h-12 rounded-full bg-red-500/20 flex items-center justify-center mx-auto mb-4">
+            <Users className="w-6 h-6 text-red-400" />
+          </div>
+          <p className="text-red-400 mb-4">{error}</p>
+          <Button onClick={() => window.location.reload()} variant="outline">
+            Réessayer
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <TreeViewPage
+        title="Gestion des utilisateurs"
+        description="Gérez les utilisateurs de votre organisation"
+        searchTerm={searchTerm}
+        onSearchChange={setSearchTerm}
+        onExpandAll={expandAll}
+        onCollapseAll={collapseAll}
+        searchPlaceholder="Rechercher un utilisateur..."
+        hasContent={Object.keys(filteredUsersByTeam).length > 0}
+        emptyState={emptyState}
+        headerActions={headerActions}
+      >
+        <UsersList
+          filteredUsersByTeam={filteredUsersByTeam}
+          expandedTeams={expandedTeams}
+          onToggleTeam={toggleTeam}
+          onDeleteUser={handleDeleteUser}
+        />
+      </TreeViewPage>
+
+      {/* Dialog de création */}
+      <UserFormDialog
+        isOpen={isCreateDialogOpen}
+        onClose={closeCreateDialog}
+        onSubmit={handleCreateSubmit}
+        title="Créer un nouvel utilisateur"
+        formData={userFormData}
+        onFormDataChange={setUserFormData}
+        teams={teams}
+        isSubmitting={isSubmitting}
+      />
+    </>
+  );
+}