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

refactor: merge company and job form into single step

Browse source 
- Reduced form from 3 steps to 2 steps
- Step 1 now contains both company and job data with visual separator
- Step 2 is confirmation only
- Updated progress indicators and card headers
- Fixed navigation button references
This commit is contained in:
Tiago Yamamoto 2025-12-26 15:53:15 -03:00
parent 249081554d
commit afab4e89cd
1 changed files with 22 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
frontend/src/app/post-job/page.tsx
View file

@ -58,7 +58,7 @@ const getSalaryPeriodLabel = (type: string): string => {
export default function PostJobPage() { export default function PostJobPage() {
const router = useRouter(); const router = useRouter();
const [step, setStep] = useState<1 | 2 | 3>(1); const [step, setStep] = useState<1 | 2>(1);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
// Company/User data // Company/User data
@ -217,7 +217,7 @@ export default function PostJobPage() {
{/* Progress Steps */} {/* Progress Steps */}
<div className="flex justify-center gap-4 mb-8"> <div className="flex justify-center gap-4 mb-8">
{[1, 2, 3].map((s) => ( {[1, 2].map((s) => (
<div <div
key={s} key={s}
className={`flex items-center gap-2 ${step >= s ? "text-primary" : "text-muted-foreground"}`} className={`flex items-center gap-2 ${step >= s ? "text-primary" : "text-muted-foreground"}`}
@ -226,7 +226,7 @@ export default function PostJobPage() {
{s} {s}
</div> </div>
<span className="hidden sm:inline text-sm"> <span className="hidden sm:inline text-sm">
{s === 1 ? "Empresa" : s === 2 ? "Vaga" : "Confirmar"} {s === 1 ? "Dados" : "Confirmar"}
</span> </span>
</div> </div>
))} ))}
@ -235,14 +235,12 @@ export default function PostJobPage() {
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle> <CardTitle>
{step === 1 && "Dados da Empresa"} {step === 1 && "Empresa & Vaga"}
{step === 2 && "Detalhes da Vaga"} {step === 2 && "Confirmar e Publicar"}
{step === 3 && "Confirmar e Publicar"}
</CardTitle> </CardTitle>
<CardDescription> <CardDescription>
{step === 1 && "Informe os dados da sua empresa para criar a conta"} {step === 1 && "Informe os dados da empresa e da vaga"}
{step === 2 && "Descreva a vaga que você deseja publicar"} {step === 2 && "Revise as informações antes de publicar"}
{step === 3 && "Revise as informações antes de publicar"}
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
@ -414,15 +412,13 @@ export default function PostJobPage() {
/> />
</div> </div>
<Button onClick={() => setStep(2)} className="w-full"> {/* Separator */}
Próximo: Dados da Vaga <div className="border-t pt-6 mt-6">
</Button> <h3 className="font-semibold text-lg mb-4 flex items-center gap-2">
<Briefcase className="h-5 w-5" /> Dados da Vaga
</h3>
</div> </div>
)}
{/* Step 2: Job */}
{step === 2 && (
<div className="space-y-4">
<div> <div>
<Label>Título da Vaga *</Label> <Label>Título da Vaga *</Label>
<div className="relative"> <div className="relative">
@ -585,19 +581,15 @@ export default function PostJobPage() {
</select> </select>
</div> </div>
</div> </div>
<div className="flex gap-3">
<Button variant="outline" onClick={() => setStep(1)} className="flex-1"> <Button onClick={() => setStep(2)} className="w-full">
Voltar
</Button>
<Button onClick={() => setStep(3)} className="flex-1">
Próximo: Confirmar Próximo: Confirmar
</Button> </Button>
</div> </div>
</div>
)} )}
{/* Step 3: Confirm */} {/* Step 2: Confirm */}
{step === 3 && ( {step === 2 && (
<div className="space-y-6"> <div className="space-y-6">
<div className="bg-muted/50 rounded-lg p-4"> <div className="bg-muted/50 rounded-lg p-4">
<h3 className="font-semibold mb-2 flex items-center gap-2"> <h3 className="font-semibold mb-2 flex items-center gap-2">
@ -623,7 +615,7 @@ export default function PostJobPage() {
<p><strong>Tipo:</strong> {job.employmentType || "Qualquer"} / {job.workingHours === 'full-time' ? 'Integral' : job.workingHours === 'part-time' ? 'Meio Período' : 'Qualquer'} / {job.workMode}</p> <p><strong>Tipo:</strong> {job.employmentType || "Qualquer"} / {job.workingHours === 'full-time' ? 'Integral' : job.workingHours === 'part-time' ? 'Meio Período' : 'Qualquer'} / {job.workMode}</p>
</div> </div>
<div className="flex gap-3"> <div className="flex gap-3">
<Button variant="outline" onClick={() => setStep(2)} className="flex-1"> <Button variant="outline" onClick={() => setStep(1)} className="flex-1">
Voltar Voltar
</Button> </Button>
<Button onClick={handleSubmit} disabled={loading} className="flex-1"> <Button onClick={handleSubmit} disabled={loading} className="flex-1">