@omniradiology/omnirad 0.1.3

package/components/dashboard/FhirIntegrationPanel.tsx

@@ -0,0 +1,331 @@
+"use client"
+
+import * as React from "react"
+import { Card, CardContent, CardHeader, CardTitle, Input, Label, Button } from "@/components/ui/basic"
+import { Save, Link, CheckCircle, AlertCircle, RefreshCw } from "lucide-react"
+
+export function FhirIntegrationPanel() {
+    const [loading, setLoading] = React.useState(true)
+    const [saveStatus, setSaveStatus] = React.useState<"idle" | "saving" | "saved" | "error">("idle")
+    const [errorMsg, setErrorMsg] = React.useState("")
+    const [connStatus, setConnStatus] = React.useState<"idle" | "checking" | "verified" | "invalid">("idle")
+    const [connError, setConnError] = React.useState("")
+    const [serverInfo, setServerInfo] = React.useState({ fhirVersion: "", softwareName: "" })
+
+    const [formData, setFormData] = React.useState({
+        enabled: false,
+        publicBaseUrl: "",
+        authMode: "bearer_token",
+        inboundServiceRequestEnabled: false,
+        outboundReadEnabled: true,
+        externalFhirBaseUrl: "",
+        externalFhirAuthType: "none",
+        externalFhirClientId: "",
+        externalFhirClientSecret: "",
+        externalFhirBearerToken: "",
+    })
+
+    React.useEffect(() => {
+        fetch("/api/fhir/config")
+            .then(res => res.json())
+            .then(data => {
+                if (data && !data.error) {
+                    setFormData(prev => ({ ...prev, ...data }))
+                }
+            })
+            .catch(console.error)
+            .finally(() => setLoading(false))
+    }, [])
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+        const { id, value, type } = e.target
+        const val = type === "checkbox" ? (e.target as HTMLInputElement).checked : value
+        setFormData(prev => ({ ...prev, [id]: val }))
+        
+        if (id === "externalFhirBaseUrl" || id === "externalFhirAuthType" || id === "externalFhirBearerToken" || id === "externalFhirClientId" || id === "externalFhirClientSecret") {
+            setConnStatus("idle")
+        }
+        setSaveStatus("idle")
+    }
+
+    const checkConnection = async () => {
+        if (!formData.externalFhirBaseUrl) {
+            setConnStatus("invalid")
+            setConnError("FHIR Base URL is required.")
+            return
+        }
+
+        setConnStatus("checking")
+        setConnError("")
+        try {
+            const res = await fetch("/api/fhir/config/test-connection", { 
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(formData)
+            })
+            const data = await res.json()
+            if (res.ok && data.success) {
+                setServerInfo({ fhirVersion: data.fhirVersion, softwareName: data.softwareName })
+                setConnStatus("verified")
+            } else {
+                setConnStatus("invalid")
+                setConnError(data.error || "Failed to connect to FHIR server.")
+            }
+        } catch(e) {
+            setConnStatus("invalid")
+            setConnError("Network error while trying to reach the test connection endpoint.")
+        }
+    }
+
+    const handleSave = async () => {
+        if (formData.enabled && !formData.externalFhirBaseUrl) {
+            setErrorMsg("External FHIR Base URL is required when enabled.")
+            setSaveStatus("error")
+            return
+        }
+
+        setSaveStatus("saving")
+        setErrorMsg("")
+        try {
+            const res = await fetch("/api/fhir/config", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(formData),
+            })
+            const result = await res.json()
+            if (res.ok && result.success) {
+                setSaveStatus("saved")
+                setTimeout(() => setSaveStatus("idle"), 3000)
+            } else {
+                setErrorMsg(result.error || "Failed to save FHIR configuration")
+                setSaveStatus("error")
+            }
+        } catch (e) {
+            setErrorMsg(String(e))
+            setSaveStatus("error")
+        }
+    }
+
+    if (loading) return null
+
+    return (
+        <Card className="bg-bg-surface border-border-primary border-t-4 border-t-emerald-500">
+            <CardHeader>
+                <div className="flex items-center justify-between">
+                    <div>
+                        <CardTitle className="text-text-heading flex items-center gap-2">
+                            <Link size={20} className="text-emerald-500" />
+                            FHIR API Integration
+                        </CardTitle>
+                        <p className="text-sm text-text-secondary mt-1">Connect to external EMR/EHR systems and enable standard FHIR workflows</p>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <Label htmlFor="enabled" className="text-sm font-medium text-text-primary cursor-pointer">Enable FHIR Integration</Label>
+                        <label className="relative inline-flex items-center cursor-pointer">
+                            <input
+                                type="checkbox"
+                                id="enabled"
+                                className="sr-only peer"
+                                checked={formData.enabled}
+                                onChange={handleChange}
+                            />
+                            <div className="w-11 h-6 bg-slate-200 dark:bg-slate-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-emerald-500 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-500"></div>
+                        </label>
+                    </div>
+                </div>
+            </CardHeader>
+            <CardContent className={`space-y-5 transition-opacity duration-300 ${formData.enabled ? 'opacity-100' : 'opacity-50 pointer-events-none'}`}>
+                
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    {/* External FHIR Base URL */}
+                    <div className="col-span-1 md:col-span-2">
+                        <Label htmlFor="externalFhirBaseUrl" className="text-text-primary">External FHIR Base URL *</Label>
+                        <Input
+                            id="externalFhirBaseUrl"
+                            value={formData.externalFhirBaseUrl}
+                            onChange={handleChange}
+                            placeholder="https://fhir.epic.com/interconnect-fhir-oauth/api/FHIR/R4/"
+                            className="mt-1 bg-bg-panel border-border-primary text-text-primary"
+                        />
+                    </div>
+
+                    {/* Authentication Type */}
+                    <div>
+                        <Label htmlFor="externalFhirAuthType" className="text-text-primary">Authentication Type</Label>
+                        <select
+                            id="externalFhirAuthType"
+                            value={formData.externalFhirAuthType}
+                            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-emerald-500"
+                        >
+                            <option value="none">None / Open Endpoint</option>
+                            <option value="basic">Basic (Client ID / Secret)</option>
+                            <option value="bearer">Bearer Token</option>
+                        </select>
+                    </div>
+
+                    {/* Authentication Details based on type */}
+                    {formData.externalFhirAuthType === "basic" && (
+                        <div className="col-span-1 md:col-span-2 grid grid-cols-2 gap-4">
+                            <div>
+                                <Label htmlFor="externalFhirClientId" className="text-text-primary">Client ID (Username)</Label>
+                                <Input
+                                    id="externalFhirClientId"
+                                    value={formData.externalFhirClientId}
+                                    onChange={handleChange}
+                                    className="mt-1 bg-bg-panel border-border-primary text-text-primary"
+                                />
+                            </div>
+                            <div>
+                                <Label htmlFor="externalFhirClientSecret" className="text-text-primary">Client Secret (Password)</Label>
+                                <Input
+                                    id="externalFhirClientSecret"
+                                    type="password"
+                                    value={formData.externalFhirClientSecret}
+                                    onChange={handleChange}
+                                    className="mt-1 bg-bg-panel border-border-primary text-text-primary"
+                                />
+                            </div>
+                        </div>
+                    )}
+
+                    {formData.externalFhirAuthType === "bearer" && (
+                        <div className="col-span-1 md:col-span-2">
+                            <Label htmlFor="externalFhirBearerToken" className="text-text-primary">Bearer Token</Label>
+                            <Input
+                                id="externalFhirBearerToken"
+                                type="password"
+                                value={formData.externalFhirBearerToken}
+                                onChange={handleChange}
+                                placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
+                                className="mt-1 bg-bg-panel border-border-primary text-text-primary"
+                            />
+                        </div>
+                    )}
+
+                    {/* Test Connection Button */}
+                    <div className="col-span-1 md:col-span-2 mt-2">
+                        <Button 
+                            variant="outline" 
+                            onClick={(e) => { e.preventDefault(); checkConnection(); }}
+                            disabled={connStatus === "checking"}
+                            className="w-full border-emerald-500 text-emerald-600 dark:text-emerald-400 hover:bg-emerald-50 dark:hover:bg-emerald-950/30 gap-2 disabled:opacity-50"
+                        >
+                            <RefreshCw size={16} className={connStatus === "checking" ? "animate-spin" : ""} />
+                            {connStatus === "checking" ? "Connecting to FHIR Server..." : "Test FHIR Connection"}
+                        </Button>
+                    </div>
+
+                    {connStatus === "invalid" && (
+                        <div className="col-span-1 md:col-span-2 text-xs text-red-500 bg-red-500/10 p-3 rounded-md border border-red-500/20">
+                            <strong>Connection Failed:</strong> {connError}
+                        </div>
+                    )}
+
+                    {connStatus === "verified" && (
+                        <div className="col-span-1 md:col-span-2 text-xs text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 p-3 rounded-md border border-emerald-500/20 flex flex-col gap-1">
+                            <div className="flex items-center gap-1.5 font-medium">
+                                <CheckCircle size={14} /> Connection Verified Successfully!
+                            </div>
+                            <div className="pl-5 opacity-90">
+                                Server: <strong>{serverInfo.softwareName}</strong> (FHIR Version: <strong>{serverInfo.fhirVersion}</strong>)
+                            </div>
+                        </div>
+                    )}
+
+                    <div className="col-span-1 md:col-span-2 pt-2 pb-2">
+                        <div className="border-t border-border-primary"></div>
+                    </div>
+
+                    {/* Feature Toggles */}
+                    <div className="col-span-1 md:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div className="flex items-start space-x-3 p-3 bg-slate-50 dark:bg-slate-800/50 rounded-lg border border-border-primary">
+                            <div className="flex items-center h-5 mt-0.5">
+                                <input
+                                    id="inboundServiceRequestEnabled"
+                                    type="checkbox"
+                                    checked={formData.inboundServiceRequestEnabled}
+                                    onChange={handleChange}
+                                    className="w-4 h-4 text-emerald-600 bg-slate-100 border-slate-300 rounded focus:ring-emerald-500 dark:focus:ring-emerald-600 dark:ring-offset-slate-800 focus:ring-2 dark:bg-slate-700 dark:border-slate-600"
+                                />
+                            </div>
+                            <div className="text-sm">
+                                <label htmlFor="inboundServiceRequestEnabled" className="font-medium text-text-primary">Enable Inbound Service Requests</label>
+                                <p className="text-text-muted mt-1 text-xs">Allow external systems to create ServiceRequest orders in OmniRad via API.</p>
+                            </div>
+                        </div>
+
+                        <div className="flex items-start space-x-3 p-3 bg-slate-50 dark:bg-slate-800/50 rounded-lg border border-border-primary">
+                            <div className="flex items-center h-5 mt-0.5">
+                                <input
+                                    id="outboundReadEnabled"
+                                    type="checkbox"
+                                    checked={formData.outboundReadEnabled}
+                                    onChange={handleChange}
+                                    className="w-4 h-4 text-emerald-600 bg-slate-100 border-slate-300 rounded focus:ring-emerald-500 dark:focus:ring-emerald-600 dark:ring-offset-slate-800 focus:ring-2 dark:bg-slate-700 dark:border-slate-600"
+                                />
+                            </div>
+                            <div className="text-sm">
+                                <label htmlFor="outboundReadEnabled" className="font-medium text-text-primary">Enable Outbound Lookups</label>
+                                <p className="text-text-muted mt-1 text-xs">Allow OmniRad to fetch Patient demographics and previous DiagnosticReports from the external server.</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Additional Local FHIR Auth Config (Inbound) */}
+                    <div className="col-span-1 md:col-span-2 mt-4 space-y-4">
+                        <h4 className="text-sm font-medium text-text-primary mb-2">Local API Authentication (Inbound)</h4>
+                        
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div>
+                                <Label htmlFor="authMode" className="text-text-primary">Inbound Authentication Mode</Label>
+                                <select
+                                    id="authMode"
+                                    value={formData.authMode}
+                                    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-emerald-500"
+                                >
+                                    <option value="none">No Auth (Not Recommended)</option>
+                                    <option value="bearer_token">Bearer Token</option>
+                                </select>
+                            </div>
+                            
+                            <div>
+                                <Label htmlFor="publicBaseUrl" className="text-text-primary">Public Base URL</Label>
+                                <Input
+                                    id="publicBaseUrl"
+                                    value={formData.publicBaseUrl}
+                                    onChange={handleChange}
+                                    placeholder="https://omnirad.yourdomain.com"
+                                    className="mt-1 bg-bg-panel border-border-primary text-text-primary"
+                                />
+                                <p className="text-[11px] text-text-muted mt-1">Used for webhook callbacks and self-referencing URLs.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {saveStatus === "error" && errorMsg && (
+                    <div className="p-3 bg-red-500/10 border border-red-500/30 rounded-lg flex items-center gap-2 text-red-500 dark:text-red-400 text-sm">
+                        <AlertCircle size={16} /> {errorMsg}
+                    </div>
+                )}
+
+                {saveStatus === "saved" && (
+                    <div className="p-3 bg-emerald-500/10 border border-emerald-500/30 rounded-lg flex items-center gap-2 text-emerald-600 dark:text-emerald-400 text-sm">
+                        <CheckCircle size={16} /> FHIR Configuration saved successfully!
+                    </div>
+                )}
+
+                <Button
+                    onClick={handleSave}
+                    disabled={saveStatus === "saving"}
+                    className="w-full mt-4 bg-emerald-600 hover:bg-emerald-700 text-white gap-2 disabled:opacity-50"
+                >
+                    <Save size={16} />
+                    {saveStatus === "saving" ? "Saving..." : "Save FHIR Configuration"}
+                </Button>
+            </CardContent>
+        </Card>
+    )
+}

