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

refact: refactoring code for optimization style

This commit is contained in:
pahmiudahgede 2025-07-06 21:20:02 +07:00
parent 71d7a06a8e
commit 0e9cb1e92e
3 changed files with 326 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/root.tsx
View File

@ -67,11 +67,10 @@ export function App() {
</head> </head>
<body> <body>
<ProgressProvider <ProgressProvider
startOnLoad
color={theme === "dark" ? "#10b981" : "#059669"} color={theme === "dark" ? "#10b981" : "#059669"}
options={{ options={{
showSpinner: false, showSpinner: false,
speed: 300,
minimum: 0.08,
easing: "ease", easing: "ease",
positionUsing: "", positionUsing: "",
template: template:

380
app/routes/sys-rijig-administator.emailotpverifyrequired.tsx
View File

@ -9,7 +9,8 @@ import {
useActionData, useActionData,
useLoaderData, useLoaderData,
useNavigation, useNavigation,
useSearchParams useSearchParams,
Link
} from "@remix-run/react"; } from "@remix-run/react";
import { useState, useEffect, useRef } from "react"; import { useState, useEffect, useRef } from "react";
import { cn } from "~/lib/utils"; import { cn } from "~/lib/utils";
@ -25,8 +26,11 @@ import {
AlertCircle, AlertCircle,
ArrowLeft, ArrowLeft,
RefreshCw, RefreshCw,
Loader2 Loader2,
KeyRound
} from "lucide-react"; } from "lucide-react";
import { Boxes } from "~/components/ui/background-boxes";
import { ThemeFloatingDock } from "~/components/ui/floatingthemeswitch";
interface LoaderData { interface LoaderData {
email: string; email: string;
@ -129,6 +133,7 @@ export default function AdminVerifyOTP() {
const isResending = navigation.formData?.get("_action") === "resend"; const isResending = navigation.formData?.get("_action") === "resend";
const isVerifying = navigation.formData?.get("_action") === "verify"; const isVerifying = navigation.formData?.get("_action") === "verify";
// Timer countdown
useEffect(() => { useEffect(() => {
const timer = setInterval(() => { const timer = setInterval(() => {
setTimeLeft((prev) => { setTimeLeft((prev) => {
@ -143,6 +148,7 @@ export default function AdminVerifyOTP() {
return () => clearInterval(timer); return () => clearInterval(timer);
}, []); }, []);
// Reset timer when OTP is resent
useEffect(() => { useEffect(() => {
if (actionData?.success && actionData?.otpSentAt) { if (actionData?.success && actionData?.otpSentAt) {
setTimeLeft(expiryMinutes * 60); setTimeLeft(expiryMinutes * 60);
@ -189,163 +195,235 @@ export default function AdminVerifyOTP() {
const maskedEmail = email.replace(/(.{2})(.*)(@.*)/, "$1***$3"); const maskedEmail = email.replace(/(.{2})(.*)(@.*)/, "$1***$3");
return ( return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 to-blue-50 p-4"> <div className="h-full relative w-full overflow-hidden bg-slate-900 dark:bg-slate-950 light:bg-slate-100 flex flex-col items-center justify-center rounded-lg">
<div className="w-full max-w-md"> {/* Background overlay with theme-aware gradient */}
<Card className="border-0 shadow-2xl"> <div className="absolute inset-0 w-full h-full bg-slate-900 dark:bg-slate-950 light:bg-slate-100 z-20 [mask-image:radial-gradient(transparent,white)] pointer-events-none" />
<CardHeader className="text-center pb-2">
<div className="mx-auto mb-4 p-3 bg-green-100 rounded-full w-fit">
<Mail className="h-8 w-8 text-green-600" />
</div>
<CardTitle className="text-2xl font-bold text-gray-900">
Verifikasi Email
</CardTitle>
<p className="text-muted-foreground text-sm">
Masukkan kode OTP 4 digit yang telah dikirim ke
</p>
<p className="font-medium text-green-600">{maskedEmail}</p>
</CardHeader>
<CardContent className="space-y-6"> {/* Animated background boxes */}
{/* Success Alert */} <Boxes />
{actionData?.success && actionData?.message && (
<Alert className="border-green-200 bg-green-50">
<CheckCircle className="h-4 w-4 text-green-600" />
<AlertDescription className="text-green-800">
{actionData.message}
</AlertDescription>
</Alert>
)}
{/* Error Alert */} {/* Theme Toggle - Positioned at top-right */}
{actionData?.errors?.otp && ( <ThemeFloatingDock className="fixed top-6 right-6 z-50" />
<Alert variant="destructive">
<AlertCircle className="h-4 w-4" />
<AlertDescription>{actionData.errors.otp}</AlertDescription>
</Alert>
)}
{/* OTP Input Form */} {/* Main content container */}
<Form method="post"> <div className="min-h-screen flex items-center justify-center w-full max-w-md z-20 p-4">
<input type="hidden" name="email" value={email} /> <div className="w-full space-y-6">
<input type="hidden" name="_action" value="verify" /> <Card className="border-0 shadow-2xl bg-background/95 backdrop-blur-sm">
<input type="hidden" name="otp" value={otp.join("")} /> <CardHeader className="text-center pb-2">
<div className="mx-auto mb-4 p-3 bg-green-100 dark:bg-green-900/30 rounded-full w-fit">
<div className="space-y-4"> <KeyRound className="h-8 w-8 text-green-600 dark:text-green-400" />
{/* OTP Input Fields */}
<div className="flex justify-center space-x-3">
{otp.map((digit, index) => (
<Input
key={index}
ref={(el) => (inputRefs.current[index] = el)}
type="text"
maxLength={1}
value={digit}
onChange={(e) => handleOtpChange(index, e.target.value)}
onKeyDown={(e) => handleKeyDown(index, e)}
onPaste={handlePaste}
className={cn(
"w-12 h-12 text-center text-lg font-bold",
actionData?.errors?.otp && "border-red-500"
)}
autoFocus={index === 0}
/>
))}
</div>
{/* Timer */}
<div className="text-center">
{timeLeft > 0 ? (
<div className="flex items-center justify-center space-x-2 text-sm text-gray-600">
<Clock className="h-4 w-4" />
<span>Kode kedaluwarsa dalam {formatTime(timeLeft)}</span>
</div>
) : (
<div className="text-sm text-red-600 font-medium">
Kode OTP telah kedaluwarsa
</div>
)}
</div>
{/* Verify Button */}
<Button
type="submit"
className="w-full bg-green-600 hover:bg-green-700"
disabled={
otp.join("").length !== 4 || isSubmitting || timeLeft === 0
}
>
{isVerifying ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Memverifikasi...
</>
) : (
"Verifikasi Kode"
)}
</Button>
</div> </div>
</Form> <CardTitle className="text-2xl font-bold text-foreground">
Verifikasi Email
{/* Resend OTP */} </CardTitle>
<div className="text-center"> <p className="text-muted-foreground text-sm mt-2">
<p className="text-sm text-gray-600 mb-2">Tidak menerima kode?</p> Masukkan kode OTP 4 digit yang telah dikirim ke
<Form method="post" className="inline">
<input type="hidden" name="email" value={email} />
<input type="hidden" name="_action" value="resend" />
<Button
type="submit"
variant="outline"
size="sm"
disabled={!canResend || isSubmitting}
className="text-green-600 border-green-600 hover:bg-green-50"
>
{isResending ? (
<>
<Loader2 className="mr-2 h-3 w-3 animate-spin" />
Mengirim...
</>
) : (
<>
<RefreshCw className="mr-2 h-3 w-3" />
Kirim Ulang OTP
</>
)}
</Button>
</Form>
</div>
{/* Back to Login */}
<div className="text-center">
<a
href="/sys-rijig-administrator/sign-infirst"
className="inline-flex items-center text-sm text-gray-600 hover:text-green-600"
>
<ArrowLeft className="mr-1 h-3 w-3" />
Kembali ke Login
</a>
</div>
{/* Demo Info */}
<div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
<p className="text-sm font-medium text-blue-800 mb-2">
Demo OTP:
</p> </p>
<div className="text-xs text-blue-700 space-y-1"> <p className="font-medium text-primary bg-primary/10 dark:bg-primary/20 px-3 py-1 rounded-full text-sm inline-block mt-2">
<p> {maskedEmail}
Gunakan kode:{" "} </p>
<span className="font-mono font-bold">1234</span> </CardHeader>
<CardContent className="space-y-6">
{/* Success Alert */}
{actionData?.success && actionData?.message && (
<Alert className="border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-950/30">
<CheckCircle className="h-4 w-4 text-green-600 dark:text-green-400" />
<AlertDescription className="text-green-800 dark:text-green-300">
{actionData.message}
</AlertDescription>
</Alert>
)}
{/* Error Alert */}
{actionData?.errors?.otp && (
<Alert variant="destructive">
<AlertCircle className="h-4 w-4" />
<AlertDescription>{actionData.errors.otp}</AlertDescription>
</Alert>
)}
{/* OTP Input Form */}
<Form method="post">
<input type="hidden" name="email" value={email} />
<input type="hidden" name="_action" value="verify" />
<input type="hidden" name="otp" value={otp.join("")} />
<div className="space-y-6">
{/* OTP Input Fields */}
<div className="space-y-3">
<div className="flex justify-center space-x-3">
{otp.map((digit, index) => (
<Input
key={index}
ref={(el) => (inputRefs.current[index] = el)}
type="text"
maxLength={1}
value={digit}
onChange={(e) =>
handleOtpChange(index, e.target.value)
}
onKeyDown={(e) => handleKeyDown(index, e)}
onPaste={handlePaste}
className={cn(
"w-14 h-14 text-center text-xl font-bold bg-background border-input transition-all duration-200 focus:scale-105",
actionData?.errors?.otp &&
"border-red-500 dark:border-red-400"
)}
autoFocus={index === 0}
/>
))}
</div>
<p className="text-center text-xs text-muted-foreground">
Tempel kode OTP atau ketik manual
</p>
</div>
{/* Timer */}
<div className="text-center">
{timeLeft > 0 ? (
<div className="flex items-center justify-center space-x-2 text-sm text-muted-foreground">
<Clock className="h-4 w-4" />
<span>
Kode kedaluwarsa dalam {formatTime(timeLeft)}
</span>
</div>
) : (
<div className="text-sm text-red-600 dark:text-red-400 font-medium">
Kode OTP telah kedaluwarsa
</div>
)}
</div>
{/* Verify Button */}
<Button
type="submit"
className="w-full bg-green-600 hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-700 text-white shadow-lg transition-all duration-200"
disabled={
otp.join("").length !== 4 ||
isSubmitting ||
timeLeft === 0
}
>
{isVerifying ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Memverifikasi...
</>
) : (
<>
<Shield className="mr-2 h-4 w-4" />
Verifikasi & Masuk
</>
)}
</Button>
</div>
</Form>
{/* Resend OTP */}
<div className="text-center space-y-3">
<p className="text-sm text-muted-foreground">
Tidak menerima kode?
</p> </p>
<p>Atau tunggu countdown habis untuk test resend</p> <Form method="post" className="inline">
<input type="hidden" name="email" value={email} />
<input type="hidden" name="_action" value="resend" />
<Button
type="submit"
variant="outline"
size="sm"
disabled={!canResend || isSubmitting}
className="text-primary border-primary hover:bg-primary/5 dark:hover:bg-primary/10 transition-colors"
>
{isResending ? (
<>
<Loader2 className="mr-2 h-3 w-3 animate-spin" />
Mengirim...
</>
) : (
<>
<RefreshCw className="mr-2 h-3 w-3" />
Kirim Ulang OTP
</>
)}
</Button>
</Form>
</div>
{/* Security Info */}
<div className="p-4 bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 rounded-lg">
<div className="flex items-start space-x-3">
<Mail className="h-5 w-5 text-blue-600 dark:text-blue-400 mt-0.5" />
<div>
<p className="text-sm font-medium text-blue-800 dark:text-blue-300">
Keamanan Email
</p>
<p className="text-xs text-blue-700 dark:text-blue-400 mt-1">
Kode OTP dikirim melalui email terenkripsi untuk
memastikan keamanan akun administrator Anda.
</p>
</div>
</div>
</div>
{/* Demo Info */}
<div className="p-4 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 rounded-lg">
<p className="text-sm font-medium text-amber-800 dark:text-amber-300 mb-2">
Demo OTP:
</p>
<div className="text-xs text-amber-700 dark:text-amber-400 space-y-1">
<p>
Gunakan kode:{" "}
<span className="font-mono font-bold text-lg px-2 py-1 bg-amber-100 dark:bg-amber-900/50 rounded">
1234
</span>
</p>
<p>Atau tunggu countdown habis untuk test resend</p>
</div>
</div>
{/* Back to Login */}
<div className="text-center">
<Link
to="/sys-rijig-administrator/sign-infirst"
className="inline-flex items-center text-sm text-muted-foreground hover:text-primary transition-colors"
>
<ArrowLeft className="mr-1 h-3 w-3" />
Kembali ke Login
</Link>
</div>
</CardContent>
</Card>
{/* Footer */}
<div className="text-center">
<div className="text-xs text-muted-foreground space-y-2">
<p>Portal Administrator - Sistem Pengelolaan Sampah Terpadu</p>
<div className="flex items-center justify-center space-x-4">
<a
href="/privacy"
className="hover:text-primary transition-colors underline underline-offset-4"
>
Privacy
</a>
<span>•</span>
<a
href="/terms"
className="hover:text-primary transition-colors underline underline-offset-4"
>
Terms
</a>
<span>•</span>
<a
href="/support"
className="hover:text-primary transition-colors underline underline-offset-4"
>
Support
</a>
</div> </div>
</div> </div>
</CardContent> </div>
</Card>
{/* Footer */}
<div className="text-center mt-6">
<p className="text-xs text-gray-500">
Sistem Pengelolaan Sampah Terpadu
</p>
</div> </div>
</div> </div>
</div> </div>

146
app/routes/sys-rijig-administrator.sign-infirst.tsx
View File

@ -107,23 +107,30 @@ export default function AdminLogin() {
const isSubmitting = navigation.state === "submitting"; const isSubmitting = navigation.state === "submitting";
return ( return (
<div className="h-full relative w-full overflow-hidden bg-slate-900 flex flex-col items-center justify-center rounded-lg"> <div className="h-full relative w-full overflow-hidden bg-slate-900 dark:bg-slate-950 light:bg-slate-100 flex flex-col items-center justify-center rounded-lg">
<div className="absolute inset-0 w-full h-full bg-slate-900 z-20 [mask-image:radial-gradient(transparent,white)] pointer-events-none" /> {/* Background overlay with theme-aware gradient */}
<div className="absolute inset-0 w-full h-full bg-slate-900 dark:bg-slate-950 light:bg-slate-100 z-20 [mask-image:radial-gradient(transparent,white)] pointer-events-none" />
{/* Animated background boxes */}
<Boxes /> <Boxes />
{/* <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 to-blue-50 p-4 z-20"> */}
<div className="min-h-screen flex items-center justify-center w-full max-w-4xl z-20"> {/* Theme Toggle - Positioned at top-right */}
<div className="flex flex-col gap-6"> <ThemeFloatingDock className="fixed top-6 right-6 z-50" />
<Card className="overflow-hidden border-0 shadow-2xl">
{/* Main content container */}
<div className="min-h-screen flex items-center justify-center w-full max-w-4xl z-20 p-4">
<div className="flex flex-col gap-6 w-full">
<Card className="overflow-hidden border-0 shadow-2xl bg-background/95 backdrop-blur-sm">
<CardContent className="grid p-0 md:grid-cols-2"> <CardContent className="grid p-0 md:grid-cols-2">
{/* Form Login */} {/* Form Login */}
<div className="p-6 md:p-8"> <div className="p-6 md:p-8 bg-background">
<Form method="post" className="flex flex-col gap-6"> <Form method="post" className="flex flex-col gap-6">
{/* Header */} {/* Header */}
<div className="flex flex-col items-center text-center"> <div className="flex flex-col items-center text-center">
<div className="mb-4 p-3 bg-green-100 rounded-full"> <div className="mb-4 p-3 bg-green-100 dark:bg-green-900/30 rounded-full">
<Shield className="h-8 w-8 text-green-600" /> <Shield className="h-8 w-8 text-green-600 dark:text-green-400" />
</div> </div>
<h1 className="text-2xl font-bold text-gray-900"> <h1 className="text-2xl font-bold text-foreground">
Portal Administrator Portal Administrator
</h1> </h1>
<p className="text-muted-foreground text-balance mt-2"> <p className="text-muted-foreground text-balance mt-2">
@ -143,23 +150,26 @@ export default function AdminLogin() {
{/* Email Field */} {/* Email Field */}
<div className="grid gap-3"> <div className="grid gap-3">
<Label htmlFor="email">Email Administrator</Label> <Label htmlFor="email" className="text-foreground">
Email Administrator
</Label>
<div className="relative"> <div className="relative">
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" /> <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input <Input
id="email" id="email"
name="email" name="email"
type="email" type="email"
placeholder="admin@wastemanagement.com" placeholder="admin@wastemanagement.com"
className={cn( className={cn(
"pl-10", "pl-10 bg-background border-input",
actionData?.errors?.email && "border-red-500" actionData?.errors?.email &&
"border-red-500 dark:border-red-400"
)} )}
required required
/> />
</div> </div>
{actionData?.errors?.email && ( {actionData?.errors?.email && (
<p className="text-sm text-red-600"> <p className="text-sm text-red-600 dark:text-red-400">
{actionData.errors.email} {actionData.errors.email}
</p> </p>
)} )}
@ -168,31 +178,34 @@ export default function AdminLogin() {
{/* Password Field */} {/* Password Field */}
<div className="grid gap-3"> <div className="grid gap-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Label htmlFor="password">Password</Label> <Label htmlFor="password" className="text-foreground">
Password
</Label>
<a <a
href="/admin/forgot-password" href="/admin/forgot-password"
className="text-sm text-green-600 hover:text-green-800 underline-offset-2 hover:underline" className="text-sm text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 underline-offset-2 hover:underline transition-colors"
> >
Lupa password? Lupa password?
</a> </a>
</div> </div>
<div className="relative"> <div className="relative">
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" /> <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input <Input
id="password" id="password"
name="password" name="password"
type={showPassword ? "text" : "password"} type={showPassword ? "text" : "password"}
placeholder="Masukkan password" placeholder="Masukkan password"
className={cn( className={cn(
"pl-10 pr-10", "pl-10 pr-10 bg-background border-input",
actionData?.errors?.password && "border-red-500" actionData?.errors?.password &&
"border-red-500 dark:border-red-400"
)} )}
required required
/> />
<button <button
type="button" type="button"
onClick={() => setShowPassword(!showPassword)} onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600" className="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
> >
{showPassword ? ( {showPassword ? (
<EyeOff className="h-4 w-4" /> <EyeOff className="h-4 w-4" />
@ -202,7 +215,7 @@ export default function AdminLogin() {
</button> </button>
</div> </div>
{actionData?.errors?.password && ( {actionData?.errors?.password && (
<p className="text-sm text-red-600"> <p className="text-sm text-red-600 dark:text-red-400">
{actionData.errors.password} {actionData.errors.password}
</p> </p>
)} )}
@ -214,9 +227,12 @@ export default function AdminLogin() {
id="remember" id="remember"
name="remember" name="remember"
type="checkbox" type="checkbox"
className="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded" className="h-4 w-4 text-green-600 focus:ring-green-500 border-input rounded accent-green-600"
/> />
<Label htmlFor="remember" className="text-sm"> <Label
htmlFor="remember"
className="text-sm text-foreground"
>
Ingat saya selama 30 hari Ingat saya selama 30 hari
</Label> </Label>
</div> </div>
@ -224,7 +240,7 @@ export default function AdminLogin() {
{/* Submit Button */} {/* Submit Button */}
<Button <Button
type="submit" type="submit"
className="w-full bg-green-600 hover:bg-green-700" className="w-full bg-green-600 hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-700 text-white shadow-lg transition-all duration-200"
disabled={isSubmitting} disabled={isSubmitting}
> >
{isSubmitting ? ( {isSubmitting ? (
@ -238,11 +254,11 @@ export default function AdminLogin() {
</Button> </Button>
{/* Demo Credentials */} {/* Demo Credentials */}
<div className="p-4 bg-blue-50 border border-blue-200 rounded-lg"> <div className="p-4 bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 rounded-lg">
<p className="text-sm font-medium text-blue-800 mb-2"> <p className="text-sm font-medium text-blue-800 dark:text-blue-300 mb-2">
Demo Credentials: Demo Credentials:
</p> </p>
<div className="text-xs text-blue-700 space-y-1"> <div className="text-xs text-blue-700 dark:text-blue-400 space-y-1">
<p>Email: admin@wastemanagement.com</p> <p>Email: admin@wastemanagement.com</p>
<p>Password: admin123</p> <p>Password: admin123</p>
</div> </div>
@ -250,17 +266,17 @@ export default function AdminLogin() {
</Form> </Form>
</div> </div>
{/* Side Image */} {/* Side Illustration */}
<div className="bg-gradient-to-br from-green-600 to-blue-600 relative hidden md:block"> <div className="bg-gradient-to-br from-green-600 to-blue-600 dark:from-green-700 dark:to-blue-700 relative hidden md:block">
<div className="absolute inset-0 bg-black/20"></div> <div className="absolute inset-0 bg-black/20 dark:bg-black/40"></div>
<div className="relative h-full flex flex-col justify-center items-center text-white p-8"> <div className="relative h-full flex flex-col justify-center items-center text-white p-8">
<div className="mb-6 p-4 bg-white/20 rounded-full backdrop-blur-sm"> <div className="mb-6 p-4 bg-white/20 dark:bg-white/10 rounded-full backdrop-blur-sm">
<Recycle className="h-16 w-16" /> <Recycle className="h-16 w-16" />
</div> </div>
<h2 className="text-2xl font-bold mb-4 text-center"> <h2 className="text-2xl font-bold mb-4 text-center">
Kelola Sistem Sampah Kelola Sistem Sampah
</h2> </h2>
<p className="text-white/90 text-center text-balance leading-relaxed"> <p className="text-white/90 dark:text-white/80 text-center text-balance leading-relaxed">
Platform terpadu untuk mengelola pengumpulan, pengolahan, Platform terpadu untuk mengelola pengumpulan, pengolahan,
dan monitoring sampah di seluruh wilayah dengan efisiensi dan monitoring sampah di seluruh wilayah dengan efisiensi
maksimal. maksimal.
@ -268,29 +284,59 @@ export default function AdminLogin() {
{/* Features List */} {/* Features List */}
<div className="mt-8 space-y-3"> <div className="mt-8 space-y-3">
<div className="flex items-center space-x-3"> {[
<div className="w-2 h-2 bg-white rounded-full"></div> "Monitoring Real-time",
<span className="text-sm">Monitoring Real-time</span> "Manajemen Armada",
</div> "Laporan Analytics",
<div className="flex items-center space-x-3"> "Koordinasi Tim"
<div className="w-2 h-2 bg-white rounded-full"></div> ].map((feature, index) => (
<span className="text-sm">Manajemen Armada</span> <div
</div> key={index}
<div className="flex items-center space-x-3"> className="flex items-center space-x-3 group"
<div className="w-2 h-2 bg-white rounded-full"></div> >
<span className="text-sm">Laporan Analytics</span> <div className="w-2 h-2 bg-white rounded-full group-hover:scale-125 transition-transform duration-200"></div>
</div> <span className="text-sm group-hover:text-white/100 transition-colors duration-200">
<div className="flex items-center space-x-3"> {feature}
<div className="w-2 h-2 bg-white rounded-full"></div> </span>
<span className="text-sm">Koordinasi Tim</span> </div>
</div> ))}
</div> </div>
{/* Decorative Elements */}
<div className="absolute top-10 right-10 w-20 h-20 bg-white/5 rounded-full blur-xl"></div>
<div className="absolute bottom-10 left-10 w-16 h-16 bg-white/5 rounded-full blur-lg"></div>
</div> </div>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
{/* Footer */}
<div className="text-center text-xs text-muted-foreground">
<div className="flex items-center justify-center space-x-4 mb-2">
<a
href="/privacy"
className="hover:text-primary transition-colors underline underline-offset-4"
>
Privacy Policy
</a>
<span>•</span>
<a
href="/terms"
className="hover:text-primary transition-colors underline underline-offset-4"
>
Terms of Service
</a>
<span>•</span>
<a
href="/support"
className="hover:text-primary transition-colors underline underline-offset-4"
>
Support
</a>
</div>
<p>© 2025 Waste Management System. Semua hak dilindungi.</p>
</div>
</div> </div>
<ThemeFloatingDock className="fixed bottom-5 left-1/2 transform -translate-x-1/2" />
</div> </div>
</div> </div>
); );