rede5/gohorsejobs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

UI: Refine Nova Vaga page form layout

Browse source
This commit is contained in:
Redbull Deployer 2026-03-04 06:29:59 -06:00
parent 4d3afbb791
commit 45ffd5033e
1 changed files with 59 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
frontend/src/app/dashboard/jobs/new/page.tsx
View file

@ -207,13 +207,13 @@ export default function DashboardNewJobPage() {
} }
return ( return (
<div className="space-y-6"> <div className="space-y-8">
<div> <div>
<h1 className="text-3xl font-bold text-foreground">Nova vaga</h1> <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> <p className="text-muted-foreground mt-1">Preencha os dados da vaga. Os campos marcados com * são obrigatórios.</p>
</div> </div>
<form onSubmit={handleSubmit} className="space-y-6"> <form onSubmit={handleSubmit} className="space-y-8">
{/* Empresa e Status */} {/* Empresa e Status */}
<Card> <Card>
<CardHeader> <CardHeader>
@ -221,8 +221,8 @@ export default function DashboardNewJobPage() {
<PlusCircle className="h-5 w-5" /> Empresa e status <PlusCircle className="h-5 w-5" /> Empresa e status
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="grid md:grid-cols-2 gap-4"> <CardContent className="grid md:grid-cols-4 gap-6">
<div> <div className="md:col-span-3 space-y-1.5">
<Label>Empresa *</Label> <Label>Empresa *</Label>
{loadingCompanies ? ( {loadingCompanies ? (
<div className="h-10 px-3 flex items-center text-sm text-muted-foreground border rounded-md"> <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> <div className="space-y-1.5">
<Label>Status</Label> <Label>Status</Label>
<Select value={formData.status} onValueChange={(v) => set("status", v)}> <Select value={formData.status} onValueChange={(v) => set("status", v)}>
<SelectTrigger><SelectValue /></SelectTrigger> <SelectTrigger><SelectValue /></SelectTrigger>
<SelectContent> <SelectContent>
@ -267,8 +268,8 @@ export default function DashboardNewJobPage() {
<CardHeader> <CardHeader>
<CardTitle>Dados da vaga</CardTitle> <CardTitle>Dados da vaga</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-6">
<div> <div className="space-y-1.5">
<Label htmlFor="title">Título da vaga *</Label> <Label htmlFor="title">Título da vaga *</Label>
<Input <Input
id="title" 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> <p className="text-xs text-muted-foreground mt-1">{formData.title.length}/255 caracteres</p>
</div> </div>
<div> <div className="space-y-1.5">
<Label htmlFor="description">Descrição da vaga *</Label> <Label htmlFor="description">Descrição da vaga *</Label>
<Textarea <Textarea
id="description" id="description"
rows={6} rows={4}
className="resize-y"
placeholder="Descreva responsabilidades, requisitos e diferenciais..." placeholder="Descreva responsabilidades, requisitos e diferenciais..."
value={formData.description} value={formData.description}
onChange={(e) => set("description", e.target.value)} onChange={(e) => set("description", e.target.value)}
/> />
</div> </div>
<div> <div className="md:w-1/3 space-y-1.5">
<Label>Idioma da descrição</Label> <Label>Idioma da descrição</Label>
<Select value={formData.languageLevel} onValueChange={(v) => set("languageLevel", v)}> <Select value={formData.languageLevel} onValueChange={(v) => set("languageLevel", v)}>
<SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger> <SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
<SelectContent> <SelectContent>
@ -311,8 +314,8 @@ export default function DashboardNewJobPage() {
<CardHeader> <CardHeader>
<CardTitle>Localização</CardTitle> <CardTitle>Localização</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="grid md:grid-cols-2 gap-4"> <CardContent className="grid md:grid-cols-4 gap-6 items-end">
<div> <div className="space-y-1.5">
<Label>País</Label> <Label>País</Label>
<Select value={formData.country} onValueChange={(v) => { <Select value={formData.country} onValueChange={(v) => {
set("country", v) set("country", v)
@ -333,8 +336,9 @@ export default function DashboardNewJobPage() {
</Select> </Select>
</div> </div>
<div> <div className="md:col-span-2 space-y-1.5">
<Label>Cidade / Estado</Label> <Label>Cidade / Estado</Label>
<div ref={locationRef} className="relative"> <div ref={locationRef} className="relative">
<Input <Input
placeholder={formData.country ? "Digite para buscar..." : "Selecione um país primeiro"} placeholder={formData.country ? "Digite para buscar..." : "Selecione um país primeiro"}
@ -390,7 +394,7 @@ export default function DashboardNewJobPage() {
</div> </div>
</div> </div>
<div> <div className="space-y-1.5">
<Label>Modo de trabalho</Label> <Label>Modo de trabalho</Label>
<Select value={formData.workMode} onValueChange={(v) => set("workMode", v)}> <Select value={formData.workMode} onValueChange={(v) => set("workMode", v)}>
<SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger> <SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
@ -402,13 +406,17 @@ export default function DashboardNewJobPage() {
</Select> </Select>
</div> </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 <Checkbox
id="visaSupport" id="visaSupport"
checked={formData.visaSupport} checked={formData.visaSupport}
onCheckedChange={(v) => set("visaSupport", v === true)} 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> </div>
</CardContent> </CardContent>
</Card> </Card>
@ -418,10 +426,11 @@ export default function DashboardNewJobPage() {
<CardHeader> <CardHeader>
<CardTitle>Contrato e salário</CardTitle> <CardTitle>Contrato e salário</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-6">
<div className="grid md:grid-cols-2 gap-4"> <div className="grid md:grid-cols-2 gap-6">
<div> <div className="space-y-1.5">
<Label>Tipo de contrato</Label> <Label>Tipo de contrato</Label>
<Select value={formData.employmentType} onValueChange={(v) => set("employmentType", v)}> <Select value={formData.employmentType} onValueChange={(v) => set("employmentType", v)}>
<SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger> <SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
<SelectContent> <SelectContent>
@ -437,8 +446,9 @@ export default function DashboardNewJobPage() {
</Select> </Select>
</div> </div>
<div> <div className="space-y-1.5">
<Label htmlFor="workingHours">Jornada de trabalho</Label> <Label htmlFor="workingHours">Jornada de trabalho</Label>
<Input <Input
id="workingHours" id="workingHours"
placeholder="Ex: 9h às 18h, 40h/semana" placeholder="Ex: 9h às 18h, 40h/semana"
@ -448,9 +458,10 @@ export default function DashboardNewJobPage() {
</div> </div>
</div> </div>
<div className="grid md:grid-cols-4 gap-4"> <div className="grid md:grid-cols-4 gap-6">
<div> <div className="space-y-1.5">
<Label>Moeda</Label> <Label>Moeda</Label>
<Select value={formData.currency} onValueChange={(v) => set("currency", v)}> <Select value={formData.currency} onValueChange={(v) => set("currency", v)}>
<SelectTrigger><SelectValue /></SelectTrigger> <SelectTrigger><SelectValue /></SelectTrigger>
<SelectContent> <SelectContent>
@ -468,8 +479,9 @@ export default function DashboardNewJobPage() {
</Select> </Select>
</div> </div>
<div> <div className="space-y-1.5">
<Label>Período</Label> <Label>Período</Label>
<Select value={formData.salaryType} onValueChange={(v) => set("salaryType", v)}> <Select value={formData.salaryType} onValueChange={(v) => set("salaryType", v)}>
<SelectTrigger><SelectValue /></SelectTrigger> <SelectTrigger><SelectValue /></SelectTrigger>
<SelectContent> <SelectContent>
@ -482,8 +494,9 @@ export default function DashboardNewJobPage() {
</Select> </Select>
</div> </div>
<div> <div className="space-y-1.5">
<Label htmlFor="salaryMin">Salário mínimo</Label> <Label htmlFor="salaryMin">Salário mínimo</Label>
<Input <Input
id="salaryMin" id="salaryMin"
type="number" type="number"
@ -494,8 +507,9 @@ export default function DashboardNewJobPage() {
/> />
</div> </div>
<div> <div className="space-y-1.5">
<Label htmlFor="salaryMax">Salário máximo</Label> <Label htmlFor="salaryMax">Salário máximo</Label>
<Input <Input
id="salaryMax" id="salaryMax"
type="number" type="number"
@ -507,13 +521,13 @@ export default function DashboardNewJobPage() {
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 pt-2">
<Checkbox <Checkbox
id="salaryNegotiable" id="salaryNegotiable"
checked={formData.salaryNegotiable} checked={formData.salaryNegotiable}
onCheckedChange={(v) => set("salaryNegotiable", v === true)} 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> </div>
</CardContent> </CardContent>
</Card> </Card>
@ -524,10 +538,11 @@ export default function DashboardNewJobPage() {
<CardTitle>Candidaturas</CardTitle> <CardTitle>Candidaturas</CardTitle>
<CardDescription>Como os candidatos devem se candidatar à vaga.</CardDescription> <CardDescription>Como os candidatos devem se candidatar à vaga.</CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-6">
<div className="grid md:grid-cols-2 gap-4"> <div className="grid md:grid-cols-2 gap-6">
<div> <div className="space-y-1.5">
<Label>Canal de candidatura</Label> <Label>Canal de candidatura</Label>
<Select value={formData.applicationChannel} onValueChange={(v) => set("applicationChannel", v as ApplicationChannel)}> <Select value={formData.applicationChannel} onValueChange={(v) => set("applicationChannel", v as ApplicationChannel)}>
<SelectTrigger><SelectValue /></SelectTrigger> <SelectTrigger><SelectValue /></SelectTrigger>
<SelectContent> <SelectContent>
@ -538,8 +553,9 @@ export default function DashboardNewJobPage() {
</Select> </Select>
</div> </div>
<div> <div className="space-y-1.5">
<Label>Currículo</Label> <Label>Currículo</Label>
<Select value={formData.resumeRequirement} onValueChange={(v) => set("resumeRequirement", v)}> <Select value={formData.resumeRequirement} onValueChange={(v) => set("resumeRequirement", v)}>
<SelectTrigger><SelectValue /></SelectTrigger> <SelectTrigger><SelectValue /></SelectTrigger>
<SelectContent> <SelectContent>
@ -552,8 +568,9 @@ export default function DashboardNewJobPage() {
</div> </div>
{formData.applicationChannel === "email" && ( {formData.applicationChannel === "email" && (
<div> <div className="space-y-1.5 mt-2">
<Label htmlFor="appEmail">E-mail para candidatura</Label> <Label htmlFor="appEmail">E-mail para candidatura</Label>
<Input <Input
id="appEmail" id="appEmail"
type="email" type="email"
@ -565,8 +582,9 @@ export default function DashboardNewJobPage() {
)} )}
{formData.applicationChannel === "url" && ( {formData.applicationChannel === "url" && (
<div> <div className="space-y-1.5 mt-2">
<Label htmlFor="appUrl">Link externo (HTTPS)</Label> <Label htmlFor="appUrl">Link externo (HTTPS)</Label>
<Input <Input
id="appUrl" id="appUrl"
placeholder="https://empresa.com/carreiras" placeholder="https://empresa.com/carreiras"
@ -577,8 +595,9 @@ export default function DashboardNewJobPage() {
)} )}
{formData.applicationChannel === "phone" && ( {formData.applicationChannel === "phone" && (
<div> <div className="space-y-1.5 mt-2">
<Label htmlFor="appPhone">Telefone (com DDI)</Label> <Label htmlFor="appPhone">Telefone (com DDI)</Label>
<Input <Input
id="appPhone" id="appPhone"
placeholder="+55 11 99999-8888" placeholder="+55 11 99999-8888"