From b2f165a8f1ab1f21015ceae7876e601d3ebd428a Mon Sep 17 00:00:00 2001
From: Krao Hasanee <kraohasanee@fourgebranding.com>
Date: Thu, 14 May 2026 15:21:25 -0400
Subject: [PATCH] Add Projects page for team members with search, nav under
 Requests

---
 src/App.jsx                     |  2 +
 src/components/Layout.jsx       |  1 +
 src/pages/team/TeamProjects.jsx | 79 +++++++++++++++++++++++++++++++++
 3 files changed, 82 insertions(+)
 create mode 100644 src/pages/team/TeamProjects.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 28dc39a..c955669 100755
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -12,6 +12,7 @@ const Dashboard = lazy(() => import('./pages/team/Dashboard'));
 const Companies = lazy(() => import('./pages/team/Companies'));
 const CompanyDetail = lazy(() => import('./pages/team/CompanyDetail'));
 const ProjectDetail = lazy(() => import('./pages/team/ProjectDetail'));
+const TeamProjects = lazy(() => import('./pages/team/TeamProjects'));
 const Requests = lazy(() => import('./pages/team/Requests'));
 const Invoices = lazy(() => import('./pages/team/Invoices'));
 const MeetingNotes = lazy(() => import('./pages/team/MeetingNotes'));
@@ -56,6 +57,7 @@ export default function App() {
           <Route path="/companies" element={<ProtectedRoute role="team"><Companies /></ProtectedRoute>} />
           <Route path="/companies/:id" element={<ProtectedRoute role="team"><CompanyDetail /></ProtectedRoute>} />
           <Route path="/requests" element={<ProtectedRoute role="team"><Requests /></ProtectedRoute>} />
+          <Route path="/team-projects" element={<ProtectedRoute role="team"><TeamProjects /></ProtectedRoute>} />
           <Route path="/meeting-notes" element={<ProtectedRoute role="team"><MeetingNotes /></ProtectedRoute>} />
           <Route path="/invoices" element={<ProtectedRoute role="team"><Invoices /></ProtectedRoute>} />
           <Route path="/invoices/new" element={<ProtectedRoute role="team"><CreateInvoice /></ProtectedRoute>} />
diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
index 0213df7..9adb644 100755
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@@ -6,6 +6,7 @@ function TeamNav({ onNav }) {
   const primaryLinks = [
     { to: '/dashboard', label: 'Dashboard' },
     { to: '/requests', label: 'Requests' },
+    { to: '/team-projects', label: 'Projects' },
     { to: '/file-sharing', label: 'File Sharing' },
     { to: '/companies', label: 'Clients & Users' },
   ];
diff --git a/src/pages/team/TeamProjects.jsx b/src/pages/team/TeamProjects.jsx
new file mode 100644
index 0000000..c104f7b
--- /dev/null
+++ b/src/pages/team/TeamProjects.jsx
@@ -0,0 +1,79 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import Layout from '../../components/Layout';
+import StatusBadge from '../../components/StatusBadge';
+import { supabase } from '../../lib/supabase';
+
+export default function TeamProjects() {
+  const navigate = useNavigate();
+  const [projects, setProjects] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState('');
+
+  useEffect(() => {
+    supabase
+      .from('projects')
+      .select('id, name, status, created_at, company:companies(id, name)')
+      .order('created_at', { ascending: false })
+      .then(({ data }) => {
+        setProjects(data || []);
+        setLoading(false);
+      });
+  }, []);
+
+  const filtered = projects.filter(p =>
+    !search ||
+    p.name.toLowerCase().includes(search.toLowerCase()) ||
+    p.company?.name?.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <Layout>
+      <div className="page-header">
+        <div>
+          <div className="page-title">Projects</div>
+          <div className="page-subtitle">All active client projects.</div>
+        </div>
+        <input
+          type="text"
+          placeholder="Search projects or clients..."
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          style={{ width: 240 }}
+        />
+      </div>
+
+      {loading ? (
+        <p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p>
+      ) : filtered.length === 0 ? (
+        <div className="empty-state">
+          <h3>No projects found</h3>
+          <p>Projects are created from the Clients &amp; Users page.</p>
+        </div>
+      ) : (
+        <div className="table-wrapper">
+          <table>
+            <thead>
+              <tr>
+                <th>Project</th>
+                <th>Client</th>
+                <th>Status</th>
+                <th>Started</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map(p => (
+                <tr key={p.id} style={{ cursor: 'pointer' }} onClick={() => navigate(`/projects/${p.id}`)}>
+                  <td style={{ fontWeight: 600 }}>{p.name}</td>
+                  <td style={{ color: 'var(--text-muted)' }}>{p.company?.name || '—'}</td>
+                  <td><StatusBadge status={p.status} /></td>
+                  <td style={{ color: 'var(--text-muted)' }}>{new Date(p.created_at).toLocaleDateString()}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </Layout>
+  );
+}