1 files changed, 83 insertions, 0 deletions
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<ContractSummary[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(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 (
+      <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">
+      <h1>Contracts</h1>
+      {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}</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>
+      )}
+    </div>
+  )
+}