PolyMPR/routes/(apps)/admin/(_islands)/AdminUsers.tsx

import { useEffect, useState } from "preact/hooks";

type User = { id: string; nom: string; prenom: string; idRole: number | null };
type Role = { id: number; nom: string };

const ROLE_COLORS = [
  "#22c55e",
  "#d4a017",
  "#e07020",
  "#8b5cf6",
  "#06b6d4",
  "#ec4899",
];

function roleColor(roleId: number): string {
  return ROLE_COLORS[(roleId - 1) % ROLE_COLORS.length];
}

export default function AdminUsers() {
  const [users, setUsers] = useState<User[]>([]);
  const [roles, setRoles] = useState<Role[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [showCreate, setShowCreate] = useState(false);
  const [newId, setNewId] = useState("");
  const [newNom, setNewNom] = useState("");
  const [newPrenom, setNewPrenom] = useState("");
  const [newIdRole, setNewIdRole] = useState("");
  const [creating, setCreating] = useState(false);

  const [filterNom, setFilterNom] = useState("");
  const [filterRole, setFilterRole] = useState("");

  async function load() {
    try {
      const [uRes, rRes] = await Promise.all([
        fetch("/admin/api/users"),
        fetch("/admin/api/roles"),
      ]);
      if (!uRes.ok) throw new Error("Impossible de charger les utilisateurs");
      setUsers(await uRes.json());
      if (rRes.ok) setRoles(await rRes.json());
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur");
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    load();
  }, []);

  async function createUser() {
    if (!newId.trim() || !newNom.trim() || !newPrenom.trim()) return;
    setCreating(true);
    try {
      const res = await fetch("/admin/api/users", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          id: newId.trim(),
          nom: newNom.trim(),
          prenom: newPrenom.trim(),
          idRole: newIdRole ? Number(newIdRole) : null,
        }),
      });
      if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        throw new Error(body.error ?? "Création échouée");
      }
      setNewId("");
      setNewNom("");
      setNewPrenom("");
      setNewIdRole("");
      setShowCreate(false);
      await load();
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur");
    } finally {
      setCreating(false);
    }
  }

  async function deleteUser(id: string) {
    if (!confirm(`Supprimer l'utilisateur ${id} ?`)) return;
    try {
      const res = await fetch(`/admin/api/users/${encodeURIComponent(id)}`, {
        method: "DELETE",
      });
      if (!res.ok) throw new Error("Suppression échouée");
      await load();
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur");
    }
  }

  const roleMap = Object.fromEntries(roles.map((r) => [r.id, r.nom]));

  const filtered = users.filter((u) => {
    const matchNom = !filterNom ||
      `${u.nom} ${u.prenom} ${u.id}`.toLowerCase().includes(
        filterNom.toLowerCase(),
      );
    const matchRole = !filterRole || String(u.idRole) === filterRole;
    return matchNom && matchRole;
  });

  return (
    <div class="page-content">
      <h2 class="page-title">Gestion des Utilisateurs</h2>

      {error && <p class="state-error">{error}</p>}

      <div class="filters">
        <input
          class="filter-input"
          placeholder="Rechercher..."
          value={filterNom}
          onInput={(e) => setFilterNom((e.target as HTMLInputElement).value)}
        />
        <select
          class="filter-select"
          value={filterRole}
          onChange={(e) => setFilterRole((e.target as HTMLSelectElement).value)}
        >
          <option value="">Role</option>
          {roles.map((r) => <option key={r.id} value={r.id}>{r.nom}</option>)}
        </select>
        <button
          type="button"
          class="btn btn-primary"
          onClick={() => setShowCreate(true)}
          style="margin-left: auto"
        >
          + Créer utilisateur
        </button>
      </div>

      {/* Creation modal */}
      {showCreate && (
        <div
          class="modal-overlay"
          onClick={() => setShowCreate(false)}
        >
          <div class="modal-box" onClick={(e) => e.stopPropagation()}>
            <p class="modal-title">Créer un utilisateur</p>
            <div class="modal-form">
              <div class="form-field">
                <label>Login (uid)</label>
                <input
                  class="form-input"
                  placeholder="Login (uid)"
                  value={newId}
                  onInput={(e) =>
                    setNewId((e.target as HTMLInputElement).value)}
                  style="min-width: 0; width: 100%"
                />
              </div>
              <div class="form-field">
                <label>Nom</label>
                <input
                  class="form-input"
                  placeholder="Nom"
                  value={newNom}
                  onInput={(e) =>
                    setNewNom((e.target as HTMLInputElement).value)}
                  style="min-width: 0; width: 100%"
                />
              </div>
              <div class="form-field">
                <label>Prénom</label>
                <input
                  class="form-input"
                  placeholder="Prénom"
                  value={newPrenom}
                  onInput={(e) =>
                    setNewPrenom((e.target as HTMLInputElement).value)}
                  style="min-width: 0; width: 100%"
                />
              </div>
              <div class="form-field">
                <label>Rôle</label>
                <select
                  class="filter-select"
                  value={newIdRole}
                  onChange={(e) =>
                    setNewIdRole((e.target as HTMLSelectElement).value)}
                  style="min-width: 0; width: 100%"
                >
                  <option value="">Aucun rôle</option>
                  {roles.map((r) => (
                    <option key={r.id} value={r.id}>{r.nom}</option>
                  ))}
                </select>
              </div>
            </div>
            <div class="modal-actions">
              <button
                type="button"
                class="btn btn-secondary"
                onClick={() => setShowCreate(false)}
              >
                Annuler
              </button>
              <button
                type="button"
                class="btn btn-primary"
                onClick={createUser}
                disabled={creating}
              >
                {creating ? "..." : "+ Créer"}
              </button>
            </div>
          </div>
        </div>
      )}

      {loading
        ? <p class="state-loading">Chargement...</p>
        : (
          <div class="data-table-wrap">
            <table class="data-table">
              <thead>
                <tr>
                  <th>id (login)</th>
                  <th>Nom</th>
                  <th>Prénom</th>
                  <th>Rôle(s)</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                {filtered.length === 0
                  ? (
                    <tr>
                      <td colspan={5} class="state-empty">
                        Aucun utilisateur trouvé
                      </td>
                    </tr>
                  )
                  : filtered.map((u) => (
                    <tr key={u.id}>
                      <td class="col-dim">{u.id}</td>
                      <td>{u.nom}</td>
                      <td>{u.prenom}</td>
                      <td>
                        {u.idRole
                          ? (
                            <span
                              class="role-chip"
                              style={`border-color: ${
                                roleColor(u.idRole)
                              }; color: ${roleColor(u.idRole)}`}
                            >
                              {roleMap[u.idRole] ?? `#${u.idRole}`}
                            </span>
                          )
                          : <span class="col-dim">--</span>}
                      </td>
                      <td>
                        <div class="col-actions">
                          <a
                            class="btn btn-sm btn-secondary"
                            href={`/admin/users/${encodeURIComponent(u.id)}`}
                            f-client-nav={false}
                          >
                            <svg
                              width="14"
                              height="14"
                              viewBox="0 0 24 24"
                              fill="none"
                              stroke="currentColor"
                              stroke-width="2"
                            >
                              <path d="M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
                            </svg>{" "}
                            edit
                          </a>
                          <button
                            type="button"
                            class="btn btn-sm btn-danger"
                            onClick={() => deleteUser(u.id)}
                          >
                            <svg
                              width="14"
                              height="14"
                              viewBox="0 0 24 24"
                              fill="none"
                              stroke="currentColor"
                              stroke-width="2"
                            >
                              <path d="M3 6h18" />
                              <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
                              <rect x="5" y="6" width="14" height="16" rx="1" />
                            </svg>
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
              </tbody>
            </table>
          </div>
        )}
    </div>
  );
}