Session 2026-05-20: UI fixes, invoice filtering, file browser, request approvals, sub invoice task scope

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-20 21:32:55 -04:00
parent ff159c5937
commit 565d2ed4bc
34 changed files with 3384 additions and 1161 deletions
@@ -7,8 +7,8 @@ function TeamNav({ onNav }) {

  const primaryLinks = [
    { to: '/dashboard', label: 'Dashboard' },
-    { to: '/requests', label: 'Requests' },
    { to: '/projects', label: 'Projects' },
+    { to: '/requests', label: 'Requests' },
    { to: '/file-sharing', label: 'File Sharing' },
  ];

@@ -0,0 +1,218 @@
+import { useState, useEffect } from 'react';
+import { supabase } from '../lib/supabase';
+import { serviceTypes } from '../data/mockData';
+import FileAttachment from './FileAttachment';
+import { addDaysToDateOnly, getTodayDateOnlyEST } from '../lib/dates';
+
+const defaultDeadline = () => addDaysToDateOnly(getTodayDateOnlyEST(), 3);
+const emptyForm = (companyId = '') => ({
+  companyId,
+  project: '',
+  serviceType: '',
+  title: '',
+  deadline: defaultDeadline(),
+  description: '',
+  isHot: false,
+  requestedBy: '',
+});
+
+// Props:
+//   companies        [{id, name}]  — all selectable companies
+//   currentUser      {id, name}    — logged-in team member (added to requester list as "You")
+//   showRequester    bool          — true for team (submitting on behalf of client)
+//   onSubmit         async (formData, files, existingProjects) => void  — throw to show error
+//   onCancel         () => void    — optional; shows Cancel button when provided
+//   saving           bool
+//   error            string
+//   submitLabel      string
+//   initialCompanyId string        — pre-selected company (client with 1 company)
+export default function RequestForm({
+  companies = [],
+  currentUser = null,
+  showRequester = false,
+  onSubmit,
+  onCancel = null,
+  saving = false,
+  error = '',
+  submitLabel = 'Submit Request',
+  initialCompanyId = '',
+}) {
+  const [form, setForm] = useState(() => emptyForm(initialCompanyId));
+  const [files, setFiles] = useState([]);
+  const [existingProjects, setExistingProjects] = useState([]);
+  const [customProjects, setCustomProjects] = useState([]);
+  const [isTypingProject, setIsTypingProject] = useState(false);
+  const [newProjectName, setNewProjectName] = useState('');
+  const [companyUsers, setCompanyUsers] = useState([]);
+
+  const companyId = form.companyId || initialCompanyId;
+
+  useEffect(() => {
+    if (!companyId) { setExistingProjects([]); setCompanyUsers([]); return; }
+    Promise.all([
+      supabase.from('projects').select('id, name').eq('company_id', companyId).order('name'),
+      showRequester
+        ? Promise.all([
+            supabase.from('profiles').select('id, name, email').eq('company_id', companyId).eq('role', 'client'),
+            supabase.from('company_members').select('profile:profiles(id, name, email, role)').eq('company_id', companyId),
+          ])
+        : Promise.resolve(null),
+    ]).then(([projectsRes, usersData]) => {
+      setExistingProjects(projectsRes.data || []);
+      if (usersData) {
+        const [directRes, membersRes] = usersData;
+        const direct = (directRes.data || []);
+        const fromMembers = (membersRes.data || []).map(m => m.profile).filter(p => p?.role === 'client');
+        const seen = new Set();
+        const merged = [...direct, ...fromMembers].filter(u => {
+          if (!u?.id || seen.has(u.id)) return false;
+          seen.add(u.id);
+          return true;
+        }).sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+        setCompanyUsers(merged);
+      }
+    });
+    setForm(f => ({ ...f, project: '', requestedBy: '' }));
+    setCustomProjects([]);
+    setIsTypingProject(false);
+    setNewProjectName('');
+  }, [companyId]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const set = (field) => (e) => setForm(f => ({ ...f, [field]: e.target.value }));
+
+  const allProjectNames = [
+    ...existingProjects.map(p => p.name),
+    ...customProjects.filter(name => !existingProjects.some(p => p.name === name)),
+  ];
+
+  const handleProjectSelect = (e) => {
+    if (e.target.value === '__new__') {
+      setIsTypingProject(true);
+      setForm(f => ({ ...f, project: '' }));
+    } else {
+      setForm(f => ({ ...f, project: e.target.value }));
+    }
+  };
+
+  const handleAddProject = () => {
+    const name = newProjectName.trim();
+    if (!name) return;
+    if (!customProjects.includes(name) && !existingProjects.some(p => p.name === name)) {
+      setCustomProjects(prev => [...prev, name]);
+    }
+    setForm(f => ({ ...f, project: name }));
+    setIsTypingProject(false);
+    setNewProjectName('');
+  };
+
+  const requesterOptions = showRequester ? [
+    ...(currentUser ? [{ id: currentUser.id, name: `${currentUser.name} (You)`, email: currentUser.email || '' }] : []),
+    ...companyUsers.filter(u => u.id !== currentUser?.id),
+  ] : [];
+
+  const showCompanySelect = companies.length > 1 || showRequester;
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const requester = requesterOptions.find(u => u.id === form.requestedBy);
+    const requestedByName = requester ? requester.name.replace(' (You)', '') : '';
+    onSubmit({ ...form, companyId, requestedByName }, files, existingProjects);
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      {showCompanySelect && (
+        <div className="form-group">
+          <label>Company *</label>
+          <select
+            value={form.companyId}
+            onChange={e => setForm(f => ({ ...f, companyId: e.target.value }))}
+            required
+          >
+            <option value="">Select company...</option>
+            {companies.map(co => <option key={co.id} value={co.id}>{co.name}</option>)}
+          </select>
+        </div>
+      )}
+
+      <div className="form-group">
+        <label>Project *</label>
+        {isTypingProject ? (
+          <div style={{ display: 'flex', gap: 8 }}>
+            <input
+              type="text"
+              placeholder="Enter project name..."
+              value={newProjectName}
+              onChange={e => setNewProjectName(e.target.value)}
+              onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); handleAddProject(); } }}
+              autoFocus
+              style={{ 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>
+          </div>
+        ) : (
+          <select value={form.project} onChange={handleProjectSelect} required disabled={showCompanySelect && !companyId}>
+            <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>}
+          </select>
+        )}
+      </div>
+
+      <div className="grid-2">
+        <div className="form-group">
+          <label>Service Type *</label>
+          <select value={form.serviceType} onChange={set('serviceType')} required>
+            <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')} />
+        </div>
+      </div>
+
+      <div className="form-group" style={{ marginTop: -4 }}>
+        <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontWeight: 500, cursor: 'pointer' }}>
+          <input type="checkbox" checked={form.isHot} onChange={e => setForm(f => ({ ...f, isHot: e.target.checked }))} />
+          <span>Mark as Hot</span>
+        </label>
+      </div>
+
+      {showRequester && (
+        <div className="form-group">
+          <label>Requested By *</label>
+          <select value={form.requestedBy} onChange={set('requestedBy')} disabled={!companyId} required>
+            <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>
+            ))}
+          </select>
+        </div>
+      )}
+
+      <div className="form-group">
+        <label>Request Title *</label>
+        <input type="text" placeholder="e.g. Street Name" value={form.title} onChange={set('title')} required />
+      </div>
+
+      <div className="form-group">
+        <label>Description *</label>
+        <textarea placeholder="Notes on the request..." value={form.description} onChange={set('description')} style={{ minHeight: 100 }} 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}>
+          {saving ? 'Submitting...' : submitLabel}
+        </button>
+        {onCancel && <button type="button" className="btn btn-outline" onClick={onCancel}>Cancel</button>}
+      </div>
+    </form>
+  );
+}
@@ -4,8 +4,10 @@ const labels = {
  not_started: 'Not Started',
  in_progress: 'In Progress',
  on_hold: 'On Hold',
-  client_review: 'Client Review',
-  client_approved: 'Client Approved',
+  client_review: 'In Review',
+  client_approved: 'Approved',
+  invoiced: 'Invoiced',
+  paid: 'Paid',
  active: 'Active',
  completed: 'Completed',
  superseded: 'Superseded',