[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { redirect } from "next/navigation" export default function Home() { redirect("/login") } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true" import { redirect } from "next/navigation" export default function DashboardPage() { redirect("/dashboard/monitoring") } [V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" isMerged="true" import type React from "react" import { DashboardNav } from "@/components/dashboard-nav" export default function DashboardLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [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": "next lint" }, "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", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.4", "next-themes": "^0.4.6", "react": "19.1.0", "react-day-picker": "9.8.0", "react-dom": "19.1.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.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/camera-grid.tsx" isMerged="true" "use client" import { useState } from "react" import { CameraFeed } from "@/components/camera-feed" import { Button } from "@/components/ui/button" const cameras = [ { id: 1, name: "Living Room", location: "Main Floor", status: "active" }, { id: 2, name: "Bedroom", location: "Second Floor", status: "active" }, { id: 3, name: "Kitchen", location: "Main Floor", status: "active" }, { id: 4, name: "Bathroom", location: "Main Floor", status: "active" }, ] export function CameraGrid() { const [expandedCamera, setExpandedCamera] = useState(null) const [gridSize, setGridSize] = useState<2 | 4>(4) const displayedCameras = gridSize === 2 ? cameras.slice(0, 2) : cameras if (expandedCamera) { const camera = cameras.find((c) => c.id === expandedCamera) if (!camera) return null return (

{camera.name} - {camera.location}

) } return (

Camera Feeds

{displayedCameras.map((camera) => ( setExpandedCamera(camera.id)} /> ))}

) } [V0_FILE]typescriptreact:file="components/alert-banner.tsx" isMerged="true" "use client" import { useState } from "react" import { Alert, AlertDescription } from "@/components/ui/alert" import { Button } from "@/components/ui/button" export function AlertBanner() { const [alerts, setAlerts] = useState([ { id: 1, type: "warning", message: "Motion detected in Kitchen at 2:34 PM - Patient moving normally", timestamp: new Date(Date.now() - 5 * 60000), }, ]) const dismissAlert = (id: number) => { setAlerts(alerts.filter((alert) => alert.id !== id)) } if (alerts.length === 0) return null return (

{alerts.map((alert) => (

{alert.message}

{alert.timestamp.toLocaleTimeString()}

))}

) } [V0_FILE]jpg:file="public/elderly-care-room-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/elderly-care-room--OjtGxMilTjXohRHHn0RcrPU3GeJ7KB.jpg" isMerged="true" [V0_FILE]typescriptreact:file="components/activity-stats.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" const stats = [ { label: "Total Events Today", value: "24", change: "+3 from yesterday", icon: ( ), color: "text-primary", }, { label: "Critical Alerts", value: "1", change: "Fall detected 2h ago", icon: ( ), color: "text-[var(--alert-critical)]", }, { label: "Medication Compliance", value: "85%", change: "2 doses missed this week", icon: ( ), color: "text-[var(--alert-warning)]", }, { label: "Active Cameras", value: "4/4", change: "All systems operational", icon: ( ), color: "text-[var(--alert-success)]", }, ] export function ActivityStats() { return (

{stats.map((stat) => (

{stat.label}

{stat.icon}

{stat.value}

{stat.change}

))}

) } [V0_FILE]typescriptreact:file="app/dashboard/alerts/page.tsx" isMerged="true" import { EmergencyAlerts } from "@/components/emergency-alerts" import { EmergencyContacts } from "@/components/emergency-contacts" import { AlertHistory } from "@/components/alert-history" export default function AlertsPage() { return (

Emergency Alerts

Critical notifications and emergency response

) } [V0_FILE]typescriptreact:file="components/emergency-alerts.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Alert, AlertDescription } from "@/components/ui/alert" interface EmergencyAlert { id: number type: "fall" | "medical" | "no-response" | "unusual-activity" title: string description: string location: string timestamp: Date status: "active" | "acknowledged" | "resolved" priority: "critical" | "high" | "medium" } const mockAlerts: EmergencyAlert[] = [ { id: 1, type: "fall", title: "Fall Detected - Immediate Attention Required", description: "AI system detected a fall in the bathroom. Patient has not moved for 3 minutes.", location: "Bathroom", timestamp: new Date(Date.now() - 10 * 60 * 1000), status: "active", priority: "critical", }, { id: 2, type: "no-response", title: "No Response to Medication Reminder", description: "Patient has not responded to medication reminder for 30 minutes.", location: "Living Room", timestamp: new Date(Date.now() - 35 * 60 * 1000), status: "acknowledged", priority: "high", }, ] export function EmergencyAlerts() { const [alerts, setAlerts] = useState(mockAlerts) const [isCallingCaregiver, setIsCallingCaregiver] = useState(false) const [isContactingHospital, setIsContactingHospital] = useState(false) const handleAcknowledge = (id: number) => { setAlerts(alerts.map((alert) => (alert.id === id ? { ...alert, status: "acknowledged" as const } : alert))) } const handleResolve = (id: number) => { setAlerts(alerts.map((alert) => (alert.id === id ? { ...alert, status: "resolved" as const } : alert))) } const handleCallCaregiver = () => { setIsCallingCaregiver(true) setTimeout(() => { setIsCallingCaregiver(false) alert("Calling primary caregiver: +1 (555) 123-4567") }, 1500) } const handleContactHospital = () => { setIsContactingHospital(true) setTimeout(() => { setIsContactingHospital(false) alert("Emergency services notified. Ambulance dispatched to registered address.") }, 1500) } const activeAlerts = alerts.filter((a) => a.status === "active") const acknowledgedAlerts = alerts.filter((a) => a.status === "acknowledged") return (

{activeAlerts.length > 0 && (

{activeAlerts.length} Active Emergency {activeAlerts.length === 1 ? "Alert" : "Alerts"}

Immediate action required

)}

{alerts.map((alert) => (

{alert.title} {alert.status.toUpperCase()}

{alert.description}

{alert.location} {alert.timestamp.toLocaleString()}

{alert.status === "active" && ( <> )} {alert.status === "acknowledged" && ( )} {alert.status === "resolved" && ( Resolved )}

))}

) } [V0_FILE]typescriptreact:file="components/alert-history.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" const history = [ { id: 1, type: "Resolved", title: "Fall Alert - Bathroom", description: "Caregiver arrived on scene. Patient assisted safely.", timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000), responseTime: "8 minutes", }, { id: 2, type: "Resolved", title: "Medication Reminder", description: "Patient took medication after second reminder.", timestamp: new Date(Date.now() - 6 * 60 * 60 * 1000), responseTime: "15 minutes", }, { id: 3, type: "Resolved", title: "Extended Inactivity", description: "Patient was sleeping. No action required.", timestamp: new Date(Date.now() - 24 * 60 * 60 * 1000), responseTime: "5 minutes", }, ] export function AlertHistory() { return ( Recent Alert History

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

{item.title}

{item.type}

{item.description}

{item.timestamp.toLocaleString()} Response time: {item.responseTime}

{index < history.length - 1 &&

}

))}

) } [V0_FILE]typescriptreact:file="app/dashboard/settings/page.tsx" isMerged="true" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { CameraSettings } from "@/components/camera-settings" import { MedicationSettings } from "@/components/medication-settings" import { NotificationSettings } from "@/components/notification-settings" import { ProfileSettings } from "@/components/profile-settings" export default function SettingsPage() { return (

Settings

Configure your monitoring system and preferences

Cameras Medications Notifications Profile

) } [V0_FILE]typescriptreact:file="components/camera-settings.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" const cameras = [ { id: 1, name: "Living Room", location: "Main Floor", status: "active", recording: true, aiEnabled: true }, { id: 2, name: "Bedroom", location: "Second Floor", status: "active", recording: true, aiEnabled: true }, { id: 3, name: "Kitchen", location: "Main Floor", status: "active", recording: true, aiEnabled: false }, { id: 4, name: "Bathroom", location: "Main Floor", status: "active", recording: false, aiEnabled: true }, ] export function CameraSettings() { const [cameraList, setCameraList] = useState(cameras) const toggleRecording = (id: number) => { setCameraList(cameraList.map((cam) => (cam.id === id ? { ...cam, recording: !cam.recording } : cam))) } const toggleAI = (id: number) => { setCameraList(cameraList.map((cam) => (cam.id === id ? { ...cam, aiEnabled: !cam.aiEnabled } : cam))) } return (

Camera Management Configure your camera feeds and AI detection settings {cameraList.map((camera) => (

{camera.name}

{camera.status}

{camera.location}

Recording

Save video footage

toggleRecording(camera.id)} />

AI Detection

Fall & activity detection

toggleAI(camera.id)} />

))} AI Detection Settings Configure AI-powered monitoring features

Fall Detection

Automatically detect falls and send alerts

Inactivity Monitoring

Alert when no movement detected for extended period

Unusual Pattern Detection

Detect abnormal behavior patterns

Inactivity Alert Threshold (minutes)

Alert if no movement detected for this duration

) } [V0_FILE]typescriptreact:file="app/signup/page.tsx" isMerged="true" import { SignupForm } from "@/components/signup-form" export default function SignupPage() { return (

Smart Care Vision

Intelligent Elderly Care Monitoring System

) } [V0_FILE]typescriptreact:file="components/signup-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" export function SignupForm() { const router = useRouter() const [formData, setFormData] = useState({ fullName: "", email: "", password: "", confirmPassword: "", phone: "", }) const [isLoading, setIsLoading] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) // Validate passwords match if (formData.password !== formData.confirmPassword) { alert("Passwords do not match") setIsLoading(false) return } // Simulate signup setTimeout(() => { setIsLoading(false) router.push("/dashboard") }, 1000) } const handleChange = (e: React.ChangeEvent) => { setFormData({ ...formData, [e.target.id]: e.target.value, }) } return ( Create Account Sign up to start monitoring your loved ones

Already have an account?{" "}

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* CCTV monitoring theme with blue-gray tones */ --background: oklch(1 0 0); /* Changed background to white */ --foreground: oklch(0.25 0.08 240); --card: oklch(1 0 0); --card-foreground: oklch(0.25 0.08 240); --popover: oklch(1 0 0); --popover-foreground: oklch(0.25 0.08 240); --primary: oklch(0.55 0.15 240); --primary-foreground: oklch(0.25 0.08 240); --secondary: oklch(0.96 0.005 240); --secondary-foreground: oklch(0.25 0.08 240); --muted: oklch(0.97 0.005 240); --muted-foreground: oklch(0.3 0.08 240); --accent: oklch(0.6 0.18 220); --accent-foreground: oklch(0.25 0.08 240); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.99 0 0); --border: oklch(0.9 0.005 240); --input: oklch(0.98 0.005 240); --ring: oklch(0.55 0.15 240); --chart-1: oklch(0.6 0.18 220); --chart-2: oklch(0.65 0.2 260); --chart-3: oklch(0.7 0.15 200); --chart-4: oklch(0.55 0.12 280); --chart-5: oklch(0.5 0.1 240); --radius: 0.5rem; --sidebar: oklch(0.99 0 0); --sidebar-foreground: oklch(0.25 0.08 240); --sidebar-primary: oklch(0.55 0.15 240); --sidebar-primary-foreground: oklch(0.25 0.08 240); --sidebar-accent: oklch(0.96 0.005 240); --sidebar-accent-foreground: oklch(0.25 0.08 240); --sidebar-border: oklch(0.9 0.005 240); --sidebar-ring: oklch(0.55 0.15 240); /* Custom CCTV monitoring colors */ --monitor-bg: oklch(0.98 0.005 240); --monitor-panel: oklch(1 0 0); --monitor-border: oklch(0.9 0.005 240); --alert-critical: oklch(0.55 0.22 25); --alert-warning: oklch(0.7 0.18 60); --alert-success: oklch(0.6 0.15 150); --camera-active: oklch(0.6 0.18 220); } .dark { /* Dark theme optimized for CCTV monitoring */ --background: oklch(1 0 0); /* Changed dark theme background to white as well */ --foreground: oklch(0.25 0.08 240); --card: oklch(1 0 0); --card-foreground: oklch(0.25 0.08 240); --popover: oklch(0.99 0 0); --popover-foreground: oklch(0.25 0.08 240); --primary: oklch(0.6 0.18 220); --primary-foreground: oklch(0.25 0.08 240); --secondary: oklch(0.96 0.005 240); --secondary-foreground: oklch(0.25 0.08 240); --muted: oklch(0.97 0.005 240); --muted-foreground: oklch(0.3 0.08 240); --accent: oklch(0.6 0.18 220); --accent-foreground: oklch(0.25 0.08 240); --destructive: oklch(0.55 0.22 25); --destructive-foreground: oklch(0.99 0 0); --border: oklch(0.9 0.005 240); --input: oklch(0.98 0.005 240); --ring: oklch(0.6 0.18 220); --chart-1: oklch(0.6 0.18 220); --chart-2: oklch(0.65 0.2 260); --chart-3: oklch(0.7 0.15 200); --chart-4: oklch(0.55 0.12 280); --chart-5: oklch(0.5 0.1 240); --sidebar: oklch(0.99 0 0); --sidebar-foreground: oklch(0.25 0.08 240); --sidebar-primary: oklch(0.6 0.18 220); --sidebar-primary-foreground: oklch(0.25 0.08 240); --sidebar-accent: oklch(0.96 0.005 240); --sidebar-accent-foreground: oklch(0.25 0.08 240); --sidebar-border: oklch(0.9 0.005 240); --sidebar-ring: oklch(0.6 0.18 220); --monitor-bg: oklch(0.98 0.005 240); --monitor-panel: oklch(1 0 0); --monitor-border: oklch(0.9 0.005 240); --alert-critical: oklch(0.55 0.22 25); --alert-warning: oklch(0.7 0.18 60); --alert-success: oklch(0.6 0.15 150); --camera-active: oklch(0.6 0.18 220); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --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="app/forgot-password/page.tsx" isMerged="true" import { ForgotPasswordForm } from "@/components/forgot-password-form" import { Shield } from "lucide-react" export default function ForgotPasswordPage() { return (

Smart Care Vision

Reset Your Password

) } [V0_FILE]typescriptreact:file="components/forgot-password-form.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { ArrowLeft, CheckCircle2, Mail } from "lucide-react" export function ForgotPasswordForm() { const router = useRouter() const [step, setStep] = useState<"email" | "verify" | "reset" | "success">("email") const [email, setEmail] = useState("") const [verificationCode, setVerificationCode] = useState("") const [newPassword, setNewPassword] = useState("") const [confirmPassword, setConfirmPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") const handleEmailSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError("") // Simulate sending verification code to email setTimeout(() => { setIsLoading(false) setStep("verify") }, 1000) } const handleVerifyCode = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError("") // Simulate code verification (in real app, verify with backend) setTimeout(() => { // For demo purposes, accept any 6-digit code if (verificationCode.length === 6) { setIsLoading(false) setStep("reset") } else { setIsLoading(false) setError("Please enter a valid 6-digit code") } }, 1000) } const handlePasswordReset = async (e: React.FormEvent) => { e.preventDefault() setError("") if (newPassword !== confirmPassword) { setError("Passwords do not match") return } if (newPassword.length < 8) { setError("Password must be at least 8 characters") return } setIsLoading(true) // Simulate password reset setTimeout(() => { setIsLoading(false) setStep("success") }, 1000) } if (step === "success") { return (

Password Reset Successful Your password has been successfully reset. You can now sign in with your new password. ) } if (step === "reset") { return ( Set New Password Enter your new password for {email}

{error && (

{error}

)}

New Password setNewPassword(e.target.value)} required className="h-12 text-base text-blue-900" />

Confirm New Password setConfirmPassword(e.target.value)} required className="h-12 text-base text-blue-900" />

Password must be at least 8 characters long

) } if (step === "verify") { return (

Check Your Email We've sent a 6-digit verification code to {email}

{error && (

{error}

)}

Verification Code setVerificationCode(e.target.value.replace(/\D/g, "").slice(0, 6))} required maxLength={6} className="h-12 text-base text-blue-900 text-center text-2xl tracking-widest font-mono" />

Didn't receive the code?{" "}

) } return ( Forgot Password? Enter your email address and we'll help you reset your password ) } [V0_FILE]typescriptreact:file="app/dashboard/activity/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { ActivityLog } from "@/components/activity-log" import { ActivityStats } from "@/components/activity-stats" import { ActivityFilters } from "@/components/activity-filters" export default function ActivityPage() { const [eventType, setEventType] = useState("all") const [timePeriod, setTimePeriod] = useState("today") const [location, setLocation] = useState("all-locations") return (

Activity Log

Recorded events and detection history

) } [V0_FILE]typescriptreact:file="components/activity-filters.tsx" isEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" interface ActivityFiltersProps { eventType: string timePeriod: string location: string onEventTypeChange: (value: string) => void onTimePeriodChange: (value: string) => void onLocationChange: (value: string) => void } export function ActivityFilters({ eventType, timePeriod, location, onEventTypeChange, onTimePeriodChange, onLocationChange, }: ActivityFiltersProps) { const handleRefresh = () => { onEventTypeChange("all") onTimePeriodChange("today") onLocationChange("all-locations") } return (

) } [V0_FILE]typescriptreact:file="components/profile-settings.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { useState } from "react" import { useToast } from "@/hooks/use-toast" export function ProfileSettings() { const [isLoading, setIsLoading] = useState(false) const { toast } = useToast() const handleSaveProfile = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) toast({ title: "Profile Updated", description: "Your patient information has been saved successfully.", }) setIsLoading(false) } const handleSaveAccount = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) toast({ title: "Account Updated", description: "Your account settings have been saved successfully.", }) setIsLoading(false) } return (

Patient Information Manage patient profile and medical information

First Name

Last Name

Date of Birth

Blood Type

Home Address

Medical Conditions

</div>

<div className="space-y-2">
              <Label htmlFor="emergency-notes">Emergency Notes</Label>
              <Textarea
                id="emergency-notes"
                placeholder="Important information for emergency responders"
                className="bg-background min-h-[100px]"
                defaultValue="Allergic to penicillin. Wears hearing aids. Prefers right arm for blood pressure."
              />
            </div>

<Button className="w-full" type="submit" disabled={isLoading}>
              {isLoading ? "Saving..." : "Save Patient Information"}
            </Button>
          </form>
        </CardContent>
      </Card>

<Card className="bg-[var(--monitor-panel)] border-[var(--monitor-border)]">
        <CardHeader>
          <CardTitle>Account Settings</CardTitle>
          <CardDescription>Manage your account credentials</CardDescription>
        </CardHeader>
        <CardContent>
          <form className="space-y-4" onSubmit={handleSaveAccount}>
            <div className="space-y-2">
              <Label htmlFor="email">Email Address</Label>
              <Input id="email" type="email" defaultValue="caregiver@example.com" className="bg-background" />
            </div>

<div className="space-y-2">
              <Label htmlFor="phone">Phone Number</Label>
              <Input id="phone" type="tel" defaultValue="+1 (555) 123-4567" className="bg-background" />
            </div>

<div className="space-y-2">
              <Label htmlFor="current-password">Current Password</Label>
              <Input id="current-password" type="password" className="bg-background" />
            </div>

<div className="grid gap-4 md:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="new-password">New Password</Label>
                <Input id="new-password" type="password" className="bg-background" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="confirm-password">Confirm Password</Label>
                <Input id="confirm-password" type="password" className="bg-background" />
              </div>
            </div>

<Button className="w-full" type="submit" disabled={isLoading}>
              {isLoading ? "Updating..." : "Update Account Settings"}
            </Button>
          </form>
        </CardContent>
      </Card>

<Card className="bg-[var(--monitor-panel)] border-[var(--monitor-border)] border-destructive">
        <CardHeader>
          <CardTitle className="text-destructive">Danger Zone</CardTitle>
          <CardDescription>Irreversible actions</CardDescription>
        </CardHeader>
        <CardContent className="space-y-3">
          <Button variant="outline" className="w-full text-destructive border-destructive bg-transparent">
            Export All Data
          </Button>
          <Button variant="destructive" className="w-full">
            Delete Account
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/notification-settings.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { useState } from "react"
import { useToast } from "@/hooks/use-toast"

export function NotificationSettings() {
  const [isLoading, setIsLoading] = useState(false)
  const [preferences, setPreferences] = useState({
    emailAlerts: true,
    smsAlerts: true,
    pushNotifications: true,
    phoneCalls: true,
    fallAlerts: true,
    medicationAlerts: true,
    inactivityAlerts: true,
    routineUpdates: false,
    quietHours: false,
    waterIntakeAlerts: true,
  })
  const { toast } = useToast()

const handleToggle = (key: keyof typeof preferences) => {
    setPreferences((prev) => ({ ...prev, [key]: !prev[key] }))
  }

const handleSave = async () => {
    setIsLoading(true)

// Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1000))

toast({
      title: "Settings Saved",
      description: "Your notification preferences have been updated successfully.",
    })
    setIsLoading(false)
  }

return (
    <div className="space-y-6">
      <Card className="bg-[var(--monitor-panel)] border-[var(--monitor-border)]">
        <CardHeader>
          <CardTitle>Alert Preferences</CardTitle>
          <CardDescription>Configure how you receive notifications</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between p-4 rounded-lg bg-background/50 border border-border">
            <div>
              <Label htmlFor="email-alerts" className="font-medium text-foreground">
                Email Alerts
              </Label>
              <p className="text-sm text-muted-foreground">Receive alerts via email</p>
            </div>
            <Switch
              id="email-alerts"
              checked={preferences.emailAlerts}
              onCheckedChange={() => handleToggle("emailAlerts")}
            />
          </div>

<div className="flex items-center justify-between p-4 rounded-lg bg-background/50 border border-border">
            <div>
              <Label htmlFor="sms-alerts" className="font-medium text-foreground">
                SMS Alerts
              </Label>
              <p className="text-sm text-muted-foreground">Receive alerts via text message</p>
            </div>
            <Switch id="sms-alerts" checked={preferences.smsAlerts} onCheckedChange={() => handleToggle("smsAlerts")} />
          </div>

<div className="flex items-center justify-between p-4 rounded-lg bg-background/50 border border-border">
            <div>
              <Label htmlFor="push-notifications" className="font-medium text-foreground">
                Push Notifications
              </Label>
              <p className="text-sm text-muted-foreground">Receive browser push notifications</p>
            </div>
            <Switch
              id="push-notifications"
              checked={preferences.pushNotifications}
              onCheckedChange={() => handleToggle("pushNotifications")}
            />
          </div>

<div className="flex items-center justify-between p-4 rounded-lg bg-background/50 border border-border">
            <div>
              <Label htmlFor="phone-calls" className="font-medium text-foreground">
                Emergency Phone Calls
              </Label>
              <p className="text-sm text-muted-foreground">Receive phone calls for critical alerts</p>
            </div>
            <Switch
              id="phone-calls"
              checked={preferences.phoneCalls}
              onCheckedChange={() => handleToggle("phoneCalls")}
            />
          </div>
        </CardContent>
      </Card>

<Card className="bg-[var(--monitor-panel)] border-[var(--monitor-border)]">
        <CardHeader>
          <CardTitle>Alert Types</CardTitle>
          <CardDescription>Choose which events trigger notifications</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between p-4 rounded-lg bg-background/50 border border-border">
            <div>
              <Label htmlFor="fall-alerts" className="font-medium text-foreground">
                Fall Detection Alerts
              </Label>
              <p className="text-sm text-muted-foreground">Critical priority</p>
            </div>
            <Switch
              id="fall-alerts"
              checked={preferences.fallAlerts}
              onCheckedChange={() => handleToggle("fallAlerts")}
            />
          </div>

<div className="flex items-center justify-between p-4 rounded-lg bg-background/50 border border-border">
            <div>
              <Label htmlFor="medication-alerts" className="font-medium text-foreground">
                Medication Reminders
              </Label>
              <p className="text-sm text-muted-foreground">High priority</p>
            </div>
            <Switch
              id="medication-alerts"
              checked={preferences.medicationAlerts}
              onCheckedChange={() => handleToggle("medicationAlerts")}
            />
          </div>

<div className="flex items-center justify-between p-4 rounded-lg bg-background/50 border border-border">
            <div>
              <Label htmlFor="inactivity-alerts" className="font-medium text-foreground">
                Inactivity Alerts
              </Label>
              <p className="text-sm text-muted-foreground">Medium priority</p>
            </div>
            <Switch
              id="inactivity-alerts"
              checked={preferences.inactivityAlerts}
              onCheckedChange={() => handleToggle("inactivityAlerts")}
            />
          </div>

<div className="flex items-center justify-between p-4 rounded-lg bg-background/50 border border-border">
            <div>
              <Label htmlFor="water-intake-alerts" className="font-medium text-foreground">
                Water Intake Reminders
              </Label>
              <p className="text-sm text-muted-foreground">Medium priority</p>
            </div>
            <Switch
              id="water-intake-alerts"
              checked={preferences.waterIntakeAlerts}
              onCheckedChange={() => handleToggle("waterIntakeAlerts")}
            />
          </div>

<div className="flex items-center justify-between p-4 rounded-lg bg-background/50 border border-border">
            <div>
              <Label htmlFor="routine-updates" className="font-medium text-foreground">
                Routine Activity Updates
              </Label>
              <p className="text-sm text-muted-foreground">Low priority</p>
            </div>
            <Switch
              id="routine-updates"
              checked={preferences.routineUpdates}
              onCheckedChange={() => handleToggle("routineUpdates")}
            />
          </div>
        </CardContent>
      </Card>

<Card className="bg-[var(--monitor-panel)] border-[var(--monitor-border)]">
        <CardHeader>
          <CardTitle>Quiet Hours</CardTitle>
          <CardDescription>Reduce non-critical notifications during specific times</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between p-4 rounded-lg bg-background/50 border border-border">
            <div>
              <Label htmlFor="quiet-hours" className="font-medium text-foreground">
                Enable Quiet Hours
              </Label>
              <p className="text-sm text-muted-foreground">Only critical alerts during this time</p>
            </div>
            <Switch
              id="quiet-hours"
              checked={preferences.quietHours}
              onCheckedChange={() => handleToggle("quietHours")}
            />
          </div>

<div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="quiet-start">Start Time</Label>
              <Input id="quiet-start" type="time" defaultValue="22:00" className="bg-background" />
            </div>
            <div className="space-y-2">
              <Label htmlFor="quiet-end">End Time</Label>
              <Input id="quiet-end" type="time" defaultValue="07:00" className="bg-background" />
            </div>
          </div>
        </CardContent>
      </Card>

<Button className="w-full" onClick={handleSave} disabled={isLoading}>
        {isLoading ? "Saving..." : "Save Notification Settings"}
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/activity-log.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useMemo } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { useToast } from "@/hooks/use-toast"

interface Activity {
  id: number
  type: "fall" | "no-movement" | "medication-missed" | "normal" | "alert" | "water-intake"
  title: string
  description: string
  location: string
  timestamp: Date
  severity: "critical" | "warning" | "info"
}

const activities: Activity[] = [
  {
    id: 1,
    type: "fall",
    title: "Fall Detected",
    description: "AI detected potential fall in bathroom area. Emergency protocol initiated.",
    location: "Bathroom",
    timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000),
    severity: "critical",
  },
  {
    id: 2,
    type: "medication-missed",
    title: "Medication Reminder Missed",
    description: "Blood pressure medication scheduled for 2:00 PM was not taken.",
    location: "Living Room",
    timestamp: new Date(Date.now() - 4 * 60 * 60 * 1000),
    severity: "warning",
  },
  {
    id: 3,
    type: "no-movement",
    title: "Extended Inactivity",
    description: "No movement detected for 45 minutes in bedroom area.",
    location: "Bedroom",
    timestamp: new Date(Date.now() - 6 * 60 * 60 * 1000),
    severity: "warning",
  },
  {
    id: 4,
    type: "normal",
    title: "Normal Activity",
    description: "Patient moved from bedroom to kitchen. Normal walking pattern detected.",
    location: "Kitchen",
    timestamp: new Date(Date.now() - 8 * 60 * 60 * 1000),
    severity: "info",
  },
  {
    id: 5,
    type: "alert",
    title: "Unusual Pattern",
    description: "Patient woke up at unusual time (3:15 AM). Monitoring increased.",
    location: "Bedroom",
    timestamp: new Date(Date.now() - 12 * 60 * 60 * 1000),
    severity: "warning",
  },
  {
    id: 6,
    type: "normal",
    title: "Meal Time Activity",
    description: "Patient in kitchen area during scheduled meal time.",
    location: "Kitchen",
    timestamp: new Date(Date.now() - 24 * 60 * 60 * 1000),
    severity: "info",
  },
]

