blob: 253b44f121364aca11a9e087a42820149bd161c7 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
import React, { useEffect, useState, useCallback } from 'react'
import { Link } from 'react-router-dom'
import { ContractCreateModal } from './ContractCreateModal'
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
// Red team fields
red_team_enabled?: boolean
}
export function ContractList() {
const [contracts, setContracts] = useState<ContractSummary[]>([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
const [showCreateModal, setShowCreateModal] = useState(false)
const fetchContracts = useCallback(async () => {
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)
}
}, [])
useEffect(() => {
fetchContracts()
}, [fetchContracts])
if (loading) {
return (
<div className="contract-list-container">
<div className="loading">Loading contracts...</div>
</div>
)
}
if (error) {
return (
<div className="contract-list-container">
<div className="error">Error: {error}</div>
</div>
)
}
return (
<div className="contract-list-container">
<div className="contract-list-header">
<h1>Contracts</h1>
<button
className="create-contract-btn"
onClick={() => setShowCreateModal(true)}
>
+ New Contract
</button>
</div>
{contracts.length === 0 ? (
<p>No contracts found</p>
) : (
<ul className="contract-list">
{contracts.map((contract) => (
<li key={contract.id} className="contract-item">
<Link to={`/contracts/${contract.id}`}>
<h2>
{contract.name}
{contract.red_team_enabled && (
<span className="red-team-badge" title="Red Team monitoring enabled">
🔍
</span>
)}
</h2>
{contract.description && <p>{contract.description}</p>}
<div className="contract-meta">
<span>Phase: {contract.phase}</span>
<span>Status: {contract.status}</span>
<span>Files: {contract.file_count}</span>
<span>Tasks: {contract.task_count}</span>
</div>
</Link>
</li>
))}
</ul>
)}
<ContractCreateModal
isOpen={showCreateModal}
onClose={() => setShowCreateModal(false)}
onCreated={fetchContracts}
/>
</div>
)
}
|
