import { Head, Link, usePage } from '@inertiajs/react'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import { MapPin, Clock, Building, DollarSign, Calendar, Users, Star } from 'lucide-react'; import CareerHeader from '@/components/career/CareerHeader'; import CareerFooter from '@/components/career/CareerFooter'; import { getImagePath } from '@/utils/helpers'; import { useTranslation } from 'react-i18next'; import { useFavicon } from '@/hooks/use-favicon'; import { useBrandTheme } from '@/hooks/use-brand-theme'; export default function JobDetails() { const { t } = useTranslation(); const { jobPosting, relatedJobs, companyId, companySettings, userSlug } = usePage().props as any; // Use favicon hook and brand theme like career index useFavicon(); useBrandTheme(); return ( <> {companySettings?.favIcon && ( <> )}
{/* Back Button */}
← {t("Back to All Jobs")}
{/* Main Content */}
{/* Job Header */}
{jobPosting.title} {jobPosting.is_featured && }

{jobPosting.branch?.name || 'General'}

{jobPosting.status} {jobPosting.priority === 'High' && ( {t("High Priority")} )}

{t("Location")}

{jobPosting.location?.name || 'Remote'}

{t("Department")}

{jobPosting.department?.name || '-'}

{t("Type")}

{jobPosting.job_type?.name || 'Full-time'}

{t("Positions")}

{jobPosting.positions || 1}

{t("Salary Range")}

{jobPosting.min_salary && jobPosting.max_salary ? `${companySettings.currencySymbol} ${jobPosting.min_salary} - ${companySettings.currencySymbol} ${jobPosting.max_salary}` : t('Competitive') }

{jobPosting.application_type === 'existing' ? ( ) : ( )}
{/* Job Description */} {t("Job Description")}
{/* Requirements */} {jobPosting.requirements && ( {t("Requirements")}
)} {/* Benefits */} {jobPosting.benefits && ( {t("Benefits & Perks")}
)} {/* Skills */} {jobPosting.skills && jobPosting.skills.length > 0 && ( {t("Required Skills")}
{jobPosting.skills.map((skill, index) => ( {skill} ))}
)}
{/* Sidebar */}
{/* Quick Apply */} {t("Quick Apply")} {jobPosting.application_type === 'existing' ? ( ) : ( )}

{t("Application takes less than 5 minutes")}

{/* Job Info */} {t("Job Information")}

{t("Posted Date")}

{new Date(jobPosting.created_at).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}

{t("Application Deadline")}

{new Date(jobPosting.application_deadline).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}

{(jobPosting.min_experience || jobPosting.max_experience) && (

{t("Experience Required")}

{jobPosting.min_experience && jobPosting.max_experience ? `${jobPosting.min_experience} - ${jobPosting.max_experience} ${t('years')}` : jobPosting.min_experience ? `${jobPosting.min_experience}+ ${t('years')}` : `${jobPosting.max_experience} ${t('years')}` }

)} {jobPosting.experience_level && (

{t("Experience Level")}

{jobPosting.experience_level}

)} {/* Similar Jobs */} {relatedJobs && relatedJobs.length > 0 && ( {t("Similar Jobs")} {relatedJobs.map((relatedJob, index) => (

{relatedJob.title}

{relatedJob.branch?.name || 'General'}

{relatedJob.location?.name || 'Remote'}
{relatedJob.positions || 1} {t("Positions")}
))} )}
); }