feat(frontend): add multi-step job posting wizard with API integration
This commit is contained in:
Tiago Yamamoto
parent
9bc924ab54
commit
80d38ee615
3 changed files with 495 additions and 194 deletions
401
frontend/src/app/dashboard/jobs/new/page.tsx
Normal file
401
frontend/src/app/dashboard/jobs/new/page.tsx
Normal file
|
|
@ -0,0 +1,401 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useState, useEffect } from "react"
|
||||||
|
import { useRouter } from "next/navigation"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
import { Input } from "@/components/ui/input"
|
||||||
|
import { Label } from "@/components/ui/label"
|
||||||
|
import { Textarea } from "@/components/ui/textarea"
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||||
|
import { ArrowLeft, ArrowRight, Check, Loader2, Building2, DollarSign, FileText, Eye } from "lucide-react"
|
||||||
|
import { jobsApi, adminCompaniesApi, type CreateJobPayload, type AdminCompany } from "@/lib/api"
|
||||||
|
import { toast } from "sonner"
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const STEPS = [
|
||||||
|
{ id: 1, title: "Job Details", icon: FileText },
|
||||||
|
{ id: 2, title: "Salary & Type", icon: DollarSign },
|
||||||
|
{ id: 3, title: "Company", icon: Building2 },
|
||||||
|
{ id: 4, title: "Review", icon: Eye },
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function NewJobPage() {
|
||||||
|
const router = useRouter()
|
||||||
|
const [currentStep, setCurrentStep] = useState(1)
|
||||||
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||||
|
const [companies, setCompanies] = useState<AdminCompany[]>([])
|
||||||
|
const [loadingCompanies, setLoadingCompanies] = useState(true)
|
||||||
|
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
title: "",
|
||||||
|
description: "",
|
||||||
|
companyId: "",
|
||||||
|
location: "",
|
||||||
|
employmentType: "",
|
||||||
|
salaryMin: "",
|
||||||
|
salaryMax: "",
|
||||||
|
salaryType: "",
|
||||||
|
workingHours: "",
|
||||||
|
})
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const loadCompanies = async () => {
|
||||||
|
try {
|
||||||
|
setLoadingCompanies(true)
|
||||||
|
const data = await adminCompaniesApi.list(undefined, 1, 100)
|
||||||
|
setCompanies(data.data ?? [])
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to load companies:", error)
|
||||||
|
toast.error("Failed to load companies")
|
||||||
|
} finally {
|
||||||
|
setLoadingCompanies(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
loadCompanies()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const updateField = (field: string, value: string) => {
|
||||||
|
setFormData(prev => ({ ...prev, [field]: value }))
|
||||||
|
}
|
||||||
|
|
||||||
|
const canProceed = () => {
|
||||||
|
switch (currentStep) {
|
||||||
|
case 1:
|
||||||
|
return formData.title.length >= 5 && formData.description.length >= 20
|
||||||
|
case 2:
|
||||||
|
return true // Salary is optional
|
||||||
|
case 3:
|
||||||
|
return formData.companyId !== ""
|
||||||
|
default:
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
if (!formData.companyId || !formData.title || !formData.description) {
|
||||||
|
toast.error("Please fill in all required fields")
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsSubmitting(true)
|
||||||
|
try {
|
||||||
|
const payload: CreateJobPayload = {
|
||||||
|
companyId: formData.companyId,
|
||||||
|
title: formData.title,
|
||||||
|
description: formData.description,
|
||||||
|
location: formData.location || undefined,
|
||||||
|
employmentType: formData.employmentType as CreateJobPayload['employmentType'] || undefined,
|
||||||
|
salaryMin: formData.salaryMin ? parseFloat(formData.salaryMin) : undefined,
|
||||||
|
salaryMax: formData.salaryMax ? parseFloat(formData.salaryMax) : undefined,
|
||||||
|
salaryType: formData.salaryType as CreateJobPayload['salaryType'] || undefined,
|
||||||
|
workingHours: formData.workingHours || undefined,
|
||||||
|
status: "published",
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("[DEBUG] Submitting job:", payload)
|
||||||
|
await jobsApi.create(payload)
|
||||||
|
toast.success("Job posted successfully!")
|
||||||
|
router.push("/dashboard/jobs")
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to create job:", error)
|
||||||
|
toast.error("Failed to post job. Please try again.")
|
||||||
|
} finally {
|
||||||
|
setIsSubmitting(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const nextStep = () => {
|
||||||
|
if (currentStep < 4 && canProceed()) {
|
||||||
|
setCurrentStep(prev => prev + 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const prevStep = () => {
|
||||||
|
if (currentStep > 1) {
|
||||||
|
setCurrentStep(prev => prev - 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-3xl mx-auto space-y-8">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Button variant="ghost" size="icon" onClick={() => router.back()}>
|
||||||
|
<ArrowLeft className="h-5 w-5" />
|
||||||
|
</Button>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold">Post a new job</h1>
|
||||||
|
<p className="text-muted-foreground">Fill in the details for your job listing</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Progress Steps */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
{STEPS.map((step, index) => {
|
||||||
|
const Icon = step.icon
|
||||||
|
const isActive = currentStep === step.id
|
||||||
|
const isCompleted = currentStep > step.id
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={step.id} className="flex items-center">
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"w-10 h-10 rounded-full flex items-center justify-center border-2 transition-colors",
|
||||||
|
isCompleted
|
||||||
|
? "bg-primary border-primary text-primary-foreground"
|
||||||
|
: isActive
|
||||||
|
? "border-primary text-primary"
|
||||||
|
: "border-muted-foreground/30 text-muted-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{isCompleted ? <Check className="h-5 w-5" /> : <Icon className="h-5 w-5" />}
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
"mt-2 text-xs font-medium",
|
||||||
|
isActive ? "text-primary" : "text-muted-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{step.title}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{index < STEPS.length - 1 && (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"h-0.5 w-16 mx-2 transition-colors",
|
||||||
|
currentStep > step.id ? "bg-primary" : "bg-muted-foreground/30"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step Content */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>{STEPS[currentStep - 1].title}</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
{currentStep === 1 && "Enter the basic information about this job"}
|
||||||
|
{currentStep === 2 && "Set the compensation details"}
|
||||||
|
{currentStep === 3 && "Select the company posting this job"}
|
||||||
|
{currentStep === 4 && "Review your job listing before publishing"}
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-6">
|
||||||
|
{/* Step 1: Job Details */}
|
||||||
|
{currentStep === 1 && (
|
||||||
|
<>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="title">Job Title *</Label>
|
||||||
|
<Input
|
||||||
|
id="title"
|
||||||
|
placeholder="e.g. Senior Software Engineer"
|
||||||
|
value={formData.title}
|
||||||
|
onChange={(e) => updateField("title", e.target.value)}
|
||||||
|
/>
|
||||||
|
{formData.title.length > 0 && formData.title.length < 5 && (
|
||||||
|
<p className="text-xs text-destructive">Title must be at least 5 characters</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="description">Job Description *</Label>
|
||||||
|
<Textarea
|
||||||
|
id="description"
|
||||||
|
placeholder="Describe the role, responsibilities, and requirements..."
|
||||||
|
rows={8}
|
||||||
|
value={formData.description}
|
||||||
|
onChange={(e) => updateField("description", e.target.value)}
|
||||||
|
/>
|
||||||
|
{formData.description.length > 0 && formData.description.length < 20 && (
|
||||||
|
<p className="text-xs text-destructive">Description must be at least 20 characters</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="location">Location</Label>
|
||||||
|
<Input
|
||||||
|
id="location"
|
||||||
|
placeholder="e.g. São Paulo, SP or Remote"
|
||||||
|
value={formData.location}
|
||||||
|
onChange={(e) => updateField("location", e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Step 2: Salary & Type */}
|
||||||
|
{currentStep === 2 && (
|
||||||
|
<>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="salaryMin">Minimum Salary</Label>
|
||||||
|
<Input
|
||||||
|
id="salaryMin"
|
||||||
|
type="number"
|
||||||
|
placeholder="e.g. 5000"
|
||||||
|
value={formData.salaryMin}
|
||||||
|
onChange={(e) => updateField("salaryMin", e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="salaryMax">Maximum Salary</Label>
|
||||||
|
<Input
|
||||||
|
id="salaryMax"
|
||||||
|
type="number"
|
||||||
|
placeholder="e.g. 10000"
|
||||||
|
value={formData.salaryMax}
|
||||||
|
onChange={(e) => updateField("salaryMax", e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Salary Type</Label>
|
||||||
|
<Select value={formData.salaryType} onValueChange={(v) => updateField("salaryType", v)}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select period" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="hourly">Per hour</SelectItem>
|
||||||
|
<SelectItem value="monthly">Per month</SelectItem>
|
||||||
|
<SelectItem value="yearly">Per year</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Employment Type</Label>
|
||||||
|
<Select value={formData.employmentType} onValueChange={(v) => updateField("employmentType", v)}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select type" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="full-time">Full-time</SelectItem>
|
||||||
|
<SelectItem value="part-time">Part-time</SelectItem>
|
||||||
|
<SelectItem value="contract">Contract</SelectItem>
|
||||||
|
<SelectItem value="dispatch">Dispatch</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="workingHours">Working Hours</Label>
|
||||||
|
<Input
|
||||||
|
id="workingHours"
|
||||||
|
placeholder="e.g. 9:00 - 18:00, Mon-Fri"
|
||||||
|
value={formData.workingHours}
|
||||||
|
onChange={(e) => updateField("workingHours", e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Step 3: Company */}
|
||||||
|
{currentStep === 3 && (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Company *</Label>
|
||||||
|
{loadingCompanies ? (
|
||||||
|
<div className="flex items-center gap-2 text-muted-foreground">
|
||||||
|
<Loader2 className="h-4 w-4 animate-spin" />
|
||||||
|
Loading companies...
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<Select value={formData.companyId} onValueChange={(v) => updateField("companyId", v)}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select a company" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{companies.length === 0 ? (
|
||||||
|
<SelectItem value="__none" disabled>No companies available</SelectItem>
|
||||||
|
) : (
|
||||||
|
companies.map((company) => (
|
||||||
|
<SelectItem key={company.id} value={company.id}>
|
||||||
|
{company.name}
|
||||||
|
</SelectItem>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Step 4: Review */}
|
||||||
|
{currentStep === 4 && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-muted-foreground">Job Title</p>
|
||||||
|
<p className="font-medium">{formData.title || "-"}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-muted-foreground">Company</p>
|
||||||
|
<p className="font-medium">
|
||||||
|
{companies.find(c => c.id === formData.companyId)?.name || "-"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-muted-foreground">Location</p>
|
||||||
|
<p className="font-medium">{formData.location || "-"}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-muted-foreground">Employment Type</p>
|
||||||
|
<p className="font-medium">{formData.employmentType || "-"}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-muted-foreground">Salary</p>
|
||||||
|
<p className="font-medium">
|
||||||
|
{formData.salaryMin || formData.salaryMax
|
||||||
|
? `R$ ${formData.salaryMin || "?"} - R$ ${formData.salaryMax || "?"} ${formData.salaryType ? `(${formData.salaryType})` : ""}`
|
||||||
|
: "-"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-muted-foreground">Working Hours</p>
|
||||||
|
<p className="font-medium">{formData.workingHours || "-"}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-muted-foreground mb-1">Description</p>
|
||||||
|
<div className="p-3 bg-muted rounded-md text-sm whitespace-pre-wrap max-h-40 overflow-y-auto">
|
||||||
|
{formData.description || "-"}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Navigation Buttons */}
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<Button variant="outline" onClick={prevStep} disabled={currentStep === 1}>
|
||||||
|
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||||
|
Back
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{currentStep < 4 ? (
|
||||||
|
<Button onClick={nextStep} disabled={!canProceed()}>
|
||||||
|
Next
|
||||||
|
<ArrowRight className="h-4 w-4 ml-2" />
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<Button onClick={handleSubmit} disabled={isSubmitting}>
|
||||||
|
{isSubmitting ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||||
|
Publishing...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Check className="h-4 w-4 mr-2" />
|
||||||
|
Publish Job
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import { useEffect, useMemo, useState } from "react"
|
import { useEffect, useMemo, useState } from "react"
|
||||||
|
import Link from "next/link"
|
||||||
import { Button } from "@/components/ui/button"
|
import { Button } from "@/components/ui/button"
|
||||||
import { Input } from "@/components/ui/input"
|
import { Input } from "@/components/ui/input"
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||||
|
|
@ -201,133 +202,13 @@ export default function AdminJobsPage() {
|
||||||
<h1 className="text-3xl font-bold text-foreground">Job management</h1>
|
<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>
|
<p className="text-muted-foreground mt-1">Manage all jobs posted on the platform</p>
|
||||||
</div>
|
</div>
|
||||||
<Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
|
<Link href="/dashboard/jobs/new">
|
||||||
<DialogTrigger asChild>
|
|
||||||
<Button className="gap-2">
|
<Button className="gap-2">
|
||||||
<Plus className="h-4 w-4" />
|
<Plus className="h-4 w-4" />
|
||||||
New job
|
New job
|
||||||
</Button>
|
</Button>
|
||||||
</DialogTrigger>
|
</Link>
|
||||||
<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"
|
|
||||||
value={createForm.title}
|
|
||||||
onChange={(e) => setCreateForm({ ...createForm, title: e.target.value })}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="company">Company</Label>
|
|
||||||
<Select
|
|
||||||
value={createForm.company}
|
|
||||||
onValueChange={(value) => {
|
|
||||||
console.log("[DEBUG] Selected company:", value)
|
|
||||||
setCreateForm({ ...createForm, company: value })
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<SelectTrigger id="company">
|
|
||||||
<SelectValue placeholder="Select a company" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{companyOptions.length === 0 ? (
|
|
||||||
<SelectItem value="__none" disabled>No companies available</SelectItem>
|
|
||||||
) : (
|
|
||||||
companyOptions.map((company) => (
|
|
||||||
<SelectItem key={company.id} value={company.id}>
|
|
||||||
{company.name}
|
|
||||||
</SelectItem>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</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"
|
|
||||||
value={createForm.location}
|
|
||||||
onChange={(e) => setCreateForm({ ...createForm, location: e.target.value })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="type">Type</Label>
|
|
||||||
<Select
|
|
||||||
value={createForm.type}
|
|
||||||
onValueChange={(value) => setCreateForm({ ...createForm, type: value })}
|
|
||||||
>
|
|
||||||
<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"
|
|
||||||
value={createForm.salary}
|
|
||||||
onChange={(e) => setCreateForm({ ...createForm, salary: e.target.value })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="level">Level</Label>
|
|
||||||
<Select
|
|
||||||
value={createForm.level}
|
|
||||||
onValueChange={(value) => setCreateForm({ ...createForm, level: value })}
|
|
||||||
>
|
|
||||||
<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}
|
|
||||||
value={createForm.description}
|
|
||||||
onChange={(e) => setCreateForm({ ...createForm, description: e.target.value })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<DialogFooter>
|
|
||||||
<Button variant="outline" onClick={() => setIsCreateDialogOpen(false)}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button onClick={() => {
|
|
||||||
console.log("[DEBUG] Create form data:", createForm)
|
|
||||||
console.log("[DEBUG] Selected company ID:", createForm.company)
|
|
||||||
console.log("[DEBUG] All companies:", companies)
|
|
||||||
// TODO: Call API to create job
|
|
||||||
setIsCreateDialogOpen(false)
|
|
||||||
}}>Publish job</Button>
|
|
||||||
</DialogFooter>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
|
|
||||||
{/* View Job Dialog */}
|
{/* View Job Dialog */}
|
||||||
<Dialog open={isViewDialogOpen} onOpenChange={setIsViewDialogOpen}>
|
<Dialog open={isViewDialogOpen} onOpenChange={setIsViewDialogOpen}>
|
||||||
|
|
@ -401,7 +282,6 @@ export default function AdminJobsPage() {
|
||||||
</DialogFooter>
|
</DialogFooter>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Stats */}
|
{/* Stats */}
|
||||||
<div className="grid gap-4 md:grid-cols-4">
|
<div className="grid gap-4 md:grid-cols-4">
|
||||||
|
|
|
||||||
|
|
@ -284,6 +284,19 @@ export const adminCompaniesApi = {
|
||||||
};
|
};
|
||||||
|
|
||||||
// --- Jobs API (Public/Candidate) ---
|
// --- Jobs API (Public/Candidate) ---
|
||||||
|
export interface CreateJobPayload {
|
||||||
|
companyId: string;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
salaryMin?: number;
|
||||||
|
salaryMax?: number;
|
||||||
|
salaryType?: 'hourly' | 'monthly' | 'yearly';
|
||||||
|
employmentType?: 'full-time' | 'part-time' | 'dispatch' | 'contract';
|
||||||
|
workingHours?: string;
|
||||||
|
location?: string;
|
||||||
|
status: 'draft' | 'published' | 'open';
|
||||||
|
}
|
||||||
|
|
||||||
export const jobsApi = {
|
export const jobsApi = {
|
||||||
list: (params: {
|
list: (params: {
|
||||||
page?: number;
|
page?: number;
|
||||||
|
|
@ -307,6 +320,13 @@ export const jobsApi = {
|
||||||
}>(`/api/v1/jobs?${query.toString()}`);
|
}>(`/api/v1/jobs?${query.toString()}`);
|
||||||
},
|
},
|
||||||
getById: (id: string) => apiRequest<ApiJob>(`/api/v1/jobs/${id}`),
|
getById: (id: string) => apiRequest<ApiJob>(`/api/v1/jobs/${id}`),
|
||||||
|
create: (data: CreateJobPayload) => {
|
||||||
|
logCrudAction("create", "jobs", data);
|
||||||
|
return apiRequest<ApiJob>("/api/v1/jobs", {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export const applicationsApi = {
|
export const applicationsApi = {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue