From a279ec29efb863fefd1ca82e5b490f2e8784cf3c Mon Sep 17 00:00:00 2001 From: soryu Date: Sun, 25 Jan 2026 00:01:25 +0000 Subject: Move files tab and file pages to be accessible via contracts (#27) * feat: remove Files from top-level navigation Co-Authored-By: Claude Opus 4.5 * feat: update file links to use contract-scoped routes Co-Authored-By: Claude Opus 4.5 * feat: add contract context to FileDetail component - Add contractId, contractName, and onContractClick props to FileDetailProps - Update breadcrumb navigation to show contract name with path separator when viewing file within a contract context - Fall back to "Back to list" when no contract context is provided - This enables the FileDetail component to be used within the /contracts/:contractId/files/:fileId route Co-Authored-By: Claude Opus 4.5 * feat: update routes to nest files under contracts - Add react-router-dom for client-side routing - Create ContractList component to list all contracts - Create ContractDetail component with tabs (overview, files, tasks, repos) - Create FileDetail component to view individual files - Configure routes: - /contracts - list all contracts - /contracts/:id - view contract details with Files tab - /contracts/:contractId/files/:fileId - view file in contract context - Remove standalone file routes (/files, /files/:id) Files are now only accessible through their parent contract. Co-Authored-By: Claude Opus 4.5 * Task completion checkpoint * Task completion checkpoint * Task completion checkpoint * Task completion checkpoint * Task completion checkpoint * Task completion checkpoint * Task completion checkpoint * Task completion checkpoint --------- Co-authored-by: Claude Opus 4.5 --- frontend/src/components/ContractDetail.tsx | 232 +++++++++++++++++++++++++++++ frontend/src/components/ContractList.tsx | 83 +++++++++++ frontend/src/components/FileDetail.tsx | 97 ++++++++++++ 3 files changed, 412 insertions(+) create mode 100644 frontend/src/components/ContractDetail.tsx create mode 100644 frontend/src/components/ContractList.tsx create mode 100644 frontend/src/components/FileDetail.tsx (limited to 'frontend/src/components') diff --git a/frontend/src/components/ContractDetail.tsx b/frontend/src/components/ContractDetail.tsx new file mode 100644 index 0000000..72527ce --- /dev/null +++ b/frontend/src/components/ContractDetail.tsx @@ -0,0 +1,232 @@ +import React, { useEffect, useState } from 'react' +import { useParams, Link } from 'react-router-dom' + +interface FileSummary { + id: string + name: string + description?: string + contract_phase?: string +} + +interface TaskSummary { + id: string + name: string + status: string +} + +interface ContractRepository { + id: string + name: string + source_type: string + is_primary: boolean +} + +interface Contract { + id: string + name: string + description?: string + contract_type: string + phase: string + status: string + version: number + created_at: string +} + +interface ContractWithRelations { + contract: Contract + repositories: ContractRepository[] + files: FileSummary[] + tasks: TaskSummary[] +} + +type Tab = 'overview' | 'files' | 'tasks' | 'repositories' + +export function ContractDetail() { + const { id } = useParams<{ id: string }>() + const [data, setData] = useState(null) + const [loading, setLoading] = useState(true) + const [error, setError] = useState(null) + const [activeTab, setActiveTab] = useState('overview') + + useEffect(() => { + async function fetchContract() { + if (!id) return + + try { + setLoading(true) + const response = await fetch(`/api/v1/contracts/${id}`) + if (!response.ok) { + throw new Error(`Failed to fetch contract: ${response.statusText}`) + } + const contractData = await response.json() + setData(contractData) + } catch (err) { + setError(err instanceof Error ? err.message : 'Unknown error') + } finally { + setLoading(false) + } + } + + fetchContract() + }, [id]) + + if (loading) { + return ( +
+
Loading contract...
+
+ ) + } + + if (error) { + return ( +
+
Error: {error}
+ + Back to Contracts + +
+ ) + } + + if (!data) { + return ( +
+
Contract not found
+ + Back to Contracts + +
+ ) + } + + const { contract, repositories, files, tasks } = data + + return ( +
+
+ + Back to Contracts + +

{contract.name}

+ {contract.description && ( +

{contract.description}

+ )} +
+ Phase: {contract.phase} + Status: {contract.status} + Version: {contract.version} +
+
+ +
+ + + + +
+ +
+ {activeTab === 'overview' && ( +
+

Contract Overview

+
+
Type
+
{contract.contract_type}
+
Phase
+
{contract.phase}
+
Status
+
{contract.status}
+
Created
+
{new Date(contract.created_at).toLocaleString()}
+
+
+ )} + + {activeTab === 'files' && ( +
+

Files

+ {files.length === 0 ? ( +

No files in this contract

+ ) : ( +
    + {files.map((file) => ( +
  • + +

    {file.name}

    + {file.description &&

    {file.description}

    } + {file.contract_phase && ( + Phase: {file.contract_phase} + )} + +
    • + ))} +
+ )} +
+ )} + + {activeTab === 'tasks' && ( +
+

Tasks

+ {tasks.length === 0 ? ( +

No tasks in this contract

+ ) : ( +
    + {tasks.map((task) => ( +
  • +

    {task.name}

    + + {task.status} + +
    • + ))} +
+ )} +
+ )} + + {activeTab === 'repositories' && ( +
+

Repositories

+ {repositories.length === 0 ? ( +

No repositories linked to this contract

+ ) : ( +
    + {repositories.map((repo) => ( +
  • +

    + {repo.name} + {repo.is_primary && Primary} +

    + {repo.source_type} +
    • + ))} +
+ )} +
+ )} +
+
+ ) +} diff --git a/frontend/src/components/ContractList.tsx b/frontend/src/components/ContractList.tsx new file mode 100644 index 0000000..77012db --- /dev/null +++ b/frontend/src/components/ContractList.tsx @@ -0,0 +1,83 @@ +import React, { useEffect, useState } from 'react' +import { Link } from 'react-router-dom' + +interface ContractSummary { + id: string + name: string + description?: string + contract_type: string + phase: string + status: string + file_count: number + task_count: number + repository_count: number + created_at: string +} + +export function ContractList() { + const [contracts, setContracts] = useState([]) + const [loading, setLoading] = useState(true) + const [error, setError] = useState(null) + + useEffect(() => { + async function fetchContracts() { + try { + setLoading(true) + const response = await fetch('/api/v1/contracts') + if (!response.ok) { + throw new Error(`Failed to fetch contracts: ${response.statusText}`) + } + const data = await response.json() + setContracts(data.contracts || []) + } catch (err) { + setError(err instanceof Error ? err.message : 'Unknown error') + } finally { + setLoading(false) + } + } + + fetchContracts() + }, []) + + if (loading) { + return ( +
+
Loading contracts...
+
+ ) + } + + if (error) { + return ( +
+
Error: {error}
+
+ ) + } + + return ( +
+

Contracts

+ {contracts.length === 0 ? ( +

No contracts found

+ ) : ( +
    + {contracts.map((contract) => ( +
  • + +

    {contract.name}

    + {contract.description &&

    {contract.description}

    } +
    + Phase: {contract.phase} + Status: {contract.status} + Files: {contract.file_count} + Tasks: {contract.task_count} +
    + +
    • + ))} +
+ )} +
+ ) +} diff --git a/frontend/src/components/FileDetail.tsx b/frontend/src/components/FileDetail.tsx new file mode 100644 index 0000000..31228ef --- /dev/null +++ b/frontend/src/components/FileDetail.tsx @@ -0,0 +1,97 @@ +import React, { useEffect, useState } from 'react' +import { useParams, Link } from 'react-router-dom' + +interface File { + id: string + name: string + description?: string + body?: string + contract_id?: string + version: number + created_at: string +} + +export function FileDetail() { + const { contractId, fileId } = useParams<{ contractId: string; fileId: string }>() + const [file, setFile] = useState(null) + const [loading, setLoading] = useState(true) + const [error, setError] = useState(null) + + useEffect(() => { + async function fetchFile() { + if (!fileId) return + + try { + setLoading(true) + const response = await fetch(`/api/v1/files/${fileId}`) + if (!response.ok) { + throw new Error(`Failed to fetch file: ${response.statusText}`) + } + const data = await response.json() + setFile(data) + } catch (err) { + setError(err instanceof Error ? err.message : 'Unknown error') + } finally { + setLoading(false) + } + } + + fetchFile() + }, [fileId]) + + if (loading) { + return ( +
+
Loading file...
+
+ ) + } + + if (error) { + return ( +
+
Error: {error}
+ + Back to Contract + +
+ ) + } + + if (!file) { + return ( +
+
File not found
+ + Back to Contract + +
+ ) + } + + return ( +
+
+ + Back to Contract + +

{file.name}

+ {file.description && ( +

{file.description}

+ )} +
+ Version: {file.version} + Created: {new Date(file.created_at).toLocaleString()} +
+
+ +
+ {file.body ? ( + 
{file.body}
+ ) : ( +

No content

+ )} +
+
+ ) +} -- cgit v1.2.3