students fked up
This commit is contained in:
Om Lanke
6
apps/student/app/(main)/actions.ts
Normal file
6
apps/student/app/(main)/actions.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
'use server'
|
||||
import { signOut } from "@/auth";
|
||||
|
||||
export async function signOutAction() {
|
||||
await signOut();
|
||||
}
|
||||
@@ -1,36 +1,291 @@
|
||||
import {
|
||||
NavigationMenu,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuList,
|
||||
NavigationMenuTrigger,
|
||||
navigationMenuTriggerStyle,
|
||||
} from '@workspace/ui/components/navigation-menu';
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Button } from '@workspace/ui/components/button';
|
||||
import { Badge } from '@workspace/ui/components/badge';
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Users,
|
||||
Briefcase,
|
||||
Menu,
|
||||
X,
|
||||
LogOut,
|
||||
Settings,
|
||||
Bell,
|
||||
Search,
|
||||
ChevronDown
|
||||
} from 'lucide-react';
|
||||
import { signOutAction } from './actions';
|
||||
|
||||
const navLinks = [
|
||||
{
|
||||
href: '/',
|
||||
label: 'Dashboard',
|
||||
icon: LayoutDashboard,
|
||||
description: 'Overview and analytics'
|
||||
},
|
||||
{
|
||||
href: '/students',
|
||||
label: 'Students',
|
||||
icon: Users,
|
||||
description: 'Manage student profiles'
|
||||
},
|
||||
{
|
||||
href: '/jobs',
|
||||
label: 'Jobs',
|
||||
icon: Briefcase,
|
||||
description: 'Job listings and applications'
|
||||
},
|
||||
];
|
||||
|
||||
export default function MainLayout({ children }: { children: React.ReactNode }) {
|
||||
const pathname = usePathname();
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [isProfileDropdownOpen, setIsProfileDropdownOpen] = useState(false);
|
||||
|
||||
// Handle scroll effect
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 10);
|
||||
};
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
// Close mobile menu when route changes
|
||||
useEffect(() => {
|
||||
setIsMobileMenuOpen(false);
|
||||
}, [pathname]);
|
||||
|
||||
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>
|
||||
<div className="min-h-screen bg-background font-sans">
|
||||
{/* Enhanced Sticky Navbar */}
|
||||
<header className={`sticky top-0 z-50 w-full transition-all duration-300 ${
|
||||
isScrolled
|
||||
? 'bg-white/95 backdrop-blur-md shadow-lg border-b border-gray-200/50'
|
||||
: 'bg-white/80 backdrop-blur-sm'
|
||||
}`}>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
{/* Logo Section */}
|
||||
<div className="flex items-center gap-3 group">
|
||||
<div className="relative">
|
||||
<img
|
||||
src="/favicon.ico"
|
||||
alt="Logo"
|
||||
className="w-10 h-10 rounded-xl shadow-lg group-hover:shadow-xl transition-all duration-300 group-hover:scale-110"
|
||||
/>
|
||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-br from-red-500/20 to-pink-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-extrabold text-2xl tracking-tight text-gray-800 group-hover:text-gray-900 transition-colors duration-200">
|
||||
NextPlacement
|
||||
</span>
|
||||
<span className="text-xs text-gray-500 font-medium -mt-1">Admin Portal</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden md:flex items-center gap-6">
|
||||
{navLinks.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
const Icon = link.icon;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className={`relative group px-6 py-3 rounded-xl font-medium transition-all duration-200 ${
|
||||
isActive
|
||||
? 'text-red-600 bg-red-50 border border-red-200'
|
||||
: 'text-gray-700 hover:text-gray-900 hover:bg-gray-50'
|
||||
}`}
|
||||
prefetch={false}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<Icon className={`w-5 h-5 transition-transform duration-200 group-hover:scale-110 ${
|
||||
isActive ? 'text-red-600' : 'text-gray-500 group-hover:text-gray-700'
|
||||
}`} />
|
||||
<span className="text-base">{link.label}</span>
|
||||
</div>
|
||||
|
||||
{/* Active indicator */}
|
||||
{isActive && (
|
||||
<div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1 h-1 bg-red-500 rounded-full animate-pulse" />
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* Right Section - Search, Notifications, Profile */}
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Search Button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="hidden sm:flex items-center gap-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-all duration-200"
|
||||
>
|
||||
<Search className="w-4 h-4" />
|
||||
<span className="hidden lg:inline text-sm">Search</span>
|
||||
</Button>
|
||||
|
||||
{/* Notifications */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="relative text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-all duration-200"
|
||||
>
|
||||
<Bell className="w-4 h-4" />
|
||||
<Badge className="absolute -top-1 -right-1 h-5 w-5 rounded-full bg-red-500 text-xs text-white flex items-center justify-center animate-pulse">
|
||||
3
|
||||
</Badge>
|
||||
</Button>
|
||||
|
||||
{/* Profile Dropdown */}
|
||||
<div className="relative">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setIsProfileDropdownOpen(!isProfileDropdownOpen)}
|
||||
className="flex items-center gap-2 text-gray-700 hover:text-gray-900 hover:bg-gray-100 transition-all duration-200"
|
||||
>
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-red-500 to-pink-500 rounded-full flex items-center justify-center text-white font-semibold text-sm">
|
||||
A
|
||||
</div>
|
||||
<span className="hidden lg:inline text-sm font-medium">Admin</span>
|
||||
<ChevronDown className={`w-4 h-4 transition-transform duration-200 ${
|
||||
isProfileDropdownOpen ? 'rotate-180' : ''
|
||||
}`} />
|
||||
</Button>
|
||||
|
||||
{/* Profile Dropdown Menu */}
|
||||
{isProfileDropdownOpen && (
|
||||
<div className="absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-lg border border-gray-200 py-2 z-50 animate-in slide-in-from-top-2 duration-200">
|
||||
<div className="px-4 py-3 border-b border-gray-100">
|
||||
<p className="text-sm font-medium text-gray-900">Admin User</p>
|
||||
<p className="text-xs text-gray-500">admin@nextplacement.com</p>
|
||||
</div>
|
||||
<div className="py-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full justify-start text-gray-700 hover:text-gray-900 hover:bg-gray-50"
|
||||
>
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
Settings
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={signOutAction}
|
||||
className="w-full justify-start text-red-600 hover:text-red-700 hover:bg-red-50"
|
||||
>
|
||||
<LogOut className="w-4 h-4 mr-2" />
|
||||
Sign Out
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
className="md:hidden text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-all duration-200"
|
||||
>
|
||||
{isMobileMenuOpen ? (
|
||||
<X className="w-5 h-5" />
|
||||
) : (
|
||||
<Menu className="w-5 h-5" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation Menu */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="md:hidden border-t border-gray-200 bg-white/95 backdrop-blur-md animate-in slide-in-from-top-2 duration-200">
|
||||
<nav className="px-4 py-4 space-y-2">
|
||||
{navLinks.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
const Icon = link.icon;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className={`flex items-center gap-3 px-4 py-3 rounded-xl font-medium transition-all duration-200 ${
|
||||
isActive
|
||||
? 'text-red-600 bg-red-50 border border-red-200'
|
||||
: 'text-gray-700 hover:text-gray-900 hover:bg-gray-50'
|
||||
}`}
|
||||
prefetch={false}
|
||||
>
|
||||
<Icon className={`w-5 h-5 ${
|
||||
isActive ? 'text-red-600' : 'text-gray-500'
|
||||
}`} />
|
||||
<span>{link.label}</span>
|
||||
{isActive && (
|
||||
<div className="ml-auto w-2 h-2 bg-red-500 rounded-full animate-pulse" />
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Mobile Profile Section */}
|
||||
<div className="pt-4 border-t border-gray-200 mt-4">
|
||||
<div className="flex items-center gap-3 px-4 py-3">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-red-500 to-pink-500 rounded-full flex items-center justify-center text-white font-semibold">
|
||||
A
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-900">Admin User</p>
|
||||
<p className="text-xs text-gray-500">admin@nextplacement.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-4 py-2 space-y-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full justify-start text-gray-700 hover:text-gray-900 hover:bg-gray-50"
|
||||
>
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
Settings
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full justify-start text-red-600 hover:text-red-700 hover:bg-red-50"
|
||||
>
|
||||
<LogOut className="w-4 h-4 mr-2" />
|
||||
Sign Out
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
<main>{children}</main>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="bg-background min-h-screen">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
{/* Click outside to close dropdowns */}
|
||||
{isProfileDropdownOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-40"
|
||||
onClick={() => setIsProfileDropdownOpen(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,33 +1,222 @@
|
||||
import Login from '@/components/login';
|
||||
import Studs from '@/components/studs';
|
||||
import { db, admins } from '@workspace/db';
|
||||
import { auth, signIn, signOut } from '@/auth';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@workspace/ui/components/card"
|
||||
import { Button } from "@workspace/ui/components/button"
|
||||
import { Badge } from "@workspace/ui/components/badge"
|
||||
import { Separator } from "@workspace/ui/components/separator"
|
||||
import Link from "next/link"
|
||||
import { db, companies } from "@workspace/db"
|
||||
import { Plus, Building2, Briefcase, MapPin, DollarSign, Calendar, ExternalLink } from "lucide-react"
|
||||
|
||||
async function getStudents() {
|
||||
'use server';
|
||||
const s = await db.select().from(admins);
|
||||
console.log(s);
|
||||
async function getDashboardData() {
|
||||
try {
|
||||
// Get companies with their jobs
|
||||
const result = await db.query.companies.findMany({
|
||||
with: {
|
||||
jobs: {
|
||||
where: (job, {eq}) => eq(job.active, true), // Only include active jobs
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// Filter to only include companies that have active jobs
|
||||
const companiesWithActiveJobs = result.filter((company) => company.jobs.length > 0)
|
||||
|
||||
console.log("Companies with active jobs:", companiesWithActiveJobs.length)
|
||||
return companiesWithActiveJobs
|
||||
} catch (error) {
|
||||
console.error("Database query error:", error)
|
||||
// Fallback to companies only if the relation query fails
|
||||
const companiesOnly = await db.select().from(companies)
|
||||
return companiesOnly.map((company) => ({ ...company, jobs: [] }))
|
||||
}
|
||||
}
|
||||
|
||||
async function logIn() {
|
||||
'use server';
|
||||
await signIn('google');
|
||||
}
|
||||
export default async function DashboardPage() {
|
||||
const data = await getDashboardData()
|
||||
|
||||
async function logOut() {
|
||||
'use server';
|
||||
await signOut();
|
||||
}
|
||||
// Calculate stats for companies with active jobs only
|
||||
const totalActiveJobs = data.reduce((acc, company) => acc + company.jobs.filter((job) => job.active).length, 0)
|
||||
|
||||
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 className="min-h-screen bg-gradient-to-br">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{/* Header Section */}
|
||||
<section className="mb-12">
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold text-gray-800 mb-2">Companies Dashboard</h1>
|
||||
<p className="text-gray-600 text-lg">Companies with active job listings</p>
|
||||
</div>
|
||||
<Link href="/jobs/new">
|
||||
<Button className="flex items-center gap-2 px-6 py-3 text-base font-medium shadow-lg hover:shadow-xl transition-all duration-200">
|
||||
<Plus className="w-5 h-5" />
|
||||
Add New Job
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<Card className="bg-white shadow-sm hover:shadow-md transition-shadow duration-200">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Companies with Active Jobs</p>
|
||||
<p className="text-3xl font-bold text-gray-800">{data.length}</p>
|
||||
</div>
|
||||
<Building2 className="w-8 h-8 text-gray-400" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white shadow-sm hover:shadow-md transition-shadow duration-200">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Total Active Jobs</p>
|
||||
<p className="text-3xl font-bold text-gray-800">{totalActiveJobs}</p>
|
||||
</div>
|
||||
<Briefcase className="w-8 h-8 text-gray-400" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white shadow-sm hover:shadow-md transition-shadow duration-200">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Avg Jobs per Company</p>
|
||||
<p className="text-3xl font-bold text-gray-800">
|
||||
{data.length > 0 ? Math.round((totalActiveJobs / data.length) * 10) / 10 : 0}
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<div className="w-3 h-3 bg-blue-500 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Companies Section */}
|
||||
<section className="space-y-8">
|
||||
{data.length === 0 ? (
|
||||
<Card className="bg-white shadow-sm">
|
||||
<CardContent className="p-12 text-center">
|
||||
<Building2 className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-semibold text-gray-700 mb-2">No companies with active jobs</h3>
|
||||
<p className="text-gray-500 mb-6">Get started by adding your first job listing</p>
|
||||
<Link href="/jobs/new">
|
||||
<Button className="flex items-center gap-2">
|
||||
<Plus className="w-4 h-4" />
|
||||
Add Job
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
data.map((company) => (
|
||||
<Card
|
||||
key={company.id}
|
||||
className="bg-white shadow-sm hover:shadow-md transition-all duration-200 overflow-hidden"
|
||||
>
|
||||
<CardHeader className="pb-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center">
|
||||
<Building2 className="w-6 h-6 text-gray-600" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-xl font-semibold text-gray-800">{company.name}</CardTitle>
|
||||
<p className="text-sm text-gray-500 mt-1">{company.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{company.jobs.filter((job) => job.active).length} active job
|
||||
{company.jobs.filter((job) => job.active).length !== 1 ? "s" : ""}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
{company.description && company.description !== "N/A" && (
|
||||
<p className="text-sm text-gray-600 mt-3">{company.description}</p>
|
||||
)}
|
||||
</CardHeader>
|
||||
|
||||
<Separator />
|
||||
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-medium text-gray-700">Active Job Listings</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||
{company.jobs
|
||||
.filter((job) => job.active)
|
||||
.map((job) => (
|
||||
<Card
|
||||
key={job.id}
|
||||
className="group hover:shadow-lg transition-all duration-200 border border-gray-200 bg-gray-50 hover:bg-white"
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<h4 className="font-medium text-gray-800 text-sm leading-tight line-clamp-2">
|
||||
{job.title}
|
||||
</h4>
|
||||
<Badge
|
||||
variant="default"
|
||||
className="text-xs bg-blue-100 text-blue-700 hover:bg-blue-200"
|
||||
>
|
||||
Active
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{job.location && job.location !== "N/A" && (
|
||||
<div className="flex items-center gap-1 text-xs text-gray-500">
|
||||
<MapPin className="w-3 h-3" />
|
||||
<span className="truncate">{job.location}</span>
|
||||
</div>
|
||||
)}
|
||||
{job.salary && job.salary !== "N/A" && (
|
||||
<div className="flex items-center gap-1 text-xs text-gray-500">
|
||||
<DollarSign className="w-3 h-3" />
|
||||
<span className="truncate">{job.salary}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-1 text-xs text-gray-500">
|
||||
<Calendar className="w-3 h-3" />
|
||||
<span>Deadline: {job.applicationDeadline.toLocaleDateString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{job.link && (
|
||||
<div className="pt-2">
|
||||
<a
|
||||
href={job.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 text-xs text-blue-600 hover:text-blue-700 font-medium group-hover:underline"
|
||||
>
|
||||
View Job
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
@@ -1,628 +0,0 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user