renaud/espace-paie-odentas
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Ajouter la copie en un clic pour SIRET et AEM sans ouvrir le détail

Browse source
This commit is contained in:
odentas 2025-11-14 12:40:32 +01:00
parent 7b9a4ef6cc
commit fc93866d82
1 changed files with 44 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
app/(app)/staff/clients/page.tsx
View file

@ -4,7 +4,7 @@ import { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { useQuery } from "@tanstack/react-query";
import { ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
import { ArrowUpDown, ArrowUp, ArrowDown, Copy, Check } from "lucide-react";
type Client = {
id: string;
@ -32,6 +32,7 @@ export default function StaffClientsPage() {
const [searchQuery, setSearchQuery] = useState("");
const [sortField, setSortField] = useState<SortField>("name");
const [sortOrder, setSortOrder] = useState<SortOrder>("asc");
const [copiedField, setCopiedField] = useState<string | null>(null);
// Récupération des clients
const { data: clients = [], isLoading, error } = useQuery<Client[]>({
@ -48,6 +49,16 @@ export default function StaffClientsPage() {
},
});
// Fonction de copie
const handleCopy = (text: string, fieldId: string, e: React.MouseEvent) => {
e.stopPropagation(); // Empêcher l'ouverture du détail
if (text && text !== "—") {
navigator.clipboard.writeText(text);
setCopiedField(fieldId);
setTimeout(() => setCopiedField(null), 2000);
}
};
// Fonction de tri
const handleSort = (field: SortField) => {
if (sortField === field) {
@ -157,8 +168,38 @@ export default function StaffClientsPage() {
<td className="px-4 py-2">{client.code_employeur || "—"}</td>
<td className="px-4 py-2 font-medium">{client.name}</td>
<td className="px-4 py-2">{formatDate(client.entree_en_relation)}</td>
<td className="px-4 py-2">{client.siret || "—"}</td>
<td className="px-4 py-2">{client.agrement_aem || "—"}</td>
<td
className="px-4 py-2 cursor-pointer hover:bg-slate-100 group relative"
onClick={(e) => handleCopy(client.siret || "", `siret-${client.id}`, e)}
title="Cliquer pour copier"
>
<div className="flex items-center gap-2">
<span>{client.siret || "—"}</span>
{client.siret && (
copiedField === `siret-${client.id}` ? (
<Check className="w-3 h-3 text-green-600" />
) : (
<Copy className="w-3 h-3 text-slate-400 opacity-0 group-hover:opacity-100 transition-opacity" />
)
)}
</div>
</td>
<td
className="px-4 py-2 cursor-pointer hover:bg-slate-100 group relative"
onClick={(e) => handleCopy(client.agrement_aem || "", `aem-${client.id}`, e)}
title="Cliquer pour copier"
>
<div className="flex items-center gap-2">
<span>{client.agrement_aem || "—"}</span>
{client.agrement_aem && (
copiedField === `aem-${client.id}` ? (
<Check className="w-3 h-3 text-green-600" />
) : (
<Copy className="w-3 h-3 text-slate-400 opacity-0 group-hover:opacity-100 transition-opacity" />
)
)}
</div>
</td>
</tr>
))
) : (