dashboard and new jobs page
This commit is contained in:
Om Lanke
@@ -1,84 +1,40 @@
|
||||
import {
|
||||
Card, CardContent, CardFooter, CardHeader, CardTitle,
|
||||
} from '@workspace/ui/components/card';
|
||||
import { Input } from '@workspace/ui/components/input';
|
||||
import { Textarea } from '@workspace/ui/components/textarea';
|
||||
import { Button } from '@workspace/ui/components/button';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogDescription } from '@workspace/ui/components/dialog';
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@workspace/ui/components/accordion';
|
||||
import { Badge } from '@workspace/ui/components/badge';
|
||||
import { Separator } from '@workspace/ui/components/separator';
|
||||
import Link from 'next/link';
|
||||
import { revalidatePath } from 'next/cache';
|
||||
import { db, companies, jobs } from '@workspace/db';
|
||||
import { Plus, Building2, Briefcase, MapPin, DollarSign, Calendar, ExternalLink } from 'lucide-react';
|
||||
|
||||
async function createCompany(formData: FormData) {
|
||||
'use server';
|
||||
const name = String(formData.get('name') ?? '').trim();
|
||||
const email = String(formData.get('email') ?? '').trim();
|
||||
const link = String(formData.get('link') ?? '').trim();
|
||||
const description = String(formData.get('description') ?? '').trim() || 'N/A';
|
||||
const imageURL =
|
||||
String(formData.get('imageURL') ?? '').trim() ||
|
||||
'https://via.placeholder.com/200x200?text=Company';
|
||||
|
||||
if (!name) return;
|
||||
|
||||
await db.insert(companies).values({ name, email, link, description, imageURL });
|
||||
revalidatePath('/');
|
||||
}
|
||||
|
||||
async function createJob(formData: FormData) {
|
||||
'use server';
|
||||
const companyId = Number(formData.get('companyId'));
|
||||
const title = String(formData.get('title') ?? '').trim();
|
||||
const link = String(formData.get('jobLink') ?? '').trim();
|
||||
const description = String(formData.get('jobDescription') ?? '').trim() || 'N/A';
|
||||
const location = String(formData.get('location') ?? '').trim() || 'N/A';
|
||||
const imageURL =
|
||||
String(formData.get('jobImageURL') ?? '').trim() ||
|
||||
'https://via.placeholder.com/100x100?text=Job';
|
||||
const salary = String(formData.get('salary') ?? '').trim() || 'N/A';
|
||||
const deadlineRaw = formData.get('deadline');
|
||||
const applicationDeadline = deadlineRaw ? new Date(String(deadlineRaw)) : new Date();
|
||||
|
||||
if (!companyId || !title) return;
|
||||
|
||||
await db.insert(jobs).values({
|
||||
companyId,
|
||||
title,
|
||||
link,
|
||||
description,
|
||||
location,
|
||||
imageURL,
|
||||
salary,
|
||||
applicationDeadline,
|
||||
active: true,
|
||||
});
|
||||
revalidatePath('/');
|
||||
}
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@workspace/ui/components/card"
|
||||
import { Button } from "@workspace/ui/components/button"
|
||||
import { Badge } from "@workspace/ui/components/badge"
|
||||
import { Separator } from "@workspace/ui/components/separator"
|
||||
import Link from "next/link"
|
||||
import { db, companies } from "@workspace/db"
|
||||
import { Plus, Building2, Briefcase, MapPin, DollarSign, Calendar, ExternalLink } from "lucide-react"
|
||||
|
||||
async function getDashboardData() {
|
||||
try {
|
||||
// First, let's test a simple query without relations
|
||||
const companiesOnly = await db.select().from(companies);
|
||||
console.log('Companies query successful:', companiesOnly.length);
|
||||
|
||||
// Now try the relation query
|
||||
const result = await db.query.companies.findMany({ with: { jobs: true } });
|
||||
console.log('Full query successful:', result.length);
|
||||
return result;
|
||||
// Get companies with their jobs
|
||||
const result = await db.query.companies.findMany({
|
||||
with: {
|
||||
jobs: {
|
||||
where: (job, {eq}) => eq(job.active, true), // Only include active jobs
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// Filter to only include companies that have active jobs
|
||||
const companiesWithActiveJobs = result.filter((company) => company.jobs.length > 0)
|
||||
|
||||
console.log("Companies with active jobs:", companiesWithActiveJobs.length)
|
||||
return companiesWithActiveJobs
|
||||
} catch (error) {
|
||||
console.error('Database query error:', error);
|
||||
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: [] }));
|
||||
const companiesOnly = await db.select().from(companies)
|
||||
return companiesOnly.map((company) => ({ ...company, jobs: [] }))
|
||||
}
|
||||
}
|
||||
|
||||
export default async function DashboardPage() {
|
||||
const data = await getDashboardData();
|
||||
const data = await getDashboardData()
|
||||
|
||||
// Calculate stats for companies with active jobs only
|
||||
const totalActiveJobs = data.reduce((acc, company) => acc + company.jobs.filter((job) => job.active).length, 0)
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br">
|
||||
@@ -88,81 +44,50 @@ export default async function DashboardPage() {
|
||||
<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">Manage companies and their job listings</p>
|
||||
<p className="text-gray-600 text-lg">Companies with active job listings</p>
|
||||
</div>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<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 Company
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-2xl font-semibold">Add a new company</DialogTitle>
|
||||
<DialogDescription className="text-gray-600">
|
||||
Fill in the details below to add a new company to your dashboard.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form action={createCompany} className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Company Name *</label>
|
||||
<Input name="name" placeholder="Enter company name" required className="h-11" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Contact Email *</label>
|
||||
<Input name="email" placeholder="contact@company.com" type="email" required className="h-11" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Website</label>
|
||||
<Input name="link" placeholder="https://company.com" className="h-11" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Company Logo URL</label>
|
||||
<Input name="imageURL" placeholder="https://example.com/logo.png" className="h-11" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Description</label>
|
||||
<Textarea name="description" placeholder="Brief description of the company..." className="min-h-[80px] resize-none" />
|
||||
</div>
|
||||
<Button type="submit" className="w-full h-11 text-base font-medium">
|
||||
Add Company
|
||||
</Button>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<Link href="/jobs/new">
|
||||
<Button className="flex items-center gap-2 px-6 py-3 text-base font-medium shadow-lg hover:shadow-xl transition-all duration-200">
|
||||
<Plus className="w-5 h-5" />
|
||||
Add New Job
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<Card className="bg-white shadow-sm hover:shadow-md transition-shadow duration-200">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Total Companies</p>
|
||||
<p className="text-sm font-medium text-gray-600">Companies with Active Jobs</p>
|
||||
<p className="text-3xl font-bold text-gray-800">{data.length}</p>
|
||||
</div>
|
||||
<Building2 className="w-8 h-8 text-gray-400" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white shadow-sm hover:shadow-md transition-shadow duration-200">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Total Jobs</p>
|
||||
<p className="text-3xl font-bold text-gray-800">{data.reduce((acc, company) => acc + company.jobs.length, 0)}</p>
|
||||
<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">Active Jobs</p>
|
||||
<p className="text-3xl font-bold text-gray-800">{data.reduce((acc, company) => acc + company.jobs.filter(job => job.active).length, 0)}</p>
|
||||
<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>
|
||||
@@ -179,54 +104,22 @@ export default async function DashboardPage() {
|
||||
<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 yet</h3>
|
||||
<p className="text-gray-500 mb-6">Get started by adding your first company</p>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button className="flex items-center gap-2">
|
||||
<Plus className="w-4 h-4" />
|
||||
Add Company
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-2xl font-semibold">Add a new company</DialogTitle>
|
||||
<DialogDescription className="text-gray-600">
|
||||
Fill in the details below to add a new company to your dashboard.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form action={createCompany} className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Company Name *</label>
|
||||
<Input name="name" placeholder="Enter company name" required className="h-11" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Contact Email *</label>
|
||||
<Input name="email" placeholder="contact@company.com" type="email" required className="h-11" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Website</label>
|
||||
<Input name="link" placeholder="https://company.com" className="h-11" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Company Logo URL</label>
|
||||
<Input name="imageURL" placeholder="https://example.com/logo.png" className="h-11" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Description</label>
|
||||
<Textarea name="description" placeholder="Brief description of the company..." className="min-h-[80px] resize-none" />
|
||||
</div>
|
||||
<Button type="submit" className="w-full h-11 text-base font-medium">
|
||||
Add Company
|
||||
</Button>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<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">
|
||||
<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">
|
||||
@@ -240,67 +133,69 @@ export default async function DashboardPage() {
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{company.jobs.length} job{company.jobs.length !== 1 ? 's' : ''}
|
||||
{company.jobs.filter((job) => job.active).length} active job
|
||||
{company.jobs.filter((job) => job.active).length !== 1 ? "s" : ""}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
{company.description && company.description !== 'N/A' && (
|
||||
{company.description && company.description !== "N/A" && (
|
||||
<p className="text-sm text-gray-600 mt-3">{company.description}</p>
|
||||
)}
|
||||
</CardHeader>
|
||||
|
||||
|
||||
<Separator />
|
||||
|
||||
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-medium text-gray-700">Job Listings</h3>
|
||||
<Link href={`/jobs/new?companyId=${company.id}`} className="text-sm text-blue-600 hover:text-blue-700 font-medium">
|
||||
Add Job
|
||||
</Link>
|
||||
<h3 className="text-lg font-medium text-gray-700">Active Job Listings</h3>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||
{company.jobs.length > 0 ? (
|
||||
company.jobs.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">
|
||||
{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={job.active ? "default" : "secondary"}
|
||||
className={`text-xs ${job.active ? 'bg-blue-100 text-blue-700 hover:bg-blue-200' : 'bg-gray-100 text-gray-500'}`}
|
||||
<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"
|
||||
>
|
||||
{job.active ? 'Active' : 'Inactive'}
|
||||
Active
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="space-y-2">
|
||||
{job.location && job.location !== 'N/A' && (
|
||||
{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' && (
|
||||
{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"
|
||||
<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"
|
||||
>
|
||||
@@ -312,22 +207,7 @@ export default async function DashboardPage() {
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
) : (
|
||||
<div className="col-span-full">
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<Briefcase className="w-12 h-12 text-gray-300 mb-4" />
|
||||
<h4 className="text-lg font-medium text-gray-700 mb-2">No jobs yet</h4>
|
||||
<p className="text-gray-500 mb-4">This company doesn't have any job listings</p>
|
||||
<Link href={`/jobs/new?companyId=${company.id}`}>
|
||||
<Button variant="outline" size="sm" className="flex items-center gap-2">
|
||||
<Plus className="w-4 h-4" />
|
||||
Add First Job
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -336,7 +216,7 @@ export default async function DashboardPage() {
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export const dynamic = 'force-dynamic';
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
Reference in New Issue
Block a user