Session 2026-05-30: tasks/projects unification, code consolidation, file renames

- Unified Tasks page: 3 role render blocks → 1, normalized row shape, single renderRow/sort/tabs
- Fixed role scoping: external = all tasks in member projects, client = all tasks in company projects
- Fixed client bug: was scoped by submitted_by, now company→project→tasks
- Aligned dashboard client scope to match tasks page
- Hot tasks dashboard: now filters to active statuses only (not completed/invoiced/paid)
- Removed Projects.jsx (dead), fixed /project/ → /projects/ links
- Renamed all page files to match folder path (Team*, External*, Client* prefixes)
- Renamed: RequestsPage→Tasks, Settings→Profile, CompaniesPage→Companies, ProjectDetailPage→ProjectDetail
- Dropped dead fetches from Tasks page (invoices, invoice_items, subcontractor_invoice_items)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/PageLoader.jsx

@@ -1,32 +1,43 @@
-export default function PageLoader() {
+export default function PageLoader({ label = 'Loading', progress = null, scope = 'page' }) {
+  const hasProgress = typeof progress === 'number' && Number.isFinite(progress);
+  const isContainerScope = scope === 'container';
   return (
     <div style={{
-      position: 'fixed',
+      position: isContainerScope ? 'absolute' : 'fixed',
       inset: 0,
-      zIndex: 1200,
-      background: 'rgba(0,0,0,0.58)',
+      zIndex: isContainerScope ? 20 : 1200,
+      background: 'var(--overlay-scrim)',
       backdropFilter: 'blur(6px)',
       WebkitBackdropFilter: 'blur(6px)',
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
       padding: 24,
+      borderRadius: isContainerScope ? 'inherit' : 0,
     }}>
       <div style={{
-        background: 'var(--card-bg, rgba(255,255,255,0.06))',
-        border: '1px solid var(--border, rgba(255,255,255,0.1))',
+        background: 'var(--popup-bg)',
+        border: '1px solid var(--border)',
         borderRadius: 8,
         padding: '18px 21px',
         backdropFilter: 'blur(12px)',
         WebkitBackdropFilter: 'blur(12px)',
         width: 'min(320px, 100%)',
       }}>
-        <div style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary, rgba(255,255,255,0.5))', textTransform: 'uppercase', letterSpacing: 0.8, marginBottom: 14 }}>
-          Loading
-        </div>
-        <div style={{ height: 4, borderRadius: 2, background: 'var(--border, rgba(255,255,255,0.1))', overflow: 'hidden' }}>
-          <div className="file-browser-progress-bar indeterminate" style={{ height: '100%', borderRadius: 2, background: 'var(--accent, #F5A523)' }} />
+        <div style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: 0.8, marginBottom: 14 }}>
+          {label}
         </div>
+        <>
+          <div style={{ height: 4, borderRadius: 2, background: 'var(--card-bg-2)', overflow: 'hidden', marginBottom: hasProgress ? 8 : 0 }}>
+            <div
+              className={hasProgress ? undefined : 'file-browser-progress-bar indeterminate'}
+              style={{ height: '100%', borderRadius: 2, background: 'var(--accent)', width: hasProgress ? `${progress}%` : undefined, transition: 'width 0.2s ease' }}
+            />
+          </div>
+          {hasProgress && (
+            <div style={{ fontSize: 12, color: 'var(--text-secondary)', textAlign: 'right' }}>{progress}%</div>
+          )}
+        </>
       </div>
     </div>
   );

src/components/RequestForm.jsx

@@ -5,6 +5,9 @@ import FileAttachment from './FileAttachment';
 import { addDaysToDateOnly, getTodayDateOnlyEST } from '../lib/dates';
 
 const defaultDeadline = () => addDaysToDateOnly(getTodayDateOnlyEST(), 3);
