Add admin job modal and company select
This commit is contained in:
Tiago Yamamoto
parent
470139da12
commit
30b634b770
2 changed files with 117 additions and 7 deletions
|
|
@ -25,6 +25,7 @@ export default function AdminJobsPage() {
|
||||||
const [searchTerm, setSearchTerm] = useState("")
|
const [searchTerm, setSearchTerm] = useState("")
|
||||||
const [jobs, setJobs] = useState(mockJobs)
|
const [jobs, setJobs] = useState(mockJobs)
|
||||||
const [isDialogOpen, setIsDialogOpen] = useState(false)
|
const [isDialogOpen, setIsDialogOpen] = useState(false)
|
||||||
|
const companyOptions = Array.from(new Set(mockJobs.map((job) => job.company))).sort()
|
||||||
|
|
||||||
const filteredJobs = jobs.filter(
|
const filteredJobs = jobs.filter(
|
||||||
(job) =>
|
(job) =>
|
||||||
|
|
@ -63,7 +64,18 @@ export default function AdminJobsPage() {
|
||||||
</div>
|
</div>
|
||||||
<div className="grid gap-2">
|
<div className="grid gap-2">
|
||||||
<Label htmlFor="company">Company</Label>
|
<Label htmlFor="company">Company</Label>
|
||||||
<Input id="company" placeholder="Company name" />
|
<Select>
|
||||||
|
<SelectTrigger id="company">
|
||||||
|
<SelectValue placeholder="Select a company" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{companyOptions.map((company) => (
|
||||||
|
<SelectItem key={company} value={company}>
|
||||||
|
{company}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-2 gap-4">
|
<div className="grid grid-cols-2 gap-4">
|
||||||
<div className="grid gap-2">
|
<div className="grid gap-2">
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,24 @@
|
||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import { useRouter } from "next/navigation"
|
import { useState } from "react"
|
||||||
import { StatsCard } from "@/components/stats-card"
|
import { StatsCard } from "@/components/stats-card"
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||||
import { Button } from "@/components/ui/button"
|
import { Button } from "@/components/ui/button"
|
||||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||||
import { Badge } from "@/components/ui/badge"
|
import { Badge } from "@/components/ui/badge"
|
||||||
|
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 { Input } from "@/components/ui/input"
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||||
import { mockStats, mockJobs } from "@/lib/mock-data"
|
import { mockStats, mockJobs } from "@/lib/mock-data"
|
||||||
import { Briefcase, Users, TrendingUp, FileText, Plus, MoreHorizontal } from "lucide-react"
|
import { Briefcase, Users, TrendingUp, FileText, Plus, MoreHorizontal } from "lucide-react"
|
||||||
import { motion } from "framer-motion"
|
import { motion } from "framer-motion"
|
||||||
|
|
@ -19,7 +32,8 @@ const mockCandidates = [
|
||||||
]
|
]
|
||||||
|
|
||||||
export function AdminDashboardContent() {
|
export function AdminDashboardContent() {
|
||||||
const router = useRouter()
|
const [isDialogOpen, setIsDialogOpen] = useState(false)
|
||||||
|
const companyOptions = Array.from(new Set(mockJobs.map((job) => job.company))).sort()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-8">
|
<div className="space-y-8">
|
||||||
|
|
@ -70,10 +84,94 @@ export function AdminDashboardContent() {
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader className="flex flex-row items-center justify-between">
|
<CardHeader className="flex flex-row items-center justify-between">
|
||||||
<CardTitle>Job management</CardTitle>
|
<CardTitle>Job management</CardTitle>
|
||||||
<Button onClick={() => router.push('/dashboard/jobs')}>
|
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||||
<Plus className="mr-2 h-4 w-4" />
|
<DialogTrigger asChild>
|
||||||
Add job
|
<Button>
|
||||||
</Button>
|
<Plus className="mr-2 h-4 w-4" />
|
||||||
|
Add 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="dashboard-title">Job title</Label>
|
||||||
|
<Input id="dashboard-title" placeholder="e.g. Full Stack Developer" />
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-2">
|
||||||
|
<Label htmlFor="dashboard-company">Company</Label>
|
||||||
|
<Select>
|
||||||
|
<SelectTrigger id="dashboard-company">
|
||||||
|
<SelectValue placeholder="Select a company" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{companyOptions.map((company) => (
|
||||||
|
<SelectItem key={company} value={company}>
|
||||||
|
{company}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="grid gap-2">
|
||||||
|
<Label htmlFor="dashboard-location">Location</Label>
|
||||||
|
<Input id="dashboard-location" placeholder="São Paulo, SP" />
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-2">
|
||||||
|
<Label htmlFor="dashboard-type">Type</Label>
|
||||||
|
<Select>
|
||||||
|
<SelectTrigger id="dashboard-type">
|
||||||
|
<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="dashboard-salary">Salary</Label>
|
||||||
|
<Input id="dashboard-salary" placeholder="R$ 8,000 - R$ 12,000" />
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-2">
|
||||||
|
<Label htmlFor="dashboard-level">Level</Label>
|
||||||
|
<Select>
|
||||||
|
<SelectTrigger id="dashboard-level">
|
||||||
|
<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="dashboard-description">Description</Label>
|
||||||
|
<Textarea
|
||||||
|
id="dashboard-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>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<Table>
|
<Table>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue