108:"ExplicitChatIdProvider" 109:I[903690,["$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$83","$84","$85","$80","$86","$87","$81","$88","$89","$8a","$8b","$8c","$7f"],"$108"] 10a:I[838238,["$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$83","$84","$85","$80","$86","$87","$81","$88","$89","$8a","$8b","$8c","$7f"],"SWRDataProvider"] 10c:[] 10d:[["b_eKgzJDltpjR",null],["b_3OAU81HWPQs",null],["b_swkqmWUu0Nz",null]] 10e:[["b_eKgzJDltpjR",{"templateVersionId":null,"templateCanonId":null}],["b_3OAU81HWPQs",{"templateVersionId":null,"templateCanonId":null}],["b_swkqmWUu0Nz",{"templateVersionId":null,"templateCanonId":null}]] 10f:[["b_J73SIuTP389","$D2025-11-09T15:25:28.471Z"],["b_JSpPiTejcuV","$D2025-11-09T15:40:35.087Z"],["b_eKgzJDltpjR","$D2025-11-09T15:44:18.703Z"],["b_3OAU81HWPQs","$D2025-11-09T15:48:00.207Z"],["b_swkqmWUu0Nz","$D2025-11-09T16:03:10.900Z"]] 110:[["b_eKgzJDltpjR",false],["b_3OAU81HWPQs",false],["b_swkqmWUu0Nz",false]] 111:[["b_eKgzJDltpjR","$undefined"],["b_3OAU81HWPQs","$undefined"],["b_swkqmWUu0Nz","$undefined"]] 112:[["b_eKgzJDltpjR",null],["b_3OAU81HWPQs",null],["b_swkqmWUu0Nz",null]] 113:[["b_eKgzJDltpjR",true],["b_3OAU81HWPQs",true],["b_swkqmWUu0Nz",true]] 114:[["b_eKgzJDltpjR",true],["b_3OAU81HWPQs",true],["b_swkqmWUu0Nz",true]] 115:[] 116:Ta4be7,[V0_FILE]png:file="public/favicon-16x16.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SEP490-FE/public/favicon-16x16-gKYw1kLNDGUqseHFHspUWFmOGfnVLw.png" isMerged="true" [V0_FILE]png:file="public/favicon-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SEP490-FE/public/favicon-32x32-dQS9bnkpvMTDiKZTLPU6BzHchioyEy.png" isMerged="true" [V0_FILE]png:file="public/images/logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SEP490-FE/public/images/logo-Op5uirorpjzlxFXpWP2kmxQuwt26IS.png" isMerged="true" [V0_FILE]png:file="public/logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SEP490-FE/public/logo-SPTscOtlFIfrISwAMXRtS4uuxMgcz9.png" isMerged="true" [V0_FILE]jpg:file="public/modern-healthcare-clinic-with-doctors-and-patients.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SEP490-FE/public/modern-healthcare-clinic-with-doctors-and-patients-JDljmXEGCFZezZnFUAWTfWA17uPYr6.jpg" isMerged="true" [V0_FILE]jpg:file="public/modern-healthcare-facility-with-friendly-medical-s.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SEP490-FE/public/modern-healthcare-facility-with-friendly-medical-s-C6FqmlMQM4d1EUk9dwFo3OOFRrbxbz.jpg" isMerged="true" [V0_FILE]jpg:file="public/modern-medical-clinic-reception-area-with-natural-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SEP490-FE/public/modern-medical-clinic-reception-area-with-natural--V8kA9wGEzXs6JUyzUle8h5ovRpnRbh.jpg" isMerged="true" [V0_FILE]jpg:file="public/modern-medical-clinic-reception-with-doctors-and-p.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SEP490-FE/public/modern-medical-clinic-reception-with-doctors-and-p-VRTqUGU6ejQb5M1Z0Dq4Qc5UCv1Wl5.jpg" isMerged="true" [V0_FILE]typescript:file="api/index.ts" isMerged="true" const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL export interface LoginRequest { phone: string password: string } export interface LoginResponse { token: string user: { userId: number phone?: string fullName?: string email?: string role?: string gender?: string dob?: string } } export interface RegisterRequest { phone: string password: string fullName: string email?: string dob?: string gender?: string roleId: number } export interface RegisterResponse { userId: number } export interface UserDto { userId: number phone?: string fullName?: string email?: string role?: string gender?: string dob?: string allergies?: string medicalHistory?: string } export class ApiError extends Error { constructor( message: string, public status: number, public statusText: string ) { super(message) this.name = 'ApiError' } } class ApiService { private baseURL: string private token: string | null = null constructor() { this.baseURL = API_BASE_URL! // Get token from localStorage on client side if (typeof window !== 'undefined') { this.token = localStorage.getItem('auth_token') } } private async request( endpoint: string, options: RequestInit = {} ): Promise { const url = `${this.baseURL}${endpoint}` const config: RequestInit = { headers: { 'Content-Type': 'application/json', ...(this.token && { Authorization: `Bearer ${this.token}` }), ...options.headers, }, ...options, } try { const response = await fetch(url, config) if (!response.ok) { const errorText = await response.text() throw new ApiError( errorText || `HTTP ${response.status}`, response.status, response.statusText ) } // Handle empty responses const text = await response.text() if (!text) { return {} as T } return JSON.parse(text) } catch (error) { if (error instanceof ApiError) { throw error } throw new ApiError( error instanceof Error ? error.message : 'Network error', 0, 'Network Error' ) } } // Authentication methods async authenticateUser(credentials: LoginRequest): Promise { const response = await this.request('/api/auth/login', { method: 'POST', body: JSON.stringify(credentials), }) // Store token this.setToken(response.token) return response } async createUser(userData: RegisterRequest): Promise { return this.request('/api/auth/register', { method: 'POST', body: JSON.stringify(userData), }) } // User management methods async fetchAllUsers(): Promise { return this.request('/api/users') } async fetchSecureUsers(): Promise { return this.request('/api/users/test-secure') } async fetchAdminUsers(): Promise { return this.request('/api/users/admin-only') } async fetchUserProfile(): Promise { return this.request('/api/auth/profile') } async updateBasicInfo(data: { fullName: string email: string phone: string dob: string gender: string }): Promise<{ message: string, user: UserDto }> { return this.request<{ message: string, user: UserDto }>('/api/profile/basic-info', { method: 'PUT', body: JSON.stringify(data) }) } async updateMedicalInfo(data: { allergies: string medicalHistory: string }): Promise<{ message: string, user: UserDto }> { return this.request<{ message: string, user: UserDto }>('/api/profile/medical-info', { method: 'PUT', body: JSON.stringify(data) }) } // Token management setToken(token: string | null) { this.token = token if (typeof window !== 'undefined') { if (token) { localStorage.setItem('auth_token', token) } else { localStorage.removeItem('auth_token') } } } getToken(): string | null { return this.token } clearToken() { this.token = null if (typeof window !== 'undefined') { localStorage.removeItem('auth_token') } } isAuthenticated(): boolean { return !!this.token } } // Export singleton instance export const apiService = new ApiService() [V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true" "use client" import { DashboardLayout } from "@/components/dashboard-layout" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Activity, Users, Settings, Shield, UserPlus, Clock } from "lucide-react" import { useRouter } from "next/navigation" const navigation = [ { name: "Tổng quan", href: "/admin", icon: Activity }, { name: "Người dùng", href: "/admin/users", icon: Users }, { name: "Phân quyền", href: "/admin/roles", icon: Shield }, { name: "Cài đặt", href: "/admin/settings", icon: Settings }, ] // Mock users data const mockUsers = [ { id: "U001", name: "BS. Trần Văn B", role: "doctor", status: "active", department: "Nội khoa" }, { id: "U002", name: "BS. Lê Thị D", role: "doctor", status: "active", department: "Nhi khoa" }, { id: "U003", name: "Y tá Nguyễn Thị E", role: "nurse", status: "active", department: "Nội khoa" }, { id: "U004", name: "Dược sĩ Phạm Văn F", role: "pharmacist", status: "active", department: "Nhà thuốc" }, { id: "U005", name: "Lễ tân Hoàng Thị G", role: "receptionist", status: "active", department: "Lễ tân" }, ] // Mock recent activities const recentActivities = [ { id: "A001", user: "BS. Trần Văn B", action: "Tạo hồ sơ bệnh án mới", target: "BN001", time: "5 phút trước", }, { id: "A002", user: "Lễ tân Hoàng Thị G", action: "Đăng ký bệnh nhân mới", target: "BN015", time: "10 phút trước", }, { id: "A003", user: "Dược sĩ Phạm Văn F", action: "Xử lý đơn thuốc", target: "DT003", time: "15 phút trước", }, { id: "A004", user: "Y tá Nguyễn Thị E", action: "Cập nhật sinh hiệu", target: "BN002", time: "20 phút trước", }, ] export default function AdminDashboard() { const router = useRouter() const stats = [ { title: "Tổng người dùng", value: mockUsers.length.toString(), icon: Users, color: "text-primary", }, { title: "Đang hoạt động", value: mockUsers.filter((u) => u.status === "active").length.toString(), icon: Activity, color: "text-chart-2", }, { title: "Bác sĩ", value: mockUsers.filter((u) => u.role === "doctor").length.toString(), icon: Shield, color: "text-chart-3", }, { title: "Nhân viên khác", value: mockUsers.filter((u) => u.role !== "doctor").length.toString(), icon: Users, color: "text-chart-4", }, ] const getRoleLabel = (role: string) => { switch (role) { case "doctor": return "Bác sĩ" case "nurse": return "Y tá" case "pharmacist": return "Dược sĩ" case "receptionist": return "Lễ tân" case "admin": return "Quản trị viên" default: return role } } return (

Quản trị hệ thống

Quản lý người dùng và phân quyền

{/* Statistics */}

{stats.map((stat) => { const Icon = stat.icon return ( {stat.title}

{stat.value}

) })}

{/* Recent Users */} Người dùng gần đây Danh sách nhân viên trong hệ thống

{mockUsers.slice(0, 5).map((user) => (

{user.name}

{user.id}

{getRoleLabel(user.role)} {user.department}

{user.status === "active" ? "Hoạt động" : "Không hoạt động"}

))}

{/* Recent Activities */} Hoạt động gần đây Lịch sử thao tác của người dùng

{recentActivities.map((activity) => (

{activity.user} {activity.action}

{activity.target} {activity.time}

))}

{/* Quick Actions */} Thao tác nhanh Các chức năng quản trị thường dùng

) } [V0_FILE]typescriptreact:file="app/admin/roles/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/roles/page.tsx" isMerged="true" "use client" import { DashboardLayout } from "@/components/dashboard-layout" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Activity, Users, Settings, Shield, Check } from "lucide-react" import { useRouter } from "next/navigation" const navigation = [ { name: "Tổng quan", href: "/admin", icon: Activity }, { name: "Người dùng", href: "/admin/users", icon: Users }, { name: "Phân quyền", href: "/admin/roles", icon: Shield }, { name: "Cài đặt", href: "/admin/settings", icon: Settings }, ] // Mock roles and permissions const roles = [ { id: "admin", name: "Quản trị viên", description: "Toàn quyền quản lý hệ thống", userCount: 1, color: "text-destructive", }, { id: "doctor", name: "Bác sĩ", description: "Khám bệnh và quản lý hồ sơ bệnh án", userCount: 2, color: "text-primary", }, { id: "nurse", name: "Y tá", description: "Chăm sóc và theo dõi bệnh nhân", userCount: 1, color: "text-chart-2", }, { id: "pharmacist", name: "Dược sĩ", description: "Quản lý thuốc và đơn thuốc", userCount: 1, color: "text-chart-3", }, { id: "receptionist", name: "Lễ tân", description: "Tiếp nhận và đăng ký bệnh nhân", userCount: 1, color: "text-chart-4", }, ] const permissions = [ { category: "Quản lý bệnh nhân", items: [ { id: "patient.view", name: "Xem thông tin bệnh nhân" }, { id: "patient.create", name: "Đăng ký bệnh nhân mới" }, { id: "patient.edit", name: "Chỉnh sửa thông tin bệnh nhân" }, { id: "patient.delete", name: "Xóa bệnh nhân" }, ], }, { category: "Quản lý hồ sơ bệnh án", items: [ { id: "record.view", name: "Xem hồ sơ bệnh án" }, { id: "record.create", name: "Tạo hồ sơ bệnh án" }, { id: "record.edit", name: "Chỉnh sửa hồ sơ bệnh án" }, { id: "record.delete", name: "Xóa hồ sơ bệnh án" }, ], }, { category: "Quản lý lịch hẹn", items: [ { id: "appointment.view", name: "Xem lịch hẹn" }, { id: "appointment.create", name: "Tạo lịch hẹn" }, { id: "appointment.edit", name: "Chỉnh sửa lịch hẹn" }, { id: "appointment.cancel", name: "Hủy lịch hẹn" }, ], }, { category: "Quản lý thuốc", items: [ { id: "medicine.view", name: "Xem danh sách thuốc" }, { id: "medicine.create", name: "Thêm thuốc mới" }, { id: "medicine.edit", name: "Chỉnh sửa thông tin thuốc" }, { id: "medicine.delete", name: "Xóa thuốc" }, ], }, { category: "Quản lý người dùng", items: [ { id: "user.view", name: "Xem danh sách người dùng" }, { id: "user.create", name: "Tạo người dùng mới" }, { id: "user.edit", name: "Chỉnh sửa người dùng" }, { id: "user.delete", name: "Xóa người dùng" }, ], }, ] // Mock role permissions const rolePermissions: Record = { admin: permissions.flatMap((p) => p.items.map((i) => i.id)), doctor: ["patient.view", "patient.edit", "record.view", "record.create", "record.edit", "appointment.view"], nurse: ["patient.view", "record.view", "appointment.view"], pharmacist: ["patient.view", "medicine.view", "medicine.edit"], receptionist: ["patient.view", "patient.create", "patient.edit", "appointment.view", "appointment.create"], } export default function AdminRolesPage() { const router = useRouter() return (

Quản lý phân quyền

Cấu hình quyền truy cập cho từng vai trò

{/* Roles Overview */}

{roles.map((role) => (

{role.name} {role.description}

{role.userCount} người

))}

{/* Permissions Matrix */} Ma trận phân quyền Tổng quan quyền truy cập của từng vai trò

{permissions.map((permissionGroup) => (

{permissionGroup.category}

{permissionGroup.items.map((permission) => (

{permission.name}

{roles.map((role) => (

{role.name} {rolePermissions[role.id]?.includes(permission.id) ? ( ) : (

)}

))}

) } [V0_FILE]typescriptreact:file="app/admin/settings/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/settings/page.tsx" isMerged="true" "use client" import { DashboardLayout } from "@/components/dashboard-layout" 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 { Switch } from "@/components/ui/switch" import { Activity, Users, Settings, Shield, Save } from "lucide-react" import { useState } from "react" const navigation = [ { name: "Tổng quan", href: "/admin", icon: Activity }, { name: "Người dùng", href: "/admin/users", icon: Users }, { name: "Phân quyền", href: "/admin/roles", icon: Shield }, { name: "Cài đặt", href: "/admin/settings", icon: Settings }, ] export default function AdminSettingsPage() { const [isSaving, setIsSaving] = useState(false) const handleSave = async () => { setIsSaving(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1500)) setIsSaving(false) } return (

Cài đặt hệ thống

Cấu hình thông tin và tùy chọn hệ thống

{/* Hospital Information */} Thông tin phòng khám Thông tin cơ bản về phòng khám

Tên phòng khám

Số điện thoại

Website

Địa chỉ

</div>
            </div>
          </CardContent>
        </Card>

{/* System Settings */}
        <Card>
          <CardHeader>
            <CardTitle>Cài đặt hệ thống</CardTitle>
            <CardDescription>Tùy chọn hoạt động của hệ thống</CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>Cho phép đăng ký trực tuyến</Label>
                <p className="text-sm text-muted-foreground">Bệnh nhân có thể đăng ký khám qua website</p>
              </div>
              <Switch defaultChecked />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>Gửi email xác nhận lịch hẹn</Label>
                <p className="text-sm text-muted-foreground">Tự động gửi email khi có lịch hẹn mới</p>
              </div>
              <Switch defaultChecked />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>Gửi SMS nhắc lịch hẹn</Label>
                <p className="text-sm text-muted-foreground">Nhắc nhở bệnh nhân trước 24 giờ</p>
              </div>
              <Switch defaultChecked />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>Cho phép hủy lịch hẹn trực tuyến</Label>
                <p className="text-sm text-muted-foreground">Bệnh nhân có thể tự hủy lịch hẹn</p>
              </div>
              <Switch />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>Yêu cầu xác thực 2 bước</Label>
                <p className="text-sm text-muted-foreground">Bắt buộc xác thực 2 bước cho tất cả người dùng</p>
              </div>
              <Switch />
            </div>
          </CardContent>
        </Card>

{/* Appointment Settings */}
        <Card>
          <CardHeader>
            <CardTitle>Cài đặt lịch hẹn</CardTitle>
            <CardDescription>Cấu hình thời gian và quy trình đặt lịch</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid gap-4 md:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="appointmentDuration">Thời gian khám mặc định (phút)</Label>
                <Input id="appointmentDuration" type="number" defaultValue="30" />
              </div>

<div className="space-y-2">
                <Label htmlFor="advanceBooking">Đặt lịch trước tối đa (ngày)</Label>
                <Input id="advanceBooking" type="number" defaultValue="30" />
              </div>

{/* Save Button */}
        <div className="flex justify-end">
          <Button onClick={handleSave} disabled={isSaving}>
            <Save className="mr-2 h-4 w-4" />
            {isSaving ? "Đang lưu..." : "Lưu cài đặt"}
          </Button>
        </div>
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/admin/users/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/users/page.tsx" isMerged="true"
"use client"

import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Activity, Users, Settings, Shield, Search, UserPlus, Mail, Phone } from "lucide-react"
import { useState } from "react"
import { useRouter } from "next/navigation"

const navigation = [
  { name: "Tổng quan", href: "/admin", icon: Activity },
  { name: "Người dùng", href: "/admin/users", icon: Users },
  { name: "Phân quyền", href: "/admin/roles", icon: Shield },
  { name: "Cài đặt", href: "/admin/settings", icon: Settings },
]

// Mock users data
const mockUsers = [
  {
    id: "U001",
    name: "BS. Trần Văn B",
    email: "tranvanb@hospital.com",
    phone: "0901234567",
    role: "doctor",
    status: "active",
    department: "Nội khoa",
    joinDate: "2023-01-15",
  },
  {
    id: "U002",
    name: "BS. Lê Thị D",
    email: "lethid@hospital.com",
    phone: "0901234568",
    role: "doctor",
    status: "active",
    department: "Nhi khoa",
    joinDate: "2023-02-20",
  },
  {
    id: "U003",
    name: "Y tá Nguyễn Thị E",
    email: "nguyenthie@hospital.com",
    phone: "0901234569",
    role: "nurse",
    status: "active",
    department: "Nội khoa",
    joinDate: "2023-03-10",
  },
  {
    id: "U004",
    name: "Dược sĩ Phạm Văn F",
    email: "phamvanf@hospital.com",
    phone: "0901234570",
    role: "pharmacist",
    status: "active",
    department: "Nhà thuốc",
    joinDate: "2023-04-05",
  },
  {
    id: "U005",
    name: "Lễ tân Hoàng Thị G",
    email: "hoangthig@hospital.com",
    phone: "0901234571",
    role: "receptionist",
    status: "active",
    department: "Lễ tân",
    joinDate: "2023-05-12",
  },
  {
    id: "U006",
    name: "Admin Nguyễn Văn H",
    email: "nguyenvanh@hospital.com",
    phone: "0901234572",
    role: "admin",
    status: "active",
    department: "Quản trị",
    joinDate: "2023-01-01",
  },
]

export default function AdminUsersPage() {
  const router = useRouter()
  const [searchQuery, setSearchQuery] = useState("")

const getRoleLabel = (role: string) => {
    switch (role) {
      case "doctor":
        return "Bác sĩ"
      case "nurse":
        return "Y tá"
      case "pharmacist":
        return "Dược sĩ"
      case "receptionist":
        return "Lễ tân"
      case "admin":
        return "Quản trị viên"
      default:
        return role
    }
  }

const filteredUsers = mockUsers.filter(
    (user) =>
      user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      user.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
      user.id.toLowerCase().includes(searchQuery.toLowerCase()),
  )

const activeUsers = filteredUsers.filter((u) => u.status === "active")
  const inactiveUsers = filteredUsers.filter((u) => u.status === "inactive")
  const doctorUsers = filteredUsers.filter((u) => u.role === "doctor")
  const staffUsers = filteredUsers.filter((u) => u.role !== "doctor")

const UserCard = ({ user }: { user: (typeof mockUsers)[0] }) => (
    <Card className="hover:shadow-md transition-shadow">
      <CardContent className="p-6">
        <div className="flex items-start justify-between">
          <div className="space-y-3 flex-1">
            <div className="flex items-start justify-between">
              <div>
                <div className="flex items-center gap-2 mb-1">
                  <h3 className="text-lg font-semibold">{user.name}</h3>
                  <Badge variant="outline">{user.id}</Badge>
                </div>
                <div className="flex gap-2 mb-2">
                  <Badge variant="secondary">{getRoleLabel(user.role)}</Badge>
                  <Badge variant="outline">{user.department}</Badge>
                  <Badge variant={user.status === "active" ? "default" : "secondary"}>
                    {user.status === "active" ? "Hoạt động" : "Không hoạt động"}
                  </Badge>
                </div>
              </div>
            </div>

<div className="space-y-2">
              <div className="flex items-center gap-2 text-sm text-muted-foreground">
                <Mail className="h-4 w-4" />
                <span>{user.email}</span>
              </div>
              <div className="flex items-center gap-2 text-sm text-muted-foreground">
                <Phone className="h-4 w-4" />
                <span>{user.phone}</span>
              </div>
              <p className="text-xs text-muted-foreground">Ngày tham gia: {user.joinDate}</p>
            </div>
          </div>
          <div className="flex gap-2 ml-4">
            <Button size="sm" onClick={() => router.push(`/admin/users/${user.id}`)}>
              Chi tiết
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  )

return (
    <DashboardLayout navigation={navigation}>
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold tracking-tight">Quản lý người dùng</h1>
            <p className="text-muted-foreground">Quản lý tài khoản nhân viên trong hệ thống</p>
          </div>
          <Button onClick={() => router.push("/admin/users/new")}>
            <UserPlus className="mr-2 h-4 w-4" />
            Thêm người dùng
          </Button>
        </div>

{/* Search */}
        <Card>
          <CardHeader>
            <CardTitle>Tìm kiếm người dùng</CardTitle>
            <CardDescription>Tìm theo tên, email hoặc mã nhân viên</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="relative">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                placeholder="Nhập tên, email hoặc mã nhân viên..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-9"
              />
            </div>
          </CardContent>
        </Card>

{/* Users List */}
        <Tabs defaultValue="all" className="space-y-4">
          <TabsList>
            <TabsTrigger value="all">Tất cả ({filteredUsers.length})</TabsTrigger>
            <TabsTrigger value="active">Hoạt động ({activeUsers.length})</TabsTrigger>
            <TabsTrigger value="doctors">Bác sĩ ({doctorUsers.length})</TabsTrigger>
            <TabsTrigger value="staff">Nhân viên ({staffUsers.length})</TabsTrigger>
          </TabsList>

<TabsContent value="all" className="space-y-4">
            {filteredUsers.length === 0 ? (
              <Card>
                <CardContent className="py-12 text-center">
                  <p className="text-muted-foreground">Không tìm thấy người dùng nào</p>
                </CardContent>
              </Card>
            ) : (
              filteredUsers.map((user) => <UserCard key={user.id} user={user} />)
            )}
          </TabsContent>

<TabsContent value="active" className="space-y-4">
            {activeUsers.length === 0 ? (
              <Card>
                <CardContent className="py-12 text-center">
                  <p className="text-muted-foreground">Không có người dùng hoạt động</p>
                </CardContent>
              </Card>
            ) : (
              activeUsers.map((user) => <UserCard key={user.id} user={user} />)
            )}
          </TabsContent>

<TabsContent value="doctors" className="space-y-4">
            {doctorUsers.length === 0 ? (
              <Card>
                <CardContent className="py-12 text-center">
                  <p className="text-muted-foreground">Không có bác sĩ nào</p>
                </CardContent>
              </Card>
            ) : (
              doctorUsers.map((user) => <UserCard key={user.id} user={user} />)
            )}
          </TabsContent>

<TabsContent value="staff" className="space-y-4">
            {staffUsers.length === 0 ? (
              <Card>
                <CardContent className="py-12 text-center">
                  <p className="text-muted-foreground">Không có nhân viên nào</p>
                </CardContent>
              </Card>
            ) : (
              staffUsers.map((user) => <UserCard key={user.id} user={user} />)
            )}
          </TabsContent>
        </Tabs>
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/appointments/page.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { ChevronRight, Calendar, MapPin, Phone, Mail, CheckCircle2 } from "lucide-react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"

export default function AppointmentsPage() {
  const [bookingStep, setBookingStep] = useState<"form" | "success">("form")

const handleBooking = (e: React.FormEvent) => {
    e.preventDefault()
    setBookingStep("success")
    setTimeout(() => setBookingStep("form"), 3000)
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b bg-card/80 backdrop-blur-md sticky top-0 z-50 shadow-sm">
        <div className="container mx-auto px-4 py-3">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
              <img src="/logo.png" alt="Diamond Health Logo" className="h-12 w-12 object-contain" />
              <div>
                <h1 className="text-lg font-bold text-foreground">Diamond Health</h1>
                <p className="text-xs text-muted-foreground">Phòng khám đa khoa</p>
              </div>
            </Link>
            <nav className="hidden md:flex items-center gap-8">
              <Link href="/" className="text-sm font-medium hover:text-primary transition-colors">
                Trang chủ
              </Link>
              <Link href="/#services" className="text-sm font-medium hover:text-primary transition-colors">
                Dịch vụ
              </Link>
              <Link href="/#departments" className="text-sm font-medium hover:text-primary transition-colors">
                Đội ngũ bác sĩ
              </Link>
              <Link href="/#about" className="text-sm font-medium hover:text-primary transition-colors">
                Về chúng tôi
              </Link>
              <Link href="/#contact" className="text-sm font-medium hover:text-primary transition-colors">
                Liên hệ
              </Link>
            </nav>
            <div className="flex items-center gap-3">
              <Button size="sm" className="gap-2" asChild>
                <Link href="/appointments">Đặt lịch ngay</Link>
              </Button>
              <Link href="/login">
                <Button variant="ghost" size="sm">
                  Đăng nhập
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </header>

{/* Hero Section */}
      <section className="py-12 bg-gradient-to-br from-background via-muted/20 to-background">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center space-y-4">
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 text-primary text-sm font-medium">
              <Calendar className="h-4 w-4" />
              Đặt lịch khám bệnh
            </div>
            <h1 className="text-4xl md:text-5xl font-bold leading-tight text-balance">
              Đặt lịch khám <span className="text-primary">nhanh chóng</span> và tiện lợi
            </h1>
            <p className="text-lg text-muted-foreground leading-relaxed text-pretty">
              Điền thông tin bên dưới để đặt lịch khám. Chúng tôi sẽ liên hệ xác nhận trong vòng 30 phút.
            </p>
          </div>
        </div>
      </section>

{/* Booking Form Section */}
      <section className="py-12 bg-background">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto">
            {bookingStep === "form" ? (
              <Card className="border-2">
                <CardContent className="p-8">
                  <form onSubmit={handleBooking} className="space-y-6">
                    <div className="grid md:grid-cols-2 gap-6">
                      <div className="space-y-2">
                        <Label htmlFor="fullName">Họ và tên *</Label>
                        <Input id="fullName" placeholder="Nguyễn Văn A" required />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="phone">Số điện thoại *</Label>
                        <Input id="phone" type="tel" placeholder="0901234567" required />
                      </div>
                    </div>

<div className="grid md:grid-cols-2 gap-6">
                      <div className="space-y-2">
                        <Label htmlFor="email">Email</Label>
                        <Input id="email" type="email" placeholder="email@example.com" />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="dob">Ngày sinh *</Label>
                        <Input id="dob" type="date" required />
                      </div>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="department">Chuyên khoa *</Label>
                      <Select required>
                        <SelectTrigger id="department">
                          <SelectValue placeholder="Chọn chuyên khoa" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="internal">Nội tổng quát</SelectItem>
                          <SelectItem value="obstetrics">Sản - Phụ khoa</SelectItem>
                          <SelectItem value="pediatrics">Nhi khoa</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

<p className="text-sm text-muted-foreground text-center">
                      Bằng việc đặt lịch, bạn đồng ý với các điều khoản sử dụng dịch vụ của chúng tôi
                    </p>
                  </form>
                </CardContent>
              </Card>
            ) : (
              <Card className="border-2 border-primary">
                <CardContent className="p-12 text-center space-y-4">
                  <div className="h-16 w-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto">
                    <CheckCircle2 className="h-8 w-8 text-primary" />
                  </div>
                  <h3 className="text-2xl font-bold text-primary">Đặt lịch thành công!</h3>
                  <p className="text-muted-foreground">
                    Cảm ơn bạn đã đặt lịch. Chúng tôi sẽ liên hệ xác nhận trong vòng 30 phút.
                  </p>
                </CardContent>
              </Card>
            )}
          </div>
        </div>
      </section>

{/* Info Section */}
      <section className="py-12 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-8">
              <h2 className="text-2xl md:text-3xl font-bold mb-4 text-balance">Thông tin liên hệ</h2>
              <p className="text-muted-foreground">Chúng tôi luôn sẵn sàng hỗ trợ bạn</p>
            </div>
            <div className="grid md:grid-cols-3 gap-6">
              <Card className="hover:shadow-lg transition-shadow">
                <CardContent className="p-6 text-center space-y-3">
                  <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mx-auto">
                    <MapPin className="h-6 w-6 text-primary" />
                  </div>
                  <h4 className="font-semibold">Địa chỉ</h4>
                  <p className="text-sm text-muted-foreground">123 Đường ABC, Quận 1, TP. Hồ Chí Minh</p>
                </CardContent>
              </Card>
              <Card className="hover:shadow-lg transition-shadow">
                <CardContent className="p-6 text-center space-y-3">
                  <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mx-auto">
                    <Phone className="h-6 w-6 text-primary" />
                  </div>
                  <h4 className="font-semibold">Điện thoại</h4>
                  <p className="text-sm text-muted-foreground">(028) 1234 5678</p>
                </CardContent>
              </Card>
              <Card className="hover:shadow-lg transition-shadow">
                <CardContent className="p-6 text-center space-y-3">
                  <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mx-auto">
                    <Mail className="h-6 w-6 text-primary" />
                  </div>
                  <h4 className="font-semibold">Email</h4>
                  <p className="text-sm text-muted-foreground">info@diamondhealth.vn</p>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="py-12 bg-background border-t">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-4 gap-8 mb-8">
            <div className="space-y-4">
              <div className="flex items-center gap-2">
                <img src="/logo.png" alt="Diamond Health Logo" className="h-8 w-8 object-contain" />
                <span className="font-bold">Diamond Health</span>
              </div>
              <p className="text-sm text-muted-foreground">Phòng khám đa khoa uy tín, chất lượng</p>
            </div>
            <div className="space-y-3">
              <h4 className="font-semibold">Dịch vụ</h4>
              <ul className="space-y-2 text-sm text-muted-foreground">
                <li>
                  <Link href="/#departments" className="hover:text-primary transition-colors">
                    Chuyên khoa
                  </Link>
                </li>
                <li>
                  <Link href="/#services" className="hover:text-primary transition-colors">
                    Đội ngũ bác sĩ
                  </Link>
                </li>
                <li>
                  <Link href="/appointments" className="hover:text-primary transition-colors">
                    Đặt lịch khám
                  </Link>
                </li>
              </ul>
            </div>
            <div className="space-y-3">
              <h4 className="font-semibold">Hệ thống</h4>
              <ul className="space-y-2 text-sm text-muted-foreground">
                <li>
                  <Link href="/login" className="hover:text-primary transition-colors">
                    Đăng nhập
                  </Link>
                </li>
                <li>
                  <Link href="/register" className="hover:text-primary transition-colors">
                    Đăng ký
                  </Link>
                </li>
              </ul>
            </div>
            <div className="space-y-3">
              <h4 className="font-semibold">Liên hệ</h4>
              <ul className="space-y-2 text-sm text-muted-foreground">
                <li>123 Đường ABC, Q.1, TP.HCM</li>
                <li>(028) 1234 5678</li>
                <li>info@diamondhealth.vn</li>
              </ul>
            </div>
          </div>
          <div className="pt-8 border-t text-center text-sm text-muted-foreground">
            <p>© 2025 Diamond Health Clinic. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/bac-si/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Calendar, Award, GraduationCap, Briefcase } from "lucide-react"
import Image from "next/image"

export default function BacSiPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <Header />

<main className="flex-1">
        {/* Hero Section */}
        <section className="relative overflow-hidden bg-gradient-to-br from-primary/5 via-white to-primary/5">
          <div className="container mx-auto px-4 py-20 md:py-28">
            <div className="mx-auto max-w-4xl text-center">
              <h1 className="mb-6 text-balance text-5xl font-bold leading-[1.1] tracking-tight text-foreground md:text-6xl">
                Đội ngũ{" "}
                <span className="bg-gradient-to-r from-primary to-primary/70 bg-clip-text text-transparent">
                  bác sĩ chuyên môn cao
                </span>
              </h1>
              <p className="text-pretty text-xl leading-relaxed text-muted-foreground">
                Các bác sĩ giàu kinh nghiệm, tận tâm và được đào tạo bài bản tại các trường y khoa hàng đầu
              </p>
            </div>
          </div>
        </section>

{/* Doctors Grid */}
        <section className="bg-white py-24 md:py-32">
          <div className="container mx-auto px-4">
            <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
              {[
                {
                  name: "BS. Nguyễn Văn A",
                  specialty: "Nội tổng quát",
                  experience: "15 năm kinh nghiệm",
                  education: "Đại học Y Hà Nội",
                  achievements: ["Bác sĩ ưu tú", "Chứng chỉ hành nghề"],
                },
                {
                  name: "BS. Trần Thị B",
                  specialty: "Sản phụ khoa",
                  experience: "12 năm kinh nghiệm",
                  education: "Đại học Y Dược TP.HCM",
                  achievements: ["Thạc sĩ Y học", "Chuyên gia tư vấn"],
                },
                {
                  name: "BS. Lê Văn C",
                  specialty: "Nội tổng quát",
                  experience: "18 năm kinh nghiệm",
                  education: "Đại học Y Hà Nội",
                  achievements: ["Tiến sĩ Y học", "Giảng viên đại học"],
                },
                {
                  name: "BS. Phạm Thị D",
                  specialty: "Nhi khoa",
                  experience: "10 năm kinh nghiệm",
                  education: "Đại học Y Dược TP.HCM",
                  achievements: ["Bác sĩ chuyên khoa I", "Chứng chỉ hành nghề"],
                },
                {
                  name: "BS. Hoàng Văn E",
                  specialty: "Nội tổng quát",
                  experience: "20 năm kinh nghiệm",
                  education: "Đại học Y Hà Nội",
                  achievements: ["Phó giáo sư", "Bác sĩ ưu tú"],
                },
                {
                  name: "BS. Vũ Thị F",
                  specialty: "Sản phụ khoa",
                  experience: "14 năm kinh nghiệm",
                  education: "Đại học Y Dược TP.HCM",
                  achievements: ["Thạc sĩ Y học", "Chuyên gia tư vấn"],
                },
              ].map((doctor, index) => (
                <Card
                  key={index}
                  className="group overflow-hidden border-none bg-white shadow-xl ring-1 ring-black/5 transition-all hover:-translate-y-2 hover:shadow-2xl"
                >
                  <div className="relative aspect-square overflow-hidden bg-gradient-to-br from-primary/10 to-secondary/10">
                    <Image
                      src={`/professional-vietnamese-doctor-in-white-coat-smili.jpg?key=uj04j&height=400&width=400&query=professional Vietnamese doctor in white coat smiling portrait ${doctor.specialty}`}
                      alt={doctor.name}
                      fill
                      className="object-cover transition-transform group-hover:scale-105"
                    />
                  </div>
                  <CardContent className="p-6">
                    <h3 className="mb-2 text-xl font-bold">{doctor.name}</h3>
                    <p className="mb-4 text-sm font-semibold text-primary">{doctor.specialty}</p>

<div className="space-y-3 text-sm">
                      <div className="flex items-start gap-2">
                        <Briefcase className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
                        <span className="text-muted-foreground">{doctor.experience}</span>
                      </div>
                      <div className="flex items-start gap-2">
                        <GraduationCap className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
                        <span className="text-muted-foreground">{doctor.education}</span>
                      </div>
                      <div className="flex items-start gap-2">
                        <Award className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
                        <div className="flex flex-wrap gap-2">
                          {doctor.achievements.map((achievement, i) => (
                            <span
                              key={i}
                              className="rounded-full bg-primary/10 px-2 py-1 text-xs font-medium text-primary"
                            >
                              {achievement}
                            </span>
                          ))}
                        </div>
                      </div>
                    </div>

{/* CTA Section */}
        <section className="relative overflow-hidden bg-gradient-to-br from-indigo-600 via-primary to-blue-600 py-20 text-primary-foreground md:py-24">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(255,255,255,0.12)_0%,transparent_60%)]"></div>
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_80%,rgba(255,255,255,0.1)_0%,transparent_60%)]"></div>
          <div className="container relative mx-auto px-4 text-center">
            <div className="mx-auto max-w-3xl space-y-8">
              <h2 className="text-4xl font-bold text-balance md:text-5xl">Tìm bác sĩ phù hợp với bạn</h2>
              <p className="text-pretty text-xl leading-relaxed opacity-95">
                Đặt lịch khám với bác sĩ chuyên khoa phù hợp để được tư vấn và chăm sóc tốt nhất
              </p>
              <div className="flex flex-wrap justify-center gap-4">
                <Button
                  size="lg"
                  className="h-14 bg-secondary px-8 text-base font-semibold shadow-xl shadow-secondary/30 hover:bg-secondary/90 hover:shadow-2xl hover:shadow-secondary/40"
                >
                  <Calendar className="mr-2 h-5 w-5" />
                  Đặt lịch khám ngay
                </Button>
              </div>
            </div>
          </div>
        </section>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/chuyen-khoa/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Stethoscope, Baby, UserRound, CheckCircle2, ArrowRight, Calendar } from "lucide-react"

export default function ChuyenKhoaPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <Header />

<main className="flex-1">
        {/* Hero Section */}
        <section className="relative overflow-hidden bg-gradient-to-br from-primary/5 via-white to-primary/5">
          <div className="container mx-auto px-4 py-20 md:py-28">
            <div className="mx-auto max-w-4xl text-center">
              <h1 className="mb-6 text-balance text-5xl font-bold leading-[1.1] tracking-tight text-foreground md:text-6xl">
                Các chuyên khoa{" "}
                <span className="bg-gradient-to-r from-primary to-primary/70 bg-clip-text text-transparent">
                  khám chữa bệnh
                </span>
              </h1>
              <p className="text-pretty text-xl leading-relaxed text-muted-foreground">
                Cung cấp đa dạng các dịch vụ y tế chất lượng cao, đáp ứng mọi nhu cầu chăm sóc sức khỏe của bạn và gia
                đình
              </p>
            </div>
          </div>
        </section>

{/* Services Detail */}
        <section className="bg-white py-24 md:py-32">
          <div className="container mx-auto px-4">
            <div className="grid gap-10 md:grid-cols-2 lg:grid-cols-3">
              <Card className="group overflow-hidden border-none bg-white shadow-xl ring-1 ring-black/5 transition-all hover:-translate-y-2 hover:shadow-2xl">
                <CardContent className="p-10">
                  <div className="mb-8 flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-primary to-primary/80 text-primary-foreground shadow-lg shadow-primary/25 transition-transform group-hover:scale-110">
                    <Stethoscope className="h-10 w-10" />
                  </div>
                  <h3 className="mb-4 text-2xl font-bold">Nội tổng quát</h3>
                  <p className="mb-8 leading-relaxed text-muted-foreground">
                    Giải quyết các bệnh mãn tính và cấp tính phổ biến như: tim mạch, hô hấp, tiêu hóa, tiểu đường, huyết
                    áp. Đây là chuyên khoa có lượng bệnh nhân lớn và thường xuyên nhất.
                  </p>
                  <div className="space-y-4 text-sm">
                    <div className="flex items-start gap-3">
                      <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-primary" />
                      <span className="leading-relaxed">Khám và điều trị bệnh tim mạch</span>
                    </div>
                    <div className="flex items-start gap-3">
                      <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-primary" />
                      <span className="leading-relaxed">Bệnh lý hô hấp và tiêu hóa</span>
                    </div>
                    <div className="flex items-start gap-3">
                      <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-primary" />
                      <span className="leading-relaxed">Quản lý tiểu đường và huyết áp</span>
                    </div>
                    <div className="flex items-start gap-3">
                      <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-primary" />
                      <span className="leading-relaxed">Khám sức khỏe định kỳ</span>
                    </div>
                    <div className="flex items-start gap-3">
                      <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-primary" />
                      <span className="leading-relaxed">Tư vấn dinh dưỡng và lối sống</span>
                    </div>
                  </div>
                  <Button variant="link" className="mt-8 p-0 text-base font-semibold text-primary hover:gap-2">
                    Đặt lịch khám
                    <ArrowRight className="ml-1 h-4 w-4 transition-all" />
                  </Button>
                </CardContent>
              </Card>

<Card className="group overflow-hidden border-none bg-white shadow-xl ring-1 ring-black/5 transition-all hover:-translate-y-2 hover:shadow-2xl">
                <CardContent className="p-10">
                  <div className="mb-8 flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-secondary to-secondary/80 text-secondary-foreground shadow-lg shadow-secondary/25 transition-transform group-hover:scale-110">
                    <Baby className="h-10 w-10" />
                  </div>
                  <h3 className="mb-4 text-2xl font-bold">Nhi khoa</h3>
                  <p className="mb-8 leading-relaxed text-muted-foreground">
                    Nhu cầu khám bệnh cho trẻ em rất lớn, đặc biệt các bệnh lý hô hấp (viêm họng, viêm phế quản), tiêu
                    hóa. Rất quan trọng để thu hút đối tượng gia đình.
                  </p>
                  <div className="space-y-4 text-sm">
                    <div className="flex items-start gap-3">
                      <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-secondary" />
                      <span className="leading-relaxed">Khám và điều trị bệnh hô hấp trẻ em</span>
                    </div>
                    <div className="flex items-start gap-3">
                      <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-secondary" />
                      <span className="leading-relaxed">Bệnh lý tiêu hóa ở trẻ</span>
                    </div>
                    <div className="flex items-start gap-3">
                      <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-secondary" />
                      <span className="leading-relaxed">Tư vấn dinh dưỡng và phát triển</span>
                    </div>
                    <div className="flex items-start gap-3">
                      <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-secondary" />
                      <span className="leading-relaxed">Tiêm chủng và phòng ngừa</span>
                    </div>
                    <div className="flex items-start gap-3">
                      <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-secondary" />
                      <span className="leading-relaxed">Khám sức khỏe định kỳ cho trẻ</span>
                    </div>
                  </div>
                  <Button variant="link" className="mt-8 p-0 text-base font-semibold text-secondary hover:gap-2">
                    Đặt lịch khám
                    <ArrowRight className="ml-1 h-4 w-4 transition-all" />
                  </Button>
                </CardContent>
              </Card>

<Card className="group overflow-hidden border-none bg-white shadow-xl ring-1 ring-black/5 transition-all hover:-translate-y-2 hover:shadow-2xl md:col-span-2 lg:col-span-1">
                <CardContent className="p-10">
                  <div className="mb-8 flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-primary to-primary/80 text-primary-foreground shadow-lg shadow-primary/25 transition-transform group-hover:scale-110">
                    <UserRound className="h-10 w-10" />
                  </div>
                  <h3 className="mb-4 text-2xl font-bold">Sản - Phụ khoa</h3>
                  <p className="mb-8 leading-relaxed text-muted-foreground">
                    Nhu cầu khám thai định kỳ, tư vấn sức khỏe sinh sản, điều trị các bệnh phụ khoa (viêm nhiễm). Chuyên
                    khoa này có tính định kỳ và khách hàng trung thành cao.
                  </p>
                  <div className="space-y-4 text-sm">
                    <div className="flex items-start gap-3">
                      <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-primary" />
                      <span className="leading-relaxed">Khám thai định kỳ và siêu âm</span>
                    </div>
                    <div className="flex items-start gap-3">
                      <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-primary" />
                      <span className="leading-relaxed">Tư vấn sức khỏe sinh sản</span>
                    </div>
                    <div className="flex items-start gap-3">
                      <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-primary" />
                      <span className="leading-relaxed">Điều trị bệnh phụ khoa</span>
                    </div>
                    <div className="flex items-start gap-3">
                      <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-primary" />
                      <span className="leading-relaxed">Tư vấn kế hoạch hóa gia đình</span>
                    </div>
                    <div className="flex items-start gap-3">
                      <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-primary" />
                      <span className="leading-relaxed">Chăm sóc sức khỏe phụ nữ</span>
                    </div>
                  </div>
                  <Button variant="link" className="mt-8 p-0 text-base font-semibold text-primary hover:gap-2">
                    Đặt lịch khám
                    <ArrowRight className="ml-1 h-4 w-4 transition-all" />
                  </Button>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>

{/* CTA Section */}
        <section className="relative overflow-hidden bg-gradient-to-br from-indigo-600 via-primary to-blue-600 py-20 text-primary-foreground md:py-24">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(255,255,255,0.12)_0%,transparent_60%)]"></div>
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_80%,rgba(255,255,255,0.1)_0%,transparent_60%)]"></div>
          <div className="container relative mx-auto px-4 text-center">
            <div className="mx-auto max-w-3xl space-y-8">
              <h2 className="text-4xl font-bold text-balance md:text-5xl">Sẵn sàng đặt lịch khám?</h2>
              <p className="text-pretty text-xl leading-relaxed opacity-95">
                Liên hệ với chúng tôi ngay hôm nay để được tư vấn và chăm sóc bởi đội ngũ bác sĩ chuyên nghiệp
              </p>
              <div className="flex flex-wrap justify-center gap-4">
                <Button
                  size="lg"
                  className="h-14 bg-secondary px-8 text-base font-semibold shadow-xl shadow-secondary/30 hover:bg-secondary/90 hover:shadow-2xl hover:shadow-secondary/40"
                >
                  <Calendar className="mr-2 h-5 w-5" />
                  Đặt lịch khám ngay
                </Button>
              </div>
            </div>
          </div>
        </section>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/danh-gia/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Star, Quote, Calendar } from "lucide-react"

export default function DanhGiaPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <Header />

<main className="flex-1">
        {/* Hero Section */}
        <section className="relative overflow-hidden bg-gradient-to-br from-primary/5 via-white to-primary/5">
          <div className="container mx-auto px-4 py-20 md:py-28">
            <div className="mx-auto max-w-4xl text-center">
              <h1 className="mb-6 text-balance text-5xl font-bold leading-[1.1] tracking-tight text-foreground md:text-6xl">
                Khách hàng{" "}
                <span className="bg-gradient-to-r from-primary to-primary/70 bg-clip-text text-transparent">
                  nói gì về chúng tôi
                </span>
              </h1>
              <p className="text-pretty text-xl leading-relaxed text-muted-foreground">
                Hàng nghìn khách hàng đã tin tưởng và hài lòng với dịch vụ chăm sóc sức khỏe của Diamond Health
              </p>
            </div>
          </div>
        </section>

{/* Overall Rating */}
        <section className="border-b bg-white py-16">
          <div className="container mx-auto px-4">
            <div className="mx-auto max-w-4xl">
              <Card className="border-none bg-gradient-to-br from-primary/5 to-secondary/5 shadow-xl ring-1 ring-black/5">
                <CardContent className="p-10 text-center">
                  <div className="mb-6 text-7xl font-bold text-primary">4.9</div>
                  <div className="mb-4 flex justify-center gap-1">
                    {[...Array(5)].map((_, i) => (
                      <Star key={i} className="h-8 w-8 fill-secondary text-secondary" />
                    ))}
                  </div>
                  <p className="text-xl font-semibold text-muted-foreground">Dựa trên 1,234 đánh giá</p>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>

{/* Testimonials Grid */}
        <section className="bg-gradient-to-b from-muted/30 to-white py-24 md:py-32">
          <div className="container mx-auto px-4">
            <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
              {[
                {
                  name: "Anh Minh Tuấn",
                  location: "Quận 1, TP.HCM",
                  comment:
                    "Dịch vụ tuyệt vời, bác sĩ tận tâm và chuyên nghiệp. Quy trình đặt lịch rất nhanh chóng và tiện lợi. Tôi rất hài lòng với chất lượng khám chữa bệnh tại đây!",
                  rating: 5,
                  date: "15/03/2024",
                },
                {
                  name: "Chị Thu Hương",
                  location: "Quận 3, TP.HCM",
                  comment:
                    "Phòng khám sạch sẽ, hiện đại. Nhân viên thân thiện và chu đáo. Bác sĩ khám rất kỹ và tư vấn chi tiết. Tôi sẽ giới thiệu cho bạn bè và người thân.",
                  rating: 5,
                  date: "12/03/2024",
                },
                {
                  name: "Anh Đức Anh",
                  location: "Quận 7, TP.HCM",
                  comment:
                    "Quy trình khám nhanh chóng, kết quả chính xác. Giá cả hợp lý. Rất đáng tin cậy và chuyên nghiệp! Tôi đã khám ở đây nhiều lần và luôn hài lòng.",
                  rating: 5,
                  date: "10/03/2024",
                },
                {
                  name: "Chị Lan Anh",
                  location: "Quận 2, TP.HCM",
                  comment:
                    "Bác sĩ rất tận tình, giải thích rõ ràng về tình trạng sức khỏe. Phòng khám có đầy đủ trang thiết bị hiện đại. Tôi cảm thấy yên tâm khi khám ở đây.",
                  rating: 5,
                  date: "08/03/2024",
                },
                {
                  name: "Anh Quang Huy",
                  location: "Bình Thạnh, TP.HCM",
                  comment:
                    "Đặt lịch online rất tiện lợi, không phải chờ đợi lâu. Bác sĩ chuyên môn cao, khám bệnh kỹ lưỡng. Giá cả phải chăng, phù hợp với túi tiền.",
                  rating: 5,
                  date: "05/03/2024",
                },
                {
                  name: "Chị Mai Phương",
                  location: "Quận 10, TP.HCM",
                  comment:
                    "Tôi đã khám thai ở đây suốt thai kỳ. Bác sĩ rất tận tâm và chu đáo. Phòng khám sạch sẽ, nhân viên thân thiện. Tôi rất hài lòng và tin tưởng.",
                  rating: 5,
                  date: "02/03/2024",
                },
                {
                  name: "Anh Hoàng Long",
                  location: "Tân Bình, TP.HCM",
                  comment:
                    "Dịch vụ chuyên nghiệp, bác sĩ giàu kinh nghiệm. Quy trình khám bệnh rõ ràng, minh bạch. Tôi đã giới thiệu cho nhiều người quen và họ đều hài lòng.",
                  rating: 5,
                  date: "28/02/2024",
                },
                {
                  name: "Chị Thanh Hà",
                  location: "Phú Nhuận, TP.HCM",
                  comment:
                    "Phòng khám có không gian thoải mái, sạch sẽ. Bác sĩ khám rất kỹ và tư vấn chi tiết. Nhân viên lễ tân nhiệt tình hỗ trợ. Tôi rất hài lòng!",
                  rating: 5,
                  date: "25/02/2024",
                },
                {
                  name: "Anh Tuấn Kiệt",
                  location: "Gò Vấp, TP.HCM",
                  comment:
                    "Tôi đã khám ở nhiều phòng khám nhưng Diamond Health là nơi tôi hài lòng nhất. Bác sĩ chuyên môn cao, tận tâm. Giá cả hợp lý, dịch vụ tốt.",
                  rating: 5,
                  date: "22/02/2024",
                },
              ].map((testimonial, index) => (
                <Card
                  key={index}
                  className="border-none bg-white shadow-xl ring-1 ring-black/5 transition-all hover:-translate-y-1 hover:shadow-2xl"
                >
                  <CardContent className="p-8">
                    <Quote className="mb-4 h-10 w-10 text-primary/20" />
                    <div className="mb-6 flex gap-1">
                      {[...Array(testimonial.rating)].map((_, i) => (
                        <Star key={i} className="h-5 w-5 fill-secondary text-secondary" />
                      ))}
                    </div>
                    <p className="mb-6 text-base leading-relaxed text-muted-foreground">"{testimonial.comment}"</p>
                    <div className="border-t pt-4">
                      <p className="font-bold">{testimonial.name}</p>
                      <p className="text-sm text-muted-foreground">{testimonial.location}</p>
                      <p className="mt-1 text-xs text-muted-foreground">{testimonial.date}</p>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </section>

{/* CTA Section */}
        <section className="relative overflow-hidden bg-gradient-to-br from-indigo-600 via-primary to-blue-600 py-20 text-primary-foreground md:py-24">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(255,255,255,0.12)_0%,transparent_60%)]"></div>
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_80%,rgba(255,255,255,0.1)_0%,transparent_60%)]"></div>
          <div className="container relative mx-auto px-4 text-center">
            <div className="mx-auto max-w-3xl space-y-8">
              <h2 className="text-4xl font-bold text-balance md:text-5xl">Trải nghiệm dịch vụ của chúng tôi</h2>
              <p className="text-pretty text-xl leading-relaxed opacity-95">
                Hãy để chúng tôi chăm sóc sức khỏe của bạn với đội ngũ bác sĩ chuyên nghiệp và tận tâm
              </p>
              <div className="flex flex-wrap justify-center gap-4">
                <Button
                  size="lg"
                  className="h-14 bg-secondary px-8 text-base font-semibold shadow-xl shadow-secondary/30 hover:bg-secondary/90 hover:shadow-2xl hover:shadow-secondary/40"
                >
                  <Calendar className="mr-2 h-5 w-5" />
                  Đặt lịch khám ngay
                </Button>
              </div>
            </div>
          </div>
        </section>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/doctor/page.tsx" isMerged="true"
"use client"

import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Calendar, FileText, Users, Activity, Clock, AlertCircle } from "lucide-react"
import { mockAppointments, mockMedicalRecords } from "@/lib/mock-data"
import { useRouter } from "next/navigation"

const navigation = [
  { name: "Tổng quan", href: "/doctor", icon: Activity },
  { name: "Bệnh nhân", href: "/doctor/patients", icon: Users },
  { name: "Hồ sơ bệnh án", href: "/doctor/records", icon: FileText },
  { name: "Lịch hẹn", href: "/doctor/appointments", icon: Calendar },
]

export default function DoctorDashboard() {
  const router = useRouter()

// Get today's appointments
  const today = new Date().toISOString().split("T")[0]
  const todayAppointments = mockAppointments.filter((apt) => apt.status === "scheduled")

// Get recent records
  const recentRecords = mockMedicalRecords.slice(0, 3)

// Statistics
  const stats = [
    {
      title: "Lịch hẹn hôm nay",
      value: todayAppointments.length.toString(),
      icon: Calendar,
      color: "text-primary",
    },
    {
      title: "Bệnh nhân đang điều trị",
      value: mockMedicalRecords.filter((r) => r.status === "active").length.toString(),
      icon: Users,
      color: "text-accent",
    },
    {
      title: "Cần tái khám",
      value: mockMedicalRecords.filter((r) => r.status === "follow-up").length.toString(),
      icon: AlertCircle,
      color: "text-chart-4",
    },
    {
      title: "Hồ sơ tuần này",
      value: mockMedicalRecords.length.toString(),
      icon: FileText,
      color: "text-chart-2",
    },
  ]

return (
    <DashboardLayout navigation={navigation}>
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Tổng quan</h1>
          <p className="text-muted-foreground">Chào mừng trở lại, BS. Nguyễn Văn A</p>
        </div>

{/* Statistics */}
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          {stats.map((stat) => {
            const Icon = stat.icon
            return (
              <Card key={stat.title}>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
                  <Icon className={`h-4 w-4 ${stat.color}`} />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">{stat.value}</div>
                </CardContent>
              </Card>
            )
          })}
        </div>

<div className="grid gap-6 md:grid-cols-2">
          {/* Today's Appointments */}
          <Card>
            <CardHeader>
              <CardTitle>Lịch hẹn hôm nay</CardTitle>
              <CardDescription>Danh sách bệnh nhân cần khám</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {todayAppointments.length === 0 ? (
                  <p className="text-sm text-muted-foreground text-center py-4">Không có lịch hẹn nào</p>
                ) : (
                  todayAppointments.map((appointment) => (
                    <div key={appointment.id} className="flex items-start justify-between border-b pb-4 last:border-0">
                      <div className="space-y-1">
                        <div className="flex items-center gap-2">
                          <Clock className="h-4 w-4 text-muted-foreground" />
                          <span className="font-medium">{appointment.time}</span>
                        </div>
                        <p className="text-sm font-medium">{appointment.patientName}</p>
                        <p className="text-sm text-muted-foreground">{appointment.reason}</p>
                        <Badge variant="outline">{appointment.department}</Badge>
                      </div>
                      <Button size="sm" onClick={() => router.push(`/doctor/appointments/${appointment.id}`)}>
                        Xem
                      </Button>
                    </div>
                  ))
                )}
              </div>
            </CardContent>
          </Card>

{/* Recent Medical Records */}
          <Card>
            <CardHeader>
              <CardTitle>Hồ sơ bệnh án gần đây</CardTitle>
              <CardDescription>Các ca khám mới nhất</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {recentRecords.map((record) => (
                  <div key={record.id} className="flex items-start justify-between border-b pb-4 last:border-0">
                    <div className="space-y-1">
                      <p className="text-sm font-medium">{record.patientName}</p>
                      <p className="text-sm text-muted-foreground">{record.diagnosis}</p>
                      <div className="flex items-center gap-2">
                        <Badge variant="outline">{record.department}</Badge>
                        <Badge
                          variant={
                            record.status === "active"
                              ? "default"
                              : record.status === "follow-up"
                                ? "secondary"
                                : "outline"
                          }
                        >
                          {record.status === "active"
                            ? "Đang điều trị"
                            : record.status === "follow-up"
                              ? "Tái khám"
                              : "Hoàn thành"}
                        </Badge>
                      </div>
                    </div>
                    <Button size="sm" variant="outline" onClick={() => router.push(`/doctor/records/${record.id}`)}>
                      Chi tiết
                    </Button>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>

{/* Quick Actions */}
        <Card>
          <CardHeader>
            <CardTitle>Thao tác nhanh</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid gap-4 md:grid-cols-3">
              <Button className="h-auto flex-col gap-2 py-4" onClick={() => router.push("/doctor/records/new")}>
                <FileText className="h-6 w-6" />
                <span>Tạo hồ sơ mới</span>
              </Button>
              <Button
                variant="outline"
                className="h-auto flex-col gap-2 py-4 bg-transparent"
                onClick={() => router.push("/doctor/patients")}
              >
                <Users className="h-6 w-6" />
                <span>Tìm bệnh nhân</span>
              </Button>
              <Button
                variant="outline"
                className="h-auto flex-col gap-2 py-4 bg-transparent"
                onClick={() => router.push("/doctor/appointments")}
              >
                <Calendar className="h-6 w-6" />
                <span>Xem lịch hẹn</span>
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/doctor/patients/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/doctor/patients/page.tsx" isMerged="true"
"use client"

import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Calendar, FileText, Users, Activity, Search, Phone, Mail } from "lucide-react"
import { mockPatients } from "@/lib/mock-data"
import { useState } from "react"
import { useRouter } from "next/navigation"

export default function DoctorPatientsPage() {
  const router = useRouter()
  const [searchQuery, setSearchQuery] = useState("")

const filteredPatients = mockPatients.filter(
    (patient) =>
      patient.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      patient.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
      patient.phone.includes(searchQuery),
  )

const calculateAge = (dateOfBirth: string) => {
    const today = new Date()
    const birthDate = new Date(dateOfBirth)
    let age = today.getFullYear() - birthDate.getFullYear()
    const monthDiff = today.getMonth() - birthDate.getMonth()
    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
      age--
    }
    return age
  }

return (
    <DashboardLayout navigation={navigation}>
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Danh sách bệnh nhân</h1>
          <p className="text-muted-foreground">Quản lý thông tin bệnh nhân</p>
        </div>

{/* Search */}
        <Card>
          <CardHeader>
            <CardTitle>Tìm kiếm bệnh nhân</CardTitle>
            <CardDescription>Tìm theo tên, mã bệnh nhân hoặc số điện thoại</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex gap-2">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <Input
                  placeholder="Nhập tên, mã BN hoặc SĐT..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-9"
                />
              </div>
            </div>
          </CardContent>
        </Card>

{/* Patient List */}
        <div className="grid gap-4">
          {filteredPatients.map((patient) => (
            <Card key={patient.id} className="hover:shadow-md transition-shadow">
              <CardContent className="p-6">
                <div className="flex items-start justify-between">
                  <div className="space-y-3 flex-1">
                    <div className="flex items-start gap-4">
                      <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                        <span className="text-lg font-semibold text-primary">
                          {patient.name
                            .split(" ")
                            .map((n) => n[0])
                            .join("")
                            .toUpperCase()
                            .slice(0, 2)}
                        </span>
                      </div>
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 mb-1">
                          <h3 className="text-lg font-semibold">{patient.name}</h3>
                          <Badge variant="outline">{patient.id}</Badge>
                          <Badge variant="secondary">
                            {patient.gender === "male" ? "Nam" : patient.gender === "female" ? "Nữ" : "Khác"}
                          </Badge>
                        </div>
                        <div className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm text-muted-foreground">
                          <div className="flex items-center gap-2">
                            <Calendar className="h-4 w-4" />
                            <span>
                              {calculateAge(patient.dateOfBirth)} tuổi ({patient.dateOfBirth})
                            </span>
                          </div>
                          <div className="flex items-center gap-2">
                            <Phone className="h-4 w-4" />
                            <span>{patient.phone}</span>
                          </div>
                          {patient.email && (
                            <div className="flex items-center gap-2">
                              <Mail className="h-4 w-4" />
                              <span>{patient.email}</span>
                            </div>
                          )}
                          {patient.bloodType && (
                            <div className="flex items-center gap-2">
                              <Activity className="h-4 w-4" />
                              <span>Nhóm máu: {patient.bloodType}</span>
                            </div>
                          )}
                        </div>
                        {(patient.allergies && patient.allergies.length > 0) ||
                        (patient.chronicConditions && patient.chronicConditions.length > 0) ? (
                          <div className="mt-2 flex flex-wrap gap-2">
                            {patient.allergies?.map((allergy) => (
                              <Badge key={allergy} variant="destructive" className="text-xs">
                                Dị ứng: {allergy}
                              </Badge>
                            ))}
                            {patient.chronicConditions?.map((condition) => (
                              <Badge key={condition} variant="outline" className="text-xs">
                                {condition}
                              </Badge>
                            ))}
                          </div>
                        ) : null}
                      </div>
                    </div>
                  </div>
                  <div className="flex gap-2 ml-4">
                    <Button size="sm" onClick={() => router.push(`/doctor/patients/${patient.id}`)}>
                      Xem hồ sơ
                    </Button>
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => router.push(`/doctor/records/new?patientId=${patient.id}`)}
                    >
                      Khám bệnh
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

{filteredPatients.length === 0 && (
          <Card>
            <CardContent className="py-12 text-center">
              <p className="text-muted-foreground">Không tìm thấy bệnh nhân nào</p>
            </CardContent>
          </Card>
        )}
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/doctor/records/page.tsx" isMerged="true"
"use client"

import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Calendar, FileText, Users, Activity, Plus } from "lucide-react"
import { mockMedicalRecords } from "@/lib/mock-data"
import { useRouter } from "next/navigation"

export default function DoctorRecordsPage() {
  const router = useRouter()

const activeRecords = mockMedicalRecords.filter((r) => r.status === "active")
  const followUpRecords = mockMedicalRecords.filter((r) => r.status === "follow-up")
  const completedRecords = mockMedicalRecords.filter((r) => r.status === "completed")

const RecordCard = ({ record }: { record: (typeof mockMedicalRecords)[0] }) => (
    <Card className="hover:shadow-md transition-shadow">
      <CardContent className="p-6">
        <div className="flex items-start justify-between">
          <div className="space-y-3 flex-1">
            <div className="flex items-start justify-between">
              <div>
                <div className="flex items-center gap-2 mb-1">
                  <h3 className="text-lg font-semibold">{record.patientName}</h3>
                  <Badge variant="outline">{record.id}</Badge>
                </div>
                <p className="text-sm text-muted-foreground">{record.date}</p>
              </div>
              <Badge
                variant={
                  record.status === "active" ? "default" : record.status === "follow-up" ? "secondary" : "outline"
                }
              >
                {record.status === "active"
                  ? "Đang điều trị"
                  : record.status === "follow-up"
                    ? "Tái khám"
                    : "Hoàn thành"}
              </Badge>
            </div>

<div className="space-y-2">
              <div>
                <span className="text-sm font-medium">Chẩn đoán: </span>
                <span className="text-sm text-muted-foreground">{record.diagnosis}</span>
              </div>
              <div>
                <span className="text-sm font-medium">Triệu chứng: </span>
                <span className="text-sm text-muted-foreground">{record.symptoms}</span>
              </div>
              <div className="flex items-center gap-2">
                <Badge variant="outline">{record.department}</Badge>
                {record.prescriptions.length > 0 && (
                  <Badge variant="outline">{record.prescriptions.length} đơn thuốc</Badge>
                )}
                {record.labTests.length > 0 && <Badge variant="outline">{record.labTests.length} xét nghiệm</Badge>}
              </div>
            </div>
          </div>
          <Button size="sm" className="ml-4" onClick={() => router.push(`/doctor/records/${record.id}`)}>
            Chi tiết
          </Button>
        </div>
      </CardContent>
    </Card>
  )

return (
    <DashboardLayout navigation={navigation}>
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold tracking-tight">Hồ sơ bệnh án</h1>
            <p className="text-muted-foreground">Quản lý hồ sơ khám bệnh</p>
          </div>
          <Button onClick={() => router.push("/doctor/records/new")}>
            <Plus className="mr-2 h-4 w-4" />
            Tạo hồ sơ mới
          </Button>
        </div>

<Tabs defaultValue="all" className="space-y-4">
          <TabsList>
            <TabsTrigger value="all">Tất cả ({mockMedicalRecords.length})</TabsTrigger>
            <TabsTrigger value="active">Đang điều trị ({activeRecords.length})</TabsTrigger>
            <TabsTrigger value="follow-up">Cần tái khám ({followUpRecords.length})</TabsTrigger>
            <TabsTrigger value="completed">Hoàn thành ({completedRecords.length})</TabsTrigger>
          </TabsList>

<TabsContent value="all" className="space-y-4">
            {mockMedicalRecords.map((record) => (
              <RecordCard key={record.id} record={record} />
            ))}
          </TabsContent>

<TabsContent value="active" className="space-y-4">
            {activeRecords.length === 0 ? (
              <Card>
                <CardContent className="py-12 text-center">
                  <p className="text-muted-foreground">Không có hồ sơ đang điều trị</p>
                </CardContent>
              </Card>
            ) : (
              activeRecords.map((record) => <RecordCard key={record.id} record={record} />)
            )}
          </TabsContent>

<TabsContent value="follow-up" className="space-y-4">
            {followUpRecords.length === 0 ? (
              <Card>
                <CardContent className="py-12 text-center">
                  <p className="text-muted-foreground">Không có hồ sơ cần tái khám</p>
                </CardContent>
              </Card>
            ) : (
              followUpRecords.map((record) => <RecordCard key={record.id} record={record} />)
            )}
          </TabsContent>

<TabsContent value="completed" className="space-y-4">
            {completedRecords.length === 0 ? (
              <Card>
                <CardContent className="py-12 text-center">
                  <p className="text-muted-foreground">Không có hồ sơ hoàn thành</p>
                </CardContent>
              </Card>
            ) : (
              completedRecords.map((record) => <RecordCard key={record.id} record={record} />)
            )}
          </TabsContent>
        </Tabs>
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/doctor/records/[id]/page.tsx" isMerged="true"
"use client"

import { use } from "react"
import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { Calendar, FileText, Users, Activity, ArrowLeft, Pill, TestTube, Brain } from "lucide-react"
import { mockMedicalRecords, mockPatients } from "@/lib/mock-data"
import { useRouter } from "next/navigation"

export default function MedicalRecordDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const router = useRouter()
  const { id } = use(params)

const record = mockMedicalRecords.find((r) => r.id === id)
  const patient = record ? mockPatients.find((p) => p.id === record.patientId) : null

if (!record || !patient) {
    return (
      <DashboardLayout navigation={navigation}>
        <div className="text-center py-12">
          <p className="text-muted-foreground">Không tìm thấy hồ sơ bệnh án</p>
          <Button className="mt-4" onClick={() => router.push("/doctor/records")}>
            Quay lại
          </Button>
        </div>
      </DashboardLayout>
    )
  }

return (
    <DashboardLayout navigation={navigation}>
      <div className="space-y-6">
        <div className="flex items-center gap-4">
          <Button variant="ghost" size="icon" onClick={() => router.back()}>
            <ArrowLeft className="h-5 w-5" />
          </Button>
          <div className="flex-1">
            <h1 className="text-3xl font-bold tracking-tight">Chi tiết hồ sơ bệnh án</h1>
            <p className="text-muted-foreground">Mã hồ sơ: {record.id}</p>
          </div>
          <Badge
            variant={record.status === "active" ? "default" : record.status === "follow-up" ? "secondary" : "outline"}
          >
            {record.status === "active" ? "Đang điều trị" : record.status === "follow-up" ? "Tái khám" : "Hoàn thành"}
          </Badge>
        </div>

<div className="grid gap-6 md:grid-cols-3">
          {/* Patient Info */}
          <Card className="md:col-span-1">
            <CardHeader>
              <CardTitle>Thông tin bệnh nhân</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center gap-3">
                <div className="h-16 w-16 rounded-full bg-primary/10 flex items-center justify-center">
                  <span className="text-xl font-semibold text-primary">
                    {patient.name
                      .split(" ")
                      .map((n) => n[0])
                      .join("")
                      .toUpperCase()
                      .slice(0, 2)}
                  </span>
                </div>
                <div>
                  <p className="font-semibold">{patient.name}</p>
                  <p className="text-sm text-muted-foreground">{patient.id}</p>
                </div>
              </div>

<div className="space-y-2 text-sm">
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Ngày sinh:</span>
                  <span className="font-medium">{patient.dateOfBirth}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Giới tính:</span>
                  <span className="font-medium">
                    {patient.gender === "male" ? "Nam" : patient.gender === "female" ? "Nữ" : "Khác"}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Điện thoại:</span>
                  <span className="font-medium">{patient.phone}</span>
                </div>
                {patient.bloodType && (
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">Nhóm máu:</span>
                    <span className="font-medium">{patient.bloodType}</span>
                  </div>
                )}
              </div>

{patient.allergies && patient.allergies.length > 0 && (
                <>
                  <Separator />
                  <div>
                    <p className="text-sm font-medium mb-2">Dị ứng:</p>
                    <div className="flex flex-wrap gap-1">
                      {patient.allergies.map((allergy) => (
                        <Badge key={allergy} variant="destructive" className="text-xs">
                          {allergy}
                        </Badge>
                      ))}
                    </div>
                  </div>
                </>
              )}

{patient.chronicConditions && patient.chronicConditions.length > 0 && (
                <>
                  <Separator />
                  <div>
                    <p className="text-sm font-medium mb-2">Bệnh mạn tính:</p>
                    <div className="flex flex-wrap gap-1">
                      {patient.chronicConditions.map((condition) => (
                        <Badge key={condition} variant="outline" className="text-xs">
                          {condition}
                        </Badge>
                      ))}
                    </div>
                  </div>
                </>
              )}
            </CardContent>
          </Card>

{/* Medical Record Details */}
          <div className="md:col-span-2 space-y-6">
            {/* Diagnosis & Symptoms */}
            <Card>
              <CardHeader>
                <CardTitle>Thông tin khám bệnh</CardTitle>
                <CardDescription>
                  {record.date} - {record.department}
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <p className="text-sm font-medium mb-1">Chẩn đoán:</p>
                  <p className="text-sm text-muted-foreground">{record.diagnosis}</p>
                </div>
                <div>
                  <p className="text-sm font-medium mb-1">Triệu chứng:</p>
                  <p className="text-sm text-muted-foreground">{record.symptoms}</p>
                </div>
                <div>
                  <p className="text-sm font-medium mb-1">Ghi chú:</p>
                  <p className="text-sm text-muted-foreground">{record.notes}</p>
                </div>
              </CardContent>
            </Card>

{/* Vital Signs */}
            <Card>
              <CardHeader>
                <CardTitle>Chỉ số sinh tồn</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                  {record.vitalSigns.bloodPressure && (
                    <div className="space-y-1">
                      <p className="text-sm text-muted-foreground">Huyết áp</p>
                      <p className="text-lg font-semibold">{record.vitalSigns.bloodPressure} mmHg</p>
                    </div>
                  )}
                  {record.vitalSigns.heartRate && (
                    <div className="space-y-1">
                      <p className="text-sm text-muted-foreground">Nhịp tim</p>
                      <p className="text-lg font-semibold">{record.vitalSigns.heartRate} bpm</p>
                    </div>
                  )}
                  {record.vitalSigns.temperature && (
                    <div className="space-y-1">
                      <p className="text-sm text-muted-foreground">Nhiệt độ</p>
                      <p className="text-lg font-semibold">{record.vitalSigns.temperature}°C</p>
                    </div>
                  )}
                  {record.vitalSigns.weight && (
                    <div className="space-y-1">
                      <p className="text-sm text-muted-foreground">Cân nặng</p>
                      <p className="text-lg font-semibold">{record.vitalSigns.weight} kg</p>
                    </div>
                  )}
                  {record.vitalSigns.height && (
                    <div className="space-y-1">
                      <p className="text-sm text-muted-foreground">Chiều cao</p>
                      <p className="text-lg font-semibold">{record.vitalSigns.height} cm</p>
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>

{/* Prescriptions */}
            {record.prescriptions.length > 0 && (
              <Card>
                <CardHeader>
                  <div className="flex items-center gap-2">
                    <Pill className="h-5 w-5 text-primary" />
                    <CardTitle>Đơn thuốc</CardTitle>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {record.prescriptions.map((prescription) => (
                      <div key={prescription.id} className="border rounded-lg p-4 space-y-2">
                        <div className="flex items-start justify-between">
                          <div>
                            <p className="font-semibold">{prescription.medication}</p>
                            <p className="text-sm text-muted-foreground">
                              {prescription.dosage} - {prescription.frequency}
                            </p>
                          </div>
                          <Badge
                            variant={
                              prescription.status === "dispensed"
                                ? "default"
                                : prescription.status === "pending"
                                  ? "secondary"
                                  : "outline"
                            }
                          >
                            {prescription.status === "dispensed"
                              ? "Đã cấp"
                              : prescription.status === "pending"
                                ? "Chờ cấp"
                                : "Hoàn thành"}
                          </Badge>
                        </div>
                        <p className="text-sm text-muted-foreground">Thời gian: {prescription.duration}</p>
                        <p className="text-sm text-muted-foreground">Hướng dẫn: {prescription.instructions}</p>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            )}

{/* Lab Tests */}
            {record.labTests.length > 0 && (
              <Card>
                <CardHeader>
                  <div className="flex items-center gap-2">
                    <TestTube className="h-5 w-5 text-primary" />
                    <CardTitle>Xét nghiệm & Chẩn đoán hình ảnh</CardTitle>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {record.labTests.map((test) => (
                      <div key={test.id} className="border rounded-lg p-4 space-y-2">
                        <div className="flex items-start justify-between">
                          <div>
                            <p className="font-semibold">{test.testName}</p>
                            <p className="text-sm text-muted-foreground">
                              {test.testType === "lab" ? "Xét nghiệm" : "Chẩn đoán hình ảnh"}
                            </p>
                          </div>
                          <Badge
                            variant={
                              test.status === "completed"
                                ? "default"
                                : test.status === "in-progress"
                                  ? "secondary"
                                  : "outline"
                            }
                          >
                            {test.status === "completed"
                              ? "Hoàn thành"
                              : test.status === "in-progress"
                                ? "Đang thực hiện"
                                : "Chờ thực hiện"}
                          </Badge>
                        </div>
                        <p className="text-sm text-muted-foreground">Ngày yêu cầu: {test.requestedDate}</p>
                        {test.completedDate && (
                          <p className="text-sm text-muted-foreground">Ngày hoàn thành: {test.completedDate}</p>
                        )}
                        {test.results && (
                          <div className="mt-2 p-3 bg-muted rounded-md">
                            <p className="text-sm font-medium mb-1">Kết quả:</p>
                            <p className="text-sm">{test.results}</p>
                          </div>
                        )}
                        {test.notes && <p className="text-sm text-muted-foreground">Ghi chú: {test.notes}</p>}
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            )}

{/* AI Diagnostic Support */}
            <Card className="border-primary/20 bg-primary/5">
              <CardHeader>
                <div className="flex items-center gap-2">
                  <Brain className="h-5 w-5 text-primary" />
                  <CardTitle>Hỗ trợ chẩn đoán AI</CardTitle>
                </div>
                <CardDescription>Gợi ý chẩn đoán dựa trên triệu chứng và dữ liệu lâm sàng</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  <div className="p-3 bg-background rounded-md border">
                    <p className="text-sm font-medium mb-1">Chẩn đoán khả năng cao:</p>
                    <p className="text-sm text-muted-foreground">{record.diagnosis}</p>
                    <div className="mt-2">
                      <Badge variant="outline">Độ tin cậy: 92%</Badge>
                    </div>
                  </div>
                  <div className="p-3 bg-background rounded-md border">
                    <p className="text-sm font-medium mb-1">Khuyến nghị:</p>
                    <ul className="text-sm text-muted-foreground list-disc list-inside space-y-1">
                      <li>Theo dõi chỉ số sinh tồn định kỳ</li>
                      <li>Tuân thủ đơn thuốc đã kê</li>
                      <li>Tái khám theo lịch hẹn</li>
                    </ul>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import "./globals.css"
import { Suspense } from "react"
import { Toaster } from "@/components/ui/sonner"

const inter = Inter({
  subsets: ["latin", "vietnamese"],
  variable: "--font-inter",
  display: "swap",
})

export const metadata: Metadata = {
  title: "Diamond Health - Phòng khám đa khoa uy tín",
  description: "Đặt lịch khám nhanh - Chăm sóc sức khỏe toàn diện - Đội ngũ bác sĩ chuyên môn cao",
  generator: "v0.app",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="vi">
      <body className={`${inter.variable} font-sans antialiased`}>
        <Suspense fallback={<div>Loading...</div>}>
          {children}
          <Analytics />
          <Toaster />
        </Suspense>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/lien-he/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { MapPin, Phone, Clock, Mail, Calendar, MessageSquare } from "lucide-react"
import { BookingModal, type BookingData } from "@/components/booking-modal"

export default function LienHePage() {
  const [isBookingOpen, setIsBookingOpen] = useState(false)
  const [formData, setFormData] = useState({
    name: "",
    phone: "",
    email: "",
    specialty: "",
    service: "",
    date: "",
    time: "",
    message: "",
  })

const handleBookingComplete = (data: BookingData) => {
    setFormData((prev) => ({
      ...prev,
      service: data.service || "",
      date: data.date || "",
      time: data.time || "",
    }))
  }

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

return (
    <div className="flex min-h-screen flex-col">
      <Header />

<main className="flex-1">
        {/* Hero Section */}
        <section className="relative overflow-hidden bg-gradient-to-br from-primary/5 via-white to-primary/5">
          <div className="container mx-auto px-4 py-20 md:py-28">
            <div className="mx-auto max-w-4xl text-center">
              <h1 className="mb-6 text-balance text-5xl font-bold leading-[1.1] tracking-tight text-foreground md:text-6xl">
                Liên hệ{" "}
                <span className="bg-gradient-to-r from-primary to-primary/70 bg-clip-text text-transparent">
                  với chúng tôi
                </span>
              </h1>
              <p className="text-pretty text-xl leading-relaxed text-muted-foreground">
                Hãy để lại thông tin, chúng tôi sẽ liên hệ với bạn sớm nhất để tư vấn và hỗ trợ
              </p>
            </div>
          </div>
        </section>

{/* Contact Info & Form */}
        <section className="bg-white py-24 md:py-32 relative">
          <div className="container mx-auto px-4">
            <div className="grid gap-16 lg:grid-cols-2 lg:gap-20">
              {/* Contact Information */}
              <div>
                <h2 className="mb-8 text-3xl font-bold">Thông tin liên hệ</h2>
                <p className="mb-12 text-lg leading-relaxed text-muted-foreground">
                  Chúng tôi luôn sẵn sàng lắng nghe và hỗ trợ bạn. Hãy liên hệ với chúng tôi qua các kênh dưới đây.
                </p>

<div className="grid gap-6 sm:grid-cols-2">
                  <Card className="border-none bg-gradient-to-br from-primary/5 to-primary/10 shadow-lg ring-1 ring-primary/10">
                    <CardContent className="flex flex-col items-center gap-4 p-7 text-center">
                      <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-lg shadow-primary/25">
                        <MapPin className="h-7 w-7" />
                      </div>
                      <div>
                        <h3 className="mb-2 text-lg font-bold">Địa chỉ</h3>
                        <p className="text-sm leading-relaxed text-muted-foreground">
                          123 Đường ABC, Quận 1, TP. Hồ Chí Minh
                        </p>
                      </div>
                    </CardContent>
                  </Card>

<Card className="border-none bg-gradient-to-br from-secondary/5 to-secondary/10 shadow-lg ring-1 ring-secondary/10">
                    <CardContent className="flex flex-col items-center gap-4 p-7 text-center">
                      <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-xl bg-secondary text-secondary-foreground shadow-lg shadow-secondary/25">
                        <Phone className="h-7 w-7" />
                      </div>
                      <div>
                        <h3 className="mb-2 text-lg font-bold">Hotline</h3>
                        <p className="text-sm leading-relaxed text-muted-foreground">1900-xxxx (Hỗ trợ 24/7)</p>
                      </div>
                    </CardContent>
                  </Card>

<Card className="border-none bg-gradient-to-br from-primary/5 to-primary/10 shadow-lg ring-1 ring-primary/10">
                    <CardContent className="flex flex-col items-center gap-4 p-7 text-center">
                      <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-lg shadow-primary/25">
                        <Mail className="h-7 w-7" />
                      </div>
                      <div>
                        <h3 className="mb-2 text-lg font-bold">Email</h3>
                        <p className="text-sm leading-relaxed text-muted-foreground">contact@diamondhealth.vn</p>
                      </div>
                    </CardContent>
                  </Card>

{/* Contact Form */}
              <Card className="border-none bg-gradient-to-br from-muted/30 to-muted/50 shadow-2xl ring-1 ring-black/5">
                <CardContent className="p-10">
                  <div className="mb-8 flex items-center gap-3">
                    <MessageSquare className="h-8 w-8 text-primary" />
                    <h3 className="text-3xl font-bold">Đặt lịch tư vấn</h3>
                  </div>
                  <form className="space-y-6">
                    <div className="grid gap-6 md:grid-cols-2">
                      <div className="space-y-3">
                        <label className="text-sm font-semibold">Họ và tên *</label>
                        <input
                          type="text"
                          name="name"
                          value={formData.name}
                          onChange={handleInputChange}
                          className="h-12 w-full rounded-xl border-2 border-input bg-white px-4 text-sm transition-all focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/10"
                          placeholder="Nhập họ và tên"
                        />
                      </div>
                      <div className="space-y-3">
                        <label className="text-sm font-semibold">Số điện thoại *</label>
                        <input
                          type="tel"
                          name="phone"
                          value={formData.phone}
                          onChange={handleInputChange}
                          className="h-12 w-full rounded-xl border-2 border-input bg-white px-4 text-sm transition-all focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/10"
                          placeholder="Nhập số điện thoại"
                        />
                      </div>
                    </div>
                    <div className="space-y-3">
                      <label className="text-sm font-semibold">Email</label>
                      <input
                        type="email"
                        name="email"
                        value={formData.email}
                        onChange={handleInputChange}
                        className="h-12 w-full rounded-xl border-2 border-input bg-white px-4 text-sm transition-all focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/10"
                        placeholder="Nhập email"
                      />
                    </div>

<div className="space-y-3">
                      <label className="text-sm font-semibold">Đặt lịch khám</label>
                      <Button
                        type="button"
                        onClick={() => setIsBookingOpen(true)}
                        className="h-12 w-full bg-secondary text-white font-semibold hover:bg-secondary/90"
                      >
                        <Calendar className="mr-2 h-5 w-5" />
                        Chọn Dịch vụ và Thời gian
                      </Button>
                    </div>

{/* Display selected booking info */}
                    {formData.service && (
                      <div className="rounded-lg bg-secondary/10 p-4 border border-secondary/20">
                        <p className="text-sm font-semibold text-foreground mb-2">Thông tin đã chọn:</p>
                        <div className="space-y-1 text-sm text-muted-foreground">
                          {formData.service && <p>• Dịch vụ: {formData.service}</p>}
                          {formData.date && <p>• Ngày: {formData.date}</p>}
                          {formData.time && <p>• Giờ: {formData.time}</p>}
                        </div>
                      </div>
                    )}

<div className="space-y-3">
                      <label className="text-sm font-semibold">Nội dung</label>
                      <textarea
                        name="message"
                        value={formData.message}
                        onChange={handleInputChange}
                        rows={4}
                        className="w-full rounded-xl border-2 border-input bg-white px-4 py-3 text-sm transition-all focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/10"
                        placeholder="Nhập nội dung cần tư vấn"
                      />
                    </div>
                    <Button className="h-14 w-full bg-primary text-base font-semibold shadow-lg shadow-primary/25 hover:bg-primary/90 hover:shadow-xl hover:shadow-primary/30">
                      <Calendar className="mr-2 h-5 w-5" />
                      Gửi thông tin đặt lịch
                    </Button>
                  </form>
                </CardContent>
              </Card>
            </div>
          </div>

<BookingModal
            isOpen={isBookingOpen}
            onClose={() => setIsBookingOpen(false)}
            onComplete={handleBookingComplete}
          />
        </section>

{/* Map Section */}
        <section className="bg-gradient-to-b from-muted/30 to-white py-24 md:py-32">
          <div className="container mx-auto px-4">
            <div className="mb-12 text-center">
              <h2 className="mb-4 text-4xl font-bold">Vị trí phòng khám</h2>
              <p className="text-lg text-muted-foreground">Dễ dàng tìm đường đến phòng khám của chúng tôi</p>
            </div>
            <Card className="overflow-hidden border-none shadow-2xl ring-1 ring-black/5">
              <div className="aspect-video w-full bg-gradient-to-br from-primary/10 to-secondary/10">
                <div className="flex h-full items-center justify-center">
                  <div className="text-center">
                    <MapPin className="mx-auto mb-4 h-16 w-16 text-primary" />
                    <p className="text-lg font-semibold text-muted-foreground">Bản đồ sẽ được hiển thị tại đây</p>
                    <p className="text-sm text-muted-foreground">123 Đường ABC, Quận 1, TP. Hồ Chí Minh</p>
                  </div>
                </div>
              </div>
            </Card>
          </div>
        </section>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/login/page.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowLeft, Eye, EyeOff, Sparkles, Loader2 } from "lucide-react"
import Link from "next/link"
import { useState } from "react"
import Image from "next/image"
import { useRouter } from "next/navigation"
import { login, getDashboardPath } from "@/lib/auth"
import { toast } from "sonner"

export default function LoginPage() {
  const [showPassword, setShowPassword] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [formData, setFormData] = useState({
    phone: "",
    password: ""
  })
  const router = useRouter()

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setFormData(prev => ({
      ...prev,
      [name]: value
    }))
  }

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

if (!formData.phone || !formData.password) {
      toast.error("Vui lòng nhập đầy đủ thông tin")
      return
    }

setIsLoading(true)

try {
      const user = await login(formData.phone, formData.password)
      toast.success(`Chào mừng ${user.name}!`)

// Trigger storage event to update header
      window.dispatchEvent(new Event('storage'))

router.push(getDashboardPath(user.role))
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "Đăng nhập thất bại")
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="flex min-h-screen">
      <div className="flex w-full flex-col justify-center bg-gradient-to-br from-background via-background to-muted/20 px-6 py-12 lg:w-1/2 lg:px-20">
        <div className="mx-auto w-full max-w-md space-y-10">
          <Link
            href="/"
            className="inline-flex items-center gap-2 text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
          >
            <ArrowLeft className="h-4 w-4" />
            Quay lại trang chủ
          </Link>

<div className="flex items-center gap-4">
            <div className="flex h-24 w-24 items-center justify-center rounded-2xl bg-gradient-to-br ">
              <img
                src="/images/logo.png"
                alt="Logo"
                className="object-contain"
              />
            </div>
            <div className="flex flex-col">
              <span className="text-2xl font-bold leading-none text-foreground">Diamond Health</span>
              <span className="text-sm text-muted-foreground">Phòng khám đa khoa</span>
            </div>
          </div>

<Card className="border-none bg-white shadow-2xl ring-1 ring-black/5">
            <CardHeader className="space-y-3 pb-8">
              <CardTitle className="text-3xl font-bold">Đăng nhập</CardTitle>
              <CardDescription className="text-base leading-relaxed">
                Nhập thông tin tài khoản để truy cập hệ thống
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-8">
              <form onSubmit={handleSubmit} className="space-y-6">
                <div className="space-y-3">
                  <label className="text-sm font-semibold" htmlFor="phone">
                    Số điện thoại
                  </label>
                  <input
                    id="phone"
                    name="phone"
                    type="text"
                    value={formData.phone}
                    onChange={handleInputChange}
                    className="h-12 w-full rounded-xl border-2 border-input bg-background px-4 text-sm transition-all focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/10"
                    placeholder="Nhập số điện thoại"
                    disabled={isLoading}
                  />
                </div>

<div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <label className="text-sm font-semibold" htmlFor="password">
                      Mật khẩu
                    </label>
                    <Link href="#" className="text-sm font-semibold text-primary hover:underline">
                      Quên mật khẩu?
                    </Link>
                  </div>
                  <div className="relative">
                    <input
                      id="password"
                      name="password"
                      type={showPassword ? "text" : "password"}
                      value={formData.password}
                      onChange={handleInputChange}
                      className="h-12 w-full rounded-xl border-2 border-input bg-background px-4 pr-12 text-sm transition-all focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/10"
                      placeholder="Nhập mật khẩu"
                      disabled={isLoading}
                    />
                    <button
                      type="button"
                      onClick={() => setShowPassword(!showPassword)}
                      className="absolute right-4 top-1/2 -translate-y-1/2 text-muted-foreground transition-colors hover:text-foreground"
                      disabled={isLoading}
                    >
                      {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
                    </button>
                  </div>
                </div>

<Button
                  type="submit"
                  className="h-14 w-full bg-primary text-base font-semibold shadow-lg shadow-primary/25 hover:bg-primary/90 hover:shadow-xl hover:shadow-primary/30"
                  size="lg"
                  disabled={isLoading}
                >
                  {isLoading ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Đang đăng nhập...
                    </>
                  ) : (
                    "Đăng nhập"
                  )}
                </Button>

<Button
                  variant="outline"
                  className="h-12 w-full justify-center border-2 font-semibold hover:bg-muted/50 bg-transparent"
                  type="button"
                >
                  <svg className="mr-3 h-5 w-5" viewBox="0 0 24 24">
                    <path
                      fill="#4285F4"
                      d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                    />
                    <path
                      fill="#34A853"
                      d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                    />
                    <path
                      fill="#FBBC05"
                      d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                    />
                    <path
                      fill="#EA4335"
                      d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                    />
                  </svg>
                  Đăng nhập với Google
                </Button>

<div className="text-center text-sm">
                  <span className="text-muted-foreground">Chưa có tài khoản? </span>
                  <Link href="/register" className="font-bold text-primary hover:underline">
                    Đăng ký ngay
                  </Link>
                </div>
              </form>
            </CardContent>
          </Card>

<p className="text-center text-sm leading-relaxed text-muted-foreground">
            Bằng việc đăng nhập, bạn đồng ý với{" "}
            <Link href="#" className="font-semibold text-primary hover:underline">
              Điều khoản sử dụng
            </Link>{" "}
            và{" "}
            <Link href="#" className="font-semibold text-primary hover:underline">
              Chính sách bảo mật
            </Link>{" "}
            của chúng tôi
          </p>
        </div>
      </div>

<div className="relative hidden lg:block lg:w-1/2">
        <div className="absolute inset-0 bg-gradient-to-br from-blue-400 via-primary/80 to-indigo-500">
          <Image
            src="/modern-medical-clinic-reception-area-with-natural-.jpg"
            alt="Diamond Health Clinic"
            fill
            className="object-cover opacity-15"
          />
        </div>
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_30%,rgba(255,255,255,0.2)_0%,transparent_50%)]"></div>
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_70%,rgba(255,255,255,0.15)_0%,transparent_50%)]"></div>
        <div className="absolute right-0 top-0 h-96 w-96 rounded-full bg-gradient-to-br from-white/15 to-transparent blur-3xl"></div>
        <div className="absolute bottom-0 left-0 h-96 w-96 rounded-full bg-gradient-to-tr from-white/15 to-transparent blur-3xl"></div>
        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNCI+PGNpcmNsZSBjeD0iNDAiIGN5PSI0MCIgcj0iMiIvPjwvZz48L2c+PC9zdmc+')] opacity-40"></div>
        <div className="relative flex h-full flex-col justify-center px-20 text-primary-foreground">
          <div className="max-w-lg space-y-10">
            <div className="inline-flex items-center gap-2 rounded-full border border-primary-foreground/20 bg-primary-foreground/10 px-5 py-2.5 text-sm font-semibold backdrop-blur-sm">
              <Sparkles className="h-4 w-4" />
              Hệ thống quản lý hiện đại
            </div>
            <h2 className="text-5xl font-bold leading-tight text-balance">Chào mừng đến với Diamond Health</h2>
            <p className="text-xl leading-relaxed opacity-95">
              Hệ thống quản lý phòng khám hiện đại, giúp bạn dễ dàng đặt lịch khám, theo dõi sức khỏe và kết nối với bác
              sĩ.
            </p>
            <div className="space-y-6 pt-6">
              <div className="flex items-start gap-5">
                <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary-foreground/20 backdrop-blur-sm">
                  <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                  </svg>
                </div>
                <div>
                  <h3 className="mb-2 text-lg font-bold">Đặt lịch dễ dàng</h3>
                  <p className="leading-relaxed opacity-90">Chọn bác sĩ và thời gian phù hợp chỉ với vài cú click</p>
                </div>
              </div>
              <div className="flex items-start gap-5">
                <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary-foreground/20 backdrop-blur-sm">
                  <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                  </svg>
                </div>
                <div>
                  <h3 className="mb-2 text-lg font-bold">Theo dõi sức khỏe</h3>
                  <p className="leading-relaxed opacity-90">Xem lịch sử khám bệnh và kết quả xét nghiệm mọi lúc</p>
                </div>
              </div>
              <div className="flex items-start gap-5">
                <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary-foreground/20 backdrop-blur-sm">
                  <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                  </svg>
                </div>
                <div>
                  <h3 className="mb-2 text-lg font-bold">Tư vấn trực tuyến</h3>
                  <p className="leading-relaxed opacity-90">Kết nối với bác sĩ qua video call khi cần thiết</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/management/analytics/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/management/analytics/page.tsx" isMerged="true"
"use client"

import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { BarChart3, TrendingUp, FileText, Users, Clock, DollarSign, Activity } from "lucide-react"
import {
  Bar,
  BarChart,
  Line,
  LineChart,
  Area,
  AreaChart,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts"

const navigation = [
  { name: "Tổng quan", href: "/management", icon: BarChart3 },
  { name: "Báo cáo", href: "/management/reports", icon: FileText },
  { name: "Phân tích", href: "/management/analytics", icon: TrendingUp },
]

// Mock data for detailed analytics
const hourlyPatientData = [
  { hour: "8h", patients: 12 },
  { hour: "9h", patients: 18 },
  { hour: "10h", patients: 25 },
  { hour: "11h", patients: 22 },
  { hour: "12h", patients: 8 },
  { hour: "13h", patients: 15 },
  { hour: "14h", patients: 28 },
  { hour: "15h", patients: 24 },
  { hour: "16h", patients: 20 },
  { hour: "17h", patients: 16 },
]

const weeklyTrendData = [
  { day: "T2", appointments: 45, completed: 42, cancelled: 3 },
  { day: "T3", appointments: 52, completed: 48, cancelled: 4 },
  { day: "T4", appointments: 48, completed: 45, cancelled: 3 },
  { day: "T5", appointments: 61, completed: 56, cancelled: 5 },
  { day: "T6", appointments: 55, completed: 51, cancelled: 4 },
  { day: "T7", appointments: 38, completed: 35, cancelled: 3 },
  { day: "CN", appointments: 25, completed: 23, cancelled: 2 },
]

const serviceRevenueData = [
  { service: "Khám bệnh", revenue: 35000000 },
  { service: "Xét nghiệm", revenue: 18000000 },
  { service: "Siêu âm", revenue: 12000000 },
  { service: "X-quang", revenue: 8000000 },
  { service: "Thuốc", revenue: 22000000 },
]

const patientAgeData = [
  { age: "0-18", count: 120 },
  { age: "19-35", count: 280 },
  { age: "36-50", count: 350 },
  { age: "51-65", count: 220 },
  { age: "65+", count: 180 },
]

const satisfactionData = [
  { month: "T1", score: 4.2 },
  { month: "T2", score: 4.3 },
  { month: "T3", score: 4.4 },
  { month: "T4", score: 4.5 },
  { month: "T5", score: 4.6 },
  { month: "T6", score: 4.7 },
]

export default function ManagementAnalyticsPage() {
  const insights = [
    {
      title: "Giờ cao điểm",
      value: "14:00 - 15:00",
      description: "Thời gian có nhiều bệnh nhân nhất",
      icon: Clock,
      color: "text-chart-1",
    },
    {
      title: "Dịch vụ phổ biến",
      value: "Khám bệnh",
      description: "Chiếm 35% tổng doanh thu",
      icon: Activity,
      color: "text-chart-2",
    },
    {
      title: "Độ tuổi chính",
      value: "36-50 tuổi",
      description: "Nhóm bệnh nhân đông nhất",
      icon: Users,
      color: "text-chart-3",
    },
    {
      title: "Doanh thu TB/BN",
      value: "1.200.000 ₫",
      description: "Tăng 8% so với tháng trước",
      icon: DollarSign,
      color: "text-chart-4",
    },
  ]

const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("vi-VN", {
      style: "currency",
      currency: "VND",
      minimumFractionDigits: 0,
    }).format(value)
  }

return (
    <DashboardLayout navigation={navigation}>
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Phân tích chi tiết</h1>
          <p className="text-muted-foreground">Thông tin chuyên sâu về hoạt động phòng khám</p>
        </div>

{/* Key Insights */}
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          {insights.map((insight) => {
            const Icon = insight.icon
            return (
              <Card key={insight.title}>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">{insight.title}</CardTitle>
                  <Icon className={`h-4 w-4 ${insight.color}`} />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">{insight.value}</div>
                  <p className="text-xs text-muted-foreground">{insight.description}</p>
                </CardContent>
              </Card>
            )
          })}
        </div>

{/* Hourly Analysis */}
          <TabsContent value="hourly" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Phân bổ bệnh nhân theo giờ</CardTitle>
                <CardDescription>Số lượng bệnh nhân trong ngày</CardDescription>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={350}>
                  <AreaChart data={hourlyPatientData}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="hour" />
                    <YAxis />
                    <Tooltip />
                    <Area
                      type="monotone"
                      dataKey="patients"
                      name="Bệnh nhân"
                      stroke="hsl(var(--chart-1))"
                      fill="hsl(var(--chart-1))"
                      fillOpacity={0.6}
                    />
                  </AreaChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>
          </TabsContent>

{/* Weekly Trends */}
          <TabsContent value="weekly" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Xu hướng theo tuần</CardTitle>
                <CardDescription>Lịch hẹn và tỷ lệ hoàn thành trong tuần</CardDescription>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={350}>
                  <BarChart data={weeklyTrendData}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="day" />
                    <YAxis />
                    <Tooltip />
                    <Legend />
                    <Bar dataKey="appointments" name="Tổng lịch hẹn" fill="hsl(var(--chart-1))" />
                    <Bar dataKey="completed" name="Hoàn thành" fill="hsl(var(--chart-2))" />
                    <Bar dataKey="cancelled" name="Đã hủy" fill="hsl(var(--destructive))" />
                  </BarChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>
          </TabsContent>

{/* Service Revenue */}
          <TabsContent value="services" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Doanh thu theo dịch vụ</CardTitle>
                <CardDescription>Phân tích doanh thu từng loại dịch vụ</CardDescription>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={350}>
                  <BarChart data={serviceRevenueData} layout="vertical">
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis type="number" tickFormatter={(value) => `${value / 1000000}M`} />
                    <YAxis dataKey="service" type="category" width={100} />
                    <Tooltip formatter={(value) => formatCurrency(Number(value))} />
                    <Bar dataKey="revenue" name="Doanh thu" fill="hsl(var(--chart-2))" />
                  </BarChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>
          </TabsContent>

{/* Demographics */}
          <TabsContent value="demographics" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Phân bổ độ tuổi</CardTitle>
                <CardDescription>Số lượng bệnh nhân theo nhóm tuổi</CardDescription>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={350}>
                  <BarChart data={patientAgeData}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="age" />
                    <YAxis />
                    <Tooltip />
                    <Bar dataKey="count" name="Số bệnh nhân" fill="hsl(var(--chart-3))" />
                  </BarChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>
          </TabsContent>

{/* Satisfaction */}
          <TabsContent value="satisfaction" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Chỉ số hài lòng</CardTitle>
                <CardDescription>Điểm đánh giá trung bình của bệnh nhân</CardDescription>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={350}>
                  <LineChart data={satisfactionData}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="month" />
                    <YAxis domain={[0, 5]} />
                    <Tooltip />
                    <Line
                      type="monotone"
                      dataKey="score"
                      name="Điểm hài lòng"
                      stroke="hsl(var(--chart-4))"
                      strokeWidth={2}
                    />
                  </LineChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>

{/* Performance Summary */}
        <Card>
          <CardHeader>
            <CardTitle>Tóm tắt hiệu suất</CardTitle>
            <CardDescription>Các chỉ số quan trọng trong tháng</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
              <div className="space-y-2">
                <p className="text-sm text-muted-foreground">Tỷ lệ hoàn thành lịch hẹn</p>
                <p className="text-2xl font-bold">92%</p>
                <Badge variant="default">Xuất sắc</Badge>
              </div>
              <div className="space-y-2">
                <p className="text-sm text-muted-foreground">Thời gian chờ trung bình</p>
                <p className="text-2xl font-bold">15 phút</p>
                <Badge variant="default">Tốt</Badge>
              </div>
              <div className="space-y-2">
                <p className="text-sm text-muted-foreground">Tỷ lệ bệnh nhân quay lại</p>
                <p className="text-2xl font-bold">68%</p>
                <Badge variant="secondary">Khá</Badge>
              </div>
              <div className="space-y-2">
                <p className="text-sm text-muted-foreground">Doanh thu/Bệnh nhân</p>
                <p className="text-2xl font-bold">1.2M ₫</p>
                <Badge variant="default">Tăng 8%</Badge>
              </div>
              <div className="space-y-2">
                <p className="text-sm text-muted-foreground">Tỷ lệ sử dụng phòng khám</p>
                <p className="text-2xl font-bold">85%</p>
                <Badge variant="default">Hiệu quả</Badge>
              </div>
              <div className="space-y-2">
                <p className="text-sm text-muted-foreground">Điểm hài lòng trung bình</p>
                <p className="text-2xl font-bold">4.7/5.0</p>
                <Badge variant="default">Xuất sắc</Badge>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/management/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/management/reports/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/management/reports/page.tsx" isMerged="true"
"use client"

const reports = [
  {
    id: "R001",
    title: "Báo cáo doanh thu tháng 6/2024",
    type: "Tài chính",
    date: "2024-06-30",
    status: "completed",
    size: "2.4 MB",
  },
  {
    id: "R002",
    title: "Báo cáo hoạt động khám bệnh Q2/2024",
    type: "Hoạt động",
    date: "2024-06-30",
    status: "completed",
    size: "1.8 MB",
  },
  {
    id: "R003",
    title: "Báo cáo nhân sự tháng 6/2024",
    type: "Nhân sự",
    date: "2024-06-30",
    status: "completed",
    size: "1.2 MB",
  },
  {
    id: "R004",
    title: "Báo cáo tồn kho thuốc tháng 6/2024",
    type: "Kho thuốc",
    date: "2024-06-30",
    status: "completed",
    size: "0.9 MB",
  },
  {
    id: "R005",
    title: "Báo cáo chất lượng dịch vụ Q2/2024",
    type: "Chất lượng",
    date: "2024-06-30",
    status: "completed",
    size: "3.1 MB",
  },
  {
    id: "R006",
    title: "Báo cáo doanh thu tháng 7/2024",
    type: "Tài chính",
    date: "2024-07-31",
    status: "processing",
    size: "-",
  },
]

export default function ManagementReportsPage() {
  const [selectedType, setSelectedType] = useState<string>("all")

const reportTypes = ["all", "Tài chính", "Hoạt động", "Nhân sự", "Kho thuốc", "Chất lượng"]

const filteredReports = selectedType === "all" ? reports : reports.filter((r) => r.type === selectedType)

return (
    <DashboardLayout navigation={navigation}>
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold tracking-tight">Báo cáo</h1>
            <p className="text-muted-foreground">Quản lý và tải xuống các báo cáo hệ thống</p>
          </div>
          <Button>
            <Calendar className="mr-2 h-4 w-4" />
            Tạo báo cáo mới
          </Button>
        </div>

{/* Filter */}
        <Card>
          <CardHeader>
            <CardTitle>Lọc báo cáo</CardTitle>
            <CardDescription>Chọn loại báo cáo muốn xem</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex flex-wrap gap-2">
              {reportTypes.map((type) => (
                <Button
                  key={type}
                  variant={selectedType === type ? "default" : "outline"}
                  size="sm"
                  onClick={() => setSelectedType(type)}
                >
                  {type === "all" ? "Tất cả" : type}
                </Button>
              ))}
            </div>
          </CardContent>
        </Card>

{/* Reports List */}
        <div className="space-y-4">
          {filteredReports.map((report) => (
            <Card key={report.id} className="hover:shadow-md transition-shadow">
              <CardContent className="p-6">
                <div className="flex items-start justify-between">
                  <div className="space-y-2 flex-1">
                    <div className="flex items-center gap-2">
                      <FileText className="h-5 w-5 text-muted-foreground" />
                      <h3 className="text-lg font-semibold">{report.title}</h3>
                      <Badge variant="outline">{report.id}</Badge>
                    </div>
                    <div className="flex gap-3 text-sm text-muted-foreground">
                      <Badge variant="secondary">{report.type}</Badge>
                      <span>•</span>
                      <span>Ngày tạo: {report.date}</span>
                      <span>•</span>
                      <span>Kích thước: {report.size}</span>
                    </div>
                    <Badge variant={report.status === "completed" ? "default" : "secondary"}>
                      {report.status === "completed" ? "Hoàn thành" : "Đang xử lý"}
                    </Badge>
                  </div>
                  <div className="flex gap-2 ml-4">
                    {report.status === "completed" && (
                      <Button size="sm">
                        <Download className="mr-2 h-4 w-4" />
                        Tải xuống
                      </Button>
                    )}
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

{filteredReports.length === 0 && (
          <Card>
            <CardContent className="py-12 text-center">
              <p className="text-muted-foreground">Không có báo cáo nào</p>
            </CardContent>
          </Card>
        )}
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/nurse/monitoring/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/nurse/monitoring/page.tsx" isMerged="true"
"use client"

import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Activity,
  Users,
  ClipboardList,
  Stethoscope,
  Heart,
  Thermometer,
  Pause as Pulse,
  AlertCircle,
} from "lucide-react"
import { mockAppointments } from "@/lib/mock-data"
import { useRouter } from "next/navigation"

const navigation = [
  { name: "Tổng quan", href: "/nurse", icon: Activity },
  { name: "Bệnh nhân", href: "/nurse/patients", icon: Users },
  { name: "Nhiệm vụ", href: "/nurse/tasks", icon: ClipboardList },
  { name: "Theo dõi", href: "/nurse/monitoring", icon: Stethoscope },
]

export default function NurseMonitoringPage() {
  const router = useRouter()

const activePatients = mockAppointments.filter((a) => a.status === "in-progress")

// Mock vital signs with some abnormal values
  const getVitalSigns = (index: number) => {
    const isAbnormal = index % 3 === 0
    return {
      bloodPressure: isAbnormal
        ? `${Math.floor(Math.random() * 20 + 150)}/${Math.floor(Math.random() * 10 + 95)}`
        : `${Math.floor(Math.random() * 20 + 110)}/${Math.floor(Math.random() * 10 + 70)}`,
      heartRate: isAbnormal ? Math.floor(Math.random() * 20 + 100) : Math.floor(Math.random() * 20 + 70),
      temperature: isAbnormal ? (Math.random() * 1 + 38).toFixed(1) : (Math.random() * 0.5 + 36.5).toFixed(1),
      oxygenSaturation: isAbnormal ? Math.floor(Math.random() * 5 + 90) : Math.floor(Math.random() * 3 + 97),
      status: isAbnormal ? "warning" : "normal",
      lastUpdated: "5 phút trước",
    }
  }

const patientsWithVitals = activePatients.map((patient, index) => ({
    ...patient,
    vitals: getVitalSigns(index),
  }))

const criticalPatients = patientsWithVitals.filter((p) => p.vitals.status === "warning")
  const normalPatients = patientsWithVitals.filter((p) => p.vitals.status === "normal")

return (
    <DashboardLayout navigation={navigation}>
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Theo dõi sinh hiệu</h1>
          <p className="text-muted-foreground">Giám sát tình trạng sức khỏe bệnh nhân</p>
        </div>

{/* Statistics */}
        <div className="grid gap-4 md:grid-cols-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Tổng bệnh nhân</CardTitle>
              <Users className="h-4 w-4 text-primary" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{patientsWithVitals.length}</div>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Cần chú ý</CardTitle>
              <AlertCircle className="h-4 w-4 text-destructive" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{criticalPatients.length}</div>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Ổn định</CardTitle>
              <Activity className="h-4 w-4 text-chart-2" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{normalPatients.length}</div>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Cập nhật gần đây</CardTitle>
              <Stethoscope className="h-4 w-4 text-chart-4" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{patientsWithVitals.length}</div>
            </CardContent>
          </Card>
        </div>

{/* Critical Patients */}
        {criticalPatients.length > 0 && (
          <Card className="border-destructive">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <AlertCircle className="h-5 w-5 text-destructive" />
                Bệnh nhân cần chú ý
              </CardTitle>
              <CardDescription>Sinh hiệu bất thường, cần theo dõi sát</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {criticalPatients.map((patient) => (
                  <Card key={patient.id} className="bg-destructive/5">
                    <CardContent className="p-4">
                      <div className="space-y-3">
                        <div className="flex items-start justify-between">
                          <div>
                            <div className="flex items-center gap-2 mb-1">
                              <h3 className="font-semibold">{patient.patientName}</h3>
                              <Badge variant="outline">{patient.id}</Badge>
                              <Badge variant="destructive">Cần chú ý</Badge>
                            </div>
                            <p className="text-sm text-muted-foreground">{patient.doctorName}</p>
                            <Badge variant="secondary" className="mt-1">
                              {patient.department}
                            </Badge>
                          </div>
                          <Button size="sm" onClick={() => router.push(`/nurse/patients/${patient.id}`)}>
                            Xử lý
                          </Button>
                        </div>

<div className="grid grid-cols-2 md:grid-cols-4 gap-4 pt-3 border-t">
                          <div className="flex items-center gap-2">
                            <Heart className="h-4 w-4 text-destructive" />
                            <div>
                              <p className="text-xs text-muted-foreground">Huyết áp</p>
                              <p className="text-sm font-medium text-destructive">{patient.vitals.bloodPressure}</p>
                            </div>
                          </div>
                          <div className="flex items-center gap-2">
                            <Pulse className="h-4 w-4 text-destructive" />
                            <div>
                              <p className="text-xs text-muted-foreground">Nhịp tim</p>
                              <p className="text-sm font-medium text-destructive">{patient.vitals.heartRate} bpm</p>
                            </div>
                          </div>
                          <div className="flex items-center gap-2">
                            <Thermometer className="h-4 w-4 text-destructive" />
                            <div>
                              <p className="text-xs text-muted-foreground">Nhiệt độ</p>
                              <p className="text-sm font-medium text-destructive">{patient.vitals.temperature}°C</p>
                            </div>
                          </div>
                          <div className="flex items-center gap-2">
                            <Activity className="h-4 w-4 text-destructive" />
                            <div>
                              <p className="text-xs text-muted-foreground">SpO2</p>
                              <p className="text-sm font-medium text-destructive">{patient.vitals.oxygenSaturation}%</p>
                            </div>
                          </div>
                        </div>

<p className="text-xs text-muted-foreground">Cập nhật: {patient.vitals.lastUpdated}</p>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </CardContent>
          </Card>
        )}

{/* Normal Patients */}
        <Card>
          <CardHeader>
            <CardTitle>Bệnh nhân ổn định</CardTitle>
            <CardDescription>Sinh hiệu trong giới hạn bình thường</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {normalPatients.length === 0 ? (
                <p className="text-sm text-muted-foreground text-center py-4">Không có bệnh nhân nào</p>
              ) : (
                normalPatients.map((patient) => (
                  <Card key={patient.id}>
                    <CardContent className="p-4">
                      <div className="space-y-3">
                        <div className="flex items-start justify-between">
                          <div>
                            <div className="flex items-center gap-2 mb-1">
                              <h3 className="font-semibold">{patient.patientName}</h3>
                              <Badge variant="outline">{patient.id}</Badge>
                            </div>
                            <p className="text-sm text-muted-foreground">{patient.doctorName}</p>
                            <Badge variant="secondary" className="mt-1">
                              {patient.department}
                            </Badge>
                          </div>
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => router.push(`/nurse/patients/${patient.id}`)}
                          >
                            Xem
                          </Button>
                        </div>

<div className="grid grid-cols-2 md:grid-cols-4 gap-4 pt-3 border-t">
                          <div className="flex items-center gap-2">
                            <Heart className="h-4 w-4 text-chart-2" />
                            <div>
                              <p className="text-xs text-muted-foreground">Huyết áp</p>
                              <p className="text-sm font-medium">{patient.vitals.bloodPressure}</p>
                            </div>
                          </div>
                          <div className="flex items-center gap-2">
                            <Pulse className="h-4 w-4 text-chart-3" />
                            <div>
                              <p className="text-xs text-muted-foreground">Nhịp tim</p>
                              <p className="text-sm font-medium">{patient.vitals.heartRate} bpm</p>
                            </div>
                          </div>
                          <div className="flex items-center gap-2">
                            <Thermometer className="h-4 w-4 text-chart-4" />
                            <div>
                              <p className="text-xs text-muted-foreground">Nhiệt độ</p>
                              <p className="text-sm font-medium">{patient.vitals.temperature}°C</p>
                            </div>
                          </div>
                          <div className="flex items-center gap-2">
                            <Activity className="h-4 w-4 text-primary" />
                            <div>
                              <p className="text-xs text-muted-foreground">SpO2</p>
                              <p className="text-sm font-medium">{patient.vitals.oxygenSaturation}%</p>
                            </div>
                          </div>
                        </div>

<p className="text-xs text-muted-foreground">Cập nhật: {patient.vitals.lastUpdated}</p>
                      </div>
                    </CardContent>
                  </Card>
                ))
              )}
            </div>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/nurse/page.tsx" isMerged="true"
"use client"

import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Activity, Users, ClipboardList, Stethoscope, AlertCircle, Clock } from "lucide-react"
import { mockAppointments } from "@/lib/mock-data"
import { useRouter } from "next/navigation"

export default function NurseDashboard() {
  const router = useRouter()

// Get active patients (in-progress appointments)
  const activePatients = mockAppointments.filter((apt) => apt.status === "in-progress")

// Statistics
  const stats = [
    {
      title: "Bệnh nhân đang điều trị",
      value: activePatients.length.toString(),
      icon: Users,
      color: "text-primary",
    },
    {
      title: "Nhiệm vụ chờ xử lý",
      value: "8",
      icon: ClipboardList,
      color: "text-chart-4",
    },
    {
      title: "Cần theo dõi",
      value: "5",
      icon: AlertCircle,
      color: "text-destructive",
    },
    {
      title: "Hoàn thành hôm nay",
      value: "12",
      icon: Activity,
      color: "text-chart-2",
    },
  ]

// Mock tasks
  const urgentTasks = [
    {
      id: "T001",
      patientName: "Nguyễn Văn A",
      patientId: "BN001",
      task: "Đo huyết áp và nhiệt độ",
      time: "09:30",
      priority: "high",
    },
    {
      id: "T002",
      patientName: "Trần Thị B",
      patientId: "BN002",
      task: "Tiêm thuốc kháng sinh",
      time: "10:00",
      priority: "high",
    },
    {
      id: "T003",
      patientName: "Lê Văn C",
      patientId: "BN003",
      task: "Thay băng vết thương",
      time: "10:30",
      priority: "medium",
    },
  ]

return (
    <DashboardLayout navigation={navigation}>
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Điều phối Y tá</h1>
          <p className="text-muted-foreground">Quản lý chăm sóc và theo dõi bệnh nhân</p>
        </div>

<div className="grid gap-6 md:grid-cols-2">
          {/* Urgent Tasks */}
          <Card>
            <CardHeader>
              <CardTitle>Nhiệm vụ cần xử lý</CardTitle>
              <CardDescription>Các công việc ưu tiên cao</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {urgentTasks.map((task) => (
                  <div key={task.id} className="flex items-start justify-between border-b pb-4 last:border-0">
                    <div className="space-y-1 flex-1">
                      <div className="flex items-center gap-2">
                        <Clock className="h-4 w-4 text-muted-foreground" />
                        <span className="font-medium">{task.time}</span>
                        <Badge variant={task.priority === "high" ? "destructive" : "secondary"}>
                          {task.priority === "high" ? "Khẩn" : "Trung bình"}
                        </Badge>
                      </div>
                      <p className="text-sm font-medium">{task.patientName}</p>
                      <p className="text-sm text-muted-foreground">{task.task}</p>
                      <Badge variant="outline">{task.patientId}</Badge>
                    </div>
                    <Button size="sm" onClick={() => router.push(`/nurse/tasks/${task.id}`)}>
                      Xử lý
                    </Button>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

{/* Active Patients */}
          <Card>
            <CardHeader>
              <CardTitle>Bệnh nhân đang điều trị</CardTitle>
              <CardDescription>Danh sách bệnh nhân cần chăm sóc</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {activePatients.length === 0 ? (
                  <p className="text-sm text-muted-foreground text-center py-4">Không có bệnh nhân nào</p>
                ) : (
                  activePatients.slice(0, 4).map((appointment) => (
                    <div key={appointment.id} className="flex items-start justify-between border-b pb-4 last:border-0">
                      <div className="space-y-1">
                        <p className="text-sm font-medium">{appointment.patientName}</p>
                        <p className="text-sm text-muted-foreground">{appointment.doctorName}</p>
                        <div className="flex gap-2">
                          <Badge variant="outline">{appointment.id}</Badge>
                          <Badge variant="secondary">{appointment.department}</Badge>
                        </div>
                      </div>
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => router.push(`/nurse/patients/${appointment.id}`)}
                      >
                        Xem
                      </Button>
                    </div>
                  ))
                )}
              </div>
            </CardContent>
          </Card>
        </div>

{/* Quick Actions */}
        <Card>
          <CardHeader>
            <CardTitle>Thao tác nhanh</CardTitle>
            <CardDescription>Các chức năng thường dùng</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-4">
              <Button className="h-auto py-4 flex-col gap-2" onClick={() => router.push("/nurse/tasks")}>
                <ClipboardList className="h-5 w-5" />
                <span className="text-sm">Xem nhiệm vụ</span>
              </Button>

<Button
                variant="outline"
                className="h-auto py-4 flex-col gap-2 bg-transparent"
                onClick={() => router.push("/nurse/monitoring")}
              >
                <Stethoscope className="h-5 w-5" />
                <span className="text-sm">Theo dõi sinh hiệu</span>
              </Button>

<Button
                variant="outline"
                className="h-auto py-4 flex-col gap-2 bg-transparent"
                onClick={() => router.push("/nurse/patients")}
              >
                <Users className="h-5 w-5" />
                <span className="text-sm">Danh sách BN</span>
              </Button>

<Button
                variant="outline"
                className="h-auto py-4 flex-col gap-2 bg-transparent"
                onClick={() => router.push("/nurse/tasks/new")}
              >
                <Activity className="h-5 w-5" />
                <span className="text-sm">Ghi nhận chăm sóc</span>
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/nurse/patients/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/nurse/patients/page.tsx" isMerged="true"
"use client"

import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Activity, Users, ClipboardList, Stethoscope, Heart, Thermometer, Pause as Pulse } from "lucide-react"
import { mockAppointments } from "@/lib/mock-data"
import { useRouter } from "next/navigation"

export default function NursePatientsPage() {
  const router = useRouter()

const inProgressPatients = mockAppointments.filter((a) => a.status === "in-progress")
  const scheduledPatients = mockAppointments.filter((a) => a.status === "scheduled")
  const completedPatients = mockAppointments.filter((a) => a.status === "completed")

// Mock vital signs
  const getVitalSigns = () => ({
    bloodPressure: `${Math.floor(Math.random() * 40 + 110)}/${Math.floor(Math.random() * 20 + 70)}`,
    heartRate: Math.floor(Math.random() * 30 + 60),
    temperature: (Math.random() * 1.5 + 36.5).toFixed(1),
    status: Math.random() > 0.7 ? "warning" : "normal",
  })

const PatientCard = ({ appointment }: { appointment: (typeof mockAppointments)[0] }) => {
    const vitals = getVitalSigns()

return (
      <Card className="hover:shadow-md transition-shadow">
        <CardContent className="p-6">
          <div className="flex items-start justify-between">
            <div className="space-y-3 flex-1">
              <div className="flex items-start justify-between">
                <div>
                  <div className="flex items-center gap-2 mb-1">
                    <h3 className="text-lg font-semibold">{appointment.patientName}</h3>
                    <Badge variant="outline">{appointment.id}</Badge>
                  </div>
                  <p className="text-sm text-muted-foreground">{appointment.doctorName}</p>
                  <Badge variant="secondary" className="mt-1">
                    {appointment.department}
                  </Badge>
                </div>
                {vitals.status === "warning" && (
                  <Badge variant="destructive" className="ml-2">
                    Cần chú ý
                  </Badge>
                )}
              </div>

<div className="grid grid-cols-3 gap-4 pt-2 border-t">
                <div className="flex items-center gap-2">
                  <Heart className={`h-4 w-4 ${vitals.status === "warning" ? "text-destructive" : "text-chart-2"}`} />
                  <div>
                    <p className="text-xs text-muted-foreground">Huyết áp</p>
                    <p className="text-sm font-medium">{vitals.bloodPressure}</p>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <Pulse className="h-4 w-4 text-chart-3" />
                  <div>
                    <p className="text-xs text-muted-foreground">Nhịp tim</p>
                    <p className="text-sm font-medium">{vitals.heartRate} bpm</p>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <Thermometer className="h-4 w-4 text-chart-4" />
                  <div>
                    <p className="text-xs text-muted-foreground">Nhiệt độ</p>
                    <p className="text-sm font-medium">{vitals.temperature}°C</p>
                  </div>
                </div>
              </div>
            </div>
            <div className="flex gap-2 ml-4">
              <Button size="sm" onClick={() => router.push(`/nurse/patients/${appointment.id}`)}>
                Chi tiết
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>
    )
  }

return (
    <DashboardLayout navigation={navigation}>
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Quản lý bệnh nhân</h1>
          <p className="text-muted-foreground">Theo dõi và chăm sóc bệnh nhân</p>
        </div>

<Tabs defaultValue="in-progress" className="space-y-4">
          <TabsList>
            <TabsTrigger value="in-progress">Đang điều trị ({inProgressPatients.length})</TabsTrigger>
            <TabsTrigger value="scheduled">Chờ khám ({scheduledPatients.length})</TabsTrigger>
            <TabsTrigger value="completed">Đã hoàn thành ({completedPatients.length})</TabsTrigger>
          </TabsList>

<TabsContent value="in-progress" className="space-y-4">
            {inProgressPatients.length === 0 ? (
              <Card>
                <CardContent className="py-12 text-center">
                  <p className="text-muted-foreground">Không có bệnh nhân đang điều trị</p>
                </CardContent>
              </Card>
            ) : (
              inProgressPatients.map((appointment) => <PatientCard key={appointment.id} appointment={appointment} />)
            )}
          </TabsContent>

<TabsContent value="scheduled" className="space-y-4">
            {scheduledPatients.length === 0 ? (
              <Card>
                <CardContent className="py-12 text-center">
                  <p className="text-muted-foreground">Không có bệnh nhân chờ khám</p>
                </CardContent>
              </Card>
            ) : (
              scheduledPatients.map((appointment) => <PatientCard key={appointment.id} appointment={appointment} />)
            )}
          </TabsContent>

<TabsContent value="completed" className="space-y-4">
            {completedPatients.length === 0 ? (
              <Card>
                <CardContent className="py-12 text-center">
                  <p className="text-muted-foreground">Không có bệnh nhân đã hoàn thành</p>
                </CardContent>
              </Card>
            ) : (
              completedPatients.map((appointment) => <PatientCard key={appointment.id} appointment={appointment} />)
            )}
          </TabsContent>
        </Tabs>
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/nurse/tasks/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/nurse/tasks/page.tsx" isMerged="true"
"use client"

import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Activity, Users, ClipboardList, Stethoscope, Clock, Plus } from "lucide-react"
import { useState } from "react"
import { useRouter } from "next/navigation"

// Mock tasks data
const mockTasks = [
  {
    id: "T001",
    patientName: "Nguyễn Văn A",
    patientId: "BN001",
    task: "Đo huyết áp và nhiệt độ",
    time: "09:30",
    priority: "high",
    completed: false,
    category: "vital-signs",
  },
  {
    id: "T002",
    patientName: "Trần Thị B",
    patientId: "BN002",
    task: "Tiêm thuốc kháng sinh",
    time: "10:00",
    priority: "high",
    completed: false,
    category: "medication",
  },
  {
    id: "T003",
    patientName: "Lê Văn C",
    patientId: "BN003",
    task: "Thay băng vết thương",
    time: "10:30",
    priority: "medium",
    completed: false,
    category: "wound-care",
  },
  {
    id: "T004",
    patientName: "Phạm Thị D",
    patientId: "BN004",
    task: "Hỗ trợ vệ sinh cá nhân",
    time: "11:00",
    priority: "low",
    completed: false,
    category: "care",
  },
  {
    id: "T005",
    patientName: "Hoàng Văn E",
    patientId: "BN005",
    task: "Kiểm tra đường huyết",
    time: "14:00",
    priority: "high",
    completed: false,
    category: "vital-signs",
  },
  {
    id: "T006",
    patientName: "Nguyễn Thị F",
    patientId: "BN006",
    task: "Cho uống thuốc",
    time: "14:30",
    priority: "medium",
    completed: true,
    category: "medication",
  },
]

export default function NurseTasksPage() {
  const router = useRouter()
  const [tasks, setTasks] = useState(mockTasks)

const toggleTask = (taskId: string) => {
    setTasks(tasks.map((task) => (task.id === taskId ? { ...task, completed: !task.completed } : task)))
  }

const pendingTasks = tasks.filter((t) => !t.completed)
  const completedTasks = tasks.filter((t) => t.completed)

const getPriorityColor = (priority: string) => {
    switch (priority) {
      case "high":
        return "destructive"
      case "medium":
        return "secondary"
      default:
        return "outline"
    }
  }

const getCategoryLabel = (category: string) => {
    switch (category) {
      case "vital-signs":
        return "Sinh hiệu"
      case "medication":
        return "Thuốc"
      case "wound-care":
        return "Chăm sóc vết thương"
      case "care":
        return "Chăm sóc"
      default:
        return category
    }
  }

return (
    <DashboardLayout navigation={navigation}>
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold tracking-tight">Nhiệm vụ chăm sóc</h1>
            <p className="text-muted-foreground">Quản lý công việc hàng ngày</p>
          </div>
          <Button onClick={() => router.push("/nurse/tasks/new")}>
            <Plus className="mr-2 h-4 w-4" />
            Thêm nhiệm vụ
          </Button>
        </div>

{/* Statistics */}
        <div className="grid gap-4 md:grid-cols-3">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Chờ xử lý</CardTitle>
              <ClipboardList className="h-4 w-4 text-chart-4" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{pendingTasks.length}</div>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Ưu tiên cao</CardTitle>
              <Activity className="h-4 w-4 text-destructive" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{pendingTasks.filter((t) => t.priority === "high").length}</div>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Đã hoàn thành</CardTitle>
              <Activity className="h-4 w-4 text-chart-2" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{completedTasks.length}</div>
            </CardContent>
          </Card>
        </div>

{/* Pending Tasks */}
        <Card>
          <CardHeader>
            <CardTitle>Nhiệm vụ chờ xử lý</CardTitle>
            <CardDescription>Danh sách công việc cần hoàn thành</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {pendingTasks.length === 0 ? (
                <p className="text-sm text-muted-foreground text-center py-4">Không có nhiệm vụ nào</p>
              ) : (
                pendingTasks.map((task) => (
                  <div key={task.id} className="flex items-start gap-4 border-b pb-4 last:border-0">
                    <Checkbox
                      id={task.id}
                      checked={task.completed}
                      onCheckedChange={() => toggleTask(task.id)}
                      className="mt-1"
                    />
                    <div className="flex-1 space-y-2">
                      <div className="flex items-start justify-between">
                        <div className="space-y-1">
                          <div className="flex items-center gap-2">
                            <Clock className="h-4 w-4 text-muted-foreground" />
                            <span className="font-medium">{task.time}</span>
                            <Badge variant={getPriorityColor(task.priority)}>
                              {task.priority === "high" ? "Khẩn" : task.priority === "medium" ? "Trung bình" : "Thấp"}
                            </Badge>
                            <Badge variant="outline">{getCategoryLabel(task.category)}</Badge>
                          </div>
                          <p className="text-sm font-medium">{task.task}</p>
                          <div className="flex items-center gap-2">
                            <span className="text-sm text-muted-foreground">{task.patientName}</span>
                            <Badge variant="outline">{task.patientId}</Badge>
                          </div>
                        </div>
                        <Button size="sm" variant="outline" onClick={() => router.push(`/nurse/tasks/${task.id}`)}>
                          Chi tiết
                        </Button>
                      </div>
                    </div>
                  </div>
                ))
              )}
            </div>
          </CardContent>
        </Card>

{/* Completed Tasks */}
        {completedTasks.length > 0 && (
          <Card>
            <CardHeader>
              <CardTitle>Đã hoàn thành</CardTitle>
              <CardDescription>Các nhiệm vụ đã xử lý</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {completedTasks.map((task) => (
                  <div key={task.id} className="flex items-start gap-4 border-b pb-4 last:border-0 opacity-60">
                    <Checkbox id={task.id} checked={task.completed} onCheckedChange={() => toggleTask(task.id)} />
                    <div className="flex-1 space-y-1">
                      <div className="flex items-center gap-2">
                        <Clock className="h-4 w-4 text-muted-foreground" />
                        <span className="font-medium line-through">{task.time}</span>
                        <Badge variant="outline">{getCategoryLabel(task.category)}</Badge>
                      </div>
                      <p className="text-sm font-medium line-through">{task.task}</p>
                      <div className="flex items-center gap-2">
                        <span className="text-sm text-muted-foreground">{task.patientName}</span>
                        <Badge variant="outline">{task.patientId}</Badge>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        )}
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import {
  Stethoscope,
  Heart,
  Activity,
  Clock,
  Shield,
  Phone,
  Calendar,
  Users,
  Building2,
  TrendingUp,
  Sparkles,
  ArrowRight,
} from "lucide-react"
import Image from "next/image"
import Link from "next/link"

export default function HomePage() {
  return (
    <div className="flex min-h-screen flex-col">
      <Header />

<main className="flex-1">
        {/* Hero Section */}
        <section className="relative overflow-hidden bg-gradient-to-br from-primary/5 via-white to-primary/5">
          <div className="container mx-auto px-4 py-20 md:py-28 lg:py-36">
            <div className="grid items-center gap-16 lg:grid-cols-2 lg:gap-20">
              <div className="space-y-10">
                <div className="inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-5 py-2.5 text-sm font-semibold text-primary shadow-sm">
                  <Sparkles className="h-4 w-4" />
                  Phòng khám đa khoa uy tín hàng đầu
                </div>
                <div className="space-y-6">
                  <h1 className="text-balance text-5xl font-bold leading-[1.1] tracking-tight text-foreground md:text-6xl lg:text-7xl">
                    Kết nối người dân với{" "}
                    <span className="bg-gradient-to-r from-primary to-primary/70 bg-clip-text text-transparent">
                      dịch vụ y tế
                    </span>{" "}
                    chất lượng cao
                  </h1>
                  <p className="text-pretty text-xl leading-relaxed text-muted-foreground">
                    Đặt khám nhanh - Lấy số thứ tự trực tuyến - Tư vấn sức khỏe từ xa với đội ngũ bác sĩ chuyên môn cao
                    và trang thiết bị y tế hiện đại.
                  </p>
                </div>
                <div className="flex flex-wrap gap-4">
                  <Button
                    size="lg"
                    className="h-14 bg-primary px-8 text-base font-semibold shadow-lg shadow-primary/25 hover:bg-primary/90 hover:shadow-xl hover:shadow-primary/30"
                  >
                    <Calendar className="mr-2 h-5 w-5" />
                    Đặt lịch khám ngay
                  </Button>
                  <Button
                    size="lg"
                    variant="outline"
                    className="h-14 border-2 border-primary/20 bg-white px-8 text-base font-semibold hover:border-primary/40 hover:bg-primary/5"
                  >
                    <Phone className="mr-2 h-5 w-5" />
                    Hotline: 1900-xxxx
                  </Button>
                </div>

{/* Stats */}
                <div className="grid grid-cols-3 gap-8 border-t-2 border-border pt-10">
                  <div className="space-y-2">
                    <div className="text-4xl font-bold text-primary md:text-5xl">100K+</div>
                    <div className="text-sm font-medium text-muted-foreground">Lượt khám</div>
                  </div>
                  <div className="space-y-2">
                    <div className="text-4xl font-bold text-primary md:text-5xl">50+</div>
                    <div className="text-sm font-medium text-muted-foreground">Bác sĩ</div>
                  </div>
                  <div className="space-y-2">
                    <div className="text-4xl font-bold text-primary md:text-5xl">15+</div>
                    <div className="text-sm font-medium text-muted-foreground">Năm kinh nghiệm</div>
                  </div>
                </div>
              </div>

<div className="relative">
                <div className="relative aspect-[4/3] overflow-hidden rounded-3xl shadow-2xl ring-1 ring-black/5">
                  <Image
                    src="/modern-healthcare-clinic-with-doctors-and-patients.jpg"
                    alt="Diamond Health Clinic"
                    fill
                    className="object-cover"
                  />
                </div>
                {/* Floating card */}
                <Card className="absolute -bottom-8 -left-8 w-80 border-none bg-white shadow-2xl ring-1 ring-black/5">
                  <CardContent className="flex items-center gap-5 p-7">
                    <div className="flex h-20 w-20 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br from-secondary to-secondary/80">
                      <Heart className="h-10 w-10 text-secondary-foreground" />
                    </div>
                    <div className="space-y-1">
                      <div className="text-xl font-bold">Chăm sóc tận tâm</div>
                      <div className="text-sm text-muted-foreground">Hỗ trợ 24/7</div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        </section>

{/* Features */}
        <section className="border-b bg-white py-20 md:py-28">
          <div className="container mx-auto px-4">
            <div className="mb-16 text-center">
              <h2 className="mb-5 text-4xl font-bold text-balance md:text-5xl">Vì sao chọn Diamond Health?</h2>
              <p className="mx-auto max-w-2xl text-pretty text-lg leading-relaxed text-muted-foreground">
                Chúng tôi cam kết mang đến dịch vụ y tế chất lượng cao với quy trình chuyên nghiệp
              </p>
            </div>

<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
              <Card className="group border-none bg-gradient-to-br from-primary/5 to-primary/10 shadow-lg ring-1 ring-primary/10 transition-all hover:-translate-y-1 hover:shadow-xl hover:ring-primary/20">
                <CardContent className="p-8 text-center">
                  <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-primary text-primary-foreground shadow-lg shadow-primary/25 transition-transform group-hover:scale-110">
                    <Stethoscope className="h-10 w-10" />
                  </div>
                  <h3 className="mb-3 text-xl font-bold">Bác sĩ chuyên môn cao</h3>
                  <p className="text-sm leading-relaxed text-muted-foreground">
                    Đội ngũ bác sĩ giàu kinh nghiệm, được đào tạo bài bản
                  </p>
                </CardContent>
              </Card>

<Card className="group border-none bg-gradient-to-br from-secondary/5 to-secondary/10 shadow-lg ring-1 ring-secondary/10 transition-all hover:-translate-y-1 hover:shadow-xl hover:ring-secondary/20">
                <CardContent className="p-8 text-center">
                  <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-secondary text-secondary-foreground shadow-lg shadow-secondary/25 transition-transform group-hover:scale-110">
                    <Activity className="h-10 w-10" />
                  </div>
                  <h3 className="mb-3 text-xl font-bold">Trang thiết bị hiện đại</h3>
                  <p className="text-sm leading-relaxed text-muted-foreground">
                    Công nghệ y tế tiên tiến, chính xác cao
                  </p>
                </CardContent>
              </Card>

<Card className="group border-none bg-gradient-to-br from-primary/5 to-primary/10 shadow-lg ring-1 ring-primary/10 transition-all hover:-translate-y-1 hover:shadow-xl hover:ring-primary/20">
                <CardContent className="p-8 text-center">
                  <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-primary text-primary-foreground shadow-lg shadow-primary/25 transition-transform group-hover:scale-110">
                    <Clock className="h-10 w-10" />
                  </div>
                  <h3 className="mb-3 text-xl font-bold">Đặt lịch nhanh chóng</h3>
                  <p className="text-sm leading-relaxed text-muted-foreground">
                    Đặt lịch online tiện lợi, tiết kiệm thời gian
                  </p>
                </CardContent>
              </Card>

<Card className="group border-none bg-gradient-to-br from-secondary/5 to-secondary/10 shadow-lg ring-1 ring-secondary/10 transition-all hover:-translate-y-1 hover:shadow-xl hover:ring-secondary/20">
                <CardContent className="p-8 text-center">
                  <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-secondary text-secondary-foreground shadow-lg shadow-secondary/25 transition-transform group-hover:scale-110">
                    <Shield className="h-10 w-10" />
                  </div>
                  <h3 className="mb-3 text-xl font-bold">An toàn tuyệt đối</h3>
                  <p className="text-sm leading-relaxed text-muted-foreground">
                    Quy trình khám chữa bệnh đạt chuẩn quốc tế
                  </p>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>

{/* Statistics */}
        <section className="relative overflow-hidden bg-gradient-to-br from-blue-600 via-primary to-purple-600 py-20 text-primary-foreground md:py-24">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(255,255,255,0.1)_0%,transparent_50%)]"></div>
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_80%,rgba(255,255,255,0.08)_0%,transparent_50%)]"></div>
          <div className="absolute right-0 top-0 h-96 w-96 rounded-full bg-white/5 blur-3xl"></div>
          <div className="absolute bottom-0 left-0 h-96 w-96 rounded-full bg-white/5 blur-3xl"></div>
          <div className="container relative mx-auto px-4">
            <div className="mb-12 text-center">
              <h2 className="mb-4 text-3xl font-bold md:text-4xl">Con số ấn tượng</h2>
              <p className="text-lg opacity-90">Được hàng nghìn khách hàng tin tưởng</p>
            </div>
            <div className="grid gap-10 md:grid-cols-3 lg:grid-cols-5">
              <div className="text-center">
                <div className="mb-3 flex items-center justify-center">
                  <Users className="h-12 w-12 opacity-90" />
                </div>
                <div className="mb-2 text-5xl font-bold">100K+</div>
                <div className="text-base font-medium opacity-90">Lượt khám</div>
              </div>
              <div className="text-center">
                <div className="mb-3 flex items-center justify-center">
                  <Building2 className="h-12 w-12 opacity-90" />
                </div>
                <div className="mb-2 text-5xl font-bold">3</div>
                <div className="text-base font-medium opacity-90">Cơ sở y tế</div>
              </div>
              <div className="text-center">
                <div className="mb-3 flex items-center justify-center">
                  <Stethoscope className="h-12 w-12 opacity-90" />
                </div>
                <div className="mb-2 text-5xl font-bold">50+</div>
                <div className="text-base font-medium opacity-90">Bác sĩ</div>
              </div>
              <div className="text-center">
                <div className="mb-3 flex items-center justify-center">
                  <TrendingUp className="h-12 w-12 opacity-90" />
                </div>
                <div className="mb-2 text-5xl font-bold">5K+</div>
                <div className="text-base font-medium opacity-90">Lượt truy cập/tháng</div>
              </div>
              <div className="text-center">
                <div className="mb-3 flex items-center justify-center">
                  <Calendar className="h-12 w-12 opacity-90" />
                </div>
                <div className="mb-2 text-5xl font-bold">200+</div>
                <div className="text-base font-medium opacity-90">Lượt đặt lịch/ngày</div>
              </div>
            </div>
          </div>
        </section>

{/* Quick Links to Main Sections */}
        <section className="bg-white py-24 md:py-32">
          <div className="container mx-auto px-4">
            <div className="mb-16 text-center">
              <h2 className="mb-5 text-4xl font-bold text-balance md:text-5xl">Khám phá dịch vụ của chúng tôi</h2>
              <p className="mx-auto max-w-2xl text-pretty text-lg leading-relaxed text-muted-foreground">
                Tìm hiểu thêm về các chuyên khoa, đội ngũ bác sĩ và đánh giá từ khách hàng
              </p>
            </div>

<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
              <Link href="/chuyen-khoa">
                <Card className="group h-full border-none bg-gradient-to-br from-primary/5 to-primary/10 shadow-lg ring-1 ring-primary/10 transition-all hover:-translate-y-2 hover:shadow-xl hover:ring-primary/20">
                  <CardContent className="flex h-full flex-col items-center p-8 text-center">
                    <div className="mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-primary text-primary-foreground shadow-lg shadow-primary/25 transition-transform group-hover:scale-110">
                      <Stethoscope className="h-10 w-10" />
                    </div>
                    <h3 className="mb-3 text-xl font-bold">Chuyên khoa</h3>
                    <p className="mb-4 flex-1 text-sm leading-relaxed text-muted-foreground">
                      Khám phá các chuyên khoa khám chữa bệnh chất lượng cao
                    </p>
                    <Button variant="link" className="p-0 text-base font-semibold text-primary hover:gap-2">
                      Xem chi tiết
                      <ArrowRight className="ml-1 h-4 w-4 transition-all" />
                    </Button>
                  </CardContent>
                </Card>
              </Link>

<Link href="/bac-si">
                <Card className="group h-full border-none bg-gradient-to-br from-secondary/5 to-secondary/10 shadow-lg ring-1 ring-secondary/10 transition-all hover:-translate-y-2 hover:shadow-xl hover:ring-secondary/20">
                  <CardContent className="flex h-full flex-col items-center p-8 text-center">
                    <div className="mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-secondary text-secondary-foreground shadow-lg shadow-secondary/25 transition-transform group-hover:scale-110">
                      <Users className="h-10 w-10" />
                    </div>
                    <h3 className="mb-3 text-xl font-bold">Đội ngũ bác sĩ</h3>
                    <p className="mb-4 flex-1 text-sm leading-relaxed text-muted-foreground">
                      Gặp gỡ đội ngũ bác sĩ chuyên môn cao và giàu kinh nghiệm
                    </p>
                    <Button variant="link" className="p-0 text-base font-semibold text-secondary hover:gap-2">
                      Xem chi tiết
                      <ArrowRight className="ml-1 h-4 w-4 transition-all" />
                    </Button>
                  </CardContent>
                </Card>
              </Link>

<Link href="/danh-gia">
                <Card className="group h-full border-none bg-gradient-to-br from-primary/5 to-primary/10 shadow-lg ring-1 ring-primary/10 transition-all hover:-translate-y-2 hover:shadow-xl hover:ring-primary/20">
                  <CardContent className="flex h-full flex-col items-center p-8 text-center">
                    <div className="mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-primary text-primary-foreground shadow-lg shadow-primary/25 transition-transform group-hover:scale-110">
                      <Heart className="h-10 w-10" />
                    </div>
                    <h3 className="mb-3 text-xl font-bold">Đánh giá</h3>
                    <p className="mb-4 flex-1 text-sm leading-relaxed text-muted-foreground">
                      Xem đánh giá và phản hồi từ khách hàng của chúng tôi
                    </p>
                    <Button variant="link" className="p-0 text-base font-semibold text-primary hover:gap-2">
                      Xem chi tiết
                      <ArrowRight className="ml-1 h-4 w-4 transition-all" />
                    </Button>
                  </CardContent>
                </Card>
              </Link>

<Link href="/lien-he">
                <Card className="group h-full border-none bg-gradient-to-br from-secondary/5 to-secondary/10 shadow-lg ring-1 ring-secondary/10 transition-all hover:-translate-y-2 hover:shadow-xl hover:ring-secondary/20">
                  <CardContent className="flex h-full flex-col items-center p-8 text-center">
                    <div className="mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-secondary text-secondary-foreground shadow-lg shadow-secondary/25 transition-transform group-hover:scale-110">
                      <Phone className="h-10 w-10" />
                    </div>
                    <h3 className="mb-3 text-xl font-bold">Liên hệ</h3>
                    <p className="mb-4 flex-1 text-sm leading-relaxed text-muted-foreground">
                      Liên hệ với chúng tôi để được tư vấn và hỗ trợ
                    </p>
                    <Button variant="link" className="p-0 text-base font-semibold text-secondary hover:gap-2">
                      Xem chi tiết
                      <ArrowRight className="ml-1 h-4 w-4 transition-all" />
                    </Button>
                  </CardContent>
                </Card>
              </Link>
            </div>
          </div>
        </section>

{/* CTA */}
        <section className="relative overflow-hidden bg-gradient-to-br from-indigo-600 via-primary to-blue-600 py-24 text-primary-foreground md:py-32">
          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(255,255,255,0.12)_0%,transparent_60%)]"></div>
          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,rgba(255,255,255,0.1)_0%,transparent_60%)]"></div>
          <div className="absolute -right-20 top-20 h-80 w-80 rounded-full bg-gradient-to-br from-white/10 to-transparent blur-3xl"></div>
          <div className="absolute -left-20 bottom-20 h-80 w-80 rounded-full bg-gradient-to-tr from-white/10 to-transparent blur-3xl"></div>
          <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wMyI+PGNpcmNsZSBjeD0iNDAiIGN5PSI0MCIgcj0iMiIvPjwvZz48L2c+PC9zdmc+')] opacity-40"></div>
          <div className="container relative mx-auto px-4 text-center">
            <div className="mx-auto max-w-3xl space-y-10">
              <h2 className="text-4xl font-bold text-balance md:text-5xl">Sẵn sàng chăm sóc sức khỏe của bạn?</h2>
              <p className="text-pretty text-xl leading-relaxed opacity-95">
                Đặt lịch khám ngay hôm nay để được tư vấn và chăm sóc bởi đội ngũ bác sĩ chuyên nghiệp
              </p>
              <div className="flex flex-wrap justify-center gap-4">
                <Button
                  size="lg"
                  className="h-14 bg-secondary px-8 text-base font-semibold shadow-xl shadow-secondary/30 hover:bg-secondary/90 hover:shadow-2xl hover:shadow-secondary/40"
                >
                  <Calendar className="mr-2 h-5 w-5" />
                  Đặt lịch khám ngay
                </Button>
                <Button
                  size="lg"
                  variant="outline"
                  className="h-14 border-2 border-primary-foreground/30 bg-primary-foreground/10 px-8 text-base font-semibold text-primary-foreground hover:bg-primary-foreground/20"
                >
                  <Phone className="mr-2 h-5 w-5" />
                  Gọi ngay: 1900-xxxx
                </Button>
              </div>
            </div>
          </div>
        </section>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/pharmacy/inventory/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/pharmacy/inventory/page.tsx" isMerged="true"
"use client"

import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Activity, Package, ShoppingCart, Pill, Search, AlertTriangle, Plus } from "lucide-react"
import { useState } from "react"
import { useRouter } from "next/navigation"

const navigation = [
  { name: "Tổng quan", href: "/pharmacy", icon: Activity },
  { name: "Đơn thuốc", href: "/pharmacy/prescriptions", icon: ShoppingCart },
  { name: "Kho thuốc", href: "/pharmacy/inventory", icon: Package },
  { name: "Thuốc", href: "/pharmacy/medicines", icon: Pill },
]

// Mock inventory data
const mockInventory = [
  {
    id: "M001",
    name: "Paracetamol 500mg",
    category: "Giảm đau - Hạ sốt",
    stock: 50,
    minStock: 200,
    unit: "viên",
    price: 500,
    expiryDate: "2025-12-31",
    supplier: "Công ty Dược phẩm ABC",
  },
  {
    id: "M002",
    name: "Amoxicillin 500mg",
    category: "Kháng sinh",
    stock: 30,
    minStock: 150,
    unit: "viên",
    price: 1200,
    expiryDate: "2025-06-30",
    supplier: "Công ty Dược phẩm XYZ",
  },
  {
    id: "M003",
    name: "Vitamin C 1000mg",
    category: "Vitamin & Khoáng chất",
    stock: 80,
    minStock: 300,
    unit: "viên",
    price: 800,
    expiryDate: "2026-03-31",
    supplier: "Công ty Dược phẩm DEF",
  },
  {
    id: "M004",
    name: "Ibuprofen 400mg",
    category: "Giảm đau - Hạ sốt",
    stock: 250,
    minStock: 200,
    unit: "viên",
    price: 1500,
    expiryDate: "2025-09-30",
    supplier: "Công ty Dược phẩm ABC",
  },
  {
    id: "M005",
    name: "Omeprazole 20mg",
    category: "Tiêu hóa",
    stock: 180,
    minStock: 150,
    unit: "viên",
    price: 2000,
    expiryDate: "2025-11-30",
    supplier: "Công ty Dược phẩm XYZ",
  },
]

export default function PharmacyInventoryPage() {
  const router = useRouter()
  const [searchQuery, setSearchQuery] = useState("")

const filteredInventory = mockInventory.filter(
    (item) =>
      item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      item.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
      item.category.toLowerCase().includes(searchQuery.toLowerCase()),
  )

const lowStockItems = filteredInventory.filter((item) => item.stock < item.minStock)
  const normalStockItems = filteredInventory.filter((item) => item.stock >= item.minStock)

const getStockStatus = (stock: number, minStock: number) => {
    const percentage = (stock / minStock) * 100
    if (percentage < 50) return { label: "Rất thấp", variant: "destructive" as const }
    if (percentage < 100) return { label: "Thấp", variant: "secondary" as const }
    return { label: "Đủ", variant: "outline" as const }
  }

return (
    <DashboardLayout navigation={navigation}>
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold tracking-tight">Quản lý kho thuốc</h1>
            <p className="text-muted-foreground">Theo dõi tồn kho và nhập xuất thuốc</p>
          </div>
          <Button onClick={() => router.push("/pharmacy/inventory/import")}>
            <Plus className="mr-2 h-4 w-4" />
            Nhập thuốc
          </Button>
        </div>

{/* Statistics */}
        <div className="grid gap-4 md:grid-cols-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Tổng loại thuốc</CardTitle>
              <Package className="h-4 w-4 text-primary" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{mockInventory.length}</div>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Tồn kho thấp</CardTitle>
              <AlertTriangle className="h-4 w-4 text-destructive" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{lowStockItems.length}</div>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Tồn kho tốt</CardTitle>
              <Activity className="h-4 w-4 text-chart-2" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{normalStockItems.length}</div>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Giá trị kho</CardTitle>
              <Package className="h-4 w-4 text-chart-4" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">
                {(mockInventory.reduce((sum, item) => sum + item.stock * item.price, 0) / 1000000).toFixed(1)}M
              </div>
            </CardContent>
          </Card>
        </div>

{/* Search */}
        <Card>
          <CardHeader>
            <CardTitle>Tìm kiếm thuốc</CardTitle>
            <CardDescription>Tìm theo tên, mã thuốc hoặc danh mục</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="relative">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                placeholder="Nhập tên thuốc, mã thuốc hoặc danh mục..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-9"
              />
            </div>
          </CardContent>
        </Card>

{/* Low Stock Alert */}
        {lowStockItems.length > 0 && (
          <Card className="border-destructive">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <AlertTriangle className="h-5 w-5 text-destructive" />
                Cảnh báo tồn kho thấp
              </CardTitle>
              <CardDescription>Các loại thuốc cần nhập thêm</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {lowStockItems.map((item) => {
                  const status = getStockStatus(item.stock, item.minStock)
                  return (
                    <div key={item.id} className="flex items-start justify-between border-b pb-4 last:border-0">
                      <div className="space-y-1 flex-1">
                        <div className="flex items-center gap-2">
                          <h3 className="font-semibold">{item.name}</h3>
                          <Badge variant="outline">{item.id}</Badge>
                          <Badge variant={status.variant}>{status.label}</Badge>
                        </div>
                        <p className="text-sm text-muted-foreground">{item.category}</p>
                        <div className="flex gap-4 text-sm">
                          <span className="text-destructive font-medium">
                            Tồn: {item.stock} {item.unit}
                          </span>
                          <span className="text-muted-foreground">
                            Tối thiểu: {item.minStock} {item.unit}
                          </span>
                        </div>
                        <p className="text-xs text-muted-foreground">HSD: {item.expiryDate}</p>
                      </div>
                      <Button size="sm" onClick={() => router.push(`/pharmacy/inventory/import?medicineId=${item.id}`)}>
                        Nhập thêm
                      </Button>
                    </div>
                  )
                })}
              </div>
            </CardContent>
          </Card>
        )}

{/* Normal Stock */}
        <Card>
          <CardHeader>
            <CardTitle>Danh sách thuốc trong kho</CardTitle>
            <CardDescription>Tất cả thuốc có sẵn</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {filteredInventory.length === 0 ? (
                <p className="text-sm text-muted-foreground text-center py-4">Không tìm thấy thuốc nào</p>
              ) : (
                filteredInventory.map((item) => {
                  const status = getStockStatus(item.stock, item.minStock)
                  return (
                    <div key={item.id} className="flex items-start justify-between border-b pb-4 last:border-0">
                      <div className="space-y-1 flex-1">
                        <div className="flex items-center gap-2">
                          <h3 className="font-semibold">{item.name}</h3>
                          <Badge variant="outline">{item.id}</Badge>
                          <Badge variant={status.variant}>{status.label}</Badge>
                        </div>
                        <p className="text-sm text-muted-foreground">{item.category}</p>
                        <div className="flex gap-4 text-sm">
                          <span className="font-medium">
                            Tồn: {item.stock} {item.unit}
                          </span>
                          <span className="text-muted-foreground">
                            Giá: {item.price.toLocaleString()}đ/{item.unit}
                          </span>
                        </div>
                        <p className="text-xs text-muted-foreground">
                          HSD: {item.expiryDate} • {item.supplier}
                        </p>
                      </div>
                      <div className="flex gap-2">
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => router.push(`/pharmacy/medicines/${item.id}`)}
                        >
                          Chi tiết
                        </Button>
                      </div>
                    </div>
                  )
                })
              )}
            </div>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/pharmacy/medicines/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/pharmacy/medicines/page.tsx" isMerged="true"
"use client"

import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Activity, Package, ShoppingCart, Pill, Search, Plus } from "lucide-react"
import { useState } from "react"
import { useRouter } from "next/navigation"

// Mock medicines data
const mockMedicines = [
  {
    id: "M001",
    name: "Paracetamol 500mg",
    category: "pain-relief",
    activeIngredient: "Paracetamol",
    manufacturer: "Công ty Dược phẩm ABC",
    dosageForm: "Viên nén",
    description: "Thuốc giảm đau, hạ sốt",
    indications: "Đau đầu, sốt, đau răng, đau cơ",
    contraindications: "Suy gan nặng, dị ứng với paracetamol",
    sideEffects: "Hiếm gặp: buồn nôn, phát ban",
    price: 500,
  },
  {
    id: "M002",
    name: "Amoxicillin 500mg",
    category: "antibiotic",
    activeIngredient: "Amoxicillin",
    manufacturer: "Công ty Dược phẩm XYZ",
    dosageForm: "Viên nang",
    description: "Kháng sinh nhóm penicillin",
    indications: "Nhiễm khuẩn đường hô hấp, tai mũi họng",
    contraindications: "Dị ứng với penicillin",
    sideEffects: "Tiêu chảy, buồn nôn, phát ban",
    price: 1200,
  },
  {
    id: "M003",
    name: "Vitamin C 1000mg",
    category: "vitamin",
    activeIngredient: "Acid ascorbic",
    manufacturer: "Công ty Dược phẩm DEF",
    dosageForm: "Viên sủi",
    description: "Bổ sung vitamin C",
    indications: "Thiếu vitamin C, tăng sức đề kháng",
    contraindications: "Sỏi thận",
    sideEffects: "Hiếm gặp: đau bụng, tiêu chảy",
    price: 800,
  },
  {
    id: "M004",
    name: "Ibuprofen 400mg",
    category: "pain-relief",
    activeIngredient: "Ibuprofen",
    manufacturer: "Công ty Dược phẩm ABC",
    dosageForm: "Viên nén bao phim",
    description: "Thuốc giảm đau, chống viêm",
    indications: "Đau đầu, đau răng, đau khớp, sốt",
    contraindications: "Loét dạ dày, suy thận nặng",
    sideEffects: "Đau bụng, buồn nôn, chóng mặt",
    price: 1500,
  },
  {
    id: "M005",
    name: "Omeprazole 20mg",
    category: "digestive",
    activeIngredient: "Omeprazole",
    manufacturer: "Công ty Dược phẩm XYZ",
    dosageForm: "Viên nang",
    description: "Thuốc ức chế bơm proton",
    indications: "Loét dạ dày, trào ngược dạ dày thực quản",
    contraindications: "Dị ứng với omeprazole",
    sideEffects: "Đau đầu, tiêu chảy, buồn nôn",
    price: 2000,
  },
]

export default function PharmacyMedicinesPage() {
  const router = useRouter()
  const [searchQuery, setSearchQuery] = useState("")

const categories = [
    { value: "all", label: "Tất cả", count: mockMedicines.length },
    { value: "pain-relief", label: "Giảm đau - Hạ sốt", count: 2 },
    { value: "antibiotic", label: "Kháng sinh", count: 1 },
    { value: "vitamin", label: "Vitamin & Khoáng chất", count: 1 },
    { value: "digestive", label: "Tiêu hóa", count: 1 },
  ]

const [selectedCategory, setSelectedCategory] = useState("all")

const filteredMedicines = mockMedicines.filter((medicine) => {
    const matchesSearch =
      medicine.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      medicine.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
      medicine.activeIngredient.toLowerCase().includes(searchQuery.toLowerCase())

const matchesCategory = selectedCategory === "all" || medicine.category === selectedCategory

return matchesSearch && matchesCategory
  })

return (
    <DashboardLayout navigation={navigation}>
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold tracking-tight">Danh mục thuốc</h1>
            <p className="text-muted-foreground">Thông tin chi tiết về các loại thuốc</p>
          </div>
          <Button onClick={() => router.push("/pharmacy/medicines/new")}>
            <Plus className="mr-2 h-4 w-4" />
            Thêm thuốc mới
          </Button>
        </div>

{/* Search */}
        <Card>
          <CardHeader>
            <CardTitle>Tìm kiếm thuốc</CardTitle>
            <CardDescription>Tìm theo tên, mã thuốc hoặc hoạt chất</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="relative">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                placeholder="Nhập tên thuốc, mã thuốc hoặc hoạt chất..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-9"
              />
            </div>
          </CardContent>
        </Card>

{/* Categories */}
        <Tabs value={selectedCategory} onValueChange={setSelectedCategory} className="space-y-4">
          <TabsList>
            {categories.map((category) => (
              <TabsTrigger key={category.value} value={category.value}>
                {category.label} ({category.count})
              </TabsTrigger>
            ))}
          </TabsList>

<TabsContent value={selectedCategory} className="space-y-4">
            {filteredMedicines.length === 0 ? (
              <Card>
                <CardContent className="py-12 text-center">
                  <p className="text-muted-foreground">Không tìm thấy thuốc nào</p>
                </CardContent>
              </Card>
            ) : (
              filteredMedicines.map((medicine) => (
                <Card key={medicine.id} className="hover:shadow-md transition-shadow">
                  <CardContent className="p-6">
                    <div className="space-y-4">
                      <div className="flex items-start justify-between">
                        <div className="space-y-2 flex-1">
                          <div className="flex items-center gap-2">
                            <h3 className="text-lg font-semibold">{medicine.name}</h3>
                            <Badge variant="outline">{medicine.id}</Badge>
                          </div>
                          <p className="text-sm text-muted-foreground">{medicine.description}</p>
                          <div className="flex gap-2">
                            <Badge variant="secondary">{medicine.dosageForm}</Badge>
                            <Badge variant="outline">{medicine.price.toLocaleString()}đ</Badge>
                          </div>
                        </div>
                        <Button size="sm" onClick={() => router.push(`/pharmacy/medicines/${medicine.id}`)}>
                          Chi tiết
                        </Button>
                      </div>

<div className="grid md:grid-cols-2 gap-4 pt-4 border-t">
                        <div>
                          <p className="text-sm font-medium mb-1">Hoạt chất</p>
                          <p className="text-sm text-muted-foreground">{medicine.activeIngredient}</p>
                        </div>
                        <div>
                          <p className="text-sm font-medium mb-1">Nhà sản xuất</p>
                          <p className="text-sm text-muted-foreground">{medicine.manufacturer}</p>
                        </div>
                        <div>
                          <p className="text-sm font-medium mb-1">Chỉ định</p>
                          <p className="text-sm text-muted-foreground">{medicine.indications}</p>
                        </div>
                        <div>
                          <p className="text-sm font-medium mb-1">Chống chỉ định</p>
                          <p className="text-sm text-muted-foreground">{medicine.contraindications}</p>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))
            )}
          </TabsContent>
        </Tabs>
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/pharmacy/page.tsx" isMerged="true"
"use client"

import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Activity, Package, ShoppingCart, AlertTriangle, Pill, TrendingUp } from "lucide-react"
import { useRouter } from "next/navigation"

// Mock data
const mockPrescriptions = [
  {
    id: "DT001",
    patientName: "Nguyễn Văn A",
    patientId: "BN001",
    doctorName: "BS. Trần Văn B",
    status: "pending",
    createdAt: "2024-01-15 09:30",
    items: 3,
  },
  {
    id: "DT002",
    patientName: "Trần Thị C",
    patientId: "BN002",
    doctorName: "BS. Lê Thị D",
    status: "pending",
    createdAt: "2024-01-15 10:00",
    items: 2,
  },
  {
    id: "DT003",
    patientName: "Phạm Văn E",
    patientId: "BN003",
    doctorName: "BS. Hoàng Văn F",
    status: "processing",
    createdAt: "2024-01-15 10:30",
    items: 4,
  },
]

export default function PharmacyDashboard() {
  const router = useRouter()

const pendingPrescriptions = mockPrescriptions.filter((p) => p.status === "pending")
  const processingPrescriptions = mockPrescriptions.filter((p) => p.status === "processing")

const stats = [
    {
      title: "Đơn thuốc chờ",
      value: pendingPrescriptions.length.toString(),
      icon: ShoppingCart,
      color: "text-chart-4",
    },
    {
      title: "Đang xử lý",
      value: processingPrescriptions.length.toString(),
      icon: Activity,
      color: "text-primary",
    },
    {
      title: "Thuốc sắp hết",
      value: "12",
      icon: AlertTriangle,
      color: "text-destructive",
    },
    {
      title: "Doanh thu hôm nay",
      value: "8.5M",
      icon: TrendingUp,
      color: "text-chart-2",
    },
  ]

return (
    <DashboardLayout navigation={navigation}>
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Quản lý Nhà thuốc</h1>
          <p className="text-muted-foreground">Quản lý đơn thuốc và kho thuốc</p>
        </div>

<div className="grid gap-6 md:grid-cols-2">
          {/* Pending Prescriptions */}
          <Card>
            <CardHeader>
              <CardTitle>Đơn thuốc chờ xử lý</CardTitle>
              <CardDescription>Đơn thuốc cần chuẩn bị</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {pendingPrescriptions.length === 0 ? (
                  <p className="text-sm text-muted-foreground text-center py-4">Không có đơn thuốc nào</p>
                ) : (
                  pendingPrescriptions.map((prescription) => (
                    <div key={prescription.id} className="flex items-start justify-between border-b pb-4 last:border-0">
                      <div className="space-y-1">
                        <div className="flex items-center gap-2">
                          <span className="font-medium">{prescription.id}</span>
                          <Badge variant="secondary">Chờ xử lý</Badge>
                        </div>
                        <p className="text-sm font-medium">{prescription.patientName}</p>
                        <p className="text-sm text-muted-foreground">{prescription.doctorName}</p>
                        <p className="text-xs text-muted-foreground">{prescription.items} loại thuốc</p>
                      </div>
                      <Button size="sm" onClick={() => router.push(`/pharmacy/prescriptions/${prescription.id}`)}>
                        Xử lý
                      </Button>
                    </div>
                  ))
                )}
              </div>
            </CardContent>
          </Card>

{/* Processing Prescriptions */}
          <Card>
            <CardHeader>
              <CardTitle>Đang xử lý</CardTitle>
              <CardDescription>Đơn thuốc đang chuẩn bị</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {processingPrescriptions.length === 0 ? (
                  <p className="text-sm text-muted-foreground text-center py-4">Không có đơn thuốc nào</p>
                ) : (
                  processingPrescriptions.map((prescription) => (
                    <div key={prescription.id} className="flex items-start justify-between border-b pb-4 last:border-0">
                      <div className="space-y-1">
                        <div className="flex items-center gap-2">
                          <span className="font-medium">{prescription.id}</span>
                          <Badge>Đang xử lý</Badge>
                        </div>
                        <p className="text-sm font-medium">{prescription.patientName}</p>
                        <p className="text-sm text-muted-foreground">{prescription.doctorName}</p>
                        <p className="text-xs text-muted-foreground">{prescription.items} loại thuốc</p>
                      </div>
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => router.push(`/pharmacy/prescriptions/${prescription.id}`)}
                      >
                        Xem
                      </Button>
                    </div>
                  ))
                )}
              </div>
            </CardContent>
          </Card>
        </div>

{/* Quick Actions */}
        <Card>
          <CardHeader>
            <CardTitle>Thao tác nhanh</CardTitle>
            <CardDescription>Các chức năng thường dùng</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-4">
              <Button className="h-auto py-4 flex-col gap-2" onClick={() => router.push("/pharmacy/prescriptions")}>
                <ShoppingCart className="h-5 w-5" />
                <span className="text-sm">Quản lý đơn thuốc</span>
              </Button>

<Button
                variant="outline"
                className="h-auto py-4 flex-col gap-2 bg-transparent"
                onClick={() => router.push("/pharmacy/inventory")}
              >
                <Package className="h-5 w-5" />
                <span className="text-sm">Kiểm tra kho</span>
              </Button>

<Button
                variant="outline"
                className="h-auto py-4 flex-col gap-2 bg-transparent"
                onClick={() => router.push("/pharmacy/medicines")}
              >
                <Pill className="h-5 w-5" />
                <span className="text-sm">Danh mục thuốc</span>
              </Button>

<Button
                variant="outline"
                className="h-auto py-4 flex-col gap-2 bg-transparent"
                onClick={() => router.push("/pharmacy/inventory?filter=low-stock")}
              >
                <AlertTriangle className="h-5 w-5" />
                <span className="text-sm">Thuốc sắp hết</span>
              </Button>
            </div>
          </CardContent>
        </Card>

{/* Low Stock Alert */}
        <Card className="border-destructive">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <AlertTriangle className="h-5 w-5 text-destructive" />
              Cảnh báo tồn kho
            </CardTitle>
            <CardDescription>Các loại thuốc cần nhập thêm</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {[
                { name: "Paracetamol 500mg", stock: 50, minStock: 200, unit: "viên" },
                { name: "Amoxicillin 500mg", stock: 30, minStock: 150, unit: "viên" },
                { name: "Vitamin C 1000mg", stock: 80, minStock: 300, unit: "viên" },
              ].map((medicine, index) => (
                <div key={index} className="flex items-center justify-between border-b pb-3 last:border-0">
                  <div>
                    <p className="font-medium">{medicine.name}</p>
                    <p className="text-sm text-muted-foreground">
                      Tồn kho: {medicine.stock} {medicine.unit} / Tối thiểu: {medicine.minStock} {medicine.unit}
                    </p>
                  </div>
                  <Badge variant="destructive">Sắp hết</Badge>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/pharmacy/prescriptions/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/pharmacy/prescriptions/page.tsx" isMerged="true"
"use client"

import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Activity, Package, ShoppingCart, Pill, Clock, User } from "lucide-react"
import { useRouter } from "next/navigation"

// Mock prescriptions
const mockPrescriptions = [
  {
    id: "DT001",
    patientName: "Nguyễn Văn A",
    patientId: "BN001",
    doctorName: "BS. Trần Văn B",
    status: "pending",
    createdAt: "2024-01-15 09:30",
    items: [
      { name: "Paracetamol 500mg", quantity: 20, unit: "viên", dosage: "1 viên x 3 lần/ngày" },
      { name: "Amoxicillin 500mg", quantity: 15, unit: "viên", dosage: "1 viên x 2 lần/ngày" },
      { name: "Vitamin C 1000mg", quantity: 30, unit: "viên", dosage: "1 viên x 1 lần/ngày" },
    ],
    total: 285000,
  },
  {
    id: "DT002",
    patientName: "Trần Thị C",
    patientId: "BN002",
    doctorName: "BS. Lê Thị D",
    status: "pending",
    createdAt: "2024-01-15 10:00",
    items: [
      { name: "Ibuprofen 400mg", quantity: 10, unit: "viên", dosage: "1 viên khi đau" },
      { name: "Omeprazole 20mg", quantity: 14, unit: "viên", dosage: "1 viên x 1 lần/ngày" },
    ],
    total: 180000,
  },
  {
    id: "DT003",
    patientName: "Phạm Văn E",
    patientId: "BN003",
    doctorName: "BS. Hoàng Văn F",
    status: "processing",
    createdAt: "2024-01-15 10:30",
    items: [
      { name: "Metformin 500mg", quantity: 60, unit: "viên", dosage: "1 viên x 2 lần/ngày" },
      { name: "Atorvastatin 10mg", quantity: 30, unit: "viên", dosage: "1 viên x 1 lần/ngày" },
      { name: "Aspirin 100mg", quantity: 30, unit: "viên", dosage: "1 viên x 1 lần/ngày" },
      { name: "Losartan 50mg", quantity: 30, unit: "viên", dosage: "1 viên x 1 lần/ngày" },
    ],
    total: 520000,
  },
  {
    id: "DT004",
    patientName: "Lê Thị G",
    patientId: "BN004",
    doctorName: "BS. Nguyễn Văn H",
    status: "completed",
    createdAt: "2024-01-15 08:00",
    items: [{ name: "Cetirizine 10mg", quantity: 10, unit: "viên", dosage: "1 viên x 1 lần/ngày" }],
    total: 45000,
  },
]

export default function PharmacyPrescriptionsPage() {
  const router = useRouter()

const pendingPrescriptions = mockPrescriptions.filter((p) => p.status === "pending")
  const processingPrescriptions = mockPrescriptions.filter((p) => p.status === "processing")
  const completedPrescriptions = mockPrescriptions.filter((p) => p.status === "completed")

const PrescriptionCard = ({ prescription }: { prescription: (typeof mockPrescriptions)[0] }) => (
    <Card className="hover:shadow-md transition-shadow">
      <CardContent className="p-6">
        <div className="space-y-4">
          <div className="flex items-start justify-between">
            <div className="space-y-2">
              <div className="flex items-center gap-2">
                <h3 className="text-lg font-semibold">{prescription.id}</h3>
                <Badge
                  variant={
                    prescription.status === "pending"
                      ? "secondary"
                      : prescription.status === "processing"
                        ? "default"
                        : "outline"
                  }
                >
                  {prescription.status === "pending"
                    ? "Chờ xử lý"
                    : prescription.status === "processing"
                      ? "Đang xử lý"
                      : "Hoàn thành"}
                </Badge>
              </div>
              <div className="flex items-center gap-4 text-sm text-muted-foreground">
                <div className="flex items-center gap-1">
                  <User className="h-4 w-4" />
                  <span>{prescription.patientName}</span>
                </div>
                <Badge variant="outline">{prescription.patientId}</Badge>
              </div>
              <p className="text-sm text-muted-foreground">{prescription.doctorName}</p>
              <div className="flex items-center gap-2 text-xs text-muted-foreground">
                <Clock className="h-3 w-3" />
                <span>{prescription.createdAt}</span>
              </div>
            </div>
            <div className="text-right">
              <p className="text-sm text-muted-foreground">Tổng tiền</p>
              <p className="text-xl font-bold text-primary">{prescription.total.toLocaleString()}đ</p>
            </div>
          </div>

<div className="border-t pt-4">
            <p className="text-sm font-medium mb-3">Danh sách thuốc ({prescription.items.length} loại)</p>
            <div className="space-y-2">
              {prescription.items.map((item, index) => (
                <div key={index} className="flex items-start justify-between text-sm">
                  <div className="flex-1">
                    <p className="font-medium">{item.name}</p>
                    <p className="text-xs text-muted-foreground">{item.dosage}</p>
                  </div>
                  <p className="text-muted-foreground">
                    {item.quantity} {item.unit}
                  </p>
                </div>
              ))}
            </div>
          </div>

<div className="flex gap-2 pt-2">
            <Button
              className="flex-1"
              variant={prescription.status === "pending" ? "default" : "outline"}
              onClick={() => router.push(`/pharmacy/prescriptions/${prescription.id}`)}
            >
              {prescription.status === "pending" ? "Xử lý" : "Xem chi tiết"}
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  )

return (
    <DashboardLayout navigation={navigation}>
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Quản lý đơn thuốc</h1>
          <p className="text-muted-foreground">Xử lý và theo dõi đơn thuốc</p>
        </div>

<Tabs defaultValue="pending" className="space-y-4">
          <TabsList>
            <TabsTrigger value="pending">Chờ xử lý ({pendingPrescriptions.length})</TabsTrigger>
            <TabsTrigger value="processing">Đang xử lý ({processingPrescriptions.length})</TabsTrigger>
            <TabsTrigger value="completed">Hoàn thành ({completedPrescriptions.length})</TabsTrigger>
          </TabsList>

<TabsContent value="pending" className="space-y-4">
            {pendingPrescriptions.length === 0 ? (
              <Card>
                <CardContent className="py-12 text-center">
                  <p className="text-muted-foreground">Không có đơn thuốc chờ xử lý</p>
                </CardContent>
              </Card>
            ) : (
              pendingPrescriptions.map((prescription) => (
                <PrescriptionCard key={prescription.id} prescription={prescription} />
              ))
            )}
          </TabsContent>

<TabsContent value="processing" className="space-y-4">
            {processingPrescriptions.length === 0 ? (
              <Card>
                <CardContent className="py-12 text-center">
                  <p className="text-muted-foreground">Không có đơn thuốc đang xử lý</p>
                </CardContent>
              </Card>
            ) : (
              processingPrescriptions.map((prescription) => (
                <PrescriptionCard key={prescription.id} prescription={prescription} />
              ))
            )}
          </TabsContent>

<TabsContent value="completed" className="space-y-4">
            {completedPrescriptions.length === 0 ? (
              <Card>
                <CardContent className="py-12 text-center">
                  <p className="text-muted-foreground">Không có đơn thuốc hoàn thành</p>
                </CardContent>
              </Card>
            ) : (
              completedPrescriptions.map((prescription) => (
                <PrescriptionCard key={prescription.id} prescription={prescription} />
              ))
            )}
          </TabsContent>
        </Tabs>
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/profile/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
    User,
    Mail,
    Phone,
    Calendar,
    MapPin,
    Edit3,
    Shield,
    Heart,
    Clock,
    Stethoscope,
    FileText,
    Settings,
    LogOut,
    ArrowLeft,
    Home
} from "lucide-react"
import { getCurrentUser, logout, User as UserType } from "@/lib/auth"
import { apiService } from "@/api/index"
import { toast } from "sonner"
import { BasicInfoEditModal } from "@/components/basic-info-edit-modal"
import { MedicalInfoEditModal } from "@/components/medical-info-edit-modal"
import { Breadcrumb } from "@/components/breadcrumb"

interface PatientProfile {
    userId: number
    phone?: string
    fullName?: string
    email?: string
    role?: string
    gender?: string
    dob?: string
    allergies?: string
    medicalHistory?: string
}

interface Appointment {
    id: number
    date: string
    time: string
    doctor: string
    department: string
    status: string
    notes?: string
}

interface MedicalRecord {
    id: number
    date: string
    doctor: string
    diagnosis: string
    treatment: string
    prescription?: string
}

export default function ProfilePage() {
    const [currentUser, setCurrentUser] = useState<UserType | null>(null)
    const [patientProfile, setPatientProfile] = useState<PatientProfile | null>(null)
    const [appointments, setAppointments] = useState<Appointment[]>([])
    const [medicalRecords, setMedicalRecords] = useState<MedicalRecord[]>([])
    const [isLoading, setIsLoading] = useState(true)
    const [isBasicInfoModalOpen, setIsBasicInfoModalOpen] = useState(false)
    const [isMedicalInfoModalOpen, setIsMedicalInfoModalOpen] = useState(false)
    const router = useRouter()

useEffect(() => {
        const user = getCurrentUser()
        if (!user) {
            router.push('/login')
            return
        }
        setCurrentUser(user)
        fetchPatientData()
    }, [router])

const fetchPatientData = async () => {
        try {
            setIsLoading(true)
            // Fetch patient profile
            const profile = await apiService.fetchUserProfile()
            setPatientProfile(profile)

// Mock data for appointments and medical records
            // In real app, these would come from API
            setAppointments([
                {
                    id: 1,
                    date: "2024-01-15",
                    time: "09:00",
                    doctor: "BS. Nguyễn Văn A",
                    department: "Tim mạch",
                    status: "Đã hoàn thành",
                    notes: "Khám định kỳ"
                },
                {
                    id: 2,
                    date: "2024-01-20",
                    time: "14:30",
                    doctor: "BS. Trần Thị B",
                    department: "Nội khoa",
                    status: "Đã đặt lịch",
                    notes: "Tái khám"
                }
            ])

setMedicalRecords([
                {
                    id: 1,
                    date: "2024-01-15",
                    doctor: "BS. Nguyễn Văn A",
                    diagnosis: "Huyết áp cao",
                    treatment: "Điều chỉnh chế độ ăn uống và tập luyện",
                    prescription: "Amlodipine 5mg - 1 viên/ngày"
                },
                {
                    id: 2,
                    date: "2023-12-10",
                    doctor: "BS. Lê Văn C",
                    diagnosis: "Cảm cúm",
                    treatment: "Nghỉ ngơi, uống nhiều nước",
                    prescription: "Paracetamol 500mg - 2 viên/lần, 3 lần/ngày"
                }
            ])
        } catch (error) {
            console.error('Error fetching patient data:', error)
            toast.error("Không thể tải thông tin bệnh nhân")
        } finally {
            setIsLoading(false)
        }
    }

const handleLogout = () => {
        logout()
        router.push('/')
    }

const handleSaveBasicInfo = (updatedInfo: any) => {
        if (patientProfile) {
            setPatientProfile({
                ...patientProfile,
                fullName: updatedInfo.fullName,
                email: updatedInfo.email,
                phone: updatedInfo.phone,
                dob: updatedInfo.dob,
                gender: updatedInfo.gender,
            })
        }
        // Refresh data from API
        fetchPatientData()
    }

const handleSaveMedicalInfo = (updatedInfo: any) => {
        if (patientProfile) {
            setPatientProfile({
                ...patientProfile,
                allergies: updatedInfo.allergies,
                medicalHistory: updatedInfo.medicalHistory
            })
        }
        // Refresh data from API
        fetchPatientData()
    }

const getStatusColor = (status: string) => {
        switch (status) {
            case 'Đã hoàn thành':
                return 'bg-green-100 text-green-800'
            case 'Đã đặt lịch':
                return 'bg-blue-100 text-blue-800'
            case 'Đã hủy':
                return 'bg-red-100 text-red-800'
            default:
                return 'bg-gray-100 text-gray-800'
        }
    }

const formatDate = (dateString: string) => {
        return new Date(dateString).toLocaleDateString('vi-VN')
    }

if (isLoading) {
        return (
            <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50 flex items-center justify-center">
                <div className="text-center">
                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
                    <p className="text-muted-foreground">Đang tải thông tin...</p>
                </div>
            </div>
        )
    }

if (!currentUser || !patientProfile) {
        return (
            <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50 flex items-center justify-center">
                <Card className="w-full max-w-md">
                    <CardContent className="pt-6 text-center">
                        <p className="text-muted-foreground">Không tìm thấy thông tin bệnh nhân</p>
                        <Button onClick={() => router.push('/')} className="mt-4">
                            Về trang chủ
                        </Button>
                    </CardContent>
                </Card>
            </div>
        )
    }

return (
        <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50">
            <div className="container mx-auto px-4 py-8">
                {/* Header */}
                <div className="mb-8">
                    {/* Breadcrumb Navigation */}
                    <div className="mb-4">
                        <Breadcrumb
                            items={[
                                { label: "Hồ sơ bệnh nhân", isActive: true }
                            ]}
                        />
                    </div>

<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
                        <div className="flex items-center gap-4">
                            <Button
                                variant="outline"
                                size="sm"
                                onClick={() => router.push('/')}
                                className="flex items-center gap-2"
                            >
                                <ArrowLeft className="h-4 w-4" />
                                <span className="hidden sm:inline">Quay lại</span>
                            </Button>
                            <div>
                                <h1 className="text-2xl lg:text-3xl font-bold text-gray-900">Hồ sơ bệnh nhân</h1>
                                <p className="text-muted-foreground mt-2 text-sm lg:text-base">Quản lý thông tin cá nhân và lịch sử khám bệnh</p>
                            </div>
                        </div>
                        <div className="flex flex-wrap gap-2">
                            <Button
                                variant="outline"
                                size="sm"
                                onClick={() => setIsBasicInfoModalOpen(true)}
                                className="flex items-center gap-2"
                            >
                                <Edit3 className="h-4 w-4" />
                                <span className="hidden sm:inline">Thông tin cơ bản</span>
                                <span className="sm:hidden">Cơ bản</span>
                            </Button>
                            <Button
                                variant="outline"
                                size="sm"
                                onClick={() => setIsMedicalInfoModalOpen(true)}
                                className="flex items-center gap-2"
                            >
                                <Heart className="h-4 w-4" />
                                <span className="hidden sm:inline">Thông tin y tế</span>
                                <span className="sm:hidden">Y tế</span>
                            </Button>
                            <Button
                                variant="outline"
                                size="sm"
                                onClick={handleLogout}
                                className="flex items-center gap-2"
                            >
                                <LogOut className="h-4 w-4" />
                                <span className="hidden sm:inline">Đăng xuất</span>
                            </Button>
                        </div>
                    </div>
                </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    {/* Left Column - Profile Info */}
                    <div className="lg:col-span-1 space-y-6">
                        {/* Profile Card */}
                        <Card>
                            <CardContent className="pt-6">
                                <div className="text-center">
                                    <Avatar className="h-24 w-24 mx-auto mb-4">
                                        <AvatarImage src="/placeholder-user.jpg" alt={patientProfile.fullName} />
                                        <AvatarFallback className="text-2xl bg-primary text-primary-foreground">
                                            {patientProfile.fullName?.charAt(0).toUpperCase() || 'P'}
                                        </AvatarFallback>
                                    </Avatar>
                                    <h2 className="text-xl font-semibold mb-2">{patientProfile.fullName || 'Chưa cập nhật'}</h2>
                                    <Badge variant="secondary" className="mb-4">
                                        <Shield className="h-3 w-3 mr-1" />
                                        Bệnh nhân
                                    </Badge>
                                    <p className="text-sm text-muted-foreground">
                                        ID: {patientProfile.userId}
                                    </p>

{/* Quick Actions */}
                                    <div className="mt-4 pt-4 border-t">
                                        <Button
                                            variant="outline"
                                            size="sm"
                                            onClick={() => router.push('/')}
                                            className="w-full flex items-center gap-2"
                                        >
                                            <Home className="h-4 w-4" />
                                            Về trang chủ
                                        </Button>
                                    </div>
                                </div>
                            </CardContent>
                        </Card>

{/* Quick Stats */}
                        <Card>
                            <CardHeader>
                                <CardTitle className="text-lg flex items-center gap-2">
                                    <Heart className="h-5 w-5 text-red-500" />
                                    Thống kê nhanh
                                </CardTitle>
                            </CardHeader>
                            <CardContent className="space-y-4">
                                <div className="flex justify-between items-center">
                                    <span className="text-sm text-muted-foreground">Lần khám gần nhất</span>
                                    <span className="font-medium">{formatDate(appointments[0]?.date || '')}</span>
                                </div>
                                <div className="flex justify-between items-center">
                                    <span className="text-sm text-muted-foreground">Tổng số lần khám</span>
                                    <span className="font-medium">{appointments.length}</span>
                                </div>
                                <div className="flex justify-between items-center">
                                    <span className="text-sm text-muted-foreground">Lịch hẹn sắp tới</span>
                                    <span className="font-medium">
                                        {appointments.filter(apt => apt.status === 'Đã đặt lịch').length}
                                    </span>
                                </div>
                            </CardContent>
                        </Card>
                    </div>

{/* Right Column - Detailed Info */}
                    <div className="lg:col-span-2">
                        <Tabs defaultValue="personal" className="w-full">
                            <TabsList className="grid w-full grid-cols-3">
                                <TabsTrigger value="personal">Thông tin cá nhân</TabsTrigger>
                                <TabsTrigger value="appointments">Lịch hẹn</TabsTrigger>
                                <TabsTrigger value="medical">Lịch sử khám</TabsTrigger>
                            </TabsList>

{/* Personal Information Tab */}
                            <TabsContent value="personal" className="space-y-6">
                                <Card>
                                    <CardHeader>
                                        <CardTitle className="flex items-center gap-2">
                                            <User className="h-5 w-5" />
                                            Thông tin cơ bản
                                        </CardTitle>
                                    </CardHeader>
                                    <CardContent className="space-y-4">
                                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                            <div className="space-y-2">
                                                <label className="text-sm font-medium text-muted-foreground">Họ và tên</label>
                                                <div className="flex items-center gap-2 p-3 rounded-lg bg-muted/50">
                                                    <User className="h-4 w-4 text-muted-foreground" />
                                                    <span>{patientProfile.fullName || 'Chưa cập nhật'}</span>
                                                </div>
                                            </div>
                                            <div className="space-y-2">
                                                <label className="text-sm font-medium text-muted-foreground">Giới tính</label>
                                                <div className="flex items-center gap-2 p-3 rounded-lg bg-muted/50">
                                                    <User className="h-4 w-4 text-muted-foreground" />
                                                    <span>{patientProfile.gender || 'Chưa cập nhật'}</span>
                                                </div>
                                            </div>
                                            <div className="space-y-2">
                                                <label className="text-sm font-medium text-muted-foreground">Số điện thoại</label>
                                                <div className="flex items-center gap-2 p-3 rounded-lg bg-muted/50">
                                                    <Phone className="h-4 w-4 text-muted-foreground" />
                                                    <span>{patientProfile.phone || 'Chưa cập nhật'}</span>
                                                </div>
                                            </div>
                                            <div className="space-y-2">
                                                <label className="text-sm font-medium text-muted-foreground">Email</label>
                                                <div className="flex items-center gap-2 p-3 rounded-lg bg-muted/50">
                                                    <Mail className="h-4 w-4 text-muted-foreground" />
                                                    <span>{patientProfile.email || 'Chưa cập nhật'}</span>
                                                </div>
                                            </div>
                                            <div className="space-y-2">
                                                <label className="text-sm font-medium text-muted-foreground">Ngày sinh</label>
                                                <div className="flex items-center gap-2 p-3 rounded-lg bg-muted/50">
                                                    <Calendar className="h-4 w-4 text-muted-foreground" />
                                                    <span>{patientProfile.dob ? formatDate(patientProfile.dob) : 'Chưa cập nhật'}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </CardContent>
                                </Card>

<Card>
                                    <CardHeader>
                                        <CardTitle className="flex items-center gap-2">
                                            <FileText className="h-5 w-5" />
                                            Thông tin y tế
                                        </CardTitle>
                                    </CardHeader>
                                    <CardContent className="space-y-4">
                                        <div className="space-y-2">
                                            <label className="text-sm font-medium text-muted-foreground">Dị ứng</label>
                                            <div className="p-3 rounded-lg bg-muted/50">
                                                <span>{patientProfile.allergies || 'Không có thông tin'}</span>
                                            </div>
                                        </div>
                                        <div className="space-y-2">
                                            <label className="text-sm font-medium text-muted-foreground">Bệnh lý nền</label>
                                            <div className="p-3 rounded-lg bg-muted/50">
                                                <span>{patientProfile.medicalHistory || 'Không có thông tin'}</span>
                                            </div>
                                        </div>
                                    </CardContent>
                                </Card>
                            </TabsContent>

{/* Appointments Tab */}
                            <TabsContent value="appointments" className="space-y-6">
                                <Card>
                                    <CardHeader>
                                        <CardTitle className="flex items-center gap-2">
                                            <Clock className="h-5 w-5" />
                                            Lịch hẹn khám
                                        </CardTitle>
                                        <CardDescription>
                                            Danh sách các lịch hẹn khám bệnh của bạn
                                        </CardDescription>
                                    </CardHeader>
                                    <CardContent>
                                        <div className="space-y-4">
                                            {appointments.length === 0 ? (
                                                <div className="text-center py-8">
                                                    <Clock className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                                                    <p className="text-muted-foreground">Chưa có lịch hẹn nào</p>
                                                </div>
                                            ) : (
                                                appointments.map((appointment) => (
                                                    <div key={appointment.id} className="border rounded-lg p-4 hover:bg-muted/50 transition-colors">
                                                        <div className="flex items-center justify-between mb-2">
                                                            <h3 className="font-medium">{appointment.doctor}</h3>
                                                            <Badge className={getStatusColor(appointment.status)}>
                                                                {appointment.status}
                                                            </Badge>
                                                        </div>
                                                        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm text-muted-foreground">
                                                            <div className="flex items-center gap-2">
                                                                <Calendar className="h-4 w-4" />
                                                                <span>{formatDate(appointment.date)}</span>
                                                            </div>
                                                            <div className="flex items-center gap-2">
                                                                <Clock className="h-4 w-4" />
                                                                <span>{appointment.time}</span>
                                                            </div>
                                                            <div className="flex items-center gap-2">
                                                                <Stethoscope className="h-4 w-4" />
                                                                <span>{appointment.department}</span>
                                                            </div>
                                                            <div className="flex items-center gap-2">
                                                                <FileText className="h-4 w-4" />
                                                                <span>{appointment.notes}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                ))
                                            )}
                                        </div>
                                    </CardContent>
                                </Card>
                            </TabsContent>

{/* Medical Records Tab */}
                            <TabsContent value="medical" className="space-y-6">
                                <Card>
                                    <CardHeader>
                                        <CardTitle className="flex items-center gap-2">
                                            <FileText className="h-5 w-5" />
                                            Lịch sử khám bệnh
                                        </CardTitle>
                                        <CardDescription>
                                            Hồ sơ khám bệnh và điều trị của bạn
                                        </CardDescription>
                                    </CardHeader>
                                    <CardContent>
                                        <div className="space-y-4">
                                            {medicalRecords.length === 0 ? (
                                                <div className="text-center py-8">
                                                    <FileText className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                                                    <p className="text-muted-foreground">Chưa có hồ sơ khám bệnh</p>
                                                </div>
                                            ) : (
                                                medicalRecords.map((record) => (
                                                    <div key={record.id} className="border rounded-lg p-4 hover:bg-muted/50 transition-colors">
                                                        <div className="flex items-center justify-between mb-3">
                                                            <h3 className="font-medium">{record.doctor}</h3>
                                                            <span className="text-sm text-muted-foreground">{formatDate(record.date)}</span>
                                                        </div>
                                                        <div className="space-y-3">
                                                            <div>
                                                                <label className="text-sm font-medium text-muted-foreground">Chẩn đoán</label>
                                                                <p className="mt-1">{record.diagnosis}</p>
                                                            </div>
                                                            <div>
                                                                <label className="text-sm font-medium text-muted-foreground">Điều trị</label>
                                                                <p className="mt-1">{record.treatment}</p>
                                                            </div>
                                                            {record.prescription && (
                                                                <div>
                                                                    <label className="text-sm font-medium text-muted-foreground">Đơn thuốc</label>
                                                                    <p className="mt-1 text-sm bg-blue-50 p-2 rounded border-l-4 border-blue-400">
                                                                        {record.prescription}
                                                                    </p>
                                                                </div>
                                                            )}
                                                        </div>
                                                    </div>
                                                ))
                                            )}
                                        </div>
                                    </CardContent>
                                </Card>
                            </TabsContent>
                        </Tabs>
                    </div>
                </div>
            </div>

{/* Basic Info Edit Modal */}
            {patientProfile && (
                <BasicInfoEditModal
                    isOpen={isBasicInfoModalOpen}
                    onClose={() => setIsBasicInfoModalOpen(false)}
                    basicInfo={{
                        fullName: patientProfile.fullName || '',
                        email: patientProfile.email || '',
                        phone: patientProfile.phone || '',
                        dob: patientProfile.dob || '',
                        gender: patientProfile.gender || '',
                    }}
                    onSave={handleSaveBasicInfo}
                />
            )}

{/* Medical Info Edit Modal */}
            {patientProfile && (
                <MedicalInfoEditModal
                    isOpen={isMedicalInfoModalOpen}
                    onClose={() => setIsMedicalInfoModalOpen(false)}
                    medicalInfo={{
                        allergies: patientProfile.allergies || '',
                        medicalHistory: patientProfile.medicalHistory || ''
                    }}
                    onSave={handleSaveMedicalInfo}
                />
            )}

{/* Floating Action Button */}
            <div className="fixed bottom-6 right-6 z-50">
                <Button
                    size="lg"
                    onClick={() => router.push('/')}
                    className="rounded-full shadow-lg hover:shadow-xl transition-all duration-300 bg-primary hover:bg-primary/90"
                >
                    <Home className="h-5 w-5 mr-2" />
                    Về trang chủ
                </Button>
            </div>
        </div>
    )
}
[V0_FILE]typescriptreact:file="app/reception/appointments/page.tsx" isMerged="true"
"use client"

import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Calendar, Users, UserPlus, Activity, Plus, Clock } from "lucide-react"
import { mockAppointments } from "@/lib/mock-data"
import { useRouter } from "next/navigation"

const navigation = [
  { name: "Tổng quan", href: "/reception", icon: Activity },
  { name: "Lịch hẹn", href: "/reception/appointments", icon: Calendar },
  { name: "Bệnh nhân", href: "/reception/patients", icon: Users },
  { name: "Đăng ký mới", href: "/reception/register", icon: UserPlus },
]

export default function ReceptionAppointmentsPage() {
  const router = useRouter()

const scheduledAppointments = mockAppointments.filter((a) => a.status === "scheduled")
  const inProgressAppointments = mockAppointments.filter((a) => a.status === "in-progress")
  const completedAppointments = mockAppointments.filter((a) => a.status === "completed")
  const cancelledAppointments = mockAppointments.filter((a) => a.status === "cancelled")

const AppointmentCard = ({ appointment }: { appointment: (typeof mockAppointments)[0] }) => (
    <Card className="hover:shadow-md transition-shadow">
      <CardContent className="p-6">
        <div className="flex items-start justify-between">
          <div className="space-y-3 flex-1">
            <div className="flex items-start justify-between">
              <div>
                <div className="flex items-center gap-2 mb-1">
                  <h3 className="text-lg font-semibold">{appointment.patientName}</h3>
                  <Badge variant="outline">{appointment.id}</Badge>
                </div>
                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                  <Calendar className="h-4 w-4" />
                  <span>{appointment.date}</span>
                  <Clock className="h-4 w-4 ml-2" />
                  <span>{appointment.time}</span>
                </div>
              </div>
              <Badge
                variant={
                  appointment.status === "scheduled"
                    ? "default"
                    : appointment.status === "in-progress"
                      ? "secondary"
                      : appointment.status === "completed"
                        ? "outline"
                        : "destructive"
                }
              >
                {appointment.status === "scheduled"
                  ? "Đã đặt"
                  : appointment.status === "in-progress"
                    ? "Đang khám"
                    : appointment.status === "completed"
                      ? "Hoàn thành"
                      : "Đã hủy"}
              </Badge>
            </div>

<div className="space-y-2">
              <div>
                <span className="text-sm font-medium">Bác sĩ: </span>
                <span className="text-sm text-muted-foreground">{appointment.doctorName}</span>
              </div>
              <div>
                <span className="text-sm font-medium">Khoa: </span>
                <span className="text-sm text-muted-foreground">{appointment.department}</span>
              </div>
              <div>
                <span className="text-sm font-medium">Lý do: </span>
                <span className="text-sm text-muted-foreground">{appointment.reason}</span>
              </div>
              {appointment.notes && (
                <div>
                  <span className="text-sm font-medium">Ghi chú: </span>
                  <span className="text-sm text-muted-foreground">{appointment.notes}</span>
                </div>
              )}
            </div>
          </div>
          <div className="flex gap-2 ml-4">
            <Button size="sm" onClick={() => router.push(`/reception/appointments/${appointment.id}`)}>
              Chi tiết
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  )

return (
    <DashboardLayout navigation={navigation}>
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold tracking-tight">Quản lý lịch hẹn</h1>
            <p className="text-muted-foreground">Xem và quản lý lịch hẹn của bệnh nhân</p>
          </div>
          <Button onClick={() => router.push("/reception/appointments/new")}>
            <Plus className="mr-2 h-4 w-4" />
            Đặt lịch mới
          </Button>
        </div>

<Tabs defaultValue="scheduled" className="space-y-4">
          <TabsList>
            <TabsTrigger value="scheduled">Đã đặt ({scheduledAppointments.length})</TabsTrigger>
            <TabsTrigger value="in-progress">Đang khám ({inProgressAppointments.length})</TabsTrigger>
            <TabsTrigger value="completed">Hoàn thành ({completedAppointments.length})</TabsTrigger>
            <TabsTrigger value="cancelled">Đã hủy ({cancelledAppointments.length})</TabsTrigger>
          </TabsList>

<TabsContent value="scheduled" className="space-y-4">
            {scheduledAppointments.length === 0 ? (
              <Card>
                <CardContent className="py-12 text-center">
                  <p className="text-muted-foreground">Không có lịch hẹn nào</p>
                </CardContent>
              </Card>
            ) : (
              scheduledAppointments.map((appointment) => (
                <AppointmentCard key={appointment.id} appointment={appointment} />
              ))
            )}
          </TabsContent>

<TabsContent value="in-progress" className="space-y-4">
            {inProgressAppointments.length === 0 ? (
              <Card>
                <CardContent className="py-12 text-center">
                  <p className="text-muted-foreground">Không có lịch hẹn đang khám</p>
                </CardContent>
              </Card>
            ) : (
              inProgressAppointments.map((appointment) => (
                <AppointmentCard key={appointment.id} appointment={appointment} />
              ))
            )}
          </TabsContent>

<TabsContent value="completed" className="space-y-4">
            {completedAppointments.length === 0 ? (
              <Card>
                <CardContent className="py-12 text-center">
                  <p className="text-muted-foreground">Không có lịch hẹn hoàn thành</p>
                </CardContent>
              </Card>
            ) : (
              completedAppointments.map((appointment) => (
                <AppointmentCard key={appointment.id} appointment={appointment} />
              ))
            )}
          </TabsContent>

<TabsContent value="cancelled" className="space-y-4">
            {cancelledAppointments.length === 0 ? (
              <Card>
                <CardContent className="py-12 text-center">
                  <p className="text-muted-foreground">Không có lịch hẹn đã hủy</p>
                </CardContent>
              </Card>
            ) : (
              cancelledAppointments.map((appointment) => (
                <AppointmentCard key={appointment.id} appointment={appointment} />
              ))
            )}
          </TabsContent>
        </Tabs>
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/reception/page.tsx" isMerged="true"
"use client"

import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Calendar, Users, Clock, UserPlus, CalendarPlus, Activity } from "lucide-react"
import { mockAppointments, mockPatients } from "@/lib/mock-data"
import { useRouter } from "next/navigation"

export default function ReceptionDashboard() {
  const router = useRouter()

// Get today's appointments
  const today = new Date().toISOString().split("T")[0]
  const todayAppointments = mockAppointments.filter((apt) => apt.status === "scheduled")
  const upcomingAppointments = todayAppointments.slice(0, 5)

// Statistics
  const stats = [
    {
      title: "Lịch hẹn hôm nay",
      value: todayAppointments.length.toString(),
      icon: Calendar,
      color: "text-primary",
    },
    {
      title: "Đang chờ khám",
      value: mockAppointments.filter((a) => a.status === "scheduled").length.toString(),
      icon: Clock,
      color: "text-chart-4",
    },
    {
      title: "Tổng bệnh nhân",
      value: mockPatients.length.toString(),
      icon: Users,
      color: "text-accent",
    },
    {
      title: "Đã hoàn thành",
      value: mockAppointments.filter((a) => a.status === "completed").length.toString(),
      icon: Activity,
      color: "text-chart-2",
    },
  ]

return (
    <DashboardLayout navigation={navigation}>
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Lễ tân</h1>
          <p className="text-muted-foreground">Quản lý tiếp nhận và lịch hẹn bệnh nhân</p>
        </div>

<div className="grid gap-6 md:grid-cols-2">
          {/* Today's Appointments */}
          <Card>
            <CardHeader>
              <CardTitle>Lịch hẹn hôm nay</CardTitle>
              <CardDescription>Danh sách bệnh nhân đã đặt lịch</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {upcomingAppointments.length === 0 ? (
                  <p className="text-sm text-muted-foreground text-center py-4">Không có lịch hẹn nào</p>
                ) : (
                  upcomingAppointments.map((appointment) => (
                    <div key={appointment.id} className="flex items-start justify-between border-b pb-4 last:border-0">
                      <div className="space-y-1">
                        <div className="flex items-center gap-2">
                          <Clock className="h-4 w-4 text-muted-foreground" />
                          <span className="font-medium">{appointment.time}</span>
                        </div>
                        <p className="text-sm font-medium">{appointment.patientName}</p>
                        <p className="text-sm text-muted-foreground">{appointment.doctorName}</p>
                        <Badge variant="outline">{appointment.department}</Badge>
                      </div>
                      <div className="flex gap-2">
                        <Button size="sm" onClick={() => router.push(`/reception/appointments/${appointment.id}`)}>
                          Chi tiết
                        </Button>
                      </div>
                    </div>
                  ))
                )}
              </div>
            </CardContent>
          </Card>

{/* Quick Actions */}
          <Card>
            <CardHeader>
              <CardTitle>Thao tác nhanh</CardTitle>
              <CardDescription>Các chức năng thường dùng</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid gap-3">
                <Button className="w-full justify-start h-auto py-4" onClick={() => router.push("/reception/register")}>
                  <UserPlus className="mr-3 h-5 w-5" />
                  <div className="text-left">
                    <p className="font-semibold">Đăng ký bệnh nhân mới</p>
                    <p className="text-xs text-primary-foreground/80">Tạo hồ sơ bệnh nhân mới</p>
                  </div>
                </Button>

<Button
                  variant="outline"
                  className="w-full justify-start h-auto py-4 bg-transparent"
                  onClick={() => router.push("/reception/appointments/new")}
                >
                  <CalendarPlus className="mr-3 h-5 w-5" />
                  <div className="text-left">
                    <p className="font-semibold">Đặt lịch hẹn</p>
                    <p className="text-xs text-muted-foreground">Tạo lịch hẹn cho bệnh nhân</p>
                  </div>
                </Button>

<Button
                  variant="outline"
                  className="w-full justify-start h-auto py-4 bg-transparent"
                  onClick={() => router.push("/reception/patients")}
                >
                  <Users className="mr-3 h-5 w-5" />
                  <div className="text-left">
                    <p className="font-semibold">Tra cứu bệnh nhân</p>
                    <p className="text-xs text-muted-foreground">Tìm kiếm thông tin bệnh nhân</p>
                  </div>
                </Button>

<Button
                  variant="outline"
                  className="w-full justify-start h-auto py-4 bg-transparent"
                  onClick={() => router.push("/reception/appointments")}
                >
                  <Calendar className="mr-3 h-5 w-5" />
                  <div className="text-left">
                    <p className="font-semibold">Quản lý lịch hẹn</p>
                    <p className="text-xs text-muted-foreground">Xem và chỉnh sửa lịch hẹn</p>
                  </div>
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>

{/* Recent Patients */}
        <Card>
          <CardHeader>
            <CardTitle>Bệnh nhân gần đây</CardTitle>
            <CardDescription>Danh sách bệnh nhân đã đăng ký</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {mockPatients.slice(0, 4).map((patient) => (
                <div key={patient.id} className="flex items-center justify-between border-b pb-4 last:border-0">
                  <div className="flex items-center gap-3">
                    <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center">
                      <span className="text-sm font-semibold text-primary">
                        {patient.name
                          .split(" ")
                          .map((n) => n[0])
                          .join("")
                          .toUpperCase()
                          .slice(0, 2)}
                      </span>
                    </div>
                    <div>
                      <p className="text-sm font-medium">{patient.name}</p>
                      <p className="text-xs text-muted-foreground">{patient.phone}</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <Badge variant="outline">{patient.id}</Badge>
                    <Button size="sm" variant="ghost" onClick={() => router.push(`/reception/patients/${patient.id}`)}>
                      Xem
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/reception/patients/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/reception/patients/page.tsx" isMerged="true"
"use client"

import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Calendar, Users, UserPlus, Activity, Search, Phone, Mail } from "lucide-react"
import { mockPatients } from "@/lib/mock-data"
import { useState } from "react"
import { useRouter } from "next/navigation"

export default function ReceptionPatientsPage() {
  const router = useRouter()
  const [searchQuery, setSearchQuery] = useState("")

return (
    <DashboardLayout navigation={navigation}>
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold tracking-tight">Danh sách bệnh nhân</h1>
            <p className="text-muted-foreground">Tra cứu và quản lý thông tin bệnh nhân</p>
          </div>
          <Button onClick={() => router.push("/reception/register")}>
            <UserPlus className="mr-2 h-4 w-4" />
            Đăng ký mới
          </Button>
        </div>

{/* Patient List */}
        <div className="grid gap-4">
          {filteredPatients.map((patient) => (
            <Card key={patient.id} className="hover:shadow-md transition-shadow">
              <CardContent className="p-6">
                <div className="flex items-start justify-between">
                  <div className="space-y-3 flex-1">
                    <div className="flex items-start gap-4">
                      <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                        <span className="text-lg font-semibold text-primary">
                          {patient.name
                            .split(" ")
                            .map((n) => n[0])
                            .join("")
                            .toUpperCase()
                            .slice(0, 2)}
                        </span>
                      </div>
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 mb-1">
                          <h3 className="text-lg font-semibold">{patient.name}</h3>
                          <Badge variant="outline">{patient.id}</Badge>
                          <Badge variant="secondary">
                            {patient.gender === "male" ? "Nam" : patient.gender === "female" ? "Nữ" : "Khác"}
                          </Badge>
                        </div>
                        <div className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm text-muted-foreground">
                          <div className="flex items-center gap-2">
                            <Calendar className="h-4 w-4" />
                            <span>
                              {calculateAge(patient.dateOfBirth)} tuổi ({patient.dateOfBirth})
                            </span>
                          </div>
                          <div className="flex items-center gap-2">
                            <Phone className="h-4 w-4" />
                            <span>{patient.phone}</span>
                          </div>
                          {patient.email && (
                            <div className="flex items-center gap-2">
                              <Mail className="h-4 w-4" />
                              <span>{patient.email}</span>
                            </div>
                          )}
                          {patient.bloodType && (
                            <div className="flex items-center gap-2">
                              <Activity className="h-4 w-4" />
                              <span>Nhóm máu: {patient.bloodType}</span>
                            </div>
                          )}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="flex gap-2 ml-4">
                    <Button size="sm" onClick={() => router.push(`/reception/patients/${patient.id}`)}>
                      Xem chi tiết
                    </Button>
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => router.push(`/reception/appointments/new?patientId=${patient.id}`)}
                    >
                      Đặt lịch
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

{filteredPatients.length === 0 && (
          <Card>
            <CardContent className="py-12 text-center">
              <p className="text-muted-foreground">Không tìm thấy bệnh nhân nào</p>
            </CardContent>
          </Card>
        )}
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/reception/register/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { DashboardLayout } from "@/components/dashboard-layout"
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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Calendar, Users, UserPlus, Activity, ArrowLeft } from "lucide-react"
import { useState } from "react"
import { useRouter } from "next/navigation"

export default function RegisterPatientPage() {
  const router = useRouter()
  const [isSubmitting, setIsSubmitting] = useState(false)

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setIsSubmitting(true)

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

setIsSubmitting(false)
    router.push("/reception/patients")
  }

<form onSubmit={handleSubmit}>
          <div className="grid gap-6 md:grid-cols-2">
            {/* Personal Information */}
            <Card className="md:col-span-2">
              <CardHeader>
                <CardTitle>Thông tin cá nhân</CardTitle>
                <CardDescription>Thông tin cơ bản của bệnh nhân</CardDescription>
              </CardHeader>
              <CardContent className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="fullName">
                    Họ và tên <span className="text-destructive">*</span>
                  </Label>
                  <Input id="fullName" placeholder="Nguyễn Văn A" required />
                </div>

{/* Contact Information */}
            <Card className="md:col-span-2">
              <CardHeader>
                <CardTitle>Thông tin liên hệ</CardTitle>
                <CardDescription>Số điện thoại và địa chỉ</CardDescription>
              </CardHeader>
              <CardContent className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="phone">
                    Số điện thoại <span className="text-destructive">*</span>
                  </Label>
                  <Input id="phone" type="tel" placeholder="0901234567" required />
                </div>

<div className="space-y-2">
                  <Label htmlFor="email">Email</Label>
                  <Input id="email" type="email" placeholder="example@email.com" />
                </div>

{/* Medical Information */}
            <Card className="md:col-span-2">
              <CardHeader>
                <CardTitle>Thông tin y tế</CardTitle>
                <CardDescription>Tiền sử bệnh và dị ứng</CardDescription>
              </CardHeader>
              <CardContent className="grid gap-4">
                <div className="space-y-2">
                  <Label htmlFor="allergies">Dị ứng</Label>
                  <Input id="allergies" placeholder="Ví dụ: Penicillin, Sữa, Hải sản..." />
                  <p className="text-xs text-muted-foreground">Nhập các loại dị ứng, cách nhau bằng dấu phẩy</p>
                </div>

{/* Action Buttons */}
          <div className="flex justify-end gap-4 mt-6">
            <Button type="button" variant="outline" onClick={() => router.back()} disabled={isSubmitting}>
              Hủy
            </Button>
            <Button type="submit" disabled={isSubmitting}>
              {isSubmitting ? "Đang lưu..." : "Đăng ký bệnh nhân"}
            </Button>
          </div>
        </form>
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/register/page.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowLeft, Eye, EyeOff, Sparkles, UserPlus, Mail, Lock, Phone, User, Calendar, Loader2 } from "lucide-react"
import { useState } from "react"
import Image from "next/image"
import { useRouter } from "next/navigation"
import { apiService } from "@/api/index"
import { toast } from "sonner"

export default function RegisterPage() {
  const [showPassword, setShowPassword] = useState(false)
  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [formData, setFormData] = useState({
    fullName: "",
    email: "",
    phone: "",
    password: "",
    confirmPassword: "",
    dob: "",
    gender: "",
    agreeTerms: false
  })
  const [errors, setErrors] = useState<Record<string, string>>({})
  const router = useRouter()

const handleInputChange = (field: string, value: string | boolean) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }))
    // Clear error when user starts typing
    if (errors[field]) {
      setErrors(prev => ({
        ...prev,
        [field]: ""
      }))
    }
  }

const validateForm = () => {
    const newErrors: Record<string, string> = {}

if (!formData.fullName.trim()) {
      newErrors.fullName = "Họ và tên là bắt buộc"
    }

if (!formData.email.trim()) {
      newErrors.email = "Email là bắt buộc"
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
      newErrors.email = "Email không hợp lệ"
    }

if (!formData.phone.trim()) {
      newErrors.phone = "Số điện thoại là bắt buộc"
    } else if (!/^[0-9]{10,11}$/.test(formData.phone.replace(/\s/g, ""))) {
      newErrors.phone = "Số điện thoại phải có 10-11 chữ số"
    }

if (!formData.password) {
      newErrors.password = "Mật khẩu là bắt buộc"
    } else if (formData.password.length < 6) {
      newErrors.password = "Mật khẩu phải có ít nhất 6 ký tự"
    }

if (!formData.confirmPassword) {
      newErrors.confirmPassword = "Xác nhận mật khẩu là bắt buộc"
    } else if (formData.password !== formData.confirmPassword) {
      newErrors.confirmPassword = "Mật khẩu không khớp"
    }

if (!formData.agreeTerms) {
      newErrors.agreeTerms = "Bạn phải đồng ý với điều khoản sử dụng"
    }

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

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

if (!validateForm()) {
      toast.error("Vui lòng kiểm tra lại thông tin")
      return
    }

setIsLoading(true)

try {
      const registerData = {
        phone: formData.phone,
        password: formData.password,
        fullName: formData.fullName,
        email: formData.email,
        dob: formData.dob ? new Date(formData.dob).toISOString().split('T')[0] : undefined,
        gender: formData.gender || undefined,
        roleId: 2 // Always Patient role
      }

const response = await apiService.createUser(registerData)
      toast.success("Đăng ký thành công! Vui lòng đăng nhập.")
      router.push("/login")
    } catch (error: any) {
      if (error.message.includes("Phone already exists")) {
        setErrors({ phone: "Số điện thoại đã được sử dụng" })
        toast.error("Số điện thoại đã được sử dụng")
      } else {
        toast.error(error.message || "Đăng ký thất bại. Vui lòng thử lại.")
      }
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="flex min-h-screen">
      <div className="flex w-full flex-col justify-center bg-gradient-to-br from-background via-background to-muted/20 px-6 py-12 lg:w-1/2 lg:px-20">
        <div className="mx-auto w-full max-w-md space-y-8">
          <button
            onClick={() => router.push("/")}
            className="inline-flex items-center gap-2 text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
          >
            <ArrowLeft className="h-4 w-4" />
            Quay lại trang chủ
          </button>

<div className="flex items-center gap-4">
            <div className="flex h-24 w-24 items-center justify-center rounded-2xl bg-gradient-to-br">
              <img
                src="/images/logo.png"
                alt="Logo"
                className="object-contain"
              />
            </div>
            <div className="flex flex-col">
              <span className="text-2xl font-bold leading-none text-foreground">Diamond Health</span>
              <span className="text-sm text-muted-foreground">Phòng khám đa khoa</span>
            </div>
          </div>

<Card className="border-none bg-white shadow-2xl ring-1 ring-black/5">
            <CardHeader className="space-y-3 pb-6">
              <div className="flex items-center gap-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10">
                  <UserPlus className="h-5 w-5 text-primary" />
                </div>
                <CardTitle className="text-3xl font-bold">Đăng ký bệnh nhân</CardTitle>
              </div>
              <CardDescription className="text-base leading-relaxed">
                Tạo tài khoản bệnh nhân để đặt lịch khám và sử dụng dịch vụ y tế
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <form onSubmit={handleSubmit} className="space-y-5">
                <div className="space-y-2.5">
                  <label className="flex items-center gap-2 text-sm font-semibold" htmlFor="fullname">
                    <User className="h-4 w-4 text-primary" />
                    Họ và tên <span className="text-red-500">*</span>
                  </label>
                  <input
                    id="fullname"
                    type="text"
                    value={formData.fullName}
                    onChange={(e) => handleInputChange("fullName", e.target.value)}
                    className={`h-12 w-full rounded-xl border-2 px-4 text-sm transition-all focus:outline-none focus:ring-4 focus:ring-primary/10 ${errors.fullName
                      ? "border-red-500 focus:border-red-500"
                      : "border-input bg-background focus:border-primary"
                      }`}
                    placeholder="Nhập họ và tên đầy đủ"
                  />
                  {errors.fullName && <p className="text-sm text-red-500">{errors.fullName}</p>}
                </div>

<div className="space-y-2.5">
                  <label className="flex items-center gap-2 text-sm font-semibold" htmlFor="email">
                    <Mail className="h-4 w-4 text-primary" />
                    Email <span className="text-red-500">*</span>
                  </label>
                  <input
                    id="email"
                    type="email"
                    value={formData.email}
                    onChange={(e) => handleInputChange("email", e.target.value)}
                    className={`h-12 w-full rounded-xl border-2 px-4 text-sm transition-all focus:outline-none focus:ring-4 focus:ring-primary/10 ${errors.email
                      ? "border-red-500 focus:border-red-500"
                      : "border-input bg-background focus:border-primary"
                      }`}
                    placeholder="example@email.com"
                  />
                  {errors.email && <p className="text-sm text-red-500">{errors.email}</p>}
                </div>

<div className="space-y-2.5">
                  <label className="flex items-center gap-2 text-sm font-semibold" htmlFor="phone">
                    <Phone className="h-4 w-4 text-primary" />
                    Số điện thoại <span className="text-red-500">*</span>
                  </label>
                  <input
                    id="phone"
                    type="tel"
                    value={formData.phone}
                    onChange={(e) => handleInputChange("phone", e.target.value)}
                    className={`h-12 w-full rounded-xl border-2 px-4 text-sm transition-all focus:outline-none focus:ring-4 focus:ring-primary/10 ${errors.phone
                      ? "border-red-500 focus:border-red-500"
                      : "border-input bg-background focus:border-primary"
                      }`}
                    placeholder="0123 456 789"
                  />
                  {errors.phone && <p className="text-sm text-red-500">{errors.phone}</p>}
                </div>

<div className="space-y-2.5">
                  <label className="flex items-center gap-2 text-sm font-semibold" htmlFor="password">
                    <Lock className="h-4 w-4 text-primary" />
                    Mật khẩu <span className="text-red-500">*</span>
                  </label>
                  <div className="relative">
                    <input
                      id="password"
                      type={showPassword ? "text" : "password"}
                      value={formData.password}
                      onChange={(e) => handleInputChange("password", e.target.value)}
                      className={`h-12 w-full rounded-xl border-2 px-4 pr-12 text-sm transition-all focus:outline-none focus:ring-4 focus:ring-primary/10 ${errors.password
                        ? "border-red-500 focus:border-red-500"
                        : "border-input bg-background focus:border-primary"
                        }`}
                      placeholder="Tối thiểu 6 ký tự"
                    />
                    <button
                      type="button"
                      onClick={() => setShowPassword(!showPassword)}
                      className="absolute right-4 top-1/2 -translate-y-1/2 text-muted-foreground transition-colors hover:text-foreground"
                    >
                      {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
                    </button>
                  </div>
                  {errors.password && <p className="text-sm text-red-500">{errors.password}</p>}
                </div>

<div className="space-y-2.5">
                  <label className="flex items-center gap-2 text-sm font-semibold" htmlFor="confirm-password">
                    <Lock className="h-4 w-4 text-primary" />
                    Xác nhận mật khẩu <span className="text-red-500">*</span>
                  </label>
                  <div className="relative">
                    <input
                      id="confirm-password"
                      type={showConfirmPassword ? "text" : "password"}
                      value={formData.confirmPassword}
                      onChange={(e) => handleInputChange("confirmPassword", e.target.value)}
                      className={`h-12 w-full rounded-xl border-2 px-4 pr-12 text-sm transition-all focus:outline-none focus:ring-4 focus:ring-primary/10 ${errors.confirmPassword
                        ? "border-red-500 focus:border-red-500"
                        : "border-input bg-background focus:border-primary"
                        }`}
                      placeholder="Nhập lại mật khẩu"
                    />
                    <button
                      type="button"
                      onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                      className="absolute right-4 top-1/2 -translate-y-1/2 text-muted-foreground transition-colors hover:text-foreground"
                    >
                      {showConfirmPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
                    </button>
                  </div>
                  {errors.confirmPassword && <p className="text-sm text-red-500">{errors.confirmPassword}</p>}
                </div>

{/* Date of Birth */}
                <div className="space-y-2.5">
                  <label className="flex items-center gap-2 text-sm font-semibold" htmlFor="dob">
                    <Calendar className="h-4 w-4 text-primary" />
                    Ngày sinh
                  </label>
                  <input
                    id="dob"
                    type="date"
                    value={formData.dob}
                    onChange={(e) => handleInputChange("dob", e.target.value)}
                    className="h-12 w-full rounded-xl border-2 border-input bg-background px-4 text-sm transition-all focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/10"
                  />
                </div>

{/* Gender */}
                <div className="space-y-2.5">
                  <label className="flex items-center gap-2 text-sm font-semibold" htmlFor="gender">
                    <User className="h-4 w-4 text-primary" />
                    Giới tính
                  </label>
                  <select
                    id="gender"
                    value={formData.gender}
                    onChange={(e) => handleInputChange("gender", e.target.value)}
                    className="h-12 w-full rounded-xl border-2 border-input bg-background px-4 text-sm transition-all focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/10"
                  >
                    <option value="">Chọn giới tính</option>
                    <option value="Nam">Nam</option>
                    <option value="Nữ">Nữ</option>
                    <option value="Khác">Khác</option>
                  </select>
                </div>

<div className="flex items-start gap-3 rounded-lg bg-muted/50 p-4">
                  <input
                    type="checkbox"
                    id="terms"
                    checked={formData.agreeTerms}
                    onChange={(e) => handleInputChange("agreeTerms", e.target.checked)}
                    className="mt-0.5 h-4 w-4 rounded border-input text-primary focus:ring-2 focus:ring-primary"
                  />
                  <label htmlFor="terms" className="text-sm leading-relaxed">
                    Tôi đồng ý với{" "}
                    <button type="button" className="font-semibold text-primary hover:underline">
                      Điều khoản sử dụng
                    </button>{" "}
                    và{" "}
                    <button type="button" className="font-semibold text-primary hover:underline">
                      Chính sách bảo mật
                    </button>{" "}
                    của Diamond Health
                  </label>
                </div>
                {errors.agreeTerms && <p className="text-sm text-red-500">{errors.agreeTerms}</p>}

<Button
                  type="submit"
                  disabled={isLoading}
                  className="h-14 w-full bg-gradient-to-r from-primary to-primary/90 text-base font-semibold shadow-lg shadow-primary/25 transition-all hover:shadow-xl hover:shadow-primary/30 hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed"
                  size="lg"
                >
                  {isLoading ? (
                    <>
                      <Loader2 className="mr-2 h-5 w-5 animate-spin" />
                      Đang tạo tài khoản...
                    </>
                  ) : (
                    <>
                      <UserPlus className="mr-2 h-5 w-5" />
                      Tạo tài khoản
                    </>
                  )}
                </Button>

<Button
                  variant="outline"
                  className="h-12 w-full justify-center border-2 font-semibold transition-all hover:bg-muted/50 hover:scale-[1.02] bg-transparent"
                  type="button"
                >
                  <svg className="mr-3 h-5 w-5" viewBox="0 0 24 24">
                    <path
                      fill="#4285F4"
                      d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                    />
                    <path
                      fill="#34A853"
                      d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                    />
                    <path
                      fill="#FBBC05"
                      d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                    />
                    <path
                      fill="#EA4335"
                      d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                    />
                  </svg>
                  Đăng ký với Google
                </Button>

<div className="text-center text-sm">
                  <span className="text-muted-foreground">Đã có tài khoản? </span>
                  <button
                    type="button"
                    onClick={() => router.push("/login")}
                    className="font-bold text-primary hover:underline"
                  >
                    Đăng nhập ngay
                  </button>
                </div>
              </form>
            </CardContent>
          </Card>
        </div>
      </div>

<p className="text-xl leading-relaxed opacity-95">
              Đăng ký tài khoản bệnh nhân để đặt lịch khám, quản lý hồ sơ sức khỏe và nhận dịch vụ y tế chất lượng cao.
            </p>

<div className="grid gap-6 pt-6">
              <div className="flex items-start gap-5 rounded-2xl bg-primary-foreground/10 p-6 backdrop-blur-sm transition-all hover:bg-primary-foreground/15">
                <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary-foreground/20">
                  <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
                    />
                  </svg>
                </div>
                <div>
                  <h3 className="mb-2 text-lg font-bold">Hồ sơ sức khỏe cá nhân</h3>
                  <p className="leading-relaxed opacity-90">Lưu trữ và quản lý thông tin sức khỏe, lịch sử khám bệnh của bạn</p>
                </div>
              </div>

<div className="flex items-start gap-5 rounded-2xl bg-primary-foreground/10 p-6 backdrop-blur-sm transition-all hover:bg-primary-foreground/15">
                <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary-foreground/20">
                  <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                    />
                  </svg>
                </div>
                <div>
                  <h3 className="mb-2 text-lg font-bold">Đặt lịch khám dễ dàng</h3>
                  <p className="leading-relaxed opacity-90">Chọn bác sĩ và thời gian khám phù hợp với lịch trình của bạn</p>
                </div>
              </div>

<div className="flex items-start gap-5 rounded-2xl bg-primary-foreground/10 p-6 backdrop-blur-sm transition-all hover:bg-primary-foreground/15">
                <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary-foreground/20">
                  <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-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>
                </div>
                <div>
                  <h3 className="mb-2 text-lg font-bold">Nhắc nhở lịch khám</h3>
                  <p className="leading-relaxed opacity-90">Nhận thông báo nhắc nhở về lịch khám và chăm sóc sức khỏe</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/test-auth/page.tsx" isMerged="true"
import { AuthTest } from "@/components/auth-test"

export default function TestAuthPage() {
    return (
        <div className="container mx-auto py-8">
            <h1 className="text-3xl font-bold text-center mb-8">Authentication Test</h1>
            <AuthTest />
        </div>
    )
}
[V0_FILE]typescriptreact:file="components/auth-test.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { apiService } from "@/api/index"
import { getCurrentUser, User } from "@/lib/auth"
import { toast } from "sonner"

export function AuthTest() {
    const [isLoading, setIsLoading] = useState(false)
    const [user, setUser] = useState<User | null>(null)
    const [isClient, setIsClient] = useState(false)

useEffect(() => {
        setIsClient(true)
        setUser(getCurrentUser())
    }, [])

const testEndpoints = [
        { name: "Public Users", endpoint: "fetchAllUsers", description: "Lấy danh sách tất cả users (public)" },
        { name: "Doctor Only", endpoint: "fetchSecureUsers", description: "Chỉ Doctor mới truy cập được" },
        { name: "Admin Only", endpoint: "fetchAdminUsers", description: "Chỉ Admin/Manager mới truy cập được" },
        { name: "Staff Only", endpoint: "fetchStaffUsers", description: "Doctor/Receptionist mới truy cập được" },
        { name: "User Profile", endpoint: "fetchUserProfile", description: "Lấy thông tin user hiện tại" },
    ]

const handleTest = async (endpoint: string) => {
        setIsLoading(true)
        try {
            let result
            switch (endpoint) {
                case "fetchAllUsers":
                    result = await apiService.fetchAllUsers()
                    break
                case "fetchSecureUsers":
                    result = await apiService.fetchSecureUsers()
                    break
                case "fetchAdminUsers":
                    result = await apiService.fetchAdminUsers()
                    break
                default:
                    throw new Error("Unknown endpoint")
            }

toast.success(`${endpoint} thành công!`)
            console.log("Result:", result)
        } catch (error: any) {
            toast.error(`Lỗi ${endpoint}: ${error.message}`)
            console.error("Error:", error)
        } finally {
            setIsLoading(false)
        }
    }

return (
        <Card className="w-full max-w-2xl mx-auto">
            <CardHeader>
                <CardTitle>Authentication Test Panel</CardTitle>
                <CardDescription>
                    Test các API endpoints với phân quyền khác nhau
                </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
                <div className="p-4 bg-muted rounded-lg">
                    <h3 className="font-medium mb-2">Current User:</h3>
                    {!isClient ? (
                        <p className="text-muted-foreground">Đang tải...</p>
                    ) : user ? (
                        <div>
                            <p><strong>Name:</strong> {user.name}</p>
                            <p><strong>Role:</strong> {user.role}</p>
                            <p><strong>Email:</strong> {user.email}</p>
                        </div>
                    ) : (
                        <p className="text-muted-foreground">Chưa đăng nhập</p>
                    )}
                </div>

<div className="space-y-3">
                    {testEndpoints.map((test) => (
                        <div key={test.endpoint} className="flex items-center justify-between p-3 border rounded-lg">
                            <div>
                                <h4 className="font-medium">{test.name}</h4>
                                <p className="text-sm text-muted-foreground">{test.description}</p>
                            </div>
                            <Button
                                onClick={() => handleTest(test.endpoint)}
                                disabled={isLoading}
                                variant="outline"
                                size="sm"
                            >
                                Test
                            </Button>
                        </div>
                    ))}
                </div>

<div className="pt-4 border-t">
                    <p className="text-sm text-muted-foreground">
                        <strong>Test Accounts:</strong><br />
                        Doctor: 0905123456 / 123<br />
                        Patient: 0906123456 / 123
                    </p>
                </div>
            </CardContent>
        </Card>
    )
}
[V0_FILE]typescriptreact:file="components/basic-info-edit-modal.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
    User,
    Mail,
    Phone,
    Calendar,
    MapPin,
    Save,
    X
} from "lucide-react"
import { toast } from "sonner"
import { apiService } from "@/api/index"

interface BasicInfo {
    fullName: string
    email: string
    phone: string
    dob: string
    gender: string
}

interface BasicInfoEditModalProps {
    isOpen: boolean
    onClose: () => void
    basicInfo: BasicInfo
    onSave: (updatedInfo: BasicInfo) => void
}

export function BasicInfoEditModal({ isOpen, onClose, basicInfo, onSave }: BasicInfoEditModalProps) {
    const [formData, setFormData] = useState<BasicInfo>(basicInfo)
    const [isLoading, setIsLoading] = useState(false)

const handleInputChange = (field: keyof BasicInfo, value: string) => {
        setFormData(prev => ({
            ...prev,
            [field]: value
        }))
    }

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

// Validate required fields
            if (!formData.fullName?.trim()) {
                toast.error("Vui lòng nhập họ và tên")
                return
            }

if (!formData.phone?.trim()) {
                toast.error("Vui lòng nhập số điện thoại")
                return
            }

// Call API to update basic info
            const response = await apiService.updateBasicInfo(formData)

onSave({
                fullName: response.user.fullName || '',
                email: response.user.email || '',
                phone: response.user.phone || '',
                dob: response.user.dob?.toString() || '',
                gender: response.user.gender || ''
            })
            toast.success(response.message)
            onClose()
        } catch (error) {
            console.error('Error updating basic info:', error)
            toast.error("Có lỗi xảy ra khi cập nhật thông tin")
        } finally {
            setIsLoading(false)
        }
    }

const handleCancel = () => {
        setFormData(basicInfo) // Reset to original data
        onClose()
    }

return (
        <Dialog open={isOpen} onOpenChange={onClose}>
            <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
                <DialogHeader>
                    <DialogTitle className="flex items-center gap-2">
                        <User className="h-5 w-5" />
                        Cập nhật thông tin cơ bản
                    </DialogTitle>
                    <DialogDescription>
                        Cập nhật thông tin cá nhân cơ bản của bạn
                    </DialogDescription>
                </DialogHeader>

<div className="space-y-6">
                    <div className="space-y-4">
                        <h3 className="text-lg font-semibold flex items-center gap-2">
                            <User className="h-4 w-4" />
                            Thông tin cá nhân
                        </h3>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div className="space-y-2">
                                <Label htmlFor="fullName">Họ và tên *</Label>
                                <div className="relative">
                                    <User className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                                    <Input
                                        id="fullName"
                                        value={formData.fullName}
                                        onChange={(e) => handleInputChange('fullName', e.target.value)}
                                        className="pl-10"
                                        placeholder="Nhập họ và tên"
                                    />
                                </div>
                            </div>

<div className="space-y-2">
                                <Label htmlFor="phone">Số điện thoại *</Label>
                                <div className="relative">
                                    <Phone className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                                    <Input
                                        id="phone"
                                        value={formData.phone}
                                        onChange={(e) => handleInputChange('phone', e.target.value)}
                                        className="pl-10"
                                        placeholder="Nhập số điện thoại"
                                    />
                                </div>
                            </div>

<div className="space-y-2">
                                <Label htmlFor="email">Email</Label>
                                <div className="relative">
                                    <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                                    <Input
                                        id="email"
                                        type="email"
                                        value={formData.email}
                                        onChange={(e) => handleInputChange('email', e.target.value)}
                                        className="pl-10"
                                        placeholder="Nhập email"
                                    />
                                </div>
                            </div>

<div className="space-y-2">
                                <Label htmlFor="dob">Ngày sinh</Label>
                                <div className="relative">
                                    <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                                    <Input
                                        id="dob"
                                        type="date"
                                        value={formData.dob}
                                        onChange={(e) => handleInputChange('dob', e.target.value)}
                                        className="pl-10"
                                    />
                                </div>
                            </div>

<div className="space-y-2">
                                <Label>Giới tính</Label>
                                <Select value={formData.gender} onValueChange={(value) => handleInputChange('gender', value)}>
                                    <SelectTrigger>
                                        <SelectValue placeholder="Chọn giới tính" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="Nam">Nam</SelectItem>
                                        <SelectItem value="Nữ">Nữ</SelectItem>
                                        <SelectItem value="Khác">Khác</SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>
                        </div>

</div>
                </div>

{/* Actions */}
                <div className="flex justify-end gap-3 pt-6 border-t">
                    <Button
                        variant="outline"
                        onClick={handleCancel}
                        disabled={isLoading}
                        className="flex items-center gap-2"
                    >
                        <X className="h-4 w-4" />
                        Hủy
                    </Button>
                    <Button
                        onClick={handleSave}
                        disabled={isLoading}
                        className="flex items-center gap-2"
                    >
                        <Save className="h-4 w-4" />
                        {isLoading ? 'Đang lưu...' : 'Lưu thay đổi'}
                    </Button>
                </div>
            </DialogContent>
        </Dialog>
    )
}
[V0_FILE]typescriptreact:file="components/booking-modal.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { X, ChevronLeft, ChevronRight } from "lucide-react"
import { ServiceSelection } from "./booking-steps/service-selection"
import { DateSelection } from "./booking-steps/date-selection"
import { TimeSelection } from "./booking-steps/time-selection"

export interface BookingData {
    service?: string
    servicePrice?: string
    doctor?: string
    date?: string
    time?: string
}

interface BookingModalProps {
    isOpen: boolean
    onClose: () => void
    onComplete: (data: BookingData) => void
}

export function BookingModal({ isOpen, onClose, onComplete }: BookingModalProps) {
    const [step, setStep] = useState(1)
    const [bookingData, setBookingData] = useState<BookingData>({})

if (!isOpen) return null

const handleServiceSelect = (service: string, price: string, doctor: string) => {
        setBookingData((prev) => ({ ...prev, service, servicePrice: price, doctor }))
        setStep(2)
    }

const handleDateSelect = (date: string) => {
        setBookingData((prev) => ({ ...prev, date }))
        setStep(3)
    }

const handleTimeSelect = (time: string) => {
        const finalData = { ...bookingData, time }
        setBookingData(finalData)
        onComplete(finalData)
        onClose()
    }

const handleBack = () => {
        if (step > 1) {
            setStep(step - 1)
        }
    }

const handleNext = () => {
        if (step === 1 && bookingData.service && bookingData.doctor) {
            setStep(2)
        } else if (step === 2 && bookingData.date) {
            setStep(3)
        }
    }

const handleClose = () => {
        setStep(1)
        setBookingData({})
        onClose()
    }

const handleChangeService = () => {
        setStep(1)
    }

return (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
            <div className="relative w-full max-w-2xl rounded-2xl bg-white shadow-2xl flex flex-col max-h-[90vh]">
                {/* Header */}
                <div className="flex items-center justify-between border-b border-border bg-gradient-to-r from-primary to-primary/80 px-8 py-6 text-white shrink-0">
                    <div className="flex items-center gap-4">
                        {step > 1 && (
                            <button onClick={handleBack} className="rounded-lg hover:bg-white/20 p-2 transition-colors">
                                <ChevronLeft className="h-6 w-6" />
                            </button>
                        )}
                        <div>
                            <h2 className="text-2xl font-bold">
                                {step === 1 && "Chọn dịch vụ"}
                                {step === 2 && "Chọn ngày khám"}
                                {step === 3 && "Chọn giờ khám"}
                            </h2>
                            {step > 1 && bookingData.service && (
                                <p className="text-sm text-white/80 mt-1">
                                    {bookingData.service}
                                    {bookingData.doctor && ` - ${bookingData.doctor}`}
                                </p>
                            )}
                        </div>
                    </div>
                    <button onClick={handleClose} className="rounded-lg hover:bg-white/20 p-2 transition-colors">
                        <X className="h-6 w-6" />
                    </button>
                </div>

{/* Footer with progress and navigation */}
                <div className="border-t border-border bg-muted/30 px-8 py-6 shrink-0">
                    <div className="flex items-center justify-between mb-4">
                        <div className="flex gap-2">
                            {[1, 2, 3].map((i) => (
                                <div
                                    key={i}
                                    className={`h-2 w-8 rounded-full transition-colors ${i <= step ? "bg-primary" : "bg-border"}`}
                                />
                            ))}
                        </div>
                        <span className="text-sm font-medium text-muted-foreground">Bước {step} / 3</span>
                    </div>

<div className="flex gap-3 justify-end">
                        <button
                            onClick={handleBack}
                            disabled={step === 1}
                            className="flex items-center gap-2 px-4 py-2 rounded-lg border border-border hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                        >
                            <ChevronLeft className="h-4 w-4" />
                            Quay lại
                        </button>
                        <button
                            onClick={step === 3 ? () => handleTimeSelect(bookingData.time || "") : handleNext}
                            disabled={
                                (step === 1 && (!bookingData.service || !bookingData.doctor)) || (step === 2 && !bookingData.date)
                            }
                            className="flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-white hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                        >
                            {step === 3 ? "Hoàn thành" : "Tiếp theo"}
                            {step !== 3 && <ChevronRight className="h-4 w-4" />}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    )
}
[V0_FILE]typescriptreact:file="components/booking-steps/date-selection.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"

interface DateSelectionProps {
    onSelect: (date: string) => void
    onChangeService?: () => void
}

export function DateSelection({ onSelect, onChangeService }: DateSelectionProps) {
    const [currentDate, setCurrentDate] = useState(new Date(2025, 9, 23)) // October 23, 2025
    const [selectedDate, setSelectedDate] = useState<number | null>(null)

const getDaysInMonth = (date: Date) => {
        return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate()
    }

const getFirstDayOfMonth = (date: Date) => {
        return new Date(date.getFullYear(), date.getMonth(), 1).getDay()
    }

const monthName = currentDate.toLocaleDateString("vi-VN", { month: "long", year: "numeric" }).toUpperCase()
    const daysInMonth = getDaysInMonth(currentDate)
    const firstDay = getFirstDayOfMonth(currentDate)
    const days = Array.from({ length: daysInMonth }, (_, i) => i + 1)
    const emptyDays = Array.from({ length: firstDay }, (_, i) => i)

const handlePrevMonth = () => {
        setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1))
    }

const handleNextMonth = () => {
        setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1))
    }

const handleSelectDate = (day: number) => {
        setSelectedDate(day)
        const dateStr = `${day}/${currentDate.getMonth() + 1}/${currentDate.getFullYear()}`
        onSelect(dateStr)
    }

return (
        <div className="space-y-8">
            {/* Calendar Header */}
            <div className="rounded-xl bg-gradient-to-r from-secondary to-secondary/80 p-6 text-white">
                <div className="flex items-center justify-between">
                    <button onClick={handlePrevMonth} className="rounded-lg hover:bg-white/20 p-2 transition-colors">
                        <ChevronLeft className="h-6 w-6" />
                    </button>
                    <h3 className="text-xl font-bold">{monthName}</h3>
                    <button onClick={handleNextMonth} className="rounded-lg hover:bg-white/20 p-2 transition-colors">
                        <ChevronRight className="h-6 w-6" />
                    </button>
                </div>
            </div>

{/* Calendar Grid */}
            <div className="rounded-xl border-2 border-border bg-white p-6">
                {/* Day headers */}
                <div className="mb-4 grid grid-cols-7 gap-2 text-center">
                    {["CN", "Hai", "Ba", "Tư", "Năm", "Sáu", "Bảy"].map((day) => (
                        <div key={day} className="py-2 font-semibold text-muted-foreground text-sm">
                            {day}
                        </div>
                    ))}
                </div>

{/* Calendar days */}
                <div className="grid grid-cols-7 gap-2">
                    {emptyDays.map((i) => (
                        <div key={`empty-${i}`} className="aspect-square" />
                    ))}
                    {days.map((day) => (
                        <button
                            key={day}
                            onClick={() => handleSelectDate(day)}
                            className={`aspect-square rounded-lg font-semibold transition-all ${selectedDate === day
                                    ? "bg-secondary text-white shadow-lg"
                                    : "border-2 border-border text-foreground hover:border-secondary hover:bg-secondary/10"
                                }`}
                        >
                            {day}
                        </button>
                    ))}
                </div>
            </div>

{onChangeService && (
                <div className="flex justify-center">
                    <button
                        onClick={onChangeService}
                        className="text-sm font-semibold text-primary hover:text-primary/80 transition-colors underline"
                    >
                        Đổi dịch vụ
                    </button>
                </div>
            )}
        </div>
    )
}
[V0_FILE]typescriptreact:file="components/booking-steps/service-selection.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Stethoscope, Award, Briefcase, GraduationCap, Check } from "lucide-react"

interface Service {
    id: string
    name: string
    price: string
}

interface Doctor {
    name: string
    specialty: string
    experience: string
    education: string
    achievements: string[]
}

const services: Service[] = [
    { id: "1", name: "Khám tư vấn da sần võ cam", price: "0 đ" },
    { id: "2", name: "Khám tư vấn giãn mở dưới da", price: "0 đ" },
    { id: "3", name: "Khám tư vấn rạn da", price: "0 đ" },
    { id: "4", name: "Khám tư vấn nội tổng quát", price: "0 đ" },
    { id: "5", name: "Khám tư vấn nhi khoa", price: "0 đ" },
    { id: "6", name: "Khám tư vấn sản phụ khoa", price: "0 đ" },
]

const doctorsBySpecialty: Record<string, Doctor[]> = {
    "Khám tư vấn nội tổng quát": [
        {
            name: "BS. Nguyễn Văn A",
            specialty: "Nội tổng quát",
            experience: "15 năm kinh nghiệm",
            education: "Đại học Y Hà Nội",
            achievements: ["Bác sĩ ưu tú", "Chứng chỉ hành nghề"],
        },
        {
            name: "BS. Lê Văn C",
            specialty: "Nội tổng quát",
            experience: "18 năm kinh nghiệm",
            education: "Đại học Y Hà Nội",
            achievements: ["Tiến sĩ Y học", "Giảng viên đại học"],
        },
        {
            name: "BS. Hoàng Văn E",
            specialty: "Nội tổng quát",
            experience: "20 năm kinh nghiệm",
            education: "Đại học Y Hà Nội",
            achievements: ["Phó giáo sư", "Bác sĩ ưu tú"],
        },
    ],
    "Khám tư vấn sản phụ khoa": [
        {
            name: "BS. Trần Thị B",
            specialty: "Sản phụ khoa",
            experience: "12 năm kinh nghiệm",
            education: "Đại học Y Dược TP.HCM",
            achievements: ["Thạc sĩ Y học", "Chuyên gia tư vấn"],
        },
        {
            name: "BS. Vũ Thị F",
            specialty: "Sản phụ khoa",
            experience: "14 năm kinh nghiệm",
            education: "Đại học Y Dược TP.HCM",
            achievements: ["Thạc sĩ Y học", "Chuyên gia tư vấn"],
        },
    ],
    "Khám tư vấn nhi khoa": [
        {
            name: "BS. Phạm Thị D",
            specialty: "Nhi khoa",
            experience: "10 năm kinh nghiệm",
            education: "Đại học Y Dược TP.HCM",
            achievements: ["Bác sĩ chuyên khoa I", "Chứng chỉ hành nghề"],
        },
    ],
}

interface ServiceSelectionProps {
    onSelect: (service: string, price: string, doctor: string) => void
}

export function ServiceSelection({ onSelect }: ServiceSelectionProps) {
    const [selected, setSelected] = useState<string | null>(null)
    const [selectedDoctor, setSelectedDoctor] = useState<string | null>(null)

const selectedService = services.find((s) => s.id === selected)
    const doctors = selectedService ? doctorsBySpecialty[selectedService.name] || [] : []

const handleSelectDoctor = (doctorName: string) => {
        setSelectedDoctor(doctorName)
        if (selectedService) {
            onSelect(selectedService.name, selectedService.price, doctorName)
        }
    }

return (
        <div className="space-y-6">
            <div className="space-y-2">
                <label className="block text-sm font-semibold text-foreground">Chọn chuyên khoa</label>
                <select
                    value={selected || ""}
                    onChange={(e) => {
                        setSelected(e.target.value)
                        setSelectedDoctor(null)
                    }}
                    className="w-full px-4 py-3 rounded-lg border-2 border-border bg-white text-foreground focus:border-primary focus:outline-none transition-colors"
                >
                    <option value="">-- Chọn chuyên khoa --</option>
                    {services.map((service) => (
                        <option key={service.id} value={service.id}>
                            {service.name}
                        </option>
                    ))}
                </select>
            </div>

{selected && doctors.length > 0 && (
                <div className="space-y-3">
                    <h3 className="text-sm font-semibold text-foreground">Chọn bác sĩ</h3>
                    <div className="max-h-96 overflow-y-auto space-y-3 pr-2">
                        {doctors.map((doctor, index) => (
                            <Card
                                key={index}
                                onClick={() => handleSelectDoctor(doctor.name)}
                                className={`border-2 cursor-pointer transition-all ${selectedDoctor === doctor.name
                                        ? "border-primary bg-primary/5 shadow-md"
                                        : "border-border hover:shadow-md hover:border-primary/50"
                                    }`}
                            >
                                <CardContent className="p-4">
                                    <div className="flex items-start gap-3">
                                        <div className="p-2 rounded-lg bg-primary/10">
                                            <Stethoscope className="h-5 w-5 text-primary" />
                                        </div>
                                        <div className="flex-1 min-w-0">
                                            <div className="flex items-start justify-between gap-2">
                                                <div>
                                                    <h4 className="font-semibold text-foreground">{doctor.name}</h4>
                                                    <p className="text-sm text-primary font-medium">{doctor.specialty}</p>
                                                </div>
                                                {selectedDoctor === doctor.name && (
                                                    <div className="p-1 rounded-full bg-primary">
                                                        <Check className="h-4 w-4 text-white" />
                                                    </div>
                                                )}
                                            </div>

<div className="mt-2 space-y-1 text-xs text-muted-foreground">
                                                <div className="flex items-center gap-2">
                                                    <Briefcase className="h-3.5 w-3.5 shrink-0" />
                                                    <span>{doctor.experience}</span>
                                                </div>
                                                <div className="flex items-center gap-2">
                                                    <GraduationCap className="h-3.5 w-3.5 shrink-0" />
                                                    <span>{doctor.education}</span>
                                                </div>
                                                <div className="flex items-start gap-2">
                                                    <Award className="h-3.5 w-3.5 shrink-0 mt-0.5" />
                                                    <div className="flex flex-wrap gap-1">
                                                        {doctor.achievements.map((achievement, i) => (
                                                            <span key={i} className="rounded-full bg-primary/10 px-2 py-0.5 text-xs text-primary">
                                                                {achievement}
                                                            </span>
                                                        ))}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </CardContent>
                            </Card>
                        ))}
                    </div>
                </div>
            )}

{selected && doctors.length === 0 && (
                <div className="p-4 rounded-lg bg-muted/50 text-center text-sm text-muted-foreground">
                    Không có bác sĩ nào cho chuyên khoa này
                </div>
            )}
        </div>
    )
}
[V0_FILE]typescriptreact:file="components/booking-steps/time-selection.tsx" isMerged="true"
"use client"

import { useState } from "react"

interface TimeSelectionProps {
    onSelect: (time: string) => void
    onChangeService?: () => void
}

const timeSlots = {
    morning: ["09:00 - 10:00", "10:00 - 11:00", "11:00 - 12:00"],
    afternoon: [
        "12:00 - 13:00",
        "13:00 - 14:00",
        "14:00 - 15:00",
        "15:00 - 16:00",
        "16:00 - 17:00",
        "17:00 - 18:00",
        "18:00 - 19:00",
    ],
}

export function TimeSelection({ onSelect, onChangeService }: TimeSelectionProps) {
    const [selectedTime, setSelectedTime] = useState<string | null>(null)

const handleSelectTime = (time: string) => {
        setSelectedTime(time)
        onSelect(time)
    }

return (
        <div className="space-y-8">
            {/* Morning slots */}
            <div>
                <h3 className="mb-4 text-xl font-bold text-foreground">Buổi sáng</h3>
                <div className="grid gap-3 sm:grid-cols-3">
                    {timeSlots.morning.map((time) => (
                        <button
                            key={time}
                            onClick={() => handleSelectTime(time)}
                            className={`rounded-xl border-2 px-4 py-3 font-semibold transition-all ${selectedTime === time
                                    ? "border-secondary bg-secondary text-white shadow-lg"
                                    : "border-secondary text-secondary hover:bg-secondary/10"
                                }`}
                        >
                            {time}
                        </button>
                    ))}
                </div>
            </div>

{/* Afternoon slots */}
            <div>
                <h3 className="mb-4 text-xl font-bold text-foreground">Buổi chiều</h3>
                <div className="grid gap-3 sm:grid-cols-4">
                    {timeSlots.afternoon.map((time) => (
                        <button
                            key={time}
                            onClick={() => handleSelectTime(time)}
                            className={`rounded-xl border-2 px-4 py-3 font-semibold transition-all ${selectedTime === time
                                    ? "border-secondary bg-secondary text-white shadow-lg"
                                    : "border-secondary text-secondary hover:bg-secondary/10"
                                }`}
                        >
                            {time}
                        </button>
                    ))}
                </div>
            </div>

import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Home, ChevronRight } from "lucide-react"

interface BreadcrumbItem {
    label: string
    href?: string
    isActive?: boolean
}

interface BreadcrumbProps {
    items: BreadcrumbItem[]
    showHome?: boolean
}

export function Breadcrumb({ items, showHome = true }: BreadcrumbProps) {
    const router = useRouter()

return (
        <nav className="flex items-center gap-2 text-sm">
            {showHome && (
                <>
                    <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => router.push('/')}
                        className="flex items-center gap-2 text-muted-foreground hover:text-primary p-0 h-auto"
                    >
                        <Home className="h-4 w-4" />
                        Trang chủ
                    </Button>
                    <ChevronRight className="h-4 w-4 text-muted-foreground" />
                </>
            )}

{items.map((item, index) => (
                <div key={index} className="flex items-center gap-2">
                    {item.href ? (
                        <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => router.push(item.href!)}
                            className={`p-0 h-auto ${item.isActive
                                ? 'text-primary font-medium'
                                : 'text-muted-foreground hover:text-primary'
                                }`}
                        >
                            {item.label}
                        </Button>
                    ) : (
                        <span className={`${item.isActive
                            ? 'text-primary font-medium'
                            : 'text-muted-foreground'
                            }`}>
                            {item.label}
                        </span>
                    )}

{index < items.length - 1 && (
                        <ChevronRight className="h-4 w-4 text-muted-foreground" />
                    )}
                </div>
            ))}
        </nav>
    )
}
[V0_FILE]typescriptreact:file="components/dashboard-layout.tsx" isMerged="true"
"use client"

import type React from "react"

import { useEffect, useState } from "react"
import { useRouter, usePathname } from "next/navigation"
import { getCurrentUser, logout, getRoleName, type User } from "@/lib/auth"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Heart, LogOut, UserIcon, Home } from "lucide-react"
import { cn } from "@/lib/utils"
import Link from "next/link"

interface DashboardLayoutProps {
  children: React.ReactNode
  navigation: Array<{
    name: string
    href: string
    icon: React.ComponentType<{ className?: string }>
  }>
}

export function DashboardLayout({ children, navigation }: DashboardLayoutProps) {
  const router = useRouter()
  const pathname = usePathname()
  const [user, setUser] = useState<User | null>(null)

useEffect(() => {
    const currentUser = getCurrentUser()
    if (!currentUser) {
      router.push("/login")
    } else {
      setUser(currentUser)
    }
  }, [router])

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

if (!user) {
    return null
  }

const initials = user.name
    .split(" ")
    .map((n) => n[0])
    .join("")
    .toUpperCase()
    .slice(0, 2)

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="sticky top-0 z-50 w-full border-b bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/60">
        <div className="flex h-16 items-center gap-4 px-6">
          <Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
            <div className="h-8 w-8 rounded-lg bg-primary flex items-center justify-center">
              <Heart className="h-5 w-5 text-primary-foreground" fill="currentColor" />
            </div>
            <div className="hidden sm:block">
              <h1 className="text-lg font-bold">Diamond Health Clinic</h1>
              <p className="text-xs text-muted-foreground">{getRoleName(user.role)}</p>
            </div>
          </Link>

<Link href="/">
            <Button variant="ghost" size="sm" className="gap-2">
              <Home className="h-4 w-4" />
              <span className="hidden sm:inline">Trang chủ</span>
            </Button>
          </Link>

<DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" className="relative h-10 w-10 rounded-full">
                <Avatar className="h-10 w-10">
                  <AvatarFallback className="bg-primary text-primary-foreground">{initials}</AvatarFallback>
                </Avatar>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent className="w-56" align="end">
              <DropdownMenuLabel>
                <div className="flex flex-col space-y-1">
                  <p className="text-sm font-medium">{user.name}</p>
                  <p className="text-xs text-muted-foreground">{user.email}</p>
                  {user.department && <p className="text-xs text-muted-foreground">{user.department}</p>}
                </div>
              </DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuItem>
                <UserIcon className="mr-2 h-4 w-4" />
                Thông tin cá nhân
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={handleLogout} className="text-destructive">
                <LogOut className="mr-2 h-4 w-4" />
                Đăng xuất
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </header>

<div className="flex">
        {/* Sidebar */}
        <aside className="hidden md:flex w-64 flex-col border-r bg-card">
          <nav className="flex-1 space-y-1 p-4">
            {navigation.map((item) => {
              const Icon = item.icon
              const isActive = pathname === item.href
              return (
                <Button
                  key={item.href}
                  variant={isActive ? "secondary" : "ghost"}
                  className={cn(
                    "w-full justify-start",
                    isActive && "bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground",
                  )}
                  onClick={() => router.push(item.href)}
                >
                  <Icon className="mr-3 h-5 w-5" />
                  {item.name}
                </Button>
              )
            })}
          </nav>
        </aside>

{/* Main content */}
        <main className="flex-1 overflow-y-auto">
          <div className="container mx-auto p-6">{children}</div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true"
import Link from "next/link"
import { Facebook, Instagram, Youtube, Mail, MapPin, Phone } from "lucide-react"

export function Footer() {
  return (
    <footer className="border-t bg-muted/30">
      <div className="container mx-auto px-4 py-12">
        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
          {/* About */}
          <div>
            <div className="mb-4 flex items-center gap-2">
              <div className="flex  items-center justify-center rounded-lg">
                <img
                  src="/images/logo.png"
                  alt="Logo"
                  className="h-25 w-25 object-contain"
                />
              </div>
              <div className="flex flex-col">
                <span className="text-lg font-bold leading-none text-primary">Diamond Health</span>
                <span className="text-xs text-muted-foreground">Phòng khám đa khoa</span>
              </div>
            </div>
            <p className="text-sm leading-relaxed text-muted-foreground">
              Chăm sóc sức khỏe toàn diện với đội ngũ bác sĩ chuyên môn cao và trang thiết bị hiện đại.
            </p>
          </div>

{/* Quick Links */}
          <div>
            <h3 className="mb-4 text-sm font-bold">Liên kết nhanh</h3>
            <ul className="space-y-2 text-sm">
              <li>
                <Link href="#services" className="text-muted-foreground transition-colors hover:text-primary">
                  Dịch vụ khám chữa bệnh
                </Link>
              </li>
              <li>
                <Link href="#doctors" className="text-muted-foreground transition-colors hover:text-primary">
                  Đội ngũ bác sĩ
                </Link>
              </li>
              <li>
                <Link href="#about" className="text-muted-foreground transition-colors hover:text-primary">
                  Về chúng tôi
                </Link>
              </li>
              <li>
                <Link href="#contact" className="text-muted-foreground transition-colors hover:text-primary">
                  Liên hệ
                </Link>
              </li>
            </ul>
          </div>

{/* Services */}
          <div>
            <h3 className="mb-4 text-sm font-bold">Chuyên khoa</h3>
            <ul className="space-y-2 text-sm">
              <li className="text-muted-foreground">Nội tổng quát</li>
              <li className="text-muted-foreground">Nhi khoa</li>
              <li className="text-muted-foreground">Sản - Phụ khoa</li>
              <li className="text-muted-foreground">Khám sức khỏe tổng quát</li>
              <li className="text-muted-foreground">Xét nghiệm</li>
            </ul>
          </div>

{/* Contact */}
          <div>
            <h3 className="mb-4 text-sm font-bold">Liên hệ</h3>
            <ul className="space-y-3 text-sm">
              <li className="flex items-start gap-2">
                <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
                <span className="text-muted-foreground">123 Đường ABC, Quận 1, TP.HCM</span>
              </li>
              <li className="flex items-center gap-2">
                <Phone className="h-4 w-4 shrink-0 text-primary" />
                <span className="text-muted-foreground">1900-xxxx</span>
              </li>
              <li className="flex items-center gap-2">
                <Mail className="h-4 w-4 shrink-0 text-primary" />
                <span className="text-muted-foreground">info@diamondhealth.vn</span>
              </li>
            </ul>

<div className="mt-8 border-t pt-8 text-center text-sm text-muted-foreground">
          <p>© 2025 Diamond Health. Tất cả quyền được bảo lưu.</p>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="components/header.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Menu, X, Phone, Clock, User as UserIcon, LogOut } from "lucide-react"
import { useState, useEffect } from "react"
import { usePathname, useRouter } from "next/navigation"
import { getCurrentUser, logout, getRoleName, User } from "@/lib/auth"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"

export function Header() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const [isScrolled, setIsScrolled] = useState(false)
  const [currentUser, setCurrentUser] = useState<User | null>(null)
  const [isClient, setIsClient] = useState(false)
  const pathname = usePathname()
  const router = useRouter()

useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 10)
    }

window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

// Handle client-side mounting and auth state
  useEffect(() => {
    setIsClient(true)
    setCurrentUser(getCurrentUser())

const handleStorageChange = () => {
      setCurrentUser(getCurrentUser())
    }

window.addEventListener('storage', handleStorageChange)
    return () => window.removeEventListener('storage', handleStorageChange)
  }, [])

const handleLogout = () => {
    logout()
    setCurrentUser(null)
    router.push('/')
  }

const isActive = (href: string) => {
    if (href === "/") return pathname === "/"
    return pathname.startsWith(href)
  }

const getNavItems = () => {
    return [
      { href: "/", label: "Trang chủ" },
      { href: "/chuyen-khoa", label: "Chuyên khoa" },
      { href: "/bac-si", label: "Đội ngũ bác sĩ" },
      { href: "/danh-gia", label: "Đánh giá" },
      { href: "/lien-he", label: "Liên hệ" },
    ]
  }

const LoginButton = ({ className = "", isMobile = false }: { className?: string, isMobile?: boolean }) => (
    <Button
      onClick={() => {
        router.push('/login')
        if (isMobile) setMobileMenuOpen(false)
      }}
      className={className}
    >
      Đăng nhập
    </Button>
  )

return (
    <header
      className={`sticky top-0 z-50 w-full border-b transition-all duration-300 ${isScrolled
        ? "border-border/60 bg-background shadow-md backdrop-blur-md supports-[backdrop-filter]:bg-background/80"
        : "border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
        }`}
    >
      {/* Top bar */}
      <div className={`bg-primary text-primary-foreground transition-all duration-300 ${isScrolled ? "py-1" : "py-2"}`}>
        <div className="container mx-auto px-4">
          <div className="flex flex-wrap items-center justify-between gap-4 text-sm">
            <div className="flex items-center gap-6">
              <div className="flex items-center gap-2">
                <Phone className="h-4 w-4" />
                <span className="font-medium">Hotline: 1900-xxxx</span>
              </div>
              <div className="hidden items-center gap-2 sm:flex">
                <Clock className="h-4 w-4" />
                <span>Thứ 2 - Chủ nhật: 7:00 - 20:00</span>
              </div>
            </div>
            {!isClient ? null : currentUser ? (
              <div className="flex items-center gap-2">
                <span className="text-sm">
                  Xin chào, <span className="font-medium">{currentUser.name}</span>
                </span>
                <span className="text-xs opacity-80">
                  ({getRoleName(currentUser.role)})
                </span>
              </div>
            ) : null}
          </div>
        </div>
      </div>

{/* Main navigation */}
      <div className="container mx-auto px-4">
        <div
          className={`flex items-center justify-between transition-all duration-300 ${isScrolled ? "h-14" : "h-16"}`}
        >
          <button
            onClick={() => router.push('/')}
            className="flex items-center gap-3 transition-transform hover:scale-105"
          >
            <div className="flex items-center justify-center rounded-lg transition-all hover:bg-primary/90">
              <img src="/images/logo.png" alt="Logo" className="h-15 w-15 object-contain" />
            </div>
            <div className="flex flex-col">
              <span className="font-serif text-xl font-bold leading-none text-foreground">Diamond Health</span>
              <span className="text-xs text-muted-foreground">Phòng khám đa khoa</span>
            </div>
          </button>

{/* Desktop navigation */}
          <nav className="hidden items-center gap-6 md:flex">
            {getNavItems().map((item) => (
              <button
                key={item.href}
                onClick={() => router.push(item.href)}
                className={`relative text-sm font-medium transition-all duration-200 hover:text-primary ${isActive(item.href) ? "text-primary" : ""
                  }`}
              >
                {item.label}
                {isActive(item.href) && <span className="absolute -bottom-[21px] left-0 h-0.5 w-full bg-primary" />}
              </button>
            ))}
          </nav>

<div className="flex items-center gap-4">
            {!isClient ? (
              <LoginButton className="hidden bg-secondary text-secondary-foreground transition-all hover:bg-secondary/90 hover:scale-105 md:inline-flex" />
            ) : currentUser ? (
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" className="relative h-8 w-8 rounded-full">
                    <Avatar className="h-8 w-8">
                      <AvatarFallback className="bg-primary text-primary-foreground">
                        {currentUser.name.charAt(0).toUpperCase()}
                      </AvatarFallback>
                    </Avatar>
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent className="w-56" align="end" forceMount>
                  <DropdownMenuLabel className="font-normal">
                    <div className="flex flex-col space-y-1">
                      <p className="text-sm font-medium leading-none">{currentUser.name}</p>
                      <p className="text-xs leading-none text-muted-foreground">
                        {getRoleName(currentUser.role)}
                      </p>
                    </div>
                  </DropdownMenuLabel>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem onClick={() => router.push('/profile')}>
                    <UserIcon className="mr-2 h-4 w-4" />
                    <span>Hồ sơ</span>
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem onClick={handleLogout}>
                    <LogOut className="mr-2 h-4 w-4" />
                    <span>Đăng xuất</span>
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            ) : (
              <LoginButton className="hidden bg-secondary text-secondary-foreground transition-all hover:bg-secondary/90 hover:scale-105 md:inline-flex" />
            )}

{/* Mobile menu button */}
            <button
              className="transition-all hover:scale-110 md:hidden"
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            >
              {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
            </button>
          </div>
        </div>

{/* Mobile menu */}
        {mobileMenuOpen && (
          <div className="animate-in slide-in-from-top-2 border-t py-4 md:hidden">
            <nav className="flex flex-col gap-4">
              {getNavItems().map((item) => (
                <button
                  key={item.href}
                  onClick={() => {
                    router.push(item.href)
                    setMobileMenuOpen(false)
                  }}
                  className={`text-sm font-medium transition-all duration-200 hover:text-primary hover:translate-x-1 ${isActive(item.href) ? "text-primary font-semibold" : ""
                    }`}
                >
                  {item.label}
                </button>
              ))}
              {!isClient ? (
                <LoginButton
                  isMobile={true}
                  className="bg-secondary text-secondary-foreground transition-all hover:bg-secondary/90 hover:scale-105 w-full"
                />
              ) : currentUser ? (
                <div className="space-y-2">
                  <div className="flex items-center gap-2 p-2 rounded-lg bg-muted">
                    <Avatar className="h-8 w-8">
                      <AvatarFallback className="bg-primary text-primary-foreground">
                        {currentUser.name.charAt(0).toUpperCase()}
                      </AvatarFallback>
                    </Avatar>
                    <div>
                      <p className="text-sm font-medium">{currentUser.name}</p>
                      <p className="text-xs text-muted-foreground">{getRoleName(currentUser.role)}</p>
                    </div>
                  </div>
                  <Button
                    variant="outline"
                    onClick={handleLogout}
                    className="w-full"
                  >
                    <LogOut className="mr-2 h-4 w-4" />
                    Đăng xuất
                  </Button>
                </div>
              ) : (
                <LoginButton
                  isMobile={true}
                  className="bg-secondary text-secondary-foreground transition-all hover:bg-secondary/90 hover:scale-105 w-full"
                />
              )}
            </nav>
          </div>
        )}
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/medical-info-edit-modal.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import {
    Heart,
    FileText,
    Save,
    X
} from "lucide-react"
import { toast } from "sonner"
import { apiService } from "@/api/index"

interface MedicalInfo {
    allergies: string
    medicalHistory: string
}

interface MedicalInfoEditModalProps {
    isOpen: boolean
    onClose: () => void
    medicalInfo: MedicalInfo
    onSave: (updatedInfo: MedicalInfo) => void
}

export function MedicalInfoEditModal({ isOpen, onClose, medicalInfo, onSave }: MedicalInfoEditModalProps) {
    const [formData, setFormData] = useState<MedicalInfo>(medicalInfo)
    const [isLoading, setIsLoading] = useState(false)

const handleInputChange = (field: keyof MedicalInfo, value: string) => {
        setFormData(prev => ({
            ...prev,
            [field]: value
        }))
    }

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

// Call API to update medical info
            const response = await apiService.updateMedicalInfo(formData)

onSave({
                allergies: response.user.allergies || '',
                medicalHistory: response.user.medicalHistory || ''
            })
            toast.success(response.message)
            onClose()
        } catch (error) {
            console.error('Error updating medical info:', error)
            toast.error("Có lỗi xảy ra khi cập nhật thông tin y tế")
        } finally {
            setIsLoading(false)
        }
    }

const handleCancel = () => {
        setFormData(medicalInfo) // Reset to original data
        onClose()
    }

return (
        <Dialog open={isOpen} onOpenChange={onClose}>
            <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
                <DialogHeader>
                    <DialogTitle className="flex items-center gap-2">
                        <Heart className="h-5 w-5" />
                        Cập nhật thông tin y tế
                    </DialogTitle>
                    <DialogDescription>
                        Cập nhật thông tin y tế và sức khỏe của bạn
                    </DialogDescription>
                </DialogHeader>

<div className="space-y-6">
                    <div className="space-y-4">
                        <h3 className="text-lg font-semibold flex items-center gap-2">
                            <Heart className="h-4 w-4" />
                            Thông tin y tế
                        </h3>

<div className="space-y-2">
                            <Label htmlFor="allergies">Dị ứng</Label>
                            <Textarea
                                id="allergies"
                                value={formData.allergies}
                                onChange={(e) => handleInputChange('allergies', e.target.value)}
                                placeholder="Mô tả các loại dị ứng (nếu có). Ví dụ: Dị ứng với penicillin, dị ứng với hải sản..."
                                rows={4}
                                className="resize-none"
                            />
                            <p className="text-sm text-muted-foreground">
                                Ghi rõ các loại thuốc, thực phẩm hoặc chất gây dị ứng
                            </p>
                        </div>

<div className="space-y-2">
                            <Label htmlFor="medicalHistory">Bệnh lý nền</Label>
                            <Textarea
                                id="medicalHistory"
                                value={formData.medicalHistory}
                                onChange={(e) => handleInputChange('medicalHistory', e.target.value)}
                                placeholder="Mô tả các bệnh lý nền, bệnh mãn tính (nếu có). Ví dụ: Tiền sử tăng huyết áp, đái tháo đường..."
                                rows={4}
                                className="resize-none"
                            />
                            <p className="text-sm text-muted-foreground">
                                Bao gồm các bệnh mãn tính, tiền sử phẫu thuật, bệnh di truyền
                            </p>
                        </div>
                    </div>

{/* Important Notice */}
                    <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                        <div className="flex items-start gap-3">
                            <FileText className="h-5 w-5 text-blue-600 mt-0.5" />
                            <div>
                                <h4 className="font-medium text-blue-900 mb-1">Lưu ý quan trọng</h4>
                                <p className="text-sm text-blue-800">
                                    Thông tin y tế này sẽ giúp bác sĩ đưa ra chẩn đoán và điều trị chính xác hơn.
                                    Vui lòng cập nhật thông tin một cách chính xác và đầy đủ.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

import { useState } from "react"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
    User,
    Mail,
    Phone,
    Calendar,
    Heart,
    FileText,
    Save,
    X
} from "lucide-react"
import { toast } from "sonner"

interface PatientProfile {
    userId: number
    phone?: string
    fullName?: string
    email?: string
    role?: string
    gender?: string
    dob?: string
    address?: string
    allergies?: string
    medicalHistory?: string
}

interface ProfileEditModalProps {
    isOpen: boolean
    onClose: () => void
    profile: PatientProfile
    onSave: (updatedProfile: PatientProfile) => void
}

export function ProfileEditModal({ isOpen, onClose, profile, onSave }: ProfileEditModalProps) {
    const [formData, setFormData] = useState<PatientProfile>(profile)
    const [isLoading, setIsLoading] = useState(false)

const handleInputChange = (field: keyof PatientProfile, value: string) => {
        setFormData(prev => ({
            ...prev,
            [field]: value
        }))
    }

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

// Validate required fields
            if (!formData.fullName?.trim()) {
                toast.error("Vui lòng nhập họ và tên")
                return
            }

if (!formData.phone?.trim()) {
                toast.error("Vui lòng nhập số điện thoại")
                return
            }

// Here you would typically call an API to update the profile
            // For now, we'll just simulate the update
            await new Promise(resolve => setTimeout(resolve, 1000))

onSave(formData)
            toast.success("Cập nhật thông tin thành công!")
            onClose()
        } catch (error) {
            console.error('Error updating profile:', error)
            toast.error("Có lỗi xảy ra khi cập nhật thông tin")
        } finally {
            setIsLoading(false)
        }
    }

const handleCancel = () => {
        setFormData(profile) // Reset to original data
        onClose()
    }

return (
        <Dialog open={isOpen} onOpenChange={onClose}>
            <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
                <DialogHeader>
                    <DialogTitle className="flex items-center gap-2">
                        <User className="h-5 w-5" />
                        Chỉnh sửa thông tin cá nhân
                    </DialogTitle>
                    <DialogDescription>
                        Cập nhật thông tin cá nhân và y tế của bạn
                    </DialogDescription>
                </DialogHeader>

<div className="space-y-6">
                    {/* Basic Information */}
                    <div className="space-y-4">
                        <h3 className="text-lg font-semibold flex items-center gap-2">
                            <User className="h-4 w-4" />
                            Thông tin cơ bản
                        </h3>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div className="space-y-2">
                                <Label htmlFor="fullName">Họ và tên *</Label>
                                <div className="relative">
                                    <User className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                                    <Input
                                        id="fullName"
                                        value={formData.fullName || ''}
                                        onChange={(e) => handleInputChange('fullName', e.target.value)}
                                        className="pl-10"
                                        placeholder="Nhập họ và tên"
                                    />
                                </div>
                            </div>

<div className="space-y-2">
                                <Label htmlFor="phone">Số điện thoại *</Label>
                                <div className="relative">
                                    <Phone className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                                    <Input
                                        id="phone"
                                        value={formData.phone || ''}
                                        onChange={(e) => handleInputChange('phone', e.target.value)}
                                        className="pl-10"
                                        placeholder="Nhập số điện thoại"
                                    />
                                </div>
                            </div>

<div className="space-y-2">
                                <Label htmlFor="email">Email</Label>
                                <div className="relative">
                                    <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                                    <Input
                                        id="email"
                                        type="email"
                                        value={formData.email || ''}
                                        onChange={(e) => handleInputChange('email', e.target.value)}
                                        className="pl-10"
                                        placeholder="Nhập email"
                                    />
                                </div>
                            </div>

<div className="space-y-2">
                                <Label htmlFor="dob">Ngày sinh</Label>
                                <div className="relative">
                                    <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                                    <Input
                                        id="dob"
                                        type="date"
                                        value={formData.dob || ''}
                                        onChange={(e) => handleInputChange('dob', e.target.value)}
                                        className="pl-10"
                                    />
                                </div>
                            </div>

<div className="space-y-2">
                                <Label>Giới tính</Label>
                                <Select value={formData.gender || ''} onValueChange={(value) => handleInputChange('gender', value)}>
                                    <SelectTrigger>
                                        <SelectValue placeholder="Chọn giới tính" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="Nam">Nam</SelectItem>
                                        <SelectItem value="Nữ">Nữ</SelectItem>
                                        <SelectItem value="Khác">Khác</SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>

</div>

<div className="space-y-2">
                            <Label htmlFor="address">Địa chỉ</Label>
                            <Textarea
                                id="address"
                                value={formData.address || ''}
                                onChange={(e) => handleInputChange('address', e.target.value)}
                                placeholder="Nhập địa chỉ"
                                rows={3}
                            />
                        </div>
                    </div>

{/* Medical Information */}
                    <div className="space-y-4">
                        <h3 className="text-lg font-semibold flex items-center gap-2">
                            <Heart className="h-4 w-4" />
                            Thông tin y tế
                        </h3>

<div className="space-y-2">
                            <Label htmlFor="allergies">Dị ứng</Label>
                            <Textarea
                                id="allergies"
                                value={formData.allergies || ''}
                                onChange={(e) => handleInputChange('allergies', e.target.value)}
                                placeholder="Mô tả các loại dị ứng (nếu có)"
                                rows={3}
                            />
                        </div>

<div className="space-y-2">
                            <Label htmlFor="medicalHistory">Bệnh lý nền</Label>
                            <Textarea
                                id="medicalHistory"
                                value={formData.medicalHistory || ''}
                                onChange={(e) => handleInputChange('medicalHistory', e.target.value)}
                                placeholder="Mô tả các bệnh lý nền, bệnh mãn tính (nếu có)"
                                rows={3}
                            />
                        </div>
                    </div>
                </div>

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/ui/accordion.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as AccordionPrimitive from '@radix-ui/react-accordion'
import { ChevronDownIcon } from 'lucide-react'

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

function Accordion({
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
}

function AccordionItem({
  className,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
  return (
    <AccordionPrimitive.Item
      data-slot="accordion-item"
      className={cn('border-b last:border-b-0', className)}
      {...props}
    />
  )
}

function AccordionTrigger({
  className,
  children,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
  return (
    <AccordionPrimitive.Header className="flex">
      <AccordionPrimitive.Trigger
        data-slot="accordion-trigger"
        className={cn(
          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
          className,
        )}
        {...props}
      >
        {children}
        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
      </AccordionPrimitive.Trigger>
    </AccordionPrimitive.Header>
  )
}

function AccordionContent({
  className,
  children,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
  return (
    <AccordionPrimitive.Content
      data-slot="accordion-content"
      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
      {...props}
    >
      <div className={cn('pt-0 pb-4', className)}>{children}</div>
    </AccordionPrimitive.Content>
  )
}

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
[V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'

import { cn } from '@/lib/utils'
import { buttonVariants } from '@/components/ui/button'

function AlertDialog({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
}

function AlertDialogTrigger({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
  return (
    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
  )
}

function AlertDialogPortal({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
  return (
    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
  )
}

function AlertDialogOverlay({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
  return (
    <AlertDialogPrimitive.Overlay
      data-slot="alert-dialog-overlay"
      className={cn(
        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
        className,
      )}
      {...props}
    />
  )
}

function AlertDialogContent({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
  return (
    <AlertDialogPortal>
      <AlertDialogOverlay />
      <AlertDialogPrimitive.Content
        data-slot="alert-dialog-content"
        className={cn(
          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
          className,
        )}
        {...props}
      />
    </AlertDialogPortal>
  )
}

function AlertDialogHeader({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="alert-dialog-header"
      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
      {...props}
    />
  )
}

function AlertDialogFooter({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="alert-dialog-footer"
      className={cn(
        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
        className,
      )}
      {...props}
    />
  )
}

function AlertDialogTitle({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
  return (
    <AlertDialogPrimitive.Title
      data-slot="alert-dialog-title"
      className={cn('text-lg font-semibold', className)}
      {...props}
    />
  )
}

function AlertDialogDescription({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
  return (
    <AlertDialogPrimitive.Description
      data-slot="alert-dialog-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

function AlertDialogAction({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
  return (
    <AlertDialogPrimitive.Action
      className={cn(buttonVariants(), className)}
      {...props}
    />
  )
}

function AlertDialogCancel({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
  return (
    <AlertDialogPrimitive.Cancel
      className={cn(buttonVariants({ variant: 'outline' }), className)}
      {...props}
    />
  )
}

export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
}
[V0_FILE]typescriptreact:file="components/ui/alert.tsx" isMerged="true"
import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'

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

const alertVariants = cva(
  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
  {
    variants: {
      variant: {
        default: 'bg-card text-card-foreground',
        destructive:
          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

function Alert({
  className,
  variant,
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
  return (
    <div
      data-slot="alert"
      role="alert"
      className={cn(alertVariants({ variant }), className)}
      {...props}
    />
  )
}

function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="alert-title"
      className={cn(
        'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight',
        className,
      )}
      {...props}
    />
  )
}

function AlertDescription({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="alert-description"
      className={cn(
        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
        className,
      )}
      {...props}
    />
  )
}

export { Alert, AlertTitle, AlertDescription }
[V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx" isMerged="true"
'use client'

import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'

function AspectRatio({
  ...props
}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
}

export { AspectRatio }
[V0_FILE]typescriptreact:file="components/ui/avatar.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as AvatarPrimitive from '@radix-ui/react-avatar'

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

function Avatar({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
  return (
    <AvatarPrimitive.Root
      data-slot="avatar"
      className={cn(
        'relative flex size-8 shrink-0 overflow-hidden rounded-full',
        className,
      )}
      {...props}
    />
  )
}

function AvatarImage({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
  return (
    <AvatarPrimitive.Image
      data-slot="avatar-image"
      className={cn('aspect-square size-full', className)}
      {...props}
    />
  )
}

function AvatarFallback({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
  return (
    <AvatarPrimitive.Fallback
      data-slot="avatar-fallback"
      className={cn(
        'bg-muted flex size-full items-center justify-center rounded-full',
        className,
      )}
      {...props}
    />
  )
}

export { Avatar, AvatarImage, AvatarFallback }
[V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

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

const badgeVariants = cva(
  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none 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 transition-[color,box-shadow] overflow-hidden',
  {
    variants: {
      variant: {
        default:
          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
        secondary:
          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
        destructive:
          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

function Badge({
  className,
  variant,
  asChild = false,
  ...props
}: React.ComponentProps<'span'> &
  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : 'span'

return (
    <Comp
      data-slot="badge"
      className={cn(badgeVariants({ variant }), className)}
      {...props}
    />
  )
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx" isMerged="true"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { ChevronRight, MoreHorizontal } from 'lucide-react'

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

function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
}

function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
  return (
    <ol
      data-slot="breadcrumb-list"
      className={cn(
        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
        className,
      )}
      {...props}
    />
  )
}

function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
  return (
    <li
      data-slot="breadcrumb-item"
      className={cn('inline-flex items-center gap-1.5', className)}
      {...props}
    />
  )
}

function BreadcrumbLink({
  asChild,
  className,
  ...props
}: React.ComponentProps<'a'> & {
  asChild?: boolean
}) {
  const Comp = asChild ? Slot : 'a'

return (
    <Comp
      data-slot="breadcrumb-link"
      className={cn('hover:text-foreground transition-colors', className)}
      {...props}
    />
  )
}

function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
  return (
    <span
      data-slot="breadcrumb-page"
      role="link"
      aria-disabled="true"
      aria-current="page"
      className={cn('text-foreground font-normal', className)}
      {...props}
    />
  )
}

function BreadcrumbSeparator({
  children,
  className,
  ...props
}: React.ComponentProps<'li'>) {
  return (
    <li
      data-slot="breadcrumb-separator"
      role="presentation"
      aria-hidden="true"
      className={cn('[&>svg]:size-3.5', className)}
      {...props}
    >
      {children ?? <ChevronRight />}
    </li>
  )
}

function BreadcrumbEllipsis({
  className,
  ...props
}: React.ComponentProps<'span'>) {
  return (
    <span
      data-slot="breadcrumb-ellipsis"
      role="presentation"
      aria-hidden="true"
      className={cn('flex size-9 items-center justify-center', className)}
      {...props}
    >
      <MoreHorizontal className="size-4" />
      <span className="sr-only">More</span>
    </span>
  )
}

export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
}
[V0_FILE]typescriptreact:file="components/ui/button-group.tsx" isMerged="true"
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'
import { Separator } from '@/components/ui/separator'

const buttonGroupVariants = cva(
  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
  {
    variants: {
      orientation: {
        horizontal:
          '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
        vertical:
          'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
      },
    },
    defaultVariants: {
      orientation: 'horizontal',
    },
  },
)

function ButtonGroup({
  className,
  orientation,
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {
  return (
    <div
      role="group"
      data-slot="button-group"
      data-orientation={orientation}
      className={cn(buttonGroupVariants({ orientation }), className)}
      {...props}
    />
  )
}

function ButtonGroupText({
  className,
  asChild = false,
  ...props
}: React.ComponentProps<'div'> & {
  asChild?: boolean
}) {
  const Comp = asChild ? Slot : 'div'

return (
    <Comp
      className={cn(
        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function ButtonGroupSeparator({
  className,
  orientation = 'vertical',
  ...props
}: React.ComponentProps<typeof Separator>) {
  return (
    <Separator
      data-slot="button-group-separator"
      orientation={orientation}
      className={cn(
        'bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto',
        className,
      )}
      {...props}
    />
  )
}

export {
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
  buttonGroupVariants,
}
[V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

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

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none 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",
  {
    variants: {
      variant: {
        default:
          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
        destructive:
          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
        secondary:
          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
        ghost:
          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
        icon: 'size-9',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function Button({
  className,
  variant,
  size,
  asChild = false,
  ...props
}: React.ComponentProps<'button'> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot : 'button'

return (
    <Comp
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/calendar.tsx" isMerged="true"
'use client'

import * as React from 'react'
import {
  ChevronDownIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
} from 'lucide-react'
import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker'

import { cn } from '@/lib/utils'
import { Button, buttonVariants } from '@/components/ui/button'

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  captionLayout = 'label',
  buttonVariant = 'ghost',
  formatters,
  components,
  ...props
}: React.ComponentProps<typeof DayPicker> & {
  buttonVariant?: React.ComponentProps<typeof Button>['variant']
}) {
  const defaultClassNames = getDefaultClassNames()

return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn(
        'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
        className,
      )}
      captionLayout={captionLayout}
      formatters={{
        formatMonthDropdown: (date) =>
          date.toLocaleString('default', { month: 'short' }),
        ...formatters,
      }}
      classNames={{
        root: cn('w-fit', defaultClassNames.root),
        months: cn(
          'flex gap-4 flex-col md:flex-row relative',
          defaultClassNames.months,
        ),
        month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
        nav: cn(
          'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
          defaultClassNames.nav,
        ),
        button_previous: cn(
          buttonVariants({ variant: buttonVariant }),
          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
          defaultClassNames.button_previous,
        ),
        button_next: cn(
          buttonVariants({ variant: buttonVariant }),
          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
          defaultClassNames.button_next,
        ),
        month_caption: cn(
          'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
          defaultClassNames.month_caption,
        ),
        dropdowns: cn(
          'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
          defaultClassNames.dropdowns,
        ),
        dropdown_root: cn(
          'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
          defaultClassNames.dropdown_root,
        ),
        dropdown: cn(
          'absolute bg-popover inset-0 opacity-0',
          defaultClassNames.dropdown,
        ),
        caption_label: cn(
          'select-none font-medium',
          captionLayout === 'label'
            ? 'text-sm'
            : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
          defaultClassNames.caption_label,
        ),
        table: 'w-full border-collapse',
        weekdays: cn('flex', defaultClassNames.weekdays),
        weekday: cn(
          'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
          defaultClassNames.weekday,
        ),
        week: cn('flex w-full mt-2', defaultClassNames.week),
        week_number_header: cn(
          'select-none w-(--cell-size)',
          defaultClassNames.week_number_header,
        ),
        week_number: cn(
          'text-[0.8rem] select-none text-muted-foreground',
          defaultClassNames.week_number,
        ),
        day: cn(
          'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
          defaultClassNames.day,
        ),
        range_start: cn(
          'rounded-l-md bg-accent',
          defaultClassNames.range_start,
        ),
        range_middle: cn('rounded-none', defaultClassNames.range_middle),
        range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
        today: cn(
          'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
          defaultClassNames.today,
        ),
        outside: cn(
          'text-muted-foreground aria-selected:text-muted-foreground',
          defaultClassNames.outside,
        ),
        disabled: cn(
          'text-muted-foreground opacity-50',
          defaultClassNames.disabled,
        ),
        hidden: cn('invisible', defaultClassNames.hidden),
        ...classNames,
      }}
      components={{
        Root: ({ className, rootRef, ...props }) => {
          return (
            <div
              data-slot="calendar"
              ref={rootRef}
              className={cn(className)}
              {...props}
            />
          )
        },
        Chevron: ({ className, orientation, ...props }) => {
          if (orientation === 'left') {
            return (
              <ChevronLeftIcon className={cn('size-4', className)} {...props} />
            )
          }

if (orientation === 'right') {
            return (
              <ChevronRightIcon
                className={cn('size-4', className)}
                {...props}
              />
            )
          }

return (
            <ChevronDownIcon className={cn('size-4', className)} {...props} />
          )
        },
        DayButton: CalendarDayButton,
        WeekNumber: ({ children, ...props }) => {
          return (
            <td {...props}>
              <div className="flex size-(--cell-size) items-center justify-center text-center">
                {children}
              </div>
            </td>
          )
        },
        ...components,
      }}
      {...props}
    />
  )
}

function CalendarDayButton({
  className,
  day,
  modifiers,
  ...props
}: React.ComponentProps<typeof DayButton>) {
  const defaultClassNames = getDefaultClassNames()

const ref = React.useRef<HTMLButtonElement>(null)
  React.useEffect(() => {
    if (modifiers.focused) ref.current?.focus()
  }, [modifiers.focused])

return (
    <Button
      ref={ref}
      variant="ghost"
      size="icon"
      data-day={day.date.toLocaleDateString()}
      data-selected-single={
        modifiers.selected &&
        !modifiers.range_start &&
        !modifiers.range_end &&
        !modifiers.range_middle
      }
      data-range-start={modifiers.range_start}
      data-range-end={modifiers.range_end}
      data-range-middle={modifiers.range_middle}
      className={cn(
        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
        defaultClassNames.day,
        className,
      )}
      {...props}
    />
  )
}

export { Calendar, CalendarDayButton }
[V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true"
import * as React from 'react'

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

function Card({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card"
      className={cn(
        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
        className,
      )}
      {...props}
    />
  )
}

function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
        className,
      )}
      {...props}
    />
  )
}

function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-title"
      className={cn('leading-none font-semibold', className)}
      {...props}
    />
  )
}

function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-action"
      className={cn(
        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
        className,
      )}
      {...props}
    />
  )
}

function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-content"
      className={cn('px-6', className)}
      {...props}
    />
  )
}

function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-footer"
      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
      {...props}
    />
  )
}

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
}
[V0_FILE]typescriptreact:file="components/ui/carousel.tsx" isMerged="true"
'use client'

import * as React from 'react'
import useEmblaCarousel, {
  type UseEmblaCarouselType,
} from 'embla-carousel-react'
import { ArrowLeft, ArrowRight } from 'lucide-react'

import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'

type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin = UseCarouselParameters[1]

type CarouselProps = {
  opts?: CarouselOptions
  plugins?: CarouselPlugin
  orientation?: 'horizontal' | 'vertical'
  setApi?: (api: CarouselApi) => void
}

type CarouselContextProps = {
  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
  api: ReturnType<typeof useEmblaCarousel>[1]
  scrollPrev: () => void
  scrollNext: () => void
  canScrollPrev: boolean
  canScrollNext: boolean
} & CarouselProps

const CarouselContext = React.createContext<CarouselContextProps | null>(null)

function useCarousel() {
  const context = React.useContext(CarouselContext)

if (!context) {
    throw new Error('useCarousel must be used within a <Carousel />')
  }

return context
}

function Carousel({
  orientation = 'horizontal',
  opts,
  setApi,
  plugins,
  className,
  children,
  ...props
}: React.ComponentProps<'div'> & CarouselProps) {
  const [carouselRef, api] = useEmblaCarousel(
    {
      ...opts,
      axis: orientation === 'horizontal' ? 'x' : 'y',
    },
    plugins,
  )
  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
  const [canScrollNext, setCanScrollNext] = React.useState(false)

const onSelect = React.useCallback((api: CarouselApi) => {
    if (!api) return
    setCanScrollPrev(api.canScrollPrev())
    setCanScrollNext(api.canScrollNext())
  }, [])

const scrollPrev = React.useCallback(() => {
    api?.scrollPrev()
  }, [api])

const scrollNext = React.useCallback(() => {
    api?.scrollNext()
  }, [api])

const handleKeyDown = React.useCallback(
    (event: React.KeyboardEvent<HTMLDivElement>) => {
      if (event.key === 'ArrowLeft') {
        event.preventDefault()
        scrollPrev()
      } else if (event.key === 'ArrowRight') {
        event.preventDefault()
        scrollNext()
      }
    },
    [scrollPrev, scrollNext],
  )

React.useEffect(() => {
    if (!api || !setApi) return
    setApi(api)
  }, [api, setApi])

React.useEffect(() => {
    if (!api) return
    onSelect(api)
    api.on('reInit', onSelect)
    api.on('select', onSelect)

return () => {
      api?.off('select', onSelect)
    }
  }, [api, onSelect])

return (
    <CarouselContext.Provider
      value={{
        carouselRef,
        api: api,
        opts,
        orientation:
          orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
        scrollPrev,
        scrollNext,
        canScrollPrev,
        canScrollNext,
      }}
    >
      <div
        onKeyDownCapture={handleKeyDown}
        className={cn('relative', className)}
        role="region"
        aria-roledescription="carousel"
        data-slot="carousel"
        {...props}
      >
        {children}
      </div>
    </CarouselContext.Provider>
  )
}

function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
  const { carouselRef, orientation } = useCarousel()

return (
    <div
      ref={carouselRef}
      className="overflow-hidden"
      data-slot="carousel-content"
    >
      <div
        className={cn(
          'flex',
          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
          className,
        )}
        {...props}
      />
    </div>
  )
}

function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
  const { orientation } = useCarousel()

return (
    <div
      role="group"
      aria-roledescription="slide"
      data-slot="carousel-item"
      className={cn(
        'min-w-0 shrink-0 grow-0 basis-full',
        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
        className,
      )}
      {...props}
    />
  )
}

function CarouselPrevious({
  className,
  variant = 'outline',
  size = 'icon',
  ...props
}: React.ComponentProps<typeof Button>) {
  const { orientation, scrollPrev, canScrollPrev } = useCarousel()

return (
    <Button
      data-slot="carousel-previous"
      variant={variant}
      size={size}
      className={cn(
        'absolute size-8 rounded-full',
        orientation === 'horizontal'
          ? 'top-1/2 -left-12 -translate-y-1/2'
          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
        className,
      )}
      disabled={!canScrollPrev}
      onClick={scrollPrev}
      {...props}
    >
      <ArrowLeft />
      <span className="sr-only">Previous slide</span>
    </Button>
  )
}

function CarouselNext({
  className,
  variant = 'outline',
  size = 'icon',
  ...props
}: React.ComponentProps<typeof Button>) {
  const { orientation, scrollNext, canScrollNext } = useCarousel()

return (
    <Button
      data-slot="carousel-next"
      variant={variant}
      size={size}
      className={cn(
        'absolute size-8 rounded-full',
        orientation === 'horizontal'
          ? 'top-1/2 -right-12 -translate-y-1/2'
          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
        className,
      )}
      disabled={!canScrollNext}
      onClick={scrollNext}
      {...props}
    >
      <ArrowRight />
      <span className="sr-only">Next slide</span>
    </Button>
  )
}

export {
  type CarouselApi,
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
}
[V0_FILE]typescriptreact:file="components/ui/chart.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as RechartsPrimitive from 'recharts'

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

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: '', dark: '.dark' } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

if (!context) {
    throw new Error('useChart must be used within a <ChartContainer />')
  }

return context
}

function ChartContainer({
  id,
  className,
  children,
  config,
  ...props
}: React.ComponentProps<'div'> & {
  config: ChartConfig
  children: React.ComponentProps<
    typeof RechartsPrimitive.ResponsiveContainer
  >['children']
}) {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`

return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-slot="chart"
        data-chart={chartId}
        className={cn(
          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
          className,
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
}

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([, config]) => config.theme || config.color,
  )

if (!colorConfig.length) {
    return null
  }

return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join('\n')}
}
`,
          )
          .join('\n'),
      }}
    />
  )
}

const ChartTooltip = RechartsPrimitive.Tooltip

function ChartTooltipContent({
  active,
  payload,
  className,
  indicator = 'dot',
  hideLabel = false,
  hideIndicator = false,
  label,
  labelFormatter,
  labelClassName,
  formatter,
  color,
  nameKey,
  labelKey,
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
  React.ComponentProps<'div'> & {
    hideLabel?: boolean
    hideIndicator?: boolean
    indicator?: 'line' | 'dot' | 'dashed'
    nameKey?: string
    labelKey?: string
  }) {
  const { config } = useChart()

const tooltipLabel = React.useMemo(() => {
    if (hideLabel || !payload?.length) {
      return null
    }

const [item] = payload
    const key = `${labelKey || item?.dataKey || item?.name || 'value'}`
    const itemConfig = getPayloadConfigFromPayload(config, item, key)
    const value =
      !labelKey && typeof label === 'string'
        ? config[label as keyof typeof config]?.label || label
        : itemConfig?.label

if (labelFormatter) {
      return (
        <div className={cn('font-medium', labelClassName)}>
          {labelFormatter(value, payload)}
        </div>
      )
    }

if (!value) {
      return null
    }

return <div className={cn('font-medium', labelClassName)}>{value}</div>
  }, [
    label,
    labelFormatter,
    payload,
    hideLabel,
    labelClassName,
    config,
    labelKey,
  ])

if (!active || !payload?.length) {
    return null
  }

const nestLabel = payload.length === 1 && indicator !== 'dot'

return (
    <div
      className={cn(
        'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
        className,
      )}
    >
      {!nestLabel ? tooltipLabel : null}
      <div className="grid gap-1.5">
        {payload.map((item, index) => {
          const key = `${nameKey || item.name || item.dataKey || 'value'}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)
          const indicatorColor = color || item.payload.fill || item.color

return (
            <div
              key={item.dataKey}
              className={cn(
                '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
                indicator === 'dot' && 'items-center',
              )}
            >
              {formatter && item?.value !== undefined && item.name ? (
                formatter(item.value, item.name, item, index, item.payload)
              ) : (
                <>
                  {itemConfig?.icon ? (
                    <itemConfig.icon />
                  ) : (
                    !hideIndicator && (
                      <div
                        className={cn(
                          'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',
                          {
                            'h-2.5 w-2.5': indicator === 'dot',
                            'w-1': indicator === 'line',
                            'w-0 border-[1.5px] border-dashed bg-transparent':
                              indicator === 'dashed',
                            'my-0.5': nestLabel && indicator === 'dashed',
                          },
                        )}
                        style={
                          {
                            '--color-bg': indicatorColor,
                            '--color-border': indicatorColor,
                          } as React.CSSProperties
                        }
                      />
                    )
                  )}
                  <div
                    className={cn(
                      'flex flex-1 justify-between leading-none',
                      nestLabel ? 'items-end' : 'items-center',
                    )}
                  >
                    <div className="grid gap-1.5">
                      {nestLabel ? tooltipLabel : null}
                      <span className="text-muted-foreground">
                        {itemConfig?.label || item.name}
                      </span>
                    </div>
                    {item.value && (
                      <span className="text-foreground font-mono font-medium tabular-nums">
                        {item.value.toLocaleString()}
                      </span>
                    )}
                  </div>
                </>
              )}
            </div>
          )
        })}
      </div>
    </div>
  )
}

const ChartLegend = RechartsPrimitive.Legend

function ChartLegendContent({
  className,
  hideIcon = false,
  payload,
  verticalAlign = 'bottom',
  nameKey,
}: React.ComponentProps<'div'> &
  Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
    hideIcon?: boolean
    nameKey?: string
  }) {
  const { config } = useChart()

if (!payload?.length) {
    return null
  }

return (
    <div
      className={cn(
        'flex items-center justify-center gap-4',
        verticalAlign === 'top' ? 'pb-3' : 'pt-3',
        className,
      )}
    >
      {payload.map((item) => {
        const key = `${nameKey || item.dataKey || 'value'}`
        const itemConfig = getPayloadConfigFromPayload(config, item, key)

return (
          <div
            key={item.value}
            className={
              '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3'
            }
          >
            {itemConfig?.icon && !hideIcon ? (
              <itemConfig.icon />
            ) : (
              <div
                className="h-2 w-2 shrink-0 rounded-[2px]"
                style={{
                  backgroundColor: item.color,
                }}
              />
            )}
            {itemConfig?.label}
          </div>
        )
      })}
    </div>
  )
}

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string,
) {
  if (typeof payload !== 'object' || payload === null) {
    return undefined
  }

const payloadPayload =
    'payload' in payload &&
    typeof payload.payload === 'object' &&
    payload.payload !== null
      ? payload.payload
      : undefined

let configLabelKey: string = key

if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === 'string'
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}
[V0_FILE]typescriptreact:file="components/ui/checkbox.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
import { CheckIcon } from 'lucide-react'

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

function Checkbox({
  className,
  ...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator
        data-slot="checkbox-indicator"
        className="flex items-center justify-center text-current transition-none"
      >
        <CheckIcon className="size-3.5" />
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  )
}

export { Checkbox }
[V0_FILE]typescriptreact:file="components/ui/collapsible.tsx" isMerged="true"
'use client'

import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'

function Collapsible({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
}

function CollapsibleTrigger({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
  return (
    <CollapsiblePrimitive.CollapsibleTrigger
      data-slot="collapsible-trigger"
      {...props}
    />
  )
}

function CollapsibleContent({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
  return (
    <CollapsiblePrimitive.CollapsibleContent
      data-slot="collapsible-content"
      {...props}
    />
  )
}

export { Collapsible, CollapsibleTrigger, CollapsibleContent }
[V0_FILE]typescriptreact:file="components/ui/command.tsx" isMerged="true"
'use client'

import * as React from 'react'
import { Command as CommandPrimitive } from 'cmdk'
import { SearchIcon } from 'lucide-react'

import { cn } from '@/lib/utils'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'

function Command({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive>) {
  return (
    <CommandPrimitive
      data-slot="command"
      className={cn(
        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
        className,
      )}
      {...props}
    />
  )
}

function CommandDialog({
  title = 'Command Palette',
  description = 'Search for a command to run...',
  children,
  className,
  showCloseButton = true,
  ...props
}: React.ComponentProps<typeof Dialog> & {
  title?: string
  description?: string
  className?: string
  showCloseButton?: boolean
}) {
  return (
    <Dialog {...props}>
      <DialogHeader className="sr-only">
        <DialogTitle>{title}</DialogTitle>
        <DialogDescription>{description}</DialogDescription>
      </DialogHeader>
      <DialogContent
        className={cn('overflow-hidden p-0', className)}
        showCloseButton={showCloseButton}
      >
        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
          {children}
        </Command>
      </DialogContent>
    </Dialog>
  )
}

function CommandInput({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
  return (
    <div
      data-slot="command-input-wrapper"
      className="flex h-9 items-center gap-2 border-b px-3"
    >
      <SearchIcon className="size-4 shrink-0 opacity-50" />
      <CommandPrimitive.Input
        data-slot="command-input"
        className={cn(
          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
          className,
        )}
        {...props}
      />
    </div>
  )
}

function CommandList({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.List>) {
  return (
    <CommandPrimitive.List
      data-slot="command-list"
      className={cn(
        'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
        className,
      )}
      {...props}
    />
  )
}

function CommandEmpty({
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
  return (
    <CommandPrimitive.Empty
      data-slot="command-empty"
      className="py-6 text-center text-sm"
      {...props}
    />
  )
}

function CommandGroup({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Group>) {
  return (
    <CommandPrimitive.Group
      data-slot="command-group"
      className={cn(
        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
        className,
      )}
      {...props}
    />
  )
}

function CommandSeparator({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
  return (
    <CommandPrimitive.Separator
      data-slot="command-separator"
      className={cn('bg-border -mx-1 h-px', className)}
      {...props}
    />
  )
}

function CommandItem({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Item>) {
  return (
    <CommandPrimitive.Item
      data-slot="command-item"
      className={cn(
        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function CommandShortcut({
  className,
  ...props
}: React.ComponentProps<'span'>) {
  return (
    <span
      data-slot="command-shortcut"
      className={cn(
        'text-muted-foreground ml-auto text-xs tracking-widest',
        className,
      )}
      {...props}
    />
  )
}

export {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandSeparator,
}
[V0_FILE]typescriptreact:file="components/ui/context-menu.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'

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

function ContextMenu({
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
}

function ContextMenuTrigger({
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
  return (
    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
  )
}

function ContextMenuGroup({
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
  return (
    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
  )
}

function ContextMenuPortal({
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
  return (
    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
  )
}

function ContextMenuSub({
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
}

function ContextMenuRadioGroup({
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
  return (
    <ContextMenuPrimitive.RadioGroup
      data-slot="context-menu-radio-group"
      {...props}
    />
  )
}

function ContextMenuSubTrigger({
  className,
  inset,
  children,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
  inset?: boolean
}) {
  return (
    <ContextMenuPrimitive.SubTrigger
      data-slot="context-menu-sub-trigger"
      data-inset={inset}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      {children}
      <ChevronRightIcon className="ml-auto" />
    </ContextMenuPrimitive.SubTrigger>
  )
}

function ContextMenuSubContent({
  className,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
  return (
    <ContextMenuPrimitive.SubContent
      data-slot="context-menu-sub-content"
      className={cn(
        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
        className,
      )}
      {...props}
    />
  )
}

function ContextMenuContent({
  className,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
  return (
    <ContextMenuPrimitive.Portal>
      <ContextMenuPrimitive.Content
        data-slot="context-menu-content"
        className={cn(
          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
          className,
        )}
        {...props}
      />
    </ContextMenuPrimitive.Portal>
  )
}

function ContextMenuItem({
  className,
  inset,
  variant = 'default',
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
  inset?: boolean
  variant?: 'default' | 'destructive'
}) {
  return (
    <ContextMenuPrimitive.Item
      data-slot="context-menu-item"
      data-inset={inset}
      data-variant={variant}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function ContextMenuCheckboxItem({
  className,
  children,
  checked,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
  return (
    <ContextMenuPrimitive.CheckboxItem
      data-slot="context-menu-checkbox-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      checked={checked}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <ContextMenuPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </ContextMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </ContextMenuPrimitive.CheckboxItem>
  )
}

function ContextMenuRadioItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
  return (
    <ContextMenuPrimitive.RadioItem
      data-slot="context-menu-radio-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <ContextMenuPrimitive.ItemIndicator>
          <CircleIcon className="size-2 fill-current" />
        </ContextMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </ContextMenuPrimitive.RadioItem>
  )
}

function ContextMenuLabel({
  className,
  inset,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
  inset?: boolean
}) {
  return (
    <ContextMenuPrimitive.Label
      data-slot="context-menu-label"
      data-inset={inset}
      className={cn(
        'text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
        className,
      )}
      {...props}
    />
  )
}

function ContextMenuSeparator({
  className,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
  return (
    <ContextMenuPrimitive.Separator
      data-slot="context-menu-separator"
      className={cn('bg-border -mx-1 my-1 h-px', className)}
      {...props}
    />
  )
}

function ContextMenuShortcut({
  className,
  ...props
}: React.ComponentProps<'span'>) {
  return (
    <span
      data-slot="context-menu-shortcut"
      className={cn(
        'text-muted-foreground ml-auto text-xs tracking-widest',
        className,
      )}
      {...props}
    />
  )
}

export {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuRadioItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuGroup,
  ContextMenuPortal,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as DialogPrimitive from '@radix-ui/react-dialog'
import { XIcon } from 'lucide-react'

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

function Dialog({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
  return <DialogPrimitive.Root data-slot="dialog" {...props} />
}

function DialogTrigger({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
}

function DialogPortal({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
}

function DialogClose({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
}

function DialogOverlay({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
  return (
    <DialogPrimitive.Overlay
      data-slot="dialog-overlay"
      className={cn(
        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
        className,
      )}
      {...props}
    />
  )
}

function DialogContent({
  className,
  children,
  showCloseButton = true,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
  showCloseButton?: boolean
}) {
  return (
    <DialogPortal data-slot="dialog-portal">
      <DialogOverlay />
      <DialogPrimitive.Content
        data-slot="dialog-content"
        className={cn(
          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
          className,
        )}
        {...props}
      >
        {children}
        {showCloseButton && (
          <DialogPrimitive.Close
            data-slot="dialog-close"
            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
          >
            <XIcon />
            <span className="sr-only">Close</span>
          </DialogPrimitive.Close>
        )}
      </DialogPrimitive.Content>
    </DialogPortal>
  )
}

function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="dialog-header"
      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
      {...props}
    />
  )
}

function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="dialog-footer"
      className={cn(
        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
        className,
      )}
      {...props}
    />
  )
}

function DialogTitle({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
  return (
    <DialogPrimitive.Title
      data-slot="dialog-title"
      className={cn('text-lg leading-none font-semibold', className)}
      {...props}
    />
  )
}

function DialogDescription({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
  return (
    <DialogPrimitive.Description
      data-slot="dialog-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

export {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogOverlay,
  DialogPortal,
  DialogTitle,
  DialogTrigger,
}
[V0_FILE]typescriptreact:file="components/ui/drawer.tsx" isMerged="true"
'use client'

import * as React from 'react'
import { Drawer as DrawerPrimitive } from 'vaul'

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

function Drawer({
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
}

function DrawerTrigger({
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
}

function DrawerPortal({
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
}

function DrawerClose({
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
}

function DrawerOverlay({
  className,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
  return (
    <DrawerPrimitive.Overlay
      data-slot="drawer-overlay"
      className={cn(
        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
        className,
      )}
      {...props}
    />
  )
}

function DrawerContent({
  className,
  children,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
  return (
    <DrawerPortal data-slot="drawer-portal">
      <DrawerOverlay />
      <DrawerPrimitive.Content
        data-slot="drawer-content"
        className={cn(
          'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
          'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',
          'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t',
          'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm',
          'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm',
          className,
        )}
        {...props}
      >
        <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
        {children}
      </DrawerPrimitive.Content>
    </DrawerPortal>
  )
}

function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="drawer-header"
      className={cn(
        'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left',
        className,
      )}
      {...props}
    />
  )
}

function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="drawer-footer"
      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
      {...props}
    />
  )
}

function DrawerTitle({
  className,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
  return (
    <DrawerPrimitive.Title
      data-slot="drawer-title"
      className={cn('text-foreground font-semibold', className)}
      {...props}
    />
  )
}

function DrawerDescription({
  className,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
  return (
    <DrawerPrimitive.Description
      data-slot="drawer-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

export {
  Drawer,
  DrawerPortal,
  DrawerOverlay,
  DrawerTrigger,
  DrawerClose,
  DrawerContent,
  DrawerHeader,
  DrawerFooter,
  DrawerTitle,
  DrawerDescription,
}
[V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'

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

function DropdownMenu({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
}

function DropdownMenuPortal({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
  return (
    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
  )
}

function DropdownMenuTrigger({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
  return (
    <DropdownMenuPrimitive.Trigger
      data-slot="dropdown-menu-trigger"
      {...props}
    />
  )
}

function DropdownMenuContent({
  className,
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
  return (
    <DropdownMenuPrimitive.Portal>
      <DropdownMenuPrimitive.Content
        data-slot="dropdown-menu-content"
        sideOffset={sideOffset}
        className={cn(
          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
          className,
        )}
        {...props}
      />
    </DropdownMenuPrimitive.Portal>
  )
}

function DropdownMenuGroup({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
  return (
    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
  )
}

function DropdownMenuItem({
  className,
  inset,
  variant = 'default',
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
  inset?: boolean
  variant?: 'default' | 'destructive'
}) {
  return (
    <DropdownMenuPrimitive.Item
      data-slot="dropdown-menu-item"
      data-inset={inset}
      data-variant={variant}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function DropdownMenuCheckboxItem({
  className,
  children,
  checked,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
  return (
    <DropdownMenuPrimitive.CheckboxItem
      data-slot="dropdown-menu-checkbox-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      checked={checked}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <DropdownMenuPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </DropdownMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </DropdownMenuPrimitive.CheckboxItem>
  )
}

function DropdownMenuRadioGroup({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
  return (
    <DropdownMenuPrimitive.RadioGroup
      data-slot="dropdown-menu-radio-group"
      {...props}
    />
  )
}

function DropdownMenuRadioItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
  return (
    <DropdownMenuPrimitive.RadioItem
      data-slot="dropdown-menu-radio-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <DropdownMenuPrimitive.ItemIndicator>
          <CircleIcon className="size-2 fill-current" />
        </DropdownMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </DropdownMenuPrimitive.RadioItem>
  )
}

function DropdownMenuLabel({
  className,
  inset,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
  inset?: boolean
}) {
  return (
    <DropdownMenuPrimitive.Label
      data-slot="dropdown-menu-label"
      data-inset={inset}
      className={cn(
        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
        className,
      )}
      {...props}
    />
  )
}

function DropdownMenuSeparator({
  className,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
  return (
    <DropdownMenuPrimitive.Separator
      data-slot="dropdown-menu-separator"
      className={cn('bg-border -mx-1 my-1 h-px', className)}
      {...props}
    />
  )
}

function DropdownMenuShortcut({
  className,
  ...props
}: React.ComponentProps<'span'>) {
  return (
    <span
      data-slot="dropdown-menu-shortcut"
      className={cn(
        'text-muted-foreground ml-auto text-xs tracking-widest',
        className,
      )}
      {...props}
    />
  )
}

function DropdownMenuSub({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
}

function DropdownMenuSubTrigger({
  className,
  inset,
  children,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
  inset?: boolean
}) {
  return (
    <DropdownMenuPrimitive.SubTrigger
      data-slot="dropdown-menu-sub-trigger"
      data-inset={inset}
      className={cn(
        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
        className,
      )}
      {...props}
    >
      {children}
      <ChevronRightIcon className="ml-auto size-4" />
    </DropdownMenuPrimitive.SubTrigger>
  )
}

function DropdownMenuSubContent({
  className,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
  return (
    <DropdownMenuPrimitive.SubContent
      data-slot="dropdown-menu-sub-content"
      className={cn(
        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
        className,
      )}
      {...props}
    />
  )
}

export {
  DropdownMenu,
  DropdownMenuPortal,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
}
[V0_FILE]typescriptreact:file="components/ui/empty.tsx" isMerged="true"
import { cva, type VariantProps } from 'class-variance-authority'

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

function Empty({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="empty"
      className={cn(
        'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12',
        className,
      )}
      {...props}
    />
  )
}

function EmptyHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="empty-header"
      className={cn(
        'flex max-w-sm flex-col items-center gap-2 text-center',
        className,
      )}
      {...props}
    />
  )
}

const emptyMediaVariants = cva(
  'flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0',
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

function EmptyMedia({
  className,
  variant = 'default',
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) {
  return (
    <div
      data-slot="empty-icon"
      data-variant={variant}
      className={cn(emptyMediaVariants({ variant, className }))}
      {...props}
    />
  )
}

function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="empty-title"
      className={cn('text-lg font-medium tracking-tight', className)}
      {...props}
    />
  )
}

function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {
  return (
    <div
      data-slot="empty-description"
      className={cn(
        'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
        className,
      )}
      {...props}
    />
  )
}

function EmptyContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="empty-content"
      className={cn(
        'flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance',
        className,
      )}
      {...props}
    />
  )
}

export {
  Empty,
  EmptyHeader,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
  EmptyMedia,
}
[V0_FILE]typescriptreact:file="components/ui/field.tsx" isMerged="true"
'use client'

import { useMemo } from 'react'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'
import { Label } from '@/components/ui/label'
import { Separator } from '@/components/ui/separator'

function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
  return (
    <fieldset
      data-slot="field-set"
      className={cn(
        'flex flex-col gap-6',
        'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
        className,
      )}
      {...props}
    />
  )
}

function FieldLegend({
  className,
  variant = 'legend',
  ...props
}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
  return (
    <legend
      data-slot="field-legend"
      data-variant={variant}
      className={cn(
        'mb-3 font-medium',
        'data-[variant=legend]:text-base',
        'data-[variant=label]:text-sm',
        className,
      )}
      {...props}
    />
  )
}

function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="field-group"
      className={cn(
        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
        className,
      )}
      {...props}
    />
  )
}

const fieldVariants = cva(
  'group/field flex w-full gap-3 data-[invalid=true]:text-destructive',
  {
    variants: {
      orientation: {
        vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
        horizontal: [
          'flex-row items-center',
          '[&>[data-slot=field-label]]:flex-auto',
          'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
        ],
        responsive: [
          'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
          '@md/field-group:[&>[data-slot=field-label]]:flex-auto',
          '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
        ],
      },
    },
    defaultVariants: {
      orientation: 'vertical',
    },
  },
)

function Field({
  className,
  orientation = 'vertical',
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
  return (
    <div
      role="group"
      data-slot="field"
      data-orientation={orientation}
      className={cn(fieldVariants({ orientation }), className)}
      {...props}
    />
  )
}

function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="field-content"
      className={cn(
        'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',
        className,
      )}
      {...props}
    />
  )
}

function FieldLabel({
  className,
  ...props
}: React.ComponentProps<typeof Label>) {
  return (
    <Label
      data-slot="field-label"
      className={cn(
        'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
        'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
        className,
      )}
      {...props}
    />
  )
}

function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="field-label"
      className={cn(
        'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
        className,
      )}
      {...props}
    />
  )
}

function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
  return (
    <p
      data-slot="field-description"
      className={cn(
        'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
        'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
        className,
      )}
      {...props}
    />
  )
}

function FieldSeparator({
  children,
  className,
  ...props
}: React.ComponentProps<'div'> & {
  children?: React.ReactNode
}) {
  return (
    <div
      data-slot="field-separator"
      data-content={!!children}
      className={cn(
        'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
        className,
      )}
      {...props}
    >
      <Separator className="absolute inset-0 top-1/2" />
      {children && (
        <span
          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
          data-slot="field-separator-content"
        >
          {children}
        </span>
      )}
    </div>
  )
}

function FieldError({
  className,
  children,
  errors,
  ...props
}: React.ComponentProps<'div'> & {
  errors?: Array<{ message?: string } | undefined>
}) {
  const content = useMemo(() => {
    if (children) {
      return children
    }

if (!errors) {
      return null
    }

if (errors.length === 1 && errors[0]?.message) {
      return errors[0].message
    }

return (
      <ul className="ml-4 flex list-disc flex-col gap-1">
        {errors.map(
          (error, index) =>
            error?.message && <li key={index}>{error.message}</li>,
        )}
      </ul>
    )
  }, [children, errors])

if (!content) {
    return null
  }

return (
    <div
      role="alert"
      data-slot="field-error"
      className={cn('text-destructive text-sm font-normal', className)}
      {...props}
    >
      {content}
    </div>
  )
}

export {
  Field,
  FieldLabel,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLegend,
  FieldSeparator,
  FieldSet,
  FieldContent,
  FieldTitle,
}
[V0_FILE]typescriptreact:file="components/ui/form.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'
import { Slot } from '@radix-ui/react-slot'
import {
  Controller,
  FormProvider,
  useFormContext,
  useFormState,
  type ControllerProps,
  type FieldPath,
  type FieldValues,
} from 'react-hook-form'

import { cn } from '@/lib/utils'
import { Label } from '@/components/ui/label'

const Form = FormProvider

type FormFieldContextValue<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
> = {
  name: TName
}

const FormFieldContext = React.createContext<FormFieldContextValue>(
  {} as FormFieldContextValue,
)

const FormField = <
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
>({
  ...props
}: ControllerProps<TFieldValues, TName>) => {
  return (
    <FormFieldContext.Provider value={{ name: props.name }}>
      <Controller {...props} />
    </FormFieldContext.Provider>
  )
}

const useFormField = () => {
  const fieldContext = React.useContext(FormFieldContext)
  const itemContext = React.useContext(FormItemContext)
  const { getFieldState } = useFormContext()
  const formState = useFormState({ name: fieldContext.name })
  const fieldState = getFieldState(fieldContext.name, formState)

if (!fieldContext) {
    throw new Error('useFormField should be used within <FormField>')
  }

const { id } = itemContext

return {
    id,
    name: fieldContext.name,
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState,
  }
}

type FormItemContextValue = {
  id: string
}

const FormItemContext = React.createContext<FormItemContextValue>(
  {} as FormItemContextValue,
)

function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
  const id = React.useId()

return (
    <FormItemContext.Provider value={{ id }}>
      <div
        data-slot="form-item"
        className={cn('grid gap-2', className)}
        {...props}
      />
    </FormItemContext.Provider>
  )
}

function FormLabel({
  className,
  ...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
  const { error, formItemId } = useFormField()

return (
    <Label
      data-slot="form-label"
      data-error={!!error}
      className={cn('data-[error=true]:text-destructive', className)}
      htmlFor={formItemId}
      {...props}
    />
  )
}

function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()

return (
    <Slot
      data-slot="form-control"
      id={formItemId}
      aria-describedby={
        !error
          ? `${formDescriptionId}`
          : `${formDescriptionId} ${formMessageId}`
      }
      aria-invalid={!!error}
      {...props}
    />
  )
}

function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
  const { formDescriptionId } = useFormField()

return (
    <p
      data-slot="form-description"
      id={formDescriptionId}
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
  const { error, formMessageId } = useFormField()
  const body = error ? String(error?.message ?? '') : props.children

if (!body) {
    return null
  }

return (
    <p
      data-slot="form-message"
      id={formMessageId}
      className={cn('text-destructive text-sm', className)}
      {...props}
    >
      {body}
    </p>
  )
}

export {
  useFormField,
  Form,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
  FormField,
}
[V0_FILE]typescriptreact:file="components/ui/hover-card.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as HoverCardPrimitive from '@radix-ui/react-hover-card'

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

function HoverCard({
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
}

function HoverCardTrigger({
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
  return (
    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
  )
}

function HoverCardContent({
  className,
  align = 'center',
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
  return (
    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
      <HoverCardPrimitive.Content
        data-slot="hover-card-content"
        align={align}
        sideOffset={sideOffset}
        className={cn(
          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
          className,
        )}
        {...props}
      />
    </HoverCardPrimitive.Portal>
  )
}

export { HoverCard, HoverCardTrigger, HoverCardContent }
[V0_FILE]typescriptreact:file="components/ui/input-group.tsx" isMerged="true"
'use client'

import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'

function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="input-group"
      role="group"
      className={cn(
        'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
        'h-9 has-[>textarea]:h-auto',

// Variants based on alignment.
        'has-[>[data-align=inline-start]]:[&>input]:pl-2',
        'has-[>[data-align=inline-end]]:[&>input]:pr-2',
        'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
        'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',

// Focus state.
        'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',

// Error state.
        'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',

className,
      )}
      {...props}
    />
  )
}

const inputGroupAddonVariants = cva(
  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
  {
    variants: {
      align: {
        'inline-start':
          'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
        'inline-end':
          'order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]',
        'block-start':
          'order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5',
        'block-end':
          'order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5',
      },
    },
    defaultVariants: {
      align: 'inline-start',
    },
  },
)

function InputGroupAddon({
  className,
  align = 'inline-start',
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
  return (
    <div
      role="group"
      data-slot="input-group-addon"
      data-align={align}
      className={cn(inputGroupAddonVariants({ align }), className)}
      onClick={(e) => {
        if ((e.target as HTMLElement).closest('button')) {
          return
        }
        e.currentTarget.parentElement?.querySelector('input')?.focus()
      }}
      {...props}
    />
  )
}

const inputGroupButtonVariants = cva(
  'text-sm shadow-none flex gap-2 items-center',
  {
    variants: {
      size: {
        xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
        sm: 'h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5',
        'icon-xs':
          'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
        'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
      },
    },
    defaultVariants: {
      size: 'xs',
    },
  },
)

function InputGroupButton({
  className,
  type = 'button',
  variant = 'ghost',
  size = 'xs',
  ...props
}: Omit<React.ComponentProps<typeof Button>, 'size'> &
  VariantProps<typeof inputGroupButtonVariants>) {
  return (
    <Button
      type={type}
      data-size={size}
      variant={variant}
      className={cn(inputGroupButtonVariants({ size }), className)}
      {...props}
    />
  )
}

function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
  return (
    <span
      className={cn(
        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function InputGroupInput({
  className,
  ...props
}: React.ComponentProps<'input'>) {
  return (
    <Input
      data-slot="input-group-control"
      className={cn(
        'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
        className,
      )}
      {...props}
    />
  )
}

function InputGroupTextarea({
  className,
  ...props
}: React.ComponentProps<'textarea'>) {
  return (
    <Textarea
      data-slot="input-group-control"
      className={cn(
        'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
        className,
      )}
      {...props}
    />
  )
}

export {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupText,
  InputGroupInput,
  InputGroupTextarea,
}
[V0_FILE]typescriptreact:file="components/ui/input-otp.tsx" isMerged="true"
'use client'

import * as React from 'react'
import { OTPInput, OTPInputContext } from 'input-otp'
import { MinusIcon } from 'lucide-react'

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

function InputOTP({
  className,
  containerClassName,
  ...props
}: React.ComponentProps<typeof OTPInput> & {
  containerClassName?: string
}) {
  return (
    <OTPInput
      data-slot="input-otp"
      containerClassName={cn(
        'flex items-center gap-2 has-disabled:opacity-50',
        containerClassName,
      )}
      className={cn('disabled:cursor-not-allowed', className)}
      {...props}
    />
  )
}

function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="input-otp-group"
      className={cn('flex items-center', className)}
      {...props}
    />
  )
}

function InputOTPSlot({
  index,
  className,
  ...props
}: React.ComponentProps<'div'> & {
  index: number
}) {
  const inputOTPContext = React.useContext(OTPInputContext)
  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}

return (
    <div
      data-slot="input-otp-slot"
      data-active={isActive}
      className={cn(
        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',
        className,
      )}
      {...props}
    >
      {char}
      {hasFakeCaret && (
        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
        </div>
      )}
    </div>
  )
}

function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
  return (
    <div data-slot="input-otp-separator" role="separator" {...props}>
      <MinusIcon />
    </div>
  )
}

export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
[V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true"
import * 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-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex 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="components/ui/item.tsx" isMerged="true"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'
import { Separator } from '@/components/ui/separator'

function ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      role="list"
      data-slot="item-group"
      className={cn('group/item-group flex flex-col', className)}
      {...props}
    />
  )
}

function ItemSeparator({
  className,
  ...props
}: React.ComponentProps<typeof Separator>) {
  return (
    <Separator
      data-slot="item-separator"
      orientation="horizontal"
      className={cn('my-0', className)}
      {...props}
    />
  )
}

const itemVariants = cva(
  'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a&]:hover:bg-accent/50 [a&]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        outline: 'border-border',
        muted: 'bg-muted/50',
      },
      size: {
        default: 'p-4 gap-4 ',
        sm: 'py-3 px-4 gap-2.5',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function Item({
  className,
  variant = 'default',
  size = 'default',
  asChild = false,
  ...props
}: React.ComponentProps<'div'> &
  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : 'div'
  return (
    <Comp
      data-slot="item"
      data-variant={variant}
      data-size={size}
      className={cn(itemVariants({ variant, size, className }))}
      {...props}
    />
  )
}

const itemMediaVariants = cva(
  'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5',
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
        image:
          'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

function ItemMedia({
  className,
  variant = 'default',
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {
  return (
    <div
      data-slot="item-media"
      data-variant={variant}
      className={cn(itemMediaVariants({ variant, className }))}
      {...props}
    />
  )
}

function ItemContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="item-content"
      className={cn(
        'flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none',
        className,
      )}
      {...props}
    />
  )
}

function ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="item-title"
      className={cn(
        'flex w-fit items-center gap-2 text-sm leading-snug font-medium',
        className,
      )}
      {...props}
    />
  )
}

function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
  return (
    <p
      data-slot="item-description"
      className={cn(
        'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
        className,
      )}
      {...props}
    />
  )
}

function ItemActions({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="item-actions"
      className={cn('flex items-center gap-2', className)}
      {...props}
    />
  )
}

function ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="item-header"
      className={cn(
        'flex basis-full items-center justify-between gap-2',
        className,
      )}
      {...props}
    />
  )
}

function ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="item-footer"
      className={cn(
        'flex basis-full items-center justify-between gap-2',
        className,
      )}
      {...props}
    />
  )
}

export {
  Item,
  ItemMedia,
  ItemContent,
  ItemActions,
  ItemGroup,
  ItemSeparator,
  ItemTitle,
  ItemDescription,
  ItemHeader,
  ItemFooter,
}
[V0_FILE]typescriptreact:file="components/ui/kbd.tsx" isMerged="true"
import { cn } from '@/lib/utils'

function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
  return (
    <kbd
      data-slot="kbd"
      className={cn(
        'bg-muted w-fit text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none',
        "[&_svg:not([class*='size-'])]:size-3",
        '[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
        className,
      )}
      {...props}
    />
  )
}

function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <kbd
      data-slot="kbd-group"
      className={cn('inline-flex items-center gap-1', className)}
      {...props}
    />
  )
}

export { Kbd, KbdGroup }
[V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'

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

function Label({
  className,
  ...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn(
        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
        className,
      )}
      {...props}
    />
  )
}

export { Label }
[V0_FILE]typescriptreact:file="components/ui/menubar.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as MenubarPrimitive from '@radix-ui/react-menubar'
import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'

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

function Menubar({
  className,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
  return (
    <MenubarPrimitive.Root
      data-slot="menubar"
      className={cn(
        'bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs',
        className,
      )}
      {...props}
    />
  )
}

function MenubarMenu({
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
}

function MenubarGroup({
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
}

function MenubarPortal({
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
}

function MenubarRadioGroup({
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
  return (
    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
  )
}

function MenubarTrigger({
  className,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
  return (
    <MenubarPrimitive.Trigger
      data-slot="menubar-trigger"
      className={cn(
        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none',
        className,
      )}
      {...props}
    />
  )
}

function MenubarContent({
  className,
  align = 'start',
  alignOffset = -4,
  sideOffset = 8,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
  return (
    <MenubarPortal>
      <MenubarPrimitive.Content
        data-slot="menubar-content"
        align={align}
        alignOffset={alignOffset}
        sideOffset={sideOffset}
        className={cn(
          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
          className,
        )}
        {...props}
      />
    </MenubarPortal>
  )
}

function MenubarItem({
  className,
  inset,
  variant = 'default',
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
  inset?: boolean
  variant?: 'default' | 'destructive'
}) {
  return (
    <MenubarPrimitive.Item
      data-slot="menubar-item"
      data-inset={inset}
      data-variant={variant}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function MenubarCheckboxItem({
  className,
  children,
  checked,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
  return (
    <MenubarPrimitive.CheckboxItem
      data-slot="menubar-checkbox-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      checked={checked}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <MenubarPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </MenubarPrimitive.ItemIndicator>
      </span>
      {children}
    </MenubarPrimitive.CheckboxItem>
  )
}

function MenubarRadioItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
  return (
    <MenubarPrimitive.RadioItem
      data-slot="menubar-radio-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <MenubarPrimitive.ItemIndicator>
          <CircleIcon className="size-2 fill-current" />
        </MenubarPrimitive.ItemIndicator>
      </span>
      {children}
    </MenubarPrimitive.RadioItem>
  )
}

function MenubarLabel({
  className,
  inset,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
  inset?: boolean
}) {
  return (
    <MenubarPrimitive.Label
      data-slot="menubar-label"
      data-inset={inset}
      className={cn(
        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
        className,
      )}
      {...props}
    />
  )
}

function MenubarSeparator({
  className,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
  return (
    <MenubarPrimitive.Separator
      data-slot="menubar-separator"
      className={cn('bg-border -mx-1 my-1 h-px', className)}
      {...props}
    />
  )
}

function MenubarShortcut({
  className,
  ...props
}: React.ComponentProps<'span'>) {
  return (
    <span
      data-slot="menubar-shortcut"
      className={cn(
        'text-muted-foreground ml-auto text-xs tracking-widest',
        className,
      )}
      {...props}
    />
  )
}

function MenubarSub({
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
}

function MenubarSubTrigger({
  className,
  inset,
  children,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
  inset?: boolean
}) {
  return (
    <MenubarPrimitive.SubTrigger
      data-slot="menubar-sub-trigger"
      data-inset={inset}
      className={cn(
        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8',
        className,
      )}
      {...props}
    >
      {children}
      <ChevronRightIcon className="ml-auto h-4 w-4" />
    </MenubarPrimitive.SubTrigger>
  )
}

function MenubarSubContent({
  className,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
  return (
    <MenubarPrimitive.SubContent
      data-slot="menubar-sub-content"
      className={cn(
        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
        className,
      )}
      {...props}
    />
  )
}

export {
  Menubar,
  MenubarPortal,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarGroup,
  MenubarSeparator,
  MenubarLabel,
  MenubarItem,
  MenubarShortcut,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSub,
  MenubarSubTrigger,
  MenubarSubContent,
}
[V0_FILE]typescriptreact:file="components/ui/navigation-menu.tsx" isMerged="true"
import * as React from 'react'
import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
import { cva } from 'class-variance-authority'
import { ChevronDownIcon } from 'lucide-react'

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

function NavigationMenu({
  className,
  children,
  viewport = true,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
  viewport?: boolean
}) {
  return (
    <NavigationMenuPrimitive.Root
      data-slot="navigation-menu"
      data-viewport={viewport}
      className={cn(
        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
        className,
      )}
      {...props}
    >
      {children}
      {viewport && <NavigationMenuViewport />}
    </NavigationMenuPrimitive.Root>
  )
}

function NavigationMenuList({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
  return (
    <NavigationMenuPrimitive.List
      data-slot="navigation-menu-list"
      className={cn(
        'group flex flex-1 list-none items-center justify-center gap-1',
        className,
      )}
      {...props}
    />
  )
}

function NavigationMenuItem({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
  return (
    <NavigationMenuPrimitive.Item
      data-slot="navigation-menu-item"
      className={cn('relative', className)}
      {...props}
    />
  )
}

const navigationMenuTriggerStyle = cva(
  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1',
)

function NavigationMenuTrigger({
  className,
  children,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
  return (
    <NavigationMenuPrimitive.Trigger
      data-slot="navigation-menu-trigger"
      className={cn(navigationMenuTriggerStyle(), 'group', className)}
      {...props}
    >
      {children}{' '}
      <ChevronDownIcon
        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
        aria-hidden="true"
      />
    </NavigationMenuPrimitive.Trigger>
  )
}

function NavigationMenuContent({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
  return (
    <NavigationMenuPrimitive.Content
      data-slot="navigation-menu-content"
      className={cn(
        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
        className,
      )}
      {...props}
    />
  )
}

function NavigationMenuViewport({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
  return (
    <div
      className={'absolute top-full left-0 isolate z-50 flex justify-center'}
    >
      <NavigationMenuPrimitive.Viewport
        data-slot="navigation-menu-viewport"
        className={cn(
          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]',
          className,
        )}
        {...props}
      />
    </div>
  )
}

function NavigationMenuLink({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
  return (
    <NavigationMenuPrimitive.Link
      data-slot="navigation-menu-link"
      className={cn(
        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function NavigationMenuIndicator({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
  return (
    <NavigationMenuPrimitive.Indicator
      data-slot="navigation-menu-indicator"
      className={cn(
        'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
        className,
      )}
      {...props}
    >
      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
    </NavigationMenuPrimitive.Indicator>
  )
}

export {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
  navigationMenuTriggerStyle,
}
[V0_FILE]typescriptreact:file="components/ui/pagination.tsx" isMerged="true"
import * as React from 'react'
import {
  ChevronLeftIcon,
  ChevronRightIcon,
  MoreHorizontalIcon,
} from 'lucide-react'

import { cn } from '@/lib/utils'
import { Button, buttonVariants } from '@/components/ui/button'

function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
  return (
    <nav
      role="navigation"
      aria-label="pagination"
      data-slot="pagination"
      className={cn('mx-auto flex w-full justify-center', className)}
      {...props}
    />
  )
}

function PaginationContent({
  className,
  ...props
}: React.ComponentProps<'ul'>) {
  return (
    <ul
      data-slot="pagination-content"
      className={cn('flex flex-row items-center gap-1', className)}
      {...props}
    />
  )
}

function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
  return <li data-slot="pagination-item" {...props} />
}

type PaginationLinkProps = {
  isActive?: boolean
} & Pick<React.ComponentProps<typeof Button>, 'size'> &
  React.ComponentProps<'a'>

function PaginationLink({
  className,
  isActive,
  size = 'icon',
  ...props
}: PaginationLinkProps) {
  return (
    <a
      aria-current={isActive ? 'page' : undefined}
      data-slot="pagination-link"
      data-active={isActive}
      className={cn(
        buttonVariants({
          variant: isActive ? 'outline' : 'ghost',
          size,
        }),
        className,
      )}
      {...props}
    />
  )
}

function PaginationPrevious({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) {
  return (
    <PaginationLink
      aria-label="Go to previous page"
      size="default"
      className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
      {...props}
    >
      <ChevronLeftIcon />
      <span className="hidden sm:block">Previous</span>
    </PaginationLink>
  )
}

function PaginationNext({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) {
  return (
    <PaginationLink
      aria-label="Go to next page"
      size="default"
      className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
      {...props}
    >
      <span className="hidden sm:block">Next</span>
      <ChevronRightIcon />
    </PaginationLink>
  )
}

function PaginationEllipsis({
  className,
  ...props
}: React.ComponentProps<'span'>) {
  return (
    <span
      aria-hidden
      data-slot="pagination-ellipsis"
      className={cn('flex size-9 items-center justify-center', className)}
      {...props}
    >
      <MoreHorizontalIcon className="size-4" />
      <span className="sr-only">More pages</span>
    </span>
  )
}

export {
  Pagination,
  PaginationContent,
  PaginationLink,
  PaginationItem,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
}
[V0_FILE]typescriptreact:file="components/ui/popover.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as PopoverPrimitive from '@radix-ui/react-popover'

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

function Popover({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
  return <PopoverPrimitive.Root data-slot="popover" {...props} />
}

function PopoverTrigger({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
}

function PopoverContent({
  className,
  align = 'center',
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
  return (
    <PopoverPrimitive.Portal>
      <PopoverPrimitive.Content
        data-slot="popover-content"
        align={align}
        sideOffset={sideOffset}
        className={cn(
          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
          className,
        )}
        {...props}
      />
    </PopoverPrimitive.Portal>
  )
}

function PopoverAnchor({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
}

export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
[V0_FILE]typescriptreact:file="components/ui/progress.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as ProgressPrimitive from '@radix-ui/react-progress'

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

function Progress({
  className,
  value,
  ...props
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
  return (
    <ProgressPrimitive.Root
      data-slot="progress"
      className={cn(
        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
        className,
      )}
      {...props}
    >
      <ProgressPrimitive.Indicator
        data-slot="progress-indicator"
        className="bg-primary h-full w-full flex-1 transition-all"
        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
      />
    </ProgressPrimitive.Root>
  )
}

export { Progress }
[V0_FILE]typescriptreact:file="components/ui/radio-group.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
import { CircleIcon } from 'lucide-react'

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

function RadioGroup({
  className,
  ...props
}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
  return (
    <RadioGroupPrimitive.Root
      data-slot="radio-group"
      className={cn('grid gap-3', className)}
      {...props}
    />
  )
}

function RadioGroupItem({
  className,
  ...props
}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
  return (
    <RadioGroupPrimitive.Item
      data-slot="radio-group-item"
      className={cn(
        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator
        data-slot="radio-group-indicator"
        className="relative flex items-center justify-center"
      >
        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
}

export { RadioGroup, RadioGroupItem }
[V0_FILE]typescriptreact:file="components/ui/resizable.tsx" isMerged="true"
'use client'

import * as React from 'react'
import { GripVerticalIcon } from 'lucide-react'
import * as ResizablePrimitive from 'react-resizable-panels'

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

function ResizablePanelGroup({
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
  return (
    <ResizablePrimitive.PanelGroup
      data-slot="resizable-panel-group"
      className={cn(
        'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
        className,
      )}
      {...props}
    />
  )
}

function ResizablePanel({
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
}

function ResizableHandle({
  withHandle,
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
  withHandle?: boolean
}) {
  return (
    <ResizablePrimitive.PanelResizeHandle
      data-slot="resizable-handle"
      className={cn(
        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
        className,
      )}
      {...props}
    >
      {withHandle && (
        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
          <GripVerticalIcon className="size-2.5" />
        </div>
      )}
    </ResizablePrimitive.PanelResizeHandle>
  )
}

export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
[V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'

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

function ScrollArea({
  className,
  children,
  ...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
  return (
    <ScrollAreaPrimitive.Root
      data-slot="scroll-area"
      className={cn('relative', className)}
      {...props}
    >
      <ScrollAreaPrimitive.Viewport
        data-slot="scroll-area-viewport"
        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
      >
        {children}
      </ScrollAreaPrimitive.Viewport>
      <ScrollBar />
      <ScrollAreaPrimitive.Corner />
    </ScrollAreaPrimitive.Root>
  )
}

function ScrollBar({
  className,
  orientation = 'vertical',
  ...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
  return (
    <ScrollAreaPrimitive.ScrollAreaScrollbar
      data-slot="scroll-area-scrollbar"
      orientation={orientation}
      className={cn(
        'flex touch-none p-px transition-colors select-none',
        orientation === 'vertical' &&
          'h-full w-2.5 border-l border-l-transparent',
        orientation === 'horizontal' &&
          'h-2.5 flex-col border-t border-t-transparent',
        className,
      )}
      {...props}
    >
      <ScrollAreaPrimitive.ScrollAreaThumb
        data-slot="scroll-area-thumb"
        className="bg-border relative flex-1 rounded-full"
      />
    </ScrollAreaPrimitive.ScrollAreaScrollbar>
  )
}

export { ScrollArea, ScrollBar }
[V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as SelectPrimitive from '@radix-ui/react-select'
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'

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

function Select({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
  return <SelectPrimitive.Root data-slot="select" {...props} />
}

function SelectGroup({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
  return <SelectPrimitive.Group data-slot="select-group" {...props} />
}

function SelectValue({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
  return <SelectPrimitive.Value data-slot="select-value" {...props} />
}

function SelectTrigger({
  className,
  size = 'default',
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
  size?: 'sm' | 'default'
}) {
  return (
    <SelectPrimitive.Trigger
      data-slot="select-trigger"
      data-size={size}
      className={cn(
        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      {children}
      <SelectPrimitive.Icon asChild>
        <ChevronDownIcon className="size-4 opacity-50" />
      </SelectPrimitive.Icon>
    </SelectPrimitive.Trigger>
  )
}

function SelectContent({
  className,
  children,
  position = 'popper',
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
  return (
    <SelectPrimitive.Portal>
      <SelectPrimitive.Content
        data-slot="select-content"
        className={cn(
          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
          position === 'popper' &&
            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
          className,
        )}
        position={position}
        {...props}
      >
        <SelectScrollUpButton />
        <SelectPrimitive.Viewport
          className={cn(
            'p-1',
            position === 'popper' &&
              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
          )}
        >
          {children}
        </SelectPrimitive.Viewport>
        <SelectScrollDownButton />
      </SelectPrimitive.Content>
    </SelectPrimitive.Portal>
  )
}

function SelectLabel({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
  return (
    <SelectPrimitive.Label
      data-slot="select-label"
      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
      {...props}
    />
  )
}

function SelectItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
  return (
    <SelectPrimitive.Item
      data-slot="select-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
        className,
      )}
      {...props}
    >
      <span className="absolute right-2 flex size-3.5 items-center justify-center">
        <SelectPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </SelectPrimitive.ItemIndicator>
      </span>
      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
    </SelectPrimitive.Item>
  )
}

function SelectSeparator({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
  return (
    <SelectPrimitive.Separator
      data-slot="select-separator"
      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
      {...props}
    />
  )
}

function SelectScrollUpButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
  return (
    <SelectPrimitive.ScrollUpButton
      data-slot="select-scroll-up-button"
      className={cn(
        'flex cursor-default items-center justify-center py-1',
        className,
      )}
      {...props}
    >
      <ChevronUpIcon className="size-4" />
    </SelectPrimitive.ScrollUpButton>
  )
}

function SelectScrollDownButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
  return (
    <SelectPrimitive.ScrollDownButton
      data-slot="select-scroll-down-button"
      className={cn(
        'flex cursor-default items-center justify-center py-1',
        className,
      )}
      {...props}
    >
      <ChevronDownIcon className="size-4" />
    </SelectPrimitive.ScrollDownButton>
  )
}

export {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectScrollDownButton,
  SelectScrollUpButton,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
}
[V0_FILE]typescriptreact:file="components/ui/separator.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as SeparatorPrimitive from '@radix-ui/react-separator'

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

function Separator({
  className,
  orientation = 'horizontal',
  decorative = true,
  ...props
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
  return (
    <SeparatorPrimitive.Root
      data-slot="separator"
      decorative={decorative}
      orientation={orientation}
      className={cn(
        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
        className,
      )}
      {...props}
    />
  )
}

export { Separator }
[V0_FILE]typescriptreact:file="components/ui/sheet.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as SheetPrimitive from '@radix-ui/react-dialog'
import { XIcon } from 'lucide-react'

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

function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
  return <SheetPrimitive.Root data-slot="sheet" {...props} />
}

function SheetTrigger({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
}

function SheetClose({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
}

function SheetPortal({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
}

function SheetOverlay({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
  return (
    <SheetPrimitive.Overlay
      data-slot="sheet-overlay"
      className={cn(
        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
        className,
      )}
      {...props}
    />
  )
}

function SheetContent({
  className,
  children,
  side = 'right',
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
  side?: 'top' | 'right' | 'bottom' | 'left'
}) {
  return (
    <SheetPortal>
      <SheetOverlay />
      <SheetPrimitive.Content
        data-slot="sheet-content"
        className={cn(
          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
          side === 'right' &&
            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
          side === 'left' &&
            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
          side === 'top' &&
            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
          side === 'bottom' &&
            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
          className,
        )}
        {...props}
      >
        {children}
        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
          <XIcon className="size-4" />
          <span className="sr-only">Close</span>
        </SheetPrimitive.Close>
      </SheetPrimitive.Content>
    </SheetPortal>
  )
}

function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sheet-header"
      className={cn('flex flex-col gap-1.5 p-4', className)}
      {...props}
    />
  )
}

function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sheet-footer"
      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
      {...props}
    />
  )
}

function SheetTitle({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
  return (
    <SheetPrimitive.Title
      data-slot="sheet-title"
      className={cn('text-foreground font-semibold', className)}
      {...props}
    />
  )
}

function SheetDescription({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
  return (
    <SheetPrimitive.Description
      data-slot="sheet-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

export {
  Sheet,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
}
[V0_FILE]typescriptreact:file="components/ui/sidebar.tsx" isMerged="true"
'use client'

import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, VariantProps } from 'class-variance-authority'
import { PanelLeftIcon } from 'lucide-react'

import { useIsMobile } from '@/hooks/use-mobile'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Separator } from '@/components/ui/separator'
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from '@/components/ui/sheet'
import { Skeleton } from '@/components/ui/skeleton'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'

const SIDEBAR_COOKIE_NAME = 'sidebar_state'
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = '16rem'
const SIDEBAR_WIDTH_MOBILE = '18rem'
const SIDEBAR_WIDTH_ICON = '3rem'
const SIDEBAR_KEYBOARD_SHORTCUT = 'b'

type SidebarContextProps = {
  state: 'expanded' | 'collapsed'
  open: boolean
  setOpen: (open: boolean) => void
  openMobile: boolean
  setOpenMobile: (open: boolean) => void
  isMobile: boolean
  toggleSidebar: () => void
}

const SidebarContext = React.createContext<SidebarContextProps | null>(null)

function useSidebar() {
  const context = React.useContext(SidebarContext)
  if (!context) {
    throw new Error('useSidebar must be used within a SidebarProvider.')
  }

return context
}

function SidebarProvider({
  defaultOpen = true,
  open: openProp,
  onOpenChange: setOpenProp,
  className,
  style,
  children,
  ...props
}: React.ComponentProps<'div'> & {
  defaultOpen?: boolean
  open?: boolean
  onOpenChange?: (open: boolean) => void
}) {
  const isMobile = useIsMobile()
  const [openMobile, setOpenMobile] = React.useState(false)

// This is the internal state of the sidebar.
  // We use openProp and setOpenProp for control from outside the component.
  const [_open, _setOpen] = React.useState(defaultOpen)
  const open = openProp ?? _open
  const setOpen = React.useCallback(
    (value: boolean | ((value: boolean) => boolean)) => {
      const openState = typeof value === 'function' ? value(open) : value
      if (setOpenProp) {
        setOpenProp(openState)
      } else {
        _setOpen(openState)
      }

// This sets the cookie to keep the sidebar state.
      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
    },
    [setOpenProp, open],
  )

// Helper to toggle the sidebar.
  const toggleSidebar = React.useCallback(() => {
    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
  }, [isMobile, setOpen, setOpenMobile])

// Adds a keyboard shortcut to toggle the sidebar.
  React.useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (
        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
        (event.metaKey || event.ctrlKey)
      ) {
        event.preventDefault()
        toggleSidebar()
      }
    }

window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [toggleSidebar])

// We add a state so that we can do data-state="expanded" or "collapsed".
  // This makes it easier to style the sidebar with Tailwind classes.
  const state = open ? 'expanded' : 'collapsed'

const contextValue = React.useMemo<SidebarContextProps>(
    () => ({
      state,
      open,
      setOpen,
      isMobile,
      openMobile,
      setOpenMobile,
      toggleSidebar,
    }),
    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
  )

return (
    <SidebarContext.Provider value={contextValue}>
      <TooltipProvider delayDuration={0}>
        <div
          data-slot="sidebar-wrapper"
          style={
            {
              '--sidebar-width': SIDEBAR_WIDTH,
              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
              ...style,
            } as React.CSSProperties
          }
          className={cn(
            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
            className,
          )}
          {...props}
        >
          {children}
        </div>
      </TooltipProvider>
    </SidebarContext.Provider>
  )
}

function Sidebar({
  side = 'left',
  variant = 'sidebar',
  collapsible = 'offcanvas',
  className,
  children,
  ...props
}: React.ComponentProps<'div'> & {
  side?: 'left' | 'right'
  variant?: 'sidebar' | 'floating' | 'inset'
  collapsible?: 'offcanvas' | 'icon' | 'none'
}) {
  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()

if (collapsible === 'none') {
    return (
      <div
        data-slot="sidebar"
        className={cn(
          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
          className,
        )}
        {...props}
      >
        {children}
      </div>
    )
  }

if (isMobile) {
    return (
      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
        <SheetContent
          data-sidebar="sidebar"
          data-slot="sidebar"
          data-mobile="true"
          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
          style={
            {
              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
            } as React.CSSProperties
          }
          side={side}
        >
          <SheetHeader className="sr-only">
            <SheetTitle>Sidebar</SheetTitle>
            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
          </SheetHeader>
          <div className="flex h-full w-full flex-col">{children}</div>
        </SheetContent>
      </Sheet>
    )
  }

return (
    <div
      className="group peer text-sidebar-foreground hidden md:block"
      data-state={state}
      data-collapsible={state === 'collapsed' ? collapsible : ''}
      data-variant={variant}
      data-side={side}
      data-slot="sidebar"
    >
      {/* This is what handles the sidebar gap on desktop */}
      <div
        data-slot="sidebar-gap"
        className={cn(
          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
          'group-data-[collapsible=offcanvas]:w-0',
          'group-data-[side=right]:rotate-180',
          variant === 'floating' || variant === 'inset'
            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
        )}
      />
      <div
        data-slot="sidebar-container"
        className={cn(
          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
          side === 'left'
            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
          // Adjust the padding for floating and inset variants.
          variant === 'floating' || variant === 'inset'
            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
          className,
        )}
        {...props}
      >
        <div
          data-sidebar="sidebar"
          data-slot="sidebar-inner"
          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
        >
          {children}
        </div>
      </div>
    </div>
  )
}

function SidebarTrigger({
  className,
  onClick,
  ...props
}: React.ComponentProps<typeof Button>) {
  const { toggleSidebar } = useSidebar()

return (
    <Button
      data-sidebar="trigger"
      data-slot="sidebar-trigger"
      variant="ghost"
      size="icon"
      className={cn('size-7', className)}
      onClick={(event) => {
        onClick?.(event)
        toggleSidebar()
      }}
      {...props}
    >
      <PanelLeftIcon />
      <span className="sr-only">Toggle Sidebar</span>
    </Button>
  )
}

function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
  const { toggleSidebar } = useSidebar()

return (
    <button
      data-sidebar="rail"
      data-slot="sidebar-rail"
      aria-label="Toggle Sidebar"
      tabIndex={-1}
      onClick={toggleSidebar}
      title="Toggle Sidebar"
      className={cn(
        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
        className,
      )}
      {...props}
    />
  )
}

function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
  return (
    <main
      data-slot="sidebar-inset"
      className={cn(
        'bg-background relative flex w-full flex-1 flex-col',
        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
        className,
      )}
      {...props}
    />
  )
}

function SidebarInput({
  className,
  ...props
}: React.ComponentProps<typeof Input>) {
  return (
    <Input
      data-slot="sidebar-input"
      data-sidebar="input"
      className={cn('bg-background h-8 w-full shadow-none', className)}
      {...props}
    />
  )
}

function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-header"
      data-sidebar="header"
      className={cn('flex flex-col gap-2 p-2', className)}
      {...props}
    />
  )
}

function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-footer"
      data-sidebar="footer"
      className={cn('flex flex-col gap-2 p-2', className)}
      {...props}
    />
  )
}

function SidebarSeparator({
  className,
  ...props
}: React.ComponentProps<typeof Separator>) {
  return (
    <Separator
      data-slot="sidebar-separator"
      data-sidebar="separator"
      className={cn('bg-sidebar-border mx-2 w-auto', className)}
      {...props}
    />
  )
}

function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-content"
      data-sidebar="content"
      className={cn(
        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
        className,
      )}
      {...props}
    />
  )
}

function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-group"
      data-sidebar="group"
      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
      {...props}
    />
  )
}

function SidebarGroupLabel({
  className,
  asChild = false,
  ...props
}: React.ComponentProps<'div'> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : 'div'

return (
    <Comp
      data-slot="sidebar-group-label"
      data-sidebar="group-label"
      className={cn(
        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
        className,
      )}
      {...props}
    />
  )
}

function SidebarGroupAction({
  className,
  asChild = false,
  ...props
}: React.ComponentProps<'button'> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : 'button'

return (
    <Comp
      data-slot="sidebar-group-action"
      data-sidebar="group-action"
      className={cn(
        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
        // Increases the hit area of the button on mobile.
        'after:absolute after:-inset-2 md:after:hidden',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
}

function SidebarGroupContent({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-group-content"
      data-sidebar="group-content"
      className={cn('w-full text-sm', className)}
      {...props}
    />
  )
}

function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
  return (
    <ul
      data-slot="sidebar-menu"
      data-sidebar="menu"
      className={cn('flex w-full min-w-0 flex-col gap-1', className)}
      {...props}
    />
  )
}

function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
  return (
    <li
      data-slot="sidebar-menu-item"
      data-sidebar="menu-item"
      className={cn('group/menu-item relative', className)}
      {...props}
    />
  )
}

const sidebarMenuButtonVariants = cva(
  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
  {
    variants: {
      variant: {
        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
        outline:
          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
      },
      size: {
        default: 'h-8 text-sm',
        sm: 'h-7 text-xs',
        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function SidebarMenuButton({
  asChild = false,
  isActive = false,
  variant = 'default',
  size = 'default',
  tooltip,
  className,
  ...props
}: React.ComponentProps<'button'> & {
  asChild?: boolean
  isActive?: boolean
  tooltip?: string | React.ComponentProps<typeof TooltipContent>
} & VariantProps<typeof sidebarMenuButtonVariants>) {
  const Comp = asChild ? Slot : 'button'
  const { isMobile, state } = useSidebar()

const button = (
    <Comp
      data-slot="sidebar-menu-button"
      data-sidebar="menu-button"
      data-size={size}
      data-active={isActive}
      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
      {...props}
    />
  )

if (!tooltip) {
    return button
  }

if (typeof tooltip === 'string') {
    tooltip = {
      children: tooltip,
    }
  }

return (
    <Tooltip>
      <TooltipTrigger asChild>{button}</TooltipTrigger>
      <TooltipContent
        side="right"
        align="center"
        hidden={state !== 'collapsed' || isMobile}
        {...tooltip}
      />
    </Tooltip>
  )
}

function SidebarMenuAction({
  className,
  asChild = false,
  showOnHover = false,
  ...props
}: React.ComponentProps<'button'> & {
  asChild?: boolean
  showOnHover?: boolean
}) {
  const Comp = asChild ? Slot : 'button'

return (
    <Comp
      data-slot="sidebar-menu-action"
      data-sidebar="menu-action"
      className={cn(
        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
        // Increases the hit area of the button on mobile.
        'after:absolute after:-inset-2 md:after:hidden',
        'peer-data-[size=sm]/menu-button:top-1',
        'peer-data-[size=default]/menu-button:top-1.5',
        'peer-data-[size=lg]/menu-button:top-2.5',
        'group-data-[collapsible=icon]:hidden',
        showOnHover &&
          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
        className,
      )}
      {...props}
    />
  )
}

function SidebarMenuBadge({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-menu-badge"
      data-sidebar="menu-badge"
      className={cn(
        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
        'peer-data-[size=sm]/menu-button:top-1',
        'peer-data-[size=default]/menu-button:top-1.5',
        'peer-data-[size=lg]/menu-button:top-2.5',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
}

function SidebarMenuSkeleton({
  className,
  showIcon = false,
  ...props
}: React.ComponentProps<'div'> & {
  showIcon?: boolean
}) {
  // Random width between 50 to 90%.
  const width = React.useMemo(() => {
    return `${Math.floor(Math.random() * 40) + 50}%`
  }, [])

return (
    <div
      data-slot="sidebar-menu-skeleton"
      data-sidebar="menu-skeleton"
      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
      {...props}
    >
      {showIcon && (
        <Skeleton
          className="size-4 rounded-md"
          data-sidebar="menu-skeleton-icon"
        />
      )}
      <Skeleton
        className="h-4 max-w-(--skeleton-width) flex-1"
        data-sidebar="menu-skeleton-text"
        style={
          {
            '--skeleton-width': width,
          } as React.CSSProperties
        }
      />
    </div>
  )
}

function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
  return (
    <ul
      data-slot="sidebar-menu-sub"
      data-sidebar="menu-sub"
      className={cn(
        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
}

function SidebarMenuSubItem({
  className,
  ...props
}: React.ComponentProps<'li'>) {
  return (
    <li
      data-slot="sidebar-menu-sub-item"
      data-sidebar="menu-sub-item"
      className={cn('group/menu-sub-item relative', className)}
      {...props}
    />
  )
}

function SidebarMenuSubButton({
  asChild = false,
  size = 'md',
  isActive = false,
  className,
  ...props
}: React.ComponentProps<'a'> & {
  asChild?: boolean
  size?: 'sm' | 'md'
  isActive?: boolean
}) {
  const Comp = asChild ? Slot : 'a'

return (
    <Comp
      data-slot="sidebar-menu-sub-button"
      data-sidebar="menu-sub-button"
      data-size={size}
      data-active={isActive}
      className={cn(
        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
        size === 'sm' && 'text-xs',
        size === 'md' && 'text-sm',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
}

export {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSkeleton,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
  useSidebar,
}
[V0_FILE]typescriptreact:file="components/ui/skeleton.tsx" isMerged="true"
import { cn } from '@/lib/utils'

function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="skeleton"
      className={cn('bg-accent animate-pulse rounded-md', className)}
      {...props}
    />
  )
}

export { Skeleton }
[V0_FILE]typescriptreact:file="components/ui/slider.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as SliderPrimitive from '@radix-ui/react-slider'

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

function Slider({
  className,
  defaultValue,
  value,
  min = 0,
  max = 100,
  ...props
}: React.ComponentProps<typeof SliderPrimitive.Root>) {
  const _values = React.useMemo(
    () =>
      Array.isArray(value)
        ? value
        : Array.isArray(defaultValue)
          ? defaultValue
          : [min, max],
    [value, defaultValue, min, max],
  )

return (
    <SliderPrimitive.Root
      data-slot="slider"
      defaultValue={defaultValue}
      value={value}
      min={min}
      max={max}
      className={cn(
        'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
        className,
      )}
      {...props}
    >
      <SliderPrimitive.Track
        data-slot="slider-track"
        className={
          'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'
        }
      >
        <SliderPrimitive.Range
          data-slot="slider-range"
          className={
            'bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full'
          }
        />
      </SliderPrimitive.Track>
      {Array.from({ length: _values.length }, (_, index) => (
        <SliderPrimitive.Thumb
          data-slot="slider-thumb"
          key={index}
          className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
        />
      ))}
    </SliderPrimitive.Root>
  )
}

export { Slider }
[V0_FILE]typescriptreact:file="components/ui/sonner.tsx" isMerged="true"
'use client'

import { useTheme } from 'next-themes'
import { Toaster as Sonner, ToasterProps } from 'sonner'

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = 'system' } = useTheme()

return (
    <Sonner
      theme={theme as ToasterProps['theme']}
      className="toaster group"
      style={
        {
          '--normal-bg': 'var(--popover)',
          '--normal-text': 'var(--popover-foreground)',
          '--normal-border': 'var(--border)',
        } as React.CSSProperties
      }
      {...props}
    />
  )
}

export { Toaster }
[V0_FILE]typescriptreact:file="components/ui/spinner.tsx" isMerged="true"
import { Loader2Icon } from 'lucide-react'

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

function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
  return (
    <Loader2Icon
      role="status"
      aria-label="Loading"
      className={cn('size-4 animate-spin', className)}
      {...props}
    />
  )
}

export { Spinner }
[V0_FILE]typescriptreact:file="components/ui/switch.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as SwitchPrimitive from '@radix-ui/react-switch'

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

function Switch({
  className,
  ...props
}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
  return (
    <SwitchPrimitive.Root
      data-slot="switch"
      className={cn(
        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
      {...props}
    >
      <SwitchPrimitive.Thumb
        data-slot="switch-thumb"
        className={
          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
        }
      />
    </SwitchPrimitive.Root>
  )
}

export { Switch }
[V0_FILE]typescriptreact:file="components/ui/table.tsx" isMerged="true"
'use client'

import * as React from 'react'

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

function Table({ className, ...props }: React.ComponentProps<'table'>) {
  return (
    <div
      data-slot="table-container"
      className="relative w-full overflow-x-auto"
    >
      <table
        data-slot="table"
        className={cn('w-full caption-bottom text-sm', className)}
        {...props}
      />
    </div>
  )
}

function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
  return (
    <thead
      data-slot="table-header"
      className={cn('[&_tr]:border-b', className)}
      {...props}
    />
  )
}

function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
  return (
    <tbody
      data-slot="table-body"
      className={cn('[&_tr:last-child]:border-0', className)}
      {...props}
    />
  )
}

function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
  return (
    <tfoot
      data-slot="table-footer"
      className={cn(
        'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
        className,
      )}
      {...props}
    />
  )
}

function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
  return (
    <tr
      data-slot="table-row"
      className={cn(
        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
        className,
      )}
      {...props}
    />
  )
}

function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
  return (
    <th
      data-slot="table-head"
      className={cn(
        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
        className,
      )}
      {...props}
    />
  )
}

function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
  return (
    <td
      data-slot="table-cell"
      className={cn(
        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
        className,
      )}
      {...props}
    />
  )
}

function TableCaption({
  className,
  ...props
}: React.ComponentProps<'caption'>) {
  return (
    <caption
      data-slot="table-caption"
      className={cn('text-muted-foreground mt-4 text-sm', className)}
      {...props}
    />
  )
}

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
}
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as TabsPrimitive from '@radix-ui/react-tabs'

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

function Tabs({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
  return (
    <TabsPrimitive.Root
      data-slot="tabs"
      className={cn('flex flex-col gap-2', className)}
      {...props}
    />
  )
}

function TabsList({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.List>) {
  return (
    <TabsPrimitive.List
      data-slot="tabs-list"
      className={cn(
        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
        className,
      )}
      {...props}
    />
  )
}

function TabsTrigger({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
  return (
    <TabsPrimitive.Trigger
      data-slot="tabs-trigger"
      className={cn(
        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function TabsContent({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
  return (
    <TabsPrimitive.Content
      data-slot="tabs-content"
      className={cn('flex-1 outline-none', className)}
      {...props}
    />
  )
}

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
import * as React from 'react'

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

function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        className,
      )}
      {...props}
    />
  )
}

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/toast.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as ToastPrimitives from '@radix-ui/react-toast'
import { cva, type VariantProps } from 'class-variance-authority'
import { X } from 'lucide-react'

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

const ToastProvider = ToastPrimitives.Provider

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
      className,
    )}
    {...props}
  />
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
  {
    variants: {
      variant: {
        default: 'border bg-background text-foreground',
        destructive:
          'destructive group border-destructive bg-destructive text-destructive-foreground',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
    VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return (
    <ToastPrimitives.Root
      ref={ref}
      className={cn(toastVariants({ variant }), className)}
      {...props}
    />
  )
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
      className,
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
      className,
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title
    ref={ref}
    className={cn('text-sm font-semibold', className)}
    {...props}
  />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description
    ref={ref}
    className={cn('text-sm opacity-90', className)}
    {...props}
  />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}
[V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isMerged="true"
'use client'

import { useToast } from '@/hooks/use-toast'
import {
  Toast,
  ToastClose,
  ToastDescription,
  ToastProvider,
  ToastTitle,
  ToastViewport,
} from '@/components/ui/toast'

export function Toaster() {
  const { toasts } = useToast()

return (
    <ToastProvider>
      {toasts.map(function ({ id, title, description, action, ...props }) {
        return (
          <Toast key={id} {...props}>
            <div className="grid gap-1">
              {title && <ToastTitle>{title}</ToastTitle>}
              {description && (
                <ToastDescription>{description}</ToastDescription>
              )}
            </div>
            {action}
            <ToastClose />
          </Toast>
        )
      })}
      <ToastViewport />
    </ToastProvider>
  )
}
[V0_FILE]typescriptreact:file="components/ui/toggle-group.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
import { type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'
import { toggleVariants } from '@/components/ui/toggle'

const ToggleGroupContext = React.createContext<
  VariantProps<typeof toggleVariants>
>({
  size: 'default',
  variant: 'default',
})

function ToggleGroup({
  className,
  variant,
  size,
  children,
  ...props
}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
  VariantProps<typeof toggleVariants>) {
  return (
    <ToggleGroupPrimitive.Root
      data-slot="toggle-group"
      data-variant={variant}
      data-size={size}
      className={cn(
        'group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs',
        className,
      )}
      {...props}
    >
      <ToggleGroupContext.Provider value={{ variant, size }}>
        {children}
      </ToggleGroupContext.Provider>
    </ToggleGroupPrimitive.Root>
  )
}

function ToggleGroupItem({
  className,
  children,
  variant,
  size,
  ...props
}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
  VariantProps<typeof toggleVariants>) {
  const context = React.useContext(ToggleGroupContext)

return (
    <ToggleGroupPrimitive.Item
      data-slot="toggle-group-item"
      data-variant={context.variant || variant}
      data-size={context.size || size}
      className={cn(
        toggleVariants({
          variant: context.variant || variant,
          size: context.size || size,
        }),
        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
        className,
      )}
      {...props}
    >
      {children}
    </ToggleGroupPrimitive.Item>
  )
}

export { ToggleGroup, ToggleGroupItem }
[V0_FILE]typescriptreact:file="components/ui/toggle.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as TogglePrimitive from '@radix-ui/react-toggle'
import { cva, type VariantProps } from 'class-variance-authority'

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

const toggleVariants = cva(
  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        outline:
          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
      },
      size: {
        default: 'h-9 px-2 min-w-9',
        sm: 'h-8 px-1.5 min-w-8',
        lg: 'h-10 px-2.5 min-w-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function Toggle({
  className,
  variant,
  size,
  ...props
}: React.ComponentProps<typeof TogglePrimitive.Root> &
  VariantProps<typeof toggleVariants>) {
  return (
    <TogglePrimitive.Root
      data-slot="toggle"
      className={cn(toggleVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Toggle, toggleVariants }
[V0_FILE]typescriptreact:file="components/ui/tooltip.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as TooltipPrimitive from '@radix-ui/react-tooltip'

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

function TooltipProvider({
  delayDuration = 0,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
  return (
    <TooltipPrimitive.Provider
      data-slot="tooltip-provider"
      delayDuration={delayDuration}
      {...props}
    />
  )
}

function Tooltip({
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
  return (
    <TooltipProvider>
      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
    </TooltipProvider>
  )
}

function TooltipTrigger({
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
}

function TooltipContent({
  className,
  sideOffset = 0,
  children,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
  return (
    <TooltipPrimitive.Portal>
      <TooltipPrimitive.Content
        data-slot="tooltip-content"
        sideOffset={sideOffset}
        className={cn(
          'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
          className,
        )}
        {...props}
      >
        {children}
        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
      </TooltipPrimitive.Content>
    </TooltipPrimitive.Portal>
  )
}

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
[V0_FILE]typescriptreact:file="components/ui/use-mobile.tsx" isMerged="true"
import * as React from 'react'

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener('change', onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener('change', onChange)
  }, [])

return !!isMobile
}
[V0_FILE]typescript:file="components/ui/use-toast.ts" isMerged="true"
'use client'

// Inspired by react-hot-toast library
import * as React from 'react'

import type { ToastActionElement, ToastProps } from '@/components/ui/toast'

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: 'ADD_TOAST',
  UPDATE_TOAST: 'UPDATE_TOAST',
  DISMISS_TOAST: 'DISMISS_TOAST',
  REMOVE_TOAST: 'REMOVE_TOAST',
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType['ADD_TOAST']
      toast: ToasterToast
    }
  | {
      type: ActionType['UPDATE_TOAST']
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType['DISMISS_TOAST']
      toastId?: ToasterToast['id']
    }
  | {
      type: ActionType['REMOVE_TOAST']
      toastId?: ToasterToast['id']
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: 'REMOVE_TOAST',
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'ADD_TOAST':
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

case 'UPDATE_TOAST':
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t,
        ),
      }

case 'DISMISS_TOAST': {
      const { toastId } = action

// ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t,
        ),
      }
    }
    case 'REMOVE_TOAST':
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, 'id'>

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: 'UPDATE_TOAST',
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })

dispatch({
    type: 'ADD_TOAST',
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
  }
}

export { useToast, toast }
[V0_FILE]json:file="components.json" isMerged="true"
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
[V0_FILE]typescript:file="hooks/use-mobile.ts" isMerged="true"
import * as React from 'react'

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

return !!isMobile
}
[V0_FILE]typescript:file="hooks/use-toast.ts" isMerged="true"
'use client'

// Inspired by react-hot-toast library
import * as React from 'react'

import type { ToastActionElement, ToastProps } from '@/components/ui/toast'

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: 'ADD_TOAST',
  UPDATE_TOAST: 'UPDATE_TOAST',
  DISMISS_TOAST: 'DISMISS_TOAST',
  REMOVE_TOAST: 'REMOVE_TOAST',
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: 'REMOVE_TOAST',
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

case 'UPDATE_TOAST':
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t,
        ),
      }

case 'DISMISS_TOAST': {
      const { toastId } = action

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, 'id'>

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: 'UPDATE_TOAST',
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })

dispatch({
    type: 'ADD_TOAST',
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescript:file="lib/auth.ts" isMerged="true"
// Authentication and authorization utilities
import { apiService, ApiError } from '../api/index'

export interface User {
  id: string
  email: string
  name: string
  role: UserRole
  department?: string
  avatar?: string
}

// Get current user from localStorage
export function getCurrentUser(): User | null {
  if (typeof window === "undefined") return null

const userStr = localStorage.getItem("currentUser")
  // if (!userStr) return null
  if (!userStr) return {
    id: "6",
    email: "manager@dhc.vn",
    name: "Giám đốc Hoàng",
    role: "management",
  }

try {
    return JSON.parse(userStr)
  } catch {
    return null
  }
}

export function setCurrentUser(user: User | null) {
  if (typeof window === "undefined") return

if (user) {
    localStorage.setItem("currentUser", JSON.stringify(user))
  } else {
    localStorage.removeItem("currentUser")
  }
}

export function logout() {
  setCurrentUser(null)
  apiService.clearToken()

// Redirect to login page
  if (typeof window !== 'undefined') {
    window.location.href = '/login'
  }
}

// Map backend roles to frontend roles
function mapBackendRoleToFrontend(backendRole: string): UserRole {
  const roleMapping: Record<string, UserRole> = {
    'Doctor': 'doctor',
    'Nurse': 'nurse',
    'Receptionist': 'reception',
    'PharmacyProvider': 'pharmacy',
    'Admin': 'admin',
    'Manager': 'management',
    'Patient': 'patient'
  }
  return roleMapping[backendRole] || 'patient'
}

// Real login function using API
export async function login(phone: string, password: string): Promise<User> {
  try {
    // Call backend API
    const response = await apiService.authenticateUser({ phone, password })

// Create user object from API response
    const user: User = {
      id: response.user.userId.toString(),
      email: response.user.email || response.user.phone || '',
      name: response.user.fullName || `User ${response.user.phone}`,
      role: mapBackendRoleToFrontend(response.user.role || 'Patient'),
    }

setCurrentUser(user)
    return user
  } catch (error: unknown) {
    if (error instanceof ApiError) {
      if (error.status === 401) {
        throw new Error("Số điện thoại hoặc mật khẩu không đúng")
      }
      throw new Error(`Lỗi đăng nhập: ${error.message}`)
    }
    throw new Error("Không thể kết nối đến server. Vui lòng thử lại sau.")
  }
}

export function getRoleName(role: UserRole): string {
  const roleNames: Record<UserRole, string> = {
    doctor: "Bác sĩ",
    nurse: "Điều dưỡng",
    reception: "Lễ tân",
    pharmacy: "Dược sĩ",
    admin: "Quản trị viên",
    management: "Quản lý",
    patient: "Bệnh nhân",
  }
  return roleNames[role]
}

export function getDashboardPath(role: UserRole): string {
  const paths: Record<UserRole, string> = {
    doctor: "/doctor",
    nurse: "/nurse",
    reception: "/reception",
    pharmacy: "/pharmacy",
    admin: "/admin",
    management: "/management",
    patient: "/",
  }
  return paths[role]
}
[V0_FILE]typescript:file="lib/mock-data.ts" isMerged="true"
// Mock data for the clinic management system

export interface Patient {
  id: string
  name: string
  dateOfBirth: string
  gender: "male" | "female" | "other"
  phone: string
  email?: string
  address: string
  bloodType?: string
  allergies?: string[]
  chronicConditions?: string[]
}

export interface MedicalRecord {
  id: string
  patientId: string
  patientName: string
  date: string
  department: string
  doctor: string
  diagnosis: string
  symptoms: string
  vitalSigns: {
    bloodPressure?: string
    heartRate?: number
    temperature?: number
    weight?: number
    height?: number
  }
  prescriptions: Prescription[]
  labTests: LabTest[]
  notes: string
  status: "active" | "completed" | "follow-up"
}

export interface Prescription {
  id: string
  medication: string
  dosage: string
  frequency: string
  duration: string
  instructions: string
  status: "pending" | "dispensed" | "completed"
}

export interface LabTest {
  id: string
  testName: string
  testType: "lab" | "imaging"
  status: "pending" | "in-progress" | "completed"
  requestedDate: string
  completedDate?: string
  results?: string
  notes?: string
}

export interface Appointment {
  id: string
  patientId: string
  patientName: string
  doctorId: string
  doctorName: string
  department: string
  date: string
  time: string
  status: "scheduled" | "in-progress" | "completed" | "cancelled"
  reason: string
  notes?: string
}

// Mock patients
export const mockPatients: Patient[] = [
  {
    id: "P001",
    name: "Nguyễn Văn An",
    dateOfBirth: "1985-03-15",
    gender: "male",
    phone: "0901234567",
    email: "nguyenvanan@email.com",
    address: "123 Đường Lê Lợi, Quận 1, TP.HCM",
    bloodType: "O+",
    allergies: ["Penicillin"],
    chronicConditions: ["Cao huyết áp"],
  },
  {
    id: "P002",
    name: "Trần Thị Bình",
    dateOfBirth: "1990-07-22",
    gender: "female",
    phone: "0912345678",
    email: "tranthibinh@email.com",
    address: "456 Đường Nguyễn Huệ, Quận 1, TP.HCM",
    bloodType: "A+",
    allergies: [],
    chronicConditions: [],
  },
  {
    id: "P003",
    name: "Lê Minh Châu",
    dateOfBirth: "2018-11-10",
    gender: "female",
    phone: "0923456789",
    address: "789 Đường Trần Hưng Đạo, Quận 5, TP.HCM",
    bloodType: "B+",
    allergies: ["Sữa"],
    chronicConditions: [],
  },
  {
    id: "P004",
    name: "Phạm Văn Dũng",
    dateOfBirth: "1978-05-30",
    gender: "male",
    phone: "0934567890",
    address: "321 Đường Võ Văn Tần, Quận 3, TP.HCM",
    bloodType: "AB+",
    allergies: [],
    chronicConditions: ["Đái tháo đường type 2"],
  },
]

// Mock medical records
export const mockMedicalRecords: MedicalRecord[] = [
  {
    id: "MR001",
    patientId: "P001",
    patientName: "Nguyễn Văn An",
    date: "2025-01-03",
    department: "Khoa Nội",
    doctor: "BS. Nguyễn Văn A",
    diagnosis: "Tăng huyết áp độ 2",
    symptoms: "Đau đầu, chóng mặt, mệt mỏi",
    vitalSigns: {
      bloodPressure: "150/95",
      heartRate: 82,
      temperature: 36.8,
      weight: 75,
      height: 170,
    },
    prescriptions: [
      {
        id: "RX001",
        medication: "Amlodipine 5mg",
        dosage: "1 viên",
        frequency: "1 lần/ngày",
        duration: "30 ngày",
        instructions: "Uống vào buổi sáng sau ăn",
        status: "dispensed",
      },
      {
        id: "RX002",
        medication: "Losartan 50mg",
        dosage: "1 viên",
        frequency: "1 lần/ngày",
        duration: "30 ngày",
        instructions: "Uống vào buổi tối trước khi ngủ",
        status: "dispensed",
      },
    ],
    labTests: [
      {
        id: "LT001",
        testName: "Xét nghiệm máu tổng quát",
        testType: "lab",
        status: "completed",
        requestedDate: "2025-01-03",
        completedDate: "2025-01-04",
        results: "Bình thường",
      },
    ],
    notes: "Bệnh nhân cần theo dõi huyết áp hàng ngày. Tái khám sau 2 tuần.",
    status: "follow-up",
  },
  {
    id: "MR002",
    patientId: "P002",
    patientName: "Trần Thị Bình",
    date: "2025-01-04",
    department: "Khoa Sản - Phụ khoa",
    doctor: "BS. Nguyễn Văn A",
    diagnosis: "Thai kỳ 12 tuần",
    symptoms: "Khám thai định kỳ",
    vitalSigns: {
      bloodPressure: "110/70",
      heartRate: 75,
      temperature: 36.5,
      weight: 58,
      height: 162,
    },
    prescriptions: [
      {
        id: "RX003",
        medication: "Acid folic 5mg",
        dosage: "1 viên",
        frequency: "1 lần/ngày",
        duration: "30 ngày",
        instructions: "Uống vào buổi sáng",
        status: "pending",
      },
      {
        id: "RX004",
        medication: "Vitamin tổng hợp cho bà bầu",
        dosage: "1 viên",
        frequency: "1 lần/ngày",
        duration: "30 ngày",
        instructions: "Uống sau bữa ăn chính",
        status: "pending",
      },
    ],
    labTests: [
      {
        id: "LT002",
        testName: "Siêu âm thai",
        testType: "imaging",
        status: "completed",
        requestedDate: "2025-01-04",
        completedDate: "2025-01-04",
        results: "Thai phát triển bình thường",
      },
    ],
    notes: "Thai phát triển tốt. Tái khám sau 4 tuần.",
    status: "follow-up",
  },
  {
    id: "MR003",
    patientId: "P003",
    patientName: "Lê Minh Châu",
    date: "2025-01-04",
    department: "Nhi khoa",
    doctor: "BS. Nguyễn Văn A",
    diagnosis: "Viêm họng cấp",
    symptoms: "Sốt, đau họng, ho",
    vitalSigns: {
      temperature: 38.5,
      heartRate: 110,
      weight: 22,
      height: 115,
    },
    prescriptions: [
      {
        id: "RX005",
        medication: "Amoxicillin 250mg",
        dosage: "5ml",
        frequency: "2 lần/ngày",
        duration: "7 ngày",
        instructions: "Uống sau ăn sáng và tối",
        status: "pending",
      },
      {
        id: "RX006",
        medication: "Paracetamol 120mg",
        dosage: "5ml",
        frequency: "Khi sốt trên 38.5°C",
        duration: "5 ngày",
        instructions: "Cách nhau ít nhất 4-6 giờ",
        status: "pending",
      },
    ],
    labTests: [],
    notes: "Cho trẻ uống nhiều nước. Tái khám nếu sốt không giảm sau 3 ngày.",
    status: "active",
  },
]

// Mock appointments
export const mockAppointments: Appointment[] = [
  {
    id: "APT001",
    patientId: "P001",
    patientName: "Nguyễn Văn An",
    doctorId: "1",
    doctorName: "BS. Nguyễn Văn A",
    department: "Khoa Nội",
    date: "2025-01-10",
    time: "09:00",
    status: "scheduled",
    reason: "Tái khám cao huyết áp",
    notes: "Mang theo kết quả đo huyết áp tại nhà",
  },
  {
    id: "APT002",
    patientId: "P004",
    patientName: "Phạm Văn Dũng",
    doctorId: "1",
    doctorName: "BS. Nguyễn Văn A",
    department: "Khoa Nội",
    date: "2025-01-05",
    time: "10:30",
    status: "scheduled",
    reason: "Khám định kỳ đái tháo đường",
  },
  {
    id: "APT003",
    patientId: "P002",
    patientName: "Trần Thị Bình",
    doctorId: "1",
    doctorName: "BS. Nguyễn Văn A",
    department: "Khoa Sản - Phụ khoa",
    date: "2025-01-05",
    time: "14:00",
    status: "scheduled",
    reason: "Khám thai định kỳ",
  },
]
[V0_FILE]typescript:file="lib/utils.ts" isMerged="true"
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]javascript:file="next.config.mjs" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
}

export default nextConfig
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "next lint",
    "start": "next start"
  },
  "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": "latest",
    "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": "latest",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "^15.5.4",
    "next-themes": "^0.4.6",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "latest",
    "sonner": "^1.7.4",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^1.1.2",
    "zod": "3.25.67"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "sharp": "^0.34.4",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]javascript:file="postcss.config.mjs" isMerged="true"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

export default config
[V0_FILE]css:file="styles/globals.css" isMerged="true"
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --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]css:file="app/globals.css" isEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  /* Updated to user's specified color palette */
  /* Primary: Cobalt blue #1976D2 */
  /* Secondary: Light blue #4FC3F7 */
  /* Background: White #FFFFFF */
  /* Text: Dark gray #212121, Light gray #F5F5F5 */
  /* Accent: Light teal #26A69A */

/* Backgrounds - Clean white/light gray */
  --background: oklch(0.99 0 0);
  --foreground: oklch(0.25 0.01 240);

--card: oklch(1 0 0);
  --card-foreground: oklch(0.25 0.01 240);

--popover: oklch(1 0 0);
  --popover-foreground: oklch(0.25 0.01 240);

/* Primary: Cobalt blue #1976D2 */
  --primary: oklch(0.52 0.15 250);
  --primary-foreground: oklch(0.99 0 0);

/* Secondary: Light blue #4FC3F7 */
  --secondary: oklch(0.75 0.12 220);
  --secondary-foreground: oklch(0.99 0 0);

/* Muted tones - Light gray #F5F5F5 */
  --muted: oklch(0.97 0.002 240);
  --muted-foreground: oklch(0.5 0.01 240);

/* Accent: Light teal #26A69A */
  --accent: oklch(0.62 0.1 180);
  --accent-foreground: oklch(0.99 0 0);

--destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.99 0 0);

--border: oklch(0.92 0.005 240);
  --input: oklch(0.92 0.005 240);
  --ring: oklch(0.52 0.15 250);

/* Enhanced chart colors with gradient-friendly palette */
  --chart-1: 209 89% 54%;
  --chart-2: 194 98% 54%;
  --chart-3: 174 100% 52%;
  --chart-4: 268 78% 55%;
  --chart-5: 142 71% 45%;

--radius: 0.75rem;

--sidebar: oklch(0.99 0 0);
  --sidebar-foreground: oklch(0.25 0.01 240);
  --sidebar-primary: oklch(0.52 0.15 250);
  --sidebar-primary-foreground: oklch(0.99 0 0);
  --sidebar-accent: oklch(0.97 0.002 240);
  --sidebar-accent-foreground: oklch(0.25 0.01 240);
  --sidebar-border: oklch(0.92 0.005 240);
  --sidebar-ring: oklch(0.52 0.15 250);
}

.dark {
  --background: oklch(0.15 0.01 240);
  --foreground: oklch(0.95 0.01 240);
  --card: oklch(0.18 0.01 240);
  --card-foreground: oklch(0.95 0.01 240);
  --popover: oklch(0.18 0.01 240);
  --popover-foreground: oklch(0.95 0.01 240);
  --primary: oklch(0.55 0.15 250);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.75 0.12 220);
  --secondary-foreground: oklch(0.99 0 0);
  --muted: oklch(0.25 0.01 240);
  --muted-foreground: oklch(0.65 0.02 240);
  --accent: oklch(0.62 0.1 180);
  --accent-foreground: oklch(0.99 0 0);
  --destructive: oklch(0.5 0.2 27);
  --destructive-foreground: oklch(0.99 0 0);
  --border: oklch(0.3 0.01 240);
  --input: oklch(0.3 0.01 240);
  --ring: oklch(0.55 0.15 250);
  /* Dark mode chart colors */
  --chart-1: 209 89% 64%;
  --chart-2: 194 98% 64%;
  --chart-3: 174 100% 62%;
  --chart-4: 268 78% 65%;
  --chart-5: 142 71% 55%;
  --sidebar: oklch(0.18 0.01 240);
  --sidebar-foreground: oklch(0.95 0.01 240);
  --sidebar-primary: oklch(0.55 0.15 250);
  --sidebar-primary-foreground: oklch(0.99 0 0);
  --sidebar-accent: oklch(0.3 0.08 220);
  --sidebar-accent-foreground: oklch(0.95 0.01 240);
  --sidebar-border: oklch(0.3 0.01 240);
  --sidebar-ring: oklch(0.55 0.15 250);
}

@theme inline {
  /* Using Inter for clean, professional look throughout */
  --font-sans: var(--font-inter);
  --font-serif: var(--font-inter);
  --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/management/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  BarChart3,
  TrendingUp,
  Users,
  Calendar,
  DollarSign,
  Activity,
  ArrowUp,
  ArrowDown,
  FileText,
} from "lucide-react"
import {
  Bar,
  BarChart,
  Line,
  LineChart,
  Pie,
  PieChart,
  Radar,
  RadarChart,
  Cell,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
} from "recharts"

// Mock data for charts
const revenueData = [
  { month: "T1", revenue: 45000000, expenses: 32000000 },
  { month: "T2", revenue: 52000000, expenses: 35000000 },
  { month: "T3", revenue: 48000000, expenses: 33000000 },
  { month: "T4", revenue: 61000000, expenses: 38000000 },
  { month: "T5", revenue: 55000000, expenses: 36000000 },
  { month: "T6", revenue: 67000000, expenses: 40000000 },
]

const revenuePieData = [
  { name: "Doanh thu Q1-Q2", value: 48.5, color: "hsl(209, 89%, 54%)" },
  { name: "Doanh thu Q3-Q4", value: 54.5, color: "hsl(194, 98%, 54%)" },
  { name: "Chi phí Q1-Q2", value: 33.5, color: "hsl(174, 100%, 52%)" },
  { name: "Chi phí Q3-Q4", value: 37, color: "hsl(268, 78%, 55%)" },
  { name: "Lợi nhuận", value: 26.5, color: "hsl(142, 71%, 45%)" },
]

const revenueRadarData = [
  { period: "T1", revenue: 45, expenses: 32, profit: 13 },
  { period: "T2", revenue: 52, expenses: 35, profit: 17 },
  { period: "T3", revenue: 48, expenses: 33, profit: 15 },
  { period: "T4", revenue: 61, expenses: 38, profit: 23 },
  { period: "T5", revenue: 55, expenses: 36, profit: 19 },
  { period: "T6", revenue: 67, expenses: 40, profit: 27 },
]

const patientData = [
  { month: "T1", patients: 450 },
  { month: "T2", patients: 520 },
  { month: "T3", patients: 480 },
  { month: "T4", patients: 610 },
  { month: "T5", patients: 550 },
  { month: "T6", patients: 670 },
]

const departmentData = [
  { name: "Nội khoa", value: 35, color: "hsl(209, 89%, 54%)" },
  { name: "Nhi khoa", value: 25, color: "hsl(194, 98%, 54%)" },
  { name: "Da liễu", value: 20, color: "hsl(174, 100%, 52%)" },
  { name: "Tai mũi họng", value: 15, color: "hsl(268, 78%, 55%)" },
  { name: "Khác", value: 5, color: "hsl(142, 71%, 45%)" },
]

const appointmentStatusData = [
  { name: "Hoàn thành", value: 65, color: "hsl(194, 98%, 54%)" },
  { name: "Đã đặt", value: 20, color: "hsl(209, 89%, 54%)" },
  { name: "Đã hủy", value: 10, color: "hsl(0, 84%, 60%)" },
  { name: "Không đến", value: 5, color: "hsl(0, 0%, 65%)" },
]

const topDoctors = [
  { name: "BS. Trần Văn B", patients: 145, revenue: 87000000, rating: 4.8 },
  { name: "BS. Lê Thị D", patients: 132, revenue: 79200000, rating: 4.9 },
  { name: "BS. Nguyễn Văn A", patients: 128, revenue: 76800000, rating: 4.7 },
  { name: "BS. Phạm Thị C", patients: 115, revenue: 69000000, rating: 4.6 },
  { name: "BS. Hoàng Văn E", patients: 98, revenue: 58800000, rating: 4.5 },
]

function RevenueChart({ chartType }: { chartType: string }) {
  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("vi-VN", {
      style: "currency",
      currency: "VND",
      minimumFractionDigits: 0,
    }).format(value)
  }

const chartColors = {
    revenue: "hsl(194, 98%, 54%)",
    expenses: "hsl(209, 89%, 54%)",
    profit: "hsl(142, 71%, 45%)",
  }

switch (chartType) {
    case "line":
      return (
        <ResponsiveContainer width="100%" height={380}>
          <LineChart data={revenueData} margin={{ top: 5, right: 30, left: 0, bottom: 5 }}>
            <defs>
              <linearGradient id="colorRevenue" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor={chartColors.revenue} stopOpacity={0.8} />
                <stop offset="95%" stopColor={chartColors.revenue} stopOpacity={0} />
              </linearGradient>
              <linearGradient id="colorExpenses" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor={chartColors.expenses} stopOpacity={0.8} />
                <stop offset="95%" stopColor={chartColors.expenses} stopOpacity={0} />
              </linearGradient>
            </defs>
            <CartesianGrid strokeDasharray="3 3" stroke="hsl(0, 0%, 85%)" />
            <XAxis dataKey="month" stroke="hsl(0, 0%, 50%)" />
            <YAxis tickFormatter={(value) => `${value / 1000000}M`} stroke="hsl(0, 0%, 50%)" />
            <Tooltip
              formatter={(value) => formatCurrency(Number(value))}
              contentStyle={{
                backgroundColor: "rgba(255, 255, 255, 0.95)",
                border: "1px solid hsl(0, 0%, 80%)",
                borderRadius: "8px",
              }}
            />
            <Legend wrapperStyle={{ paddingTop: "20px" }} verticalAlign="middle" align="right" />
            <Line
              type="linear"
              dataKey="revenue"
              name="Doanh thu"
              stroke={chartColors.revenue}
              strokeWidth={3}
              dot={{ fill: chartColors.revenue, r: 5 }}
              activeDot={{ r: 7 }}
              isAnimationActive
            />
            <Line
              type="linear"
              dataKey="expenses"
              name="Chi phí"
              stroke={chartColors.expenses}
              strokeWidth={3}
              dot={{ fill: chartColors.expenses, r: 5 }}
              activeDot={{ r: 7 }}
              isAnimationActive
            />
          </LineChart>
        </ResponsiveContainer>
      )

case "bar":
      return (
        <ResponsiveContainer width="100%" height={380}>
          <BarChart data={revenueData} margin={{ top: 20, right: 30, left: 0, bottom: 5 }}>
            <defs>
              <linearGradient id="barGradientRevenue" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor={chartColors.revenue} stopOpacity={1} />
                <stop offset="100%" stopColor={chartColors.revenue} stopOpacity={0.7} />
              </linearGradient>
              <linearGradient id="barGradientExpenses" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor={chartColors.expenses} stopOpacity={1} />
                <stop offset="100%" stopColor={chartColors.expenses} stopOpacity={0.7} />
              </linearGradient>
            </defs>
            <CartesianGrid strokeDasharray="3 3" stroke="hsl(0, 0%, 85%)" />
            <XAxis dataKey="month" stroke="hsl(0, 0%, 50%)" />
            <YAxis tickFormatter={(value) => `${value / 1000000}M`} stroke="hsl(0, 0%, 50%)" />
            <Tooltip
              formatter={(value) => formatCurrency(Number(value))}
              contentStyle={{
                backgroundColor: "rgba(255, 255, 255, 0.95)",
                border: "1px solid hsl(0, 0%, 80%)",
                borderRadius: "8px",
              }}
            />
            <Legend wrapperStyle={{ paddingTop: "20px" }} verticalAlign="middle" align="right" />
            <Bar dataKey="revenue" name="Doanh thu" fill="url(#barGradientRevenue)" radius={[8, 8, 0, 0]} />
            <Bar dataKey="expenses" name="Chi phí" fill="url(#barGradientExpenses)" radius={[8, 8, 0, 0]} />
          </BarChart>
        </ResponsiveContainer>
      )

case "pie":
      return (
        <ResponsiveContainer width="100%" height={380}>
          <PieChart>
            <Pie
              data={revenuePieData}
              cx="40%"
              cy="50%"
              labelLine={false}
              label={({ name, value }) => `${name}: ${value}%`}
              outerRadius={110}
              fill="#8884d8"
              dataKey="value"
              animationDuration={800}
            >
              {revenuePieData.map((entry, index) => (
                <Cell key={`cell-${index}`} fill={entry.color} />
              ))}
            </Pie>
            <Legend verticalAlign="middle" align="right" layout="vertical" />
            <Tooltip
              formatter={(value) => `${value}%`}
              contentStyle={{
                backgroundColor: "rgba(255, 255, 255, 0.95)",
                border: "1px solid hsl(0, 0%, 80%)",
                borderRadius: "8px",
              }}
            />
          </PieChart>
        </ResponsiveContainer>
      )

case "radar":
      return (
        <ResponsiveContainer width="100%" height={380}>
          <RadarChart data={revenueRadarData}>
            <defs>
              <linearGradient id="radarGradient1" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stopColor={chartColors.revenue} stopOpacity={0.8} />
                <stop offset="100%" stopColor={chartColors.revenue} stopOpacity={0.3} />
              </linearGradient>
              <linearGradient id="radarGradient2" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stopColor={chartColors.expenses} stopOpacity={0.8} />
                <stop offset="100%" stopColor={chartColors.expenses} stopOpacity={0.3} />
              </linearGradient>
            </defs>
            <PolarGrid stroke="hsl(0, 0%, 80%)" />
            <PolarAngleAxis dataKey="period" stroke="hsl(0, 0%, 50%)" />
            <PolarRadiusAxis angle={90} domain={[0, 70]} stroke="hsl(0, 0%, 70%)" />
            <Radar
              name="Doanh thu (triệu)"
              dataKey="revenue"
              stroke={chartColors.revenue}
              fill="url(#radarGradient1)"
              fillOpacity={0.6}
              isAnimationActive
            />
            <Radar
              name="Chi phí (triệu)"
              dataKey="expenses"
              stroke={chartColors.expenses}
              fill="url(#radarGradient2)"
              fillOpacity={0.6}
              isAnimationActive
            />
            <Legend verticalAlign="middle" align="right" layout="vertical" wrapperStyle={{ paddingTop: "20px" }} />
            <Tooltip
              contentStyle={{
                backgroundColor: "rgba(255, 255, 255, 0.95)",
                border: "1px solid hsl(0, 0%, 80%)",
                borderRadius: "8px",
              }}
            />
          </RadarChart>
        </ResponsiveContainer>
      )

case "donut":
      return (
        <ResponsiveContainer width="100%" height={380}>
          <PieChart>
            <Pie
              data={revenuePieData}
              cx="40%"
              cy="50%"
              labelLine={false}
              label={({ name, value }) => `${name}: ${value}%`}
              outerRadius={130}
              innerRadius={70}
              fill="#8884d8"
              dataKey="value"
              animationDuration={800}
            >
              {revenuePieData.map((entry, index) => (
                <Cell key={`cell-${index}`} fill={entry.color} />
              ))}
            </Pie>
            <Legend verticalAlign="middle" align="right" layout="vertical" />
            <Tooltip
              formatter={(value) => `${value}%`}
              contentStyle={{
                backgroundColor: "rgba(255, 255, 255, 0.95)",
                border: "1px solid hsl(0, 0%, 80%)",
                borderRadius: "8px",
              }}
            />
          </PieChart>
        </ResponsiveContainer>
      )

default:
      return null
  }
}

export default function ManagementDashboard() {
  const [revenueChartType, setRevenueChartType] = useState("bar")

const stats = [
    {
      title: "Doanh thu tháng này",
      value: "67.000.000 ₫",
      change: "+12.5%",
      trend: "up",
      icon: DollarSign,
      color: "text-chart-2",
    },
    {
      title: "Bệnh nhân mới",
      value: "670",
      change: "+21.8%",
      trend: "up",
      icon: Users,
      color: "text-chart-1",
    },
    {
      title: "Lịch hẹn",
      value: "245",
      change: "+8.3%",
      trend: "up",
      icon: Calendar,
      color: "text-chart-3",
    },
    {
      title: "Tỷ lệ hoàn thành",
      value: "92%",
      change: "+2.1%",
      trend: "up",
      icon: Activity,
      color: "text-chart-4",
    },
  ]

const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("vi-VN", {
      style: "currency",
      currency: "VND",
      minimumFractionDigits: 0,
    }).format(value)
  }

return (
    <DashboardLayout navigation={navigation}>
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Dashboard Quản lý</h1>
          <p className="text-muted-foreground">Tổng quan hoạt động và phân tích kinh doanh</p>
        </div>

{/* Key Metrics */}
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          {stats.map((stat) => {
            const Icon = stat.icon
            return (
              <Card key={stat.title} className="border-0 shadow-sm hover:shadow-md transition-shadow">
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
                  <Icon className={`h-4 w-4 ${stat.color}`} />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">{stat.value}</div>
                  <div className="flex items-center gap-1 text-xs text-muted-foreground">
                    {stat.trend === "up" ? (
                      <ArrowUp className="h-3 w-3 text-chart-2" />
                    ) : (
                      <ArrowDown className="h-3 w-3 text-destructive" />
                    )}
                    <span className={stat.trend === "up" ? "text-chart-2" : "text-destructive"}>{stat.change}</span>
                    <span>so với tháng trước</span>
                  </div>
                </CardContent>
              </Card>
            )
          })}
        </div>

<Tabs defaultValue="revenue" className="space-y-4">
          <TabsList>
            <TabsTrigger value="revenue">Doanh thu</TabsTrigger>
            <TabsTrigger value="patients">Bệnh nhân</TabsTrigger>
            <TabsTrigger value="departments">Khoa phòng</TabsTrigger>
            <TabsTrigger value="appointments">Lịch hẹn</TabsTrigger>
          </TabsList>

{/* Revenue Chart - Enhanced with beautiful styling */}
          <TabsContent value="revenue" className="space-y-4">
            <Card className="border-0 shadow-md">
              <CardHeader className="flex flex-row items-center justify-between pb-4 border-b">
                <div>
                  <CardTitle className="text-xl">Doanh thu & Chi phí</CardTitle>
                  <CardDescription>Biểu đồ doanh thu và chi phí 6 tháng gần nhất</CardDescription>
                </div>
                <Select value={revenueChartType} onValueChange={setRevenueChartType}>
                  <SelectTrigger className="w-44 border-2">
                    <SelectValue placeholder="Chọn loại biểu đồ" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="line">📈 Biểu đồ đường</SelectItem>
                    <SelectItem value="bar">📊 Biểu đồ cột</SelectItem>
                    <SelectItem value="pie">🥧 Biểu đồ tròn</SelectItem>
                    <SelectItem value="radar">🎯 Biểu đồ radar</SelectItem>
                    <SelectItem value="donut">🍩 Biểu đồ donut</SelectItem>
                  </SelectContent>
                </Select>
              </CardHeader>
              <CardContent className="pt-6">
                <RevenueChart chartType={revenueChartType} />
              </CardContent>
            </Card>
          </TabsContent>

{/* Patients Chart */}
          <TabsContent value="patients" className="space-y-4">
            <Card className="border-0 shadow-md">
              <CardHeader className="border-b pb-4">
                <CardTitle className="text-xl">Lượng bệnh nhân</CardTitle>
                <CardDescription>Số lượng bệnh nhân khám 6 tháng gần nhất</CardDescription>
              </CardHeader>
              <CardContent className="pt-6">
                <ResponsiveContainer width="100%" height={350}>
                  <LineChart data={patientData} margin={{ top: 5, right: 30, left: 0, bottom: 5 }}>
                    <defs>
                      <linearGradient id="colorPatients" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="5%" stopColor="hsl(209, 89%, 54%)" stopOpacity={0.8} />
                        <stop offset="95%" stopColor="hsl(209, 89%, 54%)" stopOpacity={0} />
                      </linearGradient>
                    </defs>
                    <CartesianGrid strokeDasharray="3 3" stroke="hsl(0, 0%, 85%)" />
                    <XAxis dataKey="month" stroke="hsl(0, 0%, 50%)" />
                    <YAxis stroke="hsl(0, 0%, 50%)" />
                    <Tooltip
                      contentStyle={{
                        backgroundColor: "rgba(255, 255, 255, 0.95)",
                        border: "1px solid hsl(0, 0%, 80%)",
                        borderRadius: "8px",
                      }}
                    />
                    <Legend wrapperStyle={{ paddingTop: "20px" }} />
                    <Line
                      type="linear"
                      dataKey="patients"
                      name="Bệnh nhân"
                      stroke="hsl(209, 89%, 54%)"
                      strokeWidth={3}
                      dot={{ fill: "hsl(209, 89%, 54%)", r: 5 }}
                      activeDot={{ r: 7 }}
                      isAnimationActive
                    />
                  </LineChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>
          </TabsContent>

{/* Departments Chart */}
          <TabsContent value="departments" className="space-y-4">
            <Card className="border-0 shadow-md">
              <CardHeader className="border-b pb-4">
                <CardTitle className="text-xl">Phân bổ theo khoa</CardTitle>
                <CardDescription>Tỷ lệ bệnh nhân theo từng khoa phòng</CardDescription>
              </CardHeader>
              <CardContent className="pt-6">
                <ResponsiveContainer width="100%" height={350}>
                  <PieChart>
                    <Pie
                      data={departmentData}
                      cx="50%"
                      cy="50%"
                      labelLine={false}
                      label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
                      outerRadius={110}
                      fill="#8884d8"
                      dataKey="value"
                      animationDuration={800}
                    >
                      {departmentData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={entry.color} />
                      ))}
                    </Pie>
                    <Tooltip
                      contentStyle={{
                        backgroundColor: "rgba(255, 255, 255, 0.95)",
                        border: "1px solid hsl(0, 0%, 80%)",
                        borderRadius: "8px",
                      }}
                    />
                  </PieChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>
          </TabsContent>

{/* Appointments Chart */}
          <TabsContent value="appointments" className="space-y-4">
            <Card className="border-0 shadow-md">
              <CardHeader className="border-b pb-4">
                <CardTitle className="text-xl">Trạng thái lịch hẹn</CardTitle>
                <CardDescription>Phân bổ trạng thái các lịch hẹn</CardDescription>
              </CardHeader>
              <CardContent className="pt-6">
                <ResponsiveContainer width="100%" height={350}>
                  <PieChart>
                    <Pie
                      data={appointmentStatusData}
                      cx="50%"
                      cy="50%"
                      labelLine={false}
                      label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
                      outerRadius={110}
                      fill="#8884d8"
                      dataKey="value"
                      animationDuration={800}
                    >
                      {appointmentStatusData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={entry.color} />
                      ))}
                    </Pie>
                    <Tooltip
                      contentStyle={{
                        backgroundColor: "rgba(255, 255, 255, 0.95)",
                        border: "1px solid hsl(0, 0%, 80%)",
                        borderRadius: "8px",
                      }}
                    />
                  </PieChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>

export interface LoginRequest {
    phone: string
    password: string
}

export interface LoginResponse {
    token: string
    user: {
        userId: number
        phone?: string
        fullName?: string
        email?: string
        role?: string
        gender?: string
        dob?: string
    }
}

export interface RegisterRequest {
    phone: string
    password: string
    fullName: string
    email?: string
    dob?: string
    gender?: string
    roleId: number
}

export interface RegisterResponse {
    userId: number
}

export interface UserDto {
    userId: number
    phone?: string
    fullName?: string
    email?: string
    role?: string
    gender?: string
    dob?: string
    allergies?: string
    medicalHistory?: string
}

export class ApiError extends Error {
    constructor(
        message: string,
        public status: number,
        public statusText: string
    ) {
        super(message)
        this.name = 'ApiError'
    }
}

class ApiService {
    private baseURL: string
    private token: string | null = null

constructor() {
        this.baseURL = API_BASE_URL!
        // Get token from localStorage on client side
        if (typeof window !== 'undefined') {
            this.token = localStorage.getItem('auth_token')
        }
    }

private async request<T>(
        endpoint: string,
        options: RequestInit = {}
    ): Promise<T> {
        const url = `${this.baseURL}${endpoint}`

const config: RequestInit = {
            headers: {
                'Content-Type': 'application/json',
                ...(this.token && { Authorization: `Bearer ${this.token}` }),
                ...options.headers,
            },
            ...options,
        }

try {
            const response = await fetch(url, config)

if (!response.ok) {
                const errorText = await response.text()
                throw new ApiError(
                    errorText || `HTTP ${response.status}`,
                    response.status,
                    response.statusText
                )
            }

// Handle empty responses
            const text = await response.text()
            if (!text) {
                return {} as T
            }

return JSON.parse(text)
        } catch (error) {
            if (error instanceof ApiError) {
                throw error
            }
            throw new ApiError(
                error instanceof Error ? error.message : 'Network error',
                0,
                'Network Error'
            )
        }
    }

// Authentication methods
    async authenticateUser(credentials: LoginRequest): Promise<LoginResponse> {
        const response = await this.request<LoginResponse>('/api/auth/login', {
            method: 'POST',
            body: JSON.stringify(credentials),
        })

// Store token
        this.setToken(response.token)

return response
    }

async createUser(userData: RegisterRequest): Promise<RegisterResponse> {
        return this.request<RegisterResponse>('/api/auth/register', {
            method: 'POST',
            body: JSON.stringify(userData),
        })
    }

// User management methods
    async fetchAllUsers(): Promise<UserDto[]> {
        return this.request<UserDto[]>('/api/users')
    }

async fetchSecureUsers(): Promise<UserDto[]> {
        return this.request<UserDto[]>('/api/users/test-secure')
    }

async fetchAdminUsers(): Promise<UserDto[]> {
        return this.request<UserDto[]>('/api/users/admin-only')
    }

async fetchUserProfile(): Promise<UserDto> {
        return this.request<UserDto>('/api/auth/profile')
    }

async updateBasicInfo(data: {
        fullName: string
        email: string
        phone: string
        dob: string
        gender: string
    }): Promise<{ message: string, user: UserDto }> {
        return this.request<{ message: string, user: UserDto }>('/api/profile/basic-info', {
            method: 'PUT',
            body: JSON.stringify(data)
        })
    }

async updateMedicalInfo(data: {
        allergies: string
        medicalHistory: string
    }): Promise<{ message: string, user: UserDto }> {
        return this.request<{ message: string, user: UserDto }>('/api/profile/medical-info', {
            method: 'PUT',
            body: JSON.stringify(data)
        })
    }

// Token management
    setToken(token: string | null) {
        this.token = token
        if (typeof window !== 'undefined') {
            if (token) {
                localStorage.setItem('auth_token', token)
            } else {
                localStorage.removeItem('auth_token')
            }
        }
    }

getToken(): string | null {
        return this.token
    }

clearToken() {
        this.token = null
        if (typeof window !== 'undefined') {
            localStorage.removeItem('auth_token')
        }
    }

isAuthenticated(): boolean {
        return !!this.token
    }
}

// Export singleton instance
export const apiService = new ApiService()
[V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true"
"use client"

import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Activity, Users, Settings, Shield, UserPlus, Clock } from "lucide-react"
import { useRouter } from "next/navigation"

// Mock users data
const mockUsers = [
  { id: "U001", name: "BS. Trần Văn B", role: "doctor", status: "active", department: "Nội khoa" },
  { id: "U002", name: "BS. Lê Thị D", role: "doctor", status: "active", department: "Nhi khoa" },
  { id: "U003", name: "Y tá Nguyễn Thị E", role: "nurse", status: "active", department: "Nội khoa" },
  { id: "U004", name: "Dược sĩ Phạm Văn F", role: "pharmacist", status: "active", department: "Nhà thuốc" },
  { id: "U005", name: "Lễ tân Hoàng Thị G", role: "receptionist", status: "active", department: "Lễ tân" },
]

// Mock recent activities
const recentActivities = [
  {
    id: "A001",
    user: "BS. Trần Văn B",
    action: "Tạo hồ sơ bệnh án mới",
    target: "BN001",
    time: "5 phút trước",
  },
  {
    id: "A002",
    user: "Lễ tân Hoàng Thị G",
    action: "Đăng ký bệnh nhân mới",
    target: "BN015",
    time: "10 phút trước",
  },
  {
    id: "A003",
    user: "Dược sĩ Phạm Văn F",
    action: "Xử lý đơn thuốc",
    target: "DT003",
    time: "15 phút trước",
  },
  {
    id: "A004",
    user: "Y tá Nguyễn Thị E",
    action: "Cập nhật sinh hiệu",
    target: "BN002",
    time: "20 phút trước",
  },
]

export default function AdminDashboard() {
  const router = useRouter()

const stats = [
    {
      title: "Tổng người dùng",
      value: mockUsers.length.toString(),
      icon: Users,
      color: "text-primary",
    },
    {
      title: "Đang hoạt động",
      value: mockUsers.filter((u) => u.status === "active").length.toString(),
      icon: Activity,
      color: "text-chart-2",
    },
    {
      title: "Bác sĩ",
      value: mockUsers.filter((u) => u.role === "doctor").length.toString(),
      icon: Shield,
      color: "text-chart-3",
    },
    {
      title: "Nhân viên khác",
      value: mockUsers.filter((u) => u.role !== "doctor").length.toString(),
      icon: Users,
      color: "text-chart-4",
    },
  ]

return (
    <DashboardLayout navigation={navigation}>
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Quản trị hệ thống</h1>
          <p className="text-muted-foreground">Quản lý người dùng và phân quyền</p>
        </div>

<div className="grid gap-6 md:grid-cols-2">
          {/* Recent Users */}
          <Card>
            <CardHeader>
              <CardTitle>Người dùng gần đây</CardTitle>
              <CardDescription>Danh sách nhân viên trong hệ thống</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {mockUsers.slice(0, 5).map((user) => (
                  <div key={user.id} className="flex items-start justify-between border-b pb-4 last:border-0">
                    <div className="space-y-1">
                      <div className="flex items-center gap-2">
                        <p className="text-sm font-medium">{user.name}</p>
                        <Badge variant="outline">{user.id}</Badge>
                      </div>
                      <div className="flex gap-2">
                        <Badge variant="secondary">{getRoleLabel(user.role)}</Badge>
                        <Badge variant="outline">{user.department}</Badge>
                      </div>
                      <Badge variant={user.status === "active" ? "default" : "secondary"}>
                        {user.status === "active" ? "Hoạt động" : "Không hoạt động"}
                      </Badge>
                    </div>
                    <Button size="sm" variant="outline" onClick={() => router.push(`/admin/users/${user.id}`)}>
                      Xem
                    </Button>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

{/* Recent Activities */}
          <Card>
            <CardHeader>
              <CardTitle>Hoạt động gần đây</CardTitle>
              <CardDescription>Lịch sử thao tác của người dùng</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {recentActivities.map((activity) => (
                  <div key={activity.id} className="flex items-start gap-3 border-b pb-4 last:border-0">
                    <Clock className="h-4 w-4 text-muted-foreground mt-1" />
                    <div className="flex-1 space-y-1">
                      <p className="text-sm">
                        <span className="font-medium">{activity.user}</span> {activity.action}
                      </p>
                      <div className="flex items-center gap-2">
                        <Badge variant="outline">{activity.target}</Badge>
                        <span className="text-xs text-muted-foreground">{activity.time}</span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>

{/* Quick Actions */}
        <Card>
          <CardHeader>
            <CardTitle>Thao tác nhanh</CardTitle>
            <CardDescription>Các chức năng quản trị thường dùng</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-4">
              <Button className="h-auto py-4 flex-col gap-2" onClick={() => router.push("/admin/users/new")}>
                <UserPlus className="h-5 w-5" />
                <span className="text-sm">Thêm người dùng</span>
              </Button>

<Button
                variant="outline"
                className="h-auto py-4 flex-col gap-2 bg-transparent"
                onClick={() => router.push("/admin/users")}
              >
                <Users className="h-5 w-5" />
                <span className="text-sm">Quản lý người dùng</span>
              </Button>

<Button
                variant="outline"
                className="h-auto py-4 flex-col gap-2 bg-transparent"
                onClick={() => router.push("/admin/roles")}
              >
                <Shield className="h-5 w-5" />
                <span className="text-sm">Phân quyền</span>
              </Button>

<Button
                variant="outline"
                className="h-auto py-4 flex-col gap-2 bg-transparent"
                onClick={() => router.push("/admin/settings")}
              >
                <Settings className="h-5 w-5" />
                <span className="text-sm">Cài đặt hệ thống</span>
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/admin/roles/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/roles/page.tsx" isMerged="true"
"use client"

import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Activity, Users, Settings, Shield, Check } from "lucide-react"
import { useRouter } from "next/navigation"

// Mock roles and permissions
const roles = [
  {
    id: "admin",
    name: "Quản trị viên",
    description: "Toàn quyền quản lý hệ thống",
    userCount: 1,
    color: "text-destructive",
  },
  {
    id: "doctor",
    name: "Bác sĩ",
    description: "Khám bệnh và quản lý hồ sơ bệnh án",
    userCount: 2,
    color: "text-primary",
  },
  {
    id: "nurse",
    name: "Y tá",
    description: "Chăm sóc và theo dõi bệnh nhân",
    userCount: 1,
    color: "text-chart-2",
  },
  {
    id: "pharmacist",
    name: "Dược sĩ",
    description: "Quản lý thuốc và đơn thuốc",
    userCount: 1,
    color: "text-chart-3",
  },
  {
    id: "receptionist",
    name: "Lễ tân",
    description: "Tiếp nhận và đăng ký bệnh nhân",
    userCount: 1,
    color: "text-chart-4",
  },
]

const permissions = [
  {
    category: "Quản lý bệnh nhân",
    items: [
      { id: "patient.view", name: "Xem thông tin bệnh nhân" },
      { id: "patient.create", name: "Đăng ký bệnh nhân mới" },
      { id: "patient.edit", name: "Chỉnh sửa thông tin bệnh nhân" },
      { id: "patient.delete", name: "Xóa bệnh nhân" },
    ],
  },
  {
    category: "Quản lý hồ sơ bệnh án",
    items: [
      { id: "record.view", name: "Xem hồ sơ bệnh án" },
      { id: "record.create", name: "Tạo hồ sơ bệnh án" },
      { id: "record.edit", name: "Chỉnh sửa hồ sơ bệnh án" },
      { id: "record.delete", name: "Xóa hồ sơ bệnh án" },
    ],
  },
  {
    category: "Quản lý lịch hẹn",
    items: [
      { id: "appointment.view", name: "Xem lịch hẹn" },
      { id: "appointment.create", name: "Tạo lịch hẹn" },
      { id: "appointment.edit", name: "Chỉnh sửa lịch hẹn" },
      { id: "appointment.cancel", name: "Hủy lịch hẹn" },
    ],
  },
  {
    category: "Quản lý thuốc",
    items: [
      { id: "medicine.view", name: "Xem danh sách thuốc" },
      { id: "medicine.create", name: "Thêm thuốc mới" },
      { id: "medicine.edit", name: "Chỉnh sửa thông tin thuốc" },
      { id: "medicine.delete", name: "Xóa thuốc" },
    ],
  },
  {
    category: "Quản lý người dùng",
    items: [
      { id: "user.view", name: "Xem danh sách người dùng" },
      { id: "user.create", name: "Tạo người dùng mới" },
      { id: "user.edit", name: "Chỉnh sửa người dùng" },
      { id: "user.delete", name: "Xóa người dùng" },
    ],
  },
]

// Mock role permissions
const rolePermissions: Record<string, string[]> = {
  admin: permissions.flatMap((p) => p.items.map((i) => i.id)),
  doctor: ["patient.view", "patient.edit", "record.view", "record.create", "record.edit", "appointment.view"],
  nurse: ["patient.view", "record.view", "appointment.view"],
  pharmacist: ["patient.view", "medicine.view", "medicine.edit"],
  receptionist: ["patient.view", "patient.create", "patient.edit", "appointment.view", "appointment.create"],
}

export default function AdminRolesPage() {
  const router = useRouter()

return (
    <DashboardLayout navigation={navigation}>
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Quản lý phân quyền</h1>
          <p className="text-muted-foreground">Cấu hình quyền truy cập cho từng vai trò</p>
        </div>

{/* Roles Overview */}
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {roles.map((role) => (
            <Card key={role.id} className="hover:shadow-md transition-shadow">
              <CardHeader>
                <div className="flex items-start justify-between">
                  <div className="space-y-1">
                    <CardTitle className={`flex items-center gap-2 ${role.color}`}>
                      <Shield className="h-5 w-5" />
                      {role.name}
                    </CardTitle>
                    <CardDescription>{role.description}</CardDescription>
                  </div>
                  <Badge variant="outline">{role.userCount} người</Badge>
                </div>
              </CardHeader>
              <CardContent>
                <Button
                  size="sm"
                  variant="outline"
                  className="w-full bg-transparent"
                  onClick={() => router.push(`/admin/roles/${role.id}`)}
                >
                  Xem chi tiết
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>

{/* Permissions Matrix */}
        <Card>
          <CardHeader>
            <CardTitle>Ma trận phân quyền</CardTitle>
            <CardDescription>Tổng quan quyền truy cập của từng vai trò</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-6">
              {permissions.map((permissionGroup) => (
                <div key={permissionGroup.category} className="space-y-3">
                  <h3 className="font-semibold text-sm">{permissionGroup.category}</h3>
                  <div className="space-y-2">
                    {permissionGroup.items.map((permission) => (
                      <div
                        key={permission.id}
                        className="flex items-center justify-between border-b pb-2 last:border-0"
                      >
                        <span className="text-sm text-muted-foreground">{permission.name}</span>
                        <div className="flex gap-4">
                          {roles.map((role) => (
                            <div key={role.id} className="flex items-center gap-2 w-24">
                              <span className="text-xs text-muted-foreground truncate">{role.name}</span>
                              {rolePermissions[role.id]?.includes(permission.id) ? (
                                <Check className="h-4 w-4 text-chart-2" />
                              ) : (
                                <div className="h-4 w-4" />
                              )}
                            </div>
                          ))}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/admin/settings/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/settings/page.tsx" isMerged="true"
"use client"

import { DashboardLayout } from "@/components/dashboard-layout"
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 { Switch } from "@/components/ui/switch"
import { Activity, Users, Settings, Shield, Save } from "lucide-react"
import { useState } from "react"

export default function AdminSettingsPage() {
  const [isSaving, setIsSaving] = useState(false)

const handleSave = async () => {
    setIsSaving(true)
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1500))
    setIsSaving(false)
  }

return (
    <DashboardLayout navigation={navigation}>
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Cài đặt hệ thống</h1>
          <p className="text-muted-foreground">Cấu hình thông tin và tùy chọn hệ thống</p>
        </div>

{/* Hospital Information */}
        <Card>
          <CardHeader>
            <CardTitle>Thông tin phòng khám</CardTitle>
            <CardDescription>Thông tin cơ bản về phòng khám</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid gap-4 md:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="hospitalName">Tên phòng khám</Label>
                <Input id="hospitalName" defaultValue="Phòng khám Diamond Health" />
              </div>

<div className="space-y-2">
                <Label htmlFor="hospitalPhone">Số điện thoại</Label>
                <Input id="hospitalPhone" type="tel" defaultValue="024 1234 5678" />
              </div>

<div className="space-y-2">
                <Label htmlFor="hospitalEmail">Email</Label>
                <Input id="hospitalEmail" type="email" defaultValue="info@diamondhealth.vn" />
              </div>

<div className="space-y-2">
                <Label htmlFor="hospitalWebsite">Website</Label>
                <Input id="hospitalWebsite" type="url" defaultValue="https://diamondhealth.vn" />
              </div>