Fix 'column task.deadline does not exist' on subcontractor requests
deadline is on submissions, not tasks. Removed from select and fallback. Due date now sourced from PO only. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Krao Hasanee
Vendored
+239
@@ -0,0 +1,239 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
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 STATUS_ORDER = ['in_progress', 'not_started', 'client_review', 'needs_revision', 'on_hold', 'client_approved'];
|
||||
|
||||
function sortTasks(tasks) {
|
||||
return [...tasks].sort((a, b) => {
|
||||
const ai = STATUS_ORDER.indexOf(a.status);
|
||||
const bi = STATUS_ORDER.indexOf(b.status);
|
||||
if (ai !== bi) return ai - bi;
|
||||
return String(a.title || '').localeCompare(String(b.title || ''));
|
||||
});
|
||||
}
|
||||
|
||||
export default function ExternalMyRequests() {
|
||||
const { currentUser } = useAuth();
|
||||
const [projects, setProjects] = useState([]);
|
||||
const [tasks, setTasks] = useState([]);
|
||||
const [poItemsByTaskId, setPoItemsByTaskId] = useState({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
async function load() {
|
||||
if (!currentUser?.id) { setLoading(false); return; }
|
||||
try {
|
||||
// 1. All projects this sub is a member of (RLS filters via project_members)
|
||||
// 2. All tasks in those projects (RLS filters via project_members)
|
||||
// 3. Their PO items — to show PO context (due date, PO#, amount) per task
|
||||
const [
|
||||
{ data: projectData, error: projectError },
|
||||
{ data: taskData, error: taskError },
|
||||
{ data: poItems, error: poError },
|
||||
] = await withTimeout(
|
||||
Promise.all([
|
||||
supabase
|
||||
.from('projects')
|
||||
.select('id, name, company:companies(name)')
|
||||
.order('created_at', { ascending: false }),
|
||||
supabase
|
||||
.from('tasks')
|
||||
.select('id, title, status, current_version, project_id')
|
||||
.order('submitted_at', { ascending: false }),
|
||||
supabase
|
||||
.from('subcontractor_po_items')
|
||||
.select(`
|
||||
id, description, amount,
|
||||
task_id,
|
||||
po:subcontractor_payments!inner(
|
||||
id, po_number, status, due_date
|
||||
)
|
||||
`),
|
||||
]),
|
||||
15000,
|
||||
'External requests load'
|
||||
);
|
||||
|
||||
if (projectError) throw projectError;
|
||||
if (taskError) throw taskError;
|
||||
if (poError) throw poError;
|
||||
|
||||
// Build a map of task_id → PO item for quick lookup
|
||||
const byTask = {};
|
||||
(poItems || []).forEach(item => {
|
||||
if (item.task_id && item.po?.status !== 'cancelled') {
|
||||
byTask[item.task_id] = item;
|
||||
}
|
||||
});
|
||||
|
||||
setProjects(projectData || []);
|
||||
setTasks(taskData || []);
|
||||
setPoItemsByTaskId(byTask);
|
||||
setError('');
|
||||
} catch (err) {
|
||||
console.error('External requests load failed:', err);
|
||||
setError(err.message || 'Failed to load requests.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
load();
|
||||
}, [currentUser?.id]);
|
||||
|
||||
const activeTasks = useMemo(() => tasks.filter(t => t.status !== 'client_approved'), [tasks]);
|
||||
const completedTasks = useMemo(() => tasks.filter(t => t.status === 'client_approved'), [tasks]);
|
||||
|
||||
function renderTask(task) {
|
||||
const po = poItemsByTaskId[task.id];
|
||||
const dueDate = po?.po?.due_date
|
||||
? new Date(po.po.due_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
|
||||
: null;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={task.id}
|
||||
to={`/tasks/${task.id}`}
|
||||
className="interactive-row"
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'minmax(0, 1fr) auto',
|
||||
gap: 12,
|
||||
alignItems: 'center',
|
||||
padding: '12px 14px',
|
||||
borderBottom: '1px solid var(--border)',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
<div style={{ minWidth: 0 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginBottom: 3 }}>
|
||||
<span style={{ fontWeight: 700, fontSize: 14, color: 'var(--text-primary)' }}>{task.title}</span>
|
||||
<span style={{ fontSize: 11, color: 'var(--text-muted)' }}>
|
||||
R{String(task.current_version || 0).padStart(2, '0')}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: 'var(--text-muted)', display: 'flex', gap: 8, flexWrap: 'wrap' }}>
|
||||
{po && <span style={{ color: 'var(--accent)', fontWeight: 600 }}>{po.po?.po_number}</span>}
|
||||
{po?.amount != null && <span>${Number(po.amount).toFixed(2)}</span>}
|
||||
{dueDate && <span>Due {dueDate}</span>}
|
||||
</div>
|
||||
</div>
|
||||
<StatusBadge status={task.status} />
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="page-header">
|
||||
<div>
|
||||
<div className="page-title">Requests</div>
|
||||
<div className="page-subtitle">All tasks in your assigned projects.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="stats-grid" style={{ marginBottom: 24 }}>
|
||||
<div className="stat-card stat-card-highlight">
|
||||
<div className="stat-value">{tasks.length}</div>
|
||||
<div className="stat-label">Total Tasks</div>
|
||||
</div>
|
||||
<div className="stat-card">
|
||||
<div className="stat-value">{activeTasks.length}</div>
|
||||
<div className="stat-label">Active</div>
|
||||
</div>
|
||||
<div className="stat-card">
|
||||
<div className="stat-value" style={{ color: activeTasks.filter(t => t.status === 'client_review').length > 0 ? 'var(--accent)' : undefined }}>
|
||||
{activeTasks.filter(t => t.status === 'client_review').length}
|
||||
</div>
|
||||
<div className="stat-label">Awaiting Review</div>
|
||||
</div>
|
||||
<div className="stat-card">
|
||||
<div className="stat-value">{completedTasks.length}</div>
|
||||
<div className="stat-label">Completed</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p>
|
||||
) : error ? (
|
||||
<div className="card" style={{ color: 'var(--danger)' }}>{error}</div>
|
||||
) : tasks.length === 0 ? (
|
||||
<div className="empty-state">
|
||||
<h3>No tasks yet</h3>
|
||||
<p>Tasks will appear here once Fourge assigns you to a project.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'grid', gap: 16 }}>
|
||||
{projects.map(project => {
|
||||
const projectTasks = sortTasks(tasks.filter(t => t.project_id === project.id));
|
||||
if (!projectTasks.length) return null;
|
||||
const active = projectTasks.filter(t => t.status !== 'client_approved');
|
||||
const done = projectTasks.filter(t => t.status === 'client_approved');
|
||||
|
||||
return (
|
||||
<div key={project.id} className="card" style={{ padding: 0, overflow: 'hidden' }}>
|
||||
{/* Project header */}
|
||||
<div style={{
|
||||
padding: '12px 16px',
|
||||
background: 'var(--card-bg-2)',
|
||||
borderBottom: '1px solid var(--border)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
gap: 12,
|
||||
}}>
|
||||
<div>
|
||||
<div style={{ fontWeight: 700, fontSize: 14 }}>{project.name}</div>
|
||||
{project.company?.name && (
|
||||
<div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{project.company.name}</div>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 8, fontSize: 12, color: 'var(--text-muted)' }}>
|
||||
{active.length > 0 && <span style={{ fontWeight: 600, color: 'var(--accent)' }}>{active.length} active</span>}
|
||||
{done.length > 0 && <span>{done.length} done</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Active tasks */}
|
||||
{active.length > 0 && (
|
||||
<div>
|
||||
{active.map(task => renderTask(task))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Completed tasks — collapsed by default */}
|
||||
{done.length > 0 && (
|
||||
<CompletedGroup tasks={done} renderTask={renderTask} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
function CompletedGroup({ tasks, renderTask }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
return (
|
||||
<div style={{ borderTop: tasks.length > 0 ? '1px solid var(--border)' : 'none' }}>
|
||||
<button
|
||||
onClick={() => setOpen(o => !o)}
|
||||
style={{
|
||||
width: '100%', padding: '8px 16px', background: 'none', border: 'none',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||
cursor: 'pointer', fontFamily: 'inherit', fontSize: 12, color: 'var(--text-muted)',
|
||||
}}
|
||||
>
|
||||
<span style={{ fontWeight: 600 }}>{open ? '▲' : '▼'} {tasks.length} completed</span>
|
||||
</button>
|
||||
{open && tasks.map(task => renderTask(task))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user