521 lines
21 KiB
TypeScript
521 lines
21 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@workspace/ui/components/card"
|
|
import { Button } from "@workspace/ui/components/button"
|
|
import { Badge } from "@workspace/ui/components/badge"
|
|
import { Separator } from "@workspace/ui/components/separator"
|
|
import { Input } from "@workspace/ui/components/input"
|
|
import { Label } from "@workspace/ui/components/label"
|
|
import { Textarea } from "@workspace/ui/components/textarea"
|
|
import {
|
|
User,
|
|
Mail,
|
|
Phone,
|
|
MapPin,
|
|
Calendar,
|
|
GraduationCap,
|
|
BookOpen,
|
|
Award,
|
|
Edit,
|
|
Save,
|
|
Camera,
|
|
Linkedin,
|
|
Github,
|
|
FileText,
|
|
Download,
|
|
Upload,
|
|
CheckCircle,
|
|
AlertCircle,
|
|
X
|
|
} from "lucide-react"
|
|
import { getStudentProfile, updateStudentProfile } from "../actions"
|
|
|
|
// Mock student data as fallback
|
|
const mockStudent = {
|
|
id: 1,
|
|
firstName: "John",
|
|
middleName: "Michael",
|
|
lastName: "Doe",
|
|
email: "john.doe@college.edu",
|
|
rollNumber: "2021CS001",
|
|
phoneNumber: "+91 98765 43210",
|
|
address: "123 College Street, Mumbai, Maharashtra",
|
|
gender: "Male",
|
|
dob: "2000-05-15",
|
|
degree: "Bachelor of Technology",
|
|
branch: "Computer Science",
|
|
year: "4th Year",
|
|
skills: ["JavaScript", "React", "Node.js", "Python", "SQL", "Git"],
|
|
linkedin: "https://linkedin.com/in/johndoe",
|
|
github: "https://github.com/johndoe",
|
|
ssc: 9.2,
|
|
hsc: 8.8,
|
|
isDiploma: false,
|
|
verified: true,
|
|
markedOut: false,
|
|
profilePicture: null,
|
|
resumes: [
|
|
{ id: 1, title: "Resume_v2.pdf", link: "/resumes/resume_v2.pdf" }
|
|
]
|
|
}
|
|
|
|
export default function ProfilePage() {
|
|
const [student, setStudent] = useState(mockStudent);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [editingSection, setEditingSection] = useState<string | null>(null);
|
|
const [editData, setEditData] = useState<any>({});
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
|
|
useEffect(() => {
|
|
loadStudentProfile();
|
|
}, []);
|
|
|
|
const loadStudentProfile = async () => {
|
|
try {
|
|
const result = await getStudentProfile(1); // Using student ID 1 for demo
|
|
if (result.success && result.student) {
|
|
setStudent(result.student as any);
|
|
} else {
|
|
setError(result.error || 'Failed to load profile');
|
|
}
|
|
} catch (err) {
|
|
setError('Failed to load profile data');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleEdit = (section: string) => {
|
|
setEditingSection(section);
|
|
setEditData({});
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
setEditingSection(null);
|
|
setEditData({});
|
|
};
|
|
|
|
const handleSave = async (section: string) => {
|
|
setIsSaving(true);
|
|
try {
|
|
const result = await updateStudentProfile(student.id, editData);
|
|
if (result.success) {
|
|
setStudent(prev => ({ ...prev, ...editData }));
|
|
setEditingSection(null);
|
|
setEditData({});
|
|
} else {
|
|
setError(result.error || 'Failed to update profile');
|
|
}
|
|
} catch (err) {
|
|
setError('Failed to update profile');
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleInputChange = (field: string, value: string) => {
|
|
setEditData((prev: any) => ({ ...prev, [field]: value }));
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 flex items-center justify-center">
|
|
<div className="text-center">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
|
|
<p className="text-gray-600">Loading profile...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<h1 className="text-4xl font-bold text-gray-900 mb-2">My Profile</h1>
|
|
<p className="text-xl text-gray-600">Manage your personal information and academic details</p>
|
|
{error && (
|
|
<div className="mt-4 p-3 bg-red-100 text-red-700 rounded-lg">
|
|
<AlertCircle className="w-4 h-4 inline mr-2" />
|
|
{error}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
{/* Profile Overview */}
|
|
<div className="lg:col-span-1">
|
|
<Card className="bg-white shadow-sm">
|
|
<CardContent className="p-6">
|
|
<div className="text-center mb-6">
|
|
<div className="relative inline-block">
|
|
<div className="w-32 h-32 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center text-white text-4xl font-bold mb-4">
|
|
{student.firstName?.[0] || 'S'}{student.lastName?.[0] || 'T'}
|
|
</div>
|
|
<Button size="sm" className="absolute bottom-2 right-2 w-8 h-8 rounded-full p-0">
|
|
<Camera className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
<h2 className="text-2xl font-bold text-gray-900 mb-2">
|
|
{student.firstName} {student.middleName} {student.lastName}
|
|
</h2>
|
|
<p className="text-gray-600 mb-4">{student.email}</p>
|
|
<div className="flex items-center justify-center gap-2 mb-4">
|
|
<Badge className={student.verified ? "bg-green-100 text-green-700" : "bg-yellow-100 text-yellow-700"}>
|
|
{student.verified ? (
|
|
<>
|
|
<CheckCircle className="w-3 h-3 mr-1" />
|
|
Verified
|
|
</>
|
|
) : (
|
|
<>
|
|
<AlertCircle className="w-3 h-3 mr-1" />
|
|
Pending Verification
|
|
</>
|
|
)}
|
|
</Badge>
|
|
{student.markedOut && (
|
|
<Badge className="bg-red-100 text-red-700">
|
|
Marked Out
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<div className="text-sm text-gray-500">
|
|
Roll Number: {student.rollNumber}
|
|
</div>
|
|
</div>
|
|
|
|
<Separator className="my-6" />
|
|
|
|
{/* Quick Stats */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-gray-600">Academic Year</span>
|
|
<span className="font-medium">{student.year}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-gray-600">Branch</span>
|
|
<span className="font-medium">{student.branch}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-gray-600">SSC Score</span>
|
|
<span className="font-medium">{student.ssc}/10</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-gray-600">HSC Score</span>
|
|
<span className="font-medium">{student.hsc}/10</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator className="my-6" />
|
|
|
|
{/* Social Links */}
|
|
<div className="space-y-3">
|
|
<h3 className="font-semibold text-gray-900">Social Links</h3>
|
|
<div className="space-y-2">
|
|
<Button variant="outline" size="sm" className="w-full justify-start">
|
|
<Linkedin className="w-4 h-4 mr-2" />
|
|
LinkedIn Profile
|
|
</Button>
|
|
<Button variant="outline" size="sm" className="w-full justify-start">
|
|
<Github className="w-4 h-4 mr-2" />
|
|
GitHub Profile
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<div className="lg:col-span-2 space-y-6">
|
|
{/* Personal Information */}
|
|
<Card className="bg-white shadow-sm">
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="flex items-center gap-2">
|
|
<User className="w-5 h-5" />
|
|
Personal Information
|
|
</CardTitle>
|
|
{editingSection !== 'personal' ? (
|
|
<Button size="sm" variant="outline" onClick={() => handleEdit('personal')}>
|
|
<Edit className="w-4 h-4 mr-2" />
|
|
Edit
|
|
</Button>
|
|
) : (
|
|
<div className="flex gap-2">
|
|
<Button size="sm" onClick={() => handleSave('personal')} disabled={isSaving}>
|
|
<Save className="w-4 h-4 mr-2" />
|
|
{isSaving ? 'Saving...' : 'Save'}
|
|
</Button>
|
|
<Button size="sm" variant="outline" onClick={handleCancel}>
|
|
<X className="w-4 h-4 mr-2" />
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<Label htmlFor="firstName">First Name</Label>
|
|
{editingSection === 'personal' ? (
|
|
<Input
|
|
id="firstName"
|
|
value={editData.firstName || student.firstName || ''}
|
|
onChange={(e) => handleInputChange('firstName', e.target.value)}
|
|
/>
|
|
) : (
|
|
<Input id="firstName" value={student.firstName || ''} readOnly />
|
|
)}
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="middleName">Middle Name</Label>
|
|
{editingSection === 'personal' ? (
|
|
<Input
|
|
id="middleName"
|
|
value={editData.middleName || student.middleName || ''}
|
|
onChange={(e) => handleInputChange('middleName', e.target.value)}
|
|
/>
|
|
) : (
|
|
<Input id="middleName" value={student.middleName || ''} readOnly />
|
|
)}
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="lastName">Last Name</Label>
|
|
{editingSection === 'personal' ? (
|
|
<Input
|
|
id="lastName"
|
|
value={editData.lastName || student.lastName || ''}
|
|
onChange={(e) => handleInputChange('lastName', e.target.value)}
|
|
/>
|
|
) : (
|
|
<Input id="lastName" value={student.lastName || ''} readOnly />
|
|
)}
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input id="email" value={student.email || ''} readOnly />
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="phone">Phone Number</Label>
|
|
{editingSection === 'personal' ? (
|
|
<Input
|
|
id="phone"
|
|
value={editData.phoneNumber || student.phoneNumber || ''}
|
|
onChange={(e) => handleInputChange('phoneNumber', e.target.value)}
|
|
/>
|
|
) : (
|
|
<Input id="phone" value={student.phoneNumber || ''} readOnly />
|
|
)}
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="gender">Gender</Label>
|
|
{editingSection === 'personal' ? (
|
|
<Input
|
|
id="gender"
|
|
value={editData.gender || student.gender || ''}
|
|
onChange={(e) => handleInputChange('gender', e.target.value)}
|
|
/>
|
|
) : (
|
|
<Input id="gender" value={student.gender || ''} readOnly />
|
|
)}
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="dob">Date of Birth</Label>
|
|
{editingSection === 'personal' ? (
|
|
<Input
|
|
id="dob"
|
|
value={editData.dob || student.dob || ''}
|
|
onChange={(e) => handleInputChange('dob', e.target.value)}
|
|
/>
|
|
) : (
|
|
<Input id="dob" value={student.dob || ''} readOnly />
|
|
)}
|
|
</div>
|
|
<div className="md:col-span-2">
|
|
<Label htmlFor="address">Address</Label>
|
|
{editingSection === 'personal' ? (
|
|
<Textarea
|
|
id="address"
|
|
value={editData.address || student.address || ''}
|
|
onChange={(e) => handleInputChange('address', e.target.value)}
|
|
/>
|
|
) : (
|
|
<Textarea id="address" value={student.address || ''} readOnly />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Academic Information */}
|
|
<Card className="bg-white shadow-sm">
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="flex items-center gap-2">
|
|
<GraduationCap className="w-5 h-5" />
|
|
Academic Information
|
|
</CardTitle>
|
|
{editingSection !== 'academic' ? (
|
|
<Button size="sm" variant="outline" onClick={() => handleEdit('academic')}>
|
|
<Edit className="w-4 h-4 mr-2" />
|
|
Edit
|
|
</Button>
|
|
) : (
|
|
<div className="flex gap-2">
|
|
<Button size="sm" onClick={() => handleSave('academic')} disabled={isSaving}>
|
|
<Save className="w-4 h-4 mr-2" />
|
|
{isSaving ? 'Saving...' : 'Save'}
|
|
</Button>
|
|
<Button size="sm" variant="outline" onClick={handleCancel}>
|
|
<X className="w-4 h-4 mr-2" />
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<Label htmlFor="degree">Degree</Label>
|
|
{editingSection === 'academic' ? (
|
|
<Input
|
|
id="degree"
|
|
value={editData.degree || student.degree || ''}
|
|
onChange={(e) => handleInputChange('degree', e.target.value)}
|
|
/>
|
|
) : (
|
|
<Input id="degree" value={student.degree || ''} readOnly />
|
|
)}
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="branch">Branch</Label>
|
|
{editingSection === 'academic' ? (
|
|
<Input
|
|
id="branch"
|
|
value={editData.branch || student.branch || ''}
|
|
onChange={(e) => handleInputChange('branch', e.target.value)}
|
|
/>
|
|
) : (
|
|
<Input id="branch" value={student.branch || ''} readOnly />
|
|
)}
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="year">Year</Label>
|
|
{editingSection === 'academic' ? (
|
|
<Input
|
|
id="year"
|
|
value={editData.year || student.year || ''}
|
|
onChange={(e) => handleInputChange('year', e.target.value)}
|
|
/>
|
|
) : (
|
|
<Input id="year" value={student.year || ''} readOnly />
|
|
)}
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="isDiploma">Diploma Student</Label>
|
|
<Input id="isDiploma" value={student.isDiploma ? "Yes" : "No"} readOnly />
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="ssc">SSC Score</Label>
|
|
{editingSection === 'academic' ? (
|
|
<Input
|
|
id="ssc"
|
|
value={editData.ssc || student.ssc || ''}
|
|
onChange={(e) => handleInputChange('ssc', e.target.value)}
|
|
/>
|
|
) : (
|
|
<Input id="ssc" value={`${student.ssc}/10`} readOnly />
|
|
)}
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="hsc">HSC Score</Label>
|
|
{editingSection === 'academic' ? (
|
|
<Input
|
|
id="hsc"
|
|
value={editData.hsc || student.hsc || ''}
|
|
onChange={(e) => handleInputChange('hsc', e.target.value)}
|
|
/>
|
|
) : (
|
|
<Input id="hsc" value={`${student.hsc}/10`} readOnly />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Skills */}
|
|
<Card className="bg-white shadow-sm">
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Award className="w-5 h-5" />
|
|
Skills & Expertise
|
|
</CardTitle>
|
|
<Button size="sm" variant="outline">
|
|
<Edit className="w-4 h-4 mr-2" />
|
|
Edit
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-wrap gap-2">
|
|
{student.skills?.map((skill, index) => (
|
|
<Badge key={index} variant="secondary" className="bg-blue-100 text-blue-700">
|
|
{skill}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Resume Management */}
|
|
<Card className="bg-white shadow-sm">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<FileText className="w-5 h-5" />
|
|
Resume Management
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
{student.resumes?.map((resume) => (
|
|
<div key={resume.id} className="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
|
|
<div className="flex items-center gap-3">
|
|
<FileText className="w-8 h-8 text-blue-600" />
|
|
<div>
|
|
<h4 className="font-medium">{resume.title}</h4>
|
|
<p className="text-sm text-gray-500">Updated 2 days ago</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button size="sm" variant="outline">
|
|
<Download className="w-4 h-4 mr-2" />
|
|
Download
|
|
</Button>
|
|
<Button size="sm" variant="outline">
|
|
<Upload className="w-4 h-4 mr-2" />
|
|
Update
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
<p className="text-sm text-gray-600">
|
|
Keep your resume updated to increase your chances of getting hired.
|
|
Make sure it reflects your latest skills and experiences.
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|