O T P Dashboard - Copy this React, Tailwind Component to your project

import-React,-{-useState-}-from-'react';-import-{-Card,-CardContent,-CardHeader,-CardTitle-}-from-"@/components/ui/card";-import-{-LineChart,-Line,-XAxis,-YAxis,-CartesianGrid,-Tooltip,-ResponsiveContainer,-PieChart,-Pie,-Cell-}-from-'recharts';-import-{-Check,-X,-AlertTriangle,-RefreshCcw,-Send,-Phone,-MessageSquare,-Users,-Clock-}-from-'lucide-react';-const-chartData-=-[-{-name:-'00:00',-value:-65-},-{-name:-'04:00',-value:-45-},-{-name:-'08:00',-value:-90-},-{-name:-'12:00',-value:-120-},-{-name:-'16:00',-value:-85-},-{-name:-'20:00',-value:-70-},-{-name:-'23:59',-value:-55-},-];-const-pieData-=-[-{-name:-'Đăng-nhập',-value:-45-},-{-name:-'Xác-thực-giao-dịch',-value:-30-},-{-name:-'Đăng-ký',-value:-15-},-{-name:-'Khác',-value:-10-},-];-const-COLORS-=-['#2563eb',-'#16a34a',-'#eab308',-'#64748b'];-const-OTPDashboard-=-()-=>-{-const-[activeTab,-setActiveTab]-=-useState('overview');-return-(-<div-className="min-h-screen-bg-gray-50-p-6">-{/*-Header-*/}-<div-className="mb-8-flex-justify-between-items-center">-<div>-<h1-className="text-2xl-font-bold-text-gray-900">OTP-Management-Dashboard</h1>-<p-className="text-gray-500">Quản-lý-và-giám-sát-hệ-thống-OTP-đa-kênh</p>-</div>-<div-className="flex-gap-4">-<button-className="px-4-py-2-bg-blue-600-text-white-rounded-lg-hover:bg-blue-700-flex-items-center-gap-2">-<RefreshCcw-className="w-4-h-4"-/>-Làm-mới-</button>-</div>-</div>-{/*-3x2-Grid-Container-*/}-<div-className="grid-grid-cols-2-gap-6">-{/*-Grid-Item-1:-Stats-Overview-*/}-<Card>-<CardHeader>-<CardTitle>Thống-kê-tổng-quan</CardTitle>-</CardHeader>-<CardContent>-<div-className="grid-grid-cols-2-gap-4">-<div-className="p-4-bg-white-rounded-lg-border">-<div-className="flex-items-center-justify-between">-<div>-<p-className="text-sm-font-medium-text-gray-500">Tổng-OTP-đã-gửi</p>-<h3-className="text-2xl-font-bold-text-gray-900-mt-1">124,892</h3>-</div>-<Send-className="w-8-h-8-text-blue-600"-/>-</div>-<div-className="mt-4-text-sm-text-green-600-flex-items-center-gap-1">-<Check-className="w-4-h-4"-/>-Tăng-12%-so-với-hôm-qua-</div>-</div>-<div-className="p-4-bg-white-rounded-lg-border">-<div-className="flex-items-center-justify-between">-<div>-<p-className="text-sm-font-medium-text-gray-500">Tỷ-lệ-thành-công</p>-<h3-className="text-2xl-font-bold-text-gray-900-mt-1">99.8%</h3>-</div>-<Check-className="w-8-h-8-text-green-600"-/>-</div>-<div-className="mt-4-text-sm-text-green-600-flex-items-center-gap-1">-<Check-className="w-4-h-4"-/>-Đạt-SLA-cam-kết-</div>-</div>-<div-className="p-4-bg-white-rounded-lg-border">-<div-className="flex-items-center-justify-between">-<div>-<p-className="text-sm-font-medium-text-gray-500">Thời-gian-phản-hồi</p>-<h3-className="text-2xl-font-bold-text-gray-900-mt-1">1.2s</h3>-</div>-<AlertTriangle-className="w-8-h-8-text-yellow-500"-/>-</div>-<div-className="mt-4-text-sm-text-yellow-600-flex-items-center-gap-1">-<AlertTriangle-className="w-4-h-4"-/>-Cao-hơn-bình-thường-</div>-</div>-<div-className="p-4-bg-white-rounded-lg-border">-<div-className="flex-items-center-justify-between">-<div>-<p-className="text-sm-font-medium-text-gray-500">Lỗi-hệ-thống</p>-<h3-className="text-2xl-font-bold-text-gray-900-mt-1">0.02%</h3>-</div>-<X-className="w-8-h-8-text-red-600"-/>-</div>-<div-className="mt-4-text-sm-text-red-600-flex-items-center-gap-1">-<X-className="w-4-h-4"-/>-3-lỗi-trong-24h-qua-</div>-</div>-</div>-</CardContent>-</Card>-{/*-Grid-Item-2:-Time-Chart-*/}-<Card>-<CardHeader>-<CardTitle>Lưu-lượng-OTP-theo-thời-gian</CardTitle>-</CardHeader>-<CardContent>-<div-className="h-64">-<ResponsiveContainer-width="100%"-height="100%">-<LineChart-data={chartData}>-<CartesianGrid-strokeDasharray="3-3"-/>-<XAxis-dataKey="name"-/>-<YAxis-/>-<Tooltip-/>-<Line-type="monotone"-dataKey="value"-stroke="#2563eb"-strokeWidth={2}-/>-</LineChart>-</ResponsiveContainer>-</div>-</CardContent>-</Card>-{/*-Grid-Item-3:-Channel-Distribution-*/}-<Card>-<CardHeader>-<CardTitle>Phân-bổ-theo-kênh</CardTitle>-</CardHeader>-<CardContent>-<div-className="space-y-6">-<div>-<div-className="flex-items-center-justify-between-mb-2">-<div-className="flex-items-center-gap-2">-<MessageSquare-className="w-4-h-4-text-blue-600"-/>-<span-className="text-sm-font-medium">SMS</span>-</div>-<span-className="text-sm-font-bold">65%</span>-</div>-<div-className="h-2-bg-gray-200-rounded-full">-<div-className="h-2-bg-blue-600-rounded-full"-style={{width:-'65%'}}></div>-</div>-</div>-<div>-<div-className="flex-items-center-justify-between-mb-2">-<div-className="flex-items-center-gap-2">-<Phone-className="w-4-h-4-text-green-600"-/>-<span-className="text-sm-font-medium">Voice-Call</span>-</div>-<span-className="text-sm-font-bold">20%</span>-</div>-<div-className="h-2-bg-gray-200-rounded-full">-<div-className="h-2-bg-green-600-rounded-full"-style={{width:-'20%'}}></div>-</div>-</div>-<div>-<div-className="flex-items-center-justify-between-mb-2">-<div-className="flex-items-center-gap-2">-<MessageSquare-className="w-4-h-4-text-purple-600"-/>-<span-className="text-sm-font-medium">Zalo</span>-</div>-<span-className="text-sm-font-bold">10%</span>-</div>-<div-className="h-2-bg-gray-200-rounded-full">-<div-className="h-2-bg-purple-600-rounded-full"-style={{width:-'10%'}}></div>-</div>-</div>-<div>-<div-className="flex-items-center-justify-between-mb-2">-<div-className="flex-items-center-gap-2">-<MessageSquare-className="w-4-h-4-text-green-700"-/>-<span-className="text-sm-font-medium">WhatsApp</span>-</div>-<span-className="text-sm-font-bold">5%</span>-</div>-<div-className="h-2-bg-gray-200-rounded-full">-<div-className="h-2-bg-green-700-rounded-full"-style={{width:-'5%'}}></div>-</div>-</div>-</div>-</CardContent>-</Card>-{/*-Grid-Item-4:-Recent-History-*/}-<Card>-<CardHeader>-<CardTitle>Lịch-sử-gửi-OTP-gần-đây</CardTitle>-</CardHeader>-<CardContent>-<div-className="overflow-x-auto">-<table-className="w-full">-<thead>-<tr-className="border-b">-<th-className="text-left-py-3-px-4">ID</th>-<th-className="text-left-py-3-px-4">Thời-gian</th>-<th-className="text-left-py-3-px-4">Kênh</th>-<th-className="text-left-py-3-px-4">Số-điện-thoại</th>-<th-className="text-left-py-3-px-4">Trạng-thái</th>-</tr>-</thead>-<tbody>-<tr-className="border-b">-<td-className="py-3-px-4">#123456</td>-<td-className="py-3-px-4">2024-03-12-15:30:22</td>-<td-className="py-3-px-4">SMS</td>-<td-className="py-3-px-4">+84-9xx-xxx-x789</td>-<td-className="py-3-px-4">-<span-className="px-2-py-1-bg-green-100-text-green-800-rounded-full-text-xs">Thành-công</span>-</td>-</tr>-<tr-className="border-b">-<td-className="py-3-px-4">#123455</td>-<td-className="py-3-px-4">2024-03-12-15:29:55</td>-<td-className="py-3-px-4">Voice</td>-<td-className="py-3-px-4">+84-9xx-xxx-x456</td>-<td-className="py-3-px-4">-<span-className="px-2-py-1-bg-yellow-100-text-yellow-800-rounded-full-text-xs">Đang-xử-lý</span>-</td>-</tr>-<tr>-<td-className="py-3-px-4">#123454</td>-<td-className="py-3-px-4">2024-03-12-15:28:30</td>-<td-className="py-3-px-4">Zalo</td>-<td-className="py-3-px-4">+84-9xx-xxx-x123</td>-<td-className="py-3-px-4">-<span-className="px-2-py-1-bg-red-100-text-red-800-rounded-full-text-xs">Thất-bại</span>-</td>-</tr>-</tbody>-</table>-</div>-</CardContent>-</Card>-{/*-Grid-Item-5:-Purpose-Distribution-(NEW)-*/}-<Card>-<CardHeader>-<CardTitle>Mục-đích-sử-dụng-OTP</CardTitle>-</CardHeader>-<CardContent>-<div-className="h-64">-<ResponsiveContainer-width="100%"-height="100%">-<PieChart>-<Pie-data={pieData}-cx="50%"-cy="50%"-innerRadius={60}-outerRadius={80}-fill="#8884d8"-paddingAngle={5}-dataKey="value"->-{pieData.map((entry,-index)-=>-(-<Cell-key={`cell-${index}`}-fill={COLORS[index-%-COLORS.length]}-/>-))}-</Pie>-<Tooltip-/>-</PieChart>-</ResponsiveContainer>-</div>-<div-className="mt-4-grid-grid-cols-2-gap-4">-{pieData.map((entry,-index)-=>-(-<div-key={entry.name}-className="flex-items-center-gap-2">-<div-className="w-3-h-3-rounded-full"-style={{-backgroundColor:-COLORS[index-%-COLORS.length]-}}-/>-<span-className="text-sm">{entry.name}:-{entry.value}%</span>-</div>-))}-</div>-</CardContent>-</Card>-{/*-Grid-Item-6:-Performance-Metrics-(NEW)-*/}-<Card>-<CardHeader>-<CardTitle>Hiệu-suất-hệ-thống</CardTitle>-</CardHeader>-<CardContent>-<div-className="space-y-6">-<div>-<div-className="flex-items-center-justify-between-mb-2">-<div-className="flex-items-center-gap-2">-<Clock-className="w-4-h-4-text-blue-600"-/>-<span-className="text-sm-font-medium">Thời-gian-xử-lý-trung-bình</span>-</div>-<span-className="text-sm-font-bold">0.8s</span>-</div>-<div-className="h-2-bg-gray-200-rounded-full">-<div-className="h-2-bg-blue-600-rounded-full"-style={{width:-'80%'}}></div>-</div>-</div>-<div>-<div>-<div-className="flex-items-center-justify-between-mb-2">-<div-className="flex-items-center-gap-2">-<Users-className="w-4-h-4-text-green-600"-/>-<span-className="text-sm-font-medium">Người-dùng-hoạt-động</span>-</div>-<span-className="text-sm-font-bold">1,258</span>-</div>-<div-className="h-2-bg-gray-200-rounded-full">-<div-className="h-2-bg-green-600-rounded-full"-style={{width:-'50%'}}></div>-</div>-</div>-<div>-<div-className="flex-items-center-justify-between-mb-2">-<div-className="flex-items-center-gap-2">-<AlertTriangle-className="w-4-h-4-text-yellow-500"-/>-<span-className="text-sm-font-medium">Cảnh-báo-an-ninh</span>-</div>-<span-className="text-sm-font-bold">5</span>-</div>-<div-className="h-2-bg-gray-200-rounded-full">-<div-className="h-2-bg-yellow-500-rounded-full"-style={{width:-'20%'}}></div>-</div>-</div>-</div>-</CardContent>-</Card>-</div>-</div>-);-};-export-default-OTPDashboard;-Show-it