67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
/**
|
|
* Project Detail App - Detailed view of a single project
|
|
*/
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
|
|
interface DockItem {
|
|
id: number;
|
|
title: string;
|
|
enabled: boolean;
|
|
}
|
|
|
|
export function ProjectDetail({ projectId }: { projectId?: number }) {
|
|
const [project, setProject] = useState<any>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
// Simulated data fetch - in production, call basecamp_project_get
|
|
setLoading(false);
|
|
setProject({
|
|
id: projectId || 1,
|
|
name: 'Website Redesign',
|
|
description: 'Complete redesign of company website for Q1 2024',
|
|
status: 'active',
|
|
dock: [
|
|
{ id: 1, title: 'Message Board', enabled: true },
|
|
{ id: 2, title: 'To-dos', enabled: true },
|
|
{ id: 3, title: 'Schedule', enabled: true },
|
|
{ id: 4, title: 'Campfire', enabled: true },
|
|
{ id: 5, title: 'Docs & Files', enabled: true },
|
|
],
|
|
});
|
|
}, [projectId]);
|
|
|
|
if (loading) return <p>Loading project...</p>;
|
|
if (!project) return <p>Project not found</p>;
|
|
|
|
return (
|
|
<div style={{ padding: '20px', fontFamily: 'system-ui, sans-serif' }}>
|
|
<h1 style={{ fontSize: '28px', marginBottom: '10px' }}>{project.name}</h1>
|
|
<p style={{ color: '#666', marginBottom: '20px' }}>{project.description}</p>
|
|
|
|
<div style={{ marginBottom: '30px' }}>
|
|
<span style={{ display: 'inline-block', padding: '4px 12px', background: '#28a745', color: 'white', borderRadius: '12px', fontSize: '12px' }}>
|
|
{project.status}
|
|
</span>
|
|
</div>
|
|
|
|
<h2 style={{ fontSize: '20px', marginBottom: '15px' }}>Project Tools</h2>
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '12px' }}>
|
|
{project.dock.map((tool: DockItem) => (
|
|
<div key={tool.id} style={{
|
|
border: '1px solid #ddd',
|
|
borderRadius: '6px',
|
|
padding: '16px',
|
|
background: tool.enabled ? 'white' : '#f5f5f5',
|
|
cursor: tool.enabled ? 'pointer' : 'not-allowed',
|
|
opacity: tool.enabled ? 1 : 0.6
|
|
}}>
|
|
<h3 style={{ fontSize: '16px', margin: 0 }}>{tool.title}</h3>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|