revisi dashboard

src/pages/Dashboard.tsx

@@ -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",
+      subtitle: "System users",
-    },
-    {
-      title: "Kode BPJS Aktif",
-      value: "156",
-      change: "8 kode baru",
-      changeColor: "text-green-600",
-      icon: Shield,
-      color: "text-purple-600",
-      subtitle: "Total kode",
     },
   ];
 
@@ -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
+            Monitor BPJS operations, medical records, ICD recommendations, dan
-            secara real-time.
+            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 &lt; 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">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-          {/* Tren Biaya Kode Medis */}
+          {/* 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">
+              <h3 className="text-lg font-semibold text-gray-900 flex items-center">
-                Tren Biaya Kode Medis
+                <Database className="h-5 w-5 text-blue-600 mr-2" />
+                BPJS Operations
               </h3>
-              <button className="text-sm text-primary hover:text-primary/80">
+              <button className="text-sm text-blue-600 hover:text-blue-800 flex items-center">
-                Lihat Detail
+                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",
+                  title: "ICD Recommendations",
-                  name: "Tuberculosis Paru",
+                  value: "23",
-                  cost: "Rp 3.2M",
+                  subtitle: "Generated today",
-                  change: "+15%",
+                  detail: "87% avg confidence",
-                  trend: "up",
+                  color: "text-purple-600",
-                  count: "12 kasus",
+                  bgColor: "bg-purple-50",
+                  icon: Code,
                 },
                 {
-                  code: "I21.9",
+                  title: "BPJS Mappings",
-                  name: "Acute Myocardial Infarction",
+                  value: "19/23",
-                  cost: "Rp 8.5M",
+                  subtitle: "Successfully mapped",
-                  change: "+3%",
+                  detail: "83% mapping rate",
-                  trend: "up",
+                  color: "text-blue-600",
-                  count: "4 kasus",
+                  bgColor: "bg-blue-50",
+                  icon: Shield,
                 },
                 {
-                  code: "N18.6",
+                  title: "Cost Analysis",
-                  name: "Chronic Kidney Disease",
+                  value: "12",
-                  cost: "Rp 5.1M",
+                  subtitle: "Exports today",
-                  change: "-8%",
+                  detail: "JSON format",
-                  trend: "down",
+                  color: "text-green-600",
-                  count: "7 kasus",
+                  bgColor: "bg-green-50",
-                },
+                  icon: TrendingUp,
-                {
-                  code: "O80.0",
-                  name: "Spontaneous Delivery",
-                  cost: "Rp 2.8M",
-                  change: "+5%",
-                  trend: "up",
-                  count: "23 kasus",
                 },
               ].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>
-                    <div className="flex items-center space-x-3 mb-1">
+                    <div className="flex items-center space-x-2 mb-1">
-                      <span className="font-mono text-sm font-bold text-gray-900 bg-white px-2 py-1 rounded">
+                      <item.icon className={`h-4 w-4 ${item.color}`} />
-                        {item.code}
-                      </span>
                       <span
-                        className={`text-xs font-medium ${
+                        className={`text-sm font-medium ${item.color
-                          item.trend === "up"
+                          .replace("text-", "text-")
-                            ? "text-green-600"
+                          .replace("-600", "-900")}`}
-                            : "text-red-600"
-                        }`}
                       >
-                        {item.change}
+                        {item.title}
                       </span>
                     </div>
-                    <p className="text-sm font-medium text-gray-800 mb-1">
+                    <p
-                      {item.name}
+                      className={`text-sm ${item.color.replace(
-                    </p>
+                        "-600",
-                    <p className="text-xs text-gray-500">
+                        "-700"
-                      {item.count} • {item.cost}
+                      )}`}
+                    >
+                      {item.subtitle}
                     </p>
+                    <p className={`text-xs ${item.color}`}>{item.detail}</p>
                   </div>
-                  <div
+                  <div className="text-right">
-                    className={`p-2 rounded-lg ${
+                    <div className={`text-lg font-bold ${item.color}`}>
-                      item.trend === "up" ? "bg-green-100" : "bg-red-100"
+                      {item.value}
-                    }`}
+                    </div>
-                  >
-                    <TrendingUp
-                      className={`h-4 w-4 ${
-                        item.trend === "up"
-                          ? "text-green-600"
-                          : "text-red-600 transform rotate-180"
-                      }`}
-                    />
                   </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">
+              <h3 className="text-lg font-semibold text-gray-900 flex items-center">
-                Distribusi Kode BPJS
+                <Users className="h-5 w-5 text-orange-600 mr-2" />
+                System Management
               </h3>
-              <button className="text-sm text-primary hover:text-primary/80">
+              <button className="text-sm text-orange-600 hover:text-orange-800 flex items-center">
-                Lihat Semua
+                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-orange-50 rounded-lg">
-                {
+                <div>
-                  category: "Rawat Inap",
+                  <div className="flex items-center space-x-2 mb-1">
-                  codes: "89 kode",
+                    <Users className="h-4 w-4 text-orange-600" />
-                  percentage: "57%",
+                    <span className="text-sm font-medium text-orange-900">
-                  color: "bg-blue-500",
+                      User Management
-                  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}
-                      </span>
-                    </div>
-                    <span className="text-sm font-bold text-gray-900">
-                      {item.percentage}
                     </span>
                   </div>
-                  <div className="w-full bg-gray-200 rounded-full h-2">
+                  <p className="text-sm text-orange-700">28/30 active users</p>
-                    <div
+                  <p className="text-xs text-orange-600">24 login hari ini</p>
-                      className={`h-2 rounded-full ${item.color}`}
+                </div>
-                      style={{ width: item.percentage }}
+                <div className="text-right">
-                    ></div>
+                  <div className="text-lg font-bold text-orange-600">28</div>
-                  </div>
+                  <div className="text-xs text-orange-500">Active</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>
-              <div className="flex items-center justify-between text-sm mt-1">
+
-                <span className="text-gray-600">Total Klaim Bulan Ini:</span>
+              <div className="flex items-center justify-between p-3 bg-purple-50 rounded-lg">
-                <span className="font-bold text-gray-900">457 klaim</span>
+                <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>
             </div>
           </div>