From 184cb8ec00321d9d097c2682b5a01ee52d8cde54 Mon Sep 17 00:00:00 2001
From: Mondo Diaz <armando.m.diaz@boeing.com>
Date: Wed, 28 Jan 2026 16:05:02 +0000
Subject: [PATCH] Fix table borders, single team nav link, remove dashboard
 stats

- Use explicit border color (#e2e8f0) for table cell borders
- Navbar shows 'Team' (singular) linking directly to team dashboard when user has only 1 team
- Navbar shows 'Teams' (plural) linking to teams list when user has multiple teams
- Remove project/member counts from team dashboard header
---
 frontend/src/components/Layout.tsx       | 25 +++++++++++++++---
 frontend/src/pages/TeamDashboardPage.css | 32 +++++-------------------
 frontend/src/pages/TeamDashboardPage.tsx |  4 ---
 frontend/src/pages/TeamsPage.css         | 18 +++++--------
 4 files changed, 34 insertions(+), 45 deletions(-)

diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index f1cb2dd..dea6650 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -2,6 +2,8 @@ import { ReactNode, useState, useRef, useEffect } from 'react';
 import { Link, NavLink, useLocation, useNavigate } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
 import { GlobalSearch } from './GlobalSearch';
+import { listTeams } from '../api';
+import { TeamDetail } from '../types';
 import './Layout.css';
 
 interface LayoutProps {
@@ -13,8 +15,22 @@ function Layout({ children }: LayoutProps) {
   const navigate = useNavigate();
   const { user, loading, logout } = useAuth();
   const [showUserMenu, setShowUserMenu] = useState(false);
+  const [userTeams, setUserTeams] = useState<TeamDetail[]>([]);
   const menuRef = useRef<HTMLDivElement>(null);
 
+  // Fetch user's teams
+  useEffect(() => {
+    if (user) {
+      listTeams({ limit: 10 }).then(data => {
+        setUserTeams(data.items);
+      }).catch(() => {
+        setUserTeams([]);
+      });
+    } else {
+      setUserTeams([]);
+    }
+  }, [user]);
+
   // Close menu when clicking outside
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
@@ -77,15 +93,18 @@ function Layout({ children }: LayoutProps) {
               </svg>
               Dashboard
             </Link>
-            {user && (
-              <Link to="/teams" className={location.pathname.startsWith('/teams') ? 'active' : ''}>
+            {user && userTeams.length > 0 && (
+              <Link
+                to={userTeams.length === 1 ? `/teams/${userTeams[0].slug}` : '/teams'}
+                className={location.pathname.startsWith('/teams') ? 'active' : ''}
+              >
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                   <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                   <circle cx="9" cy="7" r="4"/>
                   <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                   <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                 </svg>
-                Teams
+                {userTeams.length === 1 ? 'Team' : 'Teams'}
               </Link>
             )}
             <a href="/docs" className="nav-link-muted">
diff --git a/frontend/src/pages/TeamDashboardPage.css b/frontend/src/pages/TeamDashboardPage.css
index 179538e..c1e90c5 100644
--- a/frontend/src/pages/TeamDashboardPage.css
+++ b/frontend/src/pages/TeamDashboardPage.css
@@ -39,20 +39,6 @@
   max-width: 600px;
 }
 
-.team-stats-inline {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  color: var(--color-text-muted);
-  font-size: 0.875rem;
-}
-
-.team-stats-inline .stat-value {
-  font-weight: 600;
-  color: var(--color-text);
-  font-size: 0.875rem;
-}
-
 .team-header-actions {
   display: flex;
   gap: 0.5rem;
@@ -88,6 +74,11 @@
   border-collapse: collapse;
 }
 
+.projects-table th,
+.projects-table td {
+  border: 1px solid #e2e8f0;
+}
+
 .projects-table th {
   text-align: left;
   padding: 0.75rem 1rem;
@@ -97,26 +88,15 @@
   letter-spacing: 0.05em;
   color: var(--color-text-muted);
   background: var(--color-bg-secondary);
-  border-bottom: 2px solid var(--color-border);
-  border-right: 1px solid var(--color-border);
-}
-
-.projects-table th:last-child {
-  border-right: none;
+  border-bottom-width: 2px;
 }
 
 .projects-table td {
   padding: 0.75rem 1rem;
   font-size: 0.875rem;
-  border-bottom: 1px solid var(--color-border);
-  border-right: 1px solid var(--color-border);
   vertical-align: middle;
 }
 
-.projects-table td:last-child {
-  border-right: none;
-}
-
 .project-row {
   cursor: pointer;
   transition: background 0.1s ease;
diff --git a/frontend/src/pages/TeamDashboardPage.tsx b/frontend/src/pages/TeamDashboardPage.tsx
index 1b8d4b2..56e7bb3 100644
--- a/frontend/src/pages/TeamDashboardPage.tsx
+++ b/frontend/src/pages/TeamDashboardPage.tsx
@@ -108,10 +108,6 @@ function TeamDashboardPage() {
           {team.description && (
             <p className="team-description">{team.description}</p>
           )}
-          <div className="team-stats-inline">
-            <span><span className="stat-value">{team.project_count}</span> projects</span>
-            <span><span className="stat-value">{team.member_count}</span> members</span>
-          </div>
         </div>
         {isAdminOrOwner && (
           <div className="team-header-actions">
diff --git a/frontend/src/pages/TeamsPage.css b/frontend/src/pages/TeamsPage.css
index d79f901..fb6d8a7 100644
--- a/frontend/src/pages/TeamsPage.css
+++ b/frontend/src/pages/TeamsPage.css
@@ -184,6 +184,11 @@
   border-collapse: collapse;
 }
 
+.teams-table th,
+.teams-table td {
+  border: 1px solid #e2e8f0;
+}
+
 .teams-table th {
   text-align: left;
   padding: 0.75rem 1rem;
@@ -193,26 +198,15 @@
   letter-spacing: 0.05em;
   color: var(--color-text-muted);
   background: var(--color-bg-secondary);
-  border-bottom: 2px solid var(--color-border);
-  border-right: 1px solid var(--color-border);
-}
-
-.teams-table th:last-child {
-  border-right: none;
+  border-bottom-width: 2px;
 }
 
 .teams-table td {
   padding: 0.75rem 1rem;
   font-size: 0.875rem;
-  border-bottom: 1px solid var(--color-border);
-  border-right: 1px solid var(--color-border);
   vertical-align: middle;
 }
 
-.teams-table td:last-child {
-  border-right: none;
-}
-
 .team-row {
   cursor: pointer;
   transition: background 0.1s ease;