From 1b7c53b810b90e1fe6921cc17209882c57bdcf28 Mon Sep 17 00:00:00 2001
From: Krao Hasanee <kraohasanee@fourgebranding.com>
Date: Wed, 13 May 2026 11:35:42 -0400
Subject: [PATCH] Add dedicated New Project page for clients
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Route /new-project: name + company selector → creates project, redirects
to project detail. My Projects buttons now link there instead of new-request.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/App.jsx                     |  70 ++++++++++++++------
 src/pages/client/MyProjects.jsx |   6 +-
 src/pages/client/NewProject.jsx | 109 ++++++++++++++++++++++++++++++++
 3 files changed, 161 insertions(+), 24 deletions(-)
 create mode 100644 src/pages/client/NewProject.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 0857c7a..046c32d 100755
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,34 +1,48 @@
+import { lazy, Suspense } from 'react';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { AuthProvider } from './context/AuthContext';
 import ProtectedRoute from './components/ProtectedRoute';
+import PageLoader from './components/PageLoader';
 
 import Login from './pages/Login';
+import PayInvoice from './pages/PayInvoice';
 
-import Dashboard from './pages/team/Dashboard';
-import Companies from './pages/team/Companies';
-import CompanyDetail from './pages/team/CompanyDetail';
-import ProjectDetail from './pages/team/ProjectDetail';
-import TaskDetail from './pages/team/TaskDetail';
-import Requests from './pages/team/Requests';
-import Invoices from './pages/team/Invoices';
-import CreateInvoice from './pages/team/CreateInvoice';
-import InvoiceDetail from './pages/team/InvoiceDetail';
-import BrandBook from './pages/team/BrandBook';
-
-import Settings from './pages/Settings';
-import ClientDashboard from './pages/client/ClientDashboard';
-import MyCompany from './pages/client/MyCompany';
-import MyRequests from './pages/client/MyRequests';
-import MyProjects from './pages/client/MyProjects';
-import MyProjectDetail from './pages/client/MyProjectDetail';
-import MyInvoices from './pages/client/MyInvoices';
-import RequestDetail from './pages/client/RequestDetail';
-import NewRequest from './pages/client/NewRequest';
+const Settings = lazy(() => import('./pages/Settings'));
+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 Requests = lazy(() => import('./pages/team/Requests'));
+const Invoices = lazy(() => import('./pages/team/Invoices'));
+const MeetingNotes = lazy(() => import('./pages/team/MeetingNotes'));
+const TaskDetail = lazy(() => import('./pages/team/TaskDetail'));
+const CreateInvoice = lazy(() => import('./pages/team/CreateInvoice'));
+const CreateSubcontractorPO = lazy(() => import('./pages/team/CreateSubcontractorPO'));
+const InvoiceDetail = lazy(() => import('./pages/team/InvoiceDetail'));
+const SubcontractorPODetail = lazy(() => import('./pages/team/SubcontractorPODetail'));
+const SurveyMaker = lazy(() => import('./pages/team/SurveyMaker'));
+const BrandBook = lazy(() => import('./pages/team/BrandBook'));
+const Converters = lazy(() => import('./pages/team/Converters'));
+const ServerStatus = lazy(() => import('./pages/team/ServerStatus'));
+const FileSharing = lazy(() => import('./pages/team/FileSharing'));
+const FourgePasswords = lazy(() => import('./pages/team/FourgePasswords'));
+const ExternalMyRequests = lazy(() => import('./pages/external/MyRequests'));
+const MyPurchaseOrders = lazy(() => import('./pages/external/MyPurchaseOrders'));
+const ClientDashboard = lazy(() => import('./pages/client/ClientDashboard'));
+const MyCompany = lazy(() => import('./pages/client/MyCompany'));
+const MyRequests = lazy(() => import('./pages/client/MyRequests'));
+const MyProjects = lazy(() => import('./pages/client/MyProjects'));
+const MyProjectDetail = lazy(() => import('./pages/client/MyProjectDetail'));
+const MyInvoices = lazy(() => import('./pages/client/MyInvoices'));
+const RequestDetail = lazy(() => import('./pages/client/RequestDetail'));
+const NewRequest = lazy(() => import('./pages/client/NewRequest'));
+const NewProject = lazy(() => import('./pages/client/NewProject'));
 
 export default function App() {
   return (
     <AuthProvider>
       <BrowserRouter>
+        <Suspense fallback={<PageLoader />}>
         <Routes>
           <Route path="/" element={<Login />} />
 
@@ -38,10 +52,21 @@ 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="/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>} />
+          <Route path="/subcontractor-pos/new" element={<ProtectedRoute role="team"><CreateSubcontractorPO /></ProtectedRoute>} />
           <Route path="/invoices/:id" element={<ProtectedRoute role="team"><InvoiceDetail /></ProtectedRoute>} />
-          <Route path="/brand-book" element={<ProtectedRoute role="team"><BrandBook /></ProtectedRoute>} />
+          <Route path="/subcontractor-pos/:id" element={<ProtectedRoute role="team"><SubcontractorPODetail /></ProtectedRoute>} />
+          <Route path="/survey-maker" element={<ProtectedRoute role={['team', 'external']}><SurveyMaker /></ProtectedRoute>} />
+          <Route path="/brand-book" element={<ProtectedRoute role={['team', 'external']}><BrandBook /></ProtectedRoute>} />
+          <Route path="/converters" element={<ProtectedRoute role={['team', 'external']}><Converters /></ProtectedRoute>} />
+          <Route path="/file-sharing" element={<ProtectedRoute role={['team', 'external', 'client']}><FileSharing /></ProtectedRoute>} />
+          <Route path="/file-uploads" element={<Navigate to="/file-sharing" replace />} />
+          <Route path="/fourge-passwords" element={<ProtectedRoute role="team"><FourgePasswords /></ProtectedRoute>} />
+          <Route path="/server-status" element={<ProtectedRoute role="team"><ServerStatus /></ProtectedRoute>} />
+          <Route path="/assigned-requests" element={<ProtectedRoute role="external"><ExternalMyRequests /></ProtectedRoute>} />
+          <Route path="/my-purchase-orders" element={<ProtectedRoute role="external"><MyPurchaseOrders /></ProtectedRoute>} />
 
           <Route path="/settings" element={<ProtectedRoute><Settings /></ProtectedRoute>} />
 
@@ -53,9 +78,12 @@ export default function App() {
           <Route path="/my-projects/:id" element={<ProtectedRoute role="client"><MyProjectDetail /></ProtectedRoute>} />
           <Route path="/my-invoices" element={<ProtectedRoute role="client"><MyInvoices /></ProtectedRoute>} />
           <Route path="/new-request" element={<ProtectedRoute role="client"><NewRequest /></ProtectedRoute>} />
+          <Route path="/new-project" element={<ProtectedRoute role="client"><NewProject /></ProtectedRoute>} />
 
+          <Route path="/pay/:id" element={<PayInvoice />} />
           <Route path="*" element={<Navigate to="/" replace />} />
         </Routes>
+        </Suspense>
       </BrowserRouter>
     </AuthProvider>
   );
diff --git a/src/pages/client/MyProjects.jsx b/src/pages/client/MyProjects.jsx
index 6a8549f..29b9bbe 100755
--- a/src/pages/client/MyProjects.jsx
+++ b/src/pages/client/MyProjects.jsx
@@ -104,7 +104,7 @@ function ProjectGroup({ project, tasks, submissions, currentUserId, filter }) {
           )}
           <div style={{ padding: '10px 16px', borderTop: filteredTasks.length > 0 ? '1px solid var(--border)' : 'none' }}>
             <Link
-              to={`/new-request?project=${encodeURIComponent(project.name)}`}
+              to={`/new-project?project=${encodeURIComponent(project.name)}`}
               className="btn btn-outline btn-sm"
             >
               + Add Request to {project.name}
@@ -169,7 +169,7 @@ 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 Project</Link>
+        <Link to="/new-project" className="btn btn-primary">+ New Project</Link>
       </div>
 
       <div className="card page-toolbar">
@@ -199,7 +199,7 @@ export default function MyProjects() {
         <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 }}>+ New Project</Link>
