\n );\n }\n\n return (\n

Job Board

\n {user.user_type === 'freelancer' \n ? 'Find your next opportunity' \n : 'Post jobs and find talent'\n }\n

\n \n {user.user_type === 'client' && (\n setShowCreateForm(true)}\n className=\"mt-4 md:mt-0 bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors\"\n >\n + Post New Job\n \n )}\n

\n\n {/* Filters */}\n

\n {['all', 'open', 'in_progress', 'completed'].map((status) => (\n setFilter(status)}\n className={`px-4 py-2 rounded-lg font-medium transition-colors ${\n filter === status\n ? 'bg-blue-600 text-white'\n : 'bg-white text-gray-600 hover:bg-gray-100 border border-gray-300'\n }`}\n >\n {status === 'all' ? 'All Jobs' : status.replace('_', ' ').toUpperCase()}\n \n ))}\n

\n\n {/* Jobs List */}\n

\n {jobs.length === 0 ? (\n

📋

No jobs found

\n {user.user_type === 'client' \n ? 'Be the first to post a job!' \n : 'Check back later for new opportunities.'\n }\n

\n ) : (\n jobs.map((job) => (\n setSelectedJob(job)}\n onUpdate={fetchJobs}\n />\n ))\n )}\n

\n\n {/* Create Job Modal */}\n {showCreateForm && (\n setShowCreateForm(false)}\n onSuccess={() => {\n setShowCreateForm(false);\n fetchJobs();\n }}\n />\n )}\n\n {/* Job Details Modal */}\n {selectedJob && (\n setSelectedJob(null)}\n onUpdate={fetchJobs}\n />\n )}\n

\n );\n}\n\nfunction JobCard({ job, user, token, onClick, onUpdate }: {\n job: Job;\n user: User;\n token: string;\n onClick: () => void;\n onUpdate: () => void;\n}) {\n const skills = getSkills(job.skills_required);\n const isOwner = user.id === job.client_id;\n\n const getStatusColor = (status: string) => {\n switch (status) {\n case 'open': return 'bg-green-100 text-green-800';\n case 'in_progress': return 'bg-blue-100 text-blue-800';\n case 'completed': return 'bg-gray-100 text-gray-800';\n case 'cancelled': return 'bg-red-100 text-red-800';\n default: return 'bg-gray-100 text-gray-800';\n }\n };\n\n const formatBudget = (job: Job) => {\n if (job.budget_type === 'fixed') {\n if (job.budget_min && job.budget_max) {\n return `$${job.budget_min} - $${job.budget_max}`;\n } else if (job.budget_min) {\n return `$${job.budget_min}+`;\n }\n return 'Budget TBD';\n } else {\n if (job.budget_min && job.budget_max) {\n return `$${job.budget_min} - $${job.budget_max}/hr`;\n } else if (job.budget_min) {\n return `$${job.budget_min}+/hr`;\n }\n return 'Rate TBD';\n }\n };\n\n const getSkills = (skillsJson: string): string[] => {\n try {\n return JSON.parse(skillsJson);\n } catch {\n return [];\n }\n };\n\n return (\n

{job.title}

\n \n {job.status.replace('_', ' ').toUpperCase()}\n \n

{job.description}

\n 👤 {job.client_name}\n 💰 {formatBudget(job)}\n 📅 {new Date(job.created_at).toLocaleDateString()}\n

\n {isOwner && (\n

\n \n Your Job\n \n

\n )}\n

\n\n

\n {skills.slice(0, 5).map((skill, index) => (\n \n {skill}\n \n ))}\n {skills.length > 5 && (\n +{skills.length - 5} more\n )}\n

\n );\n}\n\nfunction CreateJobModal({ user, token, onClose, onSuccess }: {\n user: User;\n token: string;\n onClose: () => void;\n onSuccess: () => void;\n}) {\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState('');\n const [formData, setFormData] = useState({\n title: '',\n description: '',\n budget_type: 'fixed' as 'fixed' | 'hourly',\n budget_min: '',\n budget_max: '',\n skills_required: '',\n deadline: ''\n });\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setLoading(true);\n setError('');\n\n try {\n const skills = formData.skills_required.split(',').map(s => s.trim()).filter(s => s);\n \n const response = await fetch('/api/jobs', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': `Bearer ${token}`\n },\n body: JSON.stringify({\n ...formData,\n budget_min: formData.budget_min ? parseFloat(formData.budget_min) : undefined,\n budget_max: formData.budget_max ? parseFloat(formData.budget_max) : undefined,\n skills_required: skills,\n deadline: formData.deadline || undefined\n })\n });\n\n const data: ApiResponse = await response.json();\n\n if (data.success) {\n onSuccess();\n } else {\n setError(data.error || 'Failed to create job');\n }\n } catch (error) {\n setError('Network error. Please try again.');\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

Post New Job

\n \n \n \n

\n\n {error && (\n

\n {error}\n

\n )}\n\n

\n \n Job Title *\n \n setFormData(prev => ({ ...prev, title: e.target.value }))}\n required\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n placeholder=\"e.g., WordPress Developer Needed\"\n />\n

\n\n

\n \n Description *\n \n setFormData(prev => ({ ...prev, description: e.target.value }))}\n required\n rows={4}\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n placeholder=\"Describe the project, requirements, and expectations...\"\n />\n

\n\n

\n \n Budget Type *\n \n setFormData(prev => ({ ...prev, budget_type: e.target.value as 'fixed' | 'hourly' }))}\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n >\n \n \n \n

