10a:"ExplicitChatIdProvider" 10b:I[903690,["$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$83","$84","$85","$7f","$81","$86","$87","$88","$89","$8a","$8b","$80","$8c","$8d"],"$10a"] 10c:I[838238,["$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$83","$84","$85","$7f","$81","$86","$87","$88","$89","$8a","$8b","$80","$8c","$8d"],"SWRDataProvider"] 10e:[] 10f:[["b_fw26Y8mC3hG",null]] 110:[["b_fw26Y8mC3hG",{"templateVersionId":null,"templateCanonId":null}]] 111:[["sp6I5gnKyBK","$D2025-11-30T04:15:28.634Z"],["b_fw26Y8mC3hG","$D2025-11-30T04:24:14.633Z"]] 112:[["b_fw26Y8mC3hG",false]] 113:[["b_fw26Y8mC3hG",{"deploymentId":"dpl_HtbAYxo1CGQNe9fy6H7xjPvLCqKr"}]] 114:[["b_fw26Y8mC3hG",null]] 115:[["b_fw26Y8mC3hG",true]] 116:[["b_fw26Y8mC3hG",true]] 117:[] 118:T8790c,[V0_FILE]typescriptreact:file="components/video-call-view.tsx" isMerged="true" import { Button } from '@/components/ui/button' import { Card, CardContent } from '@/components/ui/card' import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' import { Mic, MicOff, Video, VideoOff, Monitor, Phone, MessageSquare } from 'lucide-react' export function VideoCallView() { return (

{/* Video Section */}

{/* Patient Video - Large */} {/* Doctor Video - Small */}

Dr. Michael Roberts (You)

{/* Call Controls */}

{/* Side Panel */}

