style: apply consistent code formatting across project files
This commit is contained in:
Firman Ramdhani
+180
-77
@@ -6,20 +6,34 @@ import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/componen
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
|
||||
import { Loader2, Save, CheckCircle, ShieldCheck, UserCircle, KeyRound, LockKeyhole } from 'lucide-react'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@/components/ui/dialog'
|
||||
import {
|
||||
Loader2,
|
||||
Save,
|
||||
CheckCircle,
|
||||
ShieldCheck,
|
||||
UserCircle,
|
||||
KeyRound,
|
||||
LockKeyhole,
|
||||
} from 'lucide-react'
|
||||
|
||||
export default function ProfilePage() {
|
||||
const [user, setUser] = useState<any>(null)
|
||||
const [name, setName] = useState('')
|
||||
const [photo, setPhoto] = useState('')
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
|
||||
// Profile state
|
||||
const [savingProfile, setSavingProfile] = useState(false)
|
||||
const [profileError, setProfileError] = useState('')
|
||||
const [profileSuccess, setProfileSuccess] = useState(false)
|
||||
|
||||
|
||||
// Password state
|
||||
const [oldPassword, setOldPassword] = useState('')
|
||||
const [newPassword, setNewPassword] = useState('')
|
||||
@@ -50,13 +64,13 @@ export default function ProfilePage() {
|
||||
setProfileError('Nama wajib diisi')
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
setProfileError('')
|
||||
setProfileSuccess(false)
|
||||
setSavingProfile(true)
|
||||
|
||||
|
||||
const res = await updateProfile(user.id, name.trim(), photo.trim() || null)
|
||||
|
||||
|
||||
if (res.success) {
|
||||
setUser(res.user)
|
||||
setProfileSuccess(true)
|
||||
@@ -104,167 +118,256 @@ export default function ProfilePage() {
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-[50vh] gap-3">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-[#1B2CC1]" />
|
||||
<span className="text-xs text-slate-500 font-semibold">Memuat profil...</span>
|
||||
<div className="flex min-h-[50vh] flex-col items-center justify-center gap-3">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-[#1B2CC1]" />
|
||||
<span className="text-xs font-semibold text-slate-500">Memuat profil...</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-[50vh] gap-3">
|
||||
<span className="text-xs text-slate-500 font-semibold">Anda belum login.</span>
|
||||
<div className="flex min-h-[50vh] flex-col items-center justify-center gap-3">
|
||||
<span className="text-xs font-semibold text-slate-500">Anda belum login.</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6 animate-in fade-in duration-500 pb-12 max-w-5xl">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
|
||||
<div className="animate-in fade-in max-w-5xl space-y-6 pb-12 duration-500">
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
{/* Left 2 Cols: Forms */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
|
||||
<div className="space-y-6 lg:col-span-2">
|
||||
{/* PROFILE FORM */}
|
||||
<Card className="rounded-3xl border border-slate-200/90 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm overflow-hidden">
|
||||
<div className="p-6 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between">
|
||||
<Card className="overflow-hidden rounded-3xl border border-slate-200/90 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
|
||||
<div className="flex items-center justify-between border-b border-slate-100 p-6 dark:border-slate-800">
|
||||
<div>
|
||||
<h2 className="text-lg font-black text-slate-900 dark:text-white">Informasi Akun</h2>
|
||||
<p className="text-xs text-slate-500 mt-0.5">Ubah nama tampilan dan foto profil Anda.</p>
|
||||
<h2 className="text-lg font-black text-slate-900 dark:text-white">
|
||||
Informasi Akun
|
||||
</h2>
|
||||
<p className="mt-0.5 text-xs text-slate-500">
|
||||
Ubah nama tampilan dan foto profil Anda.
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-[11px] font-bold text-[#1B2CC1] bg-[#1B2CC1]/10 px-2.5 py-1 rounded-full uppercase tracking-wider">
|
||||
<span className="rounded-full bg-[#1B2CC1]/10 px-2.5 py-1 text-[11px] font-bold tracking-wider text-[#1B2CC1] uppercase">
|
||||
{user.role}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSaveProfile}>
|
||||
<CardContent className="p-6 space-y-6">
|
||||
<CardContent className="space-y-6 p-6">
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-bold uppercase tracking-wider text-slate-700 dark:text-slate-300">Foto Profil</Label>
|
||||
<div className="flex flex-col sm:flex-row items-center gap-5 p-5 rounded-2xl border-2 border-dashed border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30">
|
||||
<Label className="text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-slate-300">
|
||||
Foto Profil
|
||||
</Label>
|
||||
<div className="flex flex-col items-center gap-5 rounded-2xl border-2 border-dashed border-slate-200 bg-slate-50/50 p-5 sm:flex-row dark:border-slate-800 dark:bg-slate-800/30">
|
||||
{photo ? (
|
||||
<img src={photo} alt={name} className="w-20 h-20 rounded-2xl object-cover ring-4 ring-white dark:ring-slate-700 shadow-md shrink-0" />
|
||||
<img
|
||||
src={photo}
|
||||
alt={name}
|
||||
className="h-20 w-20 shrink-0 rounded-2xl object-cover shadow-md ring-4 ring-white dark:ring-slate-700"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-20 h-20 rounded-2xl bg-[#1B2CC1]/10 text-[#1B2CC1] flex items-center justify-center font-bold text-2xl ring-4 ring-white dark:ring-slate-700 shadow-sm shrink-0">
|
||||
{name ? name.charAt(0).toUpperCase() : <UserCircle className="w-10 h-10" />}
|
||||
<div className="flex h-20 w-20 shrink-0 items-center justify-center rounded-2xl bg-[#1B2CC1]/10 text-2xl font-bold text-[#1B2CC1] shadow-sm ring-4 ring-white dark:ring-slate-700">
|
||||
{name ? name.charAt(0).toUpperCase() : <UserCircle className="h-10 w-10" />}
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-1.5 flex-1 w-full text-center sm:text-left">
|
||||
<p className="text-xs font-bold text-slate-800 dark:text-slate-200">Pratinjau Avatar</p>
|
||||
<p className="text-[11px] text-slate-400">Masukkan tautan URL foto gambar di bawah untuk memperbarui gambar profil.</p>
|
||||
<div className="w-full flex-1 space-y-1.5 text-center sm:text-left">
|
||||
<p className="text-xs font-bold text-slate-800 dark:text-slate-200">
|
||||
Pratinjau Avatar
|
||||
</p>
|
||||
<p className="text-[11px] text-slate-400">
|
||||
Masukkan tautan URL foto gambar di bawah untuk memperbarui gambar profil.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="prof-name" className="text-xs font-bold uppercase tracking-wider text-slate-700 dark:text-slate-300">
|
||||
<Label
|
||||
htmlFor="prof-name"
|
||||
className="text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-slate-300"
|
||||
>
|
||||
Nama Tampilan <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input id="prof-name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Contoh: Budi Santoso" className="h-11 rounded-xl" />
|
||||
<Input
|
||||
id="prof-name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Contoh: Budi Santoso"
|
||||
className="h-11 rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="prof-photo" className="text-xs font-bold uppercase tracking-wider text-slate-700 dark:text-slate-300">
|
||||
<Label
|
||||
htmlFor="prof-photo"
|
||||
className="text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-slate-300"
|
||||
>
|
||||
URL Foto Profil
|
||||
</Label>
|
||||
<Input id="prof-photo" value={photo} onChange={(e) => setPhoto(e.target.value)} placeholder="https://..." className="h-11 rounded-xl" />
|
||||
<Input
|
||||
id="prof-photo"
|
||||
value={photo}
|
||||
onChange={(e) => setPhoto(e.target.value)}
|
||||
placeholder="https://..."
|
||||
className="h-11 rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
{profileError && (
|
||||
<div className="p-3 bg-red-50 text-red-600 rounded-xl text-xs font-semibold">{profileError}</div>
|
||||
<div className="rounded-xl bg-red-50 p-3 text-xs font-semibold text-red-600">
|
||||
{profileError}
|
||||
</div>
|
||||
)}
|
||||
{profileSuccess && (
|
||||
<div className="p-3 bg-emerald-50 text-emerald-700 rounded-xl text-xs font-bold flex items-center gap-2">
|
||||
<CheckCircle className="w-4 h-4" /><span>Profil berhasil diperbarui!</span>
|
||||
<div className="flex items-center gap-2 rounded-xl bg-emerald-50 p-3 text-xs font-bold text-emerald-700">
|
||||
<CheckCircle className="h-4 w-4" />
|
||||
<span>Profil berhasil diperbarui!</span>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
|
||||
<div className="p-6 bg-slate-50/60 border-t border-slate-100 flex justify-end">
|
||||
<Button type="submit" disabled={savingProfile} className="h-11 px-6 rounded-xl bg-[#1B2CC1] hover:bg-[#15229E] text-white font-bold">
|
||||
{savingProfile ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Save className="w-4 h-4 mr-2" />}
|
||||
<div className="flex justify-end border-t border-slate-100 bg-slate-50/60 p-6">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={savingProfile}
|
||||
className="h-11 rounded-xl bg-[#1B2CC1] px-6 font-bold text-white hover:bg-[#15229E]"
|
||||
>
|
||||
{savingProfile ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Save className="mr-2 h-4 w-4" />
|
||||
)}
|
||||
Simpan Profil
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{/* Right 1 Col: Account Details */}
|
||||
<div className="space-y-6">
|
||||
<Card className="rounded-3xl border border-slate-200/90 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm p-6 space-y-4">
|
||||
<div className="flex items-center gap-2 text-slate-800 dark:text-slate-200 font-bold text-sm mb-0">
|
||||
<ShieldCheck className="w-4 h-4 text-[#1B2CC1]" />
|
||||
<Card className="space-y-4 rounded-3xl border border-slate-200/90 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900">
|
||||
<div className="mb-0 flex items-center gap-2 text-sm font-bold text-slate-800 dark:text-slate-200">
|
||||
<ShieldCheck className="h-4 w-4 text-[#1B2CC1]" />
|
||||
<span>Detail Akun</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 pt-2 border-t border-slate-100 dark:border-slate-800">
|
||||
|
||||
<div className="space-y-2 border-t border-slate-100 pt-2 dark:border-slate-800">
|
||||
<div className="space-y-1">
|
||||
<span className="text-[10px] uppercase font-bold text-slate-400 block">Username</span>
|
||||
<div className="font-semibold text-slate-800 text-sm">{user.username}</div>
|
||||
<span className="block text-[10px] font-bold text-slate-400 uppercase">
|
||||
Username
|
||||
</span>
|
||||
<div className="text-sm font-semibold text-slate-800">{user.username}</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<span className="text-[10px] uppercase font-bold text-slate-400 block">Role Akses</span>
|
||||
<div className="font-semibold text-[#1B2CC1] text-sm uppercase">{user.role}</div>
|
||||
<span className="block text-[10px] font-bold text-slate-400 uppercase">
|
||||
Role Akses
|
||||
</span>
|
||||
<div className="text-sm font-semibold text-[#1B2CC1] uppercase">{user.role}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* PASSWORD CHANGE MODAL BUTTON */}
|
||||
<div className="pt-2 border-t border-slate-100 dark:border-slate-800">
|
||||
<div className="border-t border-slate-100 pt-2 dark:border-slate-800">
|
||||
<Dialog open={isPasswordModalOpen} onOpenChange={setIsPasswordModalOpen}>
|
||||
<DialogTrigger className="cursor-pointer inline-flex items-center justify-center whitespace-nowrap text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#1B2CC1] disabled:pointer-events-none disabled:opacity-50 h-11 px-4 py-2 rounded-xl gap-2 text-[#1B2CC1] hover:text-[#15229E] font-bold border border-[#1B2CC1]/20 bg-[#1B2CC1]/5 hover:bg-[#1B2CC1]/10 w-full">
|
||||
<KeyRound className="w-4 h-4" />
|
||||
<DialogTrigger className="inline-flex h-11 w-full cursor-pointer items-center justify-center gap-2 rounded-xl border border-[#1B2CC1]/20 bg-[#1B2CC1]/5 px-4 py-2 text-sm font-bold whitespace-nowrap text-[#1B2CC1] hover:bg-[#1B2CC1]/10 hover:text-[#15229E] focus-visible:ring-1 focus-visible:ring-[#1B2CC1] focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50">
|
||||
<KeyRound className="h-4 w-4" />
|
||||
Ganti Password
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px] rounded-3xl p-0 overflow-hidden border-slate-200/90 dark:border-slate-800 shadow-xl">
|
||||
<DialogHeader className="p-6 bg-slate-50 dark:bg-slate-900/50 border-b border-slate-100 dark:border-slate-800">
|
||||
<DialogTitle className="text-xl font-black text-slate-900 dark:text-white">Ganti Password</DialogTitle>
|
||||
<p className="text-xs text-slate-500 mt-1">Lindungi akun Anda dengan mengubah password secara berkala.</p>
|
||||
<DialogContent className="overflow-hidden rounded-3xl border-slate-200/90 p-0 shadow-xl sm:max-w-[425px] dark:border-slate-800">
|
||||
<DialogHeader className="border-b border-slate-100 bg-slate-50 p-6 dark:border-slate-800 dark:bg-slate-900/50">
|
||||
<DialogTitle className="text-xl font-black text-slate-900 dark:text-white">
|
||||
Ganti Password
|
||||
</DialogTitle>
|
||||
<p className="mt-1 text-xs text-slate-500">
|
||||
Lindungi akun Anda dengan mengubah password secara berkala.
|
||||
</p>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleChangePassword}>
|
||||
<div className="p-6 space-y-5 bg-white dark:bg-slate-900">
|
||||
<div className="space-y-5 bg-white p-6 dark:bg-slate-900">
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs font-bold uppercase tracking-wider text-slate-700">Password Lama</Label>
|
||||
<Label className="text-xs font-bold tracking-wider text-slate-700 uppercase">
|
||||
Password Lama
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<LockKeyhole className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||
<Input type="password" value={oldPassword} onChange={(e) => setOldPassword(e.target.value)} className="pl-9 h-11 rounded-xl" placeholder="Masukkan password lama" />
|
||||
<LockKeyhole className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-slate-400" />
|
||||
<Input
|
||||
type="password"
|
||||
value={oldPassword}
|
||||
onChange={(e) => setOldPassword(e.target.value)}
|
||||
className="h-11 rounded-xl pl-9"
|
||||
placeholder="Masukkan password lama"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs font-bold uppercase tracking-wider text-slate-700">Password Baru</Label>
|
||||
<Label className="text-xs font-bold tracking-wider text-slate-700 uppercase">
|
||||
Password Baru
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<KeyRound className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||
<Input type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} className="pl-9 h-11 rounded-xl" placeholder="Minimal 6 karakter" />
|
||||
<KeyRound className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-slate-400" />
|
||||
<Input
|
||||
type="password"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
className="h-11 rounded-xl pl-9"
|
||||
placeholder="Minimal 6 karakter"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs font-bold uppercase tracking-wider text-slate-700">Konfirmasi Password Baru</Label>
|
||||
<Label className="text-xs font-bold tracking-wider text-slate-700 uppercase">
|
||||
Konfirmasi Password Baru
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<KeyRound className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||
<Input type="password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} className="pl-9 h-11 rounded-xl" placeholder="Ketik ulang password baru" />
|
||||
<KeyRound className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-slate-400" />
|
||||
<Input
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
className="h-11 rounded-xl pl-9"
|
||||
placeholder="Ketik ulang password baru"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{passwordError && (
|
||||
<div className="p-3 bg-red-50 text-red-600 rounded-xl text-xs font-semibold">{passwordError}</div>
|
||||
<div className="rounded-xl bg-red-50 p-3 text-xs font-semibold text-red-600">
|
||||
{passwordError}
|
||||
</div>
|
||||
)}
|
||||
{passwordSuccess && (
|
||||
<div className="p-3 bg-emerald-50 text-emerald-700 rounded-xl text-xs font-bold flex items-center gap-2">
|
||||
<CheckCircle className="w-4 h-4" /><span>Password berhasil diubah!</span>
|
||||
<div className="flex items-center gap-2 rounded-xl bg-emerald-50 p-3 text-xs font-bold text-emerald-700">
|
||||
<CheckCircle className="h-4 w-4" />
|
||||
<span>Password berhasil diubah!</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-6 bg-slate-50/60 border-t border-slate-100 flex justify-end gap-3">
|
||||
<Button type="button" variant="ghost" onClick={() => setIsPasswordModalOpen(false)} className="h-11 rounded-xl font-bold">Batal</Button>
|
||||
<Button type="submit" disabled={savingPassword} className="h-11 px-6 rounded-xl bg-[#1B2CC1] hover:bg-[#15229E] text-white font-bold">
|
||||
{savingPassword ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Save className="w-4 h-4 mr-2" />}
|
||||
<div className="flex justify-end gap-3 border-t border-slate-100 bg-slate-50/60 p-6">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => setIsPasswordModalOpen(false)}
|
||||
className="h-11 rounded-xl font-bold"
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={savingPassword}
|
||||
className="h-11 rounded-xl bg-[#1B2CC1] px-6 font-bold text-white hover:bg-[#15229E]"
|
||||
>
|
||||
{savingPassword ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Save className="mr-2 h-4 w-4" />
|
||||
)}
|
||||
Ubah Password
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user