462 lines
19 KiB
TypeScript
462 lines
19 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { getSessionUser, updateProfile, changePassword, getSettings, getUserNotificationConfig, updateUserNotificationConfig } from '@/app/actions'
|
|
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card'
|
|
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,
|
|
MessageCircle,
|
|
} 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)
|
|
|
|
// Notification Config state
|
|
const [globalNotifEnabled, setGlobalNotifEnabled] = useState(false)
|
|
const [mmChannelId, setMmChannelId] = useState('')
|
|
const [mmActive, setMmActive] = useState(true)
|
|
const [savingNotif, setSavingNotif] = useState(false)
|
|
const [notifSuccess, setNotifSuccess] = useState(false)
|
|
|
|
// 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('')
|
|
const [confirmPassword, setConfirmPassword] = useState('')
|
|
const [savingPassword, setSavingPassword] = useState(false)
|
|
const [passwordError, setPasswordError] = useState('')
|
|
const [passwordSuccess, setPasswordSuccess] = useState(false)
|
|
const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false)
|
|
|
|
useEffect(() => {
|
|
loadUser()
|
|
}, [])
|
|
|
|
const loadUser = async () => {
|
|
setLoading(true)
|
|
const sessionUser = await getSessionUser()
|
|
if (sessionUser) {
|
|
setUser(sessionUser)
|
|
setName(sessionUser.name)
|
|
setPhoto(sessionUser.photo || '')
|
|
|
|
const [globalSettings, notifConfig] = await Promise.all([
|
|
getSettings(),
|
|
getUserNotificationConfig(sessionUser.id)
|
|
])
|
|
|
|
if (globalSettings?.MATTERMOST_NOTIF_ENABLED === 'true') {
|
|
setGlobalNotifEnabled(true)
|
|
}
|
|
|
|
if (notifConfig?.success && notifConfig.config) {
|
|
setMmChannelId(notifConfig.config.mattermost_channel_id || '')
|
|
setMmActive(notifConfig.config.is_active ?? true)
|
|
}
|
|
}
|
|
setLoading(false)
|
|
}
|
|
|
|
const handleSaveProfile = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (!name.trim()) {
|
|
setProfileError('Nama wajib diisi')
|
|
return
|
|
}
|
|
|
|
setProfileError('')
|
|
setProfileSuccess(false)
|
|
setSavingProfile(true)
|
|
|
|
const [res, notifRes] = await Promise.all([
|
|
updateProfile(user.id, name.trim(), photo.trim() || null),
|
|
globalNotifEnabled ? updateUserNotificationConfig(user.id, {
|
|
mattermost_channel_id: mmChannelId,
|
|
is_active: mmActive
|
|
}) : Promise.resolve({ success: true, error: null })
|
|
])
|
|
|
|
if (res.success && notifRes.success) {
|
|
setUser(res.user)
|
|
setProfileSuccess(true)
|
|
setTimeout(() => setProfileSuccess(false), 3000)
|
|
} else {
|
|
setProfileError(res.error || notifRes.error || 'Terjadi kesalahan')
|
|
}
|
|
setSavingProfile(false)
|
|
}
|
|
|
|
const handleChangePassword = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setPasswordError('')
|
|
setPasswordSuccess(false)
|
|
|
|
if (!oldPassword || !newPassword || !confirmPassword) {
|
|
setPasswordError('Semua field wajib diisi')
|
|
return
|
|
}
|
|
if (newPassword !== confirmPassword) {
|
|
setPasswordError('Konfirmasi password tidak cocok')
|
|
return
|
|
}
|
|
if (newPassword.length < 6) {
|
|
setPasswordError('Password baru minimal 6 karakter')
|
|
return
|
|
}
|
|
|
|
setSavingPassword(true)
|
|
const res = await changePassword(user.id, oldPassword, newPassword)
|
|
if (res.success) {
|
|
setPasswordSuccess(true)
|
|
setOldPassword('')
|
|
setNewPassword('')
|
|
setConfirmPassword('')
|
|
setTimeout(() => {
|
|
setPasswordSuccess(false)
|
|
setIsPasswordModalOpen(false)
|
|
}, 2000)
|
|
} else {
|
|
setPasswordError(res.error || 'Gagal mengubah password')
|
|
}
|
|
setSavingPassword(false)
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<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 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="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="space-y-6 lg:col-span-2">
|
|
{/* PROFILE FORM */}
|
|
<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="mt-0.5 text-xs text-slate-500">
|
|
Ubah nama tampilan dan foto profil Anda.
|
|
</p>
|
|
</div>
|
|
<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="space-y-6 p-6">
|
|
<div className="space-y-2">
|
|
<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="h-20 w-20 shrink-0 rounded-2xl object-cover shadow-md ring-4 ring-white dark:ring-slate-700"
|
|
/>
|
|
) : (
|
|
<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="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 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"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<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"
|
|
/>
|
|
</div>
|
|
|
|
{globalNotifEnabled && (
|
|
<div className="space-y-6 pt-6 mt-6 border-t border-slate-100 dark:border-slate-800">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400">
|
|
<MessageCircle className="h-5 w-5" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-sm font-bold text-slate-900 dark:text-white">
|
|
Notifikasi Mattermost
|
|
</h3>
|
|
<p className="mt-0.5 text-[11px] text-slate-500">
|
|
Terima update pesanan PO langsung di DM Mattermost Anda.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-row items-start space-x-3 space-y-0 rounded-md border border-slate-200 p-4 dark:border-slate-800">
|
|
<input
|
|
type="checkbox"
|
|
id="mmActive"
|
|
checked={mmActive}
|
|
onChange={(e) => setMmActive(e.target.checked)}
|
|
className="mt-1 h-4 w-4 rounded border-slate-300 text-[#1B2CC1] focus:ring-[#1B2CC1]"
|
|
/>
|
|
<div className="space-y-1 leading-none">
|
|
<Label htmlFor="mmActive" className="text-sm font-bold">
|
|
Aktifkan Notifikasi
|
|
</Label>
|
|
<p className="text-[11px] text-slate-500">
|
|
Kirim notifikasi setiap kali ada yang merubah pesanannya di PO Anda.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="mm-channel" className="text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-slate-300">
|
|
Username / Channel ID
|
|
</Label>
|
|
<Input
|
|
id="mm-channel"
|
|
value={mmChannelId}
|
|
onChange={(e) => setMmChannelId(e.target.value)}
|
|
placeholder="Contoh: @firman atau 9dpxnitm..."
|
|
className="h-11 rounded-xl"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{profileError && (
|
|
<div className="rounded-xl bg-red-50 p-3 text-xs font-semibold text-red-600">
|
|
{profileError}
|
|
</div>
|
|
)}
|
|
{profileSuccess && (
|
|
<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>Perubahan berhasil disimpan!</span>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
|
|
<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="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 border-t border-slate-100 pt-2 dark:border-slate-800">
|
|
<div className="space-y-1">
|
|
<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="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="border-t border-slate-100 pt-2 dark:border-slate-800">
|
|
<Dialog open={isPasswordModalOpen} onOpenChange={setIsPasswordModalOpen}>
|
|
<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="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="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 tracking-wider text-slate-700 uppercase">
|
|
Password Lama
|
|
</Label>
|
|
<div className="relative">
|
|
<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 tracking-wider text-slate-700 uppercase">
|
|
Password Baru
|
|
</Label>
|
|
<div className="relative">
|
|
<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 tracking-wider text-slate-700 uppercase">
|
|
Konfirmasi Password Baru
|
|
</Label>
|
|
<div className="relative">
|
|
<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="rounded-xl bg-red-50 p-3 text-xs font-semibold text-red-600">
|
|
{passwordError}
|
|
</div>
|
|
)}
|
|
{passwordSuccess && (
|
|
<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="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>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|