+          <Link to="/new-project" className="btn btn-primary" style={{ marginTop: 16 }}>+ New Project</Link>
         </div>
       ) : (
         projects.map(project => (
diff --git a/src/pages/client/NewProject.jsx b/src/pages/client/NewProject.jsx
new file mode 100644
index 0000000..1d622d2
--- /dev/null
+++ b/src/pages/client/NewProject.jsx
@@ -0,0 +1,109 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import Layout from '../../components/Layout';
+import { supabase } from '../../lib/supabase';
+import { useAuth } from '../../context/AuthContext';
+
+export default function NewProject() {
+  const { currentUser } = useAuth();
+  const navigate = useNavigate();
+  const companyOptions = currentUser.companies?.length
+    ? currentUser.companies
+    : (currentUser.company ? [currentUser.company] : []);
+
+  const [selectedCompanyId, setSelectedCompanyId] = useState(companyOptions[0]?.id || '');
+  const [name, setName] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState(null);
+
+  if (!companyOptions.length) {
+    return (
+      <Layout>
+        <div style={{ maxWidth: 480, margin: '0 auto', textAlign: 'center', paddingTop: 48 }}>
+          <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 8 }}>Account Not Yet Active</h2>
+          <p style={{ color: 'var(--text-secondary)', fontSize: 14 }}>
+            Your account hasn't been linked to a company yet. Please contact the Fourge team to get set up.
+          </p>
+        </div>
+      </Layout>
+    );
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (saving) return;
+    const trimmedName = name.trim();
+    if (!trimmedName) return;
+    setSaving(true);
+    setError(null);
+
+    const { data, error: insertError } = await supabase
+      .from('projects')
+      .insert({ company_id: selectedCompanyId, name: trimmedName })
+      .select('id')
+      .single();
+
+    if (insertError) {
+      setError(insertError.message);
+      setSaving(false);
+      return;
+    }
+
+    navigate(`/my-projects/${data.id}`);
+  };
+
+  return (
+    <Layout>
+      <div className="page-header">
+        <div>
+          <div className="page-title">New Project</div>
+          <div className="page-subtitle">Create a project to organise your work.</div>
+        </div>
+      </div>
+
+      <div className="card" style={{ maxWidth: 480 }}>
+        <form onSubmit={handleSubmit}>
+          {companyOptions.length > 1 && (
+            <div className="form-group">
+              <label>Company *</label>
+              <select
+                value={selectedCompanyId}
+                onChange={e => setSelectedCompanyId(e.target.value)}
+                required
+              >
+                {companyOptions.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
+              </select>
+            </div>
+          )}
+
+          <div className="form-group">
+            <label>Project Name *</label>
+            <input
+              type="text"
+              placeholder="e.g. Brand Refresh 2026"
+              value={name}
+              onChange={e => setName(e.target.value)}
+              autoFocus
+              required
+            />
+          </div>
+
+          {error && (
+            <div className="notification notification-error" style={{ marginBottom: 16 }}>
+              {error}
+            </div>
+          )}
+
+          <div className="action-buttons">
+            <button type="submit" className="btn btn-primary btn-lg" disabled={saving || !name.trim()}>
+              {saving ? 'Creating...' : 'Create Project'}
+            </button>
+            <button type="button" className="btn btn-outline" onClick={() => navigate('/my-projects')}>
+              Cancel
+            </button>
+          </div>
+        </form>
+      </div>
+    </Layout>
+  );
+}