revisi dashboard
This commit is contained in:
@@ -1,42 +1,59 @@
|
||||
import { Users, TrendingUp, AlertTriangle, Shield } from "lucide-react";
|
||||
import {
|
||||
Users,
|
||||
TrendingUp,
|
||||
AlertTriangle,
|
||||
Shield,
|
||||
Database,
|
||||
RefreshCw,
|
||||
FileText,
|
||||
Search,
|
||||
Bell,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
Clock,
|
||||
ArrowRight,
|
||||
Code,
|
||||
Stethoscope,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function Dashboard() {
|
||||
// Stats berdasarkan fitur project yang ada
|
||||
const stats = [
|
||||
{
|
||||
title: "Pasien Datang",
|
||||
title: "BPJS Sync Status",
|
||||
value: "18/25",
|
||||
change: "72% berhasil",
|
||||
changeColor: "text-green-600",
|
||||
icon: RefreshCw,
|
||||
color: "text-blue-600",
|
||||
subtitle: "Sync hari ini",
|
||||
},
|
||||
{
|
||||
title: "Medical Records",
|
||||
value: "89",
|
||||
change: "+12%",
|
||||
change: "+12 hari ini",
|
||||
changeColor: "text-green-600",
|
||||
icon: FileText,
|
||||
color: "text-green-600",
|
||||
subtitle: "Record tersinkron",
|
||||
},
|
||||
{
|
||||
title: "ICD Recommendations",
|
||||
value: "23",
|
||||
change: "87% confidence",
|
||||
changeColor: "text-blue-600",
|
||||
icon: Code,
|
||||
color: "text-purple-600",
|
||||
subtitle: "Generated today",
|
||||
},
|
||||
{
|
||||
title: "Active Users",
|
||||
value: "28/30",
|
||||
change: "24 login hari ini",
|
||||
changeColor: "text-green-600",
|
||||
icon: Users,
|
||||
color: "text-blue-600",
|
||||
subtitle: "Hari ini",
|
||||
},
|
||||
{
|
||||
title: "Potential Overclaim",
|
||||
value: "7",
|
||||
change: "+2",
|
||||
changeColor: "text-red-600",
|
||||
icon: AlertTriangle,
|
||||
color: "text-red-600",
|
||||
subtitle: "Perlu review",
|
||||
},
|
||||
{
|
||||
title: "Rata-rata Biaya",
|
||||
value: "Rp 2.8M",
|
||||
change: "+5.2%",
|
||||
changeColor: "text-orange-600",
|
||||
icon: TrendingUp,
|
||||
color: "text-orange-600",
|
||||
subtitle: "Per klaim",
|
||||
},
|
||||
{
|
||||
title: "Kode BPJS Aktif",
|
||||
value: "156",
|
||||
change: "8 kode baru",
|
||||
changeColor: "text-green-600",
|
||||
icon: Shield,
|
||||
color: "text-purple-600",
|
||||
subtitle: "Total kode",
|
||||
subtitle: "System users",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -46,14 +63,92 @@ export default function Dashboard() {
|
||||
{/* Welcome Section */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-2">
|
||||
Selamat Datang di Dashboard
|
||||
Dashboard ClaimGuard
|
||||
</h2>
|
||||
<p className="text-gray-600">
|
||||
Kelola sistem rumah sakit dengan efisien dan pantau semua aktivitas
|
||||
secara real-time.
|
||||
Monitor BPJS operations, medical records, ICD recommendations, dan
|
||||
sistem management secara real-time.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Alert/Warning Section */}
|
||||
<div className="bg-white rounded-lg shadow-sm border mb-6 p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900 flex items-center">
|
||||
<Bell className="h-5 w-5 text-red-500 mr-2" />
|
||||
Peringatan & Notifikasi
|
||||
</h3>
|
||||
<span className="text-sm text-gray-500">Real-time alerts</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<div className="flex items-center">
|
||||
<AlertTriangle className="h-4 w-4 text-red-600 mr-2" />
|
||||
<span className="text-sm font-medium text-red-900">
|
||||
Overclaim Detected
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-red-700 mt-1">
|
||||
7 kasus interval < 30 hari
|
||||
</p>
|
||||
<p className="text-xs text-red-600 mt-1">
|
||||
ICD: I10, E11, J18.9
|
||||
</p>
|
||||
</div>
|
||||
<button className="text-red-600 hover:text-red-800">
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-orange-50 border border-orange-200 rounded-lg p-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<div className="flex items-center">
|
||||
<Clock className="h-4 w-4 text-orange-600 mr-2" />
|
||||
<span className="text-sm font-medium text-orange-900">
|
||||
Inconsistent Visits
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-orange-700 mt-1">
|
||||
3 kontrol tidak konsisten
|
||||
</p>
|
||||
<p className="text-xs text-orange-600 mt-1">
|
||||
Tipe vs alasan tidak sesuai
|
||||
</p>
|
||||
</div>
|
||||
<button className="text-orange-600 hover:text-orange-800">
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<div className="flex items-center">
|
||||
<XCircle className="h-4 w-4 text-blue-600 mr-2" />
|
||||
<span className="text-sm font-medium text-blue-900">
|
||||
Sync Failures
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-blue-700 mt-1">
|
||||
5 BPJS sync gagal
|
||||
</p>
|
||||
<p className="text-xs text-blue-600 mt-1">
|
||||
Perlu retry manual
|
||||
</p>
|
||||
</div>
|
||||
<button className="text-blue-600 hover:text-blue-800">
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
{stats.map((stat, index) => (
|
||||
@@ -80,168 +175,293 @@ export default function Dashboard() {
|
||||
</div>
|
||||
|
||||
{/* Main Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Tren Biaya Kode Medis */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
||||
{/* BPJS Operations */}
|
||||
<div className="card p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900">
|
||||
Tren Biaya Kode Medis
|
||||
<h3 className="text-lg font-semibold text-gray-900 flex items-center">
|
||||
<Database className="h-5 w-5 text-blue-600 mr-2" />
|
||||
BPJS Operations
|
||||
</h3>
|
||||
<button className="text-sm text-primary hover:text-primary/80">
|
||||
Lihat Detail
|
||||
<button className="text-sm text-blue-600 hover:text-blue-800 flex items-center">
|
||||
Lihat Detail <ArrowRight className="h-4 w-4 ml-1" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
|
||||
<div>
|
||||
<div className="flex items-center space-x-2 mb-1">
|
||||
<RefreshCw className="h-4 w-4 text-blue-600" />
|
||||
<span className="text-sm font-medium text-blue-900">
|
||||
Sync Status
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-blue-700">Berhasil: 18/25 (72%)</p>
|
||||
<p className="text-xs text-blue-600">
|
||||
Last sync: 15 Jan 2024 14:30
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-lg font-bold text-blue-600">18</div>
|
||||
<div className="text-xs text-blue-500">Sukses hari ini</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
|
||||
<div>
|
||||
<div className="flex items-center space-x-2 mb-1">
|
||||
<Code className="h-4 w-4 text-green-600" />
|
||||
<span className="text-sm font-medium text-green-900">
|
||||
Active Codes
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-green-700">156 kode BPJS aktif</p>
|
||||
<p className="text-xs text-green-600">
|
||||
8 kode baru bulan ini
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-lg font-bold text-green-600">156</div>
|
||||
<div className="text-xs text-green-500">Total kode</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-3 bg-purple-50 rounded-lg">
|
||||
<div>
|
||||
<div className="flex items-center space-x-2 mb-1">
|
||||
<Shield className="h-4 w-4 text-purple-600" />
|
||||
<span className="text-sm font-medium text-purple-900">
|
||||
Assist Coding
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-purple-700">
|
||||
45 coding assistance
|
||||
</p>
|
||||
<p className="text-xs text-purple-600">12 queries hari ini</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-lg font-bold text-purple-600">45</div>
|
||||
<div className="text-xs text-purple-500">Total assist</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Medical Record Operations */}
|
||||
<div className="card p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 flex items-center">
|
||||
<Stethoscope className="h-5 w-5 text-green-600 mr-2" />
|
||||
Medical Records
|
||||
</h3>
|
||||
<button className="text-sm text-green-600 hover:text-green-800 flex items-center">
|
||||
Lihat Detail <ArrowRight className="h-4 w-4 ml-1" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
|
||||
<div>
|
||||
<div className="flex items-center space-x-2 mb-1">
|
||||
<CheckCircle className="h-4 w-4 text-green-600" />
|
||||
<span className="text-sm font-medium text-green-900">
|
||||
Sync Records
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-green-700">
|
||||
1,250 records tersinkron
|
||||
</p>
|
||||
<p className="text-xs text-green-600">89 records hari ini</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-lg font-bold text-green-600">89</div>
|
||||
<div className="text-xs text-green-500">Hari ini</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
|
||||
<div>
|
||||
<div className="flex items-center space-x-2 mb-1">
|
||||
<Search className="h-4 w-4 text-blue-600" />
|
||||
<span className="text-sm font-medium text-blue-900">
|
||||
Patient Search
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-blue-700">45 pencarian hari ini</p>
|
||||
<p className="text-xs text-blue-600">84% success rate</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-lg font-bold text-blue-600">45</div>
|
||||
<div className="text-xs text-blue-500">Searches</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-3 bg-orange-50 rounded-lg">
|
||||
<div>
|
||||
<div className="flex items-center space-x-2 mb-1">
|
||||
<FileText className="h-4 w-4 text-orange-600" />
|
||||
<span className="text-sm font-medium text-orange-900">
|
||||
Latest Records
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-orange-700">
|
||||
30 records dalam 30 hari
|
||||
</p>
|
||||
<p className="text-xs text-orange-600">Filter aktif</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-lg font-bold text-orange-600">30</div>
|
||||
<div className="text-xs text-orange-500">Records</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Second Row */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* ICD Recommendations & Cost */}
|
||||
<div className="card p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 flex items-center">
|
||||
<TrendingUp className="h-5 w-5 text-purple-600 mr-2" />
|
||||
ICD & Cost Management
|
||||
</h3>
|
||||
<button className="text-sm text-purple-600 hover:text-purple-800 flex items-center">
|
||||
Lihat Detail <ArrowRight className="h-4 w-4 ml-1" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{
|
||||
code: "A15.0",
|
||||
name: "Tuberculosis Paru",
|
||||
cost: "Rp 3.2M",
|
||||
change: "+15%",
|
||||
trend: "up",
|
||||
count: "12 kasus",
|
||||
title: "ICD Recommendations",
|
||||
value: "23",
|
||||
subtitle: "Generated today",
|
||||
detail: "87% avg confidence",
|
||||
color: "text-purple-600",
|
||||
bgColor: "bg-purple-50",
|
||||
icon: Code,
|
||||
},
|
||||
{
|
||||
code: "I21.9",
|
||||
name: "Acute Myocardial Infarction",
|
||||
cost: "Rp 8.5M",
|
||||
change: "+3%",
|
||||
trend: "up",
|
||||
count: "4 kasus",
|
||||
title: "BPJS Mappings",
|
||||
value: "19/23",
|
||||
subtitle: "Successfully mapped",
|
||||
detail: "83% mapping rate",
|
||||
color: "text-blue-600",
|
||||
bgColor: "bg-blue-50",
|
||||
icon: Shield,
|
||||
},
|
||||
{
|
||||
code: "N18.6",
|
||||
name: "Chronic Kidney Disease",
|
||||
cost: "Rp 5.1M",
|
||||
change: "-8%",
|
||||
trend: "down",
|
||||
count: "7 kasus",
|
||||
},
|
||||
{
|
||||
code: "O80.0",
|
||||
name: "Spontaneous Delivery",
|
||||
cost: "Rp 2.8M",
|
||||
change: "+5%",
|
||||
trend: "up",
|
||||
count: "23 kasus",
|
||||
title: "Cost Analysis",
|
||||
value: "12",
|
||||
subtitle: "Exports today",
|
||||
detail: "JSON format",
|
||||
color: "text-green-600",
|
||||
bgColor: "bg-green-50",
|
||||
icon: TrendingUp,
|
||||
},
|
||||
].map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
|
||||
className={`flex items-center justify-between p-3 ${item.bgColor} rounded-lg`}
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-3 mb-1">
|
||||
<span className="font-mono text-sm font-bold text-gray-900 bg-white px-2 py-1 rounded">
|
||||
{item.code}
|
||||
</span>
|
||||
<div>
|
||||
<div className="flex items-center space-x-2 mb-1">
|
||||
<item.icon className={`h-4 w-4 ${item.color}`} />
|
||||
<span
|
||||
className={`text-xs font-medium ${
|
||||
item.trend === "up"
|
||||
? "text-green-600"
|
||||
: "text-red-600"
|
||||
}`}
|
||||
className={`text-sm font-medium ${item.color
|
||||
.replace("text-", "text-")
|
||||
.replace("-600", "-900")}`}
|
||||
>
|
||||
{item.change}
|
||||
{item.title}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm font-medium text-gray-800 mb-1">
|
||||
{item.name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
{item.count} • {item.cost}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={`p-2 rounded-lg ${
|
||||
item.trend === "up" ? "bg-green-100" : "bg-red-100"
|
||||
}`}
|
||||
<p
|
||||
className={`text-sm ${item.color.replace(
|
||||
"-600",
|
||||
"-700"
|
||||
)}`}
|
||||
>
|
||||
<TrendingUp
|
||||
className={`h-4 w-4 ${
|
||||
item.trend === "up"
|
||||
? "text-green-600"
|
||||
: "text-red-600 transform rotate-180"
|
||||
}`}
|
||||
/>
|
||||
{item.subtitle}
|
||||
</p>
|
||||
<p className={`text-xs ${item.color}`}>{item.detail}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className={`text-lg font-bold ${item.color}`}>
|
||||
{item.value}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Distribusi Kode BPJS */}
|
||||
{/* System Management */}
|
||||
<div className="card p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900">
|
||||
Distribusi Kode BPJS
|
||||
<h3 className="text-lg font-semibold text-gray-900 flex items-center">
|
||||
<Users className="h-5 w-5 text-orange-600 mr-2" />
|
||||
System Management
|
||||
</h3>
|
||||
<button className="text-sm text-primary hover:text-primary/80">
|
||||
Lihat Semua
|
||||
<button className="text-sm text-orange-600 hover:text-orange-800 flex items-center">
|
||||
Lihat Detail <ArrowRight className="h-4 w-4 ml-1" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{
|
||||
category: "Rawat Inap",
|
||||
codes: "89 kode",
|
||||
percentage: "57%",
|
||||
color: "bg-blue-500",
|
||||
count: "234 klaim",
|
||||
},
|
||||
{
|
||||
category: "Rawat Jalan",
|
||||
codes: "45 kode",
|
||||
percentage: "29%",
|
||||
color: "bg-green-500",
|
||||
count: "156 klaim",
|
||||
},
|
||||
{
|
||||
category: "IGD",
|
||||
codes: "22 kode",
|
||||
percentage: "14%",
|
||||
color: "bg-red-500",
|
||||
count: "67 klaim",
|
||||
},
|
||||
].map((item, index) => (
|
||||
<div key={index} className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div
|
||||
className={`w-3 h-3 rounded-full ${item.color}`}
|
||||
></div>
|
||||
<span className="text-sm font-medium text-gray-900">
|
||||
{item.category}
|
||||
<div className="flex items-center justify-between p-3 bg-orange-50 rounded-lg">
|
||||
<div>
|
||||
<div className="flex items-center space-x-2 mb-1">
|
||||
<Users className="h-4 w-4 text-orange-600" />
|
||||
<span className="text-sm font-medium text-orange-900">
|
||||
User Management
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-sm font-bold text-gray-900">
|
||||
{item.percentage}
|
||||
</span>
|
||||
<p className="text-sm text-orange-700">28/30 active users</p>
|
||||
<p className="text-xs text-orange-600">24 login hari ini</p>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className={`h-2 rounded-full ${item.color}`}
|
||||
style={{ width: item.percentage }}
|
||||
></div>
|
||||
<div className="text-right">
|
||||
<div className="text-lg font-bold text-orange-600">28</div>
|
||||
<div className="text-xs text-orange-500">Active</div>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs text-gray-500">
|
||||
<span>{item.codes}</span>
|
||||
<span>{item.count}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-6 pt-4 border-t border-gray-200">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-gray-600">Total Kode Aktif:</span>
|
||||
<span className="font-bold text-gray-900">156 kode</span>
|
||||
<div className="flex items-center justify-between p-3 bg-purple-50 rounded-lg">
|
||||
<div>
|
||||
<div className="flex items-center space-x-2 mb-1">
|
||||
<Shield className="h-4 w-4 text-purple-600" />
|
||||
<span className="text-sm font-medium text-purple-900">
|
||||
Role Management
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-purple-700">25 roles configured</p>
|
||||
<p className="text-xs text-purple-600">
|
||||
2 permissions updated
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-lg font-bold text-purple-600">25</div>
|
||||
<div className="text-xs text-purple-500">Roles</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
|
||||
<div>
|
||||
<div className="flex items-center space-x-2 mb-1">
|
||||
<CheckCircle className="h-4 w-4 text-green-600" />
|
||||
<span className="text-sm font-medium text-green-900">
|
||||
System Health
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-green-700">99.8% uptime</p>
|
||||
<p className="text-xs text-green-600">2.1% error rate</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-lg font-bold text-green-600">99.8%</div>
|
||||
<div className="text-xs text-green-500">Uptime</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm mt-1">
|
||||
<span className="text-gray-600">Total Klaim Bulan Ini:</span>
|
||||
<span className="font-bold text-gray-900">457 klaim</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user