signup form

apps/student/app/signup/action.ts

@@ -1,5 +1,5 @@
 'use server'
-import { db, students } from '@workspace/db';
+import { db, students, grades, internships as internshipsTable, resumes as resumesTable } from '@workspace/db';
 import { eq } from '@workspace/db/drizzle';
 import { studentSignupSchema } from './schema';
 import { auth } from '@/auth';
@@ -12,6 +12,12 @@ export async function signupAction(data: FormData) {
     }
 
     const formData = Object.fromEntries(data.entries());
+    // Parse arrays/objects from formData if sent as JSON strings
+    if (typeof formData.skills === 'string') formData.skills = JSON.parse(formData.skills);
+    if (typeof formData.sgpi === 'string') formData.sgpi = JSON.parse(formData.sgpi);
+    if (typeof formData.internships === 'string') formData.internships = JSON.parse(formData.internships);
+    if (typeof formData.resume === 'string') formData.resume = JSON.parse(formData.resume);
+
     const parsedData = await studentSignupSchema.safeParseAsync(formData);
 
     if (!parsedData.success) {
@@ -20,6 +26,7 @@ export async function signupAction(data: FormData) {
 
     const student = parsedData.data;
 
+    // Update student table
     await db.update(students).set({
         rollNumber: student.rollNumber,
         firstName: student.firstName,
@@ -34,7 +41,7 @@ export async function signupAction(data: FormData) {
         degree: student.degree,
         branch: student.branch,
         year: student.year,
-        skills: student.skills,
+        skills: student.skills, // store as array
         linkedin: student.linkedin,
         github: student.github,
         ssc: String(student.ssc),
@@ -42,5 +49,68 @@ export async function signupAction(data: FormData) {
         isDiploma: student.isDiploma,
     }).where(eq(students.id, studentId));
 
+    // Upsert grades (sgpi)
+    if (Array.isArray(student.sgpi)) {
+        for (const grade of student.sgpi) {
+            await db.insert(grades).values({
+                studentId: studentId,
+                sem: grade.sem,
+                sgpi: String(grade.sgpi),
+                isKT: grade.kt,
+                deadKT: grade.ktDead,
+            }).onConflictDoUpdate({
+                target: [grades.studentId, grades.sem],
+                set: {
+                    sgpi: String(grade.sgpi),
+                    isKT: grade.kt,
+                    deadKT: grade.ktDead,
+                    updatedAt: new Date(),
+                },
+            });
+        }
+    }
+
+    // Upsert internships
+    if (Array.isArray(student.internships)) {
+        for (const internship of student.internships) {
+            await db.insert(internshipsTable).values({
+                studentId,
+                title: internship.title,
+                company: internship.company,
+                description: internship.description,
+                location: internship.location,
+                startDate: internship.startDate,
+                endDate: internship.endDate,
+            }).onConflictDoUpdate({
+                target: [internshipsTable.studentId, internshipsTable.title, internshipsTable.company],
+                set: {
+                    description: internship.description,
+                    location: internship.location,
+                    startDate: internship.startDate,
+                    endDate: internship.endDate,
+                    updatedAt: new Date(),
+                },
+            });
+        }
+    }
+
+    // Upsert resumes
+    if (Array.isArray(student.resume)) {
+        for (const resume of student.resume) {
+            await db.insert(resumesTable).values({
+                studentId,
+                title: resume.title,
+                link: resume.link,
+            }).onConflictDoUpdate({
+                target: [resumesTable.studentId, resumesTable.title],
+                set: {
+                    link: resume.link,
+                    updatedAt: new Date(),
+                },
+            });
+        }
+    }
+
+    return { success: true };
 }
 

apps/student/app/signup/page.tsx

@@ -1,51 +1,34 @@
+// Due to the length and complexity of the complete updated form, the full implementation is provided modularly.
+// This file only includes the top-level form layout and updated schema logic. Other components (InternshipModal, ResumeModal, etc.) 
+// should be created as separate files or extracted for cleanliness.
+
 'use client';
 
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import * as z from 'zod';
+import { z } from 'zod';
+// Only import used UI components
 import { Button } from '@workspace/ui/components/button';
-import { Input } from '@workspace/ui/components/input';
-import { Textarea } from '@workspace/ui/components/textarea';
 import { Progress } from '@workspace/ui/components/progress';
-import { Separator } from '@workspace/ui/components/separator';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  FormDescription,
-} from '@workspace/ui/components/form';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@workspace/ui/components/select';
 import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
+import { Form } from '@workspace/ui/components/form';
+
 import { studentSignupSchema, StudentSignup } from './schema';
+import PersonalDetailsStep from './steps/PersonalDetailsStep';
+import AcademicDetailsStep from './steps/AcademicDetailsStep';
+import SemesterGradesStep from './steps/SemesterGradesStep';
+import AdditionalDetailsStep from './steps/AdditionalDetailsStep';
+import InternshipStep from './steps/InternshipStep';
+import ResumeStep from './steps/ResumeStep';
 
 const steps = [
-  {
+  { id: 1, title: 'Personal Details', fields: ['firstName', 'lastName', 'mothersName', 'rollNumber', 'phoneNumber', 'address', 'gender', 'dob', 'personalGmail'] },
-    id: 1,
+  { id: 2, title: 'Academic Details', fields: ['degree', 'year', 'branch', 'ssc', 'hsc', 'isDiploma'] },
-    title: 'Personal Details',
+  { id: 3, title: 'Semester Grades', fields: ['sgpi'] },
-    fields: [
-      'firstName',
-      'lastName',
-      'fathersName',
-      'mothersName',
-      'email',
-      'rollNumber',
-      'phoneNumber',
-      'address',
-    ],
-  },
-  { id: 2, title: 'Academic Details', fields: ['degree', 'year', 'branch', 'ssc', 'hsc'] },
-  { id: 3, title: 'Semester Grades', fields: ['sem1', 'sem1KT', 'sem2', 'sem2KT'] },
   { id: 4, title: 'Additional Details', fields: ['linkedin', 'github', 'skills'] },
+  { id: 5, title: 'Internships', fields: ['internships'] },
+  { id: 6, title: 'Resumes', fields: ['resume'] },
 ];
 
 export default function StudentRegistrationForm() {
@@ -56,59 +39,59 @@ export default function StudentRegistrationForm() {
     resolver: zodResolver(studentSignupSchema),
     defaultValues: {
       firstName: '',
+      middleName: '',
       lastName: '',
-      fathersName: '',
       mothersName: '',
-      email: '',
       rollNumber: '',
       phoneNumber: '',
       address: '',
+      gender: '',
+      dob: new Date(),
+      personalGmail: '',
       degree: '',
-      year: '',
       branch: '',
-      ssc: '',
+      year: '',
-      hsc: '',
+      skills: [],
-      sem1: '',
-      sem1KT: '',
-      sem2: '',
-      sem2KT: '',
       linkedin: '',
       github: '',
-      skills: '',
+      ssc: 0,
+      hsc: 0,
+      isDiploma: false,
+      sgpi: Array.from({ length: 8 }, (_, i) => ({ sem: i + 1, sgpi: 0, kt: false, ktDead: false })),
+      internships: [],
+      resume: [],
     },
   });
 
-  const validateCurrentStep = async () => {
+  // console.log(form.formState.errors)
-    const currentStepData = steps.find((step) => step.id === currentStep);
-    if (!currentStepData) return false;
 
-    const result = await form.trigger(currentStepData.fields as any);
+  const validateCurrentStep = async () => {
-    return result;
+    const current = steps.find((s) => s.id === currentStep);
+    if (!current) return false;
+    // Cast fields to the correct type for react-hook-form
+    return await form.trigger(current.fields as Parameters<typeof form.trigger>[0]);
   };
 
   const nextStep = async () => {
     const isValid = await validateCurrentStep();
-    if (isValid && currentStep < steps.length) {
+    if (isValid && currentStep < steps.length) setCurrentStep((prev) => prev + 1);
-      setCurrentStep(currentStep + 1);
-    }
   };
 
   const prevStep = () => {
-    if (currentStep > 1) {
+    if (currentStep > 1) setCurrentStep((prev) => prev - 1);
-      setCurrentStep(currentStep - 1);
-    }
   };
 
-  const onSubmit = async (data: FormData) => {
+  const onSubmit = async (data: StudentSignup) => {
+    // Only submit if on the last step
+    if (currentStep !== steps.length) return;
     setIsSubmitting(true);
     try {
-      // Simulate API call
+      await new Promise((res) => setTimeout(res, 2000));
-      await new Promise((resolve) => setTimeout(resolve, 2000));
       console.log('Form submitted:', data);
       alert('Form submitted successfully!');
-    } catch (error) {
+    } catch (err) {
-      console.error('Submission error:', error);
+      console.error(err);
-      alert('Submission failed. Please try again.');
+      alert('Submission failed. Try again.');
     } finally {
       setIsSubmitting(false);
     }
@@ -124,6 +107,10 @@ export default function StudentRegistrationForm() {
         return <SemesterGradesStep form={form} />;
       case 4:
         return <AdditionalDetailsStep form={form} />;
+      case 5:
+        return <InternshipStep form={form} />;
+      case 6:
+        return <ResumeStep form={form} />;
       default:
         return null;
     }
@@ -133,7 +120,7 @@ export default function StudentRegistrationForm() {
 
   return (
     <div className="min-h-screen py-8">
-      <div className="max-w-3xl mx-auto px-4">
+      <div className="max-w-4xl mx-auto px-4">
         <Card>
           <CardHeader>
             <CardTitle className="text-2xl font-bold text-center">
@@ -141,9 +128,7 @@ export default function StudentRegistrationForm() {
             </CardTitle>
             <div className="space-y-2">
               <div className="flex justify-between text-sm text-muted-foreground">
-                <span>
+                <span>Step {currentStep} of {steps.length}</span>
-                  Step {currentStep} of {steps.length}
-                </span>
                 <span>{steps[currentStep - 1]?.title}</span>
               </div>
               <Progress value={progress} className="w-full" />
@@ -151,21 +136,30 @@ export default function StudentRegistrationForm() {
           </CardHeader>
           <CardContent>
             <Form {...form}>
-              <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+              <form
+                onSubmit={form.handleSubmit(onSubmit)}
+                className="space-y-6"
+                onKeyDown={e => {
+                  if (
+                    e.key === 'Enter' &&
+                    e.target instanceof HTMLElement &&
+                    e.target.tagName !== 'TEXTAREA'
+                  ) {
+                    e.preventDefault();
+                  }
+                }}
+              >
                 {renderStep()}
-
                 <div className="flex justify-between pt-6">
-                  <Button
+                  <Button type="button" variant="outline" onClick={prevStep} disabled={currentStep === 1}>
-                    type="button"
-                    variant="outline"
-                    onClick={prevStep}
-                    disabled={currentStep === 1}
-                  >
                     Previous
                   </Button>
-
                   {currentStep === steps.length ? (
-                    <Button type="submit" disabled={isSubmitting}>
+                    <Button
+                      type="button"
+                      disabled={isSubmitting}
+                      onClick={() => form.handleSubmit(onSubmit)()}
+                    >
                       {isSubmitting ? 'Submitting...' : 'Submit'}
                     </Button>
                   ) : (
@@ -182,415 +176,3 @@ export default function StudentRegistrationForm() {
     </div>
   );
 }
-
-function PersonalDetailsStep({ form }: { form: any }) {
-  return (
-    <div className="space-y-4">
-      <h3 className="text-lg font-semibold">Personal Details</h3>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <FormField
-          control={form.control}
-          name="firstName"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>First Name *</FormLabel>
-              <FormControl>
-                <Input placeholder="Enter your first name" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="lastName"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Last Name *</FormLabel>
-              <FormControl>
-                <Input placeholder="Enter your last name" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <FormField
-          control={form.control}
-          name="fathersName"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Father's Name</FormLabel>
-              <FormControl>
-                <Input placeholder="Enter your father's name" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="mothersName"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Mother's Name</FormLabel>
-              <FormControl>
-                <Input placeholder="Enter your mother's name" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-      </div>
-
-      <Separator />
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <FormField
-          control={form.control}
-          name="email"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Email *</FormLabel>
-              <FormControl>
-                <Input type="email" placeholder="Enter your email" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="rollNumber"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Roll Number *</FormLabel>
-              <FormControl>
-                <Input placeholder="Enter your roll number" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-      </div>
-
-      <FormField
-        control={form.control}
-        name="phoneNumber"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>Phone Number *</FormLabel>
-            <FormControl>
-              <Input type="tel" placeholder="Enter your phone number" {...field} />
-            </FormControl>
-            <FormDescription>Without country code</FormDescription>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-
-      <FormField
-        control={form.control}
-        name="address"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>Address *</FormLabel>
-            <FormControl>
-              <Textarea placeholder="Enter your address" className="resize-none" {...field} />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-    </div>
-  );
-}
-
-function AcademicDetailsStep({ form }: { form: any }) {
-  const degreeOptions = [
-    { value: 'btech', label: 'B.Tech' },
-    { value: 'be', label: 'B.E.' },
-    { value: 'bsc', label: 'B.Sc' },
-    { value: 'bca', label: 'BCA' },
-  ];
-
-  const yearOptions = [
-    { value: '2024', label: '2024' },
-    { value: '2025', label: '2025' },
-    { value: '2026', label: '2026' },
-    { value: '2027', label: '2027' },
-  ];
-
-  const branchOptions = [
-    { value: 'cse', label: 'Computer Science' },
-    { value: 'it', label: 'Information Technology' },
-    { value: 'ece', label: 'Electronics & Communication' },
-    { value: 'mechanical', label: 'Mechanical' },
-  ];
-
-  return (
-    <div className="space-y-4">
-      <h3 className="text-lg font-semibold">Academic Details</h3>
-
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <FormField
-          control={form.control}
-          name="degree"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Degree *</FormLabel>
-              <Select onValueChange={field.onChange} defaultValue={field.value}>
-                <FormControl>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select your degree" />
-                  </SelectTrigger>
-                </FormControl>
-                <SelectContent>
-                  {degreeOptions.map(({ label, value }) => (
-                    <SelectItem key={value} value={value}>
-                      {label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="year"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Year *</FormLabel>
-              <Select onValueChange={field.onChange} defaultValue={field.value}>
-                <FormControl>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Year of graduation" />
-                  </SelectTrigger>
-                </FormControl>
-                <SelectContent>
-                  {yearOptions.map(({ label, value }) => (
-                    <SelectItem key={value} value={value}>
-                      {label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="branch"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Branch *</FormLabel>
-              <Select onValueChange={field.onChange} defaultValue={field.value}>
-                <FormControl>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select your branch" />
-                  </SelectTrigger>
-                </FormControl>
-                <SelectContent>
-                  {branchOptions.map(({ label, value }) => (
-                    <SelectItem key={value} value={value}>
-                      {label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-      </div>
-
-      <Separator />
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <FormField
-          control={form.control}
-          name="ssc"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>SSC Percentage *</FormLabel>
-              <FormControl>
-                <Input type="number" placeholder="Enter your SSC percentage" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="hsc"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>HSC Percentage *</FormLabel>
-              <FormControl>
-                <Input type="number" placeholder="Enter your HSC percentage" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-      </div>
-    </div>
-  );
-}
-
-function SemesterGradesStep({ form }: { form: any }) {
-  const ktOptions = [
-    { value: '0', label: '0 KT' },
-    { value: '1', label: '1 KT' },
-    { value: '2', label: '2 KT' },
-    { value: '3+', label: '3+ KT' },
-  ];
-
-  return (
-    <div className="space-y-4">
-      <h3 className="text-lg font-semibold">Semester Grades</h3>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <FormField
-          control={form.control}
-          name="sem1"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Semester 1 Grade *</FormLabel>
-              <FormControl>
-                <Input type="number" step="0.01" placeholder="9.86" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="sem1KT"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Semester 1 KT *</FormLabel>
-              <Select onValueChange={field.onChange} defaultValue={field.value}>
-                <FormControl>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select KT status" />
-                  </SelectTrigger>
-                </FormControl>
-                <SelectContent>
-                  {ktOptions.map(({ label, value }) => (
-                    <SelectItem key={value} value={value}>
-                      {label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <FormField
-          control={form.control}
-          name="sem2"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Semester 2 Grade *</FormLabel>
-              <FormControl>
-                <Input type="number" step="0.01" placeholder="9.86" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="sem2KT"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Semester 2 KT *</FormLabel>
-              <Select onValueChange={field.onChange} defaultValue={field.value}>
-                <FormControl>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select KT status" />
-                  </SelectTrigger>
-                </FormControl>
-                <SelectContent>
-                  {ktOptions.map(({ label, value }) => (
-                    <SelectItem key={value} value={value}>
-                      {label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-      </div>
-    </div>
-  );
-}
-
-function AdditionalDetailsStep({ form }: { form: any }) {
-  return (
-    <div className="space-y-4">
-      <h3 className="text-lg font-semibold">Additional Details</h3>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <FormField
-          control={form.control}
-          name="linkedin"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>LinkedIn Profile *</FormLabel>
-              <FormControl>
-                <Input type="url" placeholder="https://linkedin.com/in/yourprofile" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="github"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>GitHub Profile *</FormLabel>
-              <FormControl>
-                <Input type="url" placeholder="https://github.com/yourusername" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-      </div>
-
-      <FormField
-        control={form.control}
-        name="skills"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>Skills</FormLabel>
-            <FormControl>
-              <Textarea
-                placeholder="Enter your skills (e.g., JavaScript, React, Node.js, Python)"
-                className="resize-none"
-                {...field}
-              />
-            </FormControl>
-            <FormDescription>Use commas to separate skills</FormDescription>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-    </div>
-  );
-}

apps/student/app/signup/steps/AcademicDetailsStep.tsx

@@ -0,0 +1,158 @@
+// AcademicDetailsStep.tsx
+'use client';
+
+import { FormField, FormItem, FormLabel, FormControl, FormMessage } from '@workspace/ui/components/form';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@workspace/ui/components/select';
+import { Input } from '@workspace/ui/components/input';
+import { Separator } from '@workspace/ui/components/separator';
+
+export default function AcademicDetailsStep({ form }: { form: any }) {
+  const degreeOptions = [
+    { value: 'btech', label: 'B.Tech' },
+    { value: 'be', label: 'B.E.' },
+    { value: 'bsc', label: 'B.Sc' },
+    { value: 'bca', label: 'BCA' },
+  ];
+
+  const yearOptions = [
+    { value: '2024', label: '2024' },
+    { value: '2025', label: '2025' },
+    { value: '2026', label: '2026' },
+    { value: '2027', label: '2027' },
+  ];
+
+  const branchOptions = [
+    { value: 'cse', label: 'Computer Science' },
+    { value: 'it', label: 'Information Technology' },
+    { value: 'ece', label: 'Electronics & Communication' },
+    { value: 'mechanical', label: 'Mechanical' },
+  ];
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-lg font-semibold">Academic Details</h3>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <FormField
+          control={form.control}
+          name="degree"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Degree *</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select your degree" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {degreeOptions.map(({ label, value }) => (
+                    <SelectItem key={value} value={value}>
+                      {label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="year"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Year *</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Year of graduation" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {yearOptions.map(({ label, value }) => (
+                    <SelectItem key={value} value={value}>
+                      {label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="branch"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Branch *</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select your branch" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {branchOptions.map(({ label, value }) => (
+                    <SelectItem key={value} value={value}>
+                      {label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </div>
+
+      <Separator />
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <FormField
+          control={form.control}
+          name="ssc"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>SSC % *</FormLabel>
+              <FormControl>
+                <Input type="number" placeholder="10th percentage" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="hsc"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>HSC % *</FormLabel>
+              <FormControl>
+                <Input type="number" placeholder="12th percentage" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="isDiploma"
+          render={({ field }) => (
+            <FormItem className="flex items-center space-x-2">
+              <FormControl>
+                <input type="checkbox" checked={field.value} onChange={(e) => field.onChange(e.target.checked)} />
+              </FormControl>
+              <FormLabel className="!m-0">Diploma Holder?</FormLabel>
+            </FormItem>
+          )}
+        />
+      </div>
+    </div>
+  );
+}

apps/student/app/signup/steps/AdditionalDetailsStep.tsx

@@ -0,0 +1,74 @@
+// AdditionalDetailsStep.tsx
+'use client';
+
+import {
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+  FormDescription,
+} from '@workspace/ui/components/form';
+import { Input } from '@workspace/ui/components/input';
+import { Textarea } from '@workspace/ui/components/textarea';
+
+export default function AdditionalDetailsStep({ form }: { form: any }) {
+  return (
+    <div className="space-y-4">
+      <h3 className="text-lg font-semibold">Additional Details</h3>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <FormField
+          control={form.control}
+          name="linkedin"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>LinkedIn Profile *</FormLabel>
+              <FormControl>
+                <Input type="url" placeholder="https://linkedin.com/in/yourprofile" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="github"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>GitHub Profile *</FormLabel>
+              <FormControl>
+                <Input type="url" placeholder="https://github.com/yourusername" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </div>
+
+      <FormField
+        control={form.control}
+        name="skills"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Skills</FormLabel>
+            <FormControl>
+              <Textarea
+                placeholder="JavaScript, React, Node.js, Python"
+                className="resize-none"
+                value={field.value ? (Array.isArray(field.value) ? field.value.join(", ") : field.value) : ""}
+                onChange={e => {
+                  const value = e.target.value;
+                  field.onChange(value.split(',').map(s => s.trim()).filter(Boolean));
+                }}
+              />
+            </FormControl>
+            <FormDescription>Use commas to separate skills</FormDescription>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+}

apps/student/app/signup/steps/InternshipStep.tsx

@@ -0,0 +1,176 @@
+// InternshipStep.tsx
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@workspace/ui/components/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
+import { Input } from '@workspace/ui/components/input';
+import { Textarea } from '@workspace/ui/components/textarea';
+import { Separator } from '@workspace/ui/components/separator';
+import { FormField, FormItem, FormLabel, FormControl, FormMessage } from '@workspace/ui/components/form';
+import { useForm } from 'react-hook-form';
+
+export default function InternshipStep({ form }: { form: any }) {
+  const [modalOpen, setModalOpen] = useState(false);
+  const { getValues, setValue } = form;
+  const internships = getValues('internships') || [];
+
+  const modalForm = useForm({
+    defaultValues: {
+      title: '',
+      company: '',
+      description: '',
+      location: '',
+      startDate: '',
+      endDate: '',
+    },
+  });
+
+  const addInternship = () => {
+    const data = modalForm.getValues();
+    const updated = [...internships, data];
+    setValue('internships', updated);
+    modalForm.reset();
+    setModalOpen(false);
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <h3 className="text-lg font-semibold">Internships</h3>
+        <Button variant="outline" onClick={() => setModalOpen(true)}>
+          Add Internship
+        </Button>
+      </div>
+
+      {/* Custom Modal */}
+      {modalOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+          <div className="bg-white rounded-lg shadow-lg w-full max-w-lg p-6 relative">
+            <button
+              className="absolute top-2 right-2 text-gray-500 hover:text-gray-700"
+              onClick={() => setModalOpen(false)}
+              aria-label="Close"
+            >
+              ×
+            </button>
+            <h2 className="text-xl font-bold mb-4">Add Internship Details</h2>
+            <div className="grid grid-cols-1 gap-4">
+              <FormField
+                control={modalForm.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Title</FormLabel>
+                    <FormControl>
+                      <Input {...field} placeholder="e.g. SDE Intern" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={modalForm.control}
+                name="company"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Company</FormLabel>
+                    <FormControl>
+                      <Input {...field} placeholder="e.g. Google" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={modalForm.control}
+                name="description"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Description</FormLabel>
+                    <FormControl>
+                      <Textarea {...field} placeholder="Describe your work..." />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={modalForm.control}
+                name="location"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Location</FormLabel>
+                    <FormControl>
+                      <Input {...field} placeholder="Remote / Mumbai" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <div className="grid grid-cols-2 gap-4">
+                <FormField
+                  control={modalForm.control}
+                  name="startDate"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Start Date</FormLabel>
+                      <FormControl>
+                        <Input type="date" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={modalForm.control}
+                  name="endDate"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>End Date</FormLabel>
+                      <FormControl>
+                        <Input type="date" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </div>
+            <div className="flex justify-end mt-6 gap-2">
+              <Button variant="outline" onClick={() => setModalOpen(false)}>
+                Cancel
+              </Button>
+              <Button onClick={addInternship}>Add</Button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <Separator />
+
+      <div className="space-y-4">
+        {internships.length === 0 && (
+          <p className="text-sm text-muted-foreground">No internships added yet.</p>
+        )}
+
+        {internships.map((intern: any, idx: number) => (
+          <Card key={idx} className="bg-muted">
+            <CardHeader>
+              <CardTitle className="text-base font-semibold">
+                {intern.title} at {intern.company}
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-1 text-sm">
+              <p>{intern.location}</p>
+              <p>
+                {intern.startDate} to {intern.endDate}
+              </p>
+              <p>{intern.description}</p>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/student/app/signup/steps/PersonalDetailsStep.tsx

@@ -0,0 +1,140 @@
+// PersonalDetailsStep.tsx
+'use client';
+
+import {
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+  FormDescription,
+} from '@workspace/ui/components/form';
+import { Input } from '@workspace/ui/components/input';
+import { Textarea } from '@workspace/ui/components/textarea';
+import { Separator } from '@workspace/ui/components/separator';
+
+export default function PersonalDetailsStep({ form }: { form: any }) {
+  return (
+    <div className="space-y-4">
+      <h3 className="text-lg font-semibold">Personal Details</h3>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <FormField
+          control={form.control}
+          name="firstName"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>First Name *</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter your first name" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="lastName"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Last Name *</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter your last name" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <FormField
+          control={form.control}
+          name="middleName"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Middle Name</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter your middle name" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="mothersName"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Mother's Name *</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter your mother's name" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </div>
+
+      <Separator />
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <FormField
+          control={form.control}
+          name="personalGmail"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Personal Email *</FormLabel>
+              <FormControl>
+                <Input type="email" placeholder="Enter your Gmail address" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="rollNumber"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Roll Number *</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter your roll number" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </div>
+
+      <FormField
+        control={form.control}
+        name="phoneNumber"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Phone Number *</FormLabel>
+            <FormControl>
+              <Input type="tel" placeholder="Enter your phone number" {...field} />
+            </FormControl>
+            <FormDescription>Without country code</FormDescription>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={form.control}
+        name="address"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Address *</FormLabel>
+            <FormControl>
+              <Textarea placeholder="Enter your address" className="resize-none" {...field} />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+}

apps/student/app/signup/steps/ResumeStep.tsx

@@ -0,0 +1,113 @@
+// ResumeStep.tsx
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@workspace/ui/components/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
+import { Input } from '@workspace/ui/components/input';
+import { Separator } from '@workspace/ui/components/separator';
+import { FormField, FormItem, FormLabel, FormControl, FormMessage } from '@workspace/ui/components/form';
+import { useForm } from 'react-hook-form';
+
+export default function ResumeStep({ form }: { form: any }) {
+  const [modalOpen, setModalOpen] = useState(false);
+  const { getValues, setValue } = form;
+  const resumes = getValues('resume') || [];
+
+  const modalForm = useForm({
+    defaultValues: {
+      title: '',
+      link: '',
+    },
+  });
+
+  const addResume = () => {
+    const data = modalForm.getValues();
+    const updated = [...resumes, data];
+    setValue('resume', updated);
+    modalForm.reset();
+    setModalOpen(false);
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <h3 className="text-lg font-semibold">Resumes</h3>
+        <Button variant="outline" onClick={() => setModalOpen(true)}>
+          Add Resume
+        </Button>
+      </div>
+
+      {/* Custom Modal */}
+      {modalOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+          <div className="bg-white rounded-lg shadow-lg w-full max-w-lg p-6 relative">
+            <button
+              className="absolute top-2 right-2 text-gray-500 hover:text-gray-700"
+              onClick={() => setModalOpen(false)}
+              aria-label="Close"
+            >
+              ×
+            </button>
+            <h2 className="text-xl font-bold mb-4">Add Resume</h2>
+            <div className="grid grid-cols-1 gap-4">
+              <FormField
+                control={modalForm.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Title</FormLabel>
+                    <FormControl>
+                      <Input {...field} placeholder="e.g. Summer 2025 Resume" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={modalForm.control}
+                name="link"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Link</FormLabel>
+                    <FormControl>
+                      <Input type="url" {...field} placeholder="https://drive.google.com/..." />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <div className="flex justify-end mt-6 gap-2">
+              <Button variant="outline" onClick={() => setModalOpen(false)}>
+                Cancel
+              </Button>
+              <Button onClick={addResume}>Add</Button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <Separator />
+
+      <div className="space-y-4">
+        {resumes.length === 0 && (
+          <p className="text-sm text-muted-foreground">No resumes uploaded yet.</p>
+        )}
+
+        {resumes.map((resume: any, idx: number) => (
+          <Card key={idx} className="bg-muted">
+            <CardHeader>
+              <CardTitle className="text-base font-semibold">{resume.title}</CardTitle>
+            </CardHeader>
+            <CardContent className="text-sm">
+              <a href={resume.link} target="_blank" rel="noopener noreferrer" className="text-blue-600 underline">
+                {resume.link}
+              </a>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/student/app/signup/steps/SemesterGradesStep.tsx

@@ -0,0 +1,78 @@
+// SemesterGradesStep.tsx
+'use client';
+
+import { Controller } from 'react-hook-form';
+import { Input } from '@workspace/ui/components/input';
+import { Checkbox } from '@workspace/ui/components/checkbox';
+import { FormField, FormItem, FormLabel, FormControl, FormMessage } from '@workspace/ui/components/form';
+import { Separator } from '@workspace/ui/components/separator';
+
+export default function SemesterGradesStep({ form }: { form: any }) {
+  const sems = Array.from({ length: 8 }, (_, i) => i + 1);
+
+  return (
+    <div className="space-y-6">
+      <h3 className="text-lg font-semibold">Semester Grades</h3>
+
+      {sems.map((sem) => (
+        <div key={sem} className="border p-4 rounded-md shadow-sm">
+          <h4 className="font-medium text-md mb-2">Semester {sem}</h4>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <FormField
+              control={form.control}
+              name={`sgpi.${sem - 1}.sgpi`}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>SGPI *</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="number"
+                      step="0.01"
+                      placeholder="e.g., 9.86"
+                      value={field.value ?? ''}
+                      onChange={e => {
+                        const val = e.target.value;
+                        field.onChange(val === '' ? '' : Number(val));
+                      }}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name={`sgpi.${sem - 1}.kt`}
+              render={({ field }) => (
+                <FormItem className="flex items-center space-x-2">
+                  <FormControl>
+                    <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                  </FormControl>
+                  <FormLabel className="!m-0">KT?</FormLabel>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name={`sgpi.${sem - 1}.ktDead`}
+              render={({ field }) => (
+                <FormItem className="flex items-center space-x-2">
+                  <FormControl>
+                    <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                  </FormControl>
+                  <FormLabel className="!m-0">KT Dead?</FormLabel>
+                </FormItem>
+              )}
+            />
+          </div>
+        </div>
+      ))}
+
+      <Separator />
+      <p className="text-sm text-muted-foreground">Note: First 4 semesters are mandatory.</p>
+    </div>
+  );
+}