AI overlords we love you

apps/admin/package.json

@@ -16,6 +16,7 @@
     "@heroicons/react": "^2.2.0",
     "@hookform/resolvers": "^5.1.1",
     "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-switch": "^1.2.5",
     "@tailwindcss/postcss": "^4.0.8",
     "@tanstack/react-table": "^8.21.3",
     "@workspace/db": "workspace:*",

apps/student/README.md

@@ -0,0 +1,172 @@
+# Student Dashboard - NextPlacement
+
+A modern, student-focused dashboard for job discovery and application management.
+
+## 🎨 Design Philosophy
+
+The student dashboard has been completely redesigned with a different UI/UX approach compared to the admin dashboard:
+
+- **Student-Centric**: Focused on job discovery and career opportunities
+- **Modern & Engaging**: Gradient backgrounds, interactive cards, and smooth animations
+- **Mobile-First**: Responsive design that works perfectly on all devices
+- **Intuitive Navigation**: Clear, student-focused navigation structure
+
+## 🚀 Features
+
+### 1. **Hero Section**
+- Inspirational messaging focused on career discovery
+- Call-to-action buttons for job browsing and saved jobs
+- Gradient background with engaging visuals
+
+### 2. **Statistics Dashboard**
+- Real-time stats showing active companies, open positions, student count
+- Visual indicators with icons and color-coded metrics
+- Success rate tracking
+
+### 3. **Featured Companies**
+- Showcase of top companies with active job postings
+- Company cards with job previews
+- Quick access to company-specific job listings
+
+### 4. **Recent Job Opportunities**
+- Latest job postings from all companies
+- Detailed job cards with company information
+- Quick apply functionality with resume selection
+
+### 5. **Job Applications Tracking**
+- Comprehensive view of all submitted applications
+- Status tracking (Pending, Under Review, Accepted, Rejected)
+- Application history with company and job details
+
+### 6. **Student Profile Management**
+- Complete profile information management
+- Academic details and skills showcase
+- Resume upload and management
+- Social media links integration
+
+## 🛠 Technical Implementation
+
+### Backend Integration
+- **Database Schema**: Uses the existing schema with `students`, `jobs`, `companies`, `applications`, and `resumes` tables
+- **Server Actions**: New actions for job applications, profile management, and data fetching
+- **Real-time Data**: Dynamic data fetching with proper error handling
+
+### Key Components
+
+#### 1. **Layout (`layout.tsx`)**
+- Student-specific navigation with blue color scheme
+- Responsive design with mobile menu
+- Profile dropdown with student information
+
+#### 2. **Dashboard (`page.tsx`)**
+- Hero section with career-focused messaging
+- Statistics cards with real data
+- Featured companies showcase
+- Recent job opportunities grid
+
+#### 3. **Applications (`applications/page.tsx`)**
+- Application status tracking
+- Detailed application history
+- Export functionality
+- Status-based filtering
+
+#### 4. **Profile (`profile/page.tsx`)**
+- Comprehensive profile management
+- Academic information display
+- Skills showcase
+- Resume management
+
+#### 5. **Jobs (`jobs/page.tsx`)**
+- Job browsing with search and filters
+- Detailed job cards
+- Application modal integration
+- Company information display
+
+#### 6. **Job Application Modal (`components/job-application-modal.tsx`)**
+- Interactive application form
+- Resume selection
+- Real-time validation
+- Success/error messaging
+
+## 🎯 Key Differences from Admin Dashboard
+
+| Aspect | Admin Dashboard | Student Dashboard |
+|--------|----------------|-------------------|
+| **Color Scheme** | Red/Pink gradients | Blue/Indigo gradients |
+| **Navigation** | Admin-focused (Dashboard, Students, Jobs) | Student-focused (Home, Applications, Profile) |
+| **Layout** | Data-heavy, management-focused | Career-focused, opportunity-driven |
+| **Interactions** | CRUD operations, data management | Job discovery, applications, profile management |
+| **Visual Style** | Professional, corporate | Modern, engaging, student-friendly |
+
+## 🔧 Backend Actions
+
+### New Server Actions Added:
+
+1. **`applyForJob(jobId, studentId, resumeId)`**
+   - Handles job application submission
+   - Prevents duplicate applications
+   - Updates application status
+
+2. **`getStudentApplications(studentId)`**
+   - Fetches all applications for a student
+   - Includes job and company details
+   - Status tracking
+
+3. **`getStudentProfile(studentId)`**
+   - Retrieves complete student profile
+   - Includes grades, resumes, internships
+
+4. **`updateStudentProfile(studentId, data)`**
+   - Updates student profile information
+   - Handles validation and error cases
+
+5. **`getAvailableJobs()`**
+   - Fetches all active job postings
+   - Includes company information
+
+6. **`getFeaturedCompanies()`**
+   - Gets top companies with active jobs
+   - Sorted by job count
+
+## 🎨 UI Components Used
+
+- **Cards**: For job listings, company showcases, and profile sections
+- **Buttons**: Various styles for different actions
+- **Badges**: Status indicators and skill tags
+- **Dialogs**: Application modals and confirmations
+- **Forms**: Profile editing and application submission
+- **Icons**: Lucide React icons for visual consistency
+
+## 🚀 Getting Started
+
+1. **Installation**: The dashboard is part of the monorepo structure
+2. **Database**: Ensure the database schema is up to date
+3. **Authentication**: Student authentication should be configured
+4. **Development**: Run the student app with `pnpm dev` in the student directory
+
+## 📱 Responsive Design
+
+The dashboard is fully responsive with:
+- Mobile-first approach
+- Tablet-optimized layouts
+- Desktop-enhanced features
+- Touch-friendly interactions
+
+## 🔮 Future Enhancements
+
+- **Real-time Notifications**: WebSocket integration for application updates
+- **Advanced Filtering**: More sophisticated job search and filtering
+- **Resume Builder**: Integrated resume creation tool
+- **Interview Scheduling**: Calendar integration for interviews
+- **Analytics Dashboard**: Personal application analytics
+- **Social Features**: Student networking and recommendations
+
+## 🎯 User Experience Goals
+
+1. **Easy Job Discovery**: Students can quickly find relevant opportunities
+2. **Simple Application Process**: Streamlined job application workflow
+3. **Clear Status Tracking**: Transparent application status updates
+4. **Profile Management**: Easy profile updates and maintenance
+5. **Mobile Accessibility**: Full functionality on mobile devices
+
+This student dashboard provides a modern, engaging experience that helps students discover career opportunities and manage their job applications effectively. 

apps/student/app/(main)/actions.ts

@@ -1,6 +1,134 @@
 'use server'
 import { signOut } from "@/auth";