package/components/dashboard/FullReportOverlay.tsx

@@ -0,0 +1,269 @@
+import * as React from "react";
+import { ReportData, Comment, AuditLog } from "@/types";
+import { Button } from "@/components/ui/basic";
+import { Download, Printer, Edit, XCircle, CheckCircle, ChevronUp, ChevronDown, X } from "lucide-react";
+import { ImageViewer } from "@/components/dashboard/ImageViewer";
+import { CollaborationPanel } from "@/components/dashboard/CollaborationPanel";
+import { StandardTemplate, ModernTemplate, MinimalTemplate } from "@/components/dashboard/ReportTemplates";
+
+interface FullReportOverlayProps {
+    report: ReportData;
+    onClose: () => void;
+    onNewPatient: () => void;
+    onPrint: () => void;
+    onDownloadPDF: () => void;
+    onEdit: () => void;
+    onReject: () => void;
+    onApprove: () => void;
+    onUnreject: () => void;
+    onAddComment: (text: string) => void;
+    currentUser: { name: string; role: string };
+    reportId?: string;
+    imageSrc?: string | null;
+    images?: string[];
+}
+
+export function FullReportOverlay({
+    report,
+    onClose,
+    onNewPatient,
+    onPrint,
+    onDownloadPDF,
+    onEdit,
+    onReject,
+    onApprove,
+    onUnreject,
+    onAddComment,
+    currentUser,
+    reportId,
+    imageSrc,
+    images = []
+}: FullReportOverlayProps) {
+    const [isImageCollapsed, setIsImageCollapsed] = React.useState(false);
+    const [selectedTemplate, setSelectedTemplate] = React.useState<string>('standard');
+    const [logoUrl, setLogoUrl] = React.useState<string>('');
+
+    // Local state for collaboration to ensure immediate UI updates
+    const [localComments, setLocalComments] = React.useState<Comment[]>(report.collaboration?.comments || []);
+    const [localLogs, setLocalLogs] = React.useState<AuditLog[]>(report.collaboration?.logs || []);
+
+    React.useEffect(() => {
+        setLocalComments(report.collaboration?.comments || []);
+        setLocalLogs(report.collaboration?.logs || []);
+
+        // Load template preference
+        fetch('/api/settings?type=appearance')
+            .then(res => res.json())
+            .then(config => {
+                if (config.template) {
+                    setSelectedTemplate(config.template);
+                }
+                if (config.logo) {
+                    setLogoUrl(config.logo);
+                }
+            })
+            .catch(e => console.error("Error loading template preference:", e));
+    }, [report.collaboration]);
+
+    const handleLocalAddComment = (text: string) => {
+        // Optimistic update
+        const newComment: Comment = {
+            id: Date.now().toString(),
+            author: currentUser.name,
+            role: currentUser.role,
+            text,
+            timestamp: new Date().toISOString()
+        };
+        const newLog: AuditLog = {
+            id: Date.now().toString() + "_log",
+            action: "Comment Added",
+            user: currentUser.name,
+            timestamp: new Date().toISOString(),
+            details: text.substring(0, 50) + (text.length > 50 ? "..." : "")
+        };
+        setLocalComments(prev => [...prev, newComment]);
+        setLocalLogs(prev => [...prev, newLog]);
+
+        // Call parent handler (which updates backend)
+        onAddComment(text);
+    };
+
+    const urgencyColor = report.urgency === 'Critical' ? 'text-red-600' :
+        report.urgency === 'Urgent' ? 'text-orange-600' : 'text-green-600';
+
+    const statusColor = report.report_footer.report_status === 'Approved' ? 'bg-green-100 text-green-800' :
+        report.report_footer.report_status === 'Rejected' ? 'bg-red-100 text-red-800' : 'bg-blue-100 text-blue-800';
+
+    // --- TEMPLATE RENDERERS ---
+
+    const getSelectedTemplateId = () => {
+        return selectedTemplate === 'modern' ? 'report-full-content-modern' :
+            selectedTemplate === 'minimal' ? 'report-full-content-minimal' :
+                'report-full-content-standard';
+    };
+
+    return (
+        <div className="fixed inset-0 z-50 bg-bg-surface flex flex-col animate-in fade-in duration-200">
+            {/* Global Header */}
+            <div className="h-16 px-4 border-b border-border-primary bg-bg-panel flex items-center justify-between shrink-0 shadow-sm z-50">
+                <div className="flex items-center gap-4">
+                    <div className="flex flex-col">
+                        <h1 className="text-xl font-bold text-text-heading">{report.patient.name}</h1>
+                        <span className="text-xs text-text-muted">
+                            {report.patient.patient_id && <>{`ID: ${report.patient.patient_id}`} • </>}
+                            {report.study.modality} • {report.study.examination}
+                        </span>
+                    </div>
+                    <div className={`px-2 py-0.5 rounded-full ${statusColor} text-xs font-bold uppercase`}>
+                        {report.report_footer.report_status}
+                    </div>
+                </div>
+
+                <div className="flex items-center gap-2">
+                    <div className="h-8 w-px bg-border-primary mx-2" />
+
+                    {report.report_footer.report_status === 'Pending' && (
+                        <>
+                            <Button
+                                variant="danger"
+                                size="sm"
+                                onClick={onReject}
+                                className="bg-red-100 text-red-700 hover:bg-red-200 border-red-200"
+                            >
+                                Reject
+                            </Button>
+                            <Button
+                                variant="success"
+                                size="sm"
+                                onClick={onApprove}
+                                className="bg-green-100 text-green-700 hover:bg-green-200 border-green-200"
+                            >
+                                Approve
+                            </Button>
+                            <Button variant="outline" size="sm" onClick={onEdit} className="text-blue-600 border-blue-200 hover:bg-blue-50">
+                                Edit
+                            </Button>
+                        </>
+                    )}
+
+                    {report.report_footer.report_status === 'Rejected' && (
+                        <Button
+                            variant="danger"
+                            size="sm"
+                            onClick={onUnreject}
+                            className="bg-red-600 text-white hover:bg-red-700 border-red-600"
+                            title="Click to Unreject"
+                        >
+                            Rejected
+                        </Button>
+                    )}
+
+                    {report.report_footer.report_status === 'Approved' && (
+                        <Button
+                            variant="success"
+                            size="sm"
+                            className="bg-green-600 text-white hover:bg-green-700 border-green-600 cursor-default"
+                        >
+                            Approved
+                        </Button>
+                    )}
+
+                    <div className="h-8 w-px bg-border-primary mx-2" />
+
+                    <Button
+                        variant="outline"
+                        size="icon"
+                        onClick={onPrint}
+                        title="Print"
+                        className="transition-all hover:bg-blue-50 hover:text-blue-600 hover:scale-105 active:scale-95"
+                    >
+                        <Printer size={18} />
+                    </Button>
+                    <Button
+                        variant="outline"
+                        size="icon"
+                        onClick={onDownloadPDF}
+                        title="Download PDF"
+                        className="transition-all hover:bg-blue-50 hover:text-blue-600 hover:scale-105 active:scale-95"
+                    >
+                        <Download size={18} />
+                    </Button>
+
+                    <div className="h-8 w-px bg-border-primary mx-2" />
+
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={onClose}
+                        className="hover:bg-red-100 hover:text-red-600 transition-all hover:rotate-90 active:scale-90"
+                    >
+                        <X size={24} />
+                    </Button>
+                </div>
+            </div>
+
+            {/* Top Section: Collapsible Image Viewer */}
+            <div className={`relative transition-all duration-300 ease-in-out border-b border-border-primary bg-black ${isImageCollapsed ? 'h-[0px] border-b-0' : 'h-[45vh]'} shrink-0 group`}>
+                <div className={`absolute top-0 left-0 w-full h-full ${isImageCollapsed ? 'invisible' : 'visible'}`}>
+                    <ImageViewer
+                        imageSrc={imageSrc || report.image_data || null}
+                        images={
+                            images.length > 0 ? images :
+                            report.images_data && report.images_data.length > 0 ? report.images_data :
+                            report.image_data ? [report.image_data] : []
+                        }
+                        className="w-full h-full"
+                        isCollapsed={isImageCollapsed}
+                        onToggleCollapse={() => { }}
+                    />
+                </div>
+
+                {/* Redesigned Collapse/Expand Toggle - Floating Pill */}
+                <div className={`absolute ${isImageCollapsed ? '-bottom-8' : 'bottom-4'} left-1/2 -translate-x-1/2 z-50 transition-all duration-300`}>
+                    <button
+                        onClick={() => setIsImageCollapsed(!isImageCollapsed)}
+                        className="flex items-center gap-2 bg-bg-panel/90 backdrop-blur border border-border-primary px-4 py-1.5 rounded-full shadow-lg text-xs font-semibold text-text-primary hover:bg-bg-panel transition-all transform hover:scale-105"
+                    >
+                        {isImageCollapsed ? (
+                            <>
+                                <ChevronDown size={14} /> Show Image Viewer
+                            </>
+                        ) : (
+                            <>
+                                <ChevronUp size={14} /> Hide Image Viewer
+                            </>
+                        )}
+                    </button>
+                </div>
+            </div>
+
+            {/* Bottom Section: Split Pane */}
+            <div className="flex-1 overflow-hidden flex flex-row">
+                {/* Left Column: Collaboration (30%) */}
+                <div className="w-[30%] min-w-[300px] border-r border-border-primary bg-bg-panel/50 flex flex-col overflow-hidden">
+                    <div className="p-4 border-b border-border-primary bg-bg-surface">
+                        <h3 className="font-bold text-text-heading">Collaboration & Audit</h3>
+                    </div>
+                    <div className="flex-1 overflow-y-auto p-4">
+                        <CollaborationPanel
+                            comments={localComments}
+                            logs={localLogs}
+                            onAddComment={handleLocalAddComment}
+                            currentUser={currentUser}
+                        />
+                    </div>
+                </div>
+
+                {/* Right Column: Report (70%) */}
+                <div className="flex-1 bg-gray-100 overflow-y-auto p-8 relative">
+                    {/* Render selected template */}
+                    <div className="animate-in fade-in duration-300">
+                        {selectedTemplate === 'modern' ? <ModernTemplate report={report} logoUrl={logoUrl} /> :
+                            selectedTemplate === 'minimal' ? <MinimalTemplate report={report} logoUrl={logoUrl} /> :
+                                <StandardTemplate report={report} logoUrl={logoUrl} />}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}