Group projects by company on client projects page

Shows company name headers when client belongs to multiple companies.
Single-company clients see no change.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Krao Hasanee
2026-05-13 12:02:22 -04:00
parent 3a1cde64e6
commit 2a9c743823
+35 -4
View File
@@ -193,8 +193,25 @@ export default function MyProjects() {
<p>Submit a request and a project will be created automatically.</p> <p>Submit a request and a project will be created automatically.</p>
<Link to="/new-project" className="btn btn-primary" style={{ marginTop: 16 }}>+ New Project</Link> <Link to="/new-project" className="btn btn-primary" style={{ marginTop: 16 }}>+ New Project</Link>
</div> </div>
) : ( ) : (() => {
projects.map(project => ( const companies = currentUser.companies || (currentUser.company ? [currentUser.company] : []);
const multiCompany = companies.length > 1;
const companyMap = Object.fromEntries(companies.map(c => [c.id, c.name]));
const grouped = companies
.map(c => ({ company: c, projects: projects.filter(p => p.company_id === c.id) }))
.filter(g => g.projects.length > 0);
const ungrouped = projects.filter(p => !companies.some(c => c.id === p.company_id));
return (
<>
{grouped.map(({ company, projects: groupProjects }) => (
<div key={company.id}>
{multiCompany && (
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 8, marginTop: 16, paddingLeft: 2 }}>
{company.name}
</div>
)}
{groupProjects.map(project => (
<ProjectGroup <ProjectGroup
key={project.id} key={project.id}
project={project} project={project}
@@ -203,8 +220,22 @@ export default function MyProjects() {
currentUserId={currentUser.id} currentUserId={currentUser.id}
filter={filter} filter={filter}
/> />
)) ))}
)} </div>
))}
{ungrouped.map(project => (
<ProjectGroup
key={project.id}
project={project}
tasks={tasks.filter(t => t.project_id === project.id)}
submissions={submissions}
currentUserId={currentUser.id}
filter={filter}
/>
))}
</>
);
})()}
</Layout> </Layout>
); );
} }