interface ActivityLogProps {
  eventType: string
  timePeriod: string
  location: string
}

const getActivityIcon = (type: Activity["type"]) => {
  switch (type) {
    case "fall":
      return (
        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
          />
        </svg>
      )
    case "medication-missed":
      return (
        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
          />
        </svg>
      )
    case "no-movement":
      return (
        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
      )
    case "water-intake":
      return (
        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M14.684 15.097a3.082 3.082 0 003.082-3.082V6.542C17.768 5.649 16.81 5 15.728 5H8.272C7.188 5 6.23 5.649 6.23 6.542v5.473a3.082 3.082 0 003.082 3.082h.002z"
          />
        </svg>
      )
    default:
      return (
        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
      )
  }
}

const getSeverityColor = (severity: Activity["severity"]) => {
  switch (severity) {
    case "critical":
      return "bg-[var(--alert-critical)] text-white"
    case "warning":
      return "bg-[var(--alert-warning)] text-white"
    default:
      return "bg-[var(--alert-success)] text-white"
  }
}

export function ActivityLog({ eventType, timePeriod, location }: ActivityLogProps) {
  const [selectedActivity, setSelectedActivity] = useState<Activity | null>(null)
  const { toast } = useToast()

const filteredActivities = useMemo(() => {
    return activities.filter((activity) => {
      if (eventType !== "all" && activity.type !== eventType) {
        return false
      }

if (location !== "all-locations" && activity.location !== location) {
        return false
      }

const now = new Date()
      const activityDate = activity.timestamp
      const diffInMs = now.getTime() - activityDate.getTime()
      const diffInDays = diffInMs / (1000 * 60 * 60 * 24)

switch (timePeriod) {
        case "today":
          if (diffInDays > 1) return false
          break
        case "yesterday":
          if (diffInDays < 1 || diffInDays > 2) return false
          break
        case "week":
          if (diffInDays > 7) return false
          break
        case "month":
          if (diffInDays > 30) return false
          break
      }

return true
    })
  }, [eventType, timePeriod, location])

const handleExportLog = () => {
    const csvContent = [
      ["ID", "Type", "Title", "Description", "Location", "Timestamp", "Severity"],
      ...filteredActivities.map((activity) => [
        activity.id,
        activity.type,
        activity.title,
        activity.description,
        activity.location,
        activity.timestamp.toISOString(),
        activity.severity,
      ]),
    ]
      .map((row) => row.map((cell) => `"${cell}"`).join(","))
      .join("\n")

const blob = new Blob([csvContent], { type: "text/csv" })
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `activity-log-${new Date().toISOString().split("T")[0]}.csv`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    window.URL.revokeObjectURL(url)

toast({
      title: "Log Exported",
      description: `${filteredActivities.length} activities exported to CSV`,
    })
  }

return (
    <Card className="bg-[var(--monitor-panel)] border-[var(--monitor-border)]">
      <CardHeader>
        <CardTitle className="flex items-center justify-between">
          <span>Recent Activities ({filteredActivities.length})</span>
          <Button variant="outline" size="sm" onClick={handleExportLog}>
            Export Log
          </Button>
        </CardTitle>
      </CardHeader>
      <CardContent>
        {filteredActivities.length === 0 ? (
          <div className="text-center py-12 text-muted-foreground">
            <svg className="w-12 h-12 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
              />
            </svg>
            <p className="text-lg font-medium">No activities found</p>
            <p className="text-sm mt-1">Try adjusting your filters</p>
          </div>
        ) : (
          <div className="space-y-3">
            {filteredActivities.map((activity, index) => (
              <div key={activity.id}>
                <div
                  className="flex items-start gap-4 p-4 rounded-lg bg-background/50 border border-border hover:border-primary/50 transition-colors cursor-pointer"
                  onClick={() => setSelectedActivity(activity)}
                >
                  <div
                    className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${getSeverityColor(activity.severity)}`}
                  >
                    {getActivityIcon(activity.type)}
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-start justify-between gap-2 mb-1">
                      <h3 className="font-semibold text-foreground">{activity.title}</h3>
                      <Badge variant="outline" className="flex-shrink-0">
                        {activity.location}
                      </Badge>
                    </div>
                    <p className="text-sm text-muted-foreground mb-2">{activity.description}</p>
                    <div className="flex items-center gap-4 text-xs text-muted-foreground">
                      <span className="flex items-center gap-1">
                        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                          />
                        </svg>
                        {activity.timestamp.toLocaleString()}
                      </span>
                      <span className="flex items-center gap-1">
                        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                            d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
                          />
                        </svg>
                        Camera {activity.id}
                      </span>
                    </div>
                  </div>
                </div>
                {index < filteredActivities.length - 1 && <div className="h-px bg-border my-3" />}
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/camera-feed.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/hooks/use-toast"

interface Camera {
  id: number
  name: string
  location: string
  status: string
}

interface CameraFeedProps {
  camera: Camera
  expanded?: boolean
  onExpand?: () => void
}

export function CameraFeed({ camera, expanded = false, onExpand }: CameraFeedProps) {
  const [currentTime, setCurrentTime] = useState(new Date())
  const [isRecording, setIsRecording] = useState(true)
  const [zoomLevel, setZoomLevel] = useState(1)
  const [aiDetection, setAiDetection] = useState<string>("Normal Activity")
  const [isDetectingWater, setIsDetectingWater] = useState(false)
  const { toast } = useToast()

useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date())
    }, 1000)
    return () => clearInterval(timer)
  }, [])

useEffect(() => {
    const detectionInterval = setInterval(
      () => {
        if (Math.random() < 0.2) {
          setIsDetectingWater(true)
          setAiDetection("Drinking Water Detected")

const waterAmount = Math.floor(Math.random() * 300) + 200

window.dispatchEvent(
            new CustomEvent("waterDetected", {
              detail: { amount: waterAmount, camera: camera.name, location: camera.location },
            }),
          )

toast({
            title: "💧 Water Intake Detected",
            description: `AI detected drinking activity (~${waterAmount}ml) in ${camera.location}`,
          })

setTimeout(() => {
            setIsDetectingWater(false)
            setAiDetection("Normal Activity")
          }, 5000)
        }
      },
      Math.random() * 30000 + 30000,
    )
    return () => clearInterval(detectionInterval)
  }, [camera, toast])

const handleZoomIn = () => {
    if (zoomLevel < 3) {
      setZoomLevel((prev) => prev + 0.5)
      toast({
        title: "Zoomed In",
        description: `Zoom level: ${(zoomLevel + 0.5).toFixed(1)}x`,
      })
    }
  }

const handleZoomOut = () => {
    if (zoomLevel > 1) {
      setZoomLevel((prev) => prev - 0.5)
      toast({
        title: "Zoomed Out",
        description: `Zoom level: ${(zoomLevel - 0.5).toFixed(1)}x`,
      })
    }
  }

const handleSnapshot = () => {
    toast({
      title: "Snapshot Captured",
      description: `${camera.name} - ${currentTime.toLocaleString()}`,
    })
  }

const handleToggleRecording = () => {
    setIsRecording(!isRecording)
    toast({
      title: isRecording ? "Recording Stopped" : "Recording Started",
      description: `${camera.name} recording ${isRecording ? "paused" : "resumed"}`,
    })
  }

const handleToggleAudio = () => {
    toast({
      title: "Audio Toggled",
      description: "Camera audio settings updated",
    })
  }

return (
    <Card className="overflow-hidden bg-[var(--monitor-panel)] border-[var(--monitor-border)]">
      <div className="relative aspect-video bg-gradient-to-br from-slate-900 to-slate-800">
        <div className="absolute inset-0 flex items-center justify-center overflow-hidden">
          <img
            src={`/elderly-care-room-.jpg?height=720&width=1280&query=elderly care room ${camera.name.toLowerCase()} monitoring camera view`}
            alt={`${camera.name} camera feed`}
            className="w-full h-full object-cover opacity-80 transition-transform duration-300"
            style={{ transform: `scale(${zoomLevel})` }}
          />
        </div>

<div className="absolute inset-0 pointer-events-none">
          <div className="absolute top-0 left-0 right-0 bg-gradient-to-b from-black/80 to-transparent p-3">
            <div className="flex items-center justify-between text-white">
              <div className="flex items-center gap-2">
                <Badge variant="secondary" className="bg-[var(--camera-active)] text-white border-0">
                  <div className="w-2 h-2 rounded-full bg-white mr-1.5 animate-pulse" />
                  LIVE
                </Badge>
                <span className="text-sm font-medium">{camera.name}</span>
              </div>
              <div className="flex items-center gap-3">
                {isRecording && (
                  <div className="flex items-center gap-1.5">
                    <div className="w-2 h-2 rounded-full bg-red-500 animate-pulse" />
                    <span className="text-xs font-mono">REC</span>
                  </div>
                )}
                <span className="text-xs font-mono">{currentTime.toLocaleTimeString()}</span>
              </div>
            </div>
          </div>

<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-3">
            <div className="flex items-center justify-between text-white text-xs">
              <span>{camera.location}</span>
              <span className="font-mono">CAM {camera.id.toString().padStart(2, "0")}</span>
            </div>
          </div>

{isDetectingWater && (
            <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
              <div className="bg-blue-500/90 text-white px-6 py-3 rounded-lg shadow-lg animate-pulse">
                <div className="flex items-center gap-2">
                  <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" />
                  </svg>
                  <span className="font-semibold">Drinking Detected</span>
                </div>
              </div>
            </div>
          )}
        </div>

{!expanded && (
          <div className="absolute bottom-4 right-4 flex gap-2 pointer-events-auto">
            <Button
              size="icon"
              variant="secondary"
              className="bg-black/60 hover:bg-black/80 text-white"
              onClick={onExpand}
            >
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
                />
              </svg>
            </Button>
          </div>
        )}
      </div>

<div className="p-3 border-t border-[var(--monitor-border)]">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div
              className={`w-2 h-2 rounded-full ${isDetectingWater ? "bg-blue-500 animate-pulse" : "bg-[var(--alert-success)]"}`}
            />
            <span className="text-sm text-muted-foreground">{aiDetection}</span>
          </div>
          <div className="flex gap-1">
            <Button size="icon" variant="ghost" className="h-8 w-8" onClick={handleZoomIn} title="Zoom In">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7"
                />
              </svg>
            </Button>
            <Button size="icon" variant="ghost" className="h-8 w-8" onClick={handleZoomOut} title="Zoom Out">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7"
                />
              </svg>
            </Button>
            <Button
              size="icon"
              variant="ghost"
              className="h-8 w-8"
              onClick={handleToggleRecording}
              title={isRecording ? "Stop Recording" : "Start Recording"}
            >
              <svg
                className="w-4 h-4"
                fill={isRecording ? "currentColor" : "none"}
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <circle cx="12" cy="12" r="10" strokeWidth={2} />
                {isRecording && <circle cx="12" cy="12" r="4" fill="red" />}
              </svg>
            </Button>
            <Button size="icon" variant="ghost" className="h-8 w-8" onClick={handleToggleAudio} title="Toggle Audio">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"
                />
              </svg>
            </Button>
            <Button size="icon" variant="ghost" className="h-8 w-8" onClick={handleSnapshot} title="Take Snapshot">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
                />
              </svg>
            </Button>
          </div>
        </div>
      </div>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/water-intake-tracker.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { Droplet, Plus, Minus, AlertCircle } from "lucide-react"
import { useState, useEffect } from "react"
import { useToast } from "@/hooks/use-toast"
import { Badge } from "@/components/ui/badge" // Import Badge component

export function WaterIntakeTracker() {
  const dailyGoal = 2000 // ml (2 liters)
  const [intake, setIntake] = useState(0)
  const [showReminder, setShowReminder] = useState(false)
  const { toast } = useToast()

const percentage = Math.min((intake / dailyGoal) * 100, 100)
  const remaining = Math.max(dailyGoal - intake, 0)

useEffect(() => {
    const handleWaterDetected = (event: CustomEvent) => {
      const { amount, camera, location } = event.detail
      addWater(amount)
      console.log("[v0] AI detected water intake:", { amount, camera, location })
    }

window.addEventListener("waterDetected", handleWaterDetected as EventListener)
    return () => {
      window.removeEventListener("waterDetected", handleWaterDetected as EventListener)
    }
  }, [intake])

// Check if intake is low and show reminders
  useEffect(() => {
    const now = new Date()
    const hour = now.getHours()

// Check during waking hours (8 AM - 8 PM)
    if (hour >= 8 && hour <= 20) {
      const expectedIntake = (dailyGoal / 12) * (hour - 8) // Expected intake by this hour

if (intake < expectedIntake * 0.7) {
        setShowReminder(true)
      } else {
        setShowReminder(false)
      }
    }
  }, [intake])

const addWater = (amount: number) => {
    const newIntake = Math.min(intake + amount, dailyGoal + 1000)
    setIntake(newIntake)

if (newIntake >= dailyGoal && intake < dailyGoal) {
      toast({
        title: "Daily Goal Achieved! 🎉",
        description: "Great job staying hydrated today!",
      })
    }
  }

const removeWater = (amount: number) => {
    setIntake(Math.max(intake - amount, 0))
  }

const dismissReminder = () => {
    setShowReminder(false)
    toast({
      title: "Reminder Snoozed",
      description: "We'll remind you again in 30 minutes.",
    })
  }

return (
    <div className="space-y-3">
      {showReminder && (
        <Card className="bg-amber-500/10 border-amber-500/50">
          <CardContent className="p-4">
            <div className="flex items-start gap-3">
              <AlertCircle className="h-5 w-5 text-amber-500 mt-0.5 flex-shrink-0" />
              <div className="flex-1 min-w-0">
                <p className="font-semibold text-foreground">Hydration Reminder</p>
                <p className="text-sm text-muted-foreground mt-1">
                  Water intake is below target. AI monitoring will track drinking activity automatically.
                </p>
              </div>
              <Button size="sm" variant="ghost" onClick={dismissReminder} className="flex-shrink-0">
                Dismiss
              </Button>
            </div>
          </CardContent>
        </Card>
      )}

<Card className="bg-[var(--monitor-panel)] border-[var(--monitor-border)]">
        <CardHeader className="pb-3">
          <CardTitle className="flex items-center gap-2 text-lg">
            <Droplet className="h-5 w-5 text-blue-500" />
            Daily Water Intake
            <Badge variant="secondary" className="text-xs">
              AI Tracking
            </Badge>
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <div className="flex items-center justify-between text-sm">
              <span className="text-muted-foreground">Progress</span>
              <span className="font-semibold text-foreground">
                {intake} / {dailyGoal} ml
              </span>
            </div>
            <Progress value={percentage} className="h-3" />
            <div className="flex items-center justify-between text-xs">
              <span className="text-muted-foreground">{percentage.toFixed(0)}% of daily goal</span>
              {remaining > 0 && <span className="text-muted-foreground">{remaining} ml remaining</span>}
            </div>
          </div>

<div className="grid grid-cols-2 gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={() => addWater(250)}
              className="bg-blue-500/10 border-blue-500/30 hover:bg-blue-500/20"
            >
              <Plus className="h-4 w-4 mr-1" />
              Manual +250ml
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={() => addWater(500)}
              className="bg-blue-500/10 border-blue-500/30 hover:bg-blue-500/20"
            >
              <Plus className="h-4 w-4 mr-1" />
              Manual +500ml
            </Button>
          </div>

<div className="flex gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={() => removeWater(250)}
              className="flex-1"
              disabled={intake === 0}
            >
              <Minus className="h-4 w-4 mr-1" />
              Undo
            </Button>
            <Button variant="outline" size="sm" onClick={() => setIntake(0)} className="flex-1" disabled={intake === 0}>
              Reset
            </Button>
          </div>

{intake >= dailyGoal && (
            <div className="p-3 rounded-lg bg-green-500/10 border border-green-500/30">
              <p className="text-sm text-center font-medium text-green-600">✓ Daily goal achieved!</p>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/medication-settings.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useToast } from "@/hooks/use-toast"

interface Medication {
  id: number
  name: string
  dosage: string
  frequency: string
  time: string
}

const initialMedications: Medication[] = [
  { id: 1, name: "Blood Pressure Medication", dosage: "10mg", frequency: "Daily", time: "14:00" },
  { id: 2, name: "Vitamin D Supplement", dosage: "1000 IU", frequency: "Daily", time: "18:00" },
  { id: 3, name: "Aspirin", dosage: "81mg", frequency: "Daily", time: "08:00" },
]

export function MedicationSettings() {
  const [medications, setMedications] = useState<Medication[]>(initialMedications)
  const [newMed, setNewMed] = useState({
    name: "",
    dosage: "",
    frequency: "daily",
    time: "14:00",
  })
  const { toast } = useToast()

useEffect(() => {
    const stored = localStorage.getItem("medications")
    if (stored) {
      setMedications(JSON.parse(stored))
    } else {
      localStorage.setItem("medications", JSON.stringify(initialMedications))
    }
  }, [])

useEffect(() => {
    if (medications.length > 0) {
      localStorage.setItem("medications", JSON.stringify(medications))
      // Dispatch event to notify other components
      window.dispatchEvent(new CustomEvent("medicationsUpdated"))
    }
  }, [medications])

const removeMedication = (id: number) => {
    setMedications(medications.filter((med) => med.id !== id))
    toast({
      title: "Medication Removed",
      description: "The medication has been removed from your schedule",
    })
  }

const handleAddMedication = (e: React.FormEvent) => {
    e.preventDefault()

if (!newMed.name || !newMed.dosage) {
      toast({
        title: "Missing Information",
        description: "Please fill in medication name and dosage",
        variant: "destructive",
      })
      return
    }

const newMedication: Medication = {
      id: Date.now(),
      name: newMed.name,
      dosage: newMed.dosage,
      frequency: newMed.frequency.charAt(0).toUpperCase() + newMed.frequency.slice(1).replace("-", " "),
      time: newMed.time,
    }

setMedications([...medications, newMedication])

// Reset form
    setNewMed({
      name: "",
      dosage: "",
      frequency: "daily",
      time: "14:00",
    })

toast({
      title: "Medication Added",
      description: `${newMedication.name} has been added to your schedule`,
    })
  }

return (
    <div className="space-y-6">
      <Card className="bg-[var(--monitor-panel)] border-[var(--monitor-border)]">
        <CardHeader>
          <CardTitle>Medication Schedule</CardTitle>
          <CardDescription>Manage medication reminders and schedules</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {medications.map((med) => (
            <div key={med.id} className="flex items-start gap-4 p-4 rounded-lg bg-background/50 border border-border">
              <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
                <svg className="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
                  />
                </svg>
              </div>
              <div className="flex-1">
                <h3 className="font-semibold text-foreground mb-1">{med.name}</h3>
                <div className="grid grid-cols-3 gap-2 text-sm text-muted-foreground mb-3">
                  <div>
                    <span className="font-medium">Dosage:</span> {med.dosage}
                  </div>
                  <div>
                    <span className="font-medium">Frequency:</span> {med.frequency}
                  </div>
                  <div>
                    <span className="font-medium">Time:</span> {med.time}
                  </div>
                </div>
                <div className="flex gap-2">
                  <Button variant="outline" size="sm" className="bg-transparent">
                    Edit
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    className="bg-transparent text-destructive"
                    onClick={() => removeMedication(med.id)}
                  >
                    Remove
                  </Button>
                </div>
              </div>
            </div>
          ))}
        </CardContent>
      </Card>

<Card className="bg-[var(--monitor-panel)] border-[var(--monitor-border)]">
        <CardHeader>
          <CardTitle>Add New Medication</CardTitle>
          <CardDescription>Set up a new medication reminder</CardDescription>
        </CardHeader>
        <CardContent>
          <form className="space-y-4" onSubmit={handleAddMedication}>
            <div className="space-y-2">
              <Label htmlFor="med-name">Medication Name</Label>
              <Input
                id="med-name"
                placeholder="e.g., Blood Pressure Medication"
                className="bg-background"
                value={newMed.name}
                onChange={(e) => setNewMed({ ...newMed, name: e.target.value })}
              />
            </div>

<div className="grid gap-4 md:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="dosage">Dosage</Label>
                <Input
                  id="dosage"
                  placeholder="e.g., 10mg"
                  className="bg-background"
                  value={newMed.dosage}
                  onChange={(e) => setNewMed({ ...newMed, dosage: e.target.value })}
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="frequency">Frequency</Label>
                <Select value={newMed.frequency} onValueChange={(value) => setNewMed({ ...newMed, frequency: value })}>
                  <SelectTrigger id="frequency" className="bg-background">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="daily">Daily</SelectItem>
                    <SelectItem value="twice-daily">Twice Daily</SelectItem>
                    <SelectItem value="weekly">Weekly</SelectItem>
                    <SelectItem value="as-needed">As Needed</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="time">Reminder Time</Label>
              <Input
                id="time"
                type="time"
                className="bg-background"
                value={newMed.time}
                onChange={(e) => setNewMed({ ...newMed, time: e.target.value })}
              />
            </div>

<Button type="submit" className="w-full">
              <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
              </svg>
              Add Medication
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/medication-reminder.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/hooks/use-toast"

interface Medication {
  id: number
  name: string
  dosage?: string
  frequency?: string
  time: string
}

const MedicationReminderComponent = () => {
  const [medications, setMedications] = useState<Medication[]>([])
  const { toast } = useToast()

useEffect(() => {
    const loadMedications = () => {
      const stored = localStorage.getItem("medications")
      if (stored) {
        const allMeds: Medication[] = JSON.parse(stored)
        const now = new Date()
        const currentTime = now.getHours() * 60 + now.getMinutes()

// Filter and format medications for display
        const upcomingMeds = allMeds
          .map((med) => {
            const [hours, minutes] = med.time.split(":").map(Number)
            const medTime = hours * 60 + minutes
            const diff = medTime - currentTime

// Show medications that are within 4 hours
            if (diff > 0 && diff <= 240) {
              const dueInHours = Math.floor(diff / 60)
              const dueInMinutes = diff % 60
              let dueIn = ""
              if (dueInHours > 0) {
                dueIn = `${dueInHours} hour${dueInHours > 1 ? "s" : ""}`
                if (dueInMinutes > 0) dueIn += ` ${dueInMinutes} min`
              } else {
                dueIn = `${dueInMinutes} minutes`
              }

return {
                ...med,
                status: diff <= 30 ? "upcoming" : "scheduled",
                dueIn,
              }
            }
            return null
          })
          .filter(Boolean) as (Medication & { status: string; dueIn: string })[]

setMedications(upcomingMeds)
      }
    }

loadMedications()

// Listen for medication updates
    const handleUpdate = () => loadMedications()
    window.addEventListener("medicationsUpdated", handleUpdate)

// Refresh every minute to update "due in" times
    const interval = setInterval(loadMedications, 60000)

return () => {
      window.removeEventListener("medicationsUpdated", handleUpdate)
      clearInterval(interval)
    }
  }, [])

const handleDismiss = (id: number, name: string) => {
    setMedications((prev) => prev.filter((med) => med.id !== id))
    toast({
      title: "Medication Taken",
      description: `${name} marked as taken`,
    })
  }

const handleSnooze = (id: number, name: string) => {
    toast({
      title: "Reminder Snoozed",
      description: `${name} reminder postponed for 15 minutes`,
    })
  }

return (
    <Card className="bg-[var(--monitor-panel)] border-[var(--monitor-border)]">
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <CardTitle className="text-lg flex items-center gap-2">
            <svg className="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
              />
            </svg>
            Medication Schedule
          </CardTitle>
          <Button variant="outline" size="sm">
            View All
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        {medications.length === 0 ? (
          <div className="text-center py-8 text-muted-foreground">
            <p>No upcoming medications in the next 4 hours</p>
          </div>
        ) : (
          <div className="space-y-3">
            {medications.map((med: any) => (
              <div
                key={med.id}
                className="flex items-center justify-between p-3 rounded-lg bg-background/50 border border-border"
              >
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                    <svg className="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
                      />
                    </svg>
                  </div>
                  <div>
                    <p className="font-medium text-foreground">{med.name}</p>
                    <p className="text-sm text-muted-foreground">
                      {med.time} • Due in {med.dueIn}
                    </p>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <Badge
                    variant={med.status === "upcoming" ? "default" : "secondary"}
                    className={med.status === "upcoming" ? "bg-[var(--alert-warning)] text-white" : ""}
                  >
                    {med.status === "upcoming" ? "Upcoming" : "Scheduled"}
                  </Badge>
                  {med.status === "upcoming" && (
                    <>
                      <Button variant="outline" size="sm" onClick={() => handleSnooze(med.id, med.name)}>
                        Snooze
                      </Button>
                      <Button size="sm" onClick={() => handleDismiss(med.id, med.name)}>
                        Taken
                      </Button>
                    </>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  )
}

export { MedicationReminderComponent as MedicationReminder }
[V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true"
import type * as React from "react"

import { cn } from "@/lib/utils"

function Input({ className, type, ...props }: React.ComponentProps<"input">) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        "file:text-foreground placeholder:text-gray-400 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
        className,
      )}
      {...props}
    />
  )
}

export { Input }
[V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { LoginForm } from "@/components/login-form"
import { PdpaConsentDialog } from "@/components/pdpa-consent-dialog"

export default function LoginPage() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-primary/5 p-4">
      <PdpaConsentDialog />

<div className="w-full max-w-md">
        <div className="text-center mb-8">
          <div className="inline-flex items-center gap-2 mb-4">
            <div className="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                />
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                />
              </svg>
            </div>
          </div>
          <h1 className="text-3xl font-bold text-blue-900 mb-2">Smart Care Vision</h1>
          <p className="text-blue-800 text-lg">Intelligent Elderly Care Monitoring System</p>
        </div>
        <LoginForm />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/pdpa-consent-dialog.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Checkbox } from "@/components/ui/checkbox"
import { ScrollArea } from "@/components/ui/scroll-area"

export function PdpaConsentDialog() {
  const [open, setOpen] = useState(false)
  const [accepted, setAccepted] = useState(false)

useEffect(() => {
    // Check if user has already accepted PDPA
    const hasAccepted = localStorage.getItem("pdpa-accepted")
    if (!hasAccepted) {
      setOpen(true)
    }
  }, [])

const handleAccept = () => {
    if (accepted) {
      localStorage.setItem("pdpa-accepted", "true")
      setOpen(false)
    }
  }

const handleClose = () => {
    setOpen(false)
  }

return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent className="max-w-2xl max-h-[85vh] bg-white">
        <DialogHeader>
          <DialogTitle className="text-xl font-bold text-blue-900">นโยบายความเป็นส่วนตัว (PDPA)</DialogTitle>
          <DialogDescription className="text-sm text-blue-800">กรุณาอ่านและยอมรับข้อกำหนดก่อนใช้งานระบบ</DialogDescription>
        </DialogHeader>

<ScrollArea className="h-[450px] pr-4">
          <div className="space-y-3 text-xs text-blue-900">
            <section>
              <h3 className="font-semibold text-sm mb-1.5">1. การเก็บรวบรวมข้อมูลส่วนบุคคล</h3>
              <p className="text-blue-800 leading-relaxed">
                ระบบ Smart Care Vision จะเก็บรวบรวมข้อมูลส่วนบุคคลของท่าน ได้แก่ ชื่อ-นามสกุล อีเมล หมายเลขโทรศัพท์
                ภาพและวิดีโอจากกล้องวงจรปิด ข้อมูลสุขภาพ ข้อมูลการใช้ยา และข้อมูลกิจกรรมประจำวัน
                เพื่อวัตถุประสงค์ในการดูแลและติดตามสุขภาพของผู้สูงอายุและผู้ป่วย
              </p>
            </section>

<section>
              <h3 className="font-semibold text-sm mb-1.5">2. วัตถุประสงค์ในการใช้ข้อมูล</h3>
              <p className="text-blue-800 leading-relaxed">ข้อมูลของท่านจะถูกนำไปใช้เพื่อ:</p>
              <ul className="list-disc list-inside space-y-0.5 text-blue-800 ml-4 mt-1.5">
                <li>ตรวจจับและแจ้งเตือนเหตุการณ์ผิดปกติ เช่น การล้ม การไม่มีการเคลื่อนไหว</li>
                <li>เตือนการรับประทานยาตามเวลาที่กำหนด</li>
                <li>ติดตามการดื่มน้ำและกิจกรรมประจำวัน</li>
                <li>บันทึกและวิเคราะห์ข้อมูลสุขภาพเพื่อการดูแลที่ดีขึ้น</li>
                <li>ติดต่อผู้ดูแลหรือบุคลากรทางการแพทย์ในกรณีฉุกเฉิน</li>
              </ul>
            </section>

<section>
              <h3 className="font-semibold text-sm mb-1.5">3. การเปิดเผยข้อมูล</h3>
              <p className="text-blue-800 leading-relaxed">
                ข้อมูลของท่านจะถูกเปิดเผยเฉพาะแก่ผู้ดูแลที่ได้รับอนุญาต บุคลากรทางการแพทย์ และหน่วยงานที่เกี่ยวข้องในกรณีฉุกเฉินเท่านั้น
                เราจะไม่เปิดเผยข้อมูลของท่านแก่บุคคลที่สามโดยไม่ได้รับความยินยอม
              </p>
            </section>

<section>
              <h3 className="font-semibold text-sm mb-1.5">4. ความปลอดภัยของข้อมูล</h3>
              <p className="text-blue-800 leading-relaxed">
                เราใช้มาตรการรักษาความปลอดภัยที่เหมาะสมเพื่อป้องกันการเข้าถึง การใช้ หรือการเปิดเผยข้อมูลโดยไม่ได้รับอนุญาต
                ข้อมูลทั้งหมดจะถูกเข้ารหัสและจัดเก็บอย่างปลอดภัย
              </p>
            </section>

<section>
              <h3 className="font-semibold text-sm mb-1.5">5. สิทธิของเจ้าของข้อมูล</h3>
              <p className="text-blue-800 leading-relaxed">
                ท่านมีสิทธิในการเข้าถึง แก้ไข ลบ หรือโอนย้ายข้อมูลส่วนบุคคลของท่าน รวมถึงสิทธิในการคัดค้านหรือจำกัดการประมวลผลข้อมูล
                และสิทธิในการถอนความยินยอมได้ตลอดเวลา
              </p>
            </section>

<section>
              <h3 className="font-semibold text-sm mb-1.5">6. การติดต่อ</h3>
              <p className="text-blue-800 leading-relaxed">
                หากท่านมีคำถามเกี่ยวกับนโยบายความเป็นส่วนตัวนี้ กรุณาติดต่อเราที่ privacy@smartcarevision.com
              </p>
            </section>

<section className="pt-3 border-t border-blue-200">
              <p className="text-blue-800 leading-relaxed italic">
                นโยบายฉบับนี้มีผลบังคับใช้ตั้งแต่วันที่ 1 มกราคม 2568 และอาจมีการปรับปรุงเป็นครั้งคราว
              </p>
            </section>
          </div>
        </ScrollArea>

<DialogFooter className="flex-col sm:flex-col gap-3">
          <div className="flex items-start gap-3 p-4 border-2 border-blue-300 rounded-lg bg-blue-50/50">
            <Checkbox
              id="accept-pdpa"
              checked={accepted}
              onCheckedChange={(checked) => setAccepted(checked as boolean)}
              className="mt-1 h-5 w-5"
            />
            <label htmlFor="accept-pdpa" className="text-sm text-blue-900 leading-relaxed cursor-pointer font-semibold">
              ยอมรับข้อกำหนดทุกประการ
            </label>
          </div>
          <Button
            onClick={handleAccept}
            disabled={!accepted}
            className="w-full bg-blue-600 hover:bg-blue-700 text-white"
            size="lg"
          >
            ยอมรับและดำเนินการต่อ
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/login-form.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"

export function LoginForm() {
  const router = useRouter()
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [rememberMe, setRememberMe] = useState(false)
  const [acceptPDPA, setAcceptPDPA] = useState(false)
  const [isLoading, setIsLoading] = useState(false)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)

// Simulate login
    setTimeout(() => {
      setIsLoading(false)
      router.push("/dashboard")
    }, 1000)
  }

return (
    <Card className="border-2 text-blue-900 bg-white shadow-xl">
      <CardHeader>
        <CardTitle className="text-2xl text-blue-900">Sign In</CardTitle>
        <CardDescription className="text-base text-blue-800">
          Enter your credentials to access the monitoring system
        </CardDescription>
      </CardHeader>
      <form onSubmit={handleSubmit}>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="email" className="text-base text-blue-900">
              Email Address
            </Label>
            <Input
              id="email"
              type="email"
              placeholder="caregiver@example.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              className="h-12 text-base text-blue-900"
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="password" className="text-base text-blue-900">
              Password
            </Label>
            <Input
              id="password"
              type="password"
              placeholder="••••••••"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
              className="h-12 text-base text-blue-900"
            />
          </div>
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-2">
              <Checkbox
                id="remember"
                checked={rememberMe}
                onCheckedChange={(checked) => setRememberMe(checked as boolean)}
                className="h-5 w-5 border-2 border-black"
              />
              <Label htmlFor="remember" className="text-sm font-normal cursor-pointer text-blue-800">
                Remember me
              </Label>
            </div>
            <Button
              type="button"
              variant="link"
              className="px-0 text-blue-900 hover:text-blue-700"
              onClick={() => router.push("/forgot-password")}
            >
              Forgot password?
            </Button>
          </div>

<div className="border-2 border-black rounded-lg p-2 bg-yellow-50">
            <div className="flex items-start space-x-2">
              <Checkbox
                id="pdpa"
                checked={acceptPDPA}
                onCheckedChange={(checked) => setAcceptPDPA(checked as boolean)}
                className="mt-0.5 h-5 w-5 border-2 border-black"
              />
              <Label htmlFor="pdpa" className="text-sm font-semibold cursor-pointer text-black leading-snug">
                ยอมรับข้อกำหนดและเงื่อนไขการใช้งาน รวมถึงนโยบายความเป็นส่วนตัว (PDPA) ทุกประการ
              </Label>
            </div>
          </div>
        </CardContent>
        <CardFooter className="mt-6">
          <Button type="submit" className="w-full h-12 text-base font-semibold" disabled={isLoading || !acceptPDPA}>
            {isLoading ? "Signing in..." : "Sign In"}
          </Button>
        </CardFooter>
        <CardFooter className="flex-col space-y-2 pt-0">
          <div className="text-sm text-center text-blue-800">
            Don't have an account?{" "}
            <Button
              type="button"
              variant="link"
              className="px-1 text-blue-900 hover:text-blue-700 font-semibold"
              onClick={() => router.push("/signup")}
            >
              Sign Up
            </Button>
          </div>
        </CardFooter>
      </form>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/monitoring/page.tsx" isEdit="true" isMerged="true"
import { CameraGrid } from "@/components/camera-grid"
import { MedicationReminder } from "@/components/medication-reminder"
import { WaterIntakeTracker } from "@/components/water-intake-tracker"
import { AlertBanner } from "@/components/alert-banner"

export default function MonitoringPage() {
  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-foreground">Live Monitoring</h1>
          <p className="text-muted-foreground text-lg mt-1">Real-time camera surveillance system</p>
        </div>
        <div className="flex items-center gap-2 text-sm">
          <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-[var(--monitor-panel)] border border-[var(--monitor-border)]">
            <div className="w-2 h-2 rounded-full bg-[var(--camera-active)] animate-pulse" />
            <span className="text-foreground font-medium">All Systems Active</span>
          </div>
        </div>
      </div>

<AlertBanner />
      <MedicationReminder />
      <WaterIntakeTracker />
      <CameraGrid />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/emergency-contacts.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { useToast } from "@/hooks/use-toast"

const contacts = [
  {
    id: 1,
    name: "Sarah Johnson",
    role: "Primary Caregiver",
    phone: "+1 (555) 123-4567",
    email: "sarah.j@email.com",
    available: true,
  },
  {
    id: 2,
    name: "Dr. Michael Chen",
    role: "Family Doctor",
    phone: "+1 (555) 234-5678",
    email: "dr.chen@hospital.com",
    available: true,
  },
  {
    id: 3,
    name: "Emergency Services",
    role: "911 / Ambulance",
    phone: "911",
    email: "emergency@services.gov",
    available: true,
  },
  {
    id: 4,
    name: "Robert Johnson",
    role: "Family Member",
    phone: "+1 (555) 345-6789",
    email: "robert.j@email.com",
    available: false,
  },
]

export function EmergencyContacts() {
  const { toast } = useToast()

const handleCall = (name: string, phone: string) => {
    toast({
      title: "Calling...",
      description: `Initiating call to ${name} at ${phone}`,
    })
    // In a real app, this would trigger a phone call via WebRTC or native API
  }

const handleMessage = (name: string) => {
    toast({
      title: "Opening Messages",
      description: `Starting conversation with ${name}`,
    })
    // In a real app, this would open a messaging interface
  }

return (
    <Card className="bg-[var(--monitor-panel)] border-[var(--monitor-border)]">
      <CardHeader>
        <CardTitle>Emergency Contacts</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid gap-4 md:grid-cols-2">
          {contacts.map((contact) => (
            <div
              key={contact.id}
              className="flex items-start gap-4 p-4 rounded-lg bg-background/50 border border-border"
            >
              <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                <svg className="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
                  />
                </svg>
              </div>
              <div className="flex-1 min-w-0">
                <div className="flex items-start justify-between gap-2 mb-1">
                  <div>
                    <h3 className="font-semibold text-foreground">{contact.name}</h3>
                    <p className="text-sm text-muted-foreground">{contact.role}</p>
                  </div>
                  {contact.available && (
                    <div className="flex items-center gap-1 text-xs text-[var(--alert-success)]">
                      <div className="w-2 h-2 rounded-full bg-[var(--alert-success)]" />
                      Available
                    </div>
                  )}
                </div>
                <div className="space-y-1 mb-3">
                  <a
                    href={`tel:${contact.phone}`}
                    className="text-sm text-muted-foreground hover:text-primary flex items-center gap-2 transition-colors"
                  >
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
                      />
                    </svg>
                    {contact.phone}
                  </a>
                  <a
                    href={`mailto:${contact.email}`}
                    className="text-sm text-muted-foreground hover:text-primary flex items-center gap-2 transition-colors"
                  >
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                      />
                    </svg>
                    {contact.email}
                  </a>
                </div>
                <div className="flex gap-2">
                  <Button
                    size="sm"
                    variant="outline"
                    className="flex-1 bg-transparent"
                    onClick={() => handleCall(contact.name, contact.phone)}
                  >
                    <svg className="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
                      />
                    </svg>
                    Call
                  </Button>
                  <Button
                    size="sm"
                    variant="outline"
                    className="flex-1 bg-transparent"
                    onClick={() => handleMessage(contact.name)}
                  >
                    <svg className="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
                      />
                    </svg>
                    Message
                  </Button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard-nav.tsx" isEdit="true" isQuickEdit="true"
"use client"

import Link from "next/link"
import { usePathname, useRouter } from "next/navigation"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

const navItems = [
  {
    title: "Live Monitoring",
    href: "/dashboard/monitoring",
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={2}
          d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
        />
      </svg>
    ),
  },
  {
    title: "Activity Log",
    href: "/dashboard/activity",
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={2}
          d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
        />
      </svg>
    ),
  },
  {
    title: "Alerts",
    href: "/dashboard/alerts",
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={2}
          d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 00-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
        />
      </svg>
    ),
  },
  {
    title: "Settings",
    href: "/dashboard/settings",
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={2}
          d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
        />
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
      </svg>
    ),
  },
]

export function DashboardNav() {
  const pathname = usePathname()
  const router = useRouter()

const handleLogout = () => {
    router.push("/login")
  }

return (
    <header className="sticky top-0 z-50 w-full border-b border-[var(--monitor-border)] bg-[var(--monitor-panel)] backdrop-blur supports-[backdrop-filter]:bg-[var(--monitor-panel)]/95">
      <div className="container mx-auto flex h-16 items-center justify-between px-4">
        <div className="flex items-center gap-6">
          <Link href="/dashboard" className="flex items-center gap-2">
            <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
              <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                />
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                />
              </svg>
            </div>
            <span className="font-bold text-lg text-foreground hidden sm:inline-block">Smart Care Vision</span>
          </Link>
          <nav className="hidden md:flex items-center gap-1">
            {navItems.map((item) => (
              <Link key={item.href} href={item.href}>
                <Button
                  variant="ghost"
                  className={cn(
                    "gap-2",
                    pathname === item.href
                      ? "bg-accent text-accent-foreground"
                      : "text-muted-foreground hover:text-foreground",
                  )}
                >
                  {item.icon}
                  <span>{item.title}</span>
                </Button>
              </Link>
            ))}
          </nav>
        </div>
        <div className="flex items-center gap-2">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon" className="text-muted-foreground">
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
                  />
                </svg>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-56">
              <DropdownMenuLabel className="font-normal">
                <div className="flex flex-col space-y-1">
                  <p className="text-sm font-medium leading-none">John Doe</p>
                  <a
                    href="mailto:john.doe@example.com"
                    className="text-xs leading-none text-muted-foreground hover:text-primary transition-colors"
                  >
                    john.doe@example.com
                  </a>
                </div>
              </DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={handleLogout} className="text-red-600 focus:text-red-600 cursor-pointer">
                <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
                  />
                </svg>
                Log out
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
    </header>
  )
}</article></body></html>