Implement CORP Dashboard (Priority #2) with all widgets
cgen-a56866234b0e4695a35ed6f59f85f0c9
This commit is contained in:
Builder.io
parent
dd7ca332a0
commit
ecd739d428
1 changed files with 439 additions and 274 deletions
|
|
@ -28,6 +28,9 @@ import {
|
|||
ArrowRight,
|
||||
MessageSquare,
|
||||
Phone,
|
||||
Briefcase,
|
||||
ArrowDown,
|
||||
MapPin,
|
||||
} from "lucide-react";
|
||||
|
||||
const API_BASE = import.meta.env.VITE_API_BASE || "";
|
||||
|
|
@ -36,8 +39,9 @@ export default function ClientHub() {
|
|||
const navigate = useNavigate();
|
||||
const { user, loading: authLoading } = useAuth();
|
||||
const [activeTab, setActiveTab] = useState("overview");
|
||||
const [opportunities, setOpportunities] = useState<any[]>([]);
|
||||
const [contracts, setContracts] = useState<any[]>([]);
|
||||
const [invoices, setInvoices] = useState<any[]>([]);
|
||||
const [teamMembers, setTeamMembers] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -53,32 +57,45 @@ export default function ClientHub() {
|
|||
const token = session?.access_token;
|
||||
if (!token) throw new Error("No auth token");
|
||||
|
||||
// Load opportunities
|
||||
const oppRes = await fetch(`${API_BASE}/api/nexus/client/opportunities`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
if (oppRes.ok) {
|
||||
const data = await oppRes.json();
|
||||
setOpportunities(data.opportunities || []);
|
||||
}
|
||||
|
||||
// Load contracts
|
||||
const contractRes = await fetch(`${API_BASE}/api/nexus/client/contracts`, {
|
||||
// Load contracts for milestone tracking
|
||||
const contractRes = await fetch(`${API_BASE}/api/corp/contracts?limit=10`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
if (contractRes.ok) {
|
||||
const data = await contractRes.json();
|
||||
setContracts(data.contracts || []);
|
||||
setContracts(Array.isArray(data) ? data : data.contracts || []);
|
||||
}
|
||||
|
||||
// Load invoices
|
||||
const invoiceRes = await fetch(`${API_BASE}/api/corp/invoices?limit=20`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
if (invoiceRes.ok) {
|
||||
const data = await invoiceRes.json();
|
||||
setInvoices(Array.isArray(data) ? data : data.invoices || []);
|
||||
}
|
||||
|
||||
// Load team members (Account Manager, Solutions Architect)
|
||||
const teamRes = await fetch(`${API_BASE}/api/corp/team`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
if (teamRes.ok) {
|
||||
const data = await teamRes.json();
|
||||
setTeamMembers(Array.isArray(data) ? data : data.team || []);
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error("Failed to load hub data", error);
|
||||
console.error("Failed to load CORP dashboard data", error);
|
||||
aethexToast({
|
||||
message: "Failed to load some dashboard data",
|
||||
type: "error",
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (authLoading || loading) {
|
||||
return <LoadingScreen message="Loading Client Hub..." />;
|
||||
return <LoadingScreen message="Loading CORP Dashboard..." />;
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
|
|
@ -87,9 +104,9 @@ export default function ClientHub() {
|
|||
<div className="min-h-screen bg-gradient-to-b from-black via-blue-950/30 to-black flex items-center justify-center px-4">
|
||||
<div className="max-w-md text-center space-y-6">
|
||||
<h1 className="text-4xl font-bold bg-gradient-to-r from-blue-300 to-cyan-300 bg-clip-text text-transparent">
|
||||
Client Hub
|
||||
CORP Client Portal
|
||||
</h1>
|
||||
<p className="text-gray-400">Enterprise collaboration & hiring</p>
|
||||
<p className="text-gray-400">Enterprise solutions for your business</p>
|
||||
<Button
|
||||
onClick={() => navigate("/login")}
|
||||
className="w-full bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-lg py-6"
|
||||
|
|
@ -102,10 +119,13 @@ export default function ClientHub() {
|
|||
);
|
||||
}
|
||||
|
||||
const openOpportunities = opportunities.filter((o: any) => o.status === "open");
|
||||
const totalSpent = contracts.reduce((sum: number, c: any) => sum + (c.total_amount || 0), 0);
|
||||
const activeContracts = contracts.filter((c: any) => c.status === "active");
|
||||
const pendingApplications = openOpportunities.reduce((sum: number, o: any) => sum + (o.application_count || 0), 0);
|
||||
const activeContract = contracts.find(c => c.status === "active");
|
||||
const completedMilestones = activeContract?.milestones?.filter((m: any) => m.status === "completed").length || 0;
|
||||
const totalMilestones = activeContract?.milestones?.length || 0;
|
||||
const outstandingInvoices = invoices.filter((i: any) => i.status === "pending" || i.status === "overdue").length;
|
||||
const totalInvoiceValue = invoices.reduce((acc, inv) => acc + (inv.amount || 0), 0);
|
||||
const accountManager = teamMembers.find(t => t.role === "account_manager");
|
||||
const solutionsArchitect = teamMembers.find(t => t.role === "solutions_architect");
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
|
|
@ -116,64 +136,64 @@ export default function ClientHub() {
|
|||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||||
<div className="space-y-2">
|
||||
<h1 className="text-5xl md:text-6xl font-bold bg-gradient-to-r from-blue-300 via-cyan-300 to-blue-300 bg-clip-text text-transparent">
|
||||
Client Hub
|
||||
CORP Client Portal
|
||||
</h1>
|
||||
<p className="text-gray-400 text-lg">
|
||||
Enterprise hiring & project management
|
||||
Enterprise solutions, project status, and billing management
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={() => navigate("/nexus/post")}
|
||||
className="bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700"
|
||||
>
|
||||
Post Opportunity
|
||||
<ArrowRight className="h-4 w-4 ml-2" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Stats */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<Card className="bg-gradient-to-br from-blue-950/40 to-blue-900/20 border-blue-500/20">
|
||||
<CardContent className="p-6 space-y-2">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm text-gray-400">Open Opportunities</p>
|
||||
<FileText className="h-5 w-5 text-blue-500" />
|
||||
<div>
|
||||
<p className="text-xs text-gray-400 uppercase tracking-wider">Active Projects</p>
|
||||
<p className="text-2xl font-bold text-white mt-1">{contracts.filter(c => c.status === "active").length}</p>
|
||||
</div>
|
||||
<Briefcase className="h-6 w-6 text-blue-500 opacity-50" />
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-white">{openOpportunities.length}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-gradient-to-br from-cyan-950/40 to-cyan-900/20 border-cyan-500/20">
|
||||
<CardContent className="p-6 space-y-2">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm text-gray-400">Applications</p>
|
||||
<Users className="h-5 w-5 text-cyan-500" />
|
||||
<div>
|
||||
<p className="text-xs text-gray-400 uppercase tracking-wider">Total Invoices</p>
|
||||
<p className="text-2xl font-bold text-white mt-1">${(totalInvoiceValue / 1000).toFixed(0)}k</p>
|
||||
</div>
|
||||
<DollarSign className="h-6 w-6 text-cyan-500 opacity-50" />
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-white">{pendingApplications}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-gradient-to-br from-teal-950/40 to-teal-900/20 border-teal-500/20">
|
||||
<CardContent className="p-6 space-y-2">
|
||||
<Card className={`bg-gradient-to-br ${outstandingInvoices > 0 ? 'from-orange-950/40 to-orange-900/20 border-orange-500/20' : 'from-green-950/40 to-green-900/20 border-green-500/20'}`}>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm text-gray-400">Active Contracts</p>
|
||||
<CheckCircle className="h-5 w-5 text-teal-500" />
|
||||
<div>
|
||||
<p className="text-xs text-gray-400 uppercase tracking-wider">Outstanding</p>
|
||||
<p className="text-2xl font-bold text-white mt-1">{outstandingInvoices}</p>
|
||||
</div>
|
||||
<FileText className="h-6 w-6" style={{
|
||||
color: outstandingInvoices > 0 ? "#f97316" : "#22c55e",
|
||||
opacity: 0.5
|
||||
}} />
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-white">{activeContracts.length}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-gradient-to-br from-green-950/40 to-green-900/20 border-green-500/20">
|
||||
<CardContent className="p-6 space-y-2">
|
||||
<Card className="bg-gradient-to-br from-purple-950/40 to-purple-900/20 border-purple-500/20">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm text-gray-400">Total Spent</p>
|
||||
<DollarSign className="h-5 w-5 text-green-500" />
|
||||
<div>
|
||||
<p className="text-xs text-gray-400 uppercase tracking-wider">Team Members</p>
|
||||
<p className="text-2xl font-bold text-white mt-1">{teamMembers.length}</p>
|
||||
</div>
|
||||
<Users className="h-6 w-6 text-purple-500 opacity-50" />
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-white">
|
||||
${totalSpent.toLocaleString('en-US', { maximumFractionDigits: 0 })}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
|
@ -183,217 +203,292 @@ export default function ClientHub() {
|
|||
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-4 bg-blue-950/30 border border-blue-500/20 p-1">
|
||||
<TabsTrigger value="overview">Overview</TabsTrigger>
|
||||
<TabsTrigger value="opportunities">Opportunities</TabsTrigger>
|
||||
<TabsTrigger value="contracts">Contracts</TabsTrigger>
|
||||
<TabsTrigger value="support">Support</TabsTrigger>
|
||||
<TabsTrigger value="project">Project Status</TabsTrigger>
|
||||
<TabsTrigger value="invoices">Invoices & Billing</TabsTrigger>
|
||||
<TabsTrigger value="team">My AeThex Team</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* Overview Tab */}
|
||||
<TabsContent value="overview" className="space-y-6 animate-fade-in">
|
||||
{/* Account Manager Card */}
|
||||
<Card className="bg-gradient-to-br from-blue-950/40 to-blue-900/20 border-blue-500/30">
|
||||
{/* QuantumLeap Dashboard */}
|
||||
<Card className="bg-gradient-to-br from-blue-950/40 to-blue-900/20 border-blue-500/20">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Users className="h-5 w-5 text-blue-500" />
|
||||
Your AeThex Team
|
||||
</CardTitle>
|
||||
<CardTitle>My QuantumLeap Dashboard</CardTitle>
|
||||
<CardDescription>Live AI analytics and insights for your project</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* Account Manager */}
|
||||
<div className="p-4 bg-black/30 rounded-lg border border-blue-500/10">
|
||||
<p className="text-xs text-gray-400 uppercase tracking-wider mb-3">Account Manager</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center">
|
||||
<span className="text-white font-bold text-sm">AC</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-white">Account Manager</p>
|
||||
<p className="text-xs text-gray-400">account@aethex.dev</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="w-full mt-3 border-blue-500/30 text-blue-300 hover:bg-blue-500/10"
|
||||
>
|
||||
<MessageSquare className="h-4 w-4 mr-2" />
|
||||
Message
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Solutions Architect */}
|
||||
<div className="p-4 bg-black/30 rounded-lg border border-blue-500/10">
|
||||
<p className="text-xs text-gray-400 uppercase tracking-wider mb-3">Solutions Architect</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-cyan-500 to-teal-500 flex items-center justify-center">
|
||||
<span className="text-white font-bold text-sm">SA</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-white">Solutions Architect</p>
|
||||
<p className="text-xs text-gray-400">architect@aethex.dev</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="w-full mt-3 border-cyan-500/30 text-cyan-300 hover:bg-cyan-500/10"
|
||||
>
|
||||
<Phone className="h-4 w-4 mr-2" />
|
||||
Schedule Call
|
||||
</Button>
|
||||
</div>
|
||||
<CardContent>
|
||||
<div className="aspect-video bg-black/50 rounded-lg border border-blue-500/20 flex items-center justify-center">
|
||||
<iframe
|
||||
src="https://quantumleap.aethex.dev/embed"
|
||||
className="w-full h-full rounded-lg border-0"
|
||||
title="QuantumLeap Analytics"
|
||||
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-sm text-gray-400 mt-4">
|
||||
Embedded QuantumLeap analytics dashboard. Real-time data about your project performance.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Recent Activity */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Recent Opportunities */}
|
||||
<Card className="bg-gradient-to-br from-blue-950/40 to-blue-900/20 border-blue-500/20">
|
||||
<CardHeader>
|
||||
<CardTitle>Recent Opportunities</CardTitle>
|
||||
<CardDescription>Latest job postings</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{openOpportunities.length === 0 ? (
|
||||
<div className="text-center py-8 space-y-4">
|
||||
<AlertCircle className="h-12 w-12 mx-auto text-gray-500 opacity-50" />
|
||||
<p className="text-gray-400">No opportunities posted yet</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{openOpportunities.slice(0, 3).map((opp: any) => (
|
||||
<div key={opp.id} className="p-3 bg-black/30 rounded-lg border border-blue-500/10 hover:border-blue-500/30 transition">
|
||||
<div className="flex items-start justify-between gap-2 mb-2">
|
||||
<p className="font-semibold text-white text-sm">{opp.title}</p>
|
||||
<Badge variant="outline" className="text-xs">{opp.status}</Badge>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400">{opp.application_count} applications</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Recent Contracts */}
|
||||
{/* Active Contract Overview */}
|
||||
{activeContract ? (
|
||||
<Card className="bg-gradient-to-br from-cyan-950/40 to-cyan-900/20 border-cyan-500/20">
|
||||
<CardHeader>
|
||||
<CardTitle>Active Contracts</CardTitle>
|
||||
<CardDescription>Your current projects</CardDescription>
|
||||
<CardTitle>Project: {activeContract.title}</CardTitle>
|
||||
<CardDescription>Main engagement overview</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{contracts.length === 0 ? (
|
||||
<div className="text-center py-8 space-y-4">
|
||||
<AlertCircle className="h-12 w-12 mx-auto text-gray-500 opacity-50" />
|
||||
<p className="text-gray-400">No active contracts</p>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-gray-400 uppercase">Total Value</p>
|
||||
<p className="text-2xl font-bold text-white">${(activeContract.total_value / 1000).toFixed(0)}k</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-gray-400 uppercase">Status</p>
|
||||
<Badge className="bg-blue-600/50 text-blue-100">{activeContract.status}</Badge>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-gray-400 uppercase">Completion</p>
|
||||
<p className="text-2xl font-bold text-cyan-400">{Math.round((completedMilestones / totalMilestones) * 100)}%</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-xs text-gray-400">
|
||||
<span>Milestone Progress</span>
|
||||
<span>{completedMilestones} of {totalMilestones}</span>
|
||||
</div>
|
||||
<div className="w-full bg-black/50 rounded-full h-3">
|
||||
<div
|
||||
className="bg-gradient-to-r from-cyan-500 to-blue-500 h-3 rounded-full"
|
||||
style={{ width: `${(completedMilestones / totalMilestones) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={() => setActiveTab("project")}
|
||||
variant="outline"
|
||||
className="border-cyan-500/30 text-cyan-300 hover:bg-cyan-500/10"
|
||||
>
|
||||
View Full Timeline
|
||||
<ArrowRight className="h-4 w-4 ml-2" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Card className="bg-gradient-to-br from-blue-950/40 to-blue-900/20 border-blue-500/20">
|
||||
<CardContent className="p-8 text-center space-y-4">
|
||||
<Briefcase className="h-12 w-12 mx-auto text-blue-500 opacity-50" />
|
||||
<p className="text-gray-400">No active projects at this time</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Upcoming Invoices */}
|
||||
<Card className="bg-gradient-to-br from-purple-950/40 to-purple-900/20 border-purple-500/20">
|
||||
<CardHeader>
|
||||
<CardTitle>Recent Invoices</CardTitle>
|
||||
<CardDescription>Your latest billing activity</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{invoices.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<FileText className="h-12 w-12 mx-auto text-gray-500 opacity-50 mb-4" />
|
||||
<p className="text-gray-400">No invoices yet</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{invoices.slice(0, 5).map((invoice: any) => (
|
||||
<div key={invoice.id} className="flex items-center justify-between p-3 bg-black/30 rounded-lg border border-purple-500/10">
|
||||
<div className="flex-1">
|
||||
<p className="font-semibold text-white text-sm">{invoice.invoice_number}</p>
|
||||
<p className="text-xs text-gray-400">{new Date(invoice.created_at).toLocaleDateString()}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="font-semibold text-white">${invoice.amount?.toLocaleString()}</p>
|
||||
<Badge variant="outline" className={
|
||||
invoice.status === "paid" ? "bg-green-500/20 border-green-500/30 text-green-300" :
|
||||
invoice.status === "overdue" ? "bg-red-500/20 border-red-500/30 text-red-300" :
|
||||
""
|
||||
}>
|
||||
{invoice.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* Project Status Tab - Gantt Style */}
|
||||
<TabsContent value="project" className="space-y-4 animate-fade-in">
|
||||
<Card className="bg-gradient-to-br from-blue-950/40 to-blue-900/20 border-blue-500/20">
|
||||
<CardHeader>
|
||||
<CardTitle>Project Status & Milestones</CardTitle>
|
||||
<CardDescription>Gantt-style timeline of your main engagement</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!activeContract ? (
|
||||
<div className="text-center py-12">
|
||||
<AlertCircle className="h-12 w-12 mx-auto text-gray-500 opacity-50 mb-4" />
|
||||
<p className="text-gray-400">No active project</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{/* Project Header */}
|
||||
<div className="border-b border-blue-500/20 pb-4">
|
||||
<h3 className="text-xl font-bold text-white mb-2">{activeContract.title}</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
||||
<div>
|
||||
<p className="text-gray-400">Start Date</p>
|
||||
<p className="font-semibold text-white">{new Date(activeContract.start_date).toLocaleDateString()}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-400">End Date</p>
|
||||
<p className="font-semibold text-white">{new Date(activeContract.end_date).toLocaleDateString()}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-400">Total Value</p>
|
||||
<p className="font-semibold text-white">${activeContract.total_value?.toLocaleString()}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-400">Status</p>
|
||||
<Badge className="bg-blue-600/50 text-blue-100">{activeContract.status}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Milestones */}
|
||||
<div className="space-y-3">
|
||||
{contracts.slice(0, 3).map((contract: any) => (
|
||||
<div key={contract.id} className="p-3 bg-black/30 rounded-lg border border-cyan-500/10 hover:border-cyan-500/30 transition">
|
||||
<div className="flex items-start justify-between gap-2 mb-2">
|
||||
<p className="font-semibold text-white text-sm">{contract.title}</p>
|
||||
<Badge className="text-xs bg-green-600/50 text-green-100">{contract.status}</Badge>
|
||||
<h4 className="font-semibold text-white">Phases & Milestones</h4>
|
||||
{activeContract.milestones?.map((milestone: any, idx: number) => (
|
||||
<div key={milestone.id} className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3 flex-1">
|
||||
{milestone.status === "completed" ? (
|
||||
<CheckCircle className="h-5 w-5 text-green-500" />
|
||||
) : milestone.status === "in_progress" ? (
|
||||
<Clock className="h-5 w-5 text-blue-500" />
|
||||
) : (
|
||||
<AlertCircle className="h-5 w-5 text-gray-500" />
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<p className="font-semibold text-white">{milestone.title}</p>
|
||||
<p className="text-xs text-gray-400">{milestone.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm font-semibold text-white">${milestone.value?.toLocaleString()}</p>
|
||||
<p className="text-xs text-gray-400">{new Date(milestone.due_date).toLocaleDateString()}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Progress Bar for Milestone */}
|
||||
<div className="ml-8 space-y-1">
|
||||
<div className="flex justify-between text-xs text-gray-400">
|
||||
<span>Progress</span>
|
||||
<span>{milestone.progress || 0}%</span>
|
||||
</div>
|
||||
<div className="w-full bg-black/50 rounded-full h-2">
|
||||
<div
|
||||
className={`h-2 rounded-full ${
|
||||
milestone.status === "completed"
|
||||
? "bg-green-500"
|
||||
: milestone.status === "in_progress"
|
||||
? "bg-blue-500"
|
||||
: "bg-gray-500"
|
||||
}`}
|
||||
style={{ width: `${milestone.progress || 0}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400">${contract.total_amount?.toLocaleString()}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
{/* Opportunities Tab */}
|
||||
<TabsContent value="opportunities" className="space-y-4 animate-fade-in">
|
||||
<Card className="bg-gradient-to-br from-blue-950/40 to-blue-900/20 border-blue-500/20">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>Your Opportunities</CardTitle>
|
||||
<CardDescription>Job postings and projects</CardDescription>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => navigate("/nexus/post")}
|
||||
className="bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700"
|
||||
>
|
||||
Post New
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{opportunities.length === 0 ? (
|
||||
<div className="text-center py-12 space-y-4">
|
||||
<FileText className="h-12 w-12 mx-auto text-gray-500 opacity-50" />
|
||||
<p className="text-gray-400">No opportunities posted yet</p>
|
||||
<Button onClick={() => navigate("/nexus/post")}>
|
||||
Post First Opportunity
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{opportunities.map((opp: any) => (
|
||||
<div key={opp.id} className="p-4 bg-black/30 rounded-lg border border-blue-500/10 space-y-3">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-white">{opp.title}</h4>
|
||||
<p className="text-sm text-gray-400">{opp.description?.substring(0, 100)}...</p>
|
||||
</div>
|
||||
<Badge>{opp.status}</Badge>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-gray-400">${opp.budget_min?.toLocaleString()} - ${opp.budget_max?.toLocaleString()}</span>
|
||||
<span className="text-gray-500">{opp.application_count} applications</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* Contracts Tab */}
|
||||
<TabsContent value="contracts" className="space-y-4 animate-fade-in">
|
||||
{/* Invoices & Billing Tab */}
|
||||
<TabsContent value="invoices" className="space-y-4 animate-fade-in">
|
||||
<Card className="bg-gradient-to-br from-cyan-950/40 to-cyan-900/20 border-cyan-500/20">
|
||||
<CardHeader>
|
||||
<CardTitle>Contracts & Invoices</CardTitle>
|
||||
<CardDescription>Payment history and status</CardDescription>
|
||||
<CardTitle>Invoices & Billing</CardTitle>
|
||||
<CardDescription>Secure portal to manage all invoices and payments</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{contracts.length === 0 ? (
|
||||
<CardContent className="space-y-6">
|
||||
{/* Billing Summary */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="p-4 bg-black/30 rounded-lg border border-cyan-500/20 space-y-1">
|
||||
<p className="text-xs text-gray-400 uppercase">Total Invoices</p>
|
||||
<p className="text-3xl font-bold text-white">${(totalInvoiceValue / 1000).toFixed(0)}k</p>
|
||||
</div>
|
||||
<div className="p-4 bg-black/30 rounded-lg border border-green-500/20 space-y-1">
|
||||
<p className="text-xs text-gray-400 uppercase">Paid</p>
|
||||
<p className="text-3xl font-bold text-green-400">
|
||||
${(invoices.filter(i => i.status === "paid").reduce((acc, i) => acc + (i.amount || 0), 0) / 1000).toFixed(0)}k
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4 bg-black/30 rounded-lg border border-orange-500/20 space-y-1">
|
||||
<p className="text-xs text-gray-400 uppercase">Outstanding</p>
|
||||
<p className="text-3xl font-bold text-orange-400">
|
||||
${(invoices.filter(i => i.status !== "paid").reduce((acc, i) => acc + (i.amount || 0), 0) / 1000).toFixed(0)}k
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Invoices List */}
|
||||
{invoices.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<FileText className="h-12 w-12 mx-auto text-gray-500 opacity-50 mb-4" />
|
||||
<p className="text-gray-400">No contracts yet</p>
|
||||
<p className="text-gray-400">No invoices to display</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{contracts.map((contract: any) => (
|
||||
<div key={contract.id} className="p-4 bg-black/30 rounded-lg border border-cyan-500/10 space-y-3">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
{invoices.map((invoice: any) => (
|
||||
<div key={invoice.id} className="p-4 bg-black/30 rounded-lg border border-cyan-500/10 hover:border-cyan-500/30 transition space-y-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-white">{contract.title}</h4>
|
||||
<p className="text-sm text-gray-400">Contract Type: {contract.contract_type}</p>
|
||||
<h4 className="font-semibold text-white">{invoice.invoice_number}</h4>
|
||||
<p className="text-sm text-gray-400">{invoice.description}</p>
|
||||
</div>
|
||||
<Badge className="bg-green-600/50 text-green-100">{contract.status}</Badge>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-2 text-xs">
|
||||
<div>
|
||||
<p className="text-gray-400">Total Amount</p>
|
||||
<p className="font-semibold text-white">${contract.total_amount?.toLocaleString()}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-400">Your Cost</p>
|
||||
<p className="font-semibold text-white">${(contract.total_amount - (contract.aethex_commission_amount || 0))?.toLocaleString()}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-400">Creator Payout</p>
|
||||
<p className="font-semibold text-white">${contract.creator_payout_amount?.toLocaleString()}</p>
|
||||
<div className="text-right">
|
||||
<p className="text-lg font-semibold text-white">${invoice.amount?.toLocaleString()}</p>
|
||||
<Badge className={
|
||||
invoice.status === "paid"
|
||||
? "bg-green-500/20 border-green-500/30 text-green-300"
|
||||
: invoice.status === "overdue"
|
||||
? "bg-red-500/20 border-red-500/30 text-red-300"
|
||||
: "bg-yellow-500/20 border-yellow-500/30 text-yellow-300"
|
||||
}>
|
||||
{invoice.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4 text-sm text-gray-400">
|
||||
<div>
|
||||
<span>Issued:</span>
|
||||
<p className="text-white font-semibold">{new Date(invoice.issued_date).toLocaleDateString()}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>Due:</span>
|
||||
<p className="text-white font-semibold">{new Date(invoice.due_date).toLocaleDateString()}</p>
|
||||
</div>
|
||||
</div>
|
||||
{invoice.status !== "paid" && (
|
||||
<Button size="sm" variant="outline" className="w-full border-cyan-500/30 text-cyan-300 hover:bg-cyan-500/10">
|
||||
Pay Now
|
||||
<ArrowRight className="h-4 w-4 ml-2" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -402,61 +497,131 @@ export default function ClientHub() {
|
|||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* Support Tab */}
|
||||
<TabsContent value="support" className="space-y-4 animate-fade-in">
|
||||
<Card className="bg-gradient-to-br from-blue-950/40 to-blue-900/20 border-blue-500/20">
|
||||
{/* My AeThex Team Tab */}
|
||||
<TabsContent value="team" className="space-y-4 animate-fade-in">
|
||||
<Card className="bg-gradient-to-br from-purple-950/40 to-purple-900/20 border-purple-500/20">
|
||||
<CardHeader>
|
||||
<CardTitle>Support & Resources</CardTitle>
|
||||
<CardTitle>Your Dedicated AeThex Team</CardTitle>
|
||||
<CardDescription>White-glove service with personalized support</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-start border-blue-500/30 text-blue-300 hover:bg-blue-500/10 h-auto py-3"
|
||||
>
|
||||
<MessageSquare className="h-4 w-4 mr-3" />
|
||||
<div className="text-left">
|
||||
<div className="font-semibold">Chat Support</div>
|
||||
<div className="text-xs text-gray-400">Talk to our support team</div>
|
||||
</div>
|
||||
</Button>
|
||||
<CardContent>
|
||||
<div className="space-y-6">
|
||||
{/* Account Manager */}
|
||||
{accountManager ? (
|
||||
<div className="p-6 bg-black/30 rounded-lg border border-blue-500/20 space-y-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<img
|
||||
src={accountManager.avatar_url || "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop"}
|
||||
alt={accountManager.full_name}
|
||||
className="w-16 h-16 rounded-full border-2 border-blue-500/40 object-cover"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<Badge className="bg-blue-600/50 text-blue-100 mb-2">Account Manager</Badge>
|
||||
<h3 className="text-lg font-semibold text-white">{accountManager.full_name}</h3>
|
||||
<p className="text-sm text-gray-400 mb-2">{accountManager.title}</p>
|
||||
<p className="text-sm text-gray-300 mb-4">{accountManager.bio}</p>
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" variant="outline" className="border-blue-500/30 text-blue-300 hover:bg-blue-500/10">
|
||||
<MessageSquare className="h-4 w-4 mr-2" />
|
||||
Message
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" className="border-blue-500/30 text-blue-300 hover:bg-blue-500/10">
|
||||
<Phone className="h-4 w-4 mr-2" />
|
||||
Call
|
||||
</Button>
|
||||
<Button size="sm" className="bg-blue-600 hover:bg-blue-700">
|
||||
<Calendar className="h-4 w-4 mr-2" />
|
||||
Book Meeting
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{accountManager.contact_info && (
|
||||
<div className="pt-4 border-t border-blue-500/20 space-y-2 text-sm">
|
||||
<p className="text-gray-400">
|
||||
<span className="font-semibold">Email:</span> {accountManager.contact_info.email}
|
||||
</p>
|
||||
{accountManager.contact_info.phone && (
|
||||
<p className="text-gray-400">
|
||||
<span className="font-semibold">Phone:</span> {accountManager.contact_info.phone}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-6 bg-black/30 rounded-lg border border-blue-500/20 text-center py-12">
|
||||
<Users className="h-12 w-12 mx-auto text-blue-500 opacity-50 mb-4" />
|
||||
<p className="text-gray-400">Account Manager TBA</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-start border-blue-500/30 text-blue-300 hover:bg-blue-500/10 h-auto py-3"
|
||||
>
|
||||
<Phone className="h-4 w-4 mr-3" />
|
||||
<div className="text-left">
|
||||
<div className="font-semibold">Schedule a Call</div>
|
||||
<div className="text-xs text-gray-400">Book time with your account manager</div>
|
||||
</div>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-start border-blue-500/30 text-blue-300 hover:bg-blue-500/10 h-auto py-3"
|
||||
>
|
||||
<FileText className="h-4 w-4 mr-3" />
|
||||
<div className="text-left">
|
||||
<div className="font-semibold">Documentation</div>
|
||||
<div className="text-xs text-gray-400">Learn how to use the platform</div>
|
||||
</div>
|
||||
</Button>
|
||||
{/* Solutions Architect */}
|
||||
{solutionsArchitect ? (
|
||||
<div className="p-6 bg-black/30 rounded-lg border border-purple-500/20 space-y-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<img
|
||||
src={solutionsArchitect.avatar_url || "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop"}
|
||||
alt={solutionsArchitect.full_name}
|
||||
className="w-16 h-16 rounded-full border-2 border-purple-500/40 object-cover"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<Badge className="bg-purple-600/50 text-purple-100 mb-2">Solutions Architect</Badge>
|
||||
<h3 className="text-lg font-semibold text-white">{solutionsArchitect.full_name}</h3>
|
||||
<p className="text-sm text-gray-400 mb-2">{solutionsArchitect.title}</p>
|
||||
<p className="text-sm text-gray-300 mb-4">{solutionsArchitect.bio}</p>
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" variant="outline" className="border-purple-500/30 text-purple-300 hover:bg-purple-500/10">
|
||||
<MessageSquare className="h-4 w-4 mr-2" />
|
||||
Message
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" className="border-purple-500/30 text-purple-300 hover:bg-purple-500/10">
|
||||
<Phone className="h-4 w-4 mr-2" />
|
||||
Call
|
||||
</Button>
|
||||
<Button size="sm" className="bg-purple-600 hover:bg-purple-700">
|
||||
<Calendar className="h-4 w-4 mr-2" />
|
||||
Book Meeting
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{solutionsArchitect.contact_info && (
|
||||
<div className="pt-4 border-t border-purple-500/20 space-y-2 text-sm">
|
||||
<p className="text-gray-400">
|
||||
<span className="font-semibold">Email:</span> {solutionsArchitect.contact_info.email}
|
||||
</p>
|
||||
{solutionsArchitect.contact_info.phone && (
|
||||
<p className="text-gray-400">
|
||||
<span className="font-semibold">Phone:</span> {solutionsArchitect.contact_info.phone}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-6 bg-black/30 rounded-lg border border-purple-500/20 text-center py-12">
|
||||
<Users className="h-12 w-12 mx-auto text-purple-500 opacity-50 mb-4" />
|
||||
<p className="text-gray-400">Solutions Architect TBA</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Request New SOW */}
|
||||
<Card className="bg-gradient-to-br from-cyan-950/40 to-cyan-900/20 border-cyan-500/30">
|
||||
{/* Quick Support Card */}
|
||||
<Card className="bg-gradient-to-br from-cyan-950/40 to-cyan-900/20 border-cyan-500/20">
|
||||
<CardHeader>
|
||||
<CardTitle>Request New Scope</CardTitle>
|
||||
<CardTitle>Need Support?</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-300 mb-4">
|
||||
Need a new Statement of Work (SOW) or to modify an existing contract? Contact your account manager.
|
||||
</p>
|
||||
<Button
|
||||
className="w-full bg-gradient-to-r from-cyan-600 to-teal-600 hover:from-cyan-700 hover:to-teal-700"
|
||||
>
|
||||
Request New SOW
|
||||
<CardContent className="space-y-3">
|
||||
<Button className="w-full bg-cyan-600 hover:bg-cyan-700">
|
||||
<MessageSquare className="h-4 w-4 mr-2" />
|
||||
Open Support Ticket
|
||||
</Button>
|
||||
<Button variant="outline" className="w-full border-cyan-500/30 text-cyan-300 hover:bg-cyan-500/10">
|
||||
<Phone className="h-4 w-4 mr-2" />
|
||||
Schedule Support Call
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
|
|||
Loading…
Reference in a new issue