@omniradiology/omnirad 0.1.3

package/components/patients/patient-card.tsx

@@ -0,0 +1,117 @@
+import React from "react";
+import { User, Calendar, FileText, Activity } from "lucide-react";
+import { Patient } from "@/types";
+import Link from "next/link";
+
+export function PatientCard({ patient, reportCount = 0, lastVisitDate, latestStatus }: { patient: Patient, reportCount?: number, lastVisitDate?: string, latestStatus?: string }) {
+    
+    // Status color mapping
+    const getStatusColor = (status?: string) => {
+        if (!status) return "bg-zinc-500";
+        const s = status.toUpperCase();
+        if (s === 'APPROVED' || s === 'FINAL') return "bg-emerald-500";
+        if (s === 'REJECTED') return "bg-red-500";
+        return "bg-yellow-500";
+    };
+
+    const formatGender = (g?: string) => {
+        if (!g) return null;
+        const u = g.toUpperCase();
+        if (u === 'M') return 'Male';
+        if (u === 'F') return 'Female';
+        return g;
+    };
+
+    const calculateAge = (dobString?: string) => {
+        if (!dobString) return null;
+        
+        // Handle DICOM format YYYYMMDD
+        let birthDate: Date;
+        if (dobString.length === 8 && !dobString.includes('-')) {
+             const y = parseInt(dobString.substring(0,4));
+             const m = parseInt(dobString.substring(4,6)) - 1;
+             const d = parseInt(dobString.substring(6,8));
+             birthDate = new Date(y, m, d);
+        } else {
+             birthDate = new Date(dobString);
+        }
+        
+        if (isNaN(birthDate.getTime())) return null;
+        
+        const today = new Date();
+        let age = today.getFullYear() - birthDate.getFullYear();
+        const monthDiff = today.getMonth() - birthDate.getMonth();
+        if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
+            age--;
+        }
+        return age;
+    };
+
+    const displayAge = calculateAge(patient.dob) ?? patient.age;
+    const displayGender = formatGender(patient.gender);
+
+    return (
+        <Link href={`/patients/${patient.id}`} className="block">
+            <div className="bg-zinc-900/40 border border-zinc-800/60 rounded-xl p-5 hover:bg-zinc-800/40 hover:border-zinc-700/60 transition-all group">
+                <div className="flex items-start justify-between mb-4">
+                    <div className="flex items-center gap-3">
+                        <div className="w-12 h-12 rounded-full bg-gradient-to-br from-indigo-500/20 to-purple-500/20 border border-indigo-500/10 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform">
+                            <span className="text-lg font-semibold text-indigo-300">
+                                {patient.patientName.substring(0, 2).toUpperCase()}
+                            </span>
+                        </div>
+                        <div>
+                            <h3 className="font-medium text-zinc-100 group-hover:text-indigo-300 transition-colors">{patient.patientName}</h3>
+                            <p className="text-xs text-zinc-500 mt-0.5">{patient.patientIdNumber ? `ID: ${patient.patientIdNumber}` : 'No ID provided'}</p>
+                        </div>
+                    </div>
+                    {latestStatus && (
+                        <div className="flex items-center gap-1.5" title={`Latest report: ${latestStatus}`}>
+                            <div className={`w-2 h-2 rounded-full ${getStatusColor(latestStatus)} animate-pulse`} />
+                        </div>
+                    )}
+                </div>
+
+                <div className="grid grid-cols-2 gap-3 mb-4">
+                    <div className="bg-zinc-950/50 rounded-lg p-2.5 border border-zinc-800/40 flex items-center gap-2">
+                        <FileText className="w-3.5 h-3.5 text-zinc-500" />
+                        <div>
+                            <p className="text-[10px] text-zinc-500 uppercase font-semibold">Reports</p>
+                            <p className="text-sm font-medium text-zinc-300">{reportCount}</p>
+                        </div>
+                    </div>
+                    <div className="bg-zinc-950/50 rounded-lg p-2.5 border border-zinc-800/40 flex items-center gap-2">
+                        <Calendar className="w-3.5 h-3.5 text-zinc-500" />
+                        <div>
+                            <p className="text-[10px] text-zinc-500 uppercase font-semibold">Last Scan</p>
+                            <p className="text-sm font-medium text-zinc-300 truncate">{lastVisitDate ? new Date(lastVisitDate).toLocaleDateString() : 'N/A'}</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="flex flex-wrap items-center gap-2 mt-3 pt-3 border-t border-zinc-800/40">
+                    {displayGender && (
+                        <div className="flex items-center gap-1.5 bg-indigo-500/10 border border-indigo-500/20 px-2.5 py-1 rounded-md text-xs font-medium text-indigo-300">
+                            <Activity className="w-3.5 h-3.5 opacity-70" />
+                            {displayGender}
+                        </div>
+                    )}
+                    {displayAge !== null && (
+                        <div className="flex items-center gap-1.5 bg-purple-500/10 border border-purple-500/20 px-2.5 py-1 rounded-md text-xs font-medium text-purple-300">
+                            <User className="w-3.5 h-3.5 opacity-70" />
+                            {displayAge} years old
+                        </div>
+                    )}
+                    {patient.dob && (
+                        <div className="flex items-center gap-1.5 bg-zinc-800/50 border border-zinc-700/50 px-2.5 py-1 rounded-md text-xs font-medium text-zinc-300">
+                            <Calendar className="w-3.5 h-3.5 opacity-70" />
+                            DOB: {patient.dob.length === 8 && !patient.dob.includes('-') 
+                                ? `${patient.dob.substring(0,4)}/${patient.dob.substring(4,6)}/${patient.dob.substring(6,8)}` 
+                                : new Date(patient.dob).toLocaleDateString()}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </Link>
+    );
+}

package/components/patients/patient-header.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import React, { useState } from "react";
+import { Patient } from "@/types";
+import { User, Activity, FileText, Calendar, Trash2, Download } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+export function PatientHeader({ patient, reportCount }: { patient: Patient, reportCount: number }) {
+    const router = useRouter();
+    const [isDeleting, setIsDeleting] = useState(false);
+
+    const handleDelete = async () => {
+        if (!confirm("Are you sure you want to delete this patient and all associated reports? This action cannot be undone.")) return;
+        
+        setIsDeleting(true);
+        try {
+            await fetch(`/api/patients/${patient.id}`, { method: 'DELETE' });
+            router.push('/patients');
+        } catch (e) {
+            console.error("Failed to delete patient", e);
+            setIsDeleting(false);
+        }
+    };
+
+    const formatGender = (g?: string) => {
+        if (!g) return null;
+        const u = g.toUpperCase();
+        if (u === 'M') return 'Male';
+        if (u === 'F') return 'Female';
+        if (u === 'O') return 'Other';
+        return g;
+    };
+
+    const calculateAge = (dobString?: string) => {
+        if (!dobString) return null;
+        
+        let birthDate: Date;
+        if (dobString.length === 8 && !dobString.includes('-')) {
+             const y = parseInt(dobString.substring(0,4));
+             const m = parseInt(dobString.substring(4,6)) - 1;
+             const d = parseInt(dobString.substring(6,8));
+             birthDate = new Date(y, m, d);
+        } else {
+             birthDate = new Date(dobString);
+        }
+        
+        if (isNaN(birthDate.getTime())) return null;
+        
+        const today = new Date();
+        let age = today.getFullYear() - birthDate.getFullYear();
+        const monthDiff = today.getMonth() - birthDate.getMonth();
+        if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
+            age--;
+        }
+        return age;
+    };
+
+    const displayAge = calculateAge(patient.dob) ?? patient.age;
+    const displayGender = formatGender(patient.gender);
+
+    return (
+        <div className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6 shadow-sm overflow-hidden relative">
+            {/* Background design */}
+            <div className="absolute top-0 right-0 w-64 h-64 bg-indigo-500/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/4 pointer-events-none" />
+            
+            <div className="flex flex-col md:flex-row md:items-start justify-between gap-6 relative z-10">
+                <div className="flex items-start gap-5">
+                    <div className="w-20 h-20 rounded-full bg-gradient-to-br from-indigo-500/20 to-purple-500/20 border border-indigo-500/20 flex items-center justify-center shrink-0 mt-1">
+                        <span className="text-2xl font-bold text-indigo-300">
+                            {patient.patientName.substring(0, 2).toUpperCase()}
+                        </span>
+                    </div>
+                    
+                    <div>
+                        <h1 className="text-2xl font-semibold text-zinc-100">{patient.patientName}</h1>
+                        <p className="text-zinc-400 mt-1 flex items-center gap-2">
+                            <User className="w-4 h-4" /> 
+                            {patient.patientIdNumber ? `ID: ${patient.patientIdNumber}` : 'No ID Number provided'}
+                        </p>
+                        
+                        <div className="flex flex-wrap items-center gap-2 mt-4">
+                            <span className="px-2.5 py-1 rounded-md text-xs font-medium bg-zinc-800 text-zinc-300 border border-zinc-700/50 flex items-center gap-1.5">
+                                <Activity className="w-3 h-3 text-zinc-400" />
+                                {displayGender || 'Unknown Gender'}
+                            </span>
+                            {displayAge !== null && (
+                                <span className="px-2.5 py-1 rounded-md text-xs font-medium bg-zinc-800 text-zinc-300 border border-zinc-700/50 flex items-center gap-1.5">
+                                    <User className="w-3 h-3 text-zinc-400" />
+                                    Age: {displayAge}
+                                </span>
+                            )}
+                            {patient.dob && (
+                                <span className="px-2.5 py-1 rounded-md text-xs font-medium bg-zinc-800 text-zinc-300 border border-zinc-700/50 flex items-center gap-1.5">
+                                    <Calendar className="w-3 h-3 text-zinc-400" />
+                                    DOB: {patient.dob.length === 8 && !patient.dob.includes('-') 
+                                        ? `${patient.dob.substring(0,4)}/${patient.dob.substring(4,6)}/${patient.dob.substring(6,8)}` 
+                                        : new Date(patient.dob).toLocaleDateString()}
+                                </span>
+                            )}
+                            <span className="px-2.5 py-1 rounded-md text-xs font-medium bg-zinc-800 text-zinc-300 border border-zinc-700/50 flex items-center gap-1.5">
+                                <FileText className="w-3 h-3 text-zinc-400" />
+                                {reportCount} Total Reports
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="flex items-center gap-3">
+                    {/* Add export functionality if needed */}
+                    <button 
+                        onClick={handleDelete}
+                        disabled={isDeleting}
+                        className="p-2.5 text-zinc-400 hover:text-red-400 bg-zinc-950/50 hover:bg-red-500/10 border border-zinc-800 border-transparent rounded-xl transition-colors shrink-0"
+                        title="Delete Patient"
+                    >
+                        <Trash2 className="w-4 h-4" />
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}

package/components/patients/patient-search.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { Search, User, UserPlus, Loader2 } from "lucide-react";
+import { Patient } from "@/types";
+
+interface PatientSearchProps {
+    onSelect: (patient: Patient) => void;
+    onNewPatient: () => void;
+    placeholder?: string;
+    value?: string;
+    onChange?: (val: string) => void;
+}
+
+export function PatientSearch({ onSelect, onNewPatient, placeholder = "Search patient by name or ID...", value = "", onChange }: PatientSearchProps) {
+    const [query, setQuery] = useState(value);
+    const [results, setResults] = useState<Patient[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const wrapperRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        setQuery(value);
+    }, [value]);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+
+    useEffect(() => {
+        if (!isOpen) return;
+
+        const timer = setTimeout(async () => {
+            if (query.length < 2) {
+                setResults([]);
+                return;
+            }
+
+            setIsLoading(true);
+            try {
+                const res = await fetch(`/api/patients/search?q=${encodeURIComponent(query)}`);
+                if (res.ok) {
+                    const data = await res.json();
+                    setResults(data);
+                }
+            } catch (e) {
+                console.error("Failed to search patients", e);
+            } finally {
+                setIsLoading(false);
+            }
+        }, 300);
+
+        return () => clearTimeout(timer);
+    }, [query, isOpen]);
+
+    return (
+        <div className="relative w-full" ref={wrapperRef}>
+            <div className="relative flex items-center">
+                <Search className="absolute left-3 w-4 h-4 text-zinc-500" />
+                <input
+                    type="text"
+                    value={query}
+                    onChange={(e) => {
+                        setQuery(e.target.value);
+                        if (onChange) onChange(e.target.value);
+                        setIsOpen(true);
+                    }}
+                    onFocus={() => setIsOpen(true)}
+                    placeholder={placeholder}
+                    className="w-full bg-zinc-800/50 border border-zinc-700/50 rounded-lg pl-9 pr-10 py-2.5 text-sm 
+                    focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 transition-all text-zinc-200"
+                />
+                {isLoading && (
+                    <Loader2 className="absolute right-3 w-4 h-4 text-zinc-400 animate-spin" />
+                )}
+            </div>
+
+            {isOpen && (query.length > 0) && (
+                <div className="absolute z-50 w-full mt-2 bg-zinc-900 border border-zinc-800 rounded-xl shadow-xl overflow-hidden animate-in fade-in slide-in-from-top-2">
+                    {results.length > 0 ? (
+                        <div className="max-h-64 overflow-y-auto p-1">
+                            {results.map((patient) => (
+                                <button
+                                    key={patient.id}
+                                    onClick={() => {
+                                        onSelect(patient);
+                                        setQuery(patient.patientName);
+                                        if (onChange) onChange(patient.patientName);
+                                        setIsOpen(false);
+                                    }}
+                                    className="w-full text-left flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-zinc-800/80 transition-colors"
+                                >
+                                    <div className="w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center shrink-0">
+                                        <User className="w-4 h-4 text-zinc-400" />
+                                    </div>
+                                    <div className="flex-1 min-w-0">
+                                        <div className="text-sm font-medium text-zinc-200 truncate">{patient.patientName}</div>
+                                        <div className="text-xs text-zinc-500 truncate">
+                                            {patient.patientIdNumber ? `ID: ${patient.patientIdNumber}` : 'No ID'}
+                                            {patient.dob ? ` • DOB: ${patient.dob}` : ''}
+                                        </div>
+                                    </div>
+                                </button>
+                            ))}
+                        </div>
+                    ) : (
+                        !isLoading && query.length >= 2 && (
+                            <div className="p-4 text-center text-sm text-zinc-500">
+                                No patients found matching "{query}"
+                            </div>
+                        )
+                    )}
+                    
+                    <div className="border-t border-zinc-800 p-2 bg-zinc-900/50">
+                        <button
+                            type="button"
+                            onClick={() => {
+                                setIsOpen(false);
+                                onNewPatient();
+                            }}
+                            className="w-full flex items-center justify-center gap-2 py-2 px-3 text-sm font-medium text-indigo-400 hover:text-indigo-300 hover:bg-indigo-500/10 rounded-lg transition-colors"
+                        >
+                            <UserPlus className="w-4 h-4" />
+                            Create New Patient
+                        </button>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

package/components/patients/patient-timeline.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import React from "react";
+import { ReportData } from "@/types";
+import { Calendar, FileText, CheckCircle, Clock, XCircle, Download, ExternalLink, Stethoscope, Activity, ClipboardList } from "lucide-react";
+import Link from "next/link";
+
+export function PatientTimeline({ reports }: { reports: any[] }) {
+    if (!reports || reports.length === 0) {
+        return (
+            <div className="flex flex-col items-center justify-center p-12 text-center border-2 border-dashed border-zinc-800 rounded-xl bg-zinc-900/20">
+                <div className="w-16 h-16 rounded-full bg-zinc-800/50 flex items-center justify-center text-zinc-500 mb-4">
+                    <FileText className="w-8 h-8 opacity-50" />
+                </div>
+                <h3 className="text-lg font-medium text-zinc-300">No Reports Yet</h3>
+                <p className="text-zinc-500 mt-2 max-w-sm">This patient does not have any generated reports. Return to the dashboard to generate one.</p>
+            </div>
+        );
+    }
+
+    // Group by month
+    const grouped = reports.reduce((acc: any, report) => {
+        const date = new Date(report.createdAt || report.created_at || Date.now());
+        const month = date.toLocaleString('default', { month: 'long', year: 'numeric' });
+        if (!acc[month]) acc[month] = [];
+        acc[month].push(report);
+        return acc;
+    }, {});
+
+    const getStatusIcon = (status: string) => {
+        const s = (status || "").toUpperCase();
+        if (s === 'APPROVED' || s === 'FINAL') return <CheckCircle className="w-4 h-4 text-emerald-500" />;
+        if (s === 'REJECTED') return <XCircle className="w-4 h-4 text-red-500" />;
+        return <Clock className="w-4 h-4 text-yellow-500" />;
+    };
+
+    return (
+        <div className="relative pl-4 md:pl-0">
+            {/* Timeline Spine */}
+            <div className="absolute left-4 md:left-[120px] top-0 bottom-0 w-px bg-zinc-800 hidden md:block" />
+
+            {Object.keys(grouped).map((month, mIdx) => (
+                <div key={month} className="mb-12 relative animate-in fade-in slide-in-from-bottom-4" style={{ animationDelay: `${mIdx * 100}ms` }}>
+                    <div className="sticky top-4 z-10 w-max bg-bg-primary/95 backdrop-blur-sm md:ml-[56px] px-3 py-1.5 rounded-full border border-zinc-800/80 mb-6 text-sm font-semibold text-zinc-400 flex items-center gap-2">
+                        <Calendar className="w-4 h-4 text-zinc-500" />
+                        {month}
+                    </div>
+
+                    <div className="space-y-6">
+                        {grouped[month].map((report: any, idx: number) => {
+                            const data = typeof report.reportData === 'string' ? JSON.parse(report.reportData) : (report.reportData || report.report_data);
+                            const date = new Date(report.createdAt || report.created_at);
+                            const status = data.report_footer?.report_status || report.reportStatus || 'Pending';
+                            const modality = report.modality || data.study?.modality || "Imaging";
+                            const urgency = data.urgency || report.urgency || "Routine";
+                            const indication = data.clinical_information?.indication || "";
+
+                            return (
+                                <div key={report.id} className="relative flex flex-col md:flex-row gap-4 md:gap-8 group">
+                                    {/* Date Left Column */}
+                                    <div className="md:w-[100px] shrink-0 text-left md:text-right pt-2 hidden md:block">
+                                        <div className="text-sm font-medium text-zinc-300">{date.toLocaleDateString(undefined, { day: 'numeric', month: 'short' })}</div>
+                                        <div className="text-xs text-zinc-500">{date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })}</div>
+                                    </div>
+
+                                    {/* Timeline Node */}
+                                    <div className="absolute left-0 md:left-[120px] top-4 w-2.5 h-2.5 rounded-full bg-zinc-700 border-2 border-bg-primary -translate-x-[5px] group-hover:bg-indigo-500 group-hover:scale-125 transition-all shadow-sm hidden md:block" />
+
+                                    {/* Event Card */}
+                                    <div className="flex-1 bg-zinc-900 border border-zinc-800/80 rounded-xl p-5 hover:bg-zinc-800/40 hover:border-zinc-700 transition-all ml-4 md:ml-0 shadow-sm relative overflow-hidden">
+                                        <div className="absolute top-0 left-0 w-1 h-full bg-indigo-500/50" />
+                                        <div className="md:hidden mb-2 pb-2 border-b border-zinc-800/50 flex justify-between">
+                                            <span className="text-xs text-zinc-400">{date.toLocaleString()}</span>
+                                        </div>
+
+                                        <div className="flex justify-between items-start gap-4 mb-3">
+                                            <div className="flex items-center gap-2 flex-wrap">
+                                                <span className="px-2.5 py-1 rounded text-xs font-semibold bg-indigo-500/10 text-indigo-400 border border-indigo-500/20">
+                                                    {modality}
+                                                </span>
+                                                <span className="px-2.5 py-1 rounded text-xs font-medium bg-zinc-950 border border-zinc-800 flex items-center gap-1.5 shadow-xs">
+                                                    {getStatusIcon(status)}
+                                                    {status}
+                                                </span>
+                                                {urgency && urgency !== 'Routine' && (
+                                                    <span className={`px-2.5 py-1 rounded text-xs font-semibold border ${
+                                                        urgency.toUpperCase() === 'STAT' || urgency.toUpperCase() === 'EMERGENCY'
+                                                            ? 'bg-red-500/10 text-red-400 border-red-500/20'
+                                                            : urgency.toUpperCase() === 'URGENT'
+                                                                ? 'bg-amber-500/10 text-amber-400 border-amber-500/20'
+                                                                : 'bg-zinc-800 text-zinc-400 border-zinc-700'
+                                                    }`}>
+                                                        {urgency}
+                                                    </span>
+                                                )}
+                                            </div>
+                                            <Link href={`/reports?id=${report.id}`} className="text-indigo-400 hover:text-indigo-300 bg-indigo-500/10 hover:bg-indigo-500/20 p-1.5 rounded-lg transition-colors shrink-0" title="View Full Report">
+                                                <ExternalLink className="w-4 h-4" />
+                                            </Link>
+                                        </div>
+
+                                        {/* Metadata Row: Modality, Urgency */}
+                                        <div className="flex flex-wrap gap-x-6 gap-y-1 mt-1 mb-4">
+                                            <div className="flex items-center gap-1.5">
+                                                <span className="text-[11px] font-bold text-zinc-400 uppercase tracking-widest">Modality:</span>
+                                                <span className="text-sm text-zinc-200 font-medium">{data.study?.modality || modality}</span>
+                                            </div>
+                                            <div className="flex items-center gap-1.5">
+                                                <span className="text-[11px] font-bold text-zinc-400 uppercase tracking-widest">Urgency:</span>
+                                                <span className={`text-sm font-medium ${
+                                                    urgency.toUpperCase() === 'STAT' || urgency.toUpperCase() === 'EMERGENCY' || urgency.toUpperCase() === 'CRITICAL' ? 'text-red-400' :
+                                                    urgency.toUpperCase() === 'URGENT' || urgency.toUpperCase() === 'ASAP' ? 'text-amber-400' : 
+                                                    urgency.toUpperCase() === 'ROUTINE' || urgency.toUpperCase() === 'NORMAL' ? 'text-emerald-400' :
+                                                    'text-zinc-300'
+                                                }`}>{urgency}</span>
+                                            </div>
+                                        </div>
+
+                                        {/* Indication */}
+                                        {indication && (
+                                            <div className="mb-4">
+                                                <div className="flex items-center gap-1.5 mb-1 text-zinc-400">
+                                                    <Stethoscope className="w-3.5 h-3.5 opacity-80" />
+                                                    <p className="text-[11px] font-bold uppercase tracking-widest">Indication</p>
+                                                </div>
+                                                <p className="text-sm text-zinc-300 leading-relaxed">{indication}</p>
+                                            </div>
+                                        )}
+
+                                        {/* Impression */}
+                                        <div className="space-y-2 mt-4">
+                                            {data.impression && data.impression.length > 0 && (
+                                                <div>
+                                                    <div className="flex items-center gap-1.5 mb-1 text-indigo-400/90">
+                                                        <ClipboardList className="w-3.5 h-3.5" />
+                                                        <p className="text-[11px] font-bold uppercase tracking-widest">Impression</p>
+                                                    </div>
+                                                    <p className="text-sm text-zinc-200 leading-relaxed">
+                                                        {Array.isArray(data.impression) ? data.impression.join(". ") : data.impression}
+                                                    </p>
+                                                </div>
+                                            )}
+                                        </div>
+                                    </div>
+                                </div>
+                            );
+                        })}
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+}