\n\n

\n \n Deadline\n \n setFormData(prev => ({ ...prev, deadline: e.target.value }))}\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n

\n\n

\n \n Min Budget ($)\n \n setFormData(prev => ({ ...prev, budget_min: e.target.value }))}\n min=\"0\"\n step=\"0.01\"\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n placeholder=\"0.00\"\n />\n

\n\n

\n \n Max Budget ($)\n \n setFormData(prev => ({ ...prev, budget_max: e.target.value }))}\n min=\"0\"\n step=\"0.01\"\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n placeholder=\"0.00\"\n />\n

\n\n

\n \n Required Skills *\n \n setFormData(prev => ({ ...prev, skills_required: e.target.value }))}\n required\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n placeholder=\"e.g., JavaScript, React, Node.js (comma separated)\"\n />\n

Separate skills with commas

\n\n

\n \n Cancel\n \n \n {loading ? 'Creating...' : 'Post Job'}\n \n

\n );\n}\n\nfunction JobDetailsModal({ job, user, token, onClose, onUpdate }: {\n job: Job;\n user: User;\n token: string;\n onClose: () => void;\n onUpdate: () => void;\n}) {\n const [showApplyForm, setShowApplyForm] = useState(false);\n const skills = getSkills(job.skills_required);\n const isOwner = user.id === job.client_id;\n const canApply = user.user_type === 'freelancer' && job.status === 'open' && !isOwner;\n\n const formatBudget = (job: Job) => {\n if (job.budget_type === 'fixed') {\n if (job.budget_min && job.budget_max) {\n return `$${job.budget_min} - $${job.budget_max}`;\n } else if (job.budget_min) {\n return `$${job.budget_min}+`;\n }\n return 'Budget TBD';\n } else {\n if (job.budget_min && job.budget_max) {\n return `$${job.budget_min} - $${job.budget_max}/hr`;\n } else if (job.budget_min) {\n return `$${job.budget_min}+/hr`;\n }\n return 'Rate TBD';\n }\n };\n\n const getSkills = (skillsJson: string): string[] => {\n try {\n return JSON.parse(skillsJson);\n } catch {\n return [];\n }\n };\n\n return (\n

{job.title}

\n 👤 {job.client_name}\n 📅 Posted {new Date(job.created_at).toLocaleDateString()}\n {job.deadline && (\n ⏰ Due {new Date(job.deadline).toLocaleDateString()}\n )}\n

\n \n \n \n

\n\n

Description

{job.description}

\n\n

Budget

{formatBudget(job)}

{job.budget_type} project

\n\n

Status

\n {job.status.replace('_', ' ')}\n

Current project status

\n\n

Required Skills

\n {skills.map((skill, index) => (\n \n {skill}\n \n ))}\n

\n\n {canApply && (\n

\n setShowApplyForm(true)}\n className=\"w-full bg-blue-600 text-white py-3 px-4 rounded-lg font-medium hover:bg-blue-700 transition-colors\"\n >\n Apply for this Job\n \n

\n )}\n

\n\n {showApplyForm && (\n setShowApplyForm(false)}\n onSuccess={() => {\n setShowApplyForm(false);\n onUpdate();\n }}\n />\n )}\n

\n );\n}\n\nfunction ApplicationModal({ job, user, token, onClose, onSuccess }: {\n job: Job;\n user: User;\n token: string;\n onClose: () => void;\n onSuccess: () => void;\n}) {\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState('');\n const [formData, setFormData] = useState({\n proposal: '',\n proposed_rate: ''\n });\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setLoading(true);\n setError('');\n\n try {\n const response = await fetch(`/api/jobs/${job.id}/apply`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': `Bearer ${token}`\n },\n body: JSON.stringify({\n proposal: formData.proposal,\n proposed_rate: formData.proposed_rate ? parseFloat(formData.proposed_rate) : undefined\n })\n });\n\n const data: ApiResponse = await response.json();\n\n if (data.success) {\n onSuccess();\n } else {\n setError(data.error || 'Failed to submit application');\n }\n } catch (error) {\n setError('Network error. Please try again.');\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

Apply for Job

\n \n \n \n

\n\n {error && (\n

\n {error}\n

\n )}\n\n

\n \n Proposal *\n \n setFormData(prev => ({ ...prev, proposal: e.target.value }))}\n required\n rows={6}\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n placeholder=\"Explain why you're the perfect fit for this job, your approach, and relevant experience...\"\n />\n

\n\n

\n \n Your Rate ({job.budget_type === 'hourly' ? 'per hour' : 'total'}) ($)\n \n setFormData(prev => ({ ...prev, proposed_rate: e.target.value }))}\n min=\"0\"\n step=\"0.01\"\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n placeholder=\"Your proposed rate\"\n />\n

\n\n

\n \n Cancel\n \n \n {loading ? 'Submitting...' : 'Submit Application'}\n \n

\n );\n}","deleted","label",[169,170,152],"frontend","components","permalink","https://www.val.town/x/Sandra_Ozumba/Freelance101/code/frontend/components/JobBoard.tsx","extension","actionData","errors"]