UI: Refine Nova Vaga page form layout
This commit is contained in:
Redbull Deployer
parent
4d3afbb791
commit
45ffd5033e
1 changed files with 59 additions and 40 deletions
|
|
@ -87,7 +87,7 @@ export default function DashboardNewJobPage() {
|
|||
fetch(`${apiBase}/api/v1/locations/countries`)
|
||||
.then((r) => r.json())
|
||||
.then((data: ApiCountry[]) => setApiCountries(data))
|
||||
.catch(() => {})
|
||||
.catch(() => { })
|
||||
}, [])
|
||||
|
||||
const selectedCountryId = useMemo(
|
||||
|
|
@ -207,13 +207,13 @@ export default function DashboardNewJobPage() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-foreground">Nova vaga</h1>
|
||||
<p className="text-muted-foreground mt-1">Preencha os dados da vaga. Os campos marcados com * são obrigatórios.</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<form onSubmit={handleSubmit} className="space-y-8">
|
||||
{/* Empresa e Status */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
|
|
@ -221,8 +221,8 @@ export default function DashboardNewJobPage() {
|
|||
<PlusCircle className="h-5 w-5" /> Empresa e status
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<CardContent className="grid md:grid-cols-4 gap-6">
|
||||
<div className="md:col-span-3 space-y-1.5">
|
||||
<Label>Empresa *</Label>
|
||||
{loadingCompanies ? (
|
||||
<div className="h-10 px-3 flex items-center text-sm text-muted-foreground border rounded-md">
|
||||
|
|
@ -246,8 +246,9 @@ export default function DashboardNewJobPage() {
|
|||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Status</Label>
|
||||
|
||||
<Select value={formData.status} onValueChange={(v) => set("status", v)}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
|
|
@ -267,8 +268,8 @@ export default function DashboardNewJobPage() {
|
|||
<CardHeader>
|
||||
<CardTitle>Dados da vaga</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="title">Título da vaga *</Label>
|
||||
<Input
|
||||
id="title"
|
||||
|
|
@ -280,19 +281,21 @@ export default function DashboardNewJobPage() {
|
|||
<p className="text-xs text-muted-foreground mt-1">{formData.title.length}/255 caracteres</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="description">Descrição da vaga *</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
rows={6}
|
||||
rows={4}
|
||||
className="resize-y"
|
||||
placeholder="Descreva responsabilidades, requisitos e diferenciais..."
|
||||
value={formData.description}
|
||||
onChange={(e) => set("description", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="md:w-1/3 space-y-1.5">
|
||||
<Label>Idioma da descrição</Label>
|
||||
|
||||
<Select value={formData.languageLevel} onValueChange={(v) => set("languageLevel", v)}>
|
||||
<SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
|
|
@ -311,8 +314,8 @@ export default function DashboardNewJobPage() {
|
|||
<CardHeader>
|
||||
<CardTitle>Localização</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<CardContent className="grid md:grid-cols-4 gap-6 items-end">
|
||||
<div className="space-y-1.5">
|
||||
<Label>País</Label>
|
||||
<Select value={formData.country} onValueChange={(v) => {
|
||||
set("country", v)
|
||||
|
|
@ -323,18 +326,19 @@ export default function DashboardNewJobPage() {
|
|||
<SelectContent>
|
||||
{apiCountries.length > 0
|
||||
? apiCountries.map((c) => (
|
||||
<SelectItem key={c.id} value={c.iso2}>{c.name}</SelectItem>
|
||||
))
|
||||
: ["US","BR","PT","ES","GB","DE","FR","JP"].map((iso) => (
|
||||
<SelectItem key={iso} value={iso}>{iso}</SelectItem>
|
||||
))
|
||||
<SelectItem key={c.id} value={c.iso2}>{c.name}</SelectItem>
|
||||
))
|
||||
: ["US", "BR", "PT", "ES", "GB", "DE", "FR", "JP"].map((iso) => (
|
||||
<SelectItem key={iso} value={iso}>{iso}</SelectItem>
|
||||
))
|
||||
}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="md:col-span-2 space-y-1.5">
|
||||
<Label>Cidade / Estado</Label>
|
||||
|
||||
<div ref={locationRef} className="relative">
|
||||
<Input
|
||||
placeholder={formData.country ? "Digite para buscar..." : "Selecione um país primeiro"}
|
||||
|
|
@ -390,7 +394,7 @@ export default function DashboardNewJobPage() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Modo de trabalho</Label>
|
||||
<Select value={formData.workMode} onValueChange={(v) => set("workMode", v)}>
|
||||
<SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
|
||||
|
|
@ -402,13 +406,17 @@ export default function DashboardNewJobPage() {
|
|||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 pt-6">
|
||||
{/* Empty div for grid alignment to push checkbox down */}
|
||||
<div className="md:col-span-1 hidden md:block"></div>
|
||||
|
||||
<div className="md:col-span-3 flex items-center gap-2 pt-2 md:pt-0 pb-2">
|
||||
<Checkbox
|
||||
id="visaSupport"
|
||||
checked={formData.visaSupport}
|
||||
onCheckedChange={(v) => set("visaSupport", v === true)}
|
||||
/>
|
||||
<Label htmlFor="visaSupport">Oferece suporte de visto</Label>
|
||||
<Label htmlFor="visaSupport" className="font-normal cursor-pointer">Oferece suporte de visto</Label>
|
||||
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
@ -418,10 +426,11 @@ export default function DashboardNewJobPage() {
|
|||
<CardHeader>
|
||||
<CardTitle>Contrato e salário</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="space-y-1.5">
|
||||
<Label>Tipo de contrato</Label>
|
||||
|
||||
<Select value={formData.employmentType} onValueChange={(v) => set("employmentType", v)}>
|
||||
<SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
|
|
@ -437,8 +446,9 @@ export default function DashboardNewJobPage() {
|
|||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="workingHours">Jornada de trabalho</Label>
|
||||
|
||||
<Input
|
||||
id="workingHours"
|
||||
placeholder="Ex: 9h às 18h, 40h/semana"
|
||||
|
|
@ -448,9 +458,10 @@ export default function DashboardNewJobPage() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<div className="grid md:grid-cols-4 gap-6">
|
||||
<div className="space-y-1.5">
|
||||
<Label>Moeda</Label>
|
||||
|
||||
<Select value={formData.currency} onValueChange={(v) => set("currency", v)}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
|
|
@ -468,8 +479,9 @@ export default function DashboardNewJobPage() {
|
|||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Período</Label>
|
||||
|
||||
<Select value={formData.salaryType} onValueChange={(v) => set("salaryType", v)}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
|
|
@ -482,8 +494,9 @@ export default function DashboardNewJobPage() {
|
|||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="salaryMin">Salário mínimo</Label>
|
||||
|
||||
<Input
|
||||
id="salaryMin"
|
||||
type="number"
|
||||
|
|
@ -494,8 +507,9 @@ export default function DashboardNewJobPage() {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="salaryMax">Salário máximo</Label>
|
||||
|
||||
<Input
|
||||
id="salaryMax"
|
||||
type="number"
|
||||
|
|
@ -507,13 +521,13 @@ export default function DashboardNewJobPage() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-2 pt-2">
|
||||
<Checkbox
|
||||
id="salaryNegotiable"
|
||||
checked={formData.salaryNegotiable}
|
||||
onCheckedChange={(v) => set("salaryNegotiable", v === true)}
|
||||
/>
|
||||
<Label htmlFor="salaryNegotiable">Salário negociável</Label>
|
||||
<Label htmlFor="salaryNegotiable" className="font-normal cursor-pointer">Salário negociável</Label>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
@ -524,10 +538,11 @@ export default function DashboardNewJobPage() {
|
|||
<CardTitle>Candidaturas</CardTitle>
|
||||
<CardDescription>Como os candidatos devem se candidatar à vaga.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="space-y-1.5">
|
||||
<Label>Canal de candidatura</Label>
|
||||
|
||||
<Select value={formData.applicationChannel} onValueChange={(v) => set("applicationChannel", v as ApplicationChannel)}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
|
|
@ -538,8 +553,9 @@ export default function DashboardNewJobPage() {
|
|||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Currículo</Label>
|
||||
|
||||
<Select value={formData.resumeRequirement} onValueChange={(v) => set("resumeRequirement", v)}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
|
|
@ -552,8 +568,9 @@ export default function DashboardNewJobPage() {
|
|||
</div>
|
||||
|
||||
{formData.applicationChannel === "email" && (
|
||||
<div>
|
||||
<div className="space-y-1.5 mt-2">
|
||||
<Label htmlFor="appEmail">E-mail para candidatura</Label>
|
||||
|
||||
<Input
|
||||
id="appEmail"
|
||||
type="email"
|
||||
|
|
@ -565,8 +582,9 @@ export default function DashboardNewJobPage() {
|
|||
)}
|
||||
|
||||
{formData.applicationChannel === "url" && (
|
||||
<div>
|
||||
<div className="space-y-1.5 mt-2">
|
||||
<Label htmlFor="appUrl">Link externo (HTTPS)</Label>
|
||||
|
||||
<Input
|
||||
id="appUrl"
|
||||
placeholder="https://empresa.com/carreiras"
|
||||
|
|
@ -577,8 +595,9 @@ export default function DashboardNewJobPage() {
|
|||
)}
|
||||
|
||||
{formData.applicationChannel === "phone" && (
|
||||
<div>
|
||||
<div className="space-y-1.5 mt-2">
|
||||
<Label htmlFor="appPhone">Telefone (com DDI)</Label>
|
||||
|
||||
<Input
|
||||
id="appPhone"
|
||||
placeholder="+55 11 99999-8888"
|
||||
|
|
|
|||
Loading…
Reference in a new issue