Loading jobs...

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

Job Opportunities

\n Discover amazing projects and connect with talented professionals\n

\n \n {currentUser?.isClient && (\n setShowPostJob(true)}\n className=\"bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition-colors font-medium flex items-center space-x-2\"\n >\n 📝\n Post a Job\n \n )}\n

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

\n 🚀\n

No jobs posted yet

Be the first to post a job opportunity!

\n ) : (\n

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

\n )}\n\n {showPostJob && (\n setShowPostJob(false)}\n onJobPosted={handleJobPosted}\n currentUser={currentUser!}\n />\n )}\n\n {selectedJob && (\n setSelectedJob(null)}\n onLoginRequired={onLoginRequired}\n />\n )}\n

\n );\n}\n\nfunction JobCard({ job, currentUser, onLoginRequired, onClick }: {\n job: Job;\n currentUser: User | null;\n onLoginRequired: () => void;\n onClick: () => void;\n}) {\n const urgencyColors = {\n high: 'border-red-500 bg-red-50',\n medium: 'border-yellow-500 bg-yellow-50',\n low: 'border-green-500 bg-green-50'\n };\n\n const formatBudget = (budget: number, type: string) => {\n return type === 'hourly' ? `$${budget}/hr` : `$${budget.toLocaleString()}`;\n };\n\n return (\n

{job.title}

\n \n {job.urgency} priority\n \n

\n\n

{job.description}

\n\n

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

\n\n

\n 💰 {formatBudget(job.budget, job.budgetType)}\n 📍 {job.isRemote ? 'Remote' : job.location || 'On-site'}\n

\n\n

{job.clientName}

\n Posted {new Date(job.createdAt).toLocaleDateString()}\n

\n \n {currentUser?.isFreelancer && (\n {\n e.stopPropagation();\n if (!currentUser) {\n onLoginRequired();\n } else {\n // Handle apply logic\n }\n }}\n className=\"bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition-colors text-sm font-medium\"\n >\n Apply Now\n \n )}\n

\n );\n}\n\nfunction PostJobModal({ onClose, onJobPosted, currentUser }: {\n onClose: () => void;\n onJobPosted: () => void;\n currentUser: User;\n}) {\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState('');\n \n const [formData, setFormData] = useState({\n title: '',\n description: '',\n budget: '',\n budgetType: 'fixed' as 'fixed' | 'hourly',\n skills: '',\n location: '',\n isRemote: true,\n urgency: 'medium' as 'low' | 'medium' | 'high',\n deadline: ''\n });\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setLoading(true);\n setError('');\n\n try {\n const skillsArray = formData.skills.split(',').map(s => s.trim()).filter(s => s);\n \n const jobData: CreateJobRequest = {\n title: formData.title,\n description: formData.description,\n budget: parseFloat(formData.budget),\n budgetType: formData.budgetType,\n skills: skillsArray,\n location: formData.location || undefined,\n isRemote: formData.isRemote,\n urgency: formData.urgency,\n deadline: formData.deadline || undefined\n };\n\n const response = await fetch('/api/jobs', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(jobData)\n });\n\n const data = await response.json();\n \n if (response.ok) {\n onJobPosted();\n } else {\n setError(data.error || 'Failed to post job');\n }\n } catch (err) {\n setError('Network error. Please try again.');\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

Post a New Job

\n \n

\n\n {error && (\n

\n {error}\n

\n )}\n\n

\n Job Title\n setFormData({...formData, title: e.target.value})}\n required\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500\"\n placeholder=\"e.g., React Developer for E-commerce Platform\"\n />\n

\n\n

\n Description\n setFormData({...formData, description: e.target.value})}\n required\n rows={4}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500\"\n placeholder=\"Describe the project, requirements, and what you're looking for...\"\n />\n

\n\n

\n Budget\n setFormData({...formData, budget: e.target.value})}\n required\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500\"\n placeholder=\"5000\"\n />\n

\n Budget Type\n setFormData({...formData, budgetType: e.target.value as 'fixed' | 'hourly'})}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500\"\n >\n \n \n \n

\n\n

\n Required Skills\n setFormData({...formData, skills: e.target.value})}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500\"\n placeholder=\"React, JavaScript, CSS, API Integration\"\n />\n

