Add company edit section to profile page for Admin users
This commit is contained in:
Tiago Yamamoto
parent
d52a83f94b
commit
f1fc45b5ce
2 changed files with 142 additions and 5 deletions
|
|
@ -2,19 +2,23 @@
|
|||
|
||||
import { ProfilePictureUpload } from "@/components/profile-picture-upload-v2"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Save, Loader2 } from "lucide-react"
|
||||
import { Save, Loader2, Building2 } from "lucide-react"
|
||||
import { useEffect, useState } from "react"
|
||||
import { profileApi, authApi } from "@/lib/api"
|
||||
import { profileApi, authApi, adminCompaniesApi, type AdminCompany } from "@/lib/api"
|
||||
import { toast } from "sonner"
|
||||
import { getCurrentUser, isAdminUser } from "@/lib/auth"
|
||||
|
||||
export default function ProfilePage() {
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [savingCompany, setSavingCompany] = useState(false)
|
||||
const [user, setUser] = useState<any>(null)
|
||||
const [company, setCompany] = useState<AdminCompany | null>(null)
|
||||
const [isAdmin, setIsAdmin] = useState(false)
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
fullName: "",
|
||||
|
|
@ -23,7 +27,17 @@ export default function ProfilePage() {
|
|||
bio: "",
|
||||
})
|
||||
|
||||
const [companyData, setCompanyData] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
website: "",
|
||||
description: "",
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
const currentUser = getCurrentUser()
|
||||
setIsAdmin(isAdminUser(currentUser))
|
||||
loadProfile()
|
||||
}, [])
|
||||
|
||||
|
|
@ -34,11 +48,31 @@ export default function ProfilePage() {
|
|||
console.log("[PROFILE_FLOW] Profile loaded:", userData)
|
||||
setUser(userData)
|
||||
setFormData({
|
||||
fullName: userData.fullName || "",
|
||||
fullName: userData.fullName || userData.name || "",
|
||||
email: userData.email || "",
|
||||
phone: userData.phone || "",
|
||||
bio: userData.bio || ""
|
||||
})
|
||||
|
||||
// Load company if user has companyId
|
||||
if (userData.companyId) {
|
||||
try {
|
||||
const companiesRes = await adminCompaniesApi.list()
|
||||
const userCompany = companiesRes.data.find(c => c.id === userData.companyId)
|
||||
if (userCompany) {
|
||||
setCompany(userCompany)
|
||||
setCompanyData({
|
||||
name: userCompany.name || "",
|
||||
email: userCompany.email || "",
|
||||
phone: userCompany.phone || "",
|
||||
website: userCompany.website || "",
|
||||
description: userCompany.description || "",
|
||||
})
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn("[PROFILE_FLOW] Could not load company:", err)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("[PROFILE_FLOW] Error loading profile:", error)
|
||||
toast.error("Failed to load profile")
|
||||
|
|
@ -51,6 +85,10 @@ export default function ProfilePage() {
|
|||
setFormData(prev => ({ ...prev, [field]: value }))
|
||||
}
|
||||
|
||||
const handleCompanyChange = (field: string, value: string) => {
|
||||
setCompanyData(prev => ({ ...prev, [field]: value }))
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setSaving(true)
|
||||
|
|
@ -71,6 +109,30 @@ export default function ProfilePage() {
|
|||
}
|
||||
}
|
||||
|
||||
const handleCompanySubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!company) return
|
||||
setSavingCompany(true)
|
||||
console.log("[PROFILE_FLOW] Updating company:", companyData)
|
||||
try {
|
||||
await adminCompaniesApi.update(company.id, {
|
||||
name: companyData.name,
|
||||
email: companyData.email,
|
||||
phone: companyData.phone,
|
||||
website: companyData.website,
|
||||
description: companyData.description,
|
||||
})
|
||||
console.log("[PROFILE_FLOW] Company updated successfully")
|
||||
toast.success("Company updated")
|
||||
loadProfile()
|
||||
} catch (error) {
|
||||
console.error("[PROFILE_FLOW] Error updating company:", error)
|
||||
toast.error("Failed to update company")
|
||||
} finally {
|
||||
setSavingCompany(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
|
|
@ -80,7 +142,8 @@ export default function ProfilePage() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto py-8">
|
||||
<div className="max-w-2xl mx-auto py-8 space-y-6">
|
||||
{/* Profile Card */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl font-bold text-center">
|
||||
|
|
@ -155,6 +218,79 @@ export default function ProfilePage() {
|
|||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Company Card - Only for Admin users who have a company */}
|
||||
{isAdmin && company && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Building2 className="h-5 w-5 text-primary" />
|
||||
<CardTitle>Company Information</CardTitle>
|
||||
</div>
|
||||
<CardDescription>Edit your company details</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleCompanySubmit} className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="companyName">Company Name</Label>
|
||||
<Input
|
||||
id="companyName"
|
||||
value={companyData.name}
|
||||
onChange={(e) => handleCompanyChange("name", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="companyEmail">Company Email</Label>
|
||||
<Input
|
||||
id="companyEmail"
|
||||
type="email"
|
||||
value={companyData.email}
|
||||
onChange={(e) => handleCompanyChange("email", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="companyPhone">Phone</Label>
|
||||
<Input
|
||||
id="companyPhone"
|
||||
value={companyData.phone}
|
||||
onChange={(e) => handleCompanyChange("phone", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="companyWebsite">Website</Label>
|
||||
<Input
|
||||
id="companyWebsite"
|
||||
value={companyData.website}
|
||||
onChange={(e) => handleCompanyChange("website", e.target.value)}
|
||||
placeholder="https://example.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="companyDescription">Description</Label>
|
||||
<Textarea
|
||||
id="companyDescription"
|
||||
value={companyData.description}
|
||||
onChange={(e) => handleCompanyChange("description", e.target.value)}
|
||||
rows={4}
|
||||
placeholder="Tell us about your company..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full" size="lg" disabled={savingCompany}>
|
||||
{savingCompany ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Save className="mr-2 h-4 w-4" />}
|
||||
Save company info
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@ export interface ApiUser {
|
|||
avatarUrl?: string;
|
||||
phone?: string;
|
||||
bio?: string;
|
||||
companyId?: string;
|
||||
}
|
||||
|
||||
export interface ApiJob {
|
||||
|
|
|
|||
Loading…
Reference in a new issue