91 lines
3.4 KiB
TypeScript
91 lines
3.4 KiB
TypeScript
// 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);
|
|
|
|
// Watch all KT values for all semesters
|
|
const ktValues = form.watch('sgpi') || [];
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
<h3 className="text-2xl font-bold mb-4 text-primary">Semester Grades</h3>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
{sems.map((sem) => (
|
|
<div
|
|
key={sem}
|
|
className="bg-white border border-gray-200 rounded-2xl shadow-lg p-6 transition-transform hover:scale-[1.01] flex flex-col gap-4"
|
|
>
|
|
<h4 className="font-semibold text-lg mb-2 text-primary/80">Semester {sem}</h4>
|
|
|
|
<div className="flex flex-col gap-4 md:flex-row md:items-center md:gap-6">
|
|
<FormField
|
|
control={form.control}
|
|
name={`sgpi.${sem - 1}.sgpi`}
|
|
render={({ field }) => (
|
|
<FormItem className="flex-1 min-w-[120px]">
|
|
<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));
|
|
}}
|
|
className="focus:ring-2 focus:ring-primary/40"
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name={`sgpi.${sem - 1}.kt`}
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-row items-center space-x-2 min-w-[100px]">
|
|
<FormControl>
|
|
<Checkbox checked={field.value} onCheckedChange={field.onChange} />
|
|
</FormControl>
|
|
<FormLabel className="!m-0">KT?</FormLabel>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
{/* Only show KT Dead if KT is checked */}
|
|
{ktValues[sem - 1]?.kt && (
|
|
<FormField
|
|
control={form.control}
|
|
name={`sgpi.${sem - 1}.ktDead`}
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-row items-center space-x-2 min-w-[120px]">
|
|
<FormControl>
|
|
<Checkbox checked={field.value} onCheckedChange={field.onChange} />
|
|
</FormControl>
|
|
<FormLabel className="!m-0">KT Dead?</FormLabel>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<Separator />
|
|
<p className="text-sm text-muted-foreground mt-2">Note: First 4 semesters are mandatory.</p>
|
|
</div>
|
|
);
|
|
}
|