merge: integrate subcontractor, org-settings & commission features from project-refinement
# Conflicts: # src/App.jsx # src/components/Layout.jsx # src/data/mockStore.jsx # src/pages/LeadsListPage.jsx # src/pages/owner/OwnerProjectDetail.jsx # src/pages/owner/OwnerSnapshot.jsx
This commit is contained in:
Satyam Rastogi
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useMemo, useRef } from 'react';
|
||||
import React, { useState, useMemo, useRef, useEffect } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
import { useMockStore } from '../../data/mockStore';
|
||||
@@ -12,7 +12,7 @@ import {
|
||||
ArrowLeft, CheckCircle, Clock, AlertTriangle, PauseCircle, ShieldAlert,
|
||||
FileText, DollarSign, GitPullRequest, AlertCircle, Activity, Milestone,
|
||||
Shield, ChevronRight, Phone, MessageSquare, Mail, AlertOctagon, TrendingUp, Key, Zap, Camera, Plus, Map, User, Crosshair, Image as ImageIcon, MapPin,
|
||||
Upload, Trash2, Eye, Pencil, X as XIcon, FolderOpen, Download, File, StickyNote, Banknote, ChevronLeft, ChevronDown as ChevronDownIcon, Info, Settings, Building2, User as UserIcon, Briefcase, Users
|
||||
Upload, Trash2, Eye, Pencil, X as XIcon, FolderOpen, Download, File, StickyNote, Banknote, ChevronLeft, ChevronDown as ChevronDownIcon, Info, Settings, Building2, User as UserIcon, Briefcase, Users, HardHat, Wrench, UserCheck, Wallet
|
||||
} from 'lucide-react';
|
||||
import ChangeOrderDrawer from '../../components/owner/ChangeOrderDrawer';
|
||||
import InvoiceDetailModal from '../../components/owner/InvoiceDetailModal';
|
||||
@@ -125,6 +125,51 @@ function seedPaymentsMock(projectId) {
|
||||
|
||||
const PAYMENTS_PER_PAGE = 5;
|
||||
|
||||
// ── Expense type taxonomy ──────────────────────────────────────────────
|
||||
const EXPENSE_TYPE_CONFIG = {
|
||||
material: { label: 'Material', icon: Wrench, color: 'text-sky-600 dark:text-[#00f0ff]', bg: 'bg-sky-50 dark:bg-blue-500/10', border: 'border-sky-200 dark:border-blue-500/20' },
|
||||
labor: { label: 'Labor', icon: HardHat, color: 'text-emerald-600 dark:text-emerald-400', bg: 'bg-emerald-50 dark:bg-emerald-500/10', border: 'border-emerald-200 dark:border-emerald-500/20' },
|
||||
team: { label: 'Team Commission', icon: UserCheck, color: 'text-purple-600 dark:text-purple-400', bg: 'bg-purple-50 dark:bg-purple-500/10', border: 'border-purple-200 dark:border-purple-500/20' },
|
||||
subcontractor: { label: 'Subcontractor', icon: HardHat, color: 'text-amber-600 dark:text-[#fda913]', bg: 'bg-amber-50 dark:bg-[#fda913]/10', border: 'border-amber-200 dark:border-[#fda913]/20' },
|
||||
other: { label: 'Other', icon: DollarSign, color: 'text-zinc-600 dark:text-zinc-400', bg: 'bg-zinc-100 dark:bg-white/5', border: 'border-zinc-200 dark:border-white/10' },
|
||||
};
|
||||
|
||||
const SUBCONTRACTOR_WORK_TYPES = ['Plumbing', 'Electrical', 'Painting', 'Roofing', 'Civil work', 'HVAC', 'Carpentry', 'Other'];
|
||||
|
||||
const inferExpenseType = (category = '') => {
|
||||
const c = (category || '').toLowerCase();
|
||||
if (c.includes('material')) return 'material';
|
||||
if (c.includes('labor')) return 'labor';
|
||||
if (c.includes('commission') || c.includes('sales rep')) return 'team';
|
||||
if (SUBCONTRACTOR_WORK_TYPES.some(w => c.includes(w.toLowerCase()))) return 'subcontractor';
|
||||
return 'other';
|
||||
};
|
||||
|
||||
function seedExpenseRowsMock(project) {
|
||||
const baseRows = (project?.budgetBreakdown || []).map((b, i) => ({
|
||||
id: `exp_base_${i}`,
|
||||
type: inferExpenseType(b.category),
|
||||
name: b.name || '—',
|
||||
category: b.category || '',
|
||||
allocated: Number(b.allocated) || 0,
|
||||
actual: Number(b.actual) || 0,
|
||||
paid: Number(b.actual) > 0 && Number(b.actual) >= Number(b.allocated) * 0.9,
|
||||
}));
|
||||
const seed = (project?.id || '').charCodeAt((project?.id || 'x').length - 1) % 3;
|
||||
const teamRows = [
|
||||
{ id: 'exp_team_1', type: 'team', name: 'Jesus Gonzales', category: 'Sales Rep', allocated: 4200, actual: 4200, paid: true },
|
||||
{ id: 'exp_team_2', type: 'team', name: 'Frank Agent', category: 'Canvasser', allocated: 1500, actual: 1500, paid: false },
|
||||
{ id: 'exp_team_3', type: 'team', name: 'Sarah Sales', category: 'Estimator', allocated: 1200, actual: 0, paid: false },
|
||||
].slice(0, 2 + seed);
|
||||
const subRows = [
|
||||
{ id: 'exp_sub_1', type: 'subcontractor', name: 'PlumbPro Services', category: 'Plumbing', allocated: 1800, actual: 1800, paid: true },
|
||||
{ id: 'exp_sub_2', type: 'subcontractor', name: 'Bright Electric LLC', category: 'Electrical', allocated: 2400, actual: 2150, paid: false },
|
||||
{ id: 'exp_sub_3', type: 'subcontractor', name: 'Premium Painters', category: 'Painting', allocated: 950, actual: 950, paid: true },
|
||||
{ id: 'exp_sub_4', type: 'subcontractor', name: 'Solid Civil Works', category: 'Civil work', allocated: 3200, actual: 0, paid: false },
|
||||
].slice(0, 3 + seed);
|
||||
return [...baseRows, ...teamRows, ...subRows];
|
||||
}
|
||||
|
||||
const COMMISSION_TYPES = [
|
||||
{ value: 'flat', label: 'Flat Amount', hint: 'Fixed dollar amount' },
|
||||
{ value: 'percent_gross', label: '% of Gross', hint: 'Percentage of Total Received' },
|
||||
@@ -158,6 +203,10 @@ const OwnerProjectDetail = () => {
|
||||
const [paymentSort, setPaymentSort] = useState({ field: 'date', dir: 'desc' });
|
||||
const [paymentPage, setPaymentPage] = useState(0);
|
||||
|
||||
// ── Expense rows state (unified cost breakdown) ───────────────────────────
|
||||
const [expenseRows, setExpenseRows] = useState([]);
|
||||
const [expensesSeeded, setExpensesSeeded] = useState(false);
|
||||
|
||||
const [openTooltip, setOpenTooltip] = useState(null);
|
||||
|
||||
// ── Commission config state ─────────────────────────────────────────────
|
||||
@@ -248,6 +297,31 @@ const OwnerProjectDetail = () => {
|
||||
projects.find(p => p.id === projectId && p.ownerId === user?.id)
|
||||
, [projects, projectId, user]);
|
||||
|
||||
useEffect(() => {
|
||||
if (project && !expensesSeeded) {
|
||||
setExpenseRows(seedExpenseRowsMock(project));
|
||||
setExpensesSeeded(true);
|
||||
}
|
||||
}, [project, expensesSeeded]);
|
||||
|
||||
const togglePaid = (id) => {
|
||||
setExpenseRows(prev => prev.map(r => r.id === id ? { ...r, paid: !r.paid } : r));
|
||||
};
|
||||
|
||||
const handleAddExpense = (data, type) => {
|
||||
const amt = parseFloat(data.amount) || 0;
|
||||
const newRow = {
|
||||
id: `exp_${Date.now()}`,
|
||||
type: type || data.type || 'other',
|
||||
name: data.name || '',
|
||||
category: data.category || '',
|
||||
allocated: amt,
|
||||
actual: amt,
|
||||
paid: false,
|
||||
};
|
||||
setExpenseRows(prev => [newRow, ...prev]);
|
||||
};
|
||||
|
||||
const teamFinancials = useMemo(() => {
|
||||
if (!project) return { totalReceived: 0, grossProfit: 0 };
|
||||
const paid = (project.paymentSchedule || [])
|
||||
@@ -283,9 +357,16 @@ const OwnerProjectDetail = () => {
|
||||
|
||||
const activeCommissionConfig = resolvedCommission;
|
||||
|
||||
const expenseTotals = useMemo(() => {
|
||||
const total = expenseRows.reduce((s, r) => s + (Number(r.actual) || Number(r.allocated) || 0), 0);
|
||||
const paid = expenseRows.reduce((s, r) => s + (r.paid ? (Number(r.actual) || Number(r.allocated) || 0) : 0), 0);
|
||||
const outstanding = Math.max(0, total - paid);
|
||||
return { total, paid, outstanding };
|
||||
}, [expenseRows]);
|
||||
|
||||
const profitMetrics = useMemo(() => {
|
||||
if (!project) return { totalCosts: 0, commission: 0, commissionFormula: '', grossProfit: 0, netProfit: 0, grossMargin: 0, netMargin: 0 };
|
||||
const totalCosts = Number(project.actualCost ?? project.spent) || 0;
|
||||
if (!project) return { totalCosts: 0, totalExpenses: 0, paidExpenses: 0, outstandingExpenses: 0, totalBudget: 0, commission: 0, commissionFormula: '', grossProfit: 0, netProfit: 0, grossMargin: 0, netMargin: 0 };
|
||||
const totalCosts = expenseTotals.total || Number(project.actualCost ?? project.spent) || 0;
|
||||
const gross = totalReceived - totalCosts;
|
||||
|
||||
const { type, rate } = activeCommissionConfig;
|
||||
@@ -315,11 +396,25 @@ const OwnerProjectDetail = () => {
|
||||
}
|
||||
commission = Number.isFinite(commission) ? commission : 0;
|
||||
|
||||
const net = gross - commission;
|
||||
// Net Profit = Total Payments Received − Total Expenses (expense table already includes team commission + subcontractors)
|
||||
const net = totalReceived - expenseTotals.total;
|
||||
const grossMargin = totalReceived > 0 ? (gross / totalReceived) * 100 : 0;
|
||||
const netMargin = totalReceived > 0 ? (net / totalReceived) * 100 : 0;
|
||||
return { totalCosts, commission, commissionFormula, grossProfit: gross, netProfit: net, grossMargin, netMargin };
|
||||
}, [project, totalReceived, activeCommissionConfig]);
|
||||
const totalBudget = Number(project.approvedBudget ?? project.budget) || 0;
|
||||
return {
|
||||
totalCosts,
|
||||
totalExpenses: expenseTotals.total,
|
||||
paidExpenses: expenseTotals.paid,
|
||||
outstandingExpenses: expenseTotals.outstanding,
|
||||
totalBudget,
|
||||
commission,
|
||||
commissionFormula,
|
||||
grossProfit: gross,
|
||||
netProfit: net,
|
||||
grossMargin,
|
||||
netMargin,
|
||||
};
|
||||
}, [project, totalReceived, activeCommissionConfig, expenseTotals]);
|
||||
|
||||
if (!project) {
|
||||
return (
|
||||
@@ -691,97 +786,200 @@ const OwnerProjectDetail = () => {
|
||||
{/* BUDGET TAB */}
|
||||
{activeTab === 'budget' && (
|
||||
<div className="space-y-6 max-w-7xl mx-auto">
|
||||
{budgetChartData.length > 0 ? (
|
||||
<>
|
||||
<NeoCard spotlightColor="rgba(0, 240, 255, 0.1)">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<DollarSign className={NEON_BLUE} size={20} />
|
||||
<h3 className="text-lg font-bold text-zinc-900 dark:text-white tracking-widest uppercase">Budget Breakdown</h3>
|
||||
{/* Budget & Costs Summary Cards */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4">
|
||||
{[
|
||||
{ label: 'Total Budget', value: profitMetrics.totalBudget, icon: Wallet, color: 'text-sky-600 dark:text-[#00f0ff]', spotlight: 'rgba(0, 240, 255, 0.12)' },
|
||||
{ label: 'Total Expenses', value: profitMetrics.totalExpenses, icon: Wrench, color: 'text-amber-600 dark:text-[#fda913]', spotlight: 'rgba(253, 169, 19, 0.12)' },
|
||||
{ label: 'Payments Received', value: totalReceived, icon: Banknote, color: 'text-emerald-600 dark:text-[#39ff14]', spotlight: 'rgba(57, 255, 20, 0.12)' },
|
||||
{ label: 'Outstanding Expenses', value: profitMetrics.outstandingExpenses, icon: AlertCircle, color: 'text-orange-600 dark:text-[#ff4500]', spotlight: 'rgba(255, 69, 0, 0.12)' },
|
||||
{
|
||||
label: 'Net Profit',
|
||||
value: profitMetrics.netProfit,
|
||||
icon: TrendingUp,
|
||||
color: profitMetrics.netProfit >= 0 ? 'text-emerald-600 dark:text-[#39ff14]' : 'text-red-600 dark:text-[#ff003c]',
|
||||
spotlight: profitMetrics.netProfit >= 0 ? 'rgba(57, 255, 20, 0.12)' : 'rgba(255, 0, 60, 0.12)',
|
||||
emphasis: true,
|
||||
},
|
||||
].map((c, i) => {
|
||||
const CardIcon = c.icon;
|
||||
return (
|
||||
<NeoCard key={i} spotlightColor={c.spotlight} innerClassName="!p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<CardIcon size={14} className={c.color} />
|
||||
<h4 className="text-[10px] font-mono font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-widest truncate">{c.label}</h4>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setCreateModalConfig({
|
||||
title: 'Add Budget Cost', icon: DollarSign, iconColor: 'text-[#39ff14]', iconBg: 'bg-[#39ff14]/10',
|
||||
submitLabel: 'Save Cost', submitColor: 'bg-[#39ff14]/20 text-[#39ff14] border-[#39ff14]/30',
|
||||
fields: [
|
||||
{ name: 'category', label: 'Category', type: 'text', required: true },
|
||||
{ name: 'allocated', label: 'Allocated Amount', type: 'number', required: true },
|
||||
{ name: 'spent', label: 'Actual Spent', type: 'number' }
|
||||
],
|
||||
onSubmit: handleCreateSubmit
|
||||
})}
|
||||
className="bg-blue-500/10 hover:bg-blue-500/20 text-[#00f0ff] border border-blue-500/30 px-3 py-1.5 rounded-lg text-xs font-bold transition flex items-center gap-2"
|
||||
>
|
||||
<Plus size={14} /> Add Cost
|
||||
</button>
|
||||
<div className={`font-mono font-black tracking-tight ${c.emphasis ? 'text-2xl sm:text-3xl' : 'text-lg sm:text-xl'} ${c.color}`}>
|
||||
{c.value >= 0 ? '' : '-'}{formatCurrency(Math.abs(c.value))}
|
||||
</div>
|
||||
{c.label === 'Net Profit' && (
|
||||
<p className="mt-1 text-[10px] font-mono text-zinc-500 dark:text-zinc-500 truncate">
|
||||
Received − Expenses
|
||||
</p>
|
||||
)}
|
||||
{c.label === 'Outstanding Expenses' && (
|
||||
<p className="mt-1 text-[10px] font-mono text-zinc-500 dark:text-zinc-500 truncate">
|
||||
Paid: {formatCurrency(profitMetrics.paidExpenses)}
|
||||
</p>
|
||||
)}
|
||||
</NeoCard>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{budgetChartData.length > 0 && (
|
||||
<NeoCard spotlightColor="rgba(0, 240, 255, 0.1)">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<DollarSign className={NEON_BLUE} size={20} />
|
||||
<h3 className="text-lg font-bold text-zinc-900 dark:text-white tracking-widest uppercase">Budget Breakdown</h3>
|
||||
</div>
|
||||
<p className="text-xs text-zinc-400 mb-6 font-mono">Allocated vs Actual ($k)</p>
|
||||
<div className="h-64 bg-zinc-50 dark:bg-black/20 rounded-xl p-4 border border-zinc-200 dark:border-white/5">
|
||||
<ResponsiveContainer width="99%" height={256} minWidth={1} minHeight={1}>
|
||||
<BarChart data={budgetChartData} barGap={2}>
|
||||
<XAxis dataKey="name" tick={{ fontSize: 11, fill: '#a1a1aa' }} axisLine={false} tickLine={false} />
|
||||
<YAxis tick={{ fontSize: 11, fill: '#a1a1aa' }} axisLine={false} tickLine={false} />
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Bar dataKey="allocated" name="Allocated" fill="#3b82f6" radius={[4, 4, 0, 0]} />
|
||||
<Bar dataKey="actual" name="Actual" fill="#22c55e" radius={[4, 4, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
<p className="text-xs text-zinc-400 mb-6 font-mono">Allocated vs Actual ($k)</p>
|
||||
<div className="h-64 bg-zinc-50 dark:bg-black/20 rounded-xl p-4 border border-zinc-200 dark:border-white/5">
|
||||
<ResponsiveContainer width="99%" height={256} minWidth={1} minHeight={1}>
|
||||
<BarChart data={budgetChartData} barGap={2}>
|
||||
<XAxis dataKey="name" tick={{ fontSize: 11, fill: '#a1a1aa' }} axisLine={false} tickLine={false} />
|
||||
<YAxis tick={{ fontSize: 11, fill: '#a1a1aa' }} axisLine={false} tickLine={false} />
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Bar dataKey="allocated" name="Allocated" fill="#3b82f6" radius={[4, 4, 0, 0]} />
|
||||
<Bar dataKey="actual" name="Actual" fill="#22c55e" radius={[4, 4, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</NeoCard>
|
||||
)}
|
||||
<NeoCard spotlightColor="rgba(253, 169, 19, 0.1)" innerClassName="p-0 lg:p-0">
|
||||
<div className="p-5 border-b border-zinc-200 dark:border-white/5 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<DollarSign className={NEON_GOLD} size={20} />
|
||||
<h3 className="text-lg font-bold text-zinc-900 dark:text-white tracking-widest uppercase">Cost Breakdown / Expenses</h3>
|
||||
<span className="text-xs font-bold bg-zinc-100 dark:bg-white/5 border border-zinc-200 dark:border-white/5 px-2 py-0.5 rounded-full text-zinc-500 dark:text-zinc-400">
|
||||
{expenseRows.length}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<button
|
||||
onClick={() => setCreateModalConfig({
|
||||
title: 'Add Team Commission Cost', icon: UserCheck, iconColor: 'text-purple-500 dark:text-purple-400', iconBg: 'bg-purple-500/10',
|
||||
submitLabel: 'Save Team Cost', submitColor: 'bg-purple-500/20 text-purple-500 dark:text-purple-400 border-purple-500/30',
|
||||
fields: [
|
||||
{ name: 'name', label: 'Team Member Name', type: 'text', required: true, placeholder: 'e.g. Jesus Gonzales' },
|
||||
{ name: 'category', label: 'Role / Category', type: 'text', required: true, placeholder: 'e.g. Sales Rep' },
|
||||
{ name: 'amount', label: 'Commission Amount ($)', type: 'number', required: true },
|
||||
],
|
||||
onSubmit: (d) => handleAddExpense(d, 'team'),
|
||||
})}
|
||||
className="bg-purple-500/10 hover:bg-purple-500/20 text-purple-600 dark:text-purple-400 border border-purple-500/30 px-3 py-1.5 rounded-lg text-xs font-bold transition flex items-center gap-2"
|
||||
>
|
||||
<UserCheck size={14} /> Add Team Cost
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCreateModalConfig({
|
||||
title: 'Add Subcontractor Cost', icon: HardHat, iconColor: 'text-amber-500 dark:text-[#fda913]', iconBg: 'bg-amber-500/10',
|
||||
submitLabel: 'Save Subcontractor Cost', submitColor: 'bg-amber-500/20 text-amber-500 dark:text-[#fda913] border-amber-500/30',
|
||||
fields: [
|
||||
{ name: 'name', label: 'Subcontractor Name', type: 'text', required: true, placeholder: 'e.g. PlumbPro Services' },
|
||||
{ name: 'category', label: 'Category / Work Type', type: 'select', required: true, options: SUBCONTRACTOR_WORK_TYPES.map(w => ({ label: w, value: w })) },
|
||||
{ name: 'amount', label: 'Amount ($)', type: 'number', required: true },
|
||||
],
|
||||
onSubmit: (d) => handleAddExpense(d, 'subcontractor'),
|
||||
})}
|
||||
className="bg-amber-500/10 hover:bg-amber-500/20 text-amber-600 dark:text-[#fda913] border border-amber-500/30 px-3 py-1.5 rounded-lg text-xs font-bold transition flex items-center gap-2"
|
||||
>
|
||||
<HardHat size={14} /> Add Subcontractor
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCreateModalConfig({
|
||||
title: 'Add Cost', icon: DollarSign, iconColor: 'text-[#39ff14]', iconBg: 'bg-[#39ff14]/10',
|
||||
submitLabel: 'Save Cost', submitColor: 'bg-[#39ff14]/20 text-[#39ff14] border-[#39ff14]/30',
|
||||
fields: [
|
||||
{ name: 'name', label: 'Vendor / Source Name', type: 'text', required: true },
|
||||
{ name: 'category', label: 'Category', type: 'text', required: true, placeholder: 'e.g. Materials - Shingles' },
|
||||
{ name: 'amount', label: 'Amount ($)', type: 'number', required: true },
|
||||
],
|
||||
onSubmit: (d) => handleAddExpense(d, inferExpenseType(d.category)),
|
||||
})}
|
||||
className="bg-blue-500/10 hover:bg-blue-500/20 text-[#00f0ff] border border-blue-500/30 px-3 py-1.5 rounded-lg text-xs font-bold transition flex items-center gap-2"
|
||||
>
|
||||
<Plus size={14} /> Add Cost
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</NeoCard>
|
||||
<NeoCard spotlightColor="rgba(253, 169, 19, 0.1)" innerClassName="p-0 lg:p-0">
|
||||
<div className="overflow-x-auto w-full rounded-2xl">
|
||||
<table className="w-full text-left border-collapse min-w-[600px]">
|
||||
<table className="w-full text-left border-collapse min-w-[860px]">
|
||||
<thead className="bg-zinc-100 dark:bg-[#18181b]/80 border-b border-zinc-200 dark:border-white/10">
|
||||
<tr>
|
||||
{['Name', 'Category', 'Allocated', 'Actual', 'Variance'].map(h => (
|
||||
<th key={h} className={`px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-400 ${h !== 'Name' && h !== 'Category' ? 'text-right' : ''}`}>{h}</th>
|
||||
))}
|
||||
<th className="px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-500 dark:text-zinc-400">Type</th>
|
||||
<th className="px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-500 dark:text-zinc-400">Name</th>
|
||||
<th className="px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-500 dark:text-zinc-400">Category / Role</th>
|
||||
<th className="px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-500 dark:text-zinc-400 text-right">Allocated</th>
|
||||
<th className="px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-500 dark:text-zinc-400 text-right">Actual</th>
|
||||
<th className="px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-500 dark:text-zinc-400 text-center">Paid</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-zinc-100 dark:divide-white/5">
|
||||
{(project.budgetBreakdown || []).map((b, i) => {
|
||||
const variance = b.actual - b.allocated;
|
||||
{expenseRows.map((row) => {
|
||||
const cfg = EXPENSE_TYPE_CONFIG[row.type] || EXPENSE_TYPE_CONFIG.other;
|
||||
const TypeIcon = cfg.icon;
|
||||
return (
|
||||
<tr key={i} className="hover:bg-zinc-50 dark:hover:bg-white/5 transition-colors">
|
||||
<td className="px-5 py-4 text-sm text-zinc-500 dark:text-zinc-400">{b.name || '—'}</td>
|
||||
<td className="px-5 py-4 font-bold text-sm text-zinc-900 dark:text-white">{b.category}</td>
|
||||
<td className="px-5 py-4 text-right font-mono text-sm text-zinc-600 dark:text-zinc-300">{formatCurrency(b.allocated)}</td>
|
||||
<td className="px-5 py-4 text-right font-mono text-sm text-[#00f0ff]">{formatCurrency(b.actual)}</td>
|
||||
<td className={`px-5 py-4 text-right font-mono text-sm font-bold ${variance > 0 ? 'text-[#ff4500]' : 'text-[#39ff14]'}`}>
|
||||
{variance > 0 ? '+' : ''}{formatCurrency(variance)}
|
||||
<tr key={row.id} className="hover:bg-zinc-50 dark:hover:bg-white/5 transition-colors">
|
||||
<td className="px-5 py-4">
|
||||
<span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest border ${cfg.color} ${cfg.bg} ${cfg.border}`}>
|
||||
<TypeIcon size={11} />
|
||||
{cfg.label}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-5 py-4 font-bold text-sm text-zinc-900 dark:text-white">{row.name || '—'}</td>
|
||||
<td className="px-5 py-4 text-sm text-zinc-500 dark:text-zinc-400">{row.category || '—'}</td>
|
||||
<td className="px-5 py-4 text-right font-mono text-sm text-zinc-600 dark:text-zinc-300">{formatCurrency(row.allocated)}</td>
|
||||
<td className="px-5 py-4 text-right font-mono text-sm text-[#00f0ff]">{formatCurrency(row.actual)}</td>
|
||||
<td className="px-5 py-4 text-center">
|
||||
<label className="inline-flex items-center justify-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={!!row.paid}
|
||||
onChange={() => togglePaid(row.id)}
|
||||
className="sr-only peer"
|
||||
aria-label={`Mark ${row.name || 'expense'} paid`}
|
||||
/>
|
||||
<span className={`w-5 h-5 rounded-md border flex items-center justify-center transition-colors ${row.paid
|
||||
? 'bg-emerald-500 border-emerald-500 dark:bg-[#39ff14] dark:border-[#39ff14]'
|
||||
: 'bg-white dark:bg-[#18181b] border-zinc-300 dark:border-white/20 hover:border-emerald-400'}`}>
|
||||
{row.paid && <CheckCircle size={12} className="text-white dark:text-black" strokeWidth={3} />}
|
||||
</span>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
{expenseRows.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={6} className="px-5 py-10 text-center text-sm text-zinc-500 dark:text-zinc-400">
|
||||
No expenses recorded yet.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
<tfoot className="border-t-2 border-zinc-300 dark:border-white/10">
|
||||
<tr className="bg-zinc-50 dark:bg-white/[0.03]">
|
||||
<td className="px-5 py-4" colSpan={2}>
|
||||
<td className="px-5 py-4" colSpan={3}>
|
||||
<span className="text-xs font-bold uppercase tracking-widest text-zinc-500 dark:text-zinc-400">Totals</span>
|
||||
</td>
|
||||
<td className="px-5 py-4 text-right font-mono text-sm font-bold text-green-600 dark:text-[#39ff14]">{formatCurrency(totalReceived)}</td>
|
||||
<td className="px-5 py-4 text-right font-mono text-sm font-bold text-[#00f0ff]">{formatCurrency(profitMetrics.totalCosts)}</td>
|
||||
{(() => {
|
||||
const totalVariance = profitMetrics.totalCosts - totalReceived;
|
||||
return (
|
||||
<td className={`px-5 py-4 text-right font-mono text-sm font-bold ${totalVariance > 0 ? 'text-[#ff4500]' : 'text-[#39ff14]'}`}>
|
||||
{totalVariance > 0 ? '+' : ''}{formatCurrency(totalVariance)}
|
||||
</td>
|
||||
);
|
||||
})()}
|
||||
<td className="px-5 py-4 text-right font-mono text-sm font-bold text-zinc-600 dark:text-zinc-300">
|
||||
{formatCurrency(expenseRows.reduce((s, r) => s + (Number(r.allocated) || 0), 0))}
|
||||
</td>
|
||||
<td className="px-5 py-4 text-right font-mono text-sm font-bold text-[#00f0ff]">
|
||||
{formatCurrency(profitMetrics.totalExpenses)}
|
||||
</td>
|
||||
<td className="px-5 py-4 text-center text-[10px] font-mono font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-widest">
|
||||
{expenseRows.filter(r => r.paid).length}/{expenseRows.length}
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</NeoCard>
|
||||
</>
|
||||
) : (
|
||||
<NeoCard className="p-12 text-center text-zinc-500">
|
||||
<DollarSign size={48} className="mx-auto mb-4 text-zinc-600" />
|
||||
<p className="font-bold text-lg text-zinc-900 dark:text-white">No detailed budget breakdown available.</p>
|
||||
<p className="text-sm mt-2 text-zinc-400 font-mono">Budget: {formatCurrency(project.approvedBudget || project.budget)} · Spent: {formatCurrency(project.actualCost || project.spent)}</p>
|
||||
</NeoCard>
|
||||
)}
|
||||
|
||||
{/* Commission Configuration Card */}
|
||||
<NeoCard spotlightColor="rgba(253, 169, 19, 0.1)" innerClassName="!p-5">
|
||||
@@ -888,84 +1086,61 @@ const OwnerProjectDetail = () => {
|
||||
</div>
|
||||
</NeoCard>
|
||||
|
||||
{/* Profit Summary Cards */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<NeoCard
|
||||
spotlightColor={profitMetrics.grossProfit >= 0 ? "rgba(57, 255, 20, 0.12)" : "rgba(255, 0, 60, 0.12)"}
|
||||
innerClassName="!p-5"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<TrendingUp size={18} className={profitMetrics.grossProfit >= 0 ? NEON_GREEN : NEON_RED} />
|
||||
<h4 className="text-xs font-mono font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-widest">Gross Profit</h4>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<button type="button" onClick={(e) => { e.stopPropagation(); setOpenTooltip(prev => prev === 'gross' ? null : 'gross'); }} className="p-1 rounded-lg hover:bg-zinc-100 dark:hover:bg-white/10 transition-colors">
|
||||
<Info size={14} className="text-zinc-400 dark:text-zinc-500" />
|
||||
</button>
|
||||
{openTooltip === 'gross' && (
|
||||
<div className="absolute right-0 top-2 z-30 w-64 p-3 rounded-xl bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-white/10 shadow-xl text-xs text-zinc-600 dark:text-zinc-300">
|
||||
<p className="font-bold text-zinc-900 dark:text-white mb-1">Gross Profit Formula</p>
|
||||
<p className="font-mono text-[11px]">Total Received − Total Actual Costs</p>
|
||||
<div className="mt-2 pt-2 border-t border-zinc-100 dark:border-white/5 space-y-1">
|
||||
<p>{formatCurrency(totalReceived)} − {formatCurrency(profitMetrics.totalCosts)} = {formatCurrency(profitMetrics.grossProfit)}</p>
|
||||
</div>
|
||||
{/* Net Profit Breakdown */}
|
||||
<NeoCard
|
||||
spotlightColor={profitMetrics.netProfit >= 0 ? "rgba(57, 255, 20, 0.12)" : "rgba(255, 0, 60, 0.12)"}
|
||||
innerClassName="!p-5"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<TrendingUp size={18} className={profitMetrics.netProfit >= 0 ? NEON_GREEN : NEON_RED} />
|
||||
<h4 className="text-sm font-mono font-bold text-zinc-900 dark:text-white uppercase tracking-widest">Net Profit Breakdown</h4>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<button type="button" onClick={(e) => { e.stopPropagation(); setOpenTooltip(prev => prev === 'net' ? null : 'net'); }} className="p-1 rounded-lg hover:bg-zinc-100 dark:hover:bg-white/10 transition-colors">
|
||||
<Info size={14} className="text-zinc-400 dark:text-zinc-500" />
|
||||
</button>
|
||||
{openTooltip === 'net' && (
|
||||
<div className="absolute right-0 top-2 z-30 w-72 p-3 rounded-xl bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-white/10 shadow-xl text-xs text-zinc-600 dark:text-zinc-300">
|
||||
<p className="font-bold text-zinc-900 dark:text-white mb-1">Net Profit Formula</p>
|
||||
<p className="font-mono text-[11px]">Total Payments Received − Total Expenses</p>
|
||||
<div className="mt-2 pt-2 border-t border-zinc-100 dark:border-white/5 space-y-1">
|
||||
<p>{formatCurrency(totalReceived)} − {formatCurrency(profitMetrics.totalExpenses)} = {formatCurrency(profitMetrics.netProfit)}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-2 text-[10px] text-zinc-500">Total expenses include materials, labor, team commission, and subcontractor costs.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={`text-3xl sm:text-4xl font-black font-mono tracking-tight ${profitMetrics.grossProfit >= 0 ? NEON_GREEN : NEON_RED}`}>
|
||||
{profitMetrics.grossProfit >= 0 ? '+' : ''}{formatCurrency(profitMetrics.grossProfit)}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-4">
|
||||
<div className="bg-zinc-50 dark:bg-black/30 rounded-xl px-4 py-3 border border-zinc-100 dark:border-white/5">
|
||||
<p className="text-[10px] font-mono font-bold text-zinc-500 dark:text-zinc-500 uppercase tracking-widest mb-1">Payments Received</p>
|
||||
<p className="font-mono text-lg font-black text-emerald-600 dark:text-[#39ff14]">{formatCurrency(totalReceived)}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<span className={`text-xs font-bold px-2 py-0.5 rounded-full ${
|
||||
profitMetrics.grossMargin >= 0
|
||||
? 'text-green-600 dark:text-[#39ff14] bg-green-50 dark:bg-[#39ff14]/10 border border-green-200 dark:border-[#39ff14]/20'
|
||||
: 'text-red-600 dark:text-[#ff003c] bg-red-50 dark:bg-[#ff003c]/10 border border-red-200 dark:border-[#ff003c]/20'
|
||||
}`}>
|
||||
{profitMetrics.grossMargin >= 0 ? '+' : ''}{profitMetrics.grossMargin.toFixed(1)}% margin
|
||||
</span>
|
||||
<div className="bg-zinc-50 dark:bg-black/30 rounded-xl px-4 py-3 border border-zinc-100 dark:border-white/5">
|
||||
<p className="text-[10px] font-mono font-bold text-zinc-500 dark:text-zinc-500 uppercase tracking-widest mb-1">− Total Expenses</p>
|
||||
<p className="font-mono text-lg font-black text-amber-600 dark:text-[#fda913]">{formatCurrency(profitMetrics.totalExpenses)}</p>
|
||||
</div>
|
||||
</NeoCard>
|
||||
|
||||
<NeoCard
|
||||
spotlightColor={profitMetrics.netProfit >= 0 ? "rgba(57, 255, 20, 0.12)" : "rgba(255, 0, 60, 0.12)"}
|
||||
innerClassName="!p-5"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<DollarSign size={18} className={profitMetrics.netProfit >= 0 ? NEON_GREEN : NEON_RED} />
|
||||
<h4 className="text-xs font-mono font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-widest">Net Profit</h4>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<button type="button" onClick={(e) => { e.stopPropagation(); setOpenTooltip(prev => prev === 'net' ? null : 'net'); }} className="p-1 rounded-lg hover:bg-zinc-100 dark:hover:bg-white/10 transition-colors">
|
||||
<Info size={14} className="text-zinc-400 dark:text-zinc-500" />
|
||||
</button>
|
||||
{openTooltip === 'net' && (
|
||||
<div className="absolute right-0 top-2 z-30 w-72 p-3 rounded-xl bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-white/10 shadow-xl text-xs text-zinc-600 dark:text-zinc-300">
|
||||
<p className="font-bold text-zinc-900 dark:text-white mb-1">Net Profit Formula</p>
|
||||
<p className="font-mono text-[11px]">Gross Profit − Commission</p>
|
||||
<div className="mt-2 pt-2 border-t border-zinc-100 dark:border-white/5 space-y-1">
|
||||
<p>{formatCurrency(profitMetrics.grossProfit)} − {formatCurrency(profitMetrics.commission)} = {formatCurrency(profitMetrics.netProfit)}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={`rounded-xl px-4 py-3 border ${profitMetrics.netProfit >= 0 ? 'bg-emerald-50/60 dark:bg-[#39ff14]/5 border-emerald-200 dark:border-[#39ff14]/20' : 'bg-red-50/60 dark:bg-[#ff003c]/5 border-red-200 dark:border-[#ff003c]/20'}`}>
|
||||
<p className="text-[10px] font-mono font-bold text-zinc-500 dark:text-zinc-500 uppercase tracking-widest mb-1">= Net Profit</p>
|
||||
<p className={`font-mono text-lg font-black ${profitMetrics.netProfit >= 0 ? NEON_GREEN : NEON_RED}`}>
|
||||
{profitMetrics.netProfit >= 0 ? '+' : ''}{formatCurrency(profitMetrics.netProfit)}
|
||||
</p>
|
||||
</div>
|
||||
<div className={`text-3xl sm:text-4xl font-black font-mono tracking-tight ${profitMetrics.netProfit >= 0 ? NEON_GREEN : NEON_RED}`}>
|
||||
{profitMetrics.netProfit >= 0 ? '+' : ''}{formatCurrency(profitMetrics.netProfit)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<span className={`text-xs font-bold px-2 py-0.5 rounded-full ${
|
||||
profitMetrics.netMargin >= 0
|
||||
? 'text-green-600 dark:text-[#39ff14] bg-green-50 dark:bg-[#39ff14]/10 border border-green-200 dark:border-[#39ff14]/20'
|
||||
: 'text-red-600 dark:text-[#ff003c] bg-red-50 dark:bg-[#ff003c]/10 border border-red-200 dark:border-[#ff003c]/20'
|
||||
}`}>
|
||||
{profitMetrics.netMargin >= 0 ? '+' : ''}{profitMetrics.netMargin.toFixed(1)}% margin
|
||||
</span>
|
||||
</div>
|
||||
</NeoCard>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`text-xs font-bold px-2 py-0.5 rounded-full ${
|
||||
profitMetrics.netMargin >= 0
|
||||
? 'text-green-600 dark:text-[#39ff14] bg-green-50 dark:bg-[#39ff14]/10 border border-green-200 dark:border-[#39ff14]/20'
|
||||
: 'text-red-600 dark:text-[#ff003c] bg-red-50 dark:bg-[#ff003c]/10 border border-red-200 dark:border-[#ff003c]/20'
|
||||
}`}>
|
||||
{profitMetrics.netMargin >= 0 ? '+' : ''}{profitMetrics.netMargin.toFixed(1)}% margin
|
||||
</span>
|
||||
<span className="text-[10px] font-mono text-zinc-500 dark:text-zinc-500">
|
||||
Outstanding: {formatCurrency(profitMetrics.outstandingExpenses)}
|
||||
</span>
|
||||
</div>
|
||||
</NeoCard>
|
||||
|
||||
{/* Payments Received Table */}
|
||||
<NeoCard spotlightColor="rgba(57, 255, 20, 0.1)" innerClassName="p-0 lg:p-0">
|
||||
|
||||
@@ -8,6 +8,7 @@ import FinancialDetailsModal from '../../components/owner/FinancialDetailsModal'
|
||||
import ActionCenterModal from '../../components/owner/ActionCenterModal';
|
||||
import TeamManagementPanel from '../../components/owner/TeamManagementPanel';
|
||||
import CommissionDistributionPanel from '../../components/owner/CommissionDistributionPanel';
|
||||
import SubcontractorPaymentsPanel from '../../components/owner/SubcontractorPaymentsPanel';
|
||||
import { SpotlightCard } from '../../components/SpotlightCard';
|
||||
import {
|
||||
BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, Legend
|
||||
@@ -24,6 +25,7 @@ const OwnerSnapshot = () => {
|
||||
orgCommissionDefaults, userCommissionOverrides,
|
||||
roleCommissionOverrides, orgMembers,
|
||||
addJobTeamMember, removeJobTeamMember, updateJobTeamMember,
|
||||
subcontractorTasks, subcontractors,
|
||||
} = useMockStore();
|
||||
|
||||
// Find the current owner profile
|
||||
@@ -404,6 +406,23 @@ const OwnerSnapshot = () => {
|
||||
</SpotlightCard>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* ── Owner's Box — Subcontractor Payments ── */}
|
||||
{subcontractorTasks?.length > 0 && (
|
||||
<section>
|
||||
<h2 className="text-xl font-bold text-zinc-900 dark:text-white/90 mb-4 flex items-center">
|
||||
<span className="w-2 h-8 bg-amber-500 rounded-full mr-3"></span>
|
||||
Subcontractor Payments
|
||||
</h2>
|
||||
<SpotlightCard className="p-5 lg:p-6" spotlightColor="rgba(245, 158, 11, 0.06)">
|
||||
<SubcontractorPaymentsPanel
|
||||
subcontractorTasks={subcontractorTasks}
|
||||
subcontractors={subcontractors}
|
||||
projects={projects}
|
||||
/>
|
||||
</SpotlightCard>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Interactive Modals */}
|
||||
|
||||
@@ -0,0 +1,658 @@
|
||||
import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { useMockStore } from '../../data/mockStore';
|
||||
import { usePermissions } from '../../hooks/usePermissions';
|
||||
import { SpotlightCard } from '../../components/SpotlightCard';
|
||||
import AssignTaskModal from '../../components/subcontractor/AssignTaskModal';
|
||||
import TaskViewModal from '../../components/subcontractor/TaskViewModal';
|
||||
import ReassignTaskModal from '../../components/subcontractor/ReassignTaskModal';
|
||||
import {
|
||||
Plus, Search, Filter, ClipboardList, MoreVertical, Eye, Pencil,
|
||||
XCircle, Repeat, ChevronLeft, ChevronRight, Lock, Users, MapPin,
|
||||
Calendar, AlertCircle, Clock, CheckCircle, PauseCircle, ChevronDown, Check,
|
||||
} from 'lucide-react';
|
||||
|
||||
// Dark-mode-aware dropdown — replaces native <select>. The menu is portaled
|
||||
// to <body> so it escapes the parent card's `overflow-hidden` clipping and any
|
||||
// new stacking contexts created by table rows below.
|
||||
function FilterPopover({ id, value, onChange, options, ariaLabel }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [menuRect, setMenuRect] = useState(null);
|
||||
const triggerRef = useRef(null);
|
||||
const menuRef = useRef(null);
|
||||
|
||||
const updatePosition = () => {
|
||||
if (!triggerRef.current) return;
|
||||
const r = triggerRef.current.getBoundingClientRect();
|
||||
setMenuRect({ top: r.bottom + 4, left: r.left, width: r.width });
|
||||
};
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (open) updatePosition();
|
||||
}, [open]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const onClick = (e) => {
|
||||
if (triggerRef.current?.contains(e.target)) return;
|
||||
if (menuRef.current?.contains(e.target)) return;
|
||||
setOpen(false);
|
||||
};
|
||||
const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
|
||||
const onReflow = () => updatePosition();
|
||||
document.addEventListener('mousedown', onClick);
|
||||
document.addEventListener('keydown', onKey);
|
||||
window.addEventListener('resize', onReflow);
|
||||
window.addEventListener('scroll', onReflow, true);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', onClick);
|
||||
document.removeEventListener('keydown', onKey);
|
||||
window.removeEventListener('resize', onReflow);
|
||||
window.removeEventListener('scroll', onReflow, true);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
const current = options.find(o => o.value === value) || options[0];
|
||||
|
||||
return (
|
||||
<div className="relative w-full">
|
||||
<button
|
||||
id={id}
|
||||
ref={triggerRef}
|
||||
type="button"
|
||||
aria-haspopup="listbox"
|
||||
aria-expanded={open}
|
||||
aria-label={ariaLabel}
|
||||
onClick={() => setOpen(o => !o)}
|
||||
className="w-full flex items-center justify-between gap-2 pl-3 pr-2 py-2 text-sm rounded-xl bg-zinc-100 dark:bg-white/5 border border-zinc-200 dark:border-white/10 text-zinc-900 dark:text-white outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500/40 transition-colors"
|
||||
>
|
||||
<span className="truncate text-left">{current?.label ?? '—'}</span>
|
||||
<ChevronDown size={14} className={`shrink-0 text-zinc-400 transition-transform ${open ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
{open && menuRect && createPortal(
|
||||
<div
|
||||
ref={menuRef}
|
||||
role="listbox"
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: menuRect.top,
|
||||
left: menuRect.left,
|
||||
width: menuRect.width,
|
||||
}}
|
||||
className="z-[10000] rounded-xl bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-white/10 shadow-xl shadow-black/10 dark:shadow-black/50 overflow-hidden"
|
||||
>
|
||||
<div className="max-h-56 overflow-y-auto custom-scrollbar py-1">
|
||||
{options.map(opt => {
|
||||
const isSelected = opt.value === value;
|
||||
return (
|
||||
<button
|
||||
key={opt.value}
|
||||
type="button"
|
||||
role="option"
|
||||
aria-selected={isSelected}
|
||||
onClick={() => { onChange(opt.value); setOpen(false); }}
|
||||
className={`w-full flex items-center justify-between px-3 py-2 text-sm text-left transition-colors ${
|
||||
isSelected
|
||||
? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-500/10'
|
||||
: 'text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-white/5'
|
||||
}`}
|
||||
>
|
||||
<span className="truncate">{opt.label}</span>
|
||||
{isSelected && <Check size={12} strokeWidth={2.5} className="shrink-0 opacity-70" />}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const PRIORITY_STYLES = {
|
||||
low: { label: 'Low', cls: 'bg-zinc-200 text-zinc-700 dark:bg-zinc-700 dark:text-zinc-300', dot: 'bg-zinc-400' },
|
||||
medium: { label: 'Medium', cls: 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400', dot: 'bg-blue-500' },
|
||||
high: { label: 'High', cls: 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400', dot: 'bg-red-500' },
|
||||
};
|
||||
|
||||
const STATUS_CONFIG = {
|
||||
Assigned: { cls: 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-400', icon: Clock },
|
||||
'In Progress': { cls: 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400', icon: PauseCircle },
|
||||
Completed: { cls: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-400', icon: CheckCircle },
|
||||
Cancelled: { cls: 'bg-zinc-200 text-zinc-600 dark:bg-zinc-700 dark:text-zinc-300', icon: XCircle },
|
||||
};
|
||||
|
||||
const PAGE_SIZE = 8;
|
||||
|
||||
const formatDate = (iso) => {
|
||||
if (!iso) return '—';
|
||||
try { return new Date(iso).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }); }
|
||||
catch { return iso; }
|
||||
};
|
||||
|
||||
const todayIso = () => new Date().toISOString().slice(0, 10);
|
||||
|
||||
const SubcontractorTasksPage = () => {
|
||||
const { subcontractorTasks, subcontractors, taskStatuses, cancelSubcontractorTask } = useMockStore();
|
||||
const { can } = usePermissions();
|
||||
const canAssign = can('subcontractor_tasks', 'assign');
|
||||
|
||||
const [search, setSearch] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState('all');
|
||||
const [subFilter, setSubFilter] = useState('all');
|
||||
const [dueFilter, setDueFilter] = useState('all'); // all | overdue | today | week | month
|
||||
const [page, setPage] = useState(1);
|
||||
|
||||
// Modal state
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const [editTask, setEditTask] = useState(null);
|
||||
const [viewTask, setViewTask] = useState(null);
|
||||
const [reassignTask, setReassignTask] = useState(null);
|
||||
const [confirmCancel, setConfirmCancel] = useState(null);
|
||||
const [openMenuId, setOpenMenuId] = useState(null);
|
||||
|
||||
// Derived
|
||||
const filtered = useMemo(() => {
|
||||
const q = search.trim().toLowerCase();
|
||||
const today = todayIso();
|
||||
const inDays = (n) => {
|
||||
const d = new Date();
|
||||
d.setDate(d.getDate() + n);
|
||||
return d.toISOString().slice(0, 10);
|
||||
};
|
||||
const weekFromNow = inDays(7);
|
||||
const monthFromNow = inDays(30);
|
||||
|
||||
return subcontractorTasks.filter(t => {
|
||||
// Search
|
||||
if (q) {
|
||||
const blob = `${t.title} ${t.subcontractorName} ${t.location} ${t.companyName}`.toLowerCase();
|
||||
if (!blob.includes(q)) return false;
|
||||
}
|
||||
// Status
|
||||
if (statusFilter !== 'all' && t.status !== statusFilter) return false;
|
||||
// Subcontractor
|
||||
if (subFilter !== 'all' && t.subcontractorId !== subFilter) return false;
|
||||
// Due date
|
||||
if (dueFilter !== 'all' && t.dueDate) {
|
||||
if (dueFilter === 'overdue' && !(t.dueDate < today && t.status !== 'Completed' && t.status !== 'Cancelled')) return false;
|
||||
if (dueFilter === 'today' && t.dueDate !== today) return false;
|
||||
if (dueFilter === 'week' && !(t.dueDate >= today && t.dueDate <= weekFromNow)) return false;
|
||||
if (dueFilter === 'month' && !(t.dueDate >= today && t.dueDate <= monthFromNow)) return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}, [subcontractorTasks, search, statusFilter, subFilter, dueFilter]);
|
||||
|
||||
const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
|
||||
const safePage = Math.min(page, totalPages);
|
||||
const pageStart = (safePage - 1) * PAGE_SIZE;
|
||||
const paginated = filtered.slice(pageStart, pageStart + PAGE_SIZE);
|
||||
|
||||
// Reset to page 1 when filters change
|
||||
React.useEffect(() => { setPage(1); }, [search, statusFilter, subFilter, dueFilter]);
|
||||
|
||||
// Close action menus on outside click
|
||||
React.useEffect(() => {
|
||||
const handler = () => setOpenMenuId(null);
|
||||
if (openMenuId) document.addEventListener('click', handler);
|
||||
return () => document.removeEventListener('click', handler);
|
||||
}, [openMenuId]);
|
||||
|
||||
const stats = useMemo(() => ({
|
||||
total: subcontractorTasks.length,
|
||||
assigned: subcontractorTasks.filter(t => t.status === 'Assigned').length,
|
||||
inProgress: subcontractorTasks.filter(t => t.status === 'In Progress').length,
|
||||
completed: subcontractorTasks.filter(t => t.status === 'Completed').length,
|
||||
}), [subcontractorTasks]);
|
||||
|
||||
return (
|
||||
<div className="min-h-full bg-zinc-50 dark:bg-[#09090b] text-zinc-900 dark:text-white transition-colors duration-300 relative">
|
||||
{/* Ambient bg */}
|
||||
<div className="fixed top-0 left-0 w-full h-full overflow-hidden pointer-events-none z-0">
|
||||
<div className="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-blue-500/5 dark:bg-blue-900/10 rounded-full blur-[120px]" />
|
||||
<div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-purple-500/5 dark:bg-purple-900/10 rounded-full blur-[120px]" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 p-4 sm:p-8 max-w-7xl mx-auto space-y-6 pb-20">
|
||||
{/* Header */}
|
||||
<header className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4 border-b border-zinc-200 dark:border-white/5 pb-6">
|
||||
<div>
|
||||
<h1 className="text-3xl sm:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-zinc-900 to-zinc-600 dark:from-white dark:to-white/60 tracking-tight">
|
||||
Subcontractor Tasks
|
||||
</h1>
|
||||
<p className="text-zinc-500 dark:text-zinc-400 mt-1 text-sm">
|
||||
{stats.total} total · {stats.assigned} assigned · {stats.inProgress} in progress · {stats.completed} completed
|
||||
</p>
|
||||
</div>
|
||||
{canAssign ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCreateOpen(true)}
|
||||
className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl font-bold text-sm uppercase tracking-widest text-white bg-blue-600 hover:bg-blue-500 shadow-lg shadow-blue-500/20 transition-all active:scale-[0.97]"
|
||||
>
|
||||
<Plus size={14} />
|
||||
Assign Task
|
||||
</button>
|
||||
) : (
|
||||
<div className="flex items-center gap-2 px-4 py-2.5 rounded-xl font-bold text-sm uppercase tracking-widest text-zinc-400 bg-zinc-200 dark:bg-zinc-800 cursor-not-allowed" title="You don't have permission to assign tasks">
|
||||
<Lock size={14} />
|
||||
Assign Task
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
{/* Filters */}
|
||||
<SpotlightCard className="p-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-3">
|
||||
{/* Search */}
|
||||
<div className="relative md:col-span-5">
|
||||
<label htmlFor="search-tasks" className="sr-only">Search tasks</label>
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={16} />
|
||||
<input
|
||||
id="search-tasks"
|
||||
type="text"
|
||||
placeholder="Search title, subcontractor, location…"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="w-full bg-zinc-100 dark:bg-black/40 border border-zinc-200 dark:border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500/20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Subcontractor */}
|
||||
<div className="md:col-span-3">
|
||||
<FilterPopover
|
||||
id="filter-sub"
|
||||
ariaLabel="Filter by subcontractor"
|
||||
value={subFilter}
|
||||
onChange={setSubFilter}
|
||||
options={[
|
||||
{ value: 'all', label: 'All subcontractors' },
|
||||
...subcontractors.map(s => ({ value: s.id, label: s.name })),
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Status */}
|
||||
<div className="md:col-span-2">
|
||||
<FilterPopover
|
||||
id="filter-status"
|
||||
ariaLabel="Filter by status"
|
||||
value={statusFilter}
|
||||
onChange={setStatusFilter}
|
||||
options={[
|
||||
{ value: 'all', label: 'All statuses' },
|
||||
...taskStatuses.map(s => ({ value: s, label: s })),
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Due */}
|
||||
<div className="md:col-span-2">
|
||||
<FilterPopover
|
||||
id="filter-due"
|
||||
ariaLabel="Filter by due date"
|
||||
value={dueFilter}
|
||||
onChange={setDueFilter}
|
||||
options={[
|
||||
{ value: 'all', label: 'Any due date' },
|
||||
{ value: 'overdue', label: 'Overdue' },
|
||||
{ value: 'today', label: 'Due today' },
|
||||
{ value: 'week', label: 'Next 7 days' },
|
||||
{ value: 'month', label: 'Next 30 days' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(search || statusFilter !== 'all' || subFilter !== 'all' || dueFilter !== 'all') && (
|
||||
<div className="mt-3 flex items-center justify-between text-xs text-zinc-500 dark:text-zinc-400">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Filter size={12} />
|
||||
{filtered.length} match{filtered.length === 1 ? '' : 'es'}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setSearch(''); setStatusFilter('all'); setSubFilter('all'); setDueFilter('all'); }}
|
||||
className="font-bold uppercase tracking-wider text-blue-600 dark:text-blue-400 hover:underline"
|
||||
>
|
||||
Clear filters
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</SpotlightCard>
|
||||
|
||||
{/* Table */}
|
||||
<SpotlightCard className="overflow-hidden">
|
||||
{/* Desktop */}
|
||||
<div className="hidden lg:block overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead className="bg-zinc-50 dark:bg-[#18181b] border-b border-zinc-200 dark:border-white/10">
|
||||
<tr>
|
||||
<Th>Task</Th>
|
||||
<Th>Subcontractor</Th>
|
||||
<Th>Location</Th>
|
||||
<Th>Due</Th>
|
||||
<Th>Priority</Th>
|
||||
<Th>Status</Th>
|
||||
<Th>Created</Th>
|
||||
<Th align="right">Actions</Th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-zinc-100 dark:divide-white/5">
|
||||
{paginated.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={8}>
|
||||
<EmptyState />
|
||||
</td>
|
||||
</tr>
|
||||
) : paginated.map(task => (
|
||||
<TaskRow
|
||||
key={task.id}
|
||||
task={task}
|
||||
onView={() => setViewTask(task)}
|
||||
onEdit={() => setEditTask(task)}
|
||||
onCancel={() => setConfirmCancel(task)}
|
||||
onReassign={() => setReassignTask(task)}
|
||||
openMenu={openMenuId === task.id}
|
||||
setOpenMenu={(open) => setOpenMenuId(open ? task.id : null)}
|
||||
canAssign={canAssign}
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Mobile / tablet cards */}
|
||||
<div className="lg:hidden divide-y divide-zinc-100 dark:divide-white/5">
|
||||
{paginated.length === 0 ? (
|
||||
<EmptyState />
|
||||
) : paginated.map(task => (
|
||||
<TaskCard
|
||||
key={task.id}
|
||||
task={task}
|
||||
onView={() => setViewTask(task)}
|
||||
onEdit={() => setEditTask(task)}
|
||||
onCancel={() => setConfirmCancel(task)}
|
||||
onReassign={() => setReassignTask(task)}
|
||||
canAssign={canAssign}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pagination footer */}
|
||||
<div className="px-5 py-3 border-t border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/5 flex flex-col sm:flex-row justify-between items-center gap-3 text-xs">
|
||||
<span className="text-zinc-500">
|
||||
Showing {filtered.length === 0 ? 0 : pageStart + 1}–{Math.min(pageStart + PAGE_SIZE, filtered.length)} of {filtered.length}
|
||||
</span>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPage(p => Math.max(1, p - 1))}
|
||||
disabled={safePage === 1}
|
||||
className="p-1.5 rounded-lg bg-white dark:bg-white/5 border border-zinc-200 dark:border-white/10 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-white/10 disabled:opacity-40 disabled:pointer-events-none transition-colors"
|
||||
aria-label="Previous page"
|
||||
>
|
||||
<ChevronLeft size={14} />
|
||||
</button>
|
||||
<span className="px-3 py-1.5 rounded-lg bg-white dark:bg-white/5 border border-zinc-200 dark:border-white/10 font-mono font-bold text-zinc-900 dark:text-white">
|
||||
{safePage} / {totalPages}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPage(p => Math.min(totalPages, p + 1))}
|
||||
disabled={safePage === totalPages}
|
||||
className="p-1.5 rounded-lg bg-white dark:bg-white/5 border border-zinc-200 dark:border-white/10 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-white/10 disabled:opacity-40 disabled:pointer-events-none transition-colors"
|
||||
aria-label="Next page"
|
||||
>
|
||||
<ChevronRight size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
</div>
|
||||
|
||||
{/* Modals */}
|
||||
<AssignTaskModal isOpen={createOpen} onClose={() => setCreateOpen(false)} />
|
||||
<AssignTaskModal isOpen={Boolean(editTask)} task={editTask} onClose={() => setEditTask(null)} />
|
||||
<TaskViewModal isOpen={Boolean(viewTask)} task={viewTask} onClose={() => setViewTask(null)} />
|
||||
<ReassignTaskModal isOpen={Boolean(reassignTask)} task={reassignTask} onClose={() => setReassignTask(null)} />
|
||||
|
||||
{/* Cancel confirmation */}
|
||||
{confirmCancel && (
|
||||
<ConfirmDialog
|
||||
title="Cancel task assignment?"
|
||||
body={
|
||||
<>
|
||||
This will set <span className="font-bold text-zinc-900 dark:text-white">{confirmCancel.title}</span> assigned to <span className="font-bold text-zinc-900 dark:text-white">{confirmCancel.subcontractorName}</span> to <span className="font-bold">Cancelled</span>. It will remain in the list for history.
|
||||
</>
|
||||
}
|
||||
confirmLabel="Cancel Task"
|
||||
confirmColor="bg-red-600 hover:bg-red-500"
|
||||
onConfirm={() => { cancelSubcontractorTask(confirmCancel.id); setConfirmCancel(null); }}
|
||||
onClose={() => setConfirmCancel(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Th = ({ children, align }) => (
|
||||
<th className={`px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-500 ${align === 'right' ? 'text-right' : ''}`}>
|
||||
{children}
|
||||
</th>
|
||||
);
|
||||
|
||||
const StatusBadge = ({ status }) => {
|
||||
const cfg = STATUS_CONFIG[status] || STATUS_CONFIG.Assigned;
|
||||
const Icon = cfg.icon;
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wide ${cfg.cls}`}>
|
||||
<Icon size={11} />
|
||||
{status}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const PriorityBadge = ({ priority }) => {
|
||||
const cfg = PRIORITY_STYLES[priority] || PRIORITY_STYLES.medium;
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide ${cfg.cls}`}>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${cfg.dot}`} />
|
||||
{cfg.label}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const isOverdue = (task) => task.dueDate && task.dueDate < todayIso() && task.status !== 'Completed' && task.status !== 'Cancelled';
|
||||
|
||||
const TaskRow = ({ task, onView, onEdit, onCancel, onReassign, openMenu, setOpenMenu, canAssign }) => {
|
||||
const overdue = isOverdue(task);
|
||||
const isClosed = task.status === 'Completed' || task.status === 'Cancelled';
|
||||
|
||||
return (
|
||||
<tr className="hover:bg-zinc-50 dark:hover:bg-white/5 transition-colors group">
|
||||
<td className="px-5 py-4 max-w-xs">
|
||||
<button type="button" onClick={onView} className="text-left">
|
||||
<div className="font-semibold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors truncate">
|
||||
{task.title}
|
||||
</div>
|
||||
<div className="text-[11px] text-zinc-500 font-mono mt-0.5">{task.id}</div>
|
||||
</button>
|
||||
</td>
|
||||
<td className="px-5 py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-7 h-7 rounded-full bg-blue-500/10 text-blue-500 flex items-center justify-center text-xs font-bold shrink-0">
|
||||
{task.subcontractorName?.charAt(0)}
|
||||
</div>
|
||||
<span className="text-sm font-medium text-zinc-900 dark:text-white truncate">{task.subcontractorName}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-5 py-4">
|
||||
<div className="flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400 max-w-[220px]">
|
||||
<MapPin size={12} className="text-zinc-400 shrink-0" />
|
||||
<span className="truncate">{task.location}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-5 py-4 whitespace-nowrap">
|
||||
<div className={`text-sm font-mono ${overdue ? 'text-red-500 font-bold' : 'text-zinc-700 dark:text-zinc-300'}`}>
|
||||
{formatDate(task.dueDate)}
|
||||
</div>
|
||||
{overdue && (
|
||||
<div className="text-[10px] font-bold uppercase text-red-500 flex items-center gap-1 mt-0.5">
|
||||
<AlertCircle size={9} /> Overdue
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-5 py-4"><PriorityBadge priority={task.priority} /></td>
|
||||
<td className="px-5 py-4"><StatusBadge status={task.status} /></td>
|
||||
<td className="px-5 py-4 whitespace-nowrap text-sm text-zinc-500">{formatDate(task.createdAt)}</td>
|
||||
<td className="px-5 py-4 text-right relative">
|
||||
<div className="inline-flex items-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onView}
|
||||
className="p-1.5 rounded-lg text-zinc-500 hover:text-blue-600 hover:bg-blue-500/10 transition-colors"
|
||||
aria-label="View task"
|
||||
title="View"
|
||||
>
|
||||
<Eye size={14} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => { e.stopPropagation(); setOpenMenu(!openMenu); }}
|
||||
className="p-1.5 rounded-lg text-zinc-500 hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-200 dark:hover:bg-white/10 transition-colors"
|
||||
aria-label="More actions"
|
||||
aria-expanded={openMenu}
|
||||
>
|
||||
<MoreVertical size={14} />
|
||||
</button>
|
||||
</div>
|
||||
{openMenu && (
|
||||
<div
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="absolute right-5 top-full mt-1 w-44 bg-white dark:bg-[#18181b] border border-zinc-200 dark:border-white/10 rounded-xl shadow-xl z-20 overflow-hidden text-left"
|
||||
>
|
||||
<MenuItem onClick={() => { setOpenMenu(false); onEdit(); }} icon={Pencil} disabled={!canAssign || isClosed}>
|
||||
Edit
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => { setOpenMenu(false); onReassign(); }} icon={Repeat} disabled={!canAssign || isClosed}>
|
||||
Reassign
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => { setOpenMenu(false); onCancel(); }} icon={XCircle} disabled={!canAssign || isClosed} variant="danger">
|
||||
Cancel
|
||||
</MenuItem>
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
};
|
||||
|
||||
const MenuItem = ({ icon: MenuIcon, children, onClick, disabled, variant }) => (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
className={`w-full flex items-center gap-2 px-3 py-2 text-xs font-semibold transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${
|
||||
variant === 'danger'
|
||||
? 'text-red-600 dark:text-red-400 hover:bg-red-500/10'
|
||||
: 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-white/5'
|
||||
}`}
|
||||
>
|
||||
<MenuIcon size={13} />
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
|
||||
const TaskCard = ({ task, onView, onEdit, onCancel, onReassign, canAssign }) => {
|
||||
const overdue = isOverdue(task);
|
||||
const isClosed = task.status === 'Completed' || task.status === 'Cancelled';
|
||||
return (
|
||||
<div className="p-4 active:bg-zinc-50 dark:active:bg-white/5 transition-colors">
|
||||
<button type="button" onClick={onView} className="w-full text-left">
|
||||
<div className="flex justify-between items-start gap-3 mb-2">
|
||||
<div className="min-w-0 flex-1">
|
||||
<h4 className="font-semibold text-zinc-900 dark:text-white truncate">{task.title}</h4>
|
||||
<p className="text-[11px] text-zinc-500 font-mono mt-0.5">{task.id}</p>
|
||||
</div>
|
||||
<StatusBadge status={task.status} />
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-zinc-500 mb-2">
|
||||
<span className="flex items-center gap-1"><Users size={11} />{task.subcontractorName}</span>
|
||||
<span className="flex items-center gap-1"><MapPin size={11} /><span className="truncate max-w-[160px]">{task.location}</span></span>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<PriorityBadge priority={task.priority} />
|
||||
<span className={`flex items-center gap-1 text-[11px] font-mono ${overdue ? 'text-red-500 font-bold' : 'text-zinc-500'}`}>
|
||||
<Calendar size={11} /> Due {formatDate(task.dueDate)}{overdue ? ' · OVERDUE' : ''}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div className="mt-3 flex flex-wrap gap-2 pt-2 border-t border-zinc-100 dark:border-white/5">
|
||||
<CardActionButton onClick={onView} icon={Eye}>View</CardActionButton>
|
||||
<CardActionButton onClick={onEdit} icon={Pencil} disabled={!canAssign || isClosed}>Edit</CardActionButton>
|
||||
<CardActionButton onClick={onReassign} icon={Repeat} disabled={!canAssign || isClosed}>Reassign</CardActionButton>
|
||||
<CardActionButton onClick={onCancel} icon={XCircle} disabled={!canAssign || isClosed} variant="danger">Cancel</CardActionButton>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const CardActionButton = ({ icon: ActionIcon, children, onClick, disabled, variant }) => (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-[11px] font-bold uppercase tracking-wider border transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${
|
||||
variant === 'danger'
|
||||
? 'text-red-600 dark:text-red-400 border-red-500/20 hover:bg-red-500/10'
|
||||
: 'text-zinc-700 dark:text-zinc-300 border-zinc-200 dark:border-white/10 hover:bg-zinc-100 dark:hover:bg-white/5'
|
||||
}`}
|
||||
>
|
||||
<ActionIcon size={12} />
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
|
||||
const EmptyState = () => (
|
||||
<div className="py-16 text-center text-zinc-500">
|
||||
<ClipboardList size={32} className="mx-auto mb-3 text-zinc-400" />
|
||||
<p className="font-semibold">No tasks match your filters.</p>
|
||||
<p className="text-sm mt-1">Try clearing filters or assigning a new task.</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ConfirmDialog = ({ title, body, confirmLabel, confirmColor, onConfirm, onClose }) => {
|
||||
React.useEffect(() => {
|
||||
const handler = (e) => { if (e.key === 'Escape') onClose(); };
|
||||
window.addEventListener('keydown', handler);
|
||||
return () => window.removeEventListener('keydown', handler);
|
||||
}, [onClose]);
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[9999] flex items-center justify-center p-4" role="dialog" aria-modal="true">
|
||||
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
|
||||
<div className="relative w-full max-w-sm bg-white dark:bg-[#121214] rounded-2xl shadow-2xl border border-zinc-200 dark:border-white/10 overflow-hidden animate-in zoom-in-95 duration-200">
|
||||
<div className="p-5 space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-xl bg-red-500/10 text-red-500"><AlertCircle size={20} /></div>
|
||||
<h2 className="text-base font-bold text-zinc-900 dark:text-white">{title}</h2>
|
||||
</div>
|
||||
<div className="text-sm text-zinc-600 dark:text-zinc-400">{body}</div>
|
||||
</div>
|
||||
<div className="px-5 py-3 border-t border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/5 flex justify-end gap-2">
|
||||
<button type="button" onClick={onClose} className="px-4 py-2 text-xs font-bold uppercase tracking-wider rounded-lg border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-white/5 transition-colors">
|
||||
Keep Task
|
||||
</button>
|
||||
<button type="button" onClick={onConfirm} className={`px-4 py-2 text-xs font-bold uppercase tracking-wider rounded-lg text-white shadow-lg shadow-red-500/20 transition-colors ${confirmColor}`}>
|
||||
{confirmLabel}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubcontractorTasksPage;
|
||||
@@ -1,12 +1,14 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
import { useMockStore } from '../../data/mockStore';
|
||||
import { StatCard } from '../../components/StatCard';
|
||||
import { SpotlightCard } from '../../components/SpotlightCard';
|
||||
import { CheckSquare, Clock, Wallet, MapPin, Camera, X, Calendar, DollarSign, ChevronRight } from 'lucide-react';
|
||||
import { CheckSquare, Clock, Wallet, MapPin, Camera, X, Calendar, DollarSign, ChevronRight, AlertCircle, ArrowDown, ArrowUp, FileText, Receipt } from 'lucide-react';
|
||||
import TaskDetailsModal from '../../components/contractor/TaskDetailsModal';
|
||||
import FinancialSummaryModal from '../../components/contractor/FinancialSummaryModal';
|
||||
import { NotificationsPanel } from '../../components/subcontractor/NotificationsPanel';
|
||||
|
||||
// --- Reusable list modal for filtered tasks / clock-in / payment history ---
|
||||
const SubDetailModal = ({ isOpen, onClose, title, type, tasks, invoices, clockIns, onTaskClick }) => {
|
||||
@@ -194,11 +196,18 @@ const SubDetailModal = ({ isOpen, onClose, title, type, tasks, invoices, clockIn
|
||||
|
||||
const SubContractorDashboard = () => {
|
||||
const { user } = useAuth();
|
||||
const { projects } = useMockStore();
|
||||
const { projects, subcontractorTasks, notifications, markNotificationRead } = useMockStore();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const subId = user?.id || 'sub_001';
|
||||
|
||||
// Aggregate Tasks
|
||||
// Notifications for the current subcontractor (across all tasks).
|
||||
const myNotifications = useMemo(
|
||||
() => notifications.filter(n => n.recipientUserId === subId),
|
||||
[notifications, subId],
|
||||
);
|
||||
|
||||
// Aggregate Tasks (legacy milestone-based for stat parity below)
|
||||
const myTasks = projects.flatMap(p =>
|
||||
p.milestones.filter(m => m.assignedTo === subId)
|
||||
.map(m => ({ ...m, projectAddress: p.address, projectId: p.id, projectStatus: p.status }))
|
||||
@@ -208,6 +217,12 @@ const SubContractorDashboard = () => {
|
||||
const pendingTasks = myTasks.filter(t => t.status === 'pending');
|
||||
const completedTasks = myTasks.filter(t => t.status === 'completed');
|
||||
|
||||
// CRM-assigned tasks (the real "My Assignments")
|
||||
const myAssignments = useMemo(
|
||||
() => subcontractorTasks.filter(t => t.subcontractorId === subId),
|
||||
[subcontractorTasks, subId],
|
||||
);
|
||||
|
||||
// Financials
|
||||
const myInvoices = projects.flatMap(p =>
|
||||
(p.invoices || []).filter(i => i.submittedBy === subId)
|
||||
@@ -224,6 +239,59 @@ const SubContractorDashboard = () => {
|
||||
{ date: '2026-02-14', project: '2612 Dunwick Dr — Interior Renovation', clockIn: '7:30 AM', clockOut: '5:00 PM', hours: '9.5' },
|
||||
], []);
|
||||
|
||||
// Project history & payment tracking
|
||||
const [historyFilter, setHistoryFilter] = useState('all'); // all | Paid | Requested | Pending
|
||||
const [historySort, setHistorySort] = useState('desc'); // desc = newest first
|
||||
const [noteModal, setNoteModal] = useState(null); // { title, body, project, requestedAt, receivedAt, status }
|
||||
|
||||
const projectById = useMemo(() => {
|
||||
const m = new Map();
|
||||
for (const p of projects) m.set(p.id, p);
|
||||
return m;
|
||||
}, [projects]);
|
||||
|
||||
const paymentHistoryRows = useMemo(() => {
|
||||
const items = myAssignments.map(t => {
|
||||
const project = t.projectId ? projectById.get(t.projectId) : null;
|
||||
const requestedAt = t.paymentRequestedAt || null;
|
||||
const receivedAt = t.paidAt || null;
|
||||
const status = t.paymentStatus === 'Paid'
|
||||
? 'Paid'
|
||||
: (requestedAt ? 'Requested' : 'Pending');
|
||||
const expenses = (t.expenses || []).reduce((s, e) => s + (Number(e.amount) || 0), 0);
|
||||
const fees = (t.fees || []).reduce((s, f) => s + (Number(f.amount) || 0), 0);
|
||||
return {
|
||||
id: t.id,
|
||||
projectId: t.projectId || null,
|
||||
projectName: project ? (project.projectType || project.address) : 'Standalone Task',
|
||||
projectAddress: project?.address || t.location || '',
|
||||
requestedAt,
|
||||
receivedAt,
|
||||
amount: expenses + fees,
|
||||
note: t.title || '',
|
||||
description: t.description || '',
|
||||
status,
|
||||
};
|
||||
});
|
||||
const filtered = historyFilter === 'all' ? items : items.filter(r => r.status === historyFilter);
|
||||
const sorted = [...filtered].sort((a, b) => {
|
||||
const av = a.requestedAt || '';
|
||||
const bv = b.requestedAt || '';
|
||||
if (av === bv) return 0;
|
||||
if (!av) return 1; // missing requested dates sink to bottom
|
||||
if (!bv) return -1;
|
||||
return historySort === 'desc' ? (bv > av ? 1 : -1) : (av > bv ? 1 : -1);
|
||||
});
|
||||
return sorted;
|
||||
}, [myAssignments, projectById, historyFilter, historySort]);
|
||||
|
||||
const historyCounts = useMemo(() => ({
|
||||
all: myAssignments.length,
|
||||
Paid: myAssignments.filter(t => t.paymentStatus === 'Paid').length,
|
||||
Requested: myAssignments.filter(t => t.paymentStatus !== 'Paid' && t.paymentRequestedAt).length,
|
||||
Pending: myAssignments.filter(t => !t.paymentRequestedAt).length,
|
||||
}), [myAssignments]);
|
||||
|
||||
// Modal states
|
||||
const [detailModal, setDetailModal] = useState({ isOpen: false, type: null, title: '' });
|
||||
const [selectedTask, setSelectedTask] = useState(null);
|
||||
@@ -308,58 +376,221 @@ const SubContractorDashboard = () => {
|
||||
</div>
|
||||
|
||||
{/* Main Task List */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-2">
|
||||
<SpotlightCard className="p-6 h-full">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
<SpotlightCard className="p-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-lg font-bold text-zinc-900 dark:text-white">My Assignments</h2>
|
||||
<span className="text-[11px] font-bold uppercase tracking-wider text-zinc-500">{myAssignments.length} task{myAssignments.length === 1 ? '' : 's'}</span>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{myTasks.length > 0 ? myTasks.map((task, idx) => (
|
||||
<div key={idx} className="group p-4 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-100 dark:border-white/5 hover:border-blue-500/30 transition-all cursor-pointer" onClick={() => handleTaskClick(task)}>
|
||||
{myAssignments.length > 0 ? myAssignments.map(task => {
|
||||
const overdue = task.dueDate && task.dueDate < new Date().toISOString().slice(0, 10)
|
||||
&& task.status !== 'Completed' && task.status !== 'Cancelled';
|
||||
const statusTone = {
|
||||
Completed: 'bg-emerald-100 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400',
|
||||
'In Progress': 'bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400',
|
||||
'On Hold': 'bg-amber-100 text-amber-600 dark:bg-amber-500/20 dark:text-amber-400',
|
||||
Assigned: 'bg-zinc-100 text-zinc-600 dark:bg-white/10 dark:text-zinc-400',
|
||||
Cancelled: 'bg-zinc-100 text-zinc-500 dark:bg-white/10 dark:text-zinc-500',
|
||||
}[task.status] || 'bg-zinc-100 text-zinc-600 dark:bg-white/10 dark:text-zinc-400';
|
||||
return (
|
||||
<div
|
||||
key={task.id}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => navigate(`/subcontractor/tasks/${task.id}`)}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') navigate(`/subcontractor/tasks/${task.id}`); }}
|
||||
className="group p-4 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-100 dark:border-white/5 hover:border-blue-500/30 transition-all cursor-pointer"
|
||||
>
|
||||
<div className="flex flex-col md:flex-row justify-between md:items-center gap-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className={`p-3 rounded-lg ${task.status === 'completed' ? 'bg-emerald-100 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400' :
|
||||
task.status === 'in_progress' ? 'bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400' :
|
||||
'bg-zinc-100 text-zinc-600 dark:bg-white/10 dark:text-zinc-400'
|
||||
}`}>
|
||||
<div className="flex items-start gap-4 min-w-0">
|
||||
<div className={`p-3 rounded-lg shrink-0 ${statusTone}`}>
|
||||
<CheckSquare size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-zinc-900 dark:text-white">{task.name}</h4>
|
||||
<div className="flex items-center text-xs text-zinc-500 dark:text-zinc-400 mt-1">
|
||||
<MapPin size={12} className="mr-1" />
|
||||
{task.projectAddress}
|
||||
<div className="min-w-0">
|
||||
<h4 className="font-bold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors truncate">{task.title}</h4>
|
||||
<div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-zinc-500 dark:text-zinc-400 mt-1">
|
||||
<span className="flex items-center gap-1"><MapPin size={12} />{task.location}</span>
|
||||
<span className="font-mono">{task.id}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-3 md:gap-4 shrink-0">
|
||||
<div className="text-right">
|
||||
<p className="text-xs font-mono font-medium text-zinc-500 mb-1">Due: {task.dueDate}</p>
|
||||
<span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider ${task.status === 'completed' ? 'bg-emerald-100 text-emerald-600' :
|
||||
task.status === 'in_progress' ? 'bg-blue-100 text-blue-600' : 'bg-amber-100 text-amber-600'
|
||||
}`}>
|
||||
{task.status.replace('_', ' ')}
|
||||
<p className={`text-xs font-mono font-medium mb-1 flex items-center justify-end gap-1 ${overdue ? 'text-red-500 font-bold' : 'text-zinc-500'}`}>
|
||||
{overdue && <AlertCircle size={11} />}
|
||||
Due: {task.dueDate}
|
||||
</p>
|
||||
<span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider ${statusTone}`}>
|
||||
{task.status}
|
||||
</span>
|
||||
</div>
|
||||
{task.status !== 'completed' && (
|
||||
<button className="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold transition-colors"
|
||||
onClick={(e) => { e.stopPropagation(); handleTaskClick(task); }}>
|
||||
Update
|
||||
</button>
|
||||
)}
|
||||
<ChevronRight size={16} className="text-zinc-400 group-hover:text-blue-500 transition-colors" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)) : (
|
||||
<div className="text-center py-10 text-zinc-500"><p>No tasks assigned.</p></div>
|
||||
);
|
||||
}) : (
|
||||
<div className="text-center py-10 text-zinc-500"><p>No tasks assigned yet.</p></div>
|
||||
)}
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
|
||||
{/* Project History & Payment Tracking */}
|
||||
<SpotlightCard className="p-6">
|
||||
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-zinc-900 dark:text-white flex items-center gap-2">
|
||||
<Receipt size={18} className="text-amber-500 dark:text-amber-400" />
|
||||
Project History & Payments
|
||||
</h2>
|
||||
<p className="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5">
|
||||
Track payment requests and receipts across every project you've worked on.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{[
|
||||
{ key: 'all', label: 'All', tone: 'bg-zinc-100 dark:bg-white/10 text-zinc-700 dark:text-zinc-200' },
|
||||
{ key: 'Paid', label: 'Paid', tone: 'bg-emerald-100 dark:bg-emerald-500/15 text-emerald-700 dark:text-emerald-400' },
|
||||
{ key: 'Requested', label: 'Requested', tone: 'bg-blue-100 dark:bg-blue-500/15 text-blue-700 dark:text-blue-400' },
|
||||
{ key: 'Pending', label: 'Pending', tone: 'bg-amber-100 dark:bg-amber-500/15 text-amber-700 dark:text-amber-400' },
|
||||
].map(p => {
|
||||
const active = historyFilter === p.key;
|
||||
return (
|
||||
<button
|
||||
key={p.key}
|
||||
type="button"
|
||||
onClick={() => setHistoryFilter(p.key)}
|
||||
className={`px-3 py-1.5 rounded-lg text-[11px] font-bold uppercase tracking-wider transition-colors border ${active ? `${p.tone} border-transparent shadow-sm` : 'bg-transparent border-zinc-200 dark:border-white/10 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-white/5'}`}
|
||||
>
|
||||
{p.label}
|
||||
<span className="ml-1.5 opacity-70">{historyCounts[p.key] ?? 0}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setHistorySort(d => d === 'desc' ? 'asc' : 'desc')}
|
||||
className="px-3 py-1.5 rounded-lg text-[11px] font-bold uppercase tracking-wider border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-white/5 transition-colors flex items-center gap-1.5"
|
||||
aria-label={`Sort by requested date ${historySort === 'desc' ? 'descending' : 'ascending'}`}
|
||||
>
|
||||
{historySort === 'desc' ? <ArrowDown size={12} /> : <ArrowUp size={12} />}
|
||||
{historySort === 'desc' ? 'Newest' : 'Oldest'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{paymentHistoryRows.length === 0 ? (
|
||||
<div className="py-10 text-center">
|
||||
<FileText size={28} className="mx-auto mb-3 text-zinc-400" />
|
||||
<p className="text-sm text-zinc-500">No project history yet.</p>
|
||||
<p className="text-xs text-zinc-400 mt-1">
|
||||
{historyFilter === 'all' ? 'Tasks assigned to you will appear here.' : `No projects with status "${historyFilter}".`}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto rounded-xl border border-zinc-200 dark:border-white/5">
|
||||
<table className="w-full text-left min-w-[940px]">
|
||||
<thead>
|
||||
<tr className="border-b border-zinc-200 dark:border-white/5 bg-zinc-50 dark:bg-white/[0.02]">
|
||||
<th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Project ID</th>
|
||||
<th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Project Name</th>
|
||||
<th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setHistorySort(d => d === 'desc' ? 'asc' : 'desc')}
|
||||
className="inline-flex items-center gap-1 hover:text-zinc-900 dark:hover:text-white transition-colors"
|
||||
title="Sort by requested date"
|
||||
>
|
||||
Requested
|
||||
{historySort === 'desc' ? <ArrowDown size={10} /> : <ArrowUp size={10} />}
|
||||
</button>
|
||||
</th>
|
||||
<th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Received</th>
|
||||
<th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest text-right">Amount</th>
|
||||
<th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Note</th>
|
||||
<th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{paymentHistoryRows.map(row => {
|
||||
const unpaid = row.status !== 'Paid';
|
||||
const statusTone = {
|
||||
Paid: 'bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-500/15 dark:text-emerald-400 dark:border-emerald-500/20',
|
||||
Requested: 'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-500/15 dark:text-blue-400 dark:border-blue-500/20',
|
||||
Pending: 'bg-amber-100 text-amber-700 border-amber-200 dark:bg-amber-500/15 dark:text-amber-400 dark:border-amber-500/20',
|
||||
}[row.status] || 'bg-zinc-100 text-zinc-600 border-zinc-200 dark:bg-white/5 dark:text-zinc-400 dark:border-white/10';
|
||||
|
||||
return (
|
||||
<tr
|
||||
key={row.id}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => navigate(`/subcontractor/tasks/${row.id}`)}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') navigate(`/subcontractor/tasks/${row.id}`); }}
|
||||
className={`border-b border-zinc-100 dark:border-white/[0.03] hover:bg-zinc-50 dark:hover:bg-white/[0.02] transition-colors cursor-pointer group ${unpaid ? 'border-l-2 border-l-amber-400/60 dark:border-l-amber-500/40' : ''}`}
|
||||
>
|
||||
<td className="px-4 py-3">
|
||||
<span className="text-[11px] font-mono text-zinc-500 dark:text-zinc-400">
|
||||
{row.projectId || '—'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="min-w-0">
|
||||
<div className="text-xs font-semibold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors truncate max-w-[220px]" title={row.projectName}>
|
||||
{row.projectName}
|
||||
</div>
|
||||
{row.projectAddress && (
|
||||
<div className="text-[10px] text-zinc-500 dark:text-zinc-400 truncate max-w-[220px]" title={row.projectAddress}>
|
||||
{row.projectAddress}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className="text-[11px] font-mono text-zinc-600 dark:text-zinc-300 whitespace-nowrap">
|
||||
{row.requestedAt ? new Date(row.requestedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) : '—'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={`text-[11px] font-mono whitespace-nowrap ${row.receivedAt ? 'text-emerald-600 dark:text-emerald-400 font-semibold' : 'text-amber-600 dark:text-amber-400/80'}`}>
|
||||
{row.receivedAt ? new Date(row.receivedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) : 'Not received'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<span className={`font-mono text-xs font-bold whitespace-nowrap ${row.amount > 0 ? (row.status === 'Paid' ? 'text-emerald-600 dark:text-emerald-400' : 'text-amber-600 dark:text-amber-400') : 'text-zinc-400 dark:text-zinc-500'}`}>
|
||||
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(row.amount)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => { e.stopPropagation(); setNoteModal(row); }}
|
||||
className="inline-flex items-center gap-1.5 text-[11px] text-zinc-600 dark:text-zinc-300 hover:text-blue-600 dark:hover:text-blue-400 max-w-[220px] truncate"
|
||||
title={row.note}
|
||||
>
|
||||
<FileText size={11} className="shrink-0" />
|
||||
<span className="truncate">{row.note || 'View note'}</span>
|
||||
</button>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={`text-[11px] font-bold rounded-md px-1.5 py-0.5 border whitespace-nowrap ${statusTone}`}>
|
||||
{row.status}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</SpotlightCard>
|
||||
</div>
|
||||
|
||||
{/* Earnings Widget */}
|
||||
<div>
|
||||
{/* Right column: Earnings + Notifications */}
|
||||
<div className="space-y-6">
|
||||
<SpotlightCard className="p-6">
|
||||
<h2 className="text-lg font-bold text-zinc-900 dark:text-white mb-4">Earnings Tracker</h2>
|
||||
<div className="relative pt-4 pb-8">
|
||||
@@ -385,9 +616,79 @@ const SubContractorDashboard = () => {
|
||||
</button>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
|
||||
<NotificationsPanel
|
||||
notifications={myNotifications}
|
||||
onMarkAllRead={() => myNotifications.forEach(n => !n.isRead && markNotificationRead(n.id))}
|
||||
onNotificationClick={(n) => { if (!n.isRead) markNotificationRead(n.id); }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Note detail modal */}
|
||||
{noteModal && createPortal(
|
||||
<div className="fixed inset-0 z-[9999] flex items-center justify-center p-4" role="dialog" aria-modal="true">
|
||||
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setNoteModal(null)} />
|
||||
<div className="relative w-full max-w-lg bg-white dark:bg-[#121214] rounded-2xl shadow-2xl border border-zinc-200 dark:border-white/10 overflow-hidden animate-in zoom-in-95 duration-200">
|
||||
<div className="px-6 py-5 border-b border-zinc-200 dark:border-white/10 flex justify-between items-center bg-zinc-50/50 dark:bg-white/5">
|
||||
<h2 className="text-lg font-bold text-zinc-900 dark:text-white">Note Detail</h2>
|
||||
<button onClick={() => setNoteModal(null)} className="p-2 rounded-lg bg-zinc-100 dark:bg-white/10 text-zinc-500 hover:text-red-500 transition-colors"><X size={18} /></button>
|
||||
</div>
|
||||
<div className="p-6 space-y-4">
|
||||
<div>
|
||||
<div className="text-[10px] uppercase font-bold tracking-wider text-zinc-500 mb-1">Project</div>
|
||||
<div className="font-semibold text-zinc-900 dark:text-white">{noteModal.projectName}</div>
|
||||
{noteModal.projectAddress && (
|
||||
<div className="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5">{noteModal.projectAddress}</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-3 text-sm">
|
||||
<div className="p-3 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-200 dark:border-white/5">
|
||||
<div className="text-[10px] uppercase font-bold tracking-wider text-zinc-500 mb-1">Requested</div>
|
||||
<div className="font-mono text-zinc-900 dark:text-white">
|
||||
{noteModal.requestedAt ? new Date(noteModal.requestedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) : '—'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-3 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-200 dark:border-white/5">
|
||||
<div className="text-[10px] uppercase font-bold tracking-wider text-zinc-500 mb-1">Received</div>
|
||||
<div className={`font-mono ${noteModal.receivedAt ? 'text-emerald-600 dark:text-emerald-400' : 'text-amber-600 dark:text-amber-400'}`}>
|
||||
{noteModal.receivedAt ? new Date(noteModal.receivedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) : 'Not received'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-3 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-200 dark:border-white/5">
|
||||
<div className="text-[10px] uppercase font-bold tracking-wider text-zinc-500 mb-1">Amount</div>
|
||||
<div className={`font-mono font-bold ${noteModal.amount > 0 ? (noteModal.status === 'Paid' ? 'text-emerald-600 dark:text-emerald-400' : 'text-amber-600 dark:text-amber-400') : 'text-zinc-400'}`}>
|
||||
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(noteModal.amount || 0)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[10px] uppercase font-bold tracking-wider text-zinc-500 mb-1">Note</div>
|
||||
<div className="text-sm text-zinc-900 dark:text-white font-semibold">{noteModal.note || '—'}</div>
|
||||
{noteModal.description && (
|
||||
<p className="text-sm text-zinc-600 dark:text-zinc-300 mt-2 leading-relaxed whitespace-pre-line">{noteModal.description}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-6 py-4 border-t border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/5 flex justify-end gap-2">
|
||||
<button
|
||||
onClick={() => setNoteModal(null)}
|
||||
className="px-4 py-2 text-sm font-bold rounded-xl border border-zinc-200 dark:border-white/10 hover:bg-zinc-100 dark:hover:bg-white/5 transition-colors"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { const id = noteModal.id; setNoteModal(null); navigate(`/subcontractor/tasks/${id}`); }}
|
||||
className="px-4 py-2 text-sm font-bold rounded-xl bg-blue-600 hover:bg-blue-500 text-white transition-colors"
|
||||
>
|
||||
Open Task
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
)}
|
||||
|
||||
{/* Modals */}
|
||||
<TaskDetailsModal isOpen={isTaskModalOpen} onClose={() => setIsTaskModalOpen(false)} task={selectedTask} onUpdate={handleTaskUpdate} />
|
||||
<FinancialSummaryModal isOpen={isFinancialModalOpen} onClose={() => setIsFinancialModalOpen(false)} role="SUBCONTRACTOR" data={financialData} />
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user