kennethscoffee/starr-philproperties
1
0
Fork 0
mirror of https://github.com/rgrgogu/new_starr.git synced 2026-09-27 00:12:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

ready to test

Browse Source 
Testing

Signed-off-by: Kenneth Obsequio <k80308392@gmail.com>
This commit is contained in:
kennethobsequio
2026-06-22 10:07:20 +08:00
parent 56d984a26a
commit fbef7cb6e6
283 changed files with 25961 additions and 1072 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/generic/Profile.jsx
+71 -45
View File
@@ -1,6 +1,8 @@
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 { useProfile } from '@/contexts/ProfileProvider'
import { useState, useEffect } from 'react'
import { Camera, Loader2, Phone, MapPin, Shield, Trophy, Activity, Plus, Trash2, Pencil, Home, Building2, Edit2, Check, X } from 'lucide-react'
import AvatarUploadDialog from '@/components/generic/AvatarUploadDialog'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
@@ -10,14 +12,14 @@ 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 { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose } 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'
import { ROLE_CONFIG, AVATAR_COLORS } from '@/data/profile.data'
// ─── Schemas ──────────────────────────────────────────────────────────────────
const addressSchema = z.object({
@@ -52,7 +54,7 @@ function AddressDialog({ open, onClose, initial, onSave }) {
return (
<Dialog open={open} onOpenChange={onClose}>
<DialogContent className="max-w-md">
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>{initial ? 'Edit address' : 'Add address'}</DialogTitle>
</DialogHeader>
@@ -106,8 +108,10 @@ function AddressDialog({ open, onClose, initial, onSave }) {
</div>
</div>
<DialogFooter className="pt-2">
<Button type="button" variant="outline" onClick={onClose}>Cancel</Button>
<DialogFooter>
<DialogClose asChild>
<Button type="button" variant="outline">Cancel</Button>
</DialogClose>
<Button type="submit">{initial ? 'Save changes' : 'Add address'}</Button>
</DialogFooter>
</form>
@@ -130,7 +134,7 @@ function PhoneDialog({ open, onClose, initial, onSave }) {
return (
<Dialog open={open} onOpenChange={onClose}>
<DialogContent className="max-w-sm">
<DialogContent className="sm:max-w-sm">
<DialogHeader>
<DialogTitle>{initial ? 'Edit phone number' : 'Add phone number'}</DialogTitle>
</DialogHeader>
@@ -165,8 +169,10 @@ function PhoneDialog({ open, onClose, initial, onSave }) {
</div>
</div>
<DialogFooter className="pt-2">
<Button type="button" variant="outline" onClick={onClose}>Cancel</Button>
<DialogFooter>
<DialogClose asChild>
<Button type="button" variant="outline">Cancel</Button>
</DialogClose>
<Button type="submit">{initial ? 'Save changes' : 'Add number'}</Button>
</DialogFooter>
</form>
@@ -203,9 +209,18 @@ function DeleteConfirm({ open, onClose, onConfirm, label }) {
// ─── Page ─────────────────────────────────────────────────────────────────────
export default function ProfilePage() {
const { user } = useAuth()
const {
profile, getProfile,
updateProfile, profileLoading,
uploadAvatar, deleteAvatar, avatarLoading,
} = useProfile()
const isClient = user?.acc_type === 'client'
const role = ROLE_CONFIG[user?.acc_type] ?? { label: user?.acc_type, variant: 'outline' }
const info = user?.personal_info
// Use fresh profile data; fall back to auth context while loading
const info = profile?.personal_info ?? user?.personal_info
const [avatarDialogOpen, setAvatarDialogOpen] = useState(false)
const [editing, setEditing] = useState(false)
const [addresses, setAddresses] = useState(info?.addresses ?? [])
@@ -218,9 +233,25 @@ export default function ProfilePage() {
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 avatarUrl = info?.avatar?.url ?? null
const avatarColor = AVATAR_COLORS[user?.acc_type] ?? 'bg-muted text-muted-foreground'
// Load fresh profile data on mount
useEffect(() => { getProfile(); }, [])
// Sync phones/addresses when profile arrives from API
useEffect(() => {
if (!profile?.personal_info) return
setAddresses(profile.personal_info.addresses ?? [])
setPhones(profile.personal_info.phone_number ?? [])
}, [profile])
// Save profile changes (phones + addresses)
const handleSave = async () => {
const result = await updateProfile({ phone_number: phones, addresses })
if (result?.success) setEditing(false)
}
// ── Address handlers ──
const handleSaveAddress = (data) => {
if (addrDialog.index !== null) {
@@ -265,7 +296,10 @@ export default function ProfilePage() {
</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">
<button
className="absolute -bottom-1 -right-1 p-1.5 rounded-full bg-primary text-primary-foreground shadow hover:opacity-80 transition-opacity"
onClick={() => setAvatarDialogOpen(true)}
>
<Camera size={11} />
</button>
</TooltipTrigger>
@@ -278,9 +312,11 @@ export default function ProfilePage() {
<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>
{info?.occupation && (
<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>
@@ -289,8 +325,12 @@ export default function ProfilePage() {
<div className="flex gap-2 shrink-0">
{editing ? (
<>
<Button size="sm" onClick={() => setEditing(false)} className="gap-1.5">
<Check size={13} /> Save profile
<Button size="sm" onClick={handleSave} disabled={profileLoading} className="gap-1.5">
{profileLoading
? <Loader2 size={13} className="animate-spin" />
: <Check size={13} />
}
Save profile
</Button>
<Button size="sm" variant="outline" onClick={() => setEditing(false)} className="gap-1.5">
<X size={13} /> Cancel
@@ -421,19 +461,7 @@ export default function ProfilePage() {
</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>
<p className="text-xs text-muted-foreground py-2">No recent activities.</p>
</CardContent>
</Card>
@@ -442,23 +470,11 @@ export default function ProfilePage() {
<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>
<p className="text-xs text-muted-foreground py-2">No achievements yet.</p>
</CardContent>
</Card>
</>
@@ -505,6 +521,16 @@ export default function ProfilePage() {
onConfirm={handleDeletePhone}
label="phone number"
/>
<AvatarUploadDialog
open={avatarDialogOpen}
onClose={() => setAvatarDialogOpen(false)}
currentAvatarUrl={avatarUrl ?? ''}
initials={initials}
onUpload={uploadAvatar}
onDelete={deleteAvatar}
loading={avatarLoading}
/>
</TooltipProvider>
)
}