[V0_FILE]typescriptreact:file="components/dashboard/index.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Upload, FileText, Clock, CheckCircle } from "lucide-react" export function FileUpload() { const [uploading, setUploading] = useState(false) const [progress, setProgress] = useState(0) const handleUpload = () => { setUploading(true) const interval = setInterval(() => { setProgress((prev) => { if (prev >= 100) { clearInterval(interval) setUploading(false) return 100 } return prev + 10 }) }, 500) } return (

Click to upload or drag and drop

DICOM, NIfTI, or compressed scan files (MAX. 500MB)

{uploading && (

Uploading... {progress}%

)}

) } export function MedicalScan() { return (

Info Images Report

Patient ID

P-12345

Scan Type

MRI Brain

Date

2023-04-15

Referring Physician

Dr. Johnson

{[1, 2, 3, 4].map((i) => (

))}

Findings

No abnormal findings detected. Normal brain structure and tissue appearance.

Impression

Normal MRI examination of the brain.

Report by Dr. Smith • Completed on April 16, 2023

) } export function RecentActivity() { const activities = [ { id: 1, patient: "P-12345", type: "MRI Brain", status: "Completed", date: "2 hours ago", doctor: "Dr. Smith", }, { id: 2, patient: "P-12346", type: "CT Chest", status: "In Progress", date: "5 hours ago", doctor: "Dr. Johnson", }, { id: 3, patient: "P-12347", type: "X-Ray Spine", status: "Pending", date: "Yesterday", doctor: "Unassigned", }, { id: 4, patient: "P-12348", type: "MRI Knee", status: "Completed", date: "Yesterday", doctor: "Dr. Williams", }, ] return (

{activities.map((activity) => (

{activity.status === "Completed" ? ( ) : activity.status === "In Progress" ? ( ) : ( )}

{activity.patient} - {activity.type}

{activity.status} • {activity.date}

{activity.doctor}

))}

) } [V0_FILE]typescriptreact:file="app/upload/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" import { FileUpload } from "@/components/dashboard" import { DashboardHeader } from "@/components/dashboard/dashboard-header" import { DashboardShell } from "@/components/dashboard/dashboard-shell" import { ArrowLeft, Upload } from "lucide-react" export default function UploadPage() { const [uploading, setUploading] = useState(false) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() setUploading(true) // Simulate upload process setTimeout(() => { setUploading(false) window.location.href = "/" }, 3000) } return ( Scan Information Enter patient and scan details for accurate reporting.

Patient ID

Patient Name

Scan Type

Priority

Clinical Information

</div>

<div className="space-y-2">
              <Label>Upload Scan Files</Label>
              <FileUpload />
            </div>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button variant="outline" type="button">
              Save as Draft
            </Button>
            <Button type="submit" disabled={uploading}>
              {uploading ? (
                <>
                  <Upload className="mr-2 h-4 w-4 animate-spin" />
                  Uploading...
                </>
              ) : (
                <>
                  <Upload className="mr-2 h-4 w-4" />
                  Upload Scan
                </>
              )}
            </Button>
          </CardFooter>
        </form>
      </Card>
    </DashboardShell>
  )
}

[V0_FILE]typescriptreact:file="app/reports/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { DashboardShell } from "@/components/dashboard/dashboard-shell"
import { ArrowLeft, CheckCircle, Clock, FileText, Search } from "lucide-react"
import { Input } from "@/components/ui/input"

