[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.99 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.3 0.12 264); --primary-foreground: oklch(0.99 0 0); --secondary: oklch(0.95 0.01 264); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.96 0 0); --muted-foreground: oklch(0.5 0 0); --accent: oklch(0.44 0.16 264); --accent-foreground: oklch(0.99 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.92 0 0); --input: oklch(0.95 0 0); --ring: oklch(0.44 0.16 264); --success: oklch(0.55 0.15 150); --success-foreground: oklch(0.99 0 0); --warning: oklch(0.75 0.15 90); --warning-foreground: oklch(0.145 0 0); --info: oklch(0.5 0.2 240); --info-foreground: oklch(0.99 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.5rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-info: var(--info); --color-info-foreground: var(--info-foreground); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import AssessmentForm from "@/components/assessment-form" export default function Page() { return (

OASIS Assessment

AI-assisted form completion with transparent source citations

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.7", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/assessment-form.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Card } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { FileText, Mic, AlertCircle, ChevronDown, ChevronUp, X, TriangleAlert } from "lucide-react" import { cn } from "@/lib/utils" type CitationSource = "referral" | "audio" | "none" | "warning" interface Citation { source: CitationSource text?: string location?: string timestamp?: string expandable?: boolean warningTitle?: string } interface FormField { id: string code: string label: string description: string value: string citations: Citation[] } const formData: FormField[] = [ { id: "hearing", code: "B0200", label: "Hearing", description: "Ability to hear with hearing aid or hearing appliances if normally used", value: "0", citations: [ { source: "referral", text: "Patient reports no difficulty hearing during conversations. Medical history indicates no hearing loss. Previous audiometry test from 2023 showed normal hearing range. Patient does not use hearing aids or assistive devices.", location: "Page 2, Section: Patient Interview Notes; Page 5, Medical History; Page 12, Audiology Report", expandable: true, }, { source: "audio", text: "Patient clearly responded to all questions without repetition needed", timestamp: "02:34", }, ], }, { id: "vision", code: "B1000", label: "Vision", description: "Ability to see in adequate light with glasses or other visual appliances", value: "0", citations: [ { source: "referral", text: "Wears reading glasses, no visual impairment noted", location: "Page 1, Medical History", }, { source: "none", }, ], }, { id: "health-literacy", code: "B1300", label: "Health Literacy", description: "How often do you need to have someone help you when you read instructions, pamphlets, or other written material from your doctor or pharmacy?", value: "0", citations: [ { source: "none", }, { source: "audio", text: 'Patient stated: "I never have trouble reading my medication instructions"', timestamp: "05:12", }, ], }, { id: "mobility", code: "M1860", label: "Ambulation/Locomotion", description: "Current ability to walk safely", value: "2", citations: [ { source: "referral", text: "Requires walker for mobility, independent with assistive device. Physical therapy notes indicate steady gait with walker. Occupational therapy assessment shows safe transfers. No fall history in past 6 months.", location: "Page 3, Mobility Assessment; Page 7, PT Notes; Page 9, OT Evaluation", expandable: true, }, { source: "audio", text: "Patient confirmed using walker daily, walks to mailbox independently", timestamp: "08:45", }, { source: "warning", warningTitle: "M1860 & GG0170C Alignment Issue", text: 'M1860 = 2 ("requires assistive device") conflicts with GG0170C = 3 ("substantial assistance required"). The codes suggest different levels of independence. Recommend reviewing to ensure consistent assessment across mobility items.', expandable: true, }, ], }, { id: "dressing", code: "GG0130G", label: "Lower Body Dressing", description: "Ability to dress lower body", value: "1", citations: [ { source: "referral", text: "Patient requires minimal assistance with lower body dressing", location: "Page 4, ADL Assessment", }, { source: "audio", text: "Patient can put on pants but needs help with shoes", timestamp: "12:20", }, { source: "warning", warningTitle: "GG0130G & M1820 Alignment Issue", text: 'GG0130G (Self-Care: Lower Body Dressing) with a score of 1 indicates "setup help only", inconsistent with M1820 = 2 ("substantial/maximal assistance"). Recommend changing M1820 to 1 or GG0130G to 2 so that it aligns.', expandable: true, }, ], }, ] const hearingOptions = [ { value: "0", label: "Normal" }, { value: "1", label: "Mild Difficulty" }, { value: "2", label: "Moderate Difficulty" }, { value: "3", label: "Severe Difficulty" }, ] function CitationCard({ citation }: { citation: Citation }) { const [isExpanded, setIsExpanded] = useState(false) if (citation.source === "none") { return (

No Source

No information found

) } const isReferral = citation.source === "referral" const Icon = isReferral ? FileText : Mic const sourceLabel = isReferral ? "Referral Document" : "Audio Transcript" const colorClass = isReferral ? "info" : "success" const shouldTruncate = citation.expandable && !isExpanded const textPreview = citation.text && citation.text.length > 100 ? citation.text.substring(0, 100) + "..." : citation.text return (

{sourceLabel}

{citation.timestamp && ( {citation.timestamp} )}

"{shouldTruncate ? textPreview : citation.text}"

{citation.location &&

{citation.location}

} {citation.expandable && ( )}

) } function CitationPopover({ citation, isVisible, onClose, }: { citation: Citation; isVisible: boolean; onClose: () => void }) { const [isExpanded, setIsExpanded] = useState(false) if (!isVisible) return null const shouldTruncate = citation.expandable && !isExpanded const textPreview = citation.text && citation.text.length > 100 ? citation.text.substring(0, 100) + "..." : citation.text if (citation.source === "warning") { return ( <>

Warning

{citation.warningTitle}

{shouldTruncate ? textPreview : citation.text}

{citation.expandable && ( )}

) } if (citation.source === "none") { return ( <>

No Source

No information found

) } const isReferral = citation.source === "referral" const Icon = isReferral ? FileText : Mic const sourceLabel = isReferral ? "Referral Document" : "Audio Transcript" const colorClass = isReferral ? "text-blue-600" : "text-green-600" const bgClass = isReferral ? "bg-blue-600/10" : "bg-green-600/10" return ( <>

{sourceLabel}

{citation.timestamp && ( {citation.timestamp} )}

"{shouldTruncate ? textPreview : citation.text}"

{citation.location &&

{citation.location}

} {citation.expandable && ( )}

) } export default function AssessmentForm() { const [activePopover, setActivePopover] = useState<{ fieldId: string; citationIndex: number } | null>(null) const handleClickOutside = () => { setActivePopover(null) } return (

OASIS Assessment

Click on document or audio icons to view source citations

{formData.map((field) => (

({field.code}) {field.label}

{field.description}

{field.citations.map((citation, idx) => { const isActive = activePopover?.fieldId === field.id && activePopover?.citationIndex === idx if (citation.source === "warning") { return ( ) } if (citation.source === "none") { return ( ) } const Icon = citation.source === "referral" ? FileText : Mic const colorClass = citation.source === "referral" ? "text-blue-600" : "text-green-600" return ( ) })}

{activePopover?.fieldId === field.id && ( )}

))}

) }