From 96c5b60e98b00eb19763d063f84b632fd810d902 Mon Sep 17 00:00:00 2001
From: Tiago Yamamoto <tiago.ribeiro@inventcloud.com.br>
Date: Tue, 23 Dec 2025 08:34:49 -0300
Subject: [PATCH] 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
---
 frontend/src/app/jobs/[id]/page.tsx | 38 +++++++++++++++++++----------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/jobs/[id]/page.tsx b/frontend/src/app/jobs/[id]/page.tsx
index ee161e8..aa3635a 100644
--- a/frontend/src/app/jobs/[id]/page.tsx
+++ b/frontend/src/app/jobs/[id]/page.tsx
@@ -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>