export default function ReportsPage() {
  return (
    <DashboardShell>
      <DashboardHeader heading="Medical Reports" text="View and manage all medical reports.">
        <div className="flex gap-2">
          <Link href="/">
            <Button variant="outline">
              <ArrowLeft className="mr-2 h-4 w-4" />
              Dashboard
            </Button>
          </Link>
          <Link href="/reports/new">
            <Button>
              <FileText className="mr-2 h-4 w-4" />
              New Report
            </Button>
          </Link>
        </div>
      </DashboardHeader>

<Tabs defaultValue="all" className="space-y-4">
        <TabsList>
          <TabsTrigger value="all">All Reports</TabsTrigger>
          <TabsTrigger value="pending">Pending</TabsTrigger>
          <TabsTrigger value="in-progress">In Progress</TabsTrigger>
          <TabsTrigger value="completed">Completed</TabsTrigger>
        </TabsList>

<TabsContent value="completed" className="space-y-4">
          <ReportsList status="completed" />
        </TabsContent>
      </Tabs>
    </DashboardShell>
  )
}

function ReportsList({ status }: { status?: string }) {
  const reports = [
    {
      id: "REP-1001",
      patientId: "P-12345",
      scanType: "MRI Brain",
      date: "2023-04-15",
      status: "completed",
      radiologist: "Dr. Smith",
      priority: "Routine",
    },
    {
      id: "REP-1002",
      patientId: "P-12346",
      scanType: "CT Chest",
      date: "2023-04-15",
      status: "in-progress",
      radiologist: "Dr. Johnson",
      priority: "Urgent",
    },
    {
      id: "REP-1003",
      patientId: "P-12347",
      scanType: "X-Ray Spine",
      date: "2023-04-14",
      status: "pending",
      radiologist: "Unassigned",
      priority: "Routine",
    },
    {
      id: "REP-1004",
      patientId: "P-12348",
      scanType: "MRI Knee",
      date: "2023-04-14",
      status: "completed",
      radiologist: "Dr. Williams",
      priority: "Routine",
    },
    {
      id: "REP-1005",
      patientId: "P-12349",
      scanType: "CT Abdomen",
      date: "2023-04-13",
      status: "in-progress",
      radiologist: "Dr. Brown",
      priority: "STAT",
    },
  ]

const filteredReports = status ? reports.filter((report) => report.status === status) : reports

return (
    <div className="grid gap-4">
      {filteredReports.map((report) => (
        <Card key={report.id}>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4">
                {report.status === "completed" ? (
                  <CheckCircle className="h-8 w-8 text-green-500" />
                ) : report.status === "in-progress" ? (
                  <Clock className="h-8 w-8 text-amber-500" />
                ) : (
                  <FileText className="h-8 w-8 text-muted-foreground" />
                )}
                <div>
                  <h3 className="font-medium">{report.scanType}</h3>
                  <p className="text-sm text-muted-foreground">
                    Patient: {report.patientId} • {report.date}
                  </p>
                </div>
              </div>
              <div className="flex items-center gap-4">
                <div className="text-right">
                  <p className="text-sm font-medium">{report.radiologist}</p>
                  <p className="text-sm text-muted-foreground">{report.priority}</p>
                </div>
                <Link href={`/reports/${report.id}`}>
                  <Button variant="outline" size="sm">
                    View
                  </Button>
                </Link>
              </div>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/reports/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}

[V0_FILE]typescriptreact:file="app/radiologists/page.tsx" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { DashboardShell } from "@/components/dashboard/dashboard-shell"
import { ArrowLeft, BadgeCheck, Clock, Plus, UserPlus } from "lucide-react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"

export default function RadiologistsPage() {
  return (
    <DashboardShell>
      <DashboardHeader heading="Radiologist Network" text="Manage your network of remote radiologists.">
        <div className="flex gap-2">
          <Link href="/">
            <Button variant="outline">
              <ArrowLeft className="mr-2 h-4 w-4" />
              Dashboard
            </Button>
          </Link>
          <Link href="/radiologists/invite">
            <Button>
              <UserPlus className="mr-2 h-4 w-4" />
              Invite Radiologist
            </Button>
          </Link>
        </div>
      </DashboardHeader>

<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        {radiologists.map((radiologist) => (
          <Card key={radiologist.id}>
            <CardHeader className="pb-2">
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-4">
                  <Avatar className="h-12 w-12">
                    <AvatarImage src={radiologist.avatar} alt={radiologist.name} />
                    <AvatarFallback>{radiologist.initials}</AvatarFallback>
                  </Avatar>
                  <div>
                    <CardTitle className="text-base">{radiologist.name}</CardTitle>
                    <CardDescription>{radiologist.specialty}</CardDescription>
                  </div>
                </div>
                {radiologist.verified && <BadgeCheck className="h-5 w-5 text-blue-500" />}
              </div>
            </CardHeader>
            <CardContent>
              <div className="grid gap-2">
                <div className="flex items-center justify-between text-sm">
                  <span className="text-muted-foreground">Status</span>
                  <Badge variant={radiologist.status === "Active" ? "default" : "outline"}>{radiologist.status}</Badge>
                </div>
                <div className="flex items-center justify-between text-sm">
                  <span className="text-muted-foreground">Reports Completed</span>
                  <span>{radiologist.reportsCompleted}</span>
                </div>
                <div className="flex items-center justify-between text-sm">
                  <span className="text-muted-foreground">Avg. Turnaround</span>
                  <span>{radiologist.avgTurnaround}</span>
                </div>
                <div className="flex items-center justify-between text-sm">
                  <span className="text-muted-foreground">Current Load</span>
                  <div className="flex items-center">
                    {radiologist.currentLoad > 0 ? <Clock className="mr-1 h-3 w-3 text-amber-500" /> : null}
                    <span>{radiologist.currentLoad} reports</span>
                  </div>
                </div>
                <div className="mt-4 flex justify-end gap-2">
                  <Button variant="outline" size="sm">
                    Profile
                  </Button>
                  <Button size="sm">Assign</Button>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}

<Card className="flex flex-col items-center justify-center p-6">
          <div className="rounded-full bg-muted p-6">
            <Plus className="h-8 w-8 text-muted-foreground" />
          </div>
          <h3 className="mt-4 font-medium">Add New Radiologist</h3>
          <p className="mt-1 text-sm text-center text-muted-foreground">
            Expand your network with qualified radiologists
          </p>
          <Button className="mt-4" variant="outline">
            <UserPlus className="mr-2 h-4 w-4" />
            Invite Radiologist
          </Button>
        </Card>
      </div>
    </DashboardShell>
  )
}

const radiologists = [
  {
    id: 1,
    name: "Dr. Sarah Smith",
    initials: "SS",
    specialty: "Neuroradiology",
    avatar: "/placeholder.svg?height=40&width=40",
    verified: true,
    status: "Active",
    reportsCompleted: 245,
    avgTurnaround: "6.2 hours",
    currentLoad: 3,
  },
  {
    id: 2,
    name: "Dr. Michael Johnson",
    initials: "MJ",
    specialty: "Thoracic Radiology",
    avatar: "/placeholder.svg?height=40&width=40",
    verified: true,
    status: "Active",
    reportsCompleted: 189,
    avgTurnaround: "8.5 hours",
    currentLoad: 1,
  },
  {
    id: 3,
    name: "Dr. Emily Williams",
    initials: "EW",
    specialty: "Musculoskeletal Radiology",
    avatar: "/placeholder.svg?height=40&width=40",
    verified: true,
    status: "Away",
    reportsCompleted: 156,
    avgTurnaround: "7.8 hours",
    currentLoad: 0,
  },
  {
    id: 4,
    name: "Dr. Robert Brown",
    initials: "RB",
    specialty: "Abdominal Radiology",
    avatar: "/placeholder.svg?height=40&width=40",
    verified: false,
    status: "Active",
    reportsCompleted: 92,
    avgTurnaround: "9.1 hours",
    currentLoad: 2,
  },
  {
    id: 5,
    name: "Dr. Lisa Chen",
    initials: "LC",
    specialty: "Pediatric Radiology",
    avatar: "/placeholder.svg?height=40&width=40",
    verified: true,
    status: "Active",
    reportsCompleted: 178,
    avgTurnaround: "5.4 hours",
    currentLoad: 2,
  },
]

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { RecentActivity } from "@/components/dashboard"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { DashboardShell } from "@/components/dashboard/dashboard-shell"
import { BrandLogo } from "@/components/brand-logo"

export default function DashboardPage() {
  return (
    <DashboardShell>
      <div className="flex items-center justify-between mb-8">
        <BrandLogo className="h-10 w-auto" />
        <Link href="/upload">
          <Button>Upload New Scan</Button>
        </Link>
      </div>

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        <Card className="border-l-4 border-l-primary">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Pending Reports</CardTitle>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              className="h-4 w-4 text-muted-foreground"
            >
              <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
            </svg>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">12</div>
            <p className="text-xs text-muted-foreground">+2 since yesterday</p>
          </CardContent>
        </Card>
        <Card className="border-l-4 border-l-primary">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Completed Reports</CardTitle>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              className="h-4 w-4 text-muted-foreground"
            >
              <rect width="20" height="14" x="2" y="5" rx="2" />
              <path d="M2 10h20" />
            </svg>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">45</div>
            <p className="text-xs text-muted-foreground">+8 from last week</p>
          </CardContent>
        </Card>
        <Card className="border-l-4 border-l-primary">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Active Radiologists</CardTitle>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              className="h-4 w-4 text-muted-foreground"
            >
              <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
            </svg>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">8</div>
            <p className="text-xs text-muted-foreground">3 currently reviewing scans</p>
          </CardContent>
        </Card>
      </div>
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7 mt-8">
        <Card className="col-span-4">
          <CardHeader>
            <CardTitle>Recent Scans</CardTitle>
            <CardDescription>You have uploaded 6 scans in the last 30 days.</CardDescription>
          </CardHeader>
          <CardContent>
            <RecentActivity />
          </CardContent>
        </Card>
        <Card className="col-span-3">
          <CardHeader>
            <CardTitle>Upcoming Reports</CardTitle>
            <CardDescription>Reports expected to be completed soon.</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {[1, 2, 3].map((i) => (
                <div key={i} className="flex items-center">
                  <div className="space-y-1">
                    <p className="text-sm font-medium leading-none">Patient #{1000 + i}</p>
                    <p className="text-sm text-muted-foreground">MRI Brain - Expected in ~{i * 2} hours</p>
                  </div>
                  <div className="ml-auto font-medium">Dr. Smith</div>
                </div>
              ))}
            </div>
          </CardContent>
          <CardFooter>
            <Link href="/reports/pending">
              <Button variant="outline" className="w-full">
                View All
              </Button>
            </Link>
          </CardFooter>
        </Card>
      </div>
    </DashboardShell>
  )
}

[V0_FILE]typescriptreact:file="components/brand-logo.tsx"
import { cn } from "@/lib/utils"

interface BrandLogoProps {
  className?: string
}

export function BrandLogo({ className }: BrandLogoProps) {
  return (
    <div className={cn("flex items-center", className)}>
      <div className="relative h-8 w-8 mr-2">
        <div className="absolute inset-0 bg-primary rounded-full opacity-20"></div>
        <div className="absolute inset-1 bg-primary rounded-full opacity-40"></div>
        <div className="absolute inset-2 bg-primary rounded-full opacity-60"></div>
        <div className="absolute inset-3 bg-primary rounded-full"></div>
      </div>
      <div className="flex flex-col">
        <span className="font-bold text-lg leading-none text-primary">RadiantView</span>
        <span className="text-xs text-muted-foreground leading-none">Medical Imaging Network</span>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/dashboard/dashboard-header.tsx" isEdit="true"
import type React from "react"
interface DashboardHeaderProps {
  heading: string
  text?: string
  children?: React.ReactNode
}

export function DashboardHeader({ heading, text, children }: DashboardHeaderProps) {
  return (
    <div className="flex items-center justify-between px-2 mb-8">
      <div className="grid gap-1">
        <h1 className="text-2xl font-bold tracking-wide">{heading}</h1>
        {text && <p className="text-muted-foreground">{text}</p>}
      </div>
      {children}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/dashboard/dashboard-shell.tsx" isEdit="true"
import type React from "react"
interface DashboardShellProps {
  children: React.ReactNode
}

export function DashboardShell({ children }: DashboardShellProps) {
  return (
    <div className="flex min-h-screen flex-col bg-gradient-to-b from-background to-background/80">
      <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
        <div className="mx-auto grid w-full max-w-7xl gap-4 md:gap-8">{children}</div>
      </main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx"
import type React from "react"
import "@/app/globals.css"
import { ThemeProvider } from "@/components/theme-provider"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <title>RadiantView - Medical Imaging Network</title>
        <meta
          name="description"
          content="Connect healthcare providers with remote radiologists for seamless medical reporting"
        />
      </head>
      <body>
        <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="tailwind.config.ts"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config

[V0_FILE]css:file="app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 210 40% 98%;
    --foreground: 222.2 84% 4.9%;

--card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

--popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

--primary: 196 80% 30%;
    --primary-foreground: 210 40% 98%;

--secondary: 16 80% 60%;
    --secondary-foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

--accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

--border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

--radius: 0.5rem;
  }

.dark {
    --background: 196 70% 8%;
    --foreground: 210 40% 98%;

--card: 196 70% 12%;
    --card-foreground: 210 40% 98%;

--popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

--primary: 196 80% 40%;
    --primary-foreground: 222.2 47.4% 11.2%;

--secondary: 16 80% 50%;
    --secondary-foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

--accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

[V0_FILE]typescriptreact:file="app/reports/[id]/page.tsx" isEdit="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Textarea } from "@/components/ui/textarea"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { DashboardShell } from "@/components/dashboard/dashboard-shell"
import { ArrowLeft, Download, FileText, Printer, Share2 } from "lucide-react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { BrandLogo } from "@/components/brand-logo"

export default function ReportDetailPage({ params }: { params: { id: string } }) {
  const [activeTab, setActiveTab] = useState("report")

// In a real app, you would fetch the report data based on the ID
  const report = {
    id: params.id,
    patientId: "P-12345",
    patientName: "John Doe",
    scanType: "MRI Brain",
    date: "2023-04-15",
    status: "completed",
    radiologist: {
      name: "Dr. Sarah Smith",
      avatar: "/placeholder.svg?height=40&width=40",
      initials: "SS",
    },
    priority: "Routine",
    clinicalInfo:
      "Patient presents with persistent headaches for 3 weeks. No history of trauma. Family history of migraines.",
    findings:
      "No evidence of acute intracranial hemorrhage, mass effect, or midline shift. No abnormal enhancement or restricted diffusion. Ventricles and sulci are normal in size and configuration. No abnormal signal intensity within the brain parenchyma.",
    impression: "Normal MRI examination of the brain. No structural abnormality to explain patient's headaches.",
    images: [
      "/placeholder.svg?height=300&width=300&text=Axial+T1",
      "/placeholder.svg?height=300&width=300&text=Axial+T2",
      "/placeholder.svg?height=300&width=300&text=Sagittal+T1",
      "/placeholder.svg?height=300&width=300&text=Coronal+T2",
    ],
  }

return (
    <DashboardShell>
      <div className="flex items-center justify-between mb-8">
        <BrandLogo className="h-10 w-auto" />
        <div className="flex gap-2">
          <Link href="/reports">
            <Button variant="outline">
              <ArrowLeft className="mr-2 h-4 w-4" />
              All Reports
            </Button>
          </Link>
          <Button>
            <Printer className="mr-2 h-4 w-4" />
            Print Report
          </Button>
        </div>
      </div>

<div className="grid gap-6 md:grid-cols-3">
        <Card className="md:col-span-1">
          <CardHeader>
            <CardTitle>Patient Information</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-2 gap-1">
              <div className="text-sm font-medium">Patient ID</div>
              <div className="text-sm text-right">{report.patientId}</div>

<div className="text-sm font-medium">Patient Name</div>
              <div className="text-sm text-right">{report.patientName}</div>

<div className="text-sm font-medium">Scan Type</div>
              <div className="text-sm text-right">{report.scanType}</div>

<div className="text-sm font-medium">Date</div>
              <div className="text-sm text-right">{report.date}</div>

<div className="text-sm font-medium">Priority</div>
              <div className="text-sm text-right">{report.priority}</div>

<div className="text-sm font-medium">Status</div>
              <div className="text-sm text-right">
                <Badge variant={report.status === "completed" ? "default" : "outline"}>
                  {report.status.charAt(0).toUpperCase() + report.status.slice(1)}
                </Badge>
              </div>
            </div>

<div>
              <div className="text-sm font-medium mb-2">Radiologist</div>
              <div className="flex items-center space-x-2">
                <Avatar className="h-8 w-8">
                  <AvatarImage src={report.radiologist.avatar} alt={report.radiologist.name} />
                  <AvatarFallback>{report.radiologist.initials}</AvatarFallback>
                </Avatar>
                <div className="text-sm">{report.radiologist.name}</div>
              </div>
            </div>

<div>
              <div className="text-sm font-medium mb-2">Clinical Information</div>
              <div className="text-sm text-muted-foreground">{report.clinicalInfo}</div>
            </div>

<div className="flex flex-col gap-2 pt-4">
              <Button variant="outline" size="sm" className="justify-start">
                <Download className="mr-2 h-4 w-4" />
                Download Report
              </Button>
              <Button variant="outline" size="sm" className="justify-start">
                <Share2 className="mr-2 h-4 w-4" />
                Share Report
              </Button>
              <Button variant="outline" size="sm" className="justify-start">
                <FileText className="mr-2 h-4 w-4" />
                Export as PDF
              </Button>
            </div>
          </CardContent>
        </Card>

<Card className="md:col-span-2">
          <CardHeader className="px-6">
            <CardTitle>Report Details</CardTitle>
          </CardHeader>
          <CardContent className="p-6">
            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
              <TabsList className="grid w-full grid-cols-2 mb-4">
                <TabsTrigger value="report">Report</TabsTrigger>
                <TabsTrigger value="images">Images</TabsTrigger>
              </TabsList>

<TabsContent value="report" className="mt-0 space-y-4">
                <div>
                  <h3 className="text-lg font-medium">Findings</h3>
                  <p className="mt-2 text-sm text-muted-foreground">{report.findings}</p>
                </div>

<div>
                  <h3 className="text-lg font-medium">Impression</h3>
                  <p className="mt-2 text-sm text-muted-foreground">{report.impression}</p>
                </div>

<div>
                  <h3 className="text-lg font-medium">Additional Comments</h3>
                  <Textarea
                    placeholder="Add additional comments or notes about this report..."
                    className="mt-2"
                    rows={4}
                    disabled={report.status === "completed"}
                  />
                </div>
              </TabsContent>

<TabsContent value="images" className="mt-0">
                <div className="grid grid-cols-2 gap-4">
                  {report.images.map((image, index) => (
                    <div key={index} className="relative aspect-square bg-muted rounded-md overflow-hidden">
                      <img
                        src={image || "/placeholder.svg"}
                        alt={`Scan ${index + 1}`}
                        className="object-cover w-full h-full"
                      />
                    </div>
                  ))}
                </div>
              </TabsContent>
            </Tabs>
          </CardContent>

{report.status !== "completed" && (
            <CardFooter className="flex justify-between border-t px-6 py-4">
              <Button variant="outline">Save Draft</Button>
              <Button>Finalize Report</Button>
            </CardFooter>
          )}
        </Card>
      </div>
    </DashboardShell>
  )
}
</article></body></html>