cleanup: remove dead code, drop unused deps, refactor derived-state effects
Lint went from 84 problems to 0. Build passes. Dead code: - TeamInvoices: drop the orphaned Subcontractor PO block (updateSubcontractorPO plus send/ready-to-pay/paid/reopen/cancel/delete/download/CPA-export handlers and ~25 derived vars). That feature moved to the routed TeamCreateSubcontractorPO / TeamSubcontractorPODetail pages in the Layout2 redesign; these were leftovers. 2100 -> 1880 lines. - Tasks: drop unrendered project sort/tab/completion logic in TasksPageShell. - Remove 59 unused vars, imports, and handlers across 12 other files. Removed wasted queries: - TeamInvoices ran a nested subcontractor_payments join (profiles, projects, companies, PO items, tasks) on every page load into state nothing read. - TeamInvoices and ExternalMyInvoices each fetched a task-type map on invoice open and discarded it; the ExternalMyInvoices one blocked the detail popup. - RequestForm queried sign_families on mount into unread state. Dependencies: - Drop heic2any (zero imports). heic-to is the one in use and already lazy-loads. Effects and exports: - RequestForm: remove 4 effects. Sign-row sizing and company-change resets move into their change handlers; single-company selection is derived during render rather than written back into form state. - FilterDropdown: measure position on click instead of in an effect, which also removes a one-frame stale-position flicker. - BrandBook: latest-ref pattern so the 900ms address debounce is not reset by handler identity. - ClientMyInvoices: hoist MONTHS to module scope. - Split non-component exports: POPUP_FIELD_LABEL moves to lib/popupStyles.js; resolveProfileAvatar and useLiveClock are internal-only; getGreeting deleted as nothing referenced it. Companies.jsx keeps one scoped eslint-disable with a reason: load() only setStates after awaiting its queries, so set-state-in-effect is a false positive there, and load() is shared with the create/delete handlers. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Krao Hasanee
@@ -37,18 +37,6 @@ function safeName(value, fallback = '') {
|
||||
return cleaned || fallback;
|
||||
}
|
||||
|
||||
function parseBody(body) {
|
||||
if (!body) return {};
|
||||
if (typeof body === 'string') {
|
||||
try {
|
||||
return JSON.parse(body);
|
||||
} catch {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
return body;
|
||||
}
|
||||
|
||||
async function readBody(req) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const chunks = [];
|
||||
|
||||
Generated
-7
@@ -10,7 +10,6 @@
|
||||
"dependencies": {
|
||||
"@supabase/supabase-js": "^2.99.3",
|
||||
"heic-to": "^1.4.2",
|
||||
"heic2any": "^0.0.4",
|
||||
"jspdf": "^4.2.1",
|
||||
"jspdf-autotable": "^5.0.7",
|
||||
"jszip": "^3.10.1",
|
||||
@@ -2026,12 +2025,6 @@
|
||||
"integrity": "sha512-y69thwxfNcEm2Vk8lbOD/cMabnvMJyOREfJYiCHcXCDqlfcPyJoBhyRc8+iDe1B95LRfpbTOpzxzY1xbRkdwBA==",
|
||||
"license": "LGPL-3.0"
|
||||
},
|
||||
"node_modules/heic2any": {
|
||||
"version": "0.0.4",
|
||||
"resolved": "https://registry.npmjs.org/heic2any/-/heic2any-0.0.4.tgz",
|
||||
"integrity": "sha512-3lLnZiDELfabVH87htnRolZ2iehX9zwpRyGNz22GKXIu0fznlblf0/ftppXKNqS26dqFSeqfIBhAmAj/uSp0cA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/hermes-estree": {
|
||||
"version": "0.25.1",
|
||||
"resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
|
||||
|
||||
@@ -12,7 +12,6 @@
|
||||
"dependencies": {
|
||||
"@supabase/supabase-js": "^2.99.3",
|
||||
"heic-to": "^1.4.2",
|
||||
"heic2any": "^0.0.4",
|
||||
"jspdf": "^4.2.1",
|
||||
"jspdf-autotable": "^5.0.7",
|
||||
"jszip": "^3.10.1",
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
import { lazy, Suspense, Component } from 'react';
|
||||
import { BrowserRouter, Routes, Route, Navigate, useParams } from 'react-router-dom';
|
||||
import { AuthProvider, useAuth } from './context/AuthContext';
|
||||
import { AuthProvider } from './context/AuthContext';
|
||||
import ProtectedRoute from './components/ProtectedRoute';
|
||||
import PageLoader from './components/PageLoader';
|
||||
|
||||
|
||||
@@ -23,7 +23,6 @@ export default function FilterDropdown({ value, onChange, options }) {
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
place();
|
||||
function onDown(e) {
|
||||
if (btnRef.current?.contains(e.target) || menuRef.current?.contains(e.target)) return;
|
||||
setOpen(false);
|
||||
@@ -48,7 +47,7 @@ export default function FilterDropdown({ value, onChange, options }) {
|
||||
<button
|
||||
ref={btnRef}
|
||||
type="button"
|
||||
onClick={() => setOpen(o => !o)}
|
||||
onClick={() => { if (!open) place(); setOpen(o => !o); }}
|
||||
aria-label="Filter"
|
||||
title="Filter"
|
||||
style={{
|
||||
|
||||
@@ -1,16 +1,6 @@
|
||||
import { popupOverlayStyle, popupSurfaceStyle } from '../lib/popupStyles';
|
||||
import PageLoader from './PageLoader';
|
||||
|
||||
export const POPUP_FIELD_LABEL = {
|
||||
fontSize: 11,
|
||||
fontWeight: 500,
|
||||
color: 'var(--text-secondary)',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.8,
|
||||
display: 'block',
|
||||
marginBottom: 4,
|
||||
};
|
||||
|
||||
export default function InvoiceDetailPopup({
|
||||
title,
|
||||
subtitle,
|
||||
|
||||
@@ -2,7 +2,7 @@ function normalizeName(value) {
|
||||
return String(value || '').trim().toLowerCase();
|
||||
}
|
||||
|
||||
export function resolveProfileAvatar({
|
||||
function resolveProfileAvatar({
|
||||
avatarUrl = '',
|
||||
profile = null,
|
||||
profileId = '',
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { supabase } from '../lib/supabase';
|
||||
import { serviceTypes } from '../data/mockData';
|
||||
import FileAttachment from './FileAttachment';
|
||||
@@ -49,51 +49,23 @@ export default function RequestForm({
|
||||
requestedBy: showRequester ? (currentUser?.id || '') : '',
|
||||
...(initialValues || {}),
|
||||
}));
|
||||
const prevCompanyIdRef = useRef(initialValues?.companyId || initialCompanyId || null);
|
||||
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 [signFamilies, setSignFamilies] = useState([]);
|
||||
const [signCount, setSignCount] = useState('');
|
||||
const [signs, setSigns] = useState([]);
|
||||
const [localError, setLocalError] = useState('');
|
||||
|
||||
const usesSignFields = form.serviceType === 'Brand Book';
|
||||
|
||||
useEffect(() => {
|
||||
supabase.from('sign_families').select('name').order('sort_order').then(({ data }) => setSignFamilies((data || []).map(r => r.name)));
|
||||
}, []);
|
||||
// Single-company user: lock selection to their one company (derived, not stored).
|
||||
const companyId = form.companyId || (companies.length === 1 ? companies[0].id : '') || initialCompanyId;
|
||||
|
||||
useEffect(() => {
|
||||
if (!usesSignFields) { setSignCount(''); setSigns([]); }
|
||||
}, [usesSignFields]);
|
||||
|
||||
useEffect(() => {
|
||||
const n = Math.max(0, parseInt(signCount) || 0);
|
||||
setSigns(prev => {
|
||||
if (n < prev.length) return prev.slice(0, n);
|
||||
if (n > prev.length) {
|
||||
const extra = Array.from({ length: n - prev.length }, () => ({ id: crypto.randomUUID(), signName: '', signFamily: '' }));
|
||||
return [...prev, ...extra];
|
||||
}
|
||||
return prev;
|
||||
});
|
||||
}, [signCount]);
|
||||
|
||||
const companyId = form.companyId || initialCompanyId;
|
||||
|
||||
// Single-company user: lock selection to their one company.
|
||||
useEffect(() => {
|
||||
if (companies.length === 1 && !form.companyId) {
|
||||
setForm(f => ({ ...f, companyId: companies[0].id }));
|
||||
}
|
||||
}, [companies, form.companyId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!companyId) { setExistingProjects([]); setCompanyUsers([]); return; }
|
||||
if (!companyId) return;
|
||||
Promise.all([
|
||||
supabase.from('projects').select('id, name').eq('company_id', companyId).order('name'),
|
||||
showRequester
|
||||
@@ -117,13 +89,6 @@ export default function RequestForm({
|
||||
setCompanyUsers(merged);
|
||||
}
|
||||
});
|
||||
if (companyId !== prevCompanyIdRef.current) {
|
||||
setForm(f => ({ ...f, project: '', requestedBy: '' }));
|
||||
setCustomProjects([]);
|
||||
setIsTypingProject(false);
|
||||
setNewProjectName('');
|
||||
}
|
||||
prevCompanyIdRef.current = companyId;
|
||||
}, [companyId]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
const set = (field) => (e) => {
|
||||
@@ -136,9 +101,41 @@ export default function RequestForm({
|
||||
setSigns(prev => prev.map(s => s.id === id ? { ...s, [field]: value } : s));
|
||||
};
|
||||
|
||||
// Sign rows follow the count field; resized on edit rather than in an effect.
|
||||
const handleSignCountChange = (e) => {
|
||||
const raw = e.target.value;
|
||||
setSignCount(raw);
|
||||
const n = Math.max(0, parseInt(raw) || 0);
|
||||
setSigns(prev => {
|
||||
if (n < prev.length) return prev.slice(0, n);
|
||||
if (n > prev.length) {
|
||||
const extra = Array.from({ length: n - prev.length }, () => ({ id: crypto.randomUUID(), signName: '', signFamily: '' }));
|
||||
return [...prev, ...extra];
|
||||
}
|
||||
return prev;
|
||||
});
|
||||
};
|
||||
|
||||
const handleServiceTypeChange = (e) => {
|
||||
set('serviceType')(e);
|
||||
if (e.target.value !== 'Brand Book') { setSignCount(''); setSigns([]); }
|
||||
};
|
||||
|
||||
// Switching company invalidates the project/requester picked under the old one.
|
||||
const handleCompanyChange = (e) => {
|
||||
setForm(f => ({ ...f, companyId: e.target.value, project: '', requestedBy: '' }));
|
||||
setCustomProjects([]);
|
||||
setIsTypingProject(false);
|
||||
setNewProjectName('');
|
||||
};
|
||||
|
||||
// No company selected yet means nothing loaded applies, so read through as empty.
|
||||
const activeProjects = companyId ? existingProjects : [];
|
||||
const activeCompanyUsers = companyId ? companyUsers : [];
|
||||
|
||||
const allProjectNames = [
|
||||
...existingProjects.map(p => p.name),
|
||||
...customProjects.filter(name => !existingProjects.some(p => p.name === name)),
|
||||
...activeProjects.map(p => p.name),
|
||||
...customProjects.filter(name => !activeProjects.some(p => p.name === name)),
|
||||
];
|
||||
|
||||
const handleProjectSelect = (e) => {
|
||||
@@ -164,7 +161,7 @@ export default function RequestForm({
|
||||
const showCompanySelect = companies.length > 1 || showRequester;
|
||||
const requesterOptions = [
|
||||
...(currentUser ? [{ id: currentUser.id, name: `${currentUser.name} (You)` }] : []),
|
||||
...companyUsers.filter(u => u.id !== currentUser?.id),
|
||||
...activeCompanyUsers.filter(u => u.id !== currentUser?.id),
|
||||
];
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
@@ -230,7 +227,7 @@ export default function RequestForm({
|
||||
) : showCompanySelect ? (
|
||||
<div className="form-group">
|
||||
<label style={modalLabelStyle}>Company *</label>
|
||||
<select value={form.companyId} onChange={e => setForm(f => ({ ...f, companyId: e.target.value }))} required style={modalInputStyle}>
|
||||
<select value={companyId} onChange={handleCompanyChange} required style={modalInputStyle}>
|
||||
<option value="">Select company...</option>
|
||||
{companies.map(co => <option key={co.id} value={co.id}>{co.name}</option>)}
|
||||
</select>
|
||||
@@ -265,7 +262,7 @@ export default function RequestForm({
|
||||
<div className="grid-2">
|
||||
<div className="form-group">
|
||||
<label style={modalLabelStyle}>Service Type *</label>
|
||||
<select value={form.serviceType} onChange={set('serviceType')} required style={modalInputStyle}>
|
||||
<select value={form.serviceType} onChange={handleServiceTypeChange} required style={modalInputStyle}>
|
||||
<option value="">Select service...</option>
|
||||
{serviceTypes.map(s => <option key={s} value={s}>{s}</option>)}
|
||||
</select>
|
||||
@@ -315,7 +312,7 @@ export default function RequestForm({
|
||||
max="50"
|
||||
placeholder="How many signs?"
|
||||
value={signCount}
|
||||
onChange={e => setSignCount(e.target.value)}
|
||||
onChange={handleSignCountChange}
|
||||
required
|
||||
style={{ ...modalInputStyle, width: '100%' }}
|
||||
/>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
export function useLiveClock() {
|
||||
function useLiveClock() {
|
||||
const [now, setNow] = useState(() => new Date());
|
||||
useEffect(() => {
|
||||
const id = setInterval(() => setNow(new Date()), 1000);
|
||||
@@ -20,10 +20,3 @@ export function DashboardBanner() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function getGreeting() {
|
||||
const h = new Date().getHours();
|
||||
if (h < 12) return 'Good morning';
|
||||
if (h < 17) return 'Good afternoon';
|
||||
return 'Good evening';
|
||||
}
|
||||
|
||||
@@ -22,6 +22,6 @@ export function getRevisionChargeQuantity(versionNumber, revisionType) {
|
||||
// Parses version number from a subcontractor invoice item description like
|
||||
// "Project • Task – R01". Legacy fallback only — new rows store version_number directly.
|
||||
export function parseVersionFromItemDescription(description = '') {
|
||||
const match = String(description).match(/[–\-]\s*R(\d{2})\b/i);
|
||||
const match = String(description).match(/[–-]\s*R(\d{2})\b/i);
|
||||
return match ? Number(match[1]) : 0;
|
||||
}
|
||||
|
||||
@@ -21,6 +21,16 @@ export const popupSurfaceStyle = {
|
||||
boxShadow: 'var(--popup-shadow)',
|
||||
};
|
||||
|
||||
export const POPUP_FIELD_LABEL = {
|
||||
fontSize: 11,
|
||||
fontWeight: 500,
|
||||
color: 'var(--text-secondary)',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.8,
|
||||
display: 'block',
|
||||
marginBottom: 4,
|
||||
};
|
||||
|
||||
export const popupMenuStyle = {
|
||||
background: 'var(--popup-bg)',
|
||||
border: '1px solid var(--border)',
|
||||
|
||||
@@ -159,7 +159,6 @@ export default function BrandBook() {
|
||||
const projectLogoRef = useRef();
|
||||
const clientLogoRef = useRef();
|
||||
const [filterCompany, setFilterCompany] = useState('');
|
||||
const [selectedBookIds, setSelectedBookIds] = useState([]);
|
||||
const { sortKey: bbSortKey, sortDir: bbSortDir, toggle: bbToggle, sort: bbSort } = useSortable('updated_at');
|
||||
|
||||
useEffect(() => {
|
||||
@@ -175,7 +174,8 @@ export default function BrandBook() {
|
||||
|
||||
const timeoutId = setTimeout(() => {
|
||||
if (address.includes(',') && address.length >= 12) {
|
||||
loadMapsFromAddress(address, { silent: true });
|
||||
// Called through a ref so the debounce isn't reset by the handler's identity.
|
||||
loadMapsFromAddressRef.current(address, { silent: true });
|
||||
}
|
||||
}, 900);
|
||||
|
||||
@@ -222,7 +222,6 @@ export default function BrandBook() {
|
||||
setLoadingBooks(true);
|
||||
const { data } = await supabase.from('brand_books').select('*').order('updated_at', { ascending: false });
|
||||
setSavedBooks(data || []);
|
||||
setSelectedBookIds(prev => prev.filter(id => (data || []).some(book => book.id === id)));
|
||||
setLoadingBooks(false);
|
||||
};
|
||||
|
||||
@@ -235,6 +234,8 @@ export default function BrandBook() {
|
||||
setBookInfo(b => ({ ...b, revision: normalizeRevision(b.revision) }));
|
||||
};
|
||||
|
||||
const loadMapsFromAddressRef = useRef(null);
|
||||
|
||||
const loadMapsFromAddress = async (address = bookInfo.customerAddress, { silent = false, feature = null } = {}) => {
|
||||
const trimmed = String(address || '').trim();
|
||||
if (!trimmed) {
|
||||
@@ -290,6 +291,10 @@ export default function BrandBook() {
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadMapsFromAddressRef.current = loadMapsFromAddress;
|
||||
});
|
||||
|
||||
const handleCustomerAddressChange = (e) => {
|
||||
const value = e.target.value;
|
||||
setBookInfo(b => ({ ...b, customerAddress: value, siteAddress: value }));
|
||||
|
||||
@@ -32,7 +32,6 @@ function TeamCompanies() {
|
||||
const [editingUserId, setEditingUserId] = useState(null);
|
||||
const [editUserVal, setEditUserVal] = useState('');
|
||||
const [deletingUserId, setDeletingUserId] = useState(null);
|
||||
const [filterCompany, setFilterCompany] = useState('');
|
||||
const [userSubTab, setUserSubTab] = useState(profileRole === 'external' ? 'external' : 'client');
|
||||
const { sortKey: coSortKey, sortDir: coSortDir, toggle: coToggle, sort: coSort } = useSortable('name');
|
||||
const { sortKey: clSortKey, sortDir: clSortDir, toggle: clToggle, sort: clSort } = useSortable('name');
|
||||
@@ -51,6 +50,9 @@ function TeamCompanies() {
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
// load() only setStates after awaiting its queries; the rule can't see past the
|
||||
// call boundary, and load() is shared with the create/delete handlers below.
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
useEffect(() => { load(); }, []);
|
||||
|
||||
const handleCreate = async (e) => {
|
||||
@@ -144,8 +146,6 @@ function TeamCompanies() {
|
||||
console.error('Subcontractor folder sync failed:', folderError);
|
||||
}
|
||||
}
|
||||
if (userForm.role === 'team' || userForm.role === 'external') {
|
||||
}
|
||||
setShowNewUser(false);
|
||||
setUserForm({ name: '', email: '', password: '', company_id: '', role: 'client' });
|
||||
load();
|
||||
|
||||
@@ -6,7 +6,7 @@ import StatusBadge from '../components/StatusBadge';
|
||||
import { supabase } from '../lib/supabase';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import { serviceTypes } from '../data/mockData';
|
||||
import { cleanupTaskStorage, deleteCompanyData } from '../lib/deleteHelpers';
|
||||
import { deleteCompanyData } from '../lib/deleteHelpers';
|
||||
import { logActivity } from '../lib/activityLog';
|
||||
import { ensureProjectFolder, renameCompanyFolder } from '../lib/folderSync';
|
||||
|
||||
@@ -70,7 +70,6 @@ export default function CompanyDetail() {
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
load();
|
||||
}, [id]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
|
||||
@@ -116,7 +116,7 @@ export default function ProfilePage() {
|
||||
setViewedProfile(profile);
|
||||
setViewedCompanies([...names]);
|
||||
setPrimaryCompanyAddress(primaryAddress);
|
||||
} catch (err) {
|
||||
} catch {
|
||||
if (!cancelled) setProfileError('Unable to load profile.');
|
||||
} finally {
|
||||
if (!cancelled) setLoadingProfile(false);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams, Link, useNavigate } from 'react-router-dom';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import Layout from '../components/Layout';
|
||||
import PageLoader from '../components/PageLoader';
|
||||
import ProfileAvatar from '../components/ProfileAvatar';
|
||||
@@ -33,11 +33,9 @@ const MODAL_IN = { fontSize: 13, color: 'var(--text-primary)', background: 'va
|
||||
|
||||
export default function ProjectDetailPage() {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const { currentUser } = useAuth();
|
||||
|
||||
const isClient = currentUser?.role === 'client';
|
||||
const isExternal = currentUser?.role === 'external';
|
||||
const isTeam = currentUser?.role === 'team';
|
||||
|
||||
const { refreshKey } = useLiveRefresh(['tasks', 'projects', 'project_members', 'profiles']);
|
||||
@@ -148,23 +146,6 @@ export default function ProjectDetailPage() {
|
||||
setSavingName(false);
|
||||
};
|
||||
|
||||
const handleDeleteProject = async () => {
|
||||
if (!window.confirm(`Delete project "${project.name}"?`)) return;
|
||||
const { data: { session } } = await supabase.auth.getSession();
|
||||
const res = await fetch(`/api/delete-project?id=${id}`, { method: 'DELETE', headers: { Authorization: `Bearer ${session?.access_token}` } });
|
||||
if (!res.ok) { const d = await res.json(); alert(d.error || 'Delete failed'); return; }
|
||||
navigate(isClient ? '/tasks' : `/company/${company?.id}`);
|
||||
};
|
||||
|
||||
const handleDeleteTask = async (taskId, e) => {
|
||||
e.stopPropagation();
|
||||
if (!window.confirm('Delete this task?')) return;
|
||||
const { data: { session } } = await supabase.auth.getSession();
|
||||
const res = await fetch(`/api/delete-task?id=${taskId}`, { method: 'DELETE', headers: { Authorization: `Bearer ${session?.access_token}` } });
|
||||
if (!res.ok) { const d = await res.json(); alert(d.error || 'Delete failed'); return; }
|
||||
setTasks(prev => prev.filter(t => t.id !== taskId));
|
||||
};
|
||||
|
||||
const handleAddMember = async () => {
|
||||
setSavingMembers(true);
|
||||
const currentIds = new Set(members.filter(m => m.profile?.role === 'external').map(m => m.profile_id));
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import Layout from '../components/Layout';
|
||||
import PageLoader from '../components/PageLoader';
|
||||
@@ -13,7 +13,7 @@ import { useLiveRefresh } from '../hooks/useLiveRefresh';
|
||||
import { useActionLock } from '../hooks/useActionLock';
|
||||
import FileAttachment from '../components/FileAttachment';
|
||||
import { sendTaskStatusUpdate } from '../lib/taskNotifications';
|
||||
import { encodeRejectedNote, parseRejectedNote, isReviewShadowSubmission, REVIEW_SHADOW_PREFIX, getVisibleTaskSubmissions, getTaskDerivedState } from '../lib/taskVersions';
|
||||
import { encodeRejectedNote, parseRejectedNote, REVIEW_SHADOW_PREFIX, getVisibleTaskSubmissions, getTaskDerivedState } from '../lib/taskVersions';
|
||||
import { getCurrentVersionForTask } from '../lib/taskDeadlines';
|
||||
import { getSubmissionDisplayName, mergeSubmissionDisplayNames } from '../lib/submissionDisplay';
|
||||
|
||||
@@ -261,7 +261,6 @@ export default function TaskDetail() {
|
||||
const [revisionForm, setRevisionForm] = useState({ description: '', deadline: '' });
|
||||
const [revisionFiles, setRevisionFiles] = useState([]);
|
||||
const [revisionSaving, setRevisionSaving] = useState(false);
|
||||
const revisionFileRef = useRef(null);
|
||||
const [rejectModal, setRejectModal] = useState(false);
|
||||
const [rejectNote, setRejectNote] = useState('');
|
||||
const [rejectSaving, setRejectSaving] = useState(false);
|
||||
@@ -976,7 +975,7 @@ export default function TaskDetail() {
|
||||
</div>
|
||||
{comments.length === 0
|
||||
? <div className="card-empty-center">No comments</div>
|
||||
: commentRows.map((c, i) => {
|
||||
: commentRows.map((c) => {
|
||||
const d = new Date(c.created_at);
|
||||
const dateStr = d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
|
||||
const timeStr = d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
|
||||
|
||||
+5
-64
@@ -79,50 +79,7 @@ function TasksStatsRow({ tasks = [] }) {
|
||||
);
|
||||
}
|
||||
|
||||
function TasksPageShell({ statsTasks = [], projects = [], onAddProject = null, children }) {
|
||||
const [projSortKey, setProjSortKey] = useState('status');
|
||||
const [projSortDir, setProjSortDir] = useState('asc');
|
||||
const [projTab, setProjTab] = useState('active');
|
||||
const toggleProjSort = (col) => {
|
||||
if (projSortKey === col) setProjSortDir(d => d === 'asc' ? 'desc' : 'asc');
|
||||
else { setProjSortKey(col); setProjSortDir('asc'); }
|
||||
};
|
||||
const completedStatuses = new Set(['completed', 'cancelled', 'archived', 'done']);
|
||||
const projectTabs = [
|
||||
{ id: 'all', label: 'All' },
|
||||
{ id: 'active', label: 'Active' },
|
||||
{ id: 'completed', label: 'Completed' },
|
||||
];
|
||||
const visibleProjects = projects.filter(p => {
|
||||
if (projTab === 'all') return true;
|
||||
const done = completedStatuses.has((p?.status || '').toLowerCase());
|
||||
return projTab === 'completed' ? done : !done;
|
||||
});
|
||||
const projectTabCounts = {
|
||||
all: projects.length,
|
||||
active: projects.filter((p) => !completedStatuses.has((p?.status || '').toLowerCase())).length,
|
||||
completed: projects.filter((p) => completedStatuses.has((p?.status || '').toLowerCase())).length,
|
||||
};
|
||||
const sortedProjects = [...visibleProjects].sort((a, b) => {
|
||||
if (projSortKey === 'status') {
|
||||
const ra = completedStatuses.has((a.status || '').toLowerCase()) ? 1 : 0;
|
||||
const rb = completedStatuses.has((b.status || '').toLowerCase()) ? 1 : 0;
|
||||
if (ra !== rb) return projSortDir === 'asc' ? ra - rb : rb - ra;
|
||||
}
|
||||
const av = (a.name || '').toLowerCase();
|
||||
const bv = (b.name || '').toLowerCase();
|
||||
return projSortDir === 'asc' ? av.localeCompare(bv) : bv.localeCompare(av);
|
||||
});
|
||||
const projectCompletionPct = (project) => {
|
||||
const pt = statsTasks.filter(t => t?.project_id === project?.id);
|
||||
if (pt.length > 0) {
|
||||
return Math.round((pt.filter(t => ['client_approved', 'invoiced', 'paid'].includes(t?.status)).length / pt.length) * 100);
|
||||
}
|
||||
const s = (project?.status || '').toLowerCase();
|
||||
if (s === 'completed' || s === 'done') return 100;
|
||||
if (s === 'cancelled' || s === 'archived') return 0;
|
||||
return 35;
|
||||
};
|
||||
function TasksPageShell({ statsTasks = [], children }) {
|
||||
return (
|
||||
<div className="tasks-shell" style={{ minWidth: 0, flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
|
||||
<TasksStatsRow tasks={statsTasks} />
|
||||
@@ -268,7 +225,7 @@ export default function RequestsPage() {
|
||||
}
|
||||
loadTasksPage();
|
||||
return () => { cancelled = true; };
|
||||
}, [isTeam, isExternal, isClient, currentUser?.id, refreshKey]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
}, [isTeam, isExternal, isClient, currentUser?.id, refreshKey]);
|
||||
|
||||
const handleAddRequest = async (formData, files, existingProjects) => {
|
||||
if (addSaving) return;
|
||||
@@ -293,7 +250,6 @@ export default function RequestsPage() {
|
||||
console.error('Request folder sync failed:', folderError);
|
||||
}
|
||||
if (files.length > 0) {
|
||||
const taskCompany = companies?.find(c => c.id === formData.companyId);
|
||||
setShowAddForm(false);
|
||||
setUploadProgress({ active: true, label: 'Uploading files…', percent: 0 });
|
||||
for (let fi = 0; fi < files.length; fi++) {
|
||||
@@ -459,7 +415,7 @@ export default function RequestsPage() {
|
||||
return cos.slice().sort((a, b) => a.name.localeCompare(b.name));
|
||||
}
|
||||
return companies.slice().sort((a, b) => (a.name || '').localeCompare(b.name || ''));
|
||||
}, [isClient, companies, currentUser]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
}, [isClient, companies, currentUser]);
|
||||
|
||||
// Normalize all tasks to a common row shape for unified table render
|
||||
const allRows = useMemo(() => {
|
||||
@@ -487,7 +443,7 @@ export default function RequestsPage() {
|
||||
submittedAt: derived.latestActivityAt,
|
||||
};
|
||||
}).filter(Boolean);
|
||||
}, [tasks, submissions, deliveries, isClient]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
}, [tasks, submissions, deliveries, isClient]);
|
||||
|
||||
const filteredRows = useMemo(() => {
|
||||
return allRows
|
||||
@@ -587,13 +543,6 @@ export default function RequestsPage() {
|
||||
return '';
|
||||
});
|
||||
|
||||
const projectOptions = useMemo(() => {
|
||||
if (!isExternal) return [];
|
||||
return [...new Map(
|
||||
allRows.map(r => projects.find(p => p.id === r.projectId)).filter(Boolean).map(p => [p.id, p])
|
||||
).values()];
|
||||
}, [isExternal, allRows, projects]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
|
||||
const renderRow = (row) => {
|
||||
const project = projects.find(p => p.id === row.projectId);
|
||||
@@ -639,18 +588,10 @@ export default function RequestsPage() {
|
||||
if (loadError) return <Layout><div style={{ padding: 24 }}><p style={{ color: 'var(--text-muted)', marginBottom: 12 }}>Failed to load. Check your connection and try again.</p><button className="btn btn-outline" onClick={() => window.location.reload()}>Retry</button></div></Layout>;
|
||||
|
||||
const filteredStatTasks = filteredRows.map(r => tasks.find(t => t.id === r.id)).filter(Boolean);
|
||||
const filteredProjectsShell = filterCompany ? projects.filter(p => p.company_id === filterCompany) : projects;
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<TasksPageShell
|
||||
statsTasks={filteredStatTasks}
|
||||
projects={filteredProjectsShell}
|
||||
onAddProject={(isTeam || isClient) ? () => {
|
||||
setAddProjectForm(f => ({ ...f, companyId: !isTeam && filterableCompanies.length === 1 ? filterableCompanies[0].id : f.companyId }));
|
||||
setShowAddProjectForm(true); setAddProjectError('');
|
||||
} : null}
|
||||
>
|
||||
<TasksPageShell statsTasks={filteredStatTasks}>
|
||||
{/* Add project modal */}
|
||||
{showAddProjectForm && (
|
||||
<div style={popupOverlayStyle}>
|
||||
|
||||
@@ -10,9 +10,11 @@ import { supabase } from '../../lib/supabase';
|
||||
import { generateInvoicePDF, generateReceiptPDF } from '../../lib/invoice';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
import { useSortable } from '../../hooks/useSortable';
|
||||
import InvoiceDetailPopup, { POPUP_FIELD_LABEL } from '../../components/InvoiceDetailPopup';
|
||||
import InvoiceDetailPopup from '../../components/InvoiceDetailPopup';
|
||||
import { POPUP_FIELD_LABEL } from '../../lib/popupStyles';
|
||||
import InvoicePopupTable from '../../components/InvoicePopupTable';
|
||||
|
||||
const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
|
||||
const statusColor = { draft: 'not_started', sent: 'in_progress', paid: 'client_approved' };
|
||||
const invoiceStatusLabel = (status) => {
|
||||
if (status === 'sent') return 'Invoiced';
|
||||
@@ -165,7 +167,6 @@ export default function MyInvoices() {
|
||||
return () => document.removeEventListener('mousedown', onDocClick);
|
||||
}, [filterMenuOpen]);
|
||||
|
||||
const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
|
||||
const invoiceYears = [...new Set(invoices.map(i => i.invoice_date?.slice(0, 4)).filter(Boolean))].sort((a, b) => b.localeCompare(a));
|
||||
const availableCompanyOptions = (currentUser?.companies?.length ? currentUser.companies : (currentUser?.company ? [currentUser.company] : []))
|
||||
.filter(company => company?.id && invoices.some(inv => inv.company_id === company.id))
|
||||
|
||||
+2
-27
@@ -9,8 +9,8 @@ import { readPageCache, writePageCache } from '../../lib/pageCache';
|
||||
import { useSortable } from '../../hooks/useSortable';
|
||||
import { isCompletedVersionEligible } from '../../lib/invoiceVersionRules';
|
||||
import SubcontractorInvoiceForm from '../../components/SubcontractorInvoiceForm';
|
||||
import { popupOverlayStyle, popupSurfaceStyle } from '../../lib/popupStyles';
|
||||
import InvoiceDetailPopup, { POPUP_FIELD_LABEL } from '../../components/InvoiceDetailPopup';
|
||||
import { popupOverlayStyle, popupSurfaceStyle, POPUP_FIELD_LABEL } from '../../lib/popupStyles';
|
||||
import InvoiceDetailPopup from '../../components/InvoiceDetailPopup';
|
||||
import InvoicePopupTable from '../../components/InvoicePopupTable';
|
||||
import { generateSubcontractorPOPDF } from '../../lib/invoice';
|
||||
|
||||
@@ -60,10 +60,6 @@ function parseItemVersionNumber(item) {
|
||||
return match ? Number(match[1]) : 0;
|
||||
}
|
||||
|
||||
function itemVersionLabel(item) {
|
||||
return `R${String(parseItemVersionNumber(item)).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function itemWorkLabel(item) {
|
||||
return parseItemVersionNumber(item) > 0 ? 'Revision' : 'New';
|
||||
}
|
||||
@@ -72,24 +68,6 @@ function cleanItemDescription(item) {
|
||||
return String(item?.description || '—').replace(/\s*[–-]\s*R\d{2}\b/i, '').trim() || '—';
|
||||
}
|
||||
|
||||
async function fetchTaskTypeMap(taskIds) {
|
||||
const uniqueTaskIds = [...new Set((taskIds || []).filter(Boolean))];
|
||||
if (uniqueTaskIds.length === 0) return {};
|
||||
const { data, error } = await supabase
|
||||
.from('tasks')
|
||||
.select('id, title, submissions(service_type, type)')
|
||||
.in('id', uniqueTaskIds);
|
||||
if (error) throw error;
|
||||
const next = {};
|
||||
for (const task of (data || [])) {
|
||||
const submissions = asArray(task.submissions);
|
||||
const initial = submissions.find((submission) => submission?.type === 'initial' && submission?.service_type);
|
||||
const fallback = submissions.find((submission) => submission?.service_type);
|
||||
next[task.id] = initial?.service_type || fallback?.service_type || task.title || 'Other';
|
||||
}
|
||||
return next;
|
||||
}
|
||||
|
||||
function buildPDFArgs(invoice, profile, total, statusOverride) {
|
||||
return {
|
||||
po_number: invoice.invoice_number,
|
||||
@@ -125,7 +103,6 @@ export default function MyInvoices() {
|
||||
const [viewingInvoice, setViewingInvoice] = useState(null);
|
||||
const [detailLoading, setDetailLoading] = useState(false);
|
||||
const [detailError, setDetailError] = useState('');
|
||||
const [detailTaskTypeMap, setDetailTaskTypeMap] = useState({});
|
||||
const [submittingInvoice, setSubmittingInvoice] = useState(false);
|
||||
const [downloadingInvoice, setDownloadingInvoice] = useState(false);
|
||||
const [downloadingReceipt, setDownloadingReceipt] = useState(false);
|
||||
@@ -249,8 +226,6 @@ export default function MyInvoices() {
|
||||
.eq('id', invoiceId)
|
||||
.single();
|
||||
if (err || !data) throw err || new Error('Invoice not found.');
|
||||
const taskTypeMap = await fetchTaskTypeMap(asArray(data.items).map((item) => item.task_id));
|
||||
setDetailTaskTypeMap(taskTypeMap);
|
||||
setViewingInvoice(data);
|
||||
} catch (err) {
|
||||
setDetailError(err?.message || 'Failed to load invoice.');
|
||||
|
||||
@@ -18,19 +18,6 @@ import { isReviewShadowDescription } from '../../lib/taskVersions';
|
||||
|
||||
// ─── Helpers ──────────────────────────────────────────────────────────────
|
||||
|
||||
const ICON_TONES = [
|
||||
{ bg: 'color-mix(in srgb, var(--accent) 15%, transparent)', color: 'var(--accent)' },
|
||||
{ bg: 'color-mix(in srgb, var(--positive) 15%, transparent)', color: 'var(--positive)' },
|
||||
{ bg: 'color-mix(in srgb, var(--info) 15%, transparent)', color: 'var(--info)' },
|
||||
{ bg: 'color-mix(in srgb, var(--violet) 15%, transparent)', color: 'var(--violet)' },
|
||||
];
|
||||
|
||||
function iconTone(key) {
|
||||
let h = 0;
|
||||
for (let i = 0; i < (key || '').length; i++) h = (h * 31 + key.charCodeAt(i)) % ICON_TONES.length;
|
||||
return ICON_TONES[h];
|
||||
}
|
||||
|
||||
function fmtMoney(n) {
|
||||
if (Math.abs(n) >= 1000000) return `$${(n / 1000000).toFixed(2)}M`;
|
||||
if (Math.abs(n) >= 1000) return `$${(n / 1000).toFixed(1)}k`;
|
||||
@@ -486,7 +473,7 @@ function HotItemsCard({ submissions, tasks, isClient = false, isExternal = false
|
||||
);
|
||||
}
|
||||
|
||||
function TeamPerformanceCard({ tasks, profiles, deliveries, submissions, cardHeight = null }) {
|
||||
function TeamPerformanceCard({ profiles, deliveries, submissions, cardHeight = null }) {
|
||||
const navigate = useNavigate();
|
||||
const profileMap = useMemo(() => {
|
||||
const m = new Map();
|
||||
@@ -547,7 +534,7 @@ function TeamPerformanceCard({ tasks, profiles, deliveries, submissions, cardHei
|
||||
items.push({ task: e.task, kind: e.version === 0 ? 'new' : 'rev', monthKey, person });
|
||||
});
|
||||
return items;
|
||||
}, [submissions, delByVer, delByTask, delAtVer, delAtTask]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
}, [submissions, delByVer, delByTask, delAtVer, delAtTask]);
|
||||
|
||||
const monthsWithData = useMemo(() => new Set(eligibleItems.map(i => i.monthKey).filter(Boolean)), [eligibleItems]);
|
||||
const allMonthOpts = useMemo(() => {
|
||||
@@ -869,7 +856,7 @@ export default function TeamDashboard() {
|
||||
<div className="dash-row-trio">
|
||||
<ActivityFeed events={activityEvents} />
|
||||
<TasksInProgressCard tasks={inProgressTasks} />
|
||||
<TeamPerformanceCard tasks={tasks} profiles={allProfiles} deliveries={perfDeliveries} submissions={perfSubmissions} />
|
||||
<TeamPerformanceCard profiles={allProfiles} deliveries={perfDeliveries} submissions={perfSubmissions} />
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
@@ -10,7 +10,8 @@ import { generateInvoicePDF, generateReceiptPDF } from '../../lib/invoice';
|
||||
import { blobToEmailAttachment, sendEmail } from '../../lib/email';
|
||||
import { withTimeout } from '../../lib/withTimeout';
|
||||
import { useSortable } from '../../hooks/useSortable';
|
||||
import InvoiceDetailPopup, { POPUP_FIELD_LABEL } from '../../components/InvoiceDetailPopup';
|
||||
import InvoiceDetailPopup from '../../components/InvoiceDetailPopup';
|
||||
import { POPUP_FIELD_LABEL } from '../../lib/popupStyles';
|
||||
import InvoicePopupTable from '../../components/InvoicePopupTable';
|
||||
|
||||
const statusColor = { draft: 'not_started', sent: 'in_progress', paid: 'client_approved' };
|
||||
|
||||
@@ -11,36 +11,20 @@ import { useActionLock } from '../../hooks/useActionLock';
|
||||
import { supabase } from '../../lib/supabase';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
import { readPageCache, writePageCache } from '../../lib/pageCache';
|
||||
import { exportCPAPackage, generateSubcontractorPOPDF, generateInvoicePDF } from '../../lib/invoice';
|
||||
import { generateSubcontractorPOPDF, generateInvoicePDF } from '../../lib/invoice';
|
||||
import { withTimeout } from '../../lib/withTimeout';
|
||||
import LoadingButton from '../../components/LoadingButton';
|
||||
import { blobToEmailAttachment, sendEmail } from '../../lib/email';
|
||||
import { popupOverlayStyle, popupSurfaceStyle } from '../../lib/popupStyles';
|
||||
import { popupOverlayStyle, popupSurfaceStyle, POPUP_FIELD_LABEL } from '../../lib/popupStyles';
|
||||
import FileAttachment from '../../components/FileAttachment';
|
||||
import { isReviewShadowDescription, pickInitialServiceType } from '../../lib/taskVersions';
|
||||
import { getRevisionChargeQuantity, isCompletedVersionEligible, isInitialVersionEligible } from '../../lib/invoiceVersionRules';
|
||||
import { TeamInvoiceDetailPanel } from './TeamInvoiceDetail';
|
||||
import InvoiceDetailPopup, { POPUP_FIELD_LABEL } from '../../components/InvoiceDetailPopup';
|
||||
import InvoiceDetailPopup from '../../components/InvoiceDetailPopup';
|
||||
import InvoicePopupTable from '../../components/InvoicePopupTable';
|
||||
|
||||
const CATEGORIES = ['Software', 'Contractor', 'Advertising', 'Office', 'Travel', 'Meals', 'Equipment', 'Other'];
|
||||
const statusColor = { draft: 'not_started', sent: 'in_progress', paid: 'client_approved' };
|
||||
const poStatusColor = {
|
||||
draft: 'not_started',
|
||||
sent: 'in_progress',
|
||||
approved: 'client_approved',
|
||||
ready_to_pay: 'in_progress',
|
||||
paid: 'client_approved',
|
||||
cancelled: 'needs_revision',
|
||||
};
|
||||
const poStatusLabel = {
|
||||
draft: 'Draft',
|
||||
sent: 'Sent',
|
||||
approved: 'Approved',
|
||||
ready_to_pay: 'Ready to Pay',
|
||||
paid: 'Paid',
|
||||
cancelled: 'Cancelled',
|
||||
};
|
||||
const invoiceStatusBadgeLabel = (status) => {
|
||||
if (status === 'sent') return 'Invoiced';
|
||||
return status ? status.charAt(0).toUpperCase() + status.slice(1) : '—';
|
||||
@@ -126,10 +110,6 @@ function parseSubInvoiceItemVersionNumber(item) {
|
||||
return match ? Number(match[1]) : 0;
|
||||
}
|
||||
|
||||
function subInvoiceItemVersionLabel(item) {
|
||||
return `R${String(parseSubInvoiceItemVersionNumber(item)).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function subInvoiceItemWorkLabel(item) {
|
||||
return parseSubInvoiceItemVersionNumber(item) > 0 ? 'Revision' : 'New';
|
||||
}
|
||||
@@ -138,30 +118,6 @@ function cleanSubInvoiceItemDescription(item) {
|
||||
return String(item?.description || '—').replace(/\s*[–-]\s*R\d{2}\b/i, '').trim() || '—';
|
||||
}
|
||||
|
||||
function asArray(value) {
|
||||
if (Array.isArray(value)) return value;
|
||||
if (value == null) return [];
|
||||
return typeof value === 'object' ? [value] : [];
|
||||
}
|
||||
|
||||
async function fetchSubInvoiceTaskTypeMap(taskIds) {
|
||||
const uniqueTaskIds = [...new Set((taskIds || []).filter(Boolean))];
|
||||
if (uniqueTaskIds.length === 0) return {};
|
||||
const { data, error } = await supabase
|
||||
.from('tasks')
|
||||
.select('id, title, submissions(service_type, type)')
|
||||
.in('id', uniqueTaskIds);
|
||||
if (error) throw error;
|
||||
const next = {};
|
||||
for (const task of (data || [])) {
|
||||
const submissions = asArray(task.submissions);
|
||||
const initial = submissions.find((submission) => submission?.type === 'initial' && submission?.service_type);
|
||||
const fallback = submissions.find((submission) => submission?.service_type);
|
||||
next[task.id] = initial?.service_type || fallback?.service_type || task.title || 'Other';
|
||||
}
|
||||
return next;
|
||||
}
|
||||
|
||||
function CurrencyInput({ value, onChange, placeholder = '0.00', required = false, min = '0', step = '0.01' }) {
|
||||
return (
|
||||
<div style={FINANCE_MODAL_AMOUNT_FIELD_STYLE}>
|
||||
@@ -243,9 +199,6 @@ export default function Invoices() {
|
||||
const { sortKey: invSortKey, sortDir: invSortDir, toggle: invToggle, sort: invSort } = useSortable('invoice_date', 'desc');
|
||||
const { sortKey: expSortKey, sortDir: expSortDir, toggle: expToggle, sort: expSort } = useSortable('date', 'desc');
|
||||
const { sortKey: subSortKey, sortDir: subSortDir, toggle: subToggle, sort: subSort } = useSortable('submitted_at');
|
||||
const { sortKey: ovExpKey, sortDir: ovExpDir, toggle: ovExpToggle } = useSortable('date');
|
||||
const { sortKey: ovSubKey, sortDir: ovSubDir, toggle: ovSubToggle } = useSortable('date');
|
||||
const { sortKey: ovInvKey, sortDir: ovInvDir, toggle: ovInvToggle } = useSortable('invoice_date');
|
||||
const { sortKey: subPopupKey, sortDir: subPopupDir, toggle: subPopupToggle, sort: subPopupSort } = useSortable('description');
|
||||
const [filterCompany, setFilterCompany] = useState('');
|
||||
const initMonth = () => { const n = new Date(); return { month: n.getMonth(), year: n.getFullYear() }; };
|
||||
@@ -253,7 +206,6 @@ export default function Invoices() {
|
||||
const [ovMonth2, setOvMonth2] = useState(initMonth);
|
||||
const [ovMonth3, setOvMonth3] = useState(initMonth);
|
||||
const [exportYear, setExportYear] = useState(new Date().getFullYear());
|
||||
const [exporting, setExporting] = useState(false);
|
||||
|
||||
const [expenses, setExpenses] = useState([]);
|
||||
const [expensesLoading, setExpensesLoading] = useState(true);
|
||||
@@ -272,18 +224,12 @@ export default function Invoices() {
|
||||
const [subWhoFilter, setSubWhoFilter] = useState('all');
|
||||
const [subStatusFilter, setSubStatusFilter] = useState('all');
|
||||
const [subYearFilter, setSubYearFilter] = useState('all');
|
||||
const [subcontractorPOs, setSubcontractorPOs] = useState([]);
|
||||
const [subcontractorLoading, setSubcontractorLoading] = useState(true);
|
||||
const [subcontractorError, setSubcontractorError] = useState('');
|
||||
const [selectedSubcontractorPOId, setSelectedSubcontractorPOId] = useState('');
|
||||
const [subInvoices, setSubInvoices] = useState([]);
|
||||
const [subInvoicesLoading, setSubInvoicesLoading] = useState(true);
|
||||
const [subInvoicesError, setSubInvoicesError] = useState('');
|
||||
const [markingPaid, setMarkingPaid] = useState('');
|
||||
const [viewingSubInvoice, setViewingSubInvoice] = useState(null);
|
||||
const [viewingSubInvoiceTaskTypeMap, setViewingSubInvoiceTaskTypeMap] = useState({});
|
||||
const [viewingInvoice, setViewingInvoice] = useState(null);
|
||||
const [expandedSubInvoiceId, setExpandedSubInvoiceId] = useState(null);
|
||||
|
||||
// ── New Invoice form ──────────────────────────────────────────────────────
|
||||
const [showInvoiceForm, setShowInvoiceForm] = useState(false);
|
||||
@@ -301,30 +247,12 @@ export default function Invoices() {
|
||||
const guard = useActionLock();
|
||||
const [invLoadingTasks, setInvLoadingTasks] = useState(false);
|
||||
const invDragItem = useRef(null);
|
||||
const pageLoading = loading || expensesLoading || subcontractorLoading || subInvoicesLoading;
|
||||
const pageLoading = loading || expensesLoading || subInvoicesLoading;
|
||||
|
||||
useEffect(() => {
|
||||
supabase.from('companies').select('id, name, contact_email').order('name').then(({ data }) => setInvCompanies(data || []));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
async function loadSubInvoiceTaskTypes() {
|
||||
if (!viewingSubInvoice?.items?.length) {
|
||||
setViewingSubInvoiceTaskTypeMap({});
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const map = await fetchSubInvoiceTaskTypeMap(asArray(viewingSubInvoice.items).map((item) => item.task_id));
|
||||
if (!cancelled) setViewingSubInvoiceTaskTypeMap(map);
|
||||
} catch {
|
||||
if (!cancelled) setViewingSubInvoiceTaskTypeMap({});
|
||||
}
|
||||
}
|
||||
loadSubInvoiceTaskTypes();
|
||||
return () => { cancelled = true; };
|
||||
}, [viewingSubInvoice]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!invCompanyId) { setInvUnbilledTasks([]); setInvUnbilledRevisions([]); setInvPriceList([]); setInvItems([invNewItem()]); setInvBillTo(''); setInvEmail(''); setInvRecipients([]); return; }
|
||||
const co = invCompanies.find(c => c.id === invCompanyId);
|
||||
@@ -456,13 +384,7 @@ export default function Invoices() {
|
||||
|
||||
useEffect(() => {
|
||||
async function loadExpenses() {
|
||||
const [{ data, error }, { data: purchaseOrders, error: purchaseOrdersError }] = await Promise.all([
|
||||
supabase.from('expenses').select('*').order('date', { ascending: false }),
|
||||
supabase
|
||||
.from('subcontractor_payments')
|
||||
.select('*, profile:profiles!subcontractor_payments_profile_id_fkey(id, name, email), project:projects(id, name, company:companies(name)), items:subcontractor_po_items(*, task:tasks(id, title))')
|
||||
.order('date', { ascending: false }),
|
||||
]);
|
||||
const { data, error } = await supabase.from('expenses').select('*').order('date', { ascending: false });
|
||||
if (error) {
|
||||
console.error('Failed to load expenses:', error);
|
||||
setExpensesError(error.message || 'Failed to load expenses.');
|
||||
@@ -471,16 +393,7 @@ export default function Invoices() {
|
||||
setExpenses(data || []);
|
||||
setExpensesError('');
|
||||
}
|
||||
if (purchaseOrdersError) {
|
||||
console.error('Failed to load subcontractor POs:', purchaseOrdersError);
|
||||
setSubcontractorError(purchaseOrdersError.message || 'Failed to load subcontractor POs.');
|
||||
setSubcontractorPOs([]);
|
||||
} else {
|
||||
setSubcontractorPOs(purchaseOrders || []);
|
||||
setSubcontractorError('');
|
||||
}
|
||||
setExpensesLoading(false);
|
||||
setSubcontractorLoading(false);
|
||||
}
|
||||
loadExpenses();
|
||||
}, []);
|
||||
@@ -579,37 +492,6 @@ export default function Invoices() {
|
||||
win.location.href = data.signedUrl;
|
||||
};
|
||||
|
||||
const updateSubcontractorPO = async (po, updates, errorLabel = 'Failed to update PO') => {
|
||||
const { data, error } = await supabase
|
||||
.from('subcontractor_payments')
|
||||
.update(updates)
|
||||
.eq('id', po.id)
|
||||
.select('*, profile:profiles!subcontractor_payments_profile_id_fkey(id, name, email), project:projects(id, name, company:companies(name)), items:subcontractor_po_items(*, task:tasks(id, title))')
|
||||
.single();
|
||||
if (error) {
|
||||
alert(`${errorLabel}: ${error.message}`);
|
||||
return null;
|
||||
}
|
||||
if (data) {
|
||||
setSubcontractorPOs(prev => prev.map(row => row.id === po.id ? data : row));
|
||||
setSelectedSubcontractorPOId(current => current === po.id ? data.id : current);
|
||||
}
|
||||
return data;
|
||||
};
|
||||
|
||||
const handleSendSubcontractorPO = async (po) => {
|
||||
await updateSubcontractorPO(po, { status: 'sent', sent_at: new Date().toISOString() }, 'Failed to send PO');
|
||||
};
|
||||
|
||||
const handleReadyToPaySubcontractorPO = (po) => {
|
||||
updateSubcontractorPO(po, { status: 'ready_to_pay' }, 'Failed to mark ready to pay');
|
||||
};
|
||||
|
||||
const handleMarkSubcontractorPaid = async (po) => {
|
||||
const paidAt = new Date().toISOString().slice(0, 10);
|
||||
updateSubcontractorPO(po, { status: 'paid', paid_at: paidAt }, 'Failed to mark as paid');
|
||||
};
|
||||
|
||||
const handleMarkSubInvoicePaid = async (invoice) => {
|
||||
setMarkingPaid(invoice.id);
|
||||
try {
|
||||
@@ -710,68 +592,6 @@ export default function Invoices() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleReopenSubcontractorPO = async (po) => {
|
||||
updateSubcontractorPO(po, { status: 'draft', paid_at: null, cancelled_at: null }, 'Failed to reopen PO');
|
||||
};
|
||||
|
||||
const handleCancelSubcontractorPO = async (po) => {
|
||||
if (!window.confirm(`Cancel ${po.po_number || 'this PO'}?`)) return;
|
||||
updateSubcontractorPO(po, { status: 'cancelled', cancelled_at: new Date().toISOString() }, 'Failed to cancel PO');
|
||||
};
|
||||
|
||||
const handleDeleteSubcontractorPO = async (id) => {
|
||||
if (!window.confirm('Delete this subcontractor PO?')) return;
|
||||
await supabase.from('subcontractor_payments').delete().eq('id', id);
|
||||
setSubcontractorPOs(prev => prev.filter(po => po.id !== id));
|
||||
setSelectedSubcontractorPOId(current => current === id ? '' : current);
|
||||
};
|
||||
|
||||
const handleDownloadSubcontractorPO = async (po) => {
|
||||
try {
|
||||
await generateSubcontractorPOPDF(po);
|
||||
} catch (error) {
|
||||
console.error('Failed to download subcontractor PO:', error);
|
||||
alert(`Failed to download PO: ${error.message || 'unknown error'}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCPAExport = async () => {
|
||||
setExporting(true);
|
||||
try {
|
||||
const yearInvoices = invoices.filter(inv =>
|
||||
inv.status === 'paid' && new Date(inv.invoice_date).getFullYear() === exportYear
|
||||
);
|
||||
const yearExpenses = expenses.filter(exp =>
|
||||
new Date(exp.date).getFullYear() === exportYear
|
||||
);
|
||||
const yearSubcontractorExpenses = subcontractorPOs
|
||||
.filter(po => po.status === 'paid' && new Date(po.paid_at || po.date).getFullYear() === exportYear)
|
||||
.map(po => ({
|
||||
date: po.paid_at || po.date,
|
||||
category: 'Contractor',
|
||||
description: `Subcontractor: ${po.profile?.name || 'External'} — ${po.items?.length ? po.items.map(item => item.description).join('; ') : po.description}`,
|
||||
amount: po.amount,
|
||||
notes: [po.po_number, po.project?.name, po.notes || po.profile?.email || ''].filter(Boolean).join(' · '),
|
||||
}));
|
||||
const exportExpenses = [...yearExpenses, ...yearSubcontractorExpenses];
|
||||
if (!yearInvoices.length && !exportExpenses.length) {
|
||||
alert(`No data found for ${exportYear}.`);
|
||||
return;
|
||||
}
|
||||
const { data: allItems } = yearInvoices.length ? await supabase
|
||||
.from('invoice_items')
|
||||
.select('invoice_id, description')
|
||||
.in('invoice_id', yearInvoices.map(i => i.id)) : { data: [] };
|
||||
const itemsByInvoice = (allItems || []).reduce((acc, item) => {
|
||||
(acc[item.invoice_id] = acc[item.invoice_id] || []).push(item);
|
||||
return acc;
|
||||
}, {});
|
||||
await exportCPAPackage(yearInvoices, itemsByInvoice, exportExpenses, exportYear);
|
||||
} finally {
|
||||
setExporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const paidYears = [...new Set(
|
||||
invoices.filter(i => i.status === 'paid').map(i => new Date(i.invoice_date).getFullYear())
|
||||
)].sort((a, b) => b - a);
|
||||
@@ -783,45 +603,12 @@ export default function Invoices() {
|
||||
return true;
|
||||
});
|
||||
|
||||
const totals = {
|
||||
all: invoices.reduce((s, i) => s + Number(i.total), 0),
|
||||
draft: invoices.filter(i => i.status === 'draft').reduce((s, i) => s + Number(i.total), 0),
|
||||
sent: invoices.filter(i => i.status === 'sent').reduce((s, i) => s + Number(i.total), 0),
|
||||
paid: invoices.filter(i => i.status === 'paid').reduce((s, i) => s + Number(i.total), 0),
|
||||
netReceived: invoices.filter(i => i.status === 'paid').reduce((s, i) => s + Number(i.total) - Number(i.stripe_fee || 0), 0),
|
||||
};
|
||||
|
||||
const expenseYears = [...new Set(expenses.map(e => e.date?.slice(0, 4)).filter(Boolean))].sort((a, b) => b - a);
|
||||
const filteredExpenses = expenses.filter(e => {
|
||||
if (expYearFilter !== 'all' && e.date?.slice(0, 4) !== expYearFilter) return false;
|
||||
if (expenseFilter !== 'all' && e.category !== expenseFilter) return false;
|
||||
return true;
|
||||
});
|
||||
const paidSubcontractorPOs = subcontractorPOs.filter(po => po.status === 'paid');
|
||||
const payableSubcontractorPOs = subcontractorPOs.filter(po => ['approved', 'ready_to_pay'].includes(po.status));
|
||||
const selectedSubcontractorPO = subcontractorPOs.find(po => po.id === selectedSubcontractorPOId);
|
||||
const subInvoiceItemTotal = (inv) => (inv.items || []).reduce((a, x) => a + Number(x.unit_price || 0) * Number(x.quantity || 1), 0);
|
||||
const paidSubInvoices = subInvoices.filter(i => i.status === 'paid');
|
||||
const totalPaidSubInvoices = paidSubInvoices.reduce((s, i) => s + subInvoiceItemTotal(i), 0);
|
||||
const totalPaidSubcontractors = paidSubcontractorPOs.reduce((s, po) => s + Number(po.amount), 0) + totalPaidSubInvoices;
|
||||
const totalPayableSubcontractorPOs = payableSubcontractorPOs.reduce((s, po) => s + Number(po.amount), 0);
|
||||
const totalPayableSubInvoices = subInvoices.filter(i => i.status === 'submitted').reduce((s, i) => s + subInvoiceItemTotal(i), 0);
|
||||
const totalPayableSubcontractors = totalPayableSubcontractorPOs + totalPayableSubInvoices;
|
||||
const payableSubcontractorCount = payableSubcontractorPOs.length + subInvoices.filter(i => i.status === 'submitted').length;
|
||||
const totalExpenses = filteredExpenses.reduce((s, e) => s + Number(e.amount), 0);
|
||||
const currentYear = new Date().getFullYear();
|
||||
const yearExpenses = expenses.filter(e => new Date(e.date).getFullYear() === currentYear);
|
||||
const currentYearExpenseTotal = yearExpenses.reduce((s, e) => s + Number(e.amount), 0);
|
||||
const currentYearPaidSubcontractorPOs = paidSubcontractorPOs
|
||||
.filter(po => new Date(po.paid_at || po.date).getFullYear() === currentYear)
|
||||
.reduce((s, po) => s + Number(po.amount), 0);
|
||||
const currentYearPaidSubInvoices = paidSubInvoices
|
||||
.filter(i => new Date(i.paid_at).getFullYear() === currentYear)
|
||||
.reduce((s, i) => s + subInvoiceItemTotal(i), 0);
|
||||
const currentYearTotalExpenses = currentYearExpenseTotal + currentYearPaidSubcontractorPOs + currentYearPaidSubInvoices;
|
||||
const revenue = totals.paid;
|
||||
const profit = totals.netReceived - expenses.reduce((s, e) => s + Number(e.amount), 0) - totalPaidSubcontractors;
|
||||
|
||||
const chartYear = exportYear;
|
||||
const chartData = useMemo(() => MONTHS.map((month, mi) => {
|
||||
const paidInvs = invoices.filter(inv => inv.status === 'paid' && new Date(inv.invoice_date).getFullYear() === chartYear && new Date(inv.invoice_date).getMonth() === mi);
|
||||
@@ -937,13 +724,6 @@ export default function Invoices() {
|
||||
const CARD = { background: 'var(--card-bg)', border: 'var(--card-border)', borderRadius: 8, padding: '18px 21px', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)' };
|
||||
const TH = { fontSize: 10, fontWeight: 500, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.6, padding: '0 0 12px 0', border: 'none', background: 'transparent', textAlign: 'left' };
|
||||
const TD = { fontSize: 13, color: 'var(--text-primary)', padding: '5px 0', border: 'none', background: 'transparent', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
|
||||
const sortRows = (arr, key, dir, getter) => [...arr].sort((a, b) => {
|
||||
const av = getter(a, key), bv = getter(b, key);
|
||||
if (av < bv) return dir === 'asc' ? -1 : 1;
|
||||
if (av > bv) return dir === 'asc' ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
const fmtDate = d => d ? new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : '—';
|
||||
const fmtAmt = v => `$${Number(v).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
||||
|
||||
const now = new Date();
|
||||
@@ -1508,7 +1288,7 @@ export default function Invoices() {
|
||||
{ id: 'invoices', label: 'INVOICES' },
|
||||
{ id: 'expenses', label: 'EXPENSES' },
|
||||
{ id: 'sub-invoices', label: 'SUBCONTRACTOR INVOICES' },
|
||||
].map((t, i, arr) => (
|
||||
].map((t) => (
|
||||
<button
|
||||
key={t.id}
|
||||
type="button"
|
||||
|
||||
@@ -131,7 +131,6 @@ export default function TeamReports() {
|
||||
.map((profile) => [profile.name.trim().toLowerCase(), profile.role])
|
||||
);
|
||||
|
||||
const taskMap = new Map((taskRows || []).map((task) => [task.id, task]));
|
||||
const companiesMap = new Map();
|
||||
const projectsMap = new Map();
|
||||
(taskRows || []).forEach((task) => {
|
||||
|
||||
Reference in New Issue
Block a user