\n\n

\n Location\n setFormData({...formData, location: e.target.value})}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500\"\n placeholder=\"New York, NY\"\n />\n

\n Work Type\n setFormData({...formData, isRemote: e.target.value === 'remote'})}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500\"\n >\n \n \n \n

\n\n

\n Urgency\n setFormData({...formData, urgency: e.target.value as 'low' | 'medium' | 'high'})}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500\"\n >\n \n \n \n \n

\n Deadline (Optional)\n setFormData({...formData, deadline: e.target.value})}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500\"\n />\n

\n\n \n {loading ? 'Posting Job...' : 'Post Job'}\n \n \n

\n );\n}\n\nfunction JobDetailModal({ job, currentUser, onClose, onLoginRequired }: {\n job: Job;\n currentUser: User | null;\n onClose: () => void;\n onLoginRequired: () => void;\n}) {\n const [showApplyForm, setShowApplyForm] = useState(false);\n\n const formatBudget = (budget: number, type: string) => {\n return type === 'hourly' ? `$${budget}/hr` : `$${budget.toLocaleString()}`;\n };\n\n return (\n

{job.title}

Posted by {job.clientName}

\n \n

\n\n

Project Description

{job.description}

\n\n

Budget

\n {formatBudget(job.budget, job.budgetType)}\n

Location

\n {job.isRemote ? '🌍 Remote' : `📍 ${job.location || 'On-site'}`}\n

\n\n

Required Skills

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

\n\n {job.deadline && (\n

Deadline

\n 📅 {new Date(job.deadline).toLocaleDateString()}\n

\n )}\n\n

\n Posted {new Date(job.createdAt).toLocaleDateString()}\n

\n \n {currentUser?.isFreelancer && (\n {\n if (!currentUser) {\n onLoginRequired();\n } else {\n setShowApplyForm(true);\n }\n }}\n className=\"bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition-colors font-medium\"\n >\n Apply for this Job\n \n )}\n

\n\n {showApplyForm && currentUser && (\n setShowApplyForm(false)}\n onSubmitted={() => {\n setShowApplyForm(false);\n onClose();\n }}\n />\n )}\n

\n );\n}\n\nfunction JobApplicationModal({ job, currentUser, onClose, onSubmitted }: {\n job: Job;\n currentUser: User;\n onClose: () => void;\n onSubmitted: () => void;\n}) {\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState('');\n const [formData, setFormData] = useState({\n coverLetter: '',\n proposedRate: currentUser.hourlyRate?.toString() || '',\n estimatedDuration: ''\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: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n coverLetter: formData.coverLetter,\n proposedRate: parseFloat(formData.proposedRate),\n estimatedDuration: formData.estimatedDuration\n })\n });\n\n const data = await response.json();\n \n if (response.ok) {\n onSubmitted();\n } else {\n setError(data.error || 'Failed to submit application');\n }\n } catch (err) {\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 {error && (\n

\n {error}\n

\n )}\n\n

\n Cover Letter\n setFormData({...formData, coverLetter: e.target.value})}\n required\n rows={4}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500\"\n placeholder=\"Explain why you're the perfect fit for this project...\"\n />\n

\n\n

\n \n Proposed Rate ($)\n \n setFormData({...formData, proposedRate: e.target.value})}\n required\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500\"\n placeholder=\"75\"\n />\n

\n \n Estimated Duration\n \n setFormData({...formData, estimatedDuration: e.target.value})}\n required\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500\"\n placeholder=\"2-3 weeks\"\n />\n

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

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/sansiero/Freelancing/code/frontend/components/JobBoard.tsx","extension","actionData","errors"]