pahmiudahgede
/
MIF_E31222379_WEB
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refact: simplify feature menu

This commit is contained in:
pahmiudahgede 2025-07-09 13:26:49 +07:00
parent c35b1c85df
commit b6dec0baac
1 changed files with 130 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

318
app/routes/sys-rijig-adminpanel.dashboard._index.tsx
View File

@ -4,13 +4,13 @@ import {
BarChart3, BarChart3,
Users, Users,
Recycle, Recycle,
DollarSign, UserCheck,
TrendingUp, TrendingUp,
TrendingDown, TrendingDown,
Package, Package,
MapPin, MapPin,
Clock, User,
AlertCircle Shield
} from "lucide-react"; } from "lucide-react";
import { import {
Card, Card,
@ -19,72 +19,21 @@ import {
CardHeader, CardHeader,
CardTitle CardTitle
} from "~/components/ui/card"; } from "~/components/ui/card";
import { Badge } from "~/components/ui/badge";
import { Button } from "~/components/ui/button"; import { Button } from "~/components/ui/button";
export const loader = async () => { export const loader = async () => {
const dashboardData = { const dashboardData = {
stats: { 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: [ wasteStats: [
{ type: "Plastik", percentage: 45, color: "bg-blue-500" }, { type: "Plastik", percentage: 45, color: "bg-blue-500" },
{ type: "Kertas", percentage: 30, color: "bg-green-500" }, { type: "Kertas", percentage: 30, color: "bg-green-500" },
{ type: "Logam", percentage: 15, color: "bg-yellow-500" }, { type: "Logam", percentage: 15, color: "bg-yellow-500" },
{ type: "Organik", percentage: 10, color: "bg-red-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"> <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"> <CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-sm font-medium text-blue-700 dark:text-blue-300"> <CardTitle className="text-sm font-medium text-blue-700 dark:text-blue-300">
Total Pengguna Total Masyarakat
</CardTitle> </CardTitle>
<Users className="h-5 w-5 text-blue-600 dark:text-blue-400" /> <Users className="h-5 w-5 text-blue-600 dark:text-blue-400" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold text-blue-900 dark:text-blue-100"> <div className="text-2xl font-bold text-blue-900 dark:text-blue-100">
{dashboardData.stats.totalUsers.toLocaleString()} {dashboardData.stats.totalMasyarakat.toLocaleString()}
</div> </div>
<p className="text-xs text-blue-600 dark:text-blue-400 flex items-center gap-1 mt-1"> <p className="text-xs text-blue-600 dark:text-blue-400 flex items-center gap-1 mt-1">
<TrendingUp className="h-3 w-3" /> <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> </p>
</CardContent> </CardContent>
</Card> </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"> <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"> <CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-sm font-medium text-purple-700 dark:text-purple-300"> <CardTitle className="text-sm font-medium text-purple-700 dark:text-purple-300">
Total Revenue Total Pengelola
</CardTitle> </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> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold text-purple-900 dark:text-purple-100"> <div className="text-2xl font-bold text-purple-900 dark:text-purple-100">
Rp {dashboardData.stats.totalRevenue.toLocaleString()} {dashboardData.stats.totalPengelola}
</div> </div>
<p className="text-xs text-purple-600 dark:text-purple-400 flex items-center gap-1 mt-1"> <p className="text-xs text-purple-600 dark:text-purple-400 flex items-center gap-1 mt-1">
<TrendingUp className="h-3 w-3" /> <TrendingUp className="h-3 w-3" />
+23% dari bulan lalu +3% dari bulan lalu
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
@ -177,135 +108,146 @@ 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"> <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"> <CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-sm font-medium text-orange-700 dark:text-orange-300"> <CardTitle className="text-sm font-medium text-orange-700 dark:text-orange-300">
Pengepul Aktif Total Pengepul
</CardTitle> </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> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold text-orange-900 dark:text-orange-100"> <div className="text-2xl font-bold text-orange-900 dark:text-orange-100">
{dashboardData.stats.activeCollectors} {dashboardData.stats.totalPengepul}
</div> </div>
<p className="text-xs text-orange-600 dark:text-orange-400 flex items-center gap-1 mt-1"> <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> </p>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
{/* Content Grid */} {/* 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 */} {/* Waste Statistics */}
<Card className="lg:col-span-2"> <Card>
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2"> <CardTitle className="text-lg">Distribusi Jenis Sampah</CardTitle>
<Package className="h-5 w-5 text-green-600" />
Transaksi Terbaru
</CardTitle>
<CardDescription> <CardDescription>
Aktivitas transaksi sampah dalam 24 jam terakhir Persentase berdasarkan volume yang berhasil dikelola
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="space-y-4">
<div className="space-y-4"> {dashboardData.wasteStats.map((waste, index) => (
{dashboardData.recentTransactions.map((transaction) => ( <div key={index} className="space-y-2">
<div <div className="flex justify-between text-sm">
key={transaction.id} <span className="font-medium">{waste.type}</span>
className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg" <span className="text-gray-500">{waste.percentage}%</span>
>
<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>
))} <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
</div> <div
<Button variant="outline" className="w-full mt-4"> className={`${waste.color} h-2 rounded-full transition-all duration-300`}
Lihat Semua Transaksi style={{ width: `${waste.percentage}%` }}
</Button> ></div>
</div>
</div>
))}
</CardContent> </CardContent>
</Card> </Card>
{/* Side Panel */} {/* User Distribution */}
<div className="space-y-6"> <Card>
{/* Waste Statistics */} <CardHeader>
<Card> <CardTitle className="text-lg">Distribusi Pengguna</CardTitle>
<CardHeader> <CardDescription>
<CardTitle className="text-lg">Distribusi Jenis Sampah</CardTitle> Breakdown pengguna berdasarkan peran
<CardDescription>Persentase berdasarkan volume</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
{dashboardData.wasteStats.map((waste, index) => ( <div className="space-y-4">
<div key={index} className="space-y-2"> <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">
<div className="flex justify-between text-sm"> <div className="flex items-center gap-3">
<span className="font-medium">{waste.type}</span> <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center">
<span className="text-gray-500">{waste.percentage}%</span> <Users className="h-5 w-5 text-blue-600" />
</div> </div>
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2"> <div>
<div <p className="font-medium text-gray-900 dark:text-white">
className={`${waste.color} h-2 rounded-full transition-all duration-300`} Masyarakat
style={{ width: `${waste.percentage}%` }} </p>
></div> <p className="text-sm text-gray-500 dark:text-gray-400">
</div> Pengguna umum
</div>
))}
</CardContent>
</Card>
{/* Alerts */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<AlertCircle className="h-5 w-5 text-yellow-500" />
Notifikasi Penting
</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
{dashboardData.alerts.map((alert) => (
<div
key={alert.id}
className="p-3 rounded-lg border-l-4 bg-gray-50 dark:bg-gray-800 border-l-yellow-500"
>
<div className="flex items-start justify-between gap-2">
<p className="text-sm text-gray-700 dark:text-gray-300">
{alert.message}
</p> </p>
<Badge
variant={
alert.type === "urgent" ? "destructive" : "secondary"
}
className="text-xs"
>
{alert.type}
</Badge>
</div> </div>
<p className="text-xs text-gray-500 mt-1 flex items-center gap-1">
<Clock className="h-3 w-3" />
{alert.time}
</p>
</div> </div>
))} <div className="text-right">
</CardContent> <p className="text-2xl font-bold text-blue-600">
</Card> {dashboardData.stats.totalMasyarakat.toLocaleString()}
</div> </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 */} {/* Quick Actions */}