229 lines
11 KiB
TypeScript
229 lines
11 KiB
TypeScript
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 {
|
|
// Get companies with their jobs
|
|
const result = await db.query.companies.findMany({
|
|
with: {
|
|
jobs: {
|
|
where: (job, {eq}) => eq(job.active, true), // Only include active jobs
|
|
}
|
|
}
|
|
})
|
|
|
|
// Filter to only include companies that have active jobs
|
|
const companiesWithActiveJobs = result.filter((company) => company.jobs.length > 0)
|
|
|
|
console.log("Companies with active jobs:", companiesWithActiveJobs.length)
|
|
return companiesWithActiveJobs
|
|
} catch (error) {
|
|
console.error("Database query error:", error)
|
|
// Fallback to companies only if the relation query fails
|
|
const companiesOnly = await db.select().from(companies)
|
|
return companiesOnly.map((company) => ({ ...company, jobs: [] }))
|
|
}
|
|
}
|
|
|
|
export default async function DashboardPage() {
|
|
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">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
{/* Header Section */}
|
|
<section className="mb-12">
|
|
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
|
|
<div>
|
|
<h1 className="text-4xl font-bold text-gray-800 mb-2">Companies Dashboard</h1>
|
|
<p className="text-gray-600 text-lg">Companies with active job listings</p>
|
|
</div>
|
|
<Link href="/jobs/new">
|
|
<Button className="flex items-center gap-2 px-6 py-3 text-base font-medium shadow-lg hover:shadow-xl transition-all duration-200">
|
|
<Plus className="w-5 h-5" />
|
|
Add New Job
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Stats Cards */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
|
<Card className="bg-white shadow-sm hover:shadow-md transition-shadow duration-200">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-600">Companies with Active Jobs</p>
|
|
<p className="text-3xl font-bold text-gray-800">{data.length}</p>
|
|
</div>
|
|
<Building2 className="w-8 h-8 text-gray-400" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-white shadow-sm hover:shadow-md transition-shadow duration-200">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-600">Total Active Jobs</p>
|
|
<p className="text-3xl font-bold text-gray-800">{totalActiveJobs}</p>
|
|
</div>
|
|
<Briefcase className="w-8 h-8 text-gray-400" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-white shadow-sm hover:shadow-md transition-shadow duration-200">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-600">Avg Jobs per Company</p>
|
|
<p className="text-3xl font-bold text-gray-800">
|
|
{data.length > 0 ? Math.round((totalActiveJobs / data.length) * 10) / 10 : 0}
|
|
</p>
|
|
</div>
|
|
<div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
|
|
<div className="w-3 h-3 bg-blue-500 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Companies Section */}
|
|
<section className="space-y-8">
|
|
{data.length === 0 ? (
|
|
<Card className="bg-white shadow-sm">
|
|
<CardContent className="p-12 text-center">
|
|
<Building2 className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
|
<h3 className="text-xl font-semibold text-gray-700 mb-2">No companies with active jobs</h3>
|
|
<p className="text-gray-500 mb-6">Get started by adding your first job listing</p>
|
|
<Link href="/jobs/new">
|
|
<Button className="flex items-center gap-2">
|
|
<Plus className="w-4 h-4" />
|
|
Add Job
|
|
</Button>
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
data.map((company) => (
|
|
<Card
|
|
key={company.id}
|
|
className="bg-white shadow-sm hover:shadow-md transition-all duration-200 overflow-hidden"
|
|
>
|
|
<CardHeader className="pb-4">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center">
|
|
<Building2 className="w-6 h-6 text-gray-600" />
|
|
</div>
|
|
<div>
|
|
<CardTitle className="text-xl font-semibold text-gray-800">{company.name}</CardTitle>
|
|
<p className="text-sm text-gray-500 mt-1">{company.email}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Badge variant="secondary" className="text-xs">
|
|
{company.jobs.filter((job) => job.active).length} active job
|
|
{company.jobs.filter((job) => job.active).length !== 1 ? "s" : ""}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
{company.description && company.description !== "N/A" && (
|
|
<p className="text-sm text-gray-600 mt-3">{company.description}</p>
|
|
)}
|
|
</CardHeader>
|
|
|
|
<Separator />
|
|
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-lg font-medium text-gray-700">Active Job Listings</h3>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
|
{company.jobs
|
|
.filter((job) => job.active)
|
|
.map((job) => (
|
|
<Card
|
|
key={job.id}
|
|
className="group hover:shadow-lg transition-all duration-200 border border-gray-200 bg-gray-50 hover:bg-white"
|
|
>
|
|
<CardContent className="p-4">
|
|
<div className="space-y-3">
|
|
<div className="flex items-start justify-between">
|
|
<h4 className="font-medium text-gray-800 text-sm leading-tight line-clamp-2">
|
|
{job.title}
|
|
</h4>
|
|
<Badge
|
|
variant="default"
|
|
className="text-xs bg-blue-100 text-blue-700 hover:bg-blue-200"
|
|
>
|
|
Active
|
|
</Badge>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
{job.location && job.location !== "N/A" && (
|
|
<div className="flex items-center gap-1 text-xs text-gray-500">
|
|
<MapPin className="w-3 h-3" />
|
|
<span className="truncate">{job.location}</span>
|
|
</div>
|
|
)}
|
|
{job.salary && job.salary !== "N/A" && (
|
|
<div className="flex items-center gap-1 text-xs text-gray-500">
|
|
<DollarSign className="w-3 h-3" />
|
|
<span className="truncate">{job.salary}</span>
|
|
</div>
|
|
)}
|
|
<div className="flex items-center gap-1 text-xs text-gray-500">
|
|
<Calendar className="w-3 h-3" />
|
|
<span>Deadline: {job.applicationDeadline.toLocaleDateString()}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-2 flex items-center gap-3">
|
|
<Link
|
|
href={`/jobs/${job.id}`}
|
|
className="inline-flex items-center gap-1 text-xs text-blue-600 hover:text-blue-700 font-medium group-hover:underline"
|
|
>
|
|
View Job
|
|
</Link>
|
|
{job.link && (
|
|
<a
|
|
href={job.link}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1 text-xs text-gray-600 hover:text-gray-800"
|
|
>
|
|
Company Link
|
|
<ExternalLink className="w-3 h-3" />
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))
|
|
)}
|
|
</section>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export const dynamic = "force-dynamic"
|