finally building

apps/student/app/(main)/layout.tsx

@@ -0,0 +1,36 @@
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from '@workspace/ui/components/navigation-menu';
+import Link from 'next/link';
+
+export default function MainLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div>
+      <header className="flex h-16 items-center justify-between border-b bg-background px-4 md:px-6">
+        <nav>
+          <NavigationMenu>
+            <NavigationMenuList>
+              <NavigationMenuItem>
+                <NavigationMenuLink asChild>
+                  <Link href="/">Home</Link>
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <NavigationMenuLink asChild>
+                  <Link href="/signup">Signup</Link>
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+            </NavigationMenuList>
+          </NavigationMenu>
+        </nav>
+      </header>
+      <main>{children}</main>
+    </div>
+  );
+}

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

@@ -0,0 +1,33 @@
+import Login from '@/components/login';
+import Studs from '@/components/studs';
+import { db, admins } from '@workspace/db';
+import { auth, signIn, signOut } from '@/auth';
+
+async function getStudents() {
+  'use server';
+  const s = await db.select().from(admins);
+  console.log(s);
+}
+
+async function logIn() {
+  'use server';
+  await signIn('google');
+}
+
+async function logOut() {
+  'use server';
+  await signOut();
+}
+
+export default async function Page() {
+  const session = await auth();
+  return (
+    <div className="flex items-center justify-center min-h-svh">
+      <div className="flex flex-col items-center justify-center gap-4">
+        <h1 className="text-2xl font-bold">Hello student {session?.user?.name}</h1>
+        {!session?.user && <Login action={logIn} />}
+        <Studs action={getStudents} logOut={logOut} />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,628 @@
+'use client';
+
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+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';
+
+// Form schema
+const formSchema = z.object({
+  // Personal Details
+  firstName: z.string().min(1, 'First name is required'),
+  lastName: z.string().min(1, 'Last name is required'),
+  fathersName: z.string().optional(),
+  mothersName: z.string().optional(),
+  email: z.string().email('Invalid email address'),
+  rollNumber: z.string().min(1, 'Roll number is required'),
+  phoneNumber: z.string().min(10, 'Phone number must be at least 10 digits'),
+  address: z.string().min(1, 'Address is required'),
+
+  // Academic Details
+  degree: z.string().min(1, 'Degree is required'),
+  year: z.string().min(1, 'Year is required'),
+  branch: z.string().min(1, 'Branch is required'),
+  ssc: z.string().min(1, 'SSC percentage is required'),
+  hsc: z.string().min(1, 'HSC percentage is required'),
+
+  // Semester Grades
+  sem1: z.string().min(1, 'Semester 1 grade is required'),
+  sem1KT: z.string().min(1, 'Semester 1 KT status is required'),
+  sem2: z.string().min(1, 'Semester 2 grade is required'),
+  sem2KT: z.string().min(1, 'Semester 2 KT status is required'),
+
+  // Additional Details
+  linkedin: z.string().url('Invalid LinkedIn URL'),
+  github: z.string().url('Invalid GitHub URL'),
+  skills: z.string().optional(),
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+const steps = [
+  {
+    id: 1,
+    title: 'Personal Details',
+    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'] },
+];
+
+export default function StudentRegistrationForm() {
+  const [currentStep, setCurrentStep] = useState(1);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+      fathersName: '',
+      mothersName: '',
+      email: '',
+      rollNumber: '',
+      phoneNumber: '',
+      address: '',
+      degree: '',
+      year: '',
+      branch: '',
+      ssc: '',
+      hsc: '',
+      sem1: '',
+      sem1KT: '',
+      sem2: '',
+      sem2KT: '',
+      linkedin: '',
+      github: '',
+      skills: '',
+    },
+  });
+
+  const validateCurrentStep = async () => {
+    const currentStepData = steps.find((step) => step.id === currentStep);
+    if (!currentStepData) return false;
+
+    const result = await form.trigger(currentStepData.fields as any);
+    return result;
+  };
+
+  const nextStep = async () => {
+    const isValid = await validateCurrentStep();
+    if (isValid && currentStep < steps.length) {
+      setCurrentStep(currentStep + 1);
+    }
+  };
+
+  const prevStep = () => {
+    if (currentStep > 1) {
+      setCurrentStep(currentStep - 1);
+    }
+  };
+
+  const onSubmit = async (data: FormData) => {
+    setIsSubmitting(true);
+    try {
+      // Simulate API call
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+      console.log('Form submitted:', data);
+      alert('Form submitted successfully!');
+    } catch (error) {
+      console.error('Submission error:', error);
+      alert('Submission failed. Please try again.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const renderStep = () => {
+    switch (currentStep) {
+      case 1:
+        return <PersonalDetailsStep form={form} />;
+      case 2:
+        return <AcademicDetailsStep form={form} />;
+      case 3:
+        return <SemesterGradesStep form={form} />;
+      case 4:
+        return <AdditionalDetailsStep form={form} />;
+      default:
+        return null;
+    }
+  };
+
+  const progress = (currentStep / steps.length) * 100;
+
+  return (
+    <div className="min-h-screen py-8">
+      <div className="max-w-3xl mx-auto px-4">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-2xl font-bold text-center">
+              Student Registration Form
+            </CardTitle>
+            <div className="space-y-2">
+              <div className="flex justify-between text-sm text-muted-foreground">
+                <span>
+                  Step {currentStep} of {steps.length}
+                </span>
+                <span>{steps[currentStep - 1]?.title}</span>
+              </div>
+              <Progress value={progress} className="w-full" />
+            </div>
+          </CardHeader>
+          <CardContent>
+            <Form {...form}>
+              <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+                {renderStep()}
+
+                <div className="flex justify-between pt-6">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={prevStep}
+                    disabled={currentStep === 1}
+                  >
+                    Previous
+                  </Button>
+
+                  {currentStep === steps.length ? (
+                    <Button type="submit" disabled={isSubmitting}>
+                      {isSubmitting ? 'Submitting...' : 'Submit'}
+                    </Button>
+                  ) : (
+                    <Button type="button" onClick={nextStep}>
+                      Next
+                    </Button>
+                  )}
+                </div>
+              </form>
+            </Form>
+          </CardContent>
+        </Card>
+      </div>
+    </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>
+  );
+}