From 2a9c7438238d08ea571fd8fc7946ced8b0779d50 Mon Sep 17 00:00:00 2001
From: Krao Hasanee <kraohasanee@fourgebranding.com>
Date: Wed, 13 May 2026 12:02:22 -0400
Subject: [PATCH] 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>
---
 src/pages/client/MyProjects.jsx | 55 ++++++++++++++++++++++++++-------
 1 file changed, 43 insertions(+), 12 deletions(-)

diff --git a/src/pages/client/MyProjects.jsx b/src/pages/client/MyProjects.jsx
index ee1b29e..0c2ef7d 100755
--- a/src/pages/client/MyProjects.jsx
+++ b/src/pages/client/MyProjects.jsx
@@ -193,18 +193,49 @@ export default function MyProjects() {
           <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>
         </div>
-      ) : (
-        projects.map(project => (
-          <ProjectGroup
-            key={project.id}
-            project={project}
-            tasks={tasks.filter(t => t.project_id === project.id)}
-            submissions={submissions}
-            currentUserId={currentUser.id}
-            filter={filter}
-          />
-        ))
-      )}
+      ) : (() => {
+        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
+                    key={project.id}
+                    project={project}
+                    tasks={tasks.filter(t => t.project_id === project.id)}
+                    submissions={submissions}
+                    currentUserId={currentUser.id}
+                    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>
   );
 }