Remove Projects tab from company detail, fix pricing layout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Krao Hasanee
2026-03-27 01:04:30 -04:00
parent 7000b5a840
commit 59c4ef6632
+7 -57
View File
@@ -16,7 +16,7 @@ export default function CompanyDetail() {
const [unassigned, setUnassigned] = useState([]); const [unassigned, setUnassigned] = useState([]);
const [prices, setPrices] = useState([]); const [prices, setPrices] = useState([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [tab, setTab] = useState('projects'); const [tab, setTab] = useState('users');
const [savingPrice, setSavingPrice] = useState(null); const [savingPrice, setSavingPrice] = useState(null);
const [assigning, setAssigning] = useState(false); const [assigning, setAssigning] = useState(false);
@@ -144,7 +144,7 @@ export default function CompanyDetail() {
{/* Tabs */} {/* Tabs */}
<div style={{ display: 'flex', gap: 4, marginBottom: 24, borderBottom: '1px solid var(--border)', paddingBottom: 0 }}> <div style={{ display: 'flex', gap: 4, marginBottom: 24, borderBottom: '1px solid var(--border)', paddingBottom: 0 }}>
{['projects', 'users', 'pricing'].map(t => ( {['users', 'pricing'].map(t => (
<button <button
key={t} key={t}
onClick={() => setTab(t)} onClick={() => setTab(t)}
@@ -166,57 +166,6 @@ export default function CompanyDetail() {
))} ))}
</div> </div>
{/* Projects Tab */}
{tab === 'projects' && projects.length === 0 && (
<div className="empty-state">
<h3>No projects yet</h3>
<p>Projects will appear here when requests come in.</p>
</div>
)}
{tab === 'projects' && projects.length > 0 && (
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
{projects.map(project => {
const projectTasks = tasks.filter(t => t.project_id === project.id);
const active = projectTasks.filter(t => t.status !== 'client_approved');
return (
<div key={project.id} className="request-card">
<div className="request-card-header">
<div>
<div className="request-card-title">
<Link to={`/projects/${project.id}`} className="table-link">{project.name}</Link>
</div>
{project.description && <div className="request-card-meta">{project.description}</div>}
<div className="request-card-meta" style={{ marginTop: 4 }}>
Started {new Date(project.created_at).toLocaleDateString()} · {projectTasks.length} job{projectTasks.length !== 1 ? 's' : ''} · {active.length} active
</div>
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
<StatusBadge status={project.status} />
<Link to={`/projects/${project.id}`} className="btn btn-outline btn-sm">View</Link>
</div>
</div>
{projectTasks.length > 0 && (
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 8 }}>
{projectTasks.map(task => (
<Link key={task.id} to={`/tasks/${task.id}`} style={{
display: 'inline-flex', alignItems: 'center', gap: 6,
padding: '5px 12px', borderRadius: 6,
background: 'var(--bg)', border: '1px solid var(--border)',
fontSize: 12, fontWeight: 500, color: 'var(--text-primary)',
textDecoration: 'none',
}}>
{task.title}
<StatusBadge status={task.status} />
</Link>
))}
</div>
)}
</div>
);
})}
</div>
)}
{/* Users Tab */} {/* Users Tab */}
{tab === 'users' && ( {tab === 'users' && (
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}> <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
@@ -295,9 +244,9 @@ export default function CompanyDetail() {
</p> </p>
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}> <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
{serviceTypes.map(serviceType => ( {serviceTypes.map(serviceType => (
<div key={serviceType} style={{ display: 'grid', gridTemplateColumns: '1fr 160px 80px', gap: 10, alignItems: 'center' }}> <div key={serviceType} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<div style={{ fontSize: 14, fontWeight: 500 }}>{serviceType}</div> <div style={{ fontSize: 14, fontWeight: 500, flex: 1 }}>{serviceType}</div>
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}> <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
<span style={{ color: 'var(--text-muted)', fontSize: 14 }}>$</span> <span style={{ color: 'var(--text-muted)', fontSize: 14 }}>$</span>
<input <input
type="number" type="number"
@@ -306,13 +255,14 @@ export default function CompanyDetail() {
placeholder="0.00" placeholder="0.00"
value={getPrice(serviceType)} value={getPrice(serviceType)}
onChange={e => handlePriceChange(serviceType, e.target.value)} onChange={e => handlePriceChange(serviceType, e.target.value)}
style={{ margin: 0 }} style={{ margin: 0, width: 90 }}
/> />
</div> </div>
<button <button
className="btn btn-outline btn-sm" className="btn btn-outline btn-sm"
onClick={() => handlePriceSave(serviceType)} onClick={() => handlePriceSave(serviceType)}
disabled={savingPrice === serviceType} disabled={savingPrice === serviceType}
style={{ flexShrink: 0 }}
> >
{savingPrice === serviceType ? '...' : 'Save'} {savingPrice === serviceType ? '...' : 'Save'}
</button> </button>