Telehealth Transcript

) } [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.3", "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": "^0.9.9", "zod": "3.25.76", "react-draggable": "4.5.0", "@supabase/ssr": "0.8.0" }, "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/agenda-view.tsx" isMerged="true" 'use client' import { useState } from 'react' import { ChevronLeft, ChevronRight, Plus } from 'lucide-react' import { Button } from '@/components/ui/button' import { cn } from '@/lib/utils' const hours = Array.from({ length: 13 }, (_, i) => i + 8) // 8 AM to 8 PM const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] const dates = ['4', '5', '6', '7', '8'] const appointments = [ { id: 1, patient: 'Sarah Johnson', type: 'Follow-up', day: 0, // Monday startHour: 10, duration: 1, // 1 hour color: 'bg-blue-100 border-blue-200 text-blue-700', }, { id: 2, patient: 'Michael Chen', type: 'Initial Consultation', day: 1, // Tuesday startHour: 14, duration: 1, color: 'bg-purple-100 border-purple-200 text-purple-700', }, { id: 3, patient: 'Emma Wilson', type: 'Lab Review', day: 2, // Wednesday startHour: 11, duration: 0.5, color: 'bg-green-100 border-green-200 text-green-700', }, { id: 4, patient: 'James Rodriguez', type: 'Prescription Renewal', day: 3, // Thursday startHour: 9, duration: 0.5, color: 'bg-orange-100 border-orange-200 text-orange-700', }, { id: 5, patient: 'Sarah Johnson', type: 'Video Call', day: 4, // Friday startHour: 15, duration: 1, color: 'bg-blue-100 border-blue-200 text-blue-700', }, ] export function AgendaView() { const [currentWeek, setCurrentWeek] = useState(new Date()) return (

{/* Calendar Header */}

December 2023

{/* Calendar Grid */}

{/* Days Header */}

TIME

{days.map((day, i) => (

{day}

{dates[i]}

))}

{/* Time Slots */}

{/* Time Column */}

{hours.map((hour) => (

{hour > 12 ? `${hour - 12} PM` : `${hour} ${hour === 12 ? 'PM' : 'AM'}`}

))}

{/* Days Columns */} {days.map((day, dayIndex) => (

{hours.map((hour) => (

))} {/* Appointments */} {appointments .filter(apt => apt.day === dayIndex) .map(apt => (

{apt.patient}

{apt.type}

{apt.startHour > 12 ? apt.startHour - 12 : apt.startHour}:00 - {apt.startHour + apt.duration > 12 ? apt.startHour + apt.duration - 12 : apt.startHour + apt.duration}:00

))}

) } [V0_FILE]typescriptreact:file="components/patient-vitals.tsx" isMerged="true" import { Activity, Heart, Thermometer, Weight } from 'lucide-react' import { Card } from '@/components/ui/card' export function PatientVitals() { return (

Heart Rate

75 bpm

Temperature

37.0°C

Blood Pressure

132/87 mmHg

Weight

79.0 kg

) } [V0_FILE]typescriptreact:file="components/placeholder-view.tsx" isMerged="true" import { Construction } from 'lucide-react' interface PlaceholderViewProps { title: string } export function PlaceholderView({ title }: PlaceholderViewProps) { return (

{title}

This page is currently under construction.

) } [V0_FILE]typescript:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes { variant?: VariantProps["variant"] } const Badge = React.forwardRef(({ className, variant, ...props }, ref) => { return null }) Badge.displayName = "Badge" export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isQuickEdit="true" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = DialogPrimitive.Portal const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} Close )) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (

) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (

) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } [V0_FILE]typescriptreact:file="components/settings-view.tsx" isMerged="true" "use client" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Switch } from "@/components/ui/switch" import { Button } from "@/components/ui/button" import { Globe, Moon } from "lucide-react" import type { UnitSystem } from "./telehealth-dashboard" interface SettingsViewProps { unitSystem: UnitSystem onUnitChange: (system: UnitSystem) => void } export function SettingsView({ unitSystem, onUnitChange }: SettingsViewProps) { return (

Settings

Preferences Account Notifications Privacy Unit System Choose your preferred measurement system for lab results and vitals. onUnitChange(val as UnitSystem)} className="grid grid-cols-1 md:grid-cols-2 gap-4" >

US Units mg/dL, lb, °F

Example: Glucose 95 mg/dL

SI Units mmol/L, kg, °C

Example: Glucose 5.3 mmol/L

Appearance Customize how the application looks on your device.

Dark Mode

Adjust the appearance to reduce eye strain.

Profile Information Update your account settings and email preferences.

dr.smith@hospital.com

Notification Preferences Choose what you want to be notified about.

Lab Results

Get notified when new results are available.

Patient Messages

Receive emails for new patient messages.

) } [V0_FILE]css:file="styles/globals.css" isFixed="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 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.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 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.625rem; --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 { /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */ --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); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/ui/sheet.tsx" isMerged="true" "use client" import * as React from "react" import * as SheetPrimitive from "@radix-ui/react-dialog" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Sheet = SheetPrimitive.Root const SheetTrigger = SheetPrimitive.Trigger const SheetClose = SheetPrimitive.Close const SheetPortal = SheetPrimitive.Portal const SheetOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetOverlay.displayName = SheetPrimitive.Overlay.displayName interface SheetContentProps extends React.ComponentPropsWithoutRef { side?: "top" | "bottom" | "left" | "right" } const SheetContent = React.forwardRef, SheetContentProps>( ({ side = "right", className, children, ...props }, ref) => { const sideStyles = { top: "inset-x-0 top-0 border-b", bottom: "inset-x-0 bottom-0 border-t", left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm", right: "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm", } return ( Close {children} ) }, ) SheetContent.displayName = SheetPrimitive.Content.displayName const SheetHeader = ({ className, ...props }: React.HTMLAttributes) => (

) SheetHeader.displayName = "SheetHeader" const SheetFooter = ({ className, ...props }: React.HTMLAttributes) => (

) SheetFooter.displayName = "SheetFooter" const SheetTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetTitle.displayName = SheetPrimitive.Title.displayName const SheetDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetDescription.displayName = SheetPrimitive.Description.displayName export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, } [V0_FILE]typescriptreact:file="components/finance-view.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { Wallet, CreditCard, Building2, TrendingUp, History, CheckCircle2, AlertCircle, ArrowUpRight, } from "lucide-react" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export function FinanceView() { const [isEditingBank, setIsEditingBank] = useState(false) const [bankDetails, setBankDetails] = useState({ bankName: "Vietcombank", accountName: "DR SARAH JOHNSON", accountNumber: "**** **** **** 8888", branch: "Hanoi Main Branch", }) const transactions = [ { id: "TRX-9823", date: "2024-03-20", patient: "Hoàng Trọng Sang", test: "Thyroid Panel (TSH, T3, T4)", lab: "Diag Center - Cao Thắng", amount: "150,000", status: "pending", }, { id: "TRX-9822", date: "2024-03-19", patient: "Nguyễn Thị Mai", test: "MRI Brain Scan", lab: "Bernard Clinic", amount: "450,000", status: "pending", }, { id: "TRX-9821", date: "2024-03-15", patient: "Trần Văn Hùng", test: "General Health Checkup", lab: "Doctor Check", amount: "300,000", status: "paid", }, { id: "TRX-9820", date: "2024-03-12", patient: "Lê Thị Lan", test: "Diabetes Screening", lab: "Diag Center - Cao Thắng", amount: "80,000", status: "paid", }, { id: "TRX-9819", date: "2024-03-10", patient: "Phạm Minh Tuấn", test: "Liver Function Tests", lab: "Medic Hòa Hảo", amount: "120,000", status: "paid", }, ] return (

Finance & Rewards

Manage your bank details and track your commission rewards.

{/* Key Metrics */}

Total Earnings

₫15,450,000

+12.5% from last month

Pending Payout

₫2,850,000

Available for withdrawal

Tests Ordered

142

Across 5 partner labs

Overview Bank Details Recent Commission Rewards Your rewards for ordering lab tests at our partner facilities. Date Patient Test / Procedure Lab Facility Commission Reward Status {transactions.map((trx) => ( {trx.date} {trx.patient} {trx.test} {trx.lab} +₫{trx.amount} {trx.status === "paid" ? "Paid" : "Pending"} ))}

Bank Account Information (KYC) Provide your bank details to receive commission payouts.

Verification Required

Please ensure the account name matches your registered doctor profile exactly. KYC verification typically takes 1-2 business days.

Bank Name {isEditingBank ? ( ) : (

{bankDetails.bankName}

)}

Branch {isEditingBank ? ( ) : (

{bankDetails.branch}

)}

Account Number {isEditingBank ? ( ) : (

{bankDetails.accountNumber}

)}

Account Holder Name {isEditingBank ? ( ) : (

{bankDetails.accountName}

)}

{isEditingBank ? (

) : ( )}

) } [V0_FILE]typescriptreact:file="components/sidebar.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { User, Settings, MessageSquare, Calendar, PanelLeftClose, PanelLeftOpen, Moon, Sun, LogOut, BookOpen, Scale, PlugZap, Loader2, Wallet, } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" interface SidebarProps { activeItem: string onNavigate: (item: string) => void unitSystem?: "US" | "SI" onUnitChange?: (system: "US" | "SI") => void } export function Sidebar({ activeItem, onNavigate, unitSystem = "US", onUnitChange }: SidebarProps) { const [collapsed, setCollapsed] = useState(true) const [isDark, setIsDark] = useState(false) const [isIntegrationOpen, setIsIntegrationOpen] = useState(false) const [integrationStep, setIntegrationStep] = useState<"form" | "loading" | "success">("form") const navigation = [ { name: "Receptionist", icon: User, id: "receptionist" }, { name: "My Patients", icon: User, id: "patients" }, { name: "My Calendar", icon: Calendar, id: "agenda" }, { name: "Catalog", icon: BookOpen, id: "catalog" }, { name: "Finance", icon: Wallet, id: "finance" }, // Added Finance navigation item { name: "Messages", icon: MessageSquare, id: "chat" }, { name: "Settings", icon: Settings, id: "settings" }, ] // Toggle dark mode useEffect(() => { if (isDark) { document.documentElement.classList.add("dark") } else { document.documentElement.classList.remove("dark") } }, [isDark]) const handleConnect = async (e: React.FormEvent) => { e.preventDefault() setIntegrationStep("loading") // Simulate API call await new Promise((resolve) => setTimeout(resolve, 2000)) setIntegrationStep("success") setTimeout(() => { setIsIntegrationOpen(false) setIntegrationStep("form") }, 1500) } return (

{/* Logo & Toggle */}

{!collapsed && (

NextMedical

)}

{/* Navigation */}

{navigation.map((item) => ( ))}

{/* Footer Actions */}

{onUnitChange && ( )}

) } [V0_FILE]typescriptreact:file="components/dashboard-layout.tsx" isMerged="true" "use client" import type React from "react" import { Sidebar } from "@/components/sidebar" import { BreadcrumbNav } from "@/components/breadcrumb-nav" import { usePathname, useRouter } from "next/navigation" import { useApp } from "@/components/app-provider" import { Button } from "@/components/ui/button" import { GiftIcon, HeartIcon, Copy, Check } from "lucide-react" import { useState } from "react" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" export function DashboardLayout({ children }: { children: React.ReactNode }) { const pathname = usePathname() const router = useRouter() const { unitSystem, setUnitSystem } = useApp() const [isReferOpen, setIsReferOpen] = useState(false) const [isCopied, setIsCopied] = useState(false) const referralLink = "https://telehealth.app/ref/dr-smith-123" const handleCopyLink = () => { navigator.clipboard.writeText(referralLink) setIsCopied(true) setTimeout(() => setIsCopied(false), 2000) } const getActiveSidebarItem = () => { if (pathname.includes("/receptionist")) return "receptionist" if (pathname.includes("/my-patients")) return "patients" if (pathname.includes("/agenda")) return "agenda" if (pathname.includes("/catalog")) return "catalog" if (pathname.includes("/finance")) return "finance" if (pathname.includes("/messages")) return "chat" if (pathname.includes("/settings")) return "settings" return "" } const getBreadcrumbs = () => { if (pathname.includes("/receptionist")) return [{ label: "Receptionist", active: true }] if (pathname.includes("/agenda")) return [{ label: "My Calendar", active: true }] if (pathname.includes("/finance")) return [{ label: "Finance & Rewards", active: true }] if (pathname.includes("/settings")) return [{ label: "Settings", active: true }] if (pathname.includes("/messages")) return [{ label: "Messages", active: true }] if (pathname.includes("/catalog")) return [{ label: "Catalog", active: true }] if (pathname === "/my-patients") { return [{ label: "My Patients", active: true }] } if (pathname.includes("/my-patients/")) { return [ { label: "My Patients", href: "/my-patients" }, { label: "Patient Details", active: true }, ] } return [] } const headerActions = ( <> ) const handleNavigate = (view: string) => { switch (view) { case "receptionist": router.push("/receptionist") break case "patients": router.push("/my-patients") break case "agenda": router.push("/agenda") break case "catalog": router.push("/catalog") break case "finance": router.push("/finance") break case "chat": router.push("/messages") break case "settings": router.push("/settings") break } } return (

