refact: simplify feature menu

app/routes/sys-rijig-adminpanel.dashboard._index.tsx

@@ -4,13 +4,13 @@ import {
   BarChart3,
   Users,
   Recycle,
-  DollarSign,
+  UserCheck,
   TrendingUp,
   TrendingDown,
   Package,
   MapPin,
-  Clock,
+  User,
-  AlertCircle
+  Shield
 } from "lucide-react";
 import {
   Card,
@@ -19,72 +19,21 @@ import {
   CardHeader,
   CardTitle
 } from "~/components/ui/card";
-import { Badge } from "~/components/ui/badge";
 import { Button } from "~/components/ui/button";
 
 export const loader = async () => {
   const dashboardData = {
     stats: {
-      totalUsers: 1234,
+      totalMasyarakat: 1156,
-      totalWaste: 5678,
+      totalPengelola: 32,
-      totalRevenue: 98765,
+      totalPengepul: 46,
-      activeCollectors: 45
+      totalManagedWaste: 8945
     },
-    recentTransactions: [
-      {
-        id: 1,
-        user: "Ahmad Rizki",
-        type: "Plastik",
-        amount: 15000,
-        time: "2 menit lalu"
-      },
-      {
-        id: 2,
-        user: "Siti Nurhaliza",
-        type: "Kertas",
-        amount: 8500,
-        time: "5 menit lalu"
-      },
-      {
-        id: 3,
-        user: "Budi Santoso",
-        type: "Logam",
-        amount: 25000,
-        time: "10 menit lalu"
-      },
-      {
-        id: 4,
-        user: "Diana Putri",
-        type: "Plastik",
-        amount: 12000,
-        time: "15 menit lalu"
-      }
-    ],
     wasteStats: [
       { type: "Plastik", percentage: 45, color: "bg-blue-500" },
       { type: "Kertas", percentage: 30, color: "bg-green-500" },
       { type: "Logam", percentage: 15, color: "bg-yellow-500" },
       { type: "Organik", percentage: 10, color: "bg-red-500" }
-    ],
-    alerts: [
-      {
-        id: 1,
-        message: "Kapasitas gudang Pengepul A mencapai 85%",
-        type: "warning",
-        time: "1 jam lalu"
-      },
-      {
-        id: 2,
-        message: "Harga plastik naik 15% hari ini",
-        type: "info",
-        time: "2 jam lalu"
-      },
-      {
-        id: 3,
-        message: "5 pengepul baru menunggu verifikasi",
-        type: "urgent",
-        time: "3 jam lalu"
-      }
     ]
   };
 
@@ -123,35 +72,17 @@ export default function AdminDashboard() {
         <Card className="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 border-blue-200 dark:border-blue-800">
           <CardHeader className="flex flex-row items-center justify-between pb-2">
             <CardTitle className="text-sm font-medium text-blue-700 dark:text-blue-300">
-              Total Pengguna
+              Total Masyarakat
             </CardTitle>
             <Users className="h-5 w-5 text-blue-600 dark:text-blue-400" />
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold text-blue-900 dark:text-blue-100">
-              {dashboardData.stats.totalUsers.toLocaleString()}
+              {dashboardData.stats.totalMasyarakat.toLocaleString()}
             </div>
             <p className="text-xs text-blue-600 dark:text-blue-400 flex items-center gap-1 mt-1">
               <TrendingUp className="h-3 w-3" />
-              +12% dari bulan lalu
+              +15% dari bulan lalu
-            </p>
-          </CardContent>
-        </Card>
-
-        <Card className="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 border-green-200 dark:border-green-800">
-          <CardHeader className="flex flex-row items-center justify-between pb-2">
-            <CardTitle className="text-sm font-medium text-green-700 dark:text-green-300">
-              Total Sampah (kg)
-            </CardTitle>
-            <Recycle className="h-5 w-5 text-green-600 dark:text-green-400" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-green-900 dark:text-green-100">
-              {dashboardData.stats.totalWaste.toLocaleString()}
-            </div>
-            <p className="text-xs text-green-600 dark:text-green-400 flex items-center gap-1 mt-1">
-              <TrendingUp className="h-3 w-3" />
-              +8% dari bulan lalu
             </p>
           </CardContent>
         </Card>
@@ -159,17 +90,17 @@ export default function AdminDashboard() {
         <Card className="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 border-purple-200 dark:border-purple-800">
           <CardHeader className="flex flex-row items-center justify-between pb-2">
             <CardTitle className="text-sm font-medium text-purple-700 dark:text-purple-300">
-              Total Revenue
+              Total Pengelola
             </CardTitle>
-            <DollarSign className="h-5 w-5 text-purple-600 dark:text-purple-400" />
+            <Shield className="h-5 w-5 text-purple-600 dark:text-purple-400" />
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold text-purple-900 dark:text-purple-100">
-              Rp {dashboardData.stats.totalRevenue.toLocaleString()}
+              {dashboardData.stats.totalPengelola}
             </div>
             <p className="text-xs text-purple-600 dark:text-purple-400 flex items-center gap-1 mt-1">
               <TrendingUp className="h-3 w-3" />
-              +23% dari bulan lalu
+              +3% dari bulan lalu
             </p>
           </CardContent>
         </Card>
@@ -177,80 +108,49 @@ export default function AdminDashboard() {
         <Card className="bg-gradient-to-br from-orange-50 to-orange-100 dark:from-orange-900/20 dark:to-orange-800/20 border-orange-200 dark:border-orange-800">
           <CardHeader className="flex flex-row items-center justify-between pb-2">
             <CardTitle className="text-sm font-medium text-orange-700 dark:text-orange-300">
-              Pengepul Aktif
+              Total Pengepul
             </CardTitle>
-            <MapPin className="h-5 w-5 text-orange-600 dark:text-orange-400" />
+            <UserCheck className="h-5 w-5 text-orange-600 dark:text-orange-400" />
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold text-orange-900 dark:text-orange-100">
-              {dashboardData.stats.activeCollectors}
+              {dashboardData.stats.totalPengepul}
             </div>
             <p className="text-xs text-orange-600 dark:text-orange-400 flex items-center gap-1 mt-1">
-              <TrendingDown className="h-3 w-3" />
+              <TrendingUp className="h-3 w-3" />
-              -2% dari bulan lalu
+              +8% dari bulan lalu
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 border-green-200 dark:border-green-800">
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium text-green-700 dark:text-green-300">
+              Sampah Terkelola (kg)
+            </CardTitle>
+            <Recycle className="h-5 w-5 text-green-600 dark:text-green-400" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-green-900 dark:text-green-100">
+              {dashboardData.stats.totalManagedWaste.toLocaleString()}
+            </div>
+            <p className="text-xs text-green-600 dark:text-green-400 flex items-center gap-1 mt-1">
+              <TrendingUp className="h-3 w-3" />
+              +18% dari bulan lalu
             </p>
           </CardContent>
         </Card>
       </div>
 
       {/* Content Grid */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {/* Recent Transactions */}
-        <Card className="lg:col-span-2">
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Package className="h-5 w-5 text-green-600" />
-              Transaksi Terbaru
-            </CardTitle>
-            <CardDescription>
-              Aktivitas transaksi sampah dalam 24 jam terakhir
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              {dashboardData.recentTransactions.map((transaction) => (
-                <div
-                  key={transaction.id}
-                  className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg"
-                >
-                  <div className="flex items-center gap-3">
-                    <div className="w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
-                      <Recycle className="h-5 w-5 text-green-600" />
-                    </div>
-                    <div>
-                      <p className="font-medium text-gray-900 dark:text-white">
-                        {transaction.user}
-                      </p>
-                      <p className="text-sm text-gray-500 dark:text-gray-400">
-                        {transaction.type}
-                      </p>
-                    </div>
-                  </div>
-                  <div className="text-right">
-                    <p className="font-semibold text-green-600">
-                      Rp {transaction.amount.toLocaleString()}
-                    </p>
-                    <p className="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1">
-                      <Clock className="h-3 w-3" />
-                      {transaction.time}
-                    </p>
-                  </div>
-                </div>
-              ))}
-            </div>
-            <Button variant="outline" className="w-full mt-4">
-              Lihat Semua Transaksi
-            </Button>
-          </CardContent>
-        </Card>
-
-        {/* Side Panel */}
-        <div className="space-y-6">
         {/* Waste Statistics */}
         <Card>
           <CardHeader>
             <CardTitle className="text-lg">Distribusi Jenis Sampah</CardTitle>
-              <CardDescription>Persentase berdasarkan volume</CardDescription>
+            <CardDescription>
+              Persentase berdasarkan volume yang berhasil dikelola
+            </CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
             {dashboardData.wasteStats.map((waste, index) => (
@@ -270,43 +170,85 @@ export default function AdminDashboard() {
           </CardContent>
         </Card>
 
-          {/* Alerts */}
+        {/* User Distribution */}
         <Card>
           <CardHeader>
-              <CardTitle className="flex items-center gap-2">
+            <CardTitle className="text-lg">Distribusi Pengguna</CardTitle>
-                <AlertCircle className="h-5 w-5 text-yellow-500" />
+            <CardDescription>
-                Notifikasi Penting
+              Breakdown pengguna berdasarkan peran
-              </CardTitle>
+            </CardDescription>
           </CardHeader>
-            <CardContent className="space-y-3">
+          <CardContent className="space-y-4">
-              {dashboardData.alerts.map((alert) => (
+            <div className="space-y-4">
-                <div
+              <div className="flex items-center justify-between p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
-                  key={alert.id}
+                <div className="flex items-center gap-3">
-                  className="p-3 rounded-lg border-l-4 bg-gray-50 dark:bg-gray-800 border-l-yellow-500"
+                  <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center">
-                >
+                    <Users className="h-5 w-5 text-blue-600" />
-                  <div className="flex items-start justify-between gap-2">
-                    <p className="text-sm text-gray-700 dark:text-gray-300">
-                      {alert.message}
-                    </p>
-                    <Badge
-                      variant={
-                        alert.type === "urgent" ? "destructive" : "secondary"
-                      }
-                      className="text-xs"
-                    >
-                      {alert.type}
-                    </Badge>
                   </div>
-                  <p className="text-xs text-gray-500 mt-1 flex items-center gap-1">
+                  <div>
-                    <Clock className="h-3 w-3" />
+                    <p className="font-medium text-gray-900 dark:text-white">
-                    {alert.time}
+                      Masyarakat
+                    </p>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">
+                      Pengguna umum
                     </p>
                   </div>
-              ))}
+                </div>
+                <div className="text-right">
+                  <p className="text-2xl font-bold text-blue-600">
+                    {dashboardData.stats.totalMasyarakat.toLocaleString()}
+                  </p>
+                  <p className="text-xs text-gray-500">93.4%</p>
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center">
+                    <Shield className="h-5 w-5 text-purple-600" />
+                  </div>
+                  <div>
+                    <p className="font-medium text-gray-900 dark:text-white">
+                      Pengelola
+                    </p>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">
+                      Admin sistem
+                    </p>
+                  </div>
+                </div>
+                <div className="text-right">
+                  <p className="text-2xl font-bold text-purple-600">
+                    {dashboardData.stats.totalPengelola}
+                  </p>
+                  <p className="text-xs text-gray-500">2.6%</p>
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between p-4 bg-orange-50 dark:bg-orange-900/20 rounded-lg border border-orange-200 dark:border-orange-800">
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 bg-orange-100 dark:bg-orange-900/30 rounded-full flex items-center justify-center">
+                    <UserCheck className="h-5 w-5 text-orange-600" />
+                  </div>
+                  <div>
+                    <p className="font-medium text-gray-900 dark:text-white">
+                      Pengepul
+                    </p>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">
+                      Mitra pengepul
+                    </p>
+                  </div>
+                </div>
+                <div className="text-right">
+                  <p className="text-2xl font-bold text-orange-600">
+                    {dashboardData.stats.totalPengepul}
+                  </p>
+                  <p className="text-xs text-gray-500">3.7%</p>
+                </div>
+              </div>
+            </div>
           </CardContent>
         </Card>
       </div>
-      </div>
 
       {/* Quick Actions */}
       <Card>