110 lines
4.1 KiB
TypeScript
110 lines
4.1 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import api from '@/services/api'
|
|
import type { Proposal, Project } from '@/types'
|
|
import dayjs from 'dayjs'
|
|
|
|
export default function ProposalsPage() {
|
|
const [proposals, setProposals] = useState<Proposal[]>([])
|
|
const [projects, setProjects] = useState<Project[]>([])
|
|
const [projectFilter, setProjectFilter] = useState('')
|
|
const [showCreate, setShowCreate] = useState(false)
|
|
const [newTitle, setNewTitle] = useState('')
|
|
const [newDesc, setNewDesc] = useState('')
|
|
const [creating, setCreating] = useState(false)
|
|
const navigate = useNavigate()
|
|
|
|
const fetchProposals = () => {
|
|
if (!projectFilter) {
|
|
setProposals([])
|
|
return
|
|
}
|
|
api.get<Proposal[]>(`/projects/${projectFilter}/proposals`).then(({ data }) => setProposals(data))
|
|
}
|
|
|
|
useEffect(() => {
|
|
api.get<Project[]>('/projects').then(({ data }) => setProjects(data))
|
|
}, [])
|
|
|
|
useEffect(() => { fetchProposals() }, [projectFilter])
|
|
|
|
const handleCreate = async () => {
|
|
if (!newTitle.trim() || !projectFilter) return
|
|
setCreating(true)
|
|
try {
|
|
await api.post(`/projects/${projectFilter}/proposals`, {
|
|
title: newTitle.trim(),
|
|
description: newDesc.trim() || null,
|
|
})
|
|
setNewTitle('')
|
|
setNewDesc('')
|
|
setShowCreate(false)
|
|
fetchProposals()
|
|
} finally {
|
|
setCreating(false)
|
|
}
|
|
}
|
|
|
|
const statusBadgeClass = (s: string) => {
|
|
if (s === 'open') return 'status-open'
|
|
if (s === 'accepted') return 'status-completed'
|
|
if (s === 'rejected') return 'status-closed'
|
|
return ''
|
|
}
|
|
|
|
return (
|
|
<div className="milestones-page">
|
|
<div className="page-header">
|
|
<h2>💡 Proposals ({proposals.length})</h2>
|
|
<button className="btn-primary" disabled={!projectFilter} onClick={() => setShowCreate(true)}>
|
|
+ New Proposal
|
|
</button>
|
|
</div>
|
|
|
|
<div className="filters">
|
|
<select value={projectFilter} onChange={(e) => setProjectFilter(e.target.value)}>
|
|
<option value="">Select a project</option>
|
|
{projects.map((p) => <option key={p.id} value={p.project_code || ''}>{p.name}</option>)}
|
|
</select>
|
|
</div>
|
|
|
|
{!projectFilter && <p className="empty">Please select a project to view proposals.</p>}
|
|
|
|
<div className="milestone-grid">
|
|
{proposals.map((pr) => (
|
|
<div key={pr.id} className="milestone-card" onClick={() => pr.proposal_code && pr.project_code && navigate(`/proposals/${pr.proposal_code}?project_code=${pr.project_code}`)}>
|
|
<div className="milestone-card-header">
|
|
<span className={`badge ${statusBadgeClass(pr.status)}`}>{pr.status}</span>
|
|
{pr.proposal_code && <span className="badge">{pr.proposal_code}</span>}
|
|
<h3>{pr.title}</h3>
|
|
</div>
|
|
<p className="project-desc">{pr.description || 'No description'}</p>
|
|
<div className="project-meta">
|
|
<span>Created {dayjs(pr.created_at).format('YYYY-MM-DD')}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{projectFilter && proposals.length === 0 && <p className="empty">No proposals</p>}
|
|
</div>
|
|
|
|
{showCreate && (
|
|
<div className="modal-overlay" onClick={() => setShowCreate(false)}>
|
|
<div className="modal" onClick={(e) => e.stopPropagation()}>
|
|
<h3>New Proposal</h3>
|
|
<label>Title</label>
|
|
<input value={newTitle} onChange={(e) => setNewTitle(e.target.value)} placeholder="Proposal title" />
|
|
<label>Description</label>
|
|
<textarea value={newDesc} onChange={(e) => setNewDesc(e.target.value)} placeholder="Description (optional)" rows={4} />
|
|
<div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
|
|
<button className="btn-primary" onClick={handleCreate} disabled={creating || !newTitle.trim()}>
|
|
{creating ? 'Creating...' : 'Create'}
|
|
</button>
|
|
<button className="btn-back" onClick={() => setShowCreate(false)}>Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|