mirror of
https://github.com/rgrgogu/new_starr.git
synced 2026-09-27 00:12:54 +08:00
Initial
This commit is contained in:
rgrgogu
@@ -0,0 +1,510 @@
|
||||
import { useAuth } from '@/contexts/AuthContext'
|
||||
import { useState } from 'react'
|
||||
import { Camera, Phone, MapPin, Shield, Trophy, Activity, Plus, Trash2, Pencil, Home, Building2, Edit2, Check, X } from 'lucide-react'
|
||||
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '@/components/ui/alert-dialog'
|
||||
import { useForm, Controller } from 'react-hook-form'
|
||||
import { z } from 'zod'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
|
||||
import { MOCK_ACTIVITIES, MOCK_ACHIEVEMENTS, ROLE_CONFIG, ACTIVITY_VARIANTS, AVATAR_COLORS } from '@/data/profile.data'
|
||||
|
||||
// ─── Schemas ──────────────────────────────────────────────────────────────────
|
||||
const addressSchema = z.object({
|
||||
address_type: z.string().min(1, 'Required'),
|
||||
street: z.string().min(1, 'Required'),
|
||||
city: z.string().min(1, 'Required'),
|
||||
state: z.string().min(1, 'Required'),
|
||||
zip: z.string().min(1, 'Required'),
|
||||
country: z.string().min(1, 'Required'),
|
||||
})
|
||||
|
||||
const phoneSchema = z.object({
|
||||
phone_type: z.string().min(1, 'Required'),
|
||||
country_code: z.string().min(1, 'Required'),
|
||||
number: z.string().min(7, 'Required'),
|
||||
})
|
||||
|
||||
// ─── Address Dialog ───────────────────────────────────────────────────────────
|
||||
function AddressDialog({ open, onClose, initial, onSave }) {
|
||||
const { register, handleSubmit, control, formState: { errors } } = useForm({
|
||||
resolver: zodResolver(addressSchema),
|
||||
defaultValues: initial ?? {
|
||||
address_type: 'home', street: '', city: '',
|
||||
state: '', zip: '', country: 'Philippines',
|
||||
},
|
||||
})
|
||||
|
||||
const onSubmit = (data) => {
|
||||
onSave({ ...data, full_address: `${data.street}, ${data.city}, ${data.state}, ${data.country}, ${data.zip}` })
|
||||
onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onClose}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{initial ? 'Edit address' : 'Add address'}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-3 py-1">
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label>Address type</Label>
|
||||
<Controller name="address_type" control={control} render={({ field }) => (
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<SelectTrigger><SelectValue placeholder="Select type" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="home">Home</SelectItem>
|
||||
<SelectItem value="work">Work</SelectItem>
|
||||
<SelectItem value="province">Province</SelectItem>
|
||||
<SelectItem value="other">Other</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)} />
|
||||
{errors.address_type && <p className="text-xs text-destructive">{errors.address_type.message}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label>Street</Label>
|
||||
<Input placeholder="123 Mabini St" {...register('street')} />
|
||||
{errors.street && <p className="text-xs text-destructive">{errors.street.message}</p>}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label>City</Label>
|
||||
<Input placeholder="Manila" {...register('city')} />
|
||||
{errors.city && <p className="text-xs text-destructive">{errors.city.message}</p>}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>State / Region</Label>
|
||||
<Input placeholder="NCR" {...register('state')} />
|
||||
{errors.state && <p className="text-xs text-destructive">{errors.state.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label>ZIP code</Label>
|
||||
<Input placeholder="1000" {...register('zip')} />
|
||||
{errors.zip && <p className="text-xs text-destructive">{errors.zip.message}</p>}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Country</Label>
|
||||
<Input placeholder="Philippines" {...register('country')} />
|
||||
{errors.country && <p className="text-xs text-destructive">{errors.country.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="pt-2">
|
||||
<Button type="button" variant="outline" onClick={onClose}>Cancel</Button>
|
||||
<Button type="submit">{initial ? 'Save changes' : 'Add address'}</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Phone Dialog ─────────────────────────────────────────────────────────────
|
||||
function PhoneDialog({ open, onClose, initial, onSave }) {
|
||||
const { register, handleSubmit, control, formState: { errors } } = useForm({
|
||||
resolver: zodResolver(phoneSchema),
|
||||
defaultValues: initial ?? { phone_type: 'mobile', country_code: '63', number: '' },
|
||||
})
|
||||
|
||||
const onSubmit = (data) => {
|
||||
onSave({ ...data, full_number: data.country_code + data.number })
|
||||
onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onClose}>
|
||||
<DialogContent className="max-w-sm">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{initial ? 'Edit phone number' : 'Add phone number'}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-3 py-1">
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label>Phone type</Label>
|
||||
<Controller name="phone_type" control={control} render={({ field }) => (
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<SelectTrigger><SelectValue placeholder="Select type" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="mobile">Mobile</SelectItem>
|
||||
<SelectItem value="home">Home</SelectItem>
|
||||
<SelectItem value="work">Work</SelectItem>
|
||||
<SelectItem value="other">Other</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)} />
|
||||
{errors.phone_type && <p className="text-xs text-destructive">{errors.phone_type.message}</p>}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<div className="space-y-1.5 w-24">
|
||||
<Label>Code</Label>
|
||||
<Input placeholder="63" {...register('country_code')} />
|
||||
{errors.country_code && <p className="text-xs text-destructive">{errors.country_code.message}</p>}
|
||||
</div>
|
||||
<div className="space-y-1.5 flex-1">
|
||||
<Label>Number</Label>
|
||||
<Input placeholder="9123456789" {...register('number')} />
|
||||
{errors.number && <p className="text-xs text-destructive">{errors.number.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="pt-2">
|
||||
<Button type="button" variant="outline" onClick={onClose}>Cancel</Button>
|
||||
<Button type="submit">{initial ? 'Save changes' : 'Add number'}</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Delete Confirm ───────────────────────────────────────────────────────────
|
||||
function DeleteConfirm({ open, onClose, onConfirm, label }) {
|
||||
return (
|
||||
<AlertDialog open={open} onOpenChange={onClose}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete {label}?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This will remove the {label} from your profile. This cannot be undone.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={onConfirm}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
>
|
||||
Delete
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Page ─────────────────────────────────────────────────────────────────────
|
||||
export default function ProfilePage() {
|
||||
const { user } = useAuth()
|
||||
const isClient = user?.acc_type === 'client'
|
||||
const role = ROLE_CONFIG[user?.acc_type] ?? { label: user?.acc_type, variant: 'outline' }
|
||||
const info = user?.personal_info
|
||||
|
||||
const [editing, setEditing] = useState(false)
|
||||
const [addresses, setAddresses] = useState(info?.addresses ?? [])
|
||||
const [phones, setPhones] = useState(info?.phone_number ?? [])
|
||||
|
||||
const [addrDialog, setAddrDialog] = useState({ open: false, index: null })
|
||||
const [deleteAddr, setDeleteAddr] = useState({ open: false, index: null })
|
||||
const [phoneDialog, setPhoneDialog] = useState({ open: false, index: null })
|
||||
const [deletePhone, setDeletePhone] = useState({ open: false, index: null })
|
||||
|
||||
const fullName = info?.name?.full_name ?? user?.email ?? 'User'
|
||||
const initials = ((info?.name?.given_name?.[0] ?? '') + (info?.name?.last_name?.[0] ?? '')).toUpperCase() || user?.email?.[0]?.toUpperCase() || 'U'
|
||||
const avatarUrl = info?.avatar ?? null
|
||||
const avatarColor = AVATAR_COLORS[user?.acc_type] ?? 'bg-muted text-muted-foreground'
|
||||
|
||||
// ── Address handlers ──
|
||||
const handleSaveAddress = (data) => {
|
||||
if (addrDialog.index !== null) {
|
||||
setAddresses((p) => p.map((a, i) => i === addrDialog.index ? data : a))
|
||||
} else {
|
||||
setAddresses((p) => [...p, data])
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteAddress = () => {
|
||||
setAddresses((p) => p.filter((_, i) => i !== deleteAddr.index))
|
||||
setDeleteAddr({ open: false, index: null })
|
||||
}
|
||||
|
||||
// ── Phone handlers ──
|
||||
const handleSavePhone = (data) => {
|
||||
if (phoneDialog.index !== null) {
|
||||
setPhones((p) => p.map((ph, i) => i === phoneDialog.index ? data : ph))
|
||||
} else {
|
||||
setPhones((p) => [...p, data])
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeletePhone = () => {
|
||||
setPhones((p) => p.filter((_, i) => i !== deletePhone.index))
|
||||
setDeletePhone({ open: false, index: null })
|
||||
}
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<div className="min-h-screen bg-muted/30 p-4 md:p-8">
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
|
||||
{/* ── Header ── */}
|
||||
<Card>
|
||||
<CardContent className="py-4">
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-5">
|
||||
<div className="relative">
|
||||
<Avatar className="w-20 h-20">
|
||||
<AvatarImage src={avatarUrl} alt={fullName} />
|
||||
<AvatarFallback className={`text-lg font-semibold ${avatarColor}`}>{initials}</AvatarFallback>
|
||||
</Avatar>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button className="absolute -bottom-1 -right-1 p-1.5 rounded-full bg-primary text-primary-foreground shadow hover:opacity-80 transition-opacity">
|
||||
<Camera size={11} />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Change photo</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
{/* Name + role */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<h1 className="text-xl font-semibold">{fullName}</h1>
|
||||
<p className="text-sm text-muted-foreground">{user?.email}</p>
|
||||
<div className="mt-2 flex items-center gap-2 flex-wrap">
|
||||
<Badge className="bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300">
|
||||
{info.occupation}
|
||||
</Badge>
|
||||
<Badge variant={role.variant}>{role.label}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ← Outside flex-1, sits at the end */}
|
||||
<div className="flex gap-2 shrink-0">
|
||||
{editing ? (
|
||||
<>
|
||||
<Button size="sm" onClick={() => setEditing(false)} className="gap-1.5">
|
||||
<Check size={13} /> Save profile
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" onClick={() => setEditing(false)} className="gap-1.5">
|
||||
<X size={13} /> Cancel
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button size="sm" variant="outline" onClick={() => setEditing(true)} className="gap-1.5">
|
||||
<Edit2 size={13} /> Edit profile
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
|
||||
{/* ── Left: Phone + Address ── */}
|
||||
<div className="md:col-span-1 space-y-4">
|
||||
|
||||
{/* Phone numbers */}
|
||||
<Card>
|
||||
<CardHeader className="">
|
||||
<CardTitle className="text-sm font-semibold flex items-center gap-2">
|
||||
<Phone size={14} className="text-muted-foreground" />
|
||||
Phone numbers
|
||||
{editing && (
|
||||
<Button size="icon" variant="ghost" className="ml-auto size-6 rounded-md"
|
||||
onClick={() => setPhoneDialog({ open: true, index: null })}>
|
||||
<Plus size={13} />
|
||||
</Button>
|
||||
)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Separator className="" />
|
||||
{phones.length === 0 ? (
|
||||
<p className="text-xs text-muted-foreground py-2">No phone numbers added.</p>
|
||||
) : (
|
||||
<div className="divide-y m-0">
|
||||
{phones.map((p, i) => (
|
||||
<div key={i} className="flex items-center gap-2 group py-2.5">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium">+{p.country_code} {p.number}</p>
|
||||
<p className="text-xs text-muted-foreground capitalize">{p.phone_type}</p>
|
||||
</div>
|
||||
{editing && (
|
||||
<div className="flex gap-1 shrink-0">
|
||||
<Button size="icon" variant="ghost" className="size-6 rounded-md"
|
||||
onClick={() => setPhoneDialog({ open: true, index: i })}>
|
||||
<Pencil size={11} />
|
||||
</Button>
|
||||
<Button size="icon" variant="ghost" className="size-6 rounded-md text-destructive hover:text-destructive"
|
||||
onClick={() => setDeletePhone({ open: true, index: i })}>
|
||||
<Trash2 size={11} />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Addresses */}
|
||||
<Card>
|
||||
<CardHeader className="">
|
||||
<CardTitle className="text-sm font-semibold flex items-center gap-2">
|
||||
<MapPin size={14} className="text-muted-foreground" />
|
||||
Addresses
|
||||
{editing && (
|
||||
<Button size="icon" variant="ghost" className="ml-auto size-6 rounded-md"
|
||||
onClick={() => setAddrDialog({ open: true, index: null })}>
|
||||
<Plus size={13} />
|
||||
</Button>
|
||||
)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Separator className="" />
|
||||
{addresses.length === 0 ? (
|
||||
<p className="text-xs text-muted-foreground py-2">No addresses added.</p>
|
||||
) : (
|
||||
<div className="divide-y">
|
||||
{addresses.map((a, i) => (
|
||||
<div key={i} className="flex items-start gap-2 group py-2.5">
|
||||
{a.address_type === 'work'
|
||||
? <Building2 size={13} className="mt-1 text-muted-foreground shrink-0" />
|
||||
: <Home size={13} className="mt-1 text-muted-foreground shrink-0" />
|
||||
}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs font-medium capitalize text-muted-foreground">{a.address_type}</p>
|
||||
<p className="text-sm leading-snug">{a.full_address}</p>
|
||||
</div>
|
||||
<div className="flex gap-1 shrink-0">
|
||||
{editing && (
|
||||
<div className="flex gap-1 shrink-0">
|
||||
<Button size="icon" variant="ghost" className="size-6 rounded-md"
|
||||
onClick={() => setAddrDialog({ open: true, index: i })}>
|
||||
<Pencil size={11} />
|
||||
</Button>
|
||||
<Button size="icon" variant="ghost" className="size-6 rounded-md text-destructive hover:text-destructive"
|
||||
onClick={() => setDeleteAddr({ open: true, index: i })}>
|
||||
<Trash2 size={11} />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* ── Right column ── */}
|
||||
<div className="md:col-span-2 space-y-6">
|
||||
{isClient ? (
|
||||
<>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-semibold flex items-center gap-2">
|
||||
<Activity size={14} className="text-muted-foreground" />
|
||||
Recent activities
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Separator className="mb-1" />
|
||||
<div className="divide-y">
|
||||
{MOCK_ACTIVITIES.map((item) => (
|
||||
<div key={item.id} className="flex items-start gap-3 py-3">
|
||||
<Badge variant={ACTIVITY_VARIANTS[item.type]} className="mt-0.5 capitalize shrink-0">
|
||||
{item.type}
|
||||
</Badge>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium leading-snug">{item.label}</p>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">{item.date}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-semibold flex items-center gap-2">
|
||||
<Trophy size={14} className="text-muted-foreground" />
|
||||
Achievements
|
||||
<Badge variant="secondary" className="ml-auto">{MOCK_ACHIEVEMENTS.length} earned</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Separator className="mb-3" />
|
||||
<div className="space-y-2">
|
||||
{MOCK_ACHIEVEMENTS.map((item) => (
|
||||
<div key={item.id} className="flex items-center gap-3 p-3 rounded-lg border bg-card hover:bg-accent/50 transition-colors">
|
||||
<span className="text-2xl">{item.icon}</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-semibold">{item.title}</p>
|
||||
<p className="text-xs text-muted-foreground">{item.desc}</p>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground whitespace-nowrap">{item.date}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
) : (
|
||||
<Card className="h-full">
|
||||
<CardContent className="flex flex-col items-center justify-center text-center gap-3 min-h-48 pt-6">
|
||||
<Shield size={32} className="text-muted-foreground/30" />
|
||||
<div>
|
||||
<p className="text-sm font-medium">Nothing else to show</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Activities and achievements are only visible to clients.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Dialogs ── */}
|
||||
<AddressDialog
|
||||
open={addrDialog.open}
|
||||
onClose={() => setAddrDialog({ open: false, index: null })}
|
||||
initial={addrDialog.index !== null ? addresses[addrDialog.index] : null}
|
||||
onSave={handleSaveAddress}
|
||||
/>
|
||||
<DeleteConfirm
|
||||
open={deleteAddr.open}
|
||||
onClose={() => setDeleteAddr({ open: false, index: null })}
|
||||
onConfirm={handleDeleteAddress}
|
||||
label="address"
|
||||
/>
|
||||
<PhoneDialog
|
||||
open={phoneDialog.open}
|
||||
onClose={() => setPhoneDialog({ open: false, index: null })}
|
||||
initial={phoneDialog.index !== null ? phones[phoneDialog.index] : null}
|
||||
onSave={handleSavePhone}
|
||||
/>
|
||||
<DeleteConfirm
|
||||
open={deletePhone.open}
|
||||
onClose={() => setDeletePhone({ open: false, index: null })}
|
||||
onConfirm={handleDeletePhone}
|
||||
label="phone number"
|
||||
/>
|
||||
</TooltipProvider>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,308 @@
|
||||
import { useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { useAuth } from '@/contexts/AuthContext'
|
||||
import { useTheme } from '@/contexts/ThemeContext'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { z } from 'zod'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'
|
||||
import { Dialog, DialogContent } from '@/components/ui/dialog'
|
||||
import { AlertDialog, AlertDialogContent, } from '@/components/ui/alert-dialog'
|
||||
|
||||
import { User, Settings, LogOut, X, Sun, Moon, Monitor, Lock, Loader2, Check } from 'lucide-react'
|
||||
|
||||
import { AVATAR_COLORS } from '@/data/profile.data'
|
||||
|
||||
// ─── Password schema ──────────────────────────────────────────────────────────
|
||||
const passwordSchema = z.object({
|
||||
current_password: z.string().min(1, 'Current password is required'),
|
||||
new_password: z.string().min(8, 'At least 8 characters'),
|
||||
confirm_password: z.string(),
|
||||
}).refine((d) => d.new_password === d.confirm_password, {
|
||||
message: 'Passwords do not match',
|
||||
path: ['confirm_password'],
|
||||
})
|
||||
|
||||
// ─── Theme Option ─────────────────────────────────────────────────────────────
|
||||
function ThemeOption({ value, label, icon: Icon, active, onClick }) {
|
||||
return (
|
||||
<button
|
||||
onClick={() => onClick(value)}
|
||||
className={`flex flex-col items-center gap-2 p-3 rounded-lg border-2 transition-all cursor-pointer w-full
|
||||
${active
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-border hover:border-muted-foreground/40 hover:bg-muted/40'
|
||||
}`}
|
||||
>
|
||||
<Icon size={18} className={active ? 'text-primary' : 'text-muted-foreground'} />
|
||||
<span className={`text-xs font-medium ${active ? 'text-primary' : 'text-muted-foreground'}`}>
|
||||
{label}
|
||||
</span>
|
||||
{active && (
|
||||
<span className="absolute top-2 right-2">
|
||||
<Check size={12} className="text-primary" />
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Settings Dialog ──────────────────────────────────────────────────────────
|
||||
function SettingsDialog({ open, onClose }) {
|
||||
const { theme, setTheme } = useTheme()
|
||||
const [tab, setTab] = useState('appearance')
|
||||
const [pwSuccess, setPwSuccess] = useState(false)
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { errors, isSubmitting },
|
||||
} = useForm({ resolver: zodResolver(passwordSchema) })
|
||||
|
||||
const onPasswordSubmit = async (data) => {
|
||||
// TODO: call your API here
|
||||
// await api.post('/auth/change-password', data)
|
||||
await new Promise((r) => setTimeout(r, 800)) // mock delay
|
||||
setPwSuccess(true)
|
||||
reset()
|
||||
setTimeout(() => setPwSuccess(false), 3000)
|
||||
}
|
||||
|
||||
const TABS = [
|
||||
{ id: 'appearance', label: 'Appearance', icon: Sun },
|
||||
{ id: 'password', label: 'Password', icon: Lock },
|
||||
]
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onClose}>
|
||||
<DialogContent className="p-0 overflow-hidden max-w-2xl gap-0 rounded-2xl">
|
||||
<div className="flex h-[480px]">
|
||||
|
||||
{/* ── Sidebar ── */}
|
||||
<div className="w-52 shrink-0 border-r bg-muted/30 flex flex-col">
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b">
|
||||
<span className="text-sm font-semibold">Settings</span>
|
||||
<Button variant="ghost" size="icon" className="size-7 rounded-md" onClick={onClose}>
|
||||
<X size={14} />
|
||||
</Button>
|
||||
</div>
|
||||
<nav className="flex-1 p-2 space-y-0.5">
|
||||
{TABS.map((t) => (
|
||||
<button
|
||||
key={t.id}
|
||||
onClick={() => setTab(t.id)}
|
||||
className={`w-full flex items-center gap-2.5 px-3 py-2 rounded-md text-sm font-medium transition-colors text-left
|
||||
${tab === t.id
|
||||
? 'bg-background text-foreground shadow-sm border border-border/50'
|
||||
: 'text-muted-foreground hover:text-foreground hover:bg-background/60'
|
||||
}`}
|
||||
>
|
||||
<t.icon size={14} />
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* ── Content ── */}
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
|
||||
{/* Appearance */}
|
||||
{tab === 'appearance' && (
|
||||
<div className="space-y-5">
|
||||
<div>
|
||||
<h2 className="text-base font-semibold">Appearance</h2>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
Choose how the interface looks for you.
|
||||
</p>
|
||||
</div>
|
||||
<Separator />
|
||||
<div>
|
||||
<Label className="text-sm font-medium mb-3 block">Theme</Label>
|
||||
<div className="grid grid-cols-3 gap-3 relative">
|
||||
<ThemeOption value="light" label="Light" icon={Sun} active={theme === 'light'} onClick={setTheme} />
|
||||
<ThemeOption value="dark" label="Dark" icon={Moon} active={theme === 'dark'} onClick={setTheme} />
|
||||
<ThemeOption value="system" label="System" icon={Monitor} active={theme === 'system'} onClick={setTheme} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Password */}
|
||||
{tab === 'password' && (
|
||||
<div className="space-y-5">
|
||||
<div>
|
||||
<h2 className="text-base font-semibold">Change password</h2>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
Update your password to keep your account secure.
|
||||
</p>
|
||||
</div>
|
||||
<Separator />
|
||||
|
||||
{pwSuccess && (
|
||||
<div className="flex items-center gap-2 text-sm text-green-600 bg-green-50 dark:bg-green-900/20 dark:text-green-400 px-3 py-2 rounded-md border border-green-200 dark:border-green-800">
|
||||
<Check size={14} /> Password updated successfully.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit(onPasswordSubmit)} className="space-y-4">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="current_password">Current password</Label>
|
||||
<Input
|
||||
id="current_password"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
disabled={isSubmitting}
|
||||
{...register('current_password')}
|
||||
/>
|
||||
{errors.current_password && (
|
||||
<p className="text-xs text-destructive">{errors.current_password.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="new_password">New password</Label>
|
||||
<Input
|
||||
id="new_password"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
disabled={isSubmitting}
|
||||
{...register('new_password')}
|
||||
/>
|
||||
{errors.new_password && (
|
||||
<p className="text-xs text-destructive">{errors.new_password.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="confirm_password">Confirm new password</Label>
|
||||
<Input
|
||||
id="confirm_password"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
disabled={isSubmitting}
|
||||
{...register('confirm_password')}
|
||||
/>
|
||||
{errors.confirm_password && (
|
||||
<p className="text-xs text-destructive">{errors.confirm_password.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button type="submit" size="sm" disabled={isSubmitting} className="gap-1.5">
|
||||
{isSubmitting ? (
|
||||
<><Loader2 size={13} className="animate-spin" /> Updating...</>
|
||||
) : (
|
||||
'Update password'
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Sign Out Overlay ─────────────────────────────────────────────────────────
|
||||
function SignOutOverlay({ open }) {
|
||||
return (
|
||||
<AlertDialog open={open}>
|
||||
<AlertDialogContent className="max-w-xs">
|
||||
<div className="flex flex-col items-center justify-center gap-4 py-6">
|
||||
<Loader2 className="size-8 animate-spin text-muted-foreground" />
|
||||
<p className="text-sm font-medium">Signing out...</p>
|
||||
</div>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Main UserMenu ────────────────────────────────────────────────────────────
|
||||
export default function UserMenu() {
|
||||
const { user, logout } = useAuth()
|
||||
const navigate = useNavigate()
|
||||
|
||||
const [settingsOpen, setSettingsOpen] = useState(false)
|
||||
const [signingOut, setSigningOut] = useState(false)
|
||||
|
||||
// Build initials from personal_info or fallback to acc_type first char
|
||||
const given = user?.personal_info?.name?.given_name ?? ''
|
||||
const last = user?.personal_info?.name?.last_name ?? ''
|
||||
|
||||
console.log('given', user, given, last)
|
||||
const initials = given && last
|
||||
? (given[0] + last[0]).toUpperCase()
|
||||
: (user?.email?.[0] ?? 'U').toUpperCase()
|
||||
|
||||
const fullName = given && last ? `${given} ${last}` : user?.email ?? 'User'
|
||||
const shortName = (given || user?.email) ?? 'User'
|
||||
const avatarUrl = user?.personal_info?.avatar ?? null
|
||||
const avatarColor = AVATAR_COLORS[user?.acc_type] ?? 'bg-muted text-muted-foreground'
|
||||
|
||||
const handleLogout = async () => {
|
||||
setSigningOut(true)
|
||||
await logout()
|
||||
navigate('/login', { replace: true })
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Avatar className="rounded-lg cursor-pointer hover:opacity-80 transition-opacity size-9">
|
||||
<AvatarImage src={avatarUrl ?? ''} alt={fullName} />
|
||||
<AvatarFallback className={`text-sm font-semibold ${avatarColor}`}>
|
||||
{initials}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</DropdownMenuTrigger>
|
||||
|
||||
<DropdownMenuContent align="end" className="w-64">
|
||||
{/* User info */}
|
||||
<div className="px-2 py-2">
|
||||
<p className="text-sm font-semibold truncate">{shortName}</p>
|
||||
<p className="text-xs text-muted-foreground truncate">{user?.email ?? '—'}</p>
|
||||
</div>
|
||||
|
||||
<DropdownMenuSeparator />
|
||||
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem onClick={() => navigate('my-profile')}>
|
||||
<User className="size-4" />
|
||||
<span className="font-medium">Profile</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setSettingsOpen(true)}>
|
||||
<Settings className="size-4" />
|
||||
<span className="font-medium">Settings</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
|
||||
<DropdownMenuSeparator />
|
||||
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem variant="destructive" onClick={handleLogout}>
|
||||
<LogOut className="size-4" />
|
||||
<span className="font-medium">Sign out</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
{/* Settings dialog */}
|
||||
<SettingsDialog open={settingsOpen} onClose={() => setSettingsOpen(false)} />
|
||||
|
||||
{/* Sign out overlay */}
|
||||
<SignOutOverlay open={signingOut} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user