+const modalLabelStyle = { fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: 0.8, marginBottom: 6 };
+const modalInputStyle = { fontSize: 13, padding: '0 5px', textAlign: 'left', lineHeight: 1 };
+const modalTextAreaStyle = { ...modalInputStyle, minHeight: 100, padding: '8px 5px', lineHeight: 1.4 };
 const emptyForm = (companyId = '') => ({
   companyId,
   project: '',
@@ -123,11 +126,12 @@ export default function RequestForm({
     <form onSubmit={handleSubmit}>
       {showCompanySelect && (
         <div className="form-group">
-          <label>Company *</label>
+          <label style={modalLabelStyle}>Company *</label>
           <select
             value={form.companyId}
             onChange={e => setForm(f => ({ ...f, companyId: e.target.value }))}
             required
+            style={modalInputStyle}
           >
             <option value="">Select company...</option>
             {companies.map(co => <option key={co.id} value={co.id}>{co.name}</option>)}
@@ -136,7 +140,7 @@ export default function RequestForm({
       )}
 
       <div className="form-group">
-        <label>Project *</label>
+        <label style={modalLabelStyle}>Project *</label>
         {isTypingProject ? (
           <div style={{ display: 'flex', gap: 8 }}>
             <input
@@ -146,13 +150,13 @@ export default function RequestForm({
               onChange={e => setNewProjectName(e.target.value)}
               onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); handleAddProject(); } }}
               autoFocus
-              style={{ flex: 1 }}
+              style={{ ...modalInputStyle, flex: 1 }}
             />
-            <button type="button" className="btn btn-primary btn-sm" onClick={handleAddProject} disabled={!newProjectName.trim()}>Add</button>
-            <button type="button" className="btn btn-outline btn-sm" onClick={() => { setIsTypingProject(false); setNewProjectName(''); }}>Cancel</button>
+            <button type="button" className="btn btn-outline" onClick={handleAddProject} disabled={!newProjectName.trim()}>Add</button>
+            <button type="button" className="btn btn-outline" onClick={() => { setIsTypingProject(false); setNewProjectName(''); }}>Cancel</button>
           </div>
         ) : (
-          <select value={form.project} onChange={handleProjectSelect} required disabled={showCompanySelect && !companyId}>
+          <select value={form.project} onChange={handleProjectSelect} required disabled={showCompanySelect && !companyId} style={modalInputStyle}>
             <option value="">{showCompanySelect && !companyId ? 'Select company first' : 'Select a project...'}</option>
             {allProjectNames.map(name => <option key={name} value={name}>{name}</option>)}
             {(!showCompanySelect || companyId) && <option value="__new__">＋ Create new project...</option>}
@@ -162,20 +166,20 @@ export default function RequestForm({
 
       <div className="grid-2">
         <div className="form-group">
-          <label>Service Type *</label>
-          <select value={form.serviceType} onChange={set('serviceType')} required>
+          <label style={modalLabelStyle}>Service Type *</label>
+          <select value={form.serviceType} onChange={set('serviceType')} required style={modalInputStyle}>
             <option value="">Select service...</option>
             {serviceTypes.map(s => <option key={s} value={s}>{s}</option>)}
           </select>
         </div>
         <div className="form-group">
-          <label>Desired Deadline</label>
-          <input type="date" value={form.deadline} onChange={set('deadline')} />
+          <label style={modalLabelStyle}>Desired Deadline</label>
+          <input type="date" value={form.deadline} onChange={set('deadline')} style={modalInputStyle} />
         </div>
       </div>
 
       <div className="form-group" style={{ marginTop: -4 }}>
-        <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontWeight: 500, cursor: 'pointer' }}>
+        <label style={{ ...modalLabelStyle, display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', marginBottom: 0 }}>
           <input type="checkbox" checked={form.isHot} onChange={e => setForm(f => ({ ...f, isHot: e.target.checked }))} />
           <span>Mark as Hot</span>
         </label>
@@ -183,8 +187,8 @@ export default function RequestForm({
 
       {showRequester && (
         <div className="form-group">
-          <label>Requested By *</label>
-          <select value={form.requestedBy} onChange={set('requestedBy')} disabled={!companyId} required>
+          <label style={modalLabelStyle}>Requested By *</label>
+          <select value={form.requestedBy} onChange={set('requestedBy')} disabled={!companyId} required style={modalInputStyle}>
             <option value="">{companyId ? 'Select requester...' : 'Select company first'}</option>
             {requesterOptions.map(user => (
               <option key={user.id} value={user.id}>{user.name}{user.email ? ` (${user.email})` : ''}</option>
@@ -194,21 +198,21 @@ export default function RequestForm({
       )}
 
       <div className="form-group">
-        <label>Request Title *</label>
-        <input type="text" placeholder="e.g. City, State or Site Name" value={form.title} onChange={set('title')} required />
+        <label style={modalLabelStyle}>Request Title *</label>
+        <input type="text" placeholder="e.g. City, State or Site Name" value={form.title} onChange={set('title')} required style={modalInputStyle} />
       </div>
 
       <div className="form-group">
-        <label>Description *</label>
-        <textarea placeholder="Notes on the request..." value={form.description} onChange={set('description')} style={{ minHeight: 100 }} required />
+        <label style={modalLabelStyle}>Description *</label>
+        <textarea placeholder="Notes on the request..." value={form.description} onChange={set('description')} style={modalTextAreaStyle} required />
       </div>
 
       <FileAttachment files={files} onChange={setFiles} />
 
       {error && <div style={{ fontSize: 13, color: 'var(--danger)', marginBottom: 12 }}>⚠ {error}</div>}
 
-      <div className="action-buttons">
-        <button type="submit" className="btn btn-primary" disabled={saving}>
+      <div className="action-buttons" style={{ justifyContent: 'flex-end' }}>
+        <button type="submit" className="btn btn-outline" disabled={saving}>
           {saving ? 'Submitting...' : submitLabel}
         </button>
         {onCancel && <button type="button" className="btn btn-outline" onClick={onCancel}>Cancel</button>}

src/components/StatusBadge.jsx

@@ -20,7 +20,7 @@ const labels = {
 
 export default function StatusBadge({ status }) {
   return (
-    <span className={`badge badge-${status}`}>
+    <span className={`badge badge-status badge-${status}`}>
       {labels[status] || status}
     </span>
   );