754 lines
30 KiB
TypeScript
754 lines
30 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect, useCallback, useMemo } from 'react';
|
|
import { formatCompactCurrency, formatCurrency } from '@/lib/utils';
|
|
import {
|
|
TrendingUp,
|
|
Loader2,
|
|
DollarSign,
|
|
Users,
|
|
FileText,
|
|
CheckCircle2,
|
|
Clock,
|
|
Plus,
|
|
Search,
|
|
X,
|
|
Sparkles,
|
|
Send,
|
|
} from 'lucide-react';
|
|
import {
|
|
ResponsiveContainer,
|
|
ComposedChart,
|
|
Bar,
|
|
Line,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
Legend,
|
|
} from 'recharts';
|
|
import { ErrorState } from '@/components/ui/ErrorState';
|
|
|
|
// ─── Types ────────────────────────────────────────────────────────
|
|
interface MonthlySched {
|
|
monthIndex: number;
|
|
month: string;
|
|
year: number;
|
|
scheduled: number;
|
|
recognized: number;
|
|
posted: number;
|
|
deferred: number;
|
|
lineCount: number;
|
|
}
|
|
|
|
interface CustomerBreakdown {
|
|
name: string;
|
|
code: string;
|
|
total: number;
|
|
recognized: number;
|
|
deferred: number;
|
|
contractCount: number;
|
|
recognitionRate: number;
|
|
}
|
|
|
|
interface ContractRow {
|
|
id: string;
|
|
contractNumber: string;
|
|
name: string;
|
|
customer: string;
|
|
totalValue: number;
|
|
recognizedToDate: number;
|
|
deferredBalance: number;
|
|
completionPercent: number;
|
|
startDate: string;
|
|
endDate: string;
|
|
recognitionMethod: string;
|
|
status: string;
|
|
}
|
|
|
|
interface Summary {
|
|
totalContractValue: number;
|
|
totalRecognized: number;
|
|
totalDeferred: number;
|
|
recognitionRate: number;
|
|
activeContracts: number;
|
|
totalContracts: number;
|
|
totalCustomers: number;
|
|
}
|
|
|
|
interface RevRecData {
|
|
year: number;
|
|
monthlySchedule: MonthlySched[];
|
|
customerBreakdown: CustomerBreakdown[];
|
|
contracts: ContractRow[];
|
|
summary: Summary;
|
|
}
|
|
|
|
interface CustomerOption {
|
|
id: string;
|
|
customerName: string;
|
|
customerCode: string;
|
|
}
|
|
|
|
// ─── Page ─────────────────────────────────────────────────────────
|
|
export default function RevenueRecognitionPage() {
|
|
const [data, setData] = useState<RevRecData | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [activeTab, setActiveTab] = useState<'schedule' | 'customers' | 'contracts'>('schedule');
|
|
const [contractSearch, setContractSearch] = useState('');
|
|
|
|
// Create panel state
|
|
const [showCreate, setShowCreate] = useState(false);
|
|
const [customers, setCustomers] = useState<CustomerOption[]>([]);
|
|
const [creating, setCreating] = useState(false);
|
|
const [seeding, setSeeding] = useState(false);
|
|
const [posting, setPosting] = useState(false);
|
|
|
|
// Form state
|
|
const [form, setForm] = useState({
|
|
name: '',
|
|
customerId: '',
|
|
totalValue: '',
|
|
startDate: new Date().toISOString().slice(0, 10),
|
|
endDate: new Date(new Date().setMonth(new Date().getMonth() + 12)).toISOString().slice(0, 10),
|
|
recognitionMethod: 'STRAIGHT_LINE',
|
|
deferredAccountCode: '2300',
|
|
revenueAccountCode: '4000',
|
|
});
|
|
|
|
// Post-period state
|
|
const [postPeriod, setPostPeriod] = useState({
|
|
year: new Date().getFullYear(),
|
|
month: new Date().getMonth() + 1,
|
|
});
|
|
const [postResult, setPostResult] = useState<string | null>(null);
|
|
|
|
const fetchData = useCallback(async () => {
|
|
setError(null);
|
|
const controller = new AbortController();
|
|
const timeout = setTimeout(() => controller.abort(), 30000);
|
|
try {
|
|
const res = await fetch('/api/revenue-recognition', {
|
|
cache: 'no-store',
|
|
signal: controller.signal,
|
|
});
|
|
if (!res.ok) {
|
|
const body = await res.json().catch(() => ({}));
|
|
throw new Error(body?.details || body?.error || `HTTP ${res.status}`);
|
|
}
|
|
const json = (await res.json()) as RevRecData;
|
|
if (!json || !Array.isArray(json.contracts) || !json.summary) {
|
|
throw new Error('Unexpected response shape');
|
|
}
|
|
setData(json);
|
|
} catch (e: any) {
|
|
if (e?.name !== 'AbortError') setError(e?.message || 'Failed to load');
|
|
} finally {
|
|
clearTimeout(timeout);
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, [fetchData]);
|
|
|
|
useEffect(() => {
|
|
// Lazy load customers when create panel opens
|
|
if (showCreate && customers.length === 0) {
|
|
fetch('/api/customers', { cache: 'no-store' })
|
|
.then((r) => r.json())
|
|
.then((d) => setCustomers(Array.isArray(d) ? d : d.customers || []))
|
|
.catch(() => {});
|
|
}
|
|
}, [showCreate, customers.length]);
|
|
|
|
// ─── Mutations ──────────────────────────────────────────────────
|
|
const handleCreate = async () => {
|
|
if (!form.name || !form.totalValue || !form.startDate || !form.endDate) {
|
|
return;
|
|
}
|
|
setCreating(true);
|
|
try {
|
|
const res = await fetch('/api/revenue-contracts', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
...form,
|
|
totalValue: Number(form.totalValue),
|
|
customerId: form.customerId || null,
|
|
}),
|
|
});
|
|
if (!res.ok) {
|
|
const body = await res.json().catch(() => ({}));
|
|
throw new Error(body?.error || 'Failed to create contract');
|
|
}
|
|
setShowCreate(false);
|
|
setForm({
|
|
name: '',
|
|
customerId: '',
|
|
totalValue: '',
|
|
startDate: new Date().toISOString().slice(0, 10),
|
|
endDate: new Date(new Date().setMonth(new Date().getMonth() + 12)).toISOString().slice(0, 10),
|
|
recognitionMethod: 'STRAIGHT_LINE',
|
|
deferredAccountCode: '2300',
|
|
revenueAccountCode: '4000',
|
|
});
|
|
await fetchData();
|
|
} catch (e: any) {
|
|
alert(e?.message || 'Failed to create contract');
|
|
} finally {
|
|
setCreating(false);
|
|
}
|
|
};
|
|
|
|
const handleSeed = async () => {
|
|
setSeeding(true);
|
|
try {
|
|
const res = await fetch('/api/revenue-contracts', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ seed: true }),
|
|
});
|
|
if (!res.ok) {
|
|
const body = await res.json().catch(() => ({}));
|
|
throw new Error(body?.error || 'Failed to seed');
|
|
}
|
|
await fetchData();
|
|
} catch (e: any) {
|
|
alert(e?.message || 'Failed to seed');
|
|
} finally {
|
|
setSeeding(false);
|
|
}
|
|
};
|
|
|
|
const handlePost = async () => {
|
|
setPosting(true);
|
|
setPostResult(null);
|
|
try {
|
|
const res = await fetch('/api/revenue-recognition/post', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(postPeriod),
|
|
});
|
|
const json = await res.json();
|
|
if (!res.ok) throw new Error(json?.error || 'Failed to post');
|
|
const lines = `Recognized ${json.recognizedCount} lines, ${formatCurrency(json.totalAmount)}`;
|
|
const je = json.journalEntryId ? ' — JE created' : '';
|
|
const warn = json.warning ? ` (${json.warning})` : '';
|
|
setPostResult(lines + je + warn);
|
|
await fetchData();
|
|
} catch (e: any) {
|
|
setPostResult(`Error: ${e?.message || 'Failed to post'}`);
|
|
} finally {
|
|
setPosting(false);
|
|
}
|
|
};
|
|
|
|
// ─── Derived ────────────────────────────────────────────────────
|
|
const filteredContracts = useMemo(() => {
|
|
if (!data) return [];
|
|
const q = contractSearch.toLowerCase().trim();
|
|
if (!q) return data.contracts;
|
|
return data.contracts.filter(
|
|
(c) =>
|
|
c.contractNumber.toLowerCase().includes(q) ||
|
|
c.name.toLowerCase().includes(q) ||
|
|
c.customer.toLowerCase().includes(q)
|
|
);
|
|
}, [data, contractSearch]);
|
|
|
|
// ─── Render ─────────────────────────────────────────────────────
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-[60vh]">
|
|
<Loader2 size={32} className="text-blue-500 animate-spin" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return <ErrorState message={error} title="Couldn't load revenue recognition" onRetry={fetchData} />;
|
|
}
|
|
|
|
if (!data) return null;
|
|
|
|
const isEmpty = data.contracts.length === 0;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between flex-wrap gap-3">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-[#F0F0F3] flex items-center gap-2">
|
|
<TrendingUp size={24} className="text-emerald-500" />
|
|
Revenue Recognition
|
|
</h1>
|
|
<p className="text-sm text-[#8B8B9E] mt-0.5">
|
|
ASC 606 contract management · {data.summary.activeContracts} active contracts
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{isEmpty && (
|
|
<button
|
|
onClick={handleSeed}
|
|
disabled={seeding}
|
|
className="text-xs px-3 py-1.5 rounded-lg bg-purple-600 hover:bg-purple-500 text-white font-medium flex items-center gap-1 disabled:opacity-50"
|
|
>
|
|
<Sparkles size={12} />
|
|
{seeding ? 'Seeding…' : 'Seed Demo Contracts'}
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={() => setShowCreate(!showCreate)}
|
|
className="text-xs px-3 py-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white font-medium flex items-center gap-1"
|
|
>
|
|
<Plus size={12} />
|
|
New Contract
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Create panel */}
|
|
{showCreate && (
|
|
<div className="bg-[#1A1A1F] rounded-xl border border-[#2A2A32] p-5">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-sm font-semibold text-[#F0F0F3]">New Revenue Contract</h3>
|
|
<button
|
|
onClick={() => setShowCreate(false)}
|
|
className="text-[#5A5A6E] hover:text-[#F0F0F3]"
|
|
>
|
|
<X size={16} />
|
|
</button>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="col-span-2">
|
|
<label className="text-[10px] text-[#8B8B9E] uppercase">Contract Name</label>
|
|
<input
|
|
type="text"
|
|
value={form.name}
|
|
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
|
placeholder="Enterprise SaaS Subscription - Annual"
|
|
className="w-full mt-1 bg-[#111114] border border-[#2A2A32] rounded-lg px-3 py-2 text-sm text-[#F0F0F3] focus:outline-none focus:border-emerald-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] text-[#8B8B9E] uppercase">Customer</label>
|
|
<select
|
|
value={form.customerId}
|
|
onChange={(e) => setForm({ ...form, customerId: e.target.value })}
|
|
className="w-full mt-1 bg-[#111114] border border-[#2A2A32] rounded-lg px-3 py-2 text-sm text-[#F0F0F3] focus:outline-none focus:border-emerald-500"
|
|
>
|
|
<option value="">— Select customer —</option>
|
|
{customers.map((c) => (
|
|
<option key={c.id} value={c.id}>
|
|
{c.customerName}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] text-[#8B8B9E] uppercase">Total Contract Value</label>
|
|
<input
|
|
type="number"
|
|
value={form.totalValue}
|
|
onChange={(e) => setForm({ ...form, totalValue: e.target.value })}
|
|
placeholder="120000"
|
|
className="w-full mt-1 bg-[#111114] border border-[#2A2A32] rounded-lg px-3 py-2 text-sm text-[#F0F0F3] focus:outline-none focus:border-emerald-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] text-[#8B8B9E] uppercase">Start Date</label>
|
|
<input
|
|
type="date"
|
|
value={form.startDate}
|
|
onChange={(e) => setForm({ ...form, startDate: e.target.value })}
|
|
className="w-full mt-1 bg-[#111114] border border-[#2A2A32] rounded-lg px-3 py-2 text-sm text-[#F0F0F3] focus:outline-none focus:border-emerald-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] text-[#8B8B9E] uppercase">End Date</label>
|
|
<input
|
|
type="date"
|
|
value={form.endDate}
|
|
onChange={(e) => setForm({ ...form, endDate: e.target.value })}
|
|
className="w-full mt-1 bg-[#111114] border border-[#2A2A32] rounded-lg px-3 py-2 text-sm text-[#F0F0F3] focus:outline-none focus:border-emerald-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] text-[#8B8B9E] uppercase">Recognition Method</label>
|
|
<select
|
|
value={form.recognitionMethod}
|
|
onChange={(e) => setForm({ ...form, recognitionMethod: e.target.value })}
|
|
className="w-full mt-1 bg-[#111114] border border-[#2A2A32] rounded-lg px-3 py-2 text-sm text-[#F0F0F3] focus:outline-none focus:border-emerald-500"
|
|
>
|
|
<option value="STRAIGHT_LINE">Straight-Line (ratable)</option>
|
|
<option value="POINT_IN_TIME">Point-in-Time</option>
|
|
<option value="MILESTONE">Milestone</option>
|
|
<option value="USAGE_BASED">Usage-Based</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] text-[#8B8B9E] uppercase">Deferred Acct Code</label>
|
|
<input
|
|
type="text"
|
|
value={form.deferredAccountCode}
|
|
onChange={(e) => setForm({ ...form, deferredAccountCode: e.target.value })}
|
|
className="w-full mt-1 bg-[#111114] border border-[#2A2A32] rounded-lg px-3 py-2 text-sm text-[#F0F0F3] focus:outline-none focus:border-emerald-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] text-[#8B8B9E] uppercase">Revenue Acct Code</label>
|
|
<input
|
|
type="text"
|
|
value={form.revenueAccountCode}
|
|
onChange={(e) => setForm({ ...form, revenueAccountCode: e.target.value })}
|
|
className="w-full mt-1 bg-[#111114] border border-[#2A2A32] rounded-lg px-3 py-2 text-sm text-[#F0F0F3] focus:outline-none focus:border-emerald-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end gap-2 mt-4">
|
|
<button
|
|
onClick={() => setShowCreate(false)}
|
|
className="text-xs px-3 py-1.5 rounded-lg bg-[#111114] border border-[#2A2A32] text-[#8B8B9E] hover:text-[#F0F0F3]"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={handleCreate}
|
|
disabled={creating || !form.name || !form.totalValue}
|
|
className="text-xs px-3 py-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white font-medium disabled:opacity-50"
|
|
>
|
|
{creating ? 'Creating…' : 'Create Contract & Schedule'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* KPIs */}
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<KpiCard
|
|
icon={<DollarSign size={16} className="text-emerald-400" />}
|
|
label="Total Contract Value"
|
|
value={formatCompactCurrency(data.summary.totalContractValue)}
|
|
sublabel={`${data.summary.totalContracts} contracts`}
|
|
/>
|
|
<KpiCard
|
|
icon={<CheckCircle2 size={16} className="text-blue-400" />}
|
|
label="Recognized to Date"
|
|
value={formatCompactCurrency(data.summary.totalRecognized)}
|
|
sublabel={`${data.summary.recognitionRate}% of total`}
|
|
/>
|
|
<KpiCard
|
|
icon={<Clock size={16} className="text-amber-400" />}
|
|
label="Deferred Balance"
|
|
value={formatCompactCurrency(data.summary.totalDeferred)}
|
|
sublabel="Yet to recognize"
|
|
/>
|
|
<KpiCard
|
|
icon={<Users size={16} className="text-purple-400" />}
|
|
label="Customers"
|
|
value={String(data.summary.totalCustomers)}
|
|
sublabel={`${data.summary.activeContracts} active contracts`}
|
|
/>
|
|
</div>
|
|
|
|
{/* Post period card */}
|
|
<div className="bg-[#1A1A1F] rounded-xl border border-[#2A2A32] p-5">
|
|
<div className="flex items-center justify-between flex-wrap gap-3">
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-[#F0F0F3] flex items-center gap-2">
|
|
<Send size={14} className="text-blue-400" />
|
|
Post Recognition for Period
|
|
</h3>
|
|
<p className="text-xs text-[#8B8B9E] mt-0.5">
|
|
Recognizes all SCHEDULED lines and posts a balanced JE (debits deferred, credits revenue).
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<select
|
|
value={postPeriod.year}
|
|
onChange={(e) => setPostPeriod({ ...postPeriod, year: parseInt(e.target.value) })}
|
|
className="bg-[#111114] border border-[#2A2A32] rounded-lg px-2 py-1.5 text-xs text-[#F0F0F3]"
|
|
>
|
|
{[data.year - 1, data.year, data.year + 1].map((y) => (
|
|
<option key={y} value={y}>
|
|
{y}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<select
|
|
value={postPeriod.month}
|
|
onChange={(e) => setPostPeriod({ ...postPeriod, month: parseInt(e.target.value) })}
|
|
className="bg-[#111114] border border-[#2A2A32] rounded-lg px-2 py-1.5 text-xs text-[#F0F0F3]"
|
|
>
|
|
{Array.from({ length: 12 }, (_, i) => i + 1).map((m) => (
|
|
<option key={m} value={m}>
|
|
{new Date(2000, m - 1, 1).toLocaleString('en-US', { month: 'long' })}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<button
|
|
onClick={handlePost}
|
|
disabled={posting || isEmpty}
|
|
className="text-xs px-3 py-1.5 rounded-lg bg-blue-600 hover:bg-blue-500 text-white font-medium disabled:opacity-50"
|
|
>
|
|
{posting ? 'Posting…' : 'Post Period'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{postResult && (
|
|
<div
|
|
className={`mt-3 px-3 py-2 rounded-lg text-xs ${
|
|
postResult.startsWith('Error')
|
|
? 'bg-red-900/20 text-red-400 border border-red-900/40'
|
|
: 'bg-emerald-900/20 text-emerald-400 border border-emerald-900/40'
|
|
}`}
|
|
>
|
|
{postResult}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className="bg-[#1A1A1F] rounded-xl border border-[#2A2A32] overflow-hidden">
|
|
<div className="flex border-b border-[#2A2A32]">
|
|
{[
|
|
{ key: 'schedule', label: 'Monthly Schedule', icon: <TrendingUp size={14} /> },
|
|
{ key: 'customers', label: 'Customers', icon: <Users size={14} /> },
|
|
{ key: 'contracts', label: 'Contracts', icon: <FileText size={14} /> },
|
|
].map((tab) => (
|
|
<button
|
|
key={tab.key}
|
|
onClick={() => setActiveTab(tab.key as any)}
|
|
className={`flex items-center gap-2 px-5 py-3 text-xs font-medium transition-colors ${
|
|
activeTab === tab.key
|
|
? 'text-emerald-400 border-b-2 border-emerald-500 bg-[#111114]/50'
|
|
: 'text-[#8B8B9E] hover:text-[#F0F0F3]'
|
|
}`}
|
|
>
|
|
{tab.icon}
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Schedule tab */}
|
|
{activeTab === 'schedule' && (
|
|
<div className="p-5">
|
|
<div className="h-72">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<ComposedChart data={data.monthlySchedule}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#2A2A32" />
|
|
<XAxis dataKey="month" stroke="#8B8B9E" tick={{ fontSize: 11 }} />
|
|
<YAxis
|
|
stroke="#8B8B9E"
|
|
tick={{ fontSize: 11 }}
|
|
tickFormatter={(v) => formatCompactCurrency(v)}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
background: '#111114',
|
|
border: '1px solid #2A2A32',
|
|
borderRadius: 8,
|
|
}}
|
|
formatter={(v: any) => formatCurrency(Number(v))}
|
|
/>
|
|
<Legend wrapperStyle={{ fontSize: 11 }} />
|
|
<Bar dataKey="scheduled" name="Scheduled" fill="#4A9EFF" radius={[4, 4, 0, 0]} />
|
|
<Bar dataKey="recognized" name="Recognized" fill="#10b981" radius={[4, 4, 0, 0]} />
|
|
<Line
|
|
type="monotone"
|
|
dataKey="deferred"
|
|
name="Deferred"
|
|
stroke="#f59e0b"
|
|
strokeWidth={2}
|
|
dot={{ r: 3 }}
|
|
/>
|
|
</ComposedChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
<div className="mt-4 overflow-x-auto">
|
|
<table className="w-full text-xs">
|
|
<thead>
|
|
<tr className="text-left text-[#5A5A6E] border-b border-[#2A2A32]">
|
|
<th className="py-2 pr-4">Month</th>
|
|
<th className="py-2 pr-4 text-right">Lines</th>
|
|
<th className="py-2 pr-4 text-right">Scheduled</th>
|
|
<th className="py-2 pr-4 text-right">Recognized</th>
|
|
<th className="py-2 pr-4 text-right">Posted</th>
|
|
<th className="py-2 pr-4 text-right">Deferred</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{data.monthlySchedule.map((m) => (
|
|
<tr key={m.monthIndex} className="border-b border-[#2A2A32]/50">
|
|
<td className="py-2 pr-4 text-[#F0F0F3]">{m.month}</td>
|
|
<td className="py-2 pr-4 text-right text-[#8B8B9E]">{m.lineCount}</td>
|
|
<td className="py-2 pr-4 text-right text-[#F0F0F3]">{formatCurrency(m.scheduled)}</td>
|
|
<td className="py-2 pr-4 text-right text-emerald-400">{formatCurrency(m.recognized)}</td>
|
|
<td className="py-2 pr-4 text-right text-blue-400">{formatCurrency(m.posted)}</td>
|
|
<td className="py-2 pr-4 text-right text-amber-400">{formatCurrency(m.deferred)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Customers tab */}
|
|
{activeTab === 'customers' && (
|
|
<div className="p-5 overflow-x-auto">
|
|
{data.customerBreakdown.length === 0 ? (
|
|
<div className="text-center py-8 text-[#5A5A6E] text-sm">No customers yet</div>
|
|
) : (
|
|
<table className="w-full text-xs">
|
|
<thead>
|
|
<tr className="text-left text-[#5A5A6E] border-b border-[#2A2A32]">
|
|
<th className="py-2 pr-4">Customer</th>
|
|
<th className="py-2 pr-4 text-right">Contracts</th>
|
|
<th className="py-2 pr-4 text-right">Total Value</th>
|
|
<th className="py-2 pr-4 text-right">Recognized</th>
|
|
<th className="py-2 pr-4 text-right">Deferred</th>
|
|
<th className="py-2 pr-4 text-right">% Complete</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{data.customerBreakdown.map((c) => (
|
|
<tr key={c.code} className="border-b border-[#2A2A32]/50">
|
|
<td className="py-2 pr-4 text-[#F0F0F3]">{c.name}</td>
|
|
<td className="py-2 pr-4 text-right text-[#8B8B9E]">{c.contractCount}</td>
|
|
<td className="py-2 pr-4 text-right text-[#F0F0F3]">{formatCurrency(c.total)}</td>
|
|
<td className="py-2 pr-4 text-right text-emerald-400">{formatCurrency(c.recognized)}</td>
|
|
<td className="py-2 pr-4 text-right text-amber-400">{formatCurrency(c.deferred)}</td>
|
|
<td className="py-2 pr-4 text-right text-[#8B8B9E]">{c.recognitionRate}%</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Contracts tab */}
|
|
{activeTab === 'contracts' && (
|
|
<div className="p-5">
|
|
<div className="mb-3 relative">
|
|
<Search
|
|
size={14}
|
|
className="absolute left-3 top-1/2 -translate-y-1/2 text-[#5A5A6E]"
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={contractSearch}
|
|
onChange={(e) => setContractSearch(e.target.value)}
|
|
placeholder="Search contracts…"
|
|
className="w-full pl-9 pr-3 py-2 bg-[#111114] border border-[#2A2A32] rounded-lg text-xs text-[#F0F0F3] focus:outline-none focus:border-emerald-500"
|
|
/>
|
|
</div>
|
|
{filteredContracts.length === 0 ? (
|
|
<div className="text-center py-8 text-[#5A5A6E] text-sm">
|
|
{isEmpty
|
|
? 'No contracts yet. Create one above or seed demo data.'
|
|
: 'No contracts match your search.'}
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-xs">
|
|
<thead>
|
|
<tr className="text-left text-[#5A5A6E] border-b border-[#2A2A32]">
|
|
<th className="py-2 pr-3">Contract</th>
|
|
<th className="py-2 pr-3">Customer</th>
|
|
<th className="py-2 pr-3">Method</th>
|
|
<th className="py-2 pr-3 text-right">Total</th>
|
|
<th className="py-2 pr-3 text-right">Recognized</th>
|
|
<th className="py-2 pr-3 text-right">Deferred</th>
|
|
<th className="py-2 pr-3 text-right">Complete</th>
|
|
<th className="py-2 pr-3">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{filteredContracts.map((c) => (
|
|
<tr key={c.id} className="border-b border-[#2A2A32]/50 hover:bg-[#111114]/50">
|
|
<td className="py-2 pr-3">
|
|
<div className="font-medium text-[#F0F0F3]">{c.contractNumber}</div>
|
|
<div className="text-[10px] text-[#5A5A6E]">{c.name}</div>
|
|
</td>
|
|
<td className="py-2 pr-3 text-[#8B8B9E]">{c.customer}</td>
|
|
<td className="py-2 pr-3 text-[#8B8B9E]">
|
|
{c.recognitionMethod.replace('_', ' ')}
|
|
</td>
|
|
<td className="py-2 pr-3 text-right text-[#F0F0F3]">
|
|
{formatCurrency(c.totalValue)}
|
|
</td>
|
|
<td className="py-2 pr-3 text-right text-emerald-400">
|
|
{formatCurrency(c.recognizedToDate)}
|
|
</td>
|
|
<td className="py-2 pr-3 text-right text-amber-400">
|
|
{formatCurrency(c.deferredBalance)}
|
|
</td>
|
|
<td className="py-2 pr-3 text-right">
|
|
<div className="flex items-center justify-end gap-2">
|
|
<div className="w-12 h-1.5 bg-[#2A2A32] rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full bg-emerald-500"
|
|
style={{ width: `${c.completionPercent}%` }}
|
|
/>
|
|
</div>
|
|
<span className="text-[10px] text-[#8B8B9E] w-8 text-right">
|
|
{c.completionPercent}%
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td className="py-2 pr-3">
|
|
<span
|
|
className={`text-[10px] px-2 py-0.5 rounded font-medium ${
|
|
c.status === 'ACTIVE'
|
|
? 'bg-emerald-900/25 text-emerald-400'
|
|
: c.status === 'COMPLETED'
|
|
? 'bg-blue-900/25 text-blue-400'
|
|
: 'bg-[#2A2A32] text-[#8B8B9E]'
|
|
}`}
|
|
>
|
|
{c.status}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── KpiCard ──────────────────────────────────────────────────────
|
|
function KpiCard({
|
|
icon,
|
|
label,
|
|
value,
|
|
sublabel,
|
|
}: {
|
|
icon: React.ReactNode;
|
|
label: string;
|
|
value: string;
|
|
sublabel?: string;
|
|
}) {
|
|
return (
|
|
<div className="bg-[#1A1A1F] rounded-xl border border-[#2A2A32] p-4">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
{icon}
|
|
<p className="text-[10px] font-medium text-[#8B8B9E] uppercase tracking-wide">{label}</p>
|
|
</div>
|
|
<p className="text-xl font-bold text-[#F0F0F3]">{value}</p>
|
|
{sublabel && <p className="text-[10px] text-[#5A5A6E] mt-0.5">{sublabel}</p>}
|
|
</div>
|
|
);
|
|
}
|