{children}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useEffect } from "react" import { useRouter } from "next/navigation" export default function Home() { const router = useRouter() useEffect(() => { router.push("/my-patients") }, [router]) return null } [V0_FILE]typescriptreact:file="components/patient-list-view.tsx" isMerged="true" "use client" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Search, MoreHorizontal } from "lucide-react" interface PatientListViewProps { patients: Array<{ id: string name: string dob: string phone: string gender?: string age?: number lastVisit?: string examDate: string patientStatus: string paymentStatus: string }> onSelectPatient: (id: string) => void } export function PatientListView({ patients, onSelectPatient }: PatientListViewProps) { return (

My Patients

{patients.map((patient) => { const initials = patient.name .split(" ") .map((n) => n[0]) .join("") .toUpperCase() .substring(0, 2) return ( onSelectPatient(patient.id)} > ) })} {patients.length === 0 && ( )}

Name	ID	Age/Gender	Last Visit	Patient Status	Payment Status	Actions
{initials} {patient.name}	{patient.id}	{patient.age \|\| "--"} / {patient.gender \|\| "-"}	{patient.lastVisit \|\| "--"}	{patient.patientStatus}	{patient.paymentStatus}
No patients found.

) } [V0_FILE]typescriptreact:file="app/receptionist/page.tsx" isMerged="true" "use client" import { useApp } from "@/components/app-provider" import { ReceptionistView } from "@/components/receptionist-view" export default function ReceptionistPage() { const { patients, setPatients } = useApp() return } [V0_FILE]typescriptreact:file="app/agenda/page.tsx" isMerged="true" "use client" import { AgendaView } from "@/components/agenda-view" export default function AgendaPage() { return } [V0_FILE]typescriptreact:file="app/finance/page.tsx" isMerged="true" "use client" import { FinanceView } from "@/components/finance-view" export default function FinancePage() { return } [V0_FILE]typescriptreact:file="app/settings/page.tsx" isMerged="true" "use client" import { SettingsView } from "@/components/settings-view" import { useApp } from "@/components/app-provider" export default function SettingsPage() { const { unitSystem, setUnitSystem } = useApp() return } [V0_FILE]typescriptreact:file="app/messages/page.tsx" isMerged="true" "use client" import { PlaceholderView } from "@/components/placeholder-view" export default function MessagesPage() { return } [V0_FILE]typescriptreact:file="components/breadcrumb-nav.tsx" isQuickEdit="true" isMerged="true" "use client" import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "@/components/ui/breadcrumb" import { cn } from "@/lib/utils" import Link from "next/link" import type { ReactNode } from "react" interface BreadcrumbNavProps { items: { label: string href?: string active?: boolean onClick?: () => void }[] className?: string actions?: ReactNode } export function BreadcrumbNav({ items, className, actions }: BreadcrumbNavProps) { return (

{items.map((item, index) => (

{index > 0 && } {item.active ? ( {item.label} ) : item.href ? ( {item.label} ) : ( { if (item.onClick) { e.preventDefault() item.onClick() } }} className={cn( "text-muted-foreground hover:text-foreground transition-colors cursor-pointer", !item.onClick && "pointer-events-none", )} > {item.label} )}

))} {actions &&

{actions}

}

) } [V0_FILE]typescriptreact:file="components/documents-view.tsx" isMerged="true" import { FileText, Download, Eye } from "lucide-react" import { Button } from "@/components/ui/button" export interface Document { id: number | string title: string type: string date: string size: string doctor: string status: string } interface DocumentsViewProps { documents: Document[] onAddToCart?: (testName: string) => void } export function DocumentsView({ documents, onAddToCart }: DocumentsViewProps) { return (

{documents.length === 0 ? (

No documents available

) : ( documents.map((doc) => (

{doc.title}

{doc.type} • {doc.date} • {doc.size}

)) )}

) } [V0_FILE]typescriptreact:file="components/clinical-notes-view.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Plus, Search } from "lucide-react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import type { Patient } from "@/components/app-provider" const templates = ["Annual Physical", "Follow-up Visit", "Lab Review", "Medication Review", "Telehealth Visit"] interface ClinicalNotesViewProps { patient: Patient onUpdateNotes: (notes: Patient["clinicalNotes"]) => void } export function ClinicalNotesView({ patient, onUpdateNotes }: ClinicalNotesViewProps) { const notes = patient.clinicalNotes || [] const [searchQuery, setSearchQuery] = useState("") const [isAddingNote, setIsAddingNote] = useState(false) const [newNote, setNewNote] = useState({ title: "", content: "", type: "Consultation" }) const handleSaveNote = () => { if (!newNote.title || !newNote.content) return const note = { id: notes.length + 1, date: new Date().toISOString().split("T")[0], title: newNote.title, type: newNote.type, content: newNote.content, tags: ["New Note"], // Default tag } onUpdateNotes([note, ...notes]) setIsAddingNote(false) setNewNote({ title: "", content: "", type: "Consultation" }) } const filteredNotes = notes.filter( (note) => note.title.toLowerCase().includes(searchQuery.toLowerCase()) || note.content.toLowerCase().includes(searchQuery.toLowerCase()), ) return (

setSearchQuery(e.target.value)} className="pl-9" />

{filteredNotes.length === 0 && !searchQuery && (

No clinical notes recorded

)} {filteredNotes.length === 0 && searchQuery && (

No notes match your search

)}

{filteredNotes.map((note) => (

{note.content}

{note.tags.map((tag) => ( {tag} ))}

))}