@omniradiology/omnirad 0.1.3

package/components/layout/Sidebar.tsx

@@ -0,0 +1,119 @@
+"use client"
+
+import Image from 'next/image';
+import { FileText, LayoutDashboard, Settings, User, Users, Clock, LogOut, Server, MessageSquare } from 'lucide-react';
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+
+export function Sidebar() {
+  const pathname = usePathname();
+  const router = useRouter();
+
+  return (
+    <aside className="fixed left-0 top-0 h-screen w-20 bg-bg-surface border-r border-border-primary flex flex-col items-center py-6 z-50 shadow-[4px_0_24px_-12px_rgba(0,0,0,0.1)]">
+      <div className="mb-8 relative w-16 h-16">
+        <Image
+          src="/logo.svg"
+          alt="OmniRad Logo"
+          fill
+          className="object-contain"
+          priority
+        />
+      </div>
+
+      <nav className="flex-1 flex flex-col gap-3 w-full px-3">
+        <NavItem
+          href="/"
+          icon={LayoutDashboard}
+          label="Dashboard"
+          isActive={pathname === '/'}
+        />
+        <NavItem
+          href="/patients"
+          icon={Users}
+          label="Patients"
+          isActive={pathname.startsWith('/patients')}
+        />
+        <NavItem
+          href="/reports"
+          icon={FileText}
+          label="Reports"
+          isActive={pathname.startsWith('/reports')}
+        />
+        <NavItem
+          href="/history"
+          icon={Clock}
+          label="History"
+          isActive={pathname.startsWith('/history')}
+        />
+        <NavItem
+          href="/pacs"
+          icon={Server}
+          label="PACS Browser"
+          isActive={pathname.startsWith('/pacs')}
+        />
+        <NavItem
+          href="/copilot"
+          icon={MessageSquare}
+          label="AI Copilot"
+          isActive={pathname.startsWith('/copilot')}
+        />
+        <div className="flex-1" /> {/* Spacer */}
+        <NavItem
+          href="/settings"
+          icon={Settings}
+          label="Settings"
+          isActive={pathname.startsWith('/settings')}
+        />
+        <NavItem
+          href="/profile"
+          icon={User}
+          label="Profile"
+          isActive={pathname.startsWith('/profile')}
+        />
+      </nav>
+
+      <div className="mt-4 pb-4 px-3 w-full">
+        <button
+          onClick={async () => {
+            await fetch('/api/auth/logout', { method: 'POST' });
+            router.push('/login');
+          }}
+          className="relative group flex w-full items-center justify-center p-3 rounded-xl transition-all duration-300 ease-out text-text-muted hover:bg-red-500/10 hover:text-red-500 hover:scale-105"
+          title="Logout"
+        >
+          <LogOut size={22} className="transition-transform duration-300 group-hover:stroke-[2.5px]" />
+          <span className="absolute left-16 bg-slate-900 text-white text-xs font-medium px-3 py-1.5 rounded-lg opacity-0 translate-x-[-10px] group-hover:opacity-100 group-hover:translate-x-0 pointer-events-none transition-all duration-200 shadow-xl z-50 whitespace-nowrap">
+            Logout
+            <span className="absolute left-[-4px] top-1/2 -translate-y-1/2 w-2 h-2 bg-slate-900 rotate-45"></span>
+          </span>
+        </button>
+      </div>
+    </aside>
+  );
+}
+
+function NavItem({ href, icon: Icon, label, isActive }: { href: string; icon: any; label: string; isActive?: boolean }) {
+  return (
+    <Link
+      href={href}
+      className={`
+        relative group flex items-center justify-center p-3 rounded-xl transition-all duration-300 ease-out
+        ${isActive
+          ? 'bg-primary text-white shadow-md shadow-primary/25 scale-105'
+          : 'text-text-muted hover:bg-primary/10 hover:text-primary hover:scale-105'
+        }
+      `}
+      title={label}
+    >
+      <Icon size={22} className={`transition-transform duration-300 ${isActive ? 'stroke-[2.5px]' : 'group-hover:stroke-[2.5px]'}`} />
+
+      {/* Tooltip Label */}
+      <span className="absolute left-16 bg-slate-900 text-white text-xs font-medium px-3 py-1.5 rounded-lg opacity-0 translate-x-[-10px] group-hover:opacity-100 group-hover:translate-x-0 pointer-events-none transition-all duration-200 shadow-xl z-50 whitespace-nowrap">
+        {label}
+        {/* Little arrow pointing left */}
+        <span className="absolute left-[-4px] top-1/2 -translate-y-1/2 w-2 h-2 bg-slate-900 rotate-45"></span>
+      </span>
+    </Link>
+  );
+}

package/components/pacs/PacsImageViewerModal.tsx

@@ -0,0 +1,121 @@
+import React, { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { ImageViewer } from "@/components/dashboard/ImageViewer";
+import { Loader2, X } from "lucide-react";
+import { fetchRenderedJpegUrl } from "@/lib/pacs/dicomweb";
+
+interface PacsImageViewerModalProps {
+    studyUid: string;
+    seriesUid: string;
+    onClose: () => void;
+}
+
+export function PacsImageViewerModal({ studyUid, seriesUid, onClose }: PacsImageViewerModalProps) {
+    const [images, setImages] = useState<string[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        let isMounted = true;
+        const loadImages = async () => {
+            setIsLoading(true);
+            try {
+                // Fetch instances for this series
+                const instancesRes = await fetch(`/api/pacs/qido/instances?studyUid=${studyUid}&seriesUid=${seriesUid}`);
+                if (!instancesRes.ok) throw new Error("Failed to fetch instances");
+                const instancesData = await instancesRes.json();
+                
+                if (instancesData && instancesData.length > 0) {
+                    // Build a list of all (instanceUid, frameNumber) pairs
+                    // Multi-frame DICOM files have NumberOfFrames (0028,0008) > 1
+                    const frameRequests: { uid: string; frame?: number }[] = [];
+                    
+                    for (const inst of instancesData) {
+                        const uid = inst["00080018"]?.Value?.[0];
+                        if (!uid) continue;
+                        
+                        const numFrames = parseInt(inst["00280008"]?.Value?.[0] || "1", 10);
+                        
+                        if (numFrames > 1) {
+                            // Multi-frame instance: fetch each frame individually (1-indexed)
+                            for (let f = 1; f <= numFrames; f++) {
+                                frameRequests.push({ uid, frame: f });
+                            }
+                        } else {
+                            // Single-frame instance
+                            frameRequests.push({ uid });
+                        }
+                    }
+                    
+                    // Fetch rendered JPEGs for all frames
+                    const urls = await Promise.all(frameRequests.map(async (req) => {
+                        try {
+                            return await fetchRenderedJpegUrl(studyUid, seriesUid, req.uid, req.frame);
+                        } catch(e) {
+                            return null;
+                        }
+                    }));
+                    
+                    if (isMounted) {
+                        setImages(urls.filter(Boolean) as string[]);
+                    }
+                } else {
+                    if (isMounted) setError("No images found in this series.");
+                }
+            } catch (err: any) {
+                if (isMounted) setError(err.message || "Failed to load sequence.");
+            } finally {
+                if (isMounted) setIsLoading(false);
+            }
+        };
+        loadImages();
+        
+        return () => { isMounted = false; };
+    }, [studyUid, seriesUid]);
+
+    // Force ESC key to close modal entirely
+    useEffect(() => {
+        const onKey = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') onClose();
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [onClose]);
+
+    if (isLoading) {
+        return createPortal(
+            <div className="fixed inset-0 z-[9999] bg-black flex flex-col items-center justify-center">
+                <Loader2 className="w-10 h-10 animate-spin mb-4 text-primary" />
+                <p>Loading frames from PACS...</p>
+            </div>,
+            document.body
+        );
+    }
+
+    if (error) {
+        return createPortal(
+            <div className="fixed inset-0 z-[9999] bg-black flex flex-col items-center justify-center">
+                <div className="text-red-500 text-center">
+                    <p className="mb-4">{error}</p>
+                    <button onClick={onClose} className="px-4 py-2 border border-red-500/50 rounded hover:bg-red-500/10 text-white">Back</button>
+                </div>
+            </div>,
+            document.body
+        );
+    }
+
+    if (images.length > 0) {
+        return (
+            <ImageViewer 
+                images={images} 
+                isCollapsed={false} 
+                onToggleCollapse={() => {}} 
+                forceFullscreen={true}
+                onCloseFullscreen={onClose}
+                className="hidden" // hide the inline embedded element, only show the fullscreen portal
+            />
+        );
+    }
+
+    return null;
+}

package/components/pacs/PacsSearchFilters.tsx

@@ -0,0 +1,117 @@
+import React, { useState } from "react";
+import { Input, Label, Button } from "@/components/ui/basic";
+import { Search, RotateCcw } from "lucide-react";
+
+interface PacsSearchFiltersProps {
+    onSearch: (filters: Record<string, string>) => void;
+    isLoading?: boolean;
+}
+
+export function PacsSearchFilters({ onSearch, isLoading = false }: PacsSearchFiltersProps) {
+    const [filters, setFilters] = useState<Record<string, string>>({
+        PatientName: "",
+        PatientID: "",
+        StudyDate: "",
+        Modality: ""
+    });
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+        const { name, value } = e.target;
+        setFilters(prev => ({ ...prev, [name]: value }));
+    };
+
+    const handleApply = () => {
+        // Strip out empty filters before sending request
+        const appliedFilters: Record<string, string> = {};
+        Object.entries(filters).forEach(([key, val]) => {
+            if (val.trim() !== "") {
+                appliedFilters[key] = val;
+            }
+        });
+        onSearch(appliedFilters);
+    };
+
+    const handleClear = () => {
+        setFilters({ PatientName: "", PatientID: "", StudyDate: "", Modality: "" });
+        onSearch({});
+    };
+
+    return (
+        <div className="space-y-6">
+            <div>
+                <Label htmlFor="PatientName">Patient Name</Label>
+                <Input 
+                    type="text" 
+                    id="PatientName" 
+                    name="PatientName"
+                    placeholder="e.g. *Doe*" 
+                    value={filters.PatientName} 
+                    onChange={handleChange} 
+                />
+            </div>
+
+            <div>
+                <Label htmlFor="PatientID">Patient ID</Label>
+                <Input 
+                    type="text" 
+                    id="PatientID" 
+                    name="PatientID"
+                    placeholder="12345" 
+                    value={filters.PatientID} 
+                    onChange={handleChange} 
+                />
+            </div>
+
+            <div>
+                <Label htmlFor="StudyDate">Study Date</Label>
+                <Input 
+                    type="text" 
+                    id="StudyDate" 
+                    name="StudyDate"
+                    placeholder="YYYYMMDD (or empty)" 
+                    value={filters.StudyDate} 
+                    onChange={handleChange} 
+                />
+            </div>
+
+            <div>
+                <Label htmlFor="Modality">Modality</Label>
+                <select
+                    id="Modality"
+                    name="Modality"
+                    value={filters.Modality}
+                    onChange={handleChange}
+                    className="flex h-10 w-full rounded-md border border-border-primary bg-bg-panel px-3 py-2 text-sm text-text-primary mt-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                >
+                    <option value="">Any</option>
+                    <option value="CR">CR - Computed Radiography</option>
+                    <option value="CT">CT - Computed Tomography</option>
+                    <option value="MR">MR - Magnetic Resonance</option>
+                    <option value="US">US - Ultrasound</option>
+                    <option value="DX">DX - Digital Radiography</option>
+                    <option value="PX">PX - Panoramic X-Ray</option>
+                </select>
+            </div>
+
+            <div className="flex gap-3 pt-4 border-t border-border-primary">
+                <Button 
+                    variant="outline" 
+                    className="flex-1" 
+                    onClick={handleClear}
+                    disabled={isLoading}
+                >
+                    <RotateCcw className="w-4 h-4 mr-2" />
+                    Reset
+                </Button>
+                <Button 
+                    className="flex-1" 
+                    onClick={handleApply}
+                    disabled={isLoading}
+                >
+                    <Search className="w-4 h-4 mr-2" />
+                    {isLoading ? "Searching..." : "Search"}
+                </Button>
+            </div>
+        </div>
+    );
+}

