From 45ffd5033ee9b85e8051e86a9b62280f4f703c02 Mon Sep 17 00:00:00 2001
From: Redbull Deployer <deploy@rede5.com.br>
Date: Wed, 4 Mar 2026 06:29:59 -0600
Subject: [PATCH] UI: Refine Nova Vaga page form layout

---
 frontend/src/app/dashboard/jobs/new/page.tsx | 99 ++++++++++++--------
 1 file changed, 59 insertions(+), 40 deletions(-)

diff --git a/frontend/src/app/dashboard/jobs/new/page.tsx b/frontend/src/app/dashboard/jobs/new/page.tsx
index cf186af..95291c5 100644
--- a/frontend/src/app/dashboard/jobs/new/page.tsx
+++ b/frontend/src/app/dashboard/jobs/new/page.tsx
@@ -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"