Yes! Yes! I do

apps/student/app/(main)/profile/page.tsx

@@ -1,3 +1,6 @@
+'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"
@@ -23,10 +26,12 @@ import {
   Download,
   Upload,
   CheckCircle,
-  AlertCircle
+  AlertCircle,
+  X
 } from "lucide-react"
+import { getStudentProfile, updateStudentProfile } from "../actions"
 
-// Mock student data - in real app this would come from database
+// Mock student data as fallback
 const mockStudent = {
   id: 1,
   firstName: "John",
@@ -49,10 +54,82 @@ const mockStudent = {
   isDiploma: false,
   verified: true,
   markedOut: false,
-  profilePicture: null
+  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">
@@ -60,6 +137,12 @@ export default function ProfilePage() {
         <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">
@@ -70,19 +153,19 @@ export default function ProfilePage() {
                 <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">
-                      {mockStudent.firstName[0]}{mockStudent.lastName[0]}
+                      {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">
-                    {mockStudent.firstName} {mockStudent.middleName} {mockStudent.lastName}
+                    {student.firstName} {student.middleName} {student.lastName}
                   </h2>
-                  <p className="text-gray-600 mb-4">{mockStudent.email}</p>
+                  <p className="text-gray-600 mb-4">{student.email}</p>
                   <div className="flex items-center justify-center gap-2 mb-4">
-                    <Badge className={mockStudent.verified ? "bg-green-100 text-green-700" : "bg-yellow-100 text-yellow-700"}>
-                      {mockStudent.verified ? (
+                    <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
@@ -94,14 +177,14 @@ export default function ProfilePage() {
                         </>
                       )}
                     </Badge>
-                    {mockStudent.markedOut && (
+                    {student.markedOut && (
                       <Badge className="bg-red-100 text-red-700">
                         Marked Out
                       </Badge>
                     )}
                   </div>
                   <div className="text-sm text-gray-500">
-                    Roll Number: {mockStudent.rollNumber}
+                    Roll Number: {student.rollNumber}
                   </div>
                 </div>
 
@@ -111,19 +194,19 @@ export default function ProfilePage() {
                 <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">{mockStudent.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">{mockStudent.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">{mockStudent.ssc}/10</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">{mockStudent.hsc}/10</span>
+                    <span className="font-medium">{student.hsc}/10</span>
                   </div>
                 </div>
 
@@ -157,45 +240,114 @@ export default function ProfilePage() {
                     <User className="w-5 h-5" />
                     Personal Information
                   </CardTitle>
-                  <Button size="sm" variant="outline">
-                    <Edit className="w-4 h-4 mr-2" />
-                    Edit
-                  </Button>
+                  {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>
-                    <Input id="firstName" value={mockStudent.firstName} readOnly />
+                    {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>
-                    <Input id="middleName" value={mockStudent.middleName} readOnly />
+                    {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>
-                    <Input id="lastName" value={mockStudent.lastName} readOnly />
+                    {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={mockStudent.email} readOnly />
+                    <Input id="email" value={student.email || ''} readOnly />
                   </div>
                   <div>
                     <Label htmlFor="phone">Phone Number</Label>
-                    <Input id="phone" value={mockStudent.phoneNumber} readOnly />
+                    {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>
-                    <Input id="gender" value={mockStudent.gender} readOnly />
+                    {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>
-                    <Input id="dob" value={mockStudent.dob} readOnly />
+                    {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>
-                    <Textarea id="address" value={mockStudent.address} readOnly />
+                    {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>
@@ -209,37 +361,90 @@ export default function ProfilePage() {
                     <GraduationCap className="w-5 h-5" />
                     Academic Information
                   </CardTitle>
-                  <Button size="sm" variant="outline">
-                    <Edit className="w-4 h-4 mr-2" />
-                    Edit
-                  </Button>
+                  {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>
-                    <Input id="degree" value={mockStudent.degree} readOnly />
+                    {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>
-                    <Input id="branch" value={mockStudent.branch} readOnly />
+                    {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>
-                    <Input id="year" value={mockStudent.year} readOnly />
+                    {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={mockStudent.isDiploma ? "Yes" : "No"} readOnly />
+                    <Input id="isDiploma" value={student.isDiploma ? "Yes" : "No"} readOnly />
                   </div>
                   <div>
                     <Label htmlFor="ssc">SSC Score</Label>
-                    <Input id="ssc" value={`${mockStudent.ssc}/10`} readOnly />
+                    {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>
-                    <Input id="hsc" value={`${mockStudent.hsc}/10`} readOnly />
+                    {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>
@@ -261,7 +466,7 @@ export default function ProfilePage() {
               </CardHeader>
               <CardContent>
                 <div className="flex flex-wrap gap-2">
-                  {mockStudent.skills.map((skill, index) => (
+                  {student.skills?.map((skill, index) => (
                     <Badge key={index} variant="secondary" className="bg-blue-100 text-blue-700">
                       {skill}
                     </Badge>
@@ -280,25 +485,27 @@ export default function ProfilePage() {
               </CardHeader>
               <CardContent>
                 <div className="space-y-4">
-                  <div 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_v2.pdf</h4>
-                        <p className="text-sm text-gray-500">Updated 2 days ago</p>
+                  {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>
-                    <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.