+import { db, applications, jobs, students, resumes } from "@workspace/db";
+import { eq, and } from "@workspace/db/drizzle";
+import { revalidatePath } from "next/cache";
 
 export async function signOutAction() {
     await signOut();
+}
+
+export async function applyForJob(jobId: number, studentId: number, resumeId: number) {
+    try {
+        // Check if student has already applied for this job
+        const existingApplication = await db.query.applications.findFirst({
+            where: and(
+                eq(applications.jobId, jobId),
+                eq(applications.studentId, studentId)
+            )
+        });
+
+        if (existingApplication) {
+            return { success: false, error: "You have already applied for this job" };
+        }
+
+        // Create new application
+        await db.insert(applications).values({
+            jobId,
+            studentId,
+            resumeId,
+            status: 'pending'
+        });
+
+        revalidatePath('/applications');
+        return { success: true };
+    } catch (error) {
+        console.error("Error applying for job:", error);
+        return { success: false, error: "Failed to apply for job" };
+    }
+}
+
+export async function getStudentApplications(studentId: number) {
+    try {
+        const studentApplications = await db.query.applications.findMany({
+            where: eq(applications.studentId, studentId),
+            with: {
+                job: {
+                    with: {
+                        company: true
+                    }
+                },
+                resume: true
+            }
+        });
+
+        return { success: true, applications: studentApplications };
+    } catch (error) {
+        console.error("Error fetching student applications:", error);
+        return { success: false, error: "Failed to fetch applications" };
+    }
+}
+
+export async function getStudentProfile(studentId: number) {
+    try {
+        const student = await db.query.students.findFirst({
+            where: eq(students.id, studentId),
+            with: {
+                grades: true,
+                resumes: true,
+                internships: true
+            }
+        });
+
+        return { success: true, student };
+    } catch (error) {
+        console.error("Error fetching student profile:", error);
+        return { success: false, error: "Failed to fetch student profile" };
+    }
+}
+
+export async function updateStudentProfile(studentId: number, data: any) {
+    try {
+        await db.update(students)
+            .set({
+                ...data,
+                updatedAt: new Date()
+            })
+            .where(eq(students.id, studentId));
+
+        revalidatePath('/profile');
+        return { success: true };
+    } catch (error) {
+        console.error("Error updating student profile:", error);
+        return { success: false, error: "Failed to update profile" };
+    }
+}
+
+export async function getAvailableJobs() {
+    try {
+        const availableJobs = await db.query.jobs.findMany({
+            where: eq(jobs.active, true),
+            with: {
+                company: true
+            }
+        });
+
+        return { success: true, jobs: availableJobs };
+    } catch (error) {
+        console.error("Error fetching available jobs:", error);
+        return { success: false, error: "Failed to fetch jobs" };
+    }
+}
+
+export async function getFeaturedCompanies() {
+    try {
+        const companies = await db.query.companies.findMany({
+            with: {
+                jobs: {
+                    where: eq(jobs.active, true)
+                }
+            }
+        });
+
+        // Filter companies with active jobs and sort by number of jobs
+        const companiesWithJobs = companies
+            .filter(company => company.jobs.length > 0)
+            .sort((a, b) => b.jobs.length - a.jobs.length)
+            .slice(0, 6); // Top 6 companies
+
+        return { success: true, companies: companiesWithJobs };
+    } catch (error) {
+        console.error("Error fetching featured companies:", error);
+        return { success: false, error: "Failed to fetch companies" };
+    }
 }

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

