Projets/Imago
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ajout images:delete dans scopes, édition client dans ClientDetail
CI / Lint & Format (push) Failing after 8s
Details
CI / Tests (push) Has been skipped
Details
CI / Security Scan (push) Failing after 8s
Details
CI / Docker Build (push) Has been skipped
Details

Browse Source
This commit is contained in:
bruno
2026-06-23 15:55:07 -04:00
parent 8e9c600aa3
commit a8eeb6394a
2 changed files with 102 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
imago-admin/src/pages/admin/ClientDetail.tsx
+101 -3
View File
@@ -1,18 +1,49 @@
import { useState } from 'react';
import { useParams, Link } from 'react-router-dom';
import { PageLayout } from '@/components/layout/PageLayout';
import { PlanBadge } from '@/components/shared/PlanBadge';
import { QuotaBar } from '@/components/shared/QuotaBar';
import { StatusBadge } from '@/components/shared/StatusBadge';
import { CardSkeleton } from '@/components/shared/Skeleton';
import { useClient } from '@/hooks/useClients';
import { toast } from '@/components/shared/Toast';
import { useClient, useUpdateClient } from '@/hooks/useClients';
import { useImages } from '@/hooks/useImages';
import { formatDate, formatTokens, formatMB } from '@/utils/formatters';
import { ArrowLeft, Images, ExternalLink } from 'lucide-react';
import { PLANS, SCOPES } from '@/utils/constants';
import { ArrowLeft, Images, ExternalLink, Edit3, X, Loader2, Save } from 'lucide-react';
import type { Plan, APIClientUpdate } from '@/types/api.types';
export default function ClientDetail() {
const { id } = useParams<{ id: string }>();
const { data: client, isLoading } = useClient(id);
const { data: clientImages } = useImages({ client_id: id, page_size: 20, sort_order: 'desc' });
const updateClientMut = useUpdateClient();
const [showEdit, setShowEdit] = useState(false);
const [editScopes, setEditScopes] = useState<string[]>([]);
const [editPlan, setEditPlan] = useState<Plan>('free');
const openEdit = () => {
if (!client) return;
setEditScopes([...client.scopes]);
setEditPlan(client.plan);
setShowEdit(true);
};
const handleSave = async () => {
if (!client) return;
const data: APIClientUpdate = {
scopes: editScopes,
plan: editPlan,
};
try {
await updateClientMut.mutateAsync({ id: client.id, data });
toast('success', 'Client mis à jour');
setShowEdit(false);
} catch {
toast('error', 'Erreur lors de la mise à jour');
}
};
if (isLoading) {
return (
@@ -46,6 +77,9 @@ export default function ClientDetail() {
<span className={`badge ${client.is_active ? 'bg-status-ok/20 text-status-ok' : 'bg-content-muted/20 text-content-muted'}`}>
{client.is_active ? 'Actif' : 'Inactif'}
</span>
<button onClick={openEdit} className="btn-ghost text-sm flex items-center gap-1 text-brand-400 hover:text-brand-300">
<Edit3 size={14} /> Éditer
</button>
<Link to="/admin/clients" className="btn-ghost text-sm flex items-center gap-1">
<ArrowLeft size={14} /> Retour
</Link>
@@ -82,7 +116,12 @@ export default function ClientDetail() {
{/* Scopes */}
<div className="card mb-8">
<h3 className="text-sm font-semibold text-content-secondary mb-3">Scopes accordés</h3>
<div className="flex items-center justify-between mb-3">
<h3 className="text-sm font-semibold text-content-secondary">Scopes accordés</h3>
<button onClick={openEdit} className="text-xs text-brand-400 hover:text-brand-300 flex items-center gap-1">
<Edit3 size={12} /> Modifier
</button>
</div>
<div className="flex flex-wrap gap-2">
{client.scopes.map((scope) => (
<span key={scope} className="badge bg-brand-500/10 text-brand-400 font-mono text-xs">
@@ -137,6 +176,65 @@ export default function ClientDetail() {
</div>
)}
</div>
{/* Edit modal */}
{showEdit && (
<div className="fixed inset-0 z-50 flex justify-end">
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setShowEdit(false)} />
<div className="relative w-full max-w-md bg-surface-raised border-l border-border h-full overflow-y-auto animate-slide-in">
<div className="sticky top-0 bg-surface-raised border-b border-border p-4 flex items-center justify-between">
<h2 className="text-lg font-semibold">Éditer {client.name}</h2>
<button onClick={() => setShowEdit(false)} className="p-1 rounded hover:bg-surface-overlay text-content-muted">
<X size={18} />
</button>
</div>
<div className="p-6 space-y-5">
<div>
<label className="block text-sm font-medium text-content-secondary mb-1">Plan</label>
<select
value={editPlan}
onChange={(e) => setEditPlan(e.target.value as Plan)}
className="input-field w-full"
>
<option value="free">Free</option>
<option value="standard">Standard</option>
<option value="premium">Premium</option>
</select>
<p className="text-xs text-content-muted mt-1">
{PLANS[editPlan].images === Infinity ? '∞' : PLANS[editPlan].images} images · {formatMB(PLANS[editPlan].storageMb)} · {formatTokens(PLANS[editPlan].aiTokens)} tokens
</p>
</div>
<div>
<label className="block text-sm font-medium text-content-secondary mb-1">Scopes</label>
<div className="space-y-2">
{SCOPES.map((scope) => (
<label key={scope} className="flex items-center gap-2 cursor-pointer">
<input
type="checkbox"
checked={editScopes.includes(scope)}
onChange={(e) => {
if (e.target.checked) setEditScopes([...editScopes, scope]);
else setEditScopes(editScopes.filter((s) => s !== scope));
}}
className="rounded border-border bg-surface text-brand-500 focus:ring-brand-500"
/>
<span className="text-sm text-content-secondary font-mono">{scope}</span>
</label>
))}
</div>
</div>
<button
onClick={handleSave}
disabled={updateClientMut.isPending}
className="btn-primary w-full flex items-center justify-center gap-2"
>
{updateClientMut.isPending ? <Loader2 size={16} className="animate-spin" /> : <Save size={16} />}
Enregistrer
</button>
</div>
</div>
</div>
)}
</PageLayout>
);
}
imago-admin/src/utils/constants.ts
+1
View File
@@ -48,6 +48,7 @@ export const PLANS = {
export const SCOPES = [
'images:read',
'images:write',
'images:delete',
'ai:use',
'admin',
] as const;