AI overlords we love you
This commit is contained in:
Anushlinux
@@ -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:*",
|
||||
|
||||
172
apps/student/README.md
Normal file
172
apps/student/README.md
Normal file
@@ -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.
|
||||
@@ -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" };
|
||||
}
|
||||
}
|
||||
271
apps/student/app/(main)/applications/page.tsx
Normal file
271
apps/student/app/(main)/applications/page.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
358
apps/student/app/(main)/jobs/page.tsx
Normal file
358
apps/student/app/(main)/jobs/page.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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,
|
||||
Users,
|
||||
Home,
|
||||
Briefcase,
|
||||
User,
|
||||
FileText,
|
||||
Bell,
|
||||
Search,
|
||||
Menu,
|
||||
X,
|
||||
LogOut,
|
||||
Settings,
|
||||
Bell,
|
||||
Search,
|
||||
ChevronDown
|
||||
GraduationCap,
|
||||
TrendingUp,
|
||||
BookOpen
|
||||
} from 'lucide-react';
|
||||
import { signOutAction } from './actions';
|
||||
|
||||
const navLinks = [
|
||||
{
|
||||
href: '/',
|
||||
label: 'Dashboard',
|
||||
icon: LayoutDashboard,
|
||||
description: 'Overview and analytics'
|
||||
label: 'Home',
|
||||
icon: Home,
|
||||
description: 'Discover opportunities'
|
||||
},
|
||||
{
|
||||
href: '/students',
|
||||
label: 'Students',
|
||||
icon: Users,
|
||||
description: 'Manage student profiles'
|
||||
href: '/applications',
|
||||
label: 'My Applications',
|
||||
icon: FileText,
|
||||
description: 'Track your applications'
|
||||
},
|
||||
{
|
||||
href: '/jobs',
|
||||
label: 'Jobs',
|
||||
icon: Briefcase,
|
||||
description: 'Job listings and applications'
|
||||
href: '/profile',
|
||||
label: 'Profile',
|
||||
icon: User,
|
||||
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">
|
||||
{/* Enhanced Sticky Navbar */}
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 font-sans">
|
||||
{/* 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
|
||||
src="/favicon.ico"
|
||||
alt="Logo"
|
||||
className="w-10 h-10 rounded-xl shadow-lg group-hover:shadow-xl transition-all duration-300 group-hover:scale-110"
|
||||
/>
|
||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-br from-red-500/20 to-pink-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
||||
<div 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">
|
||||
<GraduationCap className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
</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-gray-700 hover:text-gray-900 hover:bg-gray-50'
|
||||
? 'text-blue-600 bg-blue-50 border border-blue-200'
|
||||
: 'text-gray-700 hover:text-blue-600 hover:bg-blue-50'
|
||||
}`}
|
||||
prefetch={false}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<Icon className={`w-5 h-5 transition-transform duration-200 group-hover:scale-110 ${
|
||||
isActive ? 'text-red-600' : 'text-gray-500 group-hover:text-gray-700'
|
||||
<div className="flex items-center gap-2">
|
||||
<Icon className={`w-4 h-4 transition-transform duration-200 group-hover:scale-110 ${
|
||||
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">
|
||||
3
|
||||
<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">
|
||||
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">
|
||||
A
|
||||
<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">
|
||||
S
|
||||
</div>
|
||||
<span className="hidden lg:inline text-sm font-medium">Admin</span>
|
||||
<ChevronDown className={`w-4 h-4 transition-transform duration-200 ${
|
||||
isProfileDropdownOpen ? 'rotate-180' : ''
|
||||
}`} />
|
||||
<span className="hidden lg:inline text-sm font-medium">Student</span>
|
||||
</Button>
|
||||
|
||||
{/* Profile Dropdown Menu */}
|
||||
{isProfileDropdownOpen && (
|
||||
<div className="absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-lg border border-gray-200 py-2 z-50 animate-in slide-in-from-top-2 duration-200">
|
||||
<div className="px-4 py-3 border-b border-gray-100">
|
||||
<p className="text-sm font-medium text-gray-900">Admin User</p>
|
||||
<p className="text-xs text-gray-500">admin@nextplacement.com</p>
|
||||
<p className="text-sm font-medium text-gray-900">Student Name</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-gray-700 hover:text-gray-900 hover:bg-gray-50'
|
||||
? 'text-blue-600 bg-blue-50 border border-blue-200'
|
||||
: '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">
|
||||
A
|
||||
<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">
|
||||
S
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-900">Admin User</p>
|
||||
<p className="text-xs text-gray-500">admin@nextplacement.com</p>
|
||||
<p className="text-sm font-medium text-gray-900">Student Name</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>
|
||||
|
||||
|
||||
@@ -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 { Plus, Building2, Briefcase, MapPin, DollarSign, Calendar, ExternalLink } from "lucide-react"
|
||||
import { db, companies, jobs, students } from "@workspace/db"
|
||||
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)
|
||||
return companiesWithActiveJobs
|
||||
// Get total student count for stats
|
||||
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
|
||||
const companiesOnly = await db.select().from(companies)
|
||||
return companiesOnly.map((company) => ({ ...company, jobs: [] }))
|
||||
return {
|
||||
companies: [],
|
||||
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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{/* Header Section */}
|
||||
<section className="mb-12">
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold text-gray-800 mb-2">Companies Dashboard</h1>
|
||||
<p className="text-gray-600 text-lg">Companies with active job listings</p>
|
||||
</div>
|
||||
<Link href="/jobs/new">
|
||||
<Button className="flex items-center gap-2 px-6 py-3 text-base font-medium shadow-lg hover:shadow-xl transition-all duration-200">
|
||||
<Plus className="w-5 h-5" />
|
||||
Add New Job
|
||||
<div className="min-h-screen">
|
||||
{/* Hero Section */}
|
||||
<section className="relative bg-gradient-to-br from-blue-600 via-indigo-600 to-purple-700 text-white py-20">
|
||||
<div className="absolute inset-0 bg-black/10"></div>
|
||||
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center">
|
||||
<h1 className="text-5xl md:text-6xl font-bold mb-6">
|
||||
Discover Your Dream Career
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl text-blue-100 mb-8 max-w-3xl mx-auto">
|
||||
Explore opportunities from top companies and find the perfect role that matches your skills and aspirations
|
||||
</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">
|
||||
<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-3 gap-6 mb-8">
|
||||
<Card className="bg-white shadow-sm hover:shadow-md transition-shadow duration-200">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Companies with Active Jobs</p>
|
||||
<p className="text-3xl font-bold text-gray-800">{data.length}</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{featuredCompanies.map((company) => (
|
||||
<Card key={company.id} className="group hover:shadow-xl transition-all duration-300 overflow-hidden border-0 bg-white">
|
||||
<div className="relative">
|
||||
<div className="h-48 bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
|
||||
<Building2 className="w-16 h-16 text-white opacity-80" />
|
||||
</div>
|
||||
<Building2 className="w-8 h-8 text-gray-400" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white shadow-sm hover:shadow-md transition-shadow duration-200">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Total Active Jobs</p>
|
||||
<p className="text-3xl font-bold text-gray-800">{totalActiveJobs}</p>
|
||||
</div>
|
||||
<Briefcase className="w-8 h-8 text-gray-400" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white shadow-sm hover:shadow-md transition-shadow duration-200">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Avg Jobs per Company</p>
|
||||
<p className="text-3xl font-bold text-gray-800">
|
||||
{data.length > 0 ? Math.round((totalActiveJobs / data.length) * 10) / 10 : 0}
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<div className="w-3 h-3 bg-blue-500 rounded-full"></div>
|
||||
<div className="absolute top-4 right-4">
|
||||
<Badge className="bg-white/20 text-white border-0">
|
||||
<Star className="w-3 h-3 mr-1" />
|
||||
Featured
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Companies Section */}
|
||||
<section className="space-y-8">
|
||||
{data.length === 0 ? (
|
||||
<Card className="bg-white shadow-sm">
|
||||
<CardContent className="p-12 text-center">
|
||||
<Building2 className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-semibold text-gray-700 mb-2">No companies with active jobs</h3>
|
||||
<p className="text-gray-500 mb-6">Get started by adding your first job listing</p>
|
||||
<Link href="/jobs/new">
|
||||
<Button className="flex items-center gap-2">
|
||||
<Plus className="w-4 h-4" />
|
||||
Add Job
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
data.map((company) => (
|
||||
<Card
|
||||
key={company.id}
|
||||
className="bg-white shadow-sm hover:shadow-md transition-all duration-200 overflow-hidden"
|
||||
>
|
||||
<CardHeader className="pb-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center">
|
||||
<Building2 className="w-6 h-6 text-gray-600" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-xl font-semibold text-gray-800">{company.name}</CardTitle>
|
||||
<p className="text-sm text-gray-500 mt-1">{company.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{company.jobs.filter((job) => job.active).length} active job
|
||||
{company.jobs.filter((job) => job.active).length !== 1 ? "s" : ""}
|
||||
</Badge>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-2">{company.name}</h3>
|
||||
<p className="text-gray-600 text-sm">{company.email}</p>
|
||||
</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>
|
||||
|
||||
<Separator />
|
||||
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-medium text-gray-700">Active Job Listings</h3>
|
||||
<div className="space-y-2 mb-6">
|
||||
{company.jobs.slice(0, 2).map((job) => (
|
||||
<div key={job.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||||
<div className="flex-1">
|
||||
<h4 className="font-medium text-gray-900 text-sm">{job.title}</h4>
|
||||
<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">
|
||||
{company.jobs
|
||||
.filter((job) => job.active)
|
||||
.map((job) => (
|
||||
<Card
|
||||
key={job.id}
|
||||
className="group hover:shadow-lg transition-all duration-200 border border-gray-200 bg-gray-50 hover:bg-white"
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<h4 className="font-medium text-gray-800 text-sm leading-tight line-clamp-2">
|
||||
{job.title}
|
||||
</h4>
|
||||
<Badge
|
||||
variant="default"
|
||||
className="text-xs bg-blue-100 text-blue-700 hover:bg-blue-200"
|
||||
>
|
||||
Active
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{job.location && job.location !== "N/A" && (
|
||||
<div className="flex items-center gap-1 text-xs text-gray-500">
|
||||
<MapPin className="w-3 h-3" />
|
||||
<span className="truncate">{job.location}</span>
|
||||
</div>
|
||||
)}
|
||||
{job.salary && job.salary !== "N/A" && (
|
||||
<div className="flex items-center gap-1 text-xs text-gray-500">
|
||||
<DollarSign className="w-3 h-3" />
|
||||
<span className="truncate">{job.salary}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-1 text-xs text-gray-500">
|
||||
<Calendar className="w-3 h-3" />
|
||||
<span>Deadline: {job.applicationDeadline.toLocaleDateString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{job.link && (
|
||||
<div className="pt-2">
|
||||
<a
|
||||
href={job.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 text-xs text-blue-600 hover:text-blue-700 font-medium group-hover:underline"
|
||||
>
|
||||
View Job
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
<div className="flex gap-2">
|
||||
<Button className="flex-1 bg-blue-600 hover:bg-blue-700">
|
||||
View All Jobs
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
<Bookmark className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
))}
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
314
apps/student/app/(main)/profile/page.tsx
Normal file
314
apps/student/app/(main)/profile/page.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
219
apps/student/components/job-application-modal.tsx
Normal file
219
apps/student/components/job-application-modal.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
3
pnpm-lock.yaml
generated
3
pnpm-lock.yaml
generated
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user