From 572c290f481a3932e6d7636de40291aaa33216c7 Mon Sep 17 00:00:00 2001
From: Krao Hasanee <kraohasanee@fourgebranding.com>
Date: Wed, 13 May 2026 11:33:01 -0400
Subject: [PATCH] Rename client project buttons to '+ New Project'

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/client/MyProjects.jsx | 91 +++++++++++++++++++++------------
 1 file changed, 57 insertions(+), 34 deletions(-)

diff --git a/src/pages/client/MyProjects.jsx b/src/pages/client/MyProjects.jsx
index ae841cc..6a8549f 100755
--- a/src/pages/client/MyProjects.jsx
+++ b/src/pages/client/MyProjects.jsx
@@ -4,8 +4,9 @@ import Layout from '../../components/Layout';
 import StatusBadge from '../../components/StatusBadge';
 import { supabase } from '../../lib/supabase';
 import { useAuth } from '../../context/AuthContext';
+import { withTimeout } from '../../lib/withTimeout';
 
-const vLabel = (v) => 'v' + String(v || 0).padStart(2, '0');
+const rLabel = (v) => 'R' + String(v || 0).padStart(2, '0');
 
 function ProjectGroup({ project, tasks, submissions, currentUserId, filter }) {
   const [open, setOpen] = useState(true);
@@ -20,9 +21,10 @@ function ProjectGroup({ project, tasks, submissions, currentUserId, filter }) {
   if (filter === 'mine' && filteredTasks.length === 0) return null;
 
   return (
-    <div style={{ border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden', marginBottom: 8 }}>
+    <div className="interactive-surface" style={{ border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden', marginBottom: 8 }}>
       {/* Project header — clickable to collapse */}
       <button
+        className="interactive-panel-toggle"
         onClick={() => setOpen(o => !o)}
         style={{
           width: '100%', display: 'flex', alignItems: 'center',
@@ -68,6 +70,7 @@ function ProjectGroup({ project, tasks, submissions, currentUserId, filter }) {
                 <Link
                   key={task.id}
                   to={`/my-requests/${task.id}`}
+                  className="interactive-row"
                   style={{
                     display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                     padding: '12px 16px',
@@ -81,7 +84,7 @@ function ProjectGroup({ project, tasks, submissions, currentUserId, filter }) {
                         {task.title}
                       </span>
                       <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>
-                        {vLabel(task.current_version)}
+                        {rLabel(task.current_version)}
                       </span>
                       {isMine && (
                         <span style={{ fontSize: 11, background: 'rgba(245,165,35,0.15)', color: 'var(--accent)', padding: '1px 7px', borderRadius: 4, fontWeight: 600 }}>
@@ -123,23 +126,36 @@ export default function MyProjects() {
 
   useEffect(() => {
     async function load() {
-      const [{ data: p }, { data: t }] = await Promise.all([
-        supabase.from('projects').select('*').order('created_at', { ascending: false }),
-        supabase.from('tasks').select('*').order('submitted_at', { ascending: false }),
-      ]);
-      setProjects(p || []);
-      setTasks(t || []);
+      try {
+        const [{ data: p }, { data: t }] = await withTimeout(Promise.all([
+          supabase.from('projects').select('*').order('created_at', { ascending: false }),
+          supabase.from('tasks').select('*').order('submitted_at', { ascending: false }),
+        ]), 12000, 'Projects load');
+        setProjects(p || []);
+        setTasks(t || []);
 
-      if (t && t.length > 0) {
-        const { data: subs } = await supabase
-          .from('submissions')
-          .select('id, task_id, submitted_by, submitted_by_name, version_number, type')
-          .in('task_id', t.map(task => task.id))
-          .order('version_number');
-        setSubmissions(subs || []);
+        if (t && t.length > 0) {
+          const { data: subs } = await withTimeout(
+            supabase
+              .from('submissions')
+              .select('id, task_id, submitted_by, submitted_by_name, version_number, type')
+              .in('task_id', t.map(task => task.id))
+              .order('version_number'),
+            12000,
+            'Project submissions load'
+          );
+          setSubmissions(subs || []);
+        } else {
+          setSubmissions([]);
+        }
+      } catch (error) {
+        console.error('MyProjects load failed:', error);
+        setProjects([]);
+        setTasks([]);
+        setSubmissions([]);
+      } finally {
+        setLoading(false);
       }
-
-      setLoading(false);
     }
     load();
   }, []);
@@ -153,30 +169,37 @@ export default function MyProjects() {
           <div className="page-title">Projects</div>
           <div className="page-subtitle">All work for your company.</div>
         </div>
-        <Link to="/new-request" className="btn btn-primary">+ New Request</Link>
+        <Link to="/new-request" className="btn btn-primary">+ New Project</Link>
       </div>
 
-      {/* Filter toggle */}
-      <div style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
-        <button
-          className={`btn btn-sm ${filter === 'all' ? 'btn-primary' : 'btn-outline'}`}
-          onClick={() => setFilter('all')}
-        >
-          All Requests
-        </button>
-        <button
-          className={`btn btn-sm ${filter === 'mine' ? 'btn-primary' : 'btn-outline'}`}
-          onClick={() => setFilter('mine')}
-        >
-          Mine Only
-        </button>
+      <div className="card page-toolbar">
+        <div className="page-toolbar-grid">
+          <div className="page-toolbar-section">
+            <div className="card-title" style={{ marginBottom: 10 }}>Filter</div>
+            <div className="page-toolbar-filters">
+              <button
+                className={`btn btn-sm ${filter === 'all' ? 'btn-primary' : 'btn-outline'}`}
+                onClick={() => setFilter('all')}
+              >
+                All Requests
+              </button>
+              <button
+                className={`btn btn-sm ${filter === 'mine' ? 'btn-primary' : 'btn-outline'}`}
+                onClick={() => setFilter('mine')}
+              >
+                Mine Only
+              </button>
+            </div>
+          </div>
+
+        </div>
       </div>
 
       {projects.length === 0 ? (
         <div className="empty-state">
           <h3>No projects yet</h3>
           <p>Submit a request and a project will be created automatically.</p>
-          <Link to="/new-request" className="btn btn-primary" style={{ marginTop: 16 }}>Submit Request</Link>
+          <Link to="/new-request" className="btn btn-primary" style={{ marginTop: 16 }}>+ New Project</Link>
         </div>
       ) : (
         projects.map(project => (