[V0_FILE]typescriptreact:file="components/sidebar-provider.tsx" isMerged="true" "use client" import * as React from "react" type SidebarContextType = { isOpen: boolean toggle: () => void } const SidebarContext = React.createContext(undefined) export function SidebarProvider({ children, }: { children: React.ReactNode }) { const [isOpen, setIsOpen] = React.useState(true) const toggle = React.useCallback(() => { setIsOpen((prev) => !prev) }, []) return {children} } export function useSidebar() { const context = React.useContext(SidebarContext) if (context === undefined) { throw new Error("useSidebar must be used within a SidebarProvider") } return context } [V0_FILE]typescriptreact:file="app/quan-ly-doi-tuong/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/bao-cao/page.tsx" isMerged="true" import { DashboardHeader } from "@/components/dashboard-header" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Calendar, Download, FileText, Filter, Printer } from "lucide-react" export default function ReportsPage() { return (

Tổng quan Đối tượng Vi phạm

Tổng số đối tượng

245

Tháng 4, 2025

Tổng số vi phạm

32

Tháng 4, 2025

Tỷ lệ xử lý vi phạm

78%

Tháng 4, 2025

Báo cáo chi tiết Tạo và tải xuống báo cáo chi tiết

Báo cáo đối tượng

Phân loại đối tượng

Nhân viên 180

Nhà thầu 45

Khách 20

Thời gian ra vào

Giờ cao điểm (7-9h) 120

Giờ thấp điểm 30

Báo cáo vi phạm

Loại vi phạm

An toàn lao động 18

An ninh 8

Hành vi 6

Trạng thái xử lý

Đã xử lý 25

Chưa xử lý 7

) } [V0_FILE]typescriptreact:file="app/quan-ly-khuon-mat/page.tsx" isMerged="true" import { DashboardHeader } from "@/components/dashboard-header" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { MoreHorizontal, Search, Filter, UserPlus, Upload, RefreshCw } from "lucide-react" export default function FaceManagementPage() { // Dữ liệu mẫu cho bảng const faces = [ { id: "1", name: "Nguyễn Văn A", employeeId: "NV001", department: "Sản xuất", status: "Đã xác thực", lastUpdated: "12/04/2025", faceCount: 5, }, { id: "2", name: "Trần Thị B", employeeId: "NV002", department: "Kỹ thuật", status: "Đã xác thực", lastUpdated: "10/04/2025", faceCount: 3, }, { id: "3", name: "Lê Văn C", employeeId: "NT001", department: "Bảo trì", status: "Chờ xác thực", lastUpdated: "08/04/2025", faceCount: 2, }, { id: "4", name: "Phạm Thị D", employeeId: "KH001", department: "Khách", status: "Đã xác thực", lastUpdated: "05/04/2025", faceCount: 1, }, { id: "5", name: "Hoàng Văn E", employeeId: "NV003", department: "Quản lý", status: "Cần cập nhật", lastUpdated: "01/04/2025", faceCount: 4, }, ] return (

Tất cả Đã xác thực Chờ xác thực

Danh sách khuôn mặt Quản lý dữ liệu khuôn mặt của nhân viên, nhà thầu và khách

Tên Mã nhân viên Bộ phận Số ảnh Trạng thái Cập nhật lần cuối {faces.map((face) => ( {face.name} {face.employeeId} {face.department} {face.faceCount}

{face.status}

{face.lastUpdated} Hành động Xem chi tiết Thêm ảnh khuôn mặt Chỉnh sửa thông tin Xóa ))}

Thống kê dữ liệu khuôn mặt

Đã xác thực 75%

Chờ xác thực 15%

Cần cập nhật 10%

Phân loại đối tượng

Nhân viên 65%

Nhà thầu 25%

Khách 10%

Hoạt động gần đây

Thêm mới khuôn mặt cho Nguyễn Văn A

12/04/2025 - 10:25

Cập nhật khuôn mặt cho Trần Thị B

10/04/2025 - 14:30

Nhập dữ liệu khuôn mặt từ file

08/04/2025 - 09:15

) } [V0_FILE]typescriptreact:file="app/quan-ly-khuon-mat/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dong-bo-du-lieu/page.tsx" isMerged="true" import { DashboardHeader } from "@/components/dashboard-header" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Progress } from "@/components/ui/progress" import { Badge } from "@/components/ui/badge" import { RefreshCw, Database, Fingerprint, CreditCard, Camera, CheckCircle, AlertCircle, Clock, ArrowRightLeft, Settings, } from "lucide-react" export default function DataSyncPage() { return (

Tất cả Khuôn mặt Vân tay Thẻ từ

Khuôn mặt Đang hoạt động

Camera AI

Tiến trình đồng bộ 100%

Tổng số bản ghi 245

Đồng bộ thành công 245

Lỗi 0

Lần đồng bộ cuối 12/04/2025 10:25

Đồng bộ hoàn tất

Vân tay Đang đồng bộ

Thiết bị đọc vân tay

Tiến trình đồng bộ 65%

Tổng số bản ghi 180

Đồng bộ thành công 117

Lỗi 0

Lần đồng bộ cuối Đang thực hiện

Đang đồng bộ...

Thẻ từ Lỗi

Đầu đọc thẻ từ

Tiến trình đồng bộ 30%

Tổng số bản ghi 210

Đồng bộ thành công 63

Lỗi 147

Lần đồng bộ cuối 11/04/2025 15:40

Lỗi kết nối với thiết bị

Lịch sử đồng bộ Lịch sử đồng bộ dữ liệu xác thực từ các nguồn

Đồng bộ dữ liệu khuôn mặt

Thành công

12/04/2025 - 10:25 | 245 bản ghi

Đồng bộ dữ liệu vân tay

Đang thực hiện

12/04/2025 - 10:30 | 180 bản ghi

Đồng bộ dữ liệu thẻ từ

Lỗi

11/04/2025 - 15:40 | 210 bản ghi

Đồng bộ tất cả dữ liệu

Thành công

10/04/2025 - 09:15 | 635 bản ghi

Tích hợp hệ thống Trạng thái kết nối với các hệ thống khác

Hệ thống Chấm Công

Đã kết nối

Đồng bộ dữ liệu thời gian ra vào

Hệ thống Quản Lý Nhân Sự

Đã kết nối

Đồng bộ thông tin nhân viên và vi phạm

Hệ thống Cổng

Đã kết nối

Điều khiển đóng/mở cổng tự động

) } [V0_FILE]typescriptreact:file="app/quan-ly-cong/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import { DashboardHeader } from "@/components/dashboard-header" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Switch } from "@/components/ui/switch" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { DoorClosed, DoorOpen, MoreHorizontal, Plus, Settings, UserCheck, Fingerprint, CreditCard, AlertCircle, Clock, Bell, } from "lucide-react" export default function GateManagementPage() { // Dữ liệu mẫu cho bảng const gates = [ { id: "1", name: "Cổng chính", location: "Lối vào chính", status: "Đang mở", mode: "Tự động", lastActivity: "12/04/2025 10:25", camera: "Camera 1", }, { id: "2", name: "Cổng phụ 1", location: "Lối vào phía Đông", status: "Đang đóng", mode: "Tự động", lastActivity: "12/04/2025 09:45", camera: "Camera 2", }, { id: "3", name: "Cổng kho", location: "Khu vực kho hàng", status: "Đang đóng", mode: "Thủ công", lastActivity: "11/04/2025 15:30", camera: "Camera 4", }, { id: "4", name: "Cổng nhân viên", location: "Lối vào nhân viên", status: "Đang mở", mode: "Tự động", lastActivity: "12/04/2025 08:15", camera: "Camera 3", }, { id: "5", name: "Cổng phụ 2", location: "Lối vào phía Tây", status: "Đang đóng", mode: "Tự động", lastActivity: "12/04/2025 07:30", camera: "Camera 5", }, ] // Dữ liệu mẫu cho lịch sử hoạt động const activities = [ { id: "1", gate: "Cổng chính", action: "Mở cổng", time: "12/04/2025 10:25", user: "Nguyễn Văn A", method: "Nhận diện khuôn mặt", }, { id: "2", gate: "Cổng phụ 1", action: "Đóng cổng", time: "12/04/2025 09:45", user: "Hệ thống", method: "Tự động", }, { id: "3", gate: "Cổng nhân viên", action: "Mở cổng", time: "12/04/2025 08:15", user: "Trần Thị B", method: "Thẻ từ", }, { id: "4", gate: "Cổng kho", action: "Đóng cổng", time: "11/04/2025 15:30", user: "Lê Văn C", method: "Thủ công", }, ] return (

Cổng Hoạt động Cài đặt

Danh sách cổng Quản lý và điều khiển các cổng trong hệ thống

Tên cổng Vị trí Trạng thái Chế độ Camera Hoạt động gần nhất Điều khiển {gates.map((gate) => ( {gate.name} {gate.location}

{gate.status === "Đang mở" ? ( ) : ( )} {gate.status}

{gate.mode} {gate.camera} {gate.lastActivity}

Hành động Xem camera Lịch sử hoạt động Chỉnh sửa Vô hiệu hóa ))}

Thống kê hoạt động Thống kê hoạt động của các cổng trong ngày hôm nay

Tổng số lần mở/đóng 124

Nhận diện khuôn mặt 78

Thẻ từ 35

Thủ công 11

Hoạt động gần đây Các hoạt động gần đây của hệ thống cổng

{activities.slice(0, 3).map((activity) => (

{activity.action === "Mở cổng" ? ( ) : ( )}

{activity.action} - {activity.gate}

{activity.time} • {activity.user} • {activity.method}

))}

Lịch sử hoạt động Lịch sử hoạt động của hệ thống cổng

Cổng Hành động Thời gian Người thực hiện Phương thức {activities.map((activity) => ( {activity.gate}

{activity.action === "Mở cổng" ? ( ) : ( )} {activity.action}

{activity.time} {activity.user} {activity.method} ))}

Cài đặt hệ thống cổng Cấu hình và quản lý hệ thống cổng

Cài đặt nhận diện

Nhận diện khuôn mặt

Tự động mở cổng khi nhận diện khuôn mặt đã đăng ký

Xác thực vân tay

Tự động mở cổng khi xác thực vân tay thành công

Thẻ từ

Tự động mở cổng khi quẹt thẻ từ hợp lệ

Từ chối truy cập

Từ chối truy cập nếu khuôn mặt không được nhận diện

Cài đặt tự động

Đóng cổng tự động

Tự động đóng cổng sau khi mở trong một khoảng thời gian

Cảnh báo

Gửi cảnh báo khi có sự cố hoặc truy cập trái phép

) } [V0_FILE]typescriptreact:file="app/quan-ly-hanh-vi-cam/page.tsx" isMerged="true" import { DashboardHeader } from "@/components/dashboard-header" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Badge } from "@/components/ui/badge" import { Ban, MoreHorizontal, Plus, Search, Filter } from "lucide-react" export default function ProhibitedBehaviorPage() { // Dữ liệu mẫu cho bảng const behaviors = [ { id: "1", name: "Sử dụng điện thoại", description: "Sử dụng điện thoại trong khu vực sản xuất", severity: "Cao", area: "Khu vực sản xuất", status: "Đang giám sát", detectionCount: 15, }, { id: "2", name: "Không đội mũ bảo hiểm", description: "Không đội mũ bảo hiểm trong khu vực xây dựng", severity: "Cao", area: "Khu vực xây dựng", status: "Đang giám sát", detectionCount: 23, }, { id: "3", name: "Hút thuốc", description: "Hút thuốc trong khu vực cấm", severity: "Trung bình", area: "Toàn bộ nhà máy", status: "Đang giám sát", detectionCount: 8, }, { id: "4", name: "Chạy trong nhà máy", description: "Chạy thay vì đi bộ trong khu vực nhà máy", severity: "Thấp", area: "Toàn bộ nhà máy", status: "Đang giám sát", detectionCount: 12, }, { id: "5", name: "Không đeo găng tay", description: "Không đeo găng tay bảo hộ khi làm việc với máy móc", severity: "Cao", area: "Khu vực sản xuất", status: "Tạm dừng", detectionCount: 19, }, ] return (

Danh sách hành vi cấm Quản lý các hành vi cấm được giám sát bởi hệ thống

Tên hành vi Mô tả Mức độ Khu vực Trạng thái Số lần phát hiện {behaviors.map((behavior) => ( {behavior.name} {behavior.description} {behavior.severity} {behavior.area} {behavior.status} {behavior.detectionCount} Hành động Xem chi tiết Chỉnh sửa {behavior.status === "Đang giám sát" ? "Tạm dừng giám sát" : "Bắt đầu giám sát"} Xóa ))}

Thống kê theo mức độ

Cao 60%

Trung bình 20%

Thấp 20%

Thống kê theo khu vực

Khu vực sản xuất 40%

Khu vực xây dựng 20%

Toàn bộ nhà máy 40%

Vi phạm gần đây

Sử dụng điện thoại

Khu vực sản xuất - Camera 2 - 10:25

Không đội mũ bảo hiểm

Khu vực xây dựng - Camera 4 - 09:45

Hút thuốc

Khu vực kho - Camera 3 - 08:30

) } [V0_FILE]typescriptreact:file="app/quan-ly-hanh-vi-cam/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/tich-hop-he-thong/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import { DashboardHeader } from "@/components/dashboard-header" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Switch } from "@/components/ui/switch" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ArrowRightLeft, Briefcase, Calendar, CheckCircle, Clock, Database, RefreshCw, Settings, AlertCircle, Users, DoorClosed, Bell, } from "lucide-react" export default function SystemIntegrationPage() { return (

Tất cả Đang hoạt động Không hoạt động

Hệ thống Chấm Công Đang hoạt động

Gửi thông tin thời gian ra vào đến hệ thống Chấm Công

Trạng thái kết nối

Đã kết nối

Đồng bộ gần nhất

12/04/2025 10:25

Dữ liệu đã gửi

1,245 bản ghi

Tự động đồng bộ

Hệ thống Quản Lý Nhân Sự Đang hoạt động

Gửi thông tin ra vào và vi phạm đến hệ thống Quản Lý Nhân Sự

Trạng thái kết nối

Đã kết nối

Đồng bộ gần nhất

12/04/2025 09:15

Dữ liệu đã gửi

2,130 bản ghi

Tự động đồng bộ

Hệ thống Cổng Đang hoạt động

Điều khiển việc đóng/mở cổng tự động

Trạng thái kết nối

Đã kết nối

Hoạt động gần nhất

12/04/2025 10:30

Số lệnh đã gửi

124 lệnh

Tự động mở cổng

Hệ thống Thông báo Không hoạt động

Gửi thông báo qua email, SMS và ứng dụng di động

Trạng thái kết nối

Lỗi kết nối

Hoạt động gần nhất

10/04/2025 15:45

Thông báo đã gửi

532 thông báo

Tự động gửi thông báo

Lịch sử đồng bộ Lịch sử đồng bộ dữ liệu với các hệ thống khác

Đồng bộ dữ liệu với hệ thống Chấm Công

Thành công

12/04/2025 - 10:25 | 45 bản ghi

Đồng bộ dữ liệu với hệ thống Quản Lý Nhân Sự

Thành công

12/04/2025 - 09:15 | 32 bản ghi

Đồng bộ dữ liệu với hệ thống Thông báo

Lỗi

10/04/2025 - 15:45 | 18 bản ghi

Đồng bộ dữ liệu với tất cả hệ thống

Một phần