package/components/pacs/PacsSeriesViewer.tsx

@@ -0,0 +1,190 @@
+import React, { useEffect, useState } from "react";
+import { searchSeries, fetchRenderedJpegUrl, fetchStudyMetadata } from "@/lib/pacs/dicomweb";
+import { DicomSeries, DicomStudy } from "@/types/pacs";
+import { Loader2, Send, Eye } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/basic";
+import { PacsImageViewerModal } from "./PacsImageViewerModal";
+
+interface PacsSeriesViewerProps {
+    study: DicomStudy;
+}
+
+export function PacsSeriesViewer({ study }: PacsSeriesViewerProps) {
+    const [series, setSeries] = useState<DicomSeries[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [thumbnails, setThumbnails] = useState<Record<string, string>>({});
+    const [seriesImageCounts, setSeriesImageCounts] = useState<Record<string, number>>({});
+    const [isSending, setIsSending] = useState(false);
+    const [viewingSeriesUid, setViewingSeriesUid] = useState<string | null>(null);
+    const router = useRouter();
+
+    useEffect(() => {
+        let isMounted = true;
+        const loadSeries = async () => {
+            try {
+                const data = await searchSeries(study.studyInstanceUid);
+                if (isMounted) setSeries(data);
+
+                // Fetch a thumbnail for each series
+                data.forEach(async (s) => {
+                    if (s.numberOfSeriesRelatedInstances > 0) {
+                        try {
+                            // First get the real instance UIDs
+                            const instancesRes = await fetch(`/api/pacs/qido/instances?studyUid=${study.studyInstanceUid}&seriesUid=${s.seriesInstanceUid}`);
+                            const instancesData = await instancesRes.json();
+                            
+                            let firstInstanceUid = "";
+                            if (instancesData && instancesData.length > 0) {
+                                firstInstanceUid = instancesData[0]["00080018"]?.Value?.[0];
+                            }
+                            
+                            if (firstInstanceUid) {
+                                const url = await fetchRenderedJpegUrl(study.studyInstanceUid, s.seriesInstanceUid, firstInstanceUid);
+                                
+                                // Calculate total frames across all instances
+                                // Multi-frame DICOM files have NumberOfFrames (0028,0008) > 1
+                                let totalFrames = 0;
+                                for (const inst of instancesData) {
+                                    const numFrames = parseInt(inst["00280008"]?.Value?.[0] || "1", 10);
+                                    totalFrames += numFrames;
+                                }
+                                
+                                if (isMounted) {
+                                    setThumbnails(prev => ({ ...prev, [s.seriesInstanceUid]: url }));
+                                    setSeriesImageCounts(prev => ({ ...prev, [s.seriesInstanceUid]: totalFrames }));
+                                }
+                            }
+                        } catch (e) {
+                            console.error("Failed to load thumbnail for series", s.seriesInstanceUid);
+                        }
+                    }
+                });
+            } catch (e) {
+                console.error("Failed to load series for study", study.studyInstanceUid);
+            } finally {
+                if (isMounted) setIsLoading(false);
+            }
+        };
+        loadSeries();
+        return () => { isMounted = false; };
+    }, [study.studyInstanceUid]);
+
+    const handleSendToOmniRad = async (selectedSeries: DicomSeries) => {
+        setIsSending(true);
+        try {
+            // Wait, we need the exact first instance UID of the series to fetch it for the report
+            // So we fetch /instances for this series
+            const instancesRes = await fetch(`/api/pacs/qido/instances?studyUid=${study.studyInstanceUid}&seriesUid=${selectedSeries.seriesInstanceUid}`);
+            const instancesData = await instancesRes.json();
+            
+            let firstInstanceUid = "";
+            if (instancesData && instancesData.length > 0) {
+                firstInstanceUid = instancesData[0]["00080018"]?.Value?.[0]; // SOPInstanceUID
+            }
+
+            if (!firstInstanceUid) throw new Error("Could not find any instances in this series.");
+
+            // Calculate age safely
+            let ageNum = 0;
+            if (study.patientAge) {
+                const parsed = parseInt(study.patientAge.replace(/\D/g, ''), 10);
+                if (!isNaN(parsed)) ageNum = parsed;
+            } else if (study.patientBirthDate && study.patientBirthDate.length >= 8) {
+                const year = parseInt(study.patientBirthDate.substring(0, 4), 10);
+                if (!isNaN(year)) ageNum = new Date().getFullYear() - year;
+            }
+
+            // Combine descriptions for indication (matching exact behavior of local DICOM parser)
+            const descParts = [];
+            if (study.studyDescription && study.studyDescription !== "No Description") descParts.push(study.studyDescription);
+            if (selectedSeries.seriesDescription && selectedSeries.seriesDescription !== "No Description") descParts.push(selectedSeries.seriesDescription);
+
+            // Get metadata
+            const metadata = {
+                patientName: study.patientName,
+                patientId: study.patientId,
+                modality: selectedSeries.modality,
+                studyDate: study.studyDate,
+                indication: descParts.join(' - '),
+                age: ageNum,
+                gender: study.patientSex === 'F' ? 'F' : 'M',
+                pacsStudyUid: study.studyInstanceUid,
+                pacsSeriesUid: selectedSeries.seriesInstanceUid,
+                firstInstanceUid: firstInstanceUid,
+                pacsSource: "Orthanc"
+            };
+
+            // Store this temporarily in localStorage so the report generation form can pick it up
+            localStorage.setItem("omnirad_pending_pacs_import", JSON.stringify(metadata));
+
+            // Navigate to Dashboard Generate Report
+            router.push('/?source=pacs');
+        } catch (e: any) {
+            alert(`Error preparing DICOM study: ${e.message}`);
+        } finally {
+            setIsSending(false);
+        }
+    };
+
+    if (isLoading) {
+        return <div className="p-8 flex items-center justify-center text-text-muted"><Loader2 className="animate-spin w-5 h-5 mr-2"/> Loading series...</div>;
+    }
+
+    if (series.length === 0) {
+        return <div className="p-8 text-center text-text-muted">No series found for this study.</div>;
+    }
+
+    return (
+        <div className="p-4 bg-bg-surface border-t border-border-primary rounded-b-lg">
+            <h4 className="text-sm font-semibold mb-3 text-text-heading border-b border-border-primary pb-2">Series List</h4>
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+                {series.map(s => (
+                    <div key={s.seriesInstanceUid} className="border border-border-card bg-bg-panel rounded-lg overflow-hidden flex flex-col group relative">
+                        <div className="aspect-square bg-slate-900 flex items-center justify-center overflow-hidden">
+                            {thumbnails[s.seriesInstanceUid] ? (
+                                <img src={thumbnails[s.seriesInstanceUid]} alt="Series Thumbnail" className="w-full h-full object-contain" />
+                            ) : (
+                                <span className="text-xs text-slate-500">No Img preview</span>
+                            )}
+                        </div>
+                        <div className="p-3">
+                            <div className="font-semibold text-sm truncate" title={s.seriesDescription}>{s.seriesDescription}</div>
+                            <div className="text-xs text-text-muted mt-1">Modality: {s.modality}</div>
+                            <div className="text-xs text-text-muted">Images: {seriesImageCounts[s.seriesInstanceUid] || s.numberOfSeriesRelatedInstances}</div>
+                        </div>
+
+                        {/* Hover Overlay */}
+                        <div className="absolute inset-0 bg-black/70 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col items-center justify-center p-4 gap-3">
+                            <Button 
+                                size="sm" 
+                                className="w-full bg-emerald-600 hover:bg-emerald-500 text-white gap-2 border-none shadow-lg"
+                                onClick={(e) => { e.stopPropagation(); setViewingSeriesUid(s.seriesInstanceUid); }}
+                                disabled={isSending}
+                            >
+                                <Eye size={14} /> View Slices
+                            </Button>
+                            <Button 
+                                size="sm" 
+                                className="w-full bg-primary-main hover:bg-primary-hover text-white gap-2 border-none shadow-lg"
+                                onClick={(e) => { e.stopPropagation(); handleSendToOmniRad(s); }}
+                                disabled={isSending}
+                            >
+                                <Send size={14} /> Send to AI
+                            </Button>
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            {/* Fullscreen Viewer Modal */}
+            {viewingSeriesUid && (
+                <PacsImageViewerModal 
+                    studyUid={study.studyInstanceUid}
+                    seriesUid={viewingSeriesUid}
+                    onClose={() => setViewingSeriesUid(null)}
+                />
+            )}
+        </div>
+    );
+}

package/components/pacs/PacsStudyTable.tsx

@@ -0,0 +1,113 @@
+import React, { useState } from "react";
+import { DicomStudy } from "@/types/pacs";
+import { ChevronDown, ChevronRight, Loader2, Hospital } from "lucide-react";
+import { PacsSeriesViewer } from "./PacsSeriesViewer";
+
+interface PacsStudyTableProps {
+    studies: DicomStudy[];
+    isLoading: boolean;
+}
+
+export function PacsStudyTable({ studies, isLoading }: PacsStudyTableProps) {
+    const [expandedRows, setExpandedRows] = useState<Record<string, boolean>>({});
+
+    const toggleRow = (uid: string) => {
+        setExpandedRows(prev => ({
+            ...prev,
+            [uid]: !prev[uid]
+        }));
+    };
+
+    if (isLoading) {
+        return (
+            <div className="flex flex-col items-center justify-center py-20 bg-bg-surface/50 rounded-2xl border border-border-primary">
+                <Loader2 className="w-10 h-10 text-primary-main animate-spin" />
+                <p className="mt-4 text-text-secondary font-medium">Querying PACS Server...</p>
+            </div>
+        );
+    }
+
+    if (studies.length === 0) {
+        return (
+            <div className="flex flex-col items-center justify-center py-20 bg-bg-surface/50 rounded-2xl border border-border-primary text-center px-6">
+                <div className="w-16 h-16 rounded-full bg-slate-100 dark:bg-white/5 flex items-center justify-center mb-4">
+                    <Hospital className="w-8 h-8 text-slate-400 dark:text-slate-500" />
+                </div>
+                <h3 className="text-xl font-bold text-text-heading mb-2">No Studies Found</h3>
+                <p className="text-text-secondary max-w-sm">
+                    Enter search criteria on the left to query the PACS server, or ensure your DICOMweb configuration is correct.
+                </p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="rounded-xl border border-border-primary bg-bg-surface overflow-hidden shadow-sm">
+            <div className="overflow-x-auto">
+                <table className="w-full text-sm text-left">
+                    <thead className="text-xs uppercase bg-bg-panel text-text-secondary border-b border-border-primary">
+                        <tr>
+                            <th className="px-4 py-3 w-10"></th>
+                            <th className="px-4 py-3 font-semibold">Patient Name</th>
+                            <th className="px-4 py-3 font-semibold">Patient ID</th>
+                            <th className="px-4 py-3 font-semibold">Study Date</th>
+                            <th className="px-4 py-3 font-semibold">Modality</th>
+                            <th className="px-4 py-3 font-semibold">Description</th>
+                            <th className="px-4 py-3 font-semibold whitespace-nowrap text-right">Series / Instances</th>
+                        </tr>
+                    </thead>
+                    <tbody className="divide-y divide-border-card">
+                        {studies.map((study) => (
+                            <React.Fragment key={study.studyInstanceUid}>
+                                <tr 
+                                    className={`hover:bg-bg-panel/50 transition-colors cursor-pointer ${expandedRows[study.studyInstanceUid] ? 'bg-primary-main/5' : ''}`}
+                                    onClick={() => toggleRow(study.studyInstanceUid)}
+                                >
+                                    <td className="px-4 py-4 text-center">
+                                        <button className="text-text-muted hover:text-text-primary p-1 rounded-md transition-colors">
+                                            {expandedRows[study.studyInstanceUid] ? (
+                                                <ChevronDown size={18} />
+                                            ) : (
+                                                <ChevronRight size={18} />
+                                            )}
+                                        </button>
+                                    </td>
+                                    <td className="px-4 py-4 font-medium text-text-primary">
+                                        {study.patientName}
+                                    </td>
+                                    <td className="px-4 py-4 text-text-secondary">
+                                        {study.patientId}
+                                    </td>
+                                    <td className="px-4 py-4 text-text-secondary">
+                                        {study.studyDate}
+                                    </td>
+                                    <td className="px-4 py-4">
+                                        <div className="inline-flex items-center px-2 py-0.5 rounded-full bg-slate-100 dark:bg-white/10 text-text-primary text-xs font-medium border border-border-card">
+                                            {study.modalitiesInStudy.join(", ") || "-"}
+                                        </div>
+                                    </td>
+                                    <td className="px-4 py-4 text-text-secondary truncate max-w-[200px]" title={study.studyDescription}>
+                                        {study.studyDescription}
+                                    </td>
+                                    <td className="px-4 py-4 text-right text-text-secondary">
+                                        <span className="font-medium text-text-primary">{study.numberOfStudyRelatedSeries}</span> / {study.numberOfStudyRelatedInstances}
+                                    </td>
+                                </tr>
+                                
+                                {expandedRows[study.studyInstanceUid] && (
+                                    <tr>
+                                        <td colSpan={7} className="p-0 border-b border-border-primary bg-slate-50 dark:bg-black/20">
+                                            <div className="animate-in fade-in slide-in-from-top-2 duration-200">
+                                                <PacsSeriesViewer study={study} />
+                                            </div>
+                                        </td>
+                                    </tr>
+                                )}
+                            </React.Fragment>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+}