import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import LandingLayout from '@/layouts/landing-layout'; import { SharedData } from '@/types/global'; import { Head, usePage } from '@inertiajs/react'; import { Building2, Clock, Eye, Mail, MapPin, Zap } from 'lucide-react'; import { useState } from 'react'; import { Renderer } from 'richtor'; import 'richtor/styles'; interface JobCircularShowPageProps extends SharedData { jobCircular: JobCircular; } const JobCircularShow = () => { const { jobCircular, translate } = usePage().props; const { frontend, button, common } = translate; const [showFullDescription, setShowFullDescription] = useState(false); // Calculate days until deadline const getDaysUntilDeadline = () => { const deadline = new Date(jobCircular.application_deadline); const today = new Date(); const diffTime = deadline.getTime() - today.getTime(); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); if (diffDays < 0) return common.expired; if (diffDays === 0) return common.today; if (diffDays === 1) return frontend.day_left; return `${diffDays} ${frontend.days_left}`; }; // Format salary display const getFormattedSalary = () => { const min = jobCircular.salary_min?.toLocaleString(); const max = jobCircular.salary_max?.toLocaleString(); const currency = jobCircular.salary_currency; if (jobCircular.salary_negotiable) { return `${currency} ${min} - ${max} (${frontend.negotiable})`; } return `${currency} ${min} - ${max}`; }; // Get status badge color const getStatusBadge = (status: string) => { const statusConfig: Record = { active: { label: common.active, variant: 'default' }, draft: { label: common.draft, variant: 'secondary' }, closed: { label: frontend.closed, variant: 'destructive' }, expired: { label: common.expired, variant: 'outline' }, }; const config = statusConfig[status] || { label: status, variant: 'outline' }; return {config.label}; }; return (

{/* Header */}

{jobCircular.title}

{getStatusBadge(jobCircular.status)}

{frontend.company_fallback}

{jobCircular.location}

{getDaysUntilDeadline()}

{/* Main Content */}

{/* Job Overview Card */}

{jobCircular.title}

{getFormattedSalary()}

{jobCircular.positions_available} {jobCircular.positions_available !== 1 ? frontend.positions : frontend.position}{' '} {frontend.available}

🎯

{jobCircular.experience_level}

{frontend.experience_level}

💼

{jobCircular.job_type}

{frontend.job_type}

🏢

{jobCircular.work_type}

{frontend.work_type}

📅

{getDaysUntilDeadline()}

{frontend.application_deadline}

{/* Job Description */} {frontend.job_description}

{!showFullDescription && (

)} {showFullDescription && (

)} {/* Required Skills */} {frontend.skills_required}

{jobCircular.skills_required.map((skill, index) => ( {skill} ))}

{/* Sidebar */}

{/* Quick Apply Card */} {frontend.quick_apply} {frontend.send_application}

{frontend.application_deadline}:

{new Date(jobCircular.application_deadline).toLocaleDateString()}

{/* Job Stats */} {frontend.job_statistics}

{jobCircular.positions_available}

{frontend.positions_available}

{getDaysUntilDeadline().includes('Expired') ? '0' : 'Active'}

{common.status}

{frontend.posted} {new Date(jobCircular.created_at).toLocaleDateString()}

{frontend.last_updated} {new Date(jobCircular.updated_at).toLocaleDateString()}

); }; export default JobCircularShow;