FE-PR-001: Rename Propose -> Proposal across frontend

- Rename ProposesPage -> ProposalsPage, ProposeDetailPage -> ProposalDetailPage - Update Propose type to Proposal (keep Propose as deprecated alias) - Add GeneratedTask type for accept results - Switch API calls from /proposes to /proposals (canonical) - Update sidebar label: Proposes -> Proposals - Update routes: /proposals (+ legacy /proposes compat) - Update all UI text: Propose -> Proposal - Remove feat_task_id display, add generated_tasks section - Clean up propose references in comments
2026-04-01 04:46:46 +00:00
parent 6c8c8b78b6
commit a08644dde3
7 changed files with 100 additions and 69 deletions
--- a/src/pages/ProposalsPage.tsx
+++ b/src/pages/ProposalsPage.tsx
@@ -0,0 +1,109 @@
+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.id}>{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={() => navigate(`/proposals/${pr.proposal_code || pr.id}?project_id=${pr.project_id}`)}>
+            <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>
+  )
+}