signup form

This commit is contained in:
Om Lanke
2025-07-07 01:07:35 +05:30
parent c7111b4670
commit 498dc5aa94
8 changed files with 882 additions and 491 deletions

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}