Skip to content

feat: add details modals for users, clinics and audit logs #264

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
johanbriger merged 5 commits into from
Apr 24, 2026
Merged

feat: add details modals for users, clinics and audit logs #264

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
aff08f9
feat: add details modals for users, clinics and audit logs
johanbriger Apr 24, 2026
4901546
refactor: move LogDetailsModal to standalone component
johanbriger Apr 24, 2026
f4059cd
feat(admin): improve accessibility and UX for ClinicDetailsModal
johanbriger Apr 24, 2026
1bc4bb9
accessibility: add a11y semantics and escape key support to LogDetail…
johanbriger Apr 24, 2026
eefc8e7
fix: resolve race conditions and add dialog semantics to UserDetailsM…
johanbriger Apr 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 66 additions & 101 deletions frontend/src/components/admin/AuditLogView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { useState, useMemo } from 'react';
import LogDetailsModal from './LogDetailsModal'; // Importeras nu som den enda källan till sanning
import {
FilePlus,
RefreshCw,
Expand All @@ -9,17 +10,28 @@ import {
AlertCircle,
Search,
MapPin,
ShieldCheck
X,
Activity,
Hash
} from 'lucide-react';

// --- HUVUDKOMPONENT ---
const AuditLogView = ({ logs = [], loading }) => {
// 1. States för filtrering
const [searchTerm, setSearchTerm] = useState('');
const [roleFilter, setRoleFilter] = useState('ALL');
const [actionFilter, setActionFilter] = useState('ALL');
const [clinicFilter, setClinicFilter] = useState('ALL');
const [dateFilter, setDateFilter] = useState('');

// States för modal
const [selectedLog, setSelectedLog] = useState(null);
const [isModalOpen, setIsModalOpen] = useState(false);

const openLogDetails = (log) => {
setSelectedLog(log);
setIsModalOpen(true);
};

const clinics = useMemo(() => {
const uniqueClinics = [...new Set(logs.map(log => log.clinicName))].filter(Boolean);
return uniqueClinics.sort();
Expand All @@ -30,12 +42,12 @@ const AuditLogView = ({ logs = [], loading }) => {
case 'CASE_CREATED': return { icon: <FilePlus size={16} />, color: 'text-emerald-500', bg: 'bg-emerald-50' };
case 'STATUS_CHANGED': return { icon: <RefreshCw size={16} />, color: 'text-blue-500', bg: 'bg-blue-50' };
case 'COMMENT_ADDED': return { icon: <MessageSquare size={16} />, color: 'text-purple-500', bg: 'bg-purple-50' };
case 'USER_REGISTERED': return { icon: <UserPlus size={16} />, color: 'text-orange-500', bg: 'bg-orange-50' };
case 'ASSIGNED': return { icon: <UserPlus size={16} />, color: 'text-orange-500', bg: 'bg-orange-50' };
default: return { icon: <AlertCircle size={16} />, color: 'text-slate-500', bg: 'bg-slate-50' };
}
};


const filteredLogs = useMemo(() => {
return logs.filter(log => {
const searchLower = searchTerm.toLowerCase();
Expand All @@ -61,159 +73,105 @@ const AuditLogView = ({ logs = [], loading }) => {

return (
<div className="space-y-0">
{/* --- ADMIN FILTER PANEL --- */}
<div className="p-6 bg-slate-50 border-b border-slate-200 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 items-end">
<div className="lg:col-span-1">
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 ml-1">Sök (Namn/ID/Klinik/Patient)</label>
{/* FILTER PANEL */}
<div className="p-6 bg-slate-50 border-b border-slate-200 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 items-end text-left">
<div>
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 ml-1">Sök</label>
<div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={14} />
<input
type="text"
className="w-full pl-10 pr-4 py-2 bg-white border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-[#003f5a] outline-none transition-all"
placeholder="Sök i loggar..."
placeholder="Sök..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
</div>

<div>
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 ml-1">Händelsetyp</label>
<select
value={actionFilter}
onChange={(e) => setActionFilter(e.target.value)}
className="w-full bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs font-bold outline-none focus:ring-2 focus:ring-[#003f5a]"
>
<option value="ALL">ALLA HÄNDELSER</option>
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 ml-1">Händelse</label>
<select value={actionFilter} onChange={(e) => setActionFilter(e.target.value)} className="w-full bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs font-bold outline-none">
<option value="ALL">ALLA</option>
<option value="CASE_CREATED">NYA ÄRENDEN</option>
<option value="STATUS_CHANGED">STATUSÄNDRINGAR</option>
<option value="STATUS_CHANGED">STATUS</option>
<option value="COMMENT_ADDED">KOMMENTARER</option>
<option value="ASSIGNED">TILLDELNINGAR</option>
<option value="ASSIGNED">TILLDELNING</option>
</select>
</div>

<div>
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 ml-1">Användarroll</label>
<select
value={roleFilter}
onChange={(e) => setRoleFilter(e.target.value)}
className="w-full bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs font-bold outline-none focus:ring-2 focus:ring-[#003f5a]"
>
<option value="ALL">ALLA ROLLER</option>
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 ml-1">Roll</label>
<select value={roleFilter} onChange={(e) => setRoleFilter(e.target.value)} className="w-full bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs font-bold outline-none">
<option value="ALL">ALLA</option>
<option value="VET">VETERINÄR</option>
<option value="OWNER">DJURÄGARE</option>
<option value="ADMIN">ADMINISTRATÖR</option>
<option value="OWNER">ÄGARE</option>
<option value="ADMIN">ADMIN</option>
</select>
</div>

<div>
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 ml-1">Klinik</label>
<select
value={clinicFilter}
onChange={(e) => setClinicFilter(e.target.value)}
className="w-full bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs font-bold outline-none focus:ring-2 focus:ring-[#003f5a]"
>
<option value="ALL">ALLA KLINIKER</option>
{clinics.map(name => (
<option key={name} value={name}>{name.toUpperCase()}</option>
))}
<select value={clinicFilter} onChange={(e) => setClinicFilter(e.target.value)} className="w-full bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs font-bold outline-none">
<option value="ALL">ALLA</option>
{clinics.map(name => <option key={name} value={name}>{name.toUpperCase()}</option>)}
</select>
</div>

<div>
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 ml-1">Datum</label>
<div className="relative">
<input
type="date"
value={dateFilter}
onChange={(e) => setDateFilter(e.target.value)}
className="w-full bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs font-bold outline-none focus:ring-2 focus:ring-[#003f5a] text-slate-600"
/>
</div>
<input type="date" value={dateFilter} onChange={(e) => setDateFilter(e.target.value)} className="w-full bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs font-bold outline-none text-slate-600" />
</div>
</div>

{/* --- LOG LIST --- */}
{/* LOG LIST */}
<div className="p-8 pt-6">
{filteredLogs.length === 0 ? (
<div className="p-20 text-center">
<Clock className="mx-auto text-slate-200 mb-4" size={48} />
<p className="text-slate-400 font-bold italic uppercase tracking-widest text-xs">Inga loggar matchar administratörens filter</p>
<p className="text-slate-400 font-bold italic uppercase tracking-widest text-xs">Inga loggar matchar filter</p>
</div>
) : (
<div className="space-y-2">
<div className="space-y-2 text-left">
{filteredLogs.map((log) => {
const style = getActionStyle(log.action);
const date = new Date(log.createdAt).toLocaleString('sv-SE', {
month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit'
const dateStr = new Date(log.createdAt).toLocaleString('sv-SE', {
month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit'
});

return (
<div key={log.id} className="relative flex gap-6 group border-b border-slate-50 last:border-0">
<div className="absolute left-6 top-10 bottom-[-8px] w-px bg-slate-100 group-last:hidden" />

<div
key={log.id}
onClick={() => openLogDetails(log)}
className="relative flex gap-6 group border-b border-slate-50 last:border-0 cursor-pointer hover:bg-slate-50/80 p-2 rounded-2xl transition-all"
>
Comment on lines +139 to +143

@coderabbitai coderabbitai Bot Apr 24, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Clickable row is not keyboard-accessible.

Opening log details requires a mouse — the <div> has onClick but no role="button", tabIndex={0}, or onKeyDown handler, so users relying on keyboard/AT can’t reach the details view. Either add those attributes or render the row as a <button type="button"> with the current styling.

♻️ Proposed fix 
                                 <div
                                     key={log.id}
+                                    role="button"
+                                    tabIndex={0}
                                     onClick={() => openLogDetails(log)}
+                                    onKeyDown={(e) => {
+                                        if (e.key === 'Enter' || e.key === ' ') {
+                                            e.preventDefault();
+                                            openLogDetails(log);
+                                        }
+                                    }}
                                     className="relative flex gap-6 group border-b border-slate-50 last:border-0 cursor-pointer hover:bg-slate-50/80 p-2 rounded-2xl transition-all"
                                 >
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/components/admin/AuditLogView.jsx` around lines 236 - 240, The
row div that calls openLogDetails(log) is not keyboard-accessible; change it so
keyboard and AT users can activate it by either replacing the div with a <button
type="button"> that keeps the same className/styling, or add accessibility
attributes and handlers to the existing div: add role="button", tabIndex={0},
and an onKeyDown handler that calls openLogDetails(log) when Enter or Space is
pressed (and include an appropriate aria-label or ensure accessible text).
Update the element where openLogDetails is referenced to implement one of these
fixes so the row is reachable and activatable by keyboard.

<div className="absolute left-8 top-12 bottom-[-8px] w-px bg-slate-100 group-last:hidden" />
<div className={`relative z-10 w-12 h-12 rounded-2xl ${style.bg} ${style.color} flex items-center justify-center shadow-sm border border-white shrink-0`}>
{style.icon}
</div>

<div className="flex-1 pb-6">
<div className="flex-1 pb-6 pt-2">
<div className="flex justify-between items-start mb-1">
<div className="flex items-center gap-3">
<h4 className="font-black text-slate-900 italic tracking-tight uppercase text-sm">
{log.action.replace('_', ' ')}
</h4>
{/* Roll-tagg */}
<span className={`text-[9px] font-black px-2 py-0.5 rounded-md border ${
log.performedByRole === 'ROLE_VET' || log.performedByRole === 'VET'
? 'bg-blue-50 text-blue-600 border-blue-100' :
log.performedByRole === 'ROLE_ADMIN' || log.performedByRole === 'ADMIN'
? 'bg-red-50 text-red-600 border-red-100' :
log.performedByRole === 'ROLE_OWNER' || log.performedByRole === 'OWNER'
? 'bg-emerald-50 text-emerald-600 border-emerald-100' : // Grön för ägare
'bg-slate-100 text-slate-600 border-slate-200' // Grå fallback
log.performedByRole?.includes('VET') ? 'bg-blue-50 text-blue-600 border-blue-100' :
log.performedByRole?.includes('ADMIN') ? 'bg-red-50 text-red-600 border-red-100' :
'bg-emerald-50 text-emerald-600 border-emerald-100'
}`}>

{log.performedByRole?.replace('ROLE_', '') ?? 'SYSTEM'}
</span>
{log.performedByRole?.replace('ROLE_', '')}
</span>
</div>
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest bg-white px-2">
{date}
</span>
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{dateStr}</span>
</div>

<p className="text-slate-600 text-sm font-medium mb-3">{log.description}</p>

<p className="text-slate-600 text-sm font-medium mb-3 truncate max-w-2xl">{log.description}</p>
<div className="flex flex-wrap items-center gap-3">
{/* Utförare */}
<div className="flex items-center gap-1.5 px-3 py-1 bg-white rounded-lg border border-slate-200 shadow-sm">
<UserIcon size={10} className="text-slate-400" />
<span className="text-[10px] font-black text-slate-700 uppercase italic">
{log.performedByName}
</span>
</div>
{/* DJURETS NAMN (NYTT) */}
<div className="flex items-center gap-1.5 px-3 py-1 bg-amber-50 rounded-lg border border-amber-100 shadow-sm">
<span className="text-[9px] font-bold text-amber-600 uppercase">Patient:</span>
<span className="text-[10px] font-black text-amber-700 uppercase italic">
{log.petName}
</span>
</div>

{/* Klinik */}
<div className="flex items-center gap-1.5 px-3 py-1 bg-white rounded-lg border border-slate-200 shadow-sm">
<MapPin size={10} className="text-slate-400" />
<span className="text-[10px] font-black text-slate-700 uppercase italic">
{log.clinicName || 'System'}
</span>
</div>

{/* Ärende-ID */}
<div className="flex items-center gap-1.5 px-2 py-1">
<span className="text-[9px] font-bold text-slate-300 uppercase">Ref:</span>
<span className="text-[10px] text-slate-400 font-mono font-bold tracking-tighter">
{log.recordId}
</span>
<span className="text-[10px] font-black text-slate-700 uppercase italic">{log.performedByName}</span>
</div>
{log.petName && (
<div className="flex items-center gap-1.5 px-3 py-1 bg-amber-50 rounded-lg border border-amber-100 shadow-sm">
<span className="text-[10px] font-black text-amber-700 uppercase italic">Patient: {log.petName}</span>
</div>
)}
</div>
</div>
</div>
Expand All @@ -222,6 +180,13 @@ const AuditLogView = ({ logs = [], loading }) => {
</div>
)}
</div>

{/* MODAL RENDER - Använder nu den importerade komponenten */}
<LogDetailsModal
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
log={selectedLog}
/>
</div>
);
};
Expand Down
Loading