216 lines
8.3 KiB
TypeScript
216 lines
8.3 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { Plus, Search, Edit, Trash2, Eye } from "lucide-react"
|
|
import { mockJobs } from "@/lib/mock-data"
|
|
|
|
export default function AdminJobsPage() {
|
|
const [searchTerm, setSearchTerm] = useState("")
|
|
const [jobs, setJobs] = useState(mockJobs)
|
|
const [isDialogOpen, setIsDialogOpen] = useState(false)
|
|
|
|
const filteredJobs = jobs.filter(
|
|
(job) =>
|
|
job.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
job.company.toLowerCase().includes(searchTerm.toLowerCase()),
|
|
)
|
|
|
|
const handleDeleteJob = (id: string) => {
|
|
setJobs(jobs.filter((job) => job.id !== id))
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-foreground">Job management</h1>
|
|
<p className="text-muted-foreground mt-1">Manage all jobs posted on the platform</p>
|
|
</div>
|
|
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button className="gap-2">
|
|
<Plus className="h-4 w-4" />
|
|
New job
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="max-w-2xl">
|
|
<DialogHeader>
|
|
<DialogTitle>Create new job</DialogTitle>
|
|
<DialogDescription>Fill in the details for the new job opening</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="grid gap-4 py-4">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="title">Job title</Label>
|
|
<Input id="title" placeholder="e.g. Full Stack Developer" />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="company">Company</Label>
|
|
<Input id="company" placeholder="Company name" />
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="location">Location</Label>
|
|
<Input id="location" placeholder="São Paulo, SP" />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="type">Type</Label>
|
|
<Select>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="full-time">Full time</SelectItem>
|
|
<SelectItem value="part-time">Part time</SelectItem>
|
|
<SelectItem value="contract">Contract</SelectItem>
|
|
<SelectItem value="remote">Remote</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="salary">Salary</Label>
|
|
<Input id="salary" placeholder="R$ 8,000 - R$ 12,000" />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="level">Level</Label>
|
|
<Select>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="junior">Junior</SelectItem>
|
|
<SelectItem value="mid">Mid-level</SelectItem>
|
|
<SelectItem value="senior">Senior</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="description">Description</Label>
|
|
<Textarea
|
|
id="description"
|
|
placeholder="Describe the responsibilities and requirements..."
|
|
rows={4}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setIsDialogOpen(false)}>
|
|
Cancel
|
|
</Button>
|
|
<Button onClick={() => setIsDialogOpen(false)}>Publish job</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="grid gap-4 md:grid-cols-4">
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardDescription>Total jobs</CardDescription>
|
|
<CardTitle className="text-3xl">{jobs.length}</CardTitle>
|
|
</CardHeader>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardDescription>Active jobs</CardDescription>
|
|
<CardTitle className="text-3xl">{jobs.length}</CardTitle>
|
|
</CardHeader>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardDescription>Applications</CardDescription>
|
|
<CardTitle className="text-3xl">{"436"}</CardTitle>
|
|
</CardHeader>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardDescription>Conversion rate</CardDescription>
|
|
<CardTitle className="text-3xl">12%</CardTitle>
|
|
</CardHeader>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Search and Filter */}
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center gap-4">
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder="Search jobs by title or company..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="pl-10"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Role</TableHead>
|
|
<TableHead>Company</TableHead>
|
|
<TableHead>Location</TableHead>
|
|
<TableHead>Type</TableHead>
|
|
<TableHead>Applications</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead className="text-right">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredJobs.map((job) => (
|
|
<TableRow key={job.id}>
|
|
<TableCell className="font-medium">{job.title}</TableCell>
|
|
<TableCell>{job.company}</TableCell>
|
|
<TableCell>{job.location}</TableCell>
|
|
<TableCell>
|
|
<Badge variant="secondary">{job.type}</Badge>
|
|
</TableCell>
|
|
<TableCell>{((job.id.charCodeAt(0) * 7) % 50) + 10}</TableCell>
|
|
<TableCell>
|
|
<Badge variant="default">Active</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<div className="flex items-center justify-end gap-2">
|
|
<Button variant="ghost" size="icon">
|
|
<Eye className="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="icon">
|
|
<Edit className="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="icon" onClick={() => handleDeleteJob(job.id)}>
|
|
<Trash2 className="h-4 w-4 text-destructive" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|