fix: update jobs page to use ApiJob properties

- Replace job.company with job.companyName
- Replace job.type with job.employmentType
- Replace job.postedAt with job.createdAt
- Add getSalaryDisplay helper for salaryMin/salaryMax
- Fixed type compatibility with ApiJob interface
This commit is contained in:
Tiago Yamamoto 2025-12-23 08:34:49 -03:00
parent 592af3216e
commit 96c5b60e98

View file

@ -146,6 +146,18 @@ export default function JobDetailPage({
return typeLabels[type] || type;
};
const getSalaryDisplay = () => {
if (!salaryDisplayMin && !salaryDisplayMax) return null;
if (salaryDisplayMin && salaryDisplayMax) {
return `R$ ${salaryDisplayMin.toLocaleString()} - R$ ${salaryDisplayMax.toLocaleString()}`;
}
if (salaryDisplayMin) return `From R$ ${salaryDisplayMin.toLocaleString()}`;
if (salaryDisplayMax) return `Up to R$ ${salaryDisplayMax.toLocaleString()}`;
return null;
};
const salaryDisplay = getSalaryDisplay();
const mockCompanyInfo = {
size: "100-500 employees",
industry: "Technology",
@ -188,11 +200,11 @@ export default function JobDetailPage({
<div className="flex flex-col sm:flex-row items-start gap-4">
<Avatar className="h-16 w-16 shrink-0">
<AvatarImage
src={`https://avatar.vercel.sh/${job.company}`}
alt={job.company}
src={`https://avatar.vercel.sh/${job.companyName || "Company"}`}
alt={job.companyName || "Company"}
/>
<AvatarFallback className="bg-primary/10 text-primary font-bold text-lg">
{getCompanyInitials(job.company)}
{getCompanyInitials(job.companyName || "Company")}
</AvatarFallback>
</Avatar>
@ -206,7 +218,7 @@ export default function JobDetailPage({
<div className="flex flex-wrap items-center gap-2 mb-3">
<Building2 className="h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground shrink-0" />
<CardDescription className="text-base sm:text-lg font-medium">
{job.company}
{job.companyName || "Company"}
</CardDescription>
<div className="flex items-center gap-1">
<Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
@ -295,21 +307,21 @@ export default function JobDetailPage({
variant="secondary"
className="whitespace-nowrap"
>
{getTypeLabel(job.type)}
{getTypeLabel(job.employmentType || "full-time")}
</Badge>
</div>
{job.salary && (
{salaryDisplay && (
<div className="flex items-center gap-2">
<DollarSign className="h-4 w-4 shrink-0" />
<span className="font-medium text-foreground whitespace-nowrap">
{job.salary}
{salaryDisplay}
</span>
</div>
)}
<div className="flex items-center gap-2">
<Clock className="h-4 w-4 shrink-0" />
<span className="whitespace-nowrap">
{formatTimeAgo(job.postedAt)}
{formatTimeAgo(job.createdAt)}
</span>
</div>
</div>
@ -389,7 +401,7 @@ export default function JobDetailPage({
</CardHeader>
<CardContent className="space-y-4">
<p className="text-muted-foreground leading-relaxed">
{job.company} is a market leader committed to creating
{job.companyName || "Company"} is a market leader committed to creating
an inclusive and innovative workplace. We offer
competitive benefits and opportunities for professional
growth.
@ -481,7 +493,7 @@ export default function JobDetailPage({
variant="outline"
className="whitespace-nowrap"
>
{getTypeLabel(job.type)}
{getTypeLabel(job.employmentType || "full-time")}
</Badge>
</div>
<div className="flex items-start justify-between gap-2">
@ -492,13 +504,13 @@ export default function JobDetailPage({
{job.location}
</span>
</div>
{job.salary && (
{salaryDisplay && (
<div className="flex items-start justify-between gap-2">
<span className="text-muted-foreground">
Salary:
</span>
<span className="font-medium text-right whitespace-nowrap">
{job.salary}
{salaryDisplay}
</span>
</div>
)}
@ -507,7 +519,7 @@ export default function JobDetailPage({
Posted:
</span>
<span className="font-medium text-right whitespace-nowrap">
{formatTimeAgo(job.postedAt)}
{formatTimeAgo(job.createdAt)}
</span>
</div>
</div>