10/04/2025 - 09:00 | 120 bản ghi

) } [V0_FILE]typescriptreact:file="app/cham-cong/page.tsx" isMerged="true" import { DashboardHeader } from "@/components/dashboard-header" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { Calendar, Download, MoreHorizontal, Search, Filter, Clock, ArrowRightLeft } from "lucide-react" export default function AttendancePage() { // Dữ liệu mẫu cho bảng const attendances = [ { id: "1", name: "Nguyễn Văn A", employeeId: "NV001", department: "Sản xuất", checkIn: "07:45 - 12/04/2025", checkOut: "17:15 - 12/04/2025", status: "Đúng giờ", method: "Khuôn mặt", }, { id: "2", name: "Trần Thị B", employeeId: "NV002", department: "Kỹ thuật", checkIn: "08:10 - 12/04/2025", checkOut: "17:30 - 12/04/2025", status: "Đi muộn", method: "Vân tay", }, { id: "3", name: "Lê Văn C", employeeId: "NT001", department: "Bảo trì", checkIn: "07:55 - 12/04/2025", checkOut: "16:45 - 12/04/2025", status: "Về sớm", method: "Thẻ từ", }, { id: "4", name: "Phạm Thị D", employeeId: "NV003", department: "Nhân sự", checkIn: "08:00 - 12/04/2025", checkOut: "17:00 - 12/04/2025", status: "Đúng giờ", method: "Khuôn mặt", }, { id: "5", name: "Hoàng Văn E", employeeId: "NV004", department: "Quản lý", checkIn: "07:30 - 12/04/2025", checkOut: "18:15 - 12/04/2025", status: "Làm thêm giờ", method: "Khuôn mặt", }, ] return (

Hôm nay Tuần này Tháng này Tùy chỉnh

Dữ liệu chấm công Thông tin chấm công của nhân viên

Tên nhân viên Mã nhân viên Bộ phận Giờ vào Giờ ra Trạng thái Phương thức {attendances.map((attendance) => ( {attendance.name} {attendance.employeeId} {attendance.department} {attendance.checkIn} {attendance.checkOut} {attendance.status} {attendance.method} Hành động Xem chi tiết Chỉnh sửa Xem hình ảnh Đánh dấu ngoại lệ ))}

Thống kê chấm công Thống kê chấm công hôm nay

Đúng giờ 65%

Đi muộn 15%

Về sớm 10%

Làm thêm giờ 10%

Phương thức chấm công Thống kê theo phương thức chấm công

Khuôn mặt 60%

Vân tay 25%

Thẻ từ 15%

Hoạt động gần đây Hoạt động chấm công gần đây

Hoàng Văn E đã check-out

18:15 - 12/04/2025 | Khuôn mặt

Phạm Thị D đã check-out

17:00 - 12/04/2025 | Khuôn mặt

Trần Thị B đã check-out

17:30 - 12/04/2025 | Vân tay

) } [V0_FILE]typescriptreact:file="app/cham-cong/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/quan-ly-doi-tuong/them-moi/page.tsx" isMerged="true" import { DashboardHeader } from "@/components/dashboard-header" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Textarea } from "@/components/ui/textarea" import { Camera, Upload, Save, UserPlus, Fingerprint, CreditCard } from "lucide-react" export default function AddObjectPage() { return (

Thông tin cơ bản Khuôn mặt Xác thực Quyền truy cập Thông tin cơ bản Nhập thông tin cơ bản của đối tượng

Loại đối tượng

Phòng ban

Họ và tên

Mã nhân viên

Số điện thoại

Địa chỉ

</div>

<TabsContent value="face" className="mt-6">
            <Card>
              <CardHeader>
                <CardTitle>Khuôn mặt</CardTitle>
                <CardDescription>Thêm ảnh khuôn mặt cho đối tượng</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="space-y-4">
                    <div className="border rounded-lg p-4">
                      <div className="aspect-video bg-gray-100 rounded-md flex items-center justify-center">
                        <Camera className="h-12 w-12 text-gray-400" />
                      </div>
                      <div className="mt-4 flex justify-center">
                        <Button>
                          <Camera className="h-4 w-4 mr-2" />
                          Chụp ảnh
                        </Button>
                      </div>
                    </div>
                    <p className="text-sm text-muted-foreground text-center">Sử dụng camera để chụp ảnh khuôn mặt</p>
                  </div>

<div className="space-y-4">
                    <div className="border rounded-lg p-4 h-[300px] flex flex-col items-center justify-center">
                      <Upload className="h-12 w-12 text-gray-400 mb-4" />
                      <p className="text-sm text-muted-foreground mb-4">
                        Kéo và thả ảnh vào đây hoặc nhấn nút bên dưới
                      </p>
                      <Button>
                        <Upload className="h-4 w-4 mr-2" />
                        Tải ảnh lên
                      </Button>
                    </div>
                    <p className="text-sm text-muted-foreground text-center">
                      Hỗ trợ định dạng: JPG, PNG. Kích thước tối đa: 5MB
                    </p>
                  </div>
                </div>

<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                  <p className="text-sm text-yellow-800">
                    <strong>Lưu ý:</strong> Để đảm bảo độ chính xác cao nhất, vui lòng tải lên ít nhất 3 ảnh khuôn mặt ở
                    các góc độ khác nhau.
                  </p>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="auth" className="mt-6">
            <Card>
              <CardHeader>
                <CardTitle>Xác thực</CardTitle>
                <CardDescription>Thiết lập phương thức xác thực cho đối tượng</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                  <div className="border rounded-lg p-6 space-y-4">
                    <div className="flex items-center justify-center">
                      <div className="h-16 w-16 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
                        <UserPlus className="h-8 w-8" />
                      </div>
                    </div>
                    <h3 className="text-lg font-medium text-center">Khuôn mặt</h3>
                    <p className="text-sm text-muted-foreground text-center">Xác thực bằng nhận diện khuôn mặt</p>
                    <div className="flex justify-center">
                      <Button variant="outline">Thiết lập</Button>
                    </div>
                  </div>

<div className="border rounded-lg p-6 space-y-4">
                    <div className="flex items-center justify-center">
                      <div className="h-16 w-16 bg-purple-100 rounded-full flex items-center justify-center text-purple-600">
                        <Fingerprint className="h-8 w-8" />
                      </div>
                    </div>
                    <h3 className="text-lg font-medium text-center">Vân tay</h3>
                    <p className="text-sm text-muted-foreground text-center">Xác thực bằng vân tay</p>
                    <div className="flex justify-center">
                      <Button variant="outline">Thiết lập</Button>
                    </div>
                  </div>

<div className="border rounded-lg p-6 space-y-4">
                    <div className="flex items-center justify-center">
                      <div className="h-16 w-16 bg-green-100 rounded-full flex items-center justify-center text-green-600">
                        <CreditCard className="h-8 w-8" />
                      </div>
                    </div>
                    <h3 className="text-lg font-medium text-center">Thẻ từ</h3>
                    <p className="text-sm text-muted-foreground text-center">Xác thực bằng thẻ từ</p>
                    <div className="flex justify-center">
                      <Button variant="outline">Thiết lập</Button>
                    </div>
                  </div>
                </div>

<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                  <p className="text-sm text-blue-800">
                    <strong>Thông tin:</strong> Bạn có thể thiết lập nhiều phương thức xác thực cho một đối tượng. Điều
                    này giúp tăng tính bảo mật và linh hoạt trong việc ra vào.
                  </p>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="access" className="mt-6">
            <Card>
              <CardHeader>
                <CardTitle>Quyền truy cập</CardTitle>
                <CardDescription>Thiết lập quyền truy cập cho đối tượng</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="space-y-4">
                  <h3 className="text-sm font-medium">Khu vực được phép truy cập</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="flex items-center space-x-2">
                      <input type="checkbox" id="area1" className="rounded border-gray-300" />
                      <Label htmlFor="area1">Khu vực sản xuất A</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <input type="checkbox" id="area2" className="rounded border-gray-300" />
                      <Label htmlFor="area2">Khu vực sản xuất B</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <input type="checkbox" id="area3" className="rounded border-gray-300" />
                      <Label htmlFor="area3">Khu vực kho hàng</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <input type="checkbox" id="area4" className="rounded border-gray-300" />
                      <Label htmlFor="area4">Khu vực văn phòng</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <input type="checkbox" id="area5" className="rounded border-gray-300" />
                      <Label htmlFor="area5">Khu vực nghỉ ngơi</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <input type="checkbox" id="area6" className="rounded border-gray-300" />
                      <Label htmlFor="area6">Khu vực bảo mật cao</Label>
                    </div>
                  </div>
                </div>

<div className="space-y-2">
                    <Label>Ngày trong tuần</Label>
                    <div className="grid grid-cols-7 gap-2">
                      {["CN", "T2", "T3", "T4", "T5", "T6", "T7"].map((day, index) => (
                        <div key={index} className="flex flex-col items-center">
                          <input
                            type="checkbox"
                            id={`day${index}`}
                            className="rounded border-gray-300"
                            defaultChecked={index > 0 && index < 6}
                          />
                          <Label htmlFor={`day${index}`} className="text-xs mt-1">
                            {day}
                          </Label>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>

<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                  <p className="text-sm text-blue-800">
                    <strong>Thông tin:</strong> Thiết lập quyền truy cập sẽ giới hạn khu vực và thời gian mà đối tượng
                    được phép ra vào.
                  </p>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>

<div className="flex justify-end gap-2">
          <Button variant="outline">Hủy</Button>
          <Button>
            <Save className="h-4 w-4 mr-2" />
            Lưu
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/quan-ly-doi-tuong/nhom/page.tsx" isMerged="true"
import { DashboardHeader } from "@/components/dashboard-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { UsersRound, MoreHorizontal, Plus, Search, UserPlus } from "lucide-react"

export default function GroupManagementPage() {
  // Dữ liệu mẫu cho bảng
  const groups = [
    {
      id: "1",
      name: "Phòng Sản xuất",
      description: "Nhóm nhân viên thuộc phòng sản xuất",
      members: 25,
      createdAt: "10/03/2025",
    },
    {
      id: "2",
      name: "Phòng Kỹ thuật",
      description: "Nhóm nhân viên thuộc phòng kỹ thuật",
      members: 15,
      createdAt: "12/03/2025",
    },
    {
      id: "3",
      name: "Phòng Bảo trì",
      description: "Nhóm nhân viên thuộc phòng bảo trì",
      members: 10,
      createdAt: "15/03/2025",
    },
    {
      id: "4",
      name: "Phòng Nhân sự",
      description: "Nhóm nhân viên thuộc phòng nhân sự",
      members: 8,
      createdAt: "18/03/2025",
    },
    {
      id: "5",
      name: "Ban Quản lý",
      description: "Nhóm quản lý cấp cao",
      members: 5,
      createdAt: "20/03/2025",
    },
  ]

return (
    <div className="flex flex-col h-full">
      <DashboardHeader title="Quản lý nhóm" description="Quản lý các nhóm đối tượng trong hệ thống" />
      <div className="p-6 space-y-6 flex-1 overflow-auto">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2 w-full max-w-sm">
            <div className="relative w-full">
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
              <Input type="search" placeholder="Tìm kiếm nhóm..." className="pl-8 w-full" />
            </div>
          </div>
          <Button>
            <Plus className="h-4 w-4 mr-2" />
            Thêm nhóm
          </Button>
        </div>

<Card>
          <CardHeader>
            <CardTitle>Danh sách nhóm</CardTitle>
            <CardDescription>Quản lý các nhóm đối tượng trong hệ thống</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Tên nhóm</TableHead>
                    <TableHead>Mô tả</TableHead>
                    <TableHead>Số thành viên</TableHead>
                    <TableHead>Ngày tạo</TableHead>
                    <TableHead className="w-[150px]">Thao tác</TableHead>
                    <TableHead className="w-[80px]"></TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {groups.map((group) => (
                    <TableRow key={group.id}>
                      <TableCell className="font-medium">
                        <div className="flex items-center gap-2">
                          <UsersRound className="h-5 w-5 text-blue-600" />
                          {group.name}
                        </div>
                      </TableCell>
                      <TableCell>{group.description}</TableCell>
                      <TableCell>
                        <Badge variant="outline" className="bg-blue-50 text-blue-700">
                          {group.members} thành viên
                        </Badge>
                      </TableCell>
                      <TableCell>{group.createdAt}</TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <Button variant="outline" size="sm">
                            <UserPlus className="h-4 w-4 mr-2" />
                            Thêm thành viên
                          </Button>
                        </div>
                      </TableCell>
                      <TableCell>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" className="h-8 w-8 p-0" aria-label="Mở menu">
                              <MoreHorizontal className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuLabel>Hành động</DropdownMenuLabel>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem>Xem chi tiết</DropdownMenuItem>
                            <DropdownMenuItem>Chỉnh sửa</DropdownMenuItem>
                            <DropdownMenuItem>Xem thành viên</DropdownMenuItem>
                            <DropdownMenuItem className="text-red-600">Xóa</DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <Card>
            <CardHeader>
              <CardTitle>Thống kê nhóm</CardTitle>
              <CardDescription>Thống kê số lượng thành viên theo nhóm</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {groups.map((group) => (
                  <div key={group.id} className="space-y-2">
                    <div className="flex items-center justify-between">
                      <span className="text-sm">{group.name}</span>
                      <span className="text-sm font-medium">{group.members}</span>
                    </div>
                    <div className="h-2 w-full bg-gray-100 rounded-full">
                      <div
                        className="h-2 bg-blue-500 rounded-full"
                        style={{
                          width: `${(group.members / 25) * 100}%`,
                        }}
                      ></div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Hoạt động gần đây</CardTitle>
              <CardDescription>Các hoạt động gần đây liên quan đến nhóm</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center gap-4 p-3 rounded-lg border">
                  <div className="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
                    <UserPlus className="h-5 w-5" />
                  </div>
                  <div className="flex-1">
                    <h4 className="text-sm font-medium">Thêm Nguyễn Văn A vào nhóm Phòng Sản xuất</h4>
                    <p className="text-xs text-muted-foreground">12/04/2025 - 10:25</p>
                  </div>
                </div>
                <div className="flex items-center gap-4 p-3 rounded-lg border">
                  <div className="h-10 w-10 bg-green-100 rounded-full flex items-center justify-center text-green-600">
                    <UsersRound className="h-5 w-5" />
                  </div>
                  <div className="flex-1">
                    <h4 className="text-sm font-medium">Tạo nhóm mới: Phòng Nghiên cứu</h4>
                    <p className="text-xs text-muted-foreground">11/04/2025 - 14:30</p>
                  </div>
                </div>
                <div className="flex items-center gap-4 p-3 rounded-lg border">
                  <div className="h-10 w-10 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600">
                    <UsersRound className="h-5 w-5" />
                  </div>
                  <div className="flex-1">
                    <h4 className="text-sm font-medium">Cập nhật thông tin nhóm Phòng Kỹ thuật</h4>
                    <p className="text-xs text-muted-foreground">10/04/2025 - 09:15</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/quan-ly-doi-tuong/nhom/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[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 "./globals.css"
import { ThemeProvider } from "@/components/theme-provider"
import { SidebarProvider } from "@/components/sidebar-provider"
import { Sidebar } from "@/components/sidebar"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Intersnack - Hệ thống Camera AI",
  description: "Hệ thống Camera AI quản lý nhà máy Intersnack",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="vi" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
          <SidebarProvider>
            <div className="flex h-screen">
              <Sidebar />
              <main className="flex-1 overflow-auto">{children}</main>
            </div>
          </SidebarProvider>
        </ThemeProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard-header.tsx" isQuickEdit="true" isMerged="true"
import { Button } from "@/components/ui/button"
import { RefreshCw } from "lucide-react"

interface DashboardHeaderProps {
  title: string
  description?: string
}

export function DashboardHeader({ title, description }: DashboardHeaderProps) {
  return (
    <div className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="flex h-16 items-center px-6">
        <div className="flex-1">
          <div className="flex items-center gap-2">
            <h1 className="text-lg font-semibold">{title}</h1>
            {description && (
              <span className="text-sm text-muted-foreground">
                {">"} {description}
              </span>
            )}
          </div>
        </div>
        <div className="flex items-center gap-4">
          <Button variant="outline" size="sm">
            <RefreshCw className="h-4 w-4 mr-2" />
            Làm mới
          </Button>
          <div className="flex items-center">
            <img
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-HlXrNaazymzQUuOnwaT1ETf0Ivuhq1.png"
              alt="Intersnack Logo"
              className="h-8"
            />
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/globals.css" isQuickEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 0 68% 42%; /* Intersnack red */
    --primary-foreground: 210 40% 98%;
    --secondary: 0 68% 95%; /* Light red for secondary elements */
    --secondary-foreground: 0 68% 42%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 0 68% 95%; /* Light red for accent */
    --accent-foreground: 0 68% 42%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 0 68% 42%; /* Intersnack red for ring */
    --radius: 0.5rem;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 0 68% 42%; /* Intersnack red */
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 0 50% 20%; /* Darker red for secondary in dark mode */
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 0 50% 20%; /* Darker red for accent in dark mode */
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 0 68% 42%; /* Intersnack red for ring */
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescriptreact:file="app/giam-sat-an-ninh/lich-su/page.tsx" isMerged="true"
import { DashboardHeader } from "@/components/dashboard-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Calendar,
  Download,
  Search,
  Filter,
  Eye,
  AlertTriangle,
  UserCheck,
  DoorOpen,
  Camera,
  Clock,
} from "lucide-react"

export default function SecurityHistoryPage() {
  // Dữ liệu mẫu cho bảng
  const events = [
    {
      id: "1",
      type: "Phát hiện người lạ",
      location: "Khu vực A - Camera 2",
      time: "12/04/2025 10:25",
      severity: "high",
      status: "Đã xử lý",
      camera: "Camera 2",
    },
    {
      id: "2",
      type: "Phát hiện chuyển động",
      location: "Khu vực B - Camera 1",
      time: "12/04/2025 09:45",
      severity: "medium",
      status: "Đang xử lý",
      camera: "Camera 1",
    },
    {
      id: "3",
      type: "Vượt qua ranh giới",
      location: "Cổng chính - Camera 3",
      time: "12/04/2025 08:30",
      severity: "high",
      status: "Chưa xử lý",
      camera: "Camera 3",
    },
    {
      id: "4",
      type: "Nhận diện nhân viên",
      location: "Cổng nhân viên - Camera 4",
      time: "12/04/2025 07:55",
      severity: "low",
      status: "Tự động xử lý",
      camera: "Camera 4",
    },
    {
      id: "5",
      type: "Mở cổng",
      location: "Cổng chính - Camera 3",
      time: "12/04/2025 07:30",
      severity: "low",
      status: "Tự động xử lý",
      camera: "Camera 3",
    },
  ]

return (
    <div className="flex flex-col h-full">
      <DashboardHeader title="Lịch sử sự kiện" description="Xem lịch sử các sự kiện an ninh" />
      <div className="p-6 space-y-6 flex-1 overflow-auto">
        <div className="flex items-center justify-between">
          <Tabs defaultValue="all" className="w-[400px]">
            <TabsList className="grid w-full grid-cols-4">
              <TabsTrigger value="all">Tất cả</TabsTrigger>
              <TabsTrigger value="alerts">Cảnh báo</TabsTrigger>
              <TabsTrigger value="access">Ra vào</TabsTrigger>
              <TabsTrigger value="system">Hệ thống</TabsTrigger>
            </TabsList>
          </Tabs>
          <div className="flex items-center gap-2">
            <Button variant="outline">
              <Calendar className="h-4 w-4 mr-2" />
              Chọn ngày
            </Button>
            <Button>
              <Download className="h-4 w-4 mr-2" />
              Xuất báo cáo
            </Button>
          </div>
        </div>

<Card>
          <CardHeader>
            <CardTitle>Lịch sử sự kiện</CardTitle>
            <CardDescription>Danh sách các sự kiện an ninh được ghi lại</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-2 w-full max-w-sm">
                <div className="relative w-full">
                  <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                  <Input type="search" placeholder="Tìm kiếm sự kiện..." className="pl-8 w-full" />
                </div>
              </div>
              <div className="flex items-center gap-2">
                <Select defaultValue="all">
                  <SelectTrigger className="w-[180px]">
                    <SelectValue placeholder="Loại sự kiện" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Tất cả</SelectItem>
                    <SelectItem value="intrusion">Xâm nhập</SelectItem>
                    <SelectItem value="motion">Chuyển động</SelectItem>
                    <SelectItem value="access">Ra vào</SelectItem>
                    <SelectItem value="recognition">Nhận diện</SelectItem>
                  </SelectContent>
                </Select>
                <Select defaultValue="all">
                  <SelectTrigger className="w-[180px]">
                    <SelectValue placeholder="Mức độ nghiêm trọng" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Tất cả</SelectItem>
                    <SelectItem value="high">Cao</SelectItem>
                    <SelectItem value="medium">Trung bình</SelectItem>
                    <SelectItem value="low">Thấp</SelectItem>
                  </SelectContent>
                </Select>
                <Button variant="outline" size="icon">
                  <Filter className="h-4 w-4" />
                </Button>
              </div>
            </div>
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Loại sự kiện</TableHead>
                    <TableHead>Vị trí</TableHead>
                    <TableHead>Thời gian</TableHead>
                    <TableHead>Camera</TableHead>
                    <TableHead>Mức độ</TableHead>
                    <TableHead>Trạng thái</TableHead>
                    <TableHead className="w-[100px]">Thao tác</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {events.map((event) => (
                    <TableRow key={event.id}>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          {event.type === "Phát hiện người lạ" || event.type === "Vượt qua ranh giới" ? (
                            <AlertTriangle className="h-4 w-4 text-red-600" />
                          ) : event.type === "Phát hiện chuyển động" ? (
                            <Eye className="h-4 w-4 text-yellow-600" />
                          ) : event.type === "Nhận diện nhân viên" ? (
                            <UserCheck className="h-4 w-4 text-green-600" />
                          ) : (
                            <DoorOpen className="h-4 w-4 text-blue-600" />
                          )}
                          {event.type}
                        </div>
                      </TableCell>
                      <TableCell>{event.location}</TableCell>
                      <TableCell>{event.time}</TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <Camera className="h-4 w-4 text-blue-600" />
                          {event.camera}
                        </div>
                      </TableCell>
                      <TableCell>
                        <Badge
                          variant="outline"
                          className={
                            event.severity === "high"
                              ? "bg-red-50 text-red-700"
                              : event.severity === "medium"
                                ? "bg-yellow-50 text-yellow-700"
                                : "bg-blue-50 text-blue-700"
                          }
                        >
                          {event.severity === "high" ? "Cao" : event.severity === "medium" ? "Trung bình" : "Thấp"}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <Badge
                          variant="outline"
                          className={
                            event.status === "Chưa xử lý"
                              ? "bg-red-50 text-red-700"
                              : event.status === "Đang xử lý"
                                ? "bg-yellow-50 text-yellow-700"
                                : event.status === "Đã xử lý"
                                  ? "bg-green-50 text-green-700"
                                  : "bg-blue-50 text-blue-700"
                          }
                        >
                          {event.status}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <Button variant="outline" size="sm">
                            <Eye className="h-4 w-4 mr-2" />
                            Xem
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <Card>
            <CardHeader>
              <CardTitle>Thống kê sự kiện</CardTitle>
              <CardDescription>Thống kê sự kiện theo loại</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-sm">Phát hiện người lạ</span>
                    <span className="text-sm font-medium">25%</span>
                  </div>
                  <div className="h-2 w-full bg-gray-100 rounded-full">
                    <div className="h-2 w-[25%] bg-red-500 rounded-full"></div>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-sm">Phát hiện chuyển động</span>
                    <span className="text-sm font-medium">35%</span>
                  </div>
                  <div className="h-2 w-full bg-gray-100 rounded-full">
                    <div className="h-2 w-[35%] bg-yellow-500 rounded-full"></div>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-sm">Vượt qua ranh giới</span>
                    <span className="text-sm font-medium">15%</span>
                  </div>
                  <div className="h-2 w-full bg-gray-100 rounded-full">
                    <div className="h-2 w-[15%] bg-red-500 rounded-full"></div>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-sm">Nhận diện và ra vào</span>
                    <span className="text-sm font-medium">25%</span>
                  </div>
                  <div className="h-2 w-full bg-gray-100 rounded-full">
                    <div className="h-2 w-[25%] bg-blue-500 rounded-full"></div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Thống kê theo thời gian</CardTitle>
              <CardDescription>Thống kê sự kiện theo thời gian trong ngày</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-sm">Sáng (6:00 - 12:00)</span>
                    <span className="text-sm font-medium">45%</span>
                  </div>
                  <div className="h-2 w-full bg-gray-100 rounded-full">
                    <div className="h-2 w-[45%] bg-blue-500 rounded-full"></div>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-sm">Chiều (12:00 - 18:00)</span>
                    <span className="text-sm font-medium">30%</span>
                  </div>
                  <div className="h-2 w-full bg-gray-100 rounded-full">
                    <div className="h-2 w-[30%] bg-green-500 rounded-full"></div>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-sm">Tối (18:00 - 24:00)</span>
                    <span className="text-sm font-medium">15%</span>
                  </div>
                  <div className="h-2 w-full bg-gray-100 rounded-full">
                    <div className="h-2 w-[15%] bg-purple-500 rounded-full"></div>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-sm">Đêm (0:00 - 6:00)</span>
                    <span className="text-sm font-medium">10%</span>
                  </div>
                  <div className="h-2 w-full bg-gray-100 rounded-full">
                    <div className="h-2 w-[10%] bg-gray-500 rounded-full"></div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Sự kiện gần đây</CardTitle>
              <CardDescription>Các sự kiện xảy ra gần đây nhất</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center gap-4 p-3 rounded-lg border">
                  <div className="h-10 w-10 bg-red-100 rounded-full flex items-center justify-center text-red-600">
                    <AlertTriangle className="h-5 w-5" />
                  </div>
                  <div className="flex-1">
                    <h4 className="text-sm font-medium">Phát hiện người lạ</h4>
                    <div className="flex items-center text-xs text-muted-foreground">
                      <Clock className="h-3 w-3 mr-1" />
                      <span>12/04/2025 10:25</span>
                      <span className="mx-1">•</span>
                      <Camera className="h-3 w-3 mr-1" />
                      <span>Camera 2</span>
                    </div>
                  </div>
                  <Button variant="outline" size="sm">
                    <Eye className="h-4 w-4" />
                  </Button>
                </div>
                <div className="flex items-center gap-4 p-3 rounded-lg border">
                  <div className="h-10 w-10 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600">
                    <Eye className="h-5 w-5" />
                  </div>
                  <div className="flex-1">
                    <h4 className="text-sm font-medium">Phát hiện chuyển động</h4>
                    <div className="flex items-center text-xs text-muted-foreground">
                      <Clock className="h-3 w-3 mr-1" />
                      <span>12/04/2025 09:45</span>
                      <span className="mx-1">•</span>
                      <Camera className="h-3 w-3 mr-1" />
                      <span>Camera 1</span>
                    </div>
                  </div>
                  <Button variant="outline" size="sm">
                    <Eye className="h-4 w-4" />
                  </Button>
                </div>
                <div className="flex items-center gap-4 p-3 rounded-lg border">
                  <div className="h-10 w-10 bg-green-100 rounded-full flex items-center justify-center text-green-600">
                    <UserCheck className="h-5 w-5" />
                  </div>
                  <div className="flex-1">
                    <h4 className="text-sm font-medium">Nhận diện nhân viên</h4>
                    <div className="flex items-center text-xs text-muted-foreground">
                      <Clock className="h-3 w-3 mr-1" />
                      <span>12/04/2025 07:55</span>
                      <span className="mx-1">•</span>
                      <Camera className="h-3 w-3 mr-1" />
                      <span>Camera 4</span>
                    </div>
                  </div>
                  <Button variant="outline" size="sm">
                    <Eye className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/giam-sat-an-ninh/lich-su/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/giam-sat-an-ninh/canh-bao/page.tsx" isMerged="true"
import { DashboardHeader } from "@/components/dashboard-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { MoreHorizontal, Plus, Search, Filter, Settings, AlertTriangle, Mail, Phone, MessageSquare } from "lucide-react"

export default function AlertConfigPage() {
  // Dữ liệu mẫu cho bảng
  const alerts = [
    {
      id: "1",
      name: "Phát hiện người lạ",
      description: "Cảnh báo khi phát hiện người lạ trong khu vực hạn chế",
      type: "Xâm nhập",
      level: "high",
      areas: ["Khu vực sản xuất A", "Khu vực kho hàng"],
      status: "Đang hoạt động",
      notification: ["Email", "SMS", "Ứng dụng"],
    },
    {
      id: "2",
      name: "Phát hiện chuyển động",
      description: "Cảnh báo khi phát hiện chuyển động bất thường",
      type: "Chuyển động",
      level: "medium",
      areas: ["Khu vực sản xuất B", "Cổng chính"],
      status: "Đang hoạt động",
      notification: ["Email", "Ứng dụng"],
    },
    {
      id: "3",
      name: "Vượt qua ranh giới",
      description: "Cảnh báo khi có người vượt qua ranh giới đã định",
      type: "Ranh giới",
      level: "high",
      areas: ["Cổng chính", "Khu vực kho hàng"],
      status: "Đang hoạt động",
      notification: ["Email", "SMS", "Ứng dụng"],
    },
    {
      id: "4",
      name: "Đối tượng đáng ngờ",
      description: "Cảnh báo khi phát hiện đối tượng có hành vi đáng ngờ",
      type: "Hành vi",
      level: "medium",
      areas: ["Khu vực sản xuất A", "Khu vực sản xuất B"],
      status: "Tạm dừng",
      notification: ["Email"],
    },
    {
      id: "5",
      name: "Phát hiện đám đông",
      description: "Cảnh báo khi phát hiện đám đông tụ tập",
      type: "Đám đông",
      level: "low",
      areas: ["Cổng chính"],
      status: "Đang hoạt động",
      notification: ["Ứng dụng"],
    },
  ]

// Dữ liệu mẫu cho người nhận thông báo
  const recipients = [
    {
      id: "1",
      name: "Nguyễn Văn A",
      role: "Quản lý an ninh",
      email: "nguyenvana@example.com",
      phone: "0901234567",
      alertTypes: ["Xâm nhập", "Ranh giới"],
      status: "Đang hoạt động",
    },
    {
      id: "2",
      name: "Trần Thị B",
      role: "Giám đốc",
      email: "tranthib@example.com",
      phone: "0912345678",
      alertTypes: ["Xâm nhập", "Ranh giới", "Chuyển động", "Hành vi", "Đám đông"],
      status: "Đang hoạt động",
    },
    {
      id: "3",
      name: "Lê Văn C",
      role: "Trưởng phòng bảo vệ",
      email: "levanc@example.com",
      phone: "0923456789",
      alertTypes: ["Xâm nhập", "Ranh giới", "Chuyển động"],
      status: "Đang hoạt động",
    },
  ]

return (
    <div className="flex flex-col h-full">
      <DashboardHeader title="Cấu hình cảnh báo" description="Quản lý và cấu hình các cảnh báo an ninh" />
      <div className="p-6 space-y-6 flex-1 overflow-auto">
        <Tabs defaultValue="alerts" className="w-full">
          <TabsList className="grid w-full max-w-md grid-cols-3">
            <TabsTrigger value="alerts">Cảnh báo</TabsTrigger>
            <TabsTrigger value="recipients">Người nhận</TabsTrigger>
            <TabsTrigger value="settings">Cài đặt</TabsTrigger>
          </TabsList>

<Card className="mt-4">
              <CardHeader>
                <CardTitle>Danh sách cảnh báo</CardTitle>
                <CardDescription>Quản lý các loại cảnh báo trong hệ thống</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex items-center justify-between mb-4">
                  <div className="flex items-center gap-2">
                    <Select defaultValue="all">
                      <SelectTrigger className="w-[180px]">
                        <SelectValue placeholder="Loại cảnh báo" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">Tất cả</SelectItem>
                        <SelectItem value="intrusion">Xâm nhập</SelectItem>
                        <SelectItem value="motion">Chuyển động</SelectItem>
                        <SelectItem value="boundary">Ranh giới</SelectItem>
                        <SelectItem value="behavior">Hành vi</SelectItem>
                        <SelectItem value="crowd">Đám đông</SelectItem>
                      </SelectContent>
                    </Select>
                    <Select defaultValue="all">
                      <SelectTrigger className="w-[180px]">
                        <SelectValue placeholder="Mức độ" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">Tất cả</SelectItem>
                        <SelectItem value="high">Cao</SelectItem>
                        <SelectItem value="medium">Trung bình</SelectItem>
                        <SelectItem value="low">Thấp</SelectItem>
                      </SelectContent>
                    </Select>
                    <Button variant="outline" size="icon">
                      <Filter className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
                <div className="rounded-md border">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Tên cảnh báo</TableHead>
                        <TableHead>Loại</TableHead>
                        <TableHead>Mức độ</TableHead>
                        <TableHead>Khu vực áp dụng</TableHead>
                        <TableHead>Phương thức thông báo</TableHead>
                        <TableHead>Trạng thái</TableHead>
                        <TableHead className="w-[100px]">Kích hoạt</TableHead>
                        <TableHead className="w-[80px]"></TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {alerts.map((alert) => (
                        <TableRow key={alert.id}>
                          <TableCell className="font-medium">
                            <div className="flex items-center gap-2">
                              <AlertTriangle className="h-4 w-4 text-red-600" />
                              {alert.name}
                            </div>
                          </TableCell>
                          <TableCell>{alert.type}</TableCell>
                          <TableCell>
                            <Badge
                              variant="outline"
                              className={
                                alert.level === "high"
                                  ? "bg-red-50 text-red-700"
                                  : alert.level === "medium"
                                    ? "bg-yellow-50 text-yellow-700"
                                    : "bg-blue-50 text-blue-700"
                              }
                            >
                              {alert.level === "high" ? "Cao" : alert.level === "medium" ? "Trung bình" : "Thấp"}
                            </Badge>
                          </TableCell>
                          <TableCell>{alert.areas.join(", ")}</TableCell>
                          <TableCell>
                            <div className="flex items-center gap-1">
                              {alert.notification.includes("Email") && (
                                <Badge variant="outline" className="bg-blue-50 text-blue-700">
                                  <Mail className="h-3 w-3 mr-1" />
                                  Email
                                </Badge>
                              )}
                              {alert.notification.includes("SMS") && (
                                <Badge variant="outline" className="bg-green-50 text-green-700">
                                  <Phone className="h-3 w-3 mr-1" />
                                  SMS
                                </Badge>
                              )}
                              {alert.notification.includes("Ứng dụng") && (
                                <Badge variant="outline" className="bg-purple-50 text-purple-700">
                                  <MessageSquare className="h-3 w-3 mr-1" />
                                  Ứng dụng
                                </Badge>
                              )}
                            </div>
                          </TableCell>
                          <TableCell>
                            <Badge
                              variant="outline"
                              className={
                                alert.status === "Đang hoạt động"
                                  ? "bg-green-50 text-green-700"
                                  : "bg-gray-50 text-gray-700"
                              }
                            >
                              {alert.status}
                            </Badge>
                          </TableCell>
                          <TableCell>
                            <Switch checked={alert.status === "Đang hoạt động"} />
                          </TableCell>
                          <TableCell>
                            <DropdownMenu>
                              <DropdownMenuTrigger asChild>
                                <Button variant="ghost" className="h-8 w-8 p-0" aria-label="Mở menu">
                                  <MoreHorizontal className="h-4 w-4" />
                                </Button>
                              </DropdownMenuTrigger>
                              <DropdownMenuContent align="end">
                                <DropdownMenuLabel>Hành động</DropdownMenuLabel>
                                <DropdownMenuSeparator />
                                <DropdownMenuItem>Xem chi tiết</DropdownMenuItem>
                                <DropdownMenuItem>Chỉnh sửa</DropdownMenuItem>
                                <DropdownMenuItem>Cấu hình thông báo</DropdownMenuItem>
                                <DropdownMenuItem className="text-red-600">Xóa</DropdownMenuItem>
                              </DropdownMenuContent>
                            </DropdownMenu>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
              </CardContent>
            </Card>

{/* Tab Người nhận */}
            <Card className="mt-6">
              <CardHeader className="flex flex-row items-center justify-between">
                <div>
                  <CardTitle>Người nhận thông báo</CardTitle>
                  <CardDescription>Quản lý danh sách người nhận thông báo cảnh báo</CardDescription>
                </div>
                <Button>
                  <Plus className="h-4 w-4 mr-2" />
                  Thêm người nhận
                </Button>
              </CardHeader>
              <CardContent>
                <div className="rounded-md border">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Tên</TableHead>
                        <TableHead>Vai trò</TableHead>
                        <TableHead>Email</TableHead>
                        <TableHead>Số điện thoại</TableHead>
                        <TableHead>Loại cảnh báo</TableHead>
                        <TableHead>Trạng thái</TableHead>
                        <TableHead className="w-[100px]">Kích hoạt</TableHead>
                        <TableHead className="w-[80px]"></TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {recipients.map((recipient) => (
                        <TableRow key={recipient.id}>
                          <TableCell className="font-medium">{recipient.name}</TableCell>
                          <TableCell>{recipient.role}</TableCell>
                          <TableCell>{recipient.email}</TableCell>
                          <TableCell>{recipient.phone}</TableCell>
                          <TableCell>
                            <div className="flex flex-wrap gap-1">
                              {recipient.alertTypes.map((type, index) => (
                                <Badge key={index} variant="outline" className="bg-blue-50 text-blue-700">
                                  {type}
                                </Badge>
                              ))}
                            </div>
                          </TableCell>
                          <TableCell>
                            <Badge
                              variant="outline"
                              className={
                                recipient.status === "Đang hoạt động"
                                  ? "bg-green-50 text-green-700"
                                  : "bg-gray-50 text-gray-700"
                              }
                            >
                              {recipient.status}
                            </Badge>
                          </TableCell>
                          <TableCell>
                            <Switch checked={recipient.status === "Đang hoạt động"} />
                          </TableCell>
                          <TableCell>
                            <DropdownMenu>
                              <DropdownMenuTrigger asChild>
                                <Button variant="ghost" className="h-8 w-8 p-0" aria-label="Mở menu">
                                  <MoreHorizontal className="h-4 w-4" />
                                </Button>
                              </DropdownMenuTrigger>
                              <DropdownMenuContent align="end">
                                <DropdownMenuLabel>Hành động</DropdownMenuLabel>
                                <DropdownMenuSeparator />
                                <DropdownMenuItem>Xem chi tiết</DropdownMenuItem>
                                <DropdownMenuItem>Chỉnh sửa</DropdownMenuItem>
                                <DropdownMenuItem>Cấu hình thông báo</DropdownMenuItem>
                                <DropdownMenuItem className="text-red-600">Xóa</DropdownMenuItem>
                              </DropdownMenuContent>
                            </DropdownMenu>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
              </CardContent>
            </Card>

{/* Tab Cài đặt */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
              <Card>
                <CardHeader>
                  <CardTitle>Cài đặt thông báo</CardTitle>
                  <CardDescription>Cấu hình phương thức gửi thông báo</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <Mail className="h-5 w-5 text-blue-600" />
                        <Label htmlFor="email-notification">Thông báo qua Email</Label>
                      </div>
                      <Switch id="email-notification" defaultChecked />
                    </div>
                    <Input placeholder="Địa chỉ email máy chủ SMTP" defaultValue="smtp.example.com" />
                    <div className="grid grid-cols-2 gap-2">
                      <Input placeholder="Tên đăng nhập" defaultValue="admin@example.com" />
                      <Input placeholder="Mật khẩu" type="password" defaultValue="********" />
                    </div>
                  </div>

<div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <Phone className="h-5 w-5 text-green-600" />
                        <Label htmlFor="sms-notification">Thông báo qua SMS</Label>
                      </div>
                      <Switch id="sms-notification" defaultChecked />
                    </div>
                    <Input placeholder="API Key dịch vụ SMS" defaultValue="sk_test_123456789" />
                    <Select defaultValue="provider1">
                      <SelectTrigger>
                        <SelectValue placeholder="Chọn nhà cung cấp SMS" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="provider1">Nhà cung cấp 1</SelectItem>
                        <SelectItem value="provider2">Nhà cung cấp 2</SelectItem>
                        <SelectItem value="provider3">Nhà cung cấp 3</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <MessageSquare className="h-5 w-5 text-purple-600" />
                        <Label htmlFor="app-notification">Thông báo qua Ứng dụng</Label>
                      </div>
                      <Switch id="app-notification" defaultChecked />
                    </div>
                    <Input placeholder="Firebase Cloud Messaging API Key" defaultValue="fcm_123456789" />
                  </div>

<Card>
                <CardHeader>
                  <CardTitle>Cài đặt cảnh báo</CardTitle>
                  <CardDescription>Cấu hình chung cho hệ thống cảnh báo</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="alert-delay">Độ trễ cảnh báo (giây)</Label>
                    <Input id="alert-delay" type="number" defaultValue="5" min="0" max="60" />
                    <p className="text-xs text-muted-foreground">
                      Thời gian trễ trước khi gửi cảnh báo sau khi phát hiện sự kiện
                    </p>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="alert-cooldown">Thời gian hồi cảnh báo (phút)</Label>
                    <Input id="alert-cooldown" type="number" defaultValue="10" min="1" max="60" />
                    <p className="text-xs text-muted-foreground">
                      Thời gian tối thiểu giữa các cảnh báo cùng loại từ cùng một khu vực
                    </p>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="alert-template">Mẫu tin nhắn cảnh báo</Label>
                    <Textarea
                      id="alert-template"
                      defaultValue="[CẢNH BÁO] {alert_type} được phát hiện tại {location} vào lúc {time}. Vui lòng kiểm tra ngay."
                      rows={3}
                    />
                    <p className="text-xs text-muted-foreground">
                      Sử dụng {"{alert_type}"}, {"{location}"}, {"{time}"} làm biến thay thế
                    </p>
                  </div>

<div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label htmlFor="auto-acknowledge">Tự động xác nhận cảnh báo</Label>
                      <Switch id="auto-acknowledge" />
                    </div>
                    <p className="text-xs text-muted-foreground">
                      Tự động đánh dấu cảnh báo là đã xác nhận sau một khoảng thời gian
                    </p>
                  </div>

<div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label htmlFor="alert-sound">Âm thanh cảnh báo</Label>
                      <Switch id="alert-sound" defaultChecked />
                    </div>
                    <Select defaultValue="sound1">
                      <SelectTrigger>
                        <SelectValue placeholder="Chọn âm thanh cảnh báo" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="sound1">Âm thanh 1</SelectItem>
                        <SelectItem value="sound2">Âm thanh 2</SelectItem>
                        <SelectItem value="sound3">Âm thanh 3</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<Button className="w-full">
                    <Settings className="h-4 w-4 mr-2" />
                    Lưu cài đặt
                  </Button>
                </CardContent>
              </Card>
            </div>
          </div>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/giam-sat-an-ninh/canh-bao/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/giam-sat-vi-pham/quy-tac/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import { DashboardHeader } from "@/components/dashboard-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Label } from "@/components/ui/label"
import { MoreHorizontal, Plus, Search, Filter, Settings, AlertTriangle, FileCode, CheckCircle } from "lucide-react"

export default function RuleConfigPage() {
  // Dữ liệu mẫu cho bảng
  const rules = [
    {
      id: "1",
      name: "Quy tắc phát hiện người lạ",
      description: "Phát hiện người không có trong danh sách nhân viên",
      type: "Nhận diện",
      severity: "high",
      areas: ["Khu vực sản xuất A", "Khu vực kho hàng"],
      status: "Đang hoạt động",
      accuracy: "95%",
    },
    {
      id: "2",
      name: "Quy tắc phát hiện không đội mũ bảo hiểm",
      description: "Phát hiện người không đội mũ bảo hiểm trong khu vực bắt buộc",
      type: "Bảo hộ lao động",
      severity: "high",
      areas: ["Khu vực sản xuất A", "Khu vực sản xuất B"],
      status: "Đang hoạt động",
      accuracy: "92%",
    },
    {
      id: "3",
      name: "Quy tắc phát hiện hút thuốc",
      description: "Phát hiện người hút thuốc trong khu vực cấm",
      type: "Hành vi cấm",
      severity: "medium",
      areas: ["Khu vực sản xuất A", "Khu vực sản xuất B", "Khu vực kho hàng"],
      status: "Đang hoạt động",
      accuracy: "88%",
    },
    {
      id: "4",
      name: "Quy tắc phát hiện sử dụng điện thoại",
      description: "Phát hiện người sử dụng điện thoại trong khu vực cấm",
      type: "Hành vi cấm",
      severity: "medium",
      areas: ["Khu vực sản xuất A"],
      status: "Tạm dừng",
      accuracy: "85%",
    },
    {
      id: "5",
      name: "Quy tắc phát hiện vượt qua ranh giới",
      description: "Phát hiện người vượt qua ranh giới đã định",
      type: "Ranh giới",
      severity: "high",
      areas: ["Khu vực kho hàng", "Cổng chính"],
      status: "Đang hoạt động",
      accuracy: "94%",
    },
  ]

return (
    <div className="flex flex-col h-full">
      <DashboardHeader title="Cấu hình quy tắc" description="Quản lý và cấu hình các quy tắc phát hiện vi phạm" />
      <div className="p-6 space-y-6 flex-1 overflow-auto">
        <Tabs defaultValue="rules" className="w-full">
          <TabsList className="grid w-full max-w-md grid-cols-3">
            <TabsTrigger value="rules">Quy tắc</TabsTrigger>
            <TabsTrigger value="models">Mô hình</TabsTrigger>
            <TabsTrigger value="settings">Cài đặt</TabsTrigger>
          </TabsList>

<Card className="mt-4">
              <CardHeader>
                <CardTitle>Danh sách quy tắc</CardTitle>
                <CardDescription>Quản lý các quy tắc phát hiện vi phạm</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex items-center justify-between mb-4">
                  <div className="flex items-center gap-2">
                    <Select defaultValue="all">
                      <SelectTrigger className="w-[180px]">
                        <SelectValue placeholder="Loại quy tắc" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">Tất cả</SelectItem>
                        <SelectItem value="recognition">Nhận diện</SelectItem>
                        <SelectItem value="safety">Bảo hộ lao động</SelectItem>
                        <SelectItem value="behavior">Hành vi cấm</SelectItem>
                        <SelectItem value="boundary">Ranh giới</SelectItem>
                      </SelectContent>
                    </Select>
                    <Select defaultValue="all">
                      <SelectTrigger className="w-[180px]">
                        <SelectValue placeholder="Mức độ" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">Tất cả</SelectItem>
                        <SelectItem value="high">Cao</SelectItem>
                        <SelectItem value="medium">Trung bình</SelectItem>
                        <SelectItem value="low">Thấp</SelectItem>
                      </SelectContent>
                    </Select>
                    <Button variant="outline" size="icon">
                      <Filter className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
                <div className="rounded-md border">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Tên quy tắc</TableHead>
                        <TableHead>Loại</TableHead>
                        <TableHead>Mức độ</TableHead>
                        <TableHead>Khu vực áp dụng</TableHead>
                        <TableHead>Độ chính xác</TableHead>
                        <TableHead>Trạng thái</TableHead>
                        <TableHead className="w-[100px]">Kích hoạt</TableHead>
                        <TableHead className="w-[80px]"></TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {rules.map((rule) => (
                        <TableRow key={rule.id}>
                          <TableCell className="font-medium">
                            <div className="flex items-center gap-2">
                              <FileCode className="h-4 w-4 text-blue-600" />
                              {rule.name}
                            </div>
                          </TableCell>
                          <TableCell>{rule.type}</TableCell>
                          <TableCell>
                            <Badge
                              variant="outline"
                              className={
                                rule.severity === "high"
                                  ? "bg-red-50 text-red-700"
                                  : rule.severity === "medium"
                                    ? "bg-yellow-50 text-yellow-700"
                                    : "bg-blue-50 text-blue-700"
                              }
                            >
                              {rule.severity === "high" ? "Cao" : rule.severity === "medium" ? "Trung bình" : "Thấp"}
                            </Badge>
                          </TableCell>
                          <TableCell>{rule.areas.join(", ")}</TableCell>
                          <TableCell>
                            <Badge variant="outline" className="bg-green-50 text-green-700">
                              {rule.accuracy}
                            </Badge>
                          </TableCell>
                          <TableCell>
                            <Badge
                              variant="outline"
                              className={
                                rule.status === "Đang hoạt động"
                                  ? "bg-green-50 text-green-700"
                                  : "bg-gray-50 text-gray-700"
                              }
                            >
                              {rule.status}
                            </Badge>
                          </TableCell>
                          <TableCell>
                            <Switch checked={rule.status === "Đang hoạt động"} />
                          </TableCell>
                          <TableCell>
                            <DropdownMenu>
                              <DropdownMenuTrigger asChild>
                                <Button variant="ghost" className="h-8 w-8 p-0" aria-label="Mở menu">
                                  <MoreHorizontal className="h-4 w-4" />
                                </Button>
                              </DropdownMenuTrigger>
                              <DropdownMenuContent align="end">
                                <DropdownMenuLabel>Hành động</DropdownMenuLabel>
                                <DropdownMenuSeparator />
                                <DropdownMenuItem>Xem chi tiết</DropdownMenuItem>
                                <DropdownMenuItem>Chỉnh sửa</DropdownMenuItem>
                                <DropdownMenuItem>Cấu hình tham số</DropdownMenuItem>
                                <DropdownMenuItem>Kiểm thử</DropdownMenuItem>
                                <DropdownMenuItem className="text-red-600">Xóa</DropdownMenuItem>
                              </DropdownMenuContent>
                            </DropdownMenu>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
              </CardContent>
            </Card>

{/* Tab Mô hình */}
            <Card className="mt-6">
              <CardHeader className="flex flex-row items-center justify-between">
                <div>
                  <CardTitle>Mô hình AI</CardTitle>
                  <CardDescription>Quản lý các mô hình AI được sử dụng trong hệ thống</CardDescription>
                </div>
                <Button>
                  <Plus className="h-4 w-4 mr-2" />
                  Thêm mô hình
                </Button>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                  <Card>
                    <CardHeader className="pb-2">
                      <div className="flex items-center justify-between">
                        <CardTitle className="text-lg">Nhận diện khuôn mặt</CardTitle>
                        <Badge variant="outline" className="bg-green-50">
                          Đang hoạt động
                        </Badge>
                      </div>
                      <CardDescription>Mô hình nhận diện khuôn mặt</CardDescription>
                    </CardHeader>
                    <CardContent className="pt-4">
                      <div className="space-y-4">
                        <div className="flex items-center justify-between">
                          <span className="text-sm text-muted-foreground">Phiên bản</span>
                          <span className="text-sm font-medium">v2.5.0</span>
                        </div>
                        <div className="flex items-center justify-between">
                          <span className="text-sm text-muted-foreground">Độ chính xác</span>
                          <span className="text-sm font-medium">98.5%</span>
                        </div>
                        <div className="flex items-center justify-between">
                          <span className="text-sm text-muted-foreground">Cập nhật lần cuối</span>
                          <span className="text-sm font-medium">10/04/2025</span>
                        </div>
                        <div className="flex items-center justify-between">
                          <span className="text-sm text-muted-foreground">Trạng thái</span>
                          <div className="flex items-center text-sm text-green-600">
                            <CheckCircle className="h-4 w-4 mr-2" />
                            Tối ưu
                          </div>
                        </div>
                      </div>
                    </CardContent>
                    <div className="p-4 border-t flex justify-between">
                      <Button variant="outline" size="sm">
                        Cập nhật
                      </Button>
                      <Button size="sm">Cấu hình</Button>
                    </div>
                  </Card>

<Card>
                    <CardHeader className="pb-2">
                      <div className="flex items-center justify-between">
                        <CardTitle className="text-lg">Phát hiện đồ bảo hộ</CardTitle>
                        <Badge variant="outline" className="bg-green-50">
                          Đang hoạt động
                        </Badge>
                      </div>
                      <CardDescription>Mô hình phát hiện đồ bảo hộ lao động</CardDescription>
                    </CardHeader>
                    <CardContent className="pt-4">
                      <div className="space-y-4">
                        <div className="flex items-center justify-between">
                          <span className="text-sm text-muted-foreground">Phiên bản</span>
                          <span className="text-sm font-medium">v1.8.2</span>
                        </div>
                        <div className="flex items-center justify-between">
                          <span className="text-sm text-muted-foreground">Độ chính xác</span>
                          <span className="text-sm font-medium">92.7%</span>
                        </div>
                        <div className="flex items-center justify-between">
                          <span className="text-sm text-muted-foreground">Cập nhật lần cuối</span>
                          <span className="text-sm font-medium">05/04/2025</span>
                        </div>
                        <div className="flex items-center justify-between">
                          <span className="text-sm text-muted-foreground">Trạng thái</span>
                          <div className="flex items-center text-sm text-green-600">
                            <CheckCircle className="h-4 w-4 mr-2" />
                            Tối ưu
                          </div>
                        </div>
                      </div>
                    </CardContent>
                    <div className="p-4 border-t flex justify-between">
                      <Button variant="outline" size="sm">
                        Cập nhật
                      </Button>
                      <Button size="sm">Cấu hình</Button>
                    </div>
                  </Card>

<Card>
                    <CardHeader className="pb-2">
                      <div className="flex items-center justify-between">
                        <CardTitle className="text-lg">Phát hiện hành vi</CardTitle>
                        <Badge variant="outline" className="bg-yellow-50">
                          Cần cập nhật
                        </Badge>
                      </div>
                      <CardDescription>Mô hình phát hiện hành vi bất thường</CardDescription>
                    </CardHeader>
                    <CardContent className="pt-4">
                      <div className="space-y-4">
                        <div className="flex items-center justify-between">
                          <span className="text-sm text-muted-foreground">Phiên bản</span>
                          <span className="text-sm font-medium">v1.5.0</span>
                        </div>
                        <div className="flex items-center justify-between">
                          <span className="text-sm text-muted-foreground">Độ chính xác</span>
                          <span className="text-sm font-medium">85.3%</span>
                        </div>
                        <div className="flex items-center justify-between">
                          <span className="text-sm text-muted-foreground">Cập nhật lần cuối</span>
                          <span className="text-sm font-medium">20/03/2025</span>
                        </div>
                        <div className="flex items-center justify-between">
                          <span className="text-sm text-muted-foreground">Trạng thái</span>
                          <div className="flex items-center text-sm text-yellow-600">
                            <AlertTriangle className="h-4 w-4 mr-2" />
                            Cần cập nhật
                          </div>
                        </div>
                      </div>
                    </CardContent>
                    <div className="p-4 border-t flex justify-between">
                      <Button variant="outline" size="sm">
                        Cập nhật
                      </Button>
                      <Button size="sm">Cấu hình</Button>
                    </div>
                  </Card>
                </div>
              </CardContent>
            </Card>

{/* Tab Cài đặt */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
              <Card>
                <CardHeader>
                  <CardTitle>Cài đặt phát hiện</CardTitle>
                  <CardDescription>Cấu hình chung cho hệ thống phát hiện vi phạm</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="detection-threshold">Ngưỡng phát hiện (%)</Label>
                    <div className="flex items-center gap-4">
                      <Input id="detection-threshold" type="number" defaultValue="75" min="0" max="100" />
                      <div className="w-full h-2 bg-gray-100 rounded-full">
                        <div className="h-2 w-[75%] bg-blue-500 rounded-full"></div>
                      </div>
                    </div>
                    <p className="text-xs text-muted-foreground">
                      Độ tin cậy tối thiểu để xác định một phát hiện là hợp lệ
                    </p>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="detection-interval">Khoảng thời gian phát hiện (giây)</Label>
                    <Input id="detection-interval" type="number" defaultValue="2" min="1" max="10" />
                    <p className="text-xs text-muted-foreground">
                      Khoảng thời gian gi />
                      <p className="text-xs text-muted-foreground">Khoảng thời gian giữa các lần phát hiện liên tiếp</p>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="false-positive-filter">Lọc phát hiện sai (False Positive)</Label>
                      <Select defaultValue="medium">
                        <SelectTrigger id="false-positive-filter">
                          <SelectValue placeholder="Chọn mức độ lọc" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="low">Thấp - Ít lọc, nhiều cảnh báo</SelectItem>
                          <SelectItem value="medium">Trung bình - Cân bằng</SelectItem>
                          <SelectItem value="high">Cao - Nhiều lọc, ít cảnh báo</SelectItem> cảnh báo
                        </SelectItem>
                      </SelectContent>
                    </Select>
                    <p className="text-xs text-muted-foreground">
                      Mức độ lọc các phát hiện sai để giảm cảnh báo không cần thiết
                    </p>
                  </div>

<div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label htmlFor="multi-frame-detection">Phát hiện đa khung hình</Label>
                      <Switch id="multi-frame-detection" defaultChecked />
                    </div>
                    <p className="text-xs text-muted-foreground">
                      Xác nhận phát hiện qua nhiều khung hình liên tiếp để tăng độ chính xác
                    </p>
                  </div>

<Card>
                <CardHeader>
                  <CardTitle>Cài đặt hiệu suất</CardTitle>
                  <CardDescription>Cấu hình hiệu suất cho hệ thống phát hiện vi phạm</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="processing-resolution">Độ phân giải xử lý</Label>
                    <Select defaultValue="720p">
                      <SelectTrigger id="processing-resolution">
                        <SelectValue placeholder="Chọn độ phân giải" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="480p">480p - Thấp (Hiệu suất cao)</SelectItem>
                        <SelectItem value="720p">720p - Trung bình (Cân bằng)</SelectItem>
                        <SelectItem value="1080p">1080p - Cao (Độ chính xác cao)</SelectItem>
                      </SelectContent>
                    </Select>
                    <p className="text-xs text-muted-foreground">Độ phân giải được sử dụng để xử lý video từ camera</p>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="processing-fps">Tốc độ khung hình xử lý (FPS)</Label>
                    <Input id="processing-fps" type="number" defaultValue="15" min="1" max="30" />
                    <p className="text-xs text-muted-foreground">Số khung hình được xử lý mỗi giây</p>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="gpu-acceleration">Tăng tốc GPU</Label>
                    <div className="flex items-center justify-between">
                      <span className="text-sm">Sử dụng GPU để tăng tốc xử lý</span>
                      <Switch id="gpu-acceleration" defaultChecked />
                    </div>
                    <Select defaultValue="balanced">
                      <SelectTrigger>
                        <SelectValue placeholder="Chọn chế độ sử dụng GPU" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="performance">Hiệu suất - Sử dụng tối đa GPU</SelectItem>
                        <SelectItem value="balanced">Cân bằng - Sử dụng hợp lý</SelectItem>
                        <SelectItem value="efficiency">Tiết kiệm - Sử dụng tối thiểu</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="batch-processing">Xử lý hàng loạt</Label>
                    <div className="flex items-center justify-between">
                      <span className="text-sm">Xử lý nhiều luồng camera cùng lúc</span>
                      <Switch id="batch-processing" defaultChecked />
                    </div>
                    <Input
                      id="batch-size"
                      type="number"
                      defaultValue="4"
                      min="1"
                      max="16"
                      placeholder="Kích thước lô"
                    />
                  </div>

<Button className="w-full">
                    <Settings className="h-4 w-4 mr-2" />
                    Lưu cài đặt
                  </Button>
                </CardContent>
              </Card>
            </div>
          </div>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/giam-sat-vi-pham/quy-tac/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/nhan-dien-xac-thuc/page.tsx" isMerged="true"
import { DashboardHeader } from "@/components/dashboard-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Progress } from "@/components/ui/progress"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  UserCheck,
  Fingerprint,
  CreditCard,
  Camera,
  Clock,
  RefreshCw,
  Search,
  Filter,
  MoreHorizontal,
} from "lucide-react"

export default function RecognitionAuthenticationPage() {
  // Dữ liệu mẫu cho bảng
  const recognitions = [
    {
      id: "1",
      name: "Nguyễn Văn A",
      employeeId: "NV001",
      time: "12/04/2025 10:25",
      location: "Cổng chính",
      method: "Khuôn mặt",
      confidence: "98.5%",
      status: "Thành công",
    },
    {
      id: "2",
      name: "Trần Thị B",
      employeeId: "NV002",
      time: "12/04/2025 09:45",
      location: "Cổng nhân viên",
      method: "Vân tay",
      confidence: "99.2%",
      status: "Thành công",
    },
    {
      id: "3",
      name: "Không xác định",
      employeeId: "N/A",
      time: "12/04/2025 08:30",
      location: "Cổng chính",
      method: "Khuôn mặt",
      confidence: "65.3%",
      status: "Thất bại",
    },
    {
      id: "4",
      name: "Lê Văn C",
      employeeId: "NV003",
      time: "12/04/2025 07:55",
      location: "Cổng nhân viên",
      method: "Thẻ từ",
      confidence: "100%",
      status: "Thành công",
    },
    {
      id: "5",
      name: "Phạm Thị D",
      employeeId: "NV004",
      time: "12/04/2025 07:30",
      location: "Cổng chính",
      method: "Khuôn mặt",
      confidence: "97.8%",
      status: "Thành công",
    },
  ]

return (
    <div className="flex flex-col h-full">
      <DashboardHeader title="Nhận diện & Xác thực" description="Quản lý và giám sát hệ thống nhận diện và xác thực" />
      <div className="p-6 space-y-6 flex-1 overflow-auto">
        <Tabs defaultValue="overview" className="w-full">
          <TabsList className="grid w-full max-w-md grid-cols-3">
            <TabsTrigger value="overview">Tổng quan</TabsTrigger>
            <TabsTrigger value="history">Lịch sử</TabsTrigger>
            <TabsTrigger value="settings">Cài đặt</TabsTrigger>
          </TabsList>

<div className="mt-6">
            {/* Tab Tổng quan */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <Card>
                <CardHeader className="pb-2">
                  <div className="flex items-center justify-between">
                    <CardTitle className="text-lg">Nhận diện khuôn mặt</CardTitle>
                    <Badge variant="outline" className="bg-green-50">
                      Đang hoạt động
                    </Badge>
                  </div>
                  <CardDescription>Hệ thống nhận diện khuôn mặt</CardDescription>
                </CardHeader>
                <CardContent className="pt-4">
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-sm font-medium">Độ chính xác</span>
                    <span className="text-sm">98.5%</span>
                  </div>
                  <Progress value={98.5} className="h-2 mb-4" />
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">Tổng số nhận diện</span>
                      <span className="text-sm font-medium">1,245</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">Thành công</span>
                      <span className="text-sm font-medium">1,220</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">Thất bại</span>
                      <span className="text-sm font-medium">25</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">Thời gian trung bình</span>
                      <span className="text-sm font-medium">0.8 giây</span>
                    </div>
                  </div>
                </CardContent>
                <div className="p-4 border-t flex justify-between">
                  <Button variant="outline" size="sm">
                    <Camera className="h-4 w-4 mr-2" />
                    Kiểm tra
                  </Button>
                  <Button size="sm">
                    <UserCheck className="h-4 w-4 mr-2" />
                    Cấu hình
                  </Button>
                </div>
              </Card>

<Card>
                <CardHeader className="pb-2">
                  <div className="flex items-center justify-between">
                    <CardTitle className="text-lg">Xác thực vân tay</CardTitle>
                    <Badge variant="outline" className="bg-green-50">
                      Đang hoạt động
                    </Badge>
                  </div>
                  <CardDescription>Hệ thống xác thực vân tay</CardDescription>
                </CardHeader>
                <CardContent className="pt-4">
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-sm font-medium">Độ chính xác</span>
                    <span className="text-sm">99.2%</span>
                  </div>
                  <Progress value={99.2} className="h-2 mb-4" />
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">Tổng số xác thực</span>
                      <span className="text-sm font-medium">875</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">Thành công</span>
                      <span className="text-sm font-medium">870</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">Thất bại</span>
                      <span className="text-sm font-medium">5</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">Thời gian trung bình</span>
                      <span className="text-sm font-medium">1.2 giây</span>
                    </div>
                  </div>
                </CardContent>
                <div className="p-4 border-t flex justify-between">
                  <Button variant="outline" size="sm">
                    <Fingerprint className="h-4 w-4 mr-2" />
                    Kiểm tra
                  </Button>
                  <Button size="sm">
                    <UserCheck className="h-4 w-4 mr-2" />
                    Cấu hình
                  </Button>
                </div>
              </Card>

<Card>
                <CardHeader className="pb-2">
                  <div className="flex items-center justify-between">
                    <CardTitle className="text-lg">Xác thực thẻ từ</CardTitle>
                    <Badge variant="outline" className="bg-green-50">
                      Đang hoạt động
                    </Badge>
                  </div>
                  <CardDescription>Hệ thống xác thực thẻ từ</CardDescription>
                </CardHeader>
                <CardContent className="pt-4">
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-sm font-medium">Độ chính xác</span>
                    <span className="text-sm">100%</span>
                  </div>
                  <Progress value={100} className="h-2 mb-4" />
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">Tổng số xác thực</span>
                      <span className="text-sm font-medium">650</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">Thành công</span>
                      <span className="text-sm font-medium">650</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">Thất bại</span>
                      <span className="text-sm font-medium">0</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">Thời gian trung bình</span>
                      <span className="text-sm font-medium">0.5 giây</span>
                    </div>
                  </div>
                </CardContent>
                <div className="p-4 border-t flex justify-between">
                  <Button variant="outline" size="sm">
                    <CreditCard className="h-4 w-4 mr-2" />
                    Kiểm tra
                  </Button>
                  <Button size="sm">
                    <UserCheck className="h-4 w-4 mr-2" />
                    Cấu hình
                  </Button>
                </div>
              </Card>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
              <Card>
                <CardHeader>
                  <CardTitle>Thống kê phương thức xác thực</CardTitle>
                  <CardDescription>Phân bố các phương thức xác thực được sử dụng</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="h-[250px] relative">
                    <div className="absolute inset-0 flex items-center justify-center">
                      <div className="w-[200px] h-[200px] rounded-full border-8 border-[#f1f5f9] relative">
                        <div className="absolute inset-0 flex items-center justify-center">
                          <div className="text-center">
                            <p className="text-3xl font-bold">2,770</p>
                            <p className="text-sm text-muted-foreground">Tổng số</p>
                          </div>
                        </div>
                        <div
                          className="absolute top-0 left-0 w-1/2 h-full rounded-l-full border-r-8 border-[#f1f5f9]"
                          style={{
                            background: "conic-gradient(#3b82f6 0deg, #3b82f6 160deg, transparent 160deg)",
                            transform: "rotate(-90deg)",
                          }}
                        ></div>
                        <div
                          className="absolute top-0 right-0 w-1/2 h-full rounded-r-full"
                          style={{
                            background:
                              "conic-gradient(#10b981 0deg, #10b981 115deg, #f59e0b 115deg, #f59e0b 180deg, transparent 180deg)",
                            transform: "rotate(90deg)",
                          }}
                        ></div>
                      </div>
                    </div>
                  </div>
                  <div className="grid grid-cols-3 gap-4 mt-4">
                    <div className="flex items-center gap-2">
                      <div className="h-3 w-3 bg-blue-500 rounded-full"></div>
                      <div>
                        <p className="text-sm font-medium">Khuôn mặt</p>
                        <p className="text-xs text-muted-foreground">1,245 (45%)</p>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      <div className="h-3 w-3 bg-green-500 rounded-full"></div>
                      <div>
                        <p className="text-sm font-medium">Vân tay</p>
                        <p className="text-xs text-muted-foreground">875 (32%)</p>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      <div className="h-3 w-3 bg-yellow-500 rounded-full"></div>
                      <div>
                        <p className="text-sm font-medium">Thẻ từ</p>
                        <p className="text-xs text-muted-foreground">650 (23%)</p>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Hoạt động gần đây</CardTitle>
                  <CardDescription>Các hoạt động nhận diện và xác thực gần đây</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {recognitions.slice(0, 4).map((recognition, index) => (
                      <div key={index} className="flex items-center gap-4 p-3 rounded-lg border">
                        <div
                          className={`h-10 w-10 rounded-full flex items-center justify-center ${
                            recognition.method === "Khuôn mặt"
                              ? "bg-blue-100 text-blue-600"
                              : recognition.method === "Vân tay"
                                ? "bg-green-100 text-green-600"
                                : "bg-yellow-100 text-yellow-600"
                          }`}
                        >
                          {recognition.method === "Khuôn mặt" ? (
                            <UserCheck className="h-5 w-5" />
                          ) : recognition.method === "Vân tay" ? (
                            <Fingerprint className="h-5 w-5" />
                          ) : (
                            <CreditCard className="h-5 w-5" />
                          )}
                        </div>
                        <div className="flex-1">
                          <div className="flex items-center justify-between">
                            <h4 className="text-sm font-medium">{recognition.name}</h4>
                            <Badge
                              variant="outline"
                              className={
                                recognition.status === "Thành công"
                                  ? "bg-green-50 text-green-700"
                                  : "bg-red-50 text-red-700"
                              }
                            >
                              {recognition.status}
                            </Badge>
                          </div>
                          <div className="flex items-center text-xs text-muted-foreground">
                            <Clock className="h-3 w-3 mr-1" />
                            <span>{recognition.time}</span>
                            <span className="mx-1">•</span>
                            <span>{recognition.location}</span>
                            <span className="mx-1">•</span>
                            <span>{recognition.confidence}</span>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </div>

{/* Tab Lịch sử */}
            <Card className="mt-6">
              <CardHeader className="flex flex-row items-center justify-between">
                <div>
                  <CardTitle>Lịch sử nhận diện và xác thực</CardTitle>
                  <CardDescription>Lịch sử các hoạt động nhận diện và xác thực</CardDescription>
                </div>
                <Button variant="outline">
                  <RefreshCw className="h-4 w-4 mr-2" />
                  Làm mới
                </Button>
              </CardHeader>
              <CardContent>
                <div className="flex items-center justify-between mb-4">
                  <div className="flex items-center gap-2 w-full max-w-sm">
                    <div className="relative w-full">
                      <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                      <Input type="search" placeholder="Tìm kiếm..." className="pl-8 w-full" />
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <Select defaultValue="all">
                      <SelectTrigger className="w-[180px]">
                        <SelectValue placeholder="Phương thức" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">Tất cả</SelectItem>
                        <SelectItem value="face">Khuôn mặt</SelectItem>
                        <SelectItem value="fingerprint">Vân tay</SelectItem>
                        <SelectItem value="card">Thẻ từ</SelectItem>
                      </SelectContent>
                    </Select>
                    <Select defaultValue="all">
                      <SelectTrigger className="w-[180px]">
                        <SelectValue placeholder="Trạng thái" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">Tất cả</SelectItem>
                        <SelectItem value="success">Thành công</SelectItem>
                        <SelectItem value="failed">Thất bại</SelectItem>
                      </SelectContent>
                    </Select>
                    <Button variant="outline" size="icon">
                      <Filter className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
                <div className="rounded-md border">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Tên</TableHead>
                        <TableHead>Mã nhân viên</TableHead>
                        <TableHead>Thời gian</TableHead>
                        <TableHead>Vị trí</TableHead>
                        <TableHead>Phương thức</TableHead>
                        <TableHead>Độ tin cậy</TableHead>
                        <TableHead>Trạng thái</TableHead>
                        <TableHead className="w-[80px]"></TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {recognitions.map((recognition) => (
                        <TableRow key={recognition.id}>
                          <TableCell className="font-medium">{recognition.name}</TableCell>
                          <TableCell>{recognition.employeeId}</TableCell>
                          <TableCell>{recognition.time}</TableCell>
                          <TableCell>{recognition.location}</TableCell>
                          <TableCell>
                            <Badge
                              variant="outline"
                              className={
                                recognition.method === "Khuôn mặt"
                                  ? "bg-blue-50 text-blue-700"
                                  : recognition.method === "Vân tay"
                                    ? "bg-green-50 text-green-700"
                                    : "bg-yellow-50 text-yellow-700"
                              }
                            >
                              {recognition.method}
                            </Badge>
                          </TableCell>
                          <TableCell>{recognition.confidence}</TableCell>
                          <TableCell>
                            <Badge
                              variant="outline"
                              className={
                                recognition.status === "Thành công"
                                  ? "bg-green-50 text-green-700"
                                  : "bg-red-50 text-red-700"
                              }
                            >
                              {recognition.status}
                            </Badge>
                          </TableCell>
                          <TableCell>
                            <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                              <MoreHorizontal className="h-4 w-4" />
                            </Button>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
              </CardContent>
            </Card>
          </div>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/nhan-dien-xac-thuc/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/giam-sat-nguoi-ra-vao/page.tsx" isMerged="true"
import { DashboardHeader } from "@/components/dashboard-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import {
  ArrowDown,
  ArrowUp,
  MoreHorizontal,
  Search,
  Filter,
  UserCheck,
  Clock,
  Calendar,
  Download,
  Eye,
} from "lucide-react"

export default function AccessMonitoringPage() {
  // Dữ liệu mẫu cho bảng
  const accessRecords = [
    {
      id: "1",
      name: "Nguyễn Văn A",
      employeeId: "NV001",
      department: "Sản xuất",
      time: "12/04/2025 10:25",
      location: "Cổng chính",
      direction: "in",
      method: "Khuôn mặt",
    },
    {
      id: "2",
      name: "Trần Thị B",
      employeeId: "NV002",
      department: "Kỹ thuật",
      time: "12/04/2025 09:45",
      location: "Cổng nhân viên",
      direction: "in",
      method: "Vân tay",
    },
    {
      id: "3",
      name: "Lê Văn C",
      employeeId: "NT001",
      department: "Bảo trì",
      time: "12/04/2025 08:30",
      location: "Cổng chính",
      direction: "out",
      method: "Thẻ từ",
    },
    {
      id: "4",
      name: "Phạm Thị D",
      employeeId: "NV003",
      department: "Nhân sự",
      time: "12/04/2025 07:55",
      location: "Cổng nhân viên",
      direction: "in",
      method: "Khuôn mặt",
    },
    {
      id: "5",
      name: "Hoàng Văn E",
      employeeId: "NV004",
      department: "Quản lý",
      time: "12/04/2025 07:30",
      location: "Cổng chính",
      direction: "out",
      method: "Khuôn mặt",
    },
  ]

return (
    <div className="flex flex-col h-full">
      <DashboardHeader title="Giám sát người ra vào" description="Theo dõi hoạt động ra vào của nhân viên và khách" />
      <div className="p-6 space-y-6 flex-1 overflow-auto">
        <div className="flex items-center justify-between">
          <Tabs defaultValue="today" className="w-[400px]">
            <TabsList className="grid w-full grid-cols-4">
              <TabsTrigger value="today">Hôm nay</TabsTrigger>
              <TabsTrigger value="week">Tuần này</TabsTrigger>
              <TabsTrigger value="month">Tháng này</TabsTrigger>
              <TabsTrigger value="custom">Tùy chỉnh</TabsTrigger>
            </TabsList>
          </Tabs>
          <div className="flex items-center gap-2">
            <Button variant="outline">
              <Calendar className="h-4 w-4 mr-2" />
              Chọn ngày
            </Button>
            <Button>
              <Download className="h-4 w-4 mr-2" />
              Xuất báo cáo
            </Button>
          </div>
        </div>

<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-muted-foreground mb-1">Tổng lượt ra vào</p>
                  <div className="flex items-baseline gap-2">
                    <h2 className="text-3xl font-bold">128</h2>
                    <span className="text-xs font-medium text-green-500 flex items-center">
                      <ArrowUp className="h-3 w-3 mr-1" />
                      12%
                    </span>
                  </div>
                  <p className="text-xs text-muted-foreground mt-1">So với hôm qua</p>
                </div>
                <div className="h-12 w-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
                  <UserCheck className="h-6 w-6" />
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-muted-foreground mb-1">Lượt vào</p>
                  <div className="flex items-baseline gap-2">
                    <h2 className="text-3xl font-bold">75</h2>
                    <span className="text-xs font-medium text-green-500 flex items-center">
                      <ArrowUp className="h-3 w-3 mr-1" />
                      8%
                    </span>
                  </div>
                  <p className="text-xs text-muted-foreground mt-1">So với hôm qua</p>
                </div>
                <div className="h-12 w-12 bg-green-100 rounded-full flex items-center justify-center text-green-600">
                  <ArrowDown className="h-6 w-6" />
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-muted-foreground mb-1">Lượt ra</p>
                  <div className="flex items-baseline gap-2">
                    <h2 className="text-3xl font-bold">53</h2>
                    <span className="text-xs font-medium text-green-500 flex items-center">
                      <ArrowUp className="h-3 w-3 mr-1" />
                      5%
                    </span>
                  </div>
                  <p className="text-xs text-muted-foreground mt-1">So với hôm qua</p>
                </div>
                <div className="h-12 w-12 bg-orange-100 rounded-full flex items-center justify-center text-orange-600">
                  <ArrowUp className="h-6 w-6" />
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-muted-foreground mb-1">Đang trong khu vực</p>
                  <div className="flex items-baseline gap-2">
                    <h2 className="text-3xl font-bold">42</h2>
                    <span className="text-xs font-medium text-red-500 flex items-center">
                      <ArrowDown className="h-3 w-3 mr-1" />
                      3%
                    </span>
                  </div>
                  <p className="text-xs text-muted-foreground mt-1">Hiện tại</p>
                </div>
                <div className="h-12 w-12 bg-purple-100 rounded-full flex items-center justify-center text-purple-600">
                  <UserCheck className="h-6 w-6" />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

<Card>
          <CardHeader className="flex flex-row items-center justify-between">
            <div>
              <CardTitle>Lịch sử ra vào</CardTitle>
              <CardDescription>Danh sách các hoạt động ra vào gần đây</CardDescription>
            </div>
            <Button variant="outline">
              <Clock className="h-4 w-4 mr-2" />
              Xem thời gian thực
            </Button>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-2 w-full max-w-sm">
                <div className="relative w-full">
                  <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                  <Input type="search" placeholder="Tìm kiếm..." className="pl-8 w-full" />
                </div>
              </div>
              <div className="flex items-center gap-2">
                <Select defaultValue="all">
                  <SelectTrigger className="w-[180px]">
                    <SelectValue placeholder="Bộ phận" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Tất cả</SelectItem>
                    <SelectItem value="production">Sản xuất</SelectItem>
                    <SelectItem value="technical">Kỹ thuật</SelectItem>
                    <SelectItem value="maintenance">Bảo trì</SelectItem>
                    <SelectItem value="hr">Nhân sự</SelectItem>
                    <SelectItem value="management">Quản lý</SelectItem>
                  </SelectContent>
                </Select>
                <Select defaultValue="all">
                  <SelectTrigger className="w-[180px]">
                    <SelectValue placeholder="Hướng" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Tất cả</SelectItem>
                    <SelectItem value="in">Vào</SelectItem>
                    <SelectItem value="out">Ra</SelectItem>
                  </SelectContent>
                </Select>
                <Button variant="outline" size="icon">
                  <Filter className="h-4 w-4" />
                </Button>
              </div>
            </div>
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Tên</TableHead>
                    <TableHead>Mã nhân viên</TableHead>
                    <TableHead>Bộ phận</TableHead>
                    <TableHead>Thời gian</TableHead>
                    <TableHead>Vị trí</TableHead>
                    <TableHead>Hướng</TableHead>
                    <TableHead>Phương thức</TableHead>
                    <TableHead className="w-[80px]"></TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {accessRecords.map((record) => (
                    <TableRow key={record.id}>
                      <TableCell className="font-medium">{record.name}</TableCell>
                      <TableCell>{record.employeeId}</TableCell>
                      <TableCell>{record.department}</TableCell>
                      <TableCell>{record.time}</TableCell>
                      <TableCell>{record.location}</TableCell>
                      <TableCell>
                        <Badge
                          variant="outline"
                          className={
                            record.direction === "in" ? "bg-green-50 text-green-700" : "bg-orange-50 text-orange-700"
                          }
                        >
                          {record.direction === "in" ? (
                            <div className="flex items-center">
                              <ArrowDown className="h-3 w-3 mr-1" />
                              Vào
                            </div>
                          ) : (
                            <div className="flex items-center">
                              <ArrowUp className="h-3 w-3 mr-1" />
                              Ra
                            </div>
                          )}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <Badge
                          variant="outline"
                          className={
                            record.method === "Khuôn mặt"
                              ? "bg-blue-50 text-blue-700"
                              : record.method === "Vân tay"
                                ? "bg-purple-50 text-purple-700"
                                : "bg-gray-50 text-gray-700"
                          }
                        >
                          {record.method}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" className="h-8 w-8 p-0" aria-label="Mở menu">
                              <MoreHorizontal className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuLabel>Hành động</DropdownMenuLabel>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem>Xem chi tiết</DropdownMenuItem>
                            <DropdownMenuItem>Xem hình ảnh</DropdownMenuItem>
                            <DropdownMenuItem>Xem hồ sơ</DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <Card>
            <CardHeader>
              <CardTitle>Thống kê theo thời gian</CardTitle>
              <CardDescription>Phân bố hoạt động ra vào theo thời gian</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="h-[250px] relative">
                <div className="absolute inset-x-0 bottom-0 h-[1px] bg-border"></div>
                <div className="absolute inset-y-0 left-0 w-[1px] bg-border"></div>

{/* Cột biểu đồ */}
                <div className="absolute bottom-0 left-[4%] w-[8%]">
                  <div className="relative w-full">
                    <div className="absolute bottom-0 w-full h-[20%] bg-orange-500 rounded-t-sm"></div>
                    <div className="absolute bottom-[20%] w-full h-[30%] bg-green-500 rounded-t-sm"></div>
                  </div>
                </div>
                <div className="absolute bottom-0 left-[14%] w-[8%]">
                  <div className="relative w-full">
                    <div className="absolute bottom-0 w-full h-[15%] bg-orange-500 rounded-t-sm"></div>
                    <div className="absolute bottom-[15%] w-full h-[25%] bg-green-500 rounded-t-sm"></div>
                  </div>
                </div>
                <div className="absolute bottom-0 left-[24%] w-[8%]">
                  <div className="relative w-full">
                    <div className="absolute bottom-0 w-full h-[25%] bg-orange-500 rounded-t-sm"></div>
                    <div className="absolute bottom-[25%] w-full h-[40%] bg-green-500 rounded-t-sm"></div>
                  </div>
                </div>
                <div className="absolute bottom-0 left-[34%] w-[8%]">
                  <div className="relative w-full">
                    <div className="absolute bottom-0 w-full h-[35%] bg-orange-500 rounded-t-sm"></div>
                    <div className="absolute bottom-[35%] w-full h-[45%] bg-green-500 rounded-t-sm"></div>
                  </div>
                </div>
                <div className="absolute bottom-0 left-[44%] w-[8%]">
                  <div className="relative w-full">
                    <div className="absolute bottom-0 w-full h-[30%] bg-orange-500 rounded-t-sm"></div>
                    <div className="absolute bottom-[30%] w-full h-[40%] bg-green-500 rounded-t-sm"></div>
                  </div>
                </div>
                <div className="absolute bottom-0 left-[54%] w-[8%]">
                  <div className="relative w-full">
                    <div className="absolute bottom-0 w-full h-[25%] bg-orange-500 rounded-t-sm"></div>
                    <div className="absolute bottom-[25%] w-full h-[35%] bg-green-500 rounded-t-sm"></div>
                  </div>
                </div>
                <div className="absolute bottom-0 left-[64%] w-[8%]">
                  <div className="relative w-full">
                    <div className="absolute bottom-0 w-full h-[20%] bg-orange-500 rounded-t-sm"></div>
                    <div className="absolute bottom-[20%] w-full h-[30%] bg-green-500 rounded-t-sm"></div>
                  </div>
                </div>
                <div className="absolute bottom-0 left-[74%] w-[8%]">
                  <div className="relative w-full">
                    <div className="absolute bottom-0 w-full h-[15%] bg-orange-500 rounded-t-sm"></div>
                    <div className="absolute bottom-[15%] w-full h-[20%] bg-green-500 rounded-t-sm"></div>
                  </div>
                </div>
                <div className="absolute bottom-0 left-[84%] w-[8%]">
                  <div className="relative w-full">
                    <div className="absolute bottom-0 w-full h-[10%] bg-orange-500 rounded-t-sm"></div>
                    <div className="absolute bottom-[10%] w-full h-[15%] bg-green-500 rounded-t-sm"></div>
                  </div>
                </div>

{/* Nhãn trục X */}
                <div className="absolute bottom-[-25px] left-0 right-0 flex justify-between text-xs text-muted-foreground">
                  <span>6-8h</span>
                  <span>8-10h</span>
                  <span>10-12h</span>
                  <span>12-14h</span>
                  <span>14-16h</span>
                  <span>16-18h</span>
                  <span>18-20h</span>
                  <span>20-22h</span>
                  <span>22-24h</span>
                </div>

{/* Nhãn trục Y */}
                <div className="absolute top-0 left-[-25px] bottom-0 flex flex-col justify-between items-end text-xs text-muted-foreground">
                  <span>40</span>
                  <span>30</span>
                  <span>20</span>
                  <span>10</span>
                  <span>0</span>
                </div>
              </div>

<Card>
            <CardHeader>
              <CardTitle>Thống kê theo vị trí</CardTitle>
              <CardDescription>Phân bố hoạt động ra vào theo vị trí</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-sm">Cổng chính</span>
                    <span className="text-sm font-medium">65 (50.8%)</span>
                  </div>
                  <div className="h-2 w-full bg-gray-100 rounded-full">
                    <div className="h-2 w-[50.8%] bg-blue-500 rounded-full"></div>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-sm">Cổng nhân viên</span>
                    <span className="text-sm font-medium">42 (32.8%)</span>
                  </div>
                  <div className="h-2 w-full bg-gray-100 rounded-full">
                    <div className="h-2 w-[32.8%] bg-blue-500 rounded-full"></div>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-sm">Cổng kho hàng</span>
                    <span className="text-sm font-medium">15 (11.7%)</span>
                  </div>
                  <div className="h-2 w-full bg-gray-100 rounded-full">
                    <div className="h-2 w-[11.7%] bg-blue-500 rounded-full"></div>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-sm">Cổng phụ</span>
                    <span className="text-sm font-medium">6 (4.7%)</span>
                  </div>
                  <div className="h-2 w-full bg-gray-100 rounded-full">
                    <div className="h-2 w-[4.7%] bg-blue-500 rounded-full"></div>
                  </div>
                </div>
              </div>

<div className="mt-6">
                <h3 className="text-sm font-medium mb-4">Hoạt động gần đây</h3>
                <div className="space-y-4">
                  {accessRecords.slice(0, 3).map((record, index) => (
                    <div key={index} className="flex items-center gap-4 p-3 rounded-lg border">
                      <div
                        className={`h-10 w-10 rounded-full flex items-center justify-center ${
                          record.direction === "in" ? "bg-green-100 text-green-600" : "bg-orange-100 text-orange-600"
                        }`}
                      >
                        {record.direction === "in" ? (
                          <ArrowDown className="h-5 w-5" />
                        ) : (
                          <ArrowUp className="h-5 w-5" />
                        )}
                      </div>
                      <div className="flex-1">
                        <h4 className="text-sm font-medium">{record.name}</h4>
                        <div className="flex items-center text-xs text-muted-foreground">
                          <Clock className="h-3 w-3 mr-1" />
                          <span>{record.time}</span>
                          <span className="mx-1">•</span>
                          <span>{record.location}</span>
                          <span className="mx-1">•</span>
                          <span>{record.direction === "in" ? "Vào" : "Ra"}</span>
                        </div>
                      </div>
                      <Button variant="outline" size="sm">
                        <Eye className="h-4 w-4 mr-2" />
                        Xem
                      </Button>
                    </div>
                  ))}
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/giam-sat-nguoi-ra-vao/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/giam-sat-di-chuyen/page.tsx" isMerged="true"
import { DashboardHeader } from "@/components/dashboard-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import {
  MoreHorizontal,
  Search,
  Filter,
  Calendar,
  Download,
  Eye,
  Map,
  MapPin,
  AlertTriangle,
  Users,
  Route,
} from "lucide-react"

export default function MovementMonitoringPage() {
  // Dữ liệu mẫu cho bảng
  const movements = [
    {
      id: "1",
      person: "Nguyễn Văn A",
      employeeId: "NV001",
      department: "Sản xuất",
      time: "12/04/2025 10:25",
      fromLocation: "Khu vực sản xuất A",
      toLocation: "Khu vực kho hàng",
      duration: "5 phút",
      status: "Bình thường",
    },
    {
      id: "2",
      person: "Trần Thị B",
      employeeId: "NV002",
      department: "Kỹ thuật",
      time: "12/04/2025 09:45",
      fromLocation: "Khu vực văn phòng",
      toLocation: "Khu vực sản xuất B",
      duration: "8 phút",
      status: "Bình thường",
    },
    {
      id: "3",
      person: "Lê Văn C",
      employeeId: "NT001",
      department: "Bảo trì",
      time: "12/04/2025 08:30",
      fromLocation: "Khu vực bảo trì",
      toLocation: "Khu vực sản xuất A",
      duration: "12 phút",
      status: "Bất thường",
    },
    {
      id: "4",
      person: "Phạm Thị D",
      employeeId: "NV003",
      department: "Nhân sự",
      time: "12/04/2025 07:55",
      fromLocation: "Cổng chính",
      toLocation: "Khu vực văn phòng",
      duration: "3 phút",
      status: "Bình thường",
    },
    {
      id: "5",
      person: "Hoàng Văn E",
      employeeId: "NV004",
      department: "Quản lý",
      time: "11/04/2025 15:30",
      fromLocation: "Khu vực văn phòng",
      toLocation: "Khu vực kho hàng",
      duration: "15 phút",
      status: "Bất thường",
    },
  ]

// Dữ liệu mẫu cho khu vực
  const areas = [
    { id: "1", name: "Khu vực sản xuất A", count: 15, status: "normal" },
    { id: "2", name: "Khu vực sản xuất B", count: 8, status: "normal" },
    { id: "3", name: "Khu vực kho hàng", count: 12, status: "crowded" },
    { id: "4", name: "Khu vực văn phòng", count: 25, status: "normal" },
    { id: "5", name: "Khu vực bảo trì", count: 3, status: "normal" },
    { id: "6", name: "Khu vực xây dựng", count: 0, status: "restricted" },
  ]

return (
    <div className="flex flex-col h-full">
      <DashboardHeader title="Giám sát di chuyển" description="Theo dõi di chuyển của nhân viên trong khu vực" />
      <div className="p-6 space-y-6 flex-1 overflow-auto">
        <div className="flex items-center justify-between">
          <Tabs defaultValue="all" className="w-[400px]">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="all">Tất cả</TabsTrigger>
              <TabsTrigger value="normal">Bình thường</TabsTrigger>
              <TabsTrigger value="abnormal">Bất thường</TabsTrigger>
            </TabsList>
          </Tabs>
          <div className="flex items-center gap-2">
            <Button variant="outline">
              <Calendar className="h-4 w-4 mr-2" />
              Chọn ngày
            </Button>
            <Button>
              <Download className="h-4 w-4 mr-2" />
              Xuất báo cáo
            </Button>
          </div>
        </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-muted-foreground mb-1">Tổng số di chuyển</p>
                  <div className="flex items-baseline gap-2">
                    <h2 className="text-3xl font-bold">156</h2>
                    <span className="text-xs font-medium text-green-500">+8%</span>
                  </div>
                  <p className="text-xs text-muted-foreground mt-1">So với hôm qua</p>
                </div>
                <div className="h-12 w-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
                  <Route className="h-6 w-6" />
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-muted-foreground mb-1">Di chuyển bất thường</p>
                  <div className="flex items-baseline gap-2">
                    <h2 className="text-3xl font-bold">12</h2>
                    <span className="text-xs font-medium text-red-500">+15%</span>
                  </div>
                  <p className="text-xs text-muted-foreground mt-1">Cần kiểm tra</p>
                </div>
                <div className="h-12 w-12 bg-red-100 rounded-full flex items-center justify-center text-red-600">
                  <AlertTriangle className="h-6 w-6" />
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-muted-foreground mb-1">Tổng số người</p>
                  <div className="flex items-baseline gap-2">
                    <h2 className="text-3xl font-bold">63</h2>
                    <span className="text-xs font-medium text-green-500">+5%</span>
                  </div>
                  <p className="text-xs text-muted-foreground mt-1">Trong khu vực</p>
                </div>
                <div className="h-12 w-12 bg-purple-100 rounded-full flex items-center justify-center text-purple-600">
                  <Users className="h-6 w-6" />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="md:col-span-2">
            <Card>
              <CardHeader className="flex flex-row items-center justify-between">
                <div>
                  <CardTitle>Lịch sử di chuyển</CardTitle>
                  <CardDescription>Danh sách các di chuyển gần đây</CardDescription>
                </div>
                <Button variant="outline">
                  <Eye className="h-4 w-4 mr-2" />
                  Xem trực tiếp
                </Button>
              </CardHeader>
              <CardContent>
                <div className="flex items-center justify-between mb-4">
                  <div className="flex items-center gap-2 w-full max-w-sm">
                    <div className="relative w-full">
                      <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                      <Input type="search" placeholder="Tìm kiếm..." className="pl-8 w-full" />
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <Select defaultValue="all">
                      <SelectTrigger className="w-[180px]">
                        <SelectValue placeholder="Bộ phận" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">Tất cả</SelectItem>
                        <SelectItem value="production">Sản xuất</SelectItem>
                        <SelectItem value="technical">Kỹ thuật</SelectItem>
                        <SelectItem value="maintenance">Bảo trì</SelectItem>
                        <SelectItem value="hr">Nhân sự</SelectItem>
                        <SelectItem value="management">Quản lý</SelectItem>
                      </SelectContent>
                    </Select>
                    <Select defaultValue="all">
                      <SelectTrigger className="w-[180px]">
                        <SelectValue placeholder="Trạng thái" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">Tất cả</SelectItem>
                        <SelectItem value="normal">Bình thường</SelectItem>
                        <SelectItem value="abnormal">Bất thường</SelectItem>
                      </SelectContent>
                    </Select>
                    <Button variant="outline" size="icon">
                      <Filter className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
                <div className="rounded-md border">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Người di chuyển</TableHead>
                        <TableHead>Bộ phận</TableHead>
                        <TableHead>Thời gian</TableHead>
                        <TableHead>Từ</TableHead>
                        <TableHead>Đến</TableHead>
                        <TableHead>Thời gian di chuyển</TableHead>
                        <TableHead>Trạng thái</TableHead>
                        <TableHead className="w-[80px]"></TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {movements.map((movement) => (
                        <TableRow key={movement.id}>
                          <TableCell className="font-medium">{movement.person}</TableCell>
                          <TableCell>{movement.department}</TableCell>
                          <TableCell>{movement.time}</TableCell>
                          <TableCell>{movement.fromLocation}</TableCell>
                          <TableCell>{movement.toLocation}</TableCell>
                          <TableCell>{movement.duration}</TableCell>
                          <TableCell>
                            <Badge
                              variant="outline"
                              className={
                                movement.status === "Bình thường"
                                  ? "bg-green-50 text-green-700"
                                  : "bg-red-50 text-red-700"
                              }
                            >
                              {movement.status}
                            </Badge>
                          </TableCell>
                          <TableCell>
                            <DropdownMenu>
                              <DropdownMenuTrigger asChild>
                                <Button variant="ghost" className="h-8 w-8 p-0" aria-label="Mở menu">
                                  <MoreHorizontal className="h-4 w-4" />
                                </Button>
                              </DropdownMenuTrigger>
                              <DropdownMenuContent align="end">
                                <DropdownMenuLabel>Hành động</DropdownMenuLabel>
                                <DropdownMenuSeparator />
                                <DropdownMenuItem>Xem chi tiết</DropdownMenuItem>
                                <DropdownMenuItem>Xem hình ảnh</DropdownMenuItem>
                                <DropdownMenuItem>Xem lộ trình</DropdownMenuItem>
                                <DropdownMenuItem>Đánh dấu bình thường</DropdownMenuItem>
                              </DropdownMenuContent>
                            </DropdownMenu>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
              </CardContent>
            </Card>
          </div>

<div>
            <Card className="h-full">
              <CardHeader>
                <CardTitle>Phân bố theo khu vực</CardTitle>
                <CardDescription>Số lượng người trong từng khu vực</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {areas.map((area) => (
                    <div key={area.id} className="flex items-center gap-4 p-3 rounded-lg border">
                      <div
                        className={`h-10 w-10 rounded-full flex items-center justify-center ${
                          area.status === "crowded"
                            ? "bg-red-100 text-red-600"
                            : area.status === "restricted"
                              ? "bg-yellow-100 text-yellow-600"
                              : "bg-green-100 text-green-600"
                        }`}
                      >
                        <MapPin className="h-5 w-5" />
                      </div>
                      <div className="flex-1">
                        <div className="flex items-center justify-between">
                          <h4 className="text-sm font-medium">{area.name}</h4>
                          <Badge
                            variant="outline"
                            className={
                              area.status === "crowded"
                                ? "bg-red-50 text-red-700"
                                : area.status === "restricted"
                                  ? "bg-yellow-50 text-yellow-700"
                                  : "bg-green-50 text-green-700"
                            }
                          >
                            {area.status === "crowded"
                              ? "Đông đúc"
                              : area.status === "restricted"
                                ? "Hạn chế"
                                : "Bình thường"}
                          </Badge>
                        </div>
                        <div className="flex items-center text-xs text-muted-foreground">
                          <Users className="h-3 w-3 mr-1" />
                          <span>{area.count} người</span>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>

<Card>
          <CardHeader>
            <CardTitle>Sơ đồ di chuyển</CardTitle>
            <CardDescription>Biểu đồ di chuyển giữa các khu vực</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="h-[300px] relative bg-gray-50 rounded-lg border p-4">
              {/* Giả lập sơ đồ di chuyển */}
              <div className="absolute top-1/4 left-1/4 h-16 w-32 rounded-lg border bg-white flex items-center justify-center shadow-sm">
                <span className="text-sm font-medium">Khu vực sản xuất A</span>
              </div>
              <div className="absolute top-1/4 right-1/4 h-16 w-32 rounded-lg border bg-white flex items-center justify-center shadow-sm">
                <span className="text-sm font-medium">Khu vực sản xuất B</span>
              </div>
              <div className="absolute bottom-1/4 left-1/4 h-16 w-32 rounded-lg border bg-white flex items-center justify-center shadow-sm">
                <span className="text-sm font-medium">Khu vực kho hàng</span>
              </div>
              <div className="absolute bottom-1/4 right-1/4 h-16 w-32 rounded-lg border bg-white flex items-center justify-center shadow-sm">
                <span className="text-sm font-medium">Khu vực văn phòng</span>
              </div>
              <div className="absolute top-1/2 left-1/2 h-16 w-32 rounded-lg border bg-white flex items-center justify-center shadow-sm -translate-x-1/2 -translate-y-1/2">
                <span className="text-sm font-medium">Khu vực bảo trì</span>
              </div>

{/* Đường di chuyển */}
              <svg className="absolute inset-0 w-full h-full" style={{ zIndex: 0 }}>
                <path
                  d="M 140,80 L 340,80"
                  stroke="#22c55e"
                  strokeWidth="2"
                  fill="none"
                  strokeDasharray="4"
                  markerEnd="url(#arrowhead)"
                />
                <path
                  d="M 140,80 L 140,220"
                  stroke="#22c55e"
                  strokeWidth="2"
                  fill="none"
                  strokeDasharray="4"
                  markerEnd="url(#arrowhead)"
                />
                <path
                  d="M 340,80 L 340,220"
                  stroke="#ef4444"
                  strokeWidth="2"
                  fill="none"
                  strokeDasharray="4"
                  markerEnd="url(#arrowhead)"
                />
                <path
                  d="M 140,220 L 340,220"
                  stroke="#22c55e"
                  strokeWidth="2"
                  fill="none"
                  strokeDasharray="4"
                  markerEnd="url(#arrowhead)"
                />
                <path
                  d="M 240,150 L 140,80"
                  stroke="#22c55e"
                  strokeWidth="2"
                  fill="none"
                  strokeDasharray="4"
                  markerEnd="url(#arrowhead)"
                />
                <path
                  d="M 240,150 L 340,220"
                  stroke="#ef4444"
                  strokeWidth="2"
                  fill="none"
                  strokeDasharray="4"
                  markerEnd="url(#arrowhead)"
                />
                <defs>
                  <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
                    <polygon points="0 0, 10 3.5, 0 7" fill="#475569" />
                  </marker>
                </defs>
              </svg>

<div className="absolute bottom-4 right-4 flex items-center gap-4">
                <div className="flex items-center gap-2">
                  <div className="h-3 w-6 bg-green-500 rounded-full"></div>
                  <span className="text-xs">Bình thường</span>
                </div>
                <div className="flex items-center gap-2">
                  <div className="h-3 w-6 bg-red-500 rounded-full"></div>
                  <span className="text-xs">Bất thường</span>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/giam-sat-di-chuyen/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/giam-sat-bao-ho-lao-dong/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/canh-bao-thoi-gian-thuc/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/thong-bao/page.tsx" isMerged="true"
import { DashboardHeader } from "@/components/dashboard-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import {
  MoreHorizontal,
  Search,
  Filter,
  Calendar,
  Bell,
  BellOff,
  Settings,
  AlertTriangle,
  Info,
  Ban,
  HardHat,
  MapPin,
  Trash2,
} from "lucide-react"

export default function NotificationsPage() {
  // Dữ liệu mẫu cho bảng
  const notifications = [
    {
      id: "1",
      type: "alert",
      title: "Cảnh báo hành vi cấm",
      message: "Phát hiện nhân viên sử dụng điện thoại trong khu vực sản xuất",
      time: "12/04/2025 10:25:36",
      source: "Giám sát hành vi",
      status: "unread",
    },
    {
      id: "2",
      type: "alert",
      title: "Cảnh báo bảo hộ lao động",
      message: "Phát hiện nhân viên không đội mũ bảo hiểm trong khu vực xây dựng",
      time: "12/04/2025 10:18:45",
      source: "Giám sát bảo hộ",
      status: "unread",
    },
    {
      id: "3",
      type: "alert",
      title: "Cảnh báo xâm nhập",
      message: "Phát hiện người lạ trong khu vực hạn chế",
      time: "12/04/2025 10:05:12",
      source: "Giám sát an ninh",
      status: "read",
    },
    {
      id: "4",
      type: "system",
      title: "Cập nhật hệ thống",
      message: "Hệ thống đã được cập nhật lên phiên bản mới nhất",
      time: "12/04/2025 09:30:00",
      source: "Hệ thống",
      status: "read",
    },
    {
      id: "5",
      type: "info",
      title: "Báo cáo hàng ngày",
      message: "Báo cáo hàng ngày đã được tạo và sẵn sàng để xem",
      time: "12/04/2025 08:00:00",
      source: "Báo cáo",
      status: "read",
    },
    {
      id: "6",
      type: "alert",
      title: "Cảnh báo di chuyển",
      message: "Phát hiện nhân viên di chuyển vào khu vực cấm",
      time: "12/04/2025 07:45:22",
      source: "Giám sát di chuyển",
      status: "read",
    },
    {
      id: "7",
      type: "system",
      title: "Bảo trì hệ thống",
      message: "Hệ thống sẽ được bảo trì vào ngày 15/04/2025 từ 22:00 đến 23:00",
      time: "11/04/2025 15:00:00",
      source: "Hệ thống",
      status: "read",
    },
  ]

return (
    <div className="flex flex-col h-full">
      <DashboardHeader title="Thông báo" description="Quản lý và xem các thông báo từ hệ thống" />
      <div className="p-6 space-y-6 flex-1 overflow-auto">
        <div className="flex items-center justify-between">
          <Tabs defaultValue="all" className="w-[400px]">
            <TabsList className="grid w-full grid-cols-4">
              <TabsTrigger value="all">Tất cả</TabsTrigger>
              <TabsTrigger value="unread">Chưa đọc</TabsTrigger>
              <TabsTrigger value="alerts">Cảnh báo</TabsTrigger>
              <TabsTrigger value="system">Hệ thống</TabsTrigger>
            </TabsList>
          </Tabs>
          <div className="flex items-center gap-2">
            <Button variant="outline">
              <BellOff className="h-4 w-4 mr-2" />
              Đánh dấu đã đọc tất cả
            </Button>
            <Button variant="outline">
              <Settings className="h-4 w-4 mr-2" />
              Cài đặt thông báo
            </Button>
          </div>
        </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-muted-foreground mb-1">Tổng số thông báo</p>
                  <div className="flex items-baseline gap-2">
                    <h2 className="text-3xl font-bold">56</h2>
                    <span className="text-xs font-medium text-green-500">+8</span>
                  </div>
                  <p className="text-xs text-muted-foreground mt-1">Hôm nay</p>
                </div>
                <div className="h-12 w-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
                  <Bell className="h-6 w-6" />
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-muted-foreground mb-1">Chưa đọc</p>
                  <div className="flex items-baseline gap-2">
                    <h2 className="text-3xl font-bold">12</h2>
                    <span className="text-xs font-medium text-red-500">+5</span>
                  </div>
                  <p className="text-xs text-muted-foreground mt-1">Cần xem</p>
                </div>
                <div className="h-12 w-12 bg-red-100 rounded-full flex items-center justify-center text-red-600">
                  <AlertTriangle className="h-6 w-6" />
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-muted-foreground mb-1">Cảnh báo</p>
                  <div className="flex items-baseline gap-2">
                    <h2 className="text-3xl font-bold">32</h2>
                    <span className="text-xs font-medium text-yellow-500">+15%</span>
                  </div>
                  <p className="text-xs text-muted-foreground mt-1">Hôm nay</p>
                </div>
                <div className="h-12 w-12 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600">
                  <Bell className="h-6 w-6" />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

<Card>
          <CardHeader className="flex flex-row items-center justify-between">
            <div>
              <CardTitle>Danh sách thông báo</CardTitle>
              <CardDescription>Tất cả thông báo từ hệ thống</CardDescription>
            </div>
            <div className="flex items-center gap-2">
              <Button variant="outline" size="sm">
                <Calendar className="h-4 w-4 mr-2" />
                Lọc theo ngày
              </Button>
              <Button variant="outline" size="sm">
                <Trash2 className="h-4 w-4 mr-2" />
                Xóa đã đọc
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-2 w-full max-w-sm">
                <div className="relative w-full">
                  <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                  <Input type="search" placeholder="Tìm kiếm thông báo..." className="pl-8 w-full" />
                </div>
              </div>
              <div className="flex items-center gap-2">
                <Select defaultValue="all">
                  <SelectTrigger className="w-[180px]">
                    <SelectValue placeholder="Loại thông báo" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Tất cả</SelectItem>
                    <SelectItem value="alert">Cảnh báo</SelectItem>
                    <SelectItem value="system">Hệ thống</SelectItem>
                    <SelectItem value="info">Thông tin</SelectItem>
                  </SelectContent>
                </Select>
                <Select defaultValue="all">
                  <SelectTrigger className="w-[180px]">
                    <SelectValue placeholder="Nguồn" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Tất cả</SelectItem>
                    <SelectItem value="behavior">Giám sát hành vi</SelectItem>
                    <SelectItem value="safety">Giám sát bảo hộ</SelectItem>
                    <SelectItem value="security">Giám sát an ninh</SelectItem>
                    <SelectItem value="movement">Giám sát di chuyển</SelectItem>
                    <SelectItem value="system">Hệ thống</SelectItem>
                    <SelectItem value="report">Báo cáo</SelectItem>
                  </SelectContent>
                </Select>
                <Button variant="outline" size="icon">
                  <Filter className="h-4 w-4" />
                </Button>
              </div>
            </div>
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-[50px]"></TableHead>
                    <TableHead>Tiêu đề</TableHead>
                    <TableHead>Nội dung</TableHead>
                    <TableHead>Thời gian</TableHead>
                    <TableHead>Nguồn</TableHead>
                    <TableHead>Trạng thái</TableHead>
                    <TableHead className="w-[80px]"></TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {notifications.map((notification) => (
                    <TableRow key={notification.id} className={notification.status === "unread" ? "bg-blue-50" : ""}>
                      <TableCell>
                        <div
                          className={`h-8 w-8 rounded-full flex items-center justify-center ${
                            notification.type === "alert"
                              ? "bg-red-100 text-red-600"
                              : notification.type === "system"
                                ? "bg-purple-100 text-purple-600"
                                : "bg-blue-100 text-blue-600"
                          }`}
                        >
                          {notification.type === "alert" ? (
                            <AlertTriangle className="h-4 w-4" />
                          ) : notification.type === "system" ? (
                            <Settings className="h-4 w-4" />
                          ) : (
                            <Info className="h-4 w-4" />
                          )}
                        </div>
                      </TableCell>
                      <TableCell className="font-medium">{notification.title}</TableCell>
                      <TableCell className="max-w-[300px] truncate" title={notification.message}>
                        {notification.message}
                      </TableCell>
                      <TableCell>{notification.time}</TableCell>
                      <TableCell>{notification.source}</TableCell>
                      <TableCell>
                        <Badge
                          variant="outline"
                          className={
                            notification.status === "unread" ? "bg-blue-50 text-blue-700" : "bg-gray-50 text-gray-700"
                          }
                        >
                          {notification.status === "unread" ? "Chưa đọc" : "Đã đọc"}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" className="h-8 w-8 p-0" aria-label="Mở menu">
                              <MoreHorizontal className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuLabel>Hành động</DropdownMenuLabel>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem>Xem chi tiết</DropdownMenuItem>
                            {notification.status === "unread" ? (
                              <DropdownMenuItem>Đánh dấu đã đọc</DropdownMenuItem>
                            ) : (
                              <DropdownMenuItem>Đánh dấu chưa đọc</DropdownMenuItem>
                            )}
                            <DropdownMenuItem>Xóa thông báo</DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <Card>
            <CardHeader>
              <CardTitle>Thông báo theo loại</CardTitle>
              <CardDescription>Phân bố thông báo theo loại</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <AlertTriangle className="h-4 w-4 text-red-600" />
                      <span className="text-sm">Cảnh báo</span>
                    </div>
                    <span className="text-sm font-medium">32 (57.1%)</span>
                  </div>
                  <div className="h-2 w-full bg-gray-100 rounded-full">
                    <div className="h-2 w-[57.1%] bg-red-500 rounded-full"></div>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <Settings className="h-4 w-4 text-purple-600" />
                      <span className="text-sm">Hệ thống</span>
                    </div>
                    <span className="text-sm font-medium">15 (26.8%)</span>
                  </div>
                  <div className="h-2 w-full bg-gray-100 rounded-full">
                    <div className="h-2 w-[26.8%] bg-purple-500 rounded-full"></div>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <Info className="h-4 w-4 text-blue-600" />
                      <span className="text-sm">Thông tin</span>
                    </div>
                    <span className="text-sm font-medium">9 (16.1%)</span>
                  </div>
                  <div className="h-2 w-full bg-gray-100 rounded-full">
                    <div className="h-2 w-[16.1%] bg-blue-500 rounded-full"></div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Thông báo theo nguồn</CardTitle>
              <CardDescription>Phân bố thông báo theo nguồn</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <Ban className="h-4 w-4 text-red-600" />
                      <span className="text-sm">Giám sát hành vi</span>
                    </div>
                    <span className="text-sm font-medium">18 (32.1%)</span>
                  </div>
                  <div className="h-2 w-full bg-gray-100 rounded-full">
                    <div className="h-2 w-[32.1%] bg-blue-500 rounded-full"></div>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <HardHat className="h-4 w-4 text-yellow-600" />
                      <span className="text-sm">Giám sát bảo hộ</span>
                    </div>
                    <span className="text-sm font-medium">12 (21.4%)</span>
                  </div>
                  <div className="h-2 w-full bg-gray-100 rounded-full">
                    <div className="h-2 w-[21.4%] bg-blue-500 rounded-full"></div>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <MapPin className="h-4 w-4 text-green-600" />
                      <span className="text-sm">Giám sát di chuyển</span>
                    </div>
                    <span className="text-sm font-medium">8 (14.3%)</span>
                  </div>
                  <div className="h-2 w-full bg-gray-100 rounded-full">
                    <div className="h-2 w-[14.3%] bg-blue-500 rounded-full"></div>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <Settings className="h-4 w-4 text-purple-600" />
                      <span className="text-sm">Hệ thống</span>
                    </div>
                    <span className="text-sm font-medium">10 (17.9%)</span>
                  </div>
                  <div className="h-2 w-full bg-gray-100 rounded-full">
                    <div className="h-2 w-[17.9%] bg-blue-500 rounded-full"></div>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <Info className="h-4 w-4 text-blue-600" />
                      <span className="text-sm">Báo cáo</span>
                    </div>
                    <span className="text-sm font-medium">8 (14.3%)</span>
                  </div>
                  <div className="h-2 w-full bg-gray-100 rounded-full">
                    <div className="h-2 w-[14.3%] bg-blue-500 rounded-full"></div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/thong-bao/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/canh-bao-thoi-gian-thuc/page.tsx" isMerged="true"
import { DashboardHeader } from "@/components/dashboard-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import {
  MoreHorizontal,
  Search,
  Filter,
  Calendar,
  Download,
  Clock,
  Eye,
  Camera,
  AlertTriangle,
  Bell,
  Ban,
  UserCheck,
  HardHat,
  MapPin,
  VolumeX,
} from "lucide-react"
import { TelegramNotificationButton } from "@/components/telegram-notification-button"

export default function RealTimeAlertsPage() {
  // Dữ liệu mẫu cho bảng
  const alerts = [
    {
      id: "1",
      type: "Hành vi cấm",
      description: "Sử dụng điện thoại trong khu vực sản xuất",
      person: "Nguyễn Văn A",
      employeeId: "NV001",
      time: "12/04/2025 10:25:36",
      location: "Khu vực sản xuất A - Camera 2",
      severity: "medium",
      status: "Mới",
    },
    {
      id: "2",
      type: "Bảo hộ lao động",
      description: "Không đội mũ bảo hiểm trong khu vực xây dựng",
      person: "Trần Thị B",
      employeeId: "NV002",
      time: "12/04/2025 10:18:45",
      location: "Khu vực xây dựng - Camera 1",
      severity: "high",
      status: "Đang xử lý",
    },
    {
      id: "3",
      type: "Xâm nhập trái phép",
      description: "Phát hiện người lạ trong khu vực hạn chế",
      person: "Không xác định",
      employeeId: "N/A",
      time: "12/04/2025 10:05:12",
      location: "Khu vực kho hàng - Camera 4",
      severity: "high",
      status: "Đang xử lý",
    },
    {
      id: "4",
      type: "Di chuyển bất thường",
      description: "Di chuyển vào khu vực cấm",
      person: "Lê Văn C",
      employeeId: "NT001",
      time: "12/04/2025 09:52:30",
      location: "Khu vực hóa chất - Camera 3",
      severity: "high",
      status: "Mới",
    },
    {
      id: "5",
      type: "Hành vi cấm",
      description: "Hút thuốc trong khu vực cấm",
      person: "Phạm Thị D",
      employeeId: "NV003",
      time: "12/04/2025 09:45:18",
      location: "Khu vực kho hàng - Camera 2",
      severity: "medium",
      status: "Đã xử lý",
    },
  ]

return (
    <div className="flex flex-col h-full">
      <DashboardHeader
        title="Cảnh báo thời gian thực"
        description="Theo dõi và xử lý các cảnh báo được phát hiện trong thời gian thực"
      />
      <div className="p-6 space-y-6 flex-1 overflow-auto">
        <div className="flex items-center justify-between">
          <Tabs defaultValue="all" className="w-[400px]">
            <TabsList className="grid w-full grid-cols-4">
              <TabsTrigger value="all">Tất cả</TabsTrigger>
              <TabsTrigger value="new">Mới</TabsTrigger>
              <TabsTrigger value="processing">Đang xử lý</TabsTrigger>
              <TabsTrigger value="processed">Đã xử lý</TabsTrigger>
            </TabsList>
          </Tabs>
          <div className="flex items-center gap-2">
            <Button variant="outline">
              <Calendar className="h-4 w-4 mr-2" />
              Chọn ngày
            </Button>
            <Button>
              <Download className="h-4 w-4 mr-2" />
              Xuất báo cáo
            </Button>
          </div>
        </div>

<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <Card className="bg-red-50 border-red-200">
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-red-800 mb-1">Cảnh báo mới</p>
                  <div className="flex items-baseline gap-2">
                    <h2 className="text-3xl font-bold text-red-900">12</h2>
                    <span className="text-xs font-medium text-red-700">+3</span>
                  </div>
                  <p className="text-xs text-red-700 mt-1">Cần xử lý ngay</p>
                </div>
                <div className="h-12 w-12 bg-red-200 rounded-full flex items-center justify-center text-red-600">
                  <AlertTriangle className="h-6 w-6" />
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-muted-foreground mb-1">Đang xử lý</p>
                  <div className="flex items-baseline gap-2">
                    <h2 className="text-3xl font-bold">8</h2>
                    <span className="text-xs font-medium text-yellow-500">-2</span>
                  </div>
                  <p className="text-xs text-muted-foreground mt-1">Đang tiến hành</p>
                </div>
                <div className="h-12 w-12 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600">
                  <Clock className="h-6 w-6" />
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-muted-foreground mb-1">Đã xử lý hôm nay</p>
                  <div className="flex items-baseline gap-2">
                    <h2 className="text-3xl font-bold">24</h2>
                    <span className="text-xs font-medium text-green-500">+5</span>
                  </div>
                  <p className="text-xs text-muted-foreground mt-1">Hoàn thành</p>
                </div>
                <div className="h-12 w-12 bg-green-100 rounded-full flex items-center justify-center text-green-600">
                  <UserCheck className="h-6 w-6" />
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-muted-foreground mb-1">Tổng số cảnh báo</p>
                  <div className="flex items-baseline gap-2">
                    <h2 className="text-3xl font-bold">44</h2>
                    <span className="text-xs font-medium text-red-500">+15%</span>
                  </div>
                  <p className="text-xs text-muted-foreground mt-1">Hôm nay</p>
                </div>
                <div className="h-12 w-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
                  <Bell className="h-6 w-6" />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="md:col-span-2">
            <Card>
              <CardHeader className="flex flex-row items-center justify-between">
                <div>
                  <CardTitle>Cảnh báo thời gian thực</CardTitle>
                  <CardDescription>Danh sách các cảnh báo được phát hiện gần đây</CardDescription>
                </div>
                <div className="flex items-center gap-2">
                  <Button variant="outline" size="sm">
                    <VolumeX className="h-4 w-4 mr-2" />
                    Tắt âm thanh
                  </Button>
                  <Button variant="outline" size="sm">
                    <Eye className="h-4 w-4 mr-2" />
                    Xem trực tiếp
                  </Button>
                </div>
              </CardHeader>
              <CardContent>
                <div className="flex items-center justify-between mb-4">
                  <div className="flex items-center gap-2 w-full max-w-sm">
                    <div className="relative w-full">
                      <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                      <Input type="search" placeholder="Tìm kiếm..." className="pl-8 w-full" />
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <Select defaultValue="all">
                      <SelectTrigger className="w-[180px]">
                        <SelectValue placeholder="Loại cảnh báo" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">Tất cả</SelectItem>
                        <SelectItem value="behavior">Hành vi cấm</SelectItem>
                        <SelectItem value="safety">Bảo hộ lao động</SelectItem>
                        <SelectItem value="intrusion">Xâm nhập trái phép</SelectItem>
                        <SelectItem value="movement">Di chuyển bất thường</SelectItem>
                      </SelectContent>
                    </Select>
                    <Select defaultValue="all">
                      <SelectTrigger className="w-[180px]">
                        <SelectValue placeholder="Mức độ" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">Tất cả</SelectItem>
                        <SelectItem value="high">Cao</SelectItem>
                        <SelectItem value="medium">Trung bình</SelectItem>
                        <SelectItem value="low">Thấp</SelectItem>
                      </SelectContent>
                    </Select>
                    <Button variant="outline" size="icon">
                      <Filter className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
                <div className="rounded-md border">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Loại cảnh báo</TableHead>
                        <TableHead>Mô tả</TableHead>
                        <TableHead>Thời gian</TableHead>
                        <TableHead>Vị trí</TableHead>
                        <TableHead>Mức độ</TableHead>
                        <TableHead>Trạng thái</TableHead>
                        <TableHead className="w-[180px]">Hành động</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {alerts.map((alert) => (
                        <TableRow key={alert.id}>
                          <TableCell>
                            <div className="flex items-center gap-2">
                              {alert.type === "Hành vi cấm" ? (
                                <Ban className="h-4 w-4 text-red-600" />
                              ) : alert.type === "Bảo hộ lao động" ? (
                                <HardHat className="h-4 w-4 text-yellow-600" />
                              ) : alert.type === "Xâm nhập trái phép" ? (
                                <AlertTriangle className="h-4 w-4 text-red-600" />
                              ) : (
                                <MapPin className="h-4 w-4 text-blue-600" />
                              )}
                              {alert.type}
                            </div>
                          </TableCell>
                          <TableCell className="font-medium max-w-[200px] truncate" title={alert.description}>
                            {alert.description}
                          </TableCell>
                          <TableCell>{alert.time}</TableCell>
                          <TableCell>{alert.location}</TableCell>
                          <TableCell>
                            <Badge
                              variant="outline"
                              className={
                                alert.severity === "high"
                                  ? "bg-red-50 text-red-700"
                                  : alert.severity === "medium"
                                    ? "bg-yellow-50 text-yellow-700"
                                    : "bg-blue-50 text-blue-700"
                              }
                            >
                              {alert.severity === "high" ? "Cao" : alert.severity === "medium" ? "Trung bình" : "Thấp"}
                            </Badge>
                          </TableCell>
                          <TableCell>
                            <Badge
                              variant="outline"
                              className={
                                alert.status === "Mới"
                                  ? "bg-red-50 text-red-700"
                                  : alert.status === "Đang xử lý"
                                    ? "bg-yellow-50 text-yellow-700"
                                    : "bg-green-50 text-green-700"
                              }
                            >
                              {alert.status}
                            </Badge>
                          </TableCell>
                          <TableCell>
                            <div className="flex items-center gap-2">
                              <TelegramNotificationButton
                                violationType={alert.description}
                                violationId={alert.id}
                                severity={alert.severity as "high" | "medium" | "low"}
                                location={alert.location}
                                person={alert.person}
                                time={alert.time}
                              />
                              <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                  <Button variant="ghost" className="h-8 w-8 p-0" aria-label="Mở menu">
                                    <MoreHorizontal className="h-4 w-4" />
                                  </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align="end">
                                  <DropdownMenuLabel>Hành động</DropdownMenuLabel>
                                  <DropdownMenuSeparator />
                                  <DropdownMenuItem>Xem chi tiết</DropdownMenuItem>
                                  <DropdownMenuItem>Xem hình ảnh</DropdownMenuItem>
                                  <DropdownMenuItem>Xử lý cảnh báo</DropdownMenuItem>
                                  <DropdownMenuItem>Đánh dấu đã xử lý</DropdownMenuItem>
                                </DropdownMenuContent>
                              </DropdownMenu>
                            </div>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
              </CardContent>
            </Card>
          </div>

<div>
            <Card className="h-full">
              <CardHeader>
                <CardTitle>Cảnh báo khẩn cấp</CardTitle>
                <CardDescription>Các cảnh báo cần xử lý ngay lập tức</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="p-4 rounded-lg border border-red-300 bg-red-50">
                    <div className="flex items-center gap-3 mb-2">
                      <div className="h-10 w-10 bg-red-200 rounded-full flex items-center justify-center text-red-600">
                        <AlertTriangle className="h-5 w-5" />
                      </div>
                      <div>
                        <h3 className="text-sm font-medium text-red-800">Xâm nhập trái phép</h3>
                        <p className="text-xs text-red-700">Phát hiện người lạ trong khu vực hạn chế</p>
                      </div>
                    </div>
                    <div className="flex items-center justify-between text-xs text-red-700">
                      <div className="flex items-center gap-1">
                        <Clock className="h-3 w-3" />
                        <span>12/04/2025 10:05:12</span>
                      </div>
                      <div className="flex items-center gap-1">
                        <Camera className="h-3 w-3" />
                        <span>Khu vực kho hàng - Camera 4</span>
                      </div>
                    </div>
                    <div className="mt-3 flex items-center gap-2">
                      <Button size="sm" className="w-full bg-red-600 hover:bg-red-700">
                        <Eye className="h-4 w-4 mr-2" />
                        Xem ngay
                      </Button>
                      <TelegramNotificationButton
                        violationType="Xâm nhập trái phép"
                        violationId="3"
                        severity="high"
                        location="Khu vực kho hàng - Camera 4"
                        person="Không xác định"
                        time="12/04/2025 10:05:12"
                      />
                    </div>
                  </div>

<div className="p-4 rounded-lg border border-red-300 bg-red-50">
                    <div className="flex items-center gap-3 mb-2">
                      <div className="h-10 w-10 bg-red-200 rounded-full flex items-center justify-center text-red-600">
                        <MapPin className="h-5 w-5" />
                      </div>
                      <div>
                        <h3 className="text-sm font-medium text-red-800">Di chuyển bất thường</h3>
                        <p className="text-xs text-red-700">Di chuyển vào khu vực cấm</p>
                      </div>
                    </div>
                    <div className="flex items-center justify-between text-xs text-red-700">
                      <div className="flex items-center gap-1">
                        <Clock className="h-3 w-3" />
                        <span>12/04/2025 09:52:30</span>
                      </div>
                      <div className="flex items-center gap-1">
                        <Camera className="h-3 w-3" />
                        <span>Khu vực hóa chất - Camera 3</span>
                      </div>
                    </div>
                    <div className="mt-3 flex items-center gap-2">
                      <Button size="sm" className="w-full bg-red-600 hover:bg-red-700">
                        <Eye className="h-4 w-4 mr-2" />
                        Xem ngay
                      </Button>
                      <TelegramNotificationButton
                        violationType="Di chuyển bất thường"
                        violationId="4"
                        severity="high"
                        location="Khu vực hóa chất - Camera 3"
                        person="Lê Văn C"
                        time="12/04/2025 09:52:30"
                      />
                    </div>
                  </div>

<div className="mt-6">
                    <h3 className="text-sm font-medium mb-3">Thống kê cảnh báo hôm nay</h3>
                    <div className="space-y-3">
                      <div className="space-y-2">
                        <div className="flex items-center justify-between">
                          <span className="text-sm">Hành vi cấm</span>
                          <span className="text-sm font-medium">18 (40.9%)</span>
                        </div>
                        <div className="h-2 w-full bg-gray-100 rounded-full">
                          <div className="h-2 w-[40.9%] bg-blue-500 rounded-full"></div>
                        </div>
                      </div>
                      <div className="space-y-2">
                        <div className="flex items-center justify-between">
                          <span className="text-sm">Bảo hộ lao động</span>
                          <span className="text-sm font-medium">12 (27.3%)</span>
                        </div>
                        <div className="h-2 w-full bg-gray-100 rounded-full">
                          <div className="h-2 w-[27.3%] bg-blue-500 rounded-full"></div>
                        </div>
                      </div>
                      <div className="space-y-2">
                        <div className="flex items-center justify-between">
                          <span className="text-sm">Xâm nhập trái phép</span>
                          <span className="text-sm font-medium">8 (18.2%)</span>
                        </div>
                        <div className="h-2 w-full bg-gray-100 rounded-full">
                          <div className="h-2 w-[18.2%] bg-blue-500 rounded-full"></div>
                        </div>
                      </div>
                      <div className="space-y-2">
                        <div className="flex items-center justify-between">
                          <span className="text-sm">Di chuyển bất thường</span>
                          <span className="text-sm font-medium">6 (13.6%)</span>
                        </div>
                        <div className="h-2 w-full bg-gray-100 rounded-full">
                          <div className="h-2 w-[13.6%] bg-blue-500 rounded-full"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/telegram-notification-button.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Send } from "lucide-react"
import { toast } from "@/components/ui/use-toast"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

interface TelegramNotificationButtonProps {
  violationType: string
  violationId: string
  severity: "high" | "medium" | "low"
  location: string
  person: string
  time: string
}

export function TelegramNotificationButton({
  violationType,
  violationId,
  severity,
  location,
  person,
  time,
}: TelegramNotificationButtonProps) {
  const [isSending, setIsSending] = useState(false)

const handleSendNotification = async () => {
    setIsSending(true)

// Mô phỏng gửi thông báo đến Telegram
    try {
      // Trong thực tế, đây sẽ là một API call đến backend để gửi thông báo
      await new Promise((resolve) => setTimeout(resolve, 1000))

toast({
        title: "Thông báo đã được gửi",
        description: `Đã gửi cảnh báo về vi phạm "${violationType}" qua Telegram.`,
      })
    } catch (error) {
      toast({
        title: "Lỗi khi gửi thông báo",
        description: "Không thể gửi thông báo qua Telegram. Vui lòng thử lại sau.",
        variant: "destructive",
      })
    } finally {
      setIsSending(false)
    }
  }

return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button
            variant="outline"
            size="sm"
            onClick={handleSendNotification}
            disabled={isSending}
            className="bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100 hover:text-blue-800"
          >
            <Send className="h-4 w-4 mr-2" />
            {isSending ? "Đang gửi..." : "Gửi Telegram"}
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Gửi thông báo vi phạm qua Telegram</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}
[V0_FILE]typescriptreact:file="app/cau-hinh-thong-bao/page.tsx" isMerged="true"
import { DashboardHeader } from "@/components/dashboard-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Separator } from "@/components/ui/separator"
import { Badge } from "@/components/ui/badge"
import { AlertTriangle, Bell, Check, HardHat, Info, Mail, MessageSquare, Save, Send, Smartphone } from "lucide-react"

export default function NotificationSettingsPage() {
  return (
    <div className="flex flex-col h-full">
      <DashboardHeader title="Cấu hình thông báo" description="Quản lý cài đặt thông báo và cảnh báo" />
      <div className="p-6 space-y-6 flex-1 overflow-auto">
        <Tabs defaultValue="telegram" className="w-full">
          <TabsList className="grid w-full max-w-md grid-cols-3">
            <TabsTrigger value="telegram">Telegram</TabsTrigger>
            <TabsTrigger value="email">Email</TabsTrigger>
            <TabsTrigger value="sms">SMS</TabsTrigger>
          </TabsList>

<div className="mt-6 space-y-6">
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle>Cấu hình Telegram</CardTitle>
                    <CardDescription>Thiết lập thông báo qua Telegram</CardDescription>
                  </div>
                  <Badge variant="outline" className="bg-green-50 text-green-700">
                    <Check className="h-3.5 w-3.5 mr-1" />
                    Đã kết nối
                  </Badge>
                </div>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="bot-token">Bot Token</Label>
                      <Input id="bot-token" type="password" value="5871234567:AAHfPGlZX-aBcDeFgHiJkLmNoPqRsTuVwXyZ" />
                      <p className="text-xs text-muted-foreground">
                        Token của bot Telegram được tạo thông qua BotFather
                      </p>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="chat-id">Chat ID</Label>
                      <Input id="chat-id" value="-1001234567890" />
                      <p className="text-xs text-muted-foreground">ID của nhóm hoặc kênh Telegram để gửi thông báo</p>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="notification-template">Mẫu thông báo</Label>
                      <Input
                        id="notification-template"
                        value="⚠️ *CẢNH BÁO VI PHẠM*\n\nLoại: {violation_type}\nĐối tượng: {person}\nVị trí: {location}\nThời gian: {time}\nMức độ: {severity}"
                      />
                      <p className="text-xs text-muted-foreground">
                        Mẫu tin nhắn gửi đi. Sử dụng các biến trong ngoặc nhọn.
                      </p>
                    </div>
                  </div>

<div className="space-y-4">
                    <div>
                      <h3 className="text-sm font-medium mb-2">Xem trước thông báo</h3>
                      <div className="p-4 rounded-lg border bg-slate-50">
                        <div className="flex items-center gap-2 mb-2">
                          <div className="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">
                            <Send className="h-4 w-4 text-blue-600" />
                          </div>
                          <div>
                            <p className="text-sm font-medium">Hệ thống Camera AI</p>
                            <p className="text-xs text-muted-foreground">Bot</p>
                          </div>
                        </div>
                        <div className="mt-2 text-sm">
                          <p className="font-bold">⚠️ CẢNH BÁO VI PHẠM</p>
                          <p className="mt-2">
                            <span className="font-medium">Loại:</span> Sử dụng điện thoại trong khu vực cấm
                          </p>
                          <p>
                            <span className="font-medium">Đối tượng:</span> Nguyễn Văn A
                          </p>
                          <p>
                            <span className="font-medium">Vị trí:</span> Khu vực sản xuất A - Camera 2
                          </p>
                          <p>
                            <span className="font-medium">Thời gian:</span> 12/04/2025 10:25
                          </p>
                          <p>
                            <span className="font-medium">Mức độ:</span> Trung bình
                          </p>
                        </div>
                      </div>
                    </div>

<div className="space-y-2">
                      <div className="flex items-center justify-between">
                        <Label htmlFor="test-notification">Gửi thông báo thử nghiệm</Label>
                        <Button size="sm" variant="outline">
                          <Send className="h-4 w-4 mr-2" />
                          Gửi thử
                        </Button>
                      </div>
                      <p className="text-xs text-muted-foreground">Gửi một thông báo thử nghiệm để kiểm tra cấu hình</p>
                    </div>
                  </div>
                </div>

<div>
                  <h3 className="text-sm font-medium mb-4">Cài đặt thông báo</h3>
                  <div className="space-y-4">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="flex items-center justify-between space-x-2">
                        <div className="flex items-center space-x-2">
                          <AlertTriangle className="h-4 w-4 text-red-500" />
                          <Label htmlFor="notify-violations">Vi phạm hành vi</Label>
                        </div>
                        <Switch id="notify-violations" defaultChecked />
                      </div>

<div className="flex items-center justify-between space-x-2">
                        <div className="flex items-center space-x-2">
                          <Bell className="h-4 w-4 text-purple-500" />
                          <Label htmlFor="notify-system">Thông báo hệ thống</Label>
                        </div>
                        <Switch id="notify-system" />
                      </div>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="severity-level">Mức độ nghiêm trọng tối thiểu</Label>
                      <Select defaultValue="all">
                        <SelectTrigger id="severity-level">
                          <SelectValue placeholder="Chọn mức độ" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="all">Tất cả mức độ</SelectItem>
                          <SelectItem value="high">Chỉ mức độ cao</SelectItem>
                          <SelectItem value="medium">Trung bình trở lên</SelectItem>
                        </SelectContent>
                      </Select>
                      <p className="text-xs text-muted-foreground">
                        Chỉ gửi thông báo cho các vi phạm có mức độ nghiêm trọng từ mức này trở lên
                      </p>
                    </div>
                  </div>
                </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <MessageSquare className="h-5 w-5 text-blue-500" />
                    Telegram
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <span className="text-sm">Trạng thái</span>
                      <Badge variant="outline" className="bg-green-50 text-green-700">
                        Đã kết nối
                      </Badge>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm">Thông báo đã gửi</span>
                      <span className="text-sm font-medium">247</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm">Lần gửi gần nhất</span>
                      <span className="text-sm">12/04/2025 10:15</span>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Mail className="h-5 w-5 text-green-500" />
                    Email
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <span className="text-sm">Trạng thái</span>
                      <Badge variant="outline" className="bg-yellow-50 text-yellow-700">
                        Chưa cấu hình
                      </Badge>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm">Thông báo đã gửi</span>
                      <span className="text-sm font-medium">0</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm">Lần gửi gần nhất</span>
                      <span className="text-sm">N/A</span>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Smartphone className="h-5 w-5 text-purple-500" />
                    SMS
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <span className="text-sm">Trạng thái</span>
                      <Badge variant="outline" className="bg-yellow-50 text-yellow-700">
                        Chưa cấu hình
                      </Badge>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm">Thông báo đã gửi</span>
                      <span className="text-sm font-medium">0</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm">Lần gửi gần nhất</span>
                      <span className="text-sm">N/A</span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/cau-hinh-thong-bao/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { DashboardHeader } from "@/components/dashboard-header"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

export default function NotificationSettingsLoading() {
  return (
    <div className="flex flex-col h-full">
      <DashboardHeader title="Cấu hình thông báo" description="Quản lý cài đặt thông báo và cảnh báo" />
      <div className="p-6 space-y-6 flex-1 overflow-auto">
        <div className="w-full max-w-md">
          <Skeleton className="h-10 w-full" />
        </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {[1, 2, 3].map((i) => (
            <Card key={i}>
              <CardHeader>
                <Skeleton className="h-6 w-32" />
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  {[1, 2, 3].map((j) => (
                    <div key={j} className="flex items-center justify-between">
                      <Skeleton className="h-4 w-24" />
                      <Skeleton className="h-4 w-20" />
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/discipline-awareness-chart.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from "recharts"

// Mô phỏng dữ liệu cho biểu đồ
const generateData = () => {
  return [
    { name: "Sử dụng điện thoại", value: 18 },
    { name: "Đi trễ/về sớm", value: 12 },
    { name: "Hút thuốc", value: 8 },
    { name: "Đi sai khu vực", value: 7 },
  ]
}

const COLORS = ["#ef4444", "#f97316", "#eab308", "#3b82f6"]

export function DisciplineAwarenessChart() {
  const [data, setData] = useState<any[]>([])

useEffect(() => {
    setData(generateData())
  }, [])

return (
    <div className="h-[300px] w-full">
      <ResponsiveContainer width="100%" height="100%">
        <PieChart>
          <Pie
            data={data}
            cx="50%"
            cy="50%"
            labelLine={false}
            outerRadius={100}
            fill="#8884d8"
            dataKey="value"
            label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
          >
            {data.map((entry, index) => (
              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
            ))}
          </Pie>
          <Tooltip formatter={(value) => [`${value} vi phạm`, "Số lượng"]} />
          <Legend />
        </PieChart>
      </ResponsiveContainer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/security-risk-chart.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts"

// Mô phỏng dữ liệu cho biểu đồ
const generateData = () => {
  return [
    { name: "T1", "Truy cập trái phép": 2, "Ra vào ngoài giờ": 5, "Đi vào khu vực cấm": 3 },
    { name: "T2", "Truy cập trái phép": 1, "Ra vào ngoài giờ": 4, "Đi vào khu vực cấm": 2 },
    { name: "T3", "Truy cập trái phép": 3, "Ra vào ngoài giờ": 6, "Đi vào khu vực cấm": 4 },
    { name: "T4", "Truy cập trái phép": 2, "Ra vào ngoài giờ": 5, "Đi vào khu vực cấm": 3 },
    { name: "T5", "Truy cập trái phép": 4, "Ra vào ngoài giờ": 3, "Đi vào khu vực cấm": 2 },
    { name: "T6", "Truy cập trái phép": 3, "Ra vào ngoài giờ": 4, "Đi vào khu vực cấm": 3 },
    { name: "T7", "Truy cập trái phép": 2, "Ra vào ngoài giờ": 3, "Đi vào khu vực cấm": 2 },
    { name: "T8", "Truy cập trái phép": 1, "Ra vào ngoài giờ": 2, "Đi vào khu vực cấm": 1 },
    { name: "T9", "Truy cập trái phép": 2, "Ra vào ngoài giờ": 3, "Đi vào khu vực cấm": 2 },
    { name: "T10", "Truy cập trái phép": 3, "Ra vào ngoài giờ": 4, "Đi vào khu vực cấm": 3 },
    { name: "T11", "Truy cập trái phép": 2, "Ra vào ngoài giờ": 3, "Đi vào khu vực cấm": 2 },
    { name: "T12", "Truy cập trái phép": 3, "Ra vào ngoài giờ": 4, "Đi vào khu vực cấm": 3 },
  ]
}

export function SecurityRiskChart() {
  const [data, setData] = useState<any[]>([])

useEffect(() => {
    setData(generateData())
  }, [])

return (
    <div className="h-[300px] w-full">
      <ResponsiveContainer width="100%" height="100%">
        <LineChart
          data={data}
          margin={{
            top: 5,
            right: 30,
            left: 20,
            bottom: 5,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
          <XAxis dataKey="name" stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
          <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
          <Tooltip />
          <Legend />
          <Line type="monotone" dataKey="Truy cập trái phép" stroke="#ef4444" activeDot={{ r: 8 }} strokeWidth={2} />
          <Line type="monotone" dataKey="Ra vào ngoài giờ" stroke="#eab308" strokeWidth={2} />
          <Line type="monotone" dataKey="Đi vào khu vực cấm" stroke="#3b82f6" strokeWidth={2} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard-chart.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"

// Mô phỏng dữ liệu cho biểu đồ
const generateData = () => {
  const data = []
  for (let hour = 0; hour < 24; hour++) {
    const formattedHour = hour.toString().padStart(2, "0") + ":00"

// Tạo dữ liệu ngẫu nhiên nhưng có xu hướng
    const activeUsers = Math.max(0, Math.floor(Math.random() * 50) + 20)
    const violations = Math.max(0, Math.floor(Math.random() * 5))

data.push({
      time: formattedHour,
      activeUsers: activeUsers,
      violations: violations,
    })
  }
  return data
}

export function DashboardChart() {
  const [data, setData] = useState<any[]>([])

useEffect(() => {
    setData(generateData())
  }, [])

return (
    <div className="h-[300px] w-full">
      <ResponsiveContainer width="100%" height="100%">
        <LineChart
          data={data}
          margin={{
            top: 5,
            right: 30,
            left: 20,
            bottom: 5,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
          <XAxis dataKey="time" stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
          <YAxis
            stroke="#888888"
            fontSize={12}
            tickLine={false}
            axisLine={false}
            tickFormatter={(value) => `${value}`}
          />
          <Tooltip />
          <Line
            type="monotone"
            dataKey="activeUsers"
            stroke="#2563eb"
            activeDot={{ r: 8 }}
            strokeWidth={2}
            name="Người hoạt động"
          />
          <Line type="monotone" dataKey="violations" stroke="#ef4444" strokeWidth={2} name="Vi phạm" />
        </LineChart>
      </ResponsiveContainer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tong-quan/phan-tich-du-lieu/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { DashboardHeader } from "@/components/dashboard-header"

export default function Loading() {
  return (
    <div className="flex flex-col h-full">
      <DashboardHeader title="Phân tích dữ liệu" description="Đánh giá xu hướng và đề xuất giải pháp" />
      <div className="p-6 space-y-6 flex-1 overflow-auto">
        <div className="flex items-center justify-between mb-4">
          <Skeleton className="h-10 w-[800px]" />
          <Skeleton className="h-10 w-32" />
        </div>

<Skeleton className="h-64" />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/su-kien-an-ninh/lang-vang/page.tsx" isMerged="true"
import { DashboardHeader } from "@/components/dashboard-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { MoreHorizontal, Search, Filter, Calendar, Clock, MapPin, Camera, AlertTriangle } from "lucide-react"

export default function LoiteringEventsPage() {
  // Dữ liệu mẫu cho bảng sự kiện lãng vãng
  const events = [
    {
      id: "1",
      date: "12/04/2025",
      time: "10:25:36",
      location: "Khu vực sản xuất A",
      camera: "Camera 1",
      duration: "5 phút 23 giây",
      status: "Đã xử lý",
      severity: "high",
    },
    {
      id: "2",
      date: "12/04/2025",
      time: "09:45:12",
      location: "Cổng chính",
      camera: "Camera 6",
      duration: "3 phút 15 giây",
      status: "Đang xử lý",
      severity: "medium",
    },
    {
      id: "3",
      date: "11/04/2025",
      time: "15:30:45",
      location: "Khu vực kho hàng",
      camera: "Camera 5",
      duration: "8 phút 42 giây",
      status: "Chưa xử lý",
      severity: "high",
    },
    {
      id: "4",
      date: "11/04/2025",
      time: "14:20:33",
      location: "Khu vực sản xuất B",
      camera: "Camera 3",
      duration: "2 phút 10 giây",
      status: "Đã xử lý",
      severity: "low",
    },
    {
      id: "5",
      date: "10/04/2025",
      time: "16:55:21",
      location: "Cổng phụ",
      camera: "Camera 7",
      duration: "4 phút 30 giây",
      status: "Chưa xử lý",
      severity: "medium",
    },
  ]

return (
    <div className="flex flex-col h-full">
      <DashboardHeader title="Sự kiện lãng vãng" description="Danh sách các sự kiện lãng vãng được phát hiện" />
      <div className="p-6 space-y-6 flex-1 overflow-auto">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2 w-full max-w-sm">
            <div className="relative w-full">
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
              <Input type="search" placeholder="Tìm kiếm sự kiện..." className="pl-8 w-full" />
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="outline">
              <Filter className="h-4 w-4 mr-2" />
              Lọc
            </Button>
            <Button variant="outline">
              <Calendar className="h-4 w-4 mr-2" />
              Chọn ngày
            </Button>
          </div>
        </div>

<Card>
          <CardHeader>
            <CardTitle>Danh sách sự kiện lãng vãng</CardTitle>
            <CardDescription>Các sự kiện lãng vãng được phát hiện bởi hệ thống camera AI</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-2">
                <Select defaultValue="all">
                  <SelectTrigger className="w-[180px]">
                    <SelectValue placeholder="Mức độ nghiêm trọng" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Tất cả</SelectItem>
                    <SelectItem value="high">Cao</SelectItem>
                    <SelectItem value="medium">Trung bình</SelectItem>
                    <SelectItem value="low">Thấp</SelectItem>
                  </SelectContent>
                </Select>
                <Select defaultValue="all">
                  <SelectTrigger className="w-[180px]">
                    <SelectValue placeholder="Trạng thái" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Tất cả</SelectItem>
                    <SelectItem value="processed">Đã xử lý</SelectItem>
                    <SelectItem value="processing">Đang xử lý</SelectItem>
                    <SelectItem value="unprocessed">Chưa xử lý</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Ngày</TableHead>
                    <TableHead>Thời gian</TableHead>
                    <TableHead>Vị trí</TableHead>
                    <TableHead>Camera</TableHead>
                    <TableHead>Thời gian lãng vãng</TableHead>
                    <TableHead>Mức độ</TableHead>
                    <TableHead>Trạng thái</TableHead>
                    <TableHead className="w-[80px]"></TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {events.map((event) => (
                    <TableRow key={event.id}>
                      <TableCell>{event.date}</TableCell>
                      <TableCell>{event.time}</TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <MapPin className="h-4 w-4 text-blue-600" />
                          {event.location}
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <Camera className="h-4 w-4 text-blue-600" />
                          {event.camera}
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <Clock className="h-4 w-4 text-blue-600" />
                          {event.duration}
                        </div>
                      </TableCell>
                      <TableCell>
                        <Badge
                          variant="outline"
                          className={
                            event.severity === "high"
                              ? "bg-red-50 text-red-700"
                              : event.severity === "medium"
                                ? "bg-yellow-50 text-yellow-700"
                                : "bg-blue-50 text-blue-700"
                          }
                        >
                          {event.severity === "high" ? "Cao" : event.severity === "medium" ? "Trung bình" : "Thấp"}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <Badge
                          variant="outline"
                          className={
                            event.status === "Đã xử lý"
                              ? "bg-green-50 text-green-700"
                              : event.status === "Đang xử lý"
                                ? "bg-blue-50 text-blue-700"
                                : "bg-red-50 text-red-700"
                          }
                        >
                          {event.status}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" className="h-8 w-8 p-0" aria-label="Mở menu">
                              <MoreHorizontal className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuLabel>Hành động</DropdownMenuLabel>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem>Xem chi tiết</DropdownMenuItem>
                            <DropdownMenuItem>Xem video</DropdownMenuItem>
                            <DropdownMenuItem>Đánh dấu đã xử lý</DropdownMenuItem>
                            <DropdownMenuItem>Gửi thông báo</DropdownMenuItem>
                            <DropdownMenuItem className="text-red-600">Xóa</DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <Card>
            <CardHeader>
              <CardTitle>Thống kê sự kiện lãng vãng</CardTitle>
              <CardDescription>Phân tích theo thời gian và khu vực</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div>
                  <h4 className="text-sm font-medium mb-2">Theo khu vực</h4>
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <span className="text-sm">Khu vực sản xuất A</span>
                      <span className="text-sm font-medium">12</span>
                    </div>
                    <div className="h-2 w-full bg-gray-100 rounded-full">
                      <div className="h-2 rounded-full bg-red-500 w-[60%]"></div>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm">Cổng chính</span>
                      <span className="text-sm font-medium">8</span>
                    </div>
                    <div className="h-2 w-full bg-gray-100 rounded-full">
                      <div className="h-2 rounded-full bg-yellow-500 w-[40%]"></div>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm">Khu vực kho hàng</span>
                      <span className="text-sm font-medium">5</span>
                    </div>
                    <div className="h-2 w-full bg-gray-100 rounded-full">
                      <div className="h-2 rounded-full bg-blue-500 w-[25%]"></div>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Cảnh báo gần đây</CardTitle>
              <CardDescription>Các cảnh báo lãng vãng mới nhất</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {events.slice(0, 3).map((event) => (
                  <div key={event.id} className="flex items-start gap-4 p-3 rounded-lg border">
                    <div
                      className={`h-10 w-10 rounded-full flex items-center justify-center ${
                        event.severity === "high" ? "bg-red-100 text-red-600" : "bg-yellow-100 text-yellow-600"
                      }`}
                    >
                      <AlertTriangle className="h-5 w-5" />
                    </div>
                    <div className="flex-1">
                      <h4 className="text-sm font-medium">Phát hiện lãng vãng</h4>
                      <p className="text-xs text-muted-foreground">
                        {event.location} - {event.date} {event.time}
                      </p>
                      <p className="text-xs text-muted-foreground mt-1">Thời gian: {event.duration}</p>
                    </div>
                    <Button variant="outline" size="sm">
                      Xem
                    </Button>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/su-kien-an-ninh/lang-vang/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/su-kien-an-ninh/ra-vao-trai-phep/page.tsx" isMerged="true"
import { DashboardHeader } from "@/components/dashboard-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { MoreHorizontal, Search, Filter, Calendar, MapPin, Camera, AlertTriangle, User } from "lucide-react"

export default function UnauthorizedAccessEventsPage() {
  // Dữ liệu mẫu cho bảng sự kiện ra vào trái phép
  const events = [
    {
      id: "1",
      date: "12/04/2025",
      time: "10:25:36",
      location: "Cổng chính",
      camera: "Camera 6",
      person: "Không xác định",
      status: "Đã xử lý",
      severity: "high",
    },
    {
      id: "2",
      date: "12/04/2025",
      time: "09:45:12",
      location: "Khu vực sản xuất A",
      camera: "Camera 1",
      person: "Không xác định",
      status: "Đang xử lý",
      severity: "medium",
    },
    {
      id: "3",
      date: "11/04/2025",
      time: "15:30:45",
      location: "Khu vực kho hàng",
      camera: "Camera 5",
      person: "Nguyễn Văn A (Không có quyền)",
      status: "Chưa xử lý",
      severity: "high",
    },
    {
      id: "4",
      date: "11/04/2025",
      time: "14:20:33",
      location: "Khu vực sản xuất B",
      camera: "Camera 3",
      person: "Không xác định",
      status: "Đã xử lý",
      severity: "low",
    },
    {
      id: "5",
      date: "10/04/2025",
      time: "16:55:21",
      location: "Cổng phụ",
      camera: "Camera 7",
      person: "Trần Văn B (Không có quyền)",
      status: "Chưa xử lý",
      severity: "medium",
    },
  ]

return (
    <div className="flex flex-col h-full">
      <DashboardHeader
        title="Sự kiện ra vào trái phép"
        description="Danh sách các sự kiện ra vào trái phép được phát hiện"
      />
      <div className="p-6 space-y-6 flex-1 overflow-auto">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2 w-full max-w-sm">
            <div className="relative w-full">
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
              <Input type="search" placeholder="Tìm kiếm sự kiện..." className="pl-8 w-full" />
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="outline">
              <Filter className="h-4 w-4 mr-2" />
              Lọc
            </Button>
            <Button variant="outline">
              <Calendar className="h-4 w-4 mr-2" />
              Chọn ngày
            </Button>
          </div>
        </div>

<Card>
          <CardHeader>
            <CardTitle>Danh sách sự kiện ra vào trái phép</CardTitle>
            <CardDescription>Các sự kiện ra vào trái phép được phát hiện bởi hệ thống camera AI</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-2">
                <Select defaultValue="all">
                  <SelectTrigger className="w-[180px]">
                    <SelectValue placeholder="Mức độ nghiêm trọng" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Tất cả</SelectItem>
                    <SelectItem value="high">Cao</SelectItem>
                    <SelectItem value="medium">Trung bình</SelectItem>
                    <SelectItem value="low">Thấp</SelectItem>
                  </SelectContent>
                </Select>
                <Select defaultValue="all">
                  <SelectTrigger className="w-[180px]">
                    <SelectValue placeholder="Trạng thái" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Tất cả</SelectItem>
                    <SelectItem value="processed">Đã xử lý</SelectItem>
                    <SelectItem value="processing">Đang xử lý</SelectItem>
                    <SelectItem value="unprocessed">Chưa xử lý</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Ngày</TableHead>
                    <TableHead>Thời gian</TableHead>
                    <TableHead>Vị trí</TableHead>
                    <TableHead>Camera</TableHead>
                    <TableHead>Đối tượng</TableHead>
                    <TableHead>Mức độ</TableHead>
                    <TableHead>Trạng thái</TableHead>
                    <TableHead className="w-[80px]"></TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {events.map((event) => (
                    <TableRow key={event.id}>
                      <TableCell>{event.date}</TableCell>
                      <TableCell>{event.time}</TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <MapPin className="h-4 w-4 text-blue-600" />
                          {event.location}
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <Camera className="h-4 w-4 text-blue-600" />
                          {event.camera}
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <User className="h-4 w-4 text-blue-600" />
                          {event.person}
                        </div>
                      </TableCell>
                      <TableCell>
                        <Badge
                          variant="outline"
                          className={
                            event.severity === "high"
                              ? "bg-red-50 text-red-700"
                              : event.severity === "medium"
                                ? "bg-yellow-50 text-yellow-700"
                                : "bg-blue-50 text-blue-700"
                          }
                        >
                          {event.severity === "high" ? "Cao" : event.severity === "medium" ? "Trung bình" : "Thấp"}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <Badge
                          variant="outline"
                          className={
                            event.status === "Đã xử lý"
                              ? "bg-green-50 text-green-700"
                              : event.status === "Đang xử lý"
                                ? "bg-blue-50 text-blue-700"
                                : "bg-red-50 text-red-700"
                          }
                        >
                          {event.status}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" className="h-8 w-8 p-0" aria-label="Mở menu">
                              <MoreHorizontal className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuLabel>Hành động</DropdownMenuLabel>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem>Xem chi tiết</DropdownMenuItem>
                            <DropdownMenuItem>Xem video</DropdownMenuItem>
                            <DropdownMenuItem>Đánh dấu đã xử lý</DropdownMenuItem>
                            <DropdownMenuItem>Gửi thông báo</DropdownMenuItem>
                            <DropdownMenuItem className="text-red-600">Xóa</DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <Card>
            <CardHeader>
              <CardTitle>Thống kê sự kiện ra vào trái phép</CardTitle>
              <CardDescription>Phân tích theo thời gian và khu vực</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div>
                  <h4 className="text-sm font-medium mb-2">Theo khu vực</h4>
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <span className="text-sm">Cổng chính</span>
                      <span className="text-sm font-medium">15</span>
                    </div>
                    <div className="h-2 w-full bg-gray-100 rounded-full">
                      <div className="h-2 rounded-full bg-red-500 w-[75%]"></div>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm">Khu vực sản xuất A</span>
                      <span className="text-sm font-medium">8</span>
                    </div>
                    <div className="h-2 w-full bg-gray-100 rounded-full">
                      <div className="h-2 rounded-full bg-yellow-500 w-[40%]"></div>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm">Khu vực kho hàng</span>
                      <span className="text-sm font-medium">5</span>
                    </div>
                    <div className="h-2 w-full bg-gray-100 rounded-full">
                      <div className="h-2 rounded-full bg-blue-500 w-[25%]"></div>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Cảnh báo gần đây</CardTitle>
              <CardDescription>Các cảnh báo ra vào trái phép mới nhất</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {events.slice(0, 3).map((event) => (
                  <div key={event.id} className="flex items-start gap-4 p-3 rounded-lg border">
                    <div
                      className={`h-10 w-10 rounded-full flex items-center justify-center ${
                        event.severity === "high" ? "bg-red-100 text-red-600" : "bg-yellow-100 text-yellow-600"
                      }`}
                    >
                      <AlertTriangle className="h-5 w-5" />
                    </div>
                    <div className="flex-1">
                      <h4 className="text-sm font-medium">Ra vào trái phép</h4>
                      <p className="text-xs text-muted-foreground">
                        {event.location} - {event.date} {event.time}
                      </p>
                      <p className="text-xs text-muted-foreground mt-1">Đối tượng: {event.person}</p>
                    </div>
                    <Button variant="outline" size="sm">
                      Xem
                    </Button>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/su-kien-an-ninh/ra-vao-trai-phep/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/su-kien-an-ninh/xam-nhap/page.tsx" isMerged="true"
import { DashboardHeader } from "@/components/dashboard-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { MoreHorizontal, Search, Filter, Calendar, MapPin, Camera, User, Shield } from "lucide-react"

export default function IntrusionEventsPage() {
  // Dữ liệu mẫu cho bảng sự kiện xâm nhập
  const events = [
    {
      id: "1",
      date: "12/04/2025",
      time: "02:25:36",
      location: "Khu vực kho hàng",
      camera: "Camera 5",
      person: "Không xác định",
      status: "Đã xử lý",
      severity: "high",
    },
    {
      id: "2",
      date: "11/04/2025",
      time: "23:45:12",
      location: "Cổng phụ",
      camera: "Camera 7",
      person: "Không xác định",
      status: "Đang xử lý",
      severity: "high",
    },
    {
      id: "3",
      date: "10/04/2025",
      time: "01:30:45",
      location: "Khu vực sản xuất B",
      camera: "Camera 3",
      person: "Không xác định",
      status: "Chưa xử lý",
      severity: "high",
    },
    {
      id: "4",
      date: "09/04/2025",
      time: "22:20:33",
      location: "Khu vực sản xuất A",
      camera: "Camera 1",
      person: "Không xác định",
      status: "Đã xử lý",
      severity: "medium",
    },
    {
      id: "5",
      date: "08/04/2025",
      time: "03:55:21",
      location: "Cổng chính",
      camera: "Camera 6",
      person: "Không xác định",
      status: "Chưa xử lý",
      severity: "high",
    },
  ]

return (
    <div className="flex flex-col h-full">
      <DashboardHeader title="Sự kiện xâm nhập" description="Danh sách các sự kiện xâm nhập được phát hiện" />
      <div className="p-6 space-y-6 flex-1 overflow-auto">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2 w-full max-w-sm">
            <div className="relative w-full">
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
              <Input type="search" placeholder="Tìm kiếm sự kiện..." className="pl-8 w-full" />
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="outline">
              <Filter className="h-4 w-4 mr-2" />
              Lọc
            </Button>
            <Button variant="outline">
              <Calendar className="h-4 w-4 mr-2" />
              Chọn ngày
            </Button>
          </div>
        </div>

<Card>
          <CardHeader>
            <CardTitle>Danh sách sự kiện xâm nhập</CardTitle>
            <CardDescription>Các sự kiện xâm nhập được phát hiện bởi hệ thống camera AI</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-2">
                <Select defaultValue="all">
                  <SelectTrigger className="w-[180px]">
                    <SelectValue placeholder="Mức độ nghiêm trọng" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Tất cả</SelectItem>
                    <SelectItem value="high">Cao</SelectItem>
                    <SelectItem value="medium">Trung bình</SelectItem>
                    <SelectItem value="low">Thấp</SelectItem>
                  </SelectContent>
                </Select>
                <Select defaultValue="all">
                  <SelectTrigger className="w-[180px]">
                    <SelectValue placeholder="Trạng thái" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Tất cả</SelectItem>
                    <SelectItem value="processed">Đã xử lý</SelectItem>
                    <SelectItem value="processing">Đang xử lý</SelectItem>
                    <SelectItem value="unprocessed">Chưa xử lý</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Ngày</TableHead>
                    <TableHead>Thời gian</TableHead>
                    <TableHead>Vị trí</TableHead>
                    <TableHead>Camera</TableHead>
                    <TableHead>Đối tượng</TableHead>
                    <TableHead>Mức độ</TableHead>
                    <TableHead>Trạng thái</TableHead>
                    <TableHead className="w-[80px]"></TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {events.map((event) => (
                    <TableRow key={event.id}>
                      <TableCell>{event.date}</TableCell>
                      <TableCell>{event.time}</TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <MapPin className="h-4 w-4 text-blue-600" />
                          {event.location}
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <Camera className="h-4 w-4 text-blue-600" />
                          {event.camera}
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <User className="h-4 w-4 text-blue-600" />
                          {event.person}
                        </div>
                      </TableCell>
                      <TableCell>
                        <Badge
                          variant="outline"
                          className={
                            event.severity === "high"
                              ? "bg-red-50 text-red-700"
                              : event.severity === "medium"
                                ? "bg-yellow-50 text-yellow-700"
                                : "bg-blue-50 text-blue-700"
                          }
                        >
                          {event.severity === "high" ? "Cao" : event.severity === "medium" ? "Trung bình" : "Thấp"}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <Badge
                          variant="outline"
                          className={
                            event.status === "Đã xử lý"
                              ? "bg-green-50 text-green-700"
                              : event.status === "Đang xử lý"
                                ? "bg-blue-50 text-blue-700"
                                : "bg-red-50 text-red-700"
                          }
                        >
                          {event.status}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" className="h-8 w-8 p-0" aria-label="Mở menu">
                              <MoreHorizontal className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuLabel>Hành động</DropdownMenuLabel>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem>Xem chi tiết</DropdownMenuItem>
                            <DropdownMenuItem>Xem video</DropdownMenuItem>
                            <DropdownMenuItem>Đánh dấu đã xử lý</DropdownMenuItem>
                            <DropdownMenuItem>Gửi thông báo</DropdownMenuItem>
                            <DropdownMenuItem className="text-red-600">Xóa</DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <Card>
            <CardHeader>
              <CardTitle>Thống kê sự kiện xâm nhập</CardTitle>
              <CardDescription>Phân tích theo thời gian và khu vực</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div>
                  <h4 className="text-sm font-medium mb-2">Theo khu vực</h4>
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <span className="text-sm">Khu vực kho hàng</span>
                      <span className="text-sm font-medium">10</span>
                    </div>
                    <div className="h-2 w-full bg-gray-100 rounded-full">
                      <div className="h-2 rounded-full bg-red-500 w-[80%]"></div>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm">Cổng phụ</span>
                      <span className="text-sm font-medium">7</span>
                    </div>
                    <div className="h-2 w-full bg-gray-100 rounded-full">
                      <div className="h-2 rounded-full bg-red-500 w-[56%]"></div>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm">Khu vực sản xuất B</span>
                      <span className="text-sm font-medium">4</span>
                    </div>
                    <div className="h-2 w-full bg-gray-100 rounded-full">
                      <div className="h-2 rounded-full bg-yellow-500 w-[32%]"></div>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Cảnh báo gần đây</CardTitle>
              <CardDescription>Các cảnh báo xâm nhập mới nhất</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {events.slice(0, 3).map((event) => (
                  <div key={event.id} className="flex items-start gap-4 p-3 rounded-lg border">
                    <div className="h-10 w-10 rounded-full flex items-center justify-center bg-red-100 text-red-600">
                      <Shield className="h-5 w-5" />
                    </div>
                    <div className="flex-1">
                      <h4 className="text-sm font-medium">Phát hiện xâm nhập</h4>
                      <p className="text-xs text-muted-foreground">
                        {event.location} - {event.date} {event.time}
                      </p>
                      <p className="text-xs text-muted-foreground mt-1">Đối tượng: {event.person}</p>
                    </div>
                    <Button variant="outline" size="sm">
                      Xem
                    </Button>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/su-kien-an-ninh/xam-nhap/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
import { redirect } from "next/navigation"

export default function Home() {
  // Chuyển hướng từ trang chủ đến trang phân tích dữ liệu
  redirect("/tong-quan/phan-tich-du-lieu")
}
[V0_FILE]typescriptreact:file="app/giam-sat-vi-pham/loading.tsx" isEdit="true" isMerged="true"
import { DashboardHeader } from "@/components/dashboard-header"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function ViolationMonitoringLoading() {
  return (
    <div className="flex flex-col h-full">
      <DashboardHeader title="Giám sát vi phạm" description="Quản lý các vi phạm và hành vi bất thường" />
      <div className="p-6 space-y-6 flex-1 overflow-auto">
        <Tabs defaultValue="violations" className="w-full">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="violations" disabled>
              Vi phạm an toàn
            </TabsTrigger>
            <TabsTrigger value="behaviors" disabled>
              Hành vi bất thường
            </TabsTrigger>
          </TabsList>
        </Tabs>

<Card>
            <CardHeader>
              <Skeleton className="h-6 w-48" />
              <Skeleton className="h-4 w-64" />
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-start gap-4 p-3 rounded-lg border">
                  <Skeleton className="h-10 w-10 rounded-full" />
                  <div className="flex-1 space-y-2">
                    <Skeleton className="h-4 w-32" />
                    <Skeleton className="h-3 w-48" />
                  </div>
                  <Skeleton className="h-8 w-16" />
                </div>
                <div className="flex items-start gap-4 p-3 rounded-lg border">
                  <Skeleton className="h-10 w-10 rounded-full" />
                  <div className="flex-1 space-y-2">
                    <Skeleton className="h-4 w-32" />
                    <Skeleton className="h-3 w-48" />
                  </div>
                  <Skeleton className="h-8 w-16" />
                </div>
                <div className="flex items-start gap-4 p-3 rounded-lg border">
                  <Skeleton className="h-10 w-10 rounded-full" />
                  <div className="flex-1 space-y-2">
                    <Skeleton className="h-4 w-32" />
                    <Skeleton className="h-3 w-48" />
                  </div>
                  <Skeleton className="h-8 w-16" />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/giam-sat-an-ninh/loading.tsx" isEdit="true" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent } from "@/components/ui/card"

export default function Loading() {
  return (
    <div className="flex flex-col h-full">
      <div className="p-6 space-y-2">
        <Skeleton className="h-8 w-[300px]" />
        <Skeleton className="h-4 w-[250px]" />
      </div>
      <div className="p-6 pt-0 space-y-8 flex-1">
        {/* Skeleton cho phần Danh sách sự kiện an ninh */}
        <div className="space-y-4">
          <div className="flex items-center justify-between mb-4">
            <Skeleton className="h-8 w-[250px]" />
            <Skeleton className="h-4 w-[200px]" />
          </div>

<Card>
            <CardContent className="p-4">
              <div className="flex items-center justify-between mb-4">
                <Skeleton className="h-10 w-[200px]" />
                <div className="flex gap-2">
                  <Skeleton className="h-9 w-24" />
                  <Skeleton className="h-9 w-28" />
                </div>
              </div>
              <div className="space-y-2">
                <Skeleton className="h-10 w-full" />
                {Array.from({ length: 6 }).map((_, i) => (
                  <Skeleton key={i} className="h-16 w-full" />
                ))}
              </div>
            </CardContent>
          </Card>
        </div>

{/* Skeleton cho phần Danh sách khu vực */}
        <div className="space-y-4">
          <div className="flex items-center justify-between mb-4">
            <Skeleton className="h-8 w-[200px]" />
            <Skeleton className="h-4 w-[250px]" />
          </div>

<Card>
            <CardContent className="p-4">
              <div className="flex items-center justify-end mb-4">
                <div className="flex gap-2">
                  <Skeleton className="h-9 w-[180px]" />
                  <Skeleton className="h-9 w-[180px]" />
                  <Skeleton className="h-9 w-9" />
                </div>
              </div>
              <div className="space-y-2">
                <Skeleton className="h-10 w-full" />
                {Array.from({ length: 4 }).map((_, i) => (
                  <Skeleton key={i} className="h-16 w-full" />
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/safety-compliance-chart.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts"

// Mô phỏng dữ liệu cho biểu đồ
const generateData = () => {
  return [
    {
      name: "Tuần 1",
      "Không đội mũ": 8,
      "Không đeo găng tay": 5,
      "Không mặc áo bảo hộ": 3,
      "Sử dụng điện thoại": 6,
      "Hút thuốc": 2,
      "Đánh nhau": 0,
    },
    {
      name: "Tuần 2",
      "Không đội mũ": 10,
      "Không đeo găng tay": 7,
      "Không mặc áo bảo hộ": 4,
      "Sử dụng điện thoại": 8,
      "Hút thuốc": 3,
      "Đánh nhau": 1,
    },
    {
      name: "Tuần 3",
      "Không đội mũ": 7,
      "Không đeo găng tay": 6,
      "Không mặc áo bảo hộ": 2,
      "Sử dụng điện thoại": 5,
      "Hút thuốc": 4,
      "Đánh nhau": 0,
    },
    {
      name: "Tuần 4",
      "Không đội mũ": 9,
      "Không đeo găng tay": 4,
      "Không mặc áo bảo hộ": 3,
      "Sử dụng điện thoại": 7,
      "Hút thuốc": 2,
      "Đánh nhau": 1,
    },
    {
      name: "Tuần 5",
      "Không đội mũ": 6,
      "Không đeo găng tay": 3,
      "Không mặc áo bảo hộ": 2,
      "Sử dụng điện thoại": 4,
      "Hút thuốc": 1,
      "Đánh nhau": 0,
    },
    {
      name: "Tuần 6",
      "Không đội mũ": 8,
      "Không đeo găng tay": 5,
      "Không mặc áo bảo hộ": 1,
      "Sử dụng điện thoại": 3,
      "Hút thuốc": 2,
      "Đánh nhau": 0,
    },
  ]
}

export function SafetyComplianceChart() {
  const [data, setData] = useState<any[]>([])

useEffect(() => {
    setData(generateData())
  }, [])

return (
    <div className="h-[300px] w-full">
      <ResponsiveContainer width="100%" height="100%">
        <BarChart
          data={data}
          margin={{
            top: 20,
            right: 30,
            left: 20,
            bottom: 5,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
          <XAxis dataKey="name" stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
          <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
          <Tooltip />
          <Legend />
          {/* Vi phạm PPE */}
          <Bar dataKey="Không đội mũ" fill="#ef4444" radius={[4, 4, 0, 0]} />
          <Bar dataKey="Không đeo găng tay" fill="#f97316" radius={[4, 4, 0, 0]} />
          <Bar dataKey="Không mặc áo bảo hộ" fill="#eab308" radius={[4, 4, 0, 0]} />
          {/* Hành vi vi phạm */}
          <Bar dataKey="Sử dụng điện thoại" fill="#3b82f6" radius={[4, 4, 0, 0]} />
          <Bar dataKey="Hút thuốc" fill="#8b5cf6" radius={[4, 4, 0, 0]} />
          <Bar dataKey="Đánh nhau" fill="#ec4899" radius={[4, 4, 0, 0]} />
        </BarChart>
      </ResponsiveContainer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/time-compliance-chart.tsx" isMerged="true"
"use client"

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts"

const data = [
  {
    week: "Tuần 1",
    diTre: 14,
    veSom: 8,
  },
  {
    week: "Tuần 2",
    diTre: 12,
    veSom: 7,
  },
  {
    week: "Tuần 3",
    diTre: 15,
    veSom: 9,
  },
  {
    week: "Tuần 4",
    diTre: 10,
    veSom: 5,
  },
  {
    week: "Tuần 5",
    diTre: 8,
    veSom: 4,
  },
]

const CustomTooltip = ({ active, payload, label }: any) => {
  if (active && payload && payload.length) {
    return (
      <div className="bg-white p-3 border rounded-md shadow-sm">
        <p className="font-medium text-sm">{label}</p>
        <p className="text-xs text-orange-600">
          Đi trễ: <span className="font-medium">{payload[0].value}%</span>
        </p>
        <p className="text-xs text-yellow-600">
          Về sớm: <span className="font-medium">{payload[1].value}%</span>
        </p>
      </div>
    )
  }

return null
}

export function TimeComplianceChart() {
  return (
    <ResponsiveContainer width="100%" height="100%">
      <LineChart
        data={data}
        margin={{
          top: 5,
          right: 30,
          left: 20,
          bottom: 5,
        }}
      >
        <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
        <XAxis dataKey="week" tick={{ fontSize: 12 }} />
        <YAxis tickFormatter={(value) => `${value}%`} domain={[0, 20]} tick={{ fontSize: 12 }} />
        <Tooltip content={<CustomTooltip />} />
        <Legend wrapperStyle={{ fontSize: "12px" }} />
        <Line
          type="monotone"
          dataKey="diTre"
          name="Tỷ lệ đi trễ"
          stroke="#f97316"
          strokeWidth={2}
          dot={{ r: 4, strokeWidth: 2 }}
          activeDot={{ r: 6 }}
        />
        <Line
          type="monotone"
          dataKey="veSom"
          name="Tỷ lệ về sớm"
          stroke="#eab308"
          strokeWidth={2}
          dot={{ r: 4, strokeWidth: 2 }}
          activeDot={{ r: 6 }}
        />
      </LineChart>
    </ResponsiveContainer>
  )
}
[V0_FILE]typescriptreact:file="app/quan-ly-doi-tuong/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { DashboardHeader } from "@/components/dashboard-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Plus, MoreHorizontal, Search, Filter } from "lucide-react"

export default function ObjectManagementPage() {
  // Dữ liệu mẫu cho bảng
  const objects = [
    {
      id: "1",
      name: "Nguyễn Văn A",
      type: "Nhân viên",
      department: "Sản xuất",
      status: "Đang làm việc",
    },
    {
      id: "2",
      name: "Trần Thị B",
      type: "Nhân viên",
      department: "Kỹ thuật",
      status: "Đang làm việc",
    },
    {
      id: "3",
      name: "Lê Văn C",
      type: "Nhà thầu",
      department: "Bảo trì",
      status: "Đã rời đi",
    },
    {
      id: "4",
      name: "Phạm Thị D",
      type: "Khách",
      department: "N/A",
      status: "Đang tham quan",
    },
    {
      id: "5",
      name: "Hoàng Văn E",
      type: "Nhân viên",
      department: "Quản lý",
      status: "Đang làm việc",
    },
  ]

return (
    <div className="flex flex-col h-full">
      <DashboardHeader title="Quản lý đối tượng" description="Quản lý thông tin nhân viên, nhà thầu và khách" />
      <div className="p-6 space-y-6 flex-1 overflow-auto">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between">
            <div>
              <CardTitle>Danh sách đối tượng</CardTitle>
              <CardDescription>Quản lý tất cả đối tượng trong hệ thống</CardDescription>
            </div>
            <Button>
              <Plus className="h-4 w-4 mr-2" />
              Thêm đối tượng
            </Button>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-2 w-full max-w-sm">
                <div className="relative w-full">
                  <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                  <Input type="search" placeholder="Tìm kiếm đối tượng..." className="pl-8 w-full" />
                </div>
              </div>
              <div className="flex items-center gap-2">
                <Select defaultValue="all">
                  <SelectTrigger className="w-[180px]">
                    <SelectValue placeholder="Loại đối tượng" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Tất cả</SelectItem>
                    <SelectItem value="employee">Nhân viên</SelectItem>
                    <SelectItem value="contractor">Nhà thầu</SelectItem>
                    <SelectItem value="visitor">Khách</SelectItem>
                  </SelectContent>
                </Select>
                <Button variant="outline" size="icon">
                  <Filter className="h-4 w-4" />
                </Button>
              </div>
            </div>
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Tên</TableHead>
                    <TableHead>Loại</TableHead>
                    <TableHead>Bộ phận</TableHead>
                    <TableHead>Trạng thái</TableHead>
                    <TableHead className="w-[80px]"></TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {objects.map((object) => (
                    <TableRow key={object.id}>
                      <TableCell className="font-medium">{object.name}</TableCell>
                      <TableCell>{object.type}</TableCell>
                      <TableCell>{object.department}</TableCell>
                      <TableCell>
                        <div
                          className={`px-2 py-1 rounded-full text-xs inline-block font-medium ${
                            object.status === "Đang làm việc"
                              ? "bg-green-100 text-green-700"
                              : object.status === "Đã rời đi"
                                ? "bg-gray-100 text-gray-700"
                                : "bg-blue-100 text-blue-700"
                          }`}
                        >
                          {object.status}
                        </div>
                      </TableCell>
                      <TableCell>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" className="h-8 w-8 p-0" aria-label="Mở menu">
                              <MoreHorizontal className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuLabel>Hành động</DropdownMenuLabel>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem>Xem chi tiết</DropdownMenuItem>
                            <DropdownMenuItem>Chỉnh sửa</DropdownMenuItem>
                            <DropdownMenuItem className="text-red-600">Xóa</DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/giam-sat-an-ninh/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { DashboardHeader } from "@/components/dashboard-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Plus, MoreHorizontal, Search, Filter, Clock, AlertTriangle, Camera, MapPin } from "lucide-react"

export default function SecurityMonitoringPage() {
  // Dữ liệu mẫu cho bảng sự kiện an ninh
  const securityEvents = [
    {
      id: "1",
      time: "12/04/2025 10:25",
      location: "Khu vực kho hàng",
      event: "Phát hiện người lạ",
      object: "Không xác định",
      status: "Đang xử lý",
    },
    {
      id: "2",
      time: "12/04/2025 09:15",
      location: "Cổng phụ",
      event: "Ra vào ngoài giờ",
      object: "Không xác định",
      status: "Đã xử lý",
    },
    {
      id: "3",
      time: "11/04/2025 15:30",
      location: "Khu vực sản xuất C",
      event: "Đi vào khu vực cấm",
      object: "Không xác định",
      status: "Đã xử lý",
    },
    {
      id: "4",
      time: "11/04/2025 14:20",
      location: "Khu vực kho hàng",
      event: "Phát hiện người lạ",
      object: "Không xác định",
      status: "Đã xử lý",
    },
    {
      id: "5",
      time: "10/04/2025 11:10",
      location: "Cổng chính",
      event: "Ra vào ngoài giờ",
      object: "Không xác định",
      status: "Đã xử lý",
    },
  ]

// Dữ liệu mẫu cho bảng khu vực giám sát
  const monitoringAreas = [
    {
      id: "1",
      name: "Khu vực kho hàng",
      cameras: "Camera 1, Camera 2",
      description: "Khu vực lưu trữ hàng hóa và vật tư",
    },
    {
      id: "2",
      name: "Cổng chính",
      cameras: "Camera 3",
      description: "Lối ra vào chính của nhà máy",
    },
    {
      id: "3",
      name: "Cổng phụ",
      cameras: "Camera 4",
      description: "Lối ra vào phụ phía sau nhà máy",
    },
    {
      id: "4",
      name: "Khu vực sản xuất A",
      cameras: "Camera 5, Camera 6",
      description: "Khu vực sản xuất chính",
    },
    {
      id: "5",
      name: "Khu vực sản xuất B",
      cameras: "Camera 7",
      description: "Khu vực sản xuất phụ",
    },
  ]

return (
    <div className="flex flex-col h-full">
      <DashboardHeader title="Giám sát an ninh" description="Theo dõi và quản lý các sự kiện an ninh" />
      <div className="p-6 space-y-6 flex-1 overflow-auto">
        <Tabs defaultValue="events" className="w-full">
          <TabsList className="grid w-full max-w-md grid-cols-2">
            <TabsTrigger value="events">Sự kiện an ninh</TabsTrigger>
            <TabsTrigger value="areas">Khu vực giám sát</TabsTrigger>
          </TabsList>

<div className="mt-6">
            {/* Tab Sự kiện an ninh */}
            <TabsContent value="events">
              <Card>
                <CardHeader className="flex flex-row items-center justify-between">
                  <div>
                    <CardTitle>Danh sách sự kiện an ninh</CardTitle>
                    <CardDescription>Các sự kiện an ninh được phát hiện bởi hệ thống</CardDescription>
                  </div>
                  <Button>
                    <Plus className="h-4 w-4 mr-2" />
                    Thêm sự kiện
                  </Button>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center justify-between mb-4">
                    <div className="flex items-center gap-2 w-full max-w-sm">
                      <div className="relative w-full">
                        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                        <Input type="search" placeholder="Tìm kiếm sự kiện..." className="pl-8 w-full" />
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      <Select defaultValue="all">
                        <SelectTrigger className="w-[180px]">
                          <SelectValue placeholder="Loại sự kiện" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="all">Tất cả</SelectItem>
                          <SelectItem value="stranger">Phát hiện người lạ</SelectItem>
                          <SelectItem value="afterhours">Ra vào ngoài giờ</SelectItem>
                          <SelectItem value="restricted">Đi vào khu vực cấm</SelectItem>
                        </SelectContent>
                      </Select>
                      <Button variant="outline" size="icon">
                        <Filter className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                  <div className="rounded-md border">
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>Thời gian</TableHead>
                          <TableHead>Vị trí</TableHead>
                          <TableHead>Sự kiện</TableHead>
                          <TableHead>Đối tượng</TableHead>
                          <TableHead>Trạng thái</TableHead>
                          <TableHead className="w-[80px]"></TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {securityEvents.map((event) => (
                          <TableRow key={event.id}>
                            <TableCell>
                              <div className="flex items-center gap-2">
                                <Clock className="h-4 w-4 text-muted-foreground" />
                                <span>{event.time}</span>
                              </div>
                            </TableCell>
                            <TableCell>
                              <div className="flex items-center gap-2">
                                <MapPin className="h-4 w-4 text-muted-foreground" />
                                <span>{event.location}</span>
                              </div>
                            </TableCell>
                            <TableCell>
                              <div className="flex items-center gap-2">
                                <AlertTriangle className="h-4 w-4 text-orange-500" />
                                <span>{event.event}</span>
                              </div>
                            </TableCell>
                            <TableCell>Không xác định</TableCell>
                            <TableCell>
                              <Badge
                                variant="outline"
                                className={
                                  event.status === "Đang xử lý"
                                    ? "bg-yellow-50 text-yellow-700"
                                    : "bg-green-50 text-green-700"
                                }
                              >
                                {event.status}
                              </Badge>
                            </TableCell>
                            <TableCell>
                              <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                  <Button variant="ghost" className="h-8 w-8 p-0" aria-label="Mở menu">
                                    <MoreHorizontal className="h-4 w-4" />
                                  </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align="end">
                                  <DropdownMenuLabel>Hành động</DropdownMenuLabel>
                                  <DropdownMenuSeparator />
                                  <DropdownMenuItem>Xem chi tiết</DropdownMenuItem>
                                  <DropdownMenuItem>Đánh dấu đã xử lý</DropdownMenuItem>
                                  <DropdownMenuItem>Xem camera</DropdownMenuItem>
                                </DropdownMenuContent>
                              </DropdownMenu>
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

{/* Tab Khu vực giám sát */}
            <TabsContent value="areas">
              <Card>
                <CardHeader className="flex flex-row items-center justify-between">
                  <div>
                    <CardTitle>Danh sách khu vực giám sát</CardTitle>
                    <CardDescription>Các khu vực được giám sát bởi hệ thống camera</CardDescription>
                  </div>
                  <Button>
                    <Plus className="h-4 w-4 mr-2" />
                    Thêm khu vực
                  </Button>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center justify-between mb-4">
                    <div className="flex items-center gap-2 w-full max-w-sm">
                      <div className="relative w-full">
                        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                        <Input type="search" placeholder="Tìm kiếm khu vực..." className="pl-8 w-full" />
                      </div>
                    </div>
                    <Button variant="outline" size="icon">
                      <Filter className="h-4 w-4" />
                    </Button>
                  </div>
                  <div className="rounded-md border">
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>Tên khu vực</TableHead>
                          <TableHead>Camera</TableHead>
                          <TableHead>Mô tả</TableHead>
                          <TableHead className="w-[80px]"></TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {monitoringAreas.map((area) => (
                          <TableRow key={area.id}>
                            <TableCell className="font-medium">{area.name}</TableCell>
                            <TableCell>
                              <div className="flex items-center gap-2">
                                <Camera className="h-4 w-4 text-blue-500" />
                                <span>{area.cameras}</span>
                              </div>
                            </TableCell>
                            <TableCell>{area.description}</TableCell>
                            <TableCell>
                              <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                  <Button variant="ghost" className="h-8 w-8 p-0" aria-label="Mở menu">
                                    <MoreHorizontal className="h-4 w-4" />
                                  </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align="end">
                                  <DropdownMenuLabel>Hành động</DropdownMenuLabel>
                                  <DropdownMenuSeparator />
                                  <DropdownMenuItem>Xem chi tiết</DropdownMenuItem>
                                  <DropdownMenuItem>Chỉnh sửa</DropdownMenuItem>
                                  <DropdownMenuItem>Xem camera</DropdownMenuItem>
                                  <DropdownMenuItem className="text-red-600">Xóa</DropdownMenuItem>
                                </DropdownMenuContent>
                              </DropdownMenu>
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </div>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/quan-ly-khu-vuc-bao-ho/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { DashboardHeader } from "@/components/dashboard-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"
import { HardHat, MoreHorizontal, Plus, Camera, CheckCircle } from "lucide-react"

export default function SafetyZonesPage() {
  // Dữ liệu mẫu cho bảng
  const zones = [
    {
      id: "1",
      name: "Khu vực sản xuất A",
      camera: "Camera 1, Camera 2",
      requiredEquipment: "Mũ bảo hiểm, Găng tay, Áo phản quang",
      violations: 12,
      lastViolation: "12/04/2025 10:25",
    },
    {
      id: "2",
      name: "Khu vực sản xuất B",
      camera: "Camera 3, Camera 4",
      requiredEquipment: "Mũ bảo hiểm, Găng tay, Kính bảo hộ",
      violations: 8,
      lastViolation: "11/04/2025 15:30",
    },
    {
      id: "3",
      name: "Khu vực kho hàng",
      camera: "Camera 5",
      requiredEquipment: "Mũ bảo hiểm, Áo phản quang",
      violations: 5,
      lastViolation: "10/04/2025 09:15",
    },
    {
      id: "4",
      name: "Khu vực xây dựng",
      camera: "Camera 6, Camera 7",
      requiredEquipment: "Mũ bảo hiểm, Găng tay, Áo phản quang, Giày bảo hộ",
      violations: 15,
      lastViolation: "09/04/2025 14:20",
    },
    {
      id: "5",
      name: "Khu vực hóa chất",
      camera: "Camera 8",
      requiredEquipment: "Mũ bảo hiểm, Găng tay, Kính bảo hộ, Mặt nạ",
      violations: 3,
      lastViolation: "08/04/2025 11:10",
    },
  ]

// Dữ liệu mẫu cho thiết bị bảo hộ
  const equipment = [
    {
      id: "1",
      name: "Mũ bảo hiểm",
      detectionAccuracy: "95%",
      zones: "Tất cả",
      status: "Đang giám sát",
    },
    {
      id: "2",
      name: "Găng tay",
      detectionAccuracy: "90%",
      zones: "Khu vực sản xuất A, Khu vực sản xuất B, Khu vực xây dựng, Khu vực hóa chất",
      status: "Đang giám sát",
    },
    {
      id: "3",
      name: "Áo phản quang",
      detectionAccuracy: "98%",
      zones: "Khu vực sản xuất A, Khu vực kho hàng, Khu vực xây dựng",
      status: "Đang giám sát",
    },
    {
      id: "4",
      name: "Kính bảo hộ",
      detectionAccuracy: "85%",
      zones: "Khu vực sản xuất B, Khu vực hóa chất",
      status: "Đang giám sát",
    },
    {
      id: "5",
      name: "Giày bảo hộ",
      detectionAccuracy: "80%",
      zones: "Khu vực xây dựng",
      status: "Tạm dừng",
    },
  ]

return (
    <div className="flex flex-col h-full">
      <DashboardHeader title="Quản lý khu vực bảo hộ" description="Quản lý các khu vực yêu cầu đồ bảo hộ lao động" />
      <div className="p-6 space-y-6 flex-1 overflow-auto">
        <div className="flex items-center justify-between">
          <h2 className="text-xl font-semibold">Khu vực yêu cầu bảo hộ</h2>
          <Button>
            <Plus className="h-4 w-4 mr-2" />
            Thêm khu vực
          </Button>
        </div>

<Card>
          <CardHeader>
            <CardTitle>Danh sách khu vực</CardTitle>
            <CardDescription>Quản lý các khu vực yêu cầu đồ bảo hộ lao động</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Tên khu vực</TableHead>
                    <TableHead>Camera</TableHead>
                    <TableHead>Thiết bị bảo hộ yêu cầu</TableHead>
                    <TableHead>Vi phạm</TableHead>
                    <TableHead>Vi phạm gần nhất</TableHead>
                    <TableHead className="w-[80px]"></TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {zones.map((zone) => (
                    <TableRow key={zone.id}>
                      <TableCell className="font-medium">{zone.name}</TableCell>
                      <TableCell>{zone.camera}</TableCell>
                      <TableCell>{zone.requiredEquipment}</TableCell>
                      <TableCell>{zone.violations}</TableCell>
                      <TableCell>{zone.lastViolation}</TableCell>
                      <TableCell>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" className="h-8 w-8 p-0" aria-label="Mở menu">
                              <MoreHorizontal className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuLabel>Hành động</DropdownMenuLabel>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem>Xem chi tiết</DropdownMenuItem>
                            <DropdownMenuItem>Chỉnh sửa</DropdownMenuItem>
                            <DropdownMenuItem>Xem camera</DropdownMenuItem>
                            <DropdownMenuItem className="text-red-600">Xóa</DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>

<div className="flex items-center justify-between mt-8">
          <h2 className="text-xl font-semibold">Thiết bị bảo hộ</h2>
          <Button>
            <Plus className="h-4 w-4 mr-2" />
            Thêm thiết bị
          </Button>
        </div>

<Card>
          <CardHeader>
            <CardTitle>Danh sách thiết bị bảo hộ</CardTitle>
            <CardDescription>Quản lý các thiết bị bảo hộ được giám sát</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Tên thiết bị</TableHead>
                    <TableHead>Độ chính xác nhận diện</TableHead>
                    <TableHead>Khu vực áp dụng</TableHead>
                    <TableHead>Trạng thái</TableHead>
                    <TableHead className="w-[100px]">Giám sát</TableHead>
                    <TableHead className="w-[80px]"></TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {equipment.map((item) => (
                    <TableRow key={item.id}>
                      <TableCell className="font-medium">
                        <div className="flex items-center gap-2">
                          <HardHat className="h-5 w-5 text-blue-600" />
                          {item.name}
                        </div>
                      </TableCell>
                      <TableCell>{item.detectionAccuracy}</TableCell>
                      <TableCell>{item.zones}</TableCell>
                      <TableCell>
                        <Badge
                          variant="outline"
                          className={
                            item.status === "Đang giám sát" ? "bg-green-50 text-green-700" : "bg-gray-50 text-gray-700"
                          }
                        >
                          {item.status}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <Switch checked={item.status === "Đang giám sát"} aria-label="Toggle monitoring" />
                      </TableCell>
                      <TableCell>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" className="h-8 w-8 p-0" aria-label="Mở menu">
                              <MoreHorizontal className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuLabel>Hành động</DropdownMenuLabel>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem>Xem chi tiết</DropdownMenuItem>
                            <DropdownMenuItem>Chỉnh sửa</DropdownMenuItem>
                            <DropdownMenuItem>Cấu hình nhận diện</DropdownMenuItem>
                            <DropdownMenuItem className="text-red-600">Xóa</DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
          <Card>
            <CardHeader>
              <CardTitle>Thống kê vi phạm theo khu vực</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {zones.map((zone) => (
                  <div key={zone.id} className="space-y-2">
                    <div className="flex items-center justify-between">
                      <span className="text-sm">{zone.name}</span>
                      <span className="text-sm font-medium">{zone.violations}</span>
                    </div>
                    <div className="h-2 w-full bg-gray-100 rounded-full">
                      <div
                        className="h-2 bg-blue-500 rounded-full"
                        style={{
                          width: `${(zone.violations / 15) * 100}%`,
                        }}
                      ></div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Camera được cấu hình</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center gap-4 p-3 rounded-lg border">
                  <div className="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
                    <Camera className="h-5 w-5" />
                  </div>
                  <div className="flex-1">
                    <h4 className="text-sm font-medium">Camera 1</h4>
                    <p className="text-xs text-muted-foreground">
                      Khu vực sản xuất A - Mũ bảo hiểm, Găng tay, Áo phản quang
                    </p>
                  </div>
                  <Badge variant="outline" className="bg-green-50 text-green-700">
                    <CheckCircle className="h-3 w-3 mr-1" />
                    Đang hoạt động
                  </Badge>
                </div>
                <div className="flex items-center gap-4 p-3 rounded-lg border">
                  <div className="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
                    <Camera className="h-5 w-5" />
                  </div>
                  <div className="flex-1">
                    <h4 className="text-sm font-medium">Camera 3</h4>
                    <p className="text-xs text-muted-foreground">
                      Khu vực sản xuất B - Mũ bảo hiểm, Găng tay, Kính bảo hộ
                    </p>
                  </div>
                  <Badge variant="outline" className="bg-green-50 text-green-700">
                    <CheckCircle className="h-3 w-3 mr-1" />
                    Đang hoạt động
                  </Badge>
                </div>
                <div className="flex items-center gap-4 p-3 rounded-lg border">
                  <div className="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
                    <Camera className="h-5 w-5" />
                  </div>
                  <div className="flex-1">
                    <h4 className="text-sm font-medium">Camera 5</h4>
                    <p className="text-xs text-muted-foreground">Khu vực kho hàng - Mũ bảo hiểm, Áo phản quang</p>
                  </div>
                  <Badge variant="outline" className="bg-green-50 text-green-700">
                    <CheckCircle className="h-3 w-3 mr-1" />
                    Đang hoạt động
                  </Badge>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]plaintext:file="public/factory-floor-moment.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/factory-floor-moment-CX68OnZmpVEHbqi6EnFvW40QBKDmCQ.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/tong-quan/phan-tich-du-lieu/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { Badge } from "@/components/ui/badge"
import {
  AlertTriangle,
  ArrowDown,
  ArrowUp,
  Clock,
  Download,
  HardHat,
  MapPin,
  Phone,
  Shield,
  CigaretteIcon as Smoking,
  Users,
  UserX,
  Calendar,
  CalendarDays,
  CalendarRange,
  Frown,
  TrendingUp,
  Activity,
  CalendarX,
  AlertCircle,
} from "lucide-react"
import { DashboardHeader } from "@/components/dashboard-header"
import { SafetyComplianceChart } from "@/components/safety-compliance-chart"
import { SecurityRiskChart } from "@/components/security-risk-chart"
import { TimeComplianceChart } from "@/components/time-compliance-chart"

export default function DataAnalysisPage() {
  return (
    <div className="flex flex-col h-full">
      <DashboardHeader title="Phân tích dữ liệu" description="Đánh giá xu hướng và đề xuất giải pháp" />
      <div className="p-6 space-y-6 flex-1 overflow-auto">
        <Tabs defaultValue="safety" className="w-full">
          <div className="flex items-center justify-between mb-4">
            <TabsList className="grid grid-cols-3 w-[600px]">
              <TabsTrigger value="safety">
                <HardHat className="h-4 w-4 mr-2" />
                Tuân Thủ An Toàn
              </TabsTrigger>
              <TabsTrigger value="discipline">
                <Users className="h-4 w-4 mr-2" />
                Đánh giá nhân sự
              </TabsTrigger>
              <TabsTrigger value="security">
                <Shield className="h-4 w-4 mr-2" />
                An Ninh Nhà Máy
              </TabsTrigger>
            </TabsList>
            <Button variant="outline">
              <Download className="h-4 w-4 mr-2" />
              Xuất báo cáo
            </Button>
          </div>

{/* Dashboard 1: Đánh Giá Tuân Thủ An Toàn Lao Động */}
          <TabsContent value="safety" className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <Card>
                <CardContent className="p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm font-medium text-muted-foreground mb-1">Tỷ lệ tuân thủ PPE</p>
                      <div className="flex items-baseline gap-2">
                        <h2 className="text-3xl font-bold">78%</h2>
                        <span className="text-xs font-medium text-green-500 flex items-center">
                          <ArrowUp className="h-3 w-3 mr-1" />
                          5%
                        </span>
                      </div>
                      <p className="text-xs text-muted-foreground mt-1">So với tháng trước</p>
                    </div>
                    <div className="h-12 w-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
                      <HardHat className="h-6 w-6" />
                    </div>
                  </div>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm font-medium text-muted-foreground mb-1">Hành vi vi phạm</p>
                      <div className="flex items-baseline gap-2">
                        <h2 className="text-3xl font-bold">18</h2>
                        <span className="text-xs font-medium text-red-500 flex items-center">
                          <ArrowUp className="h-3 w-3 mr-1" />
                          8%
                        </span>
                      </div>
                      <p className="text-xs text-muted-foreground mt-1">Tháng này</p>
                    </div>
                    <div className="h-12 w-12 bg-orange-100 rounded-full flex items-center justify-center text-orange-600">
                      <Frown className="h-6 w-6" />
                    </div>
                  </div>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm font-medium text-muted-foreground mb-1">Xu hướng tuân thủ</p>
                      <div className="flex items-baseline gap-2">
                        <h2 className="text-3xl font-bold text-green-600">↗</h2>
                        <span className="text-xs font-medium text-green-500 flex items-center">
                          <ArrowUp className="h-3 w-3 mr-1" />
                          3%
                        </span>
                      </div>
                      <p className="text-xs text-muted-foreground mt-1">Đang cải thiện</p>
                    </div>
                    <div className="h-12 w-12 bg-green-100 rounded-full flex items-center justify-center text-green-600">
                      <TrendingUp className="h-6 w-6" />
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>

<Card>
              <CardHeader className="pb-2">
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle>Thống kê vi phạm an toàn theo thời gian</CardTitle>
                    <CardDescription>Phân tích xu hướng vi phạm theo ngày/tuần/tháng</CardDescription>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Button variant="outline" size="sm">
                      <Calendar className="h-4 w-4 mr-2" />
                      Ngày
                    </Button>
                    <Button variant="outline" size="sm">
                      <CalendarDays className="h-4 w-4 mr-2" />
                      Tuần
                    </Button>
                    <Button variant="outline" size="sm" className="bg-blue-50">
                      <CalendarRange className="h-4 w-4 mr-2" />
                      Tháng
                    </Button>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <div className="pt-4">
                  <SafetyComplianceChart />
                </div>
              </CardContent>
            </Card>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle>Loại vi phạm phổ biến</CardTitle>
                  <CardDescription>Phân tích theo tần suất vi phạm</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="space-y-2">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <HardHat className="h-4 w-4 text-red-600" />
                          <span className="text-sm font-medium">Không đội mũ bảo hộ</span>
                        </div>
                        <span className="text-sm font-medium">15 vi phạm</span>
                      </div>
                      <Progress value={100} className="h-2" />
                    </div>
                    <div className="space-y-2">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <Phone className="h-4 w-4 text-orange-600" />
                          <span className="text-sm font-medium">Sử dụng điện thoại</span>
                        </div>
                        <span className="text-sm font-medium">12 vi phạm</span>
                      </div>
                      <Progress value={80} className="h-2" />
                    </div>
                    <div className="space-y-2">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <Smoking className="h-4 w-4 text-yellow-600" />
                          <span className="text-sm font-medium">Hút thuốc</span>
                        </div>
                        <span className="text-sm font-medium">8 vi phạm</span>
                      </div>
                      <Progress value={53} className="h-2" />
                    </div>
                    <div className="space-y-2">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <AlertTriangle className="h-4 w-4 text-blue-600" />
                          <span className="text-sm font-medium">Không mặc áo bảo hộ</span>
                        </div>
                        <span className="text-sm font-medium">6 vi phạm</span>
                      </div>
                      <Progress value={40} className="h-2" />
                    </div>
                    <div className="space-y-2">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <UserX className="h-4 w-4 text-purple-600" />
                          <span className="text-sm font-medium">Đánh nhau</span>
                        </div>
                        <span className="text-sm font-medium">2 vi phạm</span>
                      </div>
                      <Progress value={13} className="h-2" />
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Top 5 khu vực vi phạm nhiều nhất</CardTitle>
                  <CardDescription>Dựa trên số lượng vi phạm tháng này</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="space-y-2">
                      <div className="flex items-center justify-between">
                        <span className="text-sm font-medium">Khu vực sản xuất A</span>
                        <span className="text-sm font-medium">12 vi phạm</span>
                      </div>
                      <Progress value={100} className="h-2 bg-red-100">
                        <div className="h-full bg-red-600 rounded-sm" />
                      </Progress>
                    </div>
                    <div className="space-y-2">
                      <div className="flex items-center justify-between">
                        <span className="text-sm font-medium">Khu vực kho hàng</span>
                        <span className="text-sm font-medium">8 vi phạm</span>
                      </div>
                      <Progress value={67} className="h-2 bg-red-100">
                        <div className="h-full bg-red-600 rounded-sm" />
                      </Progress>
                    </div>
                    <div className="space-y-2">
                      <div className="flex items-center justify-between">
                        <span className="text-sm font-medium">Khu vực sản xuất B</span>
                        <span className="text-sm font-medium">6 vi phạm</span>
                      </div>
                      <Progress value={50} className="h-2 bg-red-100">
                        <div className="h-full bg-red-600 rounded-sm" />
                      </Progress>
                    </div>
                    <div className="space-y-2">
                      <div className="flex items-center justify-between">
                        <span className="text-sm font-medium">Khu vực bảo trì</span>
                        <span className="text-sm font-medium">4 vi phạm</span>
                      </div>
                      <Progress value={33} className="h-2 bg-red-100">
                        <div className="h-full bg-red-600 rounded-sm" />
                      </Progress>
                    </div>
                    <div className="space-y-2">
                      <div className="flex items-center justify-between">
                        <span className="text-sm font-medium">Khu vực văn phòng</span>
                        <span className="text-sm font-medium">2 vi phạm</span>
                      </div>
                      <Progress value={17} className="h-2 bg-red-100">
                        <div className="h-full bg-red-600 rounded-sm" />
                      </Progress>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>

<Card className="opacity-50">
              <CardHeader>
                <CardTitle>Đề xuất hành động</CardTitle>
                <CardDescription>Các biện pháp cải thiện tuân thủ an toàn lao động</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex flex-col items-center justify-center py-8 text-center">
                  <AlertCircle className="h-12 w-12 text-muted-foreground mb-4" />
                  <h3 className="text-lg font-medium text-muted-foreground">Chưa có hoạt động</h3>
                  <p className="text-sm text-muted-foreground mt-1">Truy cập lại sau khi có dữ liệu</p>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

{/* Dashboard 2: Đánh Giá Nhân Sự */}
          <TabsContent value="discipline" className="space-y-6">
            {/* Nested Tabs for Personnel Evaluation Dashboards */}
            <Tabs defaultValue="time-compliance" className="w-full">
              <div className="flex items-center justify-between mb-4">
                <TabsList className="grid grid-cols-2 w-full">
                  <TabsTrigger value="time-compliance">
                    <Clock className="h-4 w-4 mr-2" />
                    Tuân Thủ Giờ Giấc
                  </TabsTrigger>
                  <TabsTrigger value="repeat-violations">
                    <CalendarX className="h-4 w-4 mr-2" />
                    Tái Phạm Vi Phạm
                  </TabsTrigger>
                </TabsList>
              </div>

{/* Dashboard 1: Kỷ Luật & Tuân Thủ Giờ Giấc */}
              <TabsContent value="time-compliance" className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <Card>
                    <CardContent className="p-6">
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="text-sm font-medium text-muted-foreground mb-1">Tỷ lệ đúng giờ</p>
                          <div className="flex items-baseline gap-2">
                            <h2 className="text-3xl font-bold">82%</h2>
                            <span className="text-xs font-medium text-green-500 flex items-center">
                              <ArrowUp className="h-3 w-3 mr-1" />
                              3%
                            </span>
                          </div>
                          <p className="text-xs text-muted-foreground mt-1">So với tháng trước</p>
                        </div>
                        <div className="h-12 w-12 bg-green-100 rounded-full flex items-center justify-center text-green-600">
                          <Clock className="h-6 w-6" />
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                  <Card>
                    <CardContent className="p-6">
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="text-sm font-medium text-muted-foreground mb-1">Tỷ lệ đi trễ</p>
                          <div className="flex items-baseline gap-2">
                            <h2 className="text-3xl font-bold">12%</h2>
                            <span className="text-xs font-medium text-red-500 flex items-center">
                              <ArrowDown className="h-3 w-3 mr-1" />
                              2%
                            </span>
                          </div>
                          <p className="text-xs text-muted-foreground mt-1">Tháng này</p>
                        </div>
                        <div className="h-12 w-12 bg-orange-100 rounded-full flex items-center justify-center text-orange-600">
                          <Clock className="h-6 w-6" />
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                  <Card>
                    <CardContent className="p-6">
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="text-sm font-medium text-muted-foreground mb-1">Tỷ lệ về sớm</p>
                          <div className="flex items-baseline gap-2">
                            <h2 className="text-3xl font-bold">6%</h2>
                            <span className="text-xs font-medium text-red-500 flex items-center">
                              <ArrowDown className="h-3 w-3 mr-1" />
                              1%
                            </span>
                          </div>
                          <p className="text-xs text-muted-foreground mt-1">Tháng này</p>
                        </div>
                        <div className="h-12 w-12 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600">
                          <Clock className="h-6 w-6" />
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>

<Card>
                  <CardHeader>
                    <div className="flex items-center justify-between">
                      <div>
                        <CardTitle>Xu hướng tuân thủ giờ giấc theo thời gian</CardTitle>
                        <CardDescription>Phân tích tỷ lệ đi trễ và về sớm theo tuần/tháng</CardDescription>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Button variant="outline" size="sm">
                          <Calendar className="h-4 w-4 mr-2" />
                          Ngày
                        </Button>
                        <Button variant="outline" size="sm" className="bg-blue-50">
                          <CalendarDays className="h-4 w-4 mr-2" />
                          Tuần
                        </Button>
                        <Button variant="outline" size="sm">
                          <CalendarRange className="h-4 w-4 mr-2" />
                          Tháng
                        </Button>
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent className="h-[300px]">
                    <TimeComplianceChart />
                  </CardContent>
                </Card>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <Card>
                    <CardHeader>
                      <CardTitle>Nhân viên vi phạm giờ giấc nhiều nhất</CardTitle>
                      <CardDescription>Top 5 nhân viên thường xuyên đi trễ/về sớm</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-4">
                        <div className="p-3 border rounded-lg">
                          <div className="flex items-center justify-between mb-1">
                            <div className="flex items-center gap-2">
                              <div className="h-8 w-8 bg-red-100 rounded-full flex items-center justify-center text-red-600">
                                <UserX className="h-4 w-4" />
                              </div>
                              <span className="text-sm font-medium">Nguyễn Văn A</span>
                            </div>
                            <Badge variant="outline" className="bg-red-50 text-red-700">
                              8 vi phạm
                            </Badge>
                          </div>
                          <p className="text-xs text-muted-foreground">Đi trễ (6), Về sớm (2)</p>
                        </div>
                        <div className="p-3 border rounded-lg">
                          <div className="flex items-center justify-between mb-1">
                            <div className="flex items-center gap-2">
                              <div className="h-8 w-8 bg-red-100 rounded-full flex items-center justify-center text-red-600">
                                <UserX className="h-4 w-4" />
                              </div>
                              <span className="text-sm font-medium">Trần Thị B</span>
                            </div>
                            <Badge variant="outline" className="bg-red-50 text-red-700">
                              6 vi phạm
                            </Badge>
                          </div>
                          <p className="text-xs text-muted-foreground">Đi trễ (4), Về sớm (2)</p>
                        </div>
                        <div className="p-3 border rounded-lg">
                          <div className="flex items-center justify-between mb-1">
                            <div className="flex items-center gap-2">
                              <div className="h-8 w-8 bg-red-100 rounded-full flex items-center justify-center text-red-600">
                                <UserX className="h-4 w-4" />
                              </div>
                              <span className="text-sm font-medium">Lê Văn C</span>
                            </div>
                            <Badge variant="outline" className="bg-red-50 text-red-700">
                              5 vi phạm
                            </Badge>
                          </div>
                          <p className="text-xs text-muted-foreground">Đi trễ (3), Về sớm (2)</p>
                        </div>
                      </div>
                    </CardContent>
                  </Card>

<Card className="opacity-50">
                  <CardHeader>
                    <CardTitle>Cảnh báo vi phạm nghiêm trọng</CardTitle>
                    <CardDescription>Nhân viên vi phạm nhiều lần trong tháng cần có biện pháp xử lý</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="flex flex-col items-center justify-center py-8 text-center">
                      <AlertCircle className="h-12 w-12 text-muted-foreground mb-4" />
                      <h3 className="text-lg font-medium text-muted-foreground">Chưa có hoạt động</h3>
                      <p className="text-sm text-muted-foreground mt-1">Truy cập lại sau khi có dữ liệu</p>
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>

{/* Dashboard 3: Tái Phạm Vi Phạm & Hành Vi Vi Phạm */}
              <TabsContent value="repeat-violations" className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <Card className="opacity-50">
                    <CardContent className="p-6">
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="text-sm font-medium text-muted-foreground mb-1">Tổng số nhân viên tái phạm</p>
                          <div className="flex items-baseline gap-2">
                            <h2 className="text-3xl font-bold">--</h2>
                          </div>
                          <p className="text-xs text-muted-foreground mt-1">Tháng này</p>
                        </div>
                        <div className="h-12 w-12 bg-red-100 rounded-full flex items-center justify-center text-red-600">
                          <UserX className="h-6 w-6" />
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                  <Card className="opacity-50">
                    <CardContent className="p-6">
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="text-sm font-medium text-muted-foreground mb-1">Tỷ lệ tái phạm</p>
                          <div className="flex items-baseline gap-2">
                            <h2 className="text-3xl font-bold">--</h2>
                          </div>
                          <p className="text-xs text-muted-foreground mt-1">So với tổng vi phạm</p>
                        </div>
                        <div className="h-12 w-12 bg-orange-100 rounded-full flex items-center justify-center text-orange-600">
                          <CalendarX className="h-6 w-6" />
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                  <Card className="opacity-50">
                    <CardContent className="p-6">
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="text-sm font-medium text-muted-foreground mb-1">Số lần vi phạm trung bình</p>
                          <div className="flex items-baseline gap-2">
                            <h2 className="text-3xl font-bold">--</h2>
                          </div>
                          <p className="text-xs text-muted-foreground mt-1">Mỗi nhân viên tái phạm</p>
                        </div>
                        <div className="h-12 w-12 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600">
                          <Activity className="h-6 w-6" />
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>

<Card className="opacity-50">
                  <CardHeader>
                    <CardTitle>Danh sách nhân viên tái phạm</CardTitle>
                    <CardDescription>Chi tiết các nhân viên vi phạm nhiều lần</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="flex flex-col items-center justify-center py-8 text-center">
                      <AlertCircle className="h-12 w-12 text-muted-foreground mb-4" />
                      <h3 className="text-lg font-medium text-muted-foreground">Chưa có hoạt động</h3>
                      <p className="text-sm text-muted-foreground mt-1">Truy cập lại sau khi có dữ liệu</p>
                    </div>
                  </CardContent>
                </Card>

<Card className="opacity-50">
                  <CardHeader>
                    <CardTitle>Phân tích loại vi phạm tái phạm</CardTitle>
                    <CardDescription>Xu hướng vi phạm tái diễn phổ biến</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="flex flex-col items-center justify-center py-8 text-center">
                      <AlertCircle className="h-12 w-12 text-muted-foreground mb-4" />
                      <h3 className="text-lg font-medium text-muted-foreground">Chưa có hoạt động</h3>
                      <p className="text-sm text-muted-foreground mt-1">Truy cập lại sau khi có dữ liệu</p>
                    </div>
                  </CardContent>
                </Card>

<Card className="opacity-50">
                  <CardHeader>
                    <CardTitle>Tỷ lệ tái phạm theo thời gian</CardTitle>
                    <CardDescription>Xu hướng tái phạm theo các tháng</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="flex flex-col items-center justify-center py-8 text-center">
                      <AlertCircle className="h-12 w-12 text-muted-foreground mb-4" />
                      <h3 className="text-lg font-medium text-muted-foreground">Chưa có hoạt động</h3>
                      <p className="text-sm text-muted-foreground mt-1">Truy cập lại sau khi có dữ liệu</p>
                    </div>
                  </CardContent>
                </Card>

<Card className="opacity-50">
                  <CardHeader>
                    <CardTitle>Cảnh báo vi phạm tái diễn</CardTitle>
                    <CardDescription>Các trường hợp cần có biện pháp xử lý mạnh</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="flex flex-col items-center justify-center py-8 text-center">
                      <AlertCircle className="h-12 w-12 text-muted-foreground mb-4" />
                      <h3 className="text-lg font-medium text-muted-foreground">Chưa có hoạt động</h3>
                      <p className="text-sm text-muted-foreground mt-1">Truy cập lại sau khi có dữ liệu</p>
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>
            </Tabs>
          </TabsContent>

{/* Dashboard 3: Đánh Giá An Ninh Nhà Máy */}
          <TabsContent value="security" className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
              <Card>
                <CardContent className="p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm font-medium text-muted-foreground mb-1">Truy cập trái phép</p>
                      <div className="flex items-baseline gap-2">
                        <h2 className="text-3xl font-bold">8</h2>
                        <span className="text-xs font-medium text-red-500 flex items-center">
                          <ArrowUp className="h-3 w-3 mr-1" />3
                        </span>
                      </div>
                      <p className="text-xs text-muted-foreground mt-1">Tháng này</p>
                    </div>
                    <div className="h-12 w-12 bg-red-100 rounded-full flex items-center justify-center text-red-600">
                      <Shield className="h-6 w-6" />
                    </div>
                  </div>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm font-medium text-muted-foreground mb-1">Ra vào ngoài giờ</p>
                      <div className="flex items-baseline gap-2">
                        <h2 className="text-3xl font-bold">24</h2>
                        <span className="text-xs font-medium text-yellow-500 flex items-center">
                          <ArrowDown className="h-3 w-3 mr-1" />
                          5%
                        </span>
                      </div>
                      <p className="text-xs text-muted-foreground mt-1">Tháng này</p>
                    </div>
                    <div className="h-12 w-12 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600">
                      <Clock className="h-6 w-6" />
                    </div>
                  </div>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm font-medium text-muted-foreground mb-1">Khu vực rủi ro cao</p>
                      <div className="flex items-baseline gap-2">
                        <h2 className="text-3xl font-bold">5</h2>
                      </div>
                      <p className="text-xs text-muted-foreground mt-1">Cần giám sát chặt</p>
                    </div>
                    <div className="h-12 w-12 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600">
                      <MapPin className="h-6 w-6" />
                    </div>
                  </div>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm font-medium text-muted-foreground mb-1">Cảnh báo an ninh</p>
                      <div className="flex items-baseline gap-2">
                        <h2 className="text-3xl font-bold">85%</h2>
                        <span className="text-xs font-medium text-green-500 flex items-center">
                          <ArrowUp className="h-3 w-3 mr-1" />
                          10%
                        </span>
                      </div>
                      <p className="text-xs text-muted-foreground mt-1">Đã xử lý</p>
                    </div>
                    <div className="h-12 w-12 bg-green-100 rounded-full flex items-center justify-center text-green-600">
                      <Shield className="h-6 w-6" />
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <Card className="md:col-span-2">
                <CardHeader>
                  <CardTitle>Thống kê sự kiện an ninh theo thời gian</CardTitle>
                  <CardDescription>Phân tích xu hướng các sự cố an ninh</CardDescription>
                </CardHeader>
                <CardContent>
                  <SecurityRiskChart />
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Khu vực có nguy cơ cao</CardTitle>
                  <CardDescription>Dựa trên số lượng sự cố an ninh</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="space-y-2">
                      <div className="flex items-center justify-between">
                        <span className="text-sm font-medium">Khu vực kho hàng</span>
                        <span className="text-sm font-medium">12 sự cố</span>
                      </div>
                      <Progress value={100} className="h-2" />
                    </div>
                    <div className="space-y-2">
                      <div className="flex items-center justify-between">
                        <span className="text-sm font-medium">Cổng phụ</span>
                        <span className="text-sm font-medium">8 sự cố</span>
                      </div>
                      <Progress value={67} className="h-2" />
                    </div>
                    <div className="space-y-2">
                      <div className="flex items-center justify-between">
                        <span className="text-sm font-medium">Khu vực sản xuất C</span>
                        <span className="text-sm font-medium">5 sự cố</span>
                      </div>
                      <Progress value={42} className="h-2" />
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle>Tình trạng xử lý cảnh báo an ninh</CardTitle>
                  <CardDescription>Theo dõi tiến độ xử lý các cảnh báo</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="p-3 border rounded-lg">
                      <div className="flex items-center justify-between mb-1">
                        <div className="flex items-center gap-2">
                          <div className="h-8 w-8 bg-red-100 rounded-full flex items-center justify-center text-red-600">
                            <AlertTriangle className="h-4 w-4" />
                          </div>
                          <span className="text-sm font-medium">Phát hiện người lạ</span>
                        </div>
                        <Badge variant="outline" className="bg-green-50 text-green-700">
                          Đã xử lý: 6/8
                        </Badge>
                      </div>
                      <div className="mt-2">
                        <Progress value={75} className="h-2" />
                      </div>
                    </div>
                    <div className="p-3 border rounded-lg">
                      <div className="flex items-center justify-between mb-1">
                        <div className="flex items-center gap-2">
                          <div className="h-8 w-8 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600">
                            <Clock className="h-4 w-4" />
                          </div>
                          <span className="text-sm font-medium">Ra vào ngoài giờ</span>
                        </div>
                        <Badge variant="outline" className="bg-green-50 text-green-700">
                          Đã xử lý: 22/24
                        </Badge>
                      </div>
                      <div className="mt-2">
                        <Progress value={92} className="h-2" />
                      </div>
                    </div>
                    <div className="p-3 border rounded-lg">
                      <div className="flex items-center justify-between mb-1">
                        <div className="flex items-center gap-2">
                          <div className="h-8 w-8 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
                            <MapPin className="h-4 w-4" />
                          </div>
                          <span className="text-sm font-medium">Đi vào khu vực cấm</span>
                        </div>
                        <Badge variant="outline" className="bg-yellow-50 text-yellow-700">
                          Đã xử lý: 8/12
                        </Badge>
                      </div>
                      <div className="mt-2">
                        <Progress value={67} className="h-2" />
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card className="opacity-50">
                <CardHeader>
                  <CardTitle>Đề xuất hành động</CardTitle>
                  <CardDescription>Các biện pháp cải thiện an ninh nhà máy</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex flex-col items-center justify-center py-8 text-center">
                    <AlertCircle className="h-12 w-12 text-muted-foreground mb-4" />
                    <h3 className="text-lg font-medium text-muted-foreground">Chưa có hoạt động</h3>
                    <p className="text-sm text-muted-foreground mt-1">Truy cập lại sau khi có dữ liệu</p>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/sidebar.tsx" isEdit="true" isMerged="true"
"use client"

import * as React from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { useSidebar } from "./sidebar-provider"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  Users,
  Shield,
  Menu,
  Eye,
  UserPlus,
  HardHat,
  Bell,
  ChevronDown,
  ChevronRight,
  UsersRound,
  List,
  BarChart,
} from "lucide-react"

// Định nghĩa kiểu dữ liệu cho submenu
type SubMenuItem = {
  title: string
  href: string
  icon: React.ElementType
}

// Định nghĩa kiểu dữ liệu cho menu chính
type MenuItem = {
  title: string
  href?: string
  icon: React.ElementType
  submenu?: SubMenuItem[]
}

export function Sidebar() {
  const pathname = usePathname()
  const { isOpen, toggle } = useSidebar()

// State để theo dõi submenu nào đang mở
  const [openSubmenus, setOpenSubmenus] = React.useState<Record<string, boolean>>({})

// Hàm để toggle submenu
  const toggleSubmenu = (title: string) => {
    setOpenSubmenus((prev) => ({
      ...prev,
      [title]: !prev[title],
    }))
  }

// Danh sách menu và submenu
  const routes: MenuItem[] = [
    {
      title: "Tổng quan",
      icon: BarChart,
      submenu: [
        {
          title: "Phân tích dữ liệu",
          href: "/tong-quan/phan-tich-du-lieu",
          icon: BarChart,
        },
        {
          title: "Thông báo",
          href: "/thong-bao",
          icon: Bell,
        },
      ],
    },
    {
      title: "Quản lý đối tượng",
      icon: Users,
      submenu: [
        {
          title: "Danh sách đối tượng",
          href: "/quan-ly-doi-tuong",
          icon: List,
        },
        {
          title: "Thêm đối tượng",
          href: "/quan-ly-doi-tuong/them-moi",
          icon: UserPlus,
        },
        {
          title: "Quản lý nhóm",
          href: "/quan-ly-doi-tuong/nhom",
          icon: UsersRound,
        },
        {
          title: "Giám sát người ra vào",
          href: "/giam-sat-nguoi-ra-vao",
          icon: Eye,
        },
      ],
    },
    {
      title: "Giám sát an ninh",
      href: "/giam-sat-an-ninh",
      icon: Shield,
    },
    {
      title: "Giám sát an toàn lao động",
      href: "/giam-sat-an-toan-lao-dong",
      icon: HardHat,
    },
    {
      title: "Đăng xuất",
      href: "/dang-xuat",
      icon: () => (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          className="h-5 w-5"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 013-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
          />
        </svg>
      ),
    },
  ]

return (
    <div className={cn("h-screen bg-[#B01C1C] text-white transition-all duration-300", isOpen ? "w-64" : "w-16")}>
      {/* Đưa phần quản trị viên lên đầu */}
      <div className="p-4 border-b border-[#C13E3E]">
        {isOpen ? (
          <div className="flex flex-col items-center gap-2">
            <div className="h-16 w-16 rounded-full bg-white/20 flex items-center justify-center text-white font-medium">
              A
            </div>
            <div className="text-center">
              <p className="text-sm font-medium">Administrator</p>
              <p className="text-xs text-white/70">admin@example.com</p>
            </div>
          </div>
        ) : (
          <div className="flex justify-center">
            <div className="h-8 w-8 rounded-full bg-white/20 flex items-center justify-center text-white font-medium">
              A
            </div>
          </div>
        )}
      </div>

<div className="flex items-center justify-between p-4 border-b border-[#C13E3E]">
        {isOpen && (
          <Link href="/" className="flex items-center gap-2">
            <Shield className="h-6 w-6 text-white" />
            <span className="font-bold text-lg text-white">Hệ thống Camera AI</span>
          </Link>
        )}
        <Button
          variant="ghost"
          size="icon"
          onClick={toggle}
          className={cn("text-white hover:bg-[#C13E3E] hover:text-white", isOpen ? "" : "mx-auto")}
          aria-label="Toggle sidebar"
        >
          <Menu className="h-5 w-5" />
        </Button>
      </div>

<div className="py-2 overflow-y-auto h-[calc(100vh-12rem)]">
        <nav className="space-y-1 px-2">
          {routes.map((route) => (
            <div key={route.title} className="flex flex-col">
              {route.submenu ? (
                // Menu có submenu
                <>
                  <button
                    onClick={() => toggleSubmenu(route.title)}
                    className={cn(
                      "flex items-center justify-between gap-3 px-3 py-2 rounded-md text-sm transition-colors whitespace-nowrap",
                      pathname.startsWith(route.submenu[0].href?.split("/").slice(0, 2).join("/"))
                        ? "bg-[#C13E3E] text-white font-medium"
                        : "text-white hover:bg-[#C13E3E]",
                    )}
                  >
                    <div className="flex items-center gap-3">
                      <route.icon className="h-5 w-5 flex-shrink-0" />
                      {isOpen && <span>{route.title}</span>}
                    </div>
                    {isOpen &&
                      (openSubmenus[route.title] ? (
                        <ChevronDown className="h-4 w-4" />
                      ) : (
                        <ChevronRight className="h-4 w-4" />
                      ))}
                  </button>
                  {isOpen && openSubmenus[route.title] && (
                    <div className="ml-6 mt-1 space-y-1">
                      {route.submenu.map((subItem) => (
                        <Link
                          key={subItem.href}
                          href={subItem.href}
                          className={cn(
                            "flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors",
                            pathname === subItem.href
                              ? "bg-[#C13E3E] text-white font-medium"
                              : "text-white/80 hover:bg-[#C13E3E] hover:text-white",
                          )}
                        >
                          <subItem.icon className="h-4 w-4 flex-shrink-0" />
                          <span>{subItem.title}</span>
                        </Link>
                      ))}
                    </div>
                  )}
                </>
              ) : (
                // Menu không có submenu
                <Link
                  href={route.href || "#"}
                  className={cn(
                    "flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors whitespace-nowrap",
                    pathname === route.href || pathname.startsWith(`${route.href}/`)
                      ? "bg-[#C13E3E] text-white font-medium"
                      : "text-white hover:bg-[#C13E3E]",
                  )}
                >
                  <route.icon className="h-5 w-5 flex-shrink-0" />
                  {isOpen && <span>{route.title}</span>}
                </Link>
              )}
            </div>
          ))}
        </nav>
      </div>

{/* Khoảng trống ở cuối để đảm bảo scroll đến cuối */}
      <div className="h-4"></div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/giam-sat-bao-ho-lao-dong/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useRouter } from "next/navigation"
import { useEffect } from "react"

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

useEffect(() => {
    router.push("/giam-sat-an-toan-lao-dong")
  }, [router])

return (
    <div className="flex items-center justify-center h-screen">
      <p>Đang chuyển hướng...</p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/giam-sat-vi-pham/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useRouter } from "next/navigation"
import { useEffect } from "react"

export default function RedirectPage() {
  const router = useRouter()
  
  useEffect(() => {
    router.push("/giam-sat-an-toan-lao-dong?tab=giam-sat-vi-pham")
  }, [router])
  
  return (
    <div className="flex items-center justify-center h-screen">
      <p>Đang chuyển hướng...</p>
    </div>
  )
}
[V0_FILE]plaintext:file="public/mystical-forest-spirit.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mystical-forest-spirit-OwmJQxP0kLJ1XTWLWHt15UYnBzBzX4.png" isMerged="true"
[V0_FILE]plaintext:file="public/industrial-dawn.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/industrial-dawn-5mh4QzgyxQOhrkc0huKyHF7goKMPAk.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/giam-sat-an-toan-lao-dong/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/giam-sat-an-toan-lao-dong/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { useSearchParams, useRouter } from "next/navigation"
import { DashboardHeader } from "@/components/dashboard-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Activity,
  AlertTriangle,
  Ban,
  Calendar,
  Clock,
  Download,
  Eye,
  Filter,
  LineChart,
  MoreHorizontal,
  PieChart,
  Search,
  UserCheck,
  Send,
} from "lucide-react"

export default function SafetyMonitoringPage() {
  const searchParams = useSearchParams()
  const router = useRouter()
  const tabParam = searchParams.get("tab")
  const [activeTab, setActiveTab] = useState(tabParam || "bao-ho-lao-dong")

useEffect(() => {
    if (tabParam !== activeTab) {
      router.push(`/giam-sat-an-toan-lao-dong?tab=${activeTab}`)
    }
  }, [activeTab, router, tabParam])

const [isAnimating, setIsAnimating] = useState(false)

useEffect(() => {
    if (isAnimating) {
      const timer = setTimeout(() => {
        setIsAnimating(false)
      }, 300) // Match the duration of our transitions
      return () => clearTimeout(timer)
    }
  }, [isAnimating])

const handleTabChange = (tab) => {
    if (tab !== activeTab) {
      setIsAnimating(true)
      setActiveTab(tab)
    }
  }

// Dữ liệu mẫu cho bảng vi phạm
  const violations = [
    {
      id: "1",
      type: "Sử dụng điện thoại",
      person: "Nguyễn Văn A",
      employeeId: "NV001",
      department: "Sản xuất",
      time: "12/04/2025 10:25",
      location: "Khu vực sản xuất A - Camera 2",
      severity: "medium",
      status: "Chưa xử lý",
    },
    {
      id: "2",
      type: "Hút thuốc",
      person: "Trần Thị B",
      employeeId: "NV002",
      department: "Kỹ thuật",
      time: "12/04/2025 09:45",
      location: "Khu vực sản xuất B - Camera 1",
      severity: "high",
      status: "Đang xử lý",
    },
    {
      id: "3",
      type: "Đánh nhau",
      person: "Lê Văn C",
      employeeId: "NT001",
      department: "Bảo trì",
      time: "12/04/2025 08:30",
      location: "Khu vực xây dựng - Camera 4",
      severity: "high",
      status: "Chưa xử lý",
    },
    {
      id: "4",
      type: "Đùa giỡn",
      person: "Phạm Thị D",
      employeeId: "NV003",
      department: "Nhân sự",
      time: "12/04/2025 07:55",
      location: "Khu vực văn phòng - Camera 3",
      severity: "low",
      status: "Đã xử lý",
    },
    {
      id: "5",
      type: "Sử dụng điện thoại",
      person: "Hoàng Văn E",
      employeeId: "NV004",
      department: "Quản lý",
      time: "11/04/2025 15:30",
      location: "Khu vực sản xuất A - Camera 2",
      severity: "medium",
      status: "Đã xử lý",
    },
  ]

// Dữ liệu mẫu cho bảo hộ lao động
  const safetyEquipment = [
    {
      id: "1",
      type: "Không đeo mũ bảo hiểm",
      location: "Khu vực A - Camera 2",
      time: "10:25 - 12/04/2025",
      person: "Nguyễn Văn A",
      status: "Chưa xử lý",
      severity: "high",
    },
    {
      id: "2",
      type: "Không mặc áo phản quang",
      location: "Khu vực B - Camera 1",
      time: "09:45 - 12/04/2025",
      person: "Trần Thị B",
      status: "Đang xử lý",
      severity: "medium",
    },
    {
      id: "3",
      type: "Vào khu vực cấm",
      location: "Kho hàng - Camera 4",
      time: "14:30 - 11/04/2025",
      person: "Lê Văn C",
      status: "Đã xử lý",
      severity: "high",
    },
    {
      id: "4",
      type: "Hút thuốc trong khu vực cấm",
      location: "Khu vực sản xuất - Camera 3",
      time: "11:15 - 11/04/2025",
      person: "Phạm Thị D",
      status: "Đã xử lý",
      severity: "medium",
    },
    {
      id: "5",
      type: "Không đeo găng tay bảo hộ",
      location: "Khu vực sản xuất - Camera 5",
      time: "13:20 - 10/04/2025",
      person: "Hoàng Văn E",
      status: "Chưa xử lý",
      severity: "low",
    },
  ]

return (
    <div className="flex flex-col h-full">
      <DashboardHeader title="Giám sát an toàn lao động" description="Quản lý an toàn lao động và vi phạm" />
      <div className="p-6 space-y-6 flex-1 overflow-auto">
        <div className="bg-background border rounded-lg overflow-hidden relative">
          <div className="grid grid-cols-2 relative z-10">
            <button
              onClick={() => handleTabChange("bao-ho-lao-dong")}
              className={`py-3 px-6 text-center font-medium transition-all duration-300 ${
                activeTab === "bao-ho-lao-dong" ? "text-foreground" : "text-muted-foreground hover:text-foreground/80"
              }`}
            >
              Bảo hộ lao động
            </button>
            <button
              onClick={() => handleTabChange("giam-sat-vi-pham")}
              className={`py-3 px-6 text-center font-medium transition-all duration-300 ${
                activeTab === "giam-sat-vi-pham" ? "text-foreground" : "text-muted-foreground hover:text-foreground/80"
              }`}
            >
              Giám sát vi phạm
            </button>
          </div>
          <div
            className="absolute bottom-0 h-[3px] bg-primary transition-all duration-300 ease-in-out"
            style={{
              width: "50%",
              left: activeTab === "bao-ho-lao-dong" ? "0" : "50%",
            }}
          />
          <div
            className="absolute top-0 bottom-0 w-1/2 bg-white transition-all duration-300 ease-in-out"
            style={{
              left: activeTab === "bao-ho-lao-dong" ? "0" : "50%",
            }}
          />
        </div>

<div className="relative">
          <div
            className={`space-y-6 transition-all duration-300 ${
              activeTab === "bao-ho-lao-dong"
                ? "opacity-100 translate-x-0"
                : "opacity-0 absolute inset-0 -translate-x-4 pointer-events-none"
            }`}
          >
            <div className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                <Card>
                  <CardContent className="p-6">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-sm font-medium text-muted-foreground mb-1">Tổng số vi phạm</p>
                        <div className="flex items-baseline gap-2">
                          <h2 className="text-3xl font-bold">87</h2>
                          <span className="text-xs font-medium text-red-500">+12%</span>
                        </div>
                        <p className="text-xs text-muted-foreground mt-1">So với hôm qua</p>
                      </div>
                      <div className="h-12 w-12 bg-red-100 rounded-full flex items-center justify-center text-red-600">
                        <Activity className="h-6 w-6" />
                      </div>
                    </div>
                  </CardContent>
                </Card>
                <Card>
                  <CardContent className="p-6">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-sm font-medium text-muted-foreground mb-1">Chưa xử lý</p>
                        <div className="flex items-baseline gap-2">
                          <h2 className="text-3xl font-bold">32</h2>
                          <span className="text-xs font-medium text-red-500">+8%</span>
                        </div>
                        <p className="text-xs text-muted-foreground mt-1">Cần xử lý</p>
                      </div>
                      <div className="h-12 w-12 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600">
                        <AlertTriangle className="h-6 w-6" />
                      </div>
                    </div>
                  </CardContent>
                </Card>
                <Card>
                  <CardContent className="p-6">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-sm font-medium text-muted-foreground mb-1">Đang xử lý</p>
                        <div className="flex items-baseline gap-2">
                          <h2 className="text-3xl font-bold">15</h2>
                          <span className="text-xs font-medium text-green-500">-5%</span>
                        </div>
                        <p className="text-xs text-muted-foreground mt-1">Đang tiến hành</p>
                      </div>
                      <div className="h-12 w-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
                        <Clock className="h-6 w-6" />
                      </div>
                    </div>
                  </CardContent>
                </Card>
                <Card>
                  <CardContent className="p-6">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-sm font-medium text-muted-foreground mb-1">Đã xử lý</p>
                        <div className="flex items-baseline gap-2">
                          <h2 className="text-3xl font-bold">40</h2>
                          <span className="text-xs font-medium text-green-500">+15%</span>
                        </div>
                        <p className="text-xs text-muted-foreground mt-1">Hoàn thành</p>
                      </div>
                      <div className="h-12 w-12 bg-green-100 rounded-full flex items-center justify-center text-green-600">
                        <UserCheck className="h-6 w-6" />
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>

<Card>
                <CardHeader className="flex flex-row items-center justify-between">
                  <div>
                    <CardTitle>Danh sách vi phạm bảo hộ lao động</CardTitle>
                    <CardDescription>Quản lý tất cả vi phạm được phát hiện bởi hệ thống</CardDescription>
                  </div>
                  <Button variant="outline">
                    <Eye className="h-4 w-4 mr-2" />
                    Xem trực tiếp
                  </Button>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center justify-between mb-4">
                    <div className="flex items-center gap-2 w-full max-w-sm">
                      <div className="relative w-full">
                        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                        <Input type="search" placeholder="Tìm kiếm vi phạm..." className="pl-8 w-full" />
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      <Select defaultValue="all">
                        <SelectTrigger className="w-[180px]">
                          <SelectValue placeholder="Loại vi phạm" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="all">Tất cả</SelectItem>
                          <SelectItem value="safety">An toàn lao động</SelectItem>
                          <SelectItem value="security">An ninh</SelectItem>
                          <SelectItem value="behavior">Hành vi</SelectItem>
                        </SelectContent>
                      </Select>
                      <Button variant="outline" size="icon">
                        <Filter className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                  <div className="rounded-md border">
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>Loại vi phạm</TableHead>
                          <TableHead>Vị trí</TableHead>
                          <TableHead>Thời gian</TableHead>
                          <TableHead>Đối tượng</TableHead>
                          <TableHead>Trạng thái</TableHead>
                          <TableHead className="w-[80px]"></TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {safetyEquipment.map((violation) => (
                          <TableRow key={violation.id}>
                            <TableCell>
                              <div className="flex items-center gap-2">
                                <div
                                  className={`h-2 w-2 rounded-full ${
                                    violation.severity === "high"
                                      ? "bg-red-500"
                                      : violation.severity === "medium"
                                        ? "bg-yellow-500"
                                        : "bg-blue-500"
                                  }`}
                                />
                                <span>{violation.type}</span>
                              </div>
                            </TableCell>
                            <TableCell>{violation.location}</TableCell>
                            <TableCell>{violation.time}</TableCell>
                            <TableCell>{violation.person}</TableCell>
                            <TableCell>
                              <Badge
                                variant={
                                  violation.status === "Chưa xử lý"
                                    ? "destructive"
                                    : violation.status === "Đang xử lý"
                                      ? "default"
                                      : "outline"
                                }
                              >
                                {violation.status}
                              </Badge>
                            </TableCell>
                            <TableCell>
                              <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                  <Button variant="ghost" className="h-8 w-8 p-0" aria-label="Mở menu">
                                    <MoreHorizontal className="h-4 w-4" />
                                  </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align="end">
                                  <DropdownMenuLabel>Hành động</DropdownMenuLabel>
                                  <DropdownMenuSeparator />
                                  <DropdownMenuItem>Xem chi tiết</DropdownMenuItem>
                                  <DropdownMenuItem>Xác nhận vi phạm</DropdownMenuItem>
                                  <DropdownMenuItem>Bác bỏ vi phạm</DropdownMenuItem>
                                </DropdownMenuContent>
                              </DropdownMenu>
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </div>
                </CardContent>
              </Card>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <Card>
                  <CardHeader>
                    <CardTitle>Thống kê vi phạm</CardTitle>
                    <CardDescription>Phân tích vi phạm theo loại và thời gian</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div>
                        <h4 className="text-sm font-medium mb-2">Theo loại vi phạm</h4>
                        <div className="space-y-2">
                          <div className="flex items-center justify-between">
                            <span className="text-sm">Không đeo thiết bị bảo hộ</span>
                            <span className="text-sm font-medium">45%</span>
                          </div>
                          <div className="h-2 w-full bg-gray-100 rounded-full">
                            <div className="h-2 w-[45%] bg-red-500 rounded-full"></div>
                          </div>
                        </div>
                        <div className="space-y-2 mt-2">
                          <div className="flex items-center justify-between">
                            <span className="text-sm">Vào khu vực cấm</span>
                            <span className="text-sm font-medium">30%</span>
                          </div>
                          <div className="h-2 w-full bg-gray-100 rounded-full">
                            <div className="h-2 w-[30%] bg-yellow-500 rounded-full"></div>
                          </div>
                        </div>
                        <div className="space-y-2 mt-2">
                          <div className="flex items-center justify-between">
                            <span className="text-sm">Hành vi không an toàn</span>
                            <span className="text-sm font-medium">25%</span>
                          </div>
                          <div className="h-2 w-full bg-gray-100 rounded-full">
                            <div className="h-2 w-[25%] bg-blue-500 rounded-full"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle>Vi phạm gần đây</CardTitle>
                    <CardDescription>Các vi phạm được phát hiện gần đây nhất</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      {safetyEquipment.slice(0, 3).map((violation) => (
                        <div key={violation.id} className="flex items-start gap-4 p-3 rounded-lg border">
                          <div
                            className={`h-10 w-10 rounded-full flex items-center justify-center ${
                              violation.severity === "high"
                                ? "bg-red-100 text-red-600"
                                : violation.severity === "medium"
                                  ? "bg-yellow-100 text-yellow-600"
                                  : "bg-blue-100 text-blue-600"
                            }`}
                          >
                            <AlertTriangle className="h-5 w-5" />
                          </div>
                          <div className="flex-1">
                            <h4 className="text-sm font-semibold">{violation.type}</h4>
                            <p className="text-xs text-muted-foreground">
                              {violation.location} - {violation.time.split(" - ")[0]}
                            </p>
                          </div>
                          <Button variant="outline" size="sm">
                            Xem
                          </Button>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>

<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                <Card>
                  <CardContent className="p-6">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-sm font-medium text-muted-foreground mb-1">Tổng số vi phạm</p>
                        <div className="flex items-baseline gap-2">
                          <h2 className="text-3xl font-bold">87</h2>
                          <span className="text-xs font-medium text-red-500">+12%</span>
                        </div>
                        <p className="text-xs text-muted-foreground mt-1">So với hôm qua</p>
                      </div>
                      <div className="h-12 w-12 bg-red-100 rounded-full flex items-center justify-center text-red-600">
                        <Activity className="h-6 w-6" />
                      </div>
                    </div>
                  </CardContent>
                </Card>
                <Card>
                  <CardContent className="p-6">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-sm font-medium text-muted-foreground mb-1">Chưa xử lý</p>
                        <div className="flex items-baseline gap-2">
                          <h2 className="text-3xl font-bold">32</h2>
                          <span className="text-xs font-medium text-red-500">+8%</span>
                        </div>
                        <p className="text-xs text-muted-foreground mt-1">Cần xử lý</p>
                      </div>
                      <div className="h-12 w-12 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600">
                        <AlertTriangle className="h-6 w-6" />
                      </div>
                    </div>
                  </CardContent>
                </Card>
                <Card>
                  <CardContent className="p-6">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-sm font-medium text-muted-foreground mb-1">Đang xử lý</p>
                        <div className="flex items-baseline gap-2">
                          <h2 className="text-3xl font-bold">15</h2>
                          <span className="text-xs font-medium text-green-500">-5%</span>
                        </div>
                        <p className="text-xs text-muted-foreground mt-1">Đang tiến hành</p>
                      </div>
                      <div className="h-12 w-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
                        <Clock className="h-6 w-6" />
                      </div>
                    </div>
                  </CardContent>
                </Card>
                <Card>
                  <CardContent className="p-6">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-sm font-medium text-muted-foreground mb-1">Đã xử lý</p>
                        <div className="flex items-baseline gap-2">
                          <h2 className="text-3xl font-bold">40</h2>
                          <span className="text-xs font-medium text-green-500">+15%</span>
                        </div>
                        <p className="text-xs text-muted-foreground mt-1">Hoàn thành</p>
                      </div>
                      <div className="h-12 w-12 bg-green-100 rounded-full flex items-center justify-center text-green-600">
                        <UserCheck className="h-6 w-6" />
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>

<Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <div>
                      <CardTitle>Danh sách hành vi vi phạm</CardTitle>
                      <CardDescription>Danh sách các hành vi vi phạm được phát hiện</CardDescription>
                    </div>
                    <div className="flex items-center gap-2">
                      <Button variant="outline">
                        <Eye className="h-4 w-4 mr-2" />
                        Xem trực tiếp
                      </Button>
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center justify-between mb-4">
                    <div className="flex items-center gap-2 w-full max-w-sm">
                      <div className="relative w-full">
                        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                        <Input type="search" placeholder="Tìm kiếm..." className="pl-8 w-full" />
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      <Select defaultValue="all">
                        <SelectTrigger className="w-[180px]">
                          <SelectValue placeholder="Tất cả" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="all">Tất cả</SelectItem>
                          <SelectItem value="phone">Sử dụng điện thoại</SelectItem>
                          <SelectItem value="smoking">Hút thuốc</SelectItem>
                          <SelectItem value="fighting">Đánh nhau</SelectItem>
                          <SelectItem value="playing">Đùa giỡn</SelectItem>
                        </SelectContent>
                      </Select>
                      <Button variant="outline" size="icon">
                        <Filter className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                  <div className="rounded-md border">
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>Loại hành vi</TableHead>
                          <TableHead>Người vi phạm</TableHead>
                          <TableHead>Bộ phận</TableHead>
                          <TableHead>Thời gian</TableHead>
                          <TableHead>Vị trí</TableHead>
                          <TableHead>Mức độ</TableHead>
                          <TableHead>Trạng thái</TableHead>
                          <TableHead>Hành động</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {violations.map((violation) => (
                          <TableRow key={violation.id}>
                            <TableCell>
                              <div className="flex items-center gap-2">
                                <Ban className="h-4 w-4 text-red-600" />
                                {violation.type}
                              </div>
                            </TableCell>
                            <TableCell className="font-medium">{violation.person}</TableCell>
                            <TableCell>{violation.department}</TableCell>
                            <TableCell>{violation.time}</TableCell>
                            <TableCell>{violation.location}</TableCell>
                            <TableCell>
                              <Badge
                                variant="outline"
                                className={
                                  violation.severity === "high"
                                    ? "bg-red-50 text-red-700"
                                    : violation.severity === "medium"
                                      ? "bg-yellow-50 text-yellow-700"
                                      : "bg-blue-50 text-blue-700"
                                }
                              >
                                {violation.severity === "high"
                                  ? "Cao"
                                  : violation.severity === "medium"
                                    ? "Trung bình"
                                    : "Thấp"}
                              </Badge>
                            </TableCell>
                            <TableCell>
                              <Badge
                                variant="outline"
                                className={
                                  violation.status === "Chưa xử lý"
                                    ? "bg-red-50 text-red-700"
                                    : violation.status === "Đang xử lý"
                                      ? "bg-yellow-50 text-yellow-700"
                                      : "bg-green-50 text-green-700"
                                }
                              >
                                {violation.status}
                              </Badge>
                            </TableCell>
                            <TableCell>
                              <div className="flex items-center gap-2">
                                <Button variant="outline" size="sm" className="h-8 flex items-center gap-1">
                                  <Send className="h-3.5 w-3.5" />
                                  <span>Gửi Telegram</span>
                                </Button>
                                <DropdownMenu>
                                  <DropdownMenuTrigger asChild>
                                    <Button variant="ghost" className="h-8 w-8 p-0" aria-label="Mở menu">
                                      <MoreHorizontal className="h-4 w-4" />
                                    </Button>
                                  </DropdownMenuTrigger>
                                  <DropdownMenuContent align="end">
                                    <DropdownMenuLabel>Hành động</DropdownMenuLabel>
                                    <DropdownMenuSeparator />
                                    <DropdownMenuItem>Xem chi tiết</DropdownMenuItem>
                                    <DropdownMenuItem>Xem hình ảnh</DropdownMenuItem>
                                    <DropdownMenuItem>Xử lý vi phạm</DropdownMenuItem>
                                    <DropdownMenuItem>Đánh dấu đã xử lý</DropdownMenuItem>
                                  </DropdownMenuContent>
                                </DropdownMenu>
                              </div>
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </div>
                </CardContent>
              </Card>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <Card>
                  <CardHeader className="flex flex-row items-center justify-between">
                    <div>
                      <CardTitle>Thống kê theo loại hành vi</CardTitle>
                      <CardDescription>Phân bố các loại hành vi vi phạm</CardDescription>
                    </div>
                    <PieChart className="h-4 w-4 text-muted-foreground" />
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div className="space-y-2">
                        <div className="flex items-center justify-between">
                          <span className="text-sm">Sử dụng điện thoại</span>
                          <span className="text-sm font-medium">42 (48.3%)</span>
                        </div>
                        <div className="h-2 w-full bg-gray-100 rounded-full">
                          <div className="h-2 w-[48.3%] bg-blue-500 rounded-full"></div>
                        </div>
                      </div>
                      <div className="space-y-2">
                        <div className="flex items-center justify-between">
                          <span className="text-sm">Hút thuốc</span>
                          <span className="text-sm font-medium">25 (28.7%)</span>
                        </div>
                        <div className="h-2 w-full bg-gray-100 rounded-full">
                          <div className="h-2 w-[28.7%] bg-blue-500 rounded-full"></div>
                        </div>
                      </div>
                      <div className="space-y-2">
                        <div className="flex items-center justify-between">
                          <span className="text-sm">Đánh nhau</span>
                          <span className="text-sm font-medium">12 (13.8%)</span>
                        </div>
                        <div className="h-2 w-full bg-gray-100 rounded-full">
                          <div className="h-2 w-[13.8%] bg-blue-500 rounded-full"></div>
                        </div>
                      </div>
                      <div className="space-y-2">
                        <div className="flex items-center justify-between">
                          <span className="text-sm">Đùa giỡn</span>
                          <span className="text-sm font-medium">8 (9.2%)</span>
                        </div>
                        <div className="h-2 w-full bg-gray-100 rounded-full">
                          <div className="h-2 w-[9.2%] bg-blue-500 rounded-full"></div>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>

<Card>
                  <CardHeader className="flex flex-row items-center justify-between">
                    <div>
                      <CardTitle>Xu hướng vi phạm</CardTitle>
                      <CardDescription>Thống kê vi phạm theo thời gian</CardDescription>
                    </div>
                    <LineChart className="h-4 w-4 text-muted-foreground" />
                  </CardHeader>
                  <CardContent>
                    <div className="h-[200px] relative">
                      <div className="absolute inset-x-0 bottom-0 h-[1px] bg-border"></div>
                      <div className="absolute inset-y-0 left-0 w-[1px] bg-border"></div>
                      <div className="absolute bottom-0 left-0 right-0 h-[180px]">
                        <div className="relative h-full w-full">
                          {/* Đường xu hướng */}
                          <svg className="absolute inset-0" viewBox="0 0 100 100" preserveAspectRatio="none">
                            <path
                              d="M0,80 L10,75 L20,85 L30,70 L40,65 L50,60 L60,40 L70,45 L80,30 L90,35 L100,20"
                              fill="none"
                              stroke="#ef4444"
                              strokeWidth="2"
                            />
                            <path
                              d="M0,90 L10,85 L20,80 L30,85 L40,75 L50,70 L60,65 L70,60 L80,55 L90,50 L100,45"
                              fill="none"
                              stroke="#3b82f6"
                              strokeWidth="2"
                            />
                          </svg>
                        </div>
                      </div>
                      <div className="absolute bottom-[-20px] left-0 right-0 flex justify-between text-xs text-muted-foreground">
                        <span>T1</span>
                        <span>T2</span>
                        <span>T3</span>
                        <span>T4</span>
                        <span>T5</span>
                        <span>T6</span>
                      </div>
                    </div>
                    <div className="flex items-center justify-center gap-6 mt-8">
                      <div className="flex items-center gap-2">
                        <div className="h-3 w-3 bg-red-500 rounded-full"></div>
                        <span className="text-sm">Hành vi cấm</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <div className="h-3 w-3 bg-blue-500 rounded-full"></div>
                        <span className="text-sm">Sử dụng điện thoại</span>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}</article></body></html>