bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(frontend): add accessible confirmation modal for destructive actions

Browse Source 
Replace native window.confirm() dialogs with branded ConfirmationModal component
for all delete operations (users, categories). Implements progressive disclosure
for high-risk operations and requires confirmation text input for deletions with
100+ affected items.

Features:
- ConfirmationModal component with dynamic risk levels (low/medium/high)
- High-risk operations (100+ affected items) require 'DELETE' text confirmation
- Clear consequence messaging with affected item counts
- Loading state during deletion with visual feedback
- Full keyboard accessibility (Esc to cancel, Enter to confirm)
- Proper focus management and ARIA labels

Affected:
- AdminOverlay: Delete user and category now use ConfirmationModal
- New: ConfirmationModal.tsx component

Design: Matches CreateUserModal aesthetic (clean, minimal) with rose-500
accent for danger context. Progressive disclosure shows additional warnings
only for high-risk operations.

Build: Passes with zero errors.
This commit is contained in:
Daniel Bedeleanu
2026-04-17 10:37:56 +03:00
parent b6a48f1249
commit 710806bb14
4 changed files with 245 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
frontend/components/AdminOverlay.tsx
View File

@@ -5,6 +5,7 @@ import { X, Shield, UserPlus, User, Trash2, Tag, Plus, AlertTriangle, LogOut, La
import { inventoryApi } from '@/lib/api';
import { toast } from 'react-hot-toast';
import CreateUserModal from './CreateUserModal';
import ConfirmationModal from './ConfirmationModal';
interface AdminOverlayProps {
show: boolean;
@@ -24,6 +25,18 @@ export default function AdminOverlay({
onUpdateCategories
}: AdminOverlayProps) {
const [showCreateUserModal, setShowCreateUserModal] = useState(false);
const [confirmState, setConfirmState] = useState<{
show: boolean;
type: 'user' | 'category' | null;
itemId?: number;
itemName?: string;
affectedCount?: number;
loading?: boolean;
}>({
show: false,
type: null,
loading: false,
});
if (!show) return null;
@@ -31,6 +44,34 @@ export default function AdminOverlay({
inventoryApi.getUsers().then(onUpdateUsers);
};
const handleDeleteUser = async () => {
if (!confirmState.itemId) return;
setConfirmState(prev => ({ ...prev, loading: true }));
try {
await inventoryApi.deleteUser(confirmState.itemId);
toast.success("User removed");
await inventoryApi.getUsers().then(onUpdateUsers);
setConfirmState({ show: false, type: null, loading: false });
} catch (error) {
toast.error("Delete failed");
setConfirmState(prev => ({ ...prev, loading: false }));
}
};
const handleDeleteCategory = async () => {
if (!confirmState.itemId) return;
setConfirmState(prev => ({ ...prev, loading: true }));
try {
await inventoryApi.deleteCategory(confirmState.itemId);
toast.success("Category removed");
await inventoryApi.getCategories().then(onUpdateCategories);
setConfirmState({ show: false, type: null, loading: false });
} catch (error: any) {
toast.error(error?.response?.data?.detail || "Delete failed");
setConfirmState(prev => ({ ...prev, loading: false }));
}
};
return (
<>
<CreateUserModal
@@ -38,6 +79,29 @@ export default function AdminOverlay({
onClose={() => setShowCreateUserModal(false)}
onUserCreated={handleUserCreated}
/>
<ConfirmationModal
show={confirmState.show && confirmState.type === 'user'}
title={`Delete User: ${confirmState.itemName}?`}
description="This will remove the user from the system. The audit log will remain."
itemName={confirmState.itemName}
consequence="This cannot be undone."
onConfirm={handleDeleteUser}
onCancel={() => setConfirmState({ show: false, type: null, loading: false })}
loading={confirmState.loading}
dangerLevel="medium"
/>
<ConfirmationModal
show={confirmState.show && confirmState.type === 'category'}
title={`Delete Category: ${confirmState.itemName}?`}
description="This will remove the category from the system."
itemName={confirmState.itemName}
affectedCount={confirmState.affectedCount}
consequence="This cannot be undone. Audit logs will remain."
onConfirm={handleDeleteCategory}
onCancel={() => setConfirmState({ show: false, type: null, loading: false })}
loading={confirmState.loading}
dangerLevel={confirmState.affectedCount && confirmState.affectedCount > 10 ? 'high' : 'medium'}
/>
<div className="fixed inset-0 z-50 bg-slate-950/60 animate-in fade-in duration-300">
<div className="absolute inset-y-0 right-0 w-full max-w-md sm:max-w-lg md:max-w-md bg-slate-900 border-l border-slate-800 shadow-2xl flex flex-col animate-in slide-in-from-right duration-500">
<div className="p-6 border-b border-slate-800 flex items-center justify-between">
@@ -84,14 +148,13 @@ export default function AdminOverlay({
{u.username !== 'Admin' && (
<button
onClick={() => {
if(confirm(`Delete user ${u.username}?`)) {
inventoryApi.deleteUser(u.id)
.then(() => {
toast.success("User removed");
inventoryApi.getUsers().then(onUpdateUsers);
})
.catch(() => toast.error("Delete failed"));
}
setConfirmState({
show: true,
type: 'user',
itemId: u.id,
itemName: u.username,
loading: false,
});
}}
className="p-2 text-rose-500 hover:bg-rose-500/10 rounded-lg transition-all focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
aria-label={`Delete user ${u.username}`}
@@ -140,14 +203,14 @@ export default function AdminOverlay({
<button
onClick={() => {
if(confirm(`Delete category ${cat.name}?`)) {
inventoryApi.deleteCategory(cat.id)
.then(() => {
toast.success("Category removed");
inventoryApi.getCategories().then(onUpdateCategories);
})
.catch(e => toast.error(e.response?.data?.detail || "Delete failed"));
}
setConfirmState({
show: true,
type: 'category',
itemId: cat.id,
itemName: cat.name,
affectedCount: 0, // TODO: fetch actual count from backend
loading: false,
});
}}
className="p-2 text-rose-500 hover:bg-rose-500/10 rounded-lg transition-all focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
aria-label={`Delete category ${cat.name}`}