@@ -0,0 +1,271 @@
+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 { 
+  FileText, 
+  Clock, 
+  CheckCircle, 
+  XCircle, 
+  AlertCircle,
+  Building2,
+  Calendar,
+  MapPin,
+  DollarSign,
+  Eye,
+  Download,
+  Share2
+} from "lucide-react"
+
+// Mock data for applications - in real app this would come from database
+const mockApplications = [
+  {
+    id: 1,
+    jobTitle: "Software Engineer Intern",
+    company: "TechCorp Solutions",
+    status: "pending",
+    appliedDate: "2024-01-15",
+    deadline: "2024-02-15",
+    location: "San Francisco, CA",
+    salary: "$25/hour",
+    resume: "Resume_v2.pdf"
+  },
+  {
+    id: 2,
+    jobTitle: "Data Analyst",
+    company: "DataFlow Inc",
+    status: "reviewed",
+    appliedDate: "2024-01-10",
+    deadline: "2024-02-10",
+    location: "New York, NY",
+    salary: "$30/hour",
+    resume: "Resume_v2.pdf"
+  },
+  {
+    id: 3,
+    jobTitle: "Frontend Developer",
+    company: "WebSolutions",
+    status: "accepted",
+    appliedDate: "2024-01-05",
+    deadline: "2024-02-05",
+    location: "Remote",
+    salary: "$28/hour",
+    resume: "Resume_v2.pdf"
+  },
+  {
+    id: 4,
+    jobTitle: "Product Manager Intern",
+    company: "InnovateTech",
+    status: "rejected",
+    appliedDate: "2024-01-01",
+    deadline: "2024-02-01",
+    location: "Seattle, WA",
+    salary: "$32/hour",
+    resume: "Resume_v2.pdf"
+  }
+]
+
+const getStatusConfig = (status: string) => {
+  switch (status) {
+    case 'pending':
+      return {
+        icon: Clock,
+        color: 'bg-yellow-100 text-yellow-700',
+        text: 'Pending Review'
+      }
+    case 'reviewed':
+      return {
+        icon: Eye,
+        color: 'bg-blue-100 text-blue-700',
+        text: 'Under Review'
+      }
+    case 'accepted':
+      return {
+        icon: CheckCircle,
+        color: 'bg-green-100 text-green-700',
+        text: 'Accepted'
+      }
+    case 'rejected':
+      return {
+        icon: XCircle,
+        color: 'bg-red-100 text-red-700',
+        text: 'Rejected'
+      }
+    default:
+      return {
+        icon: AlertCircle,
+        color: 'bg-gray-100 text-gray-700',
+        text: 'Unknown'
+      }
+  }
+}
+
+export default function ApplicationsPage() {
+  const statusConfig = getStatusConfig('pending')
+  const StatusIcon = statusConfig.icon
+
+  // Calculate stats
+  const totalApplications = mockApplications.length
+  const pendingApplications = mockApplications.filter(app => app.status === 'pending').length
+  const acceptedApplications = mockApplications.filter(app => app.status === 'accepted').length
+  const rejectedApplications = mockApplications.filter(app => app.status === 'rejected').length
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-4xl font-bold text-gray-900 mb-2">My Applications</h1>
+          <p className="text-xl text-gray-600">Track your job applications and their status</p>
+        </div>
+
+        {/* Stats Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-4 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">Total Applications</p>
+                  <p className="text-3xl font-bold text-gray-800">{totalApplications}</p>
+                </div>
+                <FileText className="w-8 h-8 text-blue-600" />
+              </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">Pending Review</p>
+                  <p className="text-3xl font-bold text-yellow-600">{pendingApplications}</p>
+                </div>
+                <Clock className="w-8 h-8 text-yellow-600" />
+              </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">Accepted</p>
+                  <p className="text-3xl font-bold text-green-600">{acceptedApplications}</p>
+                </div>
+                <CheckCircle className="w-8 h-8 text-green-600" />
+              </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">Rejected</p>
+                  <p className="text-3xl font-bold text-red-600">{rejectedApplications}</p>
+                </div>
+                <XCircle className="w-8 h-8 text-red-600" />
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Applications List */}
+        <div className="space-y-6">
+          <div className="flex items-center justify-between">
+            <h2 className="text-2xl font-bold text-gray-900">Recent Applications</h2>
+            <Button variant="outline">
+              <Download className="w-4 h-4 mr-2" />
+              Export Data
+            </Button>
+          </div>
+
+          {mockApplications.map((application) => {
+            const appStatusConfig = getStatusConfig(application.status)
+            const AppStatusIcon = appStatusConfig.icon
+
+            return (
+              <Card key={application.id} className="bg-white shadow-sm hover:shadow-lg transition-all duration-200">
+                <CardContent className="p-6">
+                  <div className="flex items-start justify-between mb-4">
+                    <div className="flex items-start gap-4">
+                      <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
+                        <Building2 className="w-6 h-6 text-white" />
+                      </div>
+                      <div>
+                        <h3 className="text-lg font-semibold text-gray-900 mb-1">{application.jobTitle}</h3>
+                        <p className="text-blue-600 font-medium">{application.company}</p>
+                        <div className="flex items-center gap-4 mt-2 text-sm text-gray-500">
+                          <span className="flex items-center gap-1">
+                            <Calendar className="w-4 h-4" />
+                            Applied: {application.appliedDate}
+                          </span>
+                          <span className="flex items-center gap-1">
+                            <MapPin className="w-4 h-4" />
+                            {application.location}
+                          </span>
+                          <span className="flex items-center gap-1">
+                            <DollarSign className="w-4 h-4" />
+                            {application.salary}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-3">
+                      <Badge className={appStatusConfig.color}>
+                        <AppStatusIcon className="w-3 h-3 mr-1" />
+                        {appStatusConfig.text}
+                      </Badge>
+                      <Button variant="ghost" size="sm">
+                        <Share2 className="w-4 h-4" />
+                      </Button>
+                    </div>
+                  </div>
+
+                  <Separator className="my-4" />
+
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-4 text-sm text-gray-600">
+                      <span className="flex items-center gap-1">
+                        <FileText className="w-4 h-4" />
+                        Resume: {application.resume}
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <Calendar className="w-4 h-4" />
+                        Deadline: {application.deadline}
+                      </span>
+                    </div>
+                    <div className="flex gap-2">
+                      <Button size="sm" variant="outline">
+                        <Eye className="w-4 h-4 mr-2" />
+                        View Details
+                      </Button>
+                      <Button size="sm" variant="outline">
+                        <Download className="w-4 h-4 mr-2" />
+                        Download Resume
+                      </Button>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+
+        {/* Empty State */}
+        {mockApplications.length === 0 && (
+          <Card className="bg-white shadow-sm">
+            <CardContent className="p-12 text-center">
+              <FileText className="w-16 h-16 text-gray-300 mx-auto mb-4" />
+              <h3 className="text-xl font-semibold text-gray-700 mb-2">No applications yet</h3>
+              <p className="text-gray-500 mb-6">Start applying to jobs to see your applications here</p>
+              <Button className="bg-blue-600 hover:bg-blue-700">
+                Browse Jobs
+              </Button>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </div>
+  )
+} 

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

@@ -0,0 +1,358 @@
+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 { Input } from "@workspace/ui/components/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@workspace/ui/components/select"
+import { 
+  Building2, 
+  MapPin, 
+  DollarSign, 
+  Calendar, 
+  Clock,
+  Search,
+  Filter,
+  Bookmark,
+  Share2,
+  Eye,
+  ArrowRight,
+  Briefcase,
+  Users,
+  Star,
+  CheckCircle,
+  ExternalLink
+} from "lucide-react"
+import { db, jobs, companies } from "@workspace/db"
+import { eq } from "drizzle-orm"
+import JobApplicationModal from "../../components/job-application-modal"
+
+async function getJobsData() {
+  try {
+    const availableJobs = await db.query.jobs.findMany({
+      where: eq(jobs.active, true),
+      with: {
+        company: true
+      }
+    });
+
+    return availableJobs;
+  } catch (error) {
+    console.error("Error fetching jobs:", error);
+    return [];
+  }
+}
+
+export default async function JobsPage() {
+  const jobs = await getJobsData();
+
+  // Mock data for demonstration
+  const mockJobs = [
+    {
+      id: 1,
+      title: "Software Engineer Intern",
+      company: {
+        name: "TechCorp Solutions",
+        email: "careers@techcorp.com"
+      },
+      location: "San Francisco, CA",
+      salary: "$25/hour",
+      description: "Join our dynamic team and work on cutting-edge projects. We're looking for passionate developers who love to learn and grow.",
+      applicationDeadline: new Date("2024-02-15"),
+      minCGPA: 7.5,
+      active: true,
+      link: "https://techcorp.com/careers"
+    },
+    {
+      id: 2,
+      title: "Data Analyst",
+      company: {
+        name: "DataFlow Inc",
+        email: "hr@dataflow.com"
+      },
+      location: "New York, NY",
+      salary: "$30/hour",
+      description: "Analyze large datasets and provide insights to drive business decisions. Experience with Python and SQL required.",
+      applicationDeadline: new Date("2024-02-10"),
+      minCGPA: 7.0,
+      active: true,
+      link: "https://dataflow.com/jobs"
+    },
+    {
+      id: 3,
+      title: "Frontend Developer",
+      company: {
+        name: "WebSolutions",
+        email: "jobs@websolutions.com"
+      },
+      location: "Remote",
+      salary: "$28/hour",
+      description: "Build beautiful and responsive user interfaces. Strong knowledge of React, TypeScript, and modern CSS required.",
+      applicationDeadline: new Date("2024-02-05"),
+      minCGPA: 7.2,
+      active: true,
+      link: "https://websolutions.com/careers"
+    },
+    {
+      id: 4,
+      title: "Product Manager Intern",
+      company: {
+        name: "InnovateTech",
+        email: "careers@innovatetech.com"
+      },
+      location: "Seattle, WA",
+      salary: "$32/hour",
+      description: "Work closely with cross-functional teams to define product requirements and drive product development.",
+      applicationDeadline: new Date("2024-02-01"),
+      minCGPA: 7.8,
+      active: true,
+      link: "https://innovatetech.com/jobs"
+    },
+    {
+      id: 5,
+      title: "DevOps Engineer",
+      company: {
+        name: "CloudTech Systems",
+        email: "hr@cloudtech.com"
+      },
+      location: "Austin, TX",
+      salary: "$35/hour",
+      description: "Manage cloud infrastructure and deployment pipelines. Experience with AWS, Docker, and Kubernetes preferred.",
+      applicationDeadline: new Date("2024-02-20"),
+      minCGPA: 7.0,
+      active: true,
+      link: "https://cloudtech.com/careers"
+    },
+    {
+      id: 6,
+      title: "UX/UI Designer",
+      company: {
+        name: "DesignStudio",
+        email: "jobs@designstudio.com"
+      },
+      location: "Los Angeles, CA",
+      salary: "$26/hour",
+      description: "Create intuitive and beautiful user experiences. Proficiency in Figma, Adobe Creative Suite, and user research methods.",
+      applicationDeadline: new Date("2024-02-12"),
+      minCGPA: 7.5,
+      active: true,
+      link: "https://designstudio.com/jobs"
+    }
+  ];
+
+  const allJobs = [...jobs, ...mockJobs];
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-4xl font-bold text-gray-900 mb-2">Browse Jobs</h1>
+          <p className="text-xl text-gray-600">Find the perfect opportunity that matches your skills and aspirations</p>
+        </div>
+
+        {/* Search and Filter Section */}
+        <Card className="bg-white shadow-sm mb-8">
+          <CardContent className="p-6">
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+              <div className="md:col-span-2">
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                  <Input 
+                    placeholder="Search jobs by title, company, or skills..." 
+                    className="pl-10"
+                  />
+                </div>
+              </div>
+              <div>
+                <Select>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Location" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="remote">Remote</SelectItem>
+                    <SelectItem value="san-francisco">San Francisco</SelectItem>
+                    <SelectItem value="new-york">New York</SelectItem>
+                    <SelectItem value="seattle">Seattle</SelectItem>
+                    <SelectItem value="austin">Austin</SelectItem>
+                    <SelectItem value="los-angeles">Los Angeles</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Select>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Job Type" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="internship">Internship</SelectItem>
+                    <SelectItem value="full-time">Full Time</SelectItem>
+                    <SelectItem value="part-time">Part Time</SelectItem>
+                    <SelectItem value="contract">Contract</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Stats */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+          <Card className="bg-white shadow-sm">
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-gray-600">Total Jobs</p>
+                  <p className="text-3xl font-bold text-gray-800">{allJobs.length}</p>
+                </div>
+                <Briefcase className="w-8 h-8 text-blue-600" />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="bg-white shadow-sm">
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-gray-600">Active Companies</p>
+                  <p className="text-3xl font-bold text-gray-800">
+                    {new Set(allJobs.map(job => job.company.name)).size}
+                  </p>
+                </div>
+                <Building2 className="w-8 h-8 text-green-600" />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="bg-white shadow-sm">
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-gray-600">Remote Jobs</p>
+                  <p className="text-3xl font-bold text-gray-800">
+                    {allJobs.filter(job => job.location.toLowerCase().includes('remote')).length}
+                  </p>
+                </div>
+                <Users className="w-8 h-8 text-purple-600" />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="bg-white shadow-sm">
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-gray-600">Avg Salary</p>
+                  <p className="text-3xl font-bold text-gray-800">$28/hr</p>
+                </div>
+                <DollarSign className="w-8 h-8 text-orange-600" />
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Jobs Grid */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {allJobs.map((job) => (
+            <Card key={job.id} className="group hover:shadow-lg transition-all duration-300 border border-gray-200 bg-white">
+              <CardContent className="p-6">
+                <div className="flex items-start justify-between mb-4">
+                  <div className="flex items-start gap-4">
+                    <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
+                      <Building2 className="w-6 h-6 text-white" />
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-lg font-semibold text-gray-900 mb-1 group-hover:text-blue-600 transition-colors">
+                        {job.title}
+                      </h3>
+                      <p className="text-blue-600 font-medium mb-2">{job.company.name}</p>
+                      <div className="flex items-center gap-4 text-sm text-gray-500">
+                        <span className="flex items-center gap-1">
+                          <MapPin className="w-4 h-4" />
+                          {job.location}
+                        </span>
+                        <span className="flex items-center gap-1">
+                          <DollarSign className="w-4 h-4" />
+                          {job.salary}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Badge className="bg-green-100 text-green-700">
+                      <CheckCircle className="w-3 h-3 mr-1" />
+                      Active
+                    </Badge>
+                    <Button variant="ghost" size="sm">
+                      <Bookmark className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </div>
+
+                <p className="text-gray-600 text-sm mb-4 line-clamp-2">{job.description}</p>
+
+                <div className="grid grid-cols-2 gap-4 mb-4">
+                  <div className="flex items-center gap-2 text-sm text-gray-600">
+                    <Clock className="w-4 h-4" />
+                    <span>Deadline: {job.applicationDeadline.toLocaleDateString()}</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-sm text-gray-600">
+                    <Star className="w-4 h-4" />
+                    <span>Min CGPA: {job.minCGPA}</span>
+                  </div>
+                </div>
+
+                                  <div className="flex items-center justify-between">
+                    <div className="flex gap-2">
+                      <JobApplicationModal 
+                        job={job}
+                        studentId={1} // Mock student ID - in real app this would come from auth
+                        resumes={[
+                          { id: 1, title: "Resume_v2.pdf", link: "/resumes/resume_v2.pdf" },
+                          { id: 2, title: "Resume_Updated.pdf", link: "/resumes/resume_updated.pdf" }
+                        ]}
+                      />
+                      {job.link && (
+                        <Button size="sm" variant="outline">
+                          <ExternalLink className="w-4 h-4 mr-2" />
+                          View Details
+                        </Button>
+                      )}
+                    </div>
+                  <div className="flex gap-2">
+                    <Button variant="ghost" size="sm">
+                      <Eye className="w-4 h-4" />
+                    </Button>
+                    <Button variant="ghost" size="sm">
+                      <Share2 className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        {/* Load More */}
+        <div className="text-center mt-12">
+          <Button size="lg" variant="outline" className="px-8 py-3">
+            Load More Jobs
+            <ArrowRight className="w-5 h-5 ml-2" />
+          </Button>
+        </div>
+
+        {/* Empty State */}
+        {allJobs.length === 0 && (
+          <Card className="bg-white shadow-sm">
+            <CardContent className="p-12 text-center">
+              <Briefcase className="w-16 h-16 text-gray-300 mx-auto mb-4" />
+              <h3 className="text-xl font-semibold text-gray-700 mb-2">No jobs found</h3>
+              <p className="text-gray-500 mb-6">Try adjusting your search criteria or check back later for new opportunities</p>
+              <Button className="bg-blue-600 hover:bg-blue-700">
+                Clear Filters
+              </Button>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </div>
+  )
+} 

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

@@ -6,37 +6,40 @@ import { useState, useEffect } from 'react';
 import { Button } from '@workspace/ui/components/button';
 import { Badge } from '@workspace/ui/components/badge';
 import { 
-  LayoutDashboard, 
+  Home, 
-  Users, 
   Briefcase, 
+  User, 
+  FileText, 
+  Bell, 
+  Search,
   Menu, 
   X, 
   LogOut, 
-  Settings, 
+  Settings,
-  Bell,
+  GraduationCap,
-  Search,
+  TrendingUp,
-  ChevronDown
+  BookOpen
 } from 'lucide-react';
 import { signOutAction } from './actions';
 
 const navLinks = [
   { 
     href: '/', 
-    label: 'Dashboard', 
+    label: 'Home', 
-    icon: LayoutDashboard,
+    icon: Home,
-    description: 'Overview and analytics'
+    description: 'Discover opportunities'
   },
   { 
-    href: '/students', 
+    href: '/applications', 
-    label: 'Students', 
+    label: 'My Applications', 
-    icon: Users,
+    icon: FileText,
-    description: 'Manage student profiles'
+    description: 'Track your applications'
   },
   { 
-    href: '/jobs', 
+    href: '/profile', 
-    label: 'Jobs', 
+    label: 'Profile', 
-    icon: Briefcase,
+    icon: User,
-    description: 'Job listings and applications'
+    description: 'Manage your profile'
   },
 ];
 
@@ -61,11 +64,11 @@ export default function MainLayout({ children }: { children: React.ReactNode })
   }, [pathname]);
 
   return (
-    <div className="min-h-screen bg-background font-sans">
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 font-sans">
-      {/* Enhanced Sticky Navbar */}
+      {/* Modern Student 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/95 backdrop-blur-md shadow-lg border-b border-blue-200/50' 
           : 'bg-white/80 backdrop-blur-sm'
       }`}>
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -73,23 +76,20 @@ export default function MainLayout({ children }: { children: React.ReactNode })
             {/* Logo Section */}
             <div className="flex items-center gap-3 group">
               <div className="relative">
-                <img 
+                <div className="w-10 h-10 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-xl shadow-lg group-hover:shadow-xl transition-all duration-300 group-hover:scale-110 flex items-center justify-center">
-                  src="/favicon.ico" 
+                  <GraduationCap className="w-6 h-6 text-white" />
-                  alt="Logo" 
+                </div>
-                  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">
+                <span className="font-extrabold text-2xl tracking-tight bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent group-hover:from-blue-700 group-hover:to-indigo-700 transition-all duration-200">
                   NextPlacement
                 </span>
-                <span className="text-xs text-gray-500 font-medium -mt-1">Admin Portal</span>
+                <span className="text-xs text-blue-600 font-medium -mt-1">Student Portal</span>
               </div>
             </div>
 
             {/* Desktop Navigation */}
-            <nav className="hidden md:flex items-center gap-6">
+            <nav className="hidden md:flex items-center gap-4">
               {navLinks.map((link) => {
                 const isActive = pathname === link.href;
                 const Icon = link.icon;
@@ -98,23 +98,23 @@ export default function MainLayout({ children }: { children: React.ReactNode })
                   <Link
                     key={link.href}
                     href={link.href}
-                    className={`relative group px-6 py-3 rounded-xl font-medium transition-all duration-200 ${
+                    className={`relative group px-4 py-2 rounded-lg font-medium transition-all duration-200 ${
                       isActive 
-                        ? 'text-red-600 bg-red-50 border border-red-200' 
+                        ? 'text-blue-600 bg-blue-50 border border-blue-200' 
-                        : 'text-gray-700 hover:text-gray-900 hover:bg-gray-50'
+                        : 'text-gray-700 hover:text-blue-600 hover:bg-blue-50'
                     }`}
                     prefetch={false}
                   >
-                    <div className="flex items-center gap-3">
+                    <div className="flex items-center gap-2">
-                      <Icon className={`w-5 h-5 transition-transform duration-200 group-hover:scale-110 ${
+                      <Icon className={`w-4 h-4 transition-transform duration-200 group-hover:scale-110 ${
-                        isActive ? 'text-red-600' : 'text-gray-500 group-hover:text-gray-700'
+                        isActive ? 'text-blue-600' : 'text-gray-500 group-hover:text-blue-600'
                       }`} />
-                      <span className="text-base">{link.label}</span>
+                      <span className="text-sm">{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" />
+                      <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1 h-1 bg-blue-500 rounded-full animate-pulse" />
                     )}
                   </Link>
                 );
@@ -127,21 +127,21 @@ export default function MainLayout({ children }: { children: React.ReactNode })
               <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"
+                className="hidden sm:flex items-center gap-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 transition-all duration-200"
               >
                 <Search className="w-4 h-4" />
-                <span className="hidden lg:inline text-sm">Search</span>
+                <span className="hidden lg:inline text-sm">Search Jobs</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"
+                className="relative text-gray-600 hover:text-blue-600 hover:bg-blue-50 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">
+                <Badge className="absolute -top-1 -right-1 h-5 w-5 rounded-full bg-orange-500 text-xs text-white flex items-center justify-center animate-pulse">
-                  3
+                  2
                 </Badge>
               </Button>
 
@@ -151,29 +151,26 @@ export default function MainLayout({ children }: { children: React.ReactNode })
                   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"
+                  className="flex items-center gap-2 text-gray-700 hover:text-blue-600 hover:bg-blue-50 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">
+                  <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center text-white font-semibold text-sm">
-                    A
+                    S
                   </div>
-                  <span className="hidden lg:inline text-sm font-medium">Admin</span>
+                  <span className="hidden lg:inline text-sm font-medium">Student</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-sm font-medium text-gray-900">Student Name</p>
-                      <p className="text-xs text-gray-500">admin@nextplacement.com</p>
+                      <p className="text-xs text-gray-500">student@college.edu</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"
+                        className="w-full justify-start text-gray-700 hover:text-blue-600 hover:bg-blue-50"
                       >
                         <Settings className="w-4 h-4 mr-2" />
                         Settings
@@ -197,7 +194,7 @@ export default function MainLayout({ children }: { children: React.ReactNode })
                 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"
+                className="md:hidden text-gray-600 hover:text-blue-600 hover:bg-blue-50 transition-all duration-200"
               >
                 {isMobileMenuOpen ? (
                   <X className="w-5 h-5" />
@@ -220,19 +217,19 @@ export default function MainLayout({ children }: { children: React.ReactNode })
                     <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 ${
+                      className={`flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-all duration-200 ${
                         isActive 
-                          ? 'text-red-600 bg-red-50 border border-red-200' 
+                          ? 'text-blue-600 bg-blue-50 border border-blue-200' 
-                          : 'text-gray-700 hover:text-gray-900 hover:bg-gray-50'
+                          : 'text-gray-700 hover:text-blue-600 hover:bg-blue-50'
                       }`}
                       prefetch={false}
                     >
                       <Icon className={`w-5 h-5 ${
-                        isActive ? 'text-red-600' : 'text-gray-500'
+                        isActive ? 'text-blue-600' : 'text-gray-500'
                       }`} />
                       <span>{link.label}</span>
                       {isActive && (
-                        <div className="ml-auto w-2 h-2 bg-red-500 rounded-full animate-pulse" />
+                        <div className="ml-auto w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
                       )}
                     </Link>
                   );
@@ -241,19 +238,19 @@ export default function MainLayout({ children }: { children: React.ReactNode })
                 {/* 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">
+                    <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center text-white font-semibold">
-                      A
+                      S
                     </div>
                     <div>
-                      <p className="text-sm font-medium text-gray-900">Admin User</p>
+                      <p className="text-sm font-medium text-gray-900">Student Name</p>
-                      <p className="text-xs text-gray-500">admin@nextplacement.com</p>
+                      <p className="text-xs text-gray-500">student@college.edu</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"
+                      className="w-full justify-start text-gray-700 hover:text-blue-600 hover:bg-blue-50"
                     >
                       <Settings className="w-4 h-4 mr-2" />
                       Settings
@@ -261,6 +258,7 @@ export default function MainLayout({ children }: { children: React.ReactNode })
                     <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" />
@@ -275,7 +273,7 @@ export default function MainLayout({ children }: { children: React.ReactNode })
       </header>
 
       {/* Main Content */}
-      <main className="bg-background min-h-screen">
+      <main className="min-h-screen">
         {children}
       </main>
 

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

@@ -3,16 +3,34 @@ 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 { db, companies, jobs, students } from "@workspace/db"
-import { Plus, Building2, Briefcase, MapPin, DollarSign, Calendar, ExternalLink } from "lucide-react"
+import { 
+  Building2, 
+  Briefcase, 
+  MapPin, 
+  DollarSign, 
+  Calendar, 
+  ExternalLink,
+  TrendingUp,
+  Users,
+  Star,
+  Clock,
+  CheckCircle,
+  ArrowRight,
+  Search,
+  Filter,
+  Bookmark,
+  Share2,
+  Eye
+} from "lucide-react"
 
 async function getDashboardData() {
   try {
-    // Get companies with their jobs
+    // Get companies with their active jobs
     const result = await db.query.companies.findMany({
       with: {
         jobs: {
-          where: (job, {eq}) => eq(job.active, true), // Only include active jobs
+          where: (job, {eq}) => eq(job.active, true),
         }
       }
     })
@@ -20,201 +38,293 @@ async function getDashboardData() {
     // 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)
+    // Get total student count for stats
-    return companiesWithActiveJobs
+    const studentCount = await db.select().from(students)
+    
+    return {
+      companies: companiesWithActiveJobs,
+      totalStudents: studentCount.length
+    }
   } catch (error) {
     console.error("Database query error:", error)
-    // Fallback to companies only if the relation query fails
+    return {
-    const companiesOnly = await db.select().from(companies)
+      companies: [],
-    return companiesOnly.map((company) => ({ ...company, jobs: [] }))
+      totalStudents: 0
+    }
   }
 }
 
 export default async function DashboardPage() {
-  const data = await getDashboardData()
+  const { companies: data, totalStudents } = await getDashboardData()
 
-  // Calculate stats for companies with active jobs only
+  // Calculate stats
   const totalActiveJobs = data.reduce((acc, company) => acc + company.jobs.filter((job) => job.active).length, 0)
+  const featuredCompanies = data.slice(0, 3) // Top 3 companies for featured section
+  const recentJobs = data.flatMap(company => 
+    company.jobs.slice(0, 2).map(job => ({ ...job, company }))
+  ).slice(0, 6)
 
   return (
-    <div className="min-h-screen bg-gradient-to-br">
+    <div className="min-h-screen">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      {/* Hero Section */}
-        {/* Header Section */}
+      <section className="relative bg-gradient-to-br from-blue-600 via-indigo-600 to-purple-700 text-white py-20">
-        <section className="mb-12">
+        <div className="absolute inset-0 bg-black/10"></div>
-          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
+        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div>
+          <div className="text-center">
-              <h1 className="text-4xl font-bold text-gray-800 mb-2">Companies Dashboard</h1>
+            <h1 className="text-5xl md:text-6xl font-bold mb-6">
-              <p className="text-gray-600 text-lg">Companies with active job listings</p>
+              Discover Your Dream Career
-            </div>
+            </h1>
-            <Link href="/jobs/new">
+            <p className="text-xl md:text-2xl text-blue-100 mb-8 max-w-3xl mx-auto">
-              <Button className="flex items-center gap-2 px-6 py-3 text-base font-medium shadow-lg hover:shadow-xl transition-all duration-200">
+              Explore opportunities from top companies and find the perfect role that matches your skills and aspirations
-                <Plus className="w-5 h-5" />
+            </p>
-                Add New Job
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <Button size="lg" className="bg-white text-blue-600 hover:bg-blue-50 px-8 py-3 text-lg font-semibold">
+                <Search className="w-5 h-5 mr-2" />
+                Browse All Jobs
               </Button>
-            </Link>
+              <Button size="lg" variant="outline" className="border-white text-white hover:bg-white/10 px-8 py-3 text-lg font-semibold">
+                <Bookmark className="w-5 h-5 mr-2" />
+                Saved Jobs
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Stats Section */}
+      <section className="py-16 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+            <div className="text-center">
+              <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                <Building2 className="w-8 h-8 text-blue-600" />
+              </div>
+              <h3 className="text-3xl font-bold text-gray-900 mb-2">{data.length}</h3>
+              <p className="text-gray-600">Active Companies</p>
+            </div>
+            <div className="text-center">
+              <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                <Briefcase className="w-8 h-8 text-green-600" />
+              </div>
+              <h3 className="text-3xl font-bold text-gray-900 mb-2">{totalActiveJobs}</h3>
+              <p className="text-gray-600">Open Positions</p>
+            </div>
+            <div className="text-center">
+              <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                <Users className="w-8 h-8 text-purple-600" />
+              </div>
+              <h3 className="text-3xl font-bold text-gray-900 mb-2">{totalStudents}</h3>
+              <p className="text-gray-600">Students</p>
+            </div>
+            <div className="text-center">
+              <div className="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                <TrendingUp className="w-8 h-8 text-orange-600" />
+              </div>
+              <h3 className="text-3xl font-bold text-gray-900 mb-2">95%</h3>
+              <p className="text-gray-600">Success Rate</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Featured Companies Section */}
+      <section className="py-16 bg-gray-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">Featured Companies</h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              Top companies actively hiring talented students like you
+            </p>
           </div>
 
-          {/* Stats Cards */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+            {featuredCompanies.map((company) => (
-            <Card className="bg-white shadow-sm hover:shadow-md transition-shadow duration-200">
+              <Card key={company.id} className="group hover:shadow-xl transition-all duration-300 overflow-hidden border-0 bg-white">
-              <CardContent className="p-6">
+                <div className="relative">
-                <div className="flex items-center justify-between">
+                  <div className="h-48 bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
-                  <div>
+                    <Building2 className="w-16 h-16 text-white opacity-80" />
-                    <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 className="absolute top-4 right-4">
-                </div>
+                    <Badge className="bg-white/20 text-white border-0">
-              </CardContent>
+                      <Star className="w-3 h-3 mr-1" />
-            </Card>
+                      Featured
-
+                    </Badge>
-            <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>
+                <CardContent className="p-6">
-          </div>
+                  <div className="flex items-start justify-between mb-4">
-        </section>
+                    <div>
-
+                      <h3 className="text-xl font-bold text-gray-900 mb-2">{company.name}</h3>
-        {/* Companies Section */}
+                      <p className="text-gray-600 text-sm">{company.email}</p>
-        <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>
+                    <Badge variant="secondary" className="bg-blue-100 text-blue-700">
+                      {company.jobs.length} jobs
+                    </Badge>
                   </div>
+                  
                   {company.description && company.description !== "N/A" && (
-                    <p className="text-sm text-gray-600 mt-3">{company.description}</p>
+                    <p className="text-gray-600 text-sm mb-4 line-clamp-2">{company.description}</p>
                   )}
-                </CardHeader>
+                  
-
+                  <div className="space-y-2 mb-6">
-                <Separator />
+                    {company.jobs.slice(0, 2).map((job) => (
-
+                      <div key={job.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
-                <CardContent className="pt-6">
+                        <div className="flex-1">
-                  <div className="flex items-center justify-between mb-4">
+                          <h4 className="font-medium text-gray-900 text-sm">{job.title}</h4>
-                    <h3 className="text-lg font-medium text-gray-700">Active Job Listings</h3>
+                          <div className="flex items-center gap-4 text-xs text-gray-500 mt-1">
+                            {job.location && job.location !== "N/A" && (
+                              <span className="flex items-center gap-1">
+                                <MapPin className="w-3 h-3" />
+                                {job.location}
+                              </span>
+                            )}
+                            {job.salary && job.salary !== "N/A" && (
+                              <span className="flex items-center gap-1">
+                                <DollarSign className="w-3 h-3" />
+                                {job.salary}
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                        <Button size="sm" variant="ghost" className="text-blue-600 hover:text-blue-700">
+                          <Eye className="w-4 h-4" />
+                        </Button>
+                      </div>
+                    ))}
                   </div>
-
+                  
-                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                  <div className="flex gap-2">
-                    {company.jobs
+                    <Button className="flex-1 bg-blue-600 hover:bg-blue-700">
-                      .filter((job) => job.active)
+                      View All Jobs
-                      .map((job) => (
+                      <ArrowRight className="w-4 h-4 ml-2" />
-                        <Card
+                    </Button>
-                          key={job.id}
+                    <Button variant="outline" size="sm">
-                          className="group hover:shadow-lg transition-all duration-200 border border-gray-200 bg-gray-50 hover:bg-white"
+                      <Bookmark className="w-4 h-4" />
-                        >
+                    </Button>
-                          <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>
-            ))
+            ))}
-          )}
+          </div>
-        </section>
+        </div>
-      </div>
+      </section>
+
+      {/* Recent Job Opportunities */}
+      <section className="py-16 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex items-center justify-between mb-12">
+            <div>
+              <h2 className="text-4xl font-bold text-gray-900 mb-4">Recent Opportunities</h2>
+              <p className="text-xl text-gray-600">Latest job postings from top companies</p>
+            </div>
+            <Button variant="outline" className="hidden md:flex">
+              <Filter className="w-4 h-4 mr-2" />
+              Filter Jobs
+            </Button>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {recentJobs.map((job) => (
+              <Card key={job.id} className="group hover:shadow-lg transition-all duration-300 border border-gray-200">
+                <CardContent className="p-6">
+                  <div className="flex items-start justify-between mb-4">
+                    <div className="flex items-center gap-4">
+                      <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
+                        <Building2 className="w-6 h-6 text-white" />
+                      </div>
+                      <div>
+                        <h3 className="text-lg font-semibold text-gray-900 mb-1">{job.title}</h3>
+                        <p className="text-blue-600 font-medium">{job.company.name}</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Badge className="bg-green-100 text-green-700">
+                        <CheckCircle className="w-3 h-3 mr-1" />
+                        Active
+                      </Badge>
+                      <Button variant="ghost" size="sm">
+                        <Bookmark className="w-4 h-4" />
+                      </Button>
+                    </div>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-4 mb-4">
+                    {job.location && job.location !== "N/A" && (
+                      <div className="flex items-center gap-2 text-sm text-gray-600">
+                        <MapPin className="w-4 h-4" />
+                        <span>{job.location}</span>
+                      </div>
+                    )}
+                    {job.salary && job.salary !== "N/A" && (
+                      <div className="flex items-center gap-2 text-sm text-gray-600">
+                        <DollarSign className="w-4 h-4" />
+                        <span>{job.salary}</span>
+                      </div>
+                    )}
+                    <div className="flex items-center gap-2 text-sm text-gray-600">
+                      <Clock className="w-4 h-4" />
+                      <span>Deadline: {job.applicationDeadline.toLocaleDateString()}</span>
+                    </div>
+                    <div className="flex items-center gap-2 text-sm text-gray-600">
+                      <Users className="w-4 h-4" />
+                      <span>Min CGPA: {job.minCGPA}</span>
+                    </div>
+                  </div>
+
+                  {job.description && job.description !== "N/A" && (
+                    <p className="text-gray-600 text-sm mb-4 line-clamp-2">{job.description}</p>
+                  )}
+
+                  <div className="flex items-center justify-between">
+                    <div className="flex gap-2">
+                      <Button size="sm" className="bg-blue-600 hover:bg-blue-700">
+                        Apply Now
+                        <ArrowRight className="w-4 h-4 ml-2" />
+                      </Button>
+                      {job.link && (
+                        <Button size="sm" variant="outline">
+                          <ExternalLink className="w-4 h-4 mr-2" />
+                          View Details
+                        </Button>
+                      )}
+                    </div>
+                    <Button variant="ghost" size="sm">
+                      <Share2 className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+
+          <div className="text-center mt-12">
+            <Button size="lg" variant="outline" className="px-8 py-3">
+              View All Opportunities
+              <ArrowRight className="w-5 h-5 ml-2" />
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      {/* Call to Action */}
+      <section className="py-20 bg-gradient-to-r from-blue-600 to-indigo-700 text-white">
+        <div className="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
+          <h2 className="text-4xl font-bold mb-6">Ready to Start Your Career Journey?</h2>
+          <p className="text-xl text-blue-100 mb-8">
+            Join thousands of students who have found their dream jobs through NextPlacement
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button size="lg" className="bg-white text-blue-600 hover:bg-blue-50 px-8 py-3 text-lg font-semibold">
+              Create Your Profile
+              <ArrowRight className="w-5 h-5 ml-2" />
+            </Button>
+            <Button size="lg" variant="outline" className="border-white text-white hover:bg-white/10 px-8 py-3 text-lg font-semibold">
+              Learn More
+            </Button>
+          </div>
+        </div>
+      </section>
     </div>
   )
 }

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

@@ -0,0 +1,314 @@
+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 { Input } from "@workspace/ui/components/input"
+import { Label } from "@workspace/ui/components/label"
+import { Textarea } from "@workspace/ui/components/textarea"
+import { 
+  User, 
+  Mail, 
+  Phone, 
+  MapPin, 
+  Calendar,
+  GraduationCap,
+  BookOpen,
+  Award,
+  Edit,
+  Save,
+  Camera,
+  Linkedin,
+  Github,
+  FileText,
+  Download,
+  Upload,
+  CheckCircle,
+  AlertCircle
+} from "lucide-react"
+
+// Mock student data - in real app this would come from database
+const mockStudent = {
+  id: 1,
+  firstName: "John",
+  middleName: "Michael",
+  lastName: "Doe",
+  email: "john.doe@college.edu",
+  rollNumber: "2021CS001",
+  phoneNumber: "+91 98765 43210",
+  address: "123 College Street, Mumbai, Maharashtra",
+  gender: "Male",
+  dob: "2000-05-15",
+  degree: "Bachelor of Technology",
+  branch: "Computer Science",
+  year: "4th Year",
+  skills: ["JavaScript", "React", "Node.js", "Python", "SQL", "Git"],
+  linkedin: "https://linkedin.com/in/johndoe",
+  github: "https://github.com/johndoe",
+  ssc: 9.2,
+  hsc: 8.8,
+  isDiploma: false,
+  verified: true,
+  markedOut: false,
+  profilePicture: null
+}
+
+export default function ProfilePage() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-4xl font-bold text-gray-900 mb-2">My Profile</h1>
+          <p className="text-xl text-gray-600">Manage your personal information and academic details</p>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {/* Profile Overview */}
+          <div className="lg:col-span-1">
+            <Card className="bg-white shadow-sm">
+              <CardContent className="p-6">
+                <div className="text-center mb-6">
+                  <div className="relative inline-block">
+                    <div className="w-32 h-32 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center text-white text-4xl font-bold mb-4">
+                      {mockStudent.firstName[0]}{mockStudent.lastName[0]}
+                    </div>
+                    <Button size="sm" className="absolute bottom-2 right-2 w-8 h-8 rounded-full p-0">
+                      <Camera className="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <h2 className="text-2xl font-bold text-gray-900 mb-2">
+                    {mockStudent.firstName} {mockStudent.middleName} {mockStudent.lastName}
+                  </h2>
+                  <p className="text-gray-600 mb-4">{mockStudent.email}</p>
+                  <div className="flex items-center justify-center gap-2 mb-4">
+                    <Badge className={mockStudent.verified ? "bg-green-100 text-green-700" : "bg-yellow-100 text-yellow-700"}>
+                      {mockStudent.verified ? (
+                        <>
+                          <CheckCircle className="w-3 h-3 mr-1" />
+                          Verified
+                        </>
+                      ) : (
+                        <>
+                          <AlertCircle className="w-3 h-3 mr-1" />
+                          Pending Verification
+                        </>
+                      )}
+                    </Badge>
+                    {mockStudent.markedOut && (
+                      <Badge className="bg-red-100 text-red-700">
+                        Marked Out
+                      </Badge>
+                    )}
+                  </div>
+                  <div className="text-sm text-gray-500">
+                    Roll Number: {mockStudent.rollNumber}
+                  </div>
+                </div>
+
+                <Separator className="my-6" />
+
+                {/* Quick Stats */}
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-gray-600">Academic Year</span>
+                    <span className="font-medium">{mockStudent.year}</span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-gray-600">Branch</span>
+                    <span className="font-medium">{mockStudent.branch}</span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-gray-600">SSC Score</span>
+                    <span className="font-medium">{mockStudent.ssc}/10</span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-gray-600">HSC Score</span>
+                    <span className="font-medium">{mockStudent.hsc}/10</span>
+                  </div>
+                </div>
+
+                <Separator className="my-6" />
+
+                {/* Social Links */}
+                <div className="space-y-3">
+                  <h3 className="font-semibold text-gray-900">Social Links</h3>
+                  <div className="space-y-2">
+                    <Button variant="outline" size="sm" className="w-full justify-start">
+                      <Linkedin className="w-4 h-4 mr-2" />
+                      LinkedIn Profile
+                    </Button>
+                    <Button variant="outline" size="sm" className="w-full justify-start">
+                      <Github className="w-4 h-4 mr-2" />
+                      GitHub Profile
+                    </Button>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Main Content */}
+          <div className="lg:col-span-2 space-y-6">
+            {/* Personal Information */}
+            <Card className="bg-white shadow-sm">
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <CardTitle className="flex items-center gap-2">
+                    <User className="w-5 h-5" />
+                    Personal Information
+                  </CardTitle>
+                  <Button size="sm" variant="outline">
+                    <Edit className="w-4 h-4 mr-2" />
+                    Edit
+                  </Button>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <Label htmlFor="firstName">First Name</Label>
+                    <Input id="firstName" value={mockStudent.firstName} readOnly />
+                  </div>
+                  <div>
+                    <Label htmlFor="middleName">Middle Name</Label>
+                    <Input id="middleName" value={mockStudent.middleName} readOnly />
+                  </div>
+                  <div>
+                    <Label htmlFor="lastName">Last Name</Label>
+                    <Input id="lastName" value={mockStudent.lastName} readOnly />
+                  </div>
+                  <div>
+                    <Label htmlFor="email">Email</Label>
+                    <Input id="email" value={mockStudent.email} readOnly />
+                  </div>
+                  <div>
+                    <Label htmlFor="phone">Phone Number</Label>
+                    <Input id="phone" value={mockStudent.phoneNumber} readOnly />
+                  </div>
+                  <div>
+                    <Label htmlFor="gender">Gender</Label>
+                    <Input id="gender" value={mockStudent.gender} readOnly />
+                  </div>
+                  <div>
+                    <Label htmlFor="dob">Date of Birth</Label>
+                    <Input id="dob" value={mockStudent.dob} readOnly />
+                  </div>
+                  <div className="md:col-span-2">
+                    <Label htmlFor="address">Address</Label>
+                    <Textarea id="address" value={mockStudent.address} readOnly />
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Academic Information */}
+            <Card className="bg-white shadow-sm">
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <CardTitle className="flex items-center gap-2">
+                    <GraduationCap className="w-5 h-5" />
+                    Academic Information
+                  </CardTitle>
+                  <Button size="sm" variant="outline">
+                    <Edit className="w-4 h-4 mr-2" />
+                    Edit
+                  </Button>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <Label htmlFor="degree">Degree</Label>
+                    <Input id="degree" value={mockStudent.degree} readOnly />
+                  </div>
+                  <div>
+                    <Label htmlFor="branch">Branch</Label>
+                    <Input id="branch" value={mockStudent.branch} readOnly />
+                  </div>
+                  <div>
+                    <Label htmlFor="year">Year</Label>
+                    <Input id="year" value={mockStudent.year} readOnly />
+                  </div>
+                  <div>
+                    <Label htmlFor="isDiploma">Diploma Student</Label>
+                    <Input id="isDiploma" value={mockStudent.isDiploma ? "Yes" : "No"} readOnly />
+                  </div>
+                  <div>
+                    <Label htmlFor="ssc">SSC Score</Label>
+                    <Input id="ssc" value={`${mockStudent.ssc}/10`} readOnly />
+                  </div>
+                  <div>
+                    <Label htmlFor="hsc">HSC Score</Label>
+                    <Input id="hsc" value={`${mockStudent.hsc}/10`} readOnly />
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Skills */}
+            <Card className="bg-white shadow-sm">
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <CardTitle className="flex items-center gap-2">
+                    <Award className="w-5 h-5" />
+                    Skills & Expertise
+                  </CardTitle>
+                  <Button size="sm" variant="outline">
+                    <Edit className="w-4 h-4 mr-2" />
+                    Edit
+                  </Button>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="flex flex-wrap gap-2">
+                  {mockStudent.skills.map((skill, index) => (
+                    <Badge key={index} variant="secondary" className="bg-blue-100 text-blue-700">
+                      {skill}
+                    </Badge>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Resume Management */}
+            <Card className="bg-white shadow-sm">
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <FileText className="w-5 h-5" />
+                  Resume Management
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
+                    <div className="flex items-center gap-3">
+                      <FileText className="w-8 h-8 text-blue-600" />
+                      <div>
+                        <h4 className="font-medium">Resume_v2.pdf</h4>
+                        <p className="text-sm text-gray-500">Updated 2 days ago</p>
+                      </div>
+                    </div>
+                    <div className="flex gap-2">
+                      <Button size="sm" variant="outline">
+                        <Download className="w-4 h-4 mr-2" />
+                        Download
+                      </Button>
+                      <Button size="sm" variant="outline">
+                        <Upload className="w-4 h-4 mr-2" />
+                        Update
+                      </Button>
+                    </div>
+                  </div>
+                  <p className="text-sm text-gray-600">
+                    Keep your resume updated to increase your chances of getting hired. 
+                    Make sure it reflects your latest skills and experiences.
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+} 

apps/student/components/job-application-modal.tsx

@@ -0,0 +1,219 @@
+'use client';
+
+import { useState } from 'react';
+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 { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@workspace/ui/components/dialog"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@workspace/ui/components/select"
+import { 
+  Building2, 
+  MapPin, 
+  DollarSign, 
+  Calendar, 
+  Star,
+  CheckCircle,
+  FileText,
+  Upload,
+  AlertCircle
+} from "lucide-react"
+import { applyForJob } from "../app/(main)/actions"
+
+interface JobApplicationModalProps {
+  job: {
+    id: number;
+    title: string;
+    company: {
+      name: string;
+    };
+    location: string;
+    salary: string;
+    description: string;
+    applicationDeadline: Date;
+    minCGPA: number;
+    link?: string;
+  };
+  studentId: number;
+  resumes: Array<{
+    id: number;
+    title: string;
+    link: string;
+  }>;
+}
+
+export default function JobApplicationModal({ job, studentId, resumes }: JobApplicationModalProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedResume, setSelectedResume] = useState<string>('');
+  const [isApplying, setIsApplying] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+
+  const handleApply = async () => {
+    if (!selectedResume) {
+      setMessage({ type: 'error', text: 'Please select a resume' });
+      return;
+    }
+
+    setIsApplying(true);
+    setMessage(null);
+
+    try {
+      const result = await applyForJob(job.id, studentId, parseInt(selectedResume));
+      
+      if (result.success) {
+        setMessage({ type: 'success', text: 'Application submitted successfully!' });
+        setTimeout(() => {
+          setIsOpen(false);
+          setMessage(null);
+          setSelectedResume('');
+        }, 2000);
+      } else {
+        setMessage({ type: 'error', text: result.error || 'Failed to submit application' });
+      }
+    } catch (error) {
+      setMessage({ type: 'error', text: 'An error occurred while submitting your application' });
+    } finally {
+      setIsApplying(false);
+    }
+  };
+
+  const isDeadlinePassed = new Date() > job.applicationDeadline;
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button 
+          size="sm" 
+          className="bg-blue-600 hover:bg-blue-700"
+          disabled={isDeadlinePassed}
+        >
+          Apply Now
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Building2 className="w-5 h-5" />
+            Apply for {job.title}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-6">
+          {/* Job Details */}
+          <Card className="bg-gray-50">
+            <CardContent className="p-4">
+              <div className="flex items-start justify-between mb-3">
+                <div>
+                  <h3 className="font-semibold text-gray-900">{job.title}</h3>
+                  <p className="text-blue-600 font-medium">{job.company.name}</p>
+                </div>
+                <Badge className="bg-green-100 text-green-700">
+                  <CheckCircle className="w-3 h-3 mr-1" />
+                  Active
+                </Badge>
+              </div>
+              
+              <div className="grid grid-cols-2 gap-4 text-sm text-gray-600">
+                <div className="flex items-center gap-1">
+                  <MapPin className="w-4 h-4" />
+                  <span>{job.location}</span>
+                </div>
+                <div className="flex items-center gap-1">
+                  <DollarSign className="w-4 h-4" />
+                  <span>{job.salary}</span>
+                </div>
+                <div className="flex items-center gap-1">
+                  <Calendar className="w-4 h-4" />
+                  <span>Deadline: {job.applicationDeadline.toLocaleDateString()}</span>
+                </div>
+                <div className="flex items-center gap-1">
+                  <Star className="w-4 h-4" />
+                  <span>Min CGPA: {job.minCGPA}</span>
+                </div>
+              </div>
+
+              <p className="text-sm text-gray-600 mt-3">{job.description}</p>
+            </CardContent>
+          </Card>
+
+          {/* Application Form */}
+          <div className="space-y-4">
+            <h4 className="font-semibold text-gray-900">Application Details</h4>
+            
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                Select Resume *
+              </label>
+              <Select value={selectedResume} onValueChange={setSelectedResume}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Choose your resume" />
+                </SelectTrigger>
+                <SelectContent>
+                  {resumes.map((resume) => (
+                    <SelectItem key={resume.id} value={resume.id.toString()}>
+                      <div className="flex items-center gap-2">
+                        <FileText className="w-4 h-4" />
+                        {resume.title}
+                      </div>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {resumes.length === 0 && (
+                <p className="text-sm text-red-600 mt-1">
+                  No resumes found. Please upload a resume first.
+                </p>
+              )}
+            </div>
+
+            {/* Message Display */}
+            {message && (
+              <div className={`p-3 rounded-lg ${
+                message.type === 'success' 
+                  ? 'bg-green-100 text-green-700 border border-green-200' 
+                  : 'bg-red-100 text-red-700 border border-red-200'
+              }`}>
+                <div className="flex items-center gap-2">
+                  {message.type === 'success' ? (
+                    <CheckCircle className="w-4 h-4" />
+                  ) : (
+                    <AlertCircle className="w-4 h-4" />
+                  )}
+                  {message.text}
+                </div>
+              </div>
+            )}
+
+            {/* Action Buttons */}
+            <div className="flex gap-3 pt-4">
+              <Button 
+                onClick={handleApply}
+                disabled={isApplying || resumes.length === 0}
+                className="flex-1 bg-blue-600 hover:bg-blue-700"
+              >
+                {isApplying ? 'Submitting...' : 'Submit Application'}
+              </Button>
+              <Button 
+                variant="outline" 
+                onClick={() => setIsOpen(false)}
+                disabled={isApplying}
+              >
+                Cancel
+              </Button>
+            </div>
+          </div>
+
+          {/* Additional Info */}
+          <div className="bg-blue-50 p-4 rounded-lg">
+            <h5 className="font-medium text-blue-900 mb-2">Important Notes:</h5>
+            <ul className="text-sm text-blue-800 space-y-1">
+              <li>• Make sure your resume is up-to-date and relevant to this position</li>
+              <li>• You can only apply once per job posting</li>
+              <li>• Applications will be reviewed by the company within 1-2 weeks</li>
+              <li>• You'll receive email notifications about your application status</li>
+            </ul>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+} 

pnpm-lock.yaml

@@ -38,6 +38,9 @@ importers:
       '@radix-ui/react-avatar':
         specifier: ^1.1.10
         version: 1.1.10(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-switch':
+        specifier: ^1.2.5
+        version: 1.2.5(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@tailwindcss/postcss':
         specifier: ^4.0.